/* ==================================================================
   SMART SHOP INVENTORY MANAGEMENT SYSTEM
   File: assets/css/style.css
   Purpose: Global theme — colors, typography, layout, components.
   Design language: modern, premium, minimal, professional.

   Color modes: this file works together with Bootstrap 5.3's built-in
   color-mode system. Toggling <html data-bs-theme="dark|light"> flips
   every Bootstrap component (buttons, forms, tables, dropdowns, modals)
   automatically; the custom variables below (--color-*) flip along
   with it so our own components (sidebar, topbar, stat cards, etc.)
   stay in sync. See assets/js/script.js -> initThemeToggle().
   ================================================================== */

/* Smooth cross-fade between full page navigations (every menu click is
   a normal server-rendered page load, not a SPA) instead of a hard,
   jarring cut from one page straight to the next. Supported in Chrome/
   Edge 111+; browsers that don't understand it just keep the normal
   instant navigation they already had, so this is a safe, no-JS
   progressive enhancement. */
@view-transition {
    navigation: auto;
}

:root {
    --color-primary: #16A34A;      /* Primary green */
    --color-primary-dark: #128a3e;
    --color-primary-light: #e8f8ee;
    --color-primary-rgb: 22, 163, 74;

    --color-dark: #0F172A;         /* Sidebar / dark surfaces (constant across themes) */
    --color-sidebar-bg: #0F172A;
    --color-sidebar-bg-alt: #16213b;

    /* Theme-aware surface colors (flipped under [data-bs-theme="dark"] below) */
    --color-bg-page: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-surface-alt: #F1F5F9;
    --color-border: #E2E8F0;
    --color-text: #1E293B;
    --color-text-muted: #64748B;
    --color-heading: #0F172A;

    /* Back-compat aliases used by older markup */
    --color-light: var(--color-bg-page);
    --color-white: var(--color-surface);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
    --shadow-elevated: 0 8px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
    --shadow-pop: 0 20px 60px rgba(0,0,0,0.35);

    --transition-fast: .15s ease;
    --transition-base: .22s ease;

    --sidebar-width: 260px;
    --sidebar-width-collapsed: 84px;
}

/* ---------------------------------------------------------------
   DARK MODE — Bootstrap 5.3 color-mode attribute
--------------------------------------------------------------- */
[data-bs-theme="dark"] {
    --color-bg-page: #0B1220;
    --color-surface: #121B2E;
    --color-surface-alt: #17233A;
    --color-border: #253349;
    --color-text: #E2E8F0;
    --color-text-muted: #94A3B8;
    --color-heading: #F1F5F9;

    --color-light: var(--color-bg-page);
    --color-white: var(--color-surface);

    --shadow-soft: 0 1px 2px rgba(0,0,0,0.25), 0 4px 14px rgba(0,0,0,0.35);
    --shadow-elevated: 0 10px 28px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);

    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--color-bg-page);
    color: var(--color-text);
    font-size: 14.5px;
    transition: background-color var(--transition-base), color var(--transition-base);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--color-heading);
}

/* Bangla mode (see includes/header.php, includes/lang_helpers.php) —
   Poppins has no Bengali glyphs, so add Noto Sans Bengali ahead of it.
   Latin text (numbers, POS, brand names) still renders in Poppins;
   only actual Bengali characters fall through to Noto Sans Bengali. */
body.lang-bn,
body.lang-bn h1, body.lang-bn h2, body.lang-bn h3,
body.lang-bn h4, body.lang-bn h5, body.lang-bn h6 {
    font-family: 'Poppins', 'Noto Sans Bengali', sans-serif;
}

a {
    text-decoration: none;
}

::selection {
    background: rgba(var(--color-primary-rgb), .25);
}

/* Custom slim scrollbar for scrollable panels */
.nav-scroll::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
#productGrid::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.nav-scroll::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
#productGrid::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .35);
    border-radius: 10px;
}

/* ---------------------------------------------------------------
   AUTH / LOGIN PAGE
--------------------------------------------------------------- */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* .auth-card + the "Powered by" line below must stack vertically, not
                                sit side-by-side - without this, flex's default row direction placed
                                them next to each other and justify-content:center then centered that
                                whole two-item row, shoving .auth-card off-center (its left edge cut
                                off-screen) on narrow/mobile viewports. */
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--color-dark) 0%, #16281f 45%, var(--color-primary-dark) 100%);
    padding: 24px;
}

.auth-card {
    width: 100%;
    max-width: 960px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-pop);
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
}

.auth-side {
    background: radial-gradient(circle at 20% 20%, #17a94d 0%, var(--color-dark) 70%);
    color: #FFFFFF;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.auth-side .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,0.12);
    border-radius: 14px;
    font-size: 22px;
    margin-bottom: 24px;
}

.auth-side h2 {
    color: #FFFFFF;
    font-size: 26px;
    line-height: 1.4;
}

.auth-side p {
    color: rgba(255,255,255,0.75);
    font-size: 13.5px;
}

.auth-form-col {
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.role-tabs {
    display: flex;
    gap: 8px;
    background: var(--color-surface-alt);
    padding: 6px;
    border-radius: var(--radius-md);
    margin-bottom: 28px;
}

.role-tabs .role-tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    color: var(--color-text-muted);
    transition: all .18s ease;
    cursor: pointer;
}

.role-tabs .role-tab-btn.active {
    background: var(--color-primary);
    color: #FFFFFF;
    box-shadow: var(--shadow-soft);
}

.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid var(--color-border);
    padding: 10px 14px;
    font-size: 14px;
}

.form-control:focus, .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

.input-group-text {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.btn {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.btn-primary {
    background: linear-gradient(135deg, #22C55E 0%, var(--color-primary-dark) 100%);
    background-color: var(--color-primary); /* fallback if gradients are ever stripped */
    border-color: var(--color-primary-dark);
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px -3px rgba(var(--color-primary-rgb), .45);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #16A34A 0%, var(--color-primary-dark) 100%);
    border-color: var(--color-primary-dark);
    box-shadow: 0 8px 20px -4px rgba(var(--color-primary-rgb), .6);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

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

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

.btn-sm, .btn.btn-sm {
    border-radius: 7px;
}

.password-toggle {
    cursor: pointer;
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------------
   APP LAYOUT (post-login shell): sidebar + navbar + content
--------------------------------------------------------------- */
.app-sidebar {
    width: var(--sidebar-width);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    /* Subtle depth instead of a flat fill — a faint green wash bleeds in
       from the bottom so the sidebar still reads as part of the brand's
       green identity even though it's a dark surface. */
    background: linear-gradient(180deg, var(--color-sidebar-bg) 0%, var(--color-sidebar-bg-alt) 65%, #0e2618 100%);
    color: #CBD5E1;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, width .22s ease;
}

.app-sidebar .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    color: #FFFFFF;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: relative;
}

.app-sidebar .sidebar-brand .logo-badge {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #22C55E 0%, var(--color-primary-dark) 100%);
    box-shadow: 0 4px 14px -2px rgba(34, 197, 94, .55);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.app-sidebar .sidebar-brand span.brand-text {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
}

.sidebar-collapse-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: none;
    background: rgba(255,255,255,0.08);
    color: #CBD5E1;
    font-size: 11px;
    margin-left: auto;
    flex-shrink: 0;
    transition: background var(--transition-fast), transform var(--transition-base);
}
.sidebar-collapse-btn:hover {
    background: rgba(255,255,255,0.16);
    color: #FFFFFF;
}

@media (min-width: 992px) {
    .sidebar-collapse-btn {
        display: inline-flex;
    }
}

.app-sidebar .nav-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 12px;
}

.app-sidebar .nav-section-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #475569;
    padding: 14px 12px 6px;
    white-space: nowrap;
    overflow: hidden;
}

.app-sidebar .nav-link {
    color: #CBD5E1;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 2px;
    position: relative;
    transition: background .15s ease, color .15s ease, transform .15s ease;
    white-space: nowrap;
}

.app-sidebar .nav-link i {
    width: 18px;
    text-align: center;
    font-size: 14px;
    color: #94A3B8;
    flex-shrink: 0;
    transition: color .15s ease;
}

.app-sidebar .nav-link:hover {
    background: rgba(255,255,255,0.06);
    color: #FFFFFF;
    transform: translateX(3px);
}

.app-sidebar .nav-link.active {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 14px -3px rgba(34, 197, 94, .55);
}

/* Small glowing dot on the active item's left edge, echoing the "you
   are here" marker pattern seen in modern SaaS sidebars. */
.app-sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ADE80;
    box-shadow: 0 0 8px 2px rgba(74, 222, 128, .8);
    transform: translateY(-50%);
}

.app-sidebar .nav-link.active i {
    color: #FFFFFF;
}

/* Collapsible submenus (Purchase / Sales / Accounts) */
.app-sidebar .submenu-toggle {
    cursor: pointer;
}

.app-sidebar .submenu-toggle .submenu-caret {
    transition: transform .2s ease;
    flex-shrink: 0;
}

.app-sidebar .submenu-toggle[aria-expanded="true"] .submenu-caret {
    transform: rotate(180deg);
}

.app-sidebar .submenu-list {
    padding-left: 30px;
    padding-top: 2px;
    padding-bottom: 4px;
}

.app-sidebar .submenu-link {
    padding: 8px 12px;
    font-size: 12.5px;
    color: #94A3B8;
    border-left: 2px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.app-sidebar .submenu-link:hover {
    color: #FFFFFF;
    background: rgba(255,255,255,0.05);
    transform: translateX(2px);
}

.app-sidebar .submenu-link.active {
    color: #FFFFFF;
    background: rgba(var(--accent-rgb, 22, 163, 74), .18);
    border-left-color: #4ADE80;
    font-weight: 500;
}

/* ---- Desktop icon-only collapsed sidebar ---- */
@media (min-width: 992px) {
    html.sidebar-collapsed .app-sidebar {
        width: var(--sidebar-width-collapsed);
    }
    html.sidebar-collapsed .app-main {
        margin-left: var(--sidebar-width-collapsed);
    }
    html.sidebar-collapsed .app-sidebar .sidebar-brand span.brand-text,
    html.sidebar-collapsed .app-sidebar .nav-section-label,
    html.sidebar-collapsed .app-sidebar .nav-link span,
    html.sidebar-collapsed .app-sidebar .submenu-caret,
    html.sidebar-collapsed .app-sidebar .submenu-list {
        display: none;
    }
    html.sidebar-collapsed .app-sidebar .nav-link {
        justify-content: center;
        gap: 0;
    }
    html.sidebar-collapsed .app-sidebar .sidebar-brand {
        justify-content: center;
        padding: 20px 10px;
    }
    html.sidebar-collapsed .sidebar-collapse-btn {
        transform: rotate(180deg);
    }
}

.app-main {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .25s ease;
}

.app-topbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1020;
    transition: background-color var(--transition-base), border-color var(--transition-base);
}

.app-topbar .sidebar-toggle {
    border: none;
    background: var(--color-surface-alt);
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: var(--color-heading);
}

.topbar-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: none;
    background: var(--color-surface-alt);
    color: var(--color-heading);
    font-size: 15px;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.topbar-icon-btn:hover {
    background: rgba(var(--color-primary-rgb), .12);
    color: var(--color-primary);
}

.topbar-icon-btn .badge-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: #DC2626;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border: 2px solid var(--color-surface);
}

/* Theme toggle: swap sun/moon icon visibility based on active color mode */
[data-bs-theme="dark"] .theme-toggle-icon-light,
[data-bs-theme="light"] .theme-toggle-icon-dark {
    display: none;
}

.notification-panel {
    width: 340px;
    max-width: 90vw;
    padding: 0;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-elevated);
}
.notification-panel .notif-header {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 13.5px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-heading);
}
.notification-panel .notif-list {
    max-height: 340px;
    overflow-y: auto;
}
.notification-panel .notif-item {
    display: flex;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}
.notification-panel .notif-item:last-child {
    border-bottom: none;
}
.notification-panel .notif-item:hover {
    background: var(--color-surface-alt);
}
.notification-panel .notif-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    color: #fff;
}
.notification-panel .notif-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* ==================================================================
   Topbar popups: Calculator + Calendar (site-wide, opened from the
   navbar icons — see includes/navbar.php and assets/js/topbar-widgets.js)
   ================================================================== */
.calc-popup-panel,
.calendar-popup-panel {
    padding: 14px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-elevated);
}
.calc-popup-panel {
    width: 260px;
}
.calendar-popup-panel {
    width: 300px;
    max-width: 90vw;
}
.calc-display {
    background: var(--color-light);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 14px;
    text-align: right;
    font-size: 24px;
    font-weight: 600;
    height: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-heading);
}
.calc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.calc-btn {
    height: 44px;
    font-size: 15px;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.calendar-grid .cal-dow {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    padding-bottom: 6px;
}
.calendar-grid .cal-day {
    text-align: center;
    padding: 8px 0;
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--color-text);
}
.calendar-grid .cal-day.cal-outside {
    color: var(--color-text-muted);
    opacity: 0.4;
}
.calendar-grid .cal-day.cal-today {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

.app-topbar .user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border-radius: 30px;
    background: var(--color-surface-alt);
}

.app-topbar .user-chip img,
.app-topbar .user-chip .avatar-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-primary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.app-content {
    padding: 24px;
    flex: 1;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.page-header h1 {
    font-size: 20px;
    margin: 0;
}

.breadcrumb-custom {
    font-size: 12.5px;
    color: var(--color-text-muted);
}

.breadcrumb-custom a {
    color: var(--color-text-muted);
}

.breadcrumb-custom .current {
    color: var(--color-primary);
    font-weight: 500;
}

.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.card.card-hover:hover {
    box-shadow: var(--shadow-elevated);
    transform: translateY(-3px);
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    position: relative;
    overflow: hidden;
}

/* Thin gradient accent bar that sweeps in from the left on hover — a
   small "Bold & Vibrant" touch that doesn't fight the card's own icon
   color, so it stays consistent across every stat card. */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark) 60%, transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.stat-card.card-hover:hover::before {
    transform: scaleX(1);
}

.stat-card .stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #FFFFFF;
    flex-shrink: 0;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.stat-card.card-hover:hover .stat-icon {
    transform: scale(1.1) rotate(-4deg);
    box-shadow: 0 10px 24px -4px rgba(var(--accent-rgb, var(--color-primary-rgb)), .65);
}

.stat-card .stat-label {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 2px;
}

.stat-card .stat-value {
    font-size: 19px;
    font-weight: 600;
    color: var(--color-heading);
    transition: color var(--transition-fast);
}

/* Slightly punchier hover lift for stat cards specifically (layered on
   top of the base .card.card-hover rule above) — makes the dashboard's
   headline numbers feel more alive/"energetic SaaS" without touching
   every other card in the app. */
.stat-card.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-elevated), 0 0 0 1px rgba(var(--color-primary-rgb), .08);
}

/* Staggered fade-up entrance for the dashboard stat cards — purely
   cosmetic, makes the page feel like it "settles in" on load instead
   of popping in all at once. */
@keyframes statCardIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.stat-col {
    animation: statCardIn .4s ease both;
}

.stat-col:nth-child(1)  { animation-delay: .02s; }
.stat-col:nth-child(2)  { animation-delay: .06s; }
.stat-col:nth-child(3)  { animation-delay: .10s; }
.stat-col:nth-child(4)  { animation-delay: .14s; }
.stat-col:nth-child(5)  { animation-delay: .18s; }
.stat-col:nth-child(6)  { animation-delay: .22s; }
.stat-col:nth-child(7)  { animation-delay: .26s; }
.stat-col:nth-child(8)  { animation-delay: .30s; }
.stat-col:nth-child(9)  { animation-delay: .34s; }
.stat-col:nth-child(10) { animation-delay: .38s; }

/* Smooth progress-bar fill (Top Selling Products widget) and a subtle
   hover transition on table rows in the recent-activity widgets. */
.progress-bar {
    transition: width .6s ease;
}

.table-hover > tbody > tr > * {
    transition: background-color var(--transition-fast);
}

@media (prefers-reduced-motion: reduce) {
    .stat-col { animation: none; }
    .card, .card.card-hover:hover, .stat-card .stat-icon { transition: none; }
}

/* Reusable icon-background utility classes for stat cards / widgets —
   rich diagonal gradients + a matching colored glow underneath, instead
   of flat fills. Each one also sets --accent-rgb, which the "Bold &
   Vibrant" rules further down (stat-card top accent bar, etc.) read to
   automatically pick up the right color per card with no markup
   changes. Still reads fine in both light and dark mode since the
   glow/gradient colors themselves don't change with the theme. */
.bg-icon-green  { --accent-rgb: 22, 163, 74;   background: linear-gradient(135deg, #22C55E 0%, #15803D 100%); box-shadow: 0 6px 16px -4px rgba(var(--accent-rgb), .55); }
.bg-icon-blue   { --accent-rgb: 37, 99, 235;   background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%); box-shadow: 0 6px 16px -4px rgba(var(--accent-rgb), .55); }
.bg-icon-red    { --accent-rgb: 220, 38, 38;   background: linear-gradient(135deg, #F87171 0%, #DC2626 100%); box-shadow: 0 6px 16px -4px rgba(var(--accent-rgb), .55); }
.bg-icon-navy   { --accent-rgb: 15, 23, 42;    background: linear-gradient(135deg, #334155 0%, #0F172A 100%); box-shadow: 0 6px 16px -4px rgba(var(--accent-rgb), .55); }
.bg-icon-violet { --accent-rgb: 124, 58, 237;  background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%); box-shadow: 0 6px 16px -4px rgba(var(--accent-rgb), .55); }
.bg-icon-cyan   { --accent-rgb: 8, 145, 178;   background: linear-gradient(135deg, #22D3EE 0%, #0891B2 100%); box-shadow: 0 6px 16px -4px rgba(var(--accent-rgb), .55); }
.bg-icon-orange { --accent-rgb: 234, 88, 12;   background: linear-gradient(135deg, #FB923C 0%, #EA580C 100%); box-shadow: 0 6px 16px -4px rgba(var(--accent-rgb), .55); }
.bg-icon-amber  { --accent-rgb: 217, 119, 6;   background: linear-gradient(135deg, #FBBF24 0%, #D97706 100%); box-shadow: 0 6px 16px -4px rgba(var(--accent-rgb), .55); }

.app-footer {
    padding: 16px 24px;
    font-size: 12.5px;
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

/* ---------------------------------------------------------------
   Tables — light polish on top of Bootstrap/DataTables defaults
--------------------------------------------------------------- */
.table {
    color: var(--color-text);
}
.table > thead {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--color-surface-alt);
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: 7px;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-text);
    padding: 5px 10px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
    border-radius: 6px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 6px !important;
}

/* Badges: slightly softer corners to match the rest of the UI */
.badge {
    border-radius: 6px;
    font-weight: 500;
}

/* Toast notifications */
.toast-container {
    z-index: 1080;
}

/* Loading overlay — hidden by default (opacity 0, not interactive) and
   only faded in via the .is-visible class, which header.php's inline
   script adds after a short delay ONLY if the page is still loading by
   then. A normal fast page-to-page click never reaches that delay, so
   the overlay never appears/disappears for it — no more flash between
   pages. See includes/header.php + assets/js/script.js. */
#pageLoader {
    position: fixed;
    inset: 0;
    background: var(--color-bg-page);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

#pageLoader.is-visible {
    opacity: 1;
    pointer-events: auto;
}

#pageLoader .loader-dot {
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border-radius: 50%;
    margin: 0 4px;
    animation: bounce 1s infinite ease-in-out;
}

#pageLoader .loader-dot:nth-child(2) { animation-delay: .15s; }
#pageLoader .loader-dot:nth-child(3) { animation-delay: .3s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: .5; }
    40% { transform: scale(1); opacity: 1; }
}

/* Empty-state helper (used across list pages) */
.empty-state {
    text-align: center;
    padding: 48px 16px;
    color: var(--color-text-muted);
}
.empty-state i {
    font-size: 32px;
    margin-bottom: 10px;
    display: block;
    color: var(--color-border);
}

/* ==================================================================
   BOLD & VIBRANT — POS + Sales specific touches
   (Dashboard stat cards, sidebar and .btn-primary/.bg-icon-* are
   handled by the shared rules further up this file, since POS/Sales
   reuse those same components.)
   ================================================================== */

/* POS product grid cards — currently plain Bootstrap .card elements
   with no styling of their own; give them a lift + green glow on
   hover so the grid feels tactile/clickable, matching the checkout
   button's energy. */
.product-card {
    border-radius: var(--radius-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--color-primary-rgb), .45);
    box-shadow: 0 10px 22px -6px rgba(var(--color-primary-rgb), .35);
}

.product-card:active {
    transform: translateY(-1px) scale(.98);
}

.product-card .product-price {
    font-weight: 700;
}

/* Category filter pills — swap Bootstrap's flat "active" outline state
   for a small green gradient pill with a soft glow. */
.category-filter-btn {
    border-radius: 999px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.category-filter-btn.active {
    background: linear-gradient(135deg, #22C55E 0%, var(--color-primary-dark) 100%) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px -3px rgba(var(--color-primary-rgb), .5);
}

.category-filter-btn:hover {
    transform: translateY(-1px);
}

/* Checkout button — a slow, subtle glow pulse to draw the eye to the
   primary action on the POS screen without being distracting. Paused
   entirely for anyone who has asked their OS for reduced motion. */
#checkoutBtn {
    position: relative;
    animation: checkoutGlow 2.6s ease-in-out infinite;
}

@keyframes checkoutGlow {
    0%, 100% { box-shadow: 0 4px 12px -3px rgba(var(--color-primary-rgb), .45); }
    50%      { box-shadow: 0 4px 22px -2px rgba(var(--color-primary-rgb), .8); }
}

@media (prefers-reduced-motion: reduce) {
    #checkoutBtn { animation: none; }
    .product-card, .category-filter-btn, .app-sidebar .nav-link { transition: none; }
}

/* Cart summary card on the POS screen — a thin gradient top edge to
   set it apart as the "final total" panel, and a bolder grand-total
   readout. */
.card:has(#cartTableBody) {
    position: relative;
    overflow: hidden;
}

.card:has(#cartTableBody)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), #4ADE80, var(--color-primary));
    background-size: 200% 100%;
    animation: shimmerBar 3s linear infinite;
}

@keyframes shimmerBar {
    0%   { background-position: 0% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .card:has(#cartTableBody)::before { animation: none; }
}

#cart_grand_total {
    color: var(--color-primary);
}

/* Same treatment for the "Add Sale" screen's totals card, which mirrors
   the POS cart panel but with its own element IDs. */
.card:has(#calc_grand_total) {
    position: relative;
    overflow: hidden;
}

.card:has(#calc_grand_total)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), #4ADE80, var(--color-primary));
    background-size: 200% 100%;
    animation: shimmerBar 3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .card:has(#calc_grand_total)::before { animation: none; }
}

#calc_grand_total {
    color: var(--color-primary);
    font-size: 16px;
}

/* ==================================================================
   MOBILE UX
   ================================================================== */

/* Dimmed backdrop behind the mobile sidebar (created by initSidebarToggle()
   in assets/js/script.js) — tapping it closes the menu, and it makes it
   visually obvious the rest of the page is behind an open overlay instead
   of looking like it's still interactive underneath. Only exists at all
   below the tablet breakpoint, where the sidebar becomes an overlay. */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 1025; /* above .app-topbar (1020), below .app-sidebar (1030) */
    opacity: 0;
    transition: opacity .25s ease;
}

/* Floating "N items · total" bar pinned to the bottom of the screen on
   the POS page (see #posMobileCartBar in pos.php) — on a phone the cart
   card sits further down the page once the product grid + cart stack
   into one column, so this keeps the running total one tap away instead
   of requiring a long scroll on every item added. */
.pos-mobile-cart-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1010; /* below the sidebar/backdrop so an open menu still covers it */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, .12);
}

.pos-mobile-cart-bar-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.pos-mobile-cart-bar-count {
    font-size: 11px;
    color: var(--color-text-muted);
}

.pos-mobile-cart-bar-total {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
}

/* Responsive: collapse sidebar on small screens */
@media (max-width: 991.98px) {
    .app-sidebar {
        transform: translateX(-100%);
    }
    .app-sidebar.show {
        transform: translateX(0);
    }
    .app-main {
        margin-left: 0;
    }
    .auth-card {
        grid-template-columns: 1fr;
    }
    .auth-side {
        display: none;
    }

    .sidebar-backdrop {
        display: block;
        pointer-events: none;
    }
    .sidebar-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }

    /* Stop the page behind the open mobile sidebar from scrolling — without
       this, a long page could keep scrolling underneath the overlay while
       the menu stayed pinned in place, which reads as broken. */
    html.sidebar-open-lock,
    html.sidebar-open-lock body {
        overflow: hidden;
    }

    /* The POS cart card's "position: sticky; top: 76px" only makes sense
       in the two-column desktop layout — once the columns stack on a
       narrower screen, sticky made it float awkwardly over the tail end
       of the product grid as you scrolled past it. The floating summary
       bar above replaces that "always visible" role on mobile instead. */
    #posCartCard {
        position: static !important;
        top: auto !important;
    }

    /* Leave enough room at the bottom of the POS page so the last product
       row / the checkout button never end up hidden behind the floating
       summary bar. */
    body:has(#posMobileCartBar) .app-content {
        padding-bottom: 76px;
    }
}

@media (max-width: 575.98px) {
    .app-content {
        padding: 16px;
    }
    .app-topbar {
        padding: 10px 14px;
    }

    /* A few more comfortable millimeters to tap on a phone, now that the
       "More" overflow menu (see includes/navbar.php) freed up the room. */
    .topbar-icon-btn,
    .app-topbar .sidebar-toggle {
        width: 40px;
        height: 40px;
    }

    /* iOS Safari auto-zooms the whole page when a focused input's
       font-size is under 16px. Our compact 14px fields read fine on
       desktop but trigger that zoom on a phone, which feels like a bug
       more than a feature — bump to 16px only below this breakpoint;
       desktop keeps its tighter, denser look. */
    .form-control,
    .form-select,
    textarea {
        font-size: 16px;
    }
}

/* ==================================================================
   PRINT: keep the invoice's two-column layout intact on paper
   ------------------------------------------------------------------
   Bootstrap's "-md-"/"-lg-" responsive utilities (col-md-6,
   text-md-end, text-lg-end) key off the viewport WIDTH via a
   min-width media query. A printed page is usually rendered at the
   paper's printable width, which is very often narrower than the
   768px/992px breakpoints those utilities need — so on print they
   silently fall back to their mobile-first default (stacked, left
   aligned), even though the exact same markup looks correct on
   screen. That showed up as the invoice's "Served By" block and its
   Subtotal/Discount/VAT/Grand Total/Paid/Due summary sliding to the
   left edge of the page when printed (or printed to PDF).
   Force the layout explicitly for print, regardless of the
   printable area's width, so print always matches the on-screen
   preview. Scoped to #invoiceCard (Sales + Purchase invoices) so it
   can't affect anything else in the app. */
@media print {
    #invoiceCard .col-md-6 {
        flex: 0 0 auto !important;
        width: 50% !important;
        max-width: 50% !important;
    }

    #invoiceCard .text-md-end,
    #invoiceCard .text-lg-end {
        text-align: right !important;
    }
}