/* Login-reference color theme. Shape and layout remain owned by the existing components. */
:root {
  --brand-dark: #2A332E;
  --brand-primary: #DF7342;
  --brand-primary-hover: #C96236;
  --brand-primary-active: #B9552F;
  --brand-primary-soft: #FFF4EF;
  --brand-primary-light: #FCE4D8;
  --brand-primary-border: #F1B99E;
  --bg-page: #FBFBFC;
  --bg-surface: #FFFFFF;
  --bg-soft: #F7F8F7;
  --text-primary: #1F2937;
  --text-secondary: #667085;
  --text-muted: #98A2B3;
  --border: #E4E7EC;
  --border-soft: #EEF0F2;

  --primary-color: var(--brand-primary);
  --primary-hover: var(--brand-primary-hover);
  --primary-soft: var(--brand-primary-soft);
  --primary-light: var(--brand-primary-light);
  --primary-border: var(--brand-primary-border);
  --secondary-color: var(--brand-dark);
  --accent-color: var(--brand-primary);
  --text-main: var(--text-primary);
  --bg-main: var(--bg-surface);
  --border-color: var(--border);

  --masta-primary: var(--brand-primary);
  --masta-primary-dark: var(--brand-primary-hover);
  --masta-primary-light: var(--brand-primary-soft);
  --masta-primary-soft: var(--brand-primary-light);
  --masta-bg: var(--bg-page);
  --masta-bg-soft: var(--bg-soft);
  --masta-card: var(--bg-surface);
  --masta-card-soft: var(--bg-soft);
  --masta-text: var(--text-primary);
  --masta-text-sub: var(--text-secondary);
  --masta-text-muted: var(--text-muted);
  --masta-border: var(--border);
  --masta-border-soft: var(--border-soft);
  --masta-gold: #F59E0B;
  --masta-gold-dark: #B54708;
  --masta-gold-light: #FFFAEB;
  --masta-info: #3676C8;
  --masta-shadow-brand: 0 10px 24px rgba(42, 51, 46, .10);

  --bg: var(--bg-page);
  --panel: var(--bg-surface);
  --line: var(--border);
  --line2: var(--border-soft);
  --text: var(--text-primary);
  --sub: var(--text-secondary);
  --muted: var(--text-muted);
  --blue: var(--brand-primary);
  --blue2: var(--brand-primary-hover);
  --blue3: var(--brand-primary);
  --blueSoft: var(--brand-primary-soft);
  --softBlue: var(--brand-primary-soft);
  --ui-bg: var(--bg-page);
  --ui-surface: var(--bg-surface);
  --ui-surface-soft: var(--bg-soft);
  --ui-line: var(--border);
  --ui-line-strong: #D0D5DD;
  --ui-text: var(--text-primary);
  --ui-text-sub: var(--text-secondary);
  --ui-text-muted: var(--text-muted);
  --ui-blue: var(--brand-primary);
  --ui-blue-soft: var(--brand-primary-soft);
}

::selection { background:#FCE4D8; color:var(--text-primary); }
html { scrollbar-color:#98A2B3 #F2F4F3; }
body, .layout, .content, #content, #app-content { background-color:var(--bg-page) !important; color:var(--text-primary) !important; }
.topbar, .header, .app-header, #app-header {
  background-color:#fff !important;
  color:var(--text-primary) !important;
  border-bottom-color:var(--border) !important;
  box-shadow:0 1px 8px rgba(15,23,42,.04) !important;
}
#app-header .logo-mark, .topbar .logo-mark, .mobile-sidebar-logo { background-color:var(--brand-primary) !important; color:#fff !important; box-shadow:none !important; }
.system-name, .brand-title, .logo-text, .app-title { color:var(--text-primary) !important; }
.user-values, .brand-meta, .topbar-meta, .now { color:var(--text-secondary) !important; border-left-color:var(--border) !important; }

/* Restore the pre-theme modern sidebar geometry; only its palette changes here. */
.main-nav, .sidebar, .side-nav, .app-sidebar {
  background-color:var(--brand-dark) !important;
  border-right-color:#3B4540 !important;
  box-shadow:none !important;
}
.sidebar-main-menu, .sidebar-admin-menu, .sidebar-menu, .nav-menu { gap:6px !important; padding:10px 8px !important; }
.sidebar-admin-menu { border-top-color:rgba(255,255,255,.12) !important; }
.nav-main, .sidebar-link, .nav-link, .menu-link, .sidebar-menu-item {
  min-height:66px !important;
  padding:8px 6px !important;
  border:0 !important;
  border-radius:14px !important;
  background-color:transparent !important;
  color:#D0D5DD !important;
}
.nav-main .ico, .nav-main .menu-icon, .sidebar-link .menu-icon, .sidebar-menu-item .menu-icon {
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:11px !important;
  background-color:rgba(255,255,255,.08) !important;
  color:#EAECF0 !important;
}
.nav-main:hover, .sidebar-link:hover, .sidebar-menu-item:hover {
  background-color:#36403B !important;
  color:#fff !important;
}
.nav-main.active, .sidebar-link.active, .sidebar-menu-item.active {
  background-color:#3A443F !important;
  color:var(--brand-primary) !important;
}
.nav-main.active .ico, .nav-main.active .menu-icon, .sidebar-link.active .menu-icon, .sidebar-menu-item.active .menu-icon {
  background-color:rgba(223,115,66,.18) !important;
  color:var(--brand-primary) !important;
}
.sub-nav, .sub-nav.open {
  background-color:#fff !important;
  border-right-color:var(--border-soft) !important;
  box-shadow:4px 0 18px rgba(15,23,42,.035) !important;
}
.sub-head { background-color:#F7F8F7 !important; border-bottom-color:var(--border-soft) !important; }
.sub-item {
  height:38px !important;
  padding:0 10px !important;
  border:0 !important;
  border-radius:10px !important;
  background-color:transparent !important;
  color:var(--text-secondary) !important;
}
.sub-item:hover { background-color:#F7F8F7 !important; color:var(--text-primary) !important; }
.sub-item.active { background-color:var(--brand-primary-soft) !important; color:var(--brand-primary-hover) !important; }

.card, .panel, .section-card, .search-card, .table-card, .form-card, .filter-card,
.report-chart-card, .report-section, .summary-card, .kpi, .dashboard-card,
.masta-modal, .modal, .image-modal, .popup-menu, .combo-menu, .floating-dropdown,
.masta-product-picker-dropdown, .product-tag-panel {
  background-color:#fff !important;
  border-color:var(--border-soft) !important;
  box-shadow:0 4px 14px rgba(15,23,42,.05) !important;
}
.panel-head, .masta-modal-header, .masta-modal-footer, .modal-h, .modal-f, .image-modal-head, .popup-head {
  background-color:#fff !important;
  border-color:var(--border-soft) !important;
}
.panel-head h2::before, .section-title::before { background-color:var(--brand-primary) !important; }
.kpi, .dashboard-kpi-card, .analytics-kpi, .inventory-summary-card { background-color:#fff !important; }
.kpi.pastel-blue, .kpi.sales, .kpi.pastel-yellow, .kpi.work, .kpi.pastel-green, .kpi.pastel-red, .kpi.issue {
  background-color:#fff !important;
}

.data th, table.data th, .alert-table th, .inventory-table th, .inventory-mini-table th {
  background-color:#F7F8F7 !important;
  color:var(--text-primary) !important;
  border-color:var(--border) !important;
}
.data td, table.data td, .alert-table td { background-color:#fff; border-color:var(--border-soft) !important; }
.data tr:hover td, table.data tr:hover td, .table-row-clickable:hover td { background-color:#FFF7F3 !important; }
.is-selected td, tr.selected td, tr[aria-selected="true"] td { background-color:var(--brand-primary-soft) !important; }

input, select, textarea, .combo-btn, .masta-product-picker-input {
  background-color:#fff !important;
  border-color:var(--border) !important;
  color:var(--text-primary) !important;
}
input::placeholder, textarea::placeholder { color:var(--text-muted) !important; }
input:focus, select:focus, textarea:focus, .combo.open .combo-btn, .masta-product-picker.open .masta-product-picker-input {
  border-color:var(--brand-primary) !important;
  box-shadow:0 0 0 3px rgba(223,115,66,.16) !important;
}
input[disabled], select[disabled], textarea[disabled], .readonly-field, input[readonly], textarea[readonly] {
  background-color:#F2F4F3 !important;
  border-color:var(--border) !important;
  color:var(--text-secondary) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color:var(--brand-primary) !important; }
.toggle input:checked + .toggle-slider, .switch input:checked + .slider, [role="switch"][aria-checked="true"] { background-color:var(--brand-primary) !important; }

html body #content .btn.primary, html body .btn-primary, html body .masta-btn-primary, html body .pagebtn.active, html body .toggle-btn.active {
  background-color:var(--brand-primary) !important;
  border-color:var(--brand-primary) !important;
  color:#fff !important;
}
html body #content .btn.primary:hover:not(:disabled), html body .btn-primary:hover:not(:disabled), html body .masta-btn-primary:hover:not(:disabled) {
  background-color:var(--brand-primary-hover) !important;
  border-color:var(--brand-primary-hover) !important;
  color:#fff !important;
}
html body #content .btn.primary:active:not(:disabled), html body .btn-primary:active:not(:disabled), html body .masta-btn-primary:active:not(:disabled) {
  background-color:var(--brand-primary-active) !important;
  border-color:var(--brand-primary-active) !important;
}
.btn.soft, .btn-secondary, .btn-export, .masta-export-btn {
  background-color:#fff !important;
  border-color:var(--border) !important;
  color:var(--text-primary) !important;
}
.btn.soft:hover:not(:disabled), .btn-secondary:hover:not(:disabled), .btn-export:hover:not(:disabled), .masta-export-btn:hover:not(:disabled) {
  background-color:#F7F8F7 !important;
  border-color:#D0D5DD !important;
  color:var(--text-primary) !important;
}
.btn.outline, .btn-outline { background-color:#fff !important; border-color:var(--brand-primary) !important; color:var(--brand-primary) !important; }
.btn.outline:hover:not(:disabled), .btn-outline:hover:not(:disabled) { background-color:var(--brand-primary-soft) !important; }

.tabs > .tab { background-color:transparent !important; color:var(--text-secondary) !important; }
.tabs > .tab:hover { background-color:#F7F8F7 !important; color:var(--text-primary) !important; }
.tabs > .tab.active, .tabs > .tab[aria-selected="true"] {
  background-color:transparent !important;
  color:var(--text-primary) !important;
  border-bottom-color:var(--brand-primary) !important;
}
.b-blue, .badge.brand, .brand-badge { background-color:var(--brand-primary-soft) !important; color:var(--brand-primary-hover) !important; }
.form-help, .info-note, .notice, .system-guide-note, .muted-box, .upload-box, .image-upload-empty, .product-image-upload-add {
  background-color:#F7F8F7 !important;
  border-color:var(--border-soft) !important;
  color:var(--text-secondary) !important;
}
.masta-modal-backdrop, .modal-back { background-color:rgba(31,41,55,.42) !important; }
.chart .bar, .bar { background-color:var(--brand-primary) !important; }

*::-webkit-scrollbar-track { background:#F2F4F3; }
*::-webkit-scrollbar-thumb { background:#98A2B3; border-radius:999px; }
*::-webkit-scrollbar-thumb:hover { background:#667085; }

@media(max-width:900px) {
  .main-nav {
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    z-index:4000 !important;
    width:min(86vw,320px) !important;
    min-width:0 !important;
    max-width:320px !important;
    height:100dvh !important;
    transform:translateX(-105%) !important;
    transition:transform .24s ease !important;
    background-color:var(--brand-dark) !important;
    border-radius:0 20px 20px 0 !important;
  }
  html body.mobile-menu-open #mainNav.main-nav, html body.sidebar-open #mainNav.main-nav { transform:translateX(0) !important; }
  .mobile-sidebar-profile, .sidebar-mobile-footer, .sidebar-mobile-menu { background-color:var(--brand-dark) !important; border-color:rgba(255,255,255,.12) !important; }
  .mobile-sidebar-title, .mobile-sidebar-user span:last-child { color:#fff !important; }
  .mobile-sidebar-subtitle, .mobile-sidebar-user { color:#D0D5DD !important; }
  .mobile-sidebar-user { background-color:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.12) !important; }
  .mobile-sidebar-close { background-color:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.16) !important; color:#fff !important; }
  .mobile-menu-parent, .mobile-menu-direct, .nav-main {
    min-height:48px !important;
    padding:10px 12px !important;
    border-radius:14px !important;
    color:#D0D5DD !important;
  }
  .mobile-menu-parent-icon, .nav-main .ico, .nav-main .menu-icon {
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    border-radius:11px !important;
    background-color:rgba(255,255,255,.08) !important;
    color:#EAECF0 !important;
  }
  .mobile-menu-parent:hover, .mobile-menu-direct:hover, .nav-main:hover { background-color:#36403B !important; color:#fff !important; }
  .mobile-menu-group.is-open .mobile-menu-parent, .mobile-menu-direct.is-active, .nav-main.active {
    background-color:#3A443F !important;
    color:var(--brand-primary) !important;
  }
  .mobile-menu-group.is-open .mobile-menu-parent-icon, .mobile-menu-direct.is-active .mobile-menu-parent-icon,
  .nav-main.active .ico, .nav-main.active .menu-icon { background-color:rgba(223,115,66,.18) !important; color:var(--brand-primary) !important; }
  .mobile-submenu { padding:4px 0 8px 44px !important; }
  .mobile-submenu-item {
    min-height:42px !important;
    padding:10px 12px 10px 16px !important;
    border-radius:12px !important;
    color:#D0D5DD !important;
  }
  .mobile-submenu-item:hover { background-color:#36403B !important; color:#fff !important; }
  .mobile-submenu-item.is-active { background-color:rgba(223,115,66,.14) !important; color:var(--brand-primary) !important; }
}