@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

/* G MOTARS console — shared visual system
   Loaded after each page's legacy CSS to provide one deliberate, maintainable UI. */
:root {
    --ink: #0e1f16;
    --pine-900: #0f3d2e;
    --pine-700: #1b5e3f;
    --pine-500: #2f7a54;
    --amber-600: #e07a1f;
    --paper: #ffffff;
    --mist: #f5f7f4;
    --steel-700: #34433b;
    --steel-600: #55655c;
    --steel-400: #91a097;
    --steel-200: #dde4de;
    --steel-100: #edf1ed;
    --danger: #c4302b;
    --success: #237a4b;
    --warning: #b85c12;
    --shadow-card: 0 1px 2px rgba(14, 31, 22, .04), 0 8px 24px rgba(14, 31, 22, .06);
    --radius-control: 10px;
    --radius-card: 16px;
    --radius-code: 6px;

    /* Compatibility with the existing markup. */
    --gv-primary: var(--pine-700);
    --gv-primary-dark: var(--pine-900);
    --gv-primary-light: var(--pine-500);
    --gv-secondary: var(--amber-600);
    --gv-text-dark: var(--ink);
    --gv-text-muted: var(--steel-600);
    --gv-bg-light: var(--mist);
    --gv-bg-body: var(--mist);
    --gv-white: var(--paper);
    --gv-border: var(--steel-200);
    --gv-hover: #e8f0e9;
    --clay-bg: var(--paper);
    --clay-bg-dark: var(--paper);
    --glass-border: var(--steel-200);
    --shadow-up: transparent;
    --shadow-down: rgba(14, 31, 22, .06);
    --r-xl: var(--radius-card);
    --r-lg: var(--radius-card);
    --r-md: var(--radius-control);
    --r-sm: var(--radius-code);
    --r-pill: var(--radius-control);
    --clay-radius: var(--radius-card);
    --clay-radius-sm: var(--radius-control);
    --clay-radius-xs: var(--radius-code);
}

*, *::before, *::after { box-sizing: border-box; }

/* Several legacy pages reset every pseudo-element to Inter. Reassert the icon
   fonts explicitly so their glyph codes never render as text or emoji. */
.fas, .fa-solid, .far, .fa-regular {
    font-family: 'Font Awesome 6 Free' !important;
}
.fas, .fa-solid { font-weight: 900 !important; }
.far, .fa-regular { font-weight: 400 !important; }
.fab, .fa-brands {
    font-family: 'Font Awesome 6 Brands' !important;
    font-weight: 400 !important;
}
.fas::before, .fa-solid::before, .far::before, .fa-regular::before {
    font-family: 'Font Awesome 6 Free' !important;
}
.fas::before, .fa-solid::before { font-weight: 900 !important; }
.far::before, .fa-regular::before { font-weight: 400 !important; }
.fab::before, .fa-brands::before {
    font-family: 'Font Awesome 6 Brands' !important;
    font-weight: 400 !important;
}

html { background: var(--mist); }

body {
    background: var(--mist) !important;
    color: var(--ink);
    font-family: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: -0.01em;
}

/* Pages originally declared Inter with a universal selector.  Reassert a
   calmer operational typeface without disturbing Font Awesome or data code. */
body,
body * {
    font-family: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.page-title,
.card-header-custom,
.modal-title,
.stat-number,
.stat-card h2,
.stat-card h5,
.stat-mini-card .number {
    font-family: 'Manrope', 'DM Sans', 'Inter', sans-serif !important;
}

code, pre,
.code-chip,
.part-code,
.order-number,
.custom-table td:first-child:not(:has(a)) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-variant-numeric: tabular-nums;
}

body::before { display: none !important; }

/* The login page deliberately keeps a focused, quiet treatment. */
body:has(.login-card) {
    min-height: 100svh;
    background:
        radial-gradient(circle at 92% 8%, rgba(224, 122, 31, .13), transparent 25rem),
        radial-gradient(circle at 6% 88%, rgba(47, 122, 84, .14), transparent 28rem),
        var(--mist) !important;
}

.login-card {
    max-width: 430px !important;
    padding: 38px !important;
    background: var(--paper) !important;
    border: 1px solid var(--steel-200) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: 0 18px 45px rgba(14, 31, 22, .10) !important;
    animation: gm-enter .35s ease-out both !important;
}

.logo-img {
    width: 78px;
    max-width: 78px !important;
    padding: 5px;
    background: var(--paper);
    border: 1px solid var(--steel-200);
    border-radius: var(--radius-control);
}

.company-name { color: var(--pine-900) !important; letter-spacing: -.045em; }
.company-tagline, .footer-note { color: var(--steel-600) !important; }

/* App shell */
.sidebar {
    width: 272px !important;
    background: var(--pine-900) !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 12px 0 28px rgba(14, 31, 22, .12) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: transform .24s ease !important;
}

.sidebar-header {
    padding: 24px 22px 20px !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(255,255,255,.11) !important;
}

.sidebar-header::after { display: none !important; }

.sidebar-logo {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    object-fit: contain;
    padding: 4px !important;
    margin: 0 0 12px !important;
    background: var(--paper) !important;
    border: 1px solid rgba(255,255,255,.26) !important;
    border-radius: var(--radius-control) !important;
    box-shadow: none !important;
    transform: none !important;
}

.sidebar-logo:hover { transform: none !important; }

.sidebar-header h3 {
    color: var(--paper) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
}

.sidebar-header p {
    color: rgba(255,255,255,.60) !important;
    font-size: .7rem !important;
    letter-spacing: .01em;
}

.sidebar-nav { padding: 14px 12px 28px !important; }

.nav-link-custom {
    min-height: 42px;
    gap: 12px !important;
    margin: 1px 0 !important;
    padding: 10px 12px !important;
    color: rgba(255,255,255,.72) !important;
    border-radius: var(--radius-control) !important;
    font-size: .83rem !important;
    font-weight: 550 !important;
    transition: color .18s ease, background-color .18s ease !important;
}

.nav-link-custom::before {
    left: 0 !important;
    width: 3px !important;
    height: 20px !important;
    border-radius: 0 3px 3px 0 !important;
    background: var(--amber-600) !important;
}

.nav-link-custom i {
    width: 18px !important;
    color: rgba(255,255,255,.64);
    font-size: .94rem !important;
}

.nav-link-custom:hover,
.nav-link-custom:focus-visible {
    color: var(--paper) !important;
    background: rgba(255,255,255,.08) !important;
    transform: none !important;
}

.nav-link-custom.active {
    color: var(--paper) !important;
    background: rgba(255,255,255,.12) !important;
    box-shadow: none !important;
}

.nav-link-custom.active i { color: #ffd7a8 !important; }
.nav-divider { margin: 11px 8px !important; background: rgba(255,255,255,.12) !important; }
.nav-badge { background: var(--amber-600) !important; color: #251408 !important; border-radius: var(--radius-code) !important; font-weight: 750 !important; }

.sidebar-overlay { background: rgba(14,31,22,.52) !important; backdrop-filter: blur(2px) !important; }

.main-content {
    padding: 24px 30px 42px !important;
    min-height: 100svh;
}

.top-navbar {
    min-height: 68px;
    padding: 12px 16px !important;
    margin-bottom: 20px !important;
    background: var(--paper) !important;
    border: 1px solid var(--steel-200) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.page-title {
    color: var(--ink) !important;
    font-size: clamp(1.08rem, 2.3vw, 1.35rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.035em !important;
}

.page-title i {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    color: var(--pine-700) !important;
    background: #e8f0e9 !important;
    border-radius: var(--radius-control) !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.user-info {
    display: inline-flex !important;
    align-items: center;
    min-height: 36px;
    padding: 7px 11px !important;
    background: var(--mist) !important;
    border: 1px solid var(--steel-200) !important;
    border-radius: var(--radius-control) !important;
    box-shadow: none !important;
    color: var(--pine-900) !important;
    font-size: .79rem !important;
}

.user-info:hover, .user-info:focus-visible { background: #e8f0e9 !important; outline: none; }
.user-menu-dropdown {
    min-width: 190px;
    padding: 6px !important;
    margin-top: 8px !important;
    background: var(--paper);
    border: 1px solid var(--steel-200) !important;
    border-radius: var(--radius-control) !important;
    box-shadow: 0 16px 35px rgba(14,31,22,.15) !important;
}
.user-menu-dropdown .dropdown-item { border-radius: var(--radius-code) !important; color: var(--steel-700); }
.user-menu-dropdown .dropdown-item:hover { background: var(--mist) !important; color: var(--pine-900); }

/* Layout surfaces */
.corporate-card,
.stat-card,
.stat-mini-card,
.alert-banner,
.date-filter,
.filter-container,
.summary-card,
.info-card,
.quick-action-card {
    background: var(--paper) !important;
    border: 1px solid var(--steel-200) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.corporate-card { margin-bottom: 20px !important; }
.corporate-card:hover, .stat-card:hover, .stat-mini-card:hover { transform: none !important; box-shadow: var(--shadow-card) !important; }

.card-header-custom {
    min-height: 55px;
    padding: 15px 18px !important;
    background: var(--paper) !important;
    border-bottom: 1px solid var(--steel-200) !important;
    color: var(--ink) !important;
    font-size: .91rem !important;
    font-weight: 750 !important;
    letter-spacing: -.012em !important;
    backdrop-filter: none !important;
}

.card-header-custom i { color: var(--pine-700) !important; }

.stat-card,
.stat-mini-card {
    position: relative;
    min-height: 126px;
    padding: 17px 18px !important;
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.stat-card::after,
.stat-mini-card::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--pine-500);
    border-radius: var(--radius-card) 0 0 var(--radius-card);
}

.stat-icon-wrapper {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px;
    margin: 0 0 12px !important;
    background: #e8f0e9 !important;
    border-radius: var(--radius-control) !important;
    box-shadow: none !important;
}

.stat-icon-wrapper i { color: var(--pine-700) !important; font-size: 1rem !important; }
.stat-number,
.stat-card h2,
.stat-card h5,
.stat-mini-card .number {
    color: var(--ink) !important;
    font-size: clamp(1.15rem, 2.6vw, 1.7rem) !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    letter-spacing: -.045em !important;
    word-break: normal !important;
}

.stat-label,
.stat-card p,
.stat-mini-card .label {
    margin: 5px 0 0 !important;
    color: var(--steel-600) !important;
    font-size: .73rem !important;
    font-weight: 600 !important;
    line-height: 1.35;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.stat-trend { color: var(--steel-600) !important; font-size: .72rem !important; }
.profit-card { background: var(--pine-900) !important; border-color: var(--pine-900) !important; }
.profit-card::after { background: var(--amber-600); }
.profit-card .stat-number, .profit-card .stat-label, .profit-card .stat-trend, .profit-card h2, .profit-card h5, .profit-card p { color: var(--paper) !important; }
.profit-card .stat-icon-wrapper { background: rgba(255,255,255,.12) !important; }
.profit-card .stat-icon-wrapper i { color: #ffd7a8 !important; }

/* Forms and actions */
.form-label,
label.form-label,
.form-check-label {
    color: var(--steel-700) !important;
    font-size: .78rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.form-control,
.form-select,
.input-group-text {
    min-height: 40px;
    background-color: var(--paper) !important;
    border-color: #cbd5cd !important;
    border-radius: var(--radius-control) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    font-size: .86rem !important;
}

.input-group > .input-group-text:first-child { border-radius: var(--radius-control) 0 0 var(--radius-control) !important; }
.input-group > .form-control:not(:first-child) { border-radius: 0 var(--radius-control) var(--radius-control) 0 !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--pine-500) !important;
    box-shadow: 0 0 0 3px rgba(47,122,84,.15) !important;
}
.form-control[readonly], .form-select:disabled { background: var(--steel-100) !important; color: var(--steel-600) !important; }
.form-text { color: var(--steel-600) !important; }

.btn,
.btn-primary-custom,
.btn-login,
.btn-secondary-custom,
.btn-outline-green,
.btn-remove-row {
    min-height: 38px;
    border-radius: var(--radius-control) !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease !important;
}

.btn-primary-custom,
.btn-login,
.btn-primary,
.btn[style*="--gv-primary"] {
    background: var(--pine-700) !important;
    border-color: var(--pine-700) !important;
    color: var(--paper) !important;
}

.btn-primary-custom:hover,
.btn-login:hover,
.btn-primary:hover,
.btn[style*="--gv-primary"]:hover {
    background: var(--pine-900) !important;
    border-color: var(--pine-900) !important;
    color: var(--paper) !important;
    transform: translateY(-1px) !important;
}

.btn-secondary-custom,
.btn-outline-green,
.btn-outline-primary {
    background: var(--paper) !important;
    border: 1px solid #cbd5cd !important;
    color: var(--pine-700) !important;
}

.btn-secondary-custom:hover,
.btn-outline-green:hover,
.btn-outline-primary:hover { background: #e8f0e9 !important; border-color: var(--pine-500) !important; color: var(--pine-900) !important; }
.btn:focus-visible, .nav-link-custom:focus-visible, a:focus-visible { outline: 3px solid rgba(224,122,31,.42); outline-offset: 2px; }

/* Tables, chips and feedback */
.table-responsive { background: transparent !important; }
.custom-table,
.table { color: var(--steel-700) !important; margin-bottom: 0 !important; }
.custom-table th,
.table thead th {
    padding: 12px 16px !important;
    background: var(--steel-100) !important;
    border-bottom: 1px solid var(--steel-200) !important;
    color: var(--steel-600) !important;
    font-size: .7rem !important;
    font-weight: 750 !important;
    letter-spacing: .035em !important;
    text-transform: none !important;
    white-space: nowrap;
}

.custom-table td,
.table td {
    padding: 13px 16px !important;
    border-color: var(--steel-200) !important;
    font-size: .83rem !important;
    background: transparent !important;
}

.custom-table tbody tr,
.table tbody tr { transition: background-color .14s ease; }
.custom-table tbody tr:hover td,
.table tbody tr:hover td { background: #f7faf7 !important; }
.custom-table td:first-child:not(:has(a)), .code-chip, .part-code, .order-number { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.badge,
.badge-custom,
.status-badge,
.status-pill {
    border-radius: var(--radius-code) !important;
    padding: .32rem .5rem !important;
    font-size: .68rem !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.alert { border-radius: var(--radius-control) !important; border-width: 1px !important; box-shadow: none !important; }
.alert-danger { color: #8c221d !important; background: #fff4f3 !important; border-color: #f2bfbb !important; }
.alert-success { color: #165c37 !important; background: #f1fbf5 !important; border-color: #b8dfc7 !important; }
.alert-warning, .alert-banner { color: #7a3d0c !important; background: #fff8ef !important; border-color: #f1d3b1 !important; }

.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-primary, .text-profit { color: var(--pine-700) !important; }

/* Reports: make the active reporting period obvious at a glance. */
.date-filter {
    display: flex;
    align-items: center;
    min-height: 68px;
    margin-bottom: 20px;
    padding: 12px 16px !important;
    border-left: 3px solid var(--amber-600) !important;
}

.date-filter::before {
    content: '\f073';
    margin-right: 10px;
    color: var(--pine-700);
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.filter-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.filter-group .form-select, .filter-group .form-control { max-width: 190px; }
.filter-group .text-muted { color: var(--steel-600) !important; font-size: .82rem; font-weight: 600; }

/* New B2B order search/detail experience. */
.b2b-order-search,
#b2bOrderSearch {
    border-radius: var(--radius-control) !important;
}

#orderPanel {
    background: var(--paper) !important;
    border-left: 1px solid var(--steel-200) !important;
    box-shadow: -16px 0 34px rgba(14,31,22,.15) !important;
}

#orderPanel .panel-header,
#orderPanel .order-panel-header {
    background: var(--paper) !important;
    border-bottom: 1px solid var(--steel-200) !important;
}

#orderPanel .panel-title,
#orderPanel .order-panel-title { color: var(--ink) !important; font-weight: 800 !important; }
#orderPanel .panel-section,
#orderPanel .order-panel-section { border-color: var(--steel-200) !important; }
#orderPanel .payment-summary,
#orderPanel .order-totals { background: var(--mist) !important; border-radius: var(--radius-control) !important; }
#orderPanelScrim { background: rgba(14,31,22,.42) !important; backdrop-filter: blur(2px); }

.modal-content {
    border: 1px solid var(--steel-200) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: 0 20px 50px rgba(14,31,22,.18) !important;
}
.modal-header, .modal-footer { border-color: var(--steel-200) !important; }
.modal-title { color: var(--ink) !important; font-weight: 800 !important; }

.mobile-toggle-btn {
    width: 48px !important;
    height: 48px !important;
    background: var(--pine-700) !important;
    border: 2px solid var(--paper) !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 18px rgba(14,31,22,.20) !important;
}

@keyframes gm-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 992px) {
    .sidebar { transform: translateX(0) !important; }
    .main-content { margin-left: 272px !important; }
}

@media (max-width: 991.98px) {
    .sidebar { width: min(272px, 84vw) !important; }
    .main-content { margin-left: 0 !important; padding: 16px 14px 82px !important; }
    .top-navbar { min-height: 60px; margin-bottom: 16px !important; }
    .stat-card, .stat-mini-card { min-height: 112px; }
}

@media (max-width: 575.98px) {
    .login-card { padding: 28px 22px !important; }
    .top-navbar { align-items: center !important; }
    .page-title { font-size: 1.02rem !important; }
    .page-title i { width: 31px; height: 31px; }
    .user-info span { display: none; }
    .corporate-card, .stat-card, .stat-mini-card, .date-filter { border-radius: var(--radius-control) !important; }
    .corporate-card { margin-bottom: 14px !important; }
    .card-header-custom { min-height: 50px; padding: 13px 14px !important; }
    .custom-table td, .table td { padding: 11px 12px !important; }
    .filter-group .form-select, .filter-group .form-control { max-width: 100%; flex: 1 1 100%; }
    .date-filter::before { align-self: flex-start; margin-top: 10px; }
}

/* --------------------------------------------------------------------------
   Light-green premium refinement

   This layer deliberately follows the legacy compatibility rules above. It
   makes the application feel like one calm, responsive product without
   changing any page markup or business interactions.
   -------------------------------------------------------------------------- */
:root {
    --canvas: #f6fbf7;
    --surface: #ffffff;
    --surface-mint: #effaf1;
    --surface-mint-strong: #ddf4e1;
    --brand: #2e7d32;
    --brand-hover: #256e2b;
    --brand-light: #4caf50;
    --brand-ink: #1d4725;
    --ink: #1f2937;
    --mist: var(--canvas);
    --paper: var(--surface);
    --steel-700: #35443a;
    --steel-600: #65756b;
    --steel-400: #91a097;
    --steel-200: #dce9df;
    --steel-100: #eef7f0;
    --pine-900: var(--brand-ink);
    --pine-700: var(--brand);
    --pine-500: var(--brand-light);
    --amber-600: #f0a22f;
    --success: #237a4b;
    --shadow-card: 0 1px 2px rgba(28, 74, 36, .05), 0 5px 15px rgba(28, 74, 36, .06);
    --shadow-float: 0 14px 32px rgba(28, 74, 36, .12);
    --motion-fast: 160ms;
    --motion-base: 240ms;
    --motion-slow: 380ms;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-emphasized: cubic-bezier(.22, 1, .36, 1);

    /* Legacy page variables are still used in page-level CSS and inline UI. */
    --gv-primary: var(--brand);
    --gv-primary-dark: var(--brand-hover);
    --gv-primary-light: var(--brand-light);
    --gv-text-dark: var(--ink);
    --gv-text-muted: var(--steel-600);
    --gv-bg-light: var(--canvas);
    --gv-bg-body: var(--canvas);
    --gv-border: var(--steel-200);
    --gv-hover: var(--surface-mint-strong);
    --clay-bg: var(--surface);
    --clay-bg-dark: var(--surface-mint);
    --glass-border: var(--steel-200);
    --shadow-up: transparent;
    --shadow-down: rgba(28, 74, 36, .06);
    --r-xl: 18px;
    --r-lg: 14px;
    --r-md: 11px;
    --r-sm: 8px;
    --r-pill: 999px;
    --clay-radius: 18px;
    --clay-radius-sm: 14px;
    --clay-radius-xs: 8px;
}

html { background: var(--canvas); }

body {
    background:
        radial-gradient(circle at 92% -8%, rgba(156, 220, 169, .32), transparent 28rem),
        radial-gradient(circle at -8% 88%, rgba(211, 241, 217, .62), transparent 30rem),
        var(--canvas) !important;
}

body:has(.login-card) {
    background:
        radial-gradient(circle at 92% 8%, rgba(76, 175, 80, .18), transparent 27rem),
        radial-gradient(circle at 4% 90%, rgba(221, 244, 225, .92), transparent 29rem),
        var(--canvas) !important;
}

/* A bright, brand-led navigation rail replaces the dark console shell. */
.sidebar {
    background: linear-gradient(165deg, #fbfffc 0%, #eaf9ed 52%, #d8f1de 100%) !important;
    border-right: 1px solid #c9e5d0 !important;
    box-shadow: 10px 0 30px rgba(28, 74, 36, .10) !important;
    color: var(--brand-ink) !important;
    isolation: isolate;
    transition: transform var(--motion-slow) var(--ease-emphasized) !important;
}

.sidebar::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 220px;
    height: 220px;
    top: -128px;
    right: -118px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76, 175, 80, .20), rgba(76, 175, 80, 0) 68%);
    pointer-events: none;
}

.sidebar-header,
.sidebar-nav { position: relative; z-index: 1; }

.sidebar-header {
    padding: 25px 20px 17px !important;
    border-bottom: 1px solid #cfe8d5 !important;
}

.sidebar-header h3 {
    color: var(--brand-ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.sidebar-header p {
    color: var(--steel-600) !important;
    -webkit-text-fill-color: currentColor !important;
}

.sidebar-logo {
    background: #fff !important;
    border-color: #cde7d2 !important;
    box-shadow: 0 8px 20px rgba(28, 74, 36, .11) !important;
    transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out) !important;
}

.sidebar-nav { padding: 14px 12px 28px !important; }

.nav-link-custom {
    color: #42614a !important;
    border: 1px solid transparent;
    transition: transform var(--motion-fast) var(--ease-out), background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease !important;
}

.nav-link-custom i { color: #4a8054 !important; }

.nav-link-custom::before {
    left: 6px !important;
    width: 3px !important;
    height: 22px !important;
    background: var(--brand) !important;
    transform: scaleY(.36) !important;
    transform-origin: center !important;
    transition: transform var(--motion-base) var(--ease-out) !important;
}

.nav-link-custom:hover,
.nav-link-custom:focus-visible {
    background: rgba(255, 255, 255, .74) !important;
    border-color: #d0ead5;
    color: var(--brand-ink) !important;
}

.nav-link-custom.active {
    background: #fff !important;
    border-color: #cde7d2;
    color: var(--brand-ink) !important;
    box-shadow: 0 5px 13px rgba(28, 74, 36, .08) !important;
}

.nav-link-custom.active::before { transform: scaleY(1) !important; }
.nav-link-custom.active i { color: var(--brand) !important; }
.nav-divider { background: #cfe8d5 !important; }
.nav-badge { background: var(--brand) !important; color: #fff !important; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(46, 125, 50, .34) !important; }

.sidebar-overlay {
    background: rgba(22, 51, 31, .34) !important;
    backdrop-filter: blur(3px) saturate(105%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(105%) !important;
}

/* Elevated shell and content surfaces. */
.main-content { background: transparent !important; }

.top-navbar {
    position: relative;
    background: rgba(255, 255, 255, .92) !important;
    border-color: rgba(205, 231, 210, .92) !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: blur(14px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(115%) !important;
}

.top-navbar::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: var(--radius-card) 0 0 var(--radius-card);
    background: linear-gradient(var(--brand-light), var(--brand));
}

.page-title { color: var(--ink) !important; }
.page-title i {
    color: var(--brand) !important;
    background: var(--surface-mint-strong) !important;
    border: 1px solid #cde7d2;
}

.user-info {
    background: var(--surface-mint) !important;
    border-color: #d3ebd8 !important;
    color: var(--brand-ink) !important;
    transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out) !important;
}

.user-info:hover,
.user-info:focus-visible {
    background: #e2f5e6 !important;
    border-color: #b8dfc1 !important;
}

.user-menu-dropdown {
    border-color: #d3ebd8 !important;
    box-shadow: var(--shadow-float) !important;
}

.user-menu-dropdown .dropdown-item:hover { background: var(--surface-mint) !important; color: var(--brand-ink) !important; }

.corporate-card,
.stat-card,
.stat-mini-card,
.alert-banner,
.date-filter,
.filter-container,
.summary-card,
.info-card,
.quick-action-card,
.search-bar-wrapper,
.tab-switcher,
.order-summary,
.payment-panel,
.total-amount-box,
.current-stock-info {
    background: rgba(255, 255, 255, .94) !important;
    border-color: #dce9df !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.corporate-card,
.summary-card,
.info-card,
.filter-container,
.search-bar-wrapper,
.order-summary,
.payment-panel,
.total-amount-box,
.current-stock-info { overflow: hidden; }

.card-header-custom {
    background: linear-gradient(90deg, #fbfffc, #f2fbf4) !important;
    border-bottom-color: #dce9df !important;
    color: var(--brand-ink) !important;
}

.card-header-custom i { color: var(--brand) !important; }

.stat-card,
.stat-mini-card {
    isolation: isolate;
    transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-fast) ease !important;
}

.stat-card::after,
.stat-mini-card::after { background: linear-gradient(var(--brand-light), var(--brand)) !important; }

.stat-icon-wrapper {
    background: var(--surface-mint-strong) !important;
    border: 1px solid #cae7d0;
    transition: transform var(--motion-base) var(--ease-out), background-color var(--motion-base) ease, box-shadow var(--motion-base) ease !important;
}

.stat-icon-wrapper i { color: var(--brand) !important; }

.profit-card {
    background: linear-gradient(135deg, #f4fcf5, #ddf4e1) !important;
    border-color: #bfe2c7 !important;
}

.profit-card::after { background: var(--brand) !important; }
.profit-card .stat-number,
.profit-card .stat-label,
.profit-card .stat-trend,
.profit-card h2,
.profit-card h5,
.profit-card p { color: var(--brand-ink) !important; }
.profit-card .stat-icon-wrapper { background: #fff !important; }
.profit-card .stat-icon-wrapper i { color: var(--brand) !important; }

/* Forms, buttons and operational controls share a clear interaction language. */
.form-control,
.form-select,
.input-group-text {
    background-color: #fff !important;
    border-color: #c9dfce !important;
    border-radius: 11px !important;
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease !important;
}

.form-control:hover,
.form-select:hover { border-color: #a7d3b1 !important; }

.form-control:focus,
.form-select:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 4px rgba(76, 175, 80, .15) !important;
    background-color: #fff !important;
}

.form-control[readonly],
.form-select:disabled { background: #f1f8f2 !important; }

.btn,
.btn-primary-custom,
.btn-login,
.btn-secondary-custom,
.btn-outline-green,
.btn-b2b-custom,
.btn-add-item,
.btn-add-stock,
.btn-manage,
.action-btn,
.btn-remove-row {
    position: relative;
    overflow: hidden;
    transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease !important;
}

.btn-primary-custom,
.btn-login,
.btn-primary,
.btn[style*="--gv-primary"],
.btn-b2b-custom,
.btn-add-item,
.btn-add-stock,
.btn-manage,
.action-btn.primary,
.action-btn.btn-primary {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(46, 125, 50, .16) !important;
}

.btn-primary-custom::after,
.btn-login::after,
.btn-primary::after,
.btn-b2b-custom::after,
.btn-add-item::after,
.btn-add-stock::after,
.btn-manage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, .26) 48%, transparent 64%);
    transform: translateX(-125%);
    transition: transform 520ms var(--ease-out);
    pointer-events: none;
}

.btn-secondary-custom,
.btn-outline-green,
.btn-outline-primary,
.action-btn:not(.primary):not(.btn-primary) {
    background: #fff !important;
    border-color: #bddfc4 !important;
    color: var(--brand-ink) !important;
}

.btn-remove-row {
    background: #fff6f5 !important;
    border-color: #f1c8c3 !important;
    color: var(--danger) !important;
}

.radio-pill label {
    background: #fff !important;
    border-color: #c9dfce !important;
    color: var(--steel-700) !important;
    transition: transform var(--motion-fast) var(--ease-out), background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease !important;
}

.radio-pill input:checked + label,
.radio-pill input:checked ~ label {
    background: var(--surface-mint-strong) !important;
    border-color: #9dcea8 !important;
    color: var(--brand-ink) !important;
}

/* B2C/B2B tabs and order workbench. */
.tab-switcher {
    padding: 5px !important;
    border-radius: 16px !important;
}

.tab-btn {
    color: var(--steel-600) !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    transition: transform var(--motion-fast) var(--ease-out), background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease !important;
}

.tab-icon { background: #e9f7ec !important; color: var(--brand) !important; }
.tab-text strong,
.tab-btn.b2c-tab.active .tab-text strong,
.tab-btn.b2b-tab.active .tab-text strong { color: var(--brand-ink) !important; }
.tab-text small { color: var(--steel-600) !important; }

.tab-btn.active {
    background: #fff !important;
    border-color: #d0e8d5 !important;
    box-shadow: 0 4px 12px rgba(28, 74, 36, .08) !important;
}

.tab-btn.b2b-tab.active .tab-icon,
.tab-btn.b2c-tab.active .tab-icon { background: var(--surface-mint-strong) !important; color: var(--brand) !important; }

.b2b-card,
.b2c-card { background: #fff !important; border-color: #dce9df !important; box-shadow: var(--shadow-card) !important; }

.items-table th,
.op-items-table th { background: #eff9f1 !important; color: var(--brand-ink) !important; border-color: #d8eadc !important; }

.items-table td,
.op-items-table td { border-color: #e1eee4 !important; }

.pay-status-badge,
.badge-paid,
.badge-partial,
.badge-unpaid,
.badge-credit,
.badge-cash { border: 1px solid transparent; }

/* The actual B2B detail drawer uses the following .op-* selectors. */
#orderPanel,
.order-panel {
    width: min(30rem, calc(100vw - 1rem)) !important;
    background: #fff !important;
    border-left: 1px solid #cde7d2 !important;
    box-shadow: -14px 0 34px rgba(28, 74, 36, .16) !important;
    opacity: .99;
    transform: translate3d(104%, 0, 0) !important;
    will-change: transform, opacity;
    transition: transform var(--motion-slow) var(--ease-emphasized), opacity var(--motion-base) ease !important;
}

#orderPanel.open,
.order-panel.open { opacity: 1; transform: translate3d(0, 0, 0) !important; }

#orderPanelScrim,
.order-panel-scrim {
    display: block !important;
    visibility: hidden;
    opacity: 0 !important;
    pointer-events: none;
    background: rgba(22, 51, 31, .30) !important;
    backdrop-filter: blur(3px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(110%) !important;
    transition: opacity var(--motion-base) ease, visibility 0s linear var(--motion-base) !important;
}

#orderPanelScrim.active,
.order-panel-scrim.active {
    visibility: visible;
    opacity: 1 !important;
    pointer-events: auto;
    transition-delay: 0s !important;
}

.order-panel-head {
    background: linear-gradient(135deg, #f8fef9, #ddf4e1) !important;
    border-bottom: 1px solid #cde7d2;
    color: var(--brand-ink) !important;
}

.op-order-date { color: var(--steel-600) !important; opacity: 1 !important; }

.order-panel-close {
    background: #fff !important;
    border: 1px solid #c6e2cc !important;
    color: var(--brand-ink) !important;
    transition: transform var(--motion-fast) var(--ease-out), background-color var(--motion-fast) ease !important;
}

.order-panel-close:hover { background: var(--surface-mint) !important; }
.order-panel-body { background: #fff !important; }
.op-section { border-color: #e1eee4 !important; }
.op-section-title { color: #5d7463 !important; letter-spacing: .08em !important; }
.op-customer-card { background: var(--surface-mint) !important; border: 1px solid #d5ead9; }
.op-customer-card h4 { color: var(--brand-ink) !important; }
.op-customer-card p { color: var(--steel-600) !important; }
.op-totals-box { background: #fff !important; border-color: #d5e8d9 !important; }
.op-totals-box .row { border-color: #e1eee4 !important; }
.op-totals-box .row.paid { color: var(--success) !important; }
.op-payment-item { border-color: #e1eee4 !important; }

.pagination .page-link,
.page-link {
    color: var(--brand-ink) !important;
    border-color: #d2e8d7 !important;
    background: #fff !important;
    transition: transform var(--motion-fast) var(--ease-out), color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease !important;
}

.pagination .page-item.active .page-link,
.page-item.active .page-link { color: #fff !important; background: var(--brand) !important; border-color: var(--brand) !important; }

.mobile-toggle-btn {
    background: var(--brand) !important;
    border-color: #fff !important;
    box-shadow: 0 8px 20px rgba(46, 125, 50, .24) !important;
    transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease !important;
}

/* Motion is limited to elements that invite interaction. */
@keyframes gm-reveal {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes gm-menu-in {
    from { opacity: 0; transform: translateY(-6px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
    .top-navbar,
    .tab-switcher,
    .date-filter,
    .alert-banner { animation: gm-reveal 420ms var(--ease-out) both; }

    .user-menu-dropdown.show { transform-origin: top right; animation: gm-menu-in var(--motion-fast) var(--ease-out) both; }

    .modal.fade .modal-dialog {
        transform: translateY(12px) scale(.985);
        transition: transform var(--motion-base) var(--ease-emphasized) !important;
    }

    .modal.show .modal-dialog { transform: translateY(0) scale(1); }
}

@media (hover: hover) and (pointer: fine) {
    .sidebar-logo:hover { transform: translateY(-2px) scale(1.025) !important; box-shadow: 0 12px 24px rgba(28, 74, 36, .15) !important; }
    .sidebar-header:hover::before {
        transform: translateY(-2px) rotate(-1.5deg);
        box-shadow: 0 12px 24px rgba(28, 74, 36, .18), inset 0 1px 0 rgba(255, 255, 255, .9);
    }
    .nav-link-custom:hover { transform: translateX(3px) !important; }
    .stat-card:hover,
    .stat-mini-card:hover,
    .quick-action-card:hover,
    .action-btn:hover { transform: translateY(-3px) !important; border-color: #badfc2 !important; box-shadow: var(--shadow-float) !important; }
    .stat-card:hover .stat-icon-wrapper,
    .stat-mini-card:hover .stat-icon-wrapper { transform: scale(1.06) !important; background: #d6f1db !important; }
    .btn:hover,
    .btn-primary-custom:hover,
    .btn-login:hover,
    .btn-b2b-custom:hover,
    .btn-add-item:hover,
    .btn-add-stock:hover,
    .btn-manage:hover,
    .mobile-toggle-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 9px 18px rgba(46, 125, 50, .21) !important; }
    .btn-primary-custom:hover,
    .btn-login:hover,
    .btn-primary:hover,
    .btn-b2b-custom:hover,
    .btn-add-item:hover,
    .btn-add-stock:hover,
    .btn-manage:hover { background: var(--brand-hover) !important; border-color: var(--brand-hover) !important; }
    .btn-primary-custom:hover::after,
    .btn-login:hover::after,
    .btn-primary:hover::after,
    .btn-b2b-custom:hover::after,
    .btn-add-item:hover::after,
    .btn-add-stock:hover::after,
    .btn-manage:hover::after { transform: translateX(125%); }
    .btn-secondary-custom:hover,
    .btn-outline-green:hover,
    .btn-outline-primary:hover { background: var(--surface-mint) !important; border-color: #a7d3b1 !important; color: var(--brand-ink) !important; }
    .tab-btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .72) !important; }
    .radio-pill label:hover { transform: translateY(-1px); border-color: #a7d3b1 !important; background: var(--surface-mint) !important; }
    .order-panel-close:hover { transform: rotate(8deg) !important; }
    .pagination .page-link:hover,
    .page-link:hover { transform: translateY(-1px); background: var(--surface-mint) !important; border-color: #a7d3b1 !important; }
}

.btn:active,
.tab-btn:active,
.radio-pill label:active,
.mobile-toggle-btn:active,
.action-btn:active { transform: translateY(0) scale(.98) !important; box-shadow: none !important; }

.btn:focus-visible,
.nav-link-custom:focus-visible,
.tab-btn:focus-visible,
.radio-pill input:focus-visible + label,
.order-panel-close:focus-visible,
.page-link:focus-visible,
a:focus-visible { outline: 3px solid rgba(76, 175, 80, .35) !important; outline-offset: 2px; }

/* Keep the original EV workshop photograph present, but quiet enough for data work. */
body,
body:has(.login-card) {
    background:
        linear-gradient(105deg, rgba(246, 251, 247, .76) 0%, rgba(246, 251, 247, .66) 54%, rgba(246, 251, 247, .58) 100%),
        url('../images/back-g.png') center / cover fixed !important;
}

/* The EV-parts workshop stays visible in the application shell; operational
   data remains deliberately opaque so rows, labels, and prices stay readable. */
.corporate-card,
.summary-card,
.info-card,
.filter-container,
.search-bar-wrapper,
.order-summary,
.payment-panel,
.total-amount-box,
.current-stock-info,
.date-filter,
.alert-banner {
    background: rgba(255, 255, 255, .975) !important;
}

.stat-card:not(.profit-card),
.stat-mini-card {
    background: rgba(255, 255, 255, .965) !important;
}

.custom-table td,
.table td { background: rgba(255, 255, 255, .975) !important; }

/* The former accent rails read as visual noise on dense report pages. */
.sidebar::before,
.nav-link-custom::before,
.top-navbar::after,
.stat-card::after,
.stat-mini-card::after,
.profit-card::after { display: none !important; }

/* A compact, properly spaced brand block makes the rail feel intentional. */
.sidebar {
    background: linear-gradient(180deg, rgba(252, 255, 252, .97), rgba(226, 246, 231, .97)) !important;
    overflow-anchor: none !important;
}

.sidebar-nav .nav-link-custom { min-height: 40px; }

@media (min-width: 992px) {
    /* Neutralize legacy per-page 1600px caps. The console should consume the
       available monitor width while retaining a stable rail gutter. */
    .main-content {
        margin-left: 272px !important;
        width: calc(100% - 272px) !important;
        max-width: none !important;
    }
}

@media (min-width: 1920px) {
    .main-content { padding-inline: clamp(36px, 3.2vw, 96px) !important; }
}

.sidebar-header {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas:
        'logo title'
        'logo subtitle';
    column-gap: 13px;
    row-gap: 3px;
    align-items: center;
    margin: 12px 12px 7px !important;
    padding: 12px !important;
    text-align: left !important;
    background: rgba(255, 255, 255, .88);
    border: 1px solid #d1ead6 !important;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(28, 74, 36, .06);
}

.sidebar-logo {
    grid-area: logo;
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    margin: 0 !important;
    padding: 5px !important;
    border-radius: 13px !important;
}

.sidebar-header h3 {
    grid-area: title;
    align-self: end;
    margin: 0 !important;
    font-size: .98rem !important;
    line-height: 1.12;
}

.sidebar-header p {
    grid-area: subtitle;
    align-self: start;
    margin: 0 !important;
    font-size: .67rem !important;
    line-height: 1.3;
}

/* The supplied square logo has generous white margins. Crop its scooter mark
   inside the existing grid cell so the real brand is visible at a glance. */
.sidebar-header::before {
    content: '';
    display: block;
    grid-area: logo;
    align-self: center;
    width: 52px;
    height: 52px;
    border: 1px solid #c8e7cf;
    border-radius: 13px;
    background: #fff url('../images/logo.png') 43% 43% / 154% no-repeat;
    box-shadow: 0 8px 20px rgba(28, 74, 36, .13), inset 0 1px 0 rgba(255, 255, 255, .9);
    filter: saturate(1.06) contrast(1.04);
    transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.sidebar-logo { opacity: 0 !important; pointer-events: none; }

/* Older templates supplied an icon fallback after the logo.  Keeping it hidden
   preserves the same two-column brand layout if a logo request ever fails. */
.sidebar-header > i { display: none !important; }

.sidebar-nav { padding: 7px 12px 28px !important; }
.nav-link-custom { margin: 3px 0 !important; padding: 10px 12px !important; }
.nav-divider { margin: 10px 7px !important; }

/* The account control gets a true avatar, readable label, and separate caret. */
.user-info {
    display: inline-grid !important;
    grid-template-columns: 26px auto 12px;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 5px 10px 5px 5px !important;
    border-radius: 12px !important;
    line-height: 1;
}

.user-info > i:not(.user-menu-caret) {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    margin: 0 !important;
    color: var(--brand) !important;
    background: #fff;
    border: 1px solid #d0e9d5;
    border-radius: 8px;
    font-size: .8rem !important;
}

.user-info > span { margin: 0 !important; font-weight: 700; }

.user-info .user-menu-caret {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--steel-600) !important;
    font-size: .62rem !important;
    opacity: .72;
}

.user-menu-dropdown {
    margin-top: 10px !important;
    padding: 7px !important;
    border-radius: 14px !important;
}

.user-menu-dropdown .dropdown-item { min-height: 38px; padding: 9px 11px !important; }
.user-menu-dropdown > li:first-child .dropdown-item {
    margin-bottom: 3px;
    background: linear-gradient(105deg, #effaf1, #e4f5e8) !important;
    border: 1px solid #cee8d3;
    color: var(--brand-ink) !important;
    font-weight: 750 !important;
}
.user-menu-dropdown > li:first-child .dropdown-item i { color: var(--brand) !important; }
.user-menu-dropdown > li:first-child .dropdown-item:hover { background: #dff2e4 !important; }

/* B2B is part of the same product—not a competing blue sub-brand. */
.text-b2b,
.tab-btn .text-b2b { color: var(--brand) !important; }

@media (max-width: 991.98px) {
    body,
    body:has(.login-card) { background-attachment: scroll !important; }
}

/* Shared mobile navigation behavior.  Older screens retain their existing
   toggle listeners; gm-shell.js observes the open state and supplies this
   same backdrop, focus feedback, and off-canvas positioning everywhere. */
.sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1040 !important;
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(20, 52, 30, .32) !important;
    backdrop-filter: blur(3px) saturate(108%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(108%) !important;
    transition: opacity var(--motion-base) ease, visibility 0s linear var(--motion-base) !important;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s !important;
}

body.gm-shell-nav-open { overscroll-behavior: none; }

@media (max-width: 991.98px) {
    .sidebar {
        width: min(284px, 86vw) !important;
        transform: translateX(-105%) !important;
        will-change: transform;
    }

    .sidebar.open { transform: translateX(0) !important; }

    #orderPanel,
    .order-panel { width: 100vw !important; }
}

@media (min-width: 992px) {
    .sidebar-overlay { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Account menu, brand mark, and data highlights

   This final shared layer intentionally sits above each page's legacy card
   effects. It keeps the account menu interactive while bringing a distinct
   color story to the operational metrics.
   -------------------------------------------------------------------------- */

/* Some dashboards establish their own stacking contexts for statistic cards.
   Give the complete header a higher, but modal-safe, plane so the Bootstrap
   account menu always opens in front of the content below it. */
.top-navbar {
    isolation: isolate;
    overflow: visible !important;
    z-index: 1030 !important;
}

.user-menu { position: relative; z-index: 1; }
.user-menu-dropdown.dropdown-menu { z-index: 1035 !important; }

/* The generated GV mark is deliberately large enough to be recognisable at a
   glance, while the dark backing makes the gold detail read on every screen. */
.sidebar-header {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    margin: 14px 12px 8px !important;
    padding: 12px !important;
}

.sidebar-logo {
    width: 76px !important;
    height: 76px !important;
    max-width: 76px !important;
    border-radius: 18px !important;
}

.sidebar-header::before {
    width: 76px !important;
    height: 76px !important;
    border: 1px solid rgba(211, 165, 82, .72) !important;
    border-radius: 18px !important;
    background:
        none,
        radial-gradient(circle at 28% 18%, #255f49 0%, #102e23 70%) !important;
    box-shadow: 0 12px 24px rgba(15, 61, 46, .20), inset 0 1px 0 rgba(255, 232, 178, .30) !important;
    filter: saturate(1.03) contrast(1.04) !important;
}

.sidebar-header h3 { font-size: 1.06rem !important; }
.sidebar-header p { font-size: .7rem !important; }

/* Each position in a metric row gets a balanced premium accent. The tint is
   subtle enough for dense financial figures but clear enough to scan quickly. */
.row > :nth-child(4n + 1) > .stat-card,
.row > :nth-child(4n + 1) > .stat-mini-card {
    --stat-accent: #147d55;
    --stat-ink: #0d4931;
    --stat-label: #4a7160;
    --stat-tint: #e8f7ee;
    --stat-border: #bde4ca;
    --stat-icon-bg: #d7f1e1;
}

.row > :nth-child(4n + 2) > .stat-card,
.row > :nth-child(4n + 2) > .stat-mini-card {
    --stat-accent: #b7791f;
    --stat-ink: #71430c;
    --stat-label: #87622b;
    --stat-tint: #fff5df;
    --stat-border: #efd69f;
    --stat-icon-bg: #ffedc2;
}

.row > :nth-child(4n + 3) > .stat-card,
.row > :nth-child(4n + 3) > .stat-mini-card {
    --stat-accent: #2563a8;
    --stat-ink: #173f72;
    --stat-label: #526b88;
    --stat-tint: #eaf3ff;
    --stat-border: #bdd8f5;
    --stat-icon-bg: #d9eaff;
}

.row > :nth-child(4n) > .stat-card,
.row > :nth-child(4n) > .stat-mini-card {
    --stat-accent: #8b3f71;
    --stat-ink: #602548;
    --stat-label: #7b5a70;
    --stat-tint: #fbedf5;
    --stat-border: #ebc5d9;
    --stat-icon-bg: #f7dbe9;
}

.stat-card,
.stat-mini-card {
    background: linear-gradient(135deg, #ffffff 0%, var(--stat-tint, #e8f7ee) 132%) !important;
    border-color: var(--stat-border, #bde4ca) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--stat-accent, #147d55) 11%, transparent) !important;
}

.stat-card::after,
.stat-mini-card::after { background: var(--stat-accent, #147d55) !important; }

.stat-card .stat-number,
.stat-card h2,
.stat-card h3,
.stat-card h5,
.stat-mini-card .number { color: var(--stat-ink, #0d4931) !important; }

.stat-card .stat-label,
.stat-card p,
.stat-mini-card .label { color: var(--stat-label, #4a7160) !important; }

.stat-icon-wrapper {
    background: var(--stat-icon-bg, #d7f1e1) !important;
    border-color: var(--stat-border, #bde4ca) !important;
}

.stat-icon-wrapper i,
.stat-mini-card > i { color: var(--stat-accent, #147d55) !important; }

/* Profit is the signature card: deep emerald, gold numerals, plus a subtle
   version of the actual brand mark instead of an emoji or generic symbol. */
.stat-card.profit-card {
    --stat-accent: #d7a64b;
    --stat-ink: #fff7e2;
    --stat-label: #dcebdd;
    --stat-tint: #123d2c;
    --stat-border: #2a664a;
    --stat-icon-bg: rgba(255, 246, 220, .13);
    overflow: hidden;
    background: linear-gradient(135deg, #0b3023 0%, #16563d 58%, #0c3d2b 100%) !important;
    border-color: #2a664a !important;
    box-shadow: 0 13px 28px rgba(13, 73, 49, .22) !important;
}

.stat-card.profit-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 180px;
    height: 180px;
    right: -52px;
    top: -36px;
    background: radial-gradient(circle, rgba(255, 229, 165, .20), rgba(255, 229, 165, 0) 68%);
    opacity: .8;
    pointer-events: none;
}

.stat-card.profit-card > * { position: relative; z-index: 1; }
.stat-card.profit-card::after { background: #e8bf6b !important; }
.stat-card.profit-card .stat-number,
.stat-card.profit-card h2,
.stat-card.profit-card h3,
.stat-card.profit-card h5 { color: #fff4d5 !important; }
.stat-card.profit-card .stat-label,
.stat-card.profit-card p,
.stat-card.profit-card .stat-trend { color: #d8ebdc !important; }
.stat-card.profit-card .stat-icon-wrapper i { color: #f7cb75 !important; }

@media (max-width: 420px) {
    .sidebar-header { grid-template-columns: 66px minmax(0, 1fr) !important; }
    .sidebar-logo,
    .sidebar-header::before { width: 66px !important; height: 66px !important; }
}

/* Final responsive contract shared by every screen.  Legacy pages have
   different inline breakpoints, so these structural rules intentionally sit
   last and use fluid sizing rather than device-specific fixed dimensions. */
html { overflow-x: hidden; }
body { width: 100%; max-width: 100vw; overflow-x: hidden !important; }
img, svg, video, canvas { max-width: 100%; height: auto; }

.main-content {
    width: auto !important;
    min-width: 0 !important;
    padding: clamp(14px, 2vw, 30px) clamp(12px, 2.2vw, 38px) 40px !important;
}
.main-content > * { max-width: 100%; }
.top-navbar {
    width: 100% !important;
    min-width: 0 !important;
    min-height: clamp(58px, 5vw, 76px) !important;
    padding-inline: clamp(12px, 2vw, 28px) !important;
    gap: 10px;
}
.top-navbar > * { min-width: 0; }
.corporate-card, .summary-card, .info-card, .stat-card, .stat-mini-card,
.date-filter, .filter-container, .search-bar-wrapper { min-width: 0; max-width: 100%; }
.row { --bs-gutter-x: clamp(.75rem, 1.6vw, 1.5rem); }
.custom-table, .table { width: 100%; max-width: 100%; }
.table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.form-control, .form-select, .input-group { max-width: 100%; min-width: 0; }
.sidebar { width: clamp(248px, 20vw, 292px) !important; max-width: 86vw; }
.sidebar-nav { min-width: 0; }
.nav-link-custom { max-width: 100%; min-width: 0; }
.nav-link-custom span, .nav-link-custom .nav-badge { min-width: 0; }

@media (min-width: 1440px) {
    .main-content { padding-inline: clamp(28px, 3vw, 64px) !important; }
    .corporate-card, .summary-card, .info-card { border-radius: 18px; }
}

@media (max-width: 991.98px) {
    .sidebar { width: min(292px, 86vw) !important; max-width: 86vw; }
    .main-content { margin-left: 0 !important; width: 100% !important; }
    .top-navbar { position: relative; flex-wrap: wrap; }
    .page-title { max-width: 100%; font-size: clamp(1.15rem, 3vw, 1.55rem) !important; }
}

@media (max-width: 767.98px) {
    .main-content { padding: 12px 10px 76px !important; }
    .top-navbar { margin-bottom: 12px !important; padding-block: 10px !important; }
    .top-navbar .user-menu { margin-left: auto; }
    .card-header-custom { flex-wrap: wrap; gap: 8px; }
    .card-header-custom > * { min-width: 0; }
    .filter-tabs, .filter-group, .action-buttons { width: 100%; }
    .filter-tabs > a, .filter-group > * { flex: 1 1 auto; }
    .custom-table, .table { display: block; overflow-x: auto; white-space: nowrap; }
    .custom-table thead, .custom-table tbody, .table thead, .table tbody { min-width: 640px; }
    .btn-primary-custom, .btn-secondary-custom, .btn-outline-green { min-height: 40px; }
    .modal-dialog { width: calc(100% - 20px); max-width: none; margin: 10px auto; }
}

@media (max-width: 479.98px) {
    .main-content { padding-inline: 8px !important; }
    .sidebar-header { margin-inline: 8px !important; padding-inline: 10px !important; }
    .sidebar-logo { width: 62px !important; height: 62px !important; }
    .sidebar-header { grid-template-columns: 62px minmax(0, 1fr) !important; }
    .corporate-card, .stat-card, .stat-mini-card { border-radius: 10px !important; }
    .card-header-custom { padding: 12px !important; }
    .form-label { font-size: .78rem; }
    .btn-primary-custom, .btn-secondary-custom { width: 100%; margin: 4px 0 !important; justify-content: center; }
}

/* Persist a clear selected state on server-rendered filter tabs.  This is
   intentionally last so report-level button styles cannot wash it out. */
.filter-tabs .btn-outline-green.active,
.btn-outline-green[aria-current="page"] {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%) !important;
    color: #fff !important;
    border-color: #1b5e20 !important;
    box-shadow: 0 5px 14px rgba(27, 94, 32, .26), inset 0 1px 0 rgba(255,255,255,.2) !important;
    font-weight: 800 !important;
    transform: translateY(-1px);
}

.filter-tabs .btn-outline-green.active:hover,
.btn-outline-green[aria-current="page"]:hover {
    background: linear-gradient(135deg, #145218 0%, #236b28 100%) !important;
    color: #fff !important;
}

.btn-primary-custom,
.btn-secondary-custom { vertical-align: middle !important; }
.btn-primary-custom + .btn-secondary-custom,
.btn-secondary-custom + .btn-secondary-custom { margin-left: 8px !important; }
@media (max-width: 560px) {
    .btn-primary-custom,
    .btn-secondary-custom { margin: 4px 6px 4px 0 !important; }
}

/* Preserve the supplied G MOTARS logo as the sole company mark. Supporting
   navigation artwork below is intentionally kept separate from this header. */
.sidebar-header {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    column-gap: 13px !important;
    margin: 12px 12px 7px !important;
    padding: 12px !important;
}

.sidebar-logo {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    border-radius: 13px !important;
}

.sidebar-header::before {
    width: 52px !important;
    height: 52px !important;
    border: 1px solid #c8e7cf !important;
    border-radius: 13px !important;
    background: #fff url('../images/logo.png') 43% 43% / 154% no-repeat !important;
    box-shadow: 0 8px 20px rgba(28, 74, 36, .13), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    filter: saturate(1.06) contrast(1.04) !important;
}

.sidebar-header h3 { font-size: .98rem !important; }
.sidebar-header p { font-size: .67rem !important; }

@media (max-width: 420px) {
    .sidebar-header { grid-template-columns: 52px minmax(0, 1fr) !important; }
    .sidebar-logo,
    .sidebar-header::before { width: 52px !important; height: 52px !important; }
}

/* Make the original scooter logo the clear focal point of the side rail. Its
   source file is unchanged; the larger cropped presentation removes the empty
   canvas that previously made the real mark appear undersized. */
.sidebar-header {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    column-gap: 15px !important;
    margin: 14px 12px 9px !important;
    padding: 13px !important;
}

.sidebar-logo {
    width: 92px !important;
    height: 92px !important;
    max-width: 92px !important;
    border-radius: 20px !important;
}

.sidebar-header::before {
    width: 92px !important;
    height: 92px !important;
    border-radius: 20px !important;
    background: #fff url('../images/logo.png') 43% 43% / 205% no-repeat !important;
    box-shadow: 0 12px 26px rgba(28, 74, 36, .18), inset 0 1px 0 rgba(255, 255, 255, .94) !important;
}

.sidebar-header h3 { font-size: 1.08rem !important; }
.sidebar-header p { font-size: .72rem !important; }

@media (max-width: 420px) {
    .sidebar-header { grid-template-columns: 76px minmax(0, 1fr) !important; }
    .sidebar-logo,
    .sidebar-header::before { width: 76px !important; height: 76px !important; }
    .sidebar-header::before { background-size: 205% !important; }
}

/* Supporting image badges use real transparent assets, rather than emoji-like
   glyphs, while the existing G MOTARS logo remains the brand anchor above. */
.nav-link-custom :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high),
.page-title :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high),
.stat-icon-wrapper :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high),
.stat-mini-card > :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high) {
    --ui-image: none;
}

.nav-link-custom :is(.fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs),
.page-title :is(.fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs),
.stat-icon-wrapper :is(.fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs),
.stat-mini-card > :is(.fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs) {
    --ui-image: none;
}

.nav-link-custom :is(.fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card),
.page-title :is(.fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card),
.stat-icon-wrapper :is(.fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card),
.stat-mini-card > :is(.fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card) {
    --ui-image: none;
}

.nav-link-custom :is(.fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire),
.page-title :is(.fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire),
.stat-icon-wrapper :is(.fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire),
.stat-mini-card > :is(.fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire) {
    --ui-image: none;
}

.nav-link-custom :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire) {
    display: block !important;
    flex: 0 0 24px;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    background: var(--ui-image) center / contain no-repeat !important;
    color: transparent !important;
    font-size: 0 !important;
}

.page-title :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire) {
    background: var(--ui-image) center / 72% no-repeat !important;
    color: transparent !important;
    font-size: 0 !important;
}

.stat-icon-wrapper :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire),
.stat-mini-card > :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire) {
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    margin: 0 auto !important;
    background: var(--ui-image) center / contain no-repeat !important;
    color: transparent !important;
    font-size: 0 !important;
}

.nav-link-custom :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire)::before,
.page-title :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire)::before,
.stat-icon-wrapper :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire)::before,
.stat-mini-card > :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire)::before {
    content: none !important;
}

/* Classic, quiet iconography: standard Font Awesome silhouettes, treated as
   precision controls rather than oversized illustrated badges. */
.fa-tachometer-alt { --classic-icon: '\f3fd'; }
.fa-gauge { --classic-icon: '\f624'; }
.fa-gauge-high { --classic-icon: '\f625'; }
.fa-microchip { --classic-icon: '\f2db'; }
.fa-plus-circle { --classic-icon: '\f055'; }
.fa-arrow-down { --classic-icon: '\f063'; }
.fa-arrow-up { --classic-icon: '\f062'; }
.fa-history { --classic-icon: '\f1da'; }
.fa-exclamation-triangle { --classic-icon: '\f071'; }
.fa-box { --classic-icon: '\f466'; }
.fa-boxes { --classic-icon: '\f468'; }
.fa-cogs { --classic-icon: '\f085'; }
.fa-users { --classic-icon: '\f0c0'; }
.fa-user { --classic-icon: '\f007'; }
.fa-clock { --classic-icon: '\f017'; }
.fa-credit-card { --classic-icon: '\f09d'; }
.fa-id-card { --classic-icon: '\f2c2'; }
.fa-chart-pie { --classic-icon: '\f200'; }
.fa-chart-line { --classic-icon: '\f201'; }
.fa-shopping-cart { --classic-icon: '\f07a'; }
.fa-coins { --classic-icon: '\f51e'; }
.fa-rupee-sign { --classic-icon: '\f156'; }
.fa-fire { --classic-icon: '\f06d'; }

.nav-link-custom :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire),
.page-title :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire),
.stat-icon-wrapper :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire),
.stat-mini-card > :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire) {
    background: none !important;
    color: var(--brand, #2e7d32) !important;
    font-size: 1em !important;
}

.nav-link-custom :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire) {
    display: inline-grid !important;
    flex: 0 0 26px;
    width: 26px !important;
    height: 26px !important;
    place-items: center;
    margin: 0 !important;
    background: rgba(255, 255, 255, .78) !important;
    border: 1px solid rgba(175, 211, 184, .85);
    border-radius: 8px;
    color: #376f45 !important;
    font-size: .78rem !important;
}

.nav-link-custom.active :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire) {
    background: var(--brand, #2e7d32) !important;
    border-color: var(--brand, #2e7d32);
    color: #fff !important;
}

.page-title :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire) {
    display: inline-grid !important;
    width: 34px !important;
    height: 34px !important;
    place-items: center;
    margin-right: 8px;
    background: var(--surface-mint-strong, #ddf4e1) !important;
    border: 1px solid #cde7d2;
    border-radius: 10px;
    color: var(--brand, #2e7d32) !important;
    font-size: .9rem !important;
}

.stat-icon-wrapper :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire) {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: none !important;
    color: var(--stat-accent, #147d55) !important;
    font-size: 1rem !important;
}

.stat-mini-card > :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire) {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 3px !important;
    background: none !important;
    color: var(--stat-accent, #147d55) !important;
    font-size: 1.05rem !important;
}

.nav-link-custom :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire)::before,
.page-title :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire)::before,
.stat-icon-wrapper :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire)::before,
.stat-mini-card > :is(.fa-tachometer-alt, .fa-gauge, .fa-gauge-high, .fa-microchip, .fa-plus-circle, .fa-arrow-down, .fa-arrow-up, .fa-history, .fa-exclamation-triangle, .fa-box, .fa-boxes, .fa-cogs, .fa-users, .fa-user, .fa-clock, .fa-credit-card, .fa-id-card, .fa-chart-pie, .fa-chart-line, .fa-shopping-cart, .fa-coins, .fa-rupee-sign, .fa-fire)::before {
    content: var(--classic-icon) !important;
}

/* The company logo is a wide scooter mark. A landscape frame lets it sit at
   its natural proportions instead of stretching or zooming a square crop. */
.sidebar-header {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: 'logo' 'title' 'subtitle' !important;
    row-gap: 4px !important;
    margin: 14px 12px 9px !important;
    padding: 13px 14px 14px !important;
}

.sidebar-logo {
    width: 100% !important;
    height: 82px !important;
    max-width: none !important;
    border-radius: 16px !important;
}

.sidebar-header::before {
    width: 100% !important;
    height: 82px !important;
    border: 1px solid #c8e7cf !important;
    border-radius: 16px !important;
    background: #fff url('../images/logo.png') center / 125% no-repeat !important;
    box-shadow: 0 10px 22px rgba(28, 74, 36, .14), inset 0 1px 0 rgba(255, 255, 255, .94) !important;
}

.sidebar-header h3 { font-size: 1.04rem !important; }
.sidebar-header p { font-size: .7rem !important; }

@media (max-width: 420px) {
    .sidebar-logo,
    .sidebar-header::before { height: 72px !important; }
    .sidebar-header::before { background-size: 125% !important; }
}

/* --------------------------------------------------------------------------
   Flat SVG icon system

   Lucide-style outline SVGs (24×24, 2px stroke) replace the former filled
   Material Design glyphs. The same mask-image system is retained so that
   existing template markup continues to work without changes.
   -------------------------------------------------------------------------- */
.fa-tachometer-alt, .fa-gauge, .fa-gauge-high { --gm-flat-icon: url('../images/icons/dashboard.svg'); }
.fa-microchip, .fa-box, .fa-boxes, .fa-cogs { --gm-flat-icon: url('../images/icons/parts.svg'); }
.fa-plus-circle, .fa-plus { --gm-flat-icon: url('../images/icons/add.svg'); }
.fa-arrow-down { --gm-flat-icon: url('../images/icons/stock-in.svg'); }
.fa-arrow-up { --gm-flat-icon: url('../images/icons/stock-out.svg'); }
.fa-history { --gm-flat-icon: url('../images/icons/history.svg'); }
.fa-users, .fa-user, .fa-id-card { --gm-flat-icon: url('../images/icons/customers.svg'); }
.fa-clock { --gm-flat-icon: url('../images/icons/pending.svg'); }
.fa-exclamation-triangle { --gm-flat-icon: url('../images/icons/alert.svg'); }
.fa-chart-pie { --gm-flat-icon: url('../images/icons/inventory-value.svg'); }
.fa-chart-line, .fa-coins, .fa-rupee-sign { --gm-flat-icon: url('../images/icons/profit.svg'); }
.fa-shopping-cart { --gm-flat-icon: url('../images/icons/sales.svg'); }
.fa-fire { --gm-flat-icon: url('../images/icons/flame.svg'); }
.fa-sign-out-alt, .fa-sign-out, .fa-right-from-bracket { --gm-flat-icon: url('../images/icons/logout.svg'); }
.fa-list, .fa-list-ul, .fa-list-alt, .fa-search { --gm-flat-icon: url('../images/icons/list.svg'); }

/* Additional icon mappings for classes used across pages */
.fa-key { --gm-flat-icon: url('../images/icons/key.svg'); }
.fa-eye { --gm-flat-icon: url('../images/icons/eye.svg'); }
.fa-check-circle { --gm-flat-icon: url('../images/icons/check-circle.svg'); }
.fa-box-open { --gm-flat-icon: url('../images/icons/package-open.svg'); }
.fa-star { --gm-flat-icon: url('../images/icons/star.svg'); }
.fa-calendar-week, .fa-calendar, .fa-calendar-alt { --gm-flat-icon: url('../images/icons/calendar.svg'); }
.fa-user-circle { --gm-flat-icon: url('../images/icons/user-circle.svg'); }
.fa-minus-circle { --gm-flat-icon: url('../images/icons/minus-circle.svg'); }
.fa-database { --gm-flat-icon: url('../images/icons/database.svg'); }
.fa-exclamation-circle { --gm-flat-icon: url('../images/icons/info-circle.svg'); }
.fa-times-circle { --gm-flat-icon: url('../images/icons/minus-circle.svg'); }
.fa-credit-card { --gm-flat-icon: url('../images/icons/credit-card.svg'); }

/* Replace glyph codepoints by the locally bundled SVG image without changing
   any templates.  The same image source is used in the navigation, page
   headings, report headings, and statistic cards. */
.nav-link-custom i[class*='fa-']::before,
.page-title i[class*='fa-']::before,
.card-header-custom i[class*='fa-']::before,
.stat-icon-wrapper i[class*='fa-']::before,
.stat-mini-card > i[class*='fa-']::before {
    content: '' !important;
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: var(--gm-flat-icon, url('../images/icons/list.svg'));
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: var(--gm-flat-icon, url('../images/icons/list.svg'));
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

/* Side-panel icons receive a small, classic tile. They retain the full asset
   meaning at a glance and become solid green only for the active screen. */
.nav-link-custom i[class*='fa-'] {
    display: inline-grid !important;
    flex: 0 0 26px;
    place-items: center;
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 5px;
    color: #477653 !important;
    background: #f7fbf8 !important;
    border: 1px solid #d2e8d7;
    border-radius: 8px;
    font-size: 0 !important;
}

.nav-link-custom:hover i[class*='fa-'] {
    color: var(--brand, #2e7d32) !important;
    background: #fff !important;
    border-color: #b8ddc0;
}

.nav-link-custom.active i[class*='fa-'] {
    color: #fff !important;
    background: var(--brand, #2e7d32) !important;
    border-color: var(--brand, #2e7d32);
}

/* Keep page and card heading icons compact and editorial rather than overly
   decorative. The supplied SVG image controls the silhouette. */
.page-title i[class*='fa-'] {
    display: inline-grid !important;
    place-items: center;
    width: 34px !important;
    height: 34px !important;
    margin-right: 8px;
    padding: 9px;
    color: var(--brand, #2e7d32) !important;
    background: var(--surface-mint-strong, #ddf4e1) !important;
    border: 1px solid #cde7d2;
    border-radius: 10px;
    font-size: 0 !important;
}

.card-header-custom i[class*='fa-'] {
    display: inline-grid !important;
    place-items: center;
    width: 18px !important;
    height: 18px !important;
    margin-right: 7px !important;
    color: var(--brand, #2e7d32) !important;
    font-size: 0 !important;
    vertical-align: -3px;
}

.stat-icon-wrapper i[class*='fa-'] {
    display: grid !important;
    place-items: center;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 9px;
    color: var(--stat-accent, #147d55) !important;
    font-size: 0 !important;
}

.stat-mini-card > i[class*='fa-'] {
    display: inline-grid !important;
    place-items: center;
    width: 22px !important;
    height: 22px !important;
    margin: 0 0 4px !important;
    color: var(--stat-accent, #147d55) !important;
    font-size: 0 !important;
}

/* Sidebar header — compact side-by-side layout.
   Logo sits to the left of the company name at 60px, properly visible.
   The real <img> tag is shown; the ::before pseudo-element is hidden. */
.sidebar-header {
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) !important;
    grid-template-areas:
        'logo title'
        'logo subtitle' !important;
    column-gap: 14px !important;
    row-gap: 2px !important;
    align-items: center;
    margin: 14px 12px 9px !important;
    padding: 13px 14px !important;
    text-align: left !important;
}

.sidebar-header::before {
    display: none !important;
}

.sidebar-logo {
    grid-area: logo;
    width: 74px !important;
    height: 74px !important;
    max-width: 74px !important;
    margin: 0 !important;
    padding: 5px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    object-fit: contain;
    background: #fff !important;
    border: 1px solid #c8e7cf !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 16px rgba(28, 74, 36, .12) !important;
    transition: transform .22s ease, box-shadow .22s ease !important;
}

.sidebar-logo:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 10px 22px rgba(28, 74, 36, .16) !important;
}

.sidebar-header h3 {
    grid-area: title;
    align-self: end;
    margin: 0 !important;
    font-size: 1.06rem !important;
    line-height: 1.15;
}

.sidebar-header p {
    grid-area: subtitle;
    align-self: start;
    margin: 0 !important;
    font-size: .7rem !important;
    line-height: 1.3;
}

@media (max-width: 420px) {
    .sidebar-header {
        grid-template-columns: 62px minmax(0, 1fr) !important;
    }
    .sidebar-logo {
        width: 62px !important;
        height: 62px !important;
        max-width: 62px !important;
        border-radius: 12px !important;
    }
    .sidebar-header h3 { font-size: .96rem !important; }
}