/*
 * Zenith / shadcn visual layer.
 * This file intentionally changes only color, border, shadow and motion.
 * Page structure, card density, sizing and interaction logic remain owned by
 * the original templates.
 */
:root {
    --zenith-bg-light: #f7f7f7;
    --zenith-bg-dark: #0a0a0a;
    --zenith-bg: var(--zenith-bg-light);
    --zenith-surface: #ffffff;
    --zenith-surface-muted: #fafafa;
    --zenith-surface-hover: #f5f5f5;
    --zenith-text: #171717;
    --zenith-text-secondary: #525252;
    --zenith-text-muted: #737373;
    --zenith-border: #e5e5e5;
    --zenith-border-strong: #d4d4d4;
    --zenith-primary: #171717;
    --zenith-primary-hover: #262626;
    --zenith-primary-foreground: #ffffff;
    --zenith-ring: rgba(23, 23, 23, 0.15);
    --zenith-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --zenith-shadow-md: 0 8px 22px rgba(0, 0, 0, 0.07);
    --zenith-success-surface: #ecfdf5;
    --zenith-success-border: #a7f3d0;
    --zenith-success-text: #047857;
    --zenith-warning-surface: #fffbeb;
    --zenith-warning-border: #fde68a;
    --zenith-warning-text: #b45309;
    --zenith-info-surface: #eff6ff;
    --zenith-info-border: #bfdbfe;
    --zenith-info-text: #1d4ed8;
    --zenith-danger-surface: #fef2f2;
    --zenith-danger-border: #fecaca;
    --zenith-danger-text: #b91c1c;

    --primary-color: var(--zenith-primary);
    --primary-hover: var(--zenith-primary-hover);
    --primary-dark: #0a0a0a;
    --primary-light: #f5f5f5;
    --bg-color: var(--zenith-bg);
    --bg-secondary: var(--zenith-surface-muted);
    --surface-color: var(--zenith-surface);
    --border-color: var(--zenith-border);
    --border-light: #eeeeee;
    --text-primary: var(--zenith-text);
    --text-secondary: var(--zenith-text-secondary);
    --text-tertiary: var(--zenith-text-muted);
    --shadow-sm: var(--zenith-shadow-sm);
    --shadow-md: var(--zenith-shadow-md);
}

[data-theme="dark"] {
    --zenith-bg: var(--zenith-bg-dark);
    --zenith-surface: #171717;
    --zenith-surface-muted: #111111;
    --zenith-surface-hover: #202020;
    --zenith-text: #f5f5f5;
    --zenith-text-secondary: #d4d4d4;
    --zenith-text-muted: #a3a3a3;
    --zenith-border: #2b2b2b;
    --zenith-border-strong: #404040;
    --zenith-primary: #f5f5f5;
    --zenith-primary-hover: #e5e5e5;
    --zenith-primary-foreground: #171717;
    --zenith-ring: rgba(245, 245, 245, 0.18);
    --zenith-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
    --zenith-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.34);
    --zenith-success-surface: rgba(16, 185, 129, 0.12);
    --zenith-success-border: rgba(52, 211, 153, 0.34);
    --zenith-success-text: #6ee7b7;
    --zenith-warning-surface: rgba(245, 158, 11, 0.12);
    --zenith-warning-border: rgba(251, 191, 36, 0.34);
    --zenith-warning-text: #fbbf24;
    --zenith-info-surface: rgba(59, 130, 246, 0.13);
    --zenith-info-border: rgba(96, 165, 250, 0.34);
    --zenith-info-text: #93c5fd;
    --zenith-danger-surface: rgba(239, 68, 68, 0.12);
    --zenith-danger-border: rgba(248, 113, 113, 0.34);
    --zenith-danger-text: #fca5a5;
    --primary-dark: #ffffff;
    --primary-light: #262626;
    --border-light: #242424;
}

html,
body {
    background-color: var(--zenith-bg) !important;
    color: var(--zenith-text);
}

.topbar,
.card,
.shop-card,
.config-section,
.modal-content,
.login-container,
.table-container,
.finance-card,
.data-card,
.stat-card {
    background-color: var(--zenith-surface) !important;
    border-color: var(--zenith-border) !important;
    box-shadow: var(--zenith-shadow-sm) !important;
}

.card,
.shop-card,
.finance-card,
.data-card,
.stat-card {
    animation: zenith-soft-enter 180ms ease-out both;
    transition: background-color 160ms ease,
                border-color 160ms ease,
                box-shadow 160ms ease !important;
}

.card:hover,
.shop-card:hover,
.finance-card:hover,
.data-card:hover,
.stat-card:hover {
    border-color: var(--zenith-border-strong) !important;
    box-shadow: var(--zenith-shadow-md) !important;
    transform: none !important;
}

.topbar,
.modal-header,
.modal-footer,
.shop-card-header,
.shop-card-footer,
.shop-section,
.shop-stat-item,
.shop-actual-weight,
.shop-info,
.config-section-header,
.table-header,
thead,
th {
    border-color: var(--zenith-border) !important;
}

.topbar,
.modal-header,
.modal-footer,
.shop-card-header,
.shop-card-footer,
.shop-section,
.shop-stat-item,
.shop-actual-weight,
.shop-info,
.config-section-header,
.table-header,
thead,
th {
    background-image: none !important;
}

.shop-card-header,
.shop-card-footer,
.shop-section,
.shop-stat-item,
.shop-actual-weight,
.shop-info,
.config-section-header,
.table-header,
thead,
th {
    background-color: var(--zenith-surface-muted) !important;
}

.supplement-section {
    background-color: var(--warning-light) !important;
}

.logo-icon,
.page-title-icon,
.card-title::before {
    background: var(--zenith-primary) !important;
    color: var(--zenith-primary-foreground) !important;
    box-shadow: none !important;
}

.logo-text,
.gradient-text,
.page-title {
    background: none !important;
    color: var(--zenith-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

.btn,
.shop-btn,
.view-records-btn,
.close,
.theme-toggle {
    transition: background-color 150ms ease,
                border-color 150ms ease,
                color 150ms ease,
                box-shadow 150ms ease,
                opacity 150ms ease !important;
}

.btn:hover,
.shop-btn:hover,
.view-records-btn:hover,
.theme-toggle:hover {
    transform: none !important;
}

.modal .close,
.return-timeline-dialog .close {
    transform: none !important;
    transition: background-color 150ms ease,
                border-color 150ms ease,
                color 150ms ease !important;
}

.modal .close-icon,
.return-timeline-dialog .close-icon {
    display: inline-flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transform: rotate(0deg) scale(1);
    transform-origin: 50% 50%;
    will-change: transform;
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.modal .close:hover,
.return-timeline-dialog .close:hover {
    transform: none !important;
}

.modal .close:hover .close-icon,
.return-timeline-dialog .close:hover .close-icon {
    transform: rotate(180deg) scale(1.06);
}

.modal .close:active .close-icon,
.return-timeline-dialog .close:active .close-icon {
    transform: rotate(180deg) scale(0.92) !important;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 9999;
}

.btn-primary,
.shop-btn,
.shop-btn-primary,
.btn-submit,
.btn-save,
.btn-add-user,
button[type="submit"] {
    background: var(--zenith-primary) !important;
    border-color: var(--zenith-primary) !important;
    color: var(--zenith-primary-foreground) !important;
    box-shadow: none !important;
}

.btn-primary:hover:not(:disabled),
.shop-btn:hover:not(:disabled),
.shop-btn-primary:hover:not(:disabled),
.btn-submit:hover:not(:disabled),
.btn-save:hover:not(:disabled),
.btn-add-user:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled) {
    background: var(--zenith-primary-hover) !important;
    border-color: var(--zenith-primary-hover) !important;
    box-shadow: 0 0 0 3px var(--zenith-ring) !important;
}

.btn-secondary,
.view-records-btn,
.theme-toggle,
.close {
    background-color: var(--zenith-surface) !important;
    border-color: var(--zenith-border) !important;
    color: var(--zenith-text-secondary) !important;
    box-shadow: none !important;
}

.btn-secondary:hover:not(:disabled),
.view-records-btn:hover,
.theme-toggle:hover,
.close:hover {
    background-color: var(--zenith-surface-hover) !important;
    border-color: var(--zenith-border-strong) !important;
    color: var(--zenith-text) !important;
}

input,
select,
textarea,
.form-control,
.shop-input,
.shop-textarea {
    background-color: var(--zenith-surface) !important;
    border-color: var(--zenith-border) !important;
    color: var(--zenith-text) !important;
    box-shadow: none !important;
    transition: border-color 150ms ease, box-shadow 150ms ease !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.shop-input:focus,
.shop-textarea:focus {
    border-color: var(--zenith-primary) !important;
    box-shadow: 0 0 0 3px var(--zenith-ring) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--zenith-text-muted) !important;
}

tbody tr,
.order-item,
.record-item,
.shop-record-item {
    transition: background-color 140ms ease, border-color 140ms ease !important;
}

tbody tr:hover,
.order-item:hover,
.record-item:hover,
.shop-record-item:hover {
    background-color: var(--zenith-surface-hover) !important;
    transform: none !important;
}

.erp321-fetch-card,
.erp321-source-note,
.erp321-ratio-control,
.advance-order-card,
.advance-order-summary,
.price-card,
.price-section,
.login-header {
    background-image: none !important;
    border-color: var(--zenith-border) !important;
}

.erp321-fetch-card,
.erp321-source-note,
.erp321-ratio-control,
.advance-order-card,
.advance-order-summary,
.price-card,
.price-section {
    background-color: var(--zenith-surface-muted) !important;
    color: var(--zenith-text) !important;
}

.badge,
.status-badge,
.entity-badge,
.material-badge {
    box-shadow: none !important;
}

.alert,
.message,
.notification,
.toast {
    box-shadow: var(--zenith-shadow-md) !important;
}

[data-theme="dark"] .topbar,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .login-container {
    color: var(--zenith-text);
}

[data-theme="dark"] .supplement-section {
    background-color: #292111 !important;
}

/* Return and supplement records use semantic surfaces so every nested view
   follows the active theme instead of relying on fixed light-mode colors. */
.management-record-summary > div {
    background-color: var(--zenith-surface-muted) !important;
    border-color: var(--zenith-border) !important;
    color: var(--zenith-text-secondary);
}

.management-record-summary strong {
    color: var(--zenith-text);
}

.management-record-summary strong.is-warning {
    color: var(--zenith-warning-text);
}

.management-record-summary strong.is-success {
    color: var(--zenith-success-text);
}

.management-record-item {
    --management-record-accent: var(--zenith-warning-text);
    background-color: var(--zenith-warning-surface) !important;
    border: 1px solid var(--zenith-warning-border);
    border-left: 3px solid var(--management-record-accent);
    color: var(--zenith-text);
}

.management-record-item.is-consumed {
    --management-record-accent: var(--zenith-success-text);
    background-color: var(--zenith-success-surface) !important;
    border-color: var(--zenith-success-border);
    border-left-color: var(--management-record-accent);
}

.management-record-item.is-partial {
    --management-record-accent: var(--zenith-info-text);
    background-color: var(--zenith-info-surface) !important;
    border-color: var(--zenith-info-border);
    border-left-color: var(--management-record-accent);
}

.management-record-item.is-warning {
    --management-record-accent: var(--zenith-danger-text);
    background-color: var(--zenith-danger-surface) !important;
    border-color: var(--zenith-danger-border);
    border-left-color: var(--management-record-accent);
}

.management-record-status-title,
.management-record-accent-text {
    color: var(--management-record-accent);
}

.management-record-child,
.return-timeline-meta,
.return-timeline-entry {
    background-color: var(--zenith-surface) !important;
    border: 1px solid var(--zenith-border) !important;
    color: var(--zenith-text);
}

.management-record-child {
    box-shadow: var(--zenith-shadow-sm);
}

.management-record-order-reference,
.management-record-details summary {
    color: var(--zenith-text-secondary) !important;
}

.management-record-muted,
.return-timeline-empty {
    color: var(--zenith-text-muted) !important;
}

.management-record-note-warning {
    color: var(--zenith-warning-text) !important;
}

.management-record-note-danger {
    color: var(--zenith-danger-text) !important;
}

.return-timeline-modal {
    background: rgba(0, 0, 0, 0.58);
}

.return-timeline-dialog {
    width: min(680px, 96vw);
    max-height: 86vh;
    overflow: auto;
    padding: 16px;
    border: 1px solid var(--zenith-border);
    border-radius: 8px;
    background: var(--zenith-surface);
    color: var(--zenith-text);
    box-shadow: var(--zenith-shadow-md);
}

.return-timeline-entry {
    border-left: 3px solid var(--zenith-success-text) !important;
}

@keyframes zenith-soft-enter {
    from {
        opacity: 0;
        filter: saturate(0.88);
    }

    to {
        opacity: 1;
        filter: saturate(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .card,
    .shop-card,
    .finance-card,
    .data-card,
    .stat-card {
        animation: none !important;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .modal .close:hover .close-icon,
    .return-timeline-dialog .close:hover .close-icon,
    .modal .close:active .close-icon,
    .return-timeline-dialog .close:active .close-icon {
        transform: none !important;
    }
}