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

/* ══════════════════════════════════════════════════════════════
   MITRA ERP Portal — Professional Light Theme
   Clean white/light-gray surfaces, blue accent, soft shadows —
   same palette family as work-order.html's --wo-* tokens, applied
   portal-wide via the shared class vocabulary below.
   Include via <link rel="stylesheet" href="/theme.css"/> in each page
   OR loaded dynamically by sidebar.js
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Core palette ── */
  --primary-bg: #f4f6f9;
  --secondary-bg: #ffffff;
  --accent-color: #2563eb;
  --accent-color2: #1d4ed8;
  --accent-glow: rgba(37, 99, 235, 0.16);
  --text-main: #0f172a;
  --text-dim: #64748b;
  --text-faint: #94a3b8;
  --glass: #ffffff;
  --glass-solid: #ffffff;
  --glass-border: #e2e8f0;
  --glass-border-strong: #cbd5e1;
  --error: #dc2626;
  --success: #16a34a;
  --warning: #d97706;
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Legacy / per-page token names ── */
  --bg: #f4f6f9;
  --dark: #f4f6f9;
  /* Several older pages (admin.html, production.html) use --ink/--ink2/--ink3
     as BACKGROUND surfaces (page bg / card+modal bg / a third tier), not as
     text-ink colors — keep these as light surfaces so those pages' own
     .modal/.comp-card/readonly-input rules (which reference var(--ink2)
     directly, not through a class this file already overrides) render
     correctly instead of picking up a stray dark/black value. */
  --ink: #f4f6f9;
  --ink2: #ffffff;
  --ink3: #f8fafc;
  --blue: #2563eb;
  --blue2: #1d4ed8;
  --blue-light: #eff6ff;
  --blue-glow: rgba(37, 99, 235, 0.12);
  --accent: #2563eb;
  --accent2: #1d4ed8;
  --accent3: #3b82f6;
  --text4: #94a3b8;
  --text-muted: #64748b;
  --text-label: #64748b;
  --danger: #dc2626;
  --amber: #d97706;
  --amber2: #b45309;
  --green: #16a34a;
  --green2: #15803d;
  --teal2: #0d9488;
  --teal3: #14b8a6;
  --red: #dc2626;
  --purple: #7c3aed;
  --teal: #0d9488;
  --gold: #d97706;
  --orange: #ea580c;
  --border: #e2e8f0;
  --border2: #cbd5e1;
  --text: #0f172a;
  --text2: #334155;
  --text3: #64748b;
  --surface: #ffffff;
  --surface2: #f8fafc;
  --surface3: #eef1f5;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* ── Global sizing ──
   Pages hardcode pixel font-sizes, so a body zoom is the most
   reliable way to scale all text/UI uniformly. Reset to 100% (normal,
   un-zoomed) — was 1.18 (18% larger). */
body {
  zoom: 1;
}

body {
  background-color: var(--primary-bg) !important;
  background-image: none !important;
  color: var(--text-main) !important;
  font-family: var(--font-main) !important;
}

body::before {
  display: none !important;
}
.bg-glow {
  display: none !important;
}

/* ── Glass utilities from source (kept as solid light surfaces now) ── */
.glass-card {
  background: var(--glass) !important;
  backdrop-filter: none !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
}
.accent-glow {
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}
.gradient-text {
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-color2) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── SIDEBAR — clean light ───────────── */
.sb {
  background: #ffffff !important;
  border-right: 1px solid var(--glass-border) !important;
  box-shadow: 1px 0 0 rgba(15, 23, 42, 0.03) !important;
}
.sb-logo {
  padding: 18px 16px 16px !important;
  border-bottom: 1px solid var(--glass-border) !important;
}
.sb-logo-mark {
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
  border-radius: 9px !important;
  letter-spacing: .3px !important;
}
.sb-logo-text {
  color: #0f172a !important;
  letter-spacing: .3px !important;
}
.sb-logo-text small {
  color: #94a3b8 !important;
}

.sb-links { padding: 10px 10px !important; }
.sb-link {
  color: #64748b !important;
  border-radius: 9px !important;
  font-weight: 500 !important;
  position: relative !important;
  margin: 2px 0 !important;
}
.sb-link:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}
.sb-link.active {
  color: #1d4ed8 !important;
  background: #eff6ff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
/* Active left indicator bar */
.sb-link.active::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 58%;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #60a5fa, #2563eb) !important;
  box-shadow: none !important;
}
.sb-link svg { color: #94a3b8 !important; }
.sb-link:hover svg { color: #334155 !important; }
.sb-link.active svg { color: #2563eb !important; }

.sb-divider { background: var(--glass-border) !important; }

.sb-group {
  color: #94a3b8 !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
  margin-top: 12px !important;
}
.sb-group:hover {
  color: #334155 !important;
  background: #f8fafc !important;
}
.sb-group.open { color: #1e293b !important; }
.sb-group svg { color: #94a3b8 !important; opacity: 1 !important; }
.sb-chev { color: #cbd5e1 !important; }
.sb-group.open .sb-chev { color: #2563eb !important; }
.sb-sub svg { color: #cbd5e1 !important; }
.sb-sub.active svg { color: #2563eb !important; }

.sb-bottom { border-top: 1px solid var(--glass-border) !important; }
.sb-user {
  background: #f8fafc !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
}
.sb-user:hover {
  background: #eff6ff !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
}
.sb-avatar {
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
  border-radius: 9px !important;
}
.sb-role { color: #94a3b8 !important; }
.sb-name { color: #1e293b !important; }
.sb-logout {
  color: #dc2626 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 9px !important;
}
.sb-logout:hover {
  color: #b91c1c !important;
  background: rgba(220, 38, 38, 0.08) !important;
  border-color: transparent !important;
}
.sb-toggle-btn { color: #94a3b8 !important; }
.sb-toggle-btn:hover { color: #1e293b !important; background: #f1f5f9 !important; }

/* ── MOBILE BOTTOM BAR ─────────────────────── */
.mob-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(8px) !important;
  border-top: 1px solid var(--glass-border) !important;
  box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06) !important;
}
.mob-bar a {
  color: var(--text-dim) !important;
}
.mob-bar a.active {
  color: var(--accent-color) !important;
  background: var(--blue-light) !important;
}
.mob-bar .mb-more {
  color: var(--text-dim) !important;
}

/* ── CARDS ──────────────────────────────────── */
.card, .win {
  background: var(--glass) !important;
  backdrop-filter: none !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--shadow) !important;
}
.card:hover, .win:hover {
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.10) !important;
}
.card-hd, .win-bar {
  background: var(--surface2) !important;
  border-bottom-color: var(--glass-border) !important;
  color: var(--text-main) !important;
}

/* ── FORM FIELDS ───────────────────────────── */
.fi, .f-inp, .form-input, .t-inp, .comp-inp, .line-inp, .batch-inp {
  background: #ffffff !important;
  border-color: var(--glass-border) !important;
  color: var(--text-main) !important;
}
.fi:focus, .f-inp:focus, .form-input:focus, .comp-inp:focus, .line-inp:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}
.fi::placeholder, .f-inp::placeholder, .form-input::placeholder {
  color: var(--text-faint) !important;
}
select.fi, .f-sel, .form-select, .t-sel {
  background-color: #ffffff !important;
  border-color: var(--glass-border) !important;
  color: var(--text-main) !important;
}
select.fi option, .f-sel option, .form-select option, .t-sel option {
  background: #ffffff !important;
  color: var(--text-main) !important;
}

/* ── LABELS ────────────────────────────────── */
.fl, .f-lbl, .form-label, .comp-fl, .line-fl {
  color: var(--text-dim) !important;
}

/* ── BUTTONS ───────────────────────────────── */
.b-primary, .b-planned, .b-save {
  background: var(--accent-color) !important;
  color: #fff !important;
  box-shadow: var(--shadow) !important;
}
.b-primary:hover:not(:disabled), .b-planned:hover:not(:disabled), .b-save:hover:not(:disabled) {
  background: var(--accent-color2) !important;
}
.b-cancel {
  background: #ffffff !important;
  border-color: var(--glass-border) !important;
  color: var(--text2) !important;
}
.b-cancel:hover {
  background: var(--surface2) !important;
  color: var(--text-main) !important;
}
.b-add, .b-new {
  background: var(--blue-light) !important;
  color: var(--accent-color2) !important;
  border-color: #bfdbfe !important;
}
.b-add:hover, .b-new:hover {
  background: #dbeafe !important;
}
.b-del {
  background: rgba(220, 38, 38, 0.06) !important;
  color: var(--error) !important;
  border-color: rgba(220, 38, 38, 0.25) !important;
}
.b-issue, .b-release {
  background: var(--accent-color) !important;
  box-shadow: var(--shadow) !important;
}
.b-issue:hover:not(:disabled), .b-release:hover:not(:disabled) {
  background: var(--accent-color2) !important;
}
.b-close {
  background: var(--warning) !important;
}

/* ── TABS ──────────────────────────────────── */
.tabs, .module-tabs {
  background: var(--surface3) !important;
}
.tab, .module-tab {
  color: var(--text-dim) !important;
}
.tab.on, .module-tab.on {
  background: #ffffff !important;
  color: var(--accent-color) !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--shadow) !important;
}
.tab-btn.on {
  color: var(--accent-color) !important;
  border-bottom-color: var(--accent-color) !important;
}

/* ── COMPONENT CARDS ───────────────────────── */
.comp-card, .line-card, .po-card, .blist-card, .req-card {
  background: #ffffff !important;
  border-color: var(--glass-border) !important;
}
.comp-card:hover, .po-card:hover, .blist-card:hover, .req-card:hover {
  border-color: var(--accent-color) !important;
  box-shadow: 0 4px 14px var(--accent-glow) !important;
}
.comp-item, .po-code, .blist-id {
  color: var(--accent-color2) !important;
}
.comp-fv {
  color: var(--text2) !important;
}

/* ── ALERTS ────────────────────────────────── */
.alert, .al-info, .al-teal, .al-purple {
  background: var(--blue-light) !important;
  border-color: #bfdbfe !important;
  color: var(--accent-color2) !important;
}
.al-green {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #15803d !important;
}
.al-amber, .al-gold {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
}
.al-red {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #b91c1c !important;
}

/* ── BADGES / PILLS ────────────────────────── */
.status-badge, .po-badge, .comp-type, .rc-type-badge {
  font-weight: 700 !important;
}
.po-badge.released {
  background: var(--blue-light) !important;
  color: var(--accent-color2) !important;
  border-color: #bfdbfe !important;
}
.po-badge.planned {
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}
.po-badge.closed {
  background: #f0fdf4 !important;
  color: #15803d !important;
  border-color: #bbf7d0 !important;
}

/* ── STATS / PILLS ─────────────────────────── */
.stat-pill {
  background: var(--surface2) !important;
  border-color: var(--glass-border) !important;
  color: var(--text-main) !important;
}

/* ── TABLE ──────────────────────────────────── */
.bom-tbl th, .p-tbl th, .sr-tbl th, .comp-table th {
  background: var(--surface3) !important;
  color: var(--text-dim) !important;
  border-color: var(--glass-border) !important;
}
.bom-tbl td, .p-tbl td {
  background: transparent !important;
  color: var(--text2) !important;
  border-color: var(--glass-border) !important;
}
.bom-tbl tbody tr:nth-child(even) td, .p-tbl tbody tr:nth-child(even) td {
  background: var(--surface2) !important;
}
.bom-tbl tbody tr:hover td, .p-tbl tbody tr:hover td {
  background: var(--blue-light) !important;
}

/* ── SEARCH DROPDOWN ───────────────────────── */
.search-dd, .item-dd {
  background: var(--glass-solid) !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.16) !important;
  z-index: 500 !important;
}
.card, .card-bd, .win {
  overflow: visible !important;
}
.sd-row, .dd-row {
  border-bottom-color: var(--glass-border) !important;
  color: var(--text2) !important;
}
.sd-row:hover, .dd-row:hover {
  background: var(--blue-light) !important;
}
.sd-code, .dd-code {
  color: var(--accent-color2) !important;
}

/* ── TOAST ──────────────────────────────────── */
.t-ok {
  background: var(--success) !important;
}
.t-err {
  background: var(--error) !important;
}

/* ── MODAL ─────────────────────────────────── */
.modal, .modal-overlay .modal {
  background: var(--glass-solid) !important;
  border-color: var(--glass-border) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25) !important;
}
.modal-hd, .modal-header {
  background: var(--surface2) !important;
  border-bottom-color: var(--glass-border) !important;
  color: var(--text-main) !important;
}
.modal-bd, .modal-body {
  background: transparent !important;
}
.modal-footer {
  background: var(--surface2) !important;
  border-top-color: var(--glass-border) !important;
}

/* ── TOTALS ────────────────────────────────── */
.total-row, .tot-strip {
  background: var(--surface3) !important;
}
.total-row .tv {
  color: var(--teal) !important;
}

/* ── PIPELINE ──────────────────────────────── */
.pipeline-header {
  background: var(--surface2) !important;
  border-color: var(--glass-border) !important;
}

/* ── BATCH SECTION ─────────────────────────── */
.batch-sec {
  background: var(--surface2) !important;
  border-color: var(--glass-border) !important;
}

/* ── ORDER INFO ────────────────────────────── */
.order-info, .oi-item {
  color: var(--text2) !important;
}
.oi-l {
  color: var(--text-dim) !important;
}

/* ── SUCCESS BOX ───────────────────────────── */
.suc-box, .success-page {
  background: var(--glass) !important;
}
.suc-title {
  color: #15803d !important;
}
.suc-pill {
  background: var(--blue-light) !important;
  color: var(--accent-color2) !important;
  border-color: #bfdbfe !important;
}

/* ── SKELETON ──────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #eef1f5 25%, #f8fafc 50%, #eef1f5 75%) !important;
}

/* ── EMPTY MESSAGE ─────────────────────────── */
.empty-msg, .bom-msg, .po-empty {
  color: var(--text-dim) !important;
}

/* ── FILTER TABS ───────────────────────────── */
.filter-tab {
  border-color: var(--glass-border) !important;
  color: var(--text-dim) !important;
  background: #ffffff !important;
}
.filter-tab.on, .filter-tab:hover {
  border-color: var(--accent-color) !important;
  color: var(--accent-color2) !important;
  background: var(--blue-light) !important;
}

/* ── DT ROWS (detail) ──────────────────────── */
.dt-row {
  border-bottom-color: var(--glass-border) !important;
}
.dt-row .dt-l {
  color: var(--text-dim) !important;
}
.dt-row .dt-v {
  color: var(--text2) !important;
}

/* ═══════════════════════════════════════════
   LOGIN PAGE + HOME DASHBOARD
   ═══════════════════════════════════════════ */
.login-card {
  background: var(--glass) !important;
  backdrop-filter: none !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--shadow) !important;
}
.login-h {
  color: var(--text-main) !important;
}
.login-sub {
  color: var(--text-dim) !important;
}
.login-logo-box, .login-logo-mark {
  background: var(--accent-color) !important;
  box-shadow: 0 4px 14px var(--accent-glow) !important;
}
.login-logo-text {
  color: var(--text-main) !important;
}
.field-label {
  color: var(--text-dim) !important;
}
.field-input {
  background: #ffffff !important;
  border-color: var(--glass-border) !important;
  color: var(--text-main) !important;
}
.field-input:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}
.field-input::placeholder {
  color: var(--text-faint) !important;
}
.btn-primary {
  background: var(--accent-color) !important;
  border: none !important;
  box-shadow: var(--shadow) !important;
}
.btn-primary:hover {
  background: var(--accent-color2) !important;
}
.err-box {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #b91c1c !important;
}

/* Dashboard cards */
.dash-card, .quick-card {
  background: var(--glass) !important;
  backdrop-filter: none !important;
  border-color: var(--glass-border) !important;
}
.dash-card:hover, .quick-card:hover {
  border-color: var(--accent-color) !important;
  box-shadow: 0 4px 16px var(--accent-glow) !important;
}
.stat-box {
  background: var(--glass) !important;
  border-color: var(--glass-border) !important;
}
.page-title {
  color: var(--text-main) !important;
}
.page-sub {
  color: var(--text-dim) !important;
}

/* Stat cards on dashboard */
.stat-card {
  background: var(--glass) !important;
  backdrop-filter: none !important;
  border-color: var(--glass-border) !important;
}
.stat-val {
  color: var(--text-main) !important;
}
.stat-label {
  color: var(--text-dim) !important;
}
.stats-grid {
  gap: 12px !important;
}

/* Info pill on dashboard */
.info-pill, .pipeline-info {
  background: var(--surface2) !important;
  border-color: var(--glass-border) !important;
  color: var(--text-dim) !important;
}

/* Action cards / Quick links on dashboard */
.actions-grid > div, [class*="action"] {
  background: var(--glass) !important;
  border-color: var(--glass-border) !important;
}

/* Old top nav — fully replaced by the sidebar (sidebar.js removes the element
   on load). Hidden here so it never flashes during page load: every page that
   loads theme.css also loads sidebar.js, so no page still needs it. The
   sidebar itself is a div.sb, not <nav>, so this cannot hide the sidebar. */
nav {
  display: none !important;
}

/* Role badges */
.badge {
  border-radius: 6px !important;
}
.badge-blue {
  background: var(--blue-light) !important;
  color: var(--accent-color2) !important;
  border-color: #bfdbfe !important;
}
.badge-amber {
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}
.badge-green {
  background: #f0fdf4 !important;
  color: #15803d !important;
  border-color: #bbf7d0 !important;
}

/* ── Generic text/heading fallbacks ── */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-main) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--primary-bg);
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

/* ═══════════════════════════════════════════
   FULL-WIDTH LAYOUT
   Pages hardcode their own `main{max-width:...}` to center content in a
   narrow column — override so every page's main content area fills the
   full available width next to the sidebar instead. Card-grid lists
   (.wo-grid, .po-grid, .req-grid, etc.) already use auto-fill columns, so
   the extra width just means more tiles per row, not awkward stretching.
   ═══════════════════════════════════════════ */
main {
  max-width: none !important;
  width: 100% !important;
}

/* ═══════════════════════════════════════════
   MODERN ROUNDED CORNERS
   ═══════════════════════════════════════════ */
.card, .win, .req-card, .po-card, .blist-card, .comp-card, .line-card {
  border-radius: 12px !important;
}
.card-hd, .win-bar {
  border-radius: 12px 12px 0 0 !important;
}
.btn {
  border-radius: 10px !important;
}
.fi, .f-inp, .form-input, .form-select, .f-sel {
  border-radius: 8px !important;
}
.tab, .filter-tab, .status-badge, .po-badge, .comp-type, .rc-type-badge {
  border-radius: 8px !important;
}
.tabs {
  border-radius: 12px !important;
}
.modal {
  border-radius: 16px !important;
  overflow: hidden !important;
}
.alert {
  border-radius: 10px !important;
}
.search-dd, .item-dd {
  border-radius: 10px !important;
}
.toast {
  border-radius: 10px !important;
}
.batch-sec {
  border-radius: 10px !important;
}
.suc-pill {
  border-radius: 10px !important;
}

/* ═══════════════════════════════════════════
   GENERIC LIGHT BASE
   For bespoke pages that hardcode their own class vocabulary and no
   shared CSS variables — e.g. gstr1/gstr2, reports, salary, costing-*,
   general-ledger, business-master, itc04, project-approvals/form,
   balance-sheet, cash-flow, cost-sheet, register. These rules catch
   structural elements and the recurring container classes so those
   pages render the same light theme too.
   ═══════════════════════════════════════════ */

/* ── Tables (generic) ── */
table {
  background: transparent !important;
  color: var(--text2) !important;
}
th, thead th {
  background: var(--surface3) !important;
  color: var(--text-dim) !important;
  border-color: var(--glass-border) !important;
}
td, tbody td {
  color: var(--text2) !important;
  border-color: var(--glass-border) !important;
}
tr, tbody tr {
  border-color: var(--glass-border) !important;
}
tbody tr:nth-child(even) td {
  background: var(--surface2) !important;
}
tbody tr:hover td {
  background: var(--blue-light) !important;
}

/* ── Form controls (generic) ── */
input, select, textarea {
  background: #ffffff !important;
  border-color: var(--glass-border) !important;
  color: var(--text-main) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-faint) !important;
}
select option {
  background: #ffffff !important;
  color: var(--text-main) !important;
}

/* ── Home dashboard (index.html) ── */
.login-wrap, .dash-page {
  background: transparent !important;
}
.mc {
  background: var(--glass) !important;
  backdrop-filter: none !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text-main) !important;
}
.mc:hover {
  border-color: var(--accent-color) !important;
  box-shadow: 0 4px 16px var(--accent-glow) !important;
}
.mc-title {
  color: var(--text-main) !important;
}
.mc-desc, .mc-arrow, .sec-hdr span {
  color: var(--text-dim) !important;
}
.mc:hover .mc-arrow {
  color: var(--accent-color) !important;
}
.welcome-row, .welcome-row * {
  color: var(--text-main) !important;
}

/* ── Recurring container / surface classes → light surface ── */
.card, .card-header, .card-hd,
.modal, .modal-header, .modal-footer,
.detail-panel, .detail-header, .detail-footer,
.filter-bar, .search-bar, .sel-bar, .status-bar, .total-bar,
.summary-chips, .chip, .tabs, .report-tabs, .cfg-subtabs, .grp-tab,
.snap-item, .snap-picker, .type-card, .addr-block, .ref-box, .ack-box,
.info-note, .upload-zone, .progress-bar-wrap, .cfg-ord, .cfg-sel,
.bs-tbl, .cf-tbl, .pl-s-divider, .cs-section-hd, .part,
.step-circle, .msme-toggle, .toggle-row, .approve-panel, .attach-preview,
.ap-thumb, .acct-group-hdr {
  background: var(--glass) !important;
  border-color: var(--glass-border) !important;
  color: var(--text-main) !important;
}

/* ── Secondary/outline buttons & editable fields → light field ── */
.btn-outline, .btn-secondary, .acct-pick-btn, .add-addr-btn, .remove-row,
.cost-input, .note-inp, .edit-inp, .team-name-inp, .team-resp-ta,
.detail-edit-select, .detail-edit-input, .dept-map-select,
.snap-picker select, .cfg-sel select {
  background: #ffffff !important;
  border-color: var(--glass-border) !important;
  color: var(--text-main) !important;
}

/* ── Text labels/values on light bg ── */
.code, .num, .lbl, .sname, .cr, .part,
.cost-label, .cs-section-label, .detail-val, .type-card-title,
.team-func-cell, .acct-row, .snap-item {
  color: var(--text2) !important;
}

/* ── Save / approve buttons → blue accent ── */
.btn-success, .cfg-save-btn, .btn-tcs, .b-save, .save-btn, .b-approve, .btn-approve {
  background: var(--accent-color) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--shadow) !important;
}
.btn-success:hover, .cfg-save-btn:hover, .btn-tcs:hover,
.b-approve:hover, .btn-approve:hover, .save-btn:hover {
  background: var(--accent-color2) !important;
}
/* Grand-total rows and highlight badges → blue tint */
.bs-tbl tr.grand td, .cf-tbl tr.grand td,
.stmt-tbl tr.s-net td, .stmt-tbl tr.s-increase td, .stmt-tbl tr.s-closing td {
  background: var(--blue-light) !important;
  border-top-color: var(--accent-color) !important;
  color: var(--text-main) !important;
}
.snap-tag, .tab.active .tab-badge, .tab-badge {
  background: var(--accent-color) !important;
  color: #fff !important;
}
.sect-tab button.active, .tab.active, .tabs .active {
  color: var(--accent-color) !important;
}

/* ── Highlight labels, badges, chips → blue tint ── */
.badge-added, .badge-autofill, .amt-pos, .bb-split-total, .cat-title,
.cc-item, .cfg-add, .cfg-code-chip, .cfg-fixed, .cfg-item-title, .cfg-subtab,
.cmp, .cost-total, .cost-total-amt, .detail-toggle, .fg, .ic-green, .ic-teal,
.pl-s-title, .pl-s-total, .sel-chip, .sheet-badge, .step-date, .stmt-period,
.tag-gen, .grand-total-row, .add-form-title, .acct-chip, .role-badge.user {
  color: var(--accent-color2) !important;
}
.already-chip, .auto-tag, .can-approve-chip, .snap-tag, .step-label,
.suc-pill, .badge-added, .badge-autofill, .cfg-code-chip, .sheet-badge,
.ic-green, .ic-teal, .role-badge.user {
  background: var(--blue-light) !important;
  border-color: #bfdbfe !important;
}

/* ── Common divider / section borders ── */
.card-header, .detail-header, .filter-bar, .search-bar, .summary-chips,
.tabs, .report-tabs {
  border-bottom-color: var(--glass-border) !important;
}

/* ═══════════════════════════════════════════
   BOM MODULE — MOBILE RESPONSIVE
   ═══════════════════════════════════════════ */
@media(max-width:768px){
  .hdr-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .hdr-fields {
    padding: 10px !important;
  }
  .f-row {
    flex-wrap: wrap !important;
  }
  .f-lbl {
    min-width: 80px !important;
    font-size: 9px !important;
  }
  .f-inp, .f-sel {
    min-width: 0 !important;
    flex: 1 !important;
  }
  .tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .bom-tbl {
    min-width: 700px !important;
    font-size: 10px !important;
  }
  .bom-tbl th {
    font-size: 8px !important;
    padding: 4px 4px !important;
  }
  .bom-tbl td {
    padding: 0 2px !important;
    height: 28px !important;
  }
  .tab-row, .tab-btn {
    font-size: 10px !important;
    padding: 6px 10px !important;
  }
  .win-footer {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  .f-left {
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .f-left .btn {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 11px !important;
    padding: 8px 10px !important;
  }
  .sr-tbl {
    font-size: 10px !important;
  }
  .search-bar {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .search-bar .f-inp, .search-bar .f-sel, .search-bar .btn {
    width: 100% !important;
  }
  main {
    padding: 8px !important;
  }
  .req-grid {
    grid-template-columns: 1fr !important;
  }
  .pipeline-header {
    overflow-x: auto !important;
    padding: 10px !important;
  }
  .stats-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .stat-pill {
    font-size: 10px !important;
    padding: 4px 10px !important;
  }
  .filter-bar {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .filter-tab {
    font-size: 9px !important;
    padding: 4px 10px !important;
  }
  .mgr-grid, .form-grid, .detail-grid {
    grid-template-columns: 1fr !important;
  }
  .mgr-grid.g3 {
    grid-template-columns: 1fr !important;
  }
  .modal {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: 100vh !important;
  }
  .modal-overlay {
    padding: 0 !important;
  }
}