:root {
    --accent: #c8a84e;
    --accent-light: #f0e6c4;
    --accent-dark: #a68a3e;
    --dark: #111;
    --dark-soft: #1a1a1a;
    --gray-100: #f7f7f7;
    --gray-200: #ebebeb;
    --gray-400: #999;
    --gray-600: #555;
}

body {
    background-color: var(--gray-100);
    color: var(--dark);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Navbar ─────────────────────────────────────── */

.navbar {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
    border-bottom: 3px solid var(--accent);
    padding: .6rem 1rem;
}

.navbar-brand {
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 1.15rem;
    color: #fff !important;
}

.navbar-brand i {
    color: var(--accent);
}

.nav-link {
    color: rgba(255,255,255,.6) !important;
    font-weight: 500;
    font-size: .9rem;
    transition: color .2s;
}

.nav-link:hover {
    color: var(--accent) !important;
}

.nav-link.active {
    color: #fff !important;
    border-bottom: 2px solid var(--accent);
}

/* ── Cards ──────────────────────────────────────── */

.card {
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    border-radius: 10px;
    border: 1px solid var(--gray-200);
    background: #fff;
    transition: box-shadow .2s;
}

.card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

.card-header {
    font-weight: 600;
    font-size: .9rem;
    background-color: #fafafa;
    border-bottom: 1px solid var(--gray-200);
    padding: .65rem 1rem;
}

/* Dashboard stat cards */
.stat-card {
    border: none;
    border-radius: 12px;
    color: #fff;
}

.stat-card .card-body {
    padding: 1.25rem;
}

.stat-card .card-title {
    font-size: .85rem;
    opacity: .85;
    margin-bottom: .5rem;
}

.stat-card .display-6 {
    font-size: 1.8rem;
}

.stat-products { background: linear-gradient(135deg, #1a1a1a, #333); }
.stat-value { background: linear-gradient(135deg, var(--accent-dark), var(--accent)); color: var(--dark) !important; }
.stat-value .card-title { color: var(--dark) !important; opacity: .7; }
.stat-alerts { background: linear-gradient(135deg, #b91c1c, #ef4444); }
.stat-ok { background: linear-gradient(135deg, #555, #888); }

/* ── Tables ─────────────────────────────────────── */

.table {
    font-size: .9rem;
}

.table th {
    font-weight: 700;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .5px;
    color: var(--gray-600);
}

.table-dark {
    --bs-table-bg: var(--dark-soft);
    --bs-table-border-color: #333;
}

.table-dark th {
    color: rgba(255,255,255,.8);
}

.table-warning {
    --bs-table-bg: #fef9ee;
    --bs-table-border-color: #f0e6c4;
}

.table-danger {
    --bs-table-bg: #fef2f2;
    --bs-table-border-color: #fecaca;
}

/* ── Links ──────────────────────────────────────── */

a {
    color: var(--accent-dark);
    text-decoration: none;
    font-weight: 500;
    transition: color .2s;
}

a:hover {
    color: var(--dark);
    text-decoration: underline;
}

.table a {
    color: var(--dark);
    font-weight: 600;
}

.table a:hover {
    color: var(--accent-dark);
}

/* ── Buttons ────────────────────────────────────── */

.btn-primary {
    background-color: var(--dark);
    border-color: var(--dark);
}

.btn-primary:hover {
    background-color: #333;
    border-color: #333;
}

.btn-outline-primary {
    color: var(--dark);
    border-color: var(--dark);
}

.btn-outline-primary:hover {
    background-color: var(--dark);
    border-color: var(--dark);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--gray-600);
    border-color: var(--gray-200);
}

.btn-outline-secondary:hover {
    background-color: var(--dark);
    border-color: var(--dark);
    color: #fff;
}

/* ── Badges ─────────────────────────────────────── */

.badge.bg-success {
    background-color: #15803d !important;
}

.badge.bg-danger {
    background-color: #b91c1c !important;
}

.badge.bg-info {
    background-color: var(--accent-dark) !important;
    color: #fff !important;
}

/* ── Forms ──────────────────────────────────────── */

.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem rgba(200,168,78,.2);
}

/* ── Typography ─────────────────────────────────── */

.display-5, .display-6 {
    font-weight: 800;
}

h2 {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--dark);
}

h2 i {
    color: var(--accent-dark);
}

code {
    color: var(--gray-600);
    background: var(--gray-200);
    padding: .15em .4em;
    border-radius: 4px;
    font-size: .85em;
}

/* ── Container ──────────────────────────────────── */

.container-fluid {
    padding: 1.25rem 2rem;
    max-width: 1400px;
}

/* ── Footer ─────────────────────────────────────── */

.site-footer {
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
    border-top: 1px solid var(--gray-200);
    color: var(--gray-400);
    font-size: .8rem;
}

/* ── Login ──────────────────────────────────────── */

.login-card {
    border: 2px solid var(--dark) !important;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    border-radius: 12px;
}

.login-card .btn-primary {
    background: var(--dark);
    border-color: var(--dark);
    font-weight: 600;
    letter-spacing: .5px;
}

.login-card .btn-primary:hover {
    background: #333;
    border-color: #333;
}

.login-card .bi-box-seam {
    color: var(--accent) !important;
}

.login-card .input-group-text {
    background: var(--gray-100);
    border-color: var(--gray-200);
}

/* ── Movement cards (product detail) ────────────── */

.card-header.bg-success {
    background: linear-gradient(135deg, #15803d, #22c55e) !important;
    border: none;
}

.card-header.bg-danger {
    background: linear-gradient(135deg, #b91c1c, #ef4444) !important;
    border: none;
}

.card-header.bg-info {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent)) !important;
    border: none;
    color: var(--dark) !important;
}

/* ── Scrollbar ──────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* ── Auto-refresh icon animation ───────────────── */

.spin-icon {
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Dark Mode ─────────────────────────────────── */

[data-theme="dark"] {
    --gray-100: #1a1a1a;
    --gray-200: #2a2a2a;
    --gray-400: #888;
    --gray-600: #bbb;
    --dark: #eee;
    --dark-soft: #111;
}

[data-theme="dark"] body {
    background-color: #121212;
    color: #e0e0e0;
}

[data-theme="dark"] .card {
    background: #1e1e1e;
    border-color: #333;
}

[data-theme="dark"] .card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

[data-theme="dark"] .card-header {
    background-color: #252525;
    border-bottom-color: #333;
    color: #ddd;
}

[data-theme="dark"] h2 {
    color: #eee;
}

[data-theme="dark"] .table {
    color: #ddd;
    --bs-table-bg: transparent;
}

[data-theme="dark"] .table-dark {
    --bs-table-bg: #111;
    --bs-table-border-color: #333;
}

[data-theme="dark"] .table-dark th {
    color: rgba(255,255,255,.8);
}

[data-theme="dark"] .table-warning {
    --bs-table-bg: #332b00;
    --bs-table-border-color: #554400;
    --bs-table-color: #e0e0e0;
}

[data-theme="dark"] .table-danger {
    --bs-table-bg: #330000;
    --bs-table-border-color: #550000;
    --bs-table-color: #e0e0e0;
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: rgba(255,255,255,.03);
    color: #eee;
}

[data-theme="dark"] .table th {
    color: #aaa;
}

[data-theme="dark"] td {
    border-color: #333 !important;
}

[data-theme="dark"] a {
    color: var(--accent);
}

[data-theme="dark"] a:hover {
    color: var(--accent-light);
}

[data-theme="dark"] .table a {
    color: var(--accent);
}

[data-theme="dark"] .table a:hover {
    color: var(--accent-light);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #252525;
    border-color: #444;
    color: #ddd;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #2a2a2a;
    border-color: var(--accent);
    color: #eee;
}

[data-theme="dark"] .form-control::placeholder {
    color: #666;
}

[data-theme="dark"] .input-group-text {
    background-color: #2a2a2a;
    border-color: #444;
    color: #aaa;
}

[data-theme="dark"] .btn-primary {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
    color: #111;
}

[data-theme="dark"] .btn-primary:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #111;
}

[data-theme="dark"] .btn-outline-primary {
    color: var(--accent);
    border-color: var(--accent-dark);
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
    color: #111;
}

[data-theme="dark"] .btn-outline-secondary {
    color: #aaa;
    border-color: #444;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #333;
    border-color: #555;
    color: #eee;
}

[data-theme="dark"] .btn-outline-danger {
    color: #ef4444;
    border-color: #b91c1c;
}

[data-theme="dark"] .btn-outline-danger:hover {
    background-color: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

[data-theme="dark"] code {
    background: #2a2a2a;
    color: var(--accent);
}

[data-theme="dark"] .text-muted {
    color: #888 !important;
}

[data-theme="dark"] .site-footer {
    border-top-color: #333;
    color: #555;
}

[data-theme="dark"] .alert {
    border-color: #444;
}

[data-theme="dark"] .alert-success {
    background-color: #0a2e1a;
    color: #6ee7b7;
    border-color: #15803d;
}

[data-theme="dark"] .alert-danger {
    background-color: #2e0a0a;
    color: #fca5a5;
    border-color: #b91c1c;
}

[data-theme="dark"] .alert-warning {
    background-color: #2e2a0a;
    color: #fcd34d;
    border-color: #92400e;
}

[data-theme="dark"] .dropdown-menu {
    background-color: #1e1e1e;
    border-color: #444;
}

[data-theme="dark"] .dropdown-item {
    color: #ddd;
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: #2a2a2a;
    color: var(--accent);
}

[data-theme="dark"] .login-card {
    background: #1e1e1e !important;
    border-color: var(--accent-dark) !important;
}

[data-theme="dark"] .login-card .form-control {
    background-color: #252525;
    border-color: #444;
    color: #ddd;
}

[data-theme="dark"] .login-card .input-group-text {
    background: #2a2a2a;
    border-color: #444;
    color: #888;
}

[data-theme="dark"] .badge.bg-secondary {
    background-color: #444 !important;
}

[data-theme="dark"] .stat-value {
    color: #111 !important;
}

[data-theme="dark"] .stat-value .card-title {
    color: #111 !important;
}

[data-theme="dark"] .container-fluid {
    background-color: #121212;
}

/* ── Notification dropdown ─────────────────────── */

#notifDropdown .dropdown-item {
    white-space: normal;
    line-height: 1.3;
}

#notifDropdown .dropdown-header {
    font-size: .85rem;
    font-weight: 600;
}

[data-theme="dark"] #notifDropdown {
    background-color: #1e1e1e;
    border-color: #444;
}

/* ── Scanner ───────────────────────────────────── */

#scanner video {
    border-radius: 8px;
}

#productPanel .display-6 {
    font-size: 1.5rem;
}

/* ── Mobile responsive ─────────────────────────── */

@media (max-width: 768px) {
    .container-fluid {
        padding: 0.75rem 1rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    .stat-card .display-6 {
        font-size: 1.3rem;
    }

    .display-5 {
        font-size: 1.5rem;
    }

    .display-6 {
        font-size: 1.2rem;
    }

    .table {
        font-size: .8rem;
    }

    .table th {
        font-size: .65rem;
    }

    .btn {
        min-height: 44px;
    }

    .btn-lg {
        padding: .5rem .75rem;
        font-size: .9rem;
    }

    .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    .navbar-brand {
        font-size: 1rem;
        letter-spacing: 1px;
    }

    .nav-link {
        font-size: .85rem;
    }

    .card-body {
        padding: .75rem;
    }

    .card-header {
        padding: .5rem .75rem;
        font-size: .8rem;
    }

    .row.mb-4.g-3 > [class*="col-md"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .form-control, .form-select {
        font-size: .85rem;
    }

    .input-group-text {
        font-size: .8rem;
    }

    #notifDropdown {
        width: 280px !important;
        right: -60px;
    }

    .site-footer {
        font-size: .7rem;
        padding: 1rem 0;
    }
}

@media (max-width: 480px) {
    .container-fluid {
        padding: 0.5rem 0.75rem;
    }

    .row.mb-4.g-3 > [class*="col-md"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .stat-card .display-6 {
        font-size: 1.1rem;
    }

    .display-5, .display-6 {
        font-size: 1rem;
    }

    .table {
        font-size: .75rem;
    }

    h2 {
        font-size: 1.1rem;
    }

    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 0.5rem;
    }
}