/* Shared workspace presentation. Page-local components use the same tokens. */
:root, [data-bs-theme="light"] {
  --bg-primary: #f5f7fa;
  --bg-card: #fff;
  --bg-elevated: #f2f5f9;
  --bg-input: #fff;
  --bg-subtle: #f8fafc;
  --bg-inverse: #20252d;
  --accent-gold: #1565c0;
  --accent-gold-light: #1565c0;
  --accent-rose: #1565c0;
  --text-primary: #202630;
  --text-secondary: #495465;
  --text-muted: #687486;
  --border-subtle: #e2e7ee;
  --hairline: #e9edf2;
  --success: #15805b;
  --danger: #c33b42;
  --warning: #946200;
  --shadow-sm: 0 1px 3px rgba(24,39,58,.035);
  --shadow-md: 0 4px 16px rgba(24,39,58,.07);
  --shadow-lg: 0 20px 64px rgba(24,39,58,.17);
  --radius-md: 8px;
  --radius-lg: 8px;
  --font-sans: "Inter", "Segoe UI", Arial, sans-serif;
  --font-display: var(--font-sans);
  --sidebar-expanded-width: 248px;
  --sidebar-collapsed-width: 76px;
  --c-blue: #1565c0; --c-blue-soft: #eaf2fc;
  --c-green: #15805b; --c-green-soft: #e9f6ef;
  --c-amber: #946200; --c-amber-soft: #fff5de;
  --c-purple: #6652a3; --c-purple-soft: #f1eef9;
  --c-rose: #c33b42; --c-rose-soft: #fceef0;
  --c-cyan: #167b8f; --c-cyan-soft: #eaf6f8;
  --c-teal: #19796e; --c-teal-soft: #edf7f5;
  --chart-tick: #687486;
  --chart-grid: #edf0f4;
  --bs-body-bg: var(--bg-primary);
  --bs-body-color: var(--text-primary);
  --bs-emphasis-color: var(--text-primary);
  --bs-secondary-color: var(--text-muted);
  --bs-border-color: var(--border-subtle);
  --bs-tertiary-bg: var(--bg-elevated);
  --bs-primary: #1565c0; --bs-primary-rgb: 21,101,192;
  --bs-link-color: #1565c0; --bs-link-hover-color: #0e4e96;
}
[data-bs-theme="dark"] {
  --bg-primary: #171a1f; --bg-card: #21252b; --bg-elevated: #2a3038;
  --bg-input: #20252c; --bg-subtle: #1c2026; --bg-inverse: #111418;
  --text-primary: #edf0f5; --text-secondary: #c2c9d3; --text-muted: #a0acbb;
  --border-subtle: #363d47; --hairline: #2e353e;
  --accent-gold: #70aff5; --accent-gold-light: #70aff5; --accent-rose: #70aff5;
  --success: #69c89e; --danger: #f28b90; --warning: #e4b866;
  --c-blue-soft: #23384f; --c-green-soft: #233b32; --c-amber-soft: #403725;
  --c-purple-soft: #343047; --c-rose-soft: #432d34;
  --c-blue: #70aff5; --c-green: #69c89e; --c-amber: #e4b866;
  --c-purple: #b5a4e6; --c-rose: #f28b90; --c-cyan: #73c7d5; --c-teal: #73c9b9;
  --c-cyan-soft: #233940; --c-teal-soft: #253c38;
  --chart-tick: #a0acbb; --chart-grid: #363d47;
  --bs-body-bg: var(--bg-primary); --bs-body-color: var(--text-primary);
  --bs-emphasis-color: var(--text-primary); --bs-secondary-color: var(--text-muted);
  --bs-border-color: var(--border-subtle); --bs-tertiary-bg: var(--bg-elevated);
}
html { font-size: 14px; background: var(--bg-primary); }
body, [data-bs-theme] body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-sans); letter-spacing: 0; line-height: 1.5; }
body::before, body::after { content: none; }
.app-page { font-size: .94rem; }
h1,h2,h3,h4,h5,h6,.display-font { font-family: var(--font-sans); letter-spacing: 0; color: var(--text-primary); }
* { scrollbar-color: #bac4d0 transparent; scrollbar-width: thin; }
.sidebar, [data-bs-theme] .sidebar {
  inset: 0 auto 0 0; height: 100dvh; width: var(--sidebar-width);
  border: 0; border-right: 1px solid var(--border-subtle); border-radius: 0;
  background: var(--bg-card); box-shadow: none; overflow: hidden;
}
.sidebar-header { min-height: 80px; border-bottom: 1px solid var(--hairline); background: transparent; padding: 16px !important; gap: 6px; }
.sidebar .brand-mark { min-width: 0; padding: 0; gap: 10px; }
.brand-emblem, .sidebar .brand-emblem, .mobile-header .brand-emblem { width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-card); color: var(--accent-gold); box-shadow: none; font-family: var(--font-sans); }
.brand-text { min-width: 0; }
.sidebar .brand-text span, .mobile-header .brand-text span { color: var(--text-primary); font: 700 13px/1.3 var(--font-sans); white-space: normal; }
.sidebar .brand-text small, .mobile-header .brand-text small { font-size: 11px; color: var(--text-muted); }
#desktopSidebarToggle { position: static; flex: 0 0 26px; width: 26px; min-height: 30px; height: 30px; border-radius: 5px; background: transparent; border: 0; color: var(--text-muted); box-shadow: none; margin-left: auto; }
#desktopSidebarToggle:hover { background: var(--bg-elevated); color: var(--accent-gold); }
.sidebar-nav { flex: 1; min-height: 0; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.sidebar .nav-link, body.sidebar-collapsed .sidebar .nav-link, body.sidebar-collapsed.sidebar-hover-open .sidebar .nav-link {
  min-height: 38px; flex-shrink: 0; padding: 8px 12px; margin: 0; gap: 10px;
  border: 0; border-radius: 6px; background: transparent; box-shadow: none;
  color: var(--text-secondary); font-size: 12px; font-weight: 500; letter-spacing: 0;
}
.sidebar .nav-link i, .sidebar-footer .ghost-link i { width: 20px; height: 20px; flex: 0 0 20px; background: transparent; border-radius: 0; color: var(--text-muted); font-size: 16px; display: inline-grid; place-items: center; }
.sidebar .nav-link:hover, .sidebar .nav-link:focus-visible { background: var(--bg-elevated); color: var(--text-primary); transform: none; }
.sidebar .nav-link.active { background: var(--c-blue-soft); color: var(--accent-gold); font-weight: 650; box-shadow: none; }
.sidebar .nav-link.active i, .sidebar .nav-link:hover i { background: transparent; color: var(--accent-gold); }
.sidebar .nav-link.active::before { display: none; }
.sidebar-footer { padding: 12px; gap: 2px; background: var(--bg-card); border-top: 1px solid var(--border-subtle); }
.footer-userinfo { padding: 6px 10px 10px; background: transparent; border: 0; border-radius: 0; color: var(--text-primary); font-size: 12px; }
.sidebar-footer .ghost-link, body.sidebar-collapsed.sidebar-hover-open .sidebar-footer .ghost-link { min-height: 34px; border-radius: 6px; padding: 6px 10px; color: var(--text-secondary); font-weight: 500; font-size: 12px; }
.sidebar-footer .ghost-link:hover { background: var(--bg-elevated); color: var(--text-primary); }
.main-content { padding: 28px 32px 40px; }
.page-fade { animation: none; }
.page-heading { align-items: center; flex-wrap: wrap; margin-bottom: 24px; padding: 0 0 20px; border-bottom: 1px solid var(--border-subtle); }
.page-heading::after { display: none; }
.page-heading h1 { font-size: 26px; line-height: 1.25; letter-spacing: 0; font-weight: 700; }
.page-heading p { color: var(--text-muted); font-size: 11px; letter-spacing: 0; font-weight: 500; }
.page-heading .text-uppercase.gold-text::before { display: none; }
.card,.modal-content,.offcanvas,.luxury-panel { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px; box-shadow: var(--shadow-sm); }
.card:hover,.hover-lift:hover,.cash-kpi:hover,.sales-kpi:hover { transform: none; border-color: var(--border-subtle); box-shadow: var(--shadow-sm); }
.app-page .card-body { padding: 20px; }
.card-body > h2,.card-body > .h2,.card-body > h3,.card-body > .h3 { font-size: 15px; font-weight: 650; padding: 0 0 16px; border-bottom: 1px solid var(--hairline); }
.card-body > h2::before,.card-body > .h2::before,.card-body > h3::before,.card-body > .h3::before { display: none; }
.card-header,.modal-header,.modal-footer,.offcanvas-header { background: var(--bg-card); border-color: var(--border-subtle); padding: 16px 20px; }
.modal-title,.offcanvas-title { font-size: 18px; }
.modal-content,.offcanvas { box-shadow: var(--shadow-lg); }
.modal-body { padding: 20px; }
.btn { min-height: 36px; border-radius: 6px; padding: 7px 12px; font: 600 12px/1.4 var(--font-sans); letter-spacing: 0; box-shadow: none; transition: background 150ms, border-color 150ms, color 150ms; }
.btn:hover,.btn:active { transform: none; box-shadow: none; filter: none; }
.btn-primary,.btn-gold,.btn-primary:hover,.btn-gold:hover { background: #1565c0; border: 1px solid #1565c0; color: #fff; box-shadow: none; }
.btn-primary:hover,.btn-gold:hover { background: #0d51a0; }
.btn-ghost,.btn-outline-gold,.btn-outline-primary,.btn-outline-secondary { background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-secondary); }
.btn-ghost:hover,.btn-outline-gold:hover,.btn-outline-primary:hover,.btn-outline-secondary:hover { background: var(--c-blue-soft); color: var(--accent-gold); border-color: var(--accent-gold); }
.btn-danger-soft { background: var(--c-rose-soft); color: var(--danger); border-color: transparent; }
.btn-sm,.table .btn-sm { min-height: 30px; padding: 5px 9px; font-size: 11px; }
.btn-lg { min-height: 44px; font-size: 14px; }
.form-control,.form-select { min-height: 40px; border: 1px solid var(--border-subtle); border-radius: 6px; background-color: var(--bg-input); color: var(--text-primary); font: 400 13px/1.5 var(--font-sans); box-shadow: none; }
.form-control:focus,.form-select:focus { background-color: var(--bg-input); color: var(--text-primary); border-color: #1565c0; box-shadow: 0 0 0 3px rgba(21,101,192,.12); }
.form-control::placeholder { color: var(--text-muted); opacity: .8; }
.form-floating > .form-control::placeholder { color: transparent; }
.app-page .form-floating > .form-control,.app-page .form-floating > .form-select { height: 52px; min-height: 52px; padding-top: 22px; padding-bottom: 6px; }
.app-page .form-floating > label { padding: 14px 12px; }
.input-group-text { border-color: var(--border-subtle); background: var(--bg-elevated); color: var(--text-muted); border-radius: 6px; }
.form-check-input:checked { background-color: #1565c0; border-color: #1565c0; }
.form-label { font-size: 12px; font-weight: 600; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--text-primary); --bs-table-striped-bg: var(--bg-subtle); --bs-table-striped-color: var(--text-primary); --bs-table-hover-bg: var(--bg-elevated); --bs-table-hover-color: var(--text-primary); border-color: var(--hairline); font-size: 12px; }
.table thead th { padding: 12px; background: var(--bg-subtle); color: var(--text-muted); border-color: var(--border-subtle); font-size: 10px; font-weight: 650; letter-spacing: 0; }
.table tbody td { padding: 13px 12px; border-color: var(--hairline); }
.table tbody tr:hover { background: var(--bg-elevated); }
.table-responsive { border-radius: 6px; }
.table .text-end { font-variant-numeric: tabular-nums; }
.badge,.status-badge { border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0; padding: 4px 7px; }
.status-in,.badge-confirmed { background: var(--c-green-soft); color: var(--success); border: 0; }
.status-low,.badge-draft { background: var(--c-amber-soft); color: var(--warning); border: 0; }
.status-out { background: var(--c-rose-soft); color: var(--danger); border: 0; }
.metric-icon { width: 32px; height: 32px; flex: 0 0 32px; border: 0; border-radius: 6px; background: var(--c-blue-soft); color: var(--accent-gold); font-size: 15px; box-shadow: none; }
.kpi-card::before { display: none; }
.kpi-row .kpi-value,.kpi-value { color: var(--text-primary); font: 650 24px/1.25 var(--font-sans); letter-spacing: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-row .metric-icon { color: var(--accent-gold); background: var(--c-blue-soft); }
.hover-lift:hover .metric-icon { transform: none; }
/* Equal tracks give every financial figure enough room, regardless of its length. */
.dashboard-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 0 0 24px !important; }
.dashboard-metrics > [class*="col-"] { width: auto; max-width: none; padding: 0; margin: 0; min-width: 0; }
.dashboard-metrics .card-body { padding: 18px 20px; min-height: 156px; }
.dashboard-metrics .card { margin-bottom: 0; }
.dashboard-metrics .card-body > .d-flex { margin-bottom: 14px !important; align-items: center !important; gap: 10px; }
.dashboard-metrics .card-body > .d-flex > .text-soft { font-size: 12px; font-weight: 500; }
.dashboard-metrics .small { font-size: 11px; line-height: 1.6; max-width: 42ch; }
.dashboard-metrics .sms-balance-value { font-size: 24px; }
.metric-currency { font-size: 11px; color: var(--text-muted); font-weight: 500; vertical-align: baseline; }
body.sidebar-collapsed.sidebar-hover-open .sidebar { box-shadow: var(--shadow-md); }
.dashboard-metrics .sms-status-line { margin-top: 8px !important; }
.dashboard-metrics .sms-status-message { font-size: 11px; }
.dashboard-metrics .btn { margin-top: 8px !important; }
.page-dashboard .row:not(.dashboard-metrics) { --bs-gutter-x: 20px; --bs-gutter-y: 20px; }
.page-link { color: var(--text-secondary); background: var(--bg-card); border-color: var(--border-subtle); border-radius: 5px; box-shadow: none; }
.page-item.active .page-link { background: #1565c0; border-color: #1565c0; color: #fff; }
.nav-tabs { border-color: var(--border-subtle); }
.nav-tabs .nav-link { color: var(--text-muted); border-radius: 6px 6px 0 0; }
.nav-tabs .nav-link.active { color: var(--accent-gold); background: var(--bg-card); border-color: var(--border-subtle); border-bottom-color: var(--bg-card); }
.nav-pills .nav-link.active,.pill-toggle .btn-check:checked + .btn { background: #1565c0; color: #fff; }
.progress { background: var(--bg-elevated); height: 6px; box-shadow: none; }
.progress-bar { background: #1565c0; }
.dropdown-menu,.app-toast { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px; box-shadow: var(--shadow-lg); color: var(--text-primary); }
.dropdown-item { color: var(--text-primary); }
.dropdown-item:hover { color: var(--accent-gold); background: var(--c-blue-soft); }
.btn:focus-visible,a:focus-visible { outline: 2px solid #1565c0; outline-offset: 3px; }

/* Normalize page-owned surfaces without altering their grids or event hooks. */
.pos-panel,.pos-checkout-card,.pos-product-card,.pos-cart-card,.returned-decant-card,
.give-shop-line,.sales-kpi,.cash-kpi,.gts-kpi,.gts-panel,.gts-mobile-card,
.perfume-kpi-card,.perfume-catalog-panel,.perfume-mobile-card,.grn-mobile-card,
.bottle-mobile-card,.report-kpi,.duplicate-group-card,.duplicate-record-card {
  background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important;
  border-radius: 8px !important; box-shadow: var(--shadow-sm) !important; color: var(--text-primary);
}
.pos-command-bar,.perfume-hero,.grn-hero,.bottle-hero,.gts-hero {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 0 0 20px !important;
}
.pos-command-bar h1,.perfume-hero h1,.grn-hero h1,.bottle-hero h1,.gts-hero h1 { font-size: 26px !important; letter-spacing: 0 !important; }
.sales-filter-bar,.cash-state-card,.gts-toolbar,.reports-toolbar,.perfume-catalog-toolbar {
  background: var(--bg-card) !important; border-color: var(--border-subtle) !important;
  border-radius: 8px !important; box-shadow: none !important; padding: 16px !important;
}
.pos-panel-header,.gts-panel-head,.perfume-drawer-header,.duplicate-audit-header {
  background: var(--bg-card) !important; border-color: var(--border-subtle) !important;
}
.pos-panel-body,.receipt-modal-body,.page-pos .main-content { background: var(--bg-primary) !important; }
.pos-stat,.pos-payment-detail,.pos-balance-card,.summary-panel,.cash-expected-box,
.cash-history-metric,.cash-detail-panel,.cash-detail-grid div,.sale-detail-box,
.perfume-mobile-stat,.perfume-form-section,.duplicate-summary-card,.edit-diff-panel {
  background: var(--bg-subtle) !important; border: 1px solid var(--border-subtle) !important;
  border-radius: 6px !important; box-shadow: none !important;
}
.pos-search,.pos-segment,.pos-qty-control,.pos-discount-input,.pos-discount-type,.pos-size-select,.gts-status-tabs {
  background: var(--bg-input) !important; border-color: var(--border-subtle) !important; border-radius: 6px !important; box-shadow: none !important;
}
.pos-product-card:hover { border-color: #1565c0 !important; transform: none !important; }
.pos-payment-grid .btn { background: var(--bg-card) !important; color: var(--text-secondary) !important; border: 1px solid var(--border-subtle) !important; box-shadow: none !important; }
.pos-segment .nav-link.active,.pos-payment-grid .btn-check:checked + .btn,.gts-tab.active,.pay-btn {
  color: #fff !important; background: #1565c0 !important; border-color: #1565c0 !important; box-shadow: none !important;
}
.pos-product-icon,.pos-order-empty i,.pos-closed-icon,.perfume-drawer-icon,.duplicate-audit-icon {
  background: var(--c-blue-soft) !important; color: var(--accent-gold) !important; border-radius: 6px !important; box-shadow: none !important;
}
.pos-count-pill,.pos-cart-kind,.payment-pill,.cash-pill,.cash-edited-badge,.perfume-chip,.perfume-brand-pill,.pos-line-discount {
  background: var(--c-blue-soft) !important; color: var(--accent-gold) !important; border: 0 !important; border-radius: 4px !important;
}
.cash-kpi strong,.sales-kpi strong,.gts-kpi strong,.perfume-kpi-value,.report-kpi strong { color: var(--text-primary) !important; font-family: var(--font-sans) !important; font-variant-numeric: tabular-nums; letter-spacing: 0 !important; overflow-wrap: anywhere; }
.pos-balance-card strong,.summary-total strong { color: var(--accent-gold) !important; }
.perfume-drawer { background: var(--bg-card) !important; }
.pos-payment-grid .btn,.qty-btn,.pos-icon-btn,.sale-expand-btn,.cash-expand-btn,.gts-icon-action { border-radius: 6px !important; }
.cash-kpi-grid,.sales-kpi-grid,.perfume-kpi-grid,.reports-kpi-grid,.gts-kpis { gap: 16px !important; }
.receipt-preview-shell { background: var(--bg-elevated) !important; border-color: var(--border-subtle) !important; box-shadow: none !important; }
.auth-page { background: var(--bg-primary) !important; }
.login-shell { border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: var(--shadow-lg); }
.login-card { background: var(--bg-card); padding: 40px; }
.login-visual { background: linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.7)), url('../img/login-perfume-bg.jpg') center/cover; }
.login-kicker,.login-card-header h2 { color: var(--accent-gold); }
.login-card .form-control,.login-card .form-select { background: var(--bg-input); border-color: var(--border-subtle); color: var(--text-primary); }
.login-card .form-control:focus,.login-card .form-select:focus { background: var(--bg-input); border-color: #1565c0; box-shadow: 0 0 0 3px rgba(21,101,192,.12); }
.login-card-header .h1 { color: var(--text-primary); }
.login-feature-icon { background: rgba(255,255,255,.16); color: #fff; border-radius: 6px; }
.login-feature-card { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); border-radius: 8px; }
.login-trustbar { border-color: var(--border-subtle); }

/* Semantic accents share their meaning across the dashboard and work areas. */
.dashboard-metrics .kpi-card { --metric-color: var(--c-blue); --metric-soft: var(--c-blue-soft); }
.dashboard-metrics .metric-tone-green { --metric-color: var(--c-green); --metric-soft: var(--c-green-soft); }
.dashboard-metrics .metric-tone-teal { --metric-color: var(--c-teal); --metric-soft: var(--c-teal-soft); }
.dashboard-metrics .metric-tone-amber,
.dashboard-metrics .sms-status-card.is-warning { --metric-color: var(--c-amber); --metric-soft: var(--c-amber-soft); }
.dashboard-metrics .metric-tone-violet { --metric-color: var(--c-purple); --metric-soft: var(--c-purple-soft); }
.dashboard-metrics .sms-status-card.is-ok { --metric-color: var(--c-cyan); --metric-soft: var(--c-cyan-soft); }
.dashboard-metrics .sms-status-card.is-error { --metric-color: var(--c-rose); --metric-soft: var(--c-rose-soft); }
.dashboard-metrics .kpi-card::before {
  display: block; content: ""; position: absolute;
  inset: 20px auto auto 0; width: 3px; height: 28px;
  border-radius: 0 3px 3px 0; background: var(--metric-color);
}
.dashboard-metrics .metric-icon { color: var(--metric-color); background: var(--metric-soft); }
.dashboard-metrics .card { transition: border-color 160ms ease, box-shadow 160ms ease; }
.dashboard-metrics .card:hover { border-color: var(--metric-color); box-shadow: var(--shadow-md); }
.dashboard-metrics .card-body > .d-flex > .text-soft { color: var(--text-secondary) !important; font-weight: 600; }
.page-heading h1 { font-weight: 750; }
.page-heading .gold-text { color: var(--accent-gold); }
.sidebar-header { border-top: 3px solid #1565c0; }
.sidebar .nav-link.active { box-shadow: inset 3px 0 0 #1565c0; }
.sidebar .nav-link[href*="modules/pos/"] i,
.sidebar .nav-link[href*="modules/cash/"] i,
.sidebar .nav-link[href*="modules/sales/"] i { color: var(--c-green); }
.sidebar .nav-link[href*="modules/perfumes/"] i,
.sidebar .nav-link[href*="modules/attar/"] i,
.sidebar .nav-link[href*="modules/empty-bottles/"] i,
.sidebar .nav-link[href*="modules/decant/"] i { color: var(--c-teal); }
.sidebar .nav-link.active i { color: var(--accent-gold); }
.sidebar-footer .sign-out:hover { color: var(--danger); background: var(--c-rose-soft); }
.sidebar-footer .sign-out:hover i { color: var(--danger); }
.btn-primary,.btn-gold { box-shadow: 0 2px 4px rgba(21,101,192,.16); }
.btn-primary:not(:disabled):hover,.btn-gold:not(:disabled):hover { box-shadow: 0 3px 8px rgba(21,101,192,.22); }
.btn-primary:not(:disabled):active,.btn-gold:not(:disabled):active { background: #104b8e; box-shadow: inset 0 1px 3px rgba(0,0,0,.16); }
.btn-success { background: #15805b; border-color: #15805b; color: #fff; }
.btn-success:hover { background: #106548; border-color: #106548; }
.btn-danger-soft:hover { background: var(--danger); border-color: var(--danger); color: var(--bg-card); }
.btn:disabled,.btn.disabled { box-shadow: none; opacity: .5; }
.form-control:not(:disabled):not(:focus):hover,.form-select:not(:disabled):not(:focus):hover { border-color: var(--text-muted); }
.form-control:disabled,.form-select:disabled { background: var(--bg-elevated); color: var(--text-muted); }
.input-group:focus-within .input-group-text { color: var(--accent-gold); border-color: #1565c0; background: var(--c-blue-soft); }
.table { --bs-table-hover-bg: var(--c-blue-soft); }
.table tbody tr:hover { background: var(--c-blue-soft); }
.table thead th { color: var(--text-secondary); border-top: 1px solid var(--hairline); }
.table tbody tr:last-child td { border-bottom-width: 0; }
.nav-tabs .nav-link.active { box-shadow: inset 0 -2px 0 #1565c0; font-weight: 650; }
.alert-success { color: var(--success); background: var(--c-green-soft); border-color: var(--c-green); }
.alert-warning { color: var(--warning); background: var(--c-amber-soft); border-color: var(--c-amber); }
.alert-danger { color: var(--danger); background: var(--c-rose-soft); border-color: var(--c-rose); }
.alert-info { color: var(--c-blue); background: var(--c-blue-soft); border-color: var(--c-blue); }
.alert { border-width: 0 0 0 3px; border-radius: 6px; }
.status-in,.badge-confirmed,.status-low,.badge-draft,.status-out { display: inline-flex; align-items: center; gap: 5px; }
.status-in::before,.badge-confirmed::before,.status-low::before,.badge-draft::before,.status-out::before { content: ""; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: currentColor; }
.cash-pill.closed,.gts-status.sold,.gts-status.completed { color: var(--success) !important; background: var(--c-green-soft) !important; }
.gts-status.pending,.gts-status.partial { color: var(--warning) !important; background: var(--c-amber-soft) !important; }
.gts-status.returned { color: var(--c-blue) !important; background: var(--c-blue-soft) !important; }
.cash-movement-type.cash_in,.cash-movement-type.cash_in_puff { color: var(--success) !important; background: var(--c-green-soft) !important; }
.cash-movement-type.cash_out { color: var(--danger) !important; background: var(--c-rose-soft) !important; }
.pos-balance-card,.summary-panel { border-left: 3px solid #1565c0 !important; }
.pos-payment-grid .btn-check:checked + .btn { box-shadow: 0 0 0 2px var(--bg-card),0 0 0 3px #1565c0 !important; }
.pos-panel-header,.gts-panel-head,.perfume-catalog-toolbar { border-bottom-color: var(--border-subtle) !important; }
.reports-figure-icon,.report-kpi-icon { background: var(--c-blue-soft) !important; color: var(--c-blue) !important; border-radius: 6px; }
.gts-progress-sold { background: var(--c-green) !important; }
.gts-progress-returned { background: var(--c-blue) !important; }
.gts-progress-pending { background: var(--c-amber) !important; }

@media(min-width:992px) {
  body.sidebar-collapsed:not(.sidebar-hover-open) .sidebar-header { padding: 16px 8px !important; gap: 12px; }
  body.sidebar-collapsed:not(.sidebar-hover-open) #desktopSidebarToggle { margin: 0 auto; }
  body.sidebar-collapsed:not(.sidebar-hover-open) .sidebar .nav-link { justify-content: center; padding: 8px; }
  body.sidebar-collapsed.sidebar-hover-open .sidebar-header { padding: 16px !important; }
}
@media(max-width:1199px) { .dashboard-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } .main-content { padding: 24px; } }
@media(max-width:991px) {
  .sidebar,[data-bs-theme] .sidebar { width: min(288px,88vw); z-index: 1050; }
  .mobile-header { display: flex !important; background: var(--bg-card); border-color: var(--border-subtle) !important; box-shadow: none; min-height: 64px; padding: 10px 16px !important; }
  body.app-page { --mobile-header-height: 64px; }
  .mobile-header .theme-toggle-btn,.mobile-header #mobileSidebarToggle,#mobileSidebarClose { width: 40px; height: 40px; min-height: 40px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--bg-card); color: var(--text-secondary); box-shadow: none; }
  .main-content { margin-left: 0; width: 100%; max-width: 100%; padding: 20px; }
  .sidebar-overlay { background: rgba(20,25,33,.4); backdrop-filter: none; }
  .sidebar .brand-mark,body.sidebar-collapsed .sidebar .brand-mark { padding: 0; }
}
@media(max-width:575px) {
  .main-content { padding: 18px 12px 28px; }
  .page-heading { gap: 12px; padding-bottom: 16px; margin-bottom: 18px; }
  .page-heading h1 { font-size: 23px; }
  .dashboard-metrics { gap: 10px; }
  .dashboard-metrics .card-body { padding: 14px 12px; min-height: 150px; }
  .dashboard-metrics .card-body > .d-flex { align-items: flex-start !important; flex-direction: row; flex-wrap: nowrap !important; gap: 5px; }
  .dashboard-metrics .kpi-value { font-size: 19px; }
  .dashboard-metrics .metric-icon { width: 24px; height: 24px; flex-basis: 24px; font-size: 12px; }
  .app-page .card-body { padding: 16px; }
  .dashboard-metrics .card-body { padding: 14px 12px; }
  .btn { min-height: 40px; }
  .form-control,.form-select { font-size: 16px; }
  .page-dashboard .col-xl-5 .table { min-width: 0; }
  .login-card { padding: 24px; }
}
@media(max-width:359px) { .dashboard-metrics { grid-template-columns: minmax(0,1fr); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }