/* ===== BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: #0f172a;
    background-image: url('bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow-x: hidden;
}
/* ===== BACKGROUND EFFECTS ===== */
.bg-gradient {
    position: fixed;
    inset: 0;
    background: 
        radial-gradient(ellipse at 15% 50%, rgba(22, 163, 74, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 85% 50%, rgba(21, 128, 61, 0.1) 0%, transparent 60%),
        url('bg.jpg') center/cover no-repeat;
    z-index: 0;
}

/* Glass overlay - DARKER for more contrast */
.bg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 0;
    pointer-events: none;
}

.bg-glow {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
}

.bg-glow-1 {
    width: 400px;
    height: 400px;
    background: #16a34a;
    top: -100px;
    right: -100px;
    opacity: 0.3;
}

.bg-glow-2 {
    width: 300px;
    height: 300px;
    background: #15803d;
    bottom: -80px;
    left: -80px;
    opacity: 0.2;
}

.geo-shape {
    position: fixed;
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.geo-shape-1 {
    width: 600px;
    height: 600px;
    bottom: -200px;
    left: -200px;
}

.geo-shape-2 {
    width: 300px;
    height: 300px;
    top: -80px;
    right: -80px;
}

/* ===== make in input.css minimize the size of payment formST ===== */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    max-width: min(320px, calc(100vw - 40px));
    width: auto;
    pointer-events: none;
}

.toast {
    background: #1e293b;
    color: #e2e8f0;
    padding: 10px 12px;
    border-radius: 9px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    border-left: 3px solid #16a34a;
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(100%, 320px);
    font-size: 0.82rem;
    animation: slideIn 0.3s ease;
    backdrop-filter: blur(12px);
    pointer-events: auto;
}

.toast.cart-toast {
    width: auto;
    max-width: 260px;
    padding: 7px 10px;
    border-left-color: #22c55e;
    font-size: 0.75rem;
    opacity: 0.9;
}

.toast.error {
    border-left-color: #ef4444;
}

.toast.success {
    border-left-color: #22c55e;
}

.toast i {
    font-size: 15px;
}

.toast .toast-close {
    margin-left: auto;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
}

@media (max-width: 480px) {
    .toast-container {
        right: 12px;
        bottom: 12px;
        max-width: calc(100vw - 24px);
    }

    .toast {
        max-width: 250px;
    }

    .toast.cart-toast {
        max-width: 210px;
    }
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}



.modal-card {
    position: relative;
    width: min(100%, 440px);
    padding: 36px 32px 32px;
    text-align: center;
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    /* animation removed — was triggering Chromium paint deferral */
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 16px;
}

.modal-close:hover,
.modal-close:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

.modal-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
    font-size: 28px;
}

.modal-card h2 {
    margin-bottom: 10px;
    color: #f8fafc;
    font-size: 24px;
}

.modal-card p {
    color: #cbd5e1;
    line-height: 1.6;
}

.modal-email {
    margin: 14px 0 24px;
    color: #f8fafc !important;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.modal-card .submit-btn {
    width: 100%;
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== LOGIN CONTAINER ===== */
/* ===== LOGIN CONTAINER ===== */
.main-container {
    display: flex;
    max-width: 1000px;
    width: 95%;
    min-height: 560px;
    background: rgba(30, 41, 59, 0.65);  /* Slightly more transparent */
    backdrop-filter: blur(24px);  /* Increased from 20px to 24px */
    -webkit-backdrop-filter: blur(24px);  /* Added for Safari support */
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.08);  /* Slightly more visible border */
    z-index: 1;
    position: relative;
}
/* Left Panel - Make it cleaner */
.left-panel {
    flex: 0 0 280px;
    padding: 40px 28px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.06);
    justify-content: center;
}

.client-logo-wrapper {
    margin-bottom: 20px;
}

.client-logo-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.client-logo-circle img {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    object-fit: contain;
}

.client-company-name {
    font-size: 22px;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: 0.5px;
}

.client-company-tag {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 400;
    margin-top: 2px;
}

.divider-line {
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #16a34a, transparent);
    margin: 18px 0;
}

.system-info strong {
    display: block;
    font-size: 15px;
    color: #e2e8f0;
    margin-bottom: 6px;
}

.system-info p {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 3px;
}

/* Make status dot more visible */
.system-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #94a3b8;
    margin-top: auto;
    padding-top: 16px;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    animation: pulse 2s infinite;
    display: inline-block;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* ===== RIGHT PANEL ===== */
.right-panel {
    flex: 1;
    padding: 40px 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 380px;
}

.view-panel {
    display: block;
}

.auth-header {
    margin-bottom: 28px;
}

.auth-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 4px;
}

.auth-header p {
    color: #94a3b8;
    font-size: 14px;
}

/* ===== FORM ===== */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #cbd5e1;
    margin-bottom: 5px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper .input-icon {
    position: absolute;
    left: 12px;
    color: #64748b;
    font-size: 14px;
    pointer-events: none;
}

.input-wrapper input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: #f1f5f9;
    font-size: 14px;
    transition: all 0.3s;
    font-family: inherit;
}

.input-wrapper input:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
    background: rgba(255,255,255,0.08);
}

.input-wrapper input::placeholder {
    color: #475569;
}

.toggle-password {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
}

.toggle-password:hover {
    color: #94a3b8;
}

/* ===== META ROW ===== */
.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #94a3b8;
    font-size: 13px;
}

.checkbox-wrapper input {
    display: none;
}

.checkmark {
    width: 17px;
    height: 17px;
    border: 2px solid #475569;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s;
}

.checkbox-wrapper input:checked + .checkmark {
    background: #16a34a;
    border-color: #16a34a;
}

.checkbox-wrapper input:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 11px;
}

.link-btn {
    background: none;
    border: none;
    color: #16a34a;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
    font-family: inherit;
}

.link-btn:hover {
    color: #22c55e;
    text-decoration: underline;
}

/* ===== BUTTONS ===== */
.button-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.submit-btn {
    padding: 13px 24px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(22, 163, 74, 0.3);
}

.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.submit-btn .btn-loader {
    display: none;
}

.submit-btn.loading .btn-text {
    display: none;
}

.submit-btn.loading .btn-loader {
    display: inline-block;
}

.secondary-btn {
    padding: 13px 24px;
    background: rgba(255,255,255,0.05);
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
}

.secondary-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}

.helper-text {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
    justify-content: center;
}

.helper-text i {
    color: #16a34a;
}



/* ===== RESPONSIVE ===== */
@media (max-width: 820px) {
    .main-container {
        flex-direction: column;
        min-height: auto;
        border-radius: 20px;
        max-width: 480px;
    }

    .left-panel {
        flex: none;
        padding: 28px 20px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .right-panel {
        padding: 28px 24px;
    }

    .left-panel .system-status {
        margin-top: 12px;
        padding-top: 12px;
    }

    .client-logo-circle {
        width: 68px;
        height: 68px;
    }

    .client-logo-circle img {
        width: 62px;
        height: 62px;
    }

    .client-company-name {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .right-panel {
        padding: 20px 16px;
    }

    .auth-header h2 {
        font-size: 20px;
    }

    .auth-card {
        max-width: 100%;
    }

    .meta-row {
        flex-wrap: wrap;
        gap: 8px;
    }

}/* Security badges - make them match reference */
.security-badge {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 12px;
    color: #64748b;
}

.security-badge i {
    color: #22c55e;
    margin-right: 6px;
}

/* ============================================
   DASHBOARD STYLES
   ============================================ */

/* ===== DASHBOARD CONTAINER ===== */
#dashboardContainer {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: #0f172a;
    display: flex;
    flex-direction: column;
}

/* ===== NAVBAR ===== */
.dashboard-nav {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(16px);
    padding: 12px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    z-index: 100;
    min-height: 72px;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #f1f5f9;
    font-weight: 800;
    font-size: 18px;
}

.nav-logo img {
    border-radius: 8px;
}

.mobile-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary, #f1f5f9);
    font-size: 18px;
    cursor: pointer;
    margin-right: 12px;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}

.mobile-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .dashboard-nav .mobile-toggle {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(120, 95, 55, 0.2);
    color: #1f2937;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-search {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 8px 14px;
    gap: 10px;
    color: #64748b;
}

.nav-search input {
    background: none;
    border: none;
    color: #e2e8f0;
    font-size: 14px;
    outline: none;
    min-width: 180px;
}

.nav-search input::placeholder {
    color: #475569;
}

.nav-icon {
    position: relative;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
}

.nav-icon:hover {
    background: rgba(255,255,255,0.05);
}

.nav-icon .badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}

.user-dropdown {
    position: relative;
}

.user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 6px 14px 6px 6px;
    cursor: pointer;
    color: #e2e8f0;
    font-family: inherit;
    transition: background 0.2s;
}

.user-btn:hover {
    background: rgba(255,255,255,0.08);
}

.user-btn img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.user-btn span {
    font-size: 14px;
    font-weight: 500;
}

.user-btn i {
    color: #64748b;
    font-size: 12px;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #1e293b;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 8px;
    min-width: 200px;
    display: none;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    color: #e2e8f0;
    font-size: 14px;
    transition: background 0.2s;
}

.dropdown-item:hover {
    background: rgba(255,255,255,0.05);
}

.dropdown-item.logout {
    color: #ef4444;
}

.dropdown-item i {
    width: 18px;
}

.dropdown-menu hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin: 6px 0;
}

/* ===== DASHBOARD LAYOUT ===== */
.dashboard-container {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ===== SIDEBAR ===== */
.sidebar {
    width: 240px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(12px);
    border-right: 1px solid rgba(255,255,255,0.05);
    padding: 20px 12px;
    overflow-y: auto;
    flex-shrink: 0;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    cursor: pointer;
}

.sidebar-link:hover {
    background: rgba(255,255,255,0.05);
    color: #e2e8f0;
}

.sidebar-link.active {
    background: rgba(22, 163, 74, 0.15);
    color: #4ade80;
}

.sidebar-link i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.sidebar-link.logout-link {
    margin-top: auto;
    color: #ef4444;
}

.sidebar-link.logout-link:hover {
    background: rgba(239, 68, 68, 0.1);
}

.sidebar-nav hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin: 12px 0;
}

/* ===== DASHBOARD CONTENT ===== */
.dashboard-content {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.3);
}

.page-content {
    display: none;
}

.page-content.active {
    display: block;
}

.page-header {
    margin-bottom: 32px;
}

.page-header h1 {
    font-size: 28px;
    font-weight: 800;
    color: #f1f5f9;
}

.page-header p {
    color: #94a3b8;
    font-size: 15px;
    margin-top: 4px;
}

/* ===== STATS GRID ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s;
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.inventory-alert-card {
    cursor: pointer;
}

.inventory-alert-card:focus-visible {
    outline: 2px solid #4ade80;
    outline-offset: 3px;
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.stat-icon.green { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.stat-icon.blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.stat-icon.orange { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.stat-icon.purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; }


.stat-info h3 {
    font-size: 24px;
    font-weight: 700;
    color: #f1f5f9;
}

.stat-info p {
    font-size: 14px;
    color: #94a3b8;
    margin: 2px 0 4px;
}
.stat-change {
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;   
}

.stat-change.positive { color: #4ade80; }
.stat-change.negative { color: #f87171; }


[data-theme="light"] .stat-change {
    color: #64748b;
}

[data-theme="light"] .stat-change.positive { color: #15803d; }
[data-theme="light"] .stat-change.negative { color: #b91c1c; }


/* ===== RECENT ACTIVITY ===== */
.recent-activity {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.activity-header h2 {
    font-size: 18px;
    color: #f1f5f9;
}

.view-all-btn {
    background: none;
    border: none;
    color: #16a34a;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.view-all-btn:hover {
    text-decoration: underline;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 10px;
    transition: background 0.2s;
}

.activity-item:hover {
    background: rgba(255,255,255,0.03);
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.activity-icon.green { background: rgba(34, 197, 94, 0.12); color: #4ade80; }
.activity-icon.blue { background: rgba(59, 130, 246, 0.12); color: #60a5fa; }
.activity-icon.orange { background: rgba(251, 146, 60, 0.12); color: #fb923c; }
.activity-icon.purple { background: rgba(168, 85, 247, 0.12); color: #c084fc; }

.activity-content p {
    color: #e2e8f0;
    font-size: 14px;
}

.activity-content p strong {
    color: #f1f5f9;
}

.activity-time {
    font-size: 12px;
    color: #64748b;
}

/* ===== QUICK ACTIONS ===== */
.quick-actions {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 24px;
}

.quick-actions h2 {
    font-size: 18px;
    color: #f1f5f9;
    margin-bottom: 16px;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.action-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(22, 163, 74, 0.3);
    transform: translateY(-2px);
}

.action-btn i {
    color: #16a34a;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 968px) {
    .main-container {
        flex-direction: column;
        min-height: auto;
        border-radius: 20px;
    }

    .left-panel {
        flex: none;
        padding: 32px 24px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .right-panel {
        padding: 32px 24px;
    }

    .left-panel .account-status {
        margin-top: 16px;
    }
}

@media (max-width: 768px) {
    .dashboard-nav {
        padding: 12px 16px;
        flex-wrap: wrap;
    }



    .nav-search {
        display: none;
    }

    .sidebar {
        position: fixed;
        left: -280px;
        top: 72px;
        bottom: 0;
        width: 280px;
        z-index: 99;
        transition: left 0.3s;
        background: #0f172a;
    }

    .sidebar.open {
        left: 0;
    }

    .dashboard-content {
        padding: 20px;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .actions-grid {
        grid-template-columns: 1fr 1fr;
    }

    .right-panel {
        padding: 24px 16px;
    }
}

@media (max-width: 480px) {
    .user-btn span {
        display: none;
    }

    .auth-card {
        padding: 0;
    }
}
/* ============================================
   INVENTORY MANAGEMENT STYLES
   ============================================ */

/* ===== INVENTORY HEADER ===== */
.inventory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.inventory-header h1 {
    font-size: 28px;
    font-weight: 800;
    color: #f1f5f9;
    margin-bottom: 0.25rem;
}

.inventory-header p {
    color: #94a3b8;
    font-size: 15px;
}

.inventory-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.inventory-actions .submit-btn,
.inventory-actions .secondary-btn {
    padding: 12px 20px;
    font-size: 14px;
}

/* ===== INVENTORY STATS ===== */
.inventory-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 2rem;
}

.inventory-stats .stat-card {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s;
}

.inventory-stats .stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.inventory-stats .stat-icon.red {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* ===== INVENTORY TOOLS ===== */
.inventory-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 1.25rem;
}

.inventory-tools .nav-search {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 14px;
    gap: 10px;
    color: #64748b;
}

.inventory-tools .nav-search input {
    background: none;
    border: none;
    color: #e2e8f0;
    font-size: 14px;
    outline: none;
    width: 100%;
}

.inventory-tools .nav-search input::placeholder {
    color: #475569;
}

.inventory-filters {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.filter-select {
    padding: 0.625rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    background: rgba(30, 41, 59, 0.8);
    color: #e2e8f0;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 150px;
    font-family: inherit;
}

.filter-select:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.filter-select:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.filter-select option {
    background: #1e293b;
    color: #e2e8f0;
}

/* ===== INVENTORY TABLE ===== */
.inventory-table-container {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.inventory-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.inventory-table thead {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
}

.inventory-table th {
    padding: 1rem 1.25rem;
    text-align: left;
    font-weight: 600;
    color: #94a3b8;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    white-space: nowrap;
}

.inventory-table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: #e2e8f0;
    font-size: 0.875rem;
    vertical-align: middle;
}

.inventory-table tbody tr {
    transition: background-color 0.2s;
}

.inventory-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.inventory-table tbody tr:last-child td {
    border-bottom: none;
}

/* ===== PRODUCT INFO IN TABLE ===== */
.product-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}


.product-details {
    display: flex;
    flex-direction: column;
}

.product-name {
    font-weight: 500;
    margin: 0;
    color: #f1f5f9;
}

.product-sku {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.125rem;
}

/* ===== STOCK BADGES ===== */
.stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.stock-badge.in-stock {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.stock-badge.low-stock {
    background: rgba(251, 146, 60, 0.1);
    color: #fb923c;
    border: 1px solid rgba(251, 146, 60, 0.2);
}

.stock-badge.out-of-stock {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.stock-badge.over-stock {
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.2);
}

/* ===== QUANTITY INPUT ===== */
.quantity-input {
    width: 80px;
    padding: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.375rem;
    text-align: center;
    font-size: 0.875rem;
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    transition: all 0.2s;
}

.quantity-input:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
    background: rgba(255, 255, 255, 0.08);
}

/* ===== ACTION BUTTONS ===== */
.action-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn-icon {
    padding: 0.5rem;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    color: #94a3b8;
    font-size: 0.875rem;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.08);
}

.btn-icon.edit:hover {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.1);
}

.btn-icon.delete:hover {
    color: #f87171;
    background: rgba(239, 68, 68, 0.1);
}

/* ===== MODALS ===== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 23, 0.78);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
}

.modal.active {
    display: flex;
}

.modal-content {
    background: #1e293b;
    border-radius: 1rem;
    padding: 2rem;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: modalIn 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-header h2 {
    margin: 0;
    color: #f1f5f9;
    font-size: 1.5rem;
    font-weight: 700;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #94a3b8;
    padding: 0.5rem;
    transition: color 0.2s;
}

.modal-close-btn:hover {
    color: #f1f5f9;
}

/* ===== FORM STYLES ===== */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.form-grid .form-group:last-child {
    grid-column: 1 / -1;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #cbd5e1;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.625rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
    background: rgba(255, 255, 255, 0.08);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #475569;
}

.form-group select option {
    background: #1e293b;
    color: #e2e8f0;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ===== PAGINATION ===== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.page-btn {
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.375rem;
    background: rgba(30, 41, 59, 0.6);
    cursor: pointer;
    color: #94a3b8;
    font-size: 0.875rem;
    transition: all 0.2s;
    font-family: inherit;
}

.page-btn.active {
    background: #16a34a;
    color: white;
    border-color: #16a34a;
}

.page-btn:hover:not(.active):not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}

.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== LOADING SPINNER ===== */
.loading-spinner {
    text-align: center;
    padding: 3rem 1rem;
    color: #94a3b8;
}

.loading-spinner i {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #16a34a;
}

.loading-spinner p {
    font-size: 0.875rem;
}

/* ===== EMPTY STATE ===== */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #94a3b8;
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    color: #64748b;
}

.empty-state h3 {
    margin: 0.5rem 0;
    color: #cbd5e1;
    font-size: 1.25rem;
}

.empty-state p {
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

/* ===== POS PAGE ===== */
.pos-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.pos-products {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
}

.pos-search {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 14px;
    gap: 10px;
    color: #64748b;
    margin-bottom: 20px;
}

.pos-search input {
    background: none;
    border: none;
    color: #e2e8f0;
    font-size: 14px;
    outline: none;
    width: 100%;
}

.pos-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    min-height: 300px;
    align-items: start;
}

.pos-cart {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.pos-cart h3 {
    color: #f1f5f9;
    font-size: 18px;
    margin-bottom: 16px;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 16px;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    font-size: 16px;
}

.cart-total strong {
    font-size: 24px;
    color: #f1f5f9;
}

/* ===== ORDERS PAGE ===== */
.orders-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.orders-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.orders-table-container {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
}

/* ===== CUSTOMERS PAGE ===== */
.customers-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.customers-table-container {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
}

/* ===== REPORTS PAGE ===== */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.report-card {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s;
}

.report-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.report-card i {
    font-size: 32px;
    color: #16a34a;
    margin-bottom: 16px;
}

.report-card h3 {
    color: #f1f5f9;
    font-size: 18px;
    margin-bottom: 8px;
}

.report-card p {
    color: #94a3b8;
    font-size: 14px;
    margin-bottom: 16px;
}

/* ===== SETTINGS PAGE ===== */
.settings-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
}

.settings-section {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
}

.settings-section h3 {
    color: #f1f5f9;
    font-size: 18px;
    margin-bottom: 20px;
}

.settings-input {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

.settings-input:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.settings-section .checkbox-wrapper {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #e2e8f0;
    font-size: 14px;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
    .inventory-table {
        min-width: 800px;
    }
    
    .inventory-table-container {
        overflow-x: auto;
    }
    
    .pos-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .inventory-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .inventory-actions {
        width: 100%;
    }
    
    
    .filter-select {
        width: 100%;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .form-grid .form-group:last-child {
        grid-column: auto;
    }
    
    .modal-content {
        padding: 1.5rem;
        margin: 1rem;
        width: calc(100% - 2rem);
    }
    
    .inventory-table th,
    .inventory-table td {
        padding: 0.75rem;
    }
    
    
    .reports-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .inventory-stats {
        grid-template-columns: 1fr;
    }
    

    
    .modal-actions {
        flex-direction: column;
    }
    
    .modal-actions button {
        width: 100%;
    }
    
    .pagination {
        gap: 0.25rem;
    }
    
    .page-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* ===== AUDIT TRAIL STYLES ===== */

.audit-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.audit-filters .filter-select {
    min-width: 150px;
}

.audit-table-container {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
}

.severity-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.severity-badge.info {
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.severity-badge.warning {
    background: rgba(251, 146, 60, 0.1);
    color: #fb923c;
    border: 1px solid rgba(251, 146, 60, 0.2);
}

.severity-badge.critical {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.severity-badge.success {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.action-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.action-badge.create {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
}

.action-badge.update {
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
}

.action-badge.delete {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

.action-badge.login {
    background: rgba(74, 222, 128, 0.1);
    color: #86efac;
}

.action-badge.logout {
    background: rgba(251, 146, 60, 0.1);
    color: #fb923c;
}

.action-badge.export {
    background: rgba(45, 212, 191, 0.1);
    color: #2dd4bf;
}

.action-badge.view {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
}

.timestamp-text {
    font-size: 0.875rem;
    color: #e2e8f0;
}

.user-text {
    font-size: 0.875rem;
    color: #cbd5e1;
    font-weight: 500;
}

.description-text {
    font-size: 0.875rem;
    color: #94a3b8;
}




.ip-text {
    font-size: 0.75rem;
    color: #64748b;
    font-family: monospace;
}
/* ===== POS PAGE STYLES ===== */
.pos-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: calc(100vh - 180px);
    min-height: 500px;
}

.product-catalog {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.product-catalog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-shrink: 0;
    gap: 12px;
    flex-wrap: wrap;
}

.product-catalog-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-products {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 25px;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    color: #64748b;
}

.search-products input {
    background: transparent;
    border: none;
    color: #e2e8f0;
    outline: none;
    width: 100%;
    font-size: 14px;
}

.search-products input::placeholder {
    color: #475569;
}

.product-grid-wrapper {
    overflow-y: auto;
    flex: 1;
    padding-right: 8px;
    min-height: 0;
}

.product-grid-wrapper::-webkit-scrollbar {
    width: 6px;
}

.product-grid-wrapper::-webkit-scrollbar-thumb {
    background: rgba(22, 163, 74, 0.4);
    border-radius: 3px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

/* ===== PRODUCT CARD ===== */
.product-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 14px 12px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s, box-shadow 0.2s, background 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 130px;
    text-align: left;
    user-select: none;
}

.product-card:hover {
    border-color: rgba(22, 163, 74, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(22, 163, 74, 0.12);
    background: rgba(22, 163, 74, 0.04);
}

.product-card:active {
    transform: translateY(0) scale(0.985);
}

.product-card.is-out-of-stock {
    opacity: 0.5;
    pointer-events: none;
}

/* Header: name + stock badge */
.product-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.product-card-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #f1f5f9;
    line-height: 1.3;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    flex: 1;
}

.product-card-stock {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 5px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
}

.product-card-stock.in-stock {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.12);
}

.product-card-stock.low-stock {
    color: #fb923c;
    background: rgba(251, 146, 60, 0.15);
}

.product-card-stock.out-of-stock {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.12);
}

/* Meta line: category · SKU */
.product-card-meta {
    font-size: 10.5px;
    color: #94a3b8;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: capitalize;
}

/* Size chips */
.product-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.size-chip {
    font-size: 10px;
    font-weight: 600;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.4;
}

/* Price */
.product-card-price {
    font-size: 16px;
    font-weight: 700;
    color: #4ade80;
    margin-top: auto;
    letter-spacing: -0.01em;
}

/* Size selector dropdown (kept from before) */
.pos-size-selector {
    position: absolute;
    inset: auto 10px 10px 10px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #1e293b;
    color: #f1f5f9;
    border: 1px solid rgba(22, 163, 74, 0.5);
    font-size: 12px;
    z-index: 5;
    cursor: pointer;
    font-family: inherit;
}

.pos-size-selector:focus {
    outline: 2px solid #4ade80;
    outline-offset: 2px;
}

/* Light theme */
[data-theme="light"] .product-card {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(148, 163, 184, 0.3);
}

[data-theme="light"] .product-card:hover {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(22, 163, 74, 0.5);
}

[data-theme="light"] .product-card-name {
    color: #1f2937;
}

[data-theme="light"] .product-card-meta {
    color: #64748b;
}

[data-theme="light"] .size-chip {
    color: #475569;
    background: rgba(226, 232, 240, 0.7);
    border-color: rgba(148, 163, 184, 0.3);
}

[data-theme="light"] .product-card-price {
    color: #15803d;
}

[data-theme="light"] .pos-size-selector {
    background: #ffffff;
    color: #1f2937;
}

.cart-item {
    color: var(--text-primary, #f8fafc);
}

/* Cart Section */
.cart-section {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.cart-section h3 {
    font-size: 18px;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 16px;
    min-height: 0;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 12px;
}

.cart-items::-webkit-scrollbar {
    width: 6px;
}

.cart-items::-webkit-scrollbar-thumb {
    background: rgba(22, 163, 74, 0.4);
    border-radius: 3px;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(30, 41, 59, 0.3);
    border-radius: 10px;
    margin-bottom: 8px;
    gap: 10px;
}

.cart-item:last-child {
    margin-bottom: 0;
}

.cart-item-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-right: 10px;
}

.cart-item-name {
    font-weight: 600;
    font-size: 14px;
    color: #e2e8f0;
}

.cart-item-qty {
    font-size: 12px;
    color: #94a3b8;
}

.cart-item-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.qty-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 13px;
}

.qty-btn:hover {
    background: #16a34a;
    border-color: #16a34a;
    color: white;
}

.cart-totals {
    border-top: 2px solid rgba(255, 255, 255, 0.05);
    padding-top: 12px;
    flex-shrink: 0;
}

.total-row {
    display: flex;
    justify-content: space-between;
    margin: 6px 0;
    font-size: 14px;
    color: #94a3b8;
}

.total-row strong {
    color: #e2e8f0;
}

.total-row.grand-total {
    font-size: 18px;
    font-weight: 800;
    color: #f1f5f9;
    margin-top: 8px;
}

.total-row.grand-total strong {
    color: #a5b4fc;
}

.checkout-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.3s;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
}

.checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(22, 163, 74, 0.3);
}

.clear-btn {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.3s;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
}

.clear-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

/* ===== PAYMENT MODAL STYLES ===== */
/* Override existing .modal-overlay to hide by default and show with .show */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2, 6, 23, 0.82);
    /* backdrop-filter removed — was causing Chromium paint deferral */
}

.modal-overlay.show {
    display: flex;
}

.payment-methods {
    display: grid;
    gap: 10px;
    margin: 16px 0;
}

.payment-method {
    padding: 12px 16px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.03);
    text-align: left;
    font-size: 14px;
    font-family: inherit;
    width: 100%;
}

.payment-method:hover {
    border-color: rgba(22, 163, 74, 0.4);
    background: rgba(22, 163, 74, 0.05);
}

.payment-method.selected {
    border-color: #16a34a;
    background: rgba(22, 163, 74, 0.15);
    box-shadow: 0 5px 15px rgba(22, 163, 74, 0.2);
}

.payment-method i {
    font-size: 18px;
    color: #4ade80;
}

#cashInputGroup {
    margin: 16px 0;
}

#changeAmount {
    color: #4ade80;
    font-weight: 600;
}

/* Responsive adjustments for POS */
@media (max-width: 1200px) {
    .pos-layout {
        grid-template-columns: 1fr;
        height: auto;
        min-height: auto;
    }
    .product-catalog {
        height: 400px;
    }
    .cart-section {
        height: 500px;
    }
}

@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
    position: relative;
    z-index: 10001;
    display: inline-grid;
    place-items: center;
    align-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(30, 41, 59, 0.92);
    color: #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(12px);
    cursor: pointer;
    font: 600 12px/1 'Inter', sans-serif;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease,
        transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
    isolation: isolate;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    transform: translateY(-2px) scale(1.04);
    border-color: rgba(250, 204, 21, 0.7);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
    outline: none;
}

.theme-toggle:active {
    transform: translateY(0) scale(0.96);
}

.theme-toggle::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    transform: scale(0.35);
    transition: opacity 0.2s ease, transform 0.35s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
    z-index: -1;
}

.theme-toggle.spin::after {
    opacity: 0.1;
    transform: scale(1);
}

.nav-right > .theme-toggle {
    position: static !important;
    inset: auto !important;
    order: -1;
    margin: 0;
    align-self: center;
}

.theme-icon {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transform-origin: center;
    transition: transform 0.45s cubic-bezier(.2, .8, .2, 1), opacity 0.25s ease;
}

.theme-toggle.spin .theme-icon {
    transform: rotate(180deg) scale(1.14);
}

.theme-icon-sun {
    color: #FACC15;
}

.theme-icon-moon {
    display: none;
}

/* The overlay reveals the already-swapped theme without forcing a
   full-page layout animation. clip-path stays on the compositor. */
.theme-reveal-overlay {
    --click-x: 50vw;
    --click-y: 50vh;
    --max-radius: 0px;
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
    background: #0f172a;
    clip-path: circle(0 at var(--click-x) var(--click-y));
    opacity: 0;
    will-change: clip-path, opacity;
}

[data-theme="light"] .theme-reveal-overlay {
    background: #f8fafc;
}

.theme-reveal-overlay.animate {
    animation: themeReveal 560ms cubic-bezier(.22, .75, .2, 1) both;
}

@keyframes themeReveal {
    0% {
        opacity: 0.98;
        clip-path: circle(0 at var(--click-x) var(--click-y));
    }
    72% {
        opacity: 0.98;
    }
    100% {
        opacity: 0;
        clip-path: circle(var(--max-radius) at var(--click-x) var(--click-y));
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle,
    .theme-icon,
    .theme-toggle::after {
        transition-duration: 0.01ms;
    }

    .theme-reveal-overlay.animate {
        animation: none;
        opacity: 0;
    }
}

[data-theme="light"] body {
    background: #eef2f7;
    color: #1e293b;
}

[data-theme="light"] .bg-gradient {
    background:
        radial-gradient(ellipse at 15% 50%, rgba(22, 163, 74, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse at 85% 50%, rgba(245, 158, 11, 0.08) 0%, transparent 60%),
        url('bg.jpg') center/cover no-repeat;
}



[data-theme="light"] .bg-glow-1 {
    background: #86efac;
    opacity: 0.2;
}

[data-theme="light"] .geo-shape {
    border-color: rgba(71, 85, 105, 0.12);
}

[data-theme="light"] .main-container {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow: 0 30px 80px rgba(51, 65, 85, 0.16);
}

[data-theme="light"] .left-panel {
    background: rgba(248, 250, 252, 0.86);
    border-right-color: rgba(148, 163, 184, 0.25);
}

[data-theme="light"] .client-company-name,
[data-theme="light"] .auth-header h2,
[data-theme="light"] .system-info strong,
[data-theme="light"] .nav-logo,
[data-theme="light"] .page-header h1,
[data-theme="light"] .stat-info h3,
[data-theme="light"] .activity-content p,
[data-theme="light"] .product-catalog-header h3,
[data-theme="light"] .pos-cart h3,
[data-theme="light"] .cart-total strong {
    color: #1e293b;
}

[data-theme="light"] .client-company-tag,
[data-theme="light"] .system-info p,
[data-theme="light"] .account-status,
[data-theme="light"] .auth-header p,
[data-theme="light"] .form-group label,
[data-theme="light"] .checkbox-wrapper,
[data-theme="light"] .helper-text,
[data-theme="light"] .help-note,
[data-theme="light"] .security-badge,
[data-theme="light"] .activity-time,
[data-theme="light"] .page-header p,
[data-theme="light"] .sidebar-link,
[data-theme="light"] .loading-spinner,
[data-theme="light"] .empty-state {
    color: #64748b;
}

[data-theme="light"] .input-wrapper input,
[data-theme="light"] .input-wrapper select,
[data-theme="light"] .secondary-btn,
[data-theme="light"] .nav-search,
[data-theme="light"] .user-btn,
[data-theme="light"] .product-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .recent-activity,
[data-theme="light"] .pos-products,
[data-theme="light"] .pos-cart,
[data-theme="light"] .product-catalog,
[data-theme="light"] .cart-section,
[data-theme="light"] .orders-table-container,
[data-theme="light"] .customers-table-container,
[data-theme="light"] .audit-table-container,
[data-theme="light"] .payment-method {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(148, 163, 184, 0.3);
    color: #1e293b;
}

[data-theme="light"] .input-wrapper input::placeholder,
[data-theme="light"] .nav-search input::placeholder,
[data-theme="light"] .search-products input::placeholder {
    color: #94a3b8;
}

[data-theme="light"] .input-wrapper select option {
    background: #ffffff;
    color: #1e293b;
}

[data-theme="light"] .dashboard-nav {
    background: rgba(255, 255, 255, 0.94);
    border-bottom-color: rgba(148, 163, 184, 0.25);
}

[data-theme="light"] #dashboardContainer {
    background: #eef2f7;
}

[data-theme="light"] .sidebar {
    background: rgba(248, 250, 252, 0.9);
    border-right-color: rgba(148, 163, 184, 0.25);
}

[data-theme="light"] .sidebar-link:hover,
[data-theme="light"] .nav-icon:hover,
[data-theme="light"] .user-btn:hover,
[data-theme="light"] .dropdown-item:hover,
[data-theme="light"] .secondary-btn:hover {
    background: rgba(226, 232, 240, 0.72);
}

[data-theme="light"] .sidebar-link.active {
    background: rgba(22, 163, 74, 0.11);
    color: #166534;
}

[data-theme="light"] .nav-search input,
[data-theme="light"] .user-btn,
[data-theme="light"] .dropdown-item,
[data-theme="light"] .payment-method,
[data-theme="light"] .pos-search input,
[data-theme="light"] .search-products input,
[data-theme="light"] .cart-total {
    color: #334155;
}

[data-theme="light"] .dropdown-menu,
[data-theme="light"] .modal-card,
[data-theme="light"] .toast {
    background: #ffffff;
    color: #334155;
    border-color: rgba(148, 163, 184, 0.3);
    box-shadow: 0 20px 60px rgba(51, 65, 85, 0.18);
}

[data-theme="light"] .modal-card h2,
[data-theme="light"] .modal-card p,
[data-theme="light"] .modal-email {
    color: #1e293b !important;
}

[data-theme="light"] .theme-toggle {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(148, 163, 184, 0.35);
    color: #334155;
    box-shadow: 0 10px 30px rgba(51, 65, 85, 0.16);
}

[data-theme="light"] .theme-toggle .theme-icon-sun {
    display: none;
}

[data-theme="light"] .theme-toggle .theme-icon-moon {
    display: block;
    color: #A16207;
}

/* Updated neutral and teal palette for both theme modes. */
body {
    background-color: #111827;
}

.bg-gradient {
    background:
        radial-gradient(ellipse at 15% 50%, rgba(22, 163, 74, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 85% 50%, rgba(245, 158, 11, 0.1) 0%, transparent 60%),
        url('bg.jpg') center/cover no-repeat;
}

.bg-overlay {
    background: rgba(17, 24, 39, 0.76);
}

.bg-glow-1 {
    background: #16a34a;
}

.bg-glow-2 {
    background: #f59e0b;
}

.dashboard-nav,
.sidebar,
#dashboardContainer {
    background-color: #111827;
}

.sidebar-link.active {
    background: rgba(22, 163, 74, 0.15);
    color: #4ade80;
}


.view-all-btn,
.primary-btn,
.form-submit,
.add-to-cart-btn,
.checkout-btn {
    background: #0f766e;
    border-color: #0f766e;
}

.view-all-btn:hover,
.primary-btn:hover,
.form-submit:hover,
.add-to-cart-btn:hover,
.checkout-btn:hover {
    background: #115e59;
    border-color: #115e59;
}

[data-theme="light"] body,
[data-theme="light"] #dashboardContainer {
    background-color: #eef2f7;
}

/* Light mode background matches dark mode: same photo, same gradient structure,
   brighter overlay. (Do not add a solid color here — it would hide the image.) */
[data-theme="light"] .bg-gradient {
    background:
        radial-gradient(ellipse at 15% 50%, rgba(22, 163, 74, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse at 85% 50%, rgba(245, 158, 11, 0.08) 0%, transparent 60%),
        url('bg.jpg') center/cover no-repeat;
}

[data-theme="light"] .bg-glow-1 {
    background: #5eead4;
}

[data-theme="light"] .bg-glow-2 {
    background: #fbbf24;
}

[data-theme="light"] .sidebar-link.active {
    background: rgba(13, 148, 136, 0.12);
    color: #0f766e;
}

[data-theme="light"] .view-all-btn,
[data-theme="light"] .primary-btn,
[data-theme="light"] .form-submit,
[data-theme="light"] .add-to-cart-btn,
[data-theme="light"] .checkout-btn {
    background: #0f766e;
    border-color: #0f766e;
}

/* Keep every primary accent state within the green palette. */
:where(a, .view-all-btn, .primary-btn, .form-submit, .add-to-cart-btn, .checkout-btn) {
    color: #16a34a;
}

:where(.primary-btn, .form-submit, .add-to-cart-btn, .checkout-btn) {
    color: #ffffff;
}

:where(input, select, textarea, .nav-search, .user-btn):focus,
:where(.input-wrapper input, .input-wrapper select, .pos-search input, .search-products input):focus {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16);
    outline-color: #16a34a;
}

:where(.sidebar-link.active, .theme-toggle:hover, .theme-toggle:focus-visible) {
    border-color: rgba(22, 163, 74, 0.7);
}

:where(.sidebar-link.active, .view-all-btn, .primary-btn, .form-submit, .add-to-cart-btn, .checkout-btn) {
    background-color: #15803d;
}

:where(.view-all-btn:hover, .primary-btn:hover, .form-submit:hover, .add-to-cart-btn:hover, .checkout-btn:hover) {
    background-color: #166534;
    border-color: #166534;
}

[data-theme="light"] :where(a, .view-all-btn, .primary-btn, .form-submit, .add-to-cart-btn, .checkout-btn) {
    color: #166534;
}

[data-theme="light"] :where(.primary-btn, .form-submit, .add-to-cart-btn, .checkout-btn) {
    color: #ffffff;
}

[data-theme="light"] :where(.sidebar-link.active, .view-all-btn, .primary-btn, .form-submit, .add-to-cart-btn, .checkout-btn) {
    background-color: #15803d;
}

/* Match dashboard glass surfaces to the login panel. */
body {
    --glass-surface: rgba(30, 41, 59, 0.65);
    --glass-deep: rgba(15, 23, 42, 0.6);
    --glass-soft: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.08);
}

#dashboardContainer {
    background: transparent;
}

/* Keep glass only on the top navigation (floating element) */
.dashboard-nav {
    background: var(--glass-surface);
    border-color: var(--glass-border);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* PERFORMANCE FIX: Solid backgrounds for heavy data surfaces */
.stat-card,
.recent-activity,
.quick-actions,
.settings-section,
.report-card,
.product-catalog,
.cart-section,
.orders-table-container,
.customers-table-container,
.audit-table-container {
    background: #1e293b; /* Solid slate — replaces dark mode glass */
    border-color: var(--glass-border);
}

/* Light mode solid overrides */
[data-theme="light"] .stat-card,
[data-theme="light"] .recent-activity,
[data-theme="light"] .quick-actions,
[data-theme="light"] .settings-section,
[data-theme="light"] .report-card,
[data-theme="light"] .product-catalog,
[data-theme="light"] .cart-section,
[data-theme="light"] .orders-table-container,
[data-theme="light"] .customers-table-container,
[data-theme="light"] .audit-table-container {
    background: #ffffff; /* Solid white — replaces light mode glass */
}

.sidebar {
    background: var(--glass-deep);
    border-color: var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dashboard-content {
    background: transparent;
}

.nav-search,
.user-btn,
.action-btn,
.settings-input,
.product-card,
.cart-items,
.payment-method {
    background: var(--glass-soft);
    border-color: var(--glass-border);
}

[data-theme="light"] body {
    --glass-surface: rgba(255, 255, 255, 0.7);
    --glass-deep: rgba(248, 250, 252, 0.72);
    --glass-soft: rgba(255, 255, 255, 0.58);
    --glass-border: rgba(148, 163, 184, 0.3);
}

[data-theme="light"] .dashboard-nav,
[data-theme="light"] .stat-card,
[data-theme="light"] .recent-activity,
[data-theme="light"] .quick-actions,
[data-theme="light"] .settings-section,
[data-theme="light"] .report-card,
[data-theme="light"] .product-catalog,
[data-theme="light"] .cart-section,
[data-theme="light"] .orders-table-container,
[data-theme="light"] .customers-table-container,
[data-theme="light"] .audit-table-container,
[data-theme="light"] .sidebar {
    background: var(--glass-surface);
    border-color: var(--glass-border);
}

[data-theme="light"] .sidebar {
    background: var(--glass-deep);
}

[data-theme="light"] .nav-search,
[data-theme="light"] .user-btn,
[data-theme="light"] .action-btn,
[data-theme="light"] .settings-input,
[data-theme="light"] .product-card,
[data-theme="light"] .cart-items,
[data-theme="light"] .payment-method {
    background: var(--glass-soft);
    border-color: var(--glass-border);
}

body {
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
}

#dashboardContainer :where(
    .nav-logo,
    .mobile-toggle,
    .nav-search input,
    .user-btn,
    .dropdown-item,
    .page-header h1,
    .stat-info h3,
    .activity-header h2,
    .activity-content p,
    .quick-actions h2,
    .product-catalog-header h3,
    .cart-section h3,
    .table-title,
    .table-cell,
    .product-card p,
    .product-card strong,
    .cart-item-name,
    .total-row strong
) {
    color: var(--text-primary);
}

#dashboardContainer :where(
    .nav-search,
    .nav-icon,
    .user-btn i,
    .sidebar-link,
    .page-header p,
    .stat-info p,
    .activity-time,
    .cart-item-qty,
    .total-row,
    .section-label,
    .form-group label,
    .helper-text,
    .search-products,
    .search-products input
) {
    color: var(--text-secondary);
}

#dashboardContainer :where(
    .nav-search input::placeholder,
    .search-products input::placeholder,
    .input-wrapper input::placeholder
) {
    color: var(--text-muted);
}

.input-wrapper input,
.input-wrapper select,
.nav-search input,
.search-products input,
.pos-search input,
.user-btn,
.payment-method,
.cart-total {
    color: var(--text-primary);
}

[data-theme="light"] body {
    --text-primary: #1f2937;
    --text-secondary: #475569;
    --text-muted: #64748b;
}

[data-theme="light"] .client-company-name,
[data-theme="light"] .auth-header h2,
[data-theme="light"] .system-info strong,
[data-theme="light"] .page-header h1,
[data-theme="light"] .stat-info h3,
[data-theme="light"] .activity-content p,
[data-theme="light"] .activity-content p strong,
[data-theme="light"] .quick-actions h2,
[data-theme="light"] .product-catalog-header h3,
[data-theme="light"] .cart-section h3,
[data-theme="light"] .cart-total strong,
[data-theme="light"] .modal-card h2,
[data-theme="light"] .modal-card p,
[data-theme="light"] .modal-email {
    color: var(--text-primary) !important;
}

[data-theme="light"] .auth-header p,
[data-theme="light"] .form-group label,
[data-theme="light"] .checkbox-wrapper,
[data-theme="light"] .helper-text,
[data-theme="light"] .page-header p,
[data-theme="light"] .sidebar-link,
[data-theme="light"] .stat-info p,
[data-theme="light"] .activity-time,
[data-theme="light"] .cart-item-qty,
[data-theme="light"] .total-row,
[data-theme="light"] .search-products,
[data-theme="light"] .nav-search,
[data-theme="light"] .nav-icon {
    color: var(--text-secondary);
}

[data-theme="light"] .input-wrapper input,
[data-theme="light"] .input-wrapper select,
[data-theme="light"] .nav-search input,
[data-theme="light"] .search-products input,
[data-theme="light"] .pos-search input,
[data-theme="light"] .user-btn,
[data-theme="light"] .payment-method,
[data-theme="light"] .cart-total {
    color: var(--text-primary);
}

[data-theme="light"] :where(
    .input-wrapper input::placeholder,
    .nav-search input::placeholder,
    .search-products input::placeholder
) {
    color: var(--text-muted);
}

[data-theme="light"] .bg-overlay {
    background: rgba(248, 250, 252, 0.72);   /* brighter, more opaque */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}



[data-theme="light"] .bg-glow-1,
[data-theme="light"] .bg-glow-2 {
    opacity: 0.12;
}

[data-theme="light"] .main-container {
    box-shadow: 0 30px 80px rgba(71, 85, 105, 0.18);
}

[data-theme="light"] .left-panel {
    background: rgba(255, 255, 255, 0.58);
    border-right-color: rgba(148, 163, 184, 0.32);
}

[data-theme="light"] .settings-section h3 {
    color: #1f2937;
}

[data-theme="light"] .settings-section label,
[data-theme="light"] .settings-section .checkbox-wrapper {
    color: #475569;
}

[data-theme="light"] .settings-input {
    background: rgba(255, 255, 255, 0.58);
    border-color: rgba(148, 163, 184, 0.35);
    color: #1f2937;
}

[data-theme="light"] .settings-input::placeholder {
    color: #64748b;
}

[data-theme="light"] .settings-input option {
    background: #ffffff;
    color: #1f2937;
}

[data-theme="light"] .report-card h3 {
    color: #1f2937;
}

[data-theme="light"] .report-card p {
    color: #475569;
}

[data-theme="light"] .inventory-header h1 {
    color: #1f2937;
}

[data-theme="light"] .inventory-header p {
    color: #475569;
}

[data-theme="light"] .inventory-tools,
[data-theme="light"] .inventory-table-container {
    background: var(--glass-surface);
    border-color: var(--glass-border);
}

[data-theme="light"] .inventory-tools .nav-search,
[data-theme="light"] .filter-select {
    background: var(--glass-soft);
    border-color: var(--glass-border);
    color: var(--text-primary);
}

[data-theme="light"] .inventory-tools .nav-search input {
    color: var(--text-primary);
}

[data-theme="light"] .inventory-tools .nav-search input::placeholder {
    color: var(--text-muted);
}

[data-theme="light"] .filter-select option {
    background: #ffffff;
    color: #1f2937;
}

[data-theme="light"] .inventory-table thead {
    background: rgba(226, 232, 240, 0.72);
}

[data-theme="light"] .inventory-table th {
    color: #475569;
    border-bottom-color: rgba(148, 163, 184, 0.3);
}

[data-theme="light"] .inventory-table td {
    color: #1f2937;
    border-bottom-color: rgba(148, 163, 184, 0.2);
}

@media (max-width: 480px) {
    .theme-toggle {
        width: 38px;
        height: 38px;
    }
}

/* Keep the payment form usable when its content is taller than the viewport. */
#paymentModal {
    overflow-y: auto;
    overscroll-behavior: contain;
}

#paymentModal .modal-card {
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(74, 222, 128, 0.65) transparent;
}

#paymentModal .modal-card::-webkit-scrollbar {
    width: 6px;
}

#paymentModal .modal-card::-webkit-scrollbar-track {
    background: transparent;
}

#paymentModal .modal-card::-webkit-scrollbar-thumb {
    background: rgba(74, 222, 128, 0.65);
    border-radius: 999px;
}

@media (max-width: 480px) {
    #paymentModal {
        align-items: flex-start;
        padding: 12px;
    }

    #paymentModal .modal-card {
        max-height: calc(100dvh - 24px);
        padding: 28px 18px 20px;
    }

    #paymentModal .modal-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 12px;
        font-size: 22px;
    }

    #paymentModal .modal-card h2 {
        font-size: 20px;
    }

    #paymentModal .modal-card > p {
        margin-bottom: 0;
    }

    #paymentModal .modal-card > div[style*="text-align: left"] {
        margin: 1rem 0;
    }

    #paymentModal .form-group {
        margin-bottom: 0.75rem;
    }

    #paymentModal .payment-method {
        padding: 10px 12px;
    }
}

.receipt-modal-card {
    max-width: 420px;
}

.receipt-modal-icon {
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
}

.receipt-content {
    margin: 1rem 0;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    text-align: left;
    font-size: 0.85rem;
}

.receipt-heading {
    margin-bottom: 0.75rem;
    color: #f8fafc;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.08em;
}

.receipt-number {
    margin-bottom: 0.75rem;
    color: #cbd5e1;
    font-family: monospace;
    font-size: 0.75rem;
    text-align: center;
    overflow-wrap: anywhere;
}

.receipt-store-name {
    margin-bottom: 0.25rem;
    color: #f8fafc;
    font-size: 1.15rem;
    font-weight: 800;
    text-align: center;
}

.receipt-store-details {
    margin-bottom: 0.85rem;
    color: #94a3b8;
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
}

.receipt-meta {
    margin: 0.5rem 0;
    color: #94a3b8;
}

.receipt-items {
    padding: 0.5rem 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.16);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.16);
}

.receipt-line,
.receipt-total-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.45rem 0;
    color: #cbd5e1;
}

.receipt-grand-total {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    color: #f8fafc;
    font-size: 1rem;
}

.receipt-modal-actions {
    display: flex;
    gap: 0.75rem;
}

.receipt-modal-actions button {
    flex: 1;
}

[data-theme="light"] .receipt-content {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(148, 163, 184, 0.35);
}

[data-theme="light"] .receipt-heading,
[data-theme="light"] .receipt-store-name,
[data-theme="light"] .receipt-grand-total {
    color: #1f2937;
}

[data-theme="light"] .receipt-number,
[data-theme="light"] .receipt-line,
[data-theme="light"] .receipt-total-line {
    color: #475569;
}

[data-theme="light"] .receipt-store-details,
[data-theme="light"] .receipt-meta {
    color: #64748b;
}

[data-theme="light"] .receipt-items {
    border-color: rgba(148, 163, 184, 0.35);
}

[data-theme="light"] .receipt-grand-total {
    border-top-color: rgba(148, 163, 184, 0.35);
}

@media (max-width: 480px) {
    .receipt-modal-card {
        max-width: calc(100vw - 24px);
    }

    .receipt-content {
        padding: 0.75rem;
        font-size: 0.8rem;
    }

    .receipt-store-name {
        font-size: 1rem;
    }

    .receipt-line,
    .receipt-total-line {
        gap: 0.5rem;
    }

    .receipt-modal-actions {
        flex-direction: column-reverse;
    }
}

/* ============================================
   OVERVIEW 2-COLUMN GRID LAYOUT
   ============================================ */
.ov-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: start;
}

/* When inside the grid, recent-activity blocks don't need their own bottom margin */
.ov-grid-2 > .recent-activity {
    margin-bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ov-grid-2 > .recent-activity > .activity-list {
    flex: 1;
    overflow-y: auto;
    max-height: 360px;
}

/* Responsive — stack on tablet and below */
@media (max-width: 968px) {
    .ov-grid-2 {
        grid-template-columns: 1fr;
    }
    .ov-grid-2 > .recent-activity > .activity-list {
        max-height: none;
    }
}

/* Extra polish — subtle hover lift */
.ov-grid-2 > .recent-activity {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ov-grid-2 > .recent-activity:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}




/* Clickable KPI cards */
.kpi-clickable {
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.kpi-clickable:hover {
    transform: translateY(-3px);
    border-color: rgba(22, 163, 74, 0.5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.kpi-clickable:active {
    transform: translateY(-1px) scale(0.995);
}

.kpi-clickable:focus-visible {
    outline: 2px solid #4ade80;
    outline-offset: 3px;
}

.kpi-clickable::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-size: 11px;
    color: #475569;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
    pointer-events: none;
}

.kpi-clickable:hover::after {
    opacity: 1;
    color: #4ade80;
}

[data-theme="light"] .kpi-clickable::after {
    color: #94a3b8;
}

[data-theme="light"] .kpi-clickable:hover::after {
    color: #15803d;
}
/* ============================================
   KPI CARD VISUAL HIERARCHY
   ============================================ */
/* Left accent border — replaces the top strip */
.kpi-card {
    position: relative;
    overflow: hidden;
    padding: 24px 24px 24px 28px; /* extra left padding for the accent */
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
}

.kpi-sales::before     { background: #16a34a; }
.kpi-orders::before    { background: #3b82f6; }
.kpi-products::before  { background: #f59e0b; }
.kpi-customers::before { background: #a855f7; }

/* Slightly stronger icon tint so the color still reads clearly */
.kpi-sales .stat-icon.green   { background: rgba(34, 197, 94, 0.2); }
.kpi-orders .stat-icon.blue   { background: rgba(59, 130, 246, 0.2); }
.kpi-products .stat-icon.amber { background: rgba(251, 146, 60, 0.2); }
.kpi-customers .stat-icon.purple { background: rgba(168, 85, 247, 0.2); }

/* Bigger KPI numbers */
.kpi-card .stat-info h3 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.kpi-card .stat-info p {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 2px 0 6px;
}

/* Delta text with arrow */
.kpi-card .stat-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
}

.kpi-card .stat-change.positive {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.1);
}

.kpi-card .stat-change.negative {
    color: #f87171;
    background: rgba(239, 68, 68, 0.1);
}

.kpi-card .stat-change:not(.positive):not(.negative) {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.08);
}

/* Amber icon (missing from original palette) */
.stat-icon.amber {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
}

/* Slightly larger icon containers on KPI cards */
.kpi-card .stat-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
}

/* Light theme adjustments */
[data-theme="light"] .kpi-card .stat-change.positive {
    color: #15803d;
    background: rgba(34, 197, 94, 0.12);
}

[data-theme="light"] .kpi-card .stat-change.negative {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.1);
}

[data-theme="light"] .kpi-card .stat-change:not(.positive):not(.negative) {
    color: #64748b;
    background: rgba(148, 163, 184, 0.12);
}

/* Count-up animation */
@keyframes kpi-pulse {
    0%   { opacity: 0.6; transform: scale(0.96); }
    100% { opacity: 1;   transform: scale(1); }
}

.kpi-card .stat-info h3.kpi-animate {
    animation: kpi-pulse 0.4s ease-out;
}

/* Mobile: stack the number smaller */
@media (max-width: 480px) {
    .kpi-card .stat-info h3 { font-size: 26px; }
    .kpi-card .stat-icon { width: 48px; height: 48px; font-size: 20px; }
}

/* ============================================
   SALES OVERVIEW — CONFIGURABLE PERIOD
   ============================================ */
.sales-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.sales-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 200px;
    flex: 1 1 auto;
}

.sales-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sales-summary {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.sales-summary strong {
    color: var(--text-primary);
    font-weight: 600;
}

.compare-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    background: var(--glass-soft, rgba(255, 255, 255, 0.06));
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    user-select: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.compare-toggle:hover {
    background: rgba(22, 163, 74, 0.08);
    border-color: rgba(22, 163, 74, 0.4);
    color: var(--text-primary);
}

.compare-toggle input {
    display: none;
}

.compare-toggle .checkmark {
    width: 14px;
    height: 14px;
    border: 2px solid #475569;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s;
}

.compare-toggle input:checked+.checkmark {
    background: #16a34a;
    border-color: #16a34a;
}

.compare-toggle input:checked+.checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 9px;
    font-weight: 700;
}

#ovSalesPeriod {
    min-width: 160px;
}

/* Mobile: stack the header controls */
@media (max-width: 640px) {
    .sales-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .sales-header-right {
        justify-content: space-between;
        width: 100%;
    }
    
    #ovSalesPeriod {
        flex: 1;
        min-width: 0;
    }
}

/* Light theme overrides */
[data-theme="light"] .compare-toggle {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(148, 163, 184, 0.35);
    color: #475569;
}

[data-theme="light"] .compare-toggle:hover {
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.5);
    color: #166534;
}

[data-theme="light"] .compare-toggle .checkmark {
    border-color: #94a3b8;
}

[data-theme="light"] .sales-summary {
    color: #64748b;
}

[data-theme="light"] .sales-summary strong {
    color: #1f2937;
}


/* ============================================
   SIZE × BRAND STOCK — compact chip layout
   Each variant is a small pill; pills wrap in a
   flex row so tall products stay readable without
   stretching the table row vertically.
   ============================================ */
.size-stock-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 160px;
    max-width: 280px;
    align-content: flex-start;
}

/* Each variant becomes a chip */
.size-stock-summary > div {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.15);
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

/* Variant label (size · brand) */
.size-stock-summary > div > span {
    color: var(--text-secondary, #94a3b8);
    font-size: 10.5px;
    font-weight: 500;
}

/* Stock number */
.size-stock-count {
    font-weight: 700;
    font-size: 11px;
    color: var(--text-primary, #f1f5f9);
    font-variant-numeric: tabular-nums;
}

/* Low stock chip — amber tint */
.size-stock-summary > div:has(.size-stock-count.low-stock) {
    background: rgba(251, 146, 60, 0.1);
    border-color: rgba(251, 146, 60, 0.3);
}

.size-stock-count.low-stock {
    color: #fbbf24;
}

/* Out of stock chip — red tint */
.size-stock-summary > div:has(.size-stock-count.out-of-stock) {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.size-stock-count.out-of-stock {
    color: #f87171;
}

/* Total row — full width, sits below the chips */
.size-stock-total {
    flex-basis: 100%;
    margin-top: 4px;
    padding-top: 5px;
    border-top: 1px dashed rgba(148, 163, 184, 0.2);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #8a8275);
    text-align: right;
}

/* Light theme */
[data-theme="light"] .size-stock-summary > div {
    background: #f5efe0;
    border-color: rgba(120, 95, 55, 0.18);
}

[data-theme="light"] .size-stock-summary > div > span {
    color: #57534e;
}

[data-theme="light"] .size-stock-count {
    color: #100e0a;
}

[data-theme="light"] .size-stock-summary > div:has(.size-stock-count.low-stock) {
    background: rgba(251, 146, 60, 0.12);
    border-color: rgba(251, 146, 60, 0.4);
}

[data-theme="light"] .size-stock-count.low-stock {
    color: #9a3412;
}

[data-theme="light"] .size-stock-summary > div:has(.size-stock-count.out-of-stock) {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.35);
}

[data-theme="light"] .size-stock-count.out-of-stock {
    color: #b91c1c;
}

[data-theme="light"] .size-stock-total {
    border-top-color: rgba(120, 95, 55, 0.22);
    color: #756c5e;
}

/* Mobile — single column, wider chips */
@media (max-width: 768px) {
    .size-stock-summary {
        max-width: 100%;
    }
}

/* Spec icon sizing inside chips */
.size-chip i {
    font-size: 10px;
    margin-right: 3px;
    opacity: 0.85;
}



/* ============ LOGIN MOBILE FIXES ============ */

/* 1. Icon badge */
.auth-header { text-align: center; }
.auth-header .icon-badge {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(22, 163, 74, 0.12);
    color: #4ade80;
    font-size: 22px;
}

/* 2. Input icon spacing */
.input-wrapper input { padding: 12px 16px 12px 46px; }
.input-wrapper .input-icon {
    left: 14px;
    width: 18px;
    text-align: center;
    font-size: 15px;
}

/* 3. Eye toggle centering */
.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4. Card fits viewport */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}
.main-container {
    width: 95%;
    max-width: 1000px;
    margin: 0 auto;
}
.auth-card {
    width: 100%;
    max-width: 380px;
    min-width: 0;
}

/* 5+6. Mobile stacking and badge wrap */
@media (max-width: 820px) {
    .main-container {
        width: calc(100% - 24px);
        max-width: 480px;
        margin: 12px auto;
    }
    .left-panel { padding: 24px 20px 16px; }
    .left-panel .system-info { display: none; }
    .client-logo-circle { width: 64px; height: 64px; }
    .client-logo-circle img { width: 58px; height: 58px; }
    .client-company-name { font-size: 18px; }
    .security-badge { flex-wrap: wrap; gap: 8px 12px; font-size: 11px; }
}

@media (max-width: 480px) {
    .main-container { width: calc(100% - 16px); }
    .right-panel { padding: 20px 16px; }
    .auth-header h2 { font-size: 20px; }
    .security-badge { flex-direction: column; gap: 4px; }
    .security-badge span[aria-hidden="true"] { display: none; }
}

.account-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 16px;
    padding-top: 12px;
    line-height: 1.4;
}

/* ============================================
   DASHBOARD BACKGROUND — OPAQUE, NO PHOTO
   Login page keeps the photo backdrop;
   the dashboard container fully hides it.
   ============================================ */
#dashboardContainer {
    background-color: #111827;   /* dark mode: solid slate */
    background-image: none;
}

[data-theme="light"] #dashboardContainer {
    background-color: #eef2f7;   /* light mode: solid off-white */
    background-image: none;
}

/* ============================================
   MODAL — LIGHT THEME OVERRIDES
   Applies to Add/Edit Product + Delete modals.
   ============================================ */

/* Backdrop — softer in light mode */
[data-theme="light"] .modal {
    background: rgba(15, 23, 42, 0.45);
}

/* Modal card surface */
[data-theme="light"] .modal-content {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.3);
    box-shadow: 0 24px 60px rgba(51, 65, 85, 0.18);
}

/* Header */
[data-theme="light"] .modal-header h2 {
    color: #1f2937;
}

[data-theme="light"] .modal-close-btn {
    color: #64748b;
}

[data-theme="light"] .modal-close-btn:hover {
    color: #1f2937;
    background: rgba(148, 163, 184, 0.12);
    border-radius: 8px;
}

/* Labels */
[data-theme="light"] .form-group label {
    color: #334155;
}

/* Inputs, selects, textareas */
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea {
    background: #f8fafc;
    border-color: rgba(148, 163, 184, 0.4);
    color: #1f2937;
}

[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .form-group textarea::placeholder {
    color: #94a3b8;
}

[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group select:focus,
[data-theme="light"] .form-group textarea:focus {
    background: #ffffff;
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

/* Select dropdown options */
[data-theme="light"] .form-group select option {
    background: #ffffff;
    color: #1f2937;
}

/* "+ Add new category" link */
[data-theme="light"] .link-btn {
    color: #15803d;
}

[data-theme="light"] .link-btn:hover {
    color: #166534;
}

/* Modal actions footer (Cancel / Save) */
[data-theme="light"] .modal-actions {
    border-top-color: rgba(148, 163, 184, 0.25);
}

[data-theme="light"] .modal-actions .secondary-btn {
    background: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.4);
    color: #334155;
}

[data-theme="light"] .modal-actions .secondary-btn:hover {
    background: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.6);
    color: #1f2937;
}

/* Delete modal body text */
[data-theme="light"] #deleteModal p {
    color: #475569 !important;
}

[data-theme="light"] #deleteProductName {
    color: #1f2937 !important;
}

/* Scrollbar styling for modal-content */
.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 999px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.6);
}

[data-theme="light"] .modal-content::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
}

[data-theme="light"] .modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.55);
}

/* ============================================
   INVENTORY TABLE — LIGHT THEME TEXT FIXES
   ============================================ */

/* Product name inside each row */
[data-theme="light"] .inventory-table .product-name {
    color: #1f2937;
}

/* Product code under the name */
[data-theme="light"] .inventory-table .product-sku {
    color: #64748b;
}

/* Inline quantity input */
[data-theme="light"] .quantity-input {
    background: #f8fafc;
    border-color: rgba(148, 163, 184, 0.4);
    color: #1f2937;
}

[data-theme="light"] .quantity-input:focus {
    background: #ffffff;
    border-color: #16a34a;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
}

/* Row hover — soft slate instead of the dark-mode overlay */
[data-theme="light"] .inventory-table tbody tr:hover {
    background: rgba(148, 163, 184, 0.08);
}

/* Action icons */
[data-theme="light"] .btn-icon {
    color: #64748b;
}

[data-theme="light"] .btn-icon:hover {
    background: rgba(148, 163, 184, 0.15);
}

[data-theme="light"] .btn-icon.edit:hover {
    color: #2563eb;
    background: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .btn-icon.delete:hover {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.1);
}

/* ============================================
   OFFLINE INDICATOR
   ============================================ */
.offline-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    color: #1f2937;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 99;
    animation: offlineSlideIn 0.3s ease;
}

.offline-banner.offline {
    background: linear-gradient(90deg, #ef4444, #f97316);
    color: #ffffff;
}

.offline-banner i {
    font-size: 14px;
    flex-shrink: 0;
}

.offline-banner .offline-pending-count {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.15);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

@keyframes offlineSlideIn {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

[data-theme="light"] .offline-banner {
    background: linear-gradient(90deg, #fbbf24, #fcd34d);
    color: #78350f;
    border-bottom-color: rgba(148, 163, 184, 0.3);
}

[data-theme="light"] .offline-banner.offline {
    background: linear-gradient(90deg, #dc2626, #ea580c);
    color: #ffffff;
}

[data-theme="light"] .offline-banner .offline-pending-count {
    background: rgba(0, 0, 0, 0.18);
}

@media (max-width: 640px) {
    .offline-banner {
        padding: 8px 14px;
        font-size: 12px;
        gap: 8px;
    }
    .offline-banner .offline-pending-count {
        padding: 2px 8px;
        font-size: 11px;
    }
}

/* ============================================
   QUICK ACTIONS — LIGHT THEME TEXT FIX
   ============================================ */

[data-theme="light"] .action-btn {
    color: #1f2937;
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(148, 163, 184, 0.35);
}

[data-theme="light"] .action-btn:hover {
    background: #ffffff;
    border-color: rgba(22, 163, 74, 0.5);
    color: #166534;
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.08);
}

[data-theme="light"] .action-btn i {
    color: #15803d;
}

/* Notifications bell — pointer feedback */
#notificationsBtn {
    transition: background 0.2s, color 0.2s, transform 0.15s;
}

#notificationsBtn:active {
    transform: scale(0.92);
}
/* ============================================
   NOTIFICATIONS PANEL
   ============================================ */
.notifications-dropdown {
    position: relative;
}

.notifications-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(340px, calc(100vw - 32px));
    max-height: 420px;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 200;
    animation: notificationsIn 0.18s ease;
}

.notifications-panel.show {
    display: flex;
}

@keyframes notificationsIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.notifications-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.notifications-panel-header h3 {
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.notifications-count {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.notifications-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
}

.notifications-list::-webkit-scrollbar {
    width: 6px;
}

.notifications-list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 999px;
}

.notification-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
    transition: background 0.15s;
}

.notification-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.notification-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.notification-icon.orange { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.notification-icon.blue   { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }

.notification-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notification-title {
    font-size: 13px;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-meta {
    font-size: 11px;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notifications-empty {
    padding: 32px 16px;
    text-align: center;
    color: #94a3b8;
}

.notifications-empty i {
    font-size: 32px;
    color: #4ade80;
    margin-bottom: 12px;
    display: block;
}

.notifications-empty p {
    font-size: 13px;
    margin: 0;
}

.notifications-panel-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px;
    flex-shrink: 0;
}

.notifications-view-all {
    width: 100%;
    padding: 10px;
    border: none;
    background: transparent;
    color: #4ade80;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
}

.notifications-view-all:hover {
    background: rgba(34, 197, 94, 0.1);
}

/* Light theme */
[data-theme="light"] .notifications-panel {
    background: #ffffff;
    border-color: rgba(148, 163, 184, 0.3);
    box-shadow: 0 20px 60px rgba(51, 65, 85, 0.18);
}

[data-theme="light"] .notifications-panel-header {
    border-bottom-color: rgba(148, 163, 184, 0.25);
}

[data-theme="light"] .notifications-panel-header h3 {
    color: #1f2937;
}

[data-theme="light"] .notifications-count {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

[data-theme="light"] .notification-item:hover {
    background: rgba(148, 163, 184, 0.12);
}

[data-theme="light"] .notification-title {
    color: #1f2937;
}

[data-theme="light"] .notification-meta {
    color: #64748b;
}

[data-theme="light"] .notifications-empty {
    color: #64748b;
}

[data-theme="light"] .notifications-panel-footer {
    border-top-color: rgba(148, 163, 184, 0.25);
}

[data-theme="light"] .notifications-view-all {
    color: #15803d;
}

[data-theme="light"] .notifications-view-all:hover {
    background: rgba(34, 197, 94, 0.1);
}
/* ============================================
   ORDER ITEMS — COMPACT CELL + DETAIL MODAL
   ============================================ */

/* Cell wrapper */
.order-items-cell {
    max-width: 320px;
    vertical-align: top;
}

/* Clickable button inside the cell */
.order-items-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 4px 6px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    transition: background 0.15s;
}

.order-items-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Truncated text inside the button */
.order-items-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.85rem;
    color: var(--text-primary, #e2e8f0);
    line-height: 1.4;
}

/* "+N items" badge */
.order-items-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    background: rgba(22, 163, 74, 0.15);
    color: #4ade80;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Light theme button */
[data-theme="light"] .order-items-btn:hover {
    background: rgba(148, 163, 184, 0.12);
}

[data-theme="light"] .order-items-badge {
    background: rgba(22, 163, 74, 0.12);
    color: #166534;
}

/* ---------- Order Details Modal ---------- */

.order-details-meta {
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 12px;
}

.order-details-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-secondary, #94a3b8);
}

.order-details-row strong {
    color: var(--text-primary, #f1f5f9);
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.order-details-items {
    max-height: 260px;
    overflow-y: auto;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 12px;
}

.order-details-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 4px;
    border-radius: 6px;
    font-size: 13px;
}

.order-details-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.order-details-item-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    color: var(--text-primary, #e2e8f0);
}

.order-details-item-qty {
    font-size: 11px;
    color: var(--text-secondary, #94a3b8);
}

.order-details-item strong {
    color: #4ade80;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.order-detail-size {
    font-size: 11px;
    color: var(--text-secondary, #94a3b8);
}

.order-details-totals {
    padding-top: 4px;
}

.order-details-grand {
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 15px;
}

.order-details-grand span,
.order-details-grand strong {
    color: var(--text-primary, #f1f5f9);
    font-weight: 800;
}

/* Light theme overrides */
[data-theme="light"] .order-details-meta,
[data-theme="light"] .order-details-items {
    border-color: rgba(148, 163, 184, 0.28);
}

[data-theme="light"] .order-details-row {
    color: #475569;
}

[data-theme="light"] .order-details-row strong {
    color: #1f2937;
}

[data-theme="light"] .order-details-item {
    color: #1f2937;
}

[data-theme="light"] .order-details-item:hover {
    background: rgba(148, 163, 184, 0.1);
}

[data-theme="light"] .order-details-item-name {
    color: #1f2937;
}

[data-theme="light"] .order-details-item-qty,
[data-theme="light"] .order-detail-size {
    color: #64748b;
}

[data-theme="light"] .order-details-item strong {
    color: #15803d;
}

[data-theme="light"] .order-details-grand {
    border-top-color: rgba(148, 163, 184, 0.35);
}

[data-theme="light"] .order-details-grand span,
[data-theme="light"] .order-details-grand strong {
    color: #1f2937;
}

/* ============================================
   ACTIVITY LOG — OWNER VIEW
   ============================================ */

.audit-filters-row {
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.audit-filters-row .nav-search {
    min-width: 220px;
}

.audit-owner-table {
    min-width: 720px;
}

.audit-owner-table td {
    vertical-align: top;
    padding-top: 14px;
    padding-bottom: 14px;
}

.audit-cell-when {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.audit-cell-who {
    font-size: 13.5px;
}

.audit-user {
    font-weight: 600;
    color: var(--text-primary);
}

.audit-cell-desc {
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 400px;
}

.audit-cell-desc > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.audit-cell-amount {
    text-align: right;
    white-space: nowrap;
}

.audit-amount {
    font-weight: 700;
    color: #4ade80;
    font-size: 13.5px;
}

.audit-amount-empty {
    color: #475569;
}

/* Badges */
.audit-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.audit-badge i {
    font-size: 10px;
}

.audit-badge-success {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.audit-badge-info {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.audit-badge-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.audit-badge-muted {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

/* Row emphasis for danger rows */
.audit-row-danger {
    background: rgba(239, 68, 68, 0.03);
}

.audit-row-danger:hover {
    background: rgba(239, 68, 68, 0.06);
}

/* Light theme */
[data-theme="light"] .audit-badge-success {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}
[data-theme="light"] .audit-badge-info {
    background: rgba(59, 130, 246, 0.14);
    color: #1d4ed8;
}
[data-theme="light"] .audit-badge-danger {
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
}
[data-theme="light"] .audit-badge-muted {
    background: rgba(148, 163, 184, 0.18);
    color: #475569;
}
[data-theme="light"] .audit-amount {
    color: #15803d;
}
[data-theme="light"] .audit-row-danger {
    background: rgba(239, 68, 68, 0.04);
}
[data-theme="light"] .audit-row-danger:hover {
    background: rgba(239, 68, 68, 0.08);
}

/* ============================================
   TIER 1 — DESKTOP (≥ 1280px)
   ============================================ */
@media (min-width: 1280px) {
    
    /* Nav gets more horizontal breathing room */
    .dashboard-nav {
        padding: 14px 48px;
    }
    
    /* Main content area — wider padding, but capped so
       text lines and tables don't stretch infinitely */
    .dashboard-content {
        padding: 40px 48px;
        max-width: 1600px;
        margin: 0 auto;
        width: 100%;
    }
    
    /* Page headers get more room below */
    .page-header {
        margin-bottom: 40px;
    }
    
    /* Stats grid: cap at 4 columns on very wide screens */
    .stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    
    /* Inventory stats: same 4-col cap */
    .inventory-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    
    /* POS layout: give the catalog a bit more space than the cart */
    .pos-layout {
        grid-template-columns: 1.4fr 1fr;
        gap: 28px;
    }
    
    /* Overview 2-col grid: wider gap looks better at desktop */
    .ov-grid-2 {
        gap: 2rem;
    }
    
    /* Reports: 4 cards in one row */
    .reports-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    
    /* Sidebar: slightly wider on desktop */
    .sidebar {
        width: 260px;
    }
}

/* ===== GCASH QR BLOCK ===== */
.gcash-qr-group {
    margin: 16px 0;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    text-align: center;
}

.gcash-qr-label {
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gcash-qr-frame {
    display: inline-block;
    padding: 10px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    margin-bottom: 14px;
}

.gcash-qr-frame img {
    display: block;
    border-radius: 4px;
}

.gcash-qr-details {
    margin-bottom: 14px;
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 8px;
}

.gcash-qr-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 4px 0;
    color: #94a3b8;
}

.gcash-qr-row strong {
    color: #f1f5f9;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.gcash-confirm {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
    background: rgba(34, 197, 94, 0.06);
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    color: #4ade80;
    user-select: none;
    transition: background 0.2s, border-color 0.2s;
}

.gcash-confirm:hover {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.5);
}

.gcash-confirm input {
    display: none;
}

.gcash-confirm .checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #475569;
    border-radius: 5px;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s;
}

.gcash-confirm input:checked + .checkmark {
    background: #16a34a;
    border-color: #16a34a;
}

.gcash-confirm input:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: 700;
}

/* Disabled Complete Payment button while GCash unconfirmed */
#confirmPaymentBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Light theme */
[data-theme="light"] .gcash-qr-group {
    background: #f8fafc;
    border-color: rgba(148, 163, 184, 0.35);
}

[data-theme="light"] .gcash-qr-label {
    color: #334155;
}

[data-theme="light"] .gcash-qr-details {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

[data-theme="light"] .gcash-qr-row {
    color: #475569;
}

[data-theme="light"] .gcash-qr-row strong {
    color: #1f2937;
}

[data-theme="light"] .gcash-confirm {
    background: rgba(34, 197, 94, 0.1);
    color: #166534;
    border-color: rgba(34, 197, 94, 0.4);
}

[data-theme="light"] .gcash-confirm:hover {
    background: rgba(34, 197, 94, 0.16);
}

[data-theme="light"] .gcash-confirm .checkmark {
    border-color: #94a3b8;
}

/* Mobile */
@media (max-width: 480px) {
    .gcash-qr-group {
        padding: 12px;
    }
    .gcash-qr-frame img {
        width: 160px;
        height: 160px;
    }
    .gcash-qr-row {
        font-size: 12px;
    }
    .gcash-confirm {
        font-size: 12.5px;
        padding: 10px;
    }
}

/* Amount row — first detail, slightly emphasized */
.gcash-qr-row.gcash-qr-amount {
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gcash-qr-row.gcash-qr-amount span {
    color: #cbd5e1;
    font-weight: 600;
}

.gcash-qr-row.gcash-qr-amount strong {
    color: #4ade80;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* Light theme */
[data-theme="light"] .gcash-qr-row.gcash-qr-amount {
    border-bottom-color: rgba(148, 163, 184, 0.28);
}

[data-theme="light"] .gcash-qr-row.gcash-qr-amount span {
    color: #475569;
}

[data-theme="light"] .gcash-qr-row.gcash-qr-amount strong {
    color: #15803d;
}

/* ===== INVENTORY STAT CARDS — CLICKABLE FILTER ===== */
.inv-filter-card {
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.inv-filter-card:hover {
    transform: translateY(-3px);
    border-color: rgba(22, 163, 74, 0.5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.inv-filter-card:active {
    transform: translateY(-1px) scale(0.995);
}

.inv-filter-card:focus-visible {
    outline: 2px solid #4ade80;
    outline-offset: 3px;
}

.inv-filter-card.active {
    border-color: #16a34a;
    background: rgba(22, 163, 74, 0.12);
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25);
}

/* Light theme */
[data-theme="light"] .inv-filter-card:hover {
    border-color: rgba(22, 163, 74, 0.55);
}

[data-theme="light"] .inv-filter-card.active {
    border-color: #15803d;
    background: rgba(22, 163, 74, 0.1);
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}
/* ============================================
   LOGIN-PAGE THEME TOGGLE
   ============================================ */
.theme-toggle-login {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
}

/* Hide the login toggle once the dashboard is open.
   JS adds .is-logged-in to <body> in loadDashboard().
   !important guards against any later rule un-hiding it. */
body.is-logged-in .theme-toggle-login {
    display: none !important;
}

@media (max-width: 480px) {
    .theme-toggle-login {
        top: 12px;
        right: 12px;
    }
}

/* ============================================
   SIGNUP VIEW — BASE (DARK MODE) FIXES
   ============================================ */

/* 1. Icon badge — readable in dark mode (circle bg + white icon) */
.auth-header .icon-badge {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    font-size: 22px;
    line-height: 1;
}

.auth-header .icon-badge i {
    display: inline-block;
    line-height: 1;
    color: inherit;
}

/* 2. Alert boxes — base dark-mode styles */
.alert-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.alert-box i {
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

.alert-box.info {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.28);
    color: #93c5fd;
}

.alert-box.warning {
    background: rgba(251, 146, 60, 0.12);
    border-color: rgba(251, 146, 60, 0.3);
    color: #fdba74;
}

.alert-box.success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

.alert-box.error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

/* 3. Info message under role dropdown — base dark-mode styles */
.info-message {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
    line-height: 1.5;
}

/* ============================================
   SIGNUP VIEW — LIGHT MODE OVERRIDES
   ============================================ */

[data-theme="light"] .auth-header .icon-badge {
    background: rgba(22, 163, 74, 0.15);
    color: #15803d;
}

[data-theme="light"] .alert-box.info {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.3);
    color: #1e40af;
}

[data-theme="light"] .alert-box.warning {
    background: rgba(251, 146, 60, 0.12);
    border-color: rgba(251, 146, 60, 0.35);
    color: #9a3412;
}

[data-theme="light"] .alert-box.success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.35);
    color: #166534;
}

[data-theme="light"] .alert-box.error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.35);
    color: #991b1b;
}

[data-theme="light"] .info-message {
    color: #64748b;
}

/* Also make sure h2 and labels are visible in dark mode
   (in case they're inheriting an unexpected color) */
.auth-header h2 {
    color: #f1f5f9;
}

.form-group label {
    color: #cbd5e1;
}

[data-theme="light"] .auth-header h2 {
    color: #1f2937;
}

[data-theme="light"] .form-group label {
    color: #334155;
}

/* ============================================
   ACCOUNT ROLE SELECT — FIX ICON OVERLAP
   ============================================ */

/* Signup role <select> inside .input-wrapper needs left padding
   to clear the absolutely positioned shield icon, plus custom
   arrow styling since native select arrows don't play well with
   the icon overlay. */
.input-wrapper select {
    width: 100%;
    padding: 12px 44px 12px 46px;   /* top right bottom left */
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #f1f5f9;
    font-size: 14px;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image:
        url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.input-wrapper select:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
    background-color: rgba(255, 255, 255, 0.08);
}

.input-wrapper select option {
    background: #1e293b;
    color: #e2e8f0;
}

/* Icon sits centered vertically; the input's own padding
   is what keeps text clear of it */
.input-wrapper .input-icon {
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

/* Light theme override */
[data-theme="light"] .input-wrapper select {
    background-color: rgba(255, 255, 255, 0.7);
    border-color: rgba(148, 163, 184, 0.4);
    color: #1f2937;
    background-image:
        url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
}

[data-theme="light"] .input-wrapper select option {
    background: #ffffff;
    color: #1f2937;
}

[data-theme="light"] .input-wrapper select:focus {
    background-color: #ffffff;
    border-color: #16a34a;
}
/* ============================================
   FORGOT PASSWORD — HELP NOTE FIX
   ============================================ */

.help-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 20px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12.5px;
    line-height: 1.5;
    color: #94a3b8;
}

.help-note i {
    font-size: 13px;
    color: #4ade80;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Light theme */
[data-theme="light"] .help-note {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.22);
    color: #64748b;
}

[data-theme="light"] .help-note i {
    color: #15803d;
}

/* ============================================
   FORGOT PASSWORD — INFO BOX (success/error)
   ============================================ */

#forgotInfoBox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    margin: 12px 0 16px;
    border: 1px solid transparent;
}

#forgotInfoBox i {
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

#forgotInfoBox.alert-box.info {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.28);
    color: #93c5fd;
}

#forgotInfoBox.alert-box.success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

#forgotInfoBox.alert-box.error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

[data-theme="light"] #forgotInfoBox.alert-box.info {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.3);
    color: #1e40af;
}

[data-theme="light"] #forgotInfoBox.alert-box.success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.35);
    color: #166534;
}

[data-theme="light"] #forgotInfoBox.alert-box.error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.35);
    color: #991b1b;
}

/* Force compositor layer for the receipt modal to bypass
   Chromium's paint deferral when toggling from display:none. */
#receiptModal.show {
    will-change: transform, opacity;
    transform: translateZ(0);
    contain: layout paint;
}

/* ============================================
   BRAND PALETTE — KIRBY'S YELLOW DARK MODE
   Scoped to dark mode only via :not([data-theme="light"]).
   Appended at end of file to win on cascade order.
   Light mode is untouched.
   ============================================ */

/* ---------- Warm charcoal canvas ---------- */
html:not([data-theme="light"]) body {
    background-color: #24201b;
    background-image: url('bg.jpg');
    --glass-surface: rgba(42, 37, 31, 0.75);
    --glass-deep: rgba(30, 26, 22, 0.78);
    --glass-soft: rgba(250, 204, 21, 0.06);
    --glass-border: rgba(250, 204, 21, 0.11);
    --text-primary: #fef9e7;
    --text-secondary: #d6cfc0;
    --text-muted: #9a9083;
}

html:not([data-theme="light"]) #dashboardContainer {
    background-color: #24201b;
    background-image: none;
}

html:not([data-theme="light"]) .dashboard-nav {
    background: rgba(30, 26, 22, 0.95);
    border-bottom-color: rgba(250, 204, 21, 0.09);
}

html:not([data-theme="light"]) .sidebar {
    background: rgba(30, 26, 22, 0.92);
    border-right-color: rgba(250, 204, 21, 0.09);
}

html:not([data-theme="light"]) .bg-overlay {
    background: rgba(20, 18, 16, 0.76);
}

html:not([data-theme="light"]) .bg-gradient {
    background:
        radial-gradient(ellipse at 15% 50%, rgba(250, 204, 21, 0.14) 0%, transparent 60%),
        radial-gradient(ellipse at 85% 50%, rgba(234, 179, 8, 0.1) 0%, transparent 60%),
        url('bg.jpg') center/cover no-repeat;
}

html:not([data-theme="light"]) .bg-glow-1 { background: #FACC15; }
html:not([data-theme="light"]) .bg-glow-2 { background: #EAB308; }

html:not([data-theme="light"]) .main-container {
    background: rgba(30, 27, 23, 0.7);
    border-color: rgba(250, 204, 21, 0.12);
}

html:not([data-theme="light"]) .left-panel {
    background: rgba(20, 18, 16, 0.6);
    border-right-color: rgba(250, 204, 21, 0.08);
}

html:not([data-theme="light"]) .divider-line {
    background: linear-gradient(90deg, transparent, #FACC15, transparent);
}

/* ---------- Surfaces (cards, tables, panels) ---------- */
html:not([data-theme="light"]) :where(
    .stat-card,
    .recent-activity,
    .quick-actions,
    .settings-section,
    .report-card,
    .product-catalog,
    .cart-section,
    .orders-table-container,
    .customers-table-container,
    .audit-table-container,
    .inventory-table-container,
    .inventory-tools,
    .pos-products,
    .pos-cart,
    .activity-item:hover
) {
    background: rgba(42, 37, 31, 0.72);
    border-color: rgba(250, 204, 21, 0.1);
}

html:not([data-theme="light"]) .inventory-stats .stat-card {
    background: rgba(42, 37, 31, 0.72);
    border-color: rgba(250, 204, 21, 0.1);
}

html:not([data-theme="light"]) .stat-card:hover,
html:not([data-theme="light"]) .report-card:hover {
    border-color: rgba(250, 204, 21, 0.28);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

/* ---------- Modals, dropdowns, toasts ---------- */
html:not([data-theme="light"]) :where(
    .modal-card,
    .modal-content,
    .dropdown-menu,
    .notifications-panel,
    .toast
) {
    background: #2b2620;
    border-color: rgba(250, 204, 21, 0.14);
}

html:not([data-theme="light"]) .modal {
    background: rgba(20, 17, 14, 0.75);
}

html:not([data-theme="light"]) .modal-overlay {
    background: rgba(20, 17, 14, 0.8);
}

/* ---------- Sidebar nav ---------- */
html:not([data-theme="light"]) .sidebar-link {
    color: #8a8275;
}

html:not([data-theme="light"]) .sidebar-link:hover {
    background: rgba(250, 204, 21, 0.06);
    color: #fef9e7;
}

html:not([data-theme="light"]) .sidebar-link.active {
    background: rgba(250, 204, 21, 0.15);
    color: #FACC15;
}

html:not([data-theme="light"]) .sidebar-nav hr {
    border-top-color: rgba(250, 204, 21, 0.08);
}

html:not([data-theme="light"]) .sidebar-link.logout-link {
    color: #ef4444;
}

html:not([data-theme="light"]) .nav-icon {
    color: #9a9083;
}

html:not([data-theme="light"]) .nav-icon:hover {
    background: rgba(250, 204, 21, 0.06);
    color: #fef9e7;
}

html:not([data-theme="light"]) .nav-search {
    background: rgba(250, 204, 21, 0.04);
    border-color: rgba(250, 204, 21, 0.1);
    color: #9a9083;
}

html:not([data-theme="light"]) .nav-search input {
    color: #fef9e7;
}

html:not([data-theme="light"]) .nav-search input::placeholder {
    color: #8a8275;
}

html:not([data-theme="light"]) .sidebar.open {
    background: #141210;
}

/* ---------- Primary buttons → yellow / black text ---------- */
html:not([data-theme="light"]) :where(
    .submit-btn,
    .checkout-btn,
    .add-to-cart-btn,
    .primary-btn,
    .form-submit
) {
    background: #FACC15;
    color: #141210;
    border-color: #FACC15;
    background-image: none;
}

html:not([data-theme="light"]) :where(
    .submit-btn,
    .checkout-btn,
    .add-to-cart-btn,
    .primary-btn,
    .form-submit
):hover {
    background: #EAB308;
    border-color: #EAB308;
    box-shadow: 0 8px 30px rgba(250, 204, 21, 0.3);
}

html:not([data-theme="light"]) .link-btn,
html:not([data-theme="light"]) .view-all-btn,
html:not([data-theme="light"]) .notifications-view-all {
    color: #FACC15;
}

html:not([data-theme="light"]) .link-btn:hover,
html:not([data-theme="light"]) .view-all-btn:hover,
html:not([data-theme="light"]) .notifications-view-all:hover {
    color: #FDE047;
}

/* ---------- Form controls — yellow accent ---------- */
html:not([data-theme="light"]) input:focus,
html:not([data-theme="light"]) select:focus,
html:not([data-theme="light"]) textarea:focus,
html:not([data-theme="light"]) .nav-search:focus-within,
html:not([data-theme="light"]) .search-products:focus-within,
html:not([data-theme="light"]) .pos-search:focus-within,
html:not([data-theme="light"]) .user-btn:focus {
    border-color: #FACC15;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.16);
    outline-color: #FACC15;
}

html:not([data-theme="light"]) .checkbox-wrapper input:checked + .checkmark,
html:not([data-theme="light"]) .radio-wrapper input:checked + .radio-mark,
html:not([data-theme="light"]) .compare-toggle input:checked + .checkmark,
html:not([data-theme="light"]) .gcash-confirm input:checked + .checkmark {
    background: #FACC15;
    border-color: #FACC15;
}

html:not([data-theme="light"]) .checkbox-wrapper input:checked + .checkmark::after,
html:not([data-theme="light"]) .compare-toggle input:checked + .checkmark::after,
html:not([data-theme="light"]) .gcash-confirm input:checked + .checkmark::after {
    color: #141210;
}

html:not([data-theme="light"]) .radio-wrapper input:checked + .radio-mark::after {
    background: #141210;
}

html:not([data-theme="light"]) .radio-wrapper:hover .radio-mark,
html:not([data-theme="light"]) .compare-toggle:hover {
    border-color: rgba(250, 204, 21, 0.5);
}

html:not([data-theme="light"]) .filter-select {
    background: rgba(30, 27, 23, 0.8);
    border-color: rgba(250, 204, 21, 0.1);
}

html:not([data-theme="light"]) .filter-select:focus {
    border-color: #FACC15;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.15);
}

html:not([data-theme="light"]) .filter-select option,
html:not([data-theme="light"]) .form-group select option,
html:not([data-theme="light"]) .input-wrapper select option {
    background: #1e1b17;
    color: #fef9e7;
}

/* ---------- Data display ---------- */
html:not([data-theme="light"]) .inventory-table thead {
    background: rgba(20, 18, 16, 0.6);
}

html:not([data-theme="light"]) .inventory-table th {
    color: #8a8275;
    border-bottom-color: rgba(250, 204, 21, 0.08);
}

html:not([data-theme="light"]) .inventory-table td {
    color: #d6cfc0;
    border-bottom-color: rgba(250, 204, 21, 0.04);
}

html:not([data-theme="light"]) .inventory-table tbody tr:hover {
    background: rgba(250, 204, 21, 0.03);
}

html:not([data-theme="light"]) .product-card:hover {
    background: rgba(250, 204, 21, 0.04);
    border-color: rgba(250, 204, 21, 0.45);
    box-shadow: 0 8px 20px rgba(250, 204, 21, 0.12);
}

html:not([data-theme="light"]) .product-card-price,
html:not([data-theme="light"]) .product-card-stock.in-stock {
    color: #FACC15;
}

html:not([data-theme="light"]) .product-card-stock.in-stock {
    background: rgba(250, 204, 21, 0.12);
}

/* Success semantics — shift green → lime to avoid clashing with brand yellow */
html:not([data-theme="light"]) :where(
    .stock-badge.in-stock,
    .audit-badge-success,
    .kpi-card .stat-change.positive,
    .severity-badge.success,
    .action-badge.create
) {
    color: #a3e635;
    border-color: rgba(132, 204, 22, 0.25);
}

html:not([data-theme="light"]) .stock-badge.in-stock,
html:not([data-theme="light"]) .audit-badge-success {
    background: rgba(132, 204, 22, 0.12);
}

html:not([data-theme="light"]) .kpi-card .stat-change.positive {
    background: rgba(132, 204, 22, 0.12);
}

html:not([data-theme="light"]) .audit-amount {
    color: #a3e635;
}

/* KPI accent bars (keep per-card identity) */
html:not([data-theme="light"]) .kpi-sales::before     { background: #FACC15; }
html:not([data-theme="light"]) .kpi-orders::before    { background: #38bdf8; }
html:not([data-theme="light"]) .kpi-products::before  { background: #fb923c; }
html:not([data-theme="light"]) .kpi-customers::before { background: #a855f7; }

/* ---------- POS / Payment / Receipt ---------- */
html:not([data-theme="light"]) .pos-size-selector {
    background: #1e1b17;
    border-color: rgba(250, 204, 21, 0.5);
}

html:not([data-theme="light"]) .payment-method:hover {
    border-color: rgba(250, 204, 21, 0.4);
    background: rgba(250, 204, 21, 0.05);
}

html:not([data-theme="light"]) .payment-method.selected {
    border-color: #FACC15;
    background: rgba(250, 204, 21, 0.15);
    box-shadow: 0 5px 15px rgba(250, 204, 21, 0.2);
}

html:not([data-theme="light"]) .gcash-qr-row.gcash-qr-amount strong,
html:not([data-theme="light"]) #changeAmount {
    color: #FACC15;
}

html:not([data-theme="light"]) .gcash-confirm {
    border-color: rgba(250, 204, 21, 0.3);
    background: rgba(250, 204, 21, 0.06);
    color: #FACC15;
}

html:not([data-theme="light"]) .gcash-confirm:hover {
    background: rgba(250, 204, 21, 0.12);
    border-color: rgba(250, 204, 21, 0.5);
}

html:not([data-theme="light"]) .receipt-modal-icon {
    background: rgba(250, 204, 21, 0.14);
    color: #FACC15;
}

html:not([data-theme="light"]) .receipt-grand-total {
    color: #FACC15;
}

/* ---------- Misc accents ---------- */
html:not([data-theme="light"]) .toast {
    border-left-color: #FACC15;
}

html:not([data-theme="light"]) .toast.success {
    border-left-color: #a3e635;
}

html:not([data-theme="light"]) .theme-toggle {
    background: rgba(30, 27, 23, 0.92);
    border-color: rgba(250, 204, 21, 0.16);
    color: #d6cfc0;
}

html:not([data-theme="light"]) .theme-toggle:hover,
html:not([data-theme="light"]) .theme-toggle:focus-visible {
    border-color: rgba(250, 204, 21, 0.7);
    color: #fef9e7;
}

html:not([data-theme="light"]) .kpi-clickable:hover {
    border-color: rgba(250, 204, 21, 0.5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

html:not([data-theme="light"]) .kpi-clickable:hover::after {
    color: #FACC15;
}

html:not([data-theme="light"]) .inv-filter-card.active {
    border-color: #FACC15;
    background: rgba(250, 204, 21, 0.12);
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.25);
}

html:not([data-theme="light"]) .inv-filter-card:hover {
    border-color: rgba(250, 204, 21, 0.5);
}

html:not([data-theme="light"]) .offline-banner {
    background: linear-gradient(90deg, #EAB308, #FACC15);
    color: #141210;
}

/* ============================================
   AUTOFILL OVERRIDE — dark mode
   Chrome/Edge/Safari autofill was painting the
   input white + black text. This keeps every
   input on-brand in dark mode.
   ============================================ */
html:not([data-theme="light"]) input:-webkit-autofill,
html:not([data-theme="light"]) input:-webkit-autofill:hover,
html:not([data-theme="light"]) input:-webkit-autofill:focus,
html:not([data-theme="light"]) input:-webkit-autofill:active,
html:not([data-theme="light"]) select:-webkit-autofill,
html:not([data-theme="light"]) textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #2b2620 inset !important;
    -webkit-text-fill-color: #fef9e7 !important;
    caret-color: #FACC15;
    transition: background-color 5000s ease-in-out 0s;
}

/* Safety net — force all dark-mode inputs to stay transparent
   even if a browser applies its own background. */
html:not([data-theme="light"]) .nav-search input,
html:not([data-theme="light"]) .search-products input,
html:not([data-theme="light"]) .pos-search input,
html:not([data-theme="light"]) .input-wrapper input,
html:not([data-theme="light"]) .input-wrapper select,
html:not([data-theme="light"]) .form-group input,
html:not([data-theme="light"]) .form-group select,
html:not([data-theme="light"]) .form-group textarea,
html:not([data-theme="light"]) .settings-input {
    background-color: transparent !important;
    color: #fef9e7;
}

html:not([data-theme="light"]) .input-wrapper input,
html:not([data-theme="light"]) .input-wrapper select,
html:not([data-theme="light"]) .form-group input,
html:not([data-theme="light"]) .form-group select,
html:not([data-theme="light"]) .form-group textarea {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Light mode autofill — neutralize the yellow tint too */
[data-theme="light"] input:-webkit-autofill,
[data-theme="light"] input:-webkit-autofill:hover,
[data-theme="light"] input:-webkit-autofill:focus,
[data-theme="light"] input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #f8fafc inset !important;
    -webkit-text-fill-color: #1f2937 !important;
    caret-color: #16a34a;
    transition: background-color 5000s ease-in-out 0s;
}

/* ============================================
   LIGHT MODE — WARM IVORY + YELLOW (Option E)
   Warm ivory backgrounds, warm-gray borders,
   yellow accent. Twin of the yellow dark mode.
   Appended at end of file to win on cascade order.
   ============================================ */

[data-theme="light"] body {
    background-color: #faf7f0;
    --glass-surface: rgba(255, 255, 255, 0.75);
    --glass-deep: rgba(255, 253, 247, 0.85);
    --glass-soft: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(180, 165, 130, 0.28);
    --text-primary: #1c1813;
    --text-secondary: #57534e;
    --text-muted: #a8a29e;
}

[data-theme="light"] #dashboardContainer {
    background-color: #faf7f0;
    background-image: none;
}

[data-theme="light"] .dashboard-nav {
    background: rgba(255, 253, 247, 0.95);
    border-bottom-color: rgba(180, 165, 130, 0.25);
}

[data-theme="light"] .sidebar {
    background: rgba(255, 253, 247, 0.9);
    border-right-color: rgba(180, 165, 130, 0.25);
}

[data-theme="light"] .bg-overlay {
    background: rgba(250, 247, 240, 0.72);
}

[data-theme="light"] .bg-gradient {
    background:
        radial-gradient(ellipse at 15% 50%, rgba(234, 179, 8, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 85% 50%, rgba(234, 179, 8, 0.06) 0%, transparent 60%),
        url('bg.jpg') center/cover no-repeat;
}

[data-theme="light"] .bg-glow-1 { background: #fde68a; opacity: 0.25; }
[data-theme="light"] .bg-glow-2 { background: #fbbf24; opacity: 0.18; }

[data-theme="light"] .main-container {
    background: rgba(255, 253, 247, 0.8);
    border-color: rgba(180, 165, 130, 0.3);
    box-shadow: 0 30px 80px rgba(120, 100, 60, 0.12);
}

[data-theme="light"] .left-panel {
    background: rgba(255, 253, 247, 0.65);
    border-right-color: rgba(180, 165, 130, 0.25);
}

[data-theme="light"] .divider-line {
    background: linear-gradient(90deg, transparent, #EAB308, transparent);
}

/* ---------- Surfaces ---------- */
[data-theme="light"] :where(
    .stat-card,
    .recent-activity,
    .quick-actions,
    .settings-section,
    .report-card,
    .product-catalog,
    .cart-section,
    .orders-table-container,
    .customers-table-container,
    .audit-table-container,
    .inventory-table-container,
    .inventory-tools,
    .pos-products,
    .pos-cart,
    .inventory-stats .stat-card
) {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(180, 165, 130, 0.28);
    box-shadow: 0 4px 18px rgba(120, 100, 60, 0.05);
}

[data-theme="light"] .stat-card:hover,
[data-theme="light"] .report-card:hover {
    border-color: rgba(234, 179, 8, 0.4);
    box-shadow: 0 12px 40px rgba(120, 100, 60, 0.12);
}

/* ---------- Modals, dropdowns, toasts ---------- */
[data-theme="light"] :where(
    .modal-card,
    .modal-content,
    .dropdown-menu,
    .notifications-panel,
    .toast
) {
    background: #fffdf7;
    border-color: rgba(180, 165, 130, 0.3);
    box-shadow: 0 20px 60px rgba(120, 100, 60, 0.15);
}

[data-theme="light"] .modal {
    background: rgba(80, 70, 50, 0.45);
}

/* ---------- Sidebar nav ---------- */
[data-theme="light"] .sidebar-link {
    color: #78716c;
}

[data-theme="light"] .sidebar-link:hover {
    background: rgba(234, 179, 8, 0.08);
    color: #1c1813;
}

[data-theme="light"] .sidebar-link.active {
    background: rgba(234, 179, 8, 0.18);
    color: #854d0e;
}

[data-theme="light"] .sidebar-nav hr {
    border-top-color: rgba(180, 165, 130, 0.25);
}

/* ---------- Primary buttons → yellow with dark text ---------- */
[data-theme="light"] :where(
    .submit-btn,
    .checkout-btn,
    .add-to-cart-btn,
    .primary-btn,
    .form-submit
) {
    background: #EAB308;
    color: #141210;
    border-color: #EAB308;
    background-image: none;
}

[data-theme="light"] :where(
    .submit-btn,
    .checkout-btn,
    .add-to-cart-btn,
    .primary-btn,
    .form-submit
):hover {
    background: #CA8A04;
    border-color: #CA8A04;
    box-shadow: 0 8px 30px rgba(234, 179, 8, 0.25);
}

[data-theme="light"] .link-btn,
[data-theme="light"] .view-all-btn,
[data-theme="light"] .notifications-view-all {
    color: #A16207;
}

[data-theme="light"] .link-btn:hover,
[data-theme="light"] .view-all-btn:hover,
[data-theme="light"] .notifications-view-all:hover {
    color: #854d0e;
}

/* ---------- Focus rings ---------- */
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] .nav-search:focus-within,
[data-theme="light"] .search-products:focus-within,
[data-theme="light"] .pos-search:focus-within {
    border-color: #EAB308;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.18);
    outline-color: #EAB308;
}

/* ---------- Checkboxes, radios ---------- */
[data-theme="light"] .checkbox-wrapper input:checked + .checkmark,
[data-theme="light"] .compare-toggle input:checked + .checkmark,
[data-theme="light"] .gcash-confirm input:checked + .checkmark {
    background: #EAB308;
    border-color: #EAB308;
}

[data-theme="light"] .checkbox-wrapper input:checked + .checkmark::after,
[data-theme="light"] .compare-toggle input:checked + .checkmark::after,
[data-theme="light"] .gcash-confirm input:checked + .checkmark::after {
    color: #141210;
}


/* ---------- Filters ---------- */
[data-theme="light"] .filter-select {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(180, 165, 130, 0.35);
    color: #1c1813;
}

[data-theme="light"] .filter-select:focus {
    border-color: #EAB308;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.18);
}

[data-theme="light"] .filter-select option {
    background: #fffdf7;
    color: #1c1813;
}

/* ---------- Tables ---------- */
[data-theme="light"] .inventory-table thead {
    background: rgba(180, 165, 130, 0.12);
}

[data-theme="light"] .inventory-table th {
    color: #78716c;
    border-bottom-color: rgba(180, 165, 130, 0.25);
}

[data-theme="light"] .inventory-table td {
    color: #57534e;
    border-bottom-color: rgba(180, 165, 130, 0.15);
}

[data-theme="light"] .inventory-table tbody tr:hover {
    background: rgba(234, 179, 8, 0.05);
}

[data-theme="light"] .inventory-table .product-name {
    color: #1c1813;
}

[data-theme="light"] .inventory-table .product-sku {
    color: #78716c;
}

[data-theme="light"] .quantity-input {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(180, 165, 130, 0.4);
    color: #1c1813;
}

[data-theme="light"] .quantity-input:focus {
    background: #ffffff;
    border-color: #EAB308;
    box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.18);
}

/* ---------- Inputs ---------- */
[data-theme="light"] .input-wrapper input,
[data-theme="light"] .input-wrapper select,
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea,
[data-theme="light"] .settings-input,
[data-theme="light"] .nav-search,
[data-theme="light"] .user-btn,
[data-theme="light"] .action-btn,
[data-theme="light"] .payment-method {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(180, 165, 130, 0.3);
    color: #1c1813;
}

[data-theme="light"] .input-wrapper input::placeholder,
[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .form-group textarea::placeholder,
[data-theme="light"] .nav-search input::placeholder,
[data-theme="light"] .search-products input::placeholder,
[data-theme="light"] .settings-input::placeholder {
    color: #a8a29e;
}

[data-theme="light"] .form-group select option,
[data-theme="light"] .input-wrapper select option,
[data-theme="light"] .settings-input option {
    background: #fffdf7;
    color: #1c1813;
}

/* ---------- Product cards ---------- */
[data-theme="light"] .product-card {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(180, 165, 130, 0.3);
}

[data-theme="light"] .product-card:hover {
    background: rgba(234, 179, 8, 0.08);
    border-color: rgba(234, 179, 8, 0.5);
}

[data-theme="light"] .product-card-name {
    color: #1c1813;
}

[data-theme="light"] .product-card-meta {
    color: #78716c;
}

[data-theme="light"] .product-card-price {
    color: #A16207;
}

[data-theme="light"] .product-card-stock.in-stock {
    color: #A16207;
    background: rgba(234, 179, 8, 0.15);
}

[data-theme="light"] .size-chip {
    color: #57534e;
    background: rgba(255, 253, 247, 0.8);
    border-color: rgba(180, 165, 130, 0.3);
}

[data-theme="light"] .pos-size-selector {
    background: #fffdf7;
    color: #1c1813;
    border-color: rgba(234, 179, 8, 0.5);
}

/* ---------- Status badges (lime to stay distinct from yellow) ---------- */
[data-theme="light"] :where(
    .stock-badge.in-stock,
    .audit-badge-success,
    .kpi-card .stat-change.positive
) {
    color: #4d7c0f;
}

[data-theme="light"] .stock-badge.in-stock,
[data-theme="light"] .audit-badge-success {
    background: rgba(132, 204, 22, 0.15);
    border-color: rgba(132, 204, 22, 0.3);
}

[data-theme="light"] .kpi-card .stat-change.positive {
    background: rgba(132, 204, 22, 0.15);
}

[data-theme="light"] .audit-amount {
    color: #4d7c0f;
}

/* ---------- KPI accent bars ---------- */
[data-theme="light"] .kpi-sales::before { background: #EAB308; }
[data-theme="light"] .kpi-orders::before { background: #3b82f6; }
[data-theme="light"] .kpi-products::before { background: #fb923c; }
[data-theme="light"] .kpi-customers::before { background: #a855f7; }

[data-theme="light"] .kpi-clickable:hover {
    border-color: rgba(234, 179, 8, 0.5);
}

[data-theme="light"] .kpi-clickable:hover::after {
    color: #A16207;
}

[data-theme="light"] .inv-filter-card.active {
    border-color: #EAB308;
    background: rgba(234, 179, 8, 0.15);
    box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.25);
}

[data-theme="light"] .inv-filter-card:hover {
    border-color: rgba(234, 179, 8, 0.5);
}

/* ---------- Payment / GCash ---------- */
[data-theme="light"] .payment-method:hover {
    border-color: rgba(234, 179, 8, 0.4);
    background: rgba(234, 179, 8, 0.06);
}

[data-theme="light"] .payment-method.selected {
    border-color: #EAB308;
    background: rgba(234, 179, 8, 0.15);
    box-shadow: 0 5px 15px rgba(234, 179, 8, 0.2);
}

[data-theme="light"] .payment-method i {
    color: #A16207;
}

[data-theme="light"] #changeAmount,
[data-theme="light"] .gcash-qr-row.gcash-qr-amount strong {
    color: #A16207;
}

[data-theme="light"] .gcash-qr-group {
    background: #fffdf7;
    border-color: rgba(180, 165, 130, 0.3);
}

[data-theme="light"] .gcash-qr-details {
    background: #ffffff;
    border-color: rgba(180, 165, 130, 0.25);
}

[data-theme="light"] .gcash-confirm {
    background: rgba(234, 179, 8, 0.1);
    color: #854d0e;
    border-color: rgba(234, 179, 8, 0.4);
}

[data-theme="light"] .gcash-confirm:hover {
    background: rgba(234, 179, 8, 0.16);
}

/* ---------- Receipt ---------- */
[data-theme="light"] .receipt-content {
    background: rgba(255, 253, 247, 0.8);
    border-color: rgba(180, 165, 130, 0.35);
}

[data-theme="light"] .receipt-grand-total {
    color: #A16207;
}

[data-theme="light"] .receipt-modal-icon {
    background: rgba(234, 179, 8, 0.14);
    color: #A16207;
}

/* ---------- Toasts ---------- */
[data-theme="light"] .toast {
    border-left-color: #EAB308;
}

[data-theme="light"] .toast.success {
    border-left-color: #84cc16;
}

[data-theme="light"] .toast.error {
    border-left-color: #ef4444;
}

/* ---------- Theme toggle ---------- */
[data-theme="light"] .theme-toggle {
    background: rgba(255, 253, 247, 0.9);
    border-color: rgba(180, 165, 130, 0.4);
    color: #57534e;
}

[data-theme="light"] .theme-toggle:hover,
[data-theme="light"] .theme-toggle:focus-visible {
    border-color: rgba(234, 179, 8, 0.7);
}

[data-theme="light"] .theme-toggle .theme-icon-moon {
    color: #A16207;
}

/* ---------- Headings ---------- */
[data-theme="light"] .client-company-name,
[data-theme="light"] .auth-header h2,
[data-theme="light"] .system-info strong,
[data-theme="light"] .page-header h1,
[data-theme="light"] .stat-info h3,
[data-theme="light"] .activity-content p,
[data-theme="light"] .activity-content p strong,
[data-theme="light"] .quick-actions h2,
[data-theme="light"] .product-catalog-header h3,
[data-theme="light"] .cart-section h3,
[data-theme="light"] .cart-total strong,
[data-theme="light"] .modal-card h2,
[data-theme="light"] .modal-card p,
[data-theme="light"] .modal-email,
[data-theme="light"] .settings-section h3,
[data-theme="light"] .report-card h3,
[data-theme="light"] .inventory-header h1,
[data-theme="light"] .modal-header h2 {
    color: #1c1813 !important;
}

[data-theme="light"] .client-company-tag,
[data-theme="light"] .system-info p,
[data-theme="light"] .account-status,
[data-theme="light"] .auth-header p,
[data-theme="light"] .form-group label,
[data-theme="light"] .checkbox-wrapper,
[data-theme="light"] .helper-text,
[data-theme="light"] .help-note,
[data-theme="light"] .security-badge,
[data-theme="light"] .activity-time,
[data-theme="light"] .page-header p,
[data-theme="light"] .stat-info p,
[data-theme="light"] .cart-item-qty,
[data-theme="light"] .total-row,
[data-theme="light"] .report-card p,
[data-theme="light"] .inventory-header p,
[data-theme="light"] .settings-section label {
    color: #57534e;
}

/* ---------- Modal secondary buttons ---------- */
[data-theme="light"] .modal-actions .secondary-btn {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(180, 165, 130, 0.4);
    color: #57534e;
}

[data-theme="light"] .modal-actions .secondary-btn:hover {
    background: #ffffff;
    border-color: rgba(234, 179, 8, 0.5);
}

[data-theme="light"] #deleteModal p {
    color: #57534e !important;
}

[data-theme="light"] #deleteProductName {
    color: #1c1813 !important;
}

/* ---------- Order details modal ---------- */
[data-theme="light"] .order-details-meta,
[data-theme="light"] .order-details-items {
    border-color: rgba(180, 165, 130, 0.25);
}

[data-theme="light"] .order-details-row {
    color: #57534e;
}

[data-theme="light"] .order-details-row strong {
    color: #1c1813;
}

[data-theme="light"] .order-details-item-name {
    color: #1c1813;
}

[data-theme="light"] .order-details-item strong {
    color: #A16207;
}

[data-theme="light"] .order-details-grand span,
[data-theme="light"] .order-details-grand strong {
    color: #1c1813;
}

[data-theme="light"] .order-details-grand {
    border-top-color: rgba(180, 165, 130, 0.3);
}

/* ---------- Offline banner ---------- */
[data-theme="light"] .offline-banner {
    background: linear-gradient(90deg, #EAB308, #FACC15);
    color: #141210;
    border-bottom-color: rgba(180, 165, 130, 0.3);
}

/* ---------- Quick action buttons ---------- */
[data-theme="light"] .action-btn {
    color: #1c1813;
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(180, 165, 130, 0.35);
}

[data-theme="light"] .action-btn:hover {
    background: #ffffff;
    border-color: rgba(234, 179, 8, 0.5);
    color: #854d0e;
}

[data-theme="light"] .action-btn i {
    color: #A16207;
}

/* ---------- Misc ---------- */
[data-theme="light"] .order-items-badge {
    background: rgba(234, 179, 8, 0.15);
    color: #854d0e;
}

[data-theme="light"] .notifications-count {
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
}

[data-theme="light"] .notifications-view-all {
    color: #A16207;
}

[data-theme="light"] .notifications-view-all:hover {
    background: rgba(234, 179, 8, 0.1);
}

/* ============================================
   LIGHT MODE — MISSING OVERRIDES
   Fills gaps left by older cool-slate rules
   that the Option E block didn't cover.
   ============================================ */

[data-theme="light"] .dropdown-item,
[data-theme="light"] .nav-search input,
[data-theme="light"] .user-btn,
[data-theme="light"] .payment-method,
[data-theme="light"] .pos-search input,
[data-theme="light"] .search-products input,
[data-theme="light"] .cart-total,
[data-theme="light"] .cart-item-name,
[data-theme="light"] .cart-item-qty,
[data-theme="light"] .total-row,
[data-theme="light"] .total-row strong,
[data-theme="light"] .activity-content p,
[data-theme="light"] .activity-content p strong,
[data-theme="light"] .activity-time,
[data-theme="light"] .product-catalog-header h3,
[data-theme="light"] .cart-section h3,
[data-theme="light"] .modal-header h2,
[data-theme="light"] .modal-close-btn,
[data-theme="light"] .sidebar-link,
[data-theme="light"] .stat-info p,
[data-theme="light"] .page-header p,
[data-theme="light"] .inventory-header p,
[data-theme="light"] .report-card p,
[data-theme="light"] .settings-section h3,
[data-theme="light"] .settings-section label,
[data-theme="light"] .settings-input {
    color: #1c1813;
}

[data-theme="light"] .dropdown-item:hover,
[data-theme="light"] .sidebar-link:hover {
    background: rgba(234, 179, 8, 0.08);
    color: #1c1813;
}

[data-theme="light"] .sidebar-link.active {
    background: rgba(234, 179, 8, 0.18);
    color: #854d0e;
}

[data-theme="light"] .nav-icon,
[data-theme="light"] .user-btn i,
[data-theme="light"] .search-products {
    color: #78716c;
}

[data-theme="light"] .nav-search input::placeholder,
[data-theme="light"] .search-products input::placeholder,
[data-theme="light"] .pos-search input::placeholder {
    color: #a8a29e;
}

[data-theme="light"] .dropdown-item.logout {
    color: #dc2626;
}

[data-theme="light"] .modal-close-btn:hover {
    color: #1c1813;
    background: rgba(180, 165, 130, 0.15);
}

/* ============================================
   LIGHT MODE — HIGH CONTRAST REFINEMENT
   Deeper warm background, solid white surfaces,
   stronger borders + shadows. Appended last to
   win cascade order over the Option E block.
   ============================================ */

/* ---------- Palette shift ---------- */
[data-theme="light"] body {
    background-color: #ebe2cd;                    /* deeper warm cream (was #faf7f0) */
    --glass-surface: #ffffff;                     /* solid white cards */
    --glass-deep: #f5efe0;                        /* sidebar / nav shell */
    --glass-soft: #faf6ea;                        /* soft inset surfaces */
    --glass-border: rgba(120, 95, 55, 0.22);      /* stronger warm-brown borders */
    --text-primary: #100e0a;                      /* near-black warm */
    --text-secondary: #3d3831;                    /* darker body text */
    --text-muted: #756c5e;                        /* deeper muted (was #a8a29e) */
}

[data-theme="light"] #dashboardContainer {
    background-color: #ebe2cd;
}

[data-theme="light"] .dashboard-nav {
    background: #fffdf7;
    border-bottom-color: rgba(120, 95, 55, 0.2);
    box-shadow: 0 2px 8px rgba(70, 50, 20, 0.06);
}

[data-theme="light"] .sidebar {
    background: #f5efe0;
    border-right-color: rgba(120, 95, 55, 0.2);
}

/* ---------- Surfaces → solid white + stronger shadow ---------- */
[data-theme="light"] :where(
    .stat-card,
    .recent-activity,
    .quick-actions,
    .settings-section,
    .report-card,
    .product-catalog,
    .cart-section,
    .orders-table-container,
    .customers-table-container,
    .audit-table-container,
    .inventory-table-container,
    .inventory-tools,
    .pos-products,
    .pos-cart,
    .inventory-stats .stat-card,
    .modal-content,
    .modal-card,
    .dropdown-menu,
    .notifications-panel
) {
    background: #ffffff;
    border-color: rgba(120, 95, 55, 0.22);
    box-shadow: 0 4px 16px rgba(70, 50, 20, 0.08);
}

[data-theme="light"] .stat-card:hover,
[data-theme="light"] .report-card:hover {
    border-color: rgba(234, 179, 8, 0.55);
    box-shadow: 0 12px 32px rgba(70, 50, 20, 0.14);
}

/* ---------- Inputs / controls — stronger borders ---------- */
[data-theme="light"] :where(
    .input-wrapper input,
    .input-wrapper select,
    .form-group input,
    .form-group select,
    .form-group textarea,
    .settings-input,
    .nav-search,
    .user-btn,
    .action-btn,
    .payment-method,
    .filter-select,
    .quantity-input
) {
    border-color: rgba(120, 95, 55, 0.28);
}

[data-theme="light"] .product-card {
    background: #ffffff;
    border-color: rgba(120, 95, 55, 0.22);
    box-shadow: 0 2px 8px rgba(70, 50, 20, 0.06);
}

[data-theme="light"] .product-card:hover {
    box-shadow: 0 8px 20px rgba(234, 179, 8, 0.2);
}

/* ---------- Table contrast ---------- */
[data-theme="light"] .inventory-table thead {
    background: #f5efe0;
}

[data-theme="light"] .inventory-table th {
    color: #3d3831;
    border-bottom-color: rgba(120, 95, 55, 0.25);
}

[data-theme="light"] .inventory-table td {
    color: #3d3831;
    border-bottom-color: rgba(120, 95, 55, 0.12);
}

[data-theme="light"] .inventory-table .product-name {
    color: #100e0a;
}

[data-theme="light"] .inventory-table .product-sku {
    color: #756c5e;
}

[data-theme="light"] .inventory-table tbody tr:hover {
    background: #faf6ea;
}

/* ---------- Sidebar — punchier active state ---------- */
[data-theme="light"] .sidebar-link {
    color: #57534e;
}

[data-theme="light"] .sidebar-link:hover {
    background: rgba(120, 95, 55, 0.08);
    color: #100e0a;
}

[data-theme="light"] .sidebar-link.active {
    background: #EAB308;
    color: #100e0a;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(234, 179, 8, 0.3);
}

[data-theme="light"] .sidebar-nav hr {
    border-top-color: rgba(120, 95, 55, 0.2);
}

/* ---------- Text contrast ---------- */
[data-theme="light"] :where(
    .page-header p,
    .stat-info p,
    .activity-time,
    .cart-item-qty,
    .total-row,
    .inventory-header p,
    .report-card p,
    .settings-section label,
    .client-company-tag,
    .system-info p,
    .account-status,
    .auth-header p,
    .form-group label,
    .helper-text,
    .security-badge,
    .dropdown-item,
    .nav-search input,
    .user-btn,
    .cart-total,
    .cart-item-name,
    .modal-close-btn
) {
    color: #3d3831;
}

[data-theme="light"] :where(
    .nav-search input::placeholder,
    .search-products input::placeholder,
    .pos-search input::placeholder,
    .input-wrapper input::placeholder,
    .form-group input::placeholder,
    .form-group textarea::placeholder,
    .settings-input::placeholder
) {
    color: #756c5e;
}

/* ---------- Buttons — deeper yellow + stronger shadow ---------- */
[data-theme="light"] :where(
    .submit-btn,
    .checkout-btn,
    .add-to-cart-btn,
    .primary-btn,
    .form-submit
) {
    background: #E0A300;
    border-color: #E0A300;
    color: #100e0a;
    box-shadow: 0 2px 8px rgba(224, 163, 0, 0.28);
}

[data-theme="light"] :where(
    .submit-btn,
    .checkout-btn,
    .add-to-cart-btn,
    .primary-btn,
    .form-submit
):hover {
    background: #B8860B;
    border-color: #B8860B;
    box-shadow: 0 8px 24px rgba(224, 163, 0, 0.38);
}

[data-theme="light"] .link-btn,
[data-theme="light"] .view-all-btn,
[data-theme="light"] .notifications-view-all {
    color: #8a5a00;
}

[data-theme="light"] .link-btn:hover,
[data-theme="light"] .view-all-btn:hover,
[data-theme="light"] .notifications-view-all:hover {
    color: #6b4500;
}

/* ---------- Accent text — deeper amber ---------- */
[data-theme="light"] .product-card-price,
[data-theme="light"] .order-details-item strong,
[data-theme="light"] #changeAmount,
[data-theme="light"] .gcash-qr-row.gcash-qr-amount strong,
[data-theme="light"] .receipt-grand-total {
    color: #8a5a00;
}

/* ---------- Status badges — stronger tints ---------- */
[data-theme="light"] .kpi-card .stat-change.positive {
    color: #365314;
    background: rgba(132, 204, 22, 0.2);
}

[data-theme="light"] .kpi-card .stat-change.negative {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.14);
}

[data-theme="light"] .stock-badge.in-stock,
[data-theme="light"] .audit-badge-success {
    color: #365314;
    background: rgba(132, 204, 22, 0.22);
    border-color: rgba(132, 204, 22, 0.45);
}

[data-theme="light"] .stock-badge.low-stock {
    color: #9a3412;
    background: rgba(251, 146, 60, 0.18);
    border-color: rgba(251, 146, 60, 0.4);
}

[data-theme="light"] .stock-badge.out-of-stock {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
}

/* ---------- Login container + modals ---------- */
[data-theme="light"] .main-container {
    background: rgba(255, 253, 247, 0.95);
    border-color: rgba(120, 95, 55, 0.25);
    box-shadow: 0 30px 80px rgba(70, 50, 20, 0.18);
}

[data-theme="light"] .left-panel {
    background: #f5efe0;
    border-right-color: rgba(120, 95, 55, 0.2);
}

[data-theme="light"] .modal,
[data-theme="light"] .modal-overlay {
    background: rgba(60, 45, 20, 0.55);
}

[data-theme="light"] .modal-actions {
    border-top-color: rgba(120, 95, 55, 0.2);
}

[data-theme="light"] .modal-actions .secondary-btn {
    background: #f5efe0;
    border-color: rgba(120, 95, 55, 0.3);
    color: #3d3831;
}

[data-theme="light"] .modal-actions .secondary-btn:hover {
    background: #ebe2cd;
    border-color: rgba(120, 95, 55, 0.45);
    color: #100e0a;
}

/* ---------- KPI / filter active states ---------- */
[data-theme="light"] .kpi-clickable:hover {
    border-color: rgba(224, 163, 0, 0.55);
}

[data-theme="light"] .inv-filter-card.active {
    border-color: #E0A300;
    background: rgba(224, 163, 0, 0.15);
    box-shadow: 0 0 0 2px rgba(224, 163, 0, 0.35);
}

/* ---------- Offline banner ---------- */
[data-theme="light"] .offline-banner {
    background: linear-gradient(90deg, #D9A800, #EAB308);
    color: #100e0a;
    box-shadow: 0 2px 8px rgba(70, 50, 20, 0.12);
}

/* ============================================
   AUDIT BADGES — RESTORE ORIGINAL GREEN
   Applies to "Sale", "Signed in", and other
   success-type audit log entries.
   ============================================ */

/* Light mode — original green */
[data-theme="light"] .audit-badge-success {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Light mode — the "+N items" order badge used the same lime tint */
[data-theme="light"] .order-items-badge {
    background: rgba(22, 163, 74, 0.12);
    color: #166534;
}

/* Light mode — success toast left border */
[data-theme="light"] .toast.success {
    border-left-color: #22c55e;
}

/* Dark mode — original green (was #a3e635 lime) */
html:not([data-theme="light"]) .audit-badge-success {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

/* Dark mode — toast success border */
html:not([data-theme="light"]) .toast.success {
    border-left-color: #22c55e;
}

/* ============================================
   REVERT SUCCESS COLORS — BACK TO ORIGINAL GREEN
   Everything that was switched to lime (dark) or
   yellow (POS in-stock) returns to the standard
   green palette. Appended last to win cascade.
   ============================================ */

/* ---------- DARK MODE ---------- */

/* Stock badge — inventory tables, "Active" status pill, etc. */
html:not([data-theme="light"]) .stock-badge.in-stock {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* Activity log — "Sale", "Signed in", etc. */
html:not([data-theme="light"]) .audit-badge-success {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* KPI delta — positive change chip */
html:not([data-theme="light"]) .kpi-card .stat-change.positive {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.1);
}

/* Activity log — money column */
html:not([data-theme="light"]) .audit-amount {
    color: #4ade80;
}

/* Audit severity / action badges */
html:not([data-theme="light"]) .severity-badge.success {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.2);
}
html:not([data-theme="light"]) .action-badge.create {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
}
html:not([data-theme="light"]) .action-badge.login {
    background: rgba(74, 222, 128, 0.1);
    color: #86efac;
}

/* POS product card in-stock pill (was yellow) */
html:not([data-theme="light"]) .product-card-stock.in-stock {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.12);
}

/* Toast success — left border */
html:not([data-theme="light"]) .toast.success {
    border-left-color: #22c55e;
}

/* ---------- LIGHT MODE ---------- */

/* Stock badge — inventory tables, "Active" status pill, etc. */
[data-theme="light"] .stock-badge.in-stock {
    background: rgba(34, 197, 94, 0.15);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

/* Activity log — "Sale", "Signed in", etc. */
[data-theme="light"] .audit-badge-success {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* KPI delta — positive change chip */
[data-theme="light"] .kpi-card .stat-change.positive {
    color: #15803d;
    background: rgba(34, 197, 94, 0.15);
}

/* Activity log — money column */
[data-theme="light"] .audit-amount {
    color: #15803d;
}

/* Audit severity / action badges */
[data-theme="light"] .severity-badge.success {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
[data-theme="light"] .action-badge.create {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}
[data-theme="light"] .action-badge.login {
    background: rgba(74, 222, 128, 0.15);
    color: #166534;
}

/* POS product card in-stock pill */
[data-theme="light"] .product-card-stock.in-stock {
    color: #15803d;
    background: rgba(34, 197, 94, 0.15);
}

/* "+N items" order badge */
[data-theme="light"] .order-items-badge {
    background: rgba(22, 163, 74, 0.12);
    color: #166534;
}

/* Toast success — left border */
[data-theme="light"] .toast.success {
    border-left-color: #22c55e;
}

/* ============================================
   SIDEBAR COLLAPSE — DESKTOP ICONS-ONLY MODE
   Reuses #mobileToggle button:
   - Mobile (≤768px): slides drawer in/out (unchanged)
   - Desktop (>768px): collapses sidebar to 72px, icons only
   State persists in localStorage via script.js.
   ============================================ */

/* ============================================
   SIDEBAR HEADER & TOGGLE
   ============================================ */
.sidebar-header {
    display: flex;
    justify-content: flex-end; /* Aligns button to the right */
    align-items: center;
    margin-bottom: 16px;
    padding: 0 4px;
}

.sidebar .mobile-toggle {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}

.sidebar .mobile-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.15);
}

.sidebar .mobile-toggle:active {
    transform: scale(0.94);
}

.sidebar .mobile-toggle:focus-visible {
    outline: 2px solid #4ade80;
    outline-offset: 2px;
}

/* Smooth sidebar resize */
.sidebar {
    transition: width 0.25s ease, padding 0.25s ease;
}

.sidebar-link {
    transition: background 0.2s, color 0.2s, padding 0.25s ease, justify-content 0.25s ease;
}

.sidebar-link span {
    transition: opacity 0.18s ease;
    white-space: nowrap;
}

/* ---------- COLLAPSED STATE (desktop only) ---------- */
@media (min-width: 769px) {

    body.sidebar-collapsed .sidebar {
        width: 72px;
        padding: 20px 8px;
    }

    body.sidebar-collapsed .sidebar-link {
        justify-content: center;
        padding: 12px;
        gap: 0;
    }

    body.sidebar-collapsed .sidebar-link span {
        opacity: 0;
        width: 0;
        overflow: hidden;
        display: inline-block;
    }

    body.sidebar-collapsed .sidebar-link i {
        font-size: 18px;
        width: auto;
        margin: 0;
    }

    body.sidebar-collapsed .sidebar-nav hr {
        margin: 12px 6px;
    }

    /* Keep the active indicator visible when collapsed */
    body.sidebar-collapsed .sidebar-link.active {
        background: rgba(250, 204, 21, 0.15);
    }

    /* Hide sidebar scrollbar when collapsed (no room for it) */
    body.sidebar-collapsed .sidebar::-webkit-scrollbar {
        width: 0;
    }
}

/* Center the button when the sidebar is collapsed on desktop */
@media (min-width: 769px) {
    body.sidebar-collapsed .sidebar-header {
        justify-content: center;
        padding: 0;
    }
}

/* Light mode adjustments for the toggle button */
[data-theme="light"] .sidebar .mobile-toggle {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(120, 95, 55, 0.28);
    color: #57534e;
}

[data-theme="light"] .sidebar .mobile-toggle:hover {
    background: #ffffff;
    color: #1c1813;
    border-color: rgba(224, 163, 0, 0.55);
}

[data-theme="light"] body.sidebar-collapsed .sidebar-link.active {
    background: rgba(224, 163, 0, 0.18);
}

/* ============================================
   MOBILE SIDEBAR — TOP DROPDOWN & UI FIXES
   ============================================ */
@media (max-width: 768px) {
    /* 1. Restyle the toggle button in the top navbar */
    .dashboard-nav .mobile-toggle {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        color: var(--text-primary);
        font-size: 18px;
        cursor: pointer;
        margin-right: 12px;
        flex-shrink: 0;
    }

    html:not([data-theme="light"]) .dashboard-nav .mobile-toggle {
        background: rgba(250, 204, 21, 0.05);
        border-color: rgba(250, 204, 21, 0.2);
    }

    [data-theme="light"] .dashboard-nav .mobile-toggle {
        background: rgba(255, 255, 255, 0.7);
        border-color: rgba(120, 95, 55, 0.2);
    }

    /* 2. Transform sidebar into a top dropdown menu */
    .sidebar {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0.3s ease;
        z-index: 99 !important;
        background: var(--glass-surface, #1e293b) !important;
        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;
        border-right: none !important;
        border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
        padding: 10px 12px !important;
    }

    .sidebar.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .sidebar-nav {
        padding-bottom: 20px;
    }

    /* Hide the old header inside the sidebar */
    .sidebar-header {
        display: none !important;
    }

    /* Dim the background content when the dropdown is open */
    .sidebar.open ~ .dashboard-content {
        filter: brightness(0.5);
        pointer-events: none;
    }
    
    /* 3. Fix KPI Cards (Prevent text clipping seen in screenshot) */
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .kpi-card {
        padding: 12px 10px !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    .kpi-card .stat-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    .kpi-card .stat-info {
        min-width: 0 !important; /* Allows text to shrink and truncate */
    }

    .kpi-card .stat-info h3 {
        font-size: 16px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .kpi-card .stat-info p {
        font-size: 9px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .kpi-card .stat-change {
        font-size: 9px !important;
        padding: 2px 4px !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}
/* ============================================
   AI ASSISTANT — FLOATING FAB + SLIDE-OUT PANEL
   ============================================ */

/* ---------- Floating button ---------- */
.ai-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: #FACC15;
    color: #141210;
    font-size: 22px;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 30px rgba(250, 204, 21, 0.35);
    transition: transform 0.18s ease, box-shadow 0.2s, background 0.2s;
    z-index: 9998;
}

.ai-fab:hover {
    background: #EAB308;
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(250, 204, 21, 0.5);
}

.ai-fab:active { transform: scale(0.94); }
.ai-fab:focus-visible {
    outline: 2px solid #FDE047;
    outline-offset: 3px;
}

.ai-fab-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    background: #ef4444;
    border: 2px solid #141210;
    border-radius: 50%;
}

/* ---------- Slide-out panel ---------- */
.ai-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(400px, 100vw);
    background: #1e1b17;
    border-left: 1px solid rgba(250, 204, 21, 0.15);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    display: flex;
    flex-direction: column;
    z-index: 9999;
    visibility: hidden;
}

.ai-panel.open {
    transform: translateX(0);
    visibility: visible;
}

.ai-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(250, 204, 21, 0.12);
    background: rgba(20, 18, 16, 0.6);
}

.ai-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
    color: #FACC15;
}

.ai-panel-title i { font-size: 15px; }

.ai-panel-actions {
    display: flex;
    gap: 4px;
}

.ai-panel-icon-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #8a8275;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 13px;
    transition: background 0.15s, color 0.15s;
}

.ai-panel-icon-btn:hover {
    background: rgba(250, 204, 21, 0.1);
    color: #FACC15;
}

/* ---------- Chat thread ---------- */
.ai-thread {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.5;
}

.ai-thread::-webkit-scrollbar { width: 6px; }
.ai-thread::-webkit-scrollbar-thumb {
    background: rgba(250, 204, 21, 0.3);
    border-radius: 999px;
}

.ai-bubble {
    max-width: 88%;
    padding: 10px 14px;
    border-radius: 14px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.ai-bubble.ai {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.05);
    color: #d6cfc0;
    border-bottom-left-radius: 4px;
}

.ai-bubble.user {
    align-self: flex-end;
    background: rgba(250, 204, 21, 0.16);
    color: #fef9e7;
    border-bottom-right-radius: 4px;
}

.ai-bubble.loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8a8275;
    font-style: italic;
}

.ai-bubble.error {
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
    border-left: 3px solid #ef4444;
}

/* ---------- Input row ---------- */
.ai-panel-input {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(250, 204, 21, 0.12);
    background: rgba(20, 18, 16, 0.6);
}

.ai-panel-input input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(250, 204, 21, 0.15);
    border-radius: 10px;
    color: #fef9e7;
    font-family: inherit;
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ai-panel-input input:focus {
    border-color: #FACC15;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.15);
}

.ai-panel-input input::placeholder { color: #8a8275; }

.ai-panel-input button {
    width: 42px;
    border: none;
    border-radius: 10px;
    background: #FACC15;
    color: #141210;
    font-size: 15px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s, transform 0.15s;
}

.ai-panel-input button:hover:not(:disabled) { background: #EAB308; }
.ai-panel-input button:active:not(:disabled) { transform: scale(0.94); }
.ai-panel-input button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Hide FAB when its own panel is open (nicer UX) ---------- */
body.ai-panel-open .ai-fab {
    opacity: 0;
    pointer-events: none;
}

/* ---------- Light mode ---------- */
[data-theme="light"] .ai-panel {
    background: #fffdf7;
    border-left-color: rgba(120, 95, 55, 0.25);
}

[data-theme="light"] .ai-panel-header,
[data-theme="light"] .ai-panel-input {
    background: #f5efe0;
    border-color: rgba(120, 95, 55, 0.2);
}

[data-theme="light"] .ai-bubble.ai {
    background: #f1ece0;
    color: #3d3831;
}

[data-theme="light"] .ai-bubble.user {
    background: rgba(234, 179, 8, 0.2);
    color: #1c1813;
}

[data-theme="light"] .ai-panel-icon-btn { color: #756c5e; }
[data-theme="light"] .ai-panel-input input {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(120, 95, 55, 0.3);
    color: #1c1813;
}

/* ---------- Mobile: full-screen panel ---------- */
@media (max-width: 640px) {
    .ai-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; }
    .ai-panel { width: 100vw; }
}

/* ============================================
   OVERVIEW REDESIGN
   Header + quick actions, attention strip,
   tabbed analytics, tabbed AI insights.
   Uses existing --glass-* / --text-* tokens
   so both themes adapt automatically.
   ============================================ */

/* ---------- Header + Quick Actions ---------- */
.ov-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.ov-header h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.ov-header-sub {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.ov-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ov-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    font: 600 13.5px 'Inter', sans-serif;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    background: var(--glass-soft, rgba(255,255,255,0.06));
    color: var(--text-secondary);
    cursor: pointer;
    transition: transform 0.15s, background 0.2s, border-color 0.2s, color 0.2s;
    backdrop-filter: blur(12px);
    white-space: nowrap;
}

.ov-action-btn:hover {
    border-color: rgba(22, 163, 74, 0.5);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.ov-action-btn i { color: #16a34a; }

.ov-action-btn.primary {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #ffffff;
    border-color: #16a34a;
}

.ov-action-btn.primary i { color: #ffffff; }

.ov-action-btn.primary:hover {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: #22c55e;
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.28);
}

/* Yellow-brand override (dark mode) */
html:not([data-theme="light"]) .ov-action-btn i { color: #FACC15; }

html:not([data-theme="light"]) .ov-action-btn.primary {
    background: #FACC15;
    color: #141210;
    border-color: #FACC15;
}

html:not([data-theme="light"]) .ov-action-btn.primary i { color: #141210; }

html:not([data-theme="light"]) .ov-action-btn.primary:hover {
    background: #EAB308;
    border-color: #EAB308;
    box-shadow: 0 8px 24px rgba(250, 204, 21, 0.3);
}

[data-theme="light"] .ov-action-btn.primary {
    background: #E0A300;
    border-color: #E0A300;
    color: #100e0a;
}

[data-theme="light"] .ov-action-btn.primary i { color: #100e0a; }

/* ---------- Needs Attention Strip ---------- */
.ov-attention {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(239,68,68,0.10), rgba(251,146,60,0.08) 60%, transparent);
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    border-left: 4px solid #ef4444;
    margin-bottom: 22px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}

.ov-attention[hidden] { display: none; }

.ov-attention:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    border-color: rgba(239, 68, 68, 0.35);
}

.ov-attention:focus-visible {
    outline: 2px solid #4ade80;
    outline-offset: 3px;
}

.ov-attention-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    font-size: 15px;
    flex-shrink: 0;
}

.ov-attention-body { flex: 1; min-width: 0; }

.ov-attention-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.ov-attention-meta {
    font-size: 12.5px;
    color: var(--text-secondary);
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.ov-attention-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ov-attention-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #16a34a;
    white-space: nowrap;
    flex-shrink: 0;
}

html:not([data-theme="light"]) .ov-attention-cta { color: #FACC15; }
[data-theme="light"] .ov-attention-cta { color: #8a5a00; }

[data-theme="light"] .ov-attention {
    background: linear-gradient(90deg, rgba(239,68,68,0.08), rgba(251,146,60,0.06) 60%, transparent);
}

/* ---------- Analytics Card ---------- */
.ov-analytics { margin-bottom: 24px; }

.ov-analytics-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ov-analytics-head-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 200px;
    flex: 1 1 auto;
}

.ov-analytics-head-left h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.ov-analytics-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------- Tabs ---------- */
.ov-tabs {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border-radius: 10px;
    background: var(--glass-soft, rgba(255,255,255,0.06));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}

.ov-tab {
    padding: 7px 13px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font: 600 12.5px 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ov-tab i { font-size: 11px; opacity: 0.85; }

.ov-tab:hover { color: var(--text-primary); }

.ov-tab.active {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(22, 163, 74, 0.25);
}

html:not([data-theme="light"]) .ov-tab.active {
    background: #FACC15;
    color: #141210;
    box-shadow: 0 3px 10px rgba(250, 204, 21, 0.25);
}

[data-theme="light"] .ov-tab.active {
    background: #E0A300;
    color: #100e0a;
    box-shadow: 0 3px 10px rgba(224, 163, 0, 0.25);
}

/* ---------- Panes ---------- */
.ov-pane { display: none; }
.ov-pane.active { display: block; }

.ov-pane-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.ov-chart-wrap {
    position: relative;
    height: 320px;
    width: 100%;
}

/* ---------- AI Card ---------- */
.ov-ai-card .ov-ai-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.ov-ai-card h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

.ov-ai-pane { display: none; }
.ov-ai-pane.active { display: block; }

/* ---------- Refresh button (used to be missing) ---------- */
.ai-refresh-btn {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    background: var(--glass-soft, rgba(255,255,255,0.06));
    color: var(--text-secondary);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 12px;
    transition: color 0.18s, border-color 0.18s, transform 0.15s;
    flex-shrink: 0;
}

.ai-refresh-btn:hover {
    color: #16a34a;
    border-color: rgba(22, 163, 74, 0.5);
}

.ai-refresh-btn:active { transform: scale(0.92); }

.ai-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }

html:not([data-theme="light"]) .ai-refresh-btn:hover {
    color: #FACC15;
    border-color: rgba(250, 204, 21, 0.5);
}

/* ---------- AI content primitives (were missing) ---------- */
.ai-card-content { color: var(--text-secondary); }

.ai-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    font-size: 13px;
}

.ai-loading i { color: #16a34a; }
html:not([data-theme="light"]) .ai-loading i { color: #FACC15; }

/* Forecast */
.ai-forecast-summary {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 14px;
    padding: 10px 13px;
    border-radius: 9px;
    background: var(--glass-soft, rgba(255,255,255,0.06));
    border-left: 3px solid #16a34a;
}

html:not([data-theme="light"]) .ai-forecast-summary { border-left-color: #FACC15; }

.ai-forecast-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 120px;
    padding: 0 2px;
    margin-bottom: 8px;
}

.ai-forecast-bar {
    flex: 1;
    min-width: 6px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #22c55e, #16a34a);
    opacity: 0.85;
    transition: opacity 0.15s;
    cursor: default;
}

.ai-forecast-bar:hover { opacity: 1; }

html:not([data-theme="light"]) .ai-forecast-bar {
    background: linear-gradient(180deg, #FACC15, #EAB308);
}

[data-theme="light"] .ai-forecast-bar {
    background: linear-gradient(180deg, #E0A300, #B8860B);
}

.ai-forecast-xaxis {
    display: flex;
    gap: 4px;
    padding: 0 2px;
    margin-bottom: 14px;
}

.ai-forecast-xaxis span {
    flex: 1;
    text-align: center;
    font-size: 9.5px;
    color: var(--text-muted, #8a8275);
}

.ai-forecast-totals {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    color: var(--text-secondary);
    padding-top: 12px;
    border-top: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    flex-wrap: wrap;
}

.ai-forecast-totals strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* Restock */
.ai-restock-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    transition: background 0.15s;
}

.ai-restock-item:hover {
    background: var(--glass-soft, rgba(255,255,255,0.06));
}

.ai-restock-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 13px;
    flex-shrink: 0;
}

.ai-restock-icon.critical { background: rgba(239, 68, 68, 0.15);    color: #f87171; }
.ai-restock-icon.high     { background: rgba(251, 146, 60, 0.15);   color: #fb923c; }
.ai-restock-icon.medium   { background: rgba(59, 130, 246, 0.15);   color: #60a5fa; }
.ai-restock-icon.low      { background: rgba(34, 197, 94, 0.15);    color: #4ade80; }

.ai-restock-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ai-restock-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-restock-reason {
    font-size: 11.5px;
    color: var(--text-muted, #8a8275);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-restock-action {
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.15);
    color: #16a34a;
    white-space: nowrap;
    flex-shrink: 0;
}

html:not([data-theme="light"]) .ai-restock-action {
    background: rgba(250, 204, 21, 0.15);
    color: #FACC15;
}

/* ---------- Low Stock sub-section inside Restock pane ---------- */
.ov-low-stock {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}

.ov-low-stock-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.ov-low-stock-sub {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted, #8a8275);
}

/* ---------- Utilities ---------- */
.hide-sm { display: inline; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .ov-analytics-head {
        flex-direction: column;
        align-items: stretch;
    }
    .ov-analytics-controls {
        justify-content: space-between;
        width: 100%;
    }
    .ov-tabs { overflow-x: auto; max-width: 100%; }
    .ov-chart-wrap { height: 280px; }
}

@media (max-width: 700px) {
    .ov-header h1 { font-size: 22px; }
    .ov-header-actions { width: 100%; }
    .ov-action-btn { flex: 1; justify-content: center; padding: 10px 12px; font-size: 12.5px; }
    .hide-sm { display: none; }
    .ov-attention { padding: 12px 14px; gap: 10px; }
    .ov-attention-cta span { display: none; }
    .ov-analytics-controls { flex-direction: column; align-items: stretch; }
    .ov-analytics-controls .filter-select,
    .ov-analytics-controls .compare-toggle { width: 100%; }
    .ov-chart-wrap { height: 240px; }
    .ov-ai-card .ov-ai-head { flex-direction: column; align-items: stretch; }
}

/* ============================================
   AI PANEL — QUICK-PROMPT CHIPS
   Sits between the thread and the input row.
   Horizontal scroll on narrow panels.
   ============================================ */
.ai-quick-prompts {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    border-top: 1px solid rgba(250, 204, 21, 0.08);
    background: rgba(20, 18, 16, 0.35);
    flex-shrink: 0;

    /* Thin visible scrollbar — signals to the user that the strip scrolls */
    scrollbar-width: thin;
    scrollbar-color: rgba(250, 204, 21, 0.35) transparent;

    /* Right-edge fade so cut-off chips hint at more content */
    mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(100% - 24px),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(100% - 24px),
        transparent 100%
    );
}

.ai-quick-prompts::-webkit-scrollbar {
    height: 4px;
}

.ai-quick-prompts::-webkit-scrollbar-track {
    background: transparent;
}

.ai-quick-prompts::-webkit-scrollbar-thumb {
    background: rgba(250, 204, 21, 0.35);
    border-radius: 999px;
}

.ai-quick-prompts::-webkit-scrollbar-thumb:hover {
    background: rgba(250, 204, 21, 0.6);
}

.ai-chip {
    flex-shrink: 0;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(250, 204, 21, 0.22);
    background: rgba(250, 204, 21, 0.06);
    color: #d6cfc0;
    font: 500 12px 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
    white-space: nowrap;
}

.ai-chip:hover:not(:disabled) {
    background: rgba(250, 204, 21, 0.14);
    border-color: rgba(250, 204, 21, 0.5);
    color: #FACC15;
}

.ai-chip:active:not(:disabled) {
    transform: scale(0.96);
}

.ai-chip:focus-visible {
    outline: 2px solid rgba(250, 204, 21, 0.65);
    outline-offset: 2px;
}

.ai-chip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ai-chip i {
    font-size: 10px;
    opacity: 0.85;
}

/* Light mode */
[data-theme="light"] .ai-quick-prompts {
    background: #f5efe0;
    border-top-color: rgba(120, 95, 55, 0.2);
    scrollbar-color: rgba(180, 165, 130, 0.5) transparent;
}

[data-theme="light"] .ai-quick-prompts::-webkit-scrollbar-thumb {
    background: rgba(180, 165, 130, 0.5);
}

[data-theme="light"] .ai-quick-prompts::-webkit-scrollbar-thumb:hover {
    background: rgba(180, 165, 130, 0.75);
}

[data-theme="light"] .ai-chip {
    background: rgba(234, 179, 8, 0.08);
    border-color: rgba(180, 165, 130, 0.4);
    color: #57534e;
}

[data-theme="light"] .ai-chip:hover:not(:disabled) {
    background: rgba(234, 179, 8, 0.16);
    border-color: rgba(234, 179, 8, 0.55);
    color: #854d0e;
}

[data-theme="light"] .ai-chip:focus-visible {
    outline-color: rgba(224, 163, 0, 0.7);
}

@media (max-width: 480px) {
    .ai-quick-prompts { padding: 8px 10px; gap: 6px; }
    .ai-chip { padding: 6px 10px; font-size: 11.5px; }
}

/* ============================================
   AI FAB — HIDE UNTIL LOGGED IN
   The FAB lives outside #dashboardContainer so it can float above
   everything. That means it also shows on the login screen.
   Gate it on the same body class the dashboard toggle uses.
   ============================================ */

body:not(.is-logged-in) .ai-fab,
body:not(.is-logged-in) .ai-panel {
    display: none !important;
}

/* ============================================
   MOBILE RESPONSIVENESS — TIER 2 POLISH
   Appended last to win cascade order against
   the earlier cool-slate mobile rules.
   ============================================ */

/* ---------- 1. Nav: prevent logo-text overflow ---------- */
.dashboard-nav {
    gap: 12px;
}

.nav-left {
    flex: 1 1 auto;
    min-width: 0;            /* allow shrinking below content size */
}

.nav-logo {
    min-width: 0;
    flex: 1 1 auto;
}

.nav-logo span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

@media (max-width: 900px) {
    /* Icon-only logo — the 46-char title has no place on a phone */
    .nav-logo span {
        display: none;
    }
    .nav-logo img {
        width: 34px;
        height: 34px;
    }
}

/* ---------- 2. Sidebar drawer: anchor to container, not viewport ---------- */
/* The old rule used position:fixed + top:72px. On mobile the nav
   wraps to 2 lines and exceeds 72px, so the drawer overlapped it.
   Anchoring to .dashboard-container means the drawer always starts
   at whatever height the nav actually rendered. */
.dashboard-container {
    position: relative;
}

@media (max-width: 768px) {
    .sidebar {
        position: absolute;      /* was: fixed */
        top: 0;                  /* was: 72px */
        bottom: 0;
        left: -280px;
        width: 280px;
        z-index: 99;
        transition: left 0.3s;
        background: var(--glass-deep, #141210);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    }
    .sidebar.open {
        left: 0;
    }

    /* Content shifts right by a small shadow when the drawer is open,
       giving a visual cue that the drawer is a modal overlay. */
    .sidebar.open ~ .dashboard-content {
        filter: brightness(0.85);
        pointer-events: none;
    }
}

/* ---------- 3. KPI cards: 2-column on narrow phones ---------- */
@media (max-width: 640px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .kpi-card {
        padding: 16px 14px 16px 18px;
    }
    .kpi-card .stat-info h3 {
        font-size: 22px;
    }
    .kpi-card .stat-info p {
        font-size: 10.5px;
        letter-spacing: 0.04em;
        margin: 1px 0 4px;
    }
    .kpi-card .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    .kpi-card .stat-change {
        font-size: 10.5px;
        padding: 2px 6px;
    }
}

/* ---------- 4. POS layout: bounded heights on mobile ---------- */
@media (max-width: 1200px) {
    .pos-layout {
        grid-template-columns: 1fr;
        height: auto;
        min-height: auto;
        gap: 16px;
    }
    .product-catalog {
        height: auto;
        max-height: 55vh;        /* cap and let content scroll inside */
        min-height: 320px;
    }
    .cart-section {
        height: auto;            /* grow to content */
        min-height: 360px;
    }
}

@media (max-width: 640px) {
    .product-catalog {
        max-height: 45vh;
        min-height: 260px;
        padding: 14px;
    }
    .cart-section {
        padding: 14px;
    }
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }
    .product-card {
        min-height: 108px;
        padding: 10px 10px 8px;
    }
    .product-card-name { font-size: 12.5px; }
    .product-card-price { font-size: 14px; }
    .product-card-meta { font-size: 9.5px; }
}

/* ---------- 5. Content padding + tap targets ---------- */
@media (max-width: 640px) {
    .dashboard-content {
        padding: 16px 12px;
    }
    .page-header {
        margin-bottom: 20px;
    }
    .page-header h1 {
        font-size: 22px;
    }
    .page-header p {
        font-size: 13px;
    }
    .inventory-header {
        margin-bottom: 1.25rem;
    }
    .inventory-header h1 {
        font-size: 22px;
    }

    /* Bigger tap targets — the default 32px buttons are below
       the 44px iOS/Android accessibility guideline. */
    .nav-icon {
        padding: 10px;
        font-size: 17px;
    }
    .qty-btn {
        width: 36px;
        height: 36px;
    }
    .inv-filter-card {
        padding: 14px;
    }
}

/* ---------- 6. Modals: full-width sheet on small phones ---------- */
@media (max-width: 640px) {
    .modal {
        align-items: flex-end;   /* sheet anchored to bottom */
        padding: 0;
    }
    .modal-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 16px 16px 0 0;
        padding: 1.5rem 1.25rem;
        max-height: 92vh;
        overflow-y: auto;
    }
    .form-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .form-grid .form-group:last-child {
        grid-column: auto;
    }
    .modal-actions {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .modal-actions button {
        width: 100%;
    }
}

/* ---------- 7. Overview header — cleaner wrap on narrow phones ---------- */
@media (max-width: 640px) {
    .ov-header {
        gap: 12px;
        margin-bottom: 16px;
    }
    .ov-header h1 {
        font-size: 22px;
    }
    .ov-header-sub {
        font-size: 13px;
    }
    .ov-header-actions {
        width: 100%;
        gap: 6px;
    }
    .ov-action-btn {
        flex: 1;
        justify-content: center;
        padding: 10px 8px;
        font-size: 12px;
    }

    .ov-attention {
        padding: 12px 14px;
        gap: 10px;
    }
    .ov-attention-title {
        font-size: 13px;
    }
    .ov-attention-meta {
        font-size: 11.5px;
        gap: 10px;
    }
    .ov-attention-cta span {
        display: none;   /* keep only the arrow */
    }
}

/* ============================================
   MOBILE RESPONSIVE — ORDERS, CUSTOMERS, ACTIVITY
   Applied at ≤ 768px. Desktop layout untouched.
   ============================================ */

@media (max-width: 768px) {

    /* ============================================================
       ORDERS PAGE — convert rows to stacked cards
       ============================================================ */
    .orders-table-container {
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
    }

    .orders-table-container > div {
        overflow: visible !important;
    }

    .orders-table-container .inventory-table {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .orders-table-container .inventory-table thead {
        display: none;
    }

    .orders-table-container .inventory-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .orders-table-container .inventory-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "id       actions"
            "customer customer"
            "items    items"
            "total    total"
            "date     date";
        gap: 4px 12px;
        padding: 14px;
        background: var(--glass-surface, #1e293b);
        border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
        border-radius: 14px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .orders-table-container .inventory-table tbody td {
        display: block;
        padding: 0;
        border: none;
        font-size: 13px;
        line-height: 1.4;
        color: var(--text-primary);
    }

    /* Assign each cell to a grid area */
    .orders-table-container .inventory-table tbody td:nth-child(1) {
        grid-area: id;
        font-family: ui-monospace, 'SF Mono', monospace;
        font-size: 11px;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        align-self: center;
    }

    .orders-table-container .inventory-table tbody td:nth-child(2) {
        grid-area: customer;
        font-weight: 600;
        font-size: 14px;
        color: var(--text-primary);
    }

    .orders-table-container .inventory-table tbody td:nth-child(3) {
        grid-area: items;
        padding-top: 8px;
        margin-top: 4px;
        border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
    }

    .orders-table-container .inventory-table tbody td:nth-child(4) {
        grid-area: total;
        font-weight: 700;
        font-size: 15px;
        color: var(--text-primary);
        margin-top: 4px;
    }

    /* Status column — hidden (all rows are "Completed") */
    .orders-table-container .inventory-table tbody td:nth-child(5) {
        display: none;
    }

    .orders-table-container .inventory-table tbody td:nth-child(6) {
        grid-area: date;
        font-size: 11px;
        color: var(--text-muted);
        margin-top: 2px;
    }

    .orders-table-container .inventory-table tbody td:nth-child(7) {
        grid-area: actions;
        justify-self: end;
        align-self: start;
    }

    /* Items cell — full width inside the card */
    .orders-table-container .order-items-cell {
        max-width: 100%;
    }

    .orders-table-container .order-items-btn {
        padding: 8px;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 8px;
    }

    .orders-table-container .order-items-text {
        font-size: 12.5px;
        -webkit-line-clamp: 2;
    }

    .orders-table-container .order-items-badge {
        font-size: 10px;
    }

    /* ============================================================
       CUSTOMERS PAGE — hide less-critical columns
       ============================================================ */
    .customers-table-container {
        overflow-x: visible;
    }

    .customers-table-container .inventory-table {
        min-width: 0;
        width: 100%;
    }

    /* Hide Email (2) and Phone (3) on mobile */
    .customers-table-container .inventory-table thead th:nth-child(2),
    .customers-table-container .inventory-table tbody td:nth-child(2),
    .customers-table-container .inventory-table thead th:nth-child(3),
    .customers-table-container .inventory-table tbody td:nth-child(3) {
        display: none;
    }

    .customers-table-container .inventory-table th,
    .customers-table-container .inventory-table td {
        padding: 12px 10px;
        font-size: 13px;
    }

    /* Customer name — clamp to one line, ellipsis */
    .customers-table-container .inventory-table td:nth-child(1) {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
    }

    /* Numeric columns right-aligned */
    .customers-table-container .inventory-table td:nth-child(4),
    .customers-table-container .inventory-table td:nth-child(5) {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    /* ============================================================
       ACTIVITY LOG — graceful wrapping for long names
       ============================================================ */
    .activity-item {
        align-items: flex-start;
        padding: 12px 10px;
        gap: 10px;
    }

    .activity-content {
        flex: 1;
        min-width: 0;
    }

    .activity-content p {
        font-size: 13px;
        line-height: 1.5;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .activity-time {
        font-size: 11px;
        line-height: 1.4;
        display: block;
        margin-top: 3px;
        color: var(--text-muted);
    }

    /* Badge stays beside content, never pushed off */
    .activity-item > .stock-badge {
        flex-shrink: 0;
        align-self: center;
        font-size: 10.5px;
    }

    /* Keep stat cards 2-column but tighter */
    .recent-activity .stats-grid {
        gap: 10px;
    }
}
/* ============================================
   MOBILE RESPONSIVE — INVENTORY MANAGEMENT
   Converts the 7-column table to stacked cards
   at ≤ 768px. Desktop layout untouched.
   ============================================ */

@media (max-width: 768px) {

    /* ---------- Container ---------- */
    .inventory-table-container {
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
    }

    .inventory-table-container > div {
        overflow: visible !important;
    }

    .inventory-table {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .inventory-table thead {
        display: none;
    }

    .inventory-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* ---------- Row = card ---------- */
    .inventory-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "product  actions"
            "meta     meta"
            "price    price"
            "stock    stock"
            "status   status"
            "updated  updated";
        gap: 6px 12px;
        padding: 14px;
        background: var(--glass-surface, #1e293b);
        border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
        border-radius: 14px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .inventory-table tbody td {
        display: block;
        padding: 0;
        border: none;
        font-size: 13px;
        line-height: 1.4;
        color: var(--text-primary);
    }

    /* Cell 1 — Product (name + size/brand + sku) */
    .inventory-table tbody td:nth-child(1) {
        grid-area: product;
        min-width: 0;
    }

    .inventory-table .product-info {
        align-items: flex-start;
    }

    .inventory-table .product-details {
        min-width: 0;
        flex: 1;
    }

    .inventory-table .product-name {
        font-size: 14.5px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 4px;
        overflow-wrap: anywhere;
    }

    /* Size + brand lines under the name */
    .inventory-table .product-sku {
        display: block;
        font-size: 11.5px;
        color: var(--text-muted);
        margin-top: 2px;
    }

    .inventory-table .product-sku i {
        width: 14px;
        text-align: center;
        margin-right: 2px;
    }

    /* Cell 2 — Category */
    .inventory-table tbody td:nth-child(2) {
        grid-area: meta;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-muted);
        margin-top: 2px;
    }

    /* Cell 3 — Price */
    .inventory-table tbody td:nth-child(3) {
        display: block;
        grid-area: price;
        margin-top: 2px;
        font-weight: 700;
        font-size: 13px;
        color: var(--text-primary);
    }

    /* Cell 4 — Stock input or per-size summary */
    .inventory-table tbody td:nth-child(4) {
        grid-area: stock;
        padding-top: 10px;
        margin-top: 4px;
        border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
    }

    .inventory-table tbody td:nth-child(4) .quantity-input {
        width: 100%;
        max-width: 120px;
        padding: 8px;
        font-size: 13px;
    }

    /* Per-size stock summary grid */
    .inventory-table .size-stock-summary {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 16px;
        min-width: 0;
        width: 100%;
    }

    .inventory-table .size-stock-summary > div {
        display: flex;
        align-items: baseline;
        gap: 6px;
        font-size: 12.5px;
    }

    .inventory-table .size-stock-summary > div > span {
        color: var(--text-secondary);
    }

    .inventory-table .size-stock-total {
        width: 100%;
        padding-top: 6px;
        margin-top: 4px;
        border-top: 1px dashed var(--glass-border, rgba(255, 255, 255, 0.08));
        font-size: 12px;
        color: var(--text-muted);
    }

    /* Cell 5 — Status badge */
    .inventory-table tbody td:nth-child(5) {
        grid-area: status;
        margin-top: 4px;
    }

    /* Cell 6 — Last updated */
    .inventory-table tbody td:nth-child(6) {
        grid-area: updated;
        font-size: 11px;
        color: var(--text-muted);
        margin-top: 2px;
    }

    /* Cell 7 — Actions */
    .inventory-table tbody td:nth-child(7) {
        grid-area: actions;
        justify-self: end;
        align-self: start;
    }

    .inventory-table .action-buttons {
        flex-direction: row;
        gap: 4px;
    }

    .inventory-table .btn-icon {
        padding: 8px;
        font-size: 13px;
    }

    /* ---------- Inventory stats — tighter 2-col grid ---------- */
    .inventory-stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .inventory-stats .stat-card {
        padding: 14px;
        gap: 10px;
    }

    .inventory-stats .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
        border-radius: 10px;
    }

    .inventory-stats .stat-info h3 {
        font-size: 22px;
    }

    .inventory-stats .stat-info p {
        font-size: 11px;
    }

    /* ---------- Inventory tools — stack controls ---------- */
    .inventory-tools {
        padding: 14px;
        gap: 12px;
    }

    .inventory-tools .nav-search {
        width: 100%;
        max-width: none;
    }

    .inventory-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .inventory-filters .filter-select {
        min-width: 0;
        width: 100%;
    }

    /* ---------- Inventory header buttons ---------- */
    .inventory-header {
        gap: 12px;
    }

    .inventory-actions {
        width: 100%;
        gap: 8px;
    }

    .inventory-actions .submit-btn,
    .inventory-actions .secondary-btn {
        flex: 1;
        justify-content: center;
        padding: 11px 12px;
        font-size: 12.5px;
    }

    /* ---------- Pagination — tighter buttons ---------- */
    .pagination {
        gap: 4px;
        margin-top: 12px;
    }

    .page-btn {
        min-width: 34px;
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* ============================================
   MOBILE RESPONSIVE — USER MANAGEMENT
   Converts the user table row to a stacked
   card at ≤ 768px. Desktop untouched.
   ============================================ */

@media (max-width: 768px) {

    /* ---------- Container ---------- */
    #page-users .inventory-table-container {
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
    }

    #page-users .inventory-table-container > div {
        overflow: visible !important;
    }

    #page-users .inventory-table {
        display: block;
        width: 100%;
        min-width: 0;
    }

    #page-users .inventory-table thead {
        display: none;
    }

    #page-users .inventory-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* ---------- Row = card ---------- */
    #page-users .inventory-table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "avatar name"
            "avatar email"
            "role   role"
            "status status"
            "login  login"
            "actions actions";
        gap: 6px 12px;
        padding: 14px;
        background: var(--glass-surface, #1e293b);
        border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
        border-radius: 14px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        align-items: center;
    }

    #page-users .inventory-table tbody td {
        display: block;
        padding: 0;
        border: none;
        font-size: 13px;
        line-height: 1.4;
        color: var(--text-primary);
    }

    /* Cell 1 — Name + avatar (uses product-info wrapper already) */
    #page-users .inventory-table tbody td:nth-child(1) {
        grid-area: name;
        display: contents; /* let the product-info layout pass through */
    }

    #page-users .inventory-table .product-info {
        display: contents;
    }

    #page-users .inventory-table .product-info img {
        grid-area: avatar;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50%;
        align-self: start;
    }

    #page-users .inventory-table .product-details {
        grid-area: name;
        align-self: end;
        min-width: 0;
    }

    #page-users .inventory-table .product-name {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Cell 2 — Email */
    #page-users .inventory-table tbody td:nth-child(2) {
        grid-area: email;
        font-size: 12px;
        color: var(--text-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        align-self: start;
    }

    /* Cell 3 — Role badge */
    #page-users .inventory-table tbody td:nth-child(3) {
        grid-area: role;
        margin-top: 6px;
    }

    /* Cell 4 — Status badge */
    #page-users .inventory-table tbody td:nth-child(4) {
        grid-area: status;
    }

    /* Cell 5 — Last login */
    #page-users .inventory-table tbody td:nth-child(5) {
        grid-area: login;
        font-size: 11.5px;
        color: var(--text-muted);
    }

    /* Cell 6 — Actions: horizontal row, full width */
    #page-users .inventory-table tbody td:nth-child(6) {
        grid-area: actions;
        padding-top: 10px;
        margin-top: 6px;
        border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
        width: 100%;
    }

    #page-users .inventory-table .action-buttons {
        flex-direction: row !important;
        justify-content: flex-end !important;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }

    #page-users .inventory-table .btn-icon {
        padding: 9px 12px;
        font-size: 13px;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 8px;
        min-width: 38px;
    }

    #page-users .inventory-table .btn-icon:disabled {
        opacity: 0.35;
    }

    /* ---------- Stats grid on users page ---------- */
    #page-users .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    #page-users .stats-grid .stat-card {
        padding: 14px;
        gap: 10px;
    }

    #page-users .stats-grid .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
        border-radius: 10px;
    }

    #page-users .stats-grid .stat-info h3 {
        font-size: 22px;
    }

    #page-users .stats-grid .stat-info p {
        font-size: 11px;
    }

    #page-users .stats-grid .stat-change {
        font-size: 10px;
    }

    /* ---------- Header buttons ---------- */
    #page-users .inventory-header {
        gap: 12px;
    }

    #page-users .inventory-actions {
        width: 100%;
        gap: 8px;
    }

    #page-users .inventory-actions .submit-btn,
    #page-users .inventory-actions .secondary-btn {
        flex: 1;
        justify-content: center;
        padding: 11px 12px;
        font-size: 12.5px;
    }

    /* ---------- Tools bar ---------- */
    #page-users .inventory-tools {
        padding: 14px;
        gap: 12px;
    }

    #page-users .inventory-tools .nav-search {
        width: 100%;
        max-width: none;
    }

    #page-users .inventory-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    #page-users .inventory-filters .filter-select {
        min-width: 0;
        width: 100%;
    }

    /* ---------- Pagination ---------- */
    #page-users .pagination {
        gap: 4px;
        margin-top: 12px;
    }

    #page-users .page-btn {
        min-width: 34px;
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* Extra-tight phones */
@media (max-width: 420px) {
    #page-users .inventory-table tbody tr {
        padding: 12px;
    }

    #page-users .inventory-table .btn-icon {
        padding: 8px 10px;
        min-width: 34px;
    }
}

/* ============================================
   POS CATALOG CONTROLS — category filter + search
   ============================================ */
.pos-catalog-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
}

.pos-catalog-controls .filter-select {
    min-width: 160px;
    padding: 8px 12px;
    font-size: 13px;
}

.pos-catalog-controls .search-products {
    min-width: 180px;
}

@media (max-width: 640px) {
    .pos-catalog-controls {
        width: 100%;
        justify-content: stretch;
    }
    .pos-catalog-controls .filter-select,
    .pos-catalog-controls .search-products {
        flex: 1 1 140px;
        min-width: 0;
    }
}

/* ============================================
   PRODUCT IMAGE — MODAL UPLOADER + CARD + TABLE
   ============================================ */

/* ---------- Modal uploader ---------- */
.product-image-group {
    grid-column: 1 / -1;
}

.product-image-uploader {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    background: var(--glass-soft, rgba(255, 255, 255, 0.04));
    flex-wrap: wrap;
}

.product-image-preview {
    width: 110px;
    height: 110px;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.12);
    border: 1px dashed rgba(148, 163, 184, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-muted, #8a8275);
    font-size: 11px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.product-image-preview i {
    font-size: 22px;
    opacity: 0.7;
}

.product-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-image-preview.has-image i,
.product-image-preview.has-image span {
    display: none;
}

.product-image-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 180px;
    padding-top: 4px;
}

.product-image-controls small {
    font-size: 11px;
    color: var(--text-muted, #8a8275);
    line-height: 1.4;
}

.product-image-choose,
.product-image-remove {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 8px;
    font: 600 12.5px 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    width: fit-content;
    border: 1px solid transparent;
}

.product-image-choose {
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
    border-color: rgba(22, 163, 74, 0.3);
}

.product-image-choose:hover {
    background: rgba(22, 163, 74, 0.2);
    border-color: rgba(22, 163, 74, 0.55);
}

.product-image-remove {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.28);
}

.product-image-remove:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.5);
}

/* ---------- POS product card image ---------- */
.product-card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.1);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Inventory table thumbnail ---------- */
.inventory-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(148, 163, 184, 0.15);
    display: block;
}

.inventory-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #8a8275);
    font-size: 15px;
    border: 1px dashed rgba(148, 163, 184, 0.35);
}

/* Dark mode brand tint for the empty thumb */
html:not([data-theme="light"]) .inventory-thumb-empty {
    background: rgba(250, 204, 21, 0.06);
    border-color: rgba(250, 204, 21, 0.2);
    color: #8a8275;
}

html:not([data-theme="light"]) .product-image-choose {
    background: rgba(250, 204, 21, 0.1);
    color: #FACC15;
    border-color: rgba(250, 204, 21, 0.3);
}

html:not([data-theme="light"]) .product-image-choose:hover {
    background: rgba(250, 204, 21, 0.18);
    border-color: rgba(250, 204, 21, 0.55);
}

/* Light mode */
[data-theme="light"] .product-image-uploader {
    background: #f8fafc;
    border-color: rgba(148, 163, 184, 0.4);
}

[data-theme="light"] .product-image-preview {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.5);
    color: #64748b;
}

[data-theme="light"] .product-image-choose {
    background: rgba(22, 163, 74, 0.1);
    color: #15803d;
    border-color: rgba(22, 163, 74, 0.4);
}

[data-theme="light"] .product-image-choose:hover {
    background: rgba(22, 163, 74, 0.18);
}

/* Mobile */
@media (max-width: 640px) {
    .product-image-uploader {
        gap: 12px;
        padding: 12px;
    }
    .product-image-preview {
        width: 90px;
        height: 90px;
    }
}

/* ============================================
   AI CHAT — RICH MESSAGE FORMATTING
   ============================================ */

/* Money values: PHP 1,234.56 / ₱1,234.56 */
.ai-bubble .ai-money {
    color: #22c55e;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0 3px;
    border-radius: 4px;
    background: rgba(34, 197, 94, 0.1);
}

/* Status: "low stock" / "low on stock" */
.ai-bubble .ai-status-warn {
    color: #fb923c;
    font-weight: 600;
}

/* Status: "out of stock" / "critical" / "unavailable" */
.ai-bubble .ai-status-danger {
    color: #f87171;
    font-weight: 600;
}

/* Clickable product name pill */
.ai-bubble .ai-product-link {
    display: inline;
    padding: 1px 7px;
    margin: 0 2px;
    border: none;
    border-radius: 6px;
    background: rgba(250, 204, 21, 0.15);
    color: #FACC15;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    text-decoration-color: rgba(250, 204, 21, 0.5);
    transition: background 0.15s, color 0.15s, transform 0.1s;
    white-space: nowrap;
}

.ai-bubble .ai-product-link:hover {
    background: rgba(250, 204, 21, 0.28);
    color: #FDE047;
}

.ai-bubble .ai-product-link:active {
    transform: scale(0.97);
}

.ai-bubble .ai-product-link:focus-visible {
    outline: 2px solid rgba(250, 204, 21, 0.7);
    outline-offset: 2px;
}

/* Small assistant attribution line */
.ai-bubble-meta {
    margin-top: 6px;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.55;
    color: #8a8275;
}

/* Never format the user's own messages */
.ai-bubble.user .ai-money,
.ai-bubble.user .ai-product-link,
.ai-bubble.user .ai-status-warn,
.ai-bubble.user .ai-status-danger {
    background: none;
    color: inherit;
    font-weight: inherit;
    padding: 0;
    margin: 0;
    text-decoration: none;
    cursor: inherit;
}

/* ---------- Light mode ---------- */
[data-theme="light"] .ai-bubble .ai-money {
    color: #15803d;
    background: rgba(34, 197, 94, 0.14);
}

[data-theme="light"] .ai-bubble .ai-status-warn {
    color: #9a3412;
}

[data-theme="light"] .ai-bubble .ai-status-danger {
    color: #b91c1c;
}

[data-theme="light"] .ai-bubble .ai-product-link {
    background: rgba(224, 163, 0, 0.15);
    color: #8a5a00;
    text-decoration-color: rgba(138, 90, 0, 0.45);
}

[data-theme="light"] .ai-bubble .ai-product-link:hover {
    background: rgba(224, 163, 0, 0.25);
    color: #6b4500;
}

[data-theme="light"] .ai-bubble-meta {
    color: #78716c;
}

/* ============================================
   GCASH REFERENCE FIELD
   ============================================ */
.gcash-reference-field {
    margin: 16px 0;
    text-align: left;
}

.gcash-reference-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 8px;
}

.gcash-reference-label i {
    color: #4ade80;
    font-size: 12px;
}

.gcash-reference-help {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.4;
}

.gcash-reference-error {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #f87171;
}

#gcashReference {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    letter-spacing: 0.08em;
    font-size: 14px;
}

.required-star {
    color: #ef4444;
    font-weight: 700;
    margin-left: 2px;
}

/* Light mode */
[data-theme="light"] .gcash-reference-label {
    color: #1f2937;
}

[data-theme="light"] .gcash-reference-label i {
    color: #15803d;
}

[data-theme="light"] .gcash-reference-help {
    color: #64748b;
}

[data-theme="light"] .gcash-reference-error {
    color: #b91c1c;
}

/* AI restock: slice label pill (S, M, L, Bosny, etc.) */
.ai-restock-slice {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(250, 204, 21, 0.15);
    color: #FACC15;
    vertical-align: middle;
}

[data-theme="light"] .ai-restock-slice {
    background: rgba(224, 163, 0, 0.15);
    color: #8a5a00;
}

/* Notifications panel: which slices are low */
.notification-slices {
    margin-top: 2px;
    font-size: 10.5px;
    color: #fb923c;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="light"] .notification-slices {
    color: #9a3412;
}

/* ============================================
   PRODUCT OPTIONS EDITOR (0/1/2 option groups)
   ============================================ */
.form-group-full {
    grid-column: 1 / -1;
}

.checkbox-wrapper-lg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-primary, #e2e8f0);
    cursor: pointer;
    padding: 6px 0;
    line-height: 1.5;
}

.checkbox-wrapper-lg .checkmark {
    margin-top: 2px;
    flex-shrink: 0;
}

.form-hint {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--text-muted, #8a8275);
    line-height: 1.5;
}

.form-hint-inline {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-muted, #8a8275);
}

/* ---- Option group block ---- */
.option-group {
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    background: var(--glass-soft, rgba(255, 255, 255, 0.03));
}

.option-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.option-group-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary, #cbd5e1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.option-name-select {
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    background: var(--glass-soft, rgba(255, 255, 255, 0.05));
    color: var(--text-primary, #e2e8f0);
    font-family: inherit;
    cursor: pointer;
    min-width: 140px;
    flex: 0 1 auto;
}

.option-name-select:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.option-name-select option {
    background: #1e293b;
    color: #e2e8f0;
}

.option-remove-btn {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}

.option-remove-btn:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.5);
}

.option-values-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    background: var(--glass-soft, rgba(255, 255, 255, 0.05));
    color: var(--text-primary, #e2e8f0);
    font-size: 13.5px;
    font-family: inherit;
}

.option-values-input:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.option-values-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    min-height: 22px;
}

.option-values-preview:empty {
    display: none;
}

.option-values-preview .size-chip {
    font-size: 11.5px;
    font-weight: 600;
    color: #cbd5e1;
    background: rgba(22, 163, 74, 0.12);
    border: 1px solid rgba(22, 163, 74, 0.25);
    padding: 2px 8px;
    border-radius: 5px;
}

/* ---- Variant list (single option group) ---- */
.variant-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.variant-row {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) minmax(80px, 1fr) minmax(90px, 1fr);
    gap: 8px;
    align-items: center;
}

.variant-row-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    padding: 8px 10px;
    background: var(--glass-soft, rgba(255, 255, 255, 0.04));
    border-radius: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.variant-row input {
    padding: 8px 10px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    background: var(--glass-soft, rgba(255, 255, 255, 0.05));
    color: var(--text-primary, #e2e8f0);
    font-size: 13px;
    text-align: right;
    font-family: inherit;
    width: 100%;
}

.variant-row input:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
}

.variant-row input::placeholder {
    color: var(--text-muted, #8a8275);
    font-weight: 500;
}

/* ---- Matrix (two option groups) ---- */
.matrix-wrap {
    overflow-x: auto;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    background: var(--glass-soft, rgba(255, 255, 255, 0.03));
}

.matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    min-width: 480px;
}

.matrix-table thead th {
    padding: 9px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #cbd5e1);
    text-align: center;
    white-space: nowrap;
}

.matrix-table thead th.matrix-row-label {
    text-align: left;
    min-width: 80px;
}

.matrix-table tbody th.matrix-row-label {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--text-primary, #e2e8f0);
    text-align: left;
    background: rgba(255, 255, 255, 0.02);
    border-right: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    white-space: nowrap;
}

.matrix-table tbody td {
    padding: 6px 8px;
    vertical-align: middle;
}

.variant-cell-input {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    min-width: 130px;
}

.variant-cell-input input {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: 7px;
    background: var(--glass-soft, rgba(255, 255, 255, 0.05));
    color: var(--text-primary, #e2e8f0);
    font: 600 12px 'Inter', sans-serif;
    text-align: right;
    outline: none;
    min-width: 0;
}

.variant-cell-input input:focus {
    border-color: #16a34a;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
}

.variant-cell-input input.matrix-price {
    color: #4ade80;
}

.variant-cell-input input::placeholder {
    color: var(--text-muted, #8a8275);
    font-weight: 500;
}

/* ---- Summary bar ---- */
.variants-summary {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-top: 8px;
    border-radius: 10px;
    background: rgba(22, 163, 74, 0.08);
    font-size: 12px;
    color: var(--text-secondary, #cbd5e1);
}

.variants-summary strong {
    color: var(--text-primary, #f8fafc);
    font-weight: 700;
    margin-left: 4px;
}

/* ---- Light mode ---- */
[data-theme="light"] .option-group {
    background: #faf6ea;
    border-color: rgba(120, 95, 55, 0.22);
}

[data-theme="light"] .option-name-select,
[data-theme="light"] .option-values-input,
[data-theme="light"] .variant-row input,
[data-theme="light"] .variant-cell-input input {
    background: #ffffff;
    border-color: rgba(120, 95, 55, 0.28);
    color: #100e0a;
}

[data-theme="light"] .option-name-select option {
    background: #ffffff;
    color: #100e0a;
}

[data-theme="light"] .variant-row-label {
    background: #f5efe0;
    color: #100e0a;
}

[data-theme="light"] .matrix-wrap {
    background: #faf6ea;
    border-color: rgba(120, 95, 55, 0.22);
}

[data-theme="light"] .matrix-table thead th {
    background: #f5efe0;
    color: #57534e;
}

[data-theme="light"] .matrix-table tbody th.matrix-row-label {
    background: #f5efe0;
    color: #100e0a;
}

[data-theme="light"] .variants-summary {
    background: rgba(22, 163, 74, 0.08);
    color: #3d3831;
}

[data-theme="light"] .variants-summary strong {
    color: #100e0a;
}

[data-theme="light"] .option-values-preview .size-chip {
    color: #166534;
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(22, 163, 74, 0.3);
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
    .variant-row {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .variant-row-label {
        grid-column: 1 / -1;
    }
    .variant-cell-input {
        min-width: 100px;
    }
}


html:not([data-theme="light"]) .payment-method i {
    color: #FACC15;
}


/* ============================================
   CART ITEM — PER-LINE REMOVE BUTTON
   ============================================ */
.cart-item-remove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #f87171;
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.12s;
    padding: 0;
}

.cart-item-remove:hover {
    background: rgba(239, 68, 68, 0.14);
    color: #ef4444;
}

.cart-item-remove:active {
    transform: scale(0.92);
}

.cart-item-remove:focus-visible {
    outline: 2px solid rgba(239, 68, 68, 0.55);
    outline-offset: 2px;
}

/* Light mode — slightly deeper red */
[data-theme="light"] .cart-item-remove {
    color: #dc2626;
}

[data-theme="light"] .cart-item-remove:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

/* Mobile — smaller footprint so the row still fits */
@media (max-width: 480px) {
    .cart-item-remove {
        width: 26px;
        height: 26px;
        font-size: 11.5px;
    }
}

/* ============================================
   REPORT CARD — CSV / PDF BUTTON ROW
   ============================================ */
.report-card-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

.report-card-actions .secondary-btn {
    flex: 1 1 0;
    min-width: 96px;
    padding: 9px 12px;
    font-size: 12.5px;
    justify-content: center;
    gap: 6px;
}

.report-card-actions .report-pdf-btn {
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

.report-card-actions .report-pdf-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fca5a5;
}

.report-card-actions .report-pdf-btn i {
    color: #f87171;
}

/* Light mode — deeper red */
[data-theme="light"] .report-card-actions .report-pdf-btn {
    border-color: rgba(220, 38, 38, 0.4);
    color: #b91c1c;
}

[data-theme="light"] .report-card-actions .report-pdf-btn:hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.7);
    color: #991b1b;
}

[data-theme="light"] .report-card-actions .report-pdf-btn i {
    color: #b91c1c;
}

/* Mobile — stack buttons */
@media (max-width: 480px) {
    .report-card-actions {
        flex-direction: column;
    }
    .report-card-actions .secondary-btn {
        width: 100%;
    }
}

/* ============================================
   SETTINGS PAGE — 2-column grid, hints, actions
   ============================================ */
.settings-container {
    max-width: 960px;
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

.settings-section h3 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-section h3 i {
    color: #E0A300;
    font-size: 15px;
}

[data-theme="light"] .settings-section h3 i {
    color: #A16207;
}

.settings-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-muted, #8a8275);
}

.settings-hint i {
    color: #E0A300;
    font-size: 11px;
    margin-top: 2px;
    flex-shrink: 0;
}

[data-theme="light"] .settings-hint {
    color: #756c5e;
}

[data-theme="light"] .settings-hint i {
    color: #A16207;
}

.settings-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 8px;
}

.settings-actions .secondary-btn {
    padding: 12px 20px;
    font-size: 14px;
}

.settings-actions .submit-btn {
    padding: 12px 24px;
    font-size: 14px;
    min-width: 180px;
    justify-content: center;
}

@media (max-width: 480px) {
    .settings-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .settings-actions .secondary-btn,
    .settings-actions .submit-btn {
        width: 100%;
    }
}

/* Receipt footer line on printed receipts */
.receipt-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.16);
    text-align: center;
    font-size: 11px;
    color: #94a3b8;
    letter-spacing: 0.02em;
}

[data-theme="light"] .receipt-footer {
    border-top-color: rgba(148, 163, 184, 0.35);
    color: #64748b;
}

/* ============================================
   AI FORECAST — REDESIGN
   Pills row, flat-forecast view, value labels
   on trending bars, weekday x-axis.
   ============================================ */

/* ---------- Pills row (model / error / trend) ---------- */
.ai-forecast-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.ai-forecast-description {
    margin: -2px 0 10px;
    color: #8a8275;
    font-size: 11px;
    line-height: 1.45;
}

.user-action-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 48px;
    min-height: 42px;
    padding: 4px 3px;
}

.user-action-btn span {
    display: block;
    color: #c3baaa;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

[data-theme="light"] .user-action-btn span {
    color: #5f5648;
}

[data-theme="light"] .ai-forecast-description {
    color: #756c5e;
}

.ai-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.4;
}

.ai-pill-model {
    background: rgba(250, 204, 21, 0.12);
    color: #FACC15;
    border: 1px solid rgba(250, 204, 21, 0.22);
}

.ai-pill-error {
    background: rgba(148, 163, 184, 0.1);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.2);
    font-weight: 600;
}

.ai-pill-up {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.28);
}

.ai-pill-down {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.28);
}

.ai-pill-flat {
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

/* ---------- Flat forecast view (no trend to chart) ---------- */
.ai-forecast-flat {
    position: relative;
    height: 110px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: linear-gradient(to top, rgba(250, 204, 21, 0.03), transparent);
    overflow: hidden;
}

.ai-forecast-flat-line {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    border-top: 2px dashed rgba(250, 204, 21, 0.65);
    transform: translateY(-50%);
}

.ai-forecast-flat-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #FACC15;
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.18), 0 4px 12px rgba(250, 204, 21, 0.35);
}

.ai-forecast-flat-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% - 32px));
    font-size: 12px;
    font-weight: 700;
    color: #FACC15;
    letter-spacing: 0.02em;
    white-space: nowrap;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(20, 18, 16, 0.7);
    backdrop-filter: blur(6px);
}

.ai-forecast-flat-note {
    text-align: center;
    font-size: 11px;
    color: #8a8275;
    font-style: italic;
    margin-bottom: 12px;
}

/* ---------- Trending bars — value labels above each bar ---------- */
.ai-forecast-bar {
    position: relative;
}

.ai-forecast-bar-val {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    color: #FACC15;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0.9;
}

/* Widen the value label spacing on narrow panels so numbers
   don't crash into each other. */
@media (max-width: 480px) {
    .ai-forecast-bar-val {
        font-size: 8px;
        top: -14px;
    }
}

/* ---------- X-axis — weekday + day number ---------- */
.ai-forecast-xaxis span {
    font-size: 9.5px;
    letter-spacing: 0.01em;
}

/* ---------- Light mode overrides ---------- */
[data-theme="light"] .ai-pill-model {
    background: rgba(224, 163, 0, 0.14);
    color: #8a5a00;
    border-color: rgba(224, 163, 0, 0.28);
}

[data-theme="light"] .ai-pill-error {
    background: rgba(120, 95, 55, 0.1);
    color: #756c5e;
    border-color: rgba(120, 95, 55, 0.22);
}

[data-theme="light"] .ai-pill-up {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.3);
}

[data-theme="light"] .ai-pill-down {
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="light"] .ai-pill-flat {
    background: rgba(120, 95, 55, 0.12);
    color: #57534e;
    border-color: rgba(120, 95, 55, 0.25);
}

[data-theme="light"] .ai-forecast-flat {
    background: linear-gradient(to top, rgba(224, 163, 0, 0.04), transparent);
}

[data-theme="light"] .ai-forecast-flat-line {
    border-top-color: rgba(224, 163, 0, 0.65);
}

[data-theme="light"] .ai-forecast-flat-dot {
    background: #E0A300;
    box-shadow: 0 0 0 4px rgba(224, 163, 0, 0.18), 0 4px 12px rgba(224, 163, 0, 0.35);
}

[data-theme="light"] .ai-forecast-flat-label {
    color: #8a5a00;
    background: rgba(255, 253, 247, 0.85);
}

[data-theme="light"] .ai-forecast-flat-note {
    color: #756c5e;
}

[data-theme="light"] .ai-forecast-bar-val {
    color: #8a5a00;
}

/* ============================================================
   OFFSREEN PAGE SKIPPING
   Tells the browser to skip layout, paint, and style for pages
   that aren't in the active tab. Cuts CPU work dramatically on
   the dashboard where 9 pages exist in the DOM at once.
   ============================================================ */
.page-content:not(.active) {
    content-visibility: auto;
    contain-intrinsic-size: 0 800px;
}

/* Same treatment for inventory rows — a 100-row table no longer
   forces layout for rows scrolled out of view. */
.inventory-table tbody tr {
    content-visibility: auto;
    contain-intrinsic-size: 0 60px;
}

/* Respect users who've asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    .bg-glow,
    .geo-shape,
    .bg-gradient,
    .bg-overlay {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   LIGHT MODE — BUG FIXES
   Fills gaps where dark-mode hardcoded colors
   were never overridden. Appended last so it
   wins cascade order on every rule below.
   ============================================ */

/* ---------- Bug 1: .modal-icon (payment + forgot-password) ---------- */
[data-theme="light"] .modal-icon {
    background: rgba(234, 179, 8, 0.14);
    color: #A16207;
}

/* ---------- Bug 2: .modal-close (payment + receipt) ---------- */
[data-theme="light"] .modal-close {
    color: #756c5e;
}

[data-theme="light"] .modal-close:hover,
[data-theme="light"] .modal-close:focus-visible {
    background: rgba(120, 95, 55, 0.12);
    color: #100e0a;
}

/* ---------- Bug 3: .ai-panel-title ---------- */
[data-theme="light"] .ai-panel-title {
    color: #8a5a00;
}

/* ---------- Bug 4: .ai-panel-icon-btn hover ---------- */
[data-theme="light"] .ai-panel-icon-btn:hover {
    background: rgba(224, 163, 0, 0.12);
    color: #8a5a00;
}

/* ---------- Bug 5: .ai-refresh-btn hover ---------- */
[data-theme="light"] .ai-refresh-btn:hover {
    color: #15803d;
    border-color: rgba(22, 163, 74, 0.5);
}

/* ---------- Bug 6: .nav-icon hover (warm tint) ---------- */
[data-theme="light"] .nav-icon:hover {
    background: rgba(120, 95, 55, 0.08);
    color: #100e0a;
}

[data-theme="light"] .user-btn:hover {
    background: rgba(120, 95, 55, 0.08);
}

/* ---------- Consistency: AI FAB + send button use amber in light mode ---------- */
[data-theme="light"] .ai-fab {
    background: #E0A300;
    box-shadow: 0 10px 30px rgba(224, 163, 0, 0.35);
}

[data-theme="light"] .ai-fab:hover {
    background: #B8860B;
    box-shadow: 0 14px 40px rgba(224, 163, 0, 0.5);
}

[data-theme="light"] .ai-panel-input button {
    background: #E0A300;
    color: #100e0a;
}

[data-theme="light"] .ai-panel-input button:hover:not(:disabled) {
    background: #B8860B;
}

/* Focus ring for the FAB should match the amber brand, not yellow */
[data-theme="light"] .ai-fab:focus-visible {
    outline-color: #E0A300;
}

/* ---------- Contrast bump: --text-muted passes AA on cream ---------- */
/* Was #756c5e — 3.98:1 on #ebe2cd (fails AA for body text).
   Bumping to #5f5648 gives 5.69:1. */
[data-theme="light"] {
    --text-muted: #5f5648;
}

/* ============================================
   AI FORECAST — Chart.js canvas wrapper
   Replaces the old div-bar chart. Fixed height
   so switching scenarios or themes never causes
   the AI card to jump.
   ============================================ */
.ai-forecast-canvas-wrap {
    position: relative;
    height: 200px;
    margin-bottom: 12px;
}

.ai-forecast-canvas-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Legacy bar-chart rules kept for safety — no longer matched,
   but harmless if any HTML template still emits them. */
.ai-forecast-chart,
.ai-forecast-bar,
.ai-forecast-bar-val {
    display: none;
}

@media (max-width: 480px) {
    .ai-forecast-canvas-wrap { height: 170px; }
}

/* ============================================
   REPORTS — PERIOD SELECTOR
   Sits above the report cards. Applies to
   Sales and Financial exports only.
   ============================================ */
.report-period-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--glass-surface, rgba(42, 37, 31, 0.72));
    border: 1px solid var(--glass-border, rgba(250, 204, 21, 0.1));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.report-period-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-period-group[hidden] {
    display: none;
}

.report-period-group label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary, #d6cfc0);
    white-space: nowrap;
}

.report-period-group .filter-select {
    min-width: 160px;
}

.report-period-group input[type="date"].filter-select {
    min-width: 150px;
    font-family: inherit;
}

.report-period-summary {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--text-secondary, #d6cfc0);
    text-align: right;
    flex: 1 1 220px;
    min-width: 0;
}

.report-period-summary strong {
    color: var(--text-primary, #fef9e7);
    font-weight: 700;
}

/* Light theme */
[data-theme="light"] .report-period-bar {
    background: #ffffff;
    border-color: rgba(120, 95, 55, 0.22);
    box-shadow: 0 4px 16px rgba(70, 50, 20, 0.08);
}

[data-theme="light"] .report-period-group label {
    color: #3d3831;
}

[data-theme="light"] .report-period-summary {
    color: #3d3831;
}

[data-theme="light"] .report-period-summary strong {
    color: #100e0a;
}

/* Mobile */
@media (max-width: 640px) {
    .report-period-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .report-period-group {
        flex-wrap: wrap;
    }

    .report-period-group .filter-select {
        flex: 1;
        min-width: 0;
    }

    .report-period-group input[type="date"].filter-select {
        flex: 1;
        min-width: 0;
    }

    .report-period-summary {
        margin-left: 0;
        text-align: left;
    }
}

/* ============================================
   INVENTORY TABLE — WIDTH FIX
   The chips introduced in the Stock cell need
   horizontal room to wrap; give the table a
   real minimum so no column gets crushed.
   ============================================ */
.inventory-table {
    min-width: 1100px;   /* was 900 — chips need the extra space */
}

/* Give the Stock cell its own floor so chips pack horizontally
   instead of stacking one-per-line. */
.inventory-table td:nth-child(4),
.inventory-table th:nth-child(4) {
    min-width: 220px;
}

/* Let the chip container actually use that width. */
.size-stock-summary {
    min-width: 200px;
    max-width: 340px;
}

/* Shorten "Last Updated" — the timestamp string is the widest
   non-essential column. Clamp it to 2 lines and let it truncate. */
.inventory-table td:nth-child(6) {
    max-width: 140px;
    font-size: 11.5px;
    color: var(--text-muted, #8a8275);
    white-space: normal;
    word-break: break-all;
    line-height: 1.3;
}

.inventory-table th:nth-child(6) {
    max-width: 140px;
}

/* Actions column — pin to the right so it never hides. */
.inventory-table td:last-child,
.inventory-table th:last-child {
    min-width: 90px;
    text-align: right;
    padding-right: 20px;
}

/* Container: always allow horizontal scroll on narrow viewports
   so nothing is cut off — the user can pan to see the rest. */
.inventory-table-container > div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Slim scrollbar for the horizontal scroll area. */
.inventory-table-container > div::-webkit-scrollbar {
    height: 8px;
}

.inventory-table-container > div::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 999px;
}

/* Tablet — allow the table to shrink a bit but keep Stock readable */
@media (max-width: 1024px) {
    .inventory-table {
        min-width: 1000px;   /* was 800 */
    }
    .size-stock-summary {
        min-width: 180px;
        max-width: 280px;
    }
}

/* ============================================
   AUDIT — ACTIVITY LIST SPACING + BADGE FIX
   Prevents items from stretching when few exist,
   and gives the bare "Registered" badge a real
   visual treatment instead of floating text.
   ============================================ */

/* Force list items to sit at their natural height — never stretch
   to fill the container, even when the parent has extra space. */
.activity-list {
    align-content: flex-start;
    justify-content: flex-start;
}

.activity-item {
    align-self: stretch;
    min-height: 56px;
    max-height: 84px;
    flex-wrap: nowrap;
    align-items: center;
}

/* Long names shouldn't push the badge off the row */
.activity-item .activity-content {
    min-width: 0;
    overflow: hidden;
}

.activity-item .activity-content p {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-item .activity-time {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Base .stock-badge with no modifier class — this is what "Registered"
   falls back to. Give it a real pill treatment so it reads as a badge. */
.stock-badge:not(.in-stock):not(.low-stock):not(.out-of-stock):not(.over-stock) {
    background: rgba(148, 163, 184, 0.14);
    color: var(--text-secondary, #d6cfc0);
    border: 1px solid rgba(148, 163, 184, 0.22);
}

[data-theme="light"] .stock-badge:not(.in-stock):not(.low-stock):not(.out-of-stock):not(.over-stock) {
    background: rgba(120, 95, 55, 0.1);
    color: #57534e;
    border-color: rgba(120, 95, 55, 0.22);
}

/* ============================================
   ANALYTICS — CATEGORY DOUGHNUT CONTAINER
   The doughnut is height-constrained so it stays
   small relative to a wide canvas, leaving the
   legend stranded at the far right. Capping the
   container width brings the two together.
   ============================================ */
.ov-pane[data-ov-pane="categories"] .ov-chart-wrap {
    max-width: 620px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .ov-pane[data-ov-pane="categories"] .ov-chart-wrap {
        max-width: 520px;
    }
}

@media (max-width: 640px) {
    .ov-pane[data-ov-pane="categories"] .ov-chart-wrap {
        max-width: 100%;
    }
}

/* ============================================
   CART ITEM — warm brand surface
   Replaces the cool-slate grey with a tinted
   surface that matches the amber theme.
   ============================================ */
.cart-item {
    background: rgba(250, 204, 21, 0.05);
    border: 1px solid rgba(250, 204, 21, 0.10);
    border-bottom: 1px solid rgba(250, 204, 21, 0.10);
    transition: background 0.15s, border-color 0.15s;
}

.cart-item:hover {
    background: rgba(250, 204, 21, 0.08);
    border-color: rgba(250, 204, 21, 0.18);
}

/* qty buttons — soften against the new surface */
.cart-item .qty-btn {
    background: rgba(250, 204, 21, 0.08);
    border-color: rgba(250, 204, 21, 0.18);
    color: var(--text-primary, #fef9e7);
}

.cart-item .qty-btn:hover {
    background: #FACC15;
    border-color: #FACC15;
    color: #141210;
}

/* qty input — match the surface */
.cart-item .cart-item-qty-input {
    background: rgba(250, 204, 21, 0.06);
    border-color: rgba(250, 204, 21, 0.15);
    color: var(--text-primary, #fef9e7);
}

.cart-item .cart-item-qty-input:focus {
    background: rgba(250, 204, 21, 0.10);
    border-color: #FACC15;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.18);
}

/* ---------- Light mode ---------- */
[data-theme="light"] .cart-item {
    background: #faf6ea;
    border: 1px solid rgba(120, 95, 55, 0.14);
    border-bottom: 1px solid rgba(120, 95, 55, 0.14);
}

[data-theme="light"] .cart-item:hover {
    background: #f5efe0;
    border-color: rgba(120, 95, 55, 0.24);
}

[data-theme="light"] .cart-item .qty-btn {
    background: rgba(224, 163, 0, 0.08);
    border-color: rgba(224, 163, 0, 0.22);
    color: #3d3831;
}

[data-theme="light"] .cart-item .qty-btn:hover {
    background: #E0A300;
    border-color: #E0A300;
    color: #100e0a;
}

[data-theme="light"] .cart-item .cart-item-qty-input {
    background: #ffffff;
    border-color: rgba(120, 95, 55, 0.22);
    color: #100e0a;
}

[data-theme="light"] .cart-item .cart-item-qty-input:focus {
    background: #ffffff;
    border-color: #E0A300;
    box-shadow: 0 0 0 2px rgba(224, 163, 0, 0.18);
}

/* ============================================================
   MOBILE RESPONSIVENESS — FINAL POLISH
   Addresses iOS zoom-on-focus, tap targets, safe-area
   notches, FAB overlap, chart heights, filter rows, and
   horizontal overflow. Appended last to win cascade order.
   ============================================================ */

/* ---------- 1. GLOBAL HARDENING ---------- */

/* Prevent horizontal overflow from any oversized child */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* iOS Safari auto-zooms the viewport when a form input with
   font-size < 16px receives focus. Force 16px on all inputs
   below the desktop breakpoint — the visual style is preserved
   because the parent layout scales the effective size down. */
@media (max-width: 768px) {
    input,
    select,
    textarea,
    .input-wrapper input,
    .input-wrapper select,
    .form-group input,
    .form-group select,
    .form-group textarea,
    .settings-input,
    .filter-select,
    .quantity-input,
    .cart-item-qty-input,
    .option-values-input,
    .option-name-select,
    .nav-search input,
    .search-products input,
    .pos-search input,
    .confirm-input,
    #gcashReference {
        font-size: 16px !important;
    }
}

/* Tap targets — enforce a 44px minimum for all interactive
   buttons on mobile. This is the iOS HIG + Material recommendation. */
@media (max-width: 768px) {
    .btn-icon,
    .modal-close-btn,
    .modal-close,
    .nav-icon,
    .qty-btn,
    .page-btn,
    .ov-tab,
    .ai-chip,
    .theme-toggle,
    .dashboard-nav .mobile-toggle,
    .ai-panel-icon-btn,
    .notifications-view-all {
        min-width: 44px;
        min-height: 44px;
    }

    .btn-icon,
    .qty-btn,
    .modal-close-btn,
    .modal-close {
        display: inline-grid;
        place-items: center;
    }
}

/* ---------- 2. SAFE AREA INSETS (iPhone notch / home bar) ---------- */

@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        .dashboard-nav {
            padding-top: max(12px, env(safe-area-inset-top));
            padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right));
        }

        .dashboard-content {
            padding-left: max(12px, env(safe-area-inset-left));
            padding-right: max(12px, env(safe-area-inset-right));
            padding-bottom: max(20px, env(safe-area-inset-bottom));
        }

        .toast-container {
            right: max(12px, env(safe-area-inset-right));
            bottom: max(12px, env(safe-area-inset-bottom));
        }

        .ai-fab {
            right: max(16px, env(safe-area-inset-right));
            bottom: max(16px, env(safe-area-inset-bottom));
        }

        .ai-panel {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* ---------- 3. FAB + TOAST OVERLAP PREVENTION ---------- */

/* The AI FAB sits at bottom-right, and toasts used to slide in
   at the same corner — they overlapped on narrow phones.
   Shift toasts up and to the left of the FAB on mobile. */
@media (max-width: 640px) {
    .toast-container {
        right: 12px;
        bottom: 76px;                 /* clears the 52px FAB + gap */
        max-width: calc(100vw - 24px);
    }

    .toast {
        max-width: calc(100vw - 24px);
        font-size: 0.8rem;
    }

    .toast.cart-toast {
        max-width: 220px;
    }
}

/* If the AI panel is open on mobile, hide the FAB entirely */
@media (max-width: 640px) {
    body.ai-panel-open .ai-fab {
        opacity: 0;
        pointer-events: none;
    }
}

/* ---------- 4. NOTIFICATIONS PANEL — FULL WIDTH ON MOBILE ---------- */

@media (max-width: 520px) {
    .notifications-panel {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        max-height: 70vh;
        border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
        animation: notificationsSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes notificationsSlideUp {
        from { transform: translateY(100%); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    .notifications-panel-header {
        padding: 16px 20px;
    }

    .notification-item {
        padding: 14px 16px;
        min-height: 60px;
    }

    .notifications-panel-footer {
        padding: 8px;
    }
}

/* ---------- 5. OVERVIEW CHARTS — PROPER HEIGHTS ON MOBILE ---------- */

@media (max-width: 640px) {
    .ov-chart-wrap {
        height: 220px;
    }

    .ov-analytics-head {
        gap: 12px;
        margin-bottom: 12px;
    }

    .ov-analytics-head-left h2 {
        font-size: 16px;
    }

    .sales-summary {
        font-size: 11.5px;
        line-height: 1.4;
    }

    .ov-pane-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* KPI cards — 2-column with tighter padding */
    .kpi-card {
        padding: 14px 12px 14px 16px;
    }

    .kpi-card .stat-info h3 {
        font-size: 20px;
    }

    .kpi-card .stat-info p {
        font-size: 10px;
        letter-spacing: 0.03em;
    }

    .kpi-card .stat-change {
        font-size: 10px;
        padding: 2px 6px;
    }

    .kpi-card .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* ---------- 6. AUDIT FILTER ROW — STACK ON MOBILE ---------- */

@media (max-width: 768px) {
    .audit-filters-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px;
    }

    .audit-filters-row .nav-search {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .audit-filters-row .filter-select {
        width: 100%;
        min-width: 0;
    }

    .audit-filters-row .inventory-actions {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .audit-filters-row .inventory-actions .secondary-btn {
        padding: 10px 8px;
        font-size: 11.5px;
        justify-content: center;
    }

    /* Audit stat cards — 2 columns */
    #page-audit .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    #page-audit .stat-card {
        padding: 12px;
        gap: 10px;
    }

    #page-audit .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    #page-audit .stat-info h3 {
        font-size: 18px;
    }

    #page-audit .stat-info p {
        font-size: 10.5px;
    }
}

/* ---------- 7. POS CART — TIGHTEN ON MOBILE ---------- */

@media (max-width: 640px) {
    .cart-section {
        padding: 14px;
    }

    .cart-items {
        padding: 8px;
    }

    .cart-item {
        padding: 10px;
        gap: 8px;
    }

    .cart-item-name {
        font-size: 13px;
    }

    .cart-item-qty {
        font-size: 11px;
    }

    .cart-item-actions {
        gap: 4px;
    }

    .cart-item .qty-btn {
        width: 36px;
        height: 36px;
    }

    .cart-item-qty-input {
        width: 48px;
        padding: 6px 4px;
        text-align: center;
    }

    .cart-item > strong {
        min-width: 68px !important;
        font-size: 13px;
    }

    .cart-item-remove {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .checkout-btn,
    .clear-btn {
        padding: 12px;
        font-size: 14px;
    }
}

/* ---------- 8. AI PANEL — FULL-SCREEN MOBILE ---------- */

@media (max-width: 640px) {
    .ai-panel {
        width: 100vw;
        border-left: none;
    }

    .ai-panel-header {
        padding: 14px 16px;
        min-height: 52px;
    }

    .ai-thread {
        padding: 14px;
        font-size: 13px;
    }

    .ai-bubble {
        max-width: 92%;
        padding: 10px 12px;
        font-size: 13px;
    }

    .ai-panel-input {
        padding: 10px;
        gap: 6px;
    }

    .ai-panel-input input {
        padding: 12px 14px;
    }

    .ai-panel-input button {
        width: 46px;
        height: 46px;
    }

    .ai-quick-prompts {
        padding: 10px 12px;
    }

    .ai-chip {
        padding: 8px 14px;
        font-size: 12px;
    }
}

/* ---------- 9. MODALS — FULL-WIDTH SHEETS ON SMALL PHONES ---------- */

@media (max-width: 640px) {
    /* Backdrop stays dim, modal rises from bottom */
    .modal {
        padding: 0;
        align-items: flex-end;
    }

    .modal-content {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        border-radius: 20px 20px 0 0;
        padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
        max-height: 92vh;
        overflow-y: auto;
        animation: modalSheetUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes modalSheetUp {
        from { transform: translateY(100%); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    /* Grabber indicator at the top of the sheet */
    .modal-content::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        margin: -8px auto 12px;
        border-radius: 2px;
        background: rgba(148, 163, 184, 0.35);
    }

    .modal-header {
        margin-bottom: 16px;
    }

    .modal-header h2 {
        font-size: 18px;
    }

    .modal-close-btn {
        width: 40px;
        height: 40px;
    }
}

/* Payment + receipt modals — same treatment */
@media (max-width: 640px) {
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .modal-overlay.show .modal-card {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        border-radius: 20px 20px 0 0;
        padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
        max-height: 92vh;
        overflow-y: auto;
    }
}

/* ---------- 10. TABLES — CONFIRM STACKED MODE ACROSS PAGES ---------- */

@media (max-width: 768px) {
    /* If any table container still shows a horizontal scroll on
       mobile, force the stacked layout to kick in. */
    #page-audit .inventory-table-container,
    #page-orders .orders-table-container,
    #page-customers .customers-table-container {
        background: transparent;
        border: none;
        border-radius: 0;
    }

    #page-audit .audit-owner-table,
    #page-orders .inventory-table,
    #page-customers .inventory-table {
        display: block;
        width: 100%;
        min-width: 0;
    }

    #page-audit .audit-owner-table thead,
    #page-orders .inventory-table thead,
    #page-customers .inventory-table thead {
        display: none;
    }
}

/* ---------- 11. HEADER — MOBILE TIGHTEN ---------- */

@media (max-width: 640px) {
    .dashboard-nav {
        padding: 10px 12px;
        min-height: auto;
        gap: 8px;
    }

    .nav-left {
        gap: 8px;
    }

    .nav-logo img {
        width: 32px;
        height: 32px;
    }

    .nav-right {
        gap: 6px;
    }

    .nav-icon {
        padding: 8px;
        font-size: 16px;
    }

    .user-btn {
        padding: 4px 8px 4px 4px;
    }

    .user-btn img {
        width: 28px;
        height: 28px;
    }
}

/* ---------- 12. PAGE HEADER + ACTIONS ---------- */

@media (max-width: 640px) {
    .page-header {
        margin-bottom: 16px;
    }

    .page-header h1 {
        font-size: 20px;
        line-height: 1.25;
    }

    .page-header p {
        font-size: 12.5px;
        margin-top: 3px;
    }

    .inventory-header h1 {
        font-size: 20px;
    }

    .inventory-header p {
        font-size: 12.5px;
    }

    /* Overview header actions — 2×2 grid on mobile */
    .ov-header-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        width: 100%;
    }

    .ov-action-btn {
        justify-content: center;
        padding: 10px 12px;
        font-size: 12.5px;
    }
}

/* ---------- 13. SETTINGS + REPORTS ---------- */

@media (max-width: 640px) {
    .settings-container {
        max-width: 100%;
    }

    .settings-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
    }

    .settings-actions .secondary-btn,
    .settings-actions .submit-btn {
        width: 100%;
        min-width: 0;
        padding: 12px 16px;
    }

    .reports-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .report-card {
        padding: 18px 16px;
    }

    .report-card i {
        font-size: 26px;
        margin-bottom: 10px;
    }

    .report-card h3 {
        font-size: 16px;
    }

    .report-card p {
        font-size: 12.5px;
        margin-bottom: 14px;
    }

    .report-card-actions {
        flex-direction: column;
        gap: 6px;
    }

    .report-card-actions .secondary-btn {
        width: 100%;
    }
}

/* ---------- 14. FORMS — STACK LABELS + INPUTS ---------- */

@media (max-width: 640px) {
    .form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .form-grid .form-group:last-child {
        grid-column: auto;
    }

    .meta-row {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* ---------- 15. LANDSCAPE-PHONE SAFETY NET ---------- */

@media (max-width: 900px) and (orientation: landscape) {
    .modal-content,
    .modal-overlay.show .modal-card {
        max-height: 95vh;
    }

    .ai-panel {
        width: min(420px, 100vw);
    }
}

/* ---------- 16. REDUCED MOTION — RESPECT USER PREFERENCE ---------- */

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
    .modal-content,
    .modal-overlay.show .modal-card,
    .notifications-panel {
        animation: none !important;
    }
}

/* ============================================================
   THEME REVEAL — CROSS-BROWSER CIRCULAR TRANSITION
   Works in every browser (no startViewTransition API required).
   An overlay expands from the click point using clip-path.
   ============================================================ */

.theme-reveal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    /* 35% yellow — lets the underlying page show through as the
       circle expands, so it reads as a tinted-glass wash instead
       of a solid color block. */
    background-color: rgba(250, 204, 21, 0.35);
    clip-path: circle(0px at 50% 50%);
    will-change: clip-path;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

html[data-theme="light"] .theme-reveal-overlay {
    background-color: rgba(224, 163, 0, 0.35);
}

@keyframes circular-reveal {
    from {
        clip-path: circle(0px at var(--click-x, 50%) var(--click-y, 50%));
    }
    to {
        clip-path: circle(var(--max-radius, 150vmax) at var(--click-x, 50%) var(--click-y, 50%));
    }
}

.theme-reveal-overlay.animate {
    animation: circular-reveal 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ============================================================
   MOBILE FIXES — PASS 2
   Fixes specific overflows observed on real phones:
   KPI value truncation, filter dropdown clipping,
   user-action row wrapping. Appended last to win.
   ============================================================ */

@media (max-width: 640px) {

    /* ----------------------------------------------------------
       1. KPI CARDS — compact layout so long numbers fit
       ----------------------------------------------------------
       On a 375px viewport the card is ~165px wide. With 22px
       font and a 40px icon, ₱17,007.80 overflows by ~1 char.
       Shrink the icon, tighten the gap, reduce the font — the
       number now has ~110px of text space. */
    .kpi-card {
        padding: 12px 12px 12px 16px;
        gap: 10px;
    }

    .kpi-card .stat-icon {
        width: 34px;
        height: 34px;
        font-size: 14px;
        border-radius: 10px;
    }

    .kpi-card .stat-info {
        min-width: 0;   /* allow text to shrink instead of pushing */
    }

    .kpi-card .stat-info h3 {
        font-size: 17px;
        line-height: 1.15;
        letter-spacing: -0.015em;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Very tight phones — one more notch down */
    @media (max-width: 380px) {
        .kpi-card .stat-info h3 {
            font-size: 15px;
        }
    }

    .kpi-card .stat-info p {
        font-size: 9.5px;
        letter-spacing: 0.03em;
    }

    .kpi-card .stat-change {
        font-size: 9.5px;
        padding: 2px 5px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ----------------------------------------------------------
   2. FILTER SELECTS — text has room to breathe
   ----------------------------------------------------------
   iOS Safari forces font-size: 16px on selects to prevent
   zoom. Combined with 16px horizontal padding and the native
   arrow, the text area is only ~130px. Reduce padding on
   mobile so "All Categories" fits. */
@media (max-width: 768px) {
    .filter-select {
        padding: 8px 28px 8px 12px;   /* keep right space for arrow, cut left */
        font-size: 14px;
        text-overflow: ellipsis;
    }

    /* Restore 16px on the input element specifically for iOS
       anti-zoom, but style the wrapper so visual size looks 14px. */
    .inventory-filters .filter-select,
    .orders-filters .filter-select,
    .audit-filters-row .filter-select,
    #posCategoryFilter,
    #categoryFilter,
    #stockFilter,
    #orderStatusFilter,
    #orderDateFilter,
    #userRoleFilter,
    #userStatusFilter {
        font-size: 14px !important;   /* override the earlier !important */
    }
}

/* On very narrow phones, stack filters into one column */
@media (max-width: 420px) {
    .inventory-filters {
        grid-template-columns: 1fr;
    }

    .orders-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .orders-filters .filter-select {
        width: 100%;
        min-width: 0;
    }
}

/* ----------------------------------------------------------
   3. USER MANAGEMENT — actions stay on one line
   ----------------------------------------------------------
   The 4 action buttons (edit / reset / deactivate / delete)
   total ~200px. In the mobile grid the actions row is only
   ~300px but `flex-wrap: wrap` was letting the last icon
   drop. Lock to a single row and shrink buttons. */
@media (max-width: 768px) {
    #page-users .inventory-table .action-buttons {
        flex-wrap: nowrap !important;
        gap: 4px;
        justify-content: flex-end !important;
    }

    #page-users .inventory-table .btn-icon {
        padding: 8px 10px;
        font-size: 12px;
        min-width: 36px;
        min-height: 36px;
    }
}

/* ----------------------------------------------------------
   4. ANALYTICS PERIOD DROPDOWN — slightly narrower on mobile
   ---------------------------------------------------------- */
@media (max-width: 640px) {
    .ov-analytics-controls .filter-select {
        width: 100%;
        min-width: 0;
        font-size: 14px;
    }

    /* Tabs row — allow horizontal scroll rather than cramming */
    .ov-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ov-tabs::-webkit-scrollbar {
        display: none;
    }

    .ov-tab {
        flex-shrink: 0;
    }
}

/* ----------------------------------------------------------
   5. HARDEN AGAINST OVERFLOW — force numbers + names to shrink
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    /* Any element that holds a currency value */
    .stat-info h3,
    .kpi-card .stat-info h3,
    .audit-amount,
    .audit-cell-amount,
    .order-details-grand strong,
    .receipt-grand-total {
        font-variant-numeric: tabular-nums;
        min-width: 0;
    }

    /* Prevent long email/name from pushing layout */
    .user-text,
    .product-name,
    .notification-title,
    .activity-content p,
    .cart-item-name {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* Low-confidence forecast — amber accent instead of green */
.ai-forecast-summary-warn {
    border-left-color: #fb923c !important;
    background: rgba(251, 146, 60, 0.08) !important;
}

html:not([data-theme="light"]) .ai-forecast-summary-warn {
    border-left-color: #fb923c !important;
    background: rgba(251, 146, 60, 0.08) !important;
}

[data-theme="light"] .ai-forecast-summary-warn {
    border-left-color: #ea580c !important;
    background: rgba(251, 146, 60, 0.12) !important;
}

/* Amber pill for "Low confidence" trend */
.ai-pill-uncertain {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
    border: 1px solid rgba(251, 146, 60, 0.3);
}

[data-theme="light"] .ai-pill-uncertain {
    background: rgba(251, 146, 60, 0.15);
    color: #9a3412;
    border-color: rgba(251, 146, 60, 0.4);
}
/* ============================================================
   THEME CROSS-FADE FALLBACK
   Used when View Transitions is not available (older Chrome,
   Codespaces iframes, etc.). Transitions only color properties
   so it stays GPU-cheap and works on every browser since ~2011.
   ============================================================ */
html.theme-fading,
html.theme-fading *,
html.theme-fading *::before,
html.theme-fading *::after {
    transition:
        background-color 400ms cubic-bezier(0.4, 0, 0.2, 1),
        color            400ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color     400ms cubic-bezier(0.4, 0, 0.2, 1),
        fill             400ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke           400ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* ============================================
   POS HEADER INTEGRATION (Icon + Text)
   ============================================ */
.pos-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.pos-header-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--fill-3, rgba(148, 163, 184, 0.15)); /* Matches your translucent surface */
    color: var(--text-primary, #f1f5f9);
    display: grid;
    place-items: center;
    font-size: 24px;
    flex-shrink: 0;
}

.pos-header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pos-header-text h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary, #f1f5f9);
    line-height: 1.2;
    margin: 0;
}

.pos-header-text p {
    font-size: 14px;
    color: var(--text-secondary, #94a3b8);
    margin-top: 2px;
}

/* Responsive adjustment for smaller phones */
@media (max-width: 640px) {
    .pos-header-icon {
        width: 46px;
        height: 46px;
        font-size: 20px;
        border-radius: 12px;
    }
    .pos-header-text h1 {
        font-size: 22px;
    }
    .pos-header-text p {
        font-size: 12.5px;
    }
}
/* ============================================
   DASHBOARD HEADER UPGRADE
   ============================================ */
.ov-header-title-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ov-header-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--fill-3, rgba(148, 163, 184, 0.15));
    color: var(--text-primary, #f1f5f9);
    display: grid;
    place-items: center;
    font-size: 24px;
    flex-shrink: 0;
}

.ov-header-text h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}

.ov-date-display {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--glass-surface, rgba(255, 255, 255, 0.5));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 12px;
}

/* Light mode adjustments */
[data-theme="light"] .ov-date-display {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(120, 95, 55, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .ov-header-title-group {
        gap: 12px;
    }
    .ov-header-icon {
        width: 46px;
        height: 46px;
        font-size: 20px;
        border-radius: 12px;
    }
    .ov-header-text h1 {
        font-size: 22px;
    }
    .ov-date-display {
        display: none; /* Hide date on mobile to save space */
    }
}
/* ============================================
   INVENTORY HEADER UPGRADE
   ============================================ */
.inventory-header-title-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.inventory-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.inventory-title-row h1 {
    margin: 0; /* Remove default margin to align with pill */
}

.metric-pill {
    background: var(--fill-3, rgba(148, 163, 184, 0.15));
    color: var(--text-secondary, #57534e);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.inventory-header-search {
    min-width: 240px;
    height: 42px; /* Match button height */
    background: var(--glass-surface);
}

.inventory-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 900px) {
    .inventory-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .inventory-actions {
        width: 100%;
    }
    
    .inventory-header-search {
        width: 100%;
        max-width: none;
        order: -1; /* Move search to the top on mobile */
    }
    
    .inventory-actions .submit-btn,
    .inventory-actions .secondary-btn {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .inventory-header-title-group {
        gap: 12px;
    }
    
    .inventory-title-row {
        gap: 8px;
    }
    
    .inventory-title-row h1 {
        font-size: 22px;
    }
}
/* ============================================
   INVENTORY TOOLBAR LAYOUT FIX
   ============================================ */
.inventory-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.inventory-tools .nav-search {
    height: 42px;
    background: var(--glass-soft, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}

/* Stack on mobile */
@media (max-width: 768px) {
    .inventory-tools {
        flex-direction: column;
        align-items: stretch;
    }
    .inventory-tools .nav-search {
        max-width: none;
        width: 100%;
    }
}

/* ============================================
   LOGIN FORM — META ROW ALIGNMENT FIX
   ============================================ */

/* 1. Align checkbox and note to the top instead of center */
.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Changed from center */
    gap: 12px;
    flex-wrap: wrap; /* Allows the note to drop to a new line on small screens */
    margin-bottom: 22px;
}

/* 2. Prevent "Remember me" from breaking into two lines */
.checkbox-wrapper {
    white-space: nowrap;
}

/* 3. Fix the reset note alignment (inherited from .helper-text) */
.login-reset-note {
    margin-top: 0; /* Removes the 16px top margin from .helper-text */
    justify-content: flex-start; /* Left-aligns the content */
    align-items: flex-start; /* Aligns the shield icon to the top */
    text-align: left;
    line-height: 1.5;
    max-width: 240px; /* Restricts width so the text wraps nicely */
}

/* 4. Nudge the icon slightly so it aligns perfectly with the first line of text */
.login-reset-note i {
    margin-top: 3px;
    flex-shrink: 0; /* Prevents the icon from shrinking or squishing */
}