/* ================================================================
   ESHKOL ERP v4 - PRECISION BLUEPRINT PRO
   Glassmorphism · Dark Mode · Full Design System
   ================================================================ */

/* ─── Light Theme ───────────────────────────────────────── */
:root {
  --brand-blue:      #0057ff;
  --brand-blue-mid:  #0036b3;
  --brand-blue-light:#00a7ff;
  --brand-blue-deep: #001341;
  --brand-blue-dim:  #b9d4ff;
  --brand-blue-faint:#eef5ff;

  --brand-yellow:    #ffe600;
  --brand-yellow-mid:#ffb300;
  --brand-orange:    #ff7a00;
  --brand-orange-mid:#ff3d00;
  --brand-orange-dim:#ffd49a;
  --brand-orange-faint:#fff4e6;
  --brand-red:       #f51f0b;

  --success:   #15803d;  --success-bg: #dcfce7;  --success-border:#86efac;
  --warning:   #b45309;  --warning-bg: #fef3c7;  --warning-border:#fcd34d;
  --error:     #b91c1c;  --error-bg:   #fee2e2;  --error-border:  #fca5a5;
  --info:      #0369a1;  --info-bg:    #e0f2fe;  --info-border:   #7dd3fc;
  --purple:    #7c3aed;  --purple-bg:  #ede9fe;

  --bg:        #f2f4f8;
  --surface-0: #ffffff;
  --surface-1: #f7f8fc;
  --surface-2: #eef0f7;
  --surface-3: #e4e7f2;
  --surface-4: #d8dceb;

  --text-primary:  #0f1117;
  --text-secondary:#374151;
  --text-tertiary: #6b7280;
  --text-muted:    #52677f;
  --text-invert:   #ffffff;

  --border:      #e2e6f0;
  --border-focus:var(--brand-blue);

  /* Sidebar - dark always */
  --sidebar-bg:   #001341;
  --sidebar-text: rgba(255,255,255,0.70);
  --sidebar-dim:  rgba(255,255,255,0.28);
  --sidebar-hover:rgba(255,255,255,0.07);
  --sidebar-active:rgba(0,87,255,0.58);

  /* Glassmorphism */
  --glass-bg:     rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.5);
  --glass-shadow: 0 8px 32px rgba(15,23,58,0.12);

  /* Typography */
  --font-display:'Plus Jakarta Sans', sans-serif;
  --font-body:   'Inter', sans-serif;
  --font-mono:   'IBM Plex Mono', monospace;

  /* Radius */
  --r-xs:.25rem; --r-sm:.375rem; --r-md:.5rem;
  --r-lg:.75rem; --r-xl:1rem;   --r-2xl:1.375rem;
  --r-3xl:1.75rem; --r-full:9999px;

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(12,22,41,.06);
  --shadow-sm: 0 2px 8px rgba(12,22,41,.08), 0 0 0 1px rgba(12,22,41,.04);
  --shadow-md: 0 4px 20px rgba(12,22,41,.10), 0 0 0 1px rgba(12,22,41,.04);
  --shadow-lg: 0 8px 40px rgba(12,22,41,.14), 0 0 0 1px rgba(12,22,41,.04);
  --shadow-xl: 0 24px 64px rgba(12,22,41,.18);
  --shadow-blue:  0 6px 24px rgba(0,87,255,.22);
  --shadow-orange:0 6px 24px rgba(255,122,0,.22);
  --shadow-glow:  0 0 0 3px rgba(0,87,255,.14);

  --sidebar-w:15.5rem;
  --topbar-h: 3.75rem;
  --ease:      cubic-bezier(0.4,0,0.2,1);
  --ease-out:  cubic-bezier(0,0,0.2,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
}

/* ─── Dark Theme ────────────────────────────────────────── */
[data-theme="dark"] {
  --brand-blue-faint:#001b52;
  --brand-blue-dim:  #053b9b;
  --brand-orange-faint:#351400;
  --brand-orange-dim: #783000;

  --success-bg:#052e16; --warning-bg:#1c1300; --error-bg:#1f0000; --info-bg:#031d2d;
  --purple-bg: #150d2e;

  --bg:       #0d1117;
  --surface-0:#161b22;
  --surface-1:#1c2330;
  --surface-2:#21293a;
  --surface-3:#2d3748;
  --surface-4:#374151;

  --text-primary: #e6edf3;
  --text-secondary:#b0bec5;
  --text-tertiary: #8b98a5;
  --text-muted:    #9aa8b8;

  --border:      #30363d;
  --glass-bg:    rgba(22,27,34,0.85);
  --glass-border:rgba(255,255,255,0.08);
  --glass-shadow:0 8px 32px rgba(0,0,0,0.4);

  --shadow-xs: 0 1px 3px rgba(0,0,0,.3);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-md: 0 4px 20px rgba(0,0,0,.4),  0 0 0 1px rgba(255,255,255,.04);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.55);
}

/* ─── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{font-family:var(--font-body);background:var(--bg);color:var(--text-primary);min-height:100dvh;line-height:1.55;font-size:.9375rem;transition:background .25s var(--ease),color .25s var(--ease);}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);line-height:1.2;font-weight:700;}
a{text-decoration:none;color:inherit;}
input,select,textarea,button{font-family:inherit;}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;display:inline-block;line-height:1;vertical-align:middle;text-transform:none;white-space:nowrap;}
.material-symbols-outlined.fill{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;}

/* App launch screen */
.app-launch-screen{
  position:fixed;
  inset:0;
  z-index:20000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
  background:
    radial-gradient(circle at 16% 22%, rgba(255,122,0,.32) 0 4.5rem, transparent 13rem),
    radial-gradient(circle at 86% 18%, rgba(0,87,255,.34) 0 4rem, transparent 14rem),
    radial-gradient(circle at 70% 88%, rgba(255,61,0,.28) 0 3.25rem, transparent 12rem),
    linear-gradient(145deg,#061329 0%,#071a33 48%,#020816 100%);
  color:#fff;
  transition:opacity .42s var(--ease), visibility .42s var(--ease), transform .42s var(--ease);
}
.app-launch-screen.app-launch-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(1.015);
}
.app-launch-card{
  width:min(92vw, 28rem);
  border:1px solid rgba(255,255,255,.18);
  border-radius:1.75rem;
  padding:1.4rem;
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  box-shadow:0 34px 100px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.app-launch-logo{
  width:5.6rem;
  height:5.6rem;
  border-radius:1.35rem;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#061a58;
  box-shadow:0 20px 38px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.2);
}
.app-launch-logo img{width:100%;height:100%;object-fit:cover;}
.app-launch-copy{margin-top:1.15rem;}
.app-launch-kicker{
  margin:0 0 .35rem;
  color:#ffd27a;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.app-launch-copy h1{
  margin:0;
  color:#fff;
  font-family:var(--font-display);
  font-size:clamp(1.55rem, 8vw, 2.2rem);
  font-weight:900;
  line-height:1.05;
}
.app-launch-copy p:last-child{
  margin:.7rem 0 0;
  color:rgba(255,255,255,.78);
  font-size:.94rem;
  line-height:1.55;
}
.app-launch-progress{
  height:.46rem;
  border-radius:999px;
  overflow:hidden;
  margin:1.35rem 0 1rem;
  background:rgba(255,255,255,.16);
}
.app-launch-progress span{
  display:block;
  height:100%;
  width:42%;
  border-radius:inherit;
  background:linear-gradient(90deg,#ff7a00,#ffe600,#00a7ff);
  animation:launchProgress 1.15s ease-in-out infinite;
}
.app-launch-status{
  display:flex;
  align-items:center;
  gap:.5rem;
  color:rgba(255,255,255,.82);
  font-size:.78rem;
  font-weight:800;
}
.app-launch-status .material-symbols-outlined{font-size:1.05rem;color:#7dd3fc;}
@keyframes launchProgress{
  0%{transform:translateX(-110%);}
  55%{transform:translateX(70%);}
  100%{transform:translateX(250%);}
}

/* Live operation mode: keep screens focused on fields, records, and actions. */
.page-subtitle,
.page-header p,
.page-header > p,
.page-header h1 + p,
.page-header .flex-between h1 + p,
.production-hero-copy > p,
.empty-state > p,
.form-help,
.helper-text,
.hint-text,
[data-help-text="true"] {
  display:none !important;
}

/* Production workspace */
.production-shell{display:flex;flex-direction:column;gap:1.35rem;}
.production-hero{
  position:relative;
  overflow:hidden;
  padding:1.65rem 1.75rem;
  border-radius:1.4rem;
  border:1px solid rgba(21,99,204,.18);
  background:
    radial-gradient(circle at top right, rgba(240,112,32,.24), transparent 28%),
    radial-gradient(circle at left center, rgba(21,99,204,.22), transparent 35%),
    linear-gradient(135deg, #ffffff 0%, #f8faff 42%, #edf4ff 100%);
  box-shadow:0 18px 40px rgba(8,25,56,.10), 0 0 0 1px rgba(21,99,204,.04);
}
.production-hero::after{
  content:'';
  position:absolute;inset:auto -10% -35% auto;
  width:18rem;height:18rem;border-radius:50%;
  background:radial-gradient(circle, rgba(240,112,32,.16), transparent 68%);
  pointer-events:none;
}
.production-hero-copy{display:flex;flex-direction:column;gap:.55rem;max-width:42rem;}
.production-hero-copy > p{
  margin:0 !important;
  color:var(--text-secondary) !important;
  opacity:1 !important;
  font-size:.98rem !important;
  max-width:44rem;
}
.production-hero-kicker{
  font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand-blue);font-family:var(--font-display);
}
.production-hero-title{display:flex;align-items:center;gap:.8rem;}
.production-hero-title .material-symbols-outlined{
  width:2.8rem;height:2.8rem;display:inline-flex;align-items:center;justify-content:center;
  border-radius:1rem;background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-light));
  color:#fff;box-shadow:var(--shadow-blue);
}
.production-hero-title h1{margin:0;font-size:2rem;color:var(--text-primary);}
.production-hero-title h1::after{
  content:'';
  display:block;
  width:4.2rem;
  height:.3rem;
  margin-top:.55rem;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand-orange),var(--brand-blue));
}
.production-hero-text{margin:0;color:var(--text-secondary);max-width:44rem;font-size:.98rem;}
.production-hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;justify-content:space-between;margin-top:1rem;}
.production-hero-actions .btn{box-shadow:none;}
.production-hero-actions .btn.btn-sm{border-radius:.9rem;}
.production-hero-note{
  min-width:14rem;display:flex;flex-direction:column;gap:.15rem;
  padding:.85rem 1rem;border-radius:1rem;background:rgba(255,255,255,.76);
  border:1px solid var(--border);box-shadow:var(--shadow-xs);
}
.production-hero-note strong{font-size:1.45rem;color:var(--brand-blue);font-family:var(--font-display);}
.production-hero-note span{font-size:.82rem;color:var(--text-secondary);}
.production-hero-buttons{display:flex;flex-wrap:wrap;gap:.65rem;}
.production-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem;}
.production-phase-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.85rem;
}
.production-phase-tile{
  position:relative;
  text-align:left;
  padding:1rem 1rem 1rem 1.1rem;
  border-radius:1.1rem;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface-0),var(--surface-1));
  box-shadow:var(--shadow-xs);
  cursor:pointer;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.production-phase-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:rgba(21,99,204,.2);}
.production-phase-tile .material-symbols-outlined{
  color:var(--brand-blue);
  font-size:1.2rem;
  display:block;
  margin:.2rem 0 .45rem;
}
.production-phase-tile strong{
  display:block;
  font-size:.9rem;
  margin-bottom:.25rem;
}
.production-phase-tile p{
  margin:0;
  font-size:.78rem;
  color:var(--text-secondary);
  line-height:1.4;
}
.production-phase-tile__step{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.9rem;height:1.9rem;padding:0 .5rem;
  border-radius:.75rem;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-orange));
  color:#fff;font-weight:900;font-size:.78rem;
}
.production-stat-grid > div{
  background:linear-gradient(180deg,var(--surface-0),var(--surface-1)) !important;
  color:var(--text-primary) !important;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm) !important;
}
.production-stat-grid > div .material-symbols-outlined{opacity:1 !important;color:var(--brand-blue);}
.production-stat-grid > div:nth-child(2) .material-symbols-outlined{color:var(--brand-orange);}
.production-stat-grid > div:nth-child(3) .material-symbols-outlined,
.production-stat-grid > div:nth-child(6) .material-symbols-outlined{color:var(--success);}
.production-stat-grid > div:nth-child(4) .material-symbols-outlined{color:var(--purple);}
.production-stat-grid > div:nth-child(5) .material-symbols-outlined{color:var(--info);}
.production-stat-grid > div > div:nth-child(2){color:var(--text-primary) !important;}
.production-stat-grid > div > div:nth-child(3){color:var(--text-secondary) !important;opacity:1 !important;}
.production-stat-grid > div > div:last-child{
  border-top:1px solid var(--border) !important;
  margin-top:.9rem !important;padding-top:.9rem !important;
}
.production-stat-grid > div > div:last-child > div{color:var(--text-muted) !important;opacity:1 !important;}
.production-stat-grid .kpi-card{
  min-height:8.5rem;background:linear-gradient(180deg,var(--surface-0),var(--surface-1));
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
}
.production-stat-grid .kpi-value{letter-spacing:-.02em;}
.production-tabbar{
  display:flex;flex-wrap:wrap;gap:.45rem;padding:.45rem;
  width:100%;border-radius:1rem;background:var(--surface-1);
  border:1px solid var(--border);box-shadow:var(--shadow-xs);
}
.production-tab{
  display:inline-flex;align-items:center;gap:.45rem;border:none;cursor:pointer;
  padding:.72rem .95rem;border-radius:.85rem;background:transparent;color:var(--text-secondary);
  font-weight:700;transition:all .18s var(--ease);box-shadow:none;
}
.production-tab:hover{background:var(--surface-0);color:var(--brand-blue);}
.production-tab.active{background:var(--surface-0);color:var(--brand-blue);box-shadow:var(--shadow-xs);}
.production-tab.active .material-symbols-outlined{color:var(--brand-orange);}
.production-tab-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:1.2rem;height:1.2rem;
  padding:0 .35rem;border-radius:999px;background:var(--brand-orange);color:#fff;
  font-size:.62rem;font-weight:800;
}
.production-shell .card{border-radius:1.15rem;}
.production-shell .data-table th{font-size:.7rem;letter-spacing:.12em;}
.production-shell .card.animate-in{
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.production-orders-view,
.production-shopfloor-view,
.production-planning-view{display:flex;flex-direction:column;gap:1rem;}
.production-panel{
  background:linear-gradient(180deg,var(--surface-0),var(--surface-1));
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.production-panel-warning{
  background:linear-gradient(180deg,rgba(249,115,22,.05),rgba(249,115,22,.02));
}
.production-order-card,
.production-shopfloor-card{
  background:linear-gradient(180deg,var(--surface-0),var(--surface-1));
}
.production-order-layout{align-items:stretch !important;}
.production-order-main{display:flex;flex-direction:column;gap:.2rem;}
.production-order-actions{
  min-width:10rem;
  padding-left:1rem;
  border-left:1px solid var(--border);
  justify-content:center;
}
.production-order-actions .btn,
.production-shopfloor-card .btn{justify-content:center;}
.production-shopfloor-grid{align-items:start;}
.production-shopfloor-card{
  padding:1rem 1.05rem;
  box-shadow:var(--shadow-sm);
}
.production-live-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.2rem;height:1.2rem;padding:0 .4rem;border-radius:999px;
  background:rgba(239,68,68,.14);color:var(--error);font-size:.62rem;font-weight:800;
}
.production-overview-view,
.production-quality-view,
.production-materials-view,
.production-support-view{display:flex;flex-direction:column;gap:1rem;}
.production-stage-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.9rem;
}
.production-stage-card{
  background:linear-gradient(180deg,var(--surface-0),var(--surface-1));
  border:1px solid var(--border);border-radius:1.1rem;padding:1rem;
  box-shadow:var(--shadow-xs);display:flex;flex-direction:column;gap:.35rem;
}
.production-stage-card .material-symbols-outlined{color:var(--brand-blue);font-size:1.2rem;}
.production-stage-card__value{
  font-size:1.4rem;font-weight:900;font-family:var(--font-display);color:var(--text-primary);
}
.production-stage-card__label{
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-weight:800;
}
.production-stage-card p{margin:0;font-size:.8rem;color:var(--text-secondary);line-height:1.4;}
.production-overview-columns{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1rem;align-items:start;
}
.production-flow-strip{display:flex;flex-direction:column;gap:.8rem;}
.production-flow-step{
  display:grid;grid-template-columns:2.4rem 1fr;gap:.8rem;align-items:start;
  padding:.8rem .9rem;border-radius:1rem;background:var(--surface-1);border:1px solid var(--border);
}
.production-flow-step__number{
  width:2.2rem;height:2.2rem;border-radius:.8rem;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-orange));color:#fff;font-weight:900;
}
.production-flow-step strong{display:block;font-size:.9rem;margin-bottom:.15rem;}
.production-flow-step p{margin:0;font-size:.8rem;color:var(--text-secondary);line-height:1.4;}
.production-action-board{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.75rem;
}
.production-action-tile{
  text-align:left;border:1px solid var(--border);border-radius:1rem;padding:.9rem;
  background:linear-gradient(180deg,var(--surface-0),var(--surface-1));cursor:pointer;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.production-action-tile:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.production-action-tile__top{display:flex;justify-content:space-between;gap:.75rem;align-items:center;margin-bottom:.45rem;}
.production-action-tile__top span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-weight:800;}
.production-action-tile__top strong{font-size:1.15rem;font-family:var(--font-display);}
.production-action-tile p{margin:0;font-size:.8rem;color:var(--text-secondary);line-height:1.4;}
.production-action-tile--warning{border-color:rgba(249,115,22,.24);}
.production-action-tile--warning .production-action-tile__top strong{color:var(--warning);}
.production-action-tile--success{border-color:rgba(16,185,129,.22);}
.production-action-tile--success .production-action-tile__top strong{color:var(--success);}
.production-action-tile--info{border-color:rgba(21,99,204,.18);}
.production-action-tile--info .production-action-tile__top strong{color:var(--brand-blue);}
.production-urgent-list{
  margin-top:.95rem;padding-top:.9rem;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:.55rem;
}
.production-urgent-row,
.production-watch-row{
  display:flex;justify-content:space-between;gap:.9rem;align-items:start;
  padding:.7rem .8rem;border-radius:.9rem;background:var(--surface-1);border:1px solid var(--border);
}
.production-urgent-row p,
.production-watch-row p{margin:.15rem 0 0;font-size:.78rem;color:var(--text-secondary);line-height:1.35;}
.production-inline-note-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.75rem;
}
.production-inline-note{
  border:1px solid var(--border);border-radius:1rem;padding:.85rem .95rem;background:var(--surface-1);
}
.production-inline-note strong{display:block;margin-bottom:.25rem;font-size:.86rem;}
.production-inline-note p{margin:0;font-size:.8rem;color:var(--text-secondary);line-height:1.45;}
.production-empty-panel{
  border-style:dashed;
  background:
    linear-gradient(180deg,rgba(21,99,204,.03),rgba(21,99,204,.01)),
    linear-gradient(180deg,var(--surface-0),var(--surface-1));
}
.production-watch-list{display:flex;flex-direction:column;gap:.55rem;}
.production-control-list{display:flex;flex-direction:column;gap:.65rem;}
.production-control-row{
  display:grid;grid-template-columns:1.1fr 1fr .8fr 1fr auto;gap:.85rem;align-items:start;
  padding:.85rem .95rem;border-radius:1rem;background:var(--surface-1);border:1px solid var(--border);
}
.production-control-row strong{display:block;font-size:.84rem;}
.production-control-row p{margin:.18rem 0 0;font-size:.78rem;color:var(--text-secondary);line-height:1.35;}
.production-subtabbar{
  display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border);
}
.production-subtab{
  display:inline-flex;align-items:center;gap:.4rem;border:none;cursor:pointer;
  padding:.65rem .85rem;border-radius:.8rem;background:var(--surface-1);color:var(--text-secondary);
  font-weight:700;transition:all .18s var(--ease);
}
.production-subtab:hover{background:var(--surface-0);color:var(--brand-blue);}
.production-subtab.active{background:var(--surface-0);color:var(--brand-blue);box-shadow:var(--shadow-xs);}
.production-detail-shell{display:flex;flex-direction:column;gap:1rem;}
.production-detail-hero{
  display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;
  padding:1.15rem 1.25rem;border-radius:1.25rem;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-mid));
  color:#fff;
}
.production-detail-kicker{
  margin:0 0 .25rem;font-size:.68rem;opacity:.72;text-transform:uppercase;letter-spacing:.1em;
}
.production-detail-hero h2{margin:0;font-size:1.3rem;font-family:var(--font-display);}
.production-detail-subtitle{margin:.25rem 0 0;font-size:.82rem;opacity:.82;}
.production-detail-hero-badges{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:flex-end;}
.production-detail-flow{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;
}
.production-detail-flow-step{
  padding:.85rem .95rem;border-radius:1rem;border:1px solid var(--border);
  background:var(--surface-1);display:flex;gap:.65rem;align-items:flex-start;
}
.production-detail-flow-step__dot{
  width:.9rem;height:.9rem;border-radius:999px;margin-top:.15rem;flex-shrink:0;background:var(--surface-2);
}
.production-detail-flow-step--done .production-detail-flow-step__dot{background:var(--success);}
.production-detail-flow-step--current .production-detail-flow-step__dot{background:var(--brand-blue);}
.production-detail-flow-step strong{display:block;font-size:.84rem;}
.production-detail-flow-step p{margin:.15rem 0 0;font-size:.77rem;color:var(--text-secondary);line-height:1.35;}
.production-detail-summary{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;
}
.production-detail-summary-card{
  padding:.8rem .9rem;border-radius:1rem;border:1px solid var(--border);background:var(--surface-1);
}
.production-detail-summary-card span{
  display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-weight:800;
}
.production-detail-summary-card strong{display:block;margin-top:.28rem;font-size:.92rem;}
.production-work-sequence{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.75rem;
}
.production-work-sequence__card{
  padding:.9rem .95rem;border-radius:1rem;border:1px solid var(--border);background:var(--surface-1);
  display:flex;flex-direction:column;gap:.5rem;
}
.production-work-sequence__head{display:flex;gap:.6rem;align-items:center;}
.production-work-sequence__number{
  width:1.7rem;height:1.7rem;border-radius:.6rem;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--text-primary);font-weight:900;font-size:.78rem;flex-shrink:0;
}
.production-work-sequence__card strong{font-size:.86rem;}
.production-work-sequence__card p{margin:0;font-size:.79rem;color:var(--text-secondary);line-height:1.4;flex:1;}
.production-work-sequence__card--current{border-color:rgba(21,99,204,.18);}
.production-work-sequence__card--current .production-work-sequence__number{background:rgba(21,99,204,.14);color:var(--brand-blue);}
.production-work-sequence__card--warning{border-color:rgba(249,115,22,.22);}
.production-work-sequence__card--warning .production-work-sequence__number{background:rgba(249,115,22,.14);color:var(--warning);}
.production-work-sequence__card--done{border-color:rgba(16,185,129,.22);}
.production-work-sequence__card--done .production-work-sequence__number{background:rgba(16,185,129,.14);color:var(--success);}
.production-detail-main{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(18rem,.95fr);gap:1rem;align-items:start;
}
.production-detail-column{display:flex;flex-direction:column;gap:1rem;}
.production-detail-section{
  padding:1rem;border-radius:1.1rem;border:1px solid var(--border);background:linear-gradient(180deg,var(--surface-0),var(--surface-1));
}
.production-detail-info-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-bottom:.9rem;
}
.production-detail-info-grid p{margin:.2rem 0 0;font-weight:700;}
.production-detail-alert{
  display:flex;gap:.55rem;align-items:flex-start;padding:.75rem .85rem;border-radius:1rem;
  background:var(--surface-1);border:1px solid var(--border);
}
.production-detail-alert p{margin:0;font-size:.8rem;color:var(--text-secondary);line-height:1.4;}
.production-detail-alert--warning{background:rgba(249,115,22,.08);border-color:rgba(249,115,22,.22);}
.production-detail-alert--warning .material-symbols-outlined{color:var(--warning);}
.production-detail-alert--success{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.2);}
.production-detail-alert--success .material-symbols-outlined{color:var(--success);}
.production-detail-operation-list{display:flex;flex-direction:column;gap:.65rem;}
.production-detail-operation-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.85rem;align-items:start;
  padding:.85rem .9rem;border-radius:1rem;border:1px solid var(--border);background:var(--surface-1);
}
.production-detail-operation-title{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;}
.production-detail-operation-row p{margin:.2rem 0 0;font-size:.78rem;color:var(--text-secondary);line-height:1.35;}
.production-detail-operation-meta{color:var(--text-muted)!important;}
.production-detail-operation-actions{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:flex-end;}
.production-detail-control-stack{display:flex;flex-direction:column;gap:1rem;}
.production-detail-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;}
.production-detail-side-list{display:flex;flex-direction:column;gap:.6rem;}
.production-detail-side-row{
  padding:.75rem .8rem;border-radius:.95rem;border:1px solid var(--border);background:var(--surface-1);
}
.production-detail-side-row p{margin:.2rem 0 0;font-size:.78rem;color:var(--text-secondary);line-height:1.35;}
.production-detail-side-note{color:var(--text-muted)!important;}
.production-shopfloor-card .flex-between strong,
.production-order-card strong[style*="font-family:var(--font-display)"]{
  letter-spacing:-.01em;
}
.production-planning-summary{
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)) !important;
}
.production-summary-card{
  padding:.95rem 1rem;
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
}
.production-planning-view .data-table td{vertical-align:top;}
.production-planning-view .data-table tbody tr:hover{
  background:rgba(21,99,204,.03);
}

@media (max-width: 980px){
  .production-order-layout{flex-direction:column;}
  .production-order-actions{
    min-width:0;
    padding-left:0;
    padding-top:.9rem;
    border-left:none;
    border-top:1px solid var(--border);
    flex-direction:row !important;
    flex-wrap:wrap;
  }
  .production-overview-columns{grid-template-columns:1fr;}
  .production-control-row{grid-template-columns:1fr 1fr;}
  .production-detail-flow,
  .production-detail-summary,
  .production-detail-main{grid-template-columns:1fr;}
  .production-detail-operation-row{grid-template-columns:1fr;}
}

@media (max-width: 860px){
  .production-hero{padding:1.2rem;}
  .production-hero-title h1{font-size:1.55rem;}
  .production-hero-actions{align-items:stretch;}
  .production-hero-note{width:100%;}
  .production-tabbar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.6rem;}
  .production-control-row{grid-template-columns:1fr;}
  .production-detail-hero{flex-direction:column;}
  .production-detail-info-grid,
  .production-detail-action-grid{grid-template-columns:1fr;}
}

/* ─── Layout ────────────────────────────────────────────── */
#app-topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--topbar-h);
  background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;
  border-bottom:1px solid var(--border);box-shadow:var(--shadow-xs);
  transition:background .25s var(--ease);
}
#app-topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2.5px;
  background:linear-gradient(90deg,var(--brand-blue) 0%,var(--brand-blue-mid) 35%,var(--brand-orange-mid) 70%,var(--brand-orange) 100%);}

#app-sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);z-index:90;
  background:var(--sidebar-bg);
  padding-top:calc(var(--topbar-h) + .5rem);
  display:flex;flex-direction:column;gap:.125rem;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  transform:translateX(0);transition:transform .28s var(--ease);
  box-shadow:2px 0 8px rgba(0,0,0,.1);}
#app-sidebar::-webkit-scrollbar{display:none;}

#app-content{
  margin-left:var(--sidebar-w);
  padding:calc(var(--topbar-h) + 1.75rem) 1.75rem 3rem;
  min-height:100dvh;transition:margin-left .28s var(--ease);
}
#app-content>.page-container{max-width:82rem;margin:0 auto;}

#app-bottomnav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:100;
  background:var(--glass-bg);backdrop-filter:blur(20px);
  height:4rem;align-items:center;justify-content:space-around;
  border-top:1px solid var(--border);box-shadow:0 -4px 20px rgba(0,0,0,.06);
}

/* ─── Glassmorphism Card ────────────────────────────────── */
.glass-card{
  background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);border-radius:var(--r-2xl);
  box-shadow:var(--glass-shadow);
}

/* ═════════════════════════════════════════════════════════════
   SIDEBAR - MODERN REDESIGN (v2: clean scroll, solid bg)
   ═════════════════════════════════════════════════════════════ */

/* Override the existing #app-sidebar layout so we own the scroll model.
   The aside itself MUST NOT scroll - only the .sidebar-nav scrolls.
   Brand + search stay pinned at top, footer stays pinned at bottom. */
#app-sidebar.sidebar-modern{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding-top:0;
  width:var(--sidebar-w);
  background:linear-gradient(195deg, #0a1628 0%, #0f2035 35%, #132a46 70%, #0d1d33 100%);
  border-right:1px solid rgba(96,165,250,.08);
  box-shadow:4px 0 24px rgba(0,0,0,.2);
}
#app-sidebar.sidebar-modern::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(59,130,246,.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(249,115,22,.04) 0%, transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, transparent 12%);
}
.sidebar-modern > *{position:relative;}
.sidebar-modern::after{
  content:none;
}

/* ─── Brand block (sits below the topbar, first thing in the flex column) */
.sidebar-modern .sidebar-brand{
  flex-shrink:0;
  margin:calc(var(--topbar-h) + .65rem) .625rem .5rem;
  padding:.7rem .85rem;
  border-radius:.85rem;
  background:linear-gradient(135deg, rgba(59,130,246,.12), rgba(99,102,241,.08));
  border:1px solid rgba(96,165,250,.15);
  box-shadow:0 2px 12px rgba(0,0,0,.15);
}
.sidebar-brand-row{display:flex;align-items:center;gap:.625rem;}
.sidebar-brand-logo{
  width:2.4rem;height:2.4rem;border-radius:.55rem;overflow:hidden;flex-shrink:0;
  background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.sidebar-brand-logo img{width:100%;height:100%;object-fit:contain;}
.sidebar-brand-logo.no-logo{background:linear-gradient(135deg, var(--brand-blue), var(--brand-blue-mid));color:#fff;font-weight:800;}
.sidebar-brand-logo.no-logo::after{content:'EF';font-family:var(--font-display);}
.sidebar-brand-text{min-width:0;flex:1;}
.sidebar-brand-text p:first-child{
  font-family:var(--font-display);font-weight:700;font-size:.825rem;
  color:rgba(255,255,255,.94);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.01em;line-height:1.15;
}
.sidebar-brand-text p:last-child{
  font-size:.66rem;color:rgba(255,255,255,.42);
  margin-top:.1rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;
}
.sidebar-collapse-btn{
  width:1.85rem;height:1.85rem;border-radius:.45rem;border:none;background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.5);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s var(--ease);flex-shrink:0;
}
.sidebar-collapse-btn:hover{background:rgba(255,255,255,.12);color:#fff;}
.sidebar-collapse-btn .material-symbols-outlined{font-size:1.05rem;}

/* ─── Search bar ────────────────────────────────────────── */
.sidebar-modern .sidebar-search{
  flex-shrink:0;
  position:relative;margin:.25rem .625rem .5rem;
}
.sidebar-search-icon{
  position:absolute;left:.65rem;top:50%;transform:translateY(-50%);
  color:rgba(255,255,255,.45);font-size:1.05rem;pointer-events:none;
}
.sidebar-search input{
  width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  border-radius:.65rem;padding:.55rem 2.4rem .55rem 2.15rem;
  color:rgba(255,255,255,.92);font-size:.78rem;font-family:var(--font-sans, inherit);
  transition:all .2s var(--ease);outline:none;
  backdrop-filter:blur(8px);
}
.sidebar-search input::placeholder{color:rgba(255,255,255,.35);}
.sidebar-search input:focus{
  background:rgba(255,255,255,.12);
  border-color:rgba(96,165,250,.5);
  box-shadow:0 0 0 3px rgba(59,130,246,.15), 0 2px 8px rgba(59,130,246,.1);
}
.sidebar-search-kbd{
  position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:.65rem;font-weight:700;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);
  padding:.1rem .35rem;border-radius:.25rem;border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
}

/* ─── Nav scroll area - THIS is the only scroll container ── */
.sidebar-modern .sidebar-nav{
  flex:1 1 auto;             /* take all remaining vertical space */
  min-height:0;              /* required for flex child to scroll */
  overflow-y:auto;
  overflow-x:hidden;
  padding:.25rem .375rem .75rem;
  display:flex;flex-direction:column;gap:.2rem;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
  -webkit-overflow-scrolling:touch;
}
.sidebar-modern .sidebar-nav::-webkit-scrollbar{width:7px !important;display:block !important;}
.sidebar-modern .sidebar-nav::-webkit-scrollbar-track{background:transparent !important;}
.sidebar-modern .sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14) !important;border-radius:99px !important;}
.sidebar-modern .sidebar-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28) !important;}

/* ─── Dashboard "home" item (always visible at top of nav) ── */
.sidebar-modern .nav-home{
  margin:.15rem .25rem .6rem !important;
  background:linear-gradient(135deg, rgba(249,115,22,.25), rgba(234,88,12,.18));
  border:1px solid rgba(251,146,60,.2);
  font-weight:700 !important;
  color:#fff !important;
  box-shadow:0 2px 10px rgba(249,115,22,.12);
}
.sidebar-modern .nav-home .material-symbols-outlined{
  background:rgba(255,255,255,.18);color:#fff;
}

/* ─── Collapsible group (button + body) ─────────────────── */
.sidebar-modern .nav-group{
  margin:.05rem .15rem;
  border-radius:.6rem;
  background:transparent;
}
.sidebar-modern .nav-group + .nav-group{margin-top:.15rem;}

.sidebar-modern .nav-group-header{
  width:100%;
  display:flex;align-items:center;gap:.55rem;
  padding:.5rem .6rem;border:none;background:transparent;
  border-radius:.55rem;
  cursor:pointer;user-select:none;
  font-family:var(--font-display);font-size:.68rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.55);
  transition:all .15s ease;
  text-align:left;
}
.sidebar-modern .nav-group-header:hover{
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.85);
}
.sidebar-modern .nav-group-header[aria-expanded="true"]{
  color:rgba(255,255,255,.92);
}
.sidebar-modern .nav-group-icon{
  font-size:1rem !important;color:#fff;
  width:1.4rem;height:1.4rem;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.sidebar-modern .nav-group-label{
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar-modern .nav-group-count{
  background:rgba(255,255,255,.14);color:#fff;
  font-size:.6rem;font-weight:700;padding:.05rem .4rem;border-radius:99px;
  font-family:var(--font-mono);letter-spacing:0;
}
.sidebar-modern .nav-group-chevron{
  font-size:1rem !important;color:#fff;
  transition:transform .2s ease;flex-shrink:0;
}
.sidebar-modern .nav-group-header[aria-expanded="true"] .nav-group-chevron{
  transform:rotate(180deg);color:rgba(255,255,255,.75);
}
.sidebar-modern .nav-group-header[aria-expanded="false"] + .nav-group-body{
  display:none;
}
/* Glow on collapsed group when it contains the active route */
.sidebar-modern .nav-group[data-has-active="true"] > .nav-group-header[aria-expanded="false"]{
  background:rgba(96,165,250,.10);color:#bfdbfe;
}
.sidebar-modern .nav-group[data-has-active="true"] > .nav-group-header[aria-expanded="false"] .nav-group-icon{
  color:#bfdbfe;
}

.sidebar-modern .nav-group-body{
  padding:.15rem 0 .3rem .35rem;
  display:flex;flex-direction:column;gap:.1rem;
}

/* ─── Nav item (the leaf links) - compact + readable ─────── */
.sidebar-modern .nav-item{
  display:flex;align-items:center;gap:.55rem;
  padding:.45rem .6rem;margin:0;
  border-radius:.55rem;
  font-size:.795rem;font-weight:600;color:rgba(255,255,255,.78);
  cursor:pointer;user-select:none;text-decoration:none;
  transition:all .18s ease;
  position:relative;line-height:1.2;
  background:transparent;border:none;overflow:visible;
  --nav-icon-color:#93c5fd;
  --nav-icon-bg:rgba(255,255,255,.06);
}
.sidebar-modern .nav-group-body > button.nav-item{
  width:calc(100% - 16px);
  text-align:left;
  font-family:inherit;
}
.sidebar-modern .nav-item .material-symbols-outlined{
  width:1.65rem;height:1.65rem;display:inline-flex;align-items:center;justify-content:center;
  border-radius:.4rem;font-size:.95rem;flex-shrink:0;
  color:var(--nav-icon-color);
  background:var(--nav-icon-bg);
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 20;
  transition:background .12s ease, color .12s ease;
}
.sidebar-modern .nav-label{
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;
}

.sidebar-modern .nav-item:hover{
  background:rgba(255,255,255,.08);color:#fff;transform:none;
}
.sidebar-modern .nav-item:hover .material-symbols-outlined{
  background:rgba(255,255,255,.14);color:#fff;
  transform:scale(1.05);
}

.sidebar-modern .nav-item.active{
  background:linear-gradient(135deg, rgba(59,130,246,.25), rgba(37,99,235,.18));
  color:#fff;font-weight:700;
  box-shadow:0 2px 10px rgba(59,130,246,.15), inset 0 1px 0 rgba(255,255,255,.08);
  border:1px solid rgba(96,165,250,.2);
}
.sidebar-modern .nav-item.active::before{
  content:'';position:absolute;left:-.45rem;top:50%;transform:translateY(-50%);
  width:3.5px;height:1.3rem;border-radius:0 99px 99px 0;
  background:linear-gradient(180deg,#60a5fa,#3b82f6);
  box-shadow:0 0 8px rgba(96,165,250,.5);
}
.sidebar-modern .nav-item.active .material-symbols-outlined{
  background:rgba(255,255,255,.2);color:#fff;
  font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 20;
}
/* Cancel the stale chevron pseudo-element added by older nav-item rules */
.sidebar-modern .nav-item::after{display:none;content:none;}

/* Filter / role-hide */
.nav-item-hidden{display:none !important;}

.sidebar-empty-msg{
  display:none;text-align:center;padding:1.5rem 1rem;
  color:rgba(255,255,255,.42);font-size:.78rem;font-style:italic;
}
.sidebar-empty-msg.visible{display:block;}

/* ─── Mobile responsive (modern sidebar) ───────────────── */
@media (max-width: 1024px){
  #app-sidebar.sidebar-modern{
    transform:translateX(-100%);
    z-index:200;width:17.5rem;
    box-shadow:22px 0 52px rgba(0,0,0,.5);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
  }
  #app-sidebar.sidebar-modern.open,
  #app-sidebar.sidebar-modern.mobile-open{
    transform:translateX(0);
  }
  .sidebar-modern ~ #app-content{
    margin-left:0;
    padding:calc(var(--topbar-h) + .85rem) .85rem 5.25rem;
  }
  .sidebar-modern ~ #app-bottomnav{display:flex;}
  .sidebar-collapse-btn{display:none;}
}

/* ─── Per-route icon accents (subtle, by category) ─────── */
.nav-item[data-route="dashboard"]      {--nav-icon-color:#93c5fd;--nav-icon-bg:rgba(96,165,250,.16);}
/* Sales / Customers - sky blue */
.nav-item[data-route="pfi"], .nav-item[data-route="sof"], .nav-item[data-route="customers"],
.nav-item[data-route="crm"], .nav-item[data-route="products"]
                                        {--nav-icon-color:#7dd3fc;--nav-icon-bg:rgba(56,189,248,.14);}
/* Production / QC - orange */
.nav-item[data-route="production"], .nav-item[data-route="qc"], .nav-item[data-route="kanban"],
.nav-item[data-route="bom"], .nav-item[data-route="mrp"], .nav-item[data-route="costing"],
.nav-item[data-route="aps"], .nav-item[data-route="shopfloor"], .nav-item[data-route="qms"],
.nav-item[data-route="fgs"]
                                        {--nav-icon-color:#fdba74;--nav-icon-bg:rgba(249,115,22,.14);}
/* Stock / Logistics - teal */
.nav-item[data-route="stores"], .nav-item[data-route="procurement"],
.nav-item[data-route="warehouse"], .nav-item[data-route="fleet"],
.nav-item[data-route="drn"], .nav-item[data-route="dn"]
                                        {--nav-icon-color:#5eead4;--nav-icon-bg:rgba(20,184,166,.14);}
/* Finance / HR - emerald */
.nav-item[data-route="invoice"], .nav-item[data-route="accounts"], .nav-item[data-route="imprest"],
.nav-item[data-route="vouchers"], .nav-item[data-route="expenses"],
.nav-item[data-route="financial-reports"], .nav-item[data-route="hr"]
                                        {--nav-icon-color:#86efac;--nav-icon-bg:rgba(34,197,94,.14);}
/* Insights - violet */
.nav-item[data-route="bi"], .nav-item[data-route="manufacturing-intelligence"],
.nav-item[data-route="reports"], .nav-item[data-route="advanced-reports"],
.nav-item[data-route="ai"], .nav-item[data-route="workflow-automation"]
                                        {--nav-icon-color:#c4b5fd;--nav-icon-bg:rgba(139,92,246,.14);}
/* System - slate */
.nav-item[data-route="settings"], .nav-item[data-route="users"],
.nav-item[data-route="documents"], .nav-item[data-route="audit-trail"],
.nav-item[data-route="backup-recovery"]
                                        {--nav-icon-color:#cbd5e1;--nav-icon-bg:rgba(148,163,184,.14);}
/* Advanced Tools - amber */
.nav-item[data-route="crm"], .nav-item[data-route="kanban"], .nav-item[data-route="bom"],
.nav-item[data-route="fgs"], .nav-item[data-route="costing"], .nav-item[data-route="mrp"],
.nav-item[data-route="advanced-reports"], .nav-item[data-route="notifications"],
.nav-item[data-route="scheduler"], .nav-item[data-route="comms"],
.nav-item[data-route="master-data"], .nav-item[data-route="document-sequences"],
.nav-item[data-route="bulk-operations"], .nav-item[data-route="portal-users"]
                                        {--nav-icon-color:#fcd34d;--nav-icon-bg:rgba(245,158,11,.14);}

.sidebar-modern .sidebar-footer{
  flex-shrink:0;
  margin-top:0;
  padding:.65rem .85rem .85rem;
  border-top:1px solid rgba(96,165,250,.1);
  border-radius:0;
  background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.2));
}
.nav-badge{
  margin-left:auto;background:var(--brand-orange);color:#fff;font-size:.6rem;font-weight:800;
  min-width:1.25rem;height:1.25rem;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 .3rem;
}

/* ─── Collapsed (icon-only) sidebar ─────────────────────── */
#app-sidebar.sidebar-modern[data-collapsed="true"]{width:4.25rem;}
#app-sidebar.sidebar-modern[data-collapsed="true"] ~ #app-content{margin-left:4.25rem;}
#app-sidebar.sidebar-modern[data-collapsed="true"] .sidebar-brand-text,
#app-sidebar.sidebar-modern[data-collapsed="true"] .sidebar-search,
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-group-label,
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-group-count,
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-group-chevron,
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-label,
#app-sidebar.sidebar-modern[data-collapsed="true"] .sidebar-empty-msg,
#app-sidebar.sidebar-modern[data-collapsed="true"] #sidebar-user-info > div:nth-child(2){display:none;}
#app-sidebar.sidebar-modern[data-collapsed="true"] .sidebar-collapse-btn .material-symbols-outlined{transform:rotate(180deg);}
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-group-header{justify-content:center;padding:.5rem .25rem;}
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-item{justify-content:center;padding:.45rem .25rem;}
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-item.active::before{display:none;}
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-group-body{padding-left:0;}
#app-sidebar.sidebar-modern[data-collapsed="true"] #sidebar-user-info{justify-content:center;}
/* tooltips on hover when collapsed */
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-item{position:relative;}
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-item:hover::after{
  content:attr(data-tooltip);
  position:absolute;left:calc(100% + .65rem);top:50%;transform:translateY(-50%);
  background:#0c1424;color:#fff;
  padding:.35rem .65rem;border-radius:.4rem;
  font-size:.75rem;white-space:nowrap;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 4px 18px rgba(0,0,0,.4);
  z-index:200;pointer-events:none;
}

/* ─── Bottom Nav ────────────────────────────────────────── */
.bottomnav-item{display:flex;flex-direction:column;align-items:center;gap:.125rem;padding:.375rem .75rem;
  border-radius:var(--r-xl);color:var(--text-tertiary);cursor:pointer;text-decoration:none;
  font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;transition:all .15s var(--ease);}
.bottomnav-item.active{color:var(--brand-blue);background:var(--brand-blue-faint);}
.bottomnav-item .material-symbols-outlined{font-size:1.375rem;}

/* ─── Page Header ───────────────────────────────────────── */
.page-header{margin-bottom:2rem;animation:fadeSlideUp .3s var(--ease) both;}
.page-header h1{font-size:1.875rem;font-weight:800;letter-spacing:-.03em;color:var(--text-primary);margin-bottom:.375rem;}
.page-header p{color:var(--text-tertiary);font-size:.9375rem;max-width:44rem;}
.breadcrumb{display:flex;align-items:center;gap:.375rem;font-size:.6875rem;font-weight:700;
  color:var(--brand-blue);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem;}

/* ─── Cards ─────────────────────────────────────────────── */
.card{background:var(--surface-0);border-radius:var(--r-2xl);padding:1.5rem;
  box-shadow:var(--shadow-sm);border:1px solid var(--border);
  transition:all .3s var(--ease);position:relative;overflow:hidden;}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,70,153,.1),transparent);opacity:0;transition:opacity .3s var(--ease);}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:rgba(0,70,153,.15);}
.card:hover::before{opacity:1;}
[data-theme="dark"] .card{border-color:var(--border);}
[data-theme="dark"] .card:hover{border-color:rgba(100,150,255,.2);transform:translateY(-2px);}

/* Premium Glass Card */
.card-glass{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
  border-radius:var(--r-2xl);padding:1.5rem;transition:all .3s var(--ease);}
.card-glass:hover{box-shadow:0 12px 48px rgba(15,23,58,.16);transform:translateY(-3px);}

/* Gradient Card */
.card-gradient{position:relative;border:none;padding:1.5rem;border-radius:var(--r-2xl);
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-light));color:#fff;
  box-shadow:0 8px 32px rgba(0,70,153,.25);overflow:hidden;}
.card-gradient::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%);animation:gradientPulse 8s ease-in-out infinite;}
@keyframes gradientPulse{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(10px,10px) scale(1.1);}}
.card-gradient h3{color:#fff;margin-bottom:.5rem;}
.card-gradient p{color:rgba(255,255,255,.85);margin-bottom:1rem;}
.card-gradient .btn{background:#fff;color:var(--brand-blue);box-shadow:0 4px 16px rgba(0,0,0,.15);}
.card-gradient .btn:hover{background:rgba(255,255,255,.95);transform:translateY(-1px);}

/* ─── KPI Card ──────────────────────────────────────────── */
.kpi-card{background:var(--surface-0);border-radius:var(--r-2xl);padding:1.375rem 1.5rem;
  border:1px solid var(--border);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:all .2s var(--ease);animation:fadeSlideUp .4s var(--ease) both;}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--kpi-bar,linear-gradient(90deg,var(--brand-blue),var(--brand-blue-light)));}
.kpi-card::after{content:'';position:absolute;top:-1.5rem;right:-1.5rem;width:5.5rem;height:5.5rem;
  border-radius:50%;background:var(--kpi-glow,rgba(0,70,153,.06));transition:transform .3s var(--ease);}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.kpi-card:hover::after{transform:scale(1.2);}
.kpi-icon{width:2.75rem;height:2.75rem;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
  background:var(--kpi-icon-bg,var(--brand-blue-faint));}
.kpi-icon .material-symbols-outlined{color:var(--kpi-icon-color,var(--brand-blue));font-size:1.375rem;
  font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;}
.kpi-value{font-family:var(--font-display);font-size:2rem;font-weight:800;letter-spacing:-.04em;color:var(--text-primary);line-height:1;margin-bottom:.25rem;}
.kpi-label{font-size:.8125rem;color:var(--text-tertiary);font-weight:500;}
.kpi-sub{font-size:.75rem;color:var(--text-muted);margin-top:.75rem;}
.kpi-badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.6875rem;font-weight:700;padding:.2rem .5rem;border-radius:var(--r-full);}
.kpi-badge.up{background:var(--success-bg);color:var(--success);}
.kpi-badge.down{background:var(--error-bg);color:var(--error);}
.kpi-badge.flat{background:var(--surface-2);color:var(--text-tertiary);}

/* ─── Buttons ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.625rem 1.25rem;border-radius:var(--r-lg);font-family:var(--font-body);
  font-weight:600;font-size:.875rem;cursor:pointer;border:none;white-space:nowrap;
  user-select:none;text-decoration:none;transition:all .16s var(--ease);position:relative;}
.btn:active{transform:scale(.97);}
.btn .material-symbols-outlined{font-size:1.125rem;}
.btn-primary{background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-mid));color:#fff;
  box-shadow:0 2px 8px rgba(0,70,153,.28),inset 0 1px 0 rgba(255,255,255,.12);}
.btn-primary:hover{box-shadow:var(--shadow-blue);filter:brightness(1.07);}
.btn-secondary{background:var(--brand-blue-faint);color:var(--brand-blue);border:1.5px solid var(--brand-blue-dim);}
.btn-secondary:hover{background:var(--brand-blue-dim);}
.btn-orange{background:linear-gradient(135deg,var(--brand-orange),var(--brand-orange-mid));color:#fff;
  box-shadow:0 2px 8px rgba(224,92,0,.28),inset 0 1px 0 rgba(255,255,255,.12);}
.btn-orange:hover{box-shadow:var(--shadow-orange);filter:brightness(1.07);}
.btn-danger{background:linear-gradient(135deg,var(--error),#dc2626);color:#fff;box-shadow:0 2px 8px rgba(185,28,28,.22);}
.btn-danger:hover{filter:brightness(1.07);}
.btn-success{background:linear-gradient(135deg,var(--success),#16a34a);color:#fff;}
.btn-purple{background:linear-gradient(135deg,var(--purple),#8b5cf6);color:#fff;box-shadow:0 2px 8px rgba(124,58,237,.22);}
.btn-ghost{background:transparent;color:var(--text-tertiary);}
.btn-ghost:hover{background:var(--surface-2);color:var(--text-primary);}
.btn-sm{padding:.4rem .875rem;font-size:.8125rem;}
.btn-sm .material-symbols-outlined{font-size:1rem;}
.btn-lg{padding:.875rem 1.75rem;font-size:1rem;}
.btn-icon{padding:.5rem;border-radius:var(--r-full);}
.btn-icon:hover{background:var(--surface-2);}

/* ─── Forms ─────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:.375rem;}
.form-label{font-family:var(--font-display);font-size:.8125rem;font-weight:600;color:var(--text-secondary);}
.form-label-sm{font-family:var(--font-display);font-size:.6875rem;font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.07em;}
.form-input,.form-select{width:100%;background:var(--surface-1);border:1.5px solid var(--border);
  border-radius:var(--r-lg);padding:.65rem .875rem;font-family:var(--font-body);font-size:.9rem;
  color:var(--text-primary);outline:none;transition:all .16s var(--ease);}
.form-input:focus,.form-select:focus{border-color:var(--brand-blue);background:var(--surface-0);box-shadow:var(--shadow-glow);}
.form-input::placeholder{color:var(--text-muted);}
.form-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%239ca3af' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center;padding-right:2.25rem;}
textarea.form-input{resize:vertical;min-height:4.5rem;}

/* Form Validation States */
.form-input.valid{border-color:var(--success);background:var(--surface-0);}
.form-input.invalid{border-color:var(--error);background:var(--error-bg);}
.form-input:focus.valid{box-shadow:0 0 0 3px rgba(21,128,61,.1);}
.form-input:focus.invalid{box-shadow:0 0 0 3px rgba(185,28,28,.1);}

/* Validation Message */
.validation-message{font-size:.75rem;margin-top:.25rem;display:flex;align-items:center;gap:.375rem;}
.validation-message.error{color:var(--error);}
.validation-message.success{color:var(--success);}
.validation-message .material-symbols-outlined{font-size:.875rem;}

/* Required Field Indicator */
.form-label.required::after{content:'*';color:var(--error);margin-left:.25rem;font-weight:700;}

/* Form Grid */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.form-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.form-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}

/* Form Actions */
.form-actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border);}
.form-actions-left{justify-content:flex-start;}

/* Form Section */
.form-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border);}
.form-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}

/* ─── Tables ────────────────────────────────────────────── */
.data-table{width:100%;text-align:left;border-collapse:collapse;border-spacing:0;}
.data-table thead tr{background:var(--surface-1);}
.data-table th{padding:.75rem 1rem;font-family:var(--font-display);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--text-tertiary);white-space:nowrap;border-bottom:1px solid var(--border);cursor:pointer;user-select:none;transition:background .2s var(--ease);position:relative;}
.data-table th:hover{background:var(--surface-2);color:var(--text-primary);}
.data-table th.sortable::after{content:'';margin-left:.375rem;opacity:.3;font-size:.75rem;}
.data-table th.sort-asc::after{content:'';opacity:1;color:var(--brand-blue);}
.data-table th.sort-desc::after{content:'';opacity:1;color:var(--brand-blue);}
.data-table td{padding:.75rem 1rem;font-size:.875rem;border-bottom:1px solid var(--border);vertical-align:middle;}
.data-table tbody tr:last-child td{border-bottom:none;}
.data-table tbody tr{transition:all .12s var(--ease);}
.data-table tbody tr:hover{background:var(--brand-blue-faint);transform:scale(1.002);}

/* Premium Data Table */
.data-table-premium{width:100%;text-align:left;border-collapse:separate;border-spacing:0;}
.data-table-premium thead{background:linear-gradient(180deg,var(--surface-1) 0%,var(--surface-2) 100%);}
.data-table-premium th{padding:1rem 1.25rem;font-family:var(--font-display);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-primary);border-bottom:2px solid var(--border);position:relative;cursor:pointer;user-select:none;transition:all .2s var(--ease);}
.data-table-premium th:first-child{border-top-left-radius:var(--r-xl);border-bottom-left-radius:0;}
.data-table-premium th:last-child{border-top-right-radius:var(--r-xl);border-bottom-right-radius:0;}
.data-table-premium th:hover{background:var(--brand-blue-faint);color:var(--brand-blue);}
.data-table-premium td{padding:1rem 1.25rem;font-size:.875rem;border-bottom:1px solid var(--border);color:var(--text-primary);}
.data-table-premium tbody tr{transition:all .2s var(--ease);background:var(--surface-0);}
.data-table-premium tbody tr:hover{background:var(--brand-blue-faint);box-shadow:0 4px 12px rgba(0,70,153,.08);transform:translateY(-1px);z-index:1;position:relative;}
.data-table-premium tbody tr:last-child td:first-child{border-bottom-left-radius:var(--r-xl);}
.data-table-premium tbody tr:last-child td:last-child{border-bottom-right-radius:var(--r-xl);}

/* Table Filters */
.table-filters{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem;padding:1rem;background:var(--surface-1);border-radius:var(--r-xl);border:1px solid var(--border);}
.table-search{flex:1;min-width:12rem;position:relative;}
.table-search input{width:100%;padding:.5rem .5rem .5rem 2.25rem;border:1.5px solid var(--border);border-radius:var(--r-lg);background:var(--surface-0);font-size:.875rem;transition:all .2s var(--ease);}
.table-search input:focus{border-color:var(--brand-blue);outline:none;box-shadow:var(--shadow-glow);}
.table-search::before{content:'';position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239ca3af'%3E%3Cpath d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' stroke='%239ca3af' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat center;background-size:contain;opacity:.5;}
.table-filter-select{padding:.5rem 2rem .5rem .75rem;border:1.5px solid var(--border);border-radius:var(--r-lg);background:var(--surface-0);font-size:.875rem;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%239ca3af' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;min-width:8rem;}
.table-filter-select:focus{border-color:var(--brand-blue);outline:none;}
.table-actions{display:flex;gap:.5rem;}
.table-btn{padding:.4rem .75rem;font-size:.75rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-0);cursor:pointer;transition:all .2s var(--ease);display:flex;align-items:center;gap:.375rem;}
.table-btn:hover{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);transform:translateY(-1px);}
.table-btn.active{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);}

/* Pagination */
.table-pagination{display:flex;align-items:center;justify-content:space-between;padding:1rem;margin-top:1rem;background:var(--surface-1);border-radius:var(--r-xl);border:1px solid var(--border);}
.pagination-info{font-size:.8125rem;color:var(--text-tertiary);}
.pagination-controls{display:flex;gap:.375rem;align-items:center;}
.pagination-btn{width:2.25rem;height:2.25rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-0);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease);}
.pagination-btn:hover:not(:disabled){background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);transform:translateY(-1px);}
.pagination-btn:disabled{opacity:.4;cursor:not-allowed;}
.pagination-btn.active{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);font-weight:700;}
.pagination-ellipsis{padding:0 .5rem;color:var(--text-muted);font-weight:600;}

/* ─── Badges ────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .625rem;border-radius:var(--r-full);font-family:var(--font-display);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7;flex-shrink:0;}
.badge-success{background:var(--success-bg);color:var(--success);}
.badge-warning{background:var(--warning-bg);color:var(--warning);}
.badge-danger{background:var(--error-bg);color:var(--error);}
.badge-primary{background:var(--brand-blue-faint);color:var(--brand-blue);}
.badge-info{background:var(--info-bg);color:var(--info);}
.badge-secondary{background:var(--brand-orange-faint);color:var(--brand-orange);}
.badge-purple{background:var(--purple-bg);color:var(--purple);}

/* ─── Alerts ────────────────────────────────────────────── */
.alert{padding:.875rem 1.125rem;border-radius:var(--r-lg);display:flex;align-items:flex-start;gap:.75rem;font-size:.875rem;}
.alert-warning{background:var(--warning-bg);color:var(--warning);border-left:3px solid var(--warning);}
.alert-success{background:var(--success-bg);color:var(--success);border-left:3px solid var(--success);}
.alert-danger{background:var(--error-bg);color:var(--error);border-left:3px solid var(--error);}
.alert-info{background:var(--info-bg);color:var(--info);border-left:3px solid var(--info);}

/* ─── Progress ──────────────────────────────────────────── */
.progress-bar{height:6px;background:var(--surface-3);border-radius:999px;overflow:hidden;}
.progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-blue-light));transition:width .6s var(--ease);}
.progress-fill.orange{background:linear-gradient(90deg,var(--brand-orange),var(--brand-orange-mid));}
.progress-fill.success{background:var(--success);}
.progress-fill.purple{background:linear-gradient(90deg,var(--purple),#8b5cf6);}
.progress-fill.warning{background:var(--warning);}

/* ─── Section Header ────────────────────────────────────── */
.section-header{display:flex;align-items:center;gap:.625rem;padding-bottom:.875rem;border-bottom:1px solid var(--border);margin-bottom:1.25rem;}
.section-header h2{font-size:1rem;font-weight:700;}
.section-header .material-symbols-outlined{color:var(--brand-blue);font-size:1.25rem;}

/* ─── Toast ─────────────────────────────────────────────── */
.toast-container{position:fixed;top:calc(var(--topbar-h) + .875rem);right:1.25rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;pointer-events:none;}
.toast{background:var(--sidebar-bg);color:#fff;padding:.875rem 1.25rem;border-radius:var(--r-xl);font-size:.875rem;font-weight:500;
  display:flex;align-items:center;gap:.75rem;box-shadow:var(--shadow-xl);
  animation:toastIn .32s var(--ease-spring) both;min-width:18rem;max-width:26rem;pointer-events:all;border-left:3px solid transparent;}
.toast-success{border-left-color:var(--success);}
.toast-error{border-left-color:var(--error);}
.toast-warning{border-left-color:var(--warning);}
.toast-info{border-left-color:#60a5fa;}

/* ─── Modal ─────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(10,16,32,.7);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;padding:1.25rem;animation:fadeIn .18s var(--ease);}
.modal-content{background:var(--surface-0);border-radius:var(--r-3xl);padding:2rem;max-width:48rem;width:100%;
  max-height:90vh;overflow-y:auto;box-shadow:0 32px 64px rgba(12,22,41,.3),0 0 0 1px rgba(255,255,255,.1) inset;
  border:1px solid var(--border);animation:scaleIn .25s var(--ease-spring) both;scrollbar-width:thin;scrollbar-color:var(--border) transparent;position:relative;}
.modal-content::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-blue-light));border-radius:var(--r-3xl) var(--r-3xl) 0 0;}

/* Premium Modal Variants */
.modal-lg{max-width:64rem;}
.modal-xl{max-width:80rem;}
.modal-sm{max-width:32rem;}

/* Modal Header */
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border);}
.modal-title{font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:var(--text-primary);letter-spacing:-.03em;}
.modal-close{width:2.25rem;height:2.25rem;border-radius:var(--r-full);border:1.5px solid var(--border);background:var(--surface-1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease);color:var(--text-tertiary);}
.modal-close:hover{background:var(--error);border-color:var(--error);color:#fff;transform:rotate(90deg);}

/* Modal Body */
.modal-body{margin-bottom:1.5rem;}

/* Modal Footer */
.modal-footer{display:flex;gap:.75rem;justify-content:flex-end;padding-top:1.25rem;border-top:1px solid var(--border);}

/* ─── Kanban Board ──────────────────────────────────────── */
.kanban-board{display:grid;grid-auto-columns:minmax(16rem,1fr);grid-auto-flow:column;gap:1rem;overflow-x:auto;padding-bottom:1rem;}
.kanban-col{background:var(--surface-1);border-radius:var(--r-2xl);padding:1rem;min-height:24rem;border:1px solid var(--border);}
.kanban-col-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.875rem;}
.kanban-col-title{font-family:var(--font-display);font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;}
.kanban-count{font-size:.6875rem;font-weight:800;padding:.2rem .5rem;border-radius:var(--r-full);background:var(--surface-3);color:var(--text-tertiary);}
.kanban-card{background:var(--surface-0);border-radius:var(--r-xl);padding:.875rem;margin-bottom:.625rem;
  border:1px solid var(--border);cursor:grab;transition:all .2s var(--ease);box-shadow:var(--shadow-xs);}
.kanban-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand-blue);}
.kanban-card:active{cursor:grabbing;}
.kanban-card.dragging{opacity:.5;transform:rotate(2deg);}
.kanban-drop-zone{min-height:3rem;border:2px dashed var(--border);border-radius:var(--r-xl);
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.75rem;}
.kanban-drop-zone.drag-over{border-color:var(--brand-blue);background:var(--brand-blue-faint);}

/* ─── Search Overlay ────────────────────────────────────── */
#global-search-overlay{position:fixed;inset:0;z-index:2000;background:rgba(10,16,32,.7);backdrop-filter:blur(10px);
  display:none;align-items:flex-start;justify-content:center;padding-top:5.5rem;}
#global-search-overlay.open{display:flex;animation:fadeIn .15s var(--ease);}
.search-box{background:var(--surface-0);border-radius:var(--r-2xl);box-shadow:var(--shadow-xl);width:100%;max-width:38rem;border:1px solid var(--border);overflow:hidden;}
.search-input-wrap{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border);}
.search-input-wrap input{flex:1;border:none;outline:none;background:transparent;font-size:1.125rem;color:var(--text-primary);}
.search-results{max-height:24rem;overflow-y:auto;}
.search-result-item{display:flex;align-items:center;gap:.875rem;padding:.875rem 1.25rem;cursor:pointer;transition:background .12s;}
.search-result-item:hover{background:var(--surface-1);}

/* ─── Icon Button ───────────────────────────────────────── */
.icon-btn{width:2.25rem;height:2.25rem;border-radius:var(--r-full);border:none;background:transparent;
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);
  transition:all .15s var(--ease);position:relative;}
.icon-btn:hover{background:var(--surface-2);color:var(--text-primary);}

/* ─── Company Pill ──────────────────────────────────────── */
.company-pill{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;border-radius:var(--r-full);
  background:var(--surface-1);border:1.5px solid var(--border);cursor:pointer;font-size:.8125rem;
  font-weight:600;color:var(--text-secondary);transition:all .15s var(--ease);}
.company-pill:hover{border-color:var(--brand-blue);color:var(--brand-blue);background:var(--brand-blue-faint);}

/* ─── Dark Mode Toggle ──────────────────────────────────── */
.theme-toggle{width:2.75rem;height:1.5rem;background:var(--surface-3);border-radius:var(--r-full);
  position:relative;cursor:pointer;border:none;transition:background .2s var(--ease);flex-shrink:0;}
.theme-toggle::after{content:'';position:absolute;top:.2rem;left:.2rem;width:1.1rem;height:1.1rem;
  border-radius:50%;background:var(--text-muted);transition:all .25s var(--ease-spring);}
[data-theme="dark"] .theme-toggle{background:var(--brand-blue);}
[data-theme="dark"] .theme-toggle::after{left:calc(100% - 1.3rem);background:#fff;}

/* ─── Signature Pad ─────────────────────────────────────── */
.signature-pad{background:var(--surface-0);border:1.5px dashed var(--border);border-radius:var(--r-xl);
  min-height:9rem;position:relative;cursor:crosshair;overflow:hidden;
  background-image:radial-gradient(var(--border) .5px,transparent .5px);background-size:24px 24px;}
.signature-pad canvas{width:100%;height:100%;position:absolute;inset:0;}

/* ─── Empty State ───────────────────────────────────────── */
.empty-state{text-align:center;padding:4.5rem 2rem;color:var(--text-muted);}
.empty-state .material-symbols-outlined{font-size:3.5rem;color:var(--surface-3);display:block;margin-bottom:1rem;}
.empty-state h3{font-size:1.125rem;color:var(--text-secondary);margin-bottom:.5rem;}

/* ─── Fleet Map ─────────────────────────────────────────── */
.map-container{background:var(--surface-1);border-radius:var(--r-2xl);overflow:hidden;position:relative;}
.map-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,70,153,.03),rgba(224,92,0,.03));}
.fleet-pin{position:absolute;transform:translate(-50%,-100%);cursor:pointer;}
.fleet-pin-dot{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.25);animation:fleetPulse 2s ease infinite;}
@keyframes fleetPulse{0%,100%{box-shadow:0 4px 12px rgba(0,0,0,.25),0 0 0 0 rgba(0,70,153,0);}50%{box-shadow:0 4px 12px rgba(0,0,0,.25),0 0 0 8px rgba(0,70,153,.15);}}

/* ─── HR Timeline ───────────────────────────────────────── */
.timeline-dot{width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.timeline-line{width:2px;background:var(--border);flex:1;min-height:2rem;margin-left:1.25rem;}

/* ─── AI Forecast Chart ─────────────────────────────────── */
.forecast-bar{transition:height .7s var(--ease);border-radius:4px 4px 0 0;position:relative;cursor:pointer;}
.forecast-bar:hover::after{content:attr(data-val);position:absolute;top:-.5rem;left:50%;transform:translate(-50%,-100%);
  background:var(--sidebar-bg);color:white;padding:.25rem .5rem;border-radius:var(--r-sm);font-size:.625rem;font-weight:700;white-space:nowrap;}
.forecast-label{font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-top:.375rem;text-align:center;}

/* ─── CRM Pipeline ──────────────────────────────────────── */
.pipeline-stage{flex:1;background:var(--surface-1);border-radius:var(--r-xl);padding:.875rem;border:1px solid var(--border);min-width:11rem;}
.pipeline-card{background:var(--surface-0);border-radius:var(--r-lg);padding:.75rem;margin-top:.5rem;border:1px solid var(--border);cursor:pointer;transition:all .15s var(--ease);}
.pipeline-card:hover{border-color:var(--brand-blue);transform:translateX(2px);}
.pipeline-value{font-family:var(--font-display);font-size:.875rem;font-weight:800;color:var(--brand-blue);}

/* ─── Animations ────────────────────────────────────────── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
@keyframes shimmer{from{background-position:-400px 0}to{background-position:400px 0}}
@keyframes bounceIn{0%{opacity:0;transform:scale(0.3);}50%{opacity:1;transform:scale(1.05);}70%{transform:scale(0.9);}100%{transform:scale(1);}}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes glow{0%,100%{box-shadow:0 0 5px rgba(0,70,153,.3);}50%{box-shadow:0 0 20px rgba(0,70,153,.6),0 0 30px rgba(0,70,153,.4);}}

.animate-in{animation:fadeSlideUp .35s var(--ease) both;}
.d1{animation-delay:.04s} .d2{animation-delay:.08s} .d3{animation-delay:.12s}
.d4{animation-delay:.16s} .d5{animation-delay:.2s}  .d6{animation-delay:.24s}

/* Premium Animation Classes */
.animate-bounce{animation:bounceIn 0.6s var(--ease-spring) both;}
.animate-slide-down{animation:slideDown 0.4s var(--ease) both;}
.animate-float{animation:float 3s ease-in-out infinite;}
.animate-glow{animation:glow 2s ease-in-out infinite;}

/* ─── Utilities ─────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.flex-center{display:flex;align-items:center;}
.gap-1{gap:.25rem} .gap-2{gap:.5rem} .gap-3{gap:.75rem} .gap-4{gap:1rem} .gap-6{gap:1.5rem}
.mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem} .mt-8{margin-top:2rem}
.mb-2{margin-bottom:.5rem} .mb-4{margin-bottom:1rem} .mb-6{margin-bottom:1.5rem}
.text-primary{color:var(--brand-blue)!important}
.text-orange{color:var(--brand-orange)!important}
.text-success{color:var(--success)!important}
.text-muted{color:var(--text-muted)!important}
.font-display{font-family:var(--font-display)}
.font-mono{font-family:var(--font-mono)}
.fw-800{font-weight:800}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

/* ─── Responsive ────────────────────────────────────────── */
@media(max-width:1024px){
  #app-sidebar{transform:translateX(-100%);}
  #app-sidebar.open{transform:translateX(0);box-shadow:8px 0 40px rgba(0,0,0,.3);}
  #app-content{margin-left:0;}
  #app-bottomnav{display:flex;}
  #app-content{padding-bottom:5.5rem;}
}
@media(max-width:768px){
  .page-header h1{font-size:1.5rem;}
  .page-header p{font-size:.875rem;}
  #app-content{padding:calc(var(--topbar-h) + .75rem) .75rem 5rem;}
  .card{padding:1rem;border-radius:var(--r-xl);}
  .modal-content{padding:1.25rem;border-radius:var(--r-xl);max-width:100%;margin:.5rem;}
  .modal-lg,.modal-xl{max-width:100%;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;gap:1rem;}
  .kanban-board{grid-auto-columns:minmax(16rem,1fr);padding-bottom:.5rem;}

  /* Mobile Tables - Card View */
  .data-table{display:block;}
  .data-table thead{display:none;}
  .data-table tbody,.data-table tr{display:block;}
  .data-table tr{margin-bottom:.75rem;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-0);padding:.75rem;}
  .data-table td{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--border-weak);font-size:.875rem;}
  .data-table td:last-child{border-bottom:none;}
  .data-table td::before{content:attr(data-label);font-weight:600;color:var(--text-secondary);font-size:.75rem;}

  /* Mobile Forms */
  .form-group{margin-bottom:1rem;}
  .form-label{font-size:.8125rem;}
  .form-input,.form-select{font-size:16px;padding:.625rem .75rem;}
  .form-row{flex-direction:column;gap:0;}
  .form-row .form-group{width:100%;}

  /* Touch Friendly */
  .nav-item,.bottomnav-item,.btn,.table-btn,.page-btn{min-height:44px;min-width:44px;}
  .btn{padding:.625rem 1rem;font-size:.875rem;}
  .icon-btn{width:44px;height:44px;}

  /* Mobile Sidebar Overlay */
  #app-sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;z-index:200;transform:translateX(-100%);transition:transform .3s var(--ease);}
  #app-sidebar.open{transform:translateX(0);}
  .sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199;opacity:0;visibility:hidden;transition:all .3s;}
  .sidebar-overlay.open{opacity:1;visibility:visible;}

  /* Mobile Cards */
  .stat-card{padding:1rem;}
  .stat-value{font-size:1.5rem;}
  .pipeline-stage{min-width:14rem;}

  /* Mobile Search */
  .table-filters{flex-direction:column;align-items:stretch;gap:.625rem;padding:.875rem;}
  .table-search{min-width:100%;}
  .table-search input{width:100%;}
  .table-filter-select{width:100%;}
  .table-actions{flex-wrap:wrap;justify-content:flex-end;}

  /* Mobile Tabs */
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .tab{white-space:nowrap;padding:.625rem 1rem;font-size:.875rem;}

  /* Mobile Toast */
  .toast-container{top:auto;bottom:5.5rem;left:.75rem;right:.75rem;}
  .toast{max-width:100%;min-width:auto;}
}

@media(max-width:480px){
  #app-topbar{padding:0 .5rem;}
  #company-name{display:none;}
  .page-header h1{font-size:1.15rem;}
  .page-header p{font-size:.78rem;}
  .page-header{padding:.75rem 0 .5rem;}
  .page-header .flex-between{flex-direction:column;align-items:stretch;gap:.75rem;}
  .bottomnav-item span{font-size:.625rem;}
  .card{padding:.75rem;border-radius:.75rem;}
  .data-table tr{padding:.625rem;}
  .modal-content{padding:.875rem;margin:.35rem;border-radius:.75rem;max-height:92vh;}
  .btn{justify-content:center;font-size:.8rem;padding:.5rem .75rem;}
  .btn-group{flex-direction:column;width:100%;}
  .btn-group .btn{width:100%;}
  /* Stack action buttons on mobile */
  .page-header .flex-between > div:last-child{display:flex;flex-wrap:wrap;gap:.4rem;}
  .page-header .flex-between > div:last-child .btn{flex:1 1 auto;min-width:0;}
  /* KPI cards stack */
  .kpi-card{padding:.65rem .75rem;}
  .kpi-value{font-size:1rem;}
  .kpi-label{font-size:.6rem;}
  /* Tabs scroll horizontally on mobile */
  [style*="display:flex"][style*="gap:.25rem"][style*="background:var(--surface-2)"]{
    overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap !important;
  }
  /* Grid fixes */
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr !important;}
}

/* Mobile work surfaces for Stores, Production, QC and Dispatch */
@media (max-width: 720px) {
  .data-table {
    border-collapse: separate;
    border-spacing: 0 .75rem;
  }
  .data-table thead {
    display: none;
  }
  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }
  .data-table tr {
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
  }
  .data-table td {
    padding: .65rem .85rem !important;
    border-bottom: 1px solid var(--border);
  }
  .data-table td:last-child {
    border-bottom: 0;
  }
  .data-table td .btn,
  .data-table td button {
    min-height: 2.4rem;
  }
  #app-content {
    padding-left: .75rem;
    padding-right: .75rem;
  }
  .page-header .flex-between,
  .page-header > .flex-between {
    align-items: stretch;
  }
  .page-header .btn {
    min-height: 2.5rem;
  }
  .kpi-card {
    min-height: 7rem;
  }
}
@media print{#app-topbar,#app-sidebar,#app-bottomnav,.toast-container{display:none!important}#app-content{margin:0!important;padding:0!important}}

/* ─── Extended palette ──────────────────────────────────── */
:root {
  --purple:    #7c3aed;  --purple-bg: #ede9fe;
  --teal:      #0d7377;  --teal-bg:   #e6f7f6;
  --success-border: #86efac;
  --warning-border: #fcd34d;
  --error-border:   #fca5a5;
}
.badge-purple { background: var(--purple-bg); color: var(--purple); }

/* ─── Glassmorphism Panel ───────────────────────────────── */
.glass-panel {
  background: var(--glass-bg, rgba(255,255,255,0.8));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.5));
  box-shadow: var(--glass-shadow, 0 8px 32px rgba(0,0,0,0.1));
}

/* Rehoboth theme overrides */
[data-company="rehoboth"] #app-topbar::after {
  background: linear-gradient(90deg, #0d7377 0%, #14a085 50%, #1ec8a8 100%);
}
[data-company="rehoboth"] .sidebar-brand,
[data-company="rehoboth"] #app-sidebar {
  background-image: radial-gradient(circle at 80% 10%, rgba(14,180,166,0.15) 0%, transparent 60%);
}

/* Kanban drag */
.kanban-card.dragging { opacity: 0.4; transform: rotate(2deg); }
.kanban-drop-zone.drag-over { background: var(--brand-blue-faint) !important; outline: 2px dashed var(--brand-blue); outline-offset: -2px; }

/* Theme toggle in sidebar footer */
.theme-toggle {
  width: 2.75rem; height: 1.5rem;
  background: var(--surface-3); border-radius: var(--r-full);
  position: relative; cursor: pointer;
  border: none; transition: background 0.3s var(--ease); flex-shrink: 0;
}
.theme-toggle::after {
  content: ''; position: absolute; top: 0.2rem; left: 0.2rem;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--text-muted); transition: all 0.3s var(--ease);
}
[data-theme="dark"] .theme-toggle { background: var(--brand-blue); }
[data-theme="dark"] .theme-toggle::after { left: calc(100% - 1.3rem); background: #fff; }

/* ─── PFI & Payment UI Polish ───────────────────────────── */
.btn-orange {
  background: linear-gradient(135deg, var(--brand-orange), #f07020);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(224,92,0,.25);
}
.btn-orange:hover  { opacity: .92; box-shadow: 0 6px 20px rgba(224,92,0,.3); }
.btn-success { background: var(--success); color: #fff; box-shadow: 0 4px 14px rgba(21,128,61,.2); }
.btn-success:hover { opacity: .92; }
.btn-danger  { background: var(--error);   color: #fff; box-shadow: 0 4px 14px rgba(185,28,28,.2); }
.btn-danger:hover  { opacity: .92; }

/* KPI card sub-text */
.kpi-sub { font-size:.6875rem; color:var(--text-muted); margin-top:.25rem; font-weight:500; }

/* Alert component */
.alert { display:flex; align-items:flex-start; gap:.625rem; padding:.875rem 1rem; border-radius:var(--r-xl); border:1px solid; }

/* ─── Premium Progress Bar ─────────────────────────────────── */
.progress-bar{width:100%;height:.5rem;background:var(--surface-2);border-radius:var(--r-full);overflow:hidden;position:relative;}
.progress-bar::after{content:'';position:absolute;top:0;left:0;height:100%;width:var(--progress,0%);
  background:linear-gradient(90deg,var(--brand-blue),var(--brand-blue-light));border-radius:var(--r-full);
  transition:width .6s var(--ease-spring);animation:progressShine 2s ease-in-out infinite;}
@keyframes progressShine{0%{background-position:-100% 0;}100%{background-position:200% 0;}}
.progress-bar.success::after{background:linear-gradient(90deg,var(--success),#22c55e);}
.progress-bar.warning::after{background:linear-gradient(90deg,var(--warning),#fbbf24);}
.progress-bar.danger::after{background:linear-gradient(90deg,var(--error),#f87171);}

/* ─── Premium Stats Card ──────────────────────────────────── */
.stats-card{background:var(--surface-0);border-radius:var(--r-2xl);padding:1.25rem;position:relative;overflow:hidden;
  border:1px solid var(--border);transition:all .3s var(--ease);}
.stats-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--stat-color,var(--brand-blue)),var(--brand-blue-light));}
.stats-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.stats-value{font-family:var(--font-display);font-size:2.25rem;font-weight:800;letter-spacing:-.04em;color:var(--text-primary);line-height:1;}
.stats-label{font-size:.8125rem;color:var(--text-tertiary);font-weight:500;margin-bottom:.5rem;}
.stats-change{display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:600;padding:.25rem .5rem;border-radius:var(--r-md);}
.stats-change.positive{background:var(--success-bg);color:var(--success);}
.stats-change.negative{background:var(--error-bg);color:var(--error);}
.stats-change.neutral{background:var(--surface-2);color:var(--text-tertiary);}

/* ─── Premium Chart Placeholder ─────────────────────────────── */
.chart-container{background:var(--surface-0);border-radius:var(--r-2xl);padding:1.5rem;border:1px solid var(--border);
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.chart-container::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,70,153,.1),transparent);}
.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;}
.chart-title{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--text-primary);}
.chart-legend{display:flex;gap:1rem;font-size:.75rem;}
.chart-legend-item{display:flex;align-items:center;gap:.375rem;}
.chart-legend-dot{width:8px;height:8px;border-radius:50%;background:var(--legend-color,var(--brand-blue));}
.chart-placeholder{height:200px;background:linear-gradient(180deg,var(--surface-1) 0%,var(--surface-2) 100%);
  border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.875rem;}

/* ─── Premium Activity Feed ───────────────────────────────── */
.activity-feed{display:flex;flex-direction:column;gap:1rem;}
.activity-item{display:flex;gap:.875rem;position:relative;}
.activity-item::before{content:'';position:absolute;left:.9375rem;top:2rem;bottom:-1rem;width:1px;background:var(--border);}
.activity-item:last-child::before{display:none;}
.activity-icon{width:1.875rem;height:1.875rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--activity-bg,var(--brand-blue-faint));flex-shrink:0;z-index:1;}
.activity-icon .material-symbols-outlined{font-size:1rem;color:var(--activity-color,var(--brand-blue));}
.activity-content{flex:1;padding-top:.125rem;}
.activity-title{font-size:.875rem;font-weight:600;color:var(--text-primary);margin-bottom:.25rem;}
.activity-meta{font-size:.75rem;color:var(--text-muted);}
.activity-time{font-size:.6875rem;color:var(--text-tertiary);font-weight:500;}

/* ─── Premium Quick Action Buttons ─────────────────────────── */
.quick-action-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:1rem;}
.quick-action-btn{display:flex;flex-direction:column;align-items:center;gap:.625rem;padding:1.25rem;
  background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-xl);cursor:pointer;
  transition:all .3s var(--ease);text-decoration:none;}
.quick-action-btn:hover{background:var(--brand-blue-faint);border-color:var(--brand-blue);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.quick-action-icon{width:3rem;height:3rem;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;
  background:var(--action-bg,var(--brand-blue-faint));color:var(--action-color,var(--brand-blue));}
.quick-action-icon .material-symbols-outlined{font-size:1.5rem;}
.quick-action-label{font-family:var(--font-display);font-size:.8125rem;font-weight:600;color:var(--text-primary);text-align:center;}

/* ─── Premium Notification Badge Pulse ─────────────────────── */
@keyframes badgePulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(224,92,0,.4);}50%{transform:scale(1.1);box-shadow:0 0 0 8px rgba(224,92,0,0);}}
.notification-pulse{animation:badgePulse 2s infinite;}

/* ─── Premium Skeleton Loading ─────────────────────────────── */
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);
  background-size:200% 100%;animation:skeletonShimmer 1.5s infinite;border-radius:var(--r-md);}
@keyframes skeletonShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.skeleton-text{height:.875rem;width:100%;border-radius:var(--r-sm);}
.skeleton-title{height:1.5rem;width:60%;margin-bottom:.75rem;}
.skeleton-avatar{width:2.5rem;height:2.5rem;border-radius:50%;}

/* ─── Premium Empty State ──────────────────────────────────── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;}
.empty-state .material-symbols-outlined{font-size:4rem;color:var(--text-muted);margin-bottom:1.5rem;opacity:.5;}
.empty-state h3{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem;}
.empty-state p{font-size:.875rem;color:var(--text-tertiary);max-width:28rem;margin-bottom:1.5rem;}

/* ─── Premium Tooltip ─────────────────────────────────────── */
[data-tooltip]{position:relative;}
[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + .5rem);left:50%;transform:translateX(-50%);
  background:var(--text-primary);color:var(--surface-0);padding:.375rem .75rem;border-radius:var(--r-md);
  font-size:.75rem;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s var(--ease);
  z-index:1000;}
[data-tooltip]:hover::after{opacity:1;}

/* ─── Premium Floating Action Button ───────────────────────── */
.fab{position:fixed;bottom:2rem;right:2rem;width:3.75rem;height:3.75rem;border-radius:50%;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-light));color:#fff;
  box-shadow:0 8px 32px rgba(0,70,153,.3);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .3s var(--ease);z-index:100;}
.fab:hover{transform:scale(1.1) rotate(90deg);box-shadow:0 12px 48px rgba(0,70,153,.4);}
.fab .material-symbols-outlined{font-size:1.5rem;}
.alert-info { background:rgba(14,130,223,.06); border-color:rgba(14,130,223,.2); color:var(--brand-blue); }
.alert-warning { background:var(--warning-bg); border-color:var(--warning-border); color:var(--warning); }
.alert-success { background:var(--success-bg); border-color:var(--success-border); color:var(--success); }

/* Shadow blue variant for payment type buttons */
:root { --shadow-blue: 0 2px 10px rgba(0,70,153,.3); }

/* Form label small */
.form-label-sm {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

/* Success/warning border variables */
:root {
  --success-border: rgba(21,128,61,.3);
  --warning-border: rgba(180,83,9,.3);
  --error-border:   rgba(185,28,28,.3);
  --brand-orange-dim: rgba(224,92,0,.2);
  --brand-blue-dim: rgba(0,70,153,.15);
}

/* ─── Scheduler / Calendar ──────────────────────────────── */
.cal-cell-hover:hover { background: var(--surface-1) !important; }

/* ─── Expenses purple badge ─────────────────────────────── */
.badge-purple { background: #ede9fe; color: #7c3aed; }

/* ─── Alert variants ────────────────────────────────────── */
.alert-error   { background:var(--error-bg);   border-color:var(--error-border);   color:var(--error); }
.alert-success { background:var(--success-bg);  border-color:var(--success-border); color:var(--success); }
:root {
  --error-bg: #fef2f2;
  --error-border: rgba(185,28,28,.25);
}

/* ─── Sidebar scroll fix ────────────────────────────────── */
#app-sidebar {
  overflow-y: auto;
  overflow-x: hidden;
}
#app-sidebar::-webkit-scrollbar { width: 3px; }
#app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 999px; }

/* ─── Search result item ────────────────────────────────── */
.search-result-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.25rem;
  cursor: pointer;
  transition: background .15s;
  border-radius: var(--r-lg);
  margin: .125rem .5rem;
}
/* ─── Search result item ────────────────────────────────── */
.search-result-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.25rem;
  cursor: pointer;
  transition: background .15s;
  border-radius: var(--r-lg);
  margin: .125rem .5rem;
}
.search-result-item:hover { background: var(--surface-2); }

/* ─── KPI Trend Arrows ──────────────────────────────────── */
.kpi-trend {
  font-size: .75rem;
  font-weight: 800;
  padding: .125rem .4rem;
  border-radius: .375rem;
  line-height: 1;
}
.kpi-trend.up   { background: var(--success-bg); color: var(--success); }
.kpi-trend.down { background: var(--error-bg); color: var(--error); }
.kpi-trend.flat { background: var(--surface-2); color: var(--text-muted); }

.kpi-sub {
  font-size: .6875rem;
  color: var(--text-muted);
  margin-top: .1875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* KPI card CSS variable support */
.kpi-card {
  --kpi-color: var(--brand-blue);
  --kpi-bg: var(--brand-blue-faint);
}
.kpi-card .kpi-icon {
  background: var(--kpi-bg, var(--brand-blue-faint));
  color: var(--kpi-color, var(--brand-blue));
}
[style*="--kpi-bar"] .kpi-icon {
  background: var(--kpi-icon-bg, rgba(0,70,153,.1));
  color: var(--kpi-icon-color, var(--brand-blue));
}

/* ─── Sticky Table Headers ──────────────────────────────────── */
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-1);
}

/* ─── Tag / Chip Component ──────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1875rem .625rem;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: default;
  white-space: nowrap;
}
.tag-blue   { background: var(--brand-blue-faint); color: var(--brand-blue); border-color: var(--brand-blue-dim); }
.tag-green  { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.tag-orange { background: var(--brand-orange-faint); color: var(--brand-orange); border-color: var(--brand-orange-dim); }
.tag-red    { background: var(--error-bg); color: var(--error); border-color: var(--error-border); }
.tag-purple { background: var(--purple-bg); color: var(--purple); border-color: rgba(124,58,237,.2); }

/* ─── No-scrollbar utility ──────────────────────────────────── */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ─── btn-danger ────────────────────────────────────────────── */
.btn-danger {
  background: var(--error);
  color: white;
  border: none;
}
.btn-danger:hover { filter: brightness(1.1); }

/* ─── Split Card ────────────────────────────────────────────── */
.split-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* ─── Dashboard animate-in delays ──────────────────────────── */
.animate-in { animation: fadeSlideIn .35s cubic-bezier(0.22,0.61,0.36,1) both; }
.anim-d1 { animation-delay: .04s; }
.anim-d2 { animation-delay: .08s; }
.anim-d3 { animation-delay: .12s; }
.anim-d4 { animation-delay: .18s; }
.anim-d5 { animation-delay: .24s; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Print Styles ──────────────────────────────────────────── */
@media print {
  #app-topbar, #app-sidebar, #app-bottomnav, #login-screen,
  .btn, .page-header .btn, .section-header .btn { display: none !important; }
  #app-content { margin: 0 !important; padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
  .data-table { font-size: 10pt; }
  h1 { font-size: 16pt; }
}

/* ─── Payslip specific ──────────────────────────────────────── */
.payslip-section { break-inside: avoid; }

/* ─── Scrollbar Theming ─────────────────────────────────────── */
.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── Button success variant ────────────────────────────────── */
.btn-success {
  background: var(--success);
  color: white;
  border: none;
}
.btn-success:hover { filter: brightness(1.08); }

/* ─── Dark mode additions ───────────────────────────────────── */
[data-theme="dark"] {
  --brand-blue-faint: rgba(0,70,153,.2);
  --brand-orange-faint: rgba(224,92,0,.15);
  --success-bg: rgba(21,128,61,.15);
  --error-bg: rgba(185,28,28,.15);
  --warning-bg: rgba(180,83,9,.15);
}

/* ─── Empty state ───────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}
.empty-state .material-symbols-outlined {
  font-size: 3rem;
  display: block;
  margin-bottom: .75rem;
  opacity: .2;
}
.empty-state h3 { font-size: 1rem; color: var(--text-secondary); margin-bottom: .375rem; }
.empty-state p  { font-size: .875rem; }

/* ─── Data Table Enhancements ───────────────────────────── */
.data-table-wrap { overflow-x: auto; border-radius: var(--r-2xl); border: 1px solid var(--border); }
.data-table thead { position: sticky; top: 0; z-index: 2; }
.data-table thead tr { background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-mid)) !important; }
.data-table th { color: rgba(255,255,255,.9) !important; border-bottom: none; }
.data-table tbody tr:nth-child(even) { background: var(--surface-1); }

/* ─── Status Stamp Overlay ─────────────────────────────────── */
.status-stamp {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem .875rem; border-radius: var(--r-full);
  font-family: var(--font-display); font-size: .65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; border: 2px solid currentColor;
}
.status-stamp.paid   { color: var(--success); background: var(--success-bg); }
.status-stamp.pending{ color: var(--warning); background: var(--warning-bg); }
.status-stamp.overdue{ color: var(--error);   background: var(--error-bg); }
.status-stamp.draft  { color: var(--text-muted); background: var(--surface-2); }

/* ─── Timeline ──────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: .625rem; position: relative; }
.timeline::before { content: ''; position: absolute; left: 1.125rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--border); z-index: 0; }
.timeline-item { display: flex; gap: .75rem; align-items: flex-start; position: relative; z-index: 1; }
.timeline-dot { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--surface-0); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.timeline-dot.success { border-color: var(--success); background: var(--success-bg); }
.timeline-dot.warning { border-color: var(--warning); background: var(--warning-bg); }
.timeline-body { flex: 1; background: var(--surface-1); border-radius: var(--r-xl); padding: .75rem; border: 1px solid var(--border); }

/* ─── Tab Navigation ───────────────────────────────────────── */
.tab-nav { display: flex; gap: .25rem; background: var(--surface-1); border-radius: var(--r-xl); padding: .25rem; border: 1px solid var(--border); flex-wrap: wrap; }
.tab-btn { flex: 1; min-width: fit-content; padding: .5rem 1rem; border-radius: var(--r-lg); font-family: var(--font-display); font-size: .8125rem; font-weight: 600; cursor: pointer; border: none; background: transparent; color: var(--text-tertiary); display: flex; align-items: center; gap: .375rem; justify-content: center; transition: all .16s var(--ease); white-space: nowrap; }
.tab-btn.active { background: var(--surface-0); color: var(--brand-blue); box-shadow: var(--shadow-xs); border: 1px solid var(--border); }
.tab-btn:hover:not(.active) { background: var(--surface-2); color: var(--text-secondary); }

/* ─── Section Header ───────────────────────────────────────── */
.section-header { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); margin: -1.5rem -1.5rem 1.25rem; }
.section-header h2 { font-size: 1rem; font-weight: 700; }
.section-header .material-symbols-outlined { color: var(--brand-blue); font-size: 1.25rem; }

/* ─── Document Action Buttons ─────────────────────────────── */
.doc-action-btn { width: 2rem; height: 2rem; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--border); background: var(--surface-0); cursor: pointer; transition: all .15s var(--ease); color: var(--text-tertiary); }
.doc-action-btn:hover { background: var(--brand-blue-faint); border-color: var(--brand-blue-dim); color: var(--brand-blue); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ─── Tooltip ──────────────────────────────────────────────── */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--text-primary); color: var(--text-invert); font-size: .6875rem; white-space: nowrap; padding: .25rem .625rem; border-radius: var(--r-md); opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s; }
[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── Mobile Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  #app-sidebar { transform: translateX(-100%); z-index: 200; width: 16rem; }
  #app-sidebar.mobile-open { transform: translateX(0); box-shadow: var(--shadow-xl); }
  #app-content { margin-left: 0 !important; padding: calc(var(--topbar-h) + 1rem) 1rem 5rem; }
  #app-bottomnav { display: flex; }
  .page-header h1 { font-size: 1.375rem; }
  .kpi-card .kpi-value { font-size: 1.5rem; }
  .modal-content { margin: .5rem; max-height: 95dvh; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .data-table th, .data-table td { padding: .5rem .625rem; font-size: .8rem; }
}

/* ─── Finance Ledger Export Button ─────────────────────────── */
.ledger-export-btn { display: inline-flex; align-items: center; gap: .375rem; padding: .5rem 1.25rem; background: var(--surface-1); border: 1.5px solid var(--border); border-radius: var(--r-lg); color: var(--success); font-weight: 700; font-size: .8125rem; cursor: pointer; transition: all .15s; }
.ledger-export-btn:hover { background: var(--success-bg); border-color: var(--success-border); }

/* ─── Document Status Left-Border ──────────────────────────── */
.doc-status-draft    { border-left: 4px solid var(--text-muted) !important; }
.doc-status-approved { border-left: 4px solid var(--brand-blue) !important; }
.doc-status-paid     { border-left: 4px solid var(--success) !important; }
.doc-status-partial  { border-left: 4px solid var(--warning) !important; }
.doc-status-overdue  { border-left: 4px solid var(--error) !important; }

/* ─── Progress Bar variants ────────────────────────────────── */
.progress-bar { background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; transition: width .7s cubic-bezier(.4,0,.2,1); }
.progress-fill.blue { background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-light)); }
.progress-fill.green { background: linear-gradient(90deg, var(--success), #22c55e); }
.progress-fill.orange { background: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-mid)); }

/* ─── Float Action (mobile) ────────────────────────────────── */
.fab { position: fixed; bottom: 5rem; right: 1.5rem; z-index: 150; width: 3.5rem; height: 3.5rem; border-radius: var(--r-full); background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-mid)); color: white; box-shadow: var(--shadow-blue), var(--shadow-lg); display: none; align-items: center; justify-content: center; border: none; cursor: pointer; transition: transform .2s var(--ease-spring); }
.fab:hover { transform: scale(1.08); }
@media (max-width: 768px) { .fab { display: flex; } }

/* ─── Pulsing Finance Badge ────────────────────────────────── */
@keyframes badge-pulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
.pulse { animation: badge-pulse 1.8s ease-in-out infinite; }

/* ─── Print: color-accurate ────────────────────────────────── */
@media print {
  .receipt-header, .kpi-card::before, .data-table thead tr {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* Quick Actions bar – removed */

/* ================================================================
   UI Refresh 2026-04
   High-level visual polish applied as late overrides
   ================================================================ */

body{
  background:
    radial-gradient(circle at top left, rgba(0,70,153,.12), transparent 30%),
    radial-gradient(circle at top right, rgba(224,92,0,.10), transparent 24%),
    linear-gradient(180deg, #eef4ff 0%, #f6f7fb 22%, #f3f5f9 100%);
  background-attachment: fixed;
}

body::before,
body::after{
  content:'';
  position:fixed;
  z-index:-1;
  pointer-events:none;
  filter:blur(28px);
  opacity:.9;
}

body::before{
  width:18rem;
  height:18rem;
  top:5rem;
  left:14rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(58,128,232,.18) 0%, rgba(58,128,232,0) 70%);
}

body::after{
  width:20rem;
  height:20rem;
  right:2rem;
  top:8rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(240,112,32,.14) 0%, rgba(240,112,32,0) 72%);
}

[data-theme="dark"] body{
  background:
    radial-gradient(circle at top left, rgba(58,128,232,.12), transparent 28%),
    radial-gradient(circle at top right, rgba(224,92,0,.10), transparent 24%),
    linear-gradient(180deg, #0a0f17 0%, #0f1520 24%, #111827 100%);
}

#app-topbar{
  background:rgba(255,255,255,.74);
  border-bottom:1px solid rgba(255,255,255,.75);
  box-shadow:0 12px 40px rgba(15,23,42,.08);
}

[data-theme="dark"] #app-topbar{
  background:rgba(17,24,39,.72);
  border-bottom:1px solid rgba(255,255,255,.06);
}

#app-sidebar{
  width:20.75rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    radial-gradient(circle at top left, rgba(59,130,246,.16), transparent 26%),
    linear-gradient(180deg, #091423 0%, #0d1b31 45%, #101d38 100%);
}

.sidebar-brand{
  background:linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.sidebar-section{
  color:rgba(255,255,255,.4);
  letter-spacing:.18em;
}

.nav-item{
  margin:.1rem .65rem;
  border:1px solid transparent;
}

.nav-item:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.05);
  transform:translateX(4px);
}

.nav-item.active{
  background:linear-gradient(135deg, rgba(37,99,235,.55), rgba(14,165,233,.22));
  border-color:rgba(147,197,253,.18);
  box-shadow:0 10px 24px rgba(0,70,153,.22);
}

.sidebar-footer{
  margin:.75rem;
  margin-top:auto;
  padding:1rem .95rem;
  border-radius:1.1rem;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

#app-content{
  padding:calc(var(--topbar-h) + 2rem) 2rem 3.25rem;
}

#app-content > .page-container{
  max-width:85rem;
}

.page-header{
  position:relative;
  margin-bottom:2.25rem;
  padding:1.6rem 1.8rem;
  border-radius:1.6rem;
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.6));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 18px 45px rgba(15,23,42,.06);
  overflow:hidden;
}

.page-header::before{
  content:'';
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg, var(--brand-blue), var(--brand-blue-light), var(--brand-orange-mid));
  opacity:.9;
}

[data-theme="dark"] .page-header{
  background:linear-gradient(180deg, rgba(22,27,34,.86), rgba(22,27,34,.7));
  border-color:rgba(255,255,255,.06);
}

.breadcrumb{
  display:inline-flex;
  padding:.35rem .7rem;
  border-radius:999px;
  background:rgba(0,70,153,.08);
}

.card,
.kpi-card,
.stats-card{
  border-color:rgba(226,230,240,.7);
  box-shadow:0 12px 32px rgba(15,23,42,.06), 0 1px 0 rgba(255,255,255,.7) inset;
  backdrop-filter:blur(8px);
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));
}

.card:hover,
.kpi-card:hover,
.stats-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 42px rgba(15,23,42,.1), 0 1px 0 rgba(255,255,255,.75) inset;
}

[data-theme="dark"] .card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .stats-card{
  background:linear-gradient(180deg, rgba(28,35,48,.92), rgba(22,27,34,.88));
  box-shadow:0 16px 36px rgba(0,0,0,.26), 0 1px 0 rgba(255,255,255,.03) inset;
}

.kpi-card{
  padding:1.45rem 1.55rem;
}

.kpi-card::after{
  opacity:.85;
}

.btn{
  border-radius:999px;
  font-weight:700;
  letter-spacing:-.01em;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}

.btn-primary{
  background:linear-gradient(135deg, #0453b8 0%, #1b6fe0 55%, #3a80e8 100%);
}

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

.btn-secondary,
.btn-ghost{
  border:1px solid rgba(15,23,42,.08);
}

.icon-btn{
  width:2.5rem;
  height:2.5rem;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}

.icon-btn:hover{
  background:#fff;
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(15,23,42,.09);
}

[data-theme="dark"] .icon-btn{
  background:rgba(31,41,55,.75);
  border-color:rgba(255,255,255,.07);
}

.company-pill{
  padding:.48rem .92rem;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}

[data-theme="dark"] .company-pill{
  background:rgba(31,41,55,.8);
  border-color:rgba(255,255,255,.06);
}

.data-table-wrap,
.data-table{
  border-radius:1.2rem;
}

.data-table thead tr{
  background:linear-gradient(135deg, rgba(0,70,153,.96), rgba(21,99,204,.92)) !important;
}

.data-table tbody tr{
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.data-table tbody tr:hover{
  background:linear-gradient(90deg, rgba(0,70,153,.05), rgba(224,92,0,.04));
  transform:translateX(2px);
}

[data-theme="dark"] .data-table tbody tr:hover{
  background:linear-gradient(90deg, rgba(59,130,246,.08), rgba(249,115,22,.06));
}

.empty-state{
  padding:4.5rem 2rem;
  border-radius:1.5rem;
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.28));
  border:1px dashed rgba(0,70,153,.18);
}

[data-theme="dark"] .empty-state{
  background:linear-gradient(180deg, rgba(28,35,48,.68), rgba(22,27,34,.46));
  border-color:rgba(96,165,250,.14);
}

.search-box{
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.9));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 30px 60px rgba(15,23,42,.14);
}

[data-theme="dark"] .search-box{
  background:linear-gradient(180deg, rgba(22,27,34,.96), rgba(28,35,48,.92));
  border-color:rgba(255,255,255,.08);
}

/* qa-main override – removed */

@media (max-width: 1024px){
  body::before{left:-3rem;top:6rem;}
  body::after{right:-4rem;top:14rem;}
  #app-content{padding:calc(var(--topbar-h) + 1.25rem) 1rem 5.25rem;}
  .page-header{padding:1.25rem 1.15rem;border-radius:1.25rem;}
}
/* quick-actions-bar mobile – removed */

/* ================================================================
   UI Cleanup 2026-04
   Faster-feeling shell and more organized enterprise layout
   ================================================================ */

:root{
  --sidebar-w:14.75rem;
}

body{
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.08), transparent 26%),
    linear-gradient(180deg, #f5f7fb 0%, #eef2f8 100%);
}

[data-theme="dark"] body{
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.14), transparent 24%),
    linear-gradient(180deg, #0b1120 0%, #111827 100%);
}

#app-topbar{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

#app-sidebar{
  contain:layout paint;
  scrollbar-gutter:stable;
}

#app-content{
  padding:calc(var(--topbar-h) + 1.25rem) 1.35rem 2.5rem;
}

#app-content > .page-container{
  max-width:78rem;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}

.sidebar-section{
  margin-top:.8rem;
  padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.06);
}

.nav-item{
  min-height:2.9rem;
  padding:.5rem .95rem;
  font-size:.84rem;
}

.nav-item.sub{
  margin-left:1rem;
  padding-left:.85rem;
  opacity:.94;
}

.nav-item:hover,
.nav-item.active{
  transform:none;
}

.page-header{
  margin-bottom:0;
  padding:1.2rem 1.3rem;
  border-radius:1.25rem;
}

.page-header h1{
  font-size:1.6rem;
}

.breadcrumb{
  margin-bottom:.65rem;
}

.card,
.kpi-card,
.stats-card,
.search-box{
  border-radius:1.1rem;
}

.card,
.kpi-card,
.stats-card{
  box-shadow:0 8px 22px rgba(15,23,42,.06);
}

.card:hover,
.kpi-card:hover,
.stats-card:hover,
.data-table tbody tr:hover{
  transform:none;
}

.section-header{
  margin:-1.2rem -1.2rem 1rem;
  padding:.9rem 1.2rem;
  background:linear-gradient(180deg, rgba(0,70,153,.03), rgba(0,70,153,0));
  border-bottom:1px solid var(--border);
}

.grid-2,
.grid-3,
.grid-4{
  align-items:start;
}

.data-table{
  table-layout:auto;
}

.data-table th{
  font-size:.66rem;
}

.data-table td{
  padding:.7rem .9rem;
}

.data-table tbody tr:nth-child(even){
  background:rgba(15,23,42,.018);
}

[data-theme="dark"] .data-table tbody tr:nth-child(even){
  background:rgba(255,255,255,.018);
}

@media (max-width: 1024px){
  #app-content{
    padding:calc(var(--topbar-h) + 1rem) 1rem 5rem;
  }

  #app-content > .page-container{
    gap:1rem;
  }

  .page-header{
    padding:1rem 1.05rem;
  }
}

/* ================================================================
   Visual Reset 2026-04
   Cleaner shell, reliable icon font rendering, calmer dashboard
   ================================================================ */

.material-symbols-outlined{
  font-family:"Material Symbols Local","Material Symbols Outlined";
  font-weight:normal;
  font-style:normal;
  letter-spacing:normal;
  text-transform:none;
  white-space:nowrap;
}

#app-topbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1rem;
  align-items:center;
}

#app-topbar > div:first-child,
#app-topbar > div:last-child{
  min-width:0;
}

#app-topbar > div:last-child{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:.45rem;
  flex-wrap:nowrap;
}

#app-topbar a[href="#/dashboard"]{
  min-width:0;
}

#company-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.icon-btn{
  width:2.25rem;
  height:2.25rem;
}

.icon-btn .material-symbols-outlined{
  font-size:1.15rem;
}

.company-pill{
  padding:.42rem .78rem;
  white-space:nowrap;
}

#app-sidebar{
  width:14.5rem;
}

.sidebar-brand{
  margin:.35rem .55rem .55rem;
}

.nav-item{
  margin:.08rem .55rem;
  min-height:2.7rem;
}

.nav-item.sub{
  margin-left:.9rem;
}

.dashboard-shell{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}

.dashboard-hero{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(18rem,.95fr);
  gap:1.1rem;
  align-items:center;
  padding:1.45rem 1.55rem;
  border-radius:1.3rem;
  color:#fff;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(135deg, #123a8f 0%, #1e5cc8 55%, #1d97d7 100%);
  box-shadow:0 18px 38px rgba(15,65,145,.22);
}

.dashboard-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.34rem .7rem;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  font-size:.74rem;
  font-weight:700;
  margin-bottom:.8rem;
}

.dashboard-hero h1{
  margin:0 0 .3rem;
  font-size:2rem;
  font-weight:800;
  letter-spacing:-.04em;
  color:#fff;
}

.dashboard-hero p{
  margin:0;
  color:rgba(255,255,255,.88);
}

.dashboard-hero__meta{
  margin-top:.6rem;
  color:rgba(255,255,255,.72);
  font-size:.82rem;
}

.dashboard-hero__actions{
  display:flex;
  flex-direction:column;
  gap:.85rem;
}

.dashboard-clock-card{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.9rem 1rem;
  border-radius:1rem;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
}

.dashboard-clock-card small{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.dashboard-clock-card strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.18rem;
  font-weight:800;
  color:#fff;
}

.dashboard-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  justify-content:flex-end;
}

.dashboard-cta-row .btn{
  box-shadow:none;
}

.dashboard-cta-row .btn-secondary{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
  color:#fff;
}

.dashboard-cta-row .btn-secondary:hover{
  background:rgba(255,255,255,.18);
}

.dashboard-cta-row .btn-primary{
  background:#fff;
  color:#0f3c8e;
}

.dashboard-metric-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}

.dashboard-metric-card{
  min-height:11.75rem;
  display:flex;
  flex-direction:column;
  gap:.68rem;
  padding:1.15rem;
  border-radius:1.2rem;
  color:#fff;
  box-shadow:0 12px 26px rgba(15,23,42,.12);
}

.dashboard-metric-card__head,
.dashboard-metric-card__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

.dashboard-metric-card__head .material-symbols-outlined{
  font-size:1.5rem;
}

.dashboard-metric-card__badge{
  padding:.26rem .62rem;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.dashboard-metric-card__value{
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.04em;
}

.dashboard-metric-card__label{
  color:rgba(255,255,255,.84);
  font-size:.88rem;
}

.dashboard-metric-card__foot{
  margin-top:auto;
  padding-top:.8rem;
  border-top:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.76);
  font-size:.76rem;
}

.dashboard-metric-card__foot strong{
  color:#fff;
  font-size:.82rem;
}

.dashboard-metric-progress{
  width:100%;
  height:.38rem;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  overflow:hidden;
}

.dashboard-metric-progress span{
  display:block;
  height:100%;
  background:#fff;
  border-radius:999px;
}

.dashboard-metric-card--revenue{background:linear-gradient(135deg,#5f6fe5 0%,#7c4ec2 100%);}
.dashboard-metric-card--production{background:linear-gradient(135deg,#da5eb6 0%,#ee6276 100%);}
.dashboard-metric-card--cash{background:linear-gradient(135deg,#2499d8 0%,#25c1eb 100%);}
.dashboard-metric-card--inventory{background:linear-gradient(135deg,#28b56f 0%,#4ad9b2 100%);}

.dashboard-focus-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(18rem,1fr);
  gap:1.25rem;
  margin-bottom:1.75rem;
}
.dashboard-focus-card{
  background:var(--surface-0);
  border:1px solid var(--border);
  border-radius:1.35rem;
  padding:1.15rem 1.2rem;
  box-shadow:var(--shadow-sm);
}
.dashboard-focus-card h3{
  font-size:1rem;
  font-weight:800;
  margin-bottom:.25rem;
  letter-spacing:-.02em;
}
.dashboard-focus-card p{
  color:var(--text-tertiary);
  font-size:.86rem;
  margin-bottom:1rem;
}
.dashboard-focus-list{
  display:grid;
  gap:.75rem;
}
.dashboard-focus-item{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  padding:.8rem .9rem;
  border-radius:1rem;
  background:var(--surface-1);
  border:1px solid rgba(0,70,153,.07);
}
.dashboard-focus-item .material-symbols-outlined{
  width:2rem;
  height:2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:.8rem;
  background:var(--brand-blue-faint);
  color:var(--brand-blue);
  font-size:1.05rem;
  flex-shrink:0;
}
.dashboard-focus-item strong{
  display:block;
  font-size:.88rem;
  font-weight:700;
  color:var(--text-primary);
  margin-bottom:.15rem;
}
.dashboard-focus-item span{
  display:block;
  font-size:.8rem;
  color:var(--text-tertiary);
  line-height:1.45;
}
.dashboard-command-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.95rem 1.1rem;
  border-radius:1.1rem;
  background:linear-gradient(135deg,var(--surface-0),var(--surface-1));
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
  margin-bottom:1.25rem;
}
.dashboard-command-strip__meta{
  display:flex;
  align-items:center;
  gap:.85rem;
  min-width:0;
}
.dashboard-command-strip__icon{
  width:2.4rem;
  height:2.4rem;
  border-radius:.9rem;
  background:linear-gradient(135deg,var(--brand-blue-faint),#dfe9ff);
  color:var(--brand-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.dashboard-command-strip h4{
  font-size:.92rem;
  font-weight:800;
  margin-bottom:.12rem;
}
.dashboard-command-strip p{
  font-size:.8rem;
  color:var(--text-tertiary);
}
.dashboard-shortcuts{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.dashboard-chip-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .8rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface-0);
  color:var(--text-secondary);
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  transition:all .16s var(--ease);
}
.dashboard-chip-btn:hover{
  border-color:var(--brand-blue-dim);
  color:var(--brand-blue);
  background:var(--brand-blue-faint);
}
@media (max-width: 980px){
  .dashboard-focus-grid{grid-template-columns:1fr;}
  .dashboard-command-strip{flex-direction:column;align-items:flex-start;}
  .dashboard-shortcuts{justify-content:flex-start;}
}

/* Sidebar visual direction inspired by the uploaded concept */
#app-sidebar{
  background:
    radial-gradient(circle at 18% 12%, rgba(74,144,255,.24), transparent 26%),
    radial-gradient(circle at 78% 42%, rgba(255,146,86,.16), transparent 24%),
    radial-gradient(circle at 68% 78%, rgba(201,111,255,.16), transparent 22%),
    radial-gradient(circle at 32% 64%, rgba(89,215,255,.12), transparent 20%),
    linear-gradient(180deg, rgba(10,17,38,.96) 0%, rgba(8,12,26,.98) 100%);
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:16px 0 42px rgba(0,0,0,.34);
}
#app-sidebar::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.12) 0 1px, transparent 1.4px),
    radial-gradient(circle at 78% 32%, rgba(255,255,255,.08) 0 1px, transparent 1.6px),
    radial-gradient(circle at 58% 74%, rgba(255,255,255,.08) 0 1px, transparent 1.4px),
    radial-gradient(circle at 26% 84%, rgba(255,255,255,.06) 0 1px, transparent 1.2px);
  background-size:240px 240px, 300px 300px, 280px 280px, 220px 220px;
  opacity:.9;
}
.sidebar-brand{
  position:relative;
  margin:.5rem .9rem 1rem;
  padding:.88rem 1rem;
  border-radius:1.15rem;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    0 12px 28px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.sidebar-brand::after{
  content:'';
  position:absolute;
  inset:auto .9rem -.2rem .9rem;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}
.sidebar-section{
  padding:.9rem 1.55rem .3rem;
  color:rgba(255,255,255,.46);
  letter-spacing:.18em;
  font-size:.62rem;
}
.nav-item{
  margin:0 .95rem .52rem;
  padding:.86rem 1rem;
  border-radius:1.04rem;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 10px 20px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.05);
  color:rgba(255,255,255,.9);
  overflow:hidden;
}
.nav-item.sub{
  margin-left:.95rem;
  margin-right:.95rem;
  padding-left:1rem;
  font-size:.86rem;
}
.nav-item::before{
  left:auto;
  right:0;
  top:auto;
  bottom:0;
  width:0;
  height:2px;
  transform:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  border-radius:999px;
  transition:width .22s var(--ease);
}
.nav-item::after{
  content:'chevron_right';
  font-family:'Material Symbols Local','Material Symbols Outlined';
  font-size:1.02rem;
  line-height:1;
  color:rgba(255,255,255,.58);
  margin-left:auto;
  transition:transform .18s var(--ease), color .18s var(--ease);
}
.nav-item:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07));
  border-color:rgba(255,255,255,.14);
  box-shadow:
    0 14px 28px rgba(0,0,0,.18),
    0 0 22px rgba(84,146,255,.12),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-item:hover::before,
.nav-item.active::before{width:100%;}
.nav-item:hover::after{
  color:rgba(255,255,255,.86);
  transform:translateX(2px);
}
.nav-item.active{
  background:
    radial-gradient(circle at 10% 50%, rgba(130,195,255,.26), transparent 18%),
    linear-gradient(90deg, rgba(74,126,255,.38), rgba(82,145,255,.18) 55%, rgba(74,126,255,.26) 100%);
  border-color:rgba(120,178,255,.45);
  box-shadow:
    0 16px 32px rgba(0,0,0,.24),
    0 0 26px rgba(85,151,255,.34),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.nav-item.active::after{
  color:#f8fbff;
}
.nav-item .material-symbols-outlined{
  width:2.1rem;
  height:2.1rem;
  border-radius:.8rem;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-item.active .material-symbols-outlined{
  box-shadow:
    0 0 18px color-mix(in srgb, var(--nav-icon-color) 38%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.nav-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.3rem;
  height:1.3rem;
  padding:0 .35rem;
  margin-left:.55rem;
  border-radius:999px;
  background:linear-gradient(135deg,#ff6b6b,#ff476f);
  color:#fff;
  font-size:.68rem;
  font-weight:800;
  box-shadow:0 0 14px rgba(255,91,114,.45);
}

.nav-item[data-route="dashboard"],
.nav-item[data-route="pfi"],
.nav-item[data-route="production"],
.nav-item[data-route="stores"],
.nav-item[data-route="invoice"],
.nav-item[data-route="financial-reports"]{
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.055)),
    linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border-color:rgba(255,255,255,.12);
}
.nav-item[data-route="dashboard"]{
  box-shadow:
    0 12px 26px rgba(0,0,0,.2),
    0 0 26px rgba(88,150,255,.32),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-item[data-route="pfi"]{
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 18px rgba(80,141,255,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-item[data-route="production"]{
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 20px rgba(255,160,92,.2),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-item[data-route="stores"]{
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 20px rgba(255,199,92,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-item[data-route="invoice"]{
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 18px rgba(54,211,180,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-item[data-route="financial-reports"]{
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 20px rgba(186,103,255,.22),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.nav-item[data-route="dashboard"].active{
  background:
    radial-gradient(circle at 14% 50%, rgba(152,215,255,.34), transparent 18%),
    linear-gradient(90deg, rgba(84,135,255,.55), rgba(95,146,255,.24) 58%, rgba(104,191,255,.38) 100%);
  border-color:rgba(128,185,255,.56);
  box-shadow:
    0 16px 36px rgba(0,0,0,.26),
    0 0 34px rgba(85,151,255,.42),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.nav-item[data-route="pfi"].active{
  background:
    radial-gradient(circle at 14% 50%, rgba(147,204,255,.26), transparent 18%),
    linear-gradient(90deg, rgba(54,127,255,.38), rgba(82,116,202,.18) 58%, rgba(99,74,189,.22) 100%);
}
.nav-item[data-route="production"].active{
  background:
    radial-gradient(circle at 14% 50%, rgba(255,205,133,.26), transparent 18%),
    linear-gradient(90deg, rgba(247,138,61,.38), rgba(205,120,78,.18) 58%, rgba(162,98,122,.18) 100%);
  border-color:rgba(255,177,115,.4);
}
.nav-item[data-route="stores"].active{
  background:
    radial-gradient(circle at 14% 50%, rgba(255,219,141,.28), transparent 18%),
    linear-gradient(90deg, rgba(231,160,67,.42), rgba(190,116,72,.2) 58%, rgba(149,93,98,.14) 100%);
  border-color:rgba(255,202,126,.42);
}
.nav-item[data-route="invoice"].active{
  background:
    radial-gradient(circle at 14% 50%, rgba(137,255,222,.24), transparent 18%),
    linear-gradient(90deg, rgba(54,204,166,.38), rgba(53,127,175,.18) 58%, rgba(88,103,186,.16) 100%);
  border-color:rgba(120,241,213,.38);
}
.nav-item[data-route="financial-reports"].active{
  background:
    radial-gradient(circle at 14% 50%, rgba(218,169,255,.26), transparent 18%),
    linear-gradient(90deg, rgba(144,81,255,.36), rgba(140,81,214,.18) 58%, rgba(210,112,206,.22) 100%);
  border-color:rgba(198,143,255,.42);
}
.sidebar-footer{
  margin:.6rem .75rem .9rem;
  padding:1rem .95rem .85rem;
  border-top:none;
  border-radius:1.1rem;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}
#sidebar-user-info{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.08);
}
@media (max-width: 1024px){
  #app-sidebar{
    box-shadow:20px 0 44px rgba(0,0,0,.42);
  }
}

@media (max-width: 1200px){
  .dashboard-metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 900px){
  #app-topbar{
    grid-template-columns:1fr;
    height:auto;
    min-height:var(--topbar-h);
    padding:.55rem .85rem;
  }

  #app-topbar > div:last-child{
    justify-self:stretch;
    justify-content:flex-end;
  }

  .dashboard-hero{
    grid-template-columns:1fr;
    padding:1.15rem;
  }

  .dashboard-cta-row{
    justify-content:flex-start;
  }
}

@media (max-width: 640px){
  .dashboard-metric-grid{
    grid-template-columns:1fr;
  }

  .dashboard-hero h1{
    font-size:1.55rem;
  }
}

/* Forced sidebar reference skin */
.sidebar-reference-skin{
  width:20.75rem !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(74,144,255,.26), transparent 26%),
    radial-gradient(circle at 82% 44%, rgba(255,154,97,.17), transparent 24%),
    radial-gradient(circle at 70% 78%, rgba(205,122,255,.18), transparent 22%),
    radial-gradient(circle at 32% 64%, rgba(89,215,255,.12), transparent 20%),
    linear-gradient(180deg, rgba(11,16,36,.98) 0%, rgba(8,11,24,.99) 100%) !important;
  border-right:1px solid rgba(255,255,255,.08) !important;
  box-shadow:18px 0 46px rgba(0,0,0,.38) !important;
}
.sidebar-reference-skin ~ #app-content{
  margin-left:20.75rem !important;
}
.sidebar-reference-skin ~ #app-bottomnav{
  display:none;
}
.sidebar-reference-skin .sidebar-brand{
  margin:.55rem .9rem 1rem !important;
  padding:.95rem 1rem !important;
  border-radius:1.2rem !important;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.045)) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.sidebar-reference-skin .sidebar-section{
  padding:.95rem 1.55rem .34rem !important;
  font-size:.64rem !important;
  letter-spacing:.19em !important;
  color:rgba(255,255,255,.48) !important;
}
.sidebar-reference-skin .nav-item{
  margin:0 .95rem .52rem !important;
  padding:.9rem 1rem !important;
  min-height:3.35rem !important;
  border-radius:1.04rem !important;
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
  border:1px solid rgba(255,255,255,.085) !important;
  color:rgba(255,255,255,.92) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.sidebar-reference-skin .nav-item.sub{
  margin-left:.95rem !important;
  margin-right:.95rem !important;
  padding-left:1rem !important;
  font-size:.86rem !important;
}
.sidebar-reference-skin .nav-item::before{
  left:auto !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  width:0 !important;
  height:2px !important;
  transform:none !important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent) !important;
}
.sidebar-reference-skin .nav-item::after{
  content:'chevron_right' !important;
  font-family:'Material Symbols Local','Material Symbols Outlined' !important;
  color:rgba(255,255,255,.6) !important;
  font-size:1rem !important;
  margin-left:auto !important;
}
.sidebar-reference-skin .nav-item:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.065)) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.18), 0 0 24px rgba(84,146,255,.12), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.sidebar-reference-skin .nav-item:hover::before,
.sidebar-reference-skin .nav-item.active::before{
  width:100% !important;
}
.sidebar-reference-skin .nav-item.active{
  color:#fff !important;
  border-color:rgba(128,185,255,.5) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.26), 0 0 30px rgba(85,151,255,.38), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.sidebar-reference-skin .nav-item .material-symbols-outlined{
  width:2.1rem !important;
  height:2.1rem !important;
  border-radius:.78rem !important;
  border:1px solid rgba(255,255,255,.1) !important;
}
.sidebar-reference-skin .nav-item[data-route="dashboard"]{
  background:
    radial-gradient(circle at 14% 50%, rgba(152,215,255,.34), transparent 18%),
    linear-gradient(90deg, rgba(84,135,255,.5), rgba(95,146,255,.22) 58%, rgba(104,191,255,.32) 100%) !important;
}
.sidebar-reference-skin .nav-item[data-route="pfi"]{
  background:
    radial-gradient(circle at 14% 50%, rgba(147,204,255,.18), transparent 18%),
    linear-gradient(90deg, rgba(54,127,255,.22), rgba(82,116,202,.1) 58%, rgba(99,74,189,.12) 100%) !important;
}
.sidebar-reference-skin .nav-item[data-route="production"]{
  background:
    radial-gradient(circle at 14% 50%, rgba(255,205,133,.2), transparent 18%),
    linear-gradient(90deg, rgba(247,138,61,.24), rgba(205,120,78,.1) 58%, rgba(162,98,122,.1) 100%) !important;
}
.sidebar-reference-skin .nav-item[data-route="stores"]{
  background:
    radial-gradient(circle at 14% 50%, rgba(255,219,141,.22), transparent 18%),
    linear-gradient(90deg, rgba(231,160,67,.26), rgba(190,116,72,.1) 58%, rgba(149,93,98,.08) 100%) !important;
}
.sidebar-reference-skin .nav-item[data-route="invoice"]{
  background:
    radial-gradient(circle at 14% 50%, rgba(137,255,222,.18), transparent 18%),
    linear-gradient(90deg, rgba(54,204,166,.22), rgba(53,127,175,.1) 58%, rgba(88,103,186,.08) 100%) !important;
}
.sidebar-reference-skin .nav-item[data-route="financial-reports"]{
  background:
    radial-gradient(circle at 14% 50%, rgba(218,169,255,.18), transparent 18%),
    linear-gradient(90deg, rgba(144,81,255,.24), rgba(140,81,214,.1) 58%, rgba(210,112,206,.12) 100%) !important;
}
.sidebar-reference-skin .nav-badge{
  display:inline-flex !important;
}
@media (max-width: 1180px){
  .sidebar-reference-skin{
    transform:translateX(-100%) !important;
    z-index:200 !important;
  }
  .sidebar-reference-skin.open,
  .sidebar-reference-skin.mobile-open{
    transform:translateX(0) !important;
    box-shadow:22px 0 52px rgba(0,0,0,.45) !important;
  }
  .sidebar-reference-skin ~ #app-content{
    margin-left:0 !important;
    padding:calc(var(--topbar-h) + 1rem) 1rem 5.25rem !important;
  }
  .sidebar-reference-skin ~ #app-bottomnav{
    display:flex !important;
  }
  .sidebar-overlay{
    position:fixed !important;
    inset:0 !important;
    background:rgba(5,10,24,.62) !important;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    z-index:199 !important;
    opacity:0;
    visibility:hidden;
    transition:all .28s var(--ease);
  }
  .sidebar-overlay.open{
    opacity:1 !important;
    visibility:visible !important;
  }
}
@media (max-width: 640px){
  .sidebar-reference-skin{
    width:min(88vw, 19.25rem) !important;
  }
  .sidebar-reference-skin ~ #app-content{
    padding:calc(var(--topbar-h) + .85rem) .8rem 5rem !important;
  }
}

/* ================================================================
   UI/UX REFINEMENT LAYER - v5 POLISH
   Beautiful borders · Modern fields · Refined hierarchy
   ================================================================ */

/* ─── Form Controls (primary class used across modules) ────── */
.form-control {
  width: 100%;
  background: var(--surface-0);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: .65rem .9rem;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-primary);
  outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  box-shadow: 0 1px 2px rgba(15,23,58,.04);
}
.form-control::placeholder { color: var(--text-muted); font-weight: 400; }
.form-control:hover:not(:focus):not(:disabled) {
  border-color: var(--brand-blue-dim);
  background: var(--surface-1);
}
.form-control:focus {
  border-color: var(--brand-blue);
  background: var(--surface-0);
  box-shadow: 0 0 0 3px rgba(0,70,153,.13), 0 1px 2px rgba(15,23,58,.04);
}
.form-control:disabled {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: .7;
}

/* Native select arrow */
select.form-control {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path fill='%236b7280' d='M7 10l5 5 5-5H7z'/></svg>");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  padding-right: 2.25rem;
}
select.form-control:focus { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path fill='%23004699' d='M7 10l5 5 5-5H7z'/></svg>"); }

textarea.form-control { resize: vertical; min-height: 5rem; line-height: 1.55; }

/* Number input - remove spinners for cleaner look */
.form-control[type=number]::-webkit-inner-spin-button,
.form-control[type=number]::-webkit-outer-spin-button { opacity: .4; }

/* Form labels (refined typography) */
.form-label {
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -.005em;
  margin-bottom: .375rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}

[data-theme="dark"] .form-control {
  background: var(--surface-1);
  border-color: var(--border);
}
[data-theme="dark"] .form-control:hover:not(:focus):not(:disabled) {
  background: var(--surface-2);
  border-color: var(--brand-blue-light);
}
[data-theme="dark"] .form-control:focus {
  background: var(--surface-1);
  border-color: var(--brand-blue-light);
  box-shadow: 0 0 0 3px rgba(58,128,232,.18);
}
[data-theme="dark"] select.form-control {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path fill='%238b98a5' d='M7 10l5 5 5-5H7z'/></svg>");
}

/* ─── Fieldset (used in workflow builder, etc.) ────────────── */
fieldset {
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.125rem 1.125rem 1rem;
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 60%);
  position: relative;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
fieldset:hover { border-color: var(--brand-blue-dim); box-shadow: 0 4px 16px rgba(15,23,58,.06); }
fieldset legend {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: .25rem .625rem;
  background: var(--surface-0);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-secondary);
}

/* ─── Modal polish ─────────────────────────────────────────── */
.modal-content {
  box-shadow: 0 32px 80px rgba(15,23,58,.32), 0 0 0 1px rgba(15,23,58,.06);
}
.modal-content::before {
  height: 4px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-light), var(--brand-orange-mid));
}
.modal-header h2, .modal-header h3, .modal-header .modal-title {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--text-primary);
}
.modal-body .form-group { margin-bottom: .25rem; }

/* Modal backdrop refined */
.modal-overlay {
  background: radial-gradient(ellipse at top, rgba(10,16,32,.55), rgba(10,16,32,.78));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ─── Stat cards (refined with accent strip) ───────────────── */
.stat-card {
  background: var(--surface-0);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.125rem 1.25rem;
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--brand-blue), var(--brand-blue-light));
  opacity: .85;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15,23,58,.10);
  border-color: var(--brand-blue-dim);
}
.stat-card .stat-label {
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-tertiary);
  margin-bottom: .35rem;
}
.stat-card .stat-value {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-primary);
  line-height: 1.1;
}

/* ─── Tabs polish ──────────────────────────────────────────── */
.tab-bar {
  display: inline-flex;
  gap: .25rem;
  padding: .375rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  flex-wrap: wrap;
}
.tab-btn {
  padding: .5rem 1.05rem;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .16s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}
.tab-btn:hover:not(.active) { background: rgba(255,255,255,.5); color: var(--text-primary); }
.tab-btn.active {
  background: var(--surface-0);
  color: var(--brand-blue);
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0,70,153,.08), 0 0 0 1px rgba(0,70,153,.04);
  font-weight: 700;
}
[data-theme="dark"] .tab-btn:hover:not(.active) { background: rgba(255,255,255,.04); }

/* ─── Badges (richer) ──────────────────────────────────────── */
.badge {
  padding: .25rem .65rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid transparent;
}
.badge-success    { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.badge-warning    { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.badge-danger,.badge-error { background: var(--error-bg); color: var(--error); border-color: var(--error-border); }
.badge-info       { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.badge-primary    { background: var(--brand-blue-faint); color: var(--brand-blue); border-color: var(--brand-blue-dim); }
.badge-secondary  { background: var(--surface-2); color: var(--text-secondary); border-color: var(--border); }
.badge-purple     { background: var(--purple-bg); color: var(--purple); border-color: rgba(124,58,237,.3); }

/* ─── Buttons polish ───────────────────────────────────────── */
.btn {
  letter-spacing: -.005em;
  font-weight: 600;
  border-radius: var(--r-lg);
  transition: transform .14s var(--ease), box-shadow .18s var(--ease), filter .14s var(--ease), background .18s var(--ease);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-mid) 100%);
  box-shadow: 0 4px 14px rgba(0,70,153,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover { box-shadow: 0 8px 24px rgba(0,70,153,.36), inset 0 1px 0 rgba(255,255,255,.18); transform: translateY(-1px); }
.btn-secondary {
  background: var(--surface-0);
  color: var(--text-primary);
  border: 1.5px solid var(--border);
  box-shadow: 0 1px 2px rgba(15,23,58,.04);
}
.btn-secondary:hover {
  background: var(--surface-1);
  border-color: var(--brand-blue-dim);
  color: var(--brand-blue);
  transform: translateY(-1px);
}
.btn-sm { padding: .4rem .8rem; font-size: .8125rem; border-radius: var(--r-md); }

/* ─── Data table polish ────────────────────────────────────── */
.table-wrapper {
  background: var(--surface-0);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15,23,58,.04);
}
.data-table thead tr {
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 100%);
}
.data-table th {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .85rem 1rem;
  color: var(--text-tertiary);
  border-bottom: 2px solid var(--border);
}
.data-table td {
  padding: .85rem 1rem;
  font-size: .875rem;
  color: var(--text-primary);
}
.data-table tbody tr:hover {
  background: var(--brand-blue-faint);
  transform: none;
}
.data-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--brand-blue); }

/* ─── Page header polish ───────────────────────────────────── */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.page-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--text-primary);
  margin-bottom: .25rem;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--brand-blue) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-subtitle {
  color: var(--text-tertiary);
  font-size: .9rem;
  font-weight: 500;
  max-width: 56rem;
}

/* ─── Empty state polish ───────────────────────────────────── */
.empty-state {
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 100%);
  border: 1.5px dashed var(--border);
  border-radius: var(--r-2xl);
  padding: 3rem 1.5rem;
  text-align: center;
}
.empty-state h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: .5rem;
}
.empty-state .material-symbols-outlined {
  background: linear-gradient(135deg, var(--brand-blue-faint), var(--brand-blue-dim));
  color: var(--brand-blue);
  width: 4rem; height: 4rem;
  border-radius: var(--r-2xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 2rem !important;
  opacity: 1;
}

/* ─── Stats grid responsive ────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

/* ─── Code chip ────────────────────────────────────────────── */
code {
  font-family: var(--font-mono);
  font-size: .78em;
  background: var(--brand-blue-faint);
  color: var(--brand-blue);
  padding: .15rem .45rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--brand-blue-dim);
  font-weight: 600;
}

/* ─── Card hover refinement ────────────────────────────────── */
.card {
  border: 1.5px solid var(--border);
  box-shadow: 0 1px 2px rgba(15,23,58,.04);
}
.card:hover { border-color: var(--brand-blue-dim); }

/* ─── Page container vertical rhythm ───────────────────────── */
.page-container { display: grid; gap: 1.25rem; padding-bottom: 4rem; }
.page-container > * { min-width: 0; }

/* ─── Smooth modal-body scroll ─────────────────────────────── */
.modal-body, .modal-content { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }

/* ─── Mobile field tweaks ──────────────────────────────────── */
@media (max-width: 640px) {
  .form-control { font-size: 16px; padding: .7rem .9rem; }
  .stat-card .stat-value { font-size: 1.4rem; }
  .page-title { font-size: 1.5rem; }
  fieldset { padding: 1rem .85rem .85rem; }
}

/* ─── BIMAS mobile app and PWA polish ──────────────────────── */
@media (display-mode: standalone) {
  #install-app-btn { display: none !important; }
  body { overscroll-behavior-y: contain; }
}

@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  #app-topbar {
    height: calc(3.65rem + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) .7rem 0;
    gap: .55rem;
  }
  #app-content {
    padding:
      calc(3.65rem + env(safe-area-inset-top) + .8rem)
      .8rem
      calc(5.85rem + env(safe-area-inset-bottom));
  }
  #app-bottomnav {
    height: calc(4.45rem + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 1.15rem 1.15rem 0 0;
  }
  #app-bottomnav .bottomnav-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 3.9rem;
    gap: .18rem;
  }
  #app-bottomnav .bottomnav-item .material-symbols-outlined { font-size: 1.35rem; }
  #app-bottomnav .bottomnav-item span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .page-header, .section-header {
    align-items: flex-start;
    gap: .8rem;
  }
  .page-header > div,
  .section-header > div {
    min-width: 0;
  }
  .page-header .btn,
  .section-header .btn,
  .card .btn {
    min-height: 44px;
  }
  .grid-2, .grid-3, .grid-4,
  .settings-grid, .dashboard-grid,
  .dashboard-shell, .quick-actions-grid,
  .dashboard-kpis {
    grid-template-columns: 1fr !important;
  }
  .card, .stat-card, .dashboard-card, .dash-card {
    max-width: 100%;
    overflow: hidden;
  }
  .table-wrapper, .table-responsive, .data-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table, .data-table {
    min-width: 44rem;
  }
  input, select, textarea,
  .form-input, .form-select, .form-control {
    font-size: 16px !important;
    min-height: 44px;
  }
  textarea { min-height: 6.5rem; }
  .modal-overlay {
    align-items: flex-end;
    padding: .6rem;
    padding-bottom: max(.6rem, env(safe-area-inset-bottom));
  }
  .modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    margin: 0;
    overflow: auto;
    border-radius: 1.2rem 1.2rem .7rem .7rem;
  }
  .toast-container {
    left: .7rem;
    right: .7rem;
    bottom: calc(5.2rem + env(safe-area-inset-bottom));
    top: auto;
  }
}

@media (max-width: 520px) {
  #company-name,
  #topbar-user-role,
  #last-sync-indicator {
    display: none !important;
  }
  #app-topbar .icon-btn {
    width: 2.55rem;
    height: 2.55rem;
    flex: 0 0 2.55rem;
  }
  #app-sidebar {
    width: min(86vw, 20rem);
  }
  .page-container {
    gap: .95rem;
    padding-bottom: 5.8rem;
  }
  .page-title {
    font-size: 1.35rem;
    line-height: 1.15;
  }
  .page-subtitle {
    font-size: .82rem;
  }
  .card, .dashboard-card, .dash-card {
    border-radius: .95rem;
    padding: .95rem;
  }
  .btn:not(.icon-btn):not(.bottomnav-item) {
    width: 100%;
    justify-content: center;
  }
  .button-row,
  .form-actions,
  .modal-actions,
  .page-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: .65rem;
    width: 100%;
  }
  .login-card {
    width: min(92vw, 24rem);
  }
}

/* ═══════════════════════════════════════════════════════════════
   SYNC STATUS INDICATOR
═══════════════════════════════════════════════════════════════ */
#sync-status-btn { position: relative; }
#sync-status-btn .material-symbols-outlined { font-size: 1.2rem; }
#sync-status-btn[data-sync="synced"]  #sync-status-icon { color: #059669 !important; }
#sync-status-btn[data-sync="offline"] #sync-status-icon { color: #dc2626 !important; }
#sync-status-btn[data-sync="syncing"] #sync-status-icon {
  color: #ea580c !important;
  animation: spin-smooth 1.2s linear infinite;
}
#app-topbar #pending-writes-badge.topbar-badge-warning{
  background:#f59e0b !important;
  color:#111827 !important;
  border-color:#fff !important;
  box-shadow:0 2px 8px rgba(245,158,11,.45) !important;
}
@keyframes spin-smooth {
  to { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════════════════════
   GLOBAL UI POLISH — Professional Modern Enhancement
   v14.0 — Glassmorphism, Refined Surfaces, Micro-interactions
═══════════════════════════════════════════════════════════════ */

/* --- Topbar Enhancement --- */
#app-topbar {
  background: linear-gradient(135deg, var(--brand-blue) 0%, #1a3a6b 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#app-topbar .topbar-title {
  font-weight: 700;
  letter-spacing: -0.3px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
#app-topbar .topbar-btn {
  border-radius: 10px;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
#app-topbar .topbar-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

/* --- Sidebar Enhancement --- */
#app-sidebar {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-right: 1px solid rgba(0,0,0,0.06);
  box-shadow: 2px 0 12px rgba(0,0,0,0.03);
}
[data-theme="dark"] #app-sidebar {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-right-color: rgba(255,255,255,0.06);
}
#app-sidebar .nav-item {
  border-radius: 10px;
  margin: 2px 8px;
  padding: 10px 14px;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  font-weight: 500;
}
#app-sidebar .nav-item:hover {
  background: rgba(37,99,235,0.06);
  transform: translateX(3px);
}
#app-sidebar .nav-item.active {
  background: linear-gradient(135deg, var(--brand-blue), #3b82f6);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
  font-weight: 600;
}
#app-sidebar .nav-group-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  padding: 12px 14px 4px;
  opacity: 0.7;
}

/* --- Card Surfaces --- */
.card, .dash-card, .module-card {
  background: var(--surface);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.card:hover, .dash-card:hover, .module-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.04);
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.12);
}
[data-theme="dark"] .card,
[data-theme="dark"] .dash-card,
[data-theme="dark"] .module-card {
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15);
}

/* --- KPI Cards Enhancement --- */
.kpi-card {
  border-radius: 16px;
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.05);
}
.kpi-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(37,99,235,0.06) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(20px, -20px);
}
.kpi-card .kpi-value {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--brand-blue), #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.kpi-card .kpi-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* --- Buttons Enhancement --- */
.btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 10px 20px;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  pointer-events: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand-blue), #2563eb);
  border: none;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 4px 16px rgba(37,99,235,0.4);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(37,99,235,0.3);
}
.btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  box-shadow: 0 2px 8px rgba(16,185,129,0.3);
}
.btn-success:hover {
  box-shadow: 0 4px 16px rgba(16,185,129,0.4);
  transform: translateY(-1px);
}
.btn-outline {
  border: 1.5px solid var(--border);
  background: transparent;
}
.btn-outline:hover {
  border-color: var(--brand-blue);
  background: rgba(37,99,235,0.04);
  color: var(--brand-blue);
}
.btn-sm {
  padding: 6px 14px;
  font-size: 0.82rem;
  border-radius: 8px;
}
.btn-lg {
  padding: 14px 28px;
  font-size: 1rem;
  border-radius: 12px;
}

/* --- Tables Enhancement --- */
.table-container {
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
table thead th {
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  padding: 14px 16px;
  border-bottom: 2px solid rgba(0,0,0,0.06);
  white-space: nowrap;
}
[data-theme="dark"] table thead th {
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border-bottom-color: rgba(255,255,255,0.08);
}
table tbody tr {
  transition: all 0.15s ease;
}
table tbody tr:hover {
  background: rgba(37,99,235,0.03);
}
table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 0.875rem;
}
table tbody tr:last-child td {
  border-bottom: none;
}

/* --- Form Inputs Enhancement --- */
.form-control, .form-select, input[type="text"], input[type="number"],
input[type="email"], input[type="password"], input[type="date"],
input[type="search"], select, textarea {
  border-radius: 10px;
  border: 1.5px solid var(--border);
  padding: 10px 14px;
  font-size: 0.9rem;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  background: var(--surface);
}
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
  outline: none;
}
.form-control::placeholder, input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}
label, .form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: block;
}

/* --- Badges Enhancement --- */
.badge {
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.badge-success, .badge-approved, .badge[class*="success"] {
  background: rgba(16,185,129,0.1);
  color: #059669;
  border: 1px solid rgba(16,185,129,0.2);
}
.badge-warning, .badge-pending, .badge[class*="warning"] {
  background: rgba(245,158,11,0.1);
  color: #d97706;
  border: 1px solid rgba(245,158,11,0.2);
}
.badge-danger, .badge-rejected, .badge[class*="danger"] {
  background: rgba(239,68,68,0.1);
  color: #dc2626;
  border: 1px solid rgba(239,68,68,0.2);
}
.badge-info, .badge[class*="info"] {
  background: rgba(37,99,235,0.1);
  color: #2563eb;
  border: 1px solid rgba(37,99,235,0.2);
}

/* --- Modals Enhancement --- */
.modal-backdrop {
  background: rgba(15,23,42,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-content, .modal {
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.1);
  overflow-y: auto;
}
.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: linear-gradient(180deg, rgba(248,250,252,0.8), transparent);
}
[data-theme="dark"] .modal-header {
  background: linear-gradient(180deg, rgba(30,41,59,0.8), transparent);
}
.modal-title {
  font-weight: 700;
  font-size: 1.1rem;
}
.modal-body {
  padding: 24px;
}
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: rgba(248,250,252,0.5);
}

/* --- Toast/Notification Enhancement --- */
.toast, .notification-toast {
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: toast-slide-in 0.3s cubic-bezier(0.4,0,0.2,1);
}
@keyframes toast-slide-in {
  from { transform: translateY(-12px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* --- Progress Bars --- */
.progress-bar, progress {
  border-radius: 99px;
  overflow: hidden;
  height: 8px;
  background: rgba(0,0,0,0.06);
}
.progress-bar .progress-fill, progress::-webkit-progress-value {
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand-blue), #3b82f6);
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* --- Empty State --- */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}
.empty-state i {
  font-size: 3rem;
  opacity: 0.3;
  margin-bottom: 16px;
}
.empty-state p {
  font-size: 0.9rem;
  max-width: 300px;
  margin: 0 auto;
  line-height: 1.6;
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.25);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.25);
}

/* --- Selection Color --- */
::selection {
  background: rgba(37,99,235,0.15);
  color: inherit;
}

/* --- Focus Ring --- */
:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
  border-radius: 8px;
}

/* --- Page Transitions --- */
#app-content > div {
  animation: page-enter 0.3s cubic-bezier(0.4,0,0.2,1);
}
@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Login Screen Enhancement --- */
.login-container, #login-screen {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card, .login-box {
  background: rgba(255,255,255,0.97);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 80px rgba(37,99,235,0.1);
  border: 1px solid rgba(255,255,255,0.1);
  width: 100%;
  max-width: 420px;
}
.login-mfa-panel {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border, rgba(15,23,42,.12));
}
.login-mfa-head { display:flex; gap:.75rem; align-items:flex-start; margin-bottom:1rem; }
.login-mfa-head .material-symbols-outlined { color: var(--brand-blue, #2563eb); font-size: 1.75rem; }
.login-mfa-head h3 { font-size: 1rem; font-weight: 800; margin: 0 0 .25rem; }
.login-mfa-head p { font-size: .8rem; color: var(--text-secondary); margin: 0; line-height: 1.5; }
.login-mfa-secret { font-family: var(--font-mono, monospace); font-weight: 800; letter-spacing: .14em; word-break: break-all; padding: .65rem .75rem; background: var(--surface-2, #f1f5f9); border-radius: .5rem; }
.login-mfa-qr, .mfa-enroll-qr img { display: block; margin: 0 auto; border-radius: .5rem; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.login-mfa-actions { display:flex; justify-content: flex-end; gap:.5rem; margin-top: 1rem; }
[data-theme="dark"] .login-card,
[data-theme="dark"] .login-box {
  background: rgba(30,41,59,0.95);
  border-color: rgba(255,255,255,0.08);
}
.login-card h1, .login-card h2, .login-box h1, .login-box h2 {
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}
.login-card .btn-primary, .login-box .btn-primary {
  width: 100%;
  padding: 14px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 12px;
  margin-top: 8px;
}

/* --- Dashboard Grid Enhancement --- */
.dashboard-grid, .grid-container {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* --- Tab Navigation --- */
.tab-nav, .tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0,0,0,0.03);
  border-radius: 12px;
  margin-bottom: 20px;
}
.tab-nav .tab-btn, .tabs .tab-btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.tab-nav .tab-btn.active, .tabs .tab-btn.active {
  background: var(--surface);
  color: var(--brand-blue);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.tab-nav .tab-btn:hover:not(.active), .tabs .tab-btn:hover:not(.active) {
  background: rgba(0,0,0,0.04);
  color: var(--text-primary);
}

/* --- Dropdown Menus --- */
.dropdown-menu {
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  padding: 6px;
  overflow: hidden;
}
.dropdown-menu .dropdown-item {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.875rem;
  transition: background 0.15s ease;
}
.dropdown-menu .dropdown-item:hover {
  background: rgba(37,99,235,0.06);
}

/* --- Loading Skeleton Animation --- */
.skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 8px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Print Styles --- */
@media print {
  #app-topbar, #app-sidebar, .btn, .toast, .modal-backdrop { display: none !important; }
  #app-content { margin: 0; padding: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}

/* --- Responsive Fine-tuning --- */
@media (max-width: 768px) {
  .kpi-card { padding: 16px; }
  .kpi-card .kpi-value { font-size: 1.5rem; }
  .modal-content, .modal { border-radius: 16px; margin: 12px; }
  .btn { padding: 10px 16px; }
  .dashboard-grid, .grid-container { grid-template-columns: 1fr; gap: 14px; }
}


/* ═══════════════════════════════════════════════════════════════
   SIDEBAR & TOPBAR REDESIGN v2.0
   Premium glass-dark design with refined navigation
═══════════════════════════════════════════════════════════════ */

/* ─── Topbar Redesign ─── */
#app-topbar {
  background: linear-gradient(135deg, #0a1628 0%, #0f1d32 50%, #0a1628 100%) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1) !important;
  padding: 0 1rem !important;
}
#app-topbar::after {
  height: 2px !important;
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 30%, #f59e0b 70%, #fb923c 100%) !important;
  opacity: 0.7;
}
#app-topbar #company-name {
  color: #fff !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}
#app-topbar .icon-btn {
  width: 2.25rem; height: 2.25rem;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.75) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
  display: flex; align-items: center; justify-content: center;
}
#app-topbar .icon-btn:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.12) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
#app-topbar .icon-btn .material-symbols-outlined {
  font-size: 1.15rem !important;
}
#app-topbar .company-pill {
  background: rgba(59,130,246,0.12) !important;
  border: 1px solid rgba(59,130,246,0.2) !important;
  border-radius: 10px !important;
  color: #93c5fd !important;
  padding: 0.35rem 0.75rem !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  transition: all 0.2s ease !important;
  gap: 0.4rem !important;
}
#app-topbar .company-pill:hover {
  background: rgba(59,130,246,0.2) !important;
  border-color: rgba(59,130,246,0.35) !important;
  color: #bfdbfe !important;
}
#app-topbar .company-pill .material-symbols-outlined {
  font-size: 0.85rem !important;
  color: #60a5fa !important;
}

/* ─── Sidebar Shell Redesign ─── */
#app-sidebar.sidebar-modern {
  background: linear-gradient(180deg, #0a1628 0%, #0d1b2e 40%, #0a1628 100%) !important;
  border-right: 1px solid rgba(255,255,255,0.04) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.2) !important;
}
#app-sidebar.sidebar-modern::before {
  background: radial-gradient(ellipse at 30% 0%, rgba(59,130,246,0.06) 0%, transparent 60%) !important;
}

/* ─── Brand Block ─── */
.sidebar-modern .sidebar-brand {
  margin: calc(var(--topbar-h) + 0.625rem) 0.75rem 0.25rem !important;
  padding: 0.75rem 0.875rem !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(96,165,250,0.04)) !important;
  border: 1px solid rgba(59,130,246,0.1) !important;
}
.sidebar-brand-logo {
  width: 2.5rem !important; height: 2.5rem !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.08) !important;
}
.sidebar-brand-text p:first-child {
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  background: linear-gradient(135deg, #fff, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sidebar-brand-text p:last-child {
  font-size: 0.62rem !important;
  color: rgba(255,255,255,0.35) !important;
  letter-spacing: 0.12em !important;
}
.sidebar-collapse-btn {
  border-radius: 8px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.sidebar-collapse-btn:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* ─── Search Bar ─── */
.sidebar-modern .sidebar-search {
  margin: 0.375rem 0.75rem 0.625rem !important;
}
.sidebar-search input {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  padding: 0.55rem 2.5rem 0.55rem 2.25rem !important;
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.9) !important;
}
.sidebar-search input:focus {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(59,130,246,0.4) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1), 0 2px 8px rgba(0,0,0,0.15) !important;
}
.sidebar-search-icon {
  color: rgba(255,255,255,0.35) !important;
  font-size: 1rem !important;
}
.sidebar-search-kbd {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 5px !important;
  color: rgba(255,255,255,0.35) !important;
  font-size: 0.6rem !important;
}


/* ─── Nav Scroll Area ─── */
.sidebar-modern .sidebar-nav {
  padding: 0.25rem 0.5rem 1rem !important;
  gap: 0.15rem !important;
}

/* ─── Dashboard Home Button ─── */
.sidebar-modern .nav-home {
  margin: 0.2rem 0.25rem 0.625rem !important;
  padding: 0.6rem 0.7rem !important;
  background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(96,165,250,0.08)) !important;
  border: 1px solid rgba(59,130,246,0.15) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}
.sidebar-modern .nav-home:hover {
  background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(96,165,250,0.12)) !important;
  border-color: rgba(59,130,246,0.25) !important;
}
.sidebar-modern .nav-home .material-symbols-outlined {
  background: rgba(59,130,246,0.2) !important;
  color: #93c5fd !important;
}

/* ─── Nav Groups ─── */
.sidebar-modern .nav-group {
  margin: 0.15rem 0.125rem !important;
  border-radius: 12px !important;
}
.sidebar-modern .nav-group + .nav-group {
  margin-top: 0.25rem !important;
}
.sidebar-modern .nav-group-header {
  padding: 0.55rem 0.65rem !important;
  border-radius: 10px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.45) !important;
  transition: all 0.15s ease !important;
}
.sidebar-modern .nav-group-header:hover {
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.7) !important;
}
.sidebar-modern .nav-group-header[aria-expanded="true"] {
  color: rgba(255,255,255,0.6) !important;
}
.sidebar-modern .nav-group-icon {
  font-size: 0.95rem !important;
  opacity: 0.7;
}
.sidebar-modern .nav-group-count {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.58rem !important;
  padding: 0.1rem 0.4rem !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255,255,255,0.04);
}
.sidebar-modern .nav-group-chevron {
  font-size: 0.95rem !important;
  color: rgba(255,255,255,0.3) !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}
.sidebar-modern .nav-group-header:hover .nav-group-chevron {
  color: rgba(255,255,255,0.5) !important;
}

/* ─── Nav Group Body (expanded items container) ─── */
.sidebar-modern .nav-group-body {
  padding: 0.2rem 0 0.35rem 0.25rem !important;
  gap: 0.05rem !important;
}

/* ─── Nav Items (menu links) ─── */
.sidebar-modern .nav-item {
  padding: 0.45rem 0.6rem !important;
  border-radius: 10px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.72) !important;
  gap: 0.6rem !important;
  transition: all 0.15s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative !important;
}
.sidebar-modern .nav-item .material-symbols-outlined {
  width: 1.75rem !important; height: 1.75rem !important;
  border-radius: 8px !important;
  font-size: 0.95rem !important;
  transition: all 0.15s ease !important;
}
.sidebar-modern .nav-label {
  font-size: inherit !important;
  color: inherit !important;
}

/* Nav item: inline icon backgrounds from HTML are overridden by these */
.sidebar-modern .nav-item > span:first-child {
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

/* Hover */
.sidebar-modern .nav-item:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #fff !important;
  transform: none !important;
}
.sidebar-modern .nav-item:hover > span:first-child {
  transform: scale(1.05);
}

/* Active state */
.sidebar-modern .nav-item.active {
  background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(96,165,250,0.1)) !important;
  color: #fff !important;
  font-weight: 650 !important;
  border: 1px solid rgba(59,130,246,0.15) !important;
  box-shadow: 0 2px 8px rgba(59,130,246,0.1), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.sidebar-modern .nav-item.active::before {
  content: '' !important;
  position: absolute !important;
  left: -0.5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 1.25rem !important;
  border-radius: 0 6px 6px 0 !important;
  background: linear-gradient(180deg, #60a5fa, #3b82f6) !important;
  box-shadow: 0 0 8px rgba(96,165,250,0.4) !important;
}
.sidebar-modern .nav-item.active .material-symbols-outlined {
  color: #93c5fd !important;
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 20 !important;
}
.sidebar-modern .nav-item.active > span:first-child {
  box-shadow: 0 0 12px rgba(59,130,246,0.15) !important;
}


/* ─── Sidebar Footer ─── */
.sidebar-modern .sidebar-footer {
  padding: 0.75rem !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  background: rgba(0,0,0,0.12) !important;
}
.sidebar-modern .sidebar-footer #sidebar-user-info {
  padding: 0.5rem 0.6rem !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  transition: background 0.15s ease !important;
}
.sidebar-modern .sidebar-footer #sidebar-user-info:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* ─── Collapsed Sidebar Tooltip ─── */
#app-sidebar.sidebar-modern[data-collapsed="true"] .nav-item:hover::after {
  background: linear-gradient(135deg, #0f1d32, #0a1628) !important;
  border: 1px solid rgba(59,130,246,0.2) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04) !important;
  border-radius: 8px !important;
  padding: 0.4rem 0.75rem !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}

/* ─── Per-route Icon Colors (refined palette) ─── */
/* Sales - Sky */
.sidebar-modern .nav-item[data-route="pfi"] > span:first-child,
.sidebar-modern .nav-item[data-route="sof"] > span:first-child,
.sidebar-modern .nav-item[data-route="customers"] > span:first-child,
.sidebar-modern .nav-item[data-route="crm"] > span:first-child,
.sidebar-modern .nav-item[data-route="products"] > span:first-child {
  background: rgba(56,189,248,0.12) !important;
}
.sidebar-modern .nav-item[data-route="pfi"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="sof"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="customers"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="crm"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="products"] > span:first-child .material-symbols-outlined {
  color: #38bdf8 !important;
}

/* Production - Orange */
.sidebar-modern .nav-item[data-route="production"] > span:first-child,
.sidebar-modern .nav-item[data-route="qc"] > span:first-child,
.sidebar-modern .nav-item[data-route="bom"] > span:first-child,
.sidebar-modern .nav-item[data-route="manufacturing-intelligence"] > span:first-child {
  background: rgba(251,146,60,0.12) !important;
}
.sidebar-modern .nav-item[data-route="production"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="qc"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="bom"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="manufacturing-intelligence"] > span:first-child .material-symbols-outlined {
  color: #fb923c !important;
}

/* Supply Chain - Teal */
.sidebar-modern .nav-item[data-route="stores"] > span:first-child,
.sidebar-modern .nav-item[data-route="fgs"] > span:first-child,
.sidebar-modern .nav-item[data-route="procurement"] > span:first-child,
.sidebar-modern .nav-item[data-route="warehouse"] > span:first-child,
.sidebar-modern .nav-item[data-route="fleet"] > span:first-child,
.sidebar-modern .nav-item[data-route="drn"] > span:first-child,
.sidebar-modern .nav-item[data-route="dn"] > span:first-child {
  background: rgba(45,212,191,0.1) !important;
}
.sidebar-modern .nav-item[data-route="stores"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="fgs"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="procurement"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="warehouse"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="fleet"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="drn"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="dn"] > span:first-child .material-symbols-outlined {
  color: #2dd4bf !important;
}

/* Finance - Emerald */
.sidebar-modern .nav-item[data-route="invoice"] > span:first-child,
.sidebar-modern .nav-item[data-route="accounts"] > span:first-child,
.sidebar-modern .nav-item[data-route="imprest"] > span:first-child,
.sidebar-modern .nav-item[data-route="vouchers"] > span:first-child,
.sidebar-modern .nav-item[data-route="expenses"] > span:first-child,
.sidebar-modern .nav-item[data-route="general-ledger"] > span:first-child,
.sidebar-modern .nav-item[data-route="financial-reports"] > span:first-child {
  background: rgba(52,211,153,0.1) !important;
}
.sidebar-modern .nav-item[data-route="invoice"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="accounts"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="imprest"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="vouchers"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="expenses"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="general-ledger"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="financial-reports"] > span:first-child .material-symbols-outlined {
  color: #34d399 !important;
}

/* HR - Rose */
.sidebar-modern .nav-item[data-route="hr"] > span:first-child,
.sidebar-modern .nav-item[data-route="payroll"] > span:first-child {
  background: rgba(251,113,133,0.1) !important;
}
.sidebar-modern .nav-item[data-route="hr"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="payroll"] > span:first-child .material-symbols-outlined {
  color: #fb7185 !important;
}

/* Analytics - Violet */
.sidebar-modern .nav-item[data-route="bi"] > span:first-child,
.sidebar-modern .nav-item[data-route="ai"] > span:first-child,
.sidebar-modern .nav-item[data-route="reports"] > span:first-child,
.sidebar-modern .nav-item[data-route="advanced-reports"] > span:first-child {
  background: rgba(167,139,250,0.1) !important;
}
.sidebar-modern .nav-item[data-route="bi"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="ai"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="reports"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="advanced-reports"] > span:first-child .material-symbols-outlined {
  color: #a78bfa !important;
}

/* Workspace - Amber */
.sidebar-modern .nav-item[data-route="notifications"] > span:first-child,
.sidebar-modern .nav-item[data-route="scheduler"] > span:first-child,
.sidebar-modern .nav-item[data-route="comms"] > span:first-child,
.sidebar-modern .nav-item[data-route="approvals"] > span:first-child {
  background: rgba(251,191,36,0.1) !important;
}
.sidebar-modern .nav-item[data-route="notifications"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="scheduler"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="comms"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="approvals"] > span:first-child .material-symbols-outlined {
  color: #fbbf24 !important;
}

/* Admin - Slate */
.sidebar-modern .nav-item[data-route="settings"] > span:first-child,
.sidebar-modern .nav-item[data-route="users"] > span:first-child,
.sidebar-modern .nav-item[data-route="documents"] > span:first-child,
.sidebar-modern .nav-item[data-route="audit-trail"] > span:first-child,
.sidebar-modern .nav-item[data-route="backup-recovery"] > span:first-child,
.sidebar-modern .nav-item[data-route="system-health"] > span:first-child,
.sidebar-modern .nav-item[data-route="master-data"] > span:first-child,
.sidebar-modern .nav-item[data-route="document-sequences"] > span:first-child,
.sidebar-modern .nav-item[data-route="portal-users"] > span:first-child,
.sidebar-modern .nav-item[data-route="bulk-operations"] > span:first-child {
  background: rgba(148,163,184,0.1) !important;
}
.sidebar-modern .nav-item[data-route="settings"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="users"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="documents"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="audit-trail"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="backup-recovery"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="system-health"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="master-data"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="document-sequences"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="portal-users"] > span:first-child .material-symbols-outlined,
.sidebar-modern .nav-item[data-route="bulk-operations"] > span:first-child .material-symbols-outlined {
  color: #94a3b8 !important;
}

/* ─── Mobile Sidebar ─── */
@media (max-width: 1024px) {
  #app-sidebar.sidebar-modern {
    box-shadow: 24px 0 60px rgba(0,0,0,0.5), 4px 0 20px rgba(0,0,0,0.3) !important;
    width: 18rem !important;
  }
}

/* ─── Topbar User Avatar ─── */
#app-topbar button[onclick*="navigate('hr')"] {
  width: 2.1rem !important;
  height: 2.1rem !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  box-shadow: 0 2px 8px rgba(59,130,246,0.3), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  border: 1px solid rgba(96,165,250,0.3) !important;
  transition: all 0.2s ease !important;
}
#app-topbar button[onclick*="navigate('hr')"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(59,130,246,0.4), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* ================================================================
   Topbar Visibility Refresh 2026-05
   ================================================================ */
#app-topbar {
  height: 4rem !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98), rgba(244,248,252,.96)) !important;
  color: #0f172a !important;
  border-bottom: 1px solid rgba(148,163,184,.32) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.10), 0 1px 0 rgba(255,255,255,.9) inset !important;
  padding: 0 1rem !important;
}
#app-topbar::after {
  height: 3px !important;
  background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 34%, #16a34a 68%, #f59e0b 100%) !important;
  opacity: 1 !important;
}
#app-topbar #company-name {
  color: #0f172a !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}
#app-topbar a[href="#/dashboard"] img,
#app-topbar #company-logo-fallback {
  border-radius: 9px !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.12) !important;
}
#app-topbar .icon-btn {
  width: 2.45rem !important;
  height: 2.45rem !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid rgba(148,163,184,.34) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.08) !important;
}
#app-topbar .icon-btn:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: rgba(37,99,235,.36) !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.14) !important;
}
#app-topbar .icon-btn .material-symbols-outlined {
  color: inherit !important;
  font-size: 1.18rem !important;
}
#app-topbar .company-pill {
  min-height: 2.45rem !important;
  background: #eef6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(37,99,235,.22) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.08) !important;
}
#app-topbar .company-pill:hover {
  background: #dbeafe !important;
  color: #1e40af !important;
}
#app-topbar .company-pill .material-symbols-outlined {
  color: #2563eb !important;
}
#sync-status-btn[data-sync="syncing"] {
  background: #fff7ed !important;
  color: #ea580c !important;
  border-color: rgba(234,88,12,.26) !important;
}
#sync-status-btn[data-sync="synced"] {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border-color: rgba(5,150,105,.24) !important;
}
#sync-status-btn[data-sync="offline"] {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border-color: rgba(220,38,38,.24) !important;
}
#notification-badge {
  border-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(245,158,11,.35) !important;
}
#app-topbar button[onclick*="navigate('hr')"] {
  width: 2.45rem !important;
  height: 2.45rem !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #0f172a, #2563eb) !important;
  color: #ffffff !important;
  border: 1px solid rgba(37,99,235,.35) !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.22) !important;
}
[data-theme="dark"] #app-topbar {
  background: linear-gradient(90deg, rgba(15,23,42,.98), rgba(17,24,39,.96)) !important;
  color: #e5e7eb !important;
  border-bottom-color: rgba(148,163,184,.18) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.32) !important;
}
[data-theme="dark"] #app-topbar #company-name {
  color: #f8fafc !important;
}
[data-theme="dark"] #app-topbar .icon-btn {
  background: rgba(255,255,255,.08) !important;
  color: #e5e7eb !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}
[data-theme="dark"] #app-topbar .icon-btn:hover {
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}
@media (max-width: 900px) {
  #app-topbar {
    height: auto !important;
    min-height: 4rem !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    padding: .55rem .75rem !important;
  }
  #app-topbar > div:first-child {
    min-width: 0 !important;
  }
  #app-topbar > div:last-child {
    gap: .3rem !important;
    justify-content: flex-end !important;
  }
  #app-topbar .icon-btn,
  #app-topbar button[onclick*="navigate('hr')"] {
    width: 2.35rem !important;
    height: 2.35rem !important;
    flex: 0 0 2.35rem !important;
  }
}
@media (max-width: 560px) {
  #cs-label,
  #app-topbar a[href="portal.html"] {
    display: none !important;
  }
  #app-topbar .company-pill {
    width: 2.35rem !important;
    padding: 0 !important;
    justify-content: center !important;
  }
}

/* ================================================================
   VISUAL POLISH & MOBILE ENHANCEMENTS — May 2026
   Modern, professional UI refinements
   ================================================================ */

/* ─── Table alternating rows ────────────────────────────── */
.data-table tbody tr:nth-child(even){background:var(--surface-1);}
.data-table tbody tr:nth-child(even):hover{background:var(--brand-blue-faint);}
.data-table-premium tbody tr:nth-child(even){background:var(--surface-1);}
.data-table-premium tbody tr:nth-child(even):hover{background:var(--brand-blue-faint);}

/* ─── Better card hover transitions ────────────────────── */
.card{transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease);}
.kpi-card{transition:box-shadow .22s var(--ease),transform .22s var(--ease);}

/* ─── Smoother buttons ──────────────────────────────────── */
.btn{transition:all .18s var(--ease);letter-spacing:.01em;}
.btn-primary:active,.btn-orange:active,.btn-danger:active,.btn-success:active,.btn-purple:active{
  transform:scale(.96);filter:brightness(.95);
}

/* ─── Selection color ───────────────────────────────────── */
::selection{background:rgba(0,70,153,.18);color:var(--text-primary);}

/* ─── Better form focus rings ───────────────────────────── */
.form-input:focus,.form-select:focus{
  box-shadow:0 0 0 3px rgba(0,70,153,.12),0 2px 8px rgba(0,70,153,.08);
}

/* ─── Improved scrollbars ───────────────────────────────── */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:var(--surface-4);}

/* ─── Badge micro animation ─────────────────────────────── */
.badge{transition:transform .15s var(--ease);}
.badge:hover{transform:scale(1.04);}

/* ─── Better mobile table scrolling ─────────────────────── */
.table-responsive{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--r-xl);
}

/* ─── Mobile page header stacking ───────────────────────── */
@media (max-width: 768px){
  .page-header .flex-between{
    flex-direction:column;
    align-items:flex-start;
    gap:.75rem;
  }
  .page-header .flex-between > div:last-child{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
  }
  .page-header .flex-between > div:last-child .btn{
    flex:1 1 auto;
    min-width:6rem;
    justify-content:center;
  }
  /* Mobile form grids stack */
  .form-grid,.form-grid-2,.form-grid-3,.form-grid-4{
    grid-template-columns:1fr !important;
  }
  /* Better modal on small screens */
  .modal-overlay{padding:.5rem;align-items:flex-end;}
  .modal-content{
    border-radius:var(--r-2xl) var(--r-2xl) 0 0;
    max-height:88vh;
    margin:0;
  }
  /* Horizontal scroll tabs */
  .production-tabbar,
  .table-filters{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;
  }
  /* Touch-friendly icon buttons */
  .icon-btn,.btn-icon{
    min-width:2.75rem;
    min-height:2.75rem;
  }
}

/* ─── Extra small phone fixes ───────────────────────────── */
@media (max-width: 400px){
  #app-content{padding:calc(var(--topbar-h) + .5rem) .45rem 5rem !important;}
  .card{padding:.65rem;border-radius:.65rem;}
  .kpi-card{padding:.55rem .65rem;}
  .kpi-value{font-size:.95rem;}
  .page-header h1{font-size:1.05rem;}
  .table-filters{padding:.55rem;}
  .btn-sm{padding:.35rem .6rem;font-size:.75rem;}
}

/* ─── Smooth page transitions ───────────────────────────── */
@keyframes fadeSlideUp{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}
.animate-in{animation:fadeSlideUp .35s var(--ease) both;}

/* ─── Topbar compact on scroll (helper class via JS) ────── */
#app-topbar.scrolled{
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(28px);
}

/* ─── Bottom nav active glow ────────────────────────────── */
.bottomnav-item.active{
  color:var(--brand-blue);
  background:linear-gradient(180deg,rgba(0,70,153,.12),rgba(0,70,153,.04));
  border-radius:var(--r-lg);
  box-shadow:0 -2px 8px rgba(0,70,153,.08);
}
.bottomnav-item.active .material-symbols-outlined{
  font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 24;
}

/* ─── Imprest / Finance card polish ─────────────────────── */
.imprest-card,.finance-card{
  border-left:3px solid var(--brand-blue);
  transition:border-color .2s var(--ease);
}
.imprest-card:hover,.finance-card:hover{
  border-left-color:var(--brand-orange);
}

/* ─── Print-friendly override ───────────────────────────── */
@media print{
  .data-table tbody tr:nth-child(even){background:#f9fafb !important;}
  .card{box-shadow:none !important;border:1px solid #e5e7eb !important;}
}

/* ================================================================
   BIMAS ERP refinement pass - May 2026
   Cleaner shell, faster mobile rendering, no mobile sidebar shadow
   ================================================================ */
:root{
  --shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --shadow-sm:0 3px 10px rgba(15,23,42,.07);
  --shadow-md:0 10px 24px rgba(15,23,42,.09);
  --shadow-lg:0 18px 38px rgba(15,23,42,.12);
}

body{
  background:linear-gradient(180deg,#f7f9fc 0%,#eef3f8 100%) !important;
}
body::before,
body::after{
  display:none !important;
}
[data-theme="dark"] body{
  background:linear-gradient(180deg,#0b1120 0%,#111827 100%) !important;
}

#app-topbar{
  background:rgba(255,255,255,.97) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  border-bottom:1px solid rgba(148,163,184,.28) !important;
  box-shadow:0 4px 16px rgba(15,23,42,.07) !important;
}
[data-theme="dark"] #app-topbar{
  background:rgba(15,23,42,.96) !important;
  border-bottom-color:rgba(148,163,184,.18) !important;
}

#app-sidebar.sidebar-modern{
  background:linear-gradient(180deg,#081423 0%,#0c1a2e 58%,#10233b 100%) !important;
  border-right:1px solid rgba(148,163,184,.16) !important;
  box-shadow:2px 0 14px rgba(15,23,42,.14) !important;
}
#app-sidebar.sidebar-modern::before{
  display:none !important;
}
.sidebar-modern .sidebar-brand,
.sidebar-modern .sidebar-footer{
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:none !important;
}
.sidebar-modern .nav-group-header{
  letter-spacing:.08em !important;
}
.sidebar-modern .nav-item{
  border:1px solid transparent !important;
  box-shadow:none !important;
}
.sidebar-modern .nav-item:hover{
  background:rgba(255,255,255,.075) !important;
  border-color:rgba(255,255,255,.06) !important;
}
.sidebar-modern .nav-item.active{
  background:linear-gradient(135deg,rgba(37,99,235,.35),rgba(14,165,233,.16)) !important;
  border-color:rgba(125,211,252,.18) !important;
  box-shadow:none !important;
}

#app-content{
  background:transparent !important;
}
#app-content > .page-container{
  max-width:84rem !important;
  gap:1.1rem !important;
}
.page-header{
  background:rgba(255,255,255,.9) !important;
  border:1px solid rgba(226,232,240,.9) !important;
  border-radius:18px !important;
  box-shadow:var(--shadow-xs) !important;
  padding:1.25rem 1.35rem !important;
}
[data-theme="dark"] .page-header{
  background:rgba(15,23,42,.86) !important;
  border-color:rgba(148,163,184,.18) !important;
}
.page-header h1{
  letter-spacing:0 !important;
}
.breadcrumb{
  background:rgba(37,99,235,.08) !important;
  color:var(--brand-blue) !important;
  border:1px solid rgba(37,99,235,.12) !important;
}

.card,
.kpi-card,
.stats-card,
.dashboard-card,
.dash-card{
  background:var(--surface-0);
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow-xs) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.card:hover,
.kpi-card:hover,
.stats-card:hover,
.dashboard-card:hover,
.dash-card:hover{
  transform:none !important;
  border-color:rgba(37,99,235,.22) !important;
  box-shadow:var(--shadow-sm) !important;
}

.btn{
  border-radius:10px !important;
  box-shadow:none !important;
  letter-spacing:0 !important;
}
.btn-primary{
  background:linear-gradient(135deg,#0f5fc2,#1d74e8) !important;
}
.btn-primary:hover,
.btn-secondary:hover{
  transform:translateY(-1px) !important;
}
.btn-ghost{
  border-color:transparent !important;
}
.icon-btn,
#app-topbar .icon-btn,
#app-topbar .company-pill{
  box-shadow:none !important;
}

.form-input,
.form-select,
.form-control,
textarea{
  border-radius:10px !important;
}
.data-table,
.data-table-wrap,
.table-wrapper{
  border-radius:14px !important;
}
.data-table thead tr{
  background:linear-gradient(180deg,var(--surface-1),var(--surface-2)) !important;
}
.data-table th{
  color:var(--text-secondary) !important;
  border-bottom:1px solid var(--border) !important;
}
.data-table tbody tr,
.data-table tbody tr:nth-child(even){
  background:var(--surface-0) !important;
}
.data-table tbody tr:hover,
.data-table tbody tr:nth-child(even):hover{
  background:var(--brand-blue-faint) !important;
  transform:none !important;
  box-shadow:none !important;
}

.modal-overlay{
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
}
.modal-content{
  box-shadow:var(--shadow-lg) !important;
  border:1px solid var(--border) !important;
}

@media (max-width:1024px){
  #app-sidebar.sidebar-modern{
    width:min(18rem,86vw) !important;
    box-shadow:none !important;
    border-right:1px solid rgba(148,163,184,.24) !important;
  }
  .sidebar-overlay{
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:none !important;
  }
}

/* Keep Settings module on its original denser admin layout. */
body[data-route="settings"] .page-header{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--border) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 0 1.25rem !important;
}
body[data-route="settings"] .page-header::before{
  display:none !important;
}
body[data-route="settings"] .card{
  box-shadow:var(--shadow-sm) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body[data-route="settings"] .card:hover{
  transform:none !important;
}
body[data-route="settings"] .btn{
  border-radius:var(--r-lg) !important;
}

@media (max-width:900px){
  #app-topbar,
  .modal-overlay{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .page-header{
    padding:1rem !important;
    border-radius:14px !important;
  }
  .card:hover,
  .kpi-card:hover,
  .stats-card:hover{
    box-shadow:var(--shadow-xs) !important;
  }
}

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

/* Stable module paints: repeated live-data refreshes should not replay page
   entrance animations, which reads as flicker on operational screens. */
#app-content > div,
#app-content > .page-container{
  animation:none !important;
}

/* BIMAS operational stability mode. The app is data-heavy and replaces large
   module sections during navigation/sync; global motion and backdrop blur can
   present as flicker on Windows/Chromium GPUs. */
html[data-auth-ready="app"] #app-topbar,
html[data-auth-ready="app"] #app-sidebar,
html[data-auth-ready="app"] #app-bottomnav,
html[data-auth-ready="app"] #app-content,
html[data-auth-ready="app"] #app-content *,
html[data-auth-ready="app"] #app-content *::before,
html[data-auth-ready="app"] #app-content *::after{
  animation:none !important;
  transition:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Final corporate override - actual last layer. */
html[data-auth-ready="app"] #app-content{
  overflow-x:hidden !important;
}
html[data-auth-ready="app"] #app-content > .page-container{
  width:100% !important;
  max-width:1440px !important;
  margin:0 auto !important;
  min-width:0 !important;
}
html[data-auth-ready="app"] .dash-shell,
html[data-auth-ready="app"] .dashboard-shell,
html[data-auth-ready="app"] .production-shell,
html[data-auth-ready="app"] .bimas-bom-page,
html[data-auth-ready="app"] .inv-module,
html[data-auth-ready="app"] .reorder-dashboard{
  background:transparent !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}
html[data-auth-ready="app"] #app-content .hero,
html[data-auth-ready="app"] #app-content .dash-hero,
html[data-auth-ready="app"] #app-content .production-hero{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-mid) 62%,var(--brand-orange)) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--shadow-md) !important;
}
html[data-auth-ready="app"] #app-content .hero p,
html[data-auth-ready="app"] #app-content .dash-hero .sub,
html[data-auth-ready="app"] #app-content .production-hero-copy > p,
html[data-auth-ready="app"] #app-content .page-subtitle,
html[data-auth-ready="app"] #app-content .inv-page-sub,
html[data-auth-ready="app"] #app-content .helper-text,
html[data-auth-ready="app"] #app-content .hint-text,
html[data-auth-ready="app"] #app-content .form-help,
html[data-auth-ready="app"] #app-content .empty-state > p{
  display:none !important;
}
html[data-auth-ready="app"] #app-content h1,
html[data-auth-ready="app"] #app-content .page-title,
html[data-auth-ready="app"] #app-content .inv-page-title,
html[data-auth-ready="app"] #app-content .hero h1,
html[data-auth-ready="app"] #app-content .dash-hero h1{
  font-family:var(--font-display) !important;
  font-size:clamp(1.24rem,1.04rem + .75vw,1.7rem) !important;
  line-height:1.12 !important;
  letter-spacing:-.02em !important;
}
html[data-auth-ready="app"] #app-content .card,
html[data-auth-ready="app"] #app-content .dash-card,
html[data-auth-ready="app"] #app-content .dash-card2,
html[data-auth-ready="app"] #app-content .dashboard-card,
html[data-auth-ready="app"] #app-content .module-card,
html[data-auth-ready="app"] #app-content .kpi-card,
html[data-auth-ready="app"] #app-content .stats-card,
html[data-auth-ready="app"] #app-content .inv-kpi-card,
html[data-auth-ready="app"] #app-content .inv-panel,
html[data-auth-ready="app"] #app-content .bimas-panel,
html[data-auth-ready="app"] #app-content .reorder-card{
  background:var(--surface-0) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--shadow-sm) !important;
}
html[data-auth-ready="app"] #app-content .dash-shortcut,
html[data-auth-ready="app"] #app-content .btn-primary,
html[data-auth-ready="app"] #app-content button.btn-primary{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-mid)) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:var(--shadow-blue) !important;
}
html[data-auth-ready="app"] #app-content .dash-shortcut:nth-child(2n),
html[data-auth-ready="app"] #app-content .btn-warning,
html[data-auth-ready="app"] #app-content .btn-accent{
  background:linear-gradient(135deg,var(--brand-orange),var(--brand-orange-mid)) !important;
  color:#fff !important;
}
html[data-auth-ready="app"] #app-content .btn-secondary,
html[data-auth-ready="app"] #app-content button.btn-secondary{
  background:var(--surface-0) !important;
  color:var(--brand-blue) !important;
  border:1px solid var(--border) !important;
}
html[data-auth-ready="app"] #app-content .btn,
html[data-auth-ready="app"] #app-content button[class*="btn"],
html[data-auth-ready="app"] #app-content .dash-shortcut,
html[data-auth-ready="app"] #app-content .dash-row,
html[data-auth-ready="app"] #app-content .dash-dept{
  border-radius:var(--r-md) !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}
html[data-auth-ready="app"] #app-content [style*="display:grid"],
html[data-auth-ready="app"] #app-content [style*="display: grid"],
html[data-auth-ready="app"] #app-content [style*="display:flex"],
html[data-auth-ready="app"] #app-content [style*="display: flex"]{
  min-width:0 !important;
  max-width:100% !important;
}
html[data-auth-ready="app"] #app-content img,
html[data-auth-ready="app"] #app-content svg,
html[data-auth-ready="app"] #app-content canvas,
html[data-auth-ready="app"] #app-content table,
html[data-auth-ready="app"] #app-content .data-table{
  max-width:100% !important;
}
html[data-auth-ready="app"] #app-content table,
html[data-auth-ready="app"] #app-content .data-table{
  width:100% !important;
}
@media (max-width:900px){
  html[data-auth-ready="app"] #app-content > .page-container{
    max-width:100% !important;
  }
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns:repeat"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns: repeat"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns:minmax"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns: minmax"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns:1fr 1fr"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns: 1fr 1fr"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns:2fr"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns: 2fr"],
  html[data-auth-ready="app"] .dash-grid,
  html[data-auth-ready="app"] .dash-main-grid,
  html[data-auth-ready="app"] .dash-two,
  html[data-auth-ready="app"] .dash-dept-grid,
  html[data-auth-ready="app"] .inv-kpi-row{
    grid-template-columns:1fr !important;
  }
  html[data-auth-ready="app"] #app-content [style*="justify-content:space-between"],
  html[data-auth-ready="app"] #app-content [style*="justify-content: space-between"],
  html[data-auth-ready="app"] .dash-hero-row{
    flex-wrap:wrap !important;
  }
}
@media (max-width:560px){
  html[data-auth-ready="app"] #app-content{
    padding-left:.7rem !important;
    padding-right:.7rem !important;
  }
  html[data-auth-ready="app"] #app-content .hero,
  html[data-auth-ready="app"] #app-content .dash-hero,
  html[data-auth-ready="app"] #app-content .production-hero{
    padding:1rem !important;
    min-height:auto !important;
  }
  html[data-auth-ready="app"] #app-content .card,
  html[data-auth-ready="app"] #app-content .dash-card,
  html[data-auth-ready="app"] #app-content .dash-card2,
  html[data-auth-ready="app"] #app-content .dashboard-card,
  html[data-auth-ready="app"] #app-content .module-card{
    padding:.9rem !important;
  }
}

/* ================================================================
   BIMAS Simple Navy + Gold Finish
   Compact, quiet screens inspired by the reference dashboard.
   ================================================================ */
html[data-auth-ready="app"]{
  --brand-blue:#111c35;
  --brand-blue-mid:#172645;
  --brand-blue-light:#263a63;
  --brand-blue-faint:#f3f6fb;
  --brand-blue-dim:#d7deec;
  --brand-orange:#d6a532;
  --brand-orange-mid:#f2b91f;
  --brand-orange-faint:#fff8e6;
  --brand-orange-dim:#f8df9a;
  --bg:#f6f8fb;
  --surface-0:#ffffff;
  --surface-1:#f8fafc;
  --surface-2:#eef2f7;
  --text-primary:#071124;
  --text-secondary:#334155;
  --text-muted:#6b7280;
  --border:#dce3ee;
  --r-lg:.75rem;
  --r-xl:.8rem;
  --r-2xl:.8rem;
  --r-3xl:.95rem;
  --shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 2px 8px rgba(15,23,42,.05);
  --shadow-lg:0 3px 12px rgba(15,23,42,.06);
  --shadow-blue:0 3px 10px rgba(17,28,53,.14);
  --shadow-orange:0 3px 10px rgba(214,165,50,.18);
}

html[data-auth-ready="app"] body{
  background:var(--bg) !important;
  color:var(--text-primary) !important;
  font-size:.875rem !important;
  line-height:1.45 !important;
}

html[data-auth-ready="app"] #app-content{
  background:var(--bg) !important;
}

html[data-auth-ready="app"] #app-content .page-container{
  gap:.9rem !important;
}

html[data-auth-ready="app"] #app-content .page-header,
html[data-auth-ready="app"] #app-content .section-header{
  padding:.8rem 0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

html[data-auth-ready="app"] #app-content h1,
html[data-auth-ready="app"] #app-content .page-title,
html[data-auth-ready="app"] #app-content .inv-page-title,
html[data-auth-ready="app"] #app-content .hero h1,
html[data-auth-ready="app"] #app-content .dash-hero h1{
  font-size:clamp(1.05rem,.98rem + .36vw,1.32rem) !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] #app-content h2,
html[data-auth-ready="app"] #app-content h3,
html[data-auth-ready="app"] #app-content h4,
html[data-auth-ready="app"] #app-content .dash-section-head h2{
  font-size:.92rem !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] #app-content .card,
html[data-auth-ready="app"] #app-content .dash-card,
html[data-auth-ready="app"] #app-content .dash-card2,
html[data-auth-ready="app"] #app-content .dashboard-card,
html[data-auth-ready="app"] #app-content .module-card,
html[data-auth-ready="app"] #app-content .kpi-card,
html[data-auth-ready="app"] #app-content .stats-card,
html[data-auth-ready="app"] #app-content .inv-kpi-card,
html[data-auth-ready="app"] #app-content .inv-panel,
html[data-auth-ready="app"] #app-content .inv-chart-card,
html[data-auth-ready="app"] #app-content .inv-accuracy-card,
html[data-auth-ready="app"] #app-content .inv-recent-card,
html[data-auth-ready="app"] #app-content .so-section,
html[data-auth-ready="app"] #app-content .so-side-card,
html[data-auth-ready="app"] #app-content .bimas-panel,
html[data-auth-ready="app"] #app-content .bimas-detail-card,
html[data-auth-ready="app"] #app-content .reorder-card,
html[data-auth-ready="app"] #app-content .production-order-card,
html[data-auth-ready="app"] #app-content .production-shopfloor-card,
html[data-auth-ready="app"] #app-content .production-stage-card,
html[data-auth-ready="app"] #app-content .production-summary-card{
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:.75rem !important;
  box-shadow:var(--shadow-sm) !important;
  padding:.9rem !important;
}

html[data-auth-ready="app"] #app-content .kpi-card,
html[data-auth-ready="app"] #app-content .stats-card,
html[data-auth-ready="app"] #app-content .dash-kpi,
html[data-auth-ready="app"] #app-content .inv-kpi-card{
  min-height:5.9rem !important;
  padding:.85rem .95rem !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] #app-content .kpi-value,
html[data-auth-ready="app"] #app-content .stats-value,
html[data-auth-ready="app"] #app-content .dash-kpi .value,
html[data-auth-ready="app"] #app-content .inv-kpi-value{
  font-size:1.12rem !important;
  line-height:1.15 !important;
  letter-spacing:0 !important;
  color:var(--text-primary) !important;
}

html[data-auth-ready="app"] #app-content .kpi-label,
html[data-auth-ready="app"] #app-content .stats-label,
html[data-auth-ready="app"] #app-content .dash-kpi .label,
html[data-auth-ready="app"] #app-content .inv-kpi-label{
  font-size:.62rem !important;
  letter-spacing:.04em !important;
  color:#516071 !important;
}

html[data-auth-ready="app"] #app-content .kpi-icon,
html[data-auth-ready="app"] #app-content .dash-kpi .kicon,
html[data-auth-ready="app"] #app-content .inv-kpi-icon{
  width:2rem !important;
  height:2rem !important;
  border-radius:.55rem !important;
  background:var(--brand-orange) !important;
  color:#101828 !important;
  box-shadow:none !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(3) .kicon,
html[data-auth-ready="app"] #app-content .dash-kpi.is-dark,
html[data-auth-ready="app"] #app-content .kpi-card.is-dark{
  background:var(--brand-blue) !important;
  color:#fff !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(3),
html[data-auth-ready="app"] #app-content .kpi-card.is-dark{
  background:var(--brand-blue) !important;
  border-color:var(--brand-blue) !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(3) .label,
html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(3) .value{
  color:#fff !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi:before,
html[data-auth-ready="app"] #app-content .kpi-card:before,
html[data-auth-ready="app"] #app-content .kpi-card:after,
html[data-auth-ready="app"] #app-content .dash-spark{
  display:none !important;
}

html[data-auth-ready="app"] #app-content .hero,
html[data-auth-ready="app"] #app-content .dash-hero,
html[data-auth-ready="app"] #app-content .production-hero{
  min-height:auto !important;
  padding:.85rem 1rem !important;
  background:var(--brand-blue) !important;
  color:#fff !important;
  border:1px solid #1e2f53 !important;
  border-radius:.75rem !important;
  box-shadow:var(--shadow-sm) !important;
}

html[data-auth-ready="app"] #app-content .hero:before,
html[data-auth-ready="app"] #app-content .hero:after,
html[data-auth-ready="app"] #app-content .dash-hero:before,
html[data-auth-ready="app"] #app-content .dash-hero:after,
html[data-auth-ready="app"] #app-content .production-hero:before,
html[data-auth-ready="app"] #app-content .production-hero:after{
  display:none !important;
}

html[data-auth-ready="app"] #app-content .dash-hero-row{
  gap:.75rem !important;
}

html[data-auth-ready="app"] #app-content #dash-clock{
  font-size:1rem !important;
  color:var(--brand-orange) !important;
  -webkit-text-fill-color:var(--brand-orange) !important;
}

html[data-auth-ready="app"] #app-content .dash-grid,
html[data-auth-ready="app"] #app-content .dashboard-grid,
html[data-auth-ready="app"] #app-content .quick-action-grid,
html[data-auth-ready="app"] #app-content .production-stat-grid,
html[data-auth-ready="app"] #app-content .bimas-bom-kpis,
html[data-auth-ready="app"] #app-content .reorder-kpi-grid,
html[data-auth-ready="app"] #app-content .inv-kpi-row{
  gap:.75rem !important;
}

html[data-auth-ready="app"] #app-content .dash-section,
html[data-auth-ready="app"] #app-content .dash-departments-panel{
  padding:.9rem !important;
}

html[data-auth-ready="app"] #app-content .dash-row,
html[data-auth-ready="app"] #app-content .dash-dept,
html[data-auth-ready="app"] #app-content .production-phase-tile,
html[data-auth-ready="app"] #app-content .production-action-tile,
html[data-auth-ready="app"] #app-content .production-work-sequence__card{
  min-height:auto !important;
  padding:.78rem .85rem !important;
  border-radius:.65rem !important;
  background:#fff !important;
  border:1px solid var(--border) !important;
  box-shadow:none !important;
}

html[data-auth-ready="app"] #app-content .dash-work{
  background:var(--brand-orange-faint) !important;
  border-color:var(--brand-orange-dim) !important;
}

html[data-auth-ready="app"] #app-content .dash-head-icon,
html[data-auth-ready="app"] #app-content .production-phase-tile .material-symbols-outlined{
  width:1.8rem !important;
  height:1.8rem !important;
  border-radius:.5rem !important;
  color:var(--brand-blue) !important;
  background:var(--brand-orange-faint) !important;
  border:1px solid var(--brand-orange-dim) !important;
}

html[data-auth-ready="app"] #app-content .btn,
html[data-auth-ready="app"] #app-content button[class*="btn"],
html[data-auth-ready="app"] #app-content .dash-shortcut{
  min-height:2.2rem !important;
  padding:.45rem .7rem !important;
  border-radius:.55rem !important;
  font-size:.78rem !important;
  box-shadow:none !important;
}

html[data-auth-ready="app"] #app-content .btn-primary,
html[data-auth-ready="app"] #app-content button.btn-primary,
html[data-auth-ready="app"] #app-content .dash-shortcut{
  background:var(--brand-blue) !important;
  color:#fff !important;
}

html[data-auth-ready="app"] #app-content .btn-warning,
html[data-auth-ready="app"] #app-content .btn-accent,
html[data-auth-ready="app"] #app-content .dash-shortcut:nth-child(2n){
  background:var(--brand-orange) !important;
  color:#101828 !important;
}

html[data-auth-ready="app"] #app-content .page-subtitle,
html[data-auth-ready="app"] #app-content .inv-page-sub,
html[data-auth-ready="app"] #app-content .helper-text,
html[data-auth-ready="app"] #app-content .hint-text,
html[data-auth-ready="app"] #app-content .form-help,
html[data-auth-ready="app"] #app-content [data-help-text="true"],
html[data-auth-ready="app"] #app-content .empty-state > p,
html[data-auth-ready="app"] #app-content .hero p,
html[data-auth-ready="app"] #app-content .dash-hero .sub,
html[data-auth-ready="app"] #app-content .dash-kpi .sub,
html[data-auth-ready="app"] #app-content .dash-row span[style*="font-size:.72rem"],
html[data-auth-ready="app"] #app-content .dash-dept span[style*="font-size:.68rem"],
html[data-auth-ready="app"] #app-content .production-phase-tile p,
html[data-auth-ready="app"] #app-content .production-stage-card p,
html[data-auth-ready="app"] #app-content .production-action-tile p,
html[data-auth-ready="app"] #app-content .production-detail-subtitle,
html[data-auth-ready="app"] #app-content .production-work-sequence__card p,
html[data-auth-ready="app"] #app-content .production-detail-side-note,
html[data-auth-ready="app"] #app-content .inv-kpi-sub,
html[data-auth-ready="app"] #app-content .inv-disclaimer{
  display:none !important;
}

html[data-auth-ready="app"] #app-content table,
html[data-auth-ready="app"] #app-content .data-table{
  font-size:.78rem !important;
}

html[data-auth-ready="app"] #app-content th,
html[data-auth-ready="app"] #app-content td{
  padding:.55rem .65rem !important;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] #app-content .dash-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:560px){
  html[data-auth-ready="app"] #app-content .dash-grid,
  html[data-auth-ready="app"] #app-content .dashboard-grid,
  html[data-auth-ready="app"] #app-content .grid-4,
  html[data-auth-ready="app"] #app-content .form-grid-4{
    grid-template-columns:1fr !important;
  }

  html[data-auth-ready="app"] #app-content .hero,
  html[data-auth-ready="app"] #app-content .dash-hero,
  html[data-auth-ready="app"] #app-content .production-hero{
    padding:.75rem !important;
  }
}

/* PFI professional compact overrides */
html[data-auth-ready="app"] #app-content [style*="#667eea"],
html[data-auth-ready="app"] #app-content [style*="#10b981 0%,#059669"],
html[data-auth-ready="app"] #app-content [style*="#f59e0b 0%,#d97706"]{
  background:#fff !important;
  color:var(--text-primary) !important;
  border:1px solid var(--border) !important;
  border-radius:.7rem !important;
  box-shadow:var(--shadow-sm) !important;
  padding:.85rem .95rem !important;
  min-height:5.6rem !important;
}

html[data-auth-ready="app"] #app-content [style*="#667eea"] .material-symbols-outlined,
html[data-auth-ready="app"] #app-content [style*="#10b981 0%,#059669"] .material-symbols-outlined,
html[data-auth-ready="app"] #app-content [style*="#f59e0b 0%,#d97706"] .material-symbols-outlined{
  width:2rem !important;
  height:2rem !important;
  border-radius:.5rem !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--brand-orange) !important;
  color:#101828 !important;
  font-size:1.05rem !important;
  opacity:1 !important;
}

html[data-auth-ready="app"] #app-content [style*="#667eea"] [style*="font-size:2rem"],
html[data-auth-ready="app"] #app-content [style*="#10b981 0%,#059669"] [style*="font-size:2rem"],
html[data-auth-ready="app"] #app-content [style*="#f59e0b 0%,#d97706"] [style*="font-size:2rem"]{
  font-size:1.05rem !important;
  color:var(--text-primary) !important;
}

html[data-auth-ready="app"] #app-content [style*="#667eea"] [style*="border-top"],
html[data-auth-ready="app"] #app-content [style*="#10b981 0%,#059669"] [style*="border-top"],
html[data-auth-ready="app"] #app-content [style*="#f59e0b 0%,#d97706"] [style*="border-top"],
html[data-auth-ready="app"] #pfi-customerName + p{
  display:none !important;
}

/* Professional workflow simplification */
html[data-auth-ready="app"] .sidebar-nav [data-route="ai"],
html[data-auth-ready="app"] .sidebar-nav [data-route="advanced-reports"],
html[data-auth-ready="app"] .sidebar-nav [data-route="manufacturing-intelligence"],
html[data-auth-ready="app"] .sidebar-nav [data-route="bom-explorer"],
html[data-auth-ready="app"] .sidebar-nav [data-route="bom-versions"],
html[data-auth-ready="app"] .sidebar-nav [data-route="bulk-operations"],
html[data-auth-ready="app"] .sidebar-nav [data-route="comms"]{
  display:none !important;
}

html[data-auth-ready="app"] .sidebar-nav .nav-group-count{
  display:none !important;
}

html[data-auth-ready="app"] .topbar-alert-btn,
html[data-auth-ready="app"] [data-route="approvals"]{
  position:relative;
}

html[data-auth-ready="app"] .topbar-badge:not(:empty),
html[data-auth-ready="app"] .ops-hub-badge{
  box-shadow:0 0 0 3px rgba(245,158,11,.18),0 8px 18px rgba(245,158,11,.24) !important;
}

/* Dashboard final layout polish */
html[data-auth-ready="app"] #app-content .dash-shell{
  display:grid !important;
  gap:1.15rem !important;
  width:100% !important;
  max-width:1360px !important;
  margin:0 auto !important;
  padding:0 !important;
  background:transparent !important;
}

html[data-auth-ready="app"] #app-content .dash-hero{
  min-height:8.25rem !important;
  padding:1.45rem 1.6rem !important;
  display:flex !important;
  align-items:center !important;
  background:
    radial-gradient(circle at 94% 45%, rgba(255,255,255,.18) 0 5.75rem, transparent 5.85rem),
    linear-gradient(135deg, #003f8f 0%, #0057bf 58%, #e05c00 100%) !important;
  border-radius:var(--r-lg) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 14px 34px rgba(0,70,153,.16) !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] #app-content .dash-hero-row{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:1rem !important;
}

html[data-auth-ready="app"] #app-content .dash-hero h1{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:none !important;
  font-size:clamp(1.35rem, 1.08rem + 1vw, 1.9rem) !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  margin:0 !important;
}

html[data-auth-ready="app"] #app-content .dash-hero .sub{
  display:block !important;
  color:rgba(255,255,255,.86) !important;
  font-size:.86rem !important;
  margin:.25rem 0 0 !important;
}

html[data-auth-ready="app"] #app-content #dash-clock{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-size:1.35rem !important;
}

html[data-auth-ready="app"] #app-content .dash-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:1rem !important;
}

html[data-auth-ready="app"] #app-content .dash-main-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1.15fr) minmax(20rem,.85fr) !important;
  gap:1rem !important;
  align-items:start !important;
}

html[data-auth-ready="app"] #app-content .dash-side-stack{
  display:grid !important;
  gap:1rem !important;
}

html[data-auth-ready="app"] #app-content .dash-card2{
  background:var(--surface-0) !important;
  border:1px solid rgba(0,70,153,.10) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.07) !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi{
  min-height:10rem !important;
  padding:1.05rem !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi .kicon{
  width:2.45rem !important;
  height:2.45rem !important;
  border-radius:var(--r-md) !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi .label{
  margin-top:.85rem !important;
  color:var(--text-tertiary) !important;
  font-size:.68rem !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi .value{
  color:var(--text-primary) !important;
  font-size:clamp(1.22rem, 1rem + .5vw, 1.5rem) !important;
  line-height:1.1 !important;
  word-break:break-word !important;
}

html[data-auth-ready="app"] #app-content .dash-section{
  padding:1.05rem !important;
}

html[data-auth-ready="app"] #app-content .dash-section-head{
  display:flex !important;
  align-items:center !important;
  gap:.65rem !important;
  margin-bottom:.9rem !important;
}

html[data-auth-ready="app"] #app-content .dash-section-head h2{
  color:var(--text-primary) !important;
  font-size:1rem !important;
  font-weight:900 !important;
  margin:0 !important;
}

html[data-auth-ready="app"] #app-content .dash-head-icon{
  width:2rem !important;
  height:2rem !important;
  border-radius:var(--r-md) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--brand-blue-faint) !important;
  color:var(--brand-blue) !important;
  border:1px solid var(--brand-blue-dim) !important;
}

html[data-auth-ready="app"] #app-content .dash-shortcuts{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr)) !important;
  gap:.75rem !important;
}

html[data-auth-ready="app"] #app-content .dash-shortcut{
  min-height:3.55rem !important;
  padding:.75rem .85rem !important;
  align-items:center !important;
  border-radius:var(--r-md) !important;
}

html[data-auth-ready="app"] #app-content .dash-row,
html[data-auth-ready="app"] #app-content .dash-dept{
  background:var(--surface-0) !important;
  border:1px solid var(--border) !important;
  box-shadow:none !important;
}

html[data-auth-ready="app"] #app-content .dash-dept-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:.75rem !important;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] #app-content .dash-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  html[data-auth-ready="app"] #app-content .dash-main-grid{
    grid-template-columns:1fr !important;
  }
  html[data-auth-ready="app"] #app-content .dash-dept-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:680px){
  html[data-auth-ready="app"] #app-content .dash-shell{
    gap:.85rem !important;
  }
  html[data-auth-ready="app"] #app-content .dash-hero{
    padding:1rem !important;
  }
  html[data-auth-ready="app"] #app-content .dash-hero-row{
    align-items:flex-start !important;
    flex-direction:column !important;
  }
  html[data-auth-ready="app"] #app-content .dash-grid,
  html[data-auth-ready="app"] #app-content .dash-dept-grid{
    grid-template-columns:1fr !important;
  }
}

/* Final corporate UI source of truth.
   This intentionally comes last so older module-level inline style blocks do
   not fragment typography, colors, spacing, or responsiveness. */
html[data-auth-ready="app"] #app-content{
  overflow-x:hidden !important;
}

html[data-auth-ready="app"] #app-content > .page-container{
  width:100% !important;
  max-width:1440px !important;
  margin:0 auto !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] .dash-shell,
html[data-auth-ready="app"] .dashboard-shell,
html[data-auth-ready="app"] .production-shell,
html[data-auth-ready="app"] .bimas-bom-page,
html[data-auth-ready="app"] .inv-module,
html[data-auth-ready="app"] .reorder-dashboard{
  background:transparent !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] #app-content .hero,
html[data-auth-ready="app"] #app-content .dash-hero,
html[data-auth-ready="app"] #app-content .production-hero{
  background:
    linear-gradient(135deg,rgba(0,70,153,.96),rgba(21,99,204,.96) 58%,rgba(224,92,0,.9)) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--shadow-md) !important;
}

html[data-auth-ready="app"] #app-content .hero p,
html[data-auth-ready="app"] #app-content .dash-hero .sub,
html[data-auth-ready="app"] #app-content .production-hero-copy > p{
  display:none !important;
}

html[data-auth-ready="app"] #app-content h1,
html[data-auth-ready="app"] #app-content .page-title,
html[data-auth-ready="app"] #app-content .inv-page-title,
html[data-auth-ready="app"] #app-content .hero h1,
html[data-auth-ready="app"] #app-content .dash-hero h1{
  font-family:var(--font-display) !important;
  line-height:1.12 !important;
  letter-spacing:-.02em !important;
}

html[data-auth-ready="app"] #app-content h1,
html[data-auth-ready="app"] #app-content .page-title,
html[data-auth-ready="app"] #app-content .inv-page-title{
  font-size:clamp(1.24rem,1.04rem + .75vw,1.7rem) !important;
}

html[data-auth-ready="app"] #app-content .page-subtitle,
html[data-auth-ready="app"] #app-content .inv-page-sub,
html[data-auth-ready="app"] #app-content .helper-text,
html[data-auth-ready="app"] #app-content .hint-text,
html[data-auth-ready="app"] #app-content .form-help,
html[data-auth-ready="app"] #app-content .empty-state > p{
  display:none !important;
}

html[data-auth-ready="app"] #app-content .card,
html[data-auth-ready="app"] #app-content .dash-card,
html[data-auth-ready="app"] #app-content .dash-card2,
html[data-auth-ready="app"] #app-content .dashboard-card,
html[data-auth-ready="app"] #app-content .module-card,
html[data-auth-ready="app"] #app-content .kpi-card,
html[data-auth-ready="app"] #app-content .stats-card,
html[data-auth-ready="app"] #app-content .inv-kpi-card,
html[data-auth-ready="app"] #app-content .inv-panel,
html[data-auth-ready="app"] #app-content .bimas-panel,
html[data-auth-ready="app"] #app-content .reorder-card{
  background:var(--surface-0) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--shadow-sm) !important;
}

html[data-auth-ready="app"] #app-content .section-header,
html[data-auth-ready="app"] #app-content .page-header,
html[data-auth-ready="app"] #app-content .inv-topbar{
  border-color:var(--border) !important;
  gap:.85rem !important;
}

html[data-auth-ready="app"] #app-content .dash-shortcut,
html[data-auth-ready="app"] #app-content .btn-primary,
html[data-auth-ready="app"] #app-content button.btn-primary{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-mid)) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:var(--shadow-blue) !important;
}

html[data-auth-ready="app"] #app-content .dash-shortcut:nth-child(2n),
html[data-auth-ready="app"] #app-content .btn-warning,
html[data-auth-ready="app"] #app-content .btn-accent{
  background:linear-gradient(135deg,var(--brand-orange),var(--brand-orange-mid)) !important;
  color:#fff !important;
}

html[data-auth-ready="app"] #app-content .btn-secondary,
html[data-auth-ready="app"] #app-content button.btn-secondary{
  background:var(--surface-0) !important;
  color:var(--brand-blue) !important;
  border:1px solid var(--border) !important;
}

html[data-auth-ready="app"] #app-content .btn,
html[data-auth-ready="app"] #app-content button[class*="btn"],
html[data-auth-ready="app"] #app-content .dash-shortcut,
html[data-auth-ready="app"] #app-content .dash-row,
html[data-auth-ready="app"] #app-content .dash-dept{
  border-radius:var(--r-md) !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi .label,
html[data-auth-ready="app"] #app-content .dash-kpi .sub,
html[data-auth-ready="app"] #app-content .inv-kpi-label,
html[data-auth-ready="app"] #app-content .stat-label{
  color:var(--text-tertiary) !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi .value,
html[data-auth-ready="app"] #app-content .inv-kpi-value,
html[data-auth-ready="app"] #app-content .stat-value{
  color:var(--text-primary) !important;
}

html[data-auth-ready="app"] #app-content [style*="display:grid"],
html[data-auth-ready="app"] #app-content [style*="display: grid"],
html[data-auth-ready="app"] #app-content [style*="display:flex"],
html[data-auth-ready="app"] #app-content [style*="display: flex"]{
  min-width:0 !important;
  max-width:100% !important;
}

html[data-auth-ready="app"] #app-content img,
html[data-auth-ready="app"] #app-content svg,
html[data-auth-ready="app"] #app-content canvas{
  max-width:100% !important;
}

html[data-auth-ready="app"] #app-content table,
html[data-auth-ready="app"] #app-content .data-table{
  width:100% !important;
}

html[data-auth-ready="app"] #app-content .data-table th{
  color:var(--text-secondary) !important;
  letter-spacing:.03em !important;
}

@media (min-width:1201px){
  html[data-auth-ready="app"] #app-content > .page-container{
    max-width:1440px !important;
  }
}

@media (max-width:900px){
  html[data-auth-ready="app"] #app-content > .page-container{
    max-width:100% !important;
  }
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns:repeat"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns: repeat"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns:minmax"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns: minmax"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns:1fr 1fr"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns: 1fr 1fr"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns:2fr"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns: 2fr"],
  html[data-auth-ready="app"] .dash-grid,
  html[data-auth-ready="app"] .dash-main-grid,
  html[data-auth-ready="app"] .dash-two,
  html[data-auth-ready="app"] .dash-dept-grid,
  html[data-auth-ready="app"] .inv-kpi-row{
    grid-template-columns:1fr !important;
  }
  html[data-auth-ready="app"] #app-content [style*="justify-content:space-between"],
  html[data-auth-ready="app"] #app-content [style*="justify-content: space-between"],
  html[data-auth-ready="app"] .dash-hero-row{
    flex-wrap:wrap !important;
  }
}

@media (max-width:560px){
  html[data-auth-ready="app"] #app-content{
    padding-left:.7rem !important;
    padding-right:.7rem !important;
  }
  html[data-auth-ready="app"] #app-content .hero,
  html[data-auth-ready="app"] #app-content .dash-hero,
  html[data-auth-ready="app"] #app-content .production-hero{
    padding:1rem !important;
    min-height:auto !important;
  }
  html[data-auth-ready="app"] #app-content .card,
  html[data-auth-ready="app"] #app-content .dash-card,
  html[data-auth-ready="app"] #app-content .dash-card2,
  html[data-auth-ready="app"] #app-content .dashboard-card,
  html[data-auth-ready="app"] #app-content .module-card{
    padding:.9rem !important;
  }
  html[data-auth-ready="app"] #app-content .data-table th,
  html[data-auth-ready="app"] #app-content .data-table td{
    padding:.65rem .75rem !important;
  }
}

/* ERP UI consistency pass: shared polish for legacy inline modules. */
html[data-auth-ready="app"] #app-content{
  overflow-x:hidden !important;
}

html[data-auth-ready="app"] #app-content .page-container{
  width:100% !important;
  max-width:1440px !important;
  margin:0 auto !important;
}

html[data-auth-ready="app"] #app-content h1,
html[data-auth-ready="app"] #app-content .page-title,
html[data-auth-ready="app"] #app-content .inv-page-title{
  font-family:var(--font-display) !important;
  font-size:clamp(1.28rem, 1.1rem + .7vw, 1.75rem) !important;
  line-height:1.12 !important;
  letter-spacing:-.02em !important;
  color:var(--text-primary) !important;
}

html[data-auth-ready="app"] #app-content h2{
  font-family:var(--font-display) !important;
  font-size:clamp(1rem, .92rem + .35vw, 1.25rem) !important;
  letter-spacing:-.01em !important;
}

html[data-auth-ready="app"] #app-content .page-subtitle,
html[data-auth-ready="app"] #app-content .inv-page-sub,
html[data-auth-ready="app"] #app-content .helper-text,
html[data-auth-ready="app"] #app-content .hint-text,
html[data-auth-ready="app"] #app-content .form-help,
html[data-auth-ready="app"] #app-content .empty-state > p{
  display:none !important;
}

html[data-auth-ready="app"] #app-content .btn-primary,
html[data-auth-ready="app"] #app-content button.btn-primary{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-mid)) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:var(--shadow-blue) !important;
}

html[data-auth-ready="app"] #app-content .btn-secondary,
html[data-auth-ready="app"] #app-content button.btn-secondary{
  background:var(--surface-0) !important;
  border:1px solid var(--erp-border) !important;
  color:var(--brand-blue) !important;
  box-shadow:var(--shadow-xs) !important;
}

html[data-auth-ready="app"] #app-content .btn-ghost,
html[data-auth-ready="app"] #app-content button.btn-ghost{
  color:var(--text-secondary) !important;
}

html[data-auth-ready="app"] #app-content .btn,
html[data-auth-ready="app"] #app-content button[class*="btn"]{
  border-radius:var(--r-md) !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] #app-content .card,
html[data-auth-ready="app"] #app-content .dash-card,
html[data-auth-ready="app"] #app-content .dash-card2,
html[data-auth-ready="app"] #app-content .dashboard-card,
html[data-auth-ready="app"] #app-content .inv-kpi-card{
  border-radius:var(--r-lg) !important;
}

html[data-auth-ready="app"] #app-content [style*="display:grid"],
html[data-auth-ready="app"] #app-content [style*="display: grid"],
html[data-auth-ready="app"] #app-content [style*="display:flex"],
html[data-auth-ready="app"] #app-content [style*="display: flex"]{
  min-width:0 !important;
  max-width:100% !important;
}

html[data-auth-ready="app"] #app-content img,
html[data-auth-ready="app"] #app-content svg,
html[data-auth-ready="app"] #app-content canvas{
  max-width:100%;
}

html[data-auth-ready="app"] #app-content .data-table,
html[data-auth-ready="app"] #app-content table{
  width:100%;
}

html[data-auth-ready="app"] #app-content .data-table th,
html[data-auth-ready="app"] #app-content .data-table td{
  vertical-align:middle;
}

html[data-auth-ready="app"] #app-content .data-table th{
  color:var(--text-secondary) !important;
  letter-spacing:.03em !important;
}

@media (max-width:900px){
  html[data-auth-ready="app"] #app-content .page-container{
    max-width:100% !important;
  }
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns:repeat"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns: repeat"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns:minmax"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns: minmax"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns:1fr 1fr"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns: 1fr 1fr"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns:2fr"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns: 2fr"]{
    grid-template-columns:1fr !important;
  }
  html[data-auth-ready="app"] #app-content [style*="justify-content:space-between"],
  html[data-auth-ready="app"] #app-content [style*="justify-content: space-between"]{
    flex-wrap:wrap !important;
  }
}

@media (max-width:560px){
  html[data-auth-ready="app"] #app-content{
    padding-left:.75rem !important;
    padding-right:.75rem !important;
  }
  html[data-auth-ready="app"] #app-content .card,
  html[data-auth-ready="app"] #app-content .dash-card,
  html[data-auth-ready="app"] #app-content .dash-card2,
  html[data-auth-ready="app"] #app-content .dashboard-card{
    padding:.9rem !important;
  }
  html[data-auth-ready="app"] #app-content .data-table th,
  html[data-auth-ready="app"] #app-content .data-table td{
    padding:.65rem .75rem !important;
  }
}

/* ================================================================
   BIMAS BOM dashboard
   ================================================================ */
body[data-route="bom"] #app-content > .page-container{max-width:100rem !important;}
.bimas-bom-page{--bb-navy:#071b3a;--bb-blue:#0757ff;--bb-line:#dde8f6;--bb-soft:#f8fbff;color:#071b3a;display:flex;flex-direction:column;gap:1rem;width:100%;}
.bimas-module-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:.25rem 0 .75rem;border-bottom:1px solid var(--bb-line);}
.bimas-module-header h1{margin:0;font-size:1.55rem;font-weight:850;letter-spacing:0;color:#071b3a;}
.bimas-module-header p{margin:.25rem 0 0;color:#4b5d7a;font-size:.85rem;}
.bimas-menu-btn,.bimas-icon-btn,.bimas-page{border:1px solid var(--bb-line);background:#fff;color:var(--bb-navy);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.bimas-menu-btn{width:2.4rem;height:2.4rem;border:0;background:transparent;}
.bimas-branch-select{height:2.65rem;min-width:17rem;border:1px solid var(--bb-line);border-radius:8px;background:#fff;display:flex;align-items:center;gap:.45rem;padding:0 .9rem;font-size:.75rem;font-weight:800;color:#263856;white-space:nowrap;}
.bimas-branch-select strong{color:#15803d;font-size:.75rem;}
.bimas-branch-select select{border:0;outline:0;background:transparent;color:#1c2f51;font-weight:800;flex:1;}
.bimas-bom-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.8rem;}
.bimas-kpi{background:#fff;border:1px solid var(--bb-line);border-radius:8px;padding:1rem;display:flex;align-items:center;gap:.9rem;min-height:5.7rem;}
.bimas-kpi-icon{width:3.2rem;height:3.2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.bimas-kpi-icon span{font-size:1.75rem;}
.bimas-kpi span{display:block;color:#405370;font-size:.67rem;font-weight:850;text-transform:uppercase;}
.bimas-kpi strong{display:block;color:#071b3a;font-size:1.15rem;font-weight:900;margin:.1rem 0;}
.bimas-kpi small{color:#425474;font-size:.72rem;font-weight:600;}
.bimas-bom-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(24rem,.9fr);gap:1rem;align-items:start;}
.bimas-bom-main,.bimas-detail-card,.bimas-chart-card{background:#fff;border:1px solid var(--bb-line);border-radius:8px;box-shadow:none;}
.bimas-tabs{height:3.2rem;display:flex;align-items:end;gap:1rem;padding:0 1rem;border-bottom:1px solid var(--bb-line);}
.bimas-tabs button,.bimas-detail-tabs button{border:0;background:transparent;color:#071b3a;font-weight:850;cursor:pointer;padding:.75rem .1rem;border-bottom:2px solid transparent;}
.bimas-tabs button.active,.bimas-detail-tabs button.active{color:var(--bb-blue);border-bottom-color:var(--bb-blue);}
.bimas-bom-toolbar{display:flex;align-items:center;gap:.7rem;padding:1rem;flex-wrap:wrap;}
.bimas-search{height:2.35rem;min-width:18rem;flex:1 1 18rem;border:1px solid var(--bb-line);border-radius:6px;background:#fff;display:flex;align-items:center;gap:.45rem;padding:0 .7rem;}
.bimas-search span{font-size:1.05rem;color:#61708d;}
.bimas-search input,.bimas-bom-toolbar select{border:0;outline:0;background:transparent;color:#152644;font-size:.78rem;width:100%;}
.bimas-bom-toolbar select{height:2.35rem;width:auto;min-width:8.2rem;border:1px solid var(--bb-line);border-radius:6px;padding:0 .75rem;background:#fff;font-weight:700;}
.bimas-check{display:flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;color:#263856;}
.bimas-bom-actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex-wrap:wrap;margin-left:auto;}
.bimas-table-wrap{overflow:auto;padding:0 1rem 1rem;}
.bimas-table{width:100%;min-width:58rem;border-collapse:collapse;font-size:.76rem;}
.bimas-table th{background:#f7f9fd;color:#263856;text-align:left;padding:.72rem;font-size:.65rem;font-weight:900;}
.bimas-table td{border-bottom:1px solid #edf2f8;padding:.7rem;color:#102449;white-space:nowrap;}
.bimas-table th:nth-child(7),.bimas-table td:nth-child(7){text-align:right;}
.bimas-table th:last-child,.bimas-table td:last-child{text-align:center;width:4rem;}
.bimas-table td:nth-child(3){white-space:normal;min-width:12rem;font-weight:700;}
.bimas-table tr.selected td{background:#f8fbff;}
.bimas-link{border:0;background:transparent;color:#0057ff;font-weight:900;cursor:pointer;padding:0;}
.bimas-cat,.bimas-status{display:inline-flex;align-items:center;border-radius:999px;padding:.18rem .55rem;font-size:.65rem;font-weight:850;}
.bimas-cat.cp{background:#eaf2ff;color:#0757ff;}
.bimas-cat.hp{background:#f2e9ff;color:#7c3aed;}
.bimas-status{background:#dcfce7;color:#15803d;}
.bimas-status.inactive{background:#fee2e2;color:#b91c1c;}
.bimas-status.draft{background:#e2e8f0;color:#475569;}
.bimas-icon-btn{width:1.8rem;height:1.8rem;border:0;border-radius:6px;}
.bimas-table-footer{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:0 1rem 1rem;color:#425474;font-size:.75rem;flex-wrap:wrap;}
.bimas-table-footer small{color:#60708a;font-weight:700;}
.bimas-page{min-width:2rem;height:2rem;border-radius:6px;margin-left:.3rem;font-size:.72rem;font-weight:800;}
.bimas-page.active{background:#071b3a;color:#fff;}
.bimas-bom-charts{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:.8rem;padding:0 1rem 1rem;}
.bimas-chart-card{padding:1rem;}
.bimas-chart-card h3,.bimas-detail-head h2{margin:0 0 .9rem;font-size:.9rem;font-weight:900;color:#071b3a;}
.bimas-donut-wrap{display:flex;align-items:center;gap:1rem;}
.bimas-donut{width:8.2rem;height:8.2rem;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;}
.bimas-donut div{width:5.25rem;height:5.25rem;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center;}
.bimas-donut span{font-size:.75rem;color:#4b5d7a;font-weight:800;}
.bimas-donut strong{font-size:1.2rem;color:#071b3a;font-weight:900;}
.bimas-legend p{display:flex;align-items:center;gap:.45rem;margin:.45rem 0;font-size:.74rem;color:#324562;}
.bimas-legend i{width:.55rem;height:.55rem;border-radius:50%;}
.bimas-bar-row{display:grid;grid-template-columns:1fr 8rem 3rem;align-items:center;gap:.5rem;margin:.55rem 0;font-size:.68rem;color:#102449;}
.bimas-bar-row div{height:.72rem;background:#eaf1ff;overflow:hidden;}
.bimas-bar-row i{display:block;height:100%;background:#0f5bff;}
.bimas-bar-row strong{font-size:.68rem;}
.bimas-detail-card{padding:1rem;margin-bottom:1rem;}
.bimas-detail-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.bimas-product-info{display:grid;grid-template-columns:8.8rem 1fr;gap:1rem;align-items:start;}
.bimas-product-img{height:8.8rem;border:1px solid var(--bb-line);border-radius:8px;background:linear-gradient(180deg,#f8fbff,#fff);display:grid;place-items:center;}
.bimas-product-img span{font-size:5rem;color:#111827;}
.bimas-product-info p{margin:0 0 .2rem;color:#334967;font-size:.78rem;font-weight:800;}
.bimas-product-info h3{margin:0 0 .45rem;color:#071b3a;font-size:1.1rem;font-weight:900;}
.bimas-product-info dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem .45rem;margin:.5rem 0;font-size:.73rem;}
.bimas-product-info dt{color:#425474;}
.bimas-product-info dd{margin:0;color:#0757ff;font-weight:850;}
.bimas-product-info small{font-size:.7rem;color:#425474;}
.bimas-detail-tabs{display:flex;gap:1rem;overflow:auto;border-bottom:1px solid var(--bb-line);margin-top:1rem;}
.bimas-table-wrap.compact{padding:.8rem 0 0;}
.bimas-table-wrap.compact .bimas-table th,.bimas-table-wrap.compact .bimas-table td{padding:.55rem;font-size:.68rem;}
.bimas-cost-total{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--bb-line);padding-top:1rem;margin-top:.75rem;font-weight:900;color:#071b3a;}
.bimas-cost-total strong{font-size:1.45rem;color:#0757ff;}
.bimas-update{display:grid;grid-template-columns:auto 1fr auto;gap:.55rem;align-items:center;border-bottom:1px solid #edf2f8;padding:.7rem 0;}
.bimas-update span{width:.55rem;height:.55rem;border-radius:50%;}
.bimas-update strong{color:#0757ff;font-size:.72rem;}
.bimas-update small{font-size:.72rem;color:#425474;}
.bimas-update em{font-style:normal;background:#dcfce7;color:#16a34a;border-radius:999px;padding:.18rem .5rem;font-size:.65rem;font-weight:850;}
.bimas-update em.created{background:#ffedd5;color:#f97316;}
@media (max-width:1200px){.bimas-bom-kpis{grid-template-columns:repeat(3,1fr)}.bimas-bom-layout{grid-template-columns:1fr}.bimas-bom-charts{grid-template-columns:1fr}.bimas-product-info{grid-template-columns:1fr}.bimas-product-img{height:7rem}.bimas-branch-select{min-width:12rem}}
@media (max-width:720px){.bimas-module-header{grid-template-columns:auto 1fr}.bimas-module-header h1{font-size:1.25rem}.bimas-branch-select{grid-column:1/-1;width:100%;justify-content:space-between}.bimas-bom-kpis{grid-template-columns:1fr}.bimas-bom-toolbar{align-items:stretch}.bimas-search,.bimas-bom-toolbar select,.bimas-bom-toolbar .btn,.bimas-bom-actions{width:100%;min-width:0}.bimas-bom-actions{margin-left:0}.bimas-donut-wrap{flex-direction:column;align-items:flex-start}.bimas-table{min-width:46rem}.bimas-detail-card{padding:.8rem}.bimas-cost-total{align-items:flex-start;flex-direction:column;gap:.3rem}}

/* ================================================================
   BIMAS Sales Order
   ================================================================ */
body[data-route="sof"] #app-content > .page-container{max-width:100rem !important;}
.sales-order-page{--so-navy:#071b3a;--so-blue:#0757ff;--so-line:#dce7f5;--so-soft:#f8fbff;color:#071b3a;display:flex;flex-direction:column;gap:1rem;}
.sales-order-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:.1rem 0 .75rem;border-bottom:1px solid var(--so-line);}
.sales-order-header h1{margin:0;font-size:1.55rem;font-weight:900;letter-spacing:0;}
.sales-order-header p{margin:.45rem 0 0;color:#4b5d7a;font-size:.72rem;}
.sales-order-header p span::before{content:">";padding:0 .5rem;color:#8aa0bd;}
.so-menu-btn{width:2.35rem;height:2.35rem;border:0;background:transparent;color:var(--so-navy);display:grid;place-items:center;cursor:pointer;}
.so-branch{height:2.65rem;min-width:18rem;border:1px solid var(--so-line);border-radius:8px;background:#fff;display:flex;align-items:center;gap:.35rem;padding:0 .9rem;font-size:.75rem;font-weight:850;}
.so-branch select{border:0;background:transparent;outline:0;font-weight:850;flex:1;color:#12284b;}
.so-workflow{background:#fff;border:1px solid var(--so-line);border-radius:8px;display:grid;grid-template-columns:repeat(5,1fr);padding:.9rem 1rem;gap:.8rem;}
.so-step{display:flex;align-items:center;gap:.8rem;position:relative;}
.so-step:not(:last-child)::after{content:"chevron_right";font-family:'Material Symbols Outlined';position:absolute;right:-.55rem;color:#8da1bf;font-size:1.4rem;}
.so-step b{width:2.35rem;height:2.35rem;border-radius:50%;display:grid;place-items:center;background:#eef3fa;color:#334567;border:1px solid #d5e0ef;font-size:1rem;}
.so-step.active b{background:var(--so-blue);border-color:var(--so-blue);color:#fff;}
.so-step strong{display:block;font-size:.82rem;color:#071b3a;}
.so-step span{display:block;font-size:.7rem;color:#536783;margin-top:.15rem;}
.so-layout{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:1rem;align-items:start;}
.so-main{display:flex;flex-direction:column;gap:1rem;}
.so-card,.so-side-card,.so-auto-box{background:#fff;border:1px solid var(--so-line);border-radius:8px;box-shadow:none;}
.so-card{padding:1rem;}
.so-card h2{font-size:1rem;font-weight:900;color:#0757ff;margin:0 0 .8rem;padding-bottom:.65rem;border-bottom:1px solid var(--so-line);}
.so-card h2 small{font-size:.72rem;color:#0757ff;font-weight:800;}
.so-form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem 1rem;}
.so-field{display:flex;flex-direction:column;gap:.35rem;font-size:.72rem;font-weight:800;color:#263856;}
.so-field.wide{margin-top:.8rem;}
.so-field i{color:#ef4444;font-style:normal;}
.so-field input,.so-field select,.so-table input{height:2.2rem;border:1px solid var(--so-line);border-radius:6px;background:#fff;padding:0 .75rem;outline:0;color:#132849;font-size:.78rem;width:100%;box-sizing:border-box;}
.so-field input[readonly]{background:#f6f9fd;color:#566987;cursor:not-allowed;}
.so-field input::placeholder,.so-table input::placeholder{color:#94a3b8;font-weight:650;}
.so-field div{position:relative;}
.so-field em{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);background:#eef2f7;color:#283957;border-radius:999px;padding:.22rem .6rem;font-size:.67rem;font-style:normal;font-weight:850;}
.so-live-note{grid-column:1/-1;display:flex;align-items:flex-start;gap:.55rem;margin:.8rem 0 0;padding:.7rem .8rem;border:1px solid #bfdbfe;background:#eff6ff;border-radius:8px;color:#1e3a8a;}
.so-live-note .material-symbols-outlined{font-size:1.1rem;color:#2563eb;margin-top:.05rem;}
.so-live-note p{margin:0;font-size:.76rem;line-height:1.45;}
.so-section-head{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:.8rem;}
.so-section-head h2{border:0;padding:0;margin:0;}
.so-section-head div{display:flex;gap:.5rem;flex-wrap:wrap;}
.so-danger{color:#ef4444 !important;}
.so-table-wrap{overflow:auto;border:1px solid var(--so-line);border-radius:8px;}
.so-table{width:100%;min-width:68rem;border-collapse:collapse;font-size:.74rem;table-layout:fixed;}
.so-table th{background:#f7f9fd;color:#263856;text-align:left;padding:.7rem;font-size:.63rem;font-weight:900;}
.so-table th:nth-child(1){width:3rem;text-align:center;}
.so-table th:nth-child(2){width:10rem;}
.so-table th:nth-child(3){width:18rem;}
.so-table th:nth-child(4){width:6rem;}
.so-table th:nth-child(5){width:7rem;}
.so-table th:nth-child(6){width:9rem;}
.so-table th:nth-child(7){width:7rem;}
.so-table th:nth-child(8){width:9rem;}
.so-table th:nth-child(9){width:5rem;text-align:center;}
.so-table td{border-bottom:1px solid #edf2f8;padding:.55rem;white-space:nowrap;vertical-align:middle;}
.so-table td:first-child,.so-table td:last-child{text-align:center;}
.so-code-input{display:flex;align-items:center;border:1px solid var(--so-line);border-radius:6px;overflow:hidden;}
.so-code-input input{border:0;}
.so-code-input span{font-size:1rem;color:#63748e;padding-right:.45rem;}
.so-trash{border:0;background:transparent;color:#ef4444;cursor:pointer;}
.so-trash span{font-size:1rem;}
.so-items-total{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.8rem 1rem;border:1px solid var(--so-line);border-top:0;border-radius:0 0 8px 8px;font-size:.75rem;color:#233a5d;}
.so-items-total strong{color:#0757ff;font-size:1.1rem;}
.so-preview-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:.8rem;align-items:center;}
.so-preview-card{border:1px solid var(--so-line);border-radius:8px;background:#fff;overflow:hidden;}
.so-preview-card.green{background:#f3fcf7;border-color:#cdeedc;}
.so-preview-card.blue{background:#f5faff;border-color:#cfe2ff;}
.so-preview-card.purple{background:#fbf7ff;border-color:#eadcff;}
.so-preview-title{display:flex;align-items:center;gap:.5rem;justify-content:space-between;padding:.75rem .85rem;font-size:.68rem;font-weight:900;color:#0757ff;}
.so-preview-title span{background:#dff8e9;color:#059669;border-radius:999px;padding:.18rem .55rem;}
.so-preview-arrow span{font-size:1.4rem;color:#071b3a;}
.so-mini-table{width:100%;border-collapse:collapse;font-size:.65rem;background:rgba(255,255,255,.7);}
.so-mini-table th,.so-mini-table td{padding:.45rem .55rem;border-top:1px solid rgba(148,163,184,.18);text-align:left;white-space:nowrap;}
.so-mini-table th{font-weight:900;color:#253852;}
.so-empty-preview{padding:1.25rem .9rem;color:#60708a;font-size:.76rem;line-height:1.5;}
.so-ok,.so-bad{display:inline-flex;border-radius:999px;padding:.12rem .42rem;font-size:.6rem;font-weight:900;}
.so-ok{background:#dcfce7;color:#15803d;}
.so-bad{background:#fee2e2;color:#dc2626;}
.so-preview-foot{display:flex;align-items:center;gap:.4rem;justify-content:space-between;padding:.7rem .85rem;font-size:.68rem;color:#047857;font-weight:800;}
.so-preview-foot.ok{justify-content:flex-start;}
.so-preview-foot span{font-size:1rem;}
.so-info-rows{padding:.3rem .85rem .6rem;}
.so-info-rows p{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid rgba(148,163,184,.18);padding:.55rem 0;margin:0;font-size:.72rem;}
.so-info-rows span{color:#4c5f7a;font-weight:800;}
.so-info-rows strong{color:#071b3a;text-align:right;}
.so-warning{display:flex;align-items:center;gap:.6rem;margin-top:1rem;padding:.75rem 1rem;border:1px solid #f5c66b;background:#fff8e8;border-radius:8px;color:#8a4b00;font-size:.76rem;}
.so-side{display:flex;flex-direction:column;gap:.8rem;position:sticky;top:calc(var(--topbar-h, 4rem) + .85rem);}
.so-auto-box{display:flex;gap:.75rem;padding:1rem;background:#f1fbf6;border-color:#d4f0df;}
.so-auto-box > span{color:#16a34a;font-size:1.5rem;}
.so-auto-box strong{display:block;color:#047857;font-size:.75rem;}
.so-auto-box p{margin:.3rem 0 0;color:#263856;font-size:.73rem;line-height:1.45;}
.so-side-card{padding:1rem;}
.so-side-card h3{margin:0 0 1rem;color:#071b3a;font-size:.9rem;font-weight:900;}
.so-side-line{display:flex;justify-content:space-between;gap:1rem;margin:.85rem 0;font-size:.78rem;color:#273b5d;}
.so-side-line strong{font-weight:800;}
.so-grand{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--so-line);padding-top:.9rem;margin-top:.9rem;font-size:.76rem;font-weight:900;}
.so-grand strong{font-size:1.35rem;color:#0757ff;}
.so-trigger{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:start;border:1px solid var(--so-line);border-radius:8px;padding:.75rem;margin:.7rem 0;background:#fff;}
.so-trigger > span{font-size:1.2rem;}
.so-trigger.green > span{color:#16a34a}.so-trigger.blue > span{color:#2563eb}.so-trigger.purple > span{color:#7c3aed}
.so-trigger strong{font-size:.76rem;color:#071b3a;}
.so-trigger p{margin:.35rem 0 .2rem;font-size:.74rem;color:#071b3a;font-weight:800;}
.so-trigger small{font-size:.72rem;color:#3e516d;}
.so-trigger em{font-style:normal;background:#e9f8ef;color:#16a34a;border-radius:999px;padding:.15rem .5rem;font-size:.62rem;font-weight:850;}
.so-save,.so-cancel{width:100%;height:2.55rem;}
@media (max-width:1200px){.so-layout{grid-template-columns:1fr}.so-form-grid{grid-template-columns:repeat(2,1fr)}.so-preview-grid{grid-template-columns:1fr}.so-preview-arrow{display:none}.so-workflow{grid-template-columns:1fr 1fr}.so-step::after{display:none}}
@media (max-width:1200px){.so-side{position:static;}.so-table{min-width:62rem;}}
@media (max-width:720px){.sales-order-header{grid-template-columns:auto 1fr}.sales-order-header p{display:none}.so-branch{grid-column:1/-1;width:100%;min-width:0}.so-form-grid{grid-template-columns:1fr}.so-workflow{grid-template-columns:1fr}.so-items-total,.so-section-head{align-items:flex-start;flex-direction:column}.so-section-head div{width:100%}.so-section-head .btn{flex:1}.so-live-note{margin-top:.65rem}.so-card h2{font-size:.95rem;}}
@media (max-width:520px){
  .sales-order-page,.bimas-bom-page,.reorder-dashboard,.inv-module{gap:.65rem;}
  .so-card,.so-side-card,.so-auto-box,.bimas-bom-main,.bimas-detail-card,.bimas-chart-card{border-radius:7px;padding:.75rem;}
  .so-table-wrap,.bimas-table-wrap,.inv-table-wrap,.reorder-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .so-table,.bimas-table,.inv-table,.reorder-table{min-width:58rem;}
  .so-mini-table{min-width:34rem;}
  .so-grand,.so-side-line,.bimas-cost-total{align-items:flex-start;flex-direction:column;gap:.25rem;}
  .so-trigger{grid-template-columns:auto 1fr;}
  .so-trigger em{grid-column:2;}
  .bimas-kpi,.inv-kpi-card{min-width:0;}
  .bimas-kpi strong,.inv-kpi-value,.so-grand strong{font-size:1rem;}
}
@media (max-width:380px){
  .sales-order-header h1,.bimas-module-header h1,.reorder-title-block h1,.inv-page-title{font-size:1.15rem !important;}
  .so-step b{width:2rem;height:2rem;}
  .so-field input,.so-field select,.so-table input{font-size:.75rem;}
}

/* ================================================================
   SOF Module Polish
   ================================================================ */
body[data-route="sof"] #app-content{
  background:
    linear-gradient(135deg,rgba(5,22,48,.04),rgba(255,255,255,0) 34%),
    linear-gradient(180deg,#f6f9fd 0%,#eef4fb 100%);
}
body[data-route="sof"] #app-content > .page-container{
  max-width:104rem !important;
  padding-top:1rem;
}
.sales-order-page{
  --so-navy:#071a37;
  --so-ink:#0d1b2f;
  --so-muted:#61708a;
  --so-blue:#155eef;
  --so-gold:#d99a12;
  --so-green:#14935f;
  --so-red:#dc2626;
  --so-line:#d9e4f2;
  --so-soft:#f7fbff;
  gap:1.1rem;
}
.sales-order-header.so-hero{
  position:relative;
  overflow:hidden;
  grid-template-columns:auto minmax(0,1fr) auto;
  padding:1.15rem;
  border:1px solid rgba(7,26,55,.16);
  border-radius:8px;
  background:
    linear-gradient(115deg,rgba(7,26,55,.98),rgba(12,49,92,.94) 58%,rgba(9,79,118,.9)),
    #071a37;
  box-shadow:0 18px 44px rgba(7,26,55,.16);
}
.sales-order-header.so-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.22;
  pointer-events:none;
}
.sales-order-header.so-hero > *{
  position:relative;
  z-index:1;
}
.sales-order-header.so-hero .so-menu-btn{
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  color:#fff;
  background:rgba(255,255,255,.08);
}
.so-hero-copy{
  min-width:0;
}
.so-eyebrow,
.so-section-kicker{
  display:block;
  margin:0 0 .28rem;
  color:#b77908;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.sales-order-header.so-hero .so-eyebrow{
  color:#f7cc75;
}
.sales-order-header.so-hero h1{
  color:#fff;
  font-size:1.85rem;
  line-height:1.05;
}
.sales-order-header.so-hero p{
  display:block;
  max-width:43rem;
  margin:.45rem 0 0;
  color:rgba(255,255,255,.76);
  font-size:.86rem;
  line-height:1.55;
}
.so-hero-actions{
  display:flex;
  justify-content:flex-end;
}
.so-hero-actions .btn{
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.12);
  color:#fff;
  box-shadow:none;
}
.so-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.85rem;
}
.so-kpi-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.8rem;
  align-items:center;
  min-height:6.2rem;
  padding:1rem;
  border:1px solid rgba(217,228,242,.92);
  border-radius:8px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:0 12px 30px rgba(15,23,42,.07);
}
.so-kpi-card > span{
  width:2.55rem;
  height:2.55rem;
  border-radius:8px;
  display:grid;
  place-items:center;
  color:#0d4ed8;
  background:#eaf1ff;
}
.so-kpi-card small,
.so-kpi-card em{
  display:block;
  color:var(--so-muted);
  font-style:normal;
  font-size:.72rem;
  font-weight:800;
}
.so-kpi-card strong{
  display:block;
  margin:.12rem 0;
  color:var(--so-ink);
  font-family:var(--font-display);
  font-size:1.55rem;
  line-height:1.05;
}
.so-card,
.so-side-card,
.so-auto-box{
  border-color:rgba(217,228,242,.95);
  border-radius:8px;
  background:rgba(255,255,255,.96);
  box-shadow:0 14px 34px rgba(15,23,42,.06);
}
.so-card{
  padding:1.05rem;
}
.so-section-head{
  align-items:flex-start;
  margin-bottom:.95rem;
}
.so-section-head > div:first-child{
  display:block;
}
.so-section-head h2,
.so-card h2{
  margin:0;
  padding:0;
  border:0;
  color:var(--so-ink);
  font-size:1.05rem;
}
.so-register-card{
  padding:0;
  overflow:hidden;
}
.so-register-card .so-section-head{
  margin:0;
  padding:1rem 1.05rem .85rem;
  border-bottom:1px solid rgba(217,228,242,.9);
}
.so-table-wrap{
  border-color:rgba(217,228,242,.95);
  border-radius:8px;
  background:#fff;
}
.so-register-card .so-table-wrap{
  border:0;
  border-radius:0;
}
.so-table{
  color:#17233a;
}
.so-register-table,
.so-items-table{
  table-layout:auto;
}
.so-register-table{
  min-width:62rem;
}
.so-items-table{
  min-width:42rem;
}
.so-register-table th,
.so-items-table th{
  width:auto !important;
  padding:.82rem .9rem;
  background:#f5f8fc;
  color:#40516c;
  font-size:.67rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.so-register-table td,
.so-items-table td{
  padding:.78rem .9rem;
  color:#1d2c45;
}
.so-register-table td:first-child,
.so-items-table td:first-child,
.so-items-table td:last-child{
  text-align:left;
}
.so-register-table tbody tr:hover,
.so-items-table tbody tr:hover{
  background:#f8fbff;
}
.so-status-pill,
.so-readiness{
  display:inline-flex;
  align-items:center;
  min-height:1.7rem;
  border-radius:999px;
  padding:.24rem .65rem;
  background:#eef5ff;
  color:#155eef;
  font-size:.68rem;
  font-weight:900;
  text-transform:capitalize;
  white-space:nowrap;
}
.so-readiness{
  background:#fff7e3;
  color:#9a5f00;
}
.so-readiness.ready{
  background:#dcfce7;
  color:#087443;
}
.so-readiness.attention{
  background:#fee2e2;
  color:#b42318;
}
.so-empty-state{
  display:grid;
  place-items:center;
  min-height:13rem;
  text-align:center;
  color:#51627c;
}
.so-empty-state > span{
  width:3rem;
  height:3rem;
  border-radius:8px;
  display:grid;
  place-items:center;
  margin-bottom:.7rem;
  background:#eef5ff;
  color:#155eef;
}
.so-empty-state p{
  max-width:31rem;
  margin:.35rem auto 0;
  line-height:1.55;
}
.so-entry-layout{
  grid-template-columns:minmax(0,1fr) 24rem;
}
.so-main{
  max-width:none;
}
.so-draft-card,
.so-items-card{
  padding:1.1rem;
}
.so-form-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.so-field{
  color:#34445e;
  gap:.42rem;
}
.so-field.wide{
  grid-column:span 2;
  margin-top:0;
}
.so-field span{
  font-size:.72rem;
  font-weight:900;
}
.so-field input,
.so-field select,
.so-table input{
  height:2.55rem;
  border-color:#d7e2f0;
  border-radius:8px;
  background:#fff;
  color:#16243a;
  font-size:.82rem;
  font-weight:700;
}
.so-field input:focus,
.so-field select:focus{
  border-color:#155eef;
  box-shadow:0 0 0 3px rgba(21,94,239,.12);
}
.so-field input[readonly]{
  background:#f7f9fc;
  color:#4f6078;
}
.so-field em{
  right:.55rem;
  color:#7a4c02;
  background:#fff3cf;
}
.so-items-total{
  border-color:rgba(217,228,242,.95);
  background:#fbfdff;
}
.so-items-total strong{
  color:#155eef;
}
.so-action-bar{
  display:flex;
  justify-content:flex-end;
  gap:.75rem;
  padding:.2rem 0 0;
}
.so-action-bar .btn{
  width:auto;
  min-width:10rem;
  height:2.65rem;
}
.so-summary-panel{
  top:calc(var(--topbar-h, 4rem) + 1rem);
}
.so-current-card,
.so-readiness-card{
  overflow:hidden;
}
.so-current-card h3,
.so-readiness-card h3{
  margin:.15rem 0 .35rem;
  color:var(--so-ink);
  font-size:1.08rem;
}
.so-current-card > p{
  margin:0 0 .85rem;
  color:#5c6b84;
  font-size:.82rem;
  line-height:1.5;
}
.so-current-card .so-info-rows{
  padding:0;
}
.so-current-card .so-info-rows p{
  padding:.68rem 0;
}
.so-side-line{
  padding:.66rem 0;
  margin:0;
  border-bottom:1px solid rgba(148,163,184,.18);
}
.so-side-line span{
  color:#64748b;
  font-weight:800;
}
.so-side-line strong{
  color:#0f172a;
}
.so-mini-wrap{
  max-height:16rem;
  overflow:auto;
  margin-top:.8rem;
  border:1px solid rgba(217,228,242,.95);
  border-radius:8px;
}
.so-mini-wrap .so-mini-table{
  min-width:32rem;
}
.so-mini-wrap .so-mini-table th{
  position:sticky;
  top:0;
  background:#f8fbff;
}
@media (max-width:1180px){
  .so-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .so-entry-layout{
    grid-template-columns:1fr;
  }
  .so-summary-panel{
    position:static;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:760px){
  body[data-route="sof"] #app-content > .page-container{
    padding:.75rem;
  }
  .sales-order-header.so-hero{
    grid-template-columns:auto 1fr;
    padding:1rem;
  }
  .sales-order-header.so-hero h1{
    font-size:1.35rem !important;
  }
  .sales-order-header.so-hero p{
    font-size:.78rem;
  }
  .so-hero-actions{
    grid-column:1/-1;
    justify-content:stretch;
  }
  .so-hero-actions .btn{
    width:100%;
  }
  .so-kpi-grid,
  .so-summary-panel{
    grid-template-columns:1fr;
  }
  .so-kpi-card{
    min-height:5.25rem;
  }
  .so-form-grid{
    grid-template-columns:1fr;
  }
  .so-field.wide{
    grid-column:auto;
  }
  .so-section-head{
    flex-direction:column;
  }
  .so-action-bar{
    flex-direction:column-reverse;
  }
  .so-action-bar .btn{
    width:100%;
  }
  .so-register-table{
    min-width:56rem;
  }
  .so-items-table{
    min-width:38rem;
  }
}

/* ================================================================
   Reorder Request dashboard
   ================================================================ */
body[data-route="inventory-reorder"] #app-content > .page-container{
  max-width:100rem !important;
}
.reorder-dashboard{
  --rd-navy:#061d3b;
  --rd-blue:#0d4aa2;
  --rd-line:#dde7f4;
  --rd-soft:#f7faff;
  color:#0b1736;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.reorder-dash-header{
  display:grid;
  grid-template-columns:auto minmax(16rem,1fr) auto;
  gap:1rem;
  align-items:center;
  padding:.25rem 0 .75rem;
  border-bottom:1px solid rgba(221,231,244,.85);
}
.reorder-menu-btn,
.reorder-add-btn,
.reorder-trash-btn,
.reorder-view-btn,
.reorder-pagination button{
  border:1px solid var(--rd-line);
  background:#fff;
  color:var(--rd-navy);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.reorder-menu-btn{
  width:2.25rem;
  height:2.25rem;
  border:0;
  background:transparent;
}
.reorder-title-block h1{
  margin:0;
  font-size:1.45rem;
  font-weight:850;
  letter-spacing:0;
  color:#0b1736;
}
.reorder-title-block p{
  margin:.3rem 0 0;
  color:#4b5d7a;
  font-size:.85rem;
}
.reorder-header-actions,
.reorder-action-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.75rem;
  flex-wrap:wrap;
}
.reorder-branch-pill{
  height:2.65rem;
  min-width:19rem;
  border:1px solid var(--rd-line);
  border-radius:8px;
  background:#fff;
  display:flex;
  align-items:center;
  gap:.35rem;
  padding:0 .9rem;
  font-size:.75rem;
  font-weight:800;
  color:#263856;
}
.reorder-branch-pill select{
  border:0;
  outline:0;
  background:transparent;
  color:#1c2f51;
  font-weight:800;
  min-width:0;
  flex:1;
}
.reorder-action-row{
  margin-top:-.25rem;
}
.reorder-new-btn{
  background:#061d3b !important;
  min-width:14rem;
}
.reorder-stepper-card,
.reorder-panel{
  background:#fff;
  border:1px solid var(--rd-line);
  border-radius:8px;
  box-shadow:none;
}
.reorder-stepper-card{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  padding:1.1rem 1.4rem;
  overflow:hidden;
}
.reorder-step{
  position:relative;
  display:flex;
  align-items:center;
  gap:.9rem;
}
.reorder-step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:calc(100% + .25rem);
  right:-1.75rem;
  top:50%;
  border-top:2px dashed #cad7e8;
}
.reorder-step > span{
  width:2.45rem;
  height:2.45rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #b7c5d8;
  color:#0b1736;
  font-weight:850;
  font-size:1.1rem;
  background:#f7fbff;
  flex:0 0 auto;
}
.reorder-step.active > span{
  border-color:#12a34f;
  background:#12a34f;
  color:#fff;
}
.reorder-step strong{
  display:block;
  font-size:.9rem;
  color:#0b1736;
}
.reorder-step small{
  display:block;
  margin-top:.25rem;
  font-size:.76rem;
  color:#536681;
}
.reorder-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(26rem,.92fr);
  gap:.9rem;
}
.reorder-bottom-grid{
  display:grid;
  grid-template-columns:1.07fr .93fr;
  gap:.9rem;
}
.reorder-panel{
  padding:1rem;
  min-width:0;
}
.reorder-panel-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.85rem;
}
.reorder-panel-title h2,
.reorder-section-title{
  margin:0;
  display:flex;
  align-items:center;
  gap:.45rem;
  font-size:1rem;
  color:#0b1736;
  font-weight:850;
  letter-spacing:0;
}
.reorder-panel-title button{
  border:0;
  background:transparent;
  color:#0d55c5;
  font-weight:800;
  font-size:.75rem;
  cursor:pointer;
}
.reorder-basket-panel .reorder-panel-title button{
  color:#ef1f2d;
}
.reorder-filter-row{
  display:grid;
  grid-template-columns:minmax(14rem,1fr) minmax(10rem,12rem) auto;
  gap:.75rem;
  align-items:center;
  margin-bottom:.75rem;
}
.reorder-search-field{
  height:2.35rem;
  border:1px solid var(--rd-line);
  border-radius:8px;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:0 .75rem;
  background:#fff;
}
.reorder-search-field span{
  color:#8da0ba;
  font-size:1rem;
}
.reorder-search-field input,
.reorder-category-select{
  border:0;
  outline:0;
  min-width:0;
  width:100%;
  background:transparent;
  color:#263856;
  font-size:.78rem;
}
.reorder-category-select{
  height:2.35rem;
  border:1px solid var(--rd-line);
  border-radius:8px;
  padding:0 .8rem;
  background:#fff;
}
.reorder-check{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:.45rem;
  font-weight:800;
  font-size:.78rem;
  white-space:nowrap;
  color:#10213d;
}
.reorder-check input,
.reorder-table input[type="checkbox"],
.bom-row-select{
  width:1rem;
  height:1rem;
  accent-color:#1464d2;
}
.reorder-table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid var(--rd-line);
  border-radius:8px;
}
.reorder-table{
  width:100%;
  border-collapse:collapse;
  min-width:46rem;
  background:#fff;
}
.reorder-table th,
.reorder-table td{
  padding:.72rem .75rem;
  border-bottom:1px solid #e9eff7;
  text-align:left;
  vertical-align:middle;
  font-size:.76rem;
  color:#1c2f51;
  white-space:nowrap;
}
.reorder-table th{
  background:#fbfdff;
  color:#233a5d;
  font-weight:850;
  font-size:.68rem;
}
.reorder-table tbody tr:last-child td{
  border-bottom:0;
}
.reorder-code{
  color:#0755c6;
  font-weight:850;
}
.qty-low{
  color:#fb1515;
}
.qty-near{
  color:#f26b00;
}
.qty-ok{
  color:#0ea54d;
}
.reorder-status-pill,
.reorder-request-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:4.7rem;
  padding:.25rem .55rem;
  border-radius:99px;
  font-size:.65rem;
  font-weight:900;
  line-height:1;
}
.reorder-status-pill.low{
  background:#ffe8e8;
  color:#fb1515;
}
.reorder-status-pill.near{
  background:#fff1d7;
  color:#f26b00;
}
.reorder-status-pill.ok{
  background:#dcf8e8;
  color:#0ea54d;
}
.reorder-add-btn,
.reorder-trash-btn,
.reorder-view-btn{
  width:1.9rem;
  height:1.9rem;
  border-radius:50%;
}
.reorder-add-btn span,
.reorder-trash-btn span,
.reorder-view-btn span{
  font-size:1rem;
}
.reorder-trash-btn{
  border:0;
  background:#f7f9fc;
}
.reorder-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.85rem .1rem 0;
  color:#39506f;
  font-size:.78rem;
}
.reorder-pagination div{
  display:flex;
  gap:.35rem;
}
.reorder-pagination button{
  width:2rem;
  height:2rem;
  border-radius:7px;
  font-weight:800;
}
.reorder-pagination button.active{
  background:#061d3b;
  color:#fff;
  border-color:#061d3b;
}
.reorder-basket-table .reorder-table{
  min-width:38rem;
}
.reorder-qty-input{
  width:5.8rem;
  height:2.15rem;
  border:1px solid var(--rd-line);
  border-radius:7px;
  padding:0 .75rem;
  font-weight:750;
  color:#243757;
}
.reorder-note-label{
  display:block;
  margin:.85rem 0 .35rem;
  font-size:.82rem;
  font-weight:850;
  color:#0b1736;
}
.reorder-note-label span{
  color:#6a7a93;
  font-weight:500;
}
.reorder-note{
  width:100%;
  resize:vertical;
  border:1px solid var(--rd-line);
  border-radius:8px;
  padding:.85rem;
  font-size:.8rem;
  color:#1c2f51;
  outline:0;
  background:#fff;
}
.reorder-summary-card{
  margin-top:.9rem;
  border:1px solid var(--rd-line);
  border-radius:8px;
  padding:.8rem .95rem;
  background:#fff;
}
.reorder-summary-card h3{
  margin:0 0 .8rem;
  font-size:.85rem;
  color:#0b1736;
}
.reorder-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.75rem;
}
.reorder-summary-grid div{
  border-right:1px solid var(--rd-line);
}
.reorder-summary-grid div:last-child{
  border-right:0;
}
.reorder-summary-grid span{
  display:block;
  font-size:.72rem;
  color:#566985;
}
.reorder-summary-grid strong{
  display:block;
  margin-top:.2rem;
  color:#063eaa;
  font-size:1.05rem;
  font-weight:900;
}
.reorder-submit-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
  margin-top:.8rem;
}
.reorder-draft-btn{
  background:#061d3b !important;
  color:#fff !important;
}
.reorder-submit-btn{
  background:#f9ad26 !important;
  color:#061d3b !important;
  font-weight:900 !important;
}
.reorder-approval-flow{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:1rem;
  padding:1rem 0 .25rem;
}
.reorder-approval-card{
  min-height:10.3rem;
  border:1px solid var(--rd-line);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1rem;
}
.reorder-approval-card > span{
  width:2.55rem;
  height:2.55rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.7rem;
}
.reorder-approval-card strong{
  color:#0b1736;
  font-size:.88rem;
}
.reorder-approval-card p{
  margin:.55rem 0 .75rem;
  color:#536681;
  font-size:.72rem;
  line-height:1.5;
  max-width:14rem;
}
.reorder-approval-card small{
  border-radius:99px;
  padding:.28rem .7rem;
  font-weight:850;
  font-size:.68rem;
}
.reorder-approval-card.amber{
  background:#fff9ef;
  border-color:#ffd99b;
}
.reorder-approval-card.amber > span,
.reorder-approval-card.amber small{
  background:#fff1d7;
  color:#f08b00;
}
.reorder-approval-card.blue{
  background:#f4f9ff;
  border-color:#bfd6ff;
}
.reorder-approval-card.blue > span,
.reorder-approval-card.blue small{
  background:#e5f0ff;
  color:#1464d2;
}
.reorder-approval-card.green{
  background:#f2fff7;
  border-color:#bcebd0;
}
.reorder-approval-card.green > span,
.reorder-approval-card.green small{
  background:#dcf8e8;
  color:#0ea54d;
}
.reorder-flow-arrow{
  color:#4b7ed9;
}
.reorder-request-status.draft{background:#edf1f7;color:#41536f;}
.reorder-request-status.submitted{background:#fff1d7;color:#e07b00;}
.reorder-request-status.ops{background:#dfeeff;color:#1262d2;}
.reorder-request-status.ceo{background:#dcf8e8;color:#0ea54d;}
.reorder-request-status.rejected{background:#ffe8e8;color:#df1f2f;}
.reorder-request-status.converted{background:#e7e9ff;color:#4f46e5;}
.reorder-empty-cell{
  padding:2rem !important;
  text-align:center !important;
  color:#6b7c94 !important;
}

@media (max-width:1180px){
  .reorder-dash-header{
    grid-template-columns:auto 1fr;
  }
  .reorder-header-actions{
    grid-column:1/-1;
    justify-content:flex-start;
  }
  .reorder-main-grid,
  .reorder-bottom-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:760px){
  .reorder-dashboard{
    gap:.8rem;
  }
  .reorder-dash-header{
    grid-template-columns:auto 1fr;
    padding-bottom:.55rem;
  }
  .reorder-title-block h1{
    font-size:1.2rem;
  }
  .reorder-title-block p{
    font-size:.78rem;
  }
  .reorder-header-actions{
    gap:.45rem;
  }
  .reorder-branch-pill{
    min-width:100%;
    width:100%;
  }
  .reorder-action-row{
    justify-content:stretch;
  }
  .reorder-action-row .btn{
    flex:1 1 12rem;
  }
  .reorder-stepper-card{
    grid-template-columns:1fr;
    gap:.8rem;
    padding:1rem;
  }
  .reorder-step:not(:last-child)::after{
    display:none;
  }
  .reorder-panel{
    padding:.85rem;
  }
  .reorder-filter-row{
    grid-template-columns:1fr;
  }
  .reorder-check{
    justify-content:flex-start;
  }
  .reorder-pagination{
    align-items:flex-start;
    flex-direction:column;
  }
  .reorder-summary-grid,
  .reorder-submit-row,
  .reorder-approval-flow{
    grid-template-columns:1fr;
  }
  .reorder-summary-grid div{
    border-right:0;
    border-bottom:1px solid var(--rd-line);
    padding-bottom:.55rem;
  }
  .reorder-summary-grid div:last-child{
    border-bottom:0;
    padding-bottom:0;
  }
  .reorder-flow-arrow{
    transform:rotate(90deg);
    justify-self:center;
  }
  .bom-item-row{
    overflow:auto;
  }
}
@media (max-width:480px) {
  .reorder-dashboard { gap:.5rem; }
  .reorder-title-block h1 { font-size:1.05rem; }
  .reorder-title-block p { font-size:.7rem; }
  .reorder-header-actions { gap:.35rem; flex-wrap:wrap; }
  .reorder-header-actions .btn { font-size:.7rem; padding:.3rem .5rem; flex:1 1 auto; justify-content:center; min-width:0; }
  .reorder-action-row { flex-direction:column; gap:.375rem; }
  .reorder-action-row .btn { width:100%; justify-content:center; flex:none; }
  .reorder-kpi-grid { grid-template-columns:1fr; gap:.375rem; }
  .reorder-panel { padding:.625rem; }
  .reorder-panel h3 { font-size:.8rem; }
  .reorder-tbl th, .reorder-tbl td { padding:.3rem .375rem; font-size:.65rem; }
  .reorder-approval-card { padding:.75rem; }
  .reorder-approval-card strong { font-size:.75rem; }
  .reorder-approval-card p { font-size:.65rem; }
}

/* ================================================================
   Shared topbar action cluster
   ================================================================ */
#app-topbar .topbar-alert-btn{
  position:relative !important;
}
#app-topbar .topbar-badge{
  position:absolute;
  top:-.38rem;
  right:-.38rem;
  min-width:1.12rem;
  height:1.12rem;
  padding:0 .24rem;
  border-radius:999px;
  background:#ef1f2d;
  color:#fff;
  border:2px solid var(--surface-0);
  display:none;
  align-items:center;
  justify-content:center;
  font-size:.58rem;
  line-height:1;
  font-weight:900;
  box-shadow:0 3px 9px rgba(239,31,45,.24);
}
#app-topbar .topbar-user-wrap{
  position:relative;
}
#app-topbar .topbar-user-btn{
  height:2.75rem;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.2rem .55rem .2rem .25rem;
  color:#0f172a;
  cursor:pointer;
  font-weight:700;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
#app-topbar .topbar-user-btn:hover,
#app-topbar .topbar-user-btn[aria-expanded="true"]{
  background:rgba(15,23,42,.04);
  border-color:rgba(15,23,42,.08);
}
#app-topbar .topbar-user-avatar-wrap{
  position:relative;
  flex-shrink:0;
}
#app-topbar .topbar-user-avatar,
#app-topbar .topbar-user-menu-avatar,
#sidebar-user-avatar{
  position:relative;
  overflow:hidden;
}
.user-avatar-photo,
#app-topbar .topbar-user-avatar .user-avatar-photo,
#app-topbar .topbar-user-menu-avatar .user-avatar-photo,
#sidebar-user-avatar .user-avatar-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  display:block;
  z-index:1;
}
#sidebar-user-avatar.has-photo{
  color:transparent !important;
}
#app-topbar .topbar-user-avatar:not(.has-photo){
  background:linear-gradient(145deg,#0b2447 0%,#1e4a8a 55%,#3b82f6 100%);
}
#app-topbar .topbar-user-avatar.has-photo,
#app-topbar .topbar-user-menu-avatar.has-photo,
#sidebar-user-avatar.has-photo{
  color:transparent;
  background:transparent !important;
}
#app-topbar .topbar-user-avatar{
  width:2.45rem;
  height:2.45rem;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.02em;
  border:2px solid #fff;
  box-shadow:0 4px 14px rgba(11,36,87,.22);
}
#app-topbar .topbar-user-avatar.has-photo,
#app-topbar .topbar-user-menu-avatar.has-photo,
#sidebar-user-avatar.has-photo{
  color:transparent;
}
#app-topbar .topbar-user-avatar-status{
  position:absolute;
  right:.05rem;
  bottom:.05rem;
  width:.62rem;
  height:.62rem;
  border-radius:50%;
  background:#22c55e;
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(34,197,94,.35);
  z-index:2;
}
#app-topbar .topbar-user-chevron{
  font-size:1.15rem !important;
  color:#64748b;
  transition:transform .22s ease,color .18s ease;
}
#app-topbar .topbar-user-btn[aria-expanded="true"] .topbar-user-chevron{
  transform:rotate(180deg);
  color:#0b2447;
}
#app-topbar .topbar-user-name{
  max-width:9.5rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.88rem;
  font-weight:800;
  color:#0b1528;
}
#app-topbar .topbar-user-role{
  color:#64748b;
  font-size:.72rem;
  font-weight:600;
}
#app-topbar .topbar-user-menu{
  display:block;
  position:absolute;
  top:calc(100% + .65rem);
  right:0;
  min-width:17.5rem;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  box-shadow:0 22px 48px rgba(15,23,42,.16),0 6px 16px rgba(15,23,42,.08);
  overflow:hidden;
  z-index:1001;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) scale(.97);
  transform-origin:top right;
  transition:opacity .22s cubic-bezier(.22,1,.36,1),transform .24s cubic-bezier(.22,1,.36,1),visibility .22s ease;
  pointer-events:none;
}
#app-topbar .topbar-user-menu.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
#app-topbar .topbar-user-menu-header{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1.05rem 1.05rem .95rem;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.12), transparent 42%),
    linear-gradient(135deg,rgba(11,36,87,.05) 0%,rgba(59,130,246,.04) 100%);
}
#app-topbar .topbar-user-menu-photo-zone{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.45rem;
  flex-shrink:0;
}
#app-topbar .topbar-user-menu-photo-zone.is-dragover{
  outline:2px dashed #3b82f6;
  outline-offset:4px;
  border-radius:14px;
}
#app-topbar .topbar-user-menu-drop-hint{
  margin:0;
  display:flex;
  align-items:center;
  gap:.25rem;
  font-size:.58rem;
  font-weight:650;
  color:#94a3b8;
  text-align:center;
  line-height:1.25;
  max-width:5.5rem;
}
#app-topbar .topbar-user-menu-drop-hint .material-symbols-outlined{
  font-size:.85rem;
}
#app-topbar .topbar-user-menu-photo-zone.has-photo .topbar-user-menu-drop-hint{
  display:none;
}
#app-topbar .topbar-user-menu-avatar-btn{
  position:relative;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  border-radius:50%;
  flex-shrink:0;
}
#app-topbar .topbar-user-menu-avatar:not(.has-photo){
  background:linear-gradient(145deg,#0b2447 0%,#1e4a8a 55%,#3b82f6 100%);
}
#app-topbar .topbar-user-menu-avatar{
  width:4rem;
  height:4rem;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.05rem;
  font-weight:800;
  border:3px solid #fff;
  box-shadow:0 8px 22px rgba(11,36,87,.2);
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
#app-topbar .topbar-user-menu-avatar.has-photo{
  background:transparent !important;
}
#app-topbar .topbar-user-menu-avatar-btn:hover .topbar-user-menu-avatar{
  transform:scale(1.03);
  box-shadow:0 10px 26px rgba(11,36,87,.24);
}
#app-topbar .topbar-user-menu-avatar-edit{
  position:absolute;
  inset:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,rgba(11,36,87,.15),rgba(11,36,87,.72));
  color:#fff;
  opacity:0;
  transition:opacity .18s ease;
  z-index:2;
}
#app-topbar .topbar-user-menu-avatar-edit .material-symbols-outlined{
  font-size:1.2rem;
}
#app-topbar .topbar-user-menu-avatar-btn:hover .topbar-user-menu-avatar-edit,
#app-topbar .topbar-user-menu-avatar-btn:focus-visible .topbar-user-menu-avatar-edit,
#app-topbar .topbar-user-menu-photo-zone.is-dragover .topbar-user-menu-avatar-edit{
  opacity:1;
}
#app-topbar .topbar-user-avatar-loader,
#app-topbar .topbar-user-menu-avatar-loader{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation:topbar-avatar-spin .7s linear infinite;
  background:rgba(11,36,87,.35);
  z-index:2;
}
#app-topbar .topbar-user-menu-header.is-uploading .topbar-user-menu-avatar-edit{
  opacity:1;
  background:rgba(11,36,87,.72);
}
#app-topbar .topbar-user-menu-header.is-uploading .topbar-user-menu-avatar-edit .material-symbols-outlined{
  display:none;
}
@keyframes topbar-avatar-spin{
  to{ transform:rotate(360deg); }
}
#app-topbar .topbar-user-menu-info{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:.28rem;
  padding-top:.15rem;
}
#app-topbar .topbar-user-menu-name{
  font-size:.95rem;
  font-weight:800;
  color:#0b1528;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  letter-spacing:-.01em;
}
#app-topbar .topbar-user-menu-role-badge{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  max-width:100%;
  padding:.18rem .55rem;
  border-radius:999px;
  font-size:.64rem;
  font-weight:750;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#1d4ed8;
  background:rgba(37,99,235,.1);
  border:1px solid rgba(37,99,235,.14);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#app-topbar .topbar-user-menu-email{
  font-size:.68rem;
  font-weight:600;
  color:#64748b;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#app-topbar .topbar-user-menu-photo-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .55rem;
  margin-top:.2rem;
}
#app-topbar .topbar-user-menu-change-photo,
#app-topbar .topbar-user-menu-remove-photo{
  border:0;
  background:transparent;
  padding:0;
  font-size:.68rem;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.22rem;
}
#app-topbar .topbar-user-menu-change-photo{
  color:#2563eb;
}
#app-topbar .topbar-user-menu-change-photo:hover{
  color:#1d4ed8;
}
#app-topbar .topbar-user-menu-change-photo .material-symbols-outlined,
#app-topbar .topbar-user-menu-remove-photo .material-symbols-outlined{
  font-size:.9rem;
}
#app-topbar .topbar-user-menu-remove-photo{
  color:#94a3b8;
}
#app-topbar .topbar-user-menu-remove-photo:hover{
  color:#ef4444;
}
#app-topbar .topbar-user-menu-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(15,23,42,.08),transparent);
  margin:0;
}
#app-topbar .topbar-user-menu-items{
  padding:.4rem;
}
#app-topbar .topbar-user-menu button{
  width:100%;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.78rem .8rem;
  cursor:pointer;
  color:#0f172a;
  font-weight:650;
  font-size:.84rem;
  text-align:left;
  border-radius:12px;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
#app-topbar .topbar-user-menu button:hover{
  background:rgba(15,23,42,.04);
  transform:translateX(1px);
}
#app-topbar .topbar-user-menu-item-copy{
  display:flex;
  flex-direction:column;
  gap:.08rem;
  min-width:0;
}
#app-topbar .topbar-user-menu-item-copy strong{
  font-size:.84rem;
  font-weight:750;
  color:inherit;
}
#app-topbar .topbar-user-menu-item-copy small{
  font-size:.66rem;
  font-weight:600;
  color:#94a3b8;
}
#app-topbar .topbar-user-menu-icon{
  width:2.15rem;
  height:2.15rem;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.05);
  color:#334155;
  flex-shrink:0;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
#app-topbar .topbar-user-menu-icon .material-symbols-outlined{
  font-size:1.08rem;
}
#app-topbar .topbar-user-menu button:hover .topbar-user-menu-icon{
  background:rgba(37,99,235,.1);
  color:#2563eb;
  box-shadow:0 4px 12px rgba(37,99,235,.12);
}
#app-topbar .topbar-user-menu-signout{
  color:#b91c1c !important;
}
#app-topbar .topbar-user-menu-signout .topbar-user-menu-item-copy small{
  color:rgba(185,28,28,.65);
}
#app-topbar .topbar-user-menu-signout .topbar-user-menu-icon{
  background:rgba(239,68,68,.08);
  color:#dc2626;
}
#app-topbar .topbar-user-menu-signout:hover{
  background:rgba(239,68,68,.06) !important;
}
#app-topbar .topbar-user-menu-signout:hover .topbar-user-menu-icon{
  background:rgba(239,68,68,.14);
  color:#b91c1c;
  box-shadow:0 4px 12px rgba(239,68,68,.12);
}
[data-theme="dark"] #app-topbar .topbar-badge{
  border-color:#111827;
}
[data-theme="dark"] #app-topbar .topbar-user-btn{
  color:#f8fafc;
}
[data-theme="dark"] #app-topbar .topbar-user-btn:hover,
[data-theme="dark"] #app-topbar .topbar-user-btn[aria-expanded="true"]{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.08);
}
[data-theme="dark"] #app-topbar .topbar-user-name,
[data-theme="dark"] #app-topbar .topbar-user-menu-name{
  color:#f8fafc;
}
[data-theme="dark"] #app-topbar .topbar-user-menu{
  background:#111827;
  border-color:rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
[data-theme="dark"] #app-topbar .topbar-user-menu-header{
  background:linear-gradient(135deg,rgba(59,130,246,.08) 0%,rgba(15,23,42,.35) 100%);
}
[data-theme="dark"] #app-topbar .topbar-user-menu button{
  color:#e2e8f0;
}
[data-theme="dark"] #app-topbar .topbar-user-menu button:hover{
  background:rgba(255,255,255,.05);
}
[data-theme="dark"] #app-topbar .topbar-user-menu-role-badge{
  color:#93c5fd;
  background:rgba(59,130,246,.14);
  border-color:rgba(59,130,246,.22);
}
[data-theme="dark"] #app-topbar .topbar-user-menu-email{
  color:#94a3b8;
}
[data-theme="dark"] #app-topbar .topbar-user-menu-item-copy small{
  color:#64748b;
}
[data-theme="dark"] #app-topbar .topbar-user-menu-icon{
  background:rgba(255,255,255,.06);
  color:#cbd5e1;
}
@media (max-width:760px){
  #app-topbar .topbar-user-name,
  #app-topbar .topbar-user-copy,
  #app-topbar .topbar-user-chevron{
    display:none;
  }
  #app-topbar .topbar-user-btn{
    padding:.2rem;
    border-radius:50%;
  }
}
@media (max-width:560px){
  #app-topbar a[href="portal.html"],
  #app-topbar #theme-btn,
  #app-topbar #cs-wrap{
    display:none !important;
  }
}

/* ================================================================
   BIMAS reference skin - sidebar, login, dashboard
   Matches the provided Eshkol UI reference while keeping ERP routes.
   ================================================================ */
:root{
  --sidebar-w:15rem;
  --topbar-h:5rem;
  --bimas-blue:#0047b9;
  --bimas-blue-2:#0b72f0;
  --bimas-navy:#061b35;
  --bimas-navy-2:#08284c;
  --bimas-orange:#ff8a00;
}

body{
  background:linear-gradient(180deg,#f6f9fd 0%,#fffaf5 100%) !important;
  color:#0b1528 !important;
}

/* Login reference screen */
#login-screen{
  display:none;
  align-items:center !important;
  justify-content:center !important;
  padding:1.75rem !important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.72),rgba(3,10,23,.2) 49%,rgba(0,14,30,.72)),
    radial-gradient(circle at 89% 12%,rgba(255,138,0,.42),transparent 22rem),
    radial-gradient(circle at 37% 93%,rgba(0,133,255,.45),transparent 30rem),
    linear-gradient(135deg,#020611 0%,#04172d 48%,#07101f 100%) !important;
  overflow:auto !important;
}
#login-screen::before{
  inset:auto auto -5rem -4rem !important;
  width:34rem !important;
  height:19rem !important;
  opacity:.58 !important;
  background-image:
    linear-gradient(90deg,rgba(0,132,255,.95) 0 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,138,0,.9) 0 1px,transparent 1px) !important;
  background-size:16px 16px !important;
  transform:rotate(-13deg) skewX(-16deg) !important;
  filter:drop-shadow(0 0 18px rgba(0,132,255,.45)) !important;
  mask-image:radial-gradient(ellipse at center,#000 0%,transparent 72%) !important;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0%,transparent 72%) !important;
}
#login-screen::after{
  background:
    linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.06),transparent 32%) !important;
  background-size:9rem 100%,100% 100% !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
#login-screen .login-shell{
  width:100% !important;
  min-height:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  z-index:2 !important;
}
#login-screen .login-frame{
  width:min(92rem,100%) !important;
  min-height:min(48rem,calc(100dvh - 3.5rem)) !important;
  display:grid !important;
  grid-template-columns:minmax(0,1.05fr) minmax(25rem,.95fr) !important;
  overflow:hidden !important;
  border-radius:1.55rem !important;
  border:1px solid rgba(255,255,255,.44) !important;
  background:linear-gradient(90deg,rgba(2,6,14,.68),rgba(7,22,43,.72)) !important;
  box-shadow:0 34px 90px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.1) !important;
}
#login-screen .login-visual{
  position:relative !important;
  min-height:39rem !important;
  padding:4rem 3rem 3rem !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  color:#fff !important;
  overflow:hidden !important;
  background:
    linear-gradient(180deg,rgba(0,0,0,.16),rgba(2,9,22,.72)),
    radial-gradient(circle at 25% 71%,rgba(255,138,0,.24),transparent 14rem),
    radial-gradient(circle at 84% 42%,rgba(0,132,255,.24),transparent 18rem),
    linear-gradient(135deg,#030914,#061e39) !important;
}
#login-screen .login-visual::before{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  bottom:18%;
  height:7.5rem;
  border-bottom:2px solid rgba(255,255,255,.12);
  border-radius:0 0 10rem 10rem;
  background:
    linear-gradient(90deg,transparent 0 19%,rgba(255,138,0,.78) 19% 19.35%,transparent 19.35% 100%),
    linear-gradient(180deg,transparent 57%,rgba(255,255,255,.12) 58% 59%,transparent 60%);
  opacity:.8;
}
#login-screen .login-visual::after{
  content:"";
  position:absolute;
  right:-4rem;
  bottom:-3rem;
  width:30rem;
  height:17rem;
  border:1px solid rgba(0,132,255,.32);
  border-radius:50%;
  transform:rotate(-11deg);
  box-shadow:inset 0 0 0 1px rgba(255,138,0,.14),0 0 38px rgba(0,132,255,.18);
}
#login-screen .login-visual-logo{
  width:min(16rem,60vw) !important;
  margin:0 auto 2.1rem !important;
  position:relative !important;
  z-index:1 !important;
}
#login-screen .login-visual-logo img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.45)) !important;
}
#login-screen .login-visual h1{
  position:relative !important;
  z-index:1 !important;
  margin:0 !important;
  color:#fff !important;
  font-family:var(--font-display) !important;
  font-size:2.25rem !important;
  line-height:1.1 !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
}
#login-screen .login-visual h1 span,
#login-screen .login-title span{
  color:var(--bimas-orange) !important;
}
#login-screen .login-visual p{
  position:relative !important;
  z-index:1 !important;
  margin:0 !important;
  color:rgba(255,255,255,.9) !important;
  font-size:1rem !important;
}
#login-screen .login-mark{
  width:4.6rem !important;
  height:.75rem !important;
  margin:1.45rem auto 1.4rem !important;
  position:relative !important;
  z-index:1 !important;
}
#login-screen .login-mark::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,#ff9a00 22% 48%,#0094ff 48% 63%,rgba(255,255,255,.42) 63%,transparent) !important;
}
#login-screen .login-mark::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:.45rem;
  height:.45rem;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:#0094ff !important;
  box-shadow:0 0 0 3px rgba(0,148,255,.18) !important;
}
#login-screen .login-benefits{
  position:relative !important;
  z-index:1 !important;
  width:min(30rem,100%) !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:0 !important;
  margin-top:8.5rem !important;
  padding:1.35rem 1.4rem !important;
  border:1px solid rgba(255,255,255,.24) !important;
  border-radius:1rem !important;
  background:linear-gradient(135deg,rgba(11,28,54,.72),rgba(10,21,39,.82)) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}
#login-screen .login-benefits div{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:.45rem !important;
  padding:0 1rem !important;
  border-right:1px solid rgba(255,255,255,.22) !important;
}
#login-screen .login-benefits div:last-child{border-right:0 !important;}
#login-screen .login-benefits .material-symbols-outlined{
  width:3.1rem !important;
  height:3.1rem !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  background:rgba(0,116,255,.13) !important;
  color:#1494ff !important;
  border:1px solid rgba(20,148,255,.28) !important;
  font-size:1.7rem !important;
}
#login-screen .login-benefits div:nth-child(3) .material-symbols-outlined{
  color:#ff9a00 !important;
  background:rgba(255,138,0,.12) !important;
  border-color:rgba(255,138,0,.3) !important;
}
#login-screen .login-benefits strong{
  font-size:.9rem !important;
  color:#fff !important;
}
#login-screen .login-benefits small{
  font-size:.76rem !important;
  line-height:1.65 !important;
  color:rgba(255,255,255,.8) !important;
}
#login-screen .login-card{
  width:min(100%,39rem) !important;
  max-height:none !important;
  place-self:center !important;
  padding:3rem 3.05rem 2rem !important;
  border-radius:1.45rem !important;
  background:linear-gradient(145deg,rgba(10,22,41,.86),rgba(4,13,28,.92)) !important;
  border:1px solid rgba(255,255,255,.42) !important;
  border-top-color:rgba(60,160,255,.65) !important;
  border-right-color:rgba(255,138,0,.64) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 28px 70px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#login-screen .login-card-icon{
  width:4.25rem !important;
  height:4.25rem !important;
  margin:0 auto 1.1rem !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  color:var(--bimas-orange) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.035) !important;
}
#login-screen .login-card-icon .material-symbols-outlined{font-size:2.35rem !important;}
#login-screen .login-title{
  margin:0 !important;
  font-family:var(--font-display) !important;
  color:#fff !important;
  text-align:center !important;
  font-size:2rem !important;
  line-height:1.08 !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
}
#login-screen .login-sub{
  margin:.85rem 0 0 !important;
  color:rgba(255,255,255,.78) !important;
  text-align:center !important;
  font-size:.98rem !important;
}
#login-screen .login-mark-small{margin:1.1rem auto 1.35rem !important;transform:scale(.82);}
#login-screen .login-label{
  color:rgba(255,255,255,.82) !important;
  font-size:.76rem !important;
  letter-spacing:0 !important;
  margin-bottom:.55rem !important;
}
#login-screen .login-field{margin-bottom:1.1rem !important;}
#login-screen .login-field .material-symbols-outlined{
  color:#1494ff !important;
  font-size:1.45rem !important;
}
#login-screen .login-field:has(#login-pass) > .material-symbols-outlined{
  color:#ff9a00 !important;
}
#login-screen .login-input{
  min-height:3.65rem !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:.75rem !important;
  background:rgba(255,255,255,.045) !important;
  color:#fff !important;
  font-weight:700 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#login-screen .login-input:focus{
  border-color:#1494ff !important;
  box-shadow:0 0 0 3px rgba(20,148,255,.16) !important;
}
#login-screen .login-eye .material-symbols-outlined{
  color:rgba(255,255,255,.8) !important;
}
#login-screen .login-remember{
  display:flex !important;
  align-items:center !important;
  gap:.65rem !important;
  color:rgba(255,255,255,.86) !important;
  font-size:.9rem !important;
  margin:-.15rem 0 1.35rem !important;
}
#login-screen .login-remember input{
  width:1.05rem !important;
  height:1.05rem !important;
  accent-color:var(--bimas-orange) !important;
}
#login-screen .login-company-row{
  gap:1rem !important;
  margin:0 0 1.35rem !important;
}
#login-screen .login-company-btn{
  min-height:5rem !important;
  justify-content:flex-start !important;
  padding:1rem 1.05rem !important;
  gap:1rem !important;
  border-radius:.8rem !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  font-size:1rem !important;
  line-height:1.25 !important;
}
#login-screen .login-company-btn.active{
  background:linear-gradient(135deg,rgba(255,138,0,.16),rgba(255,51,0,.08)) !important;
  border-color:var(--bimas-orange) !important;
  box-shadow:0 0 0 1px rgba(255,138,0,.18),0 10px 26px rgba(255,138,0,.08) !important;
}
#login-screen .login-company-btn .material-symbols-outlined{
  font-size:1.7rem !important;
  color:inherit !important;
}
#login-screen .login-btn{
  min-height:4.35rem !important;
  border-radius:.75rem !important;
  background:linear-gradient(135deg,#ff9800 0%,#ff6b00 46%,#f4310a 100%) !important;
  font-size:1.35rem !important;
  font-weight:900 !important;
  box-shadow:0 16px 35px rgba(255,91,0,.34),inset 0 1px 0 rgba(255,255,255,.22) !important;
}
#login-screen .login-footer{
  margin:1.7rem 0 0 !important;
  padding-top:1.25rem !important;
  border-top:1px solid rgba(255,255,255,.16) !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:.75rem !important;
  color:rgba(255,255,255,.82) !important;
  font-size:.9rem !important;
  font-weight:650 !important;
}
#login-screen .login-footer > span{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.45rem !important;
  border-right:1px solid rgba(255,255,255,.16) !important;
}
#login-screen .login-footer > span:last-child{border-right:0 !important;}
#login-screen .login-footer .material-symbols-outlined{
  color:#1494ff !important;
  font-size:1.2rem !important;
}
#login-screen .login-footer > span:last-child .material-symbols-outlined{color:var(--bimas-orange) !important;}

/* Top bar reference layout */
#app-topbar{
  left:var(--sidebar-w) !important;
  height:var(--topbar-h) !important;
  padding:0 1.5rem !important;
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 2px 16px rgba(15,23,42,.06) !important;
}
#app-topbar::after{display:none !important;}
#app-topbar > div:first-child{
  flex:1 1 auto !important;
  min-width:0 !important;
}
#app-topbar a[href="#/dashboard"]{
  display:none !important;
}
#app-topbar .topbar-search-trigger{
  width:min(22rem,42vw) !important;
  height:2.9rem !important;
  border:1px solid rgba(15,23,42,.13) !important;
  border-radius:.8rem !important;
  background:#fff !important;
  color:#64748b !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:.75rem !important;
  padding:0 1rem !important;
  cursor:pointer !important;
  font-weight:650 !important;
  box-shadow:none !important;
}
#app-topbar .topbar-search-trigger .material-symbols-outlined{
  color:#0b3771 !important;
  font-size:1.2rem !important;
}
#app-topbar .topbar-search-trigger:hover{
  border-color:rgba(0,74,185,.28) !important;
  box-shadow:0 8px 20px rgba(0,74,185,.08) !important;
}
#app-topbar .icon-btn{
  width:2.55rem !important;
  height:2.55rem !important;
  border-radius:.68rem !important;
  border:1px solid rgba(15,23,42,.12) !important;
  background:#fff !important;
  color:#0b2447 !important;
  box-shadow:none !important;
}
#app-topbar .topbar-user-btn{
  height:3.1rem !important;
  padding:.2rem .55rem .2rem .35rem !important;
  gap:.65rem !important;
}
#app-topbar .topbar-user-avatar:not(.has-photo){
  width:2.75rem !important;
  height:2.75rem !important;
  background:linear-gradient(145deg,#0b2447 0%,#1e4a8a 55%,#3b82f6 100%) !important;
  border:2px solid #fff !important;
  box-shadow:0 4px 14px rgba(11,36,87,.22) !important;
}
#app-topbar .topbar-user-avatar.has-photo{
  width:2.75rem !important;
  height:2.75rem !important;
  background:transparent !important;
  border:2px solid #fff !important;
  box-shadow:0 4px 14px rgba(11,36,87,.22) !important;
}
#app-topbar .topbar-user-copy{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  line-height:1.15 !important;
}
#app-topbar .topbar-user-name{
  color:#0b1528 !important;
  font-size:.9rem !important;
  font-weight:800 !important;
}
#app-topbar .topbar-user-role{
  color:#64748b !important;
  font-size:.72rem !important;
  font-weight:600 !important;
}
#app-topbar .topbar-user-menu{
  min-width:18rem !important;
  border-radius:18px !important;
}
#app-topbar .topbar-badge{
  background:#ef1f2d !important;
  border-color:#fff !important;
}

/* Sidebar reference layout */
#app-sidebar.sidebar-modern{
  width:var(--sidebar-w) !important;
  background:
    linear-gradient(180deg,rgba(0,35,75,.64),rgba(2,16,38,.96)),
    radial-gradient(circle at 12% 0%,rgba(0,119,255,.36),transparent 14rem),
    linear-gradient(180deg,#003879 0%,#071a34 54%,#07172d 100%) !important;
  border-right:1px solid rgba(0,0,0,.22) !important;
  box-shadow:none !important;
  overflow:hidden !important;
  padding:0 !important;
}
#app-sidebar.sidebar-modern::before{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(circle at 0% 24%,rgba(0,122,255,.24),transparent 15rem),
    linear-gradient(90deg,rgba(255,255,255,.055),transparent 26%) !important;
  pointer-events:none !important;
}
.sidebar-modern .sidebar-brand{
  margin:0 !important;
  padding:1rem .85rem .55rem !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.sidebar-modern .sidebar-brand-row{
  align-items:flex-start !important;
  justify-content:center !important;
  position:relative !important;
}
.sidebar-modern .sidebar-brand-logo{
  width:10.25rem !important;
  height:6.45rem !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  padding:0 !important;
}
.sidebar-modern .sidebar-brand-logo img{
  object-fit:contain !important;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.35)) !important;
}
.sidebar-modern .sidebar-brand-text{
  display:none !important;
}
.sidebar-modern .sidebar-collapse-btn{
  position:absolute !important;
  top:.25rem !important;
  right:.1rem !important;
  width:2rem !important;
  height:2rem !important;
  color:#fff !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.12) !important;
}
.sidebar-modern .sidebar-search{
  margin:.2rem .85rem .65rem !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 2.1rem !important;
  gap:.45rem !important;
}
.sidebar-modern .sidebar-search-icon{
  left:.75rem !important;
  color:rgba(255,255,255,.72) !important;
}
.sidebar-modern .sidebar-search input{
  height:2.1rem !important;
  border-radius:.45rem !important;
  border:1px solid rgba(255,255,255,.28) !important;
  background:rgba(255,255,255,.065) !important;
  color:#fff !important;
  padding:.45rem .7rem .45rem 2rem !important;
  font-size:.8rem !important;
}
.sidebar-modern .sidebar-search input::placeholder{color:rgba(255,255,255,.82) !important;}
.sidebar-modern .sidebar-add-btn{
  width:2.1rem !important;
  height:2.1rem !important;
  border-radius:.45rem !important;
  border:1px solid rgba(255,255,255,.3) !important;
  background:rgba(255,255,255,.075) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
}
.sidebar-modern .sidebar-add-btn .material-symbols-outlined{font-size:1.05rem !important;}
.sidebar-modern .sidebar-nav{
  padding:.15rem .45rem .85rem !important;
  overflow-y:auto !important;
  gap:.1rem !important;
}
.sidebar-modern .nav-home,
.sidebar-modern .nav-item{
  min-height:2.25rem !important;
  border-radius:.55rem !important;
  padding:.42rem .6rem !important;
  color:rgba(255,255,255,.91) !important;
  font-size:.78rem !important;
  font-weight:650 !important;
  gap:.55rem !important;
  border:1px solid transparent !important;
  background:transparent !important;
  box-shadow:none !important;
}
.sidebar-modern .nav-home{
  margin:.15rem .1rem .58rem !important;
}
.sidebar-modern .nav-home.active,
.sidebar-modern .nav-home:hover,
.sidebar-modern .nav-item.active,
.sidebar-modern .nav-item:hover{
  color:#fff !important;
  background:linear-gradient(135deg,#0b63d8,#1688ff) !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:0 8px 18px rgba(0,88,210,.28) !important;
}
.sidebar-modern .nav-item.active::before{
  display:none !important;
}
.sidebar-modern .nav-home > span:first-child,
.sidebar-modern .nav-item > span:first-child{
  width:1.35rem !important;
  height:1.35rem !important;
  min-width:1.35rem !important;
  border-radius:.25rem !important;
  background:transparent !important;
  box-shadow:none !important;
}
.sidebar-modern .nav-home .material-symbols-outlined,
.sidebar-modern .nav-item .material-symbols-outlined{
  width:auto !important;
  height:auto !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#fff !important;
  font-size:1rem !important;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20 !important;
}
.sidebar-modern .nav-label{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.sidebar-modern .nav-group{
  margin:.18rem 0 .15rem !important;
}
.sidebar-modern .nav-group-header{
  min-height:2.05rem !important;
  padding:.45rem .5rem .35rem .6rem !important;
  color:rgba(255,255,255,.72) !important;
  background:transparent !important;
  border:0 !important;
  border-radius:.55rem !important;
  font-size:.73rem !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  text-transform:uppercase !important;
}
.sidebar-modern .nav-group-icon{
  display:none !important;
}
.sidebar-modern .nav-group-label{
  color:inherit !important;
}
.sidebar-modern .nav-group-count{
  margin-left:auto !important;
  min-width:1.2rem !important;
  height:1.2rem !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:.35rem !important;
  background:rgba(255,255,255,.14) !important;
  color:rgba(255,255,255,.78) !important;
  font-size:.64rem !important;
  border:0 !important;
}
.sidebar-modern .nav-group-chevron{
  color:rgba(255,255,255,.72) !important;
  font-size:1rem !important;
}
.sidebar-modern .nav-group-body{
  padding:.05rem 0 .45rem .1rem !important;
  display:flex !important;
  flex-direction:column !important;
  gap:.06rem !important;
}
.sidebar-modern .sidebar-footer{
  margin:.15rem .85rem .85rem !important;
  padding:.55rem !important;
  border-radius:.75rem !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}
.sidebar-modern .sidebar-footer #sidebar-user-info{
  margin:0 !important;
  padding:.45rem .55rem !important;
  background:transparent !important;
  border:0 !important;
}
#sidebar-user-avatar{
  background:#d6a532 !important;
  color:#fff !important;
}
.theme-toggle{
  width:2.45rem !important;
  height:1.35rem !important;
  border-radius:99px !important;
  background:#d9e2ee !important;
  border:0 !important;
  position:relative !important;
}
.theme-toggle::before{
  content:"" !important;
  position:absolute !important;
  width:1.05rem !important;
  height:1.05rem !important;
  top:.15rem !important;
  left:.18rem !important;
  border-radius:50% !important;
  background:#8b95a5 !important;
}
[data-theme="dark"] .theme-toggle::before{
  left:1.22rem !important;
  background:#fff !important;
}

/* Reference dashboard polish */
#app-content{
  margin-left:var(--sidebar-w) !important;
  padding:calc(var(--topbar-h) + 2.2rem) 1.65rem 2.5rem !important;
}
#app-content > .page-container{
  max-width:58rem !important;
  margin:0 auto !important;
}
.dash-shell{
  margin:0 !important;
  padding:0 !important;
  gap:1rem !important;
  background:transparent !important;
}
.dash-hero{
  border-radius:.8rem !important;
  min-height:8.2rem !important;
  padding:1.7rem 1.8rem !important;
  background:
    radial-gradient(circle at 96% 52%,rgba(255,255,255,.14) 0 5.5rem,transparent 5.6rem),
    radial-gradient(circle at 88% 48%,rgba(255,255,255,.08) 0 9rem,transparent 9.1rem),
    linear-gradient(135deg,#00399e 0%,#005dd9 56%,#1778f2 100%) !important;
  box-shadow:none !important;
}
.dash-hero:before,
.dash-hero:after{display:none !important;}
.dash-hero h1{
  font-size:1.55rem !important;
  letter-spacing:0 !important;
}
.dash-hero .sub{
  font-size:.88rem !important;
  color:rgba(255,255,255,.9) !important;
}
.dash-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:.75rem !important;
}
.dash-card2{
  border-radius:.95rem !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.09) !important;
  box-shadow:0 8px 26px rgba(15,23,42,.08) !important;
}
.dash-kpi{
  min-height:10.9rem !important;
  padding:1.05rem !important;
  border-radius:.95rem !important;
}
.dash-kpi:before{display:none !important;}
.dash-kpi .kicon{
  width:2.55rem !important;
  height:2.55rem !important;
  border-radius:.65rem !important;
}
.dash-kpi .label{
  margin-top:1.05rem !important;
  color:#1f2937 !important;
  letter-spacing:0 !important;
}
.dash-kpi .value{
  font-size:1.45rem !important;
}
.dash-spark{
  right:.95rem !important;
  top:5.3rem !important;
  width:5.1rem !important;
  height:3.8rem !important;
  opacity:.95 !important;
}
.dash-two,
.dash-main-grid{
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr) !important;
  gap:.75rem !important;
}
.dash-side-stack{
  gap:.75rem !important;
}
.dash-departments-panel{
  padding:1.15rem !important;
}
.dash-section{
  padding:1.15rem !important;
}
.dash-section-head h2{
  font-size:1.08rem !important;
  letter-spacing:0 !important;
}
.dash-row{
  border-radius:.7rem !important;
  min-height:3.75rem !important;
}
.dash-work{
  background:linear-gradient(135deg,#fff7ed,#fff) !important;
  border-color:#fed7aa !important;
}
.dash-dept-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:.85rem !important;
}
.dash-dept{
  position:relative !important;
  min-height:8.3rem !important;
  overflow:hidden !important;
  border-radius:.85rem !important;
  padding:1.05rem !important;
}
.dash-dept::after{
  content:"" !important;
  position:absolute !important;
  right:-1.2rem !important;
  bottom:-1.4rem !important;
  width:7.5rem !important;
  height:7.5rem !important;
  border-radius:50% !important;
  border:1.2rem solid rgba(0,93,217,.13) !important;
}
.dash-dept:nth-child(2n)::after{border-color:rgba(255,138,0,.18) !important;}
.dash-dept:nth-child(3n)::after{border-color:rgba(22,163,74,.16) !important;}
.dash-dept:nth-child(4n)::after{border-color:rgba(124,58,237,.16) !important;}
.dash-dept span{position:relative !important;z-index:1 !important;}

@media (max-width:1180px){
  #app-content > .page-container{max-width:none !important;}
  .dash-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .dash-two,
  .dash-main-grid{grid-template-columns:1fr !important;}
}
@media (max-width:1024px){
  :root{--topbar-h:4.2rem;}
  #app-topbar{
    left:0 !important;
    padding:.55rem .75rem !important;
  }
  #app-sidebar.sidebar-modern{
    width:min(15rem,82vw) !important;
    transform:translateX(-100%) !important;
    box-shadow:none !important;
  }
  #app-sidebar.sidebar-modern.open,
  #app-sidebar.sidebar-modern.mobile-open{
    transform:translateX(0) !important;
    box-shadow:none !important;
  }
  .sidebar-overlay.open{
    background:rgba(2,8,23,.34) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  #app-content{
    margin-left:0 !important;
    padding:calc(var(--topbar-h) + 1rem) .9rem 5.2rem !important;
  }
  #app-topbar a[href="#/dashboard"]{
    display:flex !important;
  }
  #app-topbar a[href="#/dashboard"] img,
  #app-topbar #company-logo-fallback{
    display:none !important;
  }
  #app-topbar #company-name{
    display:inline !important;
    font-size:.98rem !important;
  }
}
@media (max-width:900px){
  #login-screen{
    padding:1rem !important;
  }
  #login-screen .login-frame{
    grid-template-columns:1fr !important;
    min-height:0 !important;
  }
  #login-screen .login-visual{
    min-height:auto !important;
    padding:2rem 1.25rem 1.3rem !important;
  }
  #login-screen .login-benefits{
    margin-top:1.7rem !important;
  }
  #login-screen .login-card{
    width:100% !important;
    border-radius:0 !important;
    padding:2rem 1.35rem 1.5rem !important;
  }
}
@media (max-width:760px){
  #app-topbar .topbar-search-trigger{
    width:2.55rem !important;
    padding:0 !important;
    justify-content:center !important;
  }
  #app-topbar .topbar-search-trigger span:last-child,
  #app-topbar .topbar-user-copy,
  #app-topbar .topbar-user-chevron{
    display:none !important;
  }
  #app-topbar > div:last-child{
    gap:.28rem !important;
  }
  #app-topbar .icon-btn,
  #app-topbar .topbar-user-avatar{
    width:2.35rem !important;
    height:2.35rem !important;
  }
  .dash-hero-row{
    align-items:flex-start !important;
    gap:.9rem !important;
    flex-direction:column !important;
  }
  .dash-grid,
  .dash-dept-grid{
    grid-template-columns:1fr !important;
  }
}
@media (max-width:620px){
  #login-screen{
    align-items:flex-start !important;
    justify-content:center !important;
    padding:.8rem !important;
  }
  #login-screen .login-shell{
    align-items:flex-start !important;
  }
  #login-screen .login-visual{
    display:none !important;
  }
  #login-screen .login-frame{
    border-radius:1rem !important;
  }
  #login-screen .login-card{
    border-radius:1rem !important;
    padding:1.45rem 1.25rem 1.15rem !important;
  }
  #login-screen .login-card-icon{
    width:3.25rem !important;
    height:3.25rem !important;
    margin-bottom:.8rem !important;
  }
  #login-screen .login-title{
    font-size:1.55rem !important;
  }
  #login-screen .login-sub{
    font-size:.9rem !important;
  }
  #login-screen .login-field{
    margin-bottom:.9rem !important;
  }
  #login-screen .login-input{
    min-height:3.25rem !important;
  }
  #login-screen .login-remember{
    margin:-.1rem 0 1rem !important;
  }
  #login-screen .login-company-row{
    grid-template-columns:1fr !important;
    gap:.65rem !important;
    margin-bottom:1rem !important;
  }
  #login-screen .login-company-btn{
    min-height:4.25rem !important;
  }
  #login-screen .login-btn{
    min-height:3.8rem !important;
    font-size:1.1rem !important;
  }
  #login-screen .login-footer{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:.25rem !important;
    font-size:.76rem !important;
    margin-top:1rem !important;
    padding-top:.9rem !important;
  }
  #login-screen .login-footer > span{
    border-right:0 !important;
    gap:.25rem !important;
  }
}
@media (max-width:430px){
  #app-topbar{
    padding:.45rem .55rem !important;
  }
  #app-topbar .company-pill,
  #app-topbar .topbar-alert-btn:nth-of-type(2){
    display:none !important;
  }
  .dash-hero{
    padding:1.2rem !important;
  }
  .dash-hero h1{
    font-size:1.25rem !important;
  }
}

/* ================================================================
   Android/mobile scroll and transparent-logo refinements
   ================================================================ */
html,
body{
  min-height:100% !important;
  overflow-x:hidden !important;
}
html[data-auth-ready="app"],
html[data-auth-ready="app"] body{
  height:auto !important;
  min-height:100dvh !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
body.sidebar-is-open{
  overflow:hidden !important;
  overflow-y:hidden !important;
  touch-action:none !important;
  overscroll-behavior:contain !important;
}
html[data-auth-ready="app"] body.sidebar-is-open{
  overflow:hidden !important;
  overflow-y:hidden !important;
}
body.sidebar-is-open #app-sidebar,
body.sidebar-is-open #app-sidebar .sidebar-nav{
  touch-action:pan-y !important;
}
#app-content{
  height:auto !important;
  min-height:100dvh !important;
  overflow:visible !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:pan-y !important;
}
#app-content > .page-container{
  min-width:0 !important;
}
.sidebar-collapse-btn{
  display:none !important;
}
.sidebar-modern .sidebar-brand-row{
  padding-right:0 !important;
}
.sidebar-modern .sidebar-brand-logo,
#login-screen .login-visual-logo{
  background:transparent !important;
  border:0 !important;
}
.sidebar-modern .sidebar-brand-logo img,
#login-screen .login-visual-logo img{
  mix-blend-mode:normal !important;
}

@media (max-width:1024px){
  html[data-auth-ready="app"] body:not(.sidebar-is-open){
    overflow-y:auto !important;
    touch-action:pan-y !important;
  }
  #app-sidebar.sidebar-modern{
    height:100dvh !important;
    max-height:100dvh !important;
  }
  .sidebar-modern .sidebar-nav{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .sidebar-modern .sidebar-footer{
    flex:0 0 auto !important;
  }
  #app-content{
    min-height:auto !important;
    padding-bottom:calc(5.25rem + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width:680px){
  #app-topbar{
    min-width:0 !important;
  }
  #app-topbar > div:first-child,
  #app-topbar > div:last-child{
    min-width:0 !important;
  }
  #app-topbar .topbar-alert-btn{
    flex:0 0 auto !important;
  }
  .dash-card2,
  .dash-dept,
  .dash-kpi{
    border-radius:.82rem !important;
  }
  .dash-section{
    padding:.95rem !important;
  }
  .dash-kpi{
    min-height:9.25rem !important;
  }
  .dash-spark{
    top:4.7rem !important;
  }
}

@media (max-width:390px){
  #app-topbar .topbar-alert-btn:nth-of-type(1){
    display:none !important;
  }
  #app-topbar .icon-btn,
  #app-topbar .topbar-search-trigger,
  #app-topbar .topbar-user-avatar{
    width:2.2rem !important;
    height:2.2rem !important;
  }
}

/* Company branding and login fit refinements */
[data-company="rehoboth"] body{
  background:linear-gradient(180deg,#f4fbfa 0%,#f9fdfc 100%) !important;
}
[data-company="rehoboth"] #login-screen{
  background:
    linear-gradient(90deg,rgba(0,0,0,.74),rgba(2,21,24,.2) 49%,rgba(0,34,34,.72)),
    radial-gradient(circle at 89% 12%,rgba(32,214,189,.34),transparent 22rem),
    radial-gradient(circle at 37% 93%,rgba(13,115,119,.52),transparent 30rem),
    linear-gradient(135deg,#020611 0%,#052f36 48%,#07101f 100%) !important;
}
[data-company="rehoboth"] #login-screen .login-visual{
  background:
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(2,24,27,.72)),
    radial-gradient(circle at 25% 71%,rgba(32,214,189,.2),transparent 14rem),
    radial-gradient(circle at 84% 42%,rgba(20,160,133,.24),transparent 18rem),
    linear-gradient(135deg,#031013,#063a41) !important;
}
[data-company="rehoboth"] #login-screen .login-card{
  border-top-color:rgba(32,214,189,.72) !important;
  border-right-color:rgba(20,160,133,.68) !important;
}
[data-company="rehoboth"] #login-screen .login-visual h1 span,
[data-company="rehoboth"] #login-screen .login-title span{
  color:#20d6bd !important;
}
[data-company="rehoboth"] #login-screen .login-btn{
  background:linear-gradient(135deg,#14a085 0%,#0d7377 100%) !important;
}
[data-company="rehoboth"] #login-screen .login-company-btn.active{
  border-color:#20d6bd !important;
  box-shadow:0 0 0 1px rgba(32,214,189,.3),0 12px 28px rgba(13,115,119,.24) !important;
}
[data-company="rehoboth"] #app-sidebar.sidebar-modern{
  background:linear-gradient(180deg,#062b32 0%,#051d25 54%,#031118 100%) !important;
}
[data-company="rehoboth"] .nav-home,
[data-company="rehoboth"] #app-sidebar .nav-item.active{
  background:linear-gradient(135deg,#14a085,#0d7377) !important;
}
[data-company="rehoboth"] .dash-hero{
  background:
    radial-gradient(circle at 90% 35%,rgba(32,214,189,.24),transparent 18rem),
    linear-gradient(135deg,#0d7377 0%,#14a085 100%) !important;
}

#login-screen{
  padding:clamp(.65rem,2vw,1.25rem) !important;
}
#login-screen .login-frame{
  width:min(76rem,100%) !important;
  min-height:0 !important;
  height:min(42rem,calc(100dvh - 1.5rem)) !important;
  grid-template-columns:minmax(0,1fr) minmax(22rem,.86fr) !important;
}
#login-screen .login-visual{
  min-height:0 !important;
  padding:2rem 2rem 1.6rem !important;
}
#login-screen .login-visual-logo{
  width:min(12.5rem,44vw) !important;
  margin-bottom:1rem !important;
}
#login-screen .login-visual h1{
  font-size:1.85rem !important;
}
#login-screen .login-mark{
  margin:1rem auto 1rem !important;
}
#login-screen .login-benefits{
  margin-top:3rem !important;
  padding:1rem !important;
}
#login-screen .login-benefits .material-symbols-outlined{
  width:2.7rem !important;
  height:2.7rem !important;
  font-size:1.45rem !important;
}
#login-screen .login-card{
  width:min(100%,34rem) !important;
  padding:2rem 2.1rem 1.35rem !important;
}
#login-screen .login-card-icon{
  width:3.35rem !important;
  height:3.35rem !important;
  margin-bottom:.75rem !important;
}
#login-screen .login-card-icon .material-symbols-outlined{
  font-size:1.9rem !important;
}
#login-screen .login-title{
  font-size:1.65rem !important;
}
#login-screen .login-sub{
  font-size:.9rem !important;
  margin:.5rem 0 0 !important;
}
#login-screen .login-mark-small{
  margin:.75rem auto 1rem !important;
}
#login-screen .login-field{
  margin-bottom:.82rem !important;
}
#login-screen .login-input{
  min-height:3.15rem !important;
}
#login-screen .login-remember{
  margin:-.05rem 0 .85rem !important;
}
#login-screen .login-company-row{
  margin:.9rem 0 .95rem !important;
}
#login-screen .login-company-btn{
  min-height:4.1rem !important;
}
#login-screen .login-btn{
  min-height:3.5rem !important;
  font-size:1.02rem !important;
}
#login-screen .login-footer{
  margin-top:.95rem !important;
  padding-top:.8rem !important;
}

@media (max-height:760px) and (min-width:901px){
  #login-screen .login-frame{
    height:min(38rem,calc(100dvh - 1rem)) !important;
  }
  #login-screen .login-visual-logo{
    width:min(10.5rem,36vw) !important;
  }
  #login-screen .login-benefits{
    margin-top:1.5rem !important;
    padding:.85rem !important;
  }
  #login-screen .login-benefits small{
    line-height:1.35 !important;
  }
  #login-screen .login-card{
    padding:1.45rem 1.8rem 1.05rem !important;
  }
  #login-screen .login-card-icon{
    width:2.9rem !important;
    height:2.9rem !important;
  }
  #login-screen .login-title{
    font-size:1.45rem !important;
  }
  #login-screen .login-input,
  #login-screen .login-btn{
    min-height:3rem !important;
  }
  #login-screen .login-company-btn{
    min-height:3.65rem !important;
  }
}

@media (max-width:900px){
  #login-screen{
    min-height:100dvh !important;
    align-items:flex-start !important;
  }
  #login-screen .login-shell{
    min-height:0 !important;
  }
  #login-screen .login-frame{
    height:auto !important;
    max-width:34rem !important;
    margin:auto !important;
  }
}

@media (max-width:620px){
  #login-screen{
    padding:.55rem !important;
  }
  #login-screen .login-card{
    padding:1rem .9rem .85rem !important;
  }
  #login-screen .login-card-icon{
    width:2.8rem !important;
    height:2.8rem !important;
    margin-bottom:.55rem !important;
  }
  #login-screen .login-title{
    font-size:1.35rem !important;
  }
  #login-screen .login-sub{
    font-size:.8rem !important;
  }
  #login-screen .login-mark-small{
    margin:.5rem auto .7rem !important;
  }
  #login-screen .login-label{
    margin-bottom:.3rem !important;
  }
  #login-screen .login-input,
  #login-screen .login-btn{
    min-height:3rem !important;
  }
  #login-screen .login-company-btn{
    min-height:3.55rem !important;
  }
  #login-screen .login-footer{
    font-size:.68rem !important;
  }
}

/* ================================================================
   Global ERP workspace canvas
   A shared professional background for every authenticated module.
   ================================================================ */
:root{
  --erp-canvas:#eef3f8;
  --erp-canvas-top:#f8fbff;
  --erp-canvas-mid:#f2f6fb;
  --erp-panel:rgba(255,255,255,.86);
  --erp-panel-strong:rgba(255,255,255,.94);
  --erp-panel-soft:rgba(248,250,252,.78);
  --erp-panel-muted:rgba(241,245,249,.82);
  --erp-border:rgba(100,116,139,.22);
  --erp-grid-line:rgba(15,23,42,.04);
  --erp-band-blue:rgba(0,70,153,.075);
  --erp-band-orange:rgba(224,92,0,.055);
  --erp-shadow:0 18px 48px rgba(15,23,42,.09),0 1px 0 rgba(255,255,255,.72) inset;
}

[data-theme="dark"]{
  --erp-canvas:#0c121b;
  --erp-canvas-top:#111827;
  --erp-canvas-mid:#0f1724;
  --erp-panel:rgba(22,27,34,.86);
  --erp-panel-strong:rgba(27,34,45,.94);
  --erp-panel-soft:rgba(20,27,38,.82);
  --erp-panel-muted:rgba(18,24,34,.86);
  --erp-border:rgba(148,163,184,.15);
  --erp-grid-line:rgba(226,232,240,.035);
  --erp-band-blue:rgba(96,165,250,.08);
  --erp-band-orange:rgba(251,146,60,.06);
  --erp-shadow:0 18px 54px rgba(0,0,0,.34),0 1px 0 rgba(255,255,255,.05) inset;
}

html[data-auth-ready="app"] body{
  background:
    linear-gradient(135deg,var(--erp-band-blue) 0%,transparent 34%),
    linear-gradient(225deg,var(--erp-band-orange) 0%,transparent 32%),
    linear-gradient(180deg,var(--erp-canvas-top) 0%,var(--erp-canvas-mid) 42%,var(--erp-canvas) 100%) !important;
}

html[data-auth-ready="app"] #app-content{
  position:relative !important;
  isolation:isolate !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 16rem),
    repeating-linear-gradient(90deg,var(--erp-grid-line) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(0deg,var(--erp-grid-line) 0 1px,transparent 1px 72px),
    linear-gradient(135deg,var(--erp-canvas-top),var(--erp-canvas)) !important;
}

[data-theme="dark"] html[data-auth-ready="app"] #app-content,
html[data-theme="dark"][data-auth-ready="app"] #app-content{
  background:
    linear-gradient(180deg,rgba(255,255,255,.025) 0%,rgba(255,255,255,0) 16rem),
    repeating-linear-gradient(90deg,var(--erp-grid-line) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(0deg,var(--erp-grid-line) 0 1px,transparent 1px 72px),
    linear-gradient(135deg,var(--erp-canvas-top),var(--erp-canvas)) !important;
}

html[data-auth-ready="app"] #app-content::before{
  content:"";
  position:fixed;
  inset:var(--topbar-h) 0 0 var(--sidebar-w);
  pointer-events:none;
  z-index:0;
  opacity:.95;
  background:
    linear-gradient(118deg,transparent 0 39%,rgba(0,70,153,.052) 39% 39.7%,transparent 39.7% 100%),
    linear-gradient(152deg,transparent 0 62%,rgba(224,92,0,.042) 62% 62.7%,transparent 62.7% 100%),
    linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,0) 36%,rgba(255,255,255,.16));
}

[data-company="rehoboth"] html[data-auth-ready="app"] body,
html[data-company="rehoboth"][data-auth-ready="app"] body{
  background:
    linear-gradient(135deg,rgba(13,115,119,.085) 0%,transparent 34%),
    linear-gradient(225deg,rgba(32,214,189,.055) 0%,transparent 32%),
    linear-gradient(180deg,#f7fcfb 0%,#f1f8f7 44%,#edf5f4 100%) !important;
}

[data-company="rehoboth"] html[data-auth-ready="app"] #app-content,
html[data-company="rehoboth"][data-auth-ready="app"] #app-content{
  background:
    linear-gradient(180deg,rgba(255,255,255,.44) 0%,rgba(255,255,255,0) 16rem),
    repeating-linear-gradient(90deg,rgba(13,115,119,.04) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(0deg,rgba(13,115,119,.034) 0 1px,transparent 1px 72px),
    linear-gradient(135deg,#f8fcfb,#eef7f6) !important;
}

html[data-auth-ready="app"] #app-content > .page-container{
  position:relative !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] .card,
html[data-auth-ready="app"] .kpi-card,
html[data-auth-ready="app"] .stats-card,
html[data-auth-ready="app"] .chart-container,
html[data-auth-ready="app"] .kanban-col,
html[data-auth-ready="app"] .pipeline-stage,
html[data-auth-ready="app"] .table-filters,
html[data-auth-ready="app"] .table-pagination,
html[data-auth-ready="app"] .tab-nav,
html[data-auth-ready="app"] .timeline-body,
html[data-auth-ready="app"] .signature-pad,
html[data-auth-ready="app"] .map-container,
html[data-auth-ready="app"] .modal-content,
html[data-auth-ready="app"] .data-table-wrap{
  background:linear-gradient(180deg,var(--erp-panel-strong),var(--erp-panel)) !important;
  border-color:var(--erp-border) !important;
  box-shadow:var(--erp-shadow) !important;
  backdrop-filter:blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.08) !important;
}

html[data-auth-ready="app"] .card:hover,
html[data-auth-ready="app"] .kpi-card:hover,
html[data-auth-ready="app"] .stats-card:hover{
  border-color:rgba(0,70,153,.2) !important;
  box-shadow:0 22px 56px rgba(15,23,42,.12),0 1px 0 rgba(255,255,255,.75) inset !important;
}

[data-theme="dark"] html[data-auth-ready="app"] .card:hover,
html[data-theme="dark"][data-auth-ready="app"] .card:hover,
[data-theme="dark"] html[data-auth-ready="app"] .kpi-card:hover,
html[data-theme="dark"][data-auth-ready="app"] .kpi-card:hover,
[data-theme="dark"] html[data-auth-ready="app"] .stats-card:hover,
html[data-theme="dark"][data-auth-ready="app"] .stats-card:hover{
  border-color:rgba(96,165,250,.22) !important;
  box-shadow:0 22px 56px rgba(0,0,0,.38),0 1px 0 rgba(255,255,255,.06) inset !important;
}

html[data-auth-ready="app"] .form-input,
html[data-auth-ready="app"] .form-select,
html[data-auth-ready="app"] textarea,
html[data-auth-ready="app"] .table-search input,
html[data-auth-ready="app"] .table-filter-select,
html[data-auth-ready="app"] .table-btn,
html[data-auth-ready="app"] .pagination-btn{
  background:rgba(255,255,255,.78) !important;
  border-color:var(--erp-border) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset !important;
}

[data-theme="dark"] html[data-auth-ready="app"] .form-input,
html[data-theme="dark"][data-auth-ready="app"] .form-input,
[data-theme="dark"] html[data-auth-ready="app"] .form-select,
html[data-theme="dark"][data-auth-ready="app"] .form-select,
[data-theme="dark"] html[data-auth-ready="app"] textarea,
html[data-theme="dark"][data-auth-ready="app"] textarea,
[data-theme="dark"] html[data-auth-ready="app"] .table-search input,
html[data-theme="dark"][data-auth-ready="app"] .table-search input,
[data-theme="dark"] html[data-auth-ready="app"] .table-filter-select,
html[data-theme="dark"][data-auth-ready="app"] .table-filter-select,
[data-theme="dark"] html[data-auth-ready="app"] .table-btn,
html[data-theme="dark"][data-auth-ready="app"] .table-btn,
[data-theme="dark"] html[data-auth-ready="app"] .pagination-btn,
html[data-theme="dark"][data-auth-ready="app"] .pagination-btn{
  background:rgba(15,23,42,.72) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset !important;
}

html[data-auth-ready="app"] .form-input:focus,
html[data-auth-ready="app"] .form-select:focus,
html[data-auth-ready="app"] textarea:focus,
html[data-auth-ready="app"] .table-search input:focus{
  background:var(--surface-0) !important;
  border-color:var(--brand-blue) !important;
}

html[data-auth-ready="app"] .data-table,
html[data-auth-ready="app"] .data-table-premium{
  background:transparent !important;
}

html[data-auth-ready="app"] .data-table thead tr,
html[data-auth-ready="app"] .data-table-premium thead{
  background:linear-gradient(180deg,rgba(248,250,252,.92),rgba(238,242,247,.9)) !important;
}

[data-theme="dark"] html[data-auth-ready="app"] .data-table thead tr,
html[data-theme="dark"][data-auth-ready="app"] .data-table thead tr,
[data-theme="dark"] html[data-auth-ready="app"] .data-table-premium thead,
html[data-theme="dark"][data-auth-ready="app"] .data-table-premium thead{
  background:linear-gradient(180deg,rgba(30,41,59,.92),rgba(15,23,42,.9)) !important;
}

html[data-auth-ready="app"] .data-table tbody tr,
html[data-auth-ready="app"] .data-table-premium tbody tr{
  background:rgba(255,255,255,.52) !important;
}

html[data-auth-ready="app"] .data-table tbody tr:nth-child(even),
html[data-auth-ready="app"] .data-table-premium tbody tr:nth-child(even){
  background:rgba(248,250,252,.74) !important;
}

html[data-auth-ready="app"] .data-table tbody tr:hover,
html[data-auth-ready="app"] .data-table-premium tbody tr:hover{
  background:var(--brand-blue-faint) !important;
}

[data-theme="dark"] html[data-auth-ready="app"] .data-table tbody tr,
html[data-theme="dark"][data-auth-ready="app"] .data-table tbody tr,
[data-theme="dark"] html[data-auth-ready="app"] .data-table-premium tbody tr,
html[data-theme="dark"][data-auth-ready="app"] .data-table-premium tbody tr{
  background:rgba(15,23,42,.56) !important;
}

[data-theme="dark"] html[data-auth-ready="app"] .data-table tbody tr:nth-child(even),
html[data-theme="dark"][data-auth-ready="app"] .data-table tbody tr:nth-child(even),
[data-theme="dark"] html[data-auth-ready="app"] .data-table-premium tbody tr:nth-child(even),
html[data-theme="dark"][data-auth-ready="app"] .data-table-premium tbody tr:nth-child(even){
  background:rgba(30,41,59,.58) !important;
}

html[data-auth-ready="app"] .production-stage-card,
html[data-auth-ready="app"] .production-action-tile,
html[data-auth-ready="app"] .production-detail-section,
html[data-auth-ready="app"] .production-flow-step,
html[data-auth-ready="app"] .production-urgent-row,
html[data-auth-ready="app"] .production-watch-row,
html[data-auth-ready="app"] .production-inline-note,
html[data-auth-ready="app"] .production-control-row,
html[data-auth-ready="app"] .production-detail-flow-step,
html[data-auth-ready="app"] .production-detail-summary-card,
html[data-auth-ready="app"] .production-work-sequence__card,
html[data-auth-ready="app"] .production-detail-alert,
html[data-auth-ready="app"] .production-detail-operation-row,
html[data-auth-ready="app"] .production-detail-side-row{
  background:linear-gradient(180deg,var(--erp-panel-soft),var(--erp-panel-muted)) !important;
  border-color:var(--erp-border) !important;
}

@media (max-width:1024px){
  html[data-auth-ready="app"] #app-content::before{
    inset:var(--topbar-h) 0 0 0;
  }
}

@media (max-width:680px){
  html[data-auth-ready="app"] #app-content{
    background:
      linear-gradient(180deg,rgba(255,255,255,.48) 0%,rgba(255,255,255,0) 10rem),
      repeating-linear-gradient(90deg,var(--erp-grid-line) 0 1px,transparent 1px 48px),
      repeating-linear-gradient(0deg,var(--erp-grid-line) 0 1px,transparent 1px 48px),
      linear-gradient(135deg,var(--erp-canvas-top),var(--erp-canvas)) !important;
  }
  html[data-auth-ready="app"] #app-content::before{
    opacity:.55;
  }
}

/* ════════════════════════════════════════════════════════════
   INVENTORY MODULE
   ════════════════════════════════════════════════════════════ */
.inv-module { max-width:1440px; margin:0 auto; min-width:0; }

.inv-topbar {
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-bottom:1.25rem;
}
.inv-topbar-left { display:flex; flex-direction:column; gap:.25rem; }
.inv-page-title {
  display:flex; align-items:center; gap:.5rem;
  font-size:1.5rem; font-weight:800; letter-spacing:-.03em;
  font-family:var(--font-display); margin:0;
}
.inv-page-sub { font-size:.8125rem; color:var(--text-muted); margin:0; }
.inv-topbar-right { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.inv-branch-pill {
  display:flex; align-items:center; gap:.375rem; padding:.375rem .75rem;
  border-radius:var(--r-full); background:var(--surface-1); border:1px solid var(--border);
  font-size:.8125rem; font-weight:600; color:var(--text-secondary);
}
.inv-dropdown-wrap { position:relative; }
.inv-dropdown-menu {
  position:absolute; top:calc(100% + .375rem); right:0; z-index:100;
  min-width:14rem; background:var(--surface-0); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-xl); overflow:hidden;
}
.inv-dropdown-menu button {
  display:flex; align-items:center; gap:.5rem; width:100%; padding:.625rem 1rem;
  border:none; background:transparent; cursor:pointer; font-size:.8125rem;
  color:var(--text-primary); text-align:left;
}
.inv-dropdown-menu button:hover { background:var(--surface-1); }
.inv-dropdown-menu button .material-symbols-outlined { font-size:1.125rem; color:var(--brand-blue); }

/* Tabs */
.inv-tabs-bar {
  display:flex; gap:.25rem; overflow-x:auto; padding-bottom:.25rem;
  border-bottom:2px solid var(--border); margin-bottom:1.25rem;
  scrollbar-width:none; max-width:100%; min-width:0;
}
.inv-tabs-bar::-webkit-scrollbar { display:none; }
.inv-tab {
  display:flex; align-items:center; gap:.375rem; padding:.5rem .875rem;
  border:none; background:transparent; cursor:pointer;
  font-size:.8125rem; font-weight:600; color:var(--text-muted);
  white-space:nowrap; border-bottom:2px solid transparent;
  margin-bottom:-2px; border-radius:var(--r-lg) var(--r-lg) 0 0;
  transition:all .15s;
}
.inv-tab .material-symbols-outlined { font-size:1rem; }
.inv-tab:hover { color:var(--text-primary); background:var(--surface-1); }
.inv-tab.active {
  color:var(--brand-blue); border-bottom-color:var(--brand-blue);
  background:rgba(59,130,246,.06);
}
.inv-tab-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.25rem; height:1.25rem; padding:0 .375rem;
  border-radius:var(--r-full); background:var(--brand-blue); color:#fff;
  font-size:.6875rem; font-weight:700;
}
.inv-tab-badge.warn { background:#f59e0b; }

/* KPI Cards */
.inv-kpi-row {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:.75rem;
  margin-bottom:1.25rem;
}
.inv-kpi-card {
  display:flex; align-items:center; gap:.875rem;
  padding:1.125rem 1.25rem; background:var(--surface-0); border:1px solid var(--border);
  border-radius:var(--r-2xl); box-shadow:var(--shadow-sm);
}
.inv-kpi-icon {
  width:2.75rem; height:2.75rem; border-radius:var(--r-xl);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.inv-kpi-icon .material-symbols-outlined { font-size:1.375rem; }
.inv-kpi-body { display:flex; flex-direction:column; gap:.125rem; min-width:0; }
.inv-kpi-label { font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
.inv-kpi-value { font-size:1.25rem; font-weight:800; font-family:var(--font-display); letter-spacing:-.02em; }
.inv-kpi-sub { font-size:.6875rem; color:var(--text-muted); }

/* Charts */
.inv-charts-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.25rem; }
.inv-chart-card {
  padding:1.25rem; background:var(--surface-0); border:1px solid var(--border);
  border-radius:var(--r-2xl); box-shadow:var(--shadow-sm);
}
.inv-chart-card h3 { font-size:.9375rem; font-weight:700; margin:0 0 1rem; }
.inv-donut-wrap { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.inv-donut-chart { flex-shrink:0; }
.inv-donut-legend { display:flex; flex-direction:column; gap:.5rem; min-width:0; flex:1; }
.inv-legend-item { display:flex; align-items:center; gap:.5rem; font-size:.8125rem; }
.inv-legend-item strong { margin-left:auto; font-size:.75rem; white-space:nowrap; }
.inv-legend-dot { width:.625rem; height:.625rem; border-radius:50%; flex-shrink:0; }
.inv-donut-empty { padding:2rem; text-align:center; color:var(--text-muted); }

.inv-live-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.8rem 1rem;
  margin-bottom:.7rem;
  background:var(--surface-0);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-xs);
}
.inv-live-source,
.inv-live-actions {
  display:flex;
  align-items:center;
  gap:.5rem;
  min-width:0;
  flex-wrap:wrap;
}
.inv-live-source .material-symbols-outlined {
  color:var(--brand-blue);
  font-size:1rem;
}
.inv-live-source span,
.inv-live-updated {
  color:var(--text-muted);
  font-size:.78rem;
  font-weight:700;
}
.inv-live-source strong {
  color:var(--success);
  font-size:.82rem;
}
.inv-register-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:var(--surface-1);
  color:var(--text-secondary);
  border-radius:999px;
  padding:.25rem .65rem;
  font-size:.72rem;
  font-weight:800;
}

.inv-mini-table { width:100%; min-width:0; table-layout:fixed; border-collapse:collapse; }
.inv-mini-table th, .inv-mini-table td {
  padding:.5rem .625rem; font-size:.8125rem; border-bottom:1px solid var(--border); text-align:left;
  white-space:normal !important; overflow-wrap:anywhere;
}
.inv-mini-table th { font-size:.6875rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.inv-view-all { font-size:.8125rem; color:var(--brand-blue); cursor:pointer; font-weight:600; display:inline-block; margin-top:.75rem; }

/* Register */
.inv-register-row {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(16rem, 300px);
  gap:1rem;
  min-width:0;
  max-width:100%;
}
.inv-register-main, .inv-register-side {
  display:flex; flex-direction:column; gap:1rem;
  min-width:0;
  max-width:100%;
}
.inv-register-header { display:flex; align-items:center; justify-content:space-between; }
.inv-register-header h3 { font-size:.9375rem; font-weight:700; margin:0; }
.inv-view-toggle { display:flex; gap:.25rem; }
.inv-view-toggle button {
  padding:.375rem; border:1px solid var(--border); background:var(--surface-0); cursor:pointer;
  border-radius:var(--r-md); color:var(--text-muted);
}
.inv-view-toggle button.active { background:var(--brand-blue); color:#fff; border-color:var(--brand-blue); }
.inv-view-toggle button .material-symbols-outlined { font-size:1rem; }

/* Filters */
.inv-filter-row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:.75rem; }
.inv-search-field {
  display:flex; align-items:center; gap:.375rem; padding:.375rem .75rem;
  border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface-0);
  flex:1; min-width:12rem; max-width:20rem;
}
.inv-search-field .material-symbols-outlined { font-size:1rem; color:var(--text-muted); }
.inv-search-field input {
  border:none; background:transparent; outline:none; width:100%;
  font-size:.8125rem; color:var(--text-primary);
}
.inv-select {
  padding:.375rem .75rem; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface-0); font-size:.8125rem; color:var(--text-primary);
  cursor:pointer; min-width:8rem;
}
.inv-check-label {
  display:flex; align-items:center; gap:.375rem; font-size:.8125rem;
  color:var(--text-secondary); cursor:pointer; white-space:nowrap;
}
.inv-filter-btn {
  display:flex; align-items:center; gap:.25rem; padding:.375rem .75rem;
  border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface-0);
  cursor:pointer; font-size:.8125rem; color:var(--text-muted);
}

/* Tables */
.inv-table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-xl); }
.inv-table { width:100%; border-collapse:collapse; }
.inv-table th, .inv-table td {
  padding:.625rem .75rem; font-size:.8125rem; text-align:left;
  border-bottom:1px solid var(--border);
}
.inv-table th {
  background:var(--surface-1); font-size:.6875rem; font-weight:700;
  color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em;
  position:sticky; top:0; z-index:2;
}
.inv-table tr:last-child td { border-bottom:none; }
.inv-table tr:hover td { background:rgba(59,130,246,.03); }
.inv-table.compact th, .inv-table.compact td { padding:.5rem .625rem; font-size:.75rem; }

.inv-link { color:var(--brand-blue); cursor:pointer; font-weight:600; text-decoration:none; }
.inv-link:hover { text-decoration:underline; }
.inv-empty { text-align:center; padding:2rem !important; color:var(--text-muted); font-style:italic; }
.inv-empty-sm { text-align:center; padding:1rem; color:var(--text-muted); font-size:.8125rem; }

.inv-status-badge {
  display:inline-flex; align-items:center; padding:.125rem .5rem;
  border-radius:var(--r-full); font-size:.6875rem; font-weight:700;
  text-transform:capitalize;
}
.inv-status-badge.success { background:rgba(16,185,129,.12); color:#10b981; }
.inv-status-badge.warning { background:rgba(245,158,11,.12); color:#f59e0b; }
.inv-status-badge.info    { background:rgba(59,130,246,.12); color:#3b82f6; }
.inv-status-badge.primary { background:rgba(99,102,241,.12); color:#6366f1; }
.inv-status-badge.pending { background:rgba(148,163,184,.12); color:#94a3b8; }

.inv-type-badge {
  display:inline-flex; padding:.125rem .5rem; border-radius:var(--r-full);
  font-size:.6875rem; font-weight:700;
}
.inv-type-badge.receipt       { background:rgba(16,185,129,.12); color:#10b981; }
.inv-type-badge.issue         { background:rgba(239,68,68,.12); color:#ef4444; }
.inv-type-badge.adjustment    { background:rgba(245,158,11,.12); color:#f59e0b; }
.inv-type-badge.internal      { background:rgba(59,130,246,.12); color:#3b82f6; }
.inv-type-badge.inter-company { background:rgba(139,92,246,.12); color:#8b5cf6; }

.inv-actions-cell { display:flex; gap:.25rem; }
.inv-action-btn {
  width:1.75rem; height:1.75rem; border:1px solid var(--border);
  border-radius:var(--r-md); background:var(--surface-0); cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--text-muted);
}
.inv-action-btn:hover { background:var(--surface-1); color:var(--text-primary); }
.inv-action-btn.danger:hover { background:rgba(239,68,68,.1); color:#ef4444; border-color:#ef4444; }
.inv-action-btn .material-symbols-outlined { font-size:.875rem; }

/* Pagination */
.inv-pagination {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 0; font-size:.8125rem; color:var(--text-muted);
}
.inv-page-buttons { display:flex; align-items:center; gap:.25rem; }
.inv-page-buttons button {
  min-width:2rem; height:2rem; border:1px solid var(--border);
  border-radius:var(--r-md); background:var(--surface-0); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.8125rem; font-weight:600; color:var(--text-secondary);
}
.inv-page-buttons button:disabled { opacity:.4; cursor:not-allowed; }
.inv-page-buttons button.active { background:var(--brand-blue); color:#fff; border-color:var(--brand-blue); }
.inv-page-buttons button .material-symbols-outlined { font-size:1rem; }
.inv-page-dots { color:var(--text-muted); padding:0 .25rem; }
.inv-page-size {
  padding:.25rem .5rem; border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface-0); font-size:.75rem; margin-left:.5rem;
}

/* Accuracy */
.inv-accuracy-card, .inv-recent-card {
  padding:1.125rem; background:var(--surface-0); border:1px solid var(--border);
  border-radius:var(--r-2xl); box-shadow:var(--shadow-sm);
}
.inv-accuracy-card h3, .inv-recent-card h3 { font-size:.875rem; font-weight:700; margin:0 0 .75rem; }
.inv-accuracy-ring { display:flex; justify-content:center; margin:.75rem 0; }
.inv-accuracy-meta { text-align:center; font-size:.75rem; color:var(--text-muted); }
.inv-accuracy-meta strong { display:block; font-size:1.125rem; font-weight:800; color:var(--text-primary); margin:.25rem 0; }
.inv-accuracy-status { font-weight:600; }

.inv-recent-header { display:flex; justify-content:space-between; align-items:center; }
.inv-recent-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:.5rem 0; border-bottom:1px solid var(--border);
}
.inv-recent-item:last-child { border-bottom:none; }
.inv-recent-date { font-size:.6875rem; color:var(--text-muted); margin-left:.5rem; }

/* Last updated */
.inv-last-updated {
  display:flex; align-items:center; gap:.5rem; justify-content:flex-end;
  font-size:.75rem; color:var(--text-muted); margin-bottom:.25rem;
}
.inv-refresh-btn {
  width:1.5rem; height:1.5rem; border:none; background:transparent;
  cursor:pointer; border-radius:var(--r-md); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
}
.inv-refresh-btn .material-symbols-outlined { font-size:1rem; }
.inv-disclaimer { font-size:.75rem; color:var(--text-muted); margin:0 0 1rem; }

/* Sections */
.inv-section { }
.inv-section-header {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-bottom:1rem;
}
.inv-section-header h2 {
  display:flex; align-items:center; gap:.5rem;
  font-size:1.125rem; font-weight:700; margin:0;
}
.inv-section-header h2 .material-symbols-outlined { font-size:1.25rem; color:var(--brand-blue); }
.inv-section-actions { display:flex; gap:.5rem; }
.inv-section-stats { display:flex; gap:.5rem; }
.inv-stat-chip {
  padding:.25rem .625rem; border-radius:var(--r-full); font-size:.75rem; font-weight:700;
}
.inv-stat-chip.pending { background:rgba(245,158,11,.12); color:#f59e0b; }
.inv-stat-chip.verified { background:rgba(16,185,129,.12); color:#10b981; }

/* Reorder */
.inv-stepper {
  display:flex; align-items:center; gap:.5rem; margin-bottom:1.25rem;
  padding:1rem 1.25rem; background:var(--surface-0); border:1px solid var(--border);
  border-radius:var(--r-2xl); overflow-x:auto;
}
.inv-step {
  display:flex; align-items:center; gap:.625rem; white-space:nowrap;
}
.inv-step-num {
  width:2rem; height:2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.875rem; font-weight:700; flex-shrink:0;
  background:var(--surface-2); color:var(--text-muted);
}
.inv-step.active .inv-step-num { background:var(--brand-blue); color:#fff; }
.inv-step strong { font-size:.8125rem; display:block; }
.inv-step small { font-size:.6875rem; color:var(--text-muted); display:block; }
.inv-step-line { flex:1; min-width:1.5rem; height:2px; background:var(--border); }

.inv-reorder-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.25rem; }

.inv-panel {
  padding:1.25rem; background:var(--surface-0); border:1px solid var(--border);
  border-radius:var(--r-2xl); box-shadow:var(--shadow-sm);
}
.inv-panel h3 {
  display:flex; align-items:center; gap:.5rem;
  font-size:.9375rem; font-weight:700; margin:0 0 .75rem;
}
.inv-panel h3 .material-symbols-outlined { font-size:1.125rem; color:var(--brand-blue); }
.inv-panel-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem;
}
.inv-panel-header h3 { margin:0; }
.inv-clear-btn {
  border:none; background:transparent; color:var(--error); font-size:.8125rem;
  font-weight:600; cursor:pointer;
}

.inv-qty-input {
  width:5rem; padding:.25rem .5rem; border:1px solid var(--border);
  border-radius:var(--r-md); font-size:.8125rem; text-align:center;
}

.inv-note-section { margin:.75rem 0; }
.inv-note-section label { font-size:.8125rem; font-weight:600; display:block; margin-bottom:.375rem; }
.inv-note-section textarea {
  width:100%; padding:.5rem .75rem; border:1px solid var(--border);
  border-radius:var(--r-lg); font-size:.8125rem; resize:vertical;
  font-family:inherit; background:var(--surface-0);
}

.inv-summary-card {
  padding:1rem; background:var(--surface-1); border-radius:var(--r-xl); margin:.75rem 0;
}
.inv-summary-card h4 { font-size:.8125rem; font-weight:700; margin:0 0 .5rem; }
.inv-summary-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:.75rem; text-align:center;
}
.inv-summary-grid span { font-size:.6875rem; color:var(--text-muted); display:block; }
.inv-summary-grid strong { font-size:1rem; font-weight:800; }

.inv-submit-row { display:flex; gap:.75rem; justify-content:flex-end; margin-top:.75rem; }

.inv-bottom-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }

/* Approval flow */
.inv-approval-flow { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; justify-content:center; padding:.75rem 0; }
.inv-approval-step {
  display:flex; flex-direction:column; align-items:center; gap:.375rem;
  text-align:center; max-width:10rem;
}
.inv-approval-step strong { font-size:.8125rem; }
.inv-approval-step small { font-size:.6875rem; color:var(--text-muted); }
.inv-flow-arrow { color:var(--text-muted); font-size:1.25rem; }

/* Transfer type toggle */
.inv-transfer-type-toggle {
  display:flex; gap:.5rem; margin-top:.375rem;
}
.inv-toggle-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.625rem 1rem; border:2px solid var(--border); border-radius:var(--r-xl);
  background:var(--surface-0); cursor:pointer; font-size:.8125rem; font-weight:600;
  color:var(--text-secondary); transition:all .15s;
}
.inv-toggle-btn .material-symbols-outlined { font-size:1.125rem; }
.inv-toggle-btn:hover { border-color:var(--brand-blue); background:rgba(59,130,246,.04); }
.inv-toggle-btn.active {
  border-color:var(--brand-blue); background:rgba(59,130,246,.08);
  color:var(--brand-blue); box-shadow:0 0 0 1px rgba(59,130,246,.15);
}
.inv-interco-note {
  display:flex; align-items:flex-start; gap:.5rem; padding:.75rem 1rem;
  background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.2);
  border-radius:var(--r-xl); font-size:.8125rem; color:#7c3aed;
  margin-bottom:.75rem; line-height:1.5;
}
.inv-interco-note .material-symbols-outlined { font-size:1.125rem; flex-shrink:0; margin-top:.125rem; }

/* ── Responsive: Inventory Module ── */

/* Tablet landscape / small desktop */
@media (max-width:1024px) {
  .inv-register-row { grid-template-columns:1fr; }
  .inv-charts-row { grid-template-columns:1fr; }
  .inv-reorder-grid { grid-template-columns:1fr; }
  .inv-bottom-row { grid-template-columns:1fr; }
  .inv-summary-grid { grid-template-columns:repeat(3, 1fr); }
  .inv-transfer-type-toggle { flex-wrap:wrap; }
}

/* Tablet portrait */
@media (max-width:768px) {
  .inv-module { padding:0 .5rem; }
  .inv-topbar { flex-direction:column; gap:.75rem; }
  .inv-topbar-right { width:100%; justify-content:flex-start; }
  .inv-live-strip { align-items:flex-start; flex-direction:column; }
  .inv-live-actions { width:100%; justify-content:space-between; }
  .inv-page-title { font-size:1.25rem; }
  .inv-tabs-bar { gap:0; margin-left:-.5rem; margin-right:-.5rem; padding:0 .5rem .25rem; }
  .inv-tab { padding:.5rem .625rem; font-size:.75rem; }
  .inv-tab .material-symbols-outlined { font-size:.875rem; }
  .inv-kpi-row { grid-template-columns:1fr 1fr; gap:.5rem; }
  .inv-kpi-card { padding:.875rem 1rem; gap:.625rem; }
  .inv-kpi-value { font-size:1.1rem; }
  .inv-filter-row { flex-direction:column; align-items:stretch; }
  .inv-search-field { max-width:100%; }
  .inv-select { width:100%; }
  .inv-section-header { flex-direction:column; align-items:flex-start; gap:.5rem; }
  .inv-section-actions { width:100%; flex-wrap:wrap; }
  .inv-section-actions .btn { flex:1; min-width:0; justify-content:center; font-size:.75rem; }
  .inv-submit-row { flex-direction:column; }
  .inv-submit-row .btn { width:100%; justify-content:center; }
  .inv-panel { padding:1rem; }
  .inv-approval-flow { gap:.5rem; }
  .inv-approval-step { max-width:8rem; }
  .inv-approval-step small { font-size:.625rem; }
  .inv-flow-arrow { font-size:1rem; }
  .inv-stepper { flex-direction:column; align-items:flex-start; padding:.75rem 1rem; }
  .inv-step-line { width:2px; min-height:1rem; min-width:0; margin-left:1rem; }
  .inv-pagination { flex-direction:column; align-items:stretch; gap:.5rem; text-align:center; }
  .inv-page-buttons { justify-content:center; }
  .inv-table-wrap { margin-left:-.5rem; margin-right:-.5rem; border-radius:0; border-left:none; border-right:none; }
  .inv-donut-wrap { flex-direction:column; align-items:center; }
}

/* Mobile */
@media (max-width:480px) {
  .inv-module { padding:0 .25rem; }
  .inv-live-strip { padding:.75rem; border-radius:.8rem; }
  .inv-live-source,
  .inv-live-actions { width:100%; align-items:flex-start; flex-direction:column; gap:.35rem; }
  .inv-live-actions .btn { width:100%; justify-content:center; }
  .inv-page-title { font-size:1.1rem; }
  .inv-page-sub { font-size:.75rem; }
  .inv-topbar-right { flex-wrap:wrap; gap:.375rem; }
  .inv-topbar-right .btn { font-size:.7rem; padding:.3rem .5rem; }
  .inv-branch-pill { font-size:.7rem; padding:.25rem .5rem; }
  .inv-tabs-bar { gap:0; }
  .inv-tab { padding:.375rem .5rem; font-size:.7rem; gap:.25rem; }
  .inv-tab .material-symbols-outlined { display:none; }
  .inv-tab-badge { height:1.125rem; min-width:1.125rem; font-size:.6rem; }
  .inv-kpi-row { grid-template-columns:1fr; gap:.375rem; }
  .inv-kpi-card { padding:.75rem; }
  .inv-kpi-icon { width:2.25rem; height:2.25rem; }
  .inv-kpi-value { font-size:1rem; }
  .inv-kpi-label { font-size:.55rem; }
  .inv-chart-card { padding:1rem; }
  .inv-chart-card h3 { font-size:.8125rem; }
  .inv-register-header { flex-direction:column; align-items:flex-start; gap:.375rem; }
  .inv-filter-row .inv-check-label { font-size:.75rem; }
  .inv-table th, .inv-table td { padding:.375rem .5rem; font-size:.7rem; }
  .inv-table.compact th, .inv-table.compact td { padding:.3rem .375rem; font-size:.65rem; }
  .inv-action-btn { width:1.5rem; height:1.5rem; }
  .inv-action-btn .material-symbols-outlined { font-size:.75rem; }
  .inv-page-buttons button { min-width:1.75rem; height:1.75rem; font-size:.75rem; }
  .inv-section-header h2 { font-size:1rem; }
  .inv-section-actions { flex-direction:column; }
  .inv-section-actions .btn { width:100%; text-align:center; justify-content:center; }
  .inv-panel { padding:.75rem; }
  .inv-panel h3 { font-size:.8125rem; }
  .inv-approval-flow { flex-direction:column; gap:.375rem; }
  .inv-flow-arrow { transform:rotate(90deg); font-size:1rem; }
  .inv-approval-step { max-width:100%; flex-direction:row; gap:.625rem; text-align:left; }
  .inv-approval-step span:first-child { font-size:1.5rem !important; }
  .inv-summary-grid { grid-template-columns:repeat(3, 1fr); gap:.5rem; }
  .inv-summary-grid strong { font-size:.875rem; }
  .inv-summary-grid span { font-size:.6rem; }
  .inv-note-section textarea { font-size:.75rem; }
  .inv-qty-input { width:4rem; font-size:.75rem; padding:.25rem .375rem; }
  .inv-interco-note { font-size:.75rem; padding:.5rem .75rem; }
  .inv-transfer-type-toggle { flex-direction:column; }
  .inv-toggle-btn { padding:.5rem .75rem; font-size:.75rem; }
  .inv-accuracy-card, .inv-recent-card { padding:.875rem; }
  .inv-dropdown-menu { min-width:11rem; right:auto; left:0; }
}

/* Very small screens */
@media (max-width:360px) {
  .inv-page-title { font-size:1rem; gap:.375rem; }
  .inv-kpi-card { gap:.5rem; padding:.625rem; }
  .inv-kpi-icon { width:2rem; height:2rem; }
  .inv-kpi-icon .material-symbols-outlined { font-size:1.125rem; }
  .inv-kpi-value { font-size:.9rem; }
  .inv-table th, .inv-table td { padding:.3rem .375rem; font-size:.65rem; }
  .inv-summary-grid { grid-template-columns:1fr 1fr 1fr; gap:.25rem; }
  .inv-tab { padding:.3rem .375rem; font-size:.65rem; }
}

/* Inventory overview reference layout */
.inv-manager-bar{
  margin:-.35rem 0 1.25rem;
  padding-bottom:.85rem;
  border-bottom:1px solid var(--border);
}
.inv-manager-bar .inv-page-title{
  font-size:1.25rem;
  color:var(--text-primary);
}
.inv-manager-bar .inv-branch-pill{
  min-width:18rem;
  justify-content:space-between;
  border-radius:6px;
  padding:.6rem .8rem;
  color:var(--text-primary);
  background:var(--surface-0);
}
.inv-manager-bar .inv-branch-pill select{
  border:0;
  outline:0;
  background:transparent;
  color:var(--text-primary);
  font-weight:800;
  flex:1;
  min-width:0;
}
.inv-overview-ref{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.inv-overview-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.inv-overview-head h2{
  display:flex;
  align-items:center;
  gap:.35rem;
  margin:0;
  font-size:1.3rem;
  line-height:1.2;
  font-weight:900;
  font-family:var(--font-display);
  color:var(--text-primary);
}
.inv-overview-head h2 .material-symbols-outlined{
  font-size:1rem;
  color:var(--brand-blue);
}
.inv-overview-head p{
  margin:.45rem 0 0;
  color:var(--text-secondary);
  font-size:.82rem;
}
.inv-overview-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.5rem;
  flex-wrap:wrap;
}
.inv-overview-actions .btn{
  min-height:2.15rem;
  border-radius:6px;
  gap:.4rem;
  font-weight:800;
}
.inv-overview-actions .btn .material-symbols-outlined{
  font-size:1rem;
}
.inv-overview-actions .btn-primary{
  background:#001f49;
  border-color:#001f49;
}
.inv-last-updated{
  margin:0;
  font-size:.75rem;
  color:var(--text-secondary);
  white-space:nowrap;
}
.inv-refresh-btn{
  width:1.75rem;
  height:1.75rem;
}
.inv-overview-kpis{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1rem;
  margin:0;
}
.inv-overview-ref .inv-kpi-card,
.inv-overview-ref .inv-chart-card,
.inv-overview-ref .inv-register-card,
.inv-overview-ref .inv-accuracy-card,
.inv-overview-ref .inv-recent-card{
  border-radius:8px;
  box-shadow:0 8px 24px rgba(15,23,42,.04);
}
.inv-overview-ref .inv-kpi-card{
  min-height:6.6rem;
  padding:1.1rem 1.25rem;
  align-items:center;
}
.inv-overview-ref .inv-kpi-icon{
  width:3.1rem;
  height:3.1rem;
  border-radius:999px;
}
.inv-overview-ref .inv-kpi-icon .material-symbols-outlined{
  font-size:1.65rem;
  font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 24;
}
.inv-kpi-blue{background:#eaf2ff;color:#2563eb;}
.inv-kpi-green{background:#e8f8ef;color:#18a967;}
.inv-kpi-purple{background:#efe8ff;color:#7c3aed;}
.inv-kpi-red{background:#fff0f0;color:#ef4444;}
.inv-kpi-amber{background:#fff7e5;color:#f59e0b;}
.inv-overview-ref .inv-kpi-label{
  color:#0b1b3f;
  letter-spacing:.03em;
}
.inv-overview-ref .inv-kpi-value{
  font-size:1.22rem;
  color:#071638;
}
.inv-overview-ref .inv-kpi-sub{
  color:#34415f;
}
.inv-overview-charts{
  display:grid;
  grid-template-columns:minmax(18rem,.88fr) minmax(22rem,1.04fr) minmax(24rem,1.1fr);
  gap:1rem;
  margin:0;
}
.inv-overview-ref .inv-chart-card{
  padding:1.05rem 1.15rem;
  min-height:16.7rem;
}
.inv-overview-ref .inv-chart-card h3{
  color:#071638;
  font-size:.96rem;
  margin-bottom:.8rem;
}
.inv-card-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.35rem;
}
.inv-card-title-row h3{
  margin:0 !important;
}
.inv-card-title-row .inv-select{
  min-width:7.3rem;
  padding:.45rem .65rem;
}
.inv-overview-ref .inv-donut-wrap{
  flex-wrap:nowrap;
  align-items:center;
  gap:.9rem;
}
.inv-overview-ref .inv-donut-chart svg{
  width:12.1rem;
  height:12.1rem;
}
.inv-overview-ref .inv-legend-item{
  align-items:flex-start;
  gap:.45rem;
  font-size:.78rem;
  line-height:1.25;
  flex-wrap:wrap;
}
.inv-overview-ref .inv-legend-item strong{
  flex-basis:100%;
  margin-left:1.05rem;
  color:#0b1b3f;
  white-space:normal;
}
.inv-overview-ref .inv-view-all{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  margin-top:.75rem;
  color:#005bea;
  font-weight:800;
  font-size:.78rem;
}
.inv-overview-ref .inv-view-all .material-symbols-outlined{
  font-size:.95rem;
}
.inv-trend-svg{
  display:block;
  width:100%;
  min-height:12.2rem;
}
.inv-trend-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:12.2rem;
  color:var(--text-muted);
  font-size:.82rem;
  border:1px dashed var(--border);
  border-radius:8px;
}
.inv-chart-note{
  margin:.15rem 0 0;
  color:var(--text-secondary);
  font-size:.76rem;
}
.inv-overview-ref .inv-mini-table{
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
  display:table;
}
.inv-overview-ref .inv-mini-table th,
.inv-overview-ref .inv-mini-table td{
  padding:.68rem .72rem;
  font-size:.75rem;
}
.inv-overview-ref .inv-mini-table th{
  color:#071638;
  background:#f8fafc;
  letter-spacing:0;
  text-transform:none;
}
.inv-overview-ref .inv-register-row{
  grid-template-columns:minmax(0,1fr) minmax(17.5rem,20rem);
  gap:1rem;
}
.inv-register-card{
  background:var(--surface-0);
  border:1px solid var(--border);
  padding:1.05rem 1.15rem .6rem;
}
.inv-overview-ref .inv-register-header h3{
  font-size:.98rem;
  color:#071638;
}
.inv-overview-ref .inv-filter-row{
  gap:.72rem;
  margin:.8rem 0 .8rem;
}
.inv-overview-ref .inv-search-field,
.inv-overview-ref .inv-select,
.inv-overview-ref .inv-filter-btn{
  border-radius:6px;
  min-height:2.2rem;
}
.inv-overview-ref .inv-search-field{
  max-width:19rem;
}
.inv-overview-ref .inv-table-wrap{
  border-radius:6px;
}
.inv-overview-ref .inv-table th{
  background:#f8fafc;
  color:#071638;
  text-transform:none;
  letter-spacing:0;
}
.inv-overview-ref .inv-table th,
.inv-overview-ref .inv-table td{
  padding:.62rem .68rem;
  font-size:.74rem;
}
.inv-overview-ref .inv-actions-cell{
  justify-content:flex-start;
}
.inv-overview-ref .inv-action-btn{
  border:none;
  color:#005bea;
  background:transparent;
}
.inv-overview-ref .inv-pagination{
  padding:.75rem 0 0;
}
.inv-overview-ref .inv-page-buttons button,
.inv-overview-ref .inv-page-size{
  border-radius:6px;
}
.inv-accuracy-layout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.inv-overview-ref .inv-accuracy-card,
.inv-overview-ref .inv-recent-card{
  padding:1.05rem 1rem;
}
.inv-overview-ref .inv-accuracy-card h3,
.inv-overview-ref .inv-recent-card h3{
  color:#071638;
  font-size:.95rem;
}
.inv-overview-ref .inv-accuracy-ring{
  margin:.4rem 0;
}
.inv-overview-ref .inv-accuracy-meta{
  text-align:left;
}
.inv-overview-ref .inv-recent-header .inv-view-all{
  margin-top:0;
}
.inv-overview-ref .inv-recent-item{
  display:grid;
  grid-template-columns:minmax(6rem,1fr) auto auto;
  gap:.75rem;
  padding:.72rem 0;
}
.inv-overview-ref .inv-recent-date{
  margin-left:0;
  color:#34415f;
}

@media (max-width:1320px){
  .inv-overview-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
  .inv-overview-charts{grid-template-columns:1fr 1fr;}
  .inv-top-card{grid-column:1 / -1;}
}
@media (max-width:1024px){
  .inv-overview-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .inv-overview-charts{grid-template-columns:1fr;}
  .inv-overview-ref .inv-register-row{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .inv-manager-bar .inv-branch-pill{min-width:0;width:100%;}
  .inv-overview-actions{justify-content:flex-start;}
  .inv-overview-kpis{grid-template-columns:1fr;}
  .inv-overview-ref .inv-donut-wrap{flex-direction:column;}
  .inv-accuracy-layout{justify-content:flex-start;flex-wrap:wrap;}
}

/* ================================================================
   Global Responsive Full-Width Module Layer
   Keep every authenticated module edge-to-edge inside the workspace
   on desktop, then collapse safely for tablets and phones.
   ================================================================ */
html[data-auth-ready="app"] #app-content,
#app-content{
  box-sizing:border-box;
  width:calc(100vw - var(--sidebar-w));
  max-width:none !important;
}

html[data-auth-ready="app"] #app-content > .page-container,
#app-content > .page-container{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  min-width:0;
}

#app-content > .page-container > *,
.dashboard-shell,
.dash-shell,
.production-shell,
.sales-order-page,
.bimas-bom-page,
.reorder-dashboard,
.inv-module{
  width:100%;
  max-width:none !important;
  min-width:0;
}

.page-header,
.card,
.dash-card,
.dashboard-card,
.module-card,
.kpi-card,
.stats-card,
.glass-card,
.chart-container,
.table-container,
.inv-panel,
.inv-chart-card,
.inv-accuracy-card,
.inv-recent-card,
.so-section,
.so-side-card,
.bimas-panel,
.bimas-detail-card,
.reorder-card{
  max-width:none !important;
  min-width:0;
}

.table-container,
.responsive-table,
.so-table-wrap,
.bimas-table-wrap,
.reorder-table-wrap,
.inv-table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.table-container table,
.responsive-table table,
.so-table,
.bimas-table,
.reorder-table,
.inv-table{
  width:100%;
}

.form-grid,
.dashboard-grid,
.grid-container,
.quick-action-grid,
.production-stat-grid,
.bimas-bom-kpis,
.reorder-kpi-grid,
.inv-kpi-row{
  min-width:0;
}

@media (min-width:1201px){
  #app-content{
    padding-left:clamp(1rem,1.3vw,1.75rem) !important;
    padding-right:clamp(1rem,1.3vw,1.75rem) !important;
  }

  #app-content > .page-container > [style*="max-width"],
  #app-content > .page-container > .animate-in[style*="max-width"],
  #app-content > .page-container > .card[style*="max-width"],
  #app-content > .page-container > .module-card[style*="max-width"]{
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .dashboard-grid,
  .grid-container,
  .quick-action-grid{
    grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  }

  .grid-4,
  .form-grid-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* ================================================================
   Live cPanel Sync + Mobile Fit Patch
   ================================================================ */
#app-topbar{
  max-width:100vw !important;
  overflow:hidden !important;
}
#app-topbar > div:first-child,
#app-topbar > div:last-child{
  min-width:0 !important;
}
#app-topbar > div:last-child{
  flex:0 1 auto !important;
  flex-wrap:nowrap !important;
}

@media (max-width:760px){
  :root{--topbar-h:3.85rem;}
  #app-topbar{
    gap:.45rem !important;
    padding:.45rem .65rem !important;
  }
  #app-topbar .topbar-portal-btn,
  #app-topbar #theme-btn,
  #app-topbar #cs-wrap{
    display:none !important;
  }
  #app-topbar .topbar-search-trigger{
    flex:0 0 2.35rem !important;
    width:2.35rem !important;
    min-width:2.35rem !important;
  }
  #app-topbar #company-name{
    max-width:5rem !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  #app-content{
    width:100vw !important;
    max-width:100vw !important;
    padding-left:.65rem !important;
    padding-right:.65rem !important;
  }
  .section-header,
  .page-header,
  .page-header .flex-between,
  .inv-topbar,
  .inv-register-header{
    flex-wrap:wrap !important;
    gap:.65rem !important;
  }
  .section-header > *,
  .page-header > *,
  .page-header .flex-between > *{
    min-width:0 !important;
  }
  .modal-content{
    width:min(calc(100vw - 1rem), 38rem) !important;
    max-height:calc(100dvh - 1rem) !important;
    overflow:auto !important;
    border-radius:.9rem !important;
  }
  #notification-center{
    left:.5rem !important;
    right:.5rem !important;
    width:auto !important;
  }
  #app-bottomnav{
    height:calc(4.2rem + env(safe-area-inset-bottom)) !important;
    padding-bottom:env(safe-area-inset-bottom) !important;
  }
  #app-bottomnav .bottomnav-item{
    flex:1 1 0 !important;
    min-width:0 !important;
    padding:.35rem .2rem !important;
  }
  #app-bottomnav .bottomnav-item span:last-child{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}

@media (max-width:520px){
  #app-topbar{
    padding:.4rem .5rem !important;
  }
  #app-topbar .topbar-alert-btn[title="Communication Hub"],
  #app-topbar .topbar-alert-btn[title="Messages and SMS"]{
    display:none !important;
  }
  #app-topbar .icon-btn,
  #app-topbar .topbar-user-avatar,
  #app-topbar .topbar-search-trigger{
    width:2.2rem !important;
    height:2.2rem !important;
    min-width:2.2rem !important;
  }
  .card,
  .module-card,
  .dashboard-card,
  .table-container,
  .inv-panel,
  .so-section,
  .bimas-panel{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .btn,
  button.btn,
  .table-btn{
    white-space:normal !important;
  }
}

@media (max-width:1200px){
  #app-content{
    padding-left:1rem !important;
    padding-right:1rem !important;
  }

  .grid-4,
  .form-grid-4,
  .dashboard-grid,
  .grid-container{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .grid-3,
  .form-grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:1024px){
  html[data-auth-ready="app"] #app-content,
  #app-content{
    width:100vw;
    margin-left:0 !important;
    padding-top:calc(var(--topbar-h) + 1rem) !important;
    padding-bottom:5.25rem !important;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .form-grid-2,
  .form-grid-3,
  .form-grid-4,
  .dashboard-grid,
  .grid-container,
  .dashboard-focus-grid,
  .dash-main-grid,
  .production-overview-columns,
  .production-detail-main,
  .so-layout,
  .bimas-bom-layout,
  .reorder-main-grid,
  .reorder-bottom-grid,
  .inv-register-row,
  .inv-charts-row,
  .inv-reorder-grid,
  .inv-bottom-row{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:760px){
  #app-content{
    padding-left:.75rem !important;
    padding-right:.75rem !important;
  }

  .page-container{
    gap:.8rem;
  }

  .page-header,
  .card,
  .dash-card,
  .dashboard-card,
  .module-card,
  .kpi-card,
  .stats-card,
  .chart-container,
  .glass-card,
  .inv-panel,
  .so-section,
  .so-side-card,
  .bimas-panel,
  .bimas-detail-card,
  .reorder-card{
    border-radius:.75rem !important;
  }

  .btn,
  button.btn{
    min-height:2.35rem;
  }

  input,
  select,
  textarea,
  .form-control{
    max-width:100%;
  }
}

@media (max-width:520px){
  #app-content{
    padding-left:.55rem !important;
    padding-right:.55rem !important;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .form-grid,
  .form-grid-2,
  .form-grid-3,
  .form-grid-4,
  .dashboard-grid,
  .grid-container,
  .quick-action-grid,
  .production-stat-grid,
  .bimas-bom-kpis,
  .reorder-kpi-grid,
  .inv-kpi-row{
    grid-template-columns:1fr !important;
  }

  .page-header,
  .card,
  .dash-card,
  .dashboard-card,
  .module-card,
  .kpi-card,
  .stats-card,
  .chart-container,
  .glass-card,
  .inv-panel,
  .so-section,
  .so-side-card,
  .bimas-panel,
  .bimas-detail-card,
  .reorder-card{
    padding:.85rem !important;
  }

  .table-container table,
  .responsive-table table,
  .so-table,
  .bimas-table,
  .reorder-table,
  .inv-table{
    min-width:42rem;
  }
}

/* ================================================================
   Final Mobile Login + App Shell Patch
   ================================================================ */
@media (max-width:680px){
  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  #login-screen{
    align-items:flex-start !important;
    justify-content:center !important;
    min-height:100dvh !important;
    padding:.65rem !important;
    overflow-y:auto !important;
  }

  #login-screen .login-shell{
    align-items:flex-start !important;
    justify-content:center !important;
    width:100% !important;
    min-height:auto !important;
    padding:0 !important;
  }

  #login-screen .login-frame{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:34rem !important;
    min-height:auto !important;
    height:auto !important;
    border-radius:1rem !important;
    overflow:visible !important;
  }

  #login-screen .login-visual{
    display:none !important;
  }

  #login-screen .login-card{
    width:100% !important;
    max-width:none !important;
    min-height:auto !important;
    border-radius:1rem !important;
    padding:1.15rem .95rem 1rem !important;
  }

  #login-screen .login-card-icon{
    width:2.8rem !important;
    height:2.8rem !important;
    margin-bottom:.65rem !important;
  }

  #login-screen .login-title{
    font-size:1.35rem !important;
    line-height:1.15 !important;
  }

  #login-screen .login-sub{
    font-size:.82rem !important;
    margin-bottom:.75rem !important;
  }

  #login-screen .login-mark-small{
    margin:.5rem auto .7rem !important;
  }

  #login-screen .login-field{
    margin-bottom:.8rem !important;
  }

  #login-screen .login-company-row{
    grid-template-columns:1fr 1fr !important;
    gap:.5rem !important;
    margin:.75rem 0 !important;
  }

  #login-screen .login-company-btn{
    min-height:3.25rem !important;
    padding:.55rem !important;
    font-size:.78rem !important;
  }

  #login-screen .login-company-btn .material-symbols-outlined{
    font-size:1.35rem !important;
  }

  #login-screen .login-input{
    min-height:3rem !important;
    font-size:16px !important;
    padding:.72rem 2.75rem .72rem 2.85rem !important;
  }

  #login-screen .login-btn{
    min-height:3.25rem !important;
    font-size:1rem !important;
  }

  #login-screen .login-footer{
    display:none !important;
  }
}

@media (max-width:430px){
  #login-screen .login-company-row{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:760px){
  #app-topbar{
    height:3.55rem !important;
    min-height:3.55rem !important;
    padding:.35rem .45rem !important;
    gap:.35rem !important;
  }

  #app-topbar > div:first-child{
    flex:1 1 auto !important;
    min-width:0 !important;
    gap:.35rem !important;
    overflow:hidden !important;
  }

  #app-topbar > div:last-child{
    flex:0 0 auto !important;
    min-width:0 !important;
    gap:.2rem !important;
  }

  #app-topbar .topbar-portal-btn,
  #app-topbar #theme-btn,
  #app-topbar #cs-wrap,
  #app-topbar .topbar-alert-btn[title="Communication Hub"],
  #app-topbar .topbar-alert-btn[title="Messages and SMS"]{
    display:none !important;
  }

  #app-topbar .topbar-search-trigger,
  #app-topbar .icon-btn,
  #app-topbar .topbar-user-avatar{
    width:2.15rem !important;
    height:2.15rem !important;
    min-width:2.15rem !important;
    border-radius:.6rem !important;
  }

  #app-topbar .topbar-search-trigger span:last-child,
  #app-topbar .topbar-user-copy,
  #app-topbar .topbar-user-chevron{
    display:none !important;
  }

  #app-content{
    width:100vw !important;
    max-width:100vw !important;
    padding:calc(3.55rem + .65rem) .55rem calc(4.5rem + env(safe-area-inset-bottom)) !important;
  }

  #app-bottomnav{
    height:calc(4rem + env(safe-area-inset-bottom)) !important;
    padding-bottom:env(safe-area-inset-bottom) !important;
  }

  #app-bottomnav .bottomnav-item{
    flex:1 1 0 !important;
    min-width:0 !important;
    padding:.25rem .1rem !important;
  }

  #app-bottomnav .bottomnav-item .material-symbols-outlined{
    font-size:1.2rem !important;
  }

  #app-bottomnav .bottomnav-item span:last-child{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:.58rem !important;
  }
}

/* Final anti-flicker override. Keep this at the end so later module rules do
   not re-enable page/card animations or GPU-heavy backdrop blur. */
html[data-auth-ready="app"] #app-topbar,
html[data-auth-ready="app"] #app-sidebar,
html[data-auth-ready="app"] #app-bottomnav,
html[data-auth-ready="app"] #app-content,
html[data-auth-ready="app"] #app-content *,
html[data-auth-ready="app"] #app-content *::before,
html[data-auth-ready="app"] #app-content *::after{
  animation:none !important;
  transition:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Final corporate override - actual last layer. */
html[data-auth-ready="app"] #app-content{
  overflow-x:hidden !important;
}
html[data-auth-ready="app"] #app-content > .page-container{
  width:100% !important;
  max-width:1440px !important;
  margin:0 auto !important;
  min-width:0 !important;
}
html[data-auth-ready="app"] .dash-shell,
html[data-auth-ready="app"] .dashboard-shell,
html[data-auth-ready="app"] .production-shell,
html[data-auth-ready="app"] .bimas-bom-page,
html[data-auth-ready="app"] .inv-module,
html[data-auth-ready="app"] .reorder-dashboard{
  background:transparent !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}
html[data-auth-ready="app"] #app-content .hero,
html[data-auth-ready="app"] #app-content .dash-hero,
html[data-auth-ready="app"] #app-content .production-hero{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-mid) 62%,var(--brand-orange)) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--shadow-md) !important;
}
html[data-auth-ready="app"] #app-content .hero p,
html[data-auth-ready="app"] #app-content .dash-hero .sub,
html[data-auth-ready="app"] #app-content .production-hero-copy > p,
html[data-auth-ready="app"] #app-content .page-subtitle,
html[data-auth-ready="app"] #app-content .inv-page-sub,
html[data-auth-ready="app"] #app-content .helper-text,
html[data-auth-ready="app"] #app-content .hint-text,
html[data-auth-ready="app"] #app-content .form-help,
html[data-auth-ready="app"] #app-content .empty-state > p{
  display:none !important;
}
html[data-auth-ready="app"] #app-content h1,
html[data-auth-ready="app"] #app-content .page-title,
html[data-auth-ready="app"] #app-content .inv-page-title,
html[data-auth-ready="app"] #app-content .hero h1,
html[data-auth-ready="app"] #app-content .dash-hero h1{
  font-family:var(--font-display) !important;
  font-size:clamp(1.24rem,1.04rem + .75vw,1.7rem) !important;
  line-height:1.12 !important;
  letter-spacing:-.02em !important;
}
html[data-auth-ready="app"] #app-content .card,
html[data-auth-ready="app"] #app-content .dash-card,
html[data-auth-ready="app"] #app-content .dash-card2,
html[data-auth-ready="app"] #app-content .dashboard-card,
html[data-auth-ready="app"] #app-content .module-card,
html[data-auth-ready="app"] #app-content .kpi-card,
html[data-auth-ready="app"] #app-content .stats-card,
html[data-auth-ready="app"] #app-content .inv-kpi-card,
html[data-auth-ready="app"] #app-content .inv-panel,
html[data-auth-ready="app"] #app-content .bimas-panel,
html[data-auth-ready="app"] #app-content .reorder-card{
  background:var(--surface-0) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--shadow-sm) !important;
}
html[data-auth-ready="app"] #app-content .dash-shortcut,
html[data-auth-ready="app"] #app-content .btn-primary,
html[data-auth-ready="app"] #app-content button.btn-primary{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-mid)) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:var(--shadow-blue) !important;
}
html[data-auth-ready="app"] #app-content .dash-shortcut:nth-child(2n),
html[data-auth-ready="app"] #app-content .btn-warning,
html[data-auth-ready="app"] #app-content .btn-accent{
  background:linear-gradient(135deg,var(--brand-orange),var(--brand-orange-mid)) !important;
  color:#fff !important;
}
html[data-auth-ready="app"] #app-content .btn-secondary,
html[data-auth-ready="app"] #app-content button.btn-secondary{
  background:var(--surface-0) !important;
  color:var(--brand-blue) !important;
  border:1px solid var(--border) !important;
}
html[data-auth-ready="app"] #app-content .btn,
html[data-auth-ready="app"] #app-content button[class*="btn"],
html[data-auth-ready="app"] #app-content .dash-shortcut,
html[data-auth-ready="app"] #app-content .dash-row,
html[data-auth-ready="app"] #app-content .dash-dept{
  border-radius:var(--r-md) !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}
html[data-auth-ready="app"] #app-content [style*="display:grid"],
html[data-auth-ready="app"] #app-content [style*="display: grid"],
html[data-auth-ready="app"] #app-content [style*="display:flex"],
html[data-auth-ready="app"] #app-content [style*="display: flex"]{
  min-width:0 !important;
  max-width:100% !important;
}
html[data-auth-ready="app"] #app-content img,
html[data-auth-ready="app"] #app-content svg,
html[data-auth-ready="app"] #app-content canvas,
html[data-auth-ready="app"] #app-content table,
html[data-auth-ready="app"] #app-content .data-table{
  max-width:100% !important;
}
html[data-auth-ready="app"] #app-content table,
html[data-auth-ready="app"] #app-content .data-table{
  width:100% !important;
}
@media (max-width:900px){
  html[data-auth-ready="app"] #app-content > .page-container{
    max-width:100% !important;
  }
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns:repeat"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns: repeat"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns:minmax"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns: minmax"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns:1fr 1fr"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns: 1fr 1fr"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns:2fr"],
  html[data-auth-ready="app"] #app-content [style*="grid-template-columns: 2fr"],
  html[data-auth-ready="app"] .dash-grid,
  html[data-auth-ready="app"] .dash-main-grid,
  html[data-auth-ready="app"] .dash-two,
  html[data-auth-ready="app"] .dash-dept-grid,
  html[data-auth-ready="app"] .inv-kpi-row{
    grid-template-columns:1fr !important;
  }
  html[data-auth-ready="app"] #app-content [style*="justify-content:space-between"],
  html[data-auth-ready="app"] #app-content [style*="justify-content: space-between"],
  html[data-auth-ready="app"] .dash-hero-row{
    flex-wrap:wrap !important;
  }
}
@media (max-width:560px){
  html[data-auth-ready="app"] #app-content{
    padding-left:.7rem !important;
    padding-right:.7rem !important;
  }
  html[data-auth-ready="app"] #app-content .hero,
  html[data-auth-ready="app"] #app-content .dash-hero,
  html[data-auth-ready="app"] #app-content .production-hero{
    padding:1rem !important;
    min-height:auto !important;
  }
  html[data-auth-ready="app"] #app-content .card,
  html[data-auth-ready="app"] #app-content .dash-card,
  html[data-auth-ready="app"] #app-content .dash-card2,
  html[data-auth-ready="app"] #app-content .dashboard-card,
  html[data-auth-ready="app"] #app-content .module-card{
    padding:.9rem !important;
  }
}
/* ================================================================
   ERP-Wide Executive KPI + Helper Cleanup
   Final layer: compact navy/gold professional cards across modules.
   ================================================================ */
html[data-auth-ready="app"] #app-content .page-subtitle,
html[data-auth-ready="app"] #app-content .inv-page-sub,
html[data-auth-ready="app"] #app-content .helper-text,
html[data-auth-ready="app"] #app-content .hint-text,
html[data-auth-ready="app"] #app-content .form-help,
html[data-auth-ready="app"] #app-content [data-help-text="true"],
html[data-auth-ready="app"] #app-content .empty-state > p{
  display:none !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi,
html[data-auth-ready="app"] #app-content .kpi-card,
html[data-auth-ready="app"] #app-content .stats-card,
html[data-auth-ready="app"] #app-content .dash-kpi,
html[data-auth-ready="app"] #app-content .inv-kpi-card{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:.9rem !important;
  min-height:5.8rem !important;
  padding:1rem 1.15rem !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:.78rem !important;
  box-shadow:var(--shadow-sm) !important;
  color:var(--text-primary) !important;
  transform:none !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi::after,
html[data-auth-ready="app"] #app-content .kpi-card::after,
html[data-auth-ready="app"] #app-content .stats-card::after,
html[data-auth-ready="app"] #app-content .dash-kpi::after,
html[data-auth-ready="app"] #app-content .inv-kpi-card::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  top:-1.65rem !important;
  right:-1.2rem !important;
  width:5.3rem !important;
  height:5.3rem !important;
  border-radius:0 0 0 4rem !important;
  background:var(--bimas-kpi-accent,var(--kpi-icon-color,var(--brand-orange))) !important;
  opacity:.08 !important;
  pointer-events:none !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi::before,
html[data-auth-ready="app"] #app-content .kpi-card::before,
html[data-auth-ready="app"] #app-content .stats-card::before,
html[data-auth-ready="app"] #app-content .dash-kpi::before,
html[data-auth-ready="app"] #app-content .inv-kpi-card::before{
  display:none !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi:hover,
html[data-auth-ready="app"] #app-content .kpi-card:hover,
html[data-auth-ready="app"] #app-content .stats-card:hover,
html[data-auth-ready="app"] #app-content .dash-kpi:hover,
html[data-auth-ready="app"] #app-content .inv-kpi-card:hover{
  transform:none !important;
  border-color:#d5deec !important;
  box-shadow:0 3px 10px rgba(15,23,42,.06) !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi-icon,
html[data-auth-ready="app"] #app-content .kpi-icon,
html[data-auth-ready="app"] #app-content .stats-icon,
html[data-auth-ready="app"] #app-content .dash-kpi .kicon,
html[data-auth-ready="app"] #app-content .inv-kpi-icon{
  width:2.65rem !important;
  height:2.65rem !important;
  min-width:2.65rem !important;
  border-radius:.72rem !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--bimas-kpi-accent,var(--kpi-icon-color,var(--brand-orange))) !important;
  color:#fff !important;
  box-shadow:0 5px 12px color-mix(in srgb,var(--bimas-kpi-accent,var(--kpi-icon-color,var(--brand-orange))) 24%,transparent) !important;
  opacity:1 !important;
  flex:0 0 2.65rem !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .kpi-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .stats-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .dash-kpi .kicon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .inv-kpi-icon .material-symbols-outlined{
  font-size:1.22rem !important;
  color:#fff !important;
  line-height:1 !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi-value,
html[data-auth-ready="app"] #app-content .kpi-value,
html[data-auth-ready="app"] #app-content .stats-value,
html[data-auth-ready="app"] #app-content .dash-kpi .value,
html[data-auth-ready="app"] #app-content .inv-kpi-value{
  font-family:var(--font-display) !important;
  font-size:clamp(1rem,1.7vw,1.28rem) !important;
  font-weight:900 !important;
  line-height:1.05 !important;
  letter-spacing:0 !important;
  color:var(--text-primary) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  max-width:100% !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi .kpi-label,
html[data-auth-ready="app"] #app-content .bimas-kpi .stats-label,
html[data-auth-ready="app"] #app-content .bimas-kpi .label,
html[data-auth-ready="app"] #app-content .bimas-kpi .inv-kpi-label,
html[data-auth-ready="app"] #app-content .kpi-label,
html[data-auth-ready="app"] #app-content .stats-label,
html[data-auth-ready="app"] #app-content .dash-kpi .label,
html[data-auth-ready="app"] #app-content .inv-kpi-label{
  font-size:.72rem !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:#334155 !important;
  line-height:1.25 !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi .kpi-sub,
html[data-auth-ready="app"] #app-content .bimas-kpi .inv-kpi-sub,
html[data-auth-ready="app"] #app-content .bimas-kpi small{
  font-size:.66rem !important;
  color:#6b7280 !important;
  line-height:1.25 !important;
}

html[data-auth-ready="app"] #app-content .inv-kpi-row,
html[data-auth-ready="app"] #app-content .production-stat-grid{
  grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr)) !important;
  gap:.85rem !important;
}

@media (max-width:640px){
  html[data-auth-ready="app"] #app-content .bimas-kpi,
  html[data-auth-ready="app"] #app-content .kpi-card,
  html[data-auth-ready="app"] #app-content .stats-card,
  html[data-auth-ready="app"] #app-content .dash-kpi,
  html[data-auth-ready="app"] #app-content .inv-kpi-card{
    min-height:5.15rem !important;
    padding:.85rem .9rem !important;
  }
  html[data-auth-ready="app"] #app-content .bimas-kpi-value,
  html[data-auth-ready="app"] #app-content .kpi-value,
  html[data-auth-ready="app"] #app-content .stats-value,
  html[data-auth-ready="app"] #app-content .dash-kpi .value,
  html[data-auth-ready="app"] #app-content .inv-kpi-value{
    font-size:1.08rem !important;
  }
}

/* Inventory register polish */
html[data-auth-ready="app"] #app-content .inv-register-row{
  display:block !important;
}

html[data-auth-ready="app"] #app-content .inv-register-main{
  width:100% !important;
  max-width:none !important;
}

html[data-auth-ready="app"] #app-content .inv-register-side{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)) !important;
  gap:1rem !important;
  margin-top:1rem !important;
}

html[data-auth-ready="app"] #app-content .inv-register-main .inv-table{
  min-width:0 !important;
  width:100% !important;
}

html[data-auth-ready="app"] #app-content .inv-actions-cell{
  display:flex !important;
  align-items:center !important;
  gap:.4rem !important;
  flex-wrap:wrap !important;
}

html[data-auth-ready="app"] #app-content .inv-actions-cell .btn{
  min-height:2rem !important;
  padding:.42rem .65rem !important;
  font-size:.72rem !important;
}

/* Final system alignment pass */
html[data-auth-ready="app"] #app-content .bimas-kpi-body{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:.22rem !important;
  min-width:0 !important;
  flex:1 1 auto !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi-body > *{
  margin:0 !important;
  min-width:0 !important;
  max-width:100% !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi-body p,
html[data-auth-ready="app"] #app-content .bimas-kpi-body small,
html[data-auth-ready="app"] #app-content .bimas-kpi-body span:not(.material-symbols-outlined){
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi-body > :not(.bimas-kpi-value):not(.material-symbols-outlined){
  font-size:.76rem !important;
  line-height:1.25 !important;
  color:#334155 !important;
  font-weight:750 !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi-body > :nth-child(n+3),
html[data-auth-ready="app"] #app-content .kpi-sub,
html[data-auth-ready="app"] #app-content .stats-sub,
html[data-auth-ready="app"] #app-content .dash-kpi .sub,
html[data-auth-ready="app"] #app-content .inv-kpi-sub{
  display:none !important;
}

html[data-auth-ready="app"] #app-content .kpi-grid,
html[data-auth-ready="app"] #app-content .stats-grid,
html[data-auth-ready="app"] #app-content .dash-kpi-grid,
html[data-auth-ready="app"] #app-content .bi-kpi-grid,
html[data-auth-ready="app"] #app-content .fgs-kpi-grid,
html[data-auth-ready="app"] #app-content .inv-kpi-row,
html[data-auth-ready="app"] #app-content [style*="grid-template-columns:repeat"],
html[data-auth-ready="app"] #app-content [style*="grid-template-columns: repeat"]{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13.75rem),1fr)) !important;
  gap:.85rem !important;
}

html[data-auth-ready="app"] #app-content .hero,
html[data-auth-ready="app"] #app-content .dash-hero,
html[data-auth-ready="app"] #app-content .production-hero,
html[data-auth-ready="app"] #app-content [style*="linear-gradient"]{
  border-radius:.78rem !important;
}

html[data-auth-ready="app"] #app-content .hero p,
html[data-auth-ready="app"] #app-content .dash-hero p,
html[data-auth-ready="app"] #app-content .production-hero p,
html[data-auth-ready="app"] #app-content .section-header p,
html[data-auth-ready="app"] #app-content .page-header p,
html[data-auth-ready="app"] #app-content .inv-overview-head p,
html[data-auth-ready="app"] #app-content [class*="hero"] > p{
  display:none !important;
}

html[data-auth-ready="app"] #app-content .card,
html[data-auth-ready="app"] #app-content .dash-card,
html[data-auth-ready="app"] #app-content .dash-card2,
html[data-auth-ready="app"] #app-content .dashboard-card,
html[data-auth-ready="app"] #app-content .module-card,
html[data-auth-ready="app"] #app-content .inv-section,
html[data-auth-ready="app"] #app-content .so-card{
  border-radius:.78rem !important;
  border-color:#dbe4ef !important;
  box-shadow:0 2px 8px rgba(15,23,42,.045) !important;
}

html[data-auth-ready="app"] #app-content .data-table,
html[data-auth-ready="app"] #app-content .inv-table,
html[data-auth-ready="app"] #app-content .so-table{
  table-layout:auto !important;
  font-size:.82rem !important;
}

html[data-auth-ready="app"] #app-content .data-table th,
html[data-auth-ready="app"] #app-content .inv-table th,
html[data-auth-ready="app"] #app-content .so-table th{
  font-size:.68rem !important;
  letter-spacing:.03em !important;
  color:#24324a !important;
}

html[data-auth-ready="app"] #app-content .system-health-metric{
  min-height:7.6rem !important;
  display:flex !important;
  flex-direction:column !important;
  gap:.45rem !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] #app-content .system-health-metric > div:first-child{
  align-items:center !important;
}

html[data-auth-ready="app"] #app-content .system-health-metric > p{
  margin:0 !important;
}

html[data-auth-ready="app"] #app-content .system-health-metric > p:nth-of-type(1){
  font-size:.68rem !important;
  letter-spacing:.04em !important;
}

html[data-auth-ready="app"] #app-content .system-health-metric > p:nth-of-type(2){
  font-size:1.05rem !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  color:#111c35 !important;
}

html[data-auth-ready="app"] #app-content .system-health-metric > p:nth-of-type(3){
  display:none !important;
}

/* Corporate card palette: EFS logo blue, yellow, orange, and red */
html[data-auth-ready="app"] #app-content .bimas-kpi,
html[data-auth-ready="app"] #app-content .kpi-card,
html[data-auth-ready="app"] #app-content .stats-card,
html[data-auth-ready="app"] #app-content .dash-kpi,
html[data-auth-ready="app"] #app-content .inv-kpi-card{
  --bimas-kpi-accent:var(--brand-blue) !important;
  --kpi-icon-color:var(--brand-blue) !important;
  --kpi-icon-bg:var(--brand-blue-faint) !important;
  --kpi-bar:var(--brand-blue) !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi:nth-child(4n+2),
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(4n+2),
html[data-auth-ready="app"] #app-content .stats-card:nth-child(4n+2),
html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(4n+2),
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(4n+2){
  --bimas-kpi-accent:var(--brand-yellow) !important;
  --kpi-icon-color:var(--brand-yellow) !important;
  --kpi-icon-bg:#fffde6 !important;
  --kpi-bar:var(--brand-yellow) !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi:nth-child(4n+3),
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(4n+3),
html[data-auth-ready="app"] #app-content .stats-card:nth-child(4n+3),
html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(4n+3),
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(4n+3){
  --bimas-kpi-accent:var(--brand-orange) !important;
  --kpi-icon-color:var(--brand-orange) !important;
  --kpi-icon-bg:var(--brand-orange-faint) !important;
  --kpi-bar:var(--brand-orange) !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi:nth-child(4n+4),
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(4n+4),
html[data-auth-ready="app"] #app-content .stats-card:nth-child(4n+4),
html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(4n+4),
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(4n+4){
  --bimas-kpi-accent:var(--brand-red) !important;
  --kpi-icon-color:var(--brand-red) !important;
  --kpi-icon-bg:#fff0ee !important;
  --kpi-bar:var(--brand-red) !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi::after,
html[data-auth-ready="app"] #app-content .kpi-card::after,
html[data-auth-ready="app"] #app-content .stats-card::after,
html[data-auth-ready="app"] #app-content .dash-kpi::after,
html[data-auth-ready="app"] #app-content .inv-kpi-card::after{
  background:var(--bimas-kpi-accent) !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi-icon,
html[data-auth-ready="app"] #app-content .kpi-icon,
html[data-auth-ready="app"] #app-content .stats-icon,
html[data-auth-ready="app"] #app-content .dash-kpi .kicon,
html[data-auth-ready="app"] #app-content .inv-kpi-icon{
  background:var(--bimas-kpi-accent) !important;
  box-shadow:0 5px 12px rgba(0,19,65,.16) !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi:nth-child(4n+2) .bimas-kpi-icon,
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(4n+2) .kpi-icon,
html[data-auth-ready="app"] #app-content .stats-card:nth-child(4n+2) .stats-icon,
html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(4n+2) .kicon,
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(4n+2) .inv-kpi-icon{
  color:var(--brand-blue-deep) !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi:nth-child(4n+2) .bimas-kpi-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(4n+2) .kpi-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .stats-card:nth-child(4n+2) .stats-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(4n+2) .kicon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(4n+2) .inv-kpi-icon .material-symbols-outlined{
  color:var(--brand-blue-deep) !important;
}

html[data-auth-ready="app"] #app-content .invoice-hero h1,
html[data-auth-ready="app"] #app-content .backup-hero h1{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* Products catalogue card actions */
html[data-auth-ready="app"] #app-content .product-card-footer{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:.55rem !important;
  align-items:start !important;
}

html[data-auth-ready="app"] #app-content .product-card-price{
  display:block !important;
  font-family:var(--font-display) !important;
  font-size:1rem !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  color:var(--brand-blue) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:100% !important;
}

html[data-auth-ready="app"] #app-content .product-card-actions{
  display:flex !important;
  justify-content:center !important;
  gap:.45rem !important;
  align-items:center !important;
  width:100% !important;
  padding-top:.1rem !important;
}

html[data-auth-ready="app"] #app-content .product-add-pfi{
  min-width:0 !important;
  width:100% !important;
  height:2.25rem !important;
  padding:.42rem .75rem !important;
  font-size:.75rem !important;
  font-weight:850 !important;
  justify-content:center !important;
  white-space:nowrap !important;
  border-radius:.62rem !important;
  box-shadow:0 4px 12px rgba(0,87,255,.16) !important;
}

html[data-auth-ready="app"] #app-content .product-icon-btn{
  width:2rem !important;
  height:2rem !important;
  min-width:2rem !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:.55rem !important;
}

@media (max-width:420px){
  html[data-auth-ready="app"] #app-content .product-card-actions{
    gap:.35rem !important;
  }
  html[data-auth-ready="app"] #app-content .product-add-pfi{
    height:2.15rem !important;
    font-size:.72rem !important;
    padding:.38rem .6rem !important;
  }
  html[data-auth-ready="app"] #app-content .product-icon-btn{
    width:1.9rem !important;
    height:1.9rem !important;
    min-width:1.9rem !important;
  }
}

/* BOM dashboard layout repair */
html[data-auth-ready="app"] #app-content .bimas-bom-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(20rem,24rem) !important;
  gap:1rem !important;
  align-items:start !important;
  overflow:visible !important;
}

html[data-auth-ready="app"] #app-content .bimas-bom-main,
html[data-auth-ready="app"] #app-content .bimas-bom-side,
html[data-auth-ready="app"] #app-content .bimas-chart-card,
html[data-auth-ready="app"] #app-content .bimas-detail-card{
  min-width:0 !important;
  max-width:100% !important;
}

html[data-auth-ready="app"] #app-content .bimas-bom-charts{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)) !important;
  gap:.85rem !important;
  padding:0 1rem 1rem !important;
}

html[data-auth-ready="app"] #app-content .bimas-chart-card{
  overflow:hidden !important;
  padding:1rem !important;
}

html[data-auth-ready="app"] #app-content .bimas-donut-wrap{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  gap:1rem !important;
  align-items:center !important;
}

html[data-auth-ready="app"] #app-content .bimas-donut{
  width:7.2rem !important;
  height:7.2rem !important;
}

html[data-auth-ready="app"] #app-content .bimas-donut div{
  width:4.65rem !important;
  height:4.65rem !important;
}

html[data-auth-ready="app"] #app-content .bimas-legend{
  min-width:0 !important;
}

html[data-auth-ready="app"] #app-content .bimas-legend p{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  gap:.42rem !important;
  margin:.42rem 0 !important;
}

html[data-auth-ready="app"] #app-content .bimas-legend strong{
  white-space:nowrap !important;
}

html[data-auth-ready="app"] #app-content .bimas-bar-row{
  grid-template-columns:minmax(0,1fr) minmax(4.5rem,7rem) auto !important;
}

html[data-auth-ready="app"] #app-content .bimas-bar-row span{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html[data-auth-ready="app"] #app-content .bimas-bom-side{
  position:sticky !important;
  top:calc(var(--topbar-h, 3.75rem) + .75rem) !important;
}

html[data-auth-ready="app"] #app-content .bimas-product-info{
  grid-template-columns:1fr !important;
}

html[data-auth-ready="app"] #app-content .bimas-product-img{
  height:5.6rem !important;
}

html[data-auth-ready="app"] #app-content .bimas-product-img span{
  font-size:3.2rem !important;
}

html[data-auth-ready="app"] #app-content .bimas-table-wrap.compact{
  overflow:auto !important;
}

html[data-auth-ready="app"] #app-content .bimas-table-wrap.compact .bimas-table{
  min-width:42rem !important;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] #app-content .bimas-bom-layout{
    grid-template-columns:1fr !important;
  }
  html[data-auth-ready="app"] #app-content .bimas-bom-side{
    position:static !important;
  }
  html[data-auth-ready="app"] #app-content .bimas-product-info{
    grid-template-columns:7rem minmax(0,1fr) !important;
  }
}

@media (max-width:680px){
  html[data-auth-ready="app"] #app-content .bimas-donut-wrap{
    grid-template-columns:1fr !important;
    justify-items:start !important;
  }
  html[data-auth-ready="app"] #app-content .bimas-product-info{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:760px){
  html[data-auth-ready="app"] #app-content .bimas-kpi,
  html[data-auth-ready="app"] #app-content .kpi-card,
  html[data-auth-ready="app"] #app-content .stats-card,
  html[data-auth-ready="app"] #app-content .dash-kpi,
  html[data-auth-ready="app"] #app-content .inv-kpi-card{
    min-height:4.85rem !important;
    padding:.82rem !important;
  }
  html[data-auth-ready="app"] #app-content .bimas-kpi-icon,
  html[data-auth-ready="app"] #app-content .kpi-icon,
  html[data-auth-ready="app"] #app-content .stats-icon,
  html[data-auth-ready="app"] #app-content .dash-kpi .kicon,
  html[data-auth-ready="app"] #app-content .inv-kpi-icon{
    width:2.35rem !important;
    height:2.35rem !important;
    min-width:2.35rem !important;
    flex-basis:2.35rem !important;
  }
}

/* ================================================================
   Final Compact ERP Skin - KPI reference sizing
   ================================================================ */
html[data-auth-ready="app"] #app-content{
  font-size:.8125rem;
}

html[data-auth-ready="app"] #app-content h1{font-size:1.35rem !important;letter-spacing:0 !important;}
html[data-auth-ready="app"] #app-content h2{font-size:1rem !important;letter-spacing:0 !important;}
html[data-auth-ready="app"] #app-content h3{font-size:.9rem !important;letter-spacing:0 !important;}
html[data-auth-ready="app"] #app-content .page-header{margin-bottom:.8rem !important;}
html[data-auth-ready="app"] #app-content .page-header h1{font-size:1.35rem !important;}

html[data-auth-ready="app"] #app-content .card,
html[data-auth-ready="app"] #app-content .modal-content,
html[data-auth-ready="app"] #app-content .section-header,
html[data-auth-ready="app"] #app-content .form-input,
html[data-auth-ready="app"] #app-content .form-select,
html[data-auth-ready="app"] #app-content .form-textarea{
  font-size:.8rem !important;
}

html[data-auth-ready="app"] #app-content .data-table th,
html[data-auth-ready="app"] #app-content .data-table td,
html[data-auth-ready="app"] #app-content .form-label,
html[data-auth-ready="app"] #app-content .btn{
  font-size:.75rem !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] #app-content .btn-sm{
  font-size:.68rem !important;
  padding:.35rem .55rem !important;
}

html[data-auth-ready="app"] #app-content > div[style*="padding:2rem"],
html[data-auth-ready="app"] #app-content .dash-hero{
  border-radius:8px !important;
  padding:1rem 1.15rem !important;
  margin-bottom:.85rem !important;
  box-shadow:0 2px 10px rgba(15,23,42,.07) !important;
}

html[data-auth-ready="app"] #app-content > div[style*="padding:2rem"] h1,
html[data-auth-ready="app"] #app-content .dash-hero h1{
  font-size:1.32rem !important;
}

html[data-auth-ready="app"] #app-content .kpi-grid,
html[data-auth-ready="app"] #app-content .dash-grid,
html[data-auth-ready="app"] #app-content .dash-kpi-grid,
html[data-auth-ready="app"] #app-content .dashboard-grid,
html[data-auth-ready="app"] #app-content .bi-kpi-grid,
html[data-auth-ready="app"] #app-content .fgs-kpi-grid,
html[data-auth-ready="app"] #app-content .inv-kpi-grid,
html[data-auth-ready="app"] #app-content .bimas-bom-kpis,
html[data-auth-ready="app"] #app-content .reorder-kpi-grid,
html[data-auth-ready="app"] #app-content .production-stat-grid{
  grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr)) !important;
  gap:.55rem !important;
  margin-bottom:.75rem !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi,
html[data-auth-ready="app"] #app-content .kpi-card,
html[data-auth-ready="app"] #app-content .stats-card,
html[data-auth-ready="app"] #app-content .dash-kpi,
html[data-auth-ready="app"] #app-content .inv-kpi-card{
  min-height:4.55rem !important;
  padding:.62rem .72rem !important;
  gap:.65rem !important;
  border-radius:8px !important;
  border:1px solid #dbe4f0 !important;
  background:#fff !important;
  color:#0f172a !important;
  box-shadow:0 2px 7px rgba(15,23,42,.05) !important;
  display:grid !important;
  grid-template-columns:2.35rem minmax(0,1fr) !important;
  grid-template-rows:auto auto auto !important;
  column-gap:.65rem !important;
  row-gap:.08rem !important;
  align-items:center !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi::before,
html[data-auth-ready="app"] #app-content .kpi-card::before,
html[data-auth-ready="app"] #app-content .stats-card::before,
html[data-auth-ready="app"] #app-content .dash-kpi::before,
html[data-auth-ready="app"] #app-content .inv-kpi-card::before{
  display:none !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi::after,
html[data-auth-ready="app"] #app-content .kpi-card::after,
html[data-auth-ready="app"] #app-content .stats-card::after,
html[data-auth-ready="app"] #app-content .dash-kpi::after,
html[data-auth-ready="app"] #app-content .inv-kpi-card::after{
  content:"" !important;
  position:absolute !important;
  top:-1.35rem !important;
  right:-1rem !important;
  width:4.7rem !important;
  height:4.7rem !important;
  border-radius:0 0 0 3.5rem !important;
  background:var(--kpi-compact-color,var(--tone,var(--kpi-icon-color,var(--bimas-kpi-accent,#0b5cff)))) !important;
  opacity:.09 !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi-icon,
html[data-auth-ready="app"] #app-content .kpi-icon,
html[data-auth-ready="app"] #app-content .stats-icon,
html[data-auth-ready="app"] #app-content .dash-kpi .kicon,
html[data-auth-ready="app"] #app-content .inv-kpi-icon{
  width:2.35rem !important;
  height:2.35rem !important;
  min-width:2.35rem !important;
  flex:0 0 2.35rem !important;
  border-radius:.52rem !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--kpi-compact-color,var(--tone,var(--kpi-icon-color,var(--bimas-kpi-accent,#0b5cff)))) !important;
  color:#fff !important;
  box-shadow:0 4px 10px rgba(15,23,42,.11) !important;
  opacity:1 !important;
  grid-column:1 !important;
  grid-row:1 / span 3 !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .kpi-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .stats-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .inv-kpi-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .dash-kpi .kicon,
html[data-auth-ready="app"] #app-content .inv-kpi-icon{
  font-size:1.05rem !important;
  line-height:1 !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi-body,
html[data-auth-ready="app"] #app-content .kpi-body,
html[data-auth-ready="app"] #app-content .stats-body,
html[data-auth-ready="app"] #app-content .inv-kpi-body{
  display:contents !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi-value,
html[data-auth-ready="app"] #app-content .kpi-value,
html[data-auth-ready="app"] #app-content .stats-value,
html[data-auth-ready="app"] #app-content .dash-kpi .value,
html[data-auth-ready="app"] #app-content .inv-kpi-value{
  font-size:clamp(1rem,1.25vw,1.28rem) !important;
  line-height:1.05 !important;
  margin:0 !important;
  color:#0f172a !important;
  letter-spacing:0 !important;
  grid-column:2 !important;
  grid-row:1 !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi .kpi-label,
html[data-auth-ready="app"] #app-content .bimas-kpi .stats-label,
html[data-auth-ready="app"] #app-content .bimas-kpi .label,
html[data-auth-ready="app"] #app-content .kpi-label,
html[data-auth-ready="app"] #app-content .stats-label,
html[data-auth-ready="app"] #app-content .dash-kpi .label,
html[data-auth-ready="app"] #app-content .inv-kpi-label{
  font-size:.65rem !important;
  line-height:1.12 !important;
  color:#334155 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  margin:0 !important;
  grid-column:2 !important;
  grid-row:2 !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] #app-content .kpi-sub,
html[data-auth-ready="app"] #app-content .dash-kpi .sub,
html[data-auth-ready="app"] #app-content .inv-kpi-sub,
html[data-auth-ready="app"] #app-content .inv-kpi-card div[style*="font-size:0.75rem"],
html[data-auth-ready="app"] #app-content .bimas-kpi small{
  font-size:.58rem !important;
  line-height:1.1 !important;
  color:#6b7280 !important;
  margin-top:.1rem !important;
  opacity:1 !important;
  grid-column:2 !important;
  grid-row:3 !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] #app-content .inv-kpi-card > div:first-child{
  display:contents !important;
  margin-bottom:0 !important;
}

html[data-auth-ready="app"] #app-content .inv-kpi-card > div:first-child span:not(.inv-kpi-icon),
html[data-auth-ready="app"] #app-content .dash-kpi .dash-spark,
html[data-auth-ready="app"] #app-content .dash-kpi .dash-meter{
  display:none !important;
}

html[data-auth-ready="app"] #app-content .inv-kpi-card > div:last-child{
  grid-column:2 !important;
  grid-row:3 !important;
  margin-top:0 !important;
  padding-top:0 !important;
  border-top:0 !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi:nth-child(6n+1),
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(6n+1),
html[data-auth-ready="app"] #app-content .stats-card:nth-child(6n+1),
html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(6n+1),
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(6n+1){
  --kpi-compact-color:#0b5cff;
  --kpi-bar:#0b5cff;
  --kpi-icon-color:#0b5cff;
  --bimas-kpi-accent:#0b5cff;
}

html[data-auth-ready="app"] #app-content .bimas-kpi:nth-child(6n+2),
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(6n+2),
html[data-auth-ready="app"] #app-content .stats-card:nth-child(6n+2),
html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(6n+2),
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(6n+2){
  --kpi-compact-color:#ffd400;
  --kpi-bar:#ffd400;
  --kpi-icon-color:#ffd400;
  --bimas-kpi-accent:#ffd400;
}

html[data-auth-ready="app"] #app-content .bimas-kpi:nth-child(6n+3),
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(6n+3),
html[data-auth-ready="app"] #app-content .stats-card:nth-child(6n+3),
html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(6n+3),
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(6n+3){
  --kpi-compact-color:#ff6b00;
  --kpi-bar:#ff6b00;
  --kpi-icon-color:#ff6b00;
  --bimas-kpi-accent:#ff6b00;
}

html[data-auth-ready="app"] #app-content .bimas-kpi:nth-child(6n+4),
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(6n+4),
html[data-auth-ready="app"] #app-content .stats-card:nth-child(6n+4),
html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(6n+4),
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(6n+4){
  --kpi-compact-color:#7c3aed;
  --kpi-bar:#7c3aed;
  --kpi-icon-color:#7c3aed;
  --bimas-kpi-accent:#7c3aed;
}

html[data-auth-ready="app"] #app-content .bimas-kpi:nth-child(6n+5),
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(6n+5),
html[data-auth-ready="app"] #app-content .stats-card:nth-child(6n+5),
html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(6n+5),
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(6n+5){
  --kpi-compact-color:#f08a00;
  --kpi-bar:#f08a00;
  --kpi-icon-color:#f08a00;
  --bimas-kpi-accent:#f08a00;
}

html[data-auth-ready="app"] #app-content .bimas-kpi:nth-child(6n+6),
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(6n+6),
html[data-auth-ready="app"] #app-content .stats-card:nth-child(6n+6),
html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(6n+6),
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(6n+6){
  --kpi-compact-color:#ef3333;
  --kpi-bar:#ef3333;
  --kpi-icon-color:#ef3333;
  --bimas-kpi-accent:#ef3333;
}

html[data-auth-ready="app"] #app-content .bimas-kpi:nth-child(6n+2) .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(6n+2) .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .stats-card:nth-child(6n+2) .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(6n+2) .kicon,
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(6n+2) .inv-kpi-icon{
  color:#111827 !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(n),
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(n),
html[data-auth-ready="app"] #app-content .stats-card:nth-child(n),
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(n){
  background:#fff !important;
  color:#0f172a !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(n) .value,
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(n) .kpi-value,
html[data-auth-ready="app"] #app-content .stats-card:nth-child(n) .stats-value,
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(n) .inv-kpi-value{
  color:#0f172a !important;
  -webkit-text-fill-color:currentColor !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(n) .label,
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(n) .kpi-label,
html[data-auth-ready="app"] #app-content .stats-card:nth-child(n) .stats-label,
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(n) .inv-kpi-label{
  color:#334155 !important;
  -webkit-text-fill-color:currentColor !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(n) .sub,
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(n) .inv-kpi-sub{
  color:#6b7280 !important;
  -webkit-text-fill-color:currentColor !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(6n+1) .kicon,
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(6n+1) .kpi-icon,
html[data-auth-ready="app"] #app-content .stats-card:nth-child(6n+1) .stats-icon,
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(6n+1) .inv-kpi-icon{background:#0b5cff !important;}
html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(6n+2) .kicon,
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(6n+2) .kpi-icon,
html[data-auth-ready="app"] #app-content .stats-card:nth-child(6n+2) .stats-icon,
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(6n+2) .inv-kpi-icon{background:#ffd400 !important;}
html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(6n+3) .kicon,
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(6n+3) .kpi-icon,
html[data-auth-ready="app"] #app-content .stats-card:nth-child(6n+3) .stats-icon,
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(6n+3) .inv-kpi-icon{background:#ff6b00 !important;}
html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(6n+4) .kicon,
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(6n+4) .kpi-icon,
html[data-auth-ready="app"] #app-content .stats-card:nth-child(6n+4) .stats-icon,
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(6n+4) .inv-kpi-icon{background:#7c3aed !important;}
html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(6n+5) .kicon,
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(6n+5) .kpi-icon,
html[data-auth-ready="app"] #app-content .stats-card:nth-child(6n+5) .stats-icon,
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(6n+5) .inv-kpi-icon{background:#f08a00 !important;}
html[data-auth-ready="app"] #app-content .dash-kpi:nth-child(6n+6) .kicon,
html[data-auth-ready="app"] #app-content .kpi-card:nth-child(6n+6) .kpi-icon,
html[data-auth-ready="app"] #app-content .stats-card:nth-child(6n+6) .stats-icon,
html[data-auth-ready="app"] #app-content .inv-kpi-card:nth-child(6n+6) .inv-kpi-icon{background:#ef3333 !important;}

@media (max-width:760px){
  html[data-auth-ready="app"] #app-content .kpi-grid,
  html[data-auth-ready="app"] #app-content .dash-grid,
  html[data-auth-ready="app"] #app-content .dash-kpi-grid,
  html[data-auth-ready="app"] #app-content .dashboard-grid,
  html[data-auth-ready="app"] #app-content .bi-kpi-grid,
  html[data-auth-ready="app"] #app-content .fgs-kpi-grid,
  html[data-auth-ready="app"] #app-content .inv-kpi-grid,
  html[data-auth-ready="app"] #app-content .bimas-bom-kpis,
  html[data-auth-ready="app"] #app-content .reorder-kpi-grid,
  html[data-auth-ready="app"] #app-content .production-stat-grid{
    grid-template-columns:repeat(auto-fit,minmax(10.25rem,1fr)) !important;
  }
}

/* ================================================================
   BIMAS Executive UI Polish
   Final layer for a more premium dashboard and cleaner modules.
   ================================================================ */
html[data-auth-ready="app"]{
  --bg:#f4f7fb;
  --surface-0:#ffffff;
  --surface-1:#f8fafc;
  --surface-2:#edf2f8;
  --border:#d9e2ee;
  --text-primary:#071226;
  --text-secondary:#334155;
  --text-muted:#64748b;
  --brand-blue:#10264a;
  --brand-blue-mid:#16457e;
  --brand-blue-light:#2f7bdc;
  --brand-orange:#e9a62f;
  --brand-orange-mid:#f97316;
  --success:#15803d;
  --warning:#b45309;
  --error:#b91c1c;
  --shadow-sm:0 2px 8px rgba(15,23,42,.045);
  --shadow-md:0 10px 28px rgba(15,23,42,.08);
}

html[data-auth-ready="app"] body,
html[data-auth-ready="app"] #app-content{
  background:
    linear-gradient(180deg,#f8fbff 0%,#f3f6fb 46%,#eef3f8 100%) !important;
}

html[data-auth-ready="app"] #app-content > .page-container{
  max-width:1500px !important;
}

html[data-auth-ready="app"] #app-content .page-header,
html[data-auth-ready="app"] #app-content .section-header{
  border-bottom:1px solid rgba(217,226,238,.82) !important;
  padding-bottom:.85rem !important;
}

html[data-auth-ready="app"] #app-content .page-header h1,
html[data-auth-ready="app"] #app-content .section-header h2{
  color:#071226 !important;
}

html[data-auth-ready="app"] #app-content .card,
html[data-auth-ready="app"] #app-content .dash-card2,
html[data-auth-ready="app"] #app-content .module-card,
html[data-auth-ready="app"] #app-content .dashboard-card,
html[data-auth-ready="app"] #app-content .inv-panel,
html[data-auth-ready="app"] #app-content .bimas-panel,
html[data-auth-ready="app"] #app-content .reorder-card,
html[data-auth-ready="app"] #app-content .so-card{
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%) !important;
  border:1px solid rgba(217,226,238,.96) !important;
  border-radius:10px !important;
  box-shadow:0 8px 24px rgba(15,23,42,.055) !important;
}

html[data-auth-ready="app"] #app-content .dash-shell{
  display:flex !important;
  flex-direction:column !important;
  gap:1rem !important;
  margin:0 !important;
  padding:.15rem !important;
  background:transparent !important;
}

html[data-auth-ready="app"] #app-content .dash-hero{
  position:relative !important;
  overflow:hidden !important;
  min-height:5.35rem !important;
  padding:1.25rem 1.45rem !important;
  border-radius:12px !important;
  background:
    linear-gradient(135deg,#071a33 0%,#123e73 58%,#f08a00 145%) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 14px 34px rgba(7,18,38,.18) !important;
}

html[data-auth-ready="app"] #app-content .dash-hero::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:auto 1.2rem -1px auto !important;
  width:24rem !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent) !important;
}

html[data-auth-ready="app"] #app-content .dash-hero::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.06) 1px,transparent 1px) !important;
  background-size:42px 42px !important;
  opacity:.22 !important;
  pointer-events:none !important;
}

html[data-auth-ready="app"] #app-content .dash-hero-row{
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:1rem !important;
}

html[data-auth-ready="app"] #app-content .dash-hero h1{
  color:#fff !important;
  font-size:clamp(1.35rem,1rem + 1.15vw,2rem) !important;
  line-height:1.05 !important;
}

html[data-auth-ready="app"] #app-content .dash-hero .sub{
  display:block !important;
  color:rgba(255,255,255,.78) !important;
  margin-top:.32rem !important;
  font-size:.78rem !important;
}

html[data-auth-ready="app"] #app-content #dash-clock{
  min-width:6.5rem !important;
  text-align:right !important;
  color:#ffd166 !important;
  -webkit-text-fill-color:#ffd166 !important;
}

html[data-auth-ready="app"] #app-content .dash-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:.85rem !important;
  margin:0 !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi{
  min-height:6.8rem !important;
  padding:.95rem 1rem !important;
  border-radius:11px !important;
  border:1px solid rgba(217,226,238,.98) !important;
  background:#fff !important;
  box-shadow:0 9px 26px rgba(15,23,42,.055) !important;
  grid-template-columns:2.6rem minmax(0,1fr) !important;
  grid-template-rows:auto auto auto !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  top:.85rem !important;
  bottom:.85rem !important;
  width:3px !important;
  border-radius:99px !important;
  background:var(--tone) !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi::after{
  border-radius:0 0 0 4rem !important;
  opacity:.075 !important;
  background:var(--tone) !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi .kicon{
  width:2.55rem !important;
  height:2.55rem !important;
  min-width:2.55rem !important;
  border-radius:.72rem !important;
  background:var(--tone) !important;
  color:#fff !important;
  box-shadow:0 8px 16px color-mix(in srgb,var(--tone) 22%,transparent) !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi .value{
  font-size:clamp(1.08rem,1.1vw,1.46rem) !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi .label{
  font-size:.68rem !important;
  color:#475569 !important;
  font-weight:900 !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi .sub{
  display:block !important;
  font-size:.62rem !important;
  color:#7b8798 !important;
}

html[data-auth-ready="app"] #app-content .dash-kpi .dash-spark{
  display:block !important;
  position:absolute !important;
  right:.75rem !important;
  bottom:.58rem !important;
  width:5.8rem !important;
  height:2.7rem !important;
  opacity:.33 !important;
  pointer-events:none !important;
}

html[data-auth-ready="app"] #app-content .dash-graphics-grid{
  display:grid !important;
  grid-template-columns:1.08fr 1.44fr 1.08fr !important;
  gap:.9rem !important;
}

html[data-auth-ready="app"] #app-content .dash-graphic-card{
  min-height:12rem !important;
  padding:1rem !important;
  overflow:hidden !important;
  position:relative !important;
}

html[data-auth-ready="app"] #app-content .dash-graphic-head{
  display:flex !important;
  align-items:center !important;
  gap:.55rem !important;
  margin-bottom:.85rem !important;
  color:#10264a !important;
  font-weight:900 !important;
  font-family:var(--font-display) !important;
}

html[data-auth-ready="app"] #app-content .dash-head-icon{
  width:2rem !important;
  height:2rem !important;
  min-width:2rem !important;
  border-radius:.62rem !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#123e73 !important;
  background:#eef5ff !important;
  border:1px solid #d8e6f8 !important;
}

html[data-auth-ready="app"] #app-content .dash-gauge-wrap{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  gap:1rem !important;
  align-items:center !important;
}

html[data-auth-ready="app"] #app-content .dash-gauge{
  width:7.7rem !important;
  height:7.7rem !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:
    radial-gradient(circle at center,#fff 0 58%,transparent 59%),
    conic-gradient(#123e73 calc(var(--pct) * 1%),#e8eef6 0) !important;
  box-shadow:inset 0 0 0 1px #e2e8f0 !important;
}

html[data-auth-ready="app"] #app-content .dash-gauge span{
  font-family:var(--font-display) !important;
  font-size:1.35rem !important;
  font-weight:900 !important;
  color:#10264a !important;
}

html[data-auth-ready="app"] #app-content .dash-gauge-copy{
  display:flex !important;
  flex-direction:column !important;
  gap:.32rem !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] #app-content .dash-gauge-copy strong{
  font-family:var(--font-display) !important;
  font-size:clamp(1.1rem,1.3vw,1.55rem) !important;
  color:#071226 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] #app-content .dash-gauge-copy span{
  color:#64748b !important;
  font-size:.75rem !important;
  font-weight:800 !important;
}

html[data-auth-ready="app"] #app-content .dash-flow-rail{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:.62rem !important;
  align-items:stretch !important;
}

html[data-auth-ready="app"] #app-content .dash-flow-step{
  min-height:8.2rem !important;
  padding:.75rem !important;
  border-radius:.72rem !important;
  border:1px solid #dde7f3 !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.96)),
    linear-gradient(180deg,var(--tone),var(--tone)) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  position:relative !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] #app-content .dash-flow-step::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:var(--pct) !important;
  background:var(--tone) !important;
  opacity:.12 !important;
}

html[data-auth-ready="app"] #app-content .dash-flow-index{
  width:1.65rem !important;
  height:1.65rem !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:.48rem !important;
  background:var(--tone) !important;
  color:#fff !important;
  font-weight:900 !important;
  font-size:.72rem !important;
  position:relative !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] #app-content .dash-flow-label{
  color:#475569 !important;
  font-weight:900 !important;
  font-size:.72rem !important;
  position:relative !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] #app-content .dash-flow-step strong{
  font-family:var(--font-display) !important;
  color:#071226 !important;
  font-size:1.35rem !important;
  position:relative !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] #app-content .dash-risk-list{
  display:flex !important;
  flex-direction:column !important;
  gap:.75rem !important;
}

html[data-auth-ready="app"] #app-content .dash-risk-row{
  display:grid !important;
  grid-template-columns:7.1rem minmax(0,1fr) 2.2rem !important;
  gap:.62rem !important;
  align-items:center !important;
}

html[data-auth-ready="app"] #app-content .dash-risk-row span{
  color:#475569 !important;
  font-size:.72rem !important;
  font-weight:900 !important;
}

html[data-auth-ready="app"] #app-content .dash-risk-row div{
  height:.62rem !important;
  border-radius:99px !important;
  background:#edf2f8 !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] #app-content .dash-risk-row i{
  display:block !important;
  width:var(--pct) !important;
  height:100% !important;
  border-radius:99px !important;
  background:var(--tone) !important;
}

html[data-auth-ready="app"] #app-content .dash-risk-row strong{
  color:#071226 !important;
  text-align:right !important;
  font-family:var(--font-display) !important;
}

html[data-auth-ready="app"] #app-content .dash-section{
  padding:1rem !important;
}

html[data-auth-ready="app"] #app-content .dash-section-head{
  display:flex !important;
  align-items:center !important;
  gap:.62rem !important;
  margin-bottom:.85rem !important;
}

html[data-auth-ready="app"] #app-content .dash-section-head h2{
  color:#071226 !important;
  font-size:.98rem !important;
  font-weight:900 !important;
}

html[data-auth-ready="app"] #app-content .dash-shortcuts{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:.7rem !important;
}

html[data-auth-ready="app"] #app-content .dash-shortcut{
  min-height:4.35rem !important;
  padding:.72rem .78rem !important;
  border-radius:.72rem !important;
  border:1px solid rgba(18,62,115,.12) !important;
  background:linear-gradient(135deg,#123e73,#1f6fc7) !important;
  box-shadow:0 8px 18px rgba(18,62,115,.16) !important;
  color:#fff !important;
}

html[data-auth-ready="app"] #app-content .dash-shortcut:nth-child(2n){
  background:linear-gradient(135deg,#c46f05,#f08a00) !important;
}

html[data-auth-ready="app"] #app-content .dash-shortcut:nth-child(3n){
  background:linear-gradient(135deg,#0f766e,#14a098) !important;
}

html[data-auth-ready="app"] #app-content .dash-shortcut .ico{
  width:2.1rem !important;
  height:2.1rem !important;
  border-radius:.6rem !important;
  background:rgba(255,255,255,.2) !important;
  color:#fff !important;
}

html[data-auth-ready="app"] #app-content .dash-shortcut-detail{
  display:block !important;
  margin-top:.12rem !important;
  font-size:.62rem !important;
  color:rgba(255,255,255,.74) !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] #app-content .dash-main-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1.1fr) minmax(22rem,.9fr) !important;
  gap:.9rem !important;
}

html[data-auth-ready="app"] #app-content .dash-side-stack{
  display:flex !important;
  flex-direction:column !important;
  gap:.9rem !important;
}

html[data-auth-ready="app"] #app-content .dash-row,
html[data-auth-ready="app"] #app-content .dash-dept{
  min-height:3.05rem !important;
  border-radius:.72rem !important;
  border:1px solid #e1e9f4 !important;
  background:#fff !important;
  box-shadow:0 1px 0 rgba(15,23,42,.03) !important;
}

html[data-auth-ready="app"] #app-content .dash-work{
  background:linear-gradient(135deg,#fff9ed,#fff) !important;
  border-color:#f4d89f !important;
}

html[data-auth-ready="app"] #app-content .dash-dept-grid{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:.75rem !important;
}

html[data-auth-ready="app"] #app-content .btn-primary,
html[data-auth-ready="app"] #app-content button.btn-primary{
  background:linear-gradient(135deg,#123e73,#1f6fc7) !important;
  box-shadow:0 7px 16px rgba(18,62,115,.16) !important;
}

html[data-auth-ready="app"] #app-content .btn-secondary,
html[data-auth-ready="app"] #app-content button.btn-secondary,
html[data-auth-ready="app"] #app-content .btn-ghost{
  background:#fff !important;
  border:1px solid #d9e2ee !important;
  color:#123e73 !important;
}

html[data-auth-ready="app"] #app-content .data-table,
html[data-auth-ready="app"] #app-content .inv-table,
html[data-auth-ready="app"] #app-content .so-table{
  border:1px solid #dce5f0 !important;
  border-radius:10px !important;
  overflow:hidden !important;
  background:#fff !important;
}

html[data-auth-ready="app"] #app-content .data-table th,
html[data-auth-ready="app"] #app-content .inv-table th,
html[data-auth-ready="app"] #app-content .so-table th{
  background:#f3f7fc !important;
  color:#10264a !important;
  font-weight:900 !important;
}

html[data-auth-ready="app"] #app-content .data-table td,
html[data-auth-ready="app"] #app-content .inv-table td,
html[data-auth-ready="app"] #app-content .so-table td{
  border-bottom:1px solid #edf2f7 !important;
}

html[data-auth-ready="app"] #app-content .form-input,
html[data-auth-ready="app"] #app-content .form-select,
html[data-auth-ready="app"] #app-content .form-textarea,
html[data-auth-ready="app"] #app-content input:not([type="checkbox"]):not([type="radio"]),
html[data-auth-ready="app"] #app-content select,
html[data-auth-ready="app"] #app-content textarea{
  border-color:#d9e2ee !important;
  border-radius:.62rem !important;
  background:#fff !important;
  box-shadow:inset 0 1px 0 rgba(15,23,42,.025) !important;
}

html[data-auth-ready="app"] #app-content .modal-content{
  border-radius:12px !important;
  border:1px solid #d9e2ee !important;
  box-shadow:0 24px 70px rgba(7,18,38,.22) !important;
}

@media (max-width:1220px){
  html[data-auth-ready="app"] #app-content .dash-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  html[data-auth-ready="app"] #app-content .dash-graphics-grid,
  html[data-auth-ready="app"] #app-content .dash-main-grid{
    grid-template-columns:1fr !important;
  }
  html[data-auth-ready="app"] #app-content .dash-shortcuts{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  html[data-auth-ready="app"] #app-content .dash-dept-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media (max-width:720px){
  html[data-auth-ready="app"] #app-content{
    padding-left:.7rem !important;
    padding-right:.7rem !important;
  }
  html[data-auth-ready="app"] #app-content .dash-hero-row,
  html[data-auth-ready="app"] #app-content .dash-gauge-wrap{
    grid-template-columns:1fr !important;
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  html[data-auth-ready="app"] #app-content .dash-grid,
  html[data-auth-ready="app"] #app-content .dash-flow-rail,
  html[data-auth-ready="app"] #app-content .dash-shortcuts,
  html[data-auth-ready="app"] #app-content .dash-dept-grid{
    grid-template-columns:1fr !important;
  }
  html[data-auth-ready="app"] #app-content .dash-graphic-card{
    min-height:auto !important;
  }
  html[data-auth-ready="app"] #app-content .dash-risk-row{
    grid-template-columns:6.6rem minmax(0,1fr) 1.8rem !important;
  }
  html[data-auth-ready="app"] #app-content #dash-clock{
    text-align:left !important;
  }
}

/* ================================================================
   PFI Module Polish
   Professional sales workspace for quotations and customer deposits.
   ================================================================ */
html[data-auth-ready="app"] body[data-route="pfi"] #app-content{
  background:
    linear-gradient(180deg,#f8fbff 0%,#f3f7fc 44%,#eef4f9 100%) !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-shell,
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-detail-shell{
  display:flex !important;
  flex-direction:column !important;
  gap:1rem !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-hero,
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-detail-hero{
  position:relative !important;
  overflow:hidden !important;
  padding:1.25rem 1.4rem !important;
  margin:0 !important;
  border-radius:8px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:
    linear-gradient(135deg,#071a33 0%,#123e73 62%,#d68a17 135%) !important;
  box-shadow:0 14px 34px rgba(7,18,38,.16) !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-hero::after,
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-detail-hero::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.055) 1px,transparent 1px) !important;
  background-size:40px 40px !important;
  opacity:.24 !important;
  pointer-events:none !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-hero > *,
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-detail-hero > *{
  position:relative !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-hero h1{
  font-size:clamp(1.35rem,1.05rem + .9vw,1.85rem) !important;
  color:#fff !important;
  line-height:1.05 !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-hero .btn,
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-detail-hero .btn{
  min-height:2.4rem !important;
  border-radius:7px !important;
  font-weight:900 !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-kpi-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:.85rem !important;
  margin:0 !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card{
  position:relative !important;
  min-height:6.6rem !important;
  display:grid !important;
  grid-template-columns:2.6rem minmax(0,1fr) !important;
  grid-template-rows:auto auto auto !important;
  column-gap:.78rem !important;
  align-items:center !important;
  overflow:hidden !important;
  padding:.95rem 1rem !important;
  border-radius:8px !important;
  border:1px solid #dbe5f0 !important;
  background:#fff !important;
  color:#071226 !important;
  box-shadow:0 8px 24px rgba(15,23,42,.055) !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card:nth-child(1){--pfi-tone:#123e73;}
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card:nth-child(2){--pfi-tone:#0f766e;}
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card:nth-child(3){--pfi-tone:#d97706;}
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card:nth-child(4){--pfi-tone:#15803d;}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:.8rem !important;
  bottom:.8rem !important;
  width:3px !important;
  border-radius:99px !important;
  background:var(--pfi-tone) !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card::after{
  content:"" !important;
  position:absolute !important;
  top:-1.7rem !important;
  right:-1.2rem !important;
  width:5.7rem !important;
  height:5.7rem !important;
  border-radius:0 0 0 4rem !important;
  background:var(--pfi-tone) !important;
  opacity:.075 !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:first-child{
  display:grid !important;
  grid-template-columns:2.55rem minmax(0,1fr) auto !important;
  grid-template-rows:auto auto auto auto !important;
  align-items:center !important;
  gap:.75rem !important;
  margin:0 !important;
  grid-column:1 / -1 !important;
  grid-row:1 / -1 !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card .bimas-kpi-body > div:first-child{
  display:contents !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:first-child .material-symbols-outlined{
  grid-column:1 !important;
  grid-row:1 / span 4 !important;
  width:2.55rem !important;
  height:2.55rem !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:7px !important;
  background:var(--pfi-tone) !important;
  color:#fff !important;
  font-size:1.15rem !important;
  opacity:1 !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:first-child span:not(.material-symbols-outlined){
  grid-column:3 !important;
  grid-row:1 !important;
  justify-self:end !important;
  display:inline-flex !important;
  align-items:center !important;
  min-height:1.45rem !important;
  padding:.18rem .55rem !important;
  border-radius:999px !important;
  background:#eef5ff !important;
  color:#123e73 !important;
  font-size:.62rem !important;
  font-weight:900 !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:first-child + div,
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:first-child > div:nth-of-type(2),
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:first-child > div[style*="font-size:2rem"]{
  grid-column:2 / 4 !important;
  grid-row:2 !important;
  margin:0 !important;
  font-size:clamp(1.08rem,1.25vw,1.42rem) !important;
  line-height:1.05 !important;
  color:#071226 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:first-child + div + div,
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:first-child > div:nth-of-type(3),
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:first-child > div[style*="font-size:0.875rem"]{
  display:block !important;
  grid-column:2 / 4 !important;
  grid-row:3 !important;
  color:#475569 !important;
  font-size:.7rem !important;
  font-weight:900 !important;
  opacity:1 !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:nth-child(4),
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:first-child > div:nth-of-type(4){
  display:block !important;
  grid-column:2 / 4 !important;
  grid-row:4 !important;
  margin:.35rem 0 0 !important;
  padding:.45rem 0 0 !important;
  border:0 !important;
  border-top:1px solid #edf2f7 !important;
  color:#64748b !important;
  font-size:.62rem !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:first-child > div:nth-of-type(4) > div{
  color:#64748b !important;
  opacity:1 !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-filterbar{
  position:sticky !important;
  top:calc(var(--topbar-h, 3.75rem) + .55rem) !important;
  z-index:20 !important;
  padding:.8rem !important;
  border:1px solid rgba(217,226,238,.95) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.97) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.06) !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-filterbar .form-input,
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-filterbar .form-select{
  min-height:2.55rem !important;
  border-radius:7px !important;
  background:#f8fbff !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-list{
  gap:.75rem !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-card{
  position:relative !important;
  padding:1rem 1.05rem !important;
  border-radius:8px !important;
  border:1px solid #dbe5f0 !important;
  border-left:3px solid var(--brand-blue) !important;
  background:#fff !important;
  box-shadow:0 7px 22px rgba(15,23,42,.052) !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-card:hover{
  border-color:#c7d8eb !important;
  box-shadow:0 12px 30px rgba(15,23,42,.085) !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-card > div{
  display:grid !important;
  grid-template-columns:3rem minmax(0,1fr) auto !important;
  gap:1rem !important;
  align-items:flex-start !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-card > div > div:first-child{
  width:3rem !important;
  height:3rem !important;
  border-radius:8px !important;
  background:linear-gradient(135deg,#123e73,#1f6fc7) !important;
  box-shadow:0 8px 18px rgba(18,62,115,.16) !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-card .badge{
  border-radius:999px !important;
  font-size:.6rem !important;
  font-weight:900 !important;
  padding:.18rem .5rem !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-card .progress-bar{
  height:.5rem !important;
  border-radius:999px !important;
  background:#e8eef6 !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-card .btn{
  min-width:6.8rem !important;
  justify-content:center !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-breadcrumb{
  padding:.7rem .8rem !important;
  margin:0 !important;
  border:1px solid #dbe5f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 4px 12px rgba(15,23,42,.04) !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-detail-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(19rem,22rem) !important;
  gap:1rem !important;
  align-items:start !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-detail-hero{
  padding:1.55rem !important;
  margin-bottom:1rem !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-detail-hero p{
  color:inherit !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-info-grid{
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)) !important;
  gap:.75rem !important;
  margin-bottom:1rem !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-info-grid > div,
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-side-panel .card,
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-lines-card{
  border-radius:8px !important;
  border:1px solid #dbe5f0 !important;
  background:#fff !important;
  box-shadow:0 7px 22px rgba(15,23,42,.05) !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-info-grid > div{
  padding:.82rem .9rem !important;
  background:linear-gradient(180deg,#fff,#f8fbff) !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-lines-card{
  overflow:auto !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-lines-card table{
  min-width:46rem !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-lines-card th{
  background:#f4f7fb !important;
  color:#10264a !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-side-panel{
  position:sticky !important;
  top:calc(var(--topbar-h, 3.75rem) + .85rem) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:.85rem !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-side-panel .card{
  margin-bottom:0 !important;
  padding:1rem !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-settlement-card svg{
  width:8.25rem !important;
  height:8.25rem !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-workflow-card > div:last-child,
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-payments-card > div:last-child,
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-receipts-card > div:last-child{
  gap:.55rem !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .form-label,
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .form-label-sm{
  color:#334155 !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] .modal-content:has(#pfi-form){
  width:min(96vw,62rem) !important;
  max-width:62rem !important;
  max-height:calc(100dvh - 3rem) !important;
  border-radius:10px !important;
  overflow:auto !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] .modal-content:has(#pfi-form) .modal-body{
  padding:1.1rem !important;
  background:#f7fafd !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] .pfi-form{
  display:flex !important;
  flex-direction:column !important;
  gap:1rem !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] .pfi-form > div[style*="border-bottom"]{
  margin:0 !important;
  padding:.75rem .85rem !important;
  border:1px solid #dbe5f0 !important;
  border-radius:8px !important;
  background:#fff !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] .pfi-form > div[style*="display:grid"]{
  margin:0 !important;
  padding:1rem !important;
  border:1px solid #dbe5f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  gap:.85rem !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] .pfi-form .form-input,
html[data-auth-ready="app"] body[data-route="pfi"] .pfi-form .form-select,
html[data-auth-ready="app"] body[data-route="pfi"] .pfi-form textarea{
  min-height:2.45rem !important;
  border-radius:7px !important;
  background:#fbfdff !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] .pfi-form textarea{
  min-height:4.75rem !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] .pfi-form #items-container{
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:.75rem !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] .pfi-form .item-row{
  margin:0 !important;
  padding:1rem !important;
  border-radius:8px !important;
  border:1px solid #dbe5f0 !important;
  background:linear-gradient(180deg,#fff,#f9fbfe) !important;
  box-shadow:0 5px 14px rgba(15,23,42,.04) !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] .pfi-form .item-row > div[style*="grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr"]{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] .pfi-form > div[style*="linear-gradient(135deg,var(--surface-1)"]{
  margin:0 !important;
  padding:1rem !important;
  border-radius:8px !important;
  border:1px solid #cdddef !important;
  background:linear-gradient(135deg,#fff,#eef5ff) !important;
}

html[data-auth-ready="app"] body[data-route="pfi"] .pfi-form > div:last-child{
  position:static !important;
  margin:0 !important;
  padding:.85rem 0 0 !important;
  background:transparent !important;
  border-top:1px solid #dbe5f0 !important;
  box-shadow:none !important;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-detail-layout{
    grid-template-columns:1fr !important;
  }

  html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-side-panel{
    position:static !important;
  }
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-kpi-grid,
  html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-info-grid{
    grid-template-columns:1fr !important;
  }

  html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-card > div{
    grid-template-columns:1fr !important;
  }

  html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-card > div > div:first-child{
    display:none !important;
  }

  html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-card .btn{
    width:100% !important;
  }

  html[data-auth-ready="app"] body[data-route="pfi"] .pfi-form > div[style*="display:grid"],
  html[data-auth-ready="app"] body[data-route="pfi"] .pfi-form .item-row > div[style*="grid-template-columns:2fr 1fr"],
  html[data-auth-ready="app"] body[data-route="pfi"] .pfi-form .item-row > div[style*="grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr"]{
    grid-template-columns:1fr !important;
  }

  html[data-auth-ready="app"] body[data-route="pfi"] .pfi-form > div:last-child{
    flex-direction:column !important;
  }
}

/* Final SOF overrides for the compact authenticated skin */
html[data-auth-ready="app"] body[data-route="sof"] #app-content{
  background:#f7faff !important;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content > .page-container{
  width:100% !important;
  max-width:none !important;
  padding:1.05rem 1.1rem 1.8rem !important;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-page{
  --sof-blue:#001b8e;
  --sof-blue-2:#0045e8;
  --sof-purple:#4b16b8;
  --sof-text:#081947;
  --sof-muted:#51607c;
  --sof-line:#d8e1f1;
  --sof-soft:#f8fbff;
  --sof-green:#137b43;
  --sof-red:#e11d48;
  display:flex;
  flex-direction:column;
  gap:1rem;
  color:var(--sof-text);
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-header{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-header h1{
  margin:0;
  color:#00146d !important;
  font-size:1.65rem !important;
  line-height:1.05;
  font-weight:900 !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-header p{
  margin:.45rem 0 0;
  color:#001b8e;
  font-size:.88rem;
  font-weight:650;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-actions{
  display:flex;
  justify-content:flex-end;
  gap:.7rem;
  flex-wrap:wrap;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-actions button,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-outline,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-primary{
  min-height:2.15rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  border:1px solid var(--sof-line);
  border-radius:5px;
  background:#fff;
  color:var(--sof-blue);
  padding:.55rem .85rem;
  font-size:.72rem;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 5px 16px rgba(8,25,71,.04);
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-actions button:disabled,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-outline:disabled,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-primary:disabled{
  opacity:.48;
  cursor:not-allowed;
  box-shadow:none;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-actions span,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-outline span,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-primary span{
  font-size:1rem;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-card{
  border:1px solid var(--sof-line);
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 28px rgba(8,25,71,.045);
  padding:1rem;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-card.active-panel{
  border-color:#9ebcff;
  box-shadow:0 12px 32px rgba(0,69,232,.08);
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-title,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-subtitle{
  margin:0 0 .8rem;
  color:var(--sof-blue);
  font-size:.8rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-grid{
  display:grid;
  grid-template-columns:1.15fr 1.1fr .78fr;
  gap:1rem;
  align-items:stretch;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-option{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  gap:.9rem;
  align-items:center;
  min-height:5.6rem;
  border:1px solid var(--sof-line);
  border-radius:7px;
  background:linear-gradient(180deg,#fff,#f9fbff);
  padding:1rem;
  text-align:left;
  color:var(--sof-text);
  cursor:pointer;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-option.active{
  border-color:#336dff;
  box-shadow:inset 0 0 0 1px rgba(51,109,255,.22);
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-option:focus-visible,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-outline:focus-visible,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-primary:focus-visible,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-add-line:focus-visible,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-icon:focus-visible{
  outline:3px solid rgba(0,69,232,.22);
  outline-offset:2px;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-option > .material-symbols-outlined{
  font-size:2.05rem;
  color:#0644df;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-radio-dot{
  width:1.15rem;
  height:1.15rem;
  border-radius:50%;
  border:2px solid #2454dc;
  background:radial-gradient(circle,#2454dc 0 36%,transparent 39%);
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-radio-dot.empty{
  background:#fff;
  border-color:#24427f;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-option strong{
  display:block;
  color:#0021a7;
  font-size:.78rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-option small{
  display:block;
  margin-top:.45rem;
  color:#001b8e;
  font-size:.72rem;
  line-height:1.55;
  font-weight:650;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-help{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.75rem;
  padding:.85rem;
  border:1px solid #cfe0f8;
  border-radius:6px;
  background:#f3f8ff;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-help > span{
  width:1.45rem;
  height:1.45rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#1251df;
  color:#fff;
  font-size:1rem;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-help strong{
  color:#001b8e;
  font-size:.76rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-help p{
  margin:.55rem 0 0;
  color:#001b8e;
  font-size:.7rem;
  line-height:1.55;
  font-weight:650;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-panels{
  display:grid;
  grid-template-columns:1fr 1.22fr;
  gap:1rem;
  align-items:start;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.8rem;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-panel-head h2{
  margin:0;
  color:#0021c1 !important;
  font-size:.9rem !important;
  font-weight:900 !important;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .forecast .sof-panel-head h2{
  color:#4b16b8 !important;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-panel-head span{
  padding:.34rem .55rem;
  border-radius:4px;
  background:#edf4ff;
  color:#003ee2;
  font-size:.7rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .forecast .sof-panel-head span{
  color:#4b16b8;
  background:#f1eaff;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-info{
  display:flex;
  gap:.65rem;
  align-items:flex-start;
  padding:.75rem;
  border:1px solid #d8e7ff;
  border-radius:5px;
  background:#f5f9ff;
  color:#0025b8;
  margin-bottom:.9rem;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-info.purple{
  border-color:#e2d8ff;
  background:#fbf8ff;
  color:#3f129d;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-info span{
  font-size:1rem;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-info p{
  margin:0;
  font-size:.7rem;
  line-height:1.55;
  font-weight:750;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-form-grid{
  display:grid;
  gap:.85rem 1rem;
  margin-bottom:1rem;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-form-grid.three{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-form-grid label{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-form-grid span{
  color:#001b8e;
  font-size:.68rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-form-grid input,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-form-grid select,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-qty,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-select{
  width:100%;
  height:2.15rem;
  border:1px solid #cfd9e8;
  border-radius:4px;
  background:#fff;
  color:#001b8e;
  padding:0 .65rem;
  font-size:.72rem;
  font-weight:700;
  outline:0;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-form-grid input[readonly]{
  background:#fbfdff;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-form-grid .sof-paid-input{
  color:#137b43;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table-wrap{
  overflow:auto;
  border:1px solid #e3eaf5;
  border-radius:5px;
  background:#fff;
  -webkit-overflow-scrolling:touch;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table{
  width:100%;
  min-width:45rem;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:.69rem;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .forecast-table{
  min-width:50rem;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table th{
  padding:.68rem .55rem;
  background:#f5f8fd;
  color:#001b8e;
  border-bottom:1px solid #e3eaf5;
  font-size:.62rem;
  line-height:1.25;
  font-weight:900;
  text-align:left;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table td{
  padding:.62rem .55rem;
  border-bottom:1px solid #eef3fa;
  color:#001b8e;
  font-weight:700;
  vertical-align:middle;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table th:first-child,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table td:first-child{
  width:2.4rem;
  text-align:center;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table tfoot td{
  font-weight:900;
  background:#fbfdff;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-status{
  display:inline-flex;
  align-items:center;
  min-height:1.2rem;
  padding:.18rem .42rem;
  border-radius:4px;
  background:#e8f7ed;
  color:#137b43;
  font-size:.62rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-empty{
  padding:1rem !important;
  color:#64748b !important;
  text-align:center !important;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-spec-card{
  margin-top:1rem;
  border:1px solid #e3eaf5;
  border-radius:5px;
  padding:.8rem;
  background:#fff;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-spec-card h3{
  margin:0 0 .7rem;
  color:#001b8e;
  font-size:.72rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-spec-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.7rem;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-spec{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.55rem;
  align-items:center;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-spec > span{
  width:2rem;
  height:2rem;
  border:1px solid #cbd7eb;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#001b8e;
  background:#f5f8ff;
  font-size:1.05rem;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-spec small,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-spec strong{
  display:block;
  color:#001b8e;
  font-size:.64rem;
  line-height:1.3;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-spec strong{
  margin-top:.12rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-card-actions{
  display:flex;
  justify-content:space-between;
  gap:.8rem;
  flex-wrap:wrap;
  margin-top:1rem;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-card-actions.end{
  justify-content:flex-end;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-primary{
  border-color:#0045e8;
  background:#0045e8;
  color:#fff;
  min-width:9rem;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-primary.purple{
  border-color:#5b21b6;
  background:#5b21b6;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-add-line{
  width:100%;
  margin-top:.75rem;
  min-height:2.05rem;
  border:1px dashed #6d28d9;
  border-radius:5px;
  background:#fff;
  color:#4b16b8;
  font-size:.72rem;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  cursor:pointer;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-icon{
  width:1.9rem;
  height:1.9rem;
  border:1px solid #fecdd3;
  border-radius:5px;
  background:#fff;
  color:var(--sof-red);
  display:grid;
  place-items:center;
  cursor:pointer;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-icon span{
  font-size:1rem;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-note{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  margin-top:1rem;
  padding:.75rem;
  border:1px solid #f3d7a4;
  border-radius:5px;
  background:#fff9ed;
  color:#795100;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-note span{
  font-size:1.05rem;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-note p{
  margin:0;
  font-size:.68rem;
  line-height:1.55;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-footer{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.72rem .9rem;
  border:1px solid var(--sof-line);
  border-radius:5px;
  background:#f2f7ff;
  color:#001b8e;
  font-size:.72rem;
  font-weight:700;
}

@media (max-width:1240px){
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-grid,
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-panels{
    grid-template-columns:1fr;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-help{
    grid-column:1;
  }
}

@media (max-width:980px){
  html[data-auth-ready="app"] body[data-route="sof"] #app-content > .page-container{
    padding:.85rem !important;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-header{
    align-items:stretch;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-actions button{
    width:100%;
    min-width:0;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-form-grid.three{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-spec-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-header{
    flex-direction:column;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-actions{
    width:100%;
    justify-content:flex-start;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-form-grid.three,
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-spec-grid{
    grid-template-columns:1fr;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-option{
    grid-template-columns:auto minmax(0,1fr);
    gap:.75rem;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-option > .material-symbols-outlined{
    display:none;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-card-actions,
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-card-actions.end{
    flex-direction:column;
    align-items:stretch;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-outline,
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-primary{
    width:100%;
  }
}

@media (max-width:640px){
  html[data-auth-ready="app"] body[data-route="sof"] #app-content > .page-container{
    padding:.65rem !important;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-page{
    gap:.75rem;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-header h1{
    font-size:1.2rem !important;
    line-height:1.18;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-header p{
    font-size:.75rem;
    line-height:1.45;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-actions{
    grid-template-columns:1fr;
    gap:.45rem;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-card{
    padding:.75rem;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-panel-head{
    align-items:flex-start;
    flex-direction:column;
    gap:.45rem;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-info,
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-note,
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-footer{
    align-items:flex-start;
    font-size:.68rem;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table-wrap{
    border:0;
    overflow:visible;
    background:transparent;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table,
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .forecast-table{
    min-width:0;
    width:100%;
    display:block;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table thead{
    display:none;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table tbody,
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table tr,
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table td{
    display:block;
    width:100%;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table tbody tr{
    margin:0 0 .7rem;
    padding:.7rem;
    border:1px solid #e3eaf5;
    border-radius:7px;
    background:#fff;
    box-shadow:0 6px 16px rgba(8,25,71,.045);
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table td{
    min-height:2rem;
    display:grid;
    grid-template-columns:minmax(6.5rem,.9fr) minmax(0,1.1fr);
    gap:.55rem;
    align-items:center;
    padding:.45rem 0;
    border-bottom:1px solid #edf3fb;
    text-align:left !important;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table td:last-child{
    border-bottom:0;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table td::before{
    content:attr(data-label);
    color:#51607c;
    font-size:.64rem;
    font-weight:900;
    text-transform:uppercase;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table tfoot{
    display:block;
    margin:.25rem 0 .8rem;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table tfoot tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.5rem;
    padding:.65rem;
    border:1px solid #dbe7f8;
    border-radius:7px;
    background:#f7fbff;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table tfoot td{
    display:none;
    border:0;
    padding:0;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table tfoot td:first-child,
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table tfoot td:nth-child(4),
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table tfoot td:nth-child(6){
    display:block;
    width:auto;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table tfoot td:first-child{
    grid-column:1/-1;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table tfoot td::before{
    content:"";
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-qty,
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-select{
    min-width:0;
  }
}

@media (max-width:420px){
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-option,
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-help{
    padding:.65rem;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-form-grid input,
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-form-grid select,
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-qty,
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-select{
    font-size:.7rem;
    padding:0 .5rem;
  }
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table td{
    grid-template-columns:1fr;
    gap:.25rem;
  }
}

/* SOF dashboard responsive fit refinements */
html[data-auth-ready="app"] body[data-route="sof"] #app-content,
html[data-auth-ready="app"] body[data-route="sof"] #app-content > .page-container,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-page,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-card,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-option,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-help,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-panels > *{
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-page{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-header > div:first-child{
  min-width:0;
  max-width:46rem;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-actions{
  flex:0 1 auto;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-actions button{
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(17rem,.72fr);
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-panels{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table{
  min-width:42rem;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .forecast-table{
  min-width:46rem;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table th,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table td{
  overflow-wrap:anywhere;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-card-actions .sof-outline,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-card-actions .sof-primary{
  flex:1 1 11rem;
  min-width:0;
}

@media (min-width:1640px){
  html[data-auth-ready="app"] body[data-route="sof"] #app-content > .page-container{
    padding-left:1.35rem !important;
    padding-right:1.35rem !important;
  }

  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-panels{
    grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  }
}

@media (max-width:1240px){
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-help{
    grid-column:1/-1;
  }

  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-panels{
    grid-template-columns:1fr;
  }

  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table,
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .forecast-table{
    min-width:58rem;
  }
}

@media (max-width:1120px){
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-header{
    flex-direction:column;
    align-items:stretch;
  }

  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-header > div:first-child{
    max-width:none;
  }

  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-actions button{
    width:100%;
    white-space:normal;
  }
}

@media (max-width:820px){
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-mode-grid{
    grid-template-columns:1fr;
  }

  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-reference-actions{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-ref-table,
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .forecast-table{
    min-width:0;
  }
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sales-order-header.so-hero h1{
  color:#fff !important;
  font-size:1.85rem !important;
  font-weight:900 !important;
  opacity:1 !important;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sales-order-header.so-hero p{
  display:block !important;
  color:rgba(255,255,255,.78) !important;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .so-card h2,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .so-section-head h2{
  color:#0d1b2f !important;
  font-size:1.05rem !important;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .so-kpi-card strong{
  color:#0d1b2f !important;
  font-size:1.55rem !important;
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sales-order-header.so-hero h1{
    font-size:1.35rem !important;
  }
}

/* ================================================================
   Customers Module Polish
   ================================================================ */
body[data-route="customers"] #app-content{
  background:
    linear-gradient(135deg,rgba(5,22,48,.04),rgba(255,255,255,0) 34%),
    linear-gradient(180deg,#f6f9fd 0%,#eef4fb 100%);
}

body[data-route="customers"] #app-content > .page-container{
  max-width:104rem !important;
  padding-top:1rem;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .customers-page{
  --cust-navy:#071a37;
  --cust-ink:#0d1b2f;
  --cust-muted:#64748b;
  --cust-blue:#155eef;
  --cust-gold:#d99a12;
  --cust-line:#d9e4f2;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  color:var(--cust-ink);
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:1rem;
  padding:1.15rem;
  border:1px solid rgba(7,26,55,.16);
  border-radius:8px;
  background:
    linear-gradient(115deg,rgba(7,26,55,.98),rgba(12,49,92,.94) 58%,rgba(8,89,118,.9)),
    #071a37;
  box-shadow:0 18px 44px rgba(7,26,55,.16);
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.22;
  pointer-events:none;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-hero > *{
  position:relative;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-menu-btn{
  width:2.35rem;
  height:2.35rem;
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  color:#fff;
  background:rgba(255,255,255,.08);
  display:grid;
  place-items:center;
  cursor:pointer;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-eyebrow,
html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-section-kicker{
  display:block;
  margin:0 0 .28rem;
  color:#b77908;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-hero .cust-eyebrow{
  color:#f7cc75;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-hero h1{
  margin:0;
  color:#fff !important;
  font-size:1.85rem !important;
  line-height:1.05;
  font-weight:900 !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-hero p{
  max-width:44rem;
  margin:.45rem 0 0;
  color:rgba(255,255,255,.78);
  font-size:.86rem;
  line-height:1.55;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-hero-actions{
  display:flex;
  justify-content:flex-end;
  gap:.55rem;
  flex-wrap:wrap;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-hero-actions .btn{
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.12);
  color:#fff;
  box-shadow:none;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-hero-actions .btn-primary{
  background:#fff;
  color:#0b2b5c;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.85rem;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.8rem;
  align-items:center;
  min-height:6.2rem;
  padding:1rem;
  border:1px solid rgba(217,228,242,.92);
  border-radius:8px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:0 12px 30px rgba(15,23,42,.07);
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-card > span{
  width:2.55rem;
  height:2.55rem;
  border-radius:8px;
  display:grid;
  place-items:center;
  color:var(--cust-kpi-color);
  background:color-mix(in srgb,var(--cust-kpi-color) 12%,#fff);
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-card small,
html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-card em{
  display:block;
  color:var(--cust-muted);
  font-style:normal;
  font-size:.72rem;
  font-weight:800;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-card strong{
  display:block;
  max-width:100%;
  margin:.12rem 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--cust-ink) !important;
  font-family:var(--font-display);
  font-size:1.35rem !important;
  line-height:1.1;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-directory-card{
  padding:0 !important;
  overflow:hidden;
  border:1px solid rgba(217,228,242,.95) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 14px 34px rgba(15,23,42,.06) !important;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.05rem .85rem;
  border-bottom:1px solid rgba(217,228,242,.9);
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-section-head h2{
  margin:0;
  color:var(--cust-ink) !important;
  font-size:1.05rem !important;
  font-weight:900 !important;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-count-pill{
  display:inline-flex;
  align-items:center;
  min-height:1.7rem;
  border-radius:999px;
  padding:.24rem .65rem;
  background:#eef5ff;
  color:#155eef;
  font-size:.68rem;
  font-weight:900;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-toolbar{
  display:grid;
  grid-template-columns:minmax(16rem,1fr) 12rem;
  gap:.75rem;
  align-items:center;
  padding:1rem 1.05rem;
  background:#fbfdff;
  border-bottom:1px solid rgba(217,228,242,.9);
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-search{
  position:relative;
  display:block;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-search > span{
  position:absolute;
  left:.78rem;
  top:50%;
  transform:translateY(-50%);
  color:#64748b;
  font-size:1.05rem;
  pointer-events:none;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-search input,
html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-toolbar select{
  width:100%;
  height:2.65rem;
  border:1px solid #d7e2f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#16243a !important;
  font-size:.82rem !important;
  font-weight:700;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-search input{
  padding-left:2.35rem !important;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-search input:focus,
html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-toolbar select:focus{
  border-color:#155eef !important;
  box-shadow:0 0 0 3px rgba(21,94,239,.12) !important;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-table-wrap{
  overflow:auto;
  background:#fff;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-table{
  min-width:72rem;
  margin:0;
  border-collapse:collapse;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-table th{
  padding:.82rem .9rem !important;
  background:#f5f8fc !important;
  color:#40516c !important;
  border-bottom:1px solid rgba(217,228,242,.95) !important;
  font-size:.67rem !important;
  font-weight:900 !important;
  letter-spacing:.04em;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-table td{
  padding:.78rem .9rem !important;
  color:#1d2c45 !important;
  border-bottom:1px solid rgba(226,232,240,.9) !important;
  vertical-align:middle;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-table tbody tr:hover{
  background:#f8fbff;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-identity{
  display:flex;
  align-items:center;
  gap:.75rem;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-avatar{
  width:2.45rem;
  height:2.45rem;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:#fff;
  background:linear-gradient(135deg,#155eef,#0891b2);
  font-family:var(--font-display);
  font-size:.75rem;
  font-weight:900;
  box-shadow:0 10px 20px rgba(21,94,239,.18);
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-name-block{
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-name-block strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#0d1b2f;
  font-family:var(--font-display);
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-name-block small,
html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-email,
html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-last-order{
  color:#64748b;
  font-size:.74rem;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-contact-cell,
html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-phone{
  font-size:.82rem;
  font-weight:750;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-orders-cell{
  text-align:center;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-orders-cell span{
  display:inline-flex;
  min-width:2rem;
  height:2rem;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#f1f5f9;
  color:#64748b;
  font-family:var(--font-display);
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-orders-cell span.active{
  background:#eaf1ff;
  color:#155eef;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-value{
  color:#64748b;
  font-family:var(--font-display);
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-value.active{
  color:#16803c;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-actions{
  display:flex;
  gap:.25rem;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-actions .btn{
  width:2rem;
  height:2rem;
  min-width:2rem;
  padding:0;
  border-radius:8px;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-action-btn.danger{
  color:#dc2626 !important;
  border-color:#fecaca !important;
  background:#fff7f7 !important;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-action-btn.danger .material-symbols-outlined{
  color:#dc2626 !important;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-action-btn.danger:hover{
  color:#fff !important;
  border-color:#dc2626 !important;
  background:#dc2626 !important;
  box-shadow:0 7px 16px rgba(220,38,38,.22);
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-action-btn.danger:hover .material-symbols-outlined{
  color:#fff !important;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-empty-state{
  min-height:16rem;
  padding:2rem;
  background:#fff;
}

html[data-auth-ready="app"] body[data-route="customers"] .modal-content:has(.cust-form){
  max-width:48rem !important;
  border-radius:8px !important;
  overflow:auto !important;
}

html[data-auth-ready="app"] body[data-route="customers"] .cust-form{
  padding:.25rem 0 0;
}

html[data-auth-ready="app"] body[data-route="customers"] .cust-form .grid-2{
  gap:1rem !important;
}

html[data-auth-ready="app"] body[data-route="customers"] .cust-form .form-group{
  padding:.85rem;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:linear-gradient(180deg,#fff,#f9fbfe);
}

html[data-auth-ready="app"] body[data-route="customers"] .cust-form .form-label{
  color:#34445e;
  font-size:.72rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="customers"] .cust-form .form-input{
  border-color:#d7e2f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#16243a !important;
  font-weight:700;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-hero{
    grid-template-columns:auto minmax(0,1fr);
  }

  html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-hero-actions{
    grid-column:1/-1;
    justify-content:flex-start;
  }
}

@media (max-width:760px){
  body[data-route="customers"] #app-content > .page-container{
    padding:.75rem;
  }

  html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-hero{
    padding:1rem;
  }

  html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-hero h1{
    font-size:1.35rem !important;
  }

  html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-hero p{
    font-size:.78rem;
  }

  html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-hero-actions .btn{
    width:100%;
  }

  html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-grid,
  html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-toolbar{
    grid-template-columns:1fr;
  }

  html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-section-head{
    flex-direction:column;
  }

  html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-table{
    min-width:64rem;
  }

  html[data-auth-ready="app"] body[data-route="customers"] .cust-form .grid-2{
    grid-template-columns:1fr !important;
  }
}

/* ================================================================
   CRM Module Polish
   ================================================================ */
body[data-route="crm"] #app-content{
  background:
    linear-gradient(135deg,rgba(5,22,48,.04),rgba(255,255,255,0) 34%),
    linear-gradient(180deg,#f6f9fd 0%,#eef4fb 100%);
}

body[data-route="crm"] #app-content > .page-container{
  max-width:104rem !important;
  padding-top:1rem;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-page{
  --crm-navy:#071a37;
  --crm-ink:#0d1b2f;
  --crm-muted:#64748b;
  --crm-blue:#155eef;
  --crm-gold:#d99a12;
  --crm-line:#d9e4f2;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  color:var(--crm-ink);
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:1rem;
  padding:1.15rem;
  border:1px solid rgba(7,26,55,.16);
  border-radius:8px;
  background:
    linear-gradient(115deg,rgba(7,26,55,.98),rgba(32,31,92,.94) 58%,rgba(78,38,118,.9)),
    #071a37;
  box-shadow:0 18px 44px rgba(7,26,55,.16);
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.22;
  pointer-events:none;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-hero > *{
  position:relative;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-menu-btn{
  width:2.35rem;
  height:2.35rem;
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  color:#fff;
  background:rgba(255,255,255,.08);
  display:grid;
  place-items:center;
  cursor:pointer;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-eyebrow,
html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-section-kicker{
  display:block;
  margin:0 0 .28rem;
  color:#b77908;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-hero .crm-eyebrow{
  color:#f7cc75;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-hero h1{
  margin:0;
  color:#fff !important;
  font-size:1.85rem !important;
  line-height:1.05;
  font-weight:900 !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-hero p{
  max-width:45rem;
  margin:.45rem 0 0;
  color:rgba(255,255,255,.78);
  font-size:.86rem;
  line-height:1.55;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-hero-actions{
  display:flex;
  justify-content:flex-end;
  gap:.55rem;
  flex-wrap:wrap;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-hero-actions .btn{
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.12);
  color:#fff;
  box-shadow:none;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-hero-actions .btn-primary{
  background:#fff;
  color:#22124f;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.85rem;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-kpi-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.8rem;
  align-items:center;
  min-height:6.2rem;
  padding:1rem;
  border:1px solid rgba(217,228,242,.92);
  border-radius:8px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:0 12px 30px rgba(15,23,42,.07);
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-kpi-card > span{
  width:2.55rem;
  height:2.55rem;
  border-radius:8px;
  display:grid;
  place-items:center;
  color:var(--crm-kpi-color);
  background:color-mix(in srgb,var(--crm-kpi-color) 12%,#fff);
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-kpi-card small,
html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-kpi-card em{
  display:block;
  color:var(--crm-muted);
  font-style:normal;
  font-size:.72rem;
  font-weight:800;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-kpi-card strong{
  display:block;
  max-width:100%;
  margin:.12rem 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--crm-ink) !important;
  font-family:var(--font-display);
  font-size:1.35rem !important;
  line-height:1.1;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-board-shell{
  overflow:hidden;
  border:1px solid rgba(217,228,242,.95);
  border-radius:8px;
  background:rgba(255,255,255,.96);
  box-shadow:0 14px 34px rgba(15,23,42,.06);
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-board-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.05rem .85rem;
  border-bottom:1px solid rgba(217,228,242,.9);
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-board-head h2{
  margin:0;
  color:var(--crm-ink) !important;
  font-size:1.05rem !important;
  font-weight:900 !important;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-count-pill{
  display:inline-flex;
  align-items:center;
  min-height:1.7rem;
  border-radius:999px;
  padding:.24rem .65rem;
  background:#f2edff;
  color:#6d28d9;
  font-size:.68rem;
  font-weight:900;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-board{
  display:flex;
  gap:.9rem;
  overflow-x:auto;
  align-items:flex-start;
  padding:1rem;
  background:#fbfdff;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-stage-lane{
  flex:0 0 17.25rem;
  border:1px solid rgba(217,228,242,.95);
  border-top:3px solid var(--stage-color);
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-stage-lane.drag-over{
  border-color:var(--stage-color);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--stage-color) 18%,transparent),0 16px 34px rgba(15,23,42,.1);
  transform:translateY(-1px);
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-stage-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  padding:.9rem .9rem .75rem;
  border-bottom:1px solid rgba(226,232,240,.9);
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-stage-head strong{
  display:block;
  color:#0d1b2f;
  font-size:.86rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-stage-head p{
  margin:.22rem 0 0;
  color:#64748b;
  font-size:.72rem;
  font-weight:800;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-stage-head > span{
  display:inline-flex;
  min-width:1.8rem;
  height:1.8rem;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:color-mix(in srgb,var(--stage-color) 12%,#fff);
  color:var(--stage-color);
  font-size:.72rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-stage-body{
  min-height:12rem;
  display:flex;
  flex-direction:column;
  gap:.65rem;
  padding:.75rem;
  background:#f8fbff;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-lead-card{
  cursor:grab;
  border:1px solid rgba(217,228,242,.95);
  border-left:3px solid var(--stage-color);
  border-radius:8px;
  padding:.82rem;
  background:#fff;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-lead-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(15,23,42,.1);
  border-color:color-mix(in srgb,var(--stage-color) 36%,#d9e4f2);
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-lead-top{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.65rem;
  align-items:center;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-lead-avatar{
  width:2.1rem;
  height:2.1rem;
  border-radius:8px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--stage-color),#155eef);
  font-family:var(--font-display);
  font-size:.68rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-lead-top strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#0d1b2f;
  font-family:var(--font-display);
  font-size:.82rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-lead-top p{
  margin:.16rem 0 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#64748b;
  font-size:.72rem;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-lead-meta,
html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-lead-foot{
  display:flex;
  justify-content:space-between;
  gap:.6rem;
  align-items:center;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-lead-meta{
  margin:.75rem 0 .55rem;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-lead-meta span{
  color:var(--stage-color);
  font-size:.78rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-lead-meta em{
  max-width:7rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border-radius:999px;
  padding:.18rem .5rem;
  background:#f1f5f9;
  color:#64748b;
  font-style:normal;
  font-size:.66rem;
  font-weight:850;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-progress{
  height:.42rem;
  overflow:hidden;
  border-radius:999px;
  background:#e9eef6;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-progress > div{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--stage-color),#155eef);
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-lead-foot{
  margin-top:.45rem;
  color:#64748b;
  font-size:.66rem;
  font-weight:800;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-lead-foot strong{
  color:var(--stage-color);
  font-size:.66rem;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-empty-lane{
  display:grid;
  place-items:center;
  min-height:7rem;
  border:1.5px dashed #cbd5e1;
  border-radius:8px;
  color:#7a8799;
  text-align:center;
  font-size:.76rem;
  font-weight:800;
}

html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-empty-lane span{
  color:var(--stage-color);
  opacity:.72;
}

html[data-auth-ready="app"] body[data-route="crm"] .modal-content:has(.crm-form),
html[data-auth-ready="app"] body[data-route="crm"] .modal-content:has(.crm-lead-detail),
html[data-auth-ready="app"] body[data-route="crm"] .modal-content:has(.crm-log-list){
  border-radius:8px !important;
  overflow:auto !important;
}

html[data-auth-ready="app"] body[data-route="crm"] .modal-content:has(.crm-form){
  max-width:54rem !important;
}

html[data-auth-ready="app"] body[data-route="crm"] .modal-content:has(.crm-lead-detail){
  max-width:58rem !important;
}

html[data-auth-ready="app"] body[data-route="crm"] .crm-form .grid-2{
  gap:1rem !important;
}

html[data-auth-ready="app"] body[data-route="crm"] .crm-form .form-group,
html[data-auth-ready="app"] body[data-route="crm"] .crm-log-box,
html[data-auth-ready="app"] body[data-route="crm"] .crm-log-list > div{
  border:1px solid #dbe5f0 !important;
  border-radius:8px !important;
  background:linear-gradient(180deg,#fff,#f9fbfe) !important;
}

html[data-auth-ready="app"] body[data-route="crm"] .crm-form .form-group{
  padding:.85rem;
}

html[data-auth-ready="app"] body[data-route="crm"] .crm-form .form-label{
  color:#34445e;
  font-size:.72rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="crm"] .crm-form .form-input,
html[data-auth-ready="app"] body[data-route="crm"] .crm-form .form-select,
html[data-auth-ready="app"] body[data-route="crm"] .crm-log-box .form-input,
html[data-auth-ready="app"] body[data-route="crm"] .crm-log-box .form-select{
  border-color:#d7e2f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#16243a !important;
  font-weight:700;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-hero{
    grid-template-columns:auto minmax(0,1fr);
  }

  html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-hero-actions{
    grid-column:1/-1;
    justify-content:flex-start;
  }
}

@media (max-width:760px){
  body[data-route="crm"] #app-content > .page-container{
    padding:.75rem;
  }

  html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-hero{
    padding:1rem;
  }

  html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-hero h1{
    font-size:1.35rem !important;
  }

  html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-hero p{
    font-size:.78rem;
  }

  html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-hero-actions .btn{
    width:100%;
  }

  html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-kpi-grid{
    grid-template-columns:1fr;
  }

  html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-board-head{
    flex-direction:column;
  }

  html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-board{
    padding:.75rem;
  }

  html[data-auth-ready="app"] body[data-route="crm"] #app-content .crm-stage-lane{
    flex-basis:16rem;
  }

  html[data-auth-ready="app"] body[data-route="crm"] .crm-form .grid-2,
  html[data-auth-ready="app"] body[data-route="crm"] .crm-lead-detail{
    grid-template-columns:1fr !important;
  }

  html[data-auth-ready="app"] body[data-route="crm"] .crm-log-box > div{
    flex-direction:column;
  }

  html[data-auth-ready="app"] body[data-route="crm"] .crm-log-box select,
  html[data-auth-ready="app"] body[data-route="crm"] .crm-log-box button{
    width:100% !important;
  }
}

/* ================================================================
   Products Module Polish + Product Images
   ================================================================ */
body[data-route="products"] #app-content{
  background:
    linear-gradient(135deg,rgba(5,22,48,.04),rgba(255,255,255,0) 34%),
    linear-gradient(180deg,#f6f9fd 0%,#eef4fb 100%);
}

body[data-route="products"] #app-content > .page-container{
  max-width:104rem !important;
  padding-top:1rem;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-page{
  --products-navy:#071a37;
  --products-ink:#0d1b2f;
  --products-muted:#64748b;
  --products-blue:#155eef;
  --products-line:#d9e4f2;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  color:var(--products-ink);
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:1rem;
  padding:1.15rem;
  border:1px solid rgba(7,26,55,.16);
  border-radius:8px;
  background:
    linear-gradient(115deg,rgba(7,26,55,.98),rgba(12,49,92,.94) 58%,rgba(8,89,118,.9)),
    #071a37;
  box-shadow:0 18px 44px rgba(7,26,55,.16);
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.22;
  pointer-events:none;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-hero > *{
  position:relative;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-menu-btn{
  width:2.35rem;
  height:2.35rem;
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  color:#fff;
  background:rgba(255,255,255,.08);
  display:grid;
  place-items:center;
  cursor:pointer;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-eyebrow{
  display:block;
  margin:0 0 .28rem;
  color:#f7cc75;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-hero h1{
  margin:0;
  color:#fff !important;
  font-size:1.85rem !important;
  line-height:1.05;
  font-weight:900 !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-hero p{
  max-width:45rem;
  margin:.45rem 0 0;
  color:rgba(255,255,255,.78);
  font-size:.86rem;
  line-height:1.55;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-hero-actions{
  display:flex;
  justify-content:flex-end;
  gap:.55rem;
  flex-wrap:wrap;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-hero-actions .btn{
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.12);
  color:#fff;
  box-shadow:none;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-hero-actions .btn-primary{
  background:#fff;
  color:#0b2b5c;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.85rem;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-kpi-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.8rem;
  align-items:center;
  min-height:6.2rem;
  padding:1rem;
  border:1px solid rgba(217,228,242,.92);
  border-radius:8px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:0 12px 30px rgba(15,23,42,.07);
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-kpi-card > span{
  width:2.55rem;
  height:2.55rem;
  border-radius:8px;
  display:grid;
  place-items:center;
  color:var(--products-kpi-color);
  background:color-mix(in srgb,var(--products-kpi-color) 12%,#fff);
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-kpi-card small,
html[data-auth-ready="app"] body[data-route="products"] #app-content .products-kpi-card em{
  display:block;
  color:var(--products-muted);
  font-style:normal;
  font-size:.72rem;
  font-weight:800;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-kpi-card strong{
  display:block;
  margin:.12rem 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--products-ink) !important;
  font-family:var(--font-display);
  font-size:1.35rem !important;
  line-height:1.1;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-page > div[style*="display:flex"][style*="margin-bottom:1.5rem"]{
  padding:1rem;
  border:1px solid rgba(217,228,242,.95);
  border-radius:8px;
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 30px rgba(15,23,42,.06);
  margin-bottom:0 !important;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-page > div[style*="display:flex"][style*="margin-bottom:1.5rem"] .form-input,
html[data-auth-ready="app"] body[data-route="products"] #app-content .products-page > div[style*="display:flex"][style*="margin-bottom:1.5rem"] .form-select{
  height:2.65rem;
  border-color:#d7e2f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#16243a !important;
  font-weight:700;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-toolbar{
  display:grid;
  grid-template-columns:minmax(18rem,1fr) minmax(11rem,14rem) auto;
  align-items:center;
  gap:.75rem;
  padding:1rem;
  border:1px solid rgba(217,228,242,.95);
  border-radius:8px;
  background:rgba(255,255,255,.97);
  box-shadow:0 14px 34px rgba(15,23,42,.065);
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-search{
  position:relative;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-toolbar .form-input,
html[data-auth-ready="app"] body[data-route="products"] #app-content .products-toolbar .form-select{
  height:2.65rem;
  border-color:#d7e2f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#16243a !important;
  font-weight:750;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-category-filter{
  width:100%;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-view-toggle{
  display:flex;
  gap:.25rem;
  padding:.25rem;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#f3f7fc;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-view-toggle .btn{
  width:2.25rem;
  height:2.25rem;
  border-radius:7px;
  padding:0;
  justify-content:center;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card-visual{
  height:9.35rem;
  max-height:9.35rem;
  aspect-ratio:4 / 3;
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  contain:layout paint;
  background:linear-gradient(135deg,#eef5ff,#f8fbff);
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-grid{
  align-items:stretch !important;
  grid-auto-rows:1fr !important;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)) !important;
  gap:.9rem !important;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card{
  height:100%;
  min-height:27.5rem;
  display:flex !important;
  flex-direction:column;
  transform:none !important;
  border:1px solid rgba(217,228,242,.95) !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 12px 28px rgba(15,23,42,.06) !important;
  contain:layout paint;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card::after{
  content:"";
  height:3px;
  background:linear-gradient(90deg,#155eef,#0f766e,#f59e0b);
  opacity:.88;
  order:-1;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card:hover{
  transform:none !important;
  border-color:#b9c9df !important;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:1rem !important;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card-title{
  min-height:2.9rem;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card-desc{
  min-height:2.28rem;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card-tags{
  min-height:2.35rem;
  max-height:2.35rem;
  overflow:hidden;
  align-content:flex-start;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card .product-card-footer{
  margin-top:auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:.55rem !important;
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  padding-top:.1rem !important;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card .product-card-price{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-height:1.25rem !important;
  margin:0 !important;
  color:#155eef !important;
  font-size:.98rem !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card .product-add-pfi{
  width:100% !important;
  min-width:0 !important;
  height:2.35rem !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.4rem !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card .product-card-actions{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(2rem,1fr)) !important;
  justify-content:start !important;
  gap:.45rem !important;
  width:100% !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card .product-icon-btn{
  width:100%;
  min-width:0;
  height:2.15rem;
  padding:0;
  border-radius:8px;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card-visual-img{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover;
  object-position:center;
  display:block;
  flex:0 0 auto;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card-visual-icon{
  width:4.8rem;
  height:4.8rem;
  flex:0 0 4.8rem;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(21,94,239,.08);
  font-size:3.4rem;
  color:var(--brand-blue);
  opacity:.45;
  line-height:1;
  overflow:visible;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card-status,
html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card-category{
  position:absolute;
  z-index:3;
  display:inline-flex;
  align-items:center;
  max-width:calc(100% - 1.5rem);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border-radius:999px;
  box-shadow:0 6px 14px rgba(15,23,42,.08);
  line-height:1;
  pointer-events:none;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card-status{
  top:.65rem;
  right:.75rem;
  padding:.28rem .58rem;
  background:#64748b;
  color:#fff;
  font-size:.58rem;
  font-weight:900;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card-status.active{
  background:#087443;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-card-category{
  left:.75rem;
  bottom:.65rem;
  padding:.3rem .58rem;
  background:#155eef;
  color:#fff;
  font-size:.58rem;
  font-weight:850;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-list-thumb,
html[data-auth-ready="app"] body[data-route="products"] #app-content .products-detail-thumb{
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:#eef5ff;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-list-thumb{
  width:2.45rem;
  height:2.45rem;
  border-radius:8px;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-detail-thumb{
  width:4rem;
  height:4rem;
  border-radius:8px;
  background:white;
  box-shadow:var(--shadow-sm);
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-list-thumb-img,
html[data-auth-ready="app"] body[data-route="products"] #app-content .products-detail-thumb-img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  display:block;
  object-fit:cover;
  object-position:center;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-list-thumb-icon{
  color:var(--brand-blue);
  font-size:1.15rem;
}

html[data-auth-ready="app"] body[data-route="products"] #app-content .products-detail-thumb-icon{
  color:var(--brand-blue);
  font-size:2rem;
}

html[data-auth-ready="app"] body[data-route="products"] .modal-content:has(.products-form){
  max-width:56rem !important;
  border-radius:8px !important;
  overflow:auto !important;
}

html[data-auth-ready="app"] body[data-route="products"] .products-form .grid-2{
  gap:1rem !important;
}

html[data-auth-ready="app"] body[data-route="products"] .products-form .form-group{
  padding:.85rem;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:linear-gradient(180deg,#fff,#f9fbfe);
}

html[data-auth-ready="app"] body[data-route="products"] .products-form .form-label{
  color:#34445e;
  font-size:.72rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="products"] .products-form .form-input,
html[data-auth-ready="app"] body[data-route="products"] .products-form .form-select{
  border-color:#d7e2f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#16243a !important;
  font-weight:700;
}

html[data-auth-ready="app"] body[data-route="products"] .products-image-uploader{
  display:grid;
  grid-template-columns:12rem minmax(0,1fr);
  gap:1rem;
  align-items:stretch;
}

html[data-auth-ready="app"] body[data-route="products"] .products-image-preview{
  height:9rem;
  min-height:9rem;
  max-height:9rem;
  border:1.5px dashed #cbd5e1;
  border-radius:8px;
  background:#f8fbff;
  display:grid;
  place-items:center;
  overflow:hidden;
  text-align:center;
  color:#64748b;
  font-size:.78rem;
  font-weight:800;
}

html[data-auth-ready="app"] body[data-route="products"] .products-image-preview img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  display:block;
  object-fit:cover;
  object-position:center;
}

html[data-auth-ready="app"] body[data-route="products"] .products-image-preview span{
  color:#155eef;
  font-size:2rem;
}

html[data-auth-ready="app"] body[data-route="products"] .products-image-controls{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.7rem;
}

html[data-auth-ready="app"] body[data-route="products"] .products-image-controls p{
  margin:0;
  color:#4b5d7a;
  line-height:1.5;
}

html[data-auth-ready="app"] body[data-route="products"] .products-image-controls > div{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

html[data-auth-ready="app"] body[data-route="products"] .products-image-controls small{
  color:#64748b;
  font-size:.72rem;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="products"] #app-content .products-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  html[data-auth-ready="app"] body[data-route="products"] #app-content .products-toolbar{
    grid-template-columns:minmax(0,1fr) minmax(10rem,14rem) auto;
  }

  html[data-auth-ready="app"] body[data-route="products"] #app-content .products-hero{
    grid-template-columns:auto minmax(0,1fr);
  }

  html[data-auth-ready="app"] body[data-route="products"] #app-content .products-hero-actions{
    grid-column:1/-1;
    justify-content:flex-start;
  }
}

@media (max-width:760px){
  body[data-route="products"] #app-content > .page-container{
    padding:.75rem;
  }

  html[data-auth-ready="app"] body[data-route="products"] #app-content .products-hero{
    padding:1rem;
  }

  html[data-auth-ready="app"] body[data-route="products"] #app-content .products-hero h1{
    font-size:1.35rem !important;
  }

  html[data-auth-ready="app"] body[data-route="products"] #app-content .products-hero p{
    font-size:.78rem;
  }

  html[data-auth-ready="app"] body[data-route="products"] #app-content .products-hero-actions .btn{
    width:100%;
  }

  html[data-auth-ready="app"] body[data-route="products"] #app-content .products-kpi-grid{
    grid-template-columns:1fr;
  }

  html[data-auth-ready="app"] body[data-route="products"] #app-content .products-toolbar{
    grid-template-columns:1fr;
  }

  html[data-auth-ready="app"] body[data-route="products"] #app-content .products-view-toggle{
    width:100%;
    justify-content:stretch;
  }

  html[data-auth-ready="app"] body[data-route="products"] #app-content .products-view-toggle .btn{
    flex:1;
  }

  html[data-auth-ready="app"] body[data-route="products"] .products-form .grid-2,
  html[data-auth-ready="app"] body[data-route="products"] .products-image-uploader{
    grid-template-columns:1fr !important;
  }
}

/* ================================================================
   Production Module Final Polish
   ================================================================ */
body[data-route="production"] #app-content{
  background:
    linear-gradient(135deg,rgba(7,26,55,.045),rgba(255,255,255,0) 38%),
    linear-gradient(180deg,#f7fafc 0%,#eef4fb 100%);
}

body[data-route="production"] #app-content > .page-container{
  max-width:104rem !important;
  padding-top:1rem;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-module{
  --prod-ink:#0e1c31;
  --prod-line:#d9e4f2;
  display:flex;
  flex-direction:column;
  gap:1rem;
  color:var(--prod-ink);
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-control-hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:1rem;
  min-height:8rem;
  padding:1.15rem;
  border:1px solid rgba(7,26,55,.15);
  border-radius:8px;
  background:linear-gradient(115deg,#071a37 0%,#0c315c 58%,#0f766e 100%);
  box-shadow:0 18px 44px rgba(7,26,55,.16);
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-control-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:40px 40px;
  opacity:.2;
  pointer-events:none;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-control-hero > *{
  position:relative;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-menu-btn{
  width:2.35rem;
  height:2.35rem;
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  color:#fff;
  background:rgba(255,255,255,.08);
  display:grid;
  place-items:center;
  cursor:pointer;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-control-copy{
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-eyebrow{
  display:block;
  margin:0 0 .28rem;
  color:#f7cc75;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-control-copy h1{
  margin:0;
  color:#fff !important;
  font-size:1.85rem !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-control-copy p{
  max-width:48rem;
  margin:.45rem 0 0;
  color:rgba(255,255,255,.78);
  font-size:.86rem;
  line-height:1.55;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-control-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.65rem;
  flex-wrap:wrap;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-hero-metric{
  min-width:5.7rem;
  padding:.65rem .75rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:rgba(255,255,255,.1);
  color:#fff;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-hero-metric span{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:.62rem;
  font-weight:900;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-hero-metric strong{
  display:block;
  margin-top:.12rem;
  font-family:var(--font-display);
  font-size:1.35rem;
  line-height:1;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-hero-buttons{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-hero-buttons .btn{
  min-height:2.35rem;
  box-shadow:none !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-hero-buttons .btn-secondary{
  background:#fff !important;
  color:#0b2b5c !important;
  border-color:rgba(255,255,255,.3) !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));
  gap:.85rem;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card{
  min-height:5.65rem !important;
  border-radius:8px !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card{
  position:relative !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:.85rem !important;
  min-height:6.15rem !important;
  padding:1rem 1.05rem 1rem 1.15rem !important;
  overflow:hidden !important;
  border:1px solid rgba(205,217,232,.95) !important;
  border-radius:8px !important;
  background:
    linear-gradient(180deg,#fff 0%,#fbfdff 100%) !important;
  box-shadow:0 12px 28px rgba(15,23,42,.065) !important;
  transform:none !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 auto 0 0 !important;
  width:4px !important;
  height:auto !important;
  border-radius:0 !important;
  background:var(--kpi-icon-color,#155eef) !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  top:-2.4rem !important;
  right:-2rem !important;
  width:7.2rem !important;
  height:7.2rem !important;
  border-radius:999px !important;
  background:var(--kpi-icon-color,#155eef) !important;
  opacity:.075 !important;
  pointer-events:none !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card .production-kpi-accent{
  position:absolute;
  right:.85rem;
  bottom:.75rem;
  width:2.2rem;
  height:.24rem;
  border-radius:999px;
  background:var(--kpi-icon-color,#155eef);
  opacity:.28;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card .kpi-icon{
  width:3rem !important;
  height:3rem !important;
  min-width:3rem !important;
  flex:0 0 3rem !important;
  margin:0 !important;
  border-radius:8px !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(135deg,var(--kpi-icon-color,#155eef),color-mix(in srgb,var(--kpi-icon-color,#155eef) 78%,#071a37)) !important;
  color:#fff !important;
  box-shadow:0 10px 18px color-mix(in srgb,var(--kpi-icon-color,#155eef) 22%,transparent) !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card .kpi-icon .material-symbols-outlined{
  color:#fff !important;
  font-size:1.28rem !important;
  line-height:1 !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-body{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.18rem;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card .kpi-label{
  order:0;
  margin:0 !important;
  color:#64748b !important;
  font-size:.68rem !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  text-transform:uppercase !important;
  letter-spacing:.055em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card .kpi-value{
  order:1;
  margin:0 !important;
  color:#0f172a !important;
  font-family:var(--font-display) !important;
  font-size:1.72rem !important;
  font-weight:950 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card small{
  order:2;
  display:block;
  margin:.05rem 0 0 !important;
  color:#7a899d !important;
  font-size:.68rem !important;
  font-weight:750 !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.85rem;
  padding:.8rem;
  border:1px solid rgba(217,228,242,.95);
  border-radius:8px;
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 30px rgba(15,23,42,.06);
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-tabs{
  display:flex;
  gap:.28rem;
  padding:.22rem;
  border-radius:8px;
  background:#eef3f9;
  overflow-x:auto;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-tab-btn{
  min-height:2.32rem;
  padding:.48rem .78rem;
  border:0;
  border-radius:7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  white-space:nowrap;
  color:#52637a;
  background:transparent;
  font-size:.78rem;
  font-weight:850;
  cursor:pointer;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-tab-btn .material-symbols-outlined{
  font-size:1rem;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-tab-btn.active{
  background:#fff;
  color:#155eef;
  box-shadow:0 4px 12px rgba(15,23,42,.08);
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-search{
  position:relative;
  flex:0 1 25rem;
  min-width:14rem;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-search > .material-symbols-outlined{
  position:absolute;
  left:.85rem;
  top:50%;
  transform:translateY(-50%);
  color:#7b8aa0;
  font-size:1rem;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-search .form-input{
  width:100%;
  height:2.65rem;
  padding-left:2.45rem !important;
  border-color:#d7e2f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#16243a !important;
  font-weight:700;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-board{
  display:grid;
  grid-template-columns:repeat(5,minmax(13.5rem,1fr));
  gap:.85rem;
  overflow-x:auto;
  padding-bottom:.5rem;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-lane{
  min-height:22rem;
  min-width:13.5rem;
  padding:.75rem;
  border:1px solid #d9e4f2;
  border-top:4px solid var(--stage-color,#155eef);
  border-radius:8px;
  background:linear-gradient(180deg,#f8fbff,#f2f6fb);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-lane-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:.55rem;
  align-items:start;
  margin-bottom:.75rem;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-lane-head > .material-symbols-outlined{
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:color-mix(in srgb,var(--stage-color,#155eef) 12%,#fff);
  color:var(--stage-color,#155eef);
  font-size:1.05rem;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-lane-head strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#152238;
  font-family:var(--font-display);
  font-size:.86rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-lane-head small{
  display:block;
  margin-top:.08rem;
  color:#64748b;
  font-size:.62rem;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-lane-head em{
  min-width:1.65rem;
  height:1.65rem;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--stage-color,#155eef);
  color:#fff;
  font-style:normal;
  font-size:.7rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-lane-stack{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-lane-empty{
  margin:0;
  min-height:5.5rem;
  display:grid;
  place-items:center;
  text-align:center;
  color:#8a98ac;
  font-size:.74rem;
  font-weight:800;
  border:1px dashed #ccd8e8;
  border-radius:8px;
  background:rgba(255,255,255,.62);
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-job-card{
  display:flex;
  flex-direction:column;
  gap:.48rem;
  padding:.72rem;
  border:1px solid #d9e4f2;
  border-left:3px solid var(--stage-color,#155eef);
  border-radius:8px;
  background:#fff;
  box-shadow:0 6px 14px rgba(15,23,42,.05);
  cursor:pointer;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-job-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.45rem;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-job-top strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#12223a;
  font-family:var(--font-display);
  font-size:.82rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-job-top span{
  flex:0 0 auto;
  padding:.14rem .42rem;
  border-radius:999px;
  background:#f1f5f9;
  color:#64748b;
  font-family:var(--font-mono);
  font-size:.62rem;
  font-weight:800;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-job-customer{
  margin:0;
  min-height:1.05rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#334155;
  font-size:.76rem;
  font-weight:750;
  line-height:1.35;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-job-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.45rem;
  color:#64748b;
  font-size:.66rem;
  font-weight:800;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-job-meta span{
  display:inline-flex;
  align-items:center;
  gap:.22rem;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-job-meta .material-symbols-outlined{
  color:var(--stage-color,#155eef);
  font-size:.86rem;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-job-progress,
html[data-auth-ready="app"] body[data-route="production"] #app-content .production-list-progress{
  height:.42rem;
  overflow:hidden;
  border-radius:999px;
  background:#e8eef7;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-job-progress span{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--stage-color,#155eef);
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-job-action{
  width:100% !important;
  min-height:2.05rem !important;
  margin-top:.05rem !important;
  font-size:.72rem !important;
  box-shadow:none !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-table-card{
  padding:0 !important;
  overflow:auto !important;
  border-radius:8px !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-data-table th{
  background:#f4f7fb;
  color:#475569;
  font-size:.68rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-data-table td{
  vertical-align:middle;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-stage-chip{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  max-width:100%;
  padding:.24rem .58rem;
  border-radius:999px;
  background:color-mix(in srgb,var(--stage-color,#155eef) 12%,#fff);
  color:var(--stage-color,#155eef);
  font-size:.7rem;
  font-weight:850;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-list-progress{
  width:6.4rem;
  max-width:100%;
  margin-bottom:.18rem;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-table-actions{
  display:flex;
  align-items:center;
  gap:.35rem;
  flex-wrap:wrap;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-table-actions .btn{
  min-height:2rem !important;
  padding:.42rem .62rem !important;
  font-size:.72rem !important;
  box-shadow:none !important;
}

@media (max-width:1050px){
  html[data-auth-ready="app"] body[data-route="production"] #app-content .production-control-hero{
    grid-template-columns:auto minmax(0,1fr);
  }
  html[data-auth-ready="app"] body[data-route="production"] #app-content .production-control-actions{
    grid-column:1/-1;
    justify-content:flex-start;
  }
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="production"] #app-content .production-control-hero{
    grid-template-columns:1fr;
    padding:1rem;
  }
  html[data-auth-ready="app"] body[data-route="production"] #app-content .production-menu-btn{
    position:absolute;
    top:.85rem;
    right:.85rem;
  }
  html[data-auth-ready="app"] body[data-route="production"] #app-content .production-control-copy h1{
    padding-right:3rem;
    font-size:1.45rem !important;
  }
  html[data-auth-ready="app"] body[data-route="production"] #app-content .production-toolbar{
    align-items:stretch;
    flex-direction:column;
  }
  html[data-auth-ready="app"] body[data-route="production"] #app-content .production-search{
    flex:1 1 auto;
    min-width:0;
  }
  html[data-auth-ready="app"] body[data-route="production"] #app-content .production-board{
    grid-template-columns:repeat(5,minmax(13.2rem,78vw));
  }
  html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card{
    min-height:5.65rem !important;
    padding:.9rem .85rem .9rem 1rem !important;
    gap:.68rem !important;
  }
  html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card .kpi-icon{
    width:2.55rem !important;
    height:2.55rem !important;
    min-width:2.55rem !important;
  }
  html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card .kpi-value{
    font-size:1.32rem !important;
  }
  html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card .kpi-label,
  html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card small{
    font-size:.62rem !important;
  }
}

@media (max-width:480px){
  html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-grid{
    grid-template-columns:1fr;
  }
}

/* Production KPI alignment: keep cards consistent with Products module. */
html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr)) !important;
  gap:.85rem !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card{
  position:relative !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:.8rem !important;
  min-height:6.2rem !important;
  padding:1rem !important;
  overflow:hidden !important;
  border:1px solid rgba(217,228,242,.92) !important;
  border-radius:8px !important;
  background:linear-gradient(180deg,#fff,#fbfdff) !important;
  box-shadow:0 12px 30px rgba(15,23,42,.07) !important;
  transform:none !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card::before,
html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card::after{
  display:none !important;
  content:none !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card > span.material-symbols-outlined{
  width:2.55rem !important;
  height:2.55rem !important;
  min-width:2.55rem !important;
  border-radius:8px !important;
  display:grid !important;
  place-items:center !important;
  color:var(--production-kpi-color) !important;
  background:color-mix(in srgb,var(--production-kpi-color) 12%,#fff) !important;
  font-size:1.35rem !important;
  box-shadow:none !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card > div{
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card small,
html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card em{
  display:block !important;
  margin:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:#64748b !important;
  font-style:normal !important;
  font-size:.72rem !important;
  font-weight:800 !important;
  line-height:1.25 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-card strong{
  display:block !important;
  margin:.12rem 0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:#0d1b2f !important;
  font-family:var(--font-display) !important;
  font-size:1.35rem !important;
  font-weight:900 !important;
  line-height:1.1 !important;
  letter-spacing:0 !important;
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:480px){
  html[data-auth-ready="app"] body[data-route="production"] #app-content .production-kpi-grid{
    grid-template-columns:1fr !important;
  }
}

/* ================================================================
   QC Module Polish
   ================================================================ */
body[data-route="qc"] #app-content{
  background:
    linear-gradient(135deg,rgba(15,118,110,.05),rgba(255,255,255,0) 36%),
    linear-gradient(180deg,#f7fafc 0%,#eef5f8 100%);
}

body[data-route="qc"] #app-content > .page-container{
  max-width:104rem !important;
  padding-top:1rem;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module{
  --qc-ink:#0e1c31;
  --qc-teal:#0f766e;
  --qc-mint:#14b8a6;
  --qc-line:#d9e4f2;
  display:flex;
  flex-direction:column;
  gap:1rem;
  color:var(--qc-ink);
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:1rem;
  min-height:8.2rem;
  padding:1.15rem;
  border:1px solid rgba(7,26,55,.15);
  border-radius:8px;
  background:linear-gradient(115deg,#063b3b 0%,#0f766e 58%,#1563cc 100%);
  color:#fff;
  box-shadow:0 18px 44px rgba(7,26,55,.16);
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:40px 40px;
  opacity:.2;
  pointer-events:none;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-hero > *{
  position:relative;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-menu-btn{
  width:2.35rem;
  height:2.35rem;
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  color:#fff;
  background:rgba(255,255,255,.08);
  display:grid;
  place-items:center;
  cursor:pointer;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-hero-copy{
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-eyebrow{
  display:block;
  margin:0 0 .28rem;
  color:#bff8ec;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-hero-title{
  display:flex;
  align-items:center;
  gap:.65rem;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-hero-title > .material-symbols-outlined{
  width:2.45rem;
  height:2.45rem;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#063b3b;
  background:#fff;
  font-size:1.25rem;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-hero-title h1{
  margin:0;
  color:#fff !important;
  font-size:1.85rem !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-hero-copy p{
  max-width:50rem;
  margin:.45rem 0 0;
  color:rgba(255,255,255,.8);
  font-size:.86rem;
  line-height:1.55;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-hero-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(8rem,1fr));
  gap:.65rem;
  align-items:stretch;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-hero-metric{
  min-width:8rem;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.55rem;
  align-items:center;
  padding:.72rem .78rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:rgba(255,255,255,.1);
  color:#fff;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-hero-metric > .material-symbols-outlined{
  width:2rem;
  height:2rem;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.16);
  font-size:1rem;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-hero-metric small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(255,255,255,.72);
  font-size:.62rem;
  font-weight:900;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-hero-metric strong{
  display:block;
  margin-top:.12rem;
  font-family:var(--font-display);
  font-size:1.35rem;
  line-height:1;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-view-tabs{
  display:flex;
  gap:.35rem;
  width:fit-content;
  max-width:100%;
  padding:.28rem;
  overflow-x:auto;
  border:1px solid rgba(217,228,242,.95);
  border-radius:8px;
  background:#eef3f9;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-view-tab{
  min-height:2.4rem;
  padding:.5rem .78rem;
  border:0;
  border-radius:7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  white-space:nowrap;
  color:#52637a;
  background:transparent;
  font-size:.78rem;
  font-weight:850;
  cursor:pointer;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-view-tab .material-symbols-outlined{
  font-size:1rem;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-view-tab em{
  min-width:1.35rem;
  height:1.35rem;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#dbe6f3;
  color:#475569;
  font-style:normal;
  font-size:.66rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-view-tab.active{
  background:#fff;
  color:#0f766e;
  box-shadow:0 4px 12px rgba(15,23,42,.08);
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-view-tab.active em{
  background:#0f766e;
  color:#fff;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-layout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(22rem,.95fr);
  gap:1rem;
  align-items:start;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-side-stack{
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .card{
  border:1px solid rgba(217,228,242,.95) !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 12px 28px rgba(15,23,42,.06) !important;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .section-header{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .section-header > .material-symbols-outlined{
  width:2.1rem;
  height:2.1rem;
  flex:0 0 2.1rem;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#0f766e;
  background:#e6f7f4;
  font-size:1.05rem;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .section-header h2{
  margin:0;
  color:#14213a;
  font-size:1rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .section-header > span:not(.material-symbols-outlined){
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .form-control,
html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .form-input,
html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .form-select{
  min-height:2.55rem;
  border-color:#d7e2f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#16243a !important;
  font-weight:700;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .table,
html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .data-table{
  width:100%;
  border-collapse:collapse;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .table th,
html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .data-table th{
  background:#f4f7fb;
  color:#475569;
  font-size:.68rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .table td,
html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .table th,
html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .data-table td,
html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .data-table th{
  padding:.78rem .85rem;
  border-bottom:1px solid #e6edf6;
  vertical-align:middle;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .btn{
  min-height:2.15rem !important;
  border-radius:8px !important;
  font-size:.76rem !important;
  font-weight:850 !important;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .btn-ghost{
  background:#fff !important;
  border:1px solid #d7e2f0 !important;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .empty-state{
  border:1px dashed #cbd8e8;
  border-radius:8px;
  background:#f8fbff;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .progress-bar{
  overflow:hidden;
  border-radius:999px;
  background:#e8eef7;
}

html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-module .progress-bar::before{
  border-radius:999px;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-hero{
    grid-template-columns:auto minmax(0,1fr);
  }
  html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-hero-metrics{
    grid-column:1/-1;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-layout{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  body[data-route="qc"] #app-content > .page-container{
    padding:.75rem;
  }
  html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-hero{
    grid-template-columns:1fr;
    padding:1rem;
  }
  html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-menu-btn{
    position:absolute;
    top:.85rem;
    right:.85rem;
  }
  html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-hero-title h1{
    padding-right:3rem;
    font-size:1.4rem !important;
  }
  html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-hero-metrics{
    grid-template-columns:1fr;
  }
  html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-view-tabs{
    width:100%;
  }
  html[data-auth-ready="app"] body[data-route="qc"] #app-content .qc-view-tab{
    flex:1 0 auto;
  }
}

/* BOM Dashboard Final Polish */
html[data-auth-ready="app"] body[data-route="bom"] #app-content,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content{
  background:
    linear-gradient(180deg,#f5f8fc 0%,#eef4fb 100%);
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content > .page-container,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content > .page-container{
  max-width:1500px;
  padding:1rem;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-page,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-page{
  --bb-navy:#102039;
  --bb-blue:#155ee8;
  --bb-line:#d9e4f2;
  --bb-soft:#f8fbff;
  gap:1rem;
  color:#14213a;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-module-header,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:1rem;
  min-height:7.4rem;
  padding:1.15rem;
  overflow:hidden;
  border:1px solid rgba(21,94,232,.24);
  border-radius:8px;
  background:
    linear-gradient(135deg,rgba(16,32,57,.98),rgba(21,94,232,.92)),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:auto,32px 32px;
  box-shadow:0 18px 36px rgba(15,23,42,.13);
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-module-header h1,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header h1{
  margin:0;
  color:#fff !important;
  font-size:1.85rem;
  font-weight:900;
  line-height:1.08;
  letter-spacing:0;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-module-header p,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header p{
  max-width:52rem;
  margin:.35rem 0 0;
  color:rgba(255,255,255,.78);
  font-size:.88rem;
  font-weight:650;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-menu-btn,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-menu-btn{
  width:2.6rem;
  height:2.6rem;
  border:1px solid rgba(255,255,255,.24);
  border-radius:8px;
  color:#fff;
  background:rgba(255,255,255,.12);
  box-shadow:0 10px 22px rgba(0,0,0,.16);
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-branch-select,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-branch-select{
  min-width:13.5rem;
  padding:.65rem .8rem;
  border:1px solid rgba(255,255,255,.24);
  border-radius:8px;
  background:rgba(255,255,255,.13);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-branch-select span,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-branch-select span{
  color:rgba(255,255,255,.7);
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-branch-select strong,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-branch-select strong{
  color:#fff;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-kpis,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-kpis{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:.85rem;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:.8rem;
  min-height:6.25rem;
  padding:1rem;
  overflow:hidden;
  border:1px solid rgba(217,228,242,.96);
  border-radius:8px;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  box-shadow:0 12px 28px rgba(15,23,42,.07);
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi-icon,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi-icon{
  width:2.55rem;
  height:2.55rem;
  flex:0 0 2.55rem;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--bimas-kpi-color,#155ee8) 22%,#d9e4f2);
  border-radius:8px;
  color:var(--bimas-kpi-color,#155ee8);
  background:color-mix(in srgb,var(--bimas-kpi-color,#155ee8) 12%,#fff);
  font-size:1.35rem;
  box-shadow:none;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi-body,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi-body{
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi-body small,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi-body small,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi-body em,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi-body em{
  display:block;
  overflow:hidden;
  color:#60708a;
  font-size:.72rem;
  font-style:normal;
  font-weight:850;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi-body strong,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi-body strong{
  display:block;
  overflow:hidden;
  margin:.28rem 0 .16rem;
  color:#102039;
  font-family:var(--font-display);
  font-size:1.36rem;
  font-weight:900;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-layout,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(22rem,.9fr);
  gap:1rem;
  align-items:start;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-main,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-main,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-chart-card,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-chart-card,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-detail-card,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-detail-card{
  overflow:hidden;
  border:1px solid rgba(217,228,242,.96);
  border-radius:8px;
  background:#fff;
  box-shadow:0 12px 30px rgba(15,23,42,.07);
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-tabs,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-tabs{
  display:flex;
  gap:.35rem;
  height:auto;
  padding:.72rem .85rem .25rem;
  overflow-x:auto;
  border-bottom:0;
  background:#f8fbff;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-tabs button,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-tabs button{
  min-height:2.25rem;
  padding:.48rem .78rem;
  border:1px solid transparent;
  border-radius:8px;
  color:#52637a;
  background:transparent;
  font-size:.76rem;
  font-weight:850;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-tabs button.active,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-tabs button.active{
  border-color:#d9e4f2;
  color:#155ee8;
  background:#fff;
  box-shadow:0 6px 14px rgba(15,23,42,.07);
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-toolbar,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-toolbar{
  gap:.6rem;
  padding:.9rem;
  border-top:1px solid #e6edf6;
  border-bottom:1px solid #e6edf6;
  background:#fff;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-search,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-search,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-toolbar select,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-toolbar select{
  min-height:2.55rem;
  border:1px solid #d7e2f0;
  border-radius:8px;
  background:#fff;
  color:#16243a;
  font-weight:750;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-search,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-search{
  min-width:18rem;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-actions .btn,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-actions .btn{
  min-height:2.3rem;
  border-radius:8px;
  font-size:.74rem;
  font-weight:850;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-table-wrap,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-table-wrap{
  padding:0 .9rem .9rem;
  overflow:auto;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-table,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-table{
  width:100%;
  min-width:62rem;
  border-collapse:separate;
  border-spacing:0;
  table-layout:auto;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-table th,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-table th{
  padding:.72rem .75rem;
  border-bottom:1px solid #dfe8f5;
  color:#52637a;
  background:#f4f7fb;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-table td,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-table td{
  padding:.76rem .75rem;
  border-bottom:1px solid #edf2f8;
  color:#24334d;
  font-size:.78rem;
  vertical-align:middle;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-table tr:hover td,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-table tr:hover td,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-table tr.selected td,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-table tr.selected td{
  background:#f8fbff;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-link,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-link{
  color:#155ee8;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-status,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-status,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-cat,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-cat{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:1.45rem;
  max-width:100%;
  padding:.22rem .5rem;
  border-radius:999px;
  font-size:.64rem;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-icon-btn,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-icon-btn{
  width:2rem;
  height:2rem;
  border:1px solid #d7e2f0;
  border-radius:8px;
  color:#52637a;
  background:#fff;
  box-shadow:0 4px 10px rgba(15,23,42,.05);
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-icon-btn:hover,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-icon-btn:hover{
  color:#155ee8;
  border-color:#bfd1ec;
  background:#f8fbff;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-table-footer,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-table-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.78rem .9rem;
  border-top:1px solid #edf2f8;
  color:#60708a;
  background:#fff;
  font-size:.75rem;
  font-weight:750;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-charts,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-charts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  gap:.85rem;
  padding:0 .9rem .9rem;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-chart-card,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-chart-card{
  padding:1rem;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-chart-card h3,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-chart-card h3,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-detail-head h2,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-detail-head h2{
  margin:0;
  color:#102039;
  font-size:.98rem;
  font-weight:900;
  letter-spacing:0;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-donut-wrap,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-donut-wrap{
  gap:1rem;
  align-items:center;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-donut,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-donut{
  width:7.1rem;
  height:7.1rem;
  flex:0 0 7.1rem;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.05);
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-donut div,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-donut div{
  width:4.55rem;
  height:4.55rem;
  box-shadow:0 6px 18px rgba(15,23,42,.08);
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-legend p,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-legend p{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:.45rem;
  margin:.4rem 0;
  color:#52637a;
  font-size:.74rem;
  font-weight:750;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-legend strong,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-legend strong{
  color:#102039;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bar-row,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bar-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(8rem,.8fr) auto;
  gap:.55rem;
  align-items:center;
  margin:.62rem 0;
  color:#52637a;
  font-size:.74rem;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bar-row > span,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bar-row > span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bar-row div,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bar-row div{
  height:.48rem;
  overflow:hidden;
  border-radius:999px;
  background:#e8eef7;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bar-row i,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bar-row i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#155ee8,#3bb273);
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-side,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-side{
  position:sticky;
  top:.85rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-detail-card,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-detail-card{
  padding:1rem;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-detail-head,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-detail-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding-bottom:.85rem;
  border-bottom:1px solid #edf2f8;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-product-info,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-info{
  display:grid;
  grid-template-columns:6rem minmax(0,1fr);
  gap:.9rem;
  align-items:start;
  padding:1rem 0;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-product-img,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-img{
  width:6rem;
  height:6rem;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid #d9e4f2;
  border-radius:8px;
  color:#155ee8;
  background:#eef5ff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-product-img img,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-img img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:#fff;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-product-img .material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-img .material-symbols-outlined{
  font-size:2rem;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-product-info p,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-info p{
  margin:0 0 .28rem;
  color:#155ee8;
  font-size:.72rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-product-info h3,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-info h3{
  margin:0 0 .7rem;
  color:#102039;
  font-size:1.05rem;
  font-weight:900;
  line-height:1.18;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-product-info dl,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-info dl{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:.32rem .6rem;
  margin:0;
  color:#52637a;
  font-size:.75rem;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-product-info dt,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-info dt{
  font-weight:850;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-product-info dd,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-info dd{
  min-width:0;
  margin:0;
  overflow:hidden;
  color:#172642;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-detail-tabs,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-detail-tabs{
  display:flex;
  gap:.35rem;
  padding:.25rem;
  border:1px solid #d9e4f2;
  border-radius:8px;
  background:#f4f7fb;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-detail-tabs button,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-detail-tabs button{
  min-height:2.15rem;
  padding:.45rem .7rem;
  border:0;
  border-radius:7px;
  color:#52637a;
  background:transparent;
  font-size:.74rem;
  font-weight:850;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-detail-tabs button.active,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-detail-tabs button.active{
  color:#155ee8;
  background:#fff;
  box-shadow:0 5px 12px rgba(15,23,42,.07);
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-table-wrap.compact,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-table-wrap.compact{
  margin-top:.85rem;
  padding:0;
  border:1px solid #edf2f8;
  border-radius:8px;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-table-wrap.compact .bimas-table,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-table-wrap.compact .bimas-table{
  min-width:42rem;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-cost-total,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-cost-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-top:.9rem;
  padding:.9rem;
  border:1px solid #cfe0f7;
  border-radius:8px;
  color:#155ee8;
  background:#eef5ff;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-cost-total span,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-cost-total span{
  color:#52637a;
  font-size:.76rem;
  font-weight:850;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-cost-total strong,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-cost-total strong{
  color:#155ee8;
  font-size:1.15rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-update,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-update{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:.18rem .55rem;
  align-items:center;
  padding:.72rem 0;
  border-bottom:1px solid #edf2f8;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-update:last-child,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-update:last-child{
  border-bottom:0;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-update > span,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-update > span{
  width:.55rem;
  height:.55rem;
  border-radius:999px;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-update strong,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-update strong,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-update small,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-update small{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-update strong,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-update strong{
  color:#102039;
  font-size:.78rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-update small,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-update small{
  grid-column:2/3;
  color:#60708a;
  font-size:.72rem;
  font-weight:700;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-update em,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-update em{
  grid-row:1/3;
  grid-column:3/4;
  align-self:center;
  padding:.24rem .48rem;
  border-radius:999px;
  color:#155ee8;
  background:#eef5ff;
  font-size:.62rem;
  font-style:normal;
  font-weight:900;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-kpis,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-layout,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-layout{
    grid-template-columns:1fr;
  }

  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-side,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-side{
    position:static;
  }
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="bom"] #app-content > .page-container,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content > .page-container{
    padding:.75rem;
  }

  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-module-header,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header{
    grid-template-columns:auto minmax(0,1fr);
    min-height:0;
    padding:1rem;
  }

  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-module-header h1,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header h1{
    font-size:1.4rem;
  }

  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-branch-select,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-branch-select{
    grid-column:1/-1;
    width:100%;
    min-width:0;
    justify-content:space-between;
  }

  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-kpis,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-kpis{
    grid-template-columns:1fr;
  }

  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-toolbar,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-toolbar{
    align-items:stretch;
  }

  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-search,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-search,
  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-toolbar select,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-toolbar select,
  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-actions,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-actions,
  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-actions .btn,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-actions .btn{
    width:100%;
    min-width:0;
  }

  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-table,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-table{
    min-width:54rem;
  }

  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-charts,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-charts{
    grid-template-columns:1fr;
  }

  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-product-info,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-info{
    grid-template-columns:4.8rem minmax(0,1fr);
  }

  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-product-img,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-img{
    width:4.8rem;
    height:4.8rem;
  }
}

/* Inventory Overview Final Polish */
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content{
  background:linear-gradient(180deg,#f5f8fc 0%,#eef4fb 100%);
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content > .page-container{
  max-width:1500px;
  padding:1rem;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-module{
  display:flex;
  flex-direction:column;
  gap:1rem;
  color:#14213a;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-manager-bar{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:1rem;
  min-height:7rem;
  margin:0;
  padding:1.15rem;
  overflow:visible;
  border:1px solid rgba(13,148,136,.24);
  border-radius:8px;
  background:
    linear-gradient(135deg,rgba(15,23,42,.98),rgba(13,148,136,.92)),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:auto,32px 32px;
  box-shadow:0 18px 36px rgba(15,23,42,.13);
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-topbar-left{
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-page-title{
  display:flex;
  align-items:center;
  gap:.65rem;
  margin:0;
  color:#fff !important;
  font-size:1.85rem !important;
  font-weight:900;
  line-height:1.08;
  letter-spacing:0;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-page-title .material-symbols-outlined{
  width:2.65rem;
  height:2.65rem;
  display:grid;
  place-items:center;
  flex:0 0 2.65rem;
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px;
  color:#fff;
  background:rgba(255,255,255,.12);
  font-size:1.3rem;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-page-sub{
  margin:.4rem 0 0;
  color:rgba(255,255,255,.78);
  font-size:.88rem;
  font-weight:650;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-topbar-right{
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-branch-pill{
  min-width:14rem;
  padding:.65rem .8rem;
  border:1px solid rgba(255,255,255,.24);
  border-radius:8px;
  color:#fff;
  background:rgba(255,255,255,.13);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-branch-pill span{
  color:rgba(255,255,255,.72);
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-branch-pill .material-symbols-outlined{
  color:#fff;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-branch-pill select{
  color:#fff;
  background:transparent;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-branch-pill select option{
  color:#14213a;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref{
  gap:1rem;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:1rem;
  padding:1rem;
  border:1px solid rgba(217,228,242,.96);
  border-radius:8px;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-eyebrow{
  display:inline-flex;
  margin-bottom:.35rem;
  color:#0f766e;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-head h2{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin:0;
  color:#102039;
  font-size:1.35rem;
  font-weight:900;
  line-height:1.1;
  letter-spacing:0;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-head h2 .material-symbols-outlined{
  width:2.1rem;
  height:2.1rem;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#0f766e;
  background:#e6f7f4;
  font-size:1.08rem;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-head p{
  max-width:46rem;
  margin:.35rem 0 0;
  color:#60708a;
  font-size:.82rem;
  font-weight:650;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.5rem;
  flex-wrap:wrap;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-last-updated{
  min-height:2rem;
  display:inline-flex;
  align-items:center;
  padding:.34rem .6rem;
  border:1px solid #d9e4f2;
  border-radius:999px;
  color:#52637a;
  background:#f8fbff;
  font-size:.72rem;
  font-weight:850;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-refresh-btn,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-action-btn{
  width:2.15rem;
  height:2.15rem;
  display:inline-grid;
  place-items:center;
  border:1px solid #d7e2f0;
  border-radius:8px;
  color:#52637a;
  background:#fff;
  box-shadow:0 4px 10px rgba(15,23,42,.05);
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-refresh-btn:hover,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-action-btn:hover{
  color:#0f766e;
  border-color:#b8d7d2;
  background:#f3fbf9;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-actions .btn,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-filter-btn,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-actions-cell .btn{
  min-height:2.25rem;
  border-radius:8px;
  font-size:.74rem;
  font-weight:850;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-actions .btn-primary{
  background:#0f766e;
  border-color:#0f766e;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-dropdown-wrap{
  position:relative;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-dropdown-menu{
  top:calc(100% + .45rem);
  right:0;
  min-width:15rem;
  padding:.35rem;
  overflow:hidden;
  border:1px solid #d9e4f2;
  border-radius:8px;
  background:#fff;
  box-shadow:0 18px 38px rgba(15,23,42,.16);
  z-index:20;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-dropdown-menu button{
  width:100%;
  min-height:2.35rem;
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.5rem .65rem;
  border:0;
  border-radius:7px;
  color:#24334d;
  background:transparent;
  font-size:.76rem;
  font-weight:800;
  text-align:left;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-dropdown-menu button:hover{
  color:#0f766e;
  background:#f3fbf9;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-disclaimer{
  margin:0;
  padding:.75rem .9rem;
  border:1px solid #f4d38a;
  border-radius:8px;
  color:#855b00;
  background:#fff8e6;
  font-size:.78rem;
  font-weight:750;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.85rem;
  margin:0;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:.8rem;
  min-height:6.25rem;
  padding:1rem;
  overflow:hidden;
  border:1px solid rgba(217,228,242,.96);
  border-radius:8px;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  box-shadow:0 12px 28px rgba(15,23,42,.07);
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-icon{
  width:2.55rem;
  height:2.55rem;
  flex:0 0 2.55rem;
  display:grid;
  place-items:center;
  border-radius:8px;
  box-shadow:none;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-icon .material-symbols-outlined{
  font-size:1.32rem;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-kpi-blue{background:#eaf2ff;color:#2563eb;}
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-kpi-green{background:#e8f8ef;color:#16803c;}
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-kpi-purple{background:#f1ebff;color:#7c3aed;}
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-kpi-red{background:#fff0f0;color:#dc2626;}
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-kpi-amber{background:#fff7e5;color:#b45309;}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-kpi-body{
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-label,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-sub{
  display:block;
  overflow:hidden;
  color:#60708a;
  font-size:.7rem;
  font-weight:850;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-value{
  display:block;
  overflow:hidden;
  margin:.28rem 0 .16rem;
  color:#102039;
  font-family:var(--font-display);
  font-size:1.26rem;
  font-weight:900;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-charts{
  display:grid;
  grid-template-columns:minmax(18rem,.92fr) minmax(22rem,1.08fr) minmax(23rem,1.1fr);
  gap:.9rem;
  margin:0;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-chart-card,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-register-card,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-accuracy-card,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-recent-card{
  overflow:hidden;
  border:1px solid rgba(217,228,242,.96);
  border-radius:8px;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-chart-card{
  min-height:16.25rem;
  padding:1rem;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-chart-card h3,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-register-header h3,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-accuracy-card h3,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-recent-card h3{
  margin:0;
  color:#102039;
  font-size:.98rem;
  font-weight:900;
  letter-spacing:0;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-card-title-row{
  align-items:center;
  gap:.75rem;
  margin-bottom:.65rem;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-donut-wrap{
  display:flex;
  align-items:center;
  gap:1rem;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-donut-chart{
  flex:0 0 11.4rem;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-donut-chart svg{
  width:11.4rem;
  height:11.4rem;
  display:block;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-donut-legend{
  min-width:0;
  flex:1;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-legend-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.18rem .45rem;
  align-items:center;
  margin:.48rem 0;
  color:#52637a;
  font-size:.74rem;
  font-weight:750;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-legend-item > span:not(.inv-legend-dot){
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-legend-item strong{
  grid-column:2/3;
  margin:0;
  color:#102039;
  font-weight:900;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-trend-svg{
  width:100%;
  min-height:12rem;
  display:block;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-trend-empty{
  min-height:12rem;
  border:1px dashed #cbd8e8;
  border-radius:8px;
  color:#60708a;
  background:#f8fbff;
  font-weight:750;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-chart-note{
  margin:.35rem 0 0;
  color:#60708a;
  font-size:.76rem;
  font-weight:650;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-view-all{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  margin-top:.75rem;
  color:#0f766e;
  font-size:.76rem;
  font-weight:900;
  cursor:pointer;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-view-all .material-symbols-outlined{
  font-size:.95rem;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-mini-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid #edf2f8;
  border-radius:8px;
  overflow:hidden;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-mini-table th{
  color:#52637a;
  background:#f4f7fb;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-mini-table th,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-mini-table td{
  padding:.68rem .7rem;
  border-bottom:1px solid #edf2f8;
  color:#24334d;
  font-size:.74rem;
  vertical-align:middle;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-register-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(18rem,21rem);
  gap:1rem;
  align-items:start;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-register-card{
  padding:1rem;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-register-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.75rem;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-filter-row{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
  margin:0 0 .85rem;
  padding:.75rem;
  border:1px solid #edf2f8;
  border-radius:8px;
  background:#f8fbff;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-search-field{
  flex:1 1 18rem;
  max-width:none;
  min-width:14rem;
  min-height:2.55rem;
  border:1px solid #d7e2f0;
  border-radius:8px;
  background:#fff;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-search-field input{
  min-height:2.55rem;
  color:#16243a;
  font-size:.78rem;
  font-weight:750;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-search-field .material-symbols-outlined{
  color:#60708a;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-select,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-filter-btn{
  min-height:2.55rem;
  border:1px solid #d7e2f0;
  border-radius:8px;
  background:#fff;
  color:#16243a;
  font-size:.76rem;
  font-weight:800;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-check-label{
  min-height:2.55rem;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .7rem;
  border:1px solid #d7e2f0;
  border-radius:8px;
  color:#52637a;
  background:#fff;
  font-size:.76rem;
  font-weight:850;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-table-wrap{
  overflow:auto;
  border:1px solid #edf2f8;
  border-radius:8px;
  background:#fff;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-table{
  width:100%;
  min-width:72rem;
  border-collapse:separate;
  border-spacing:0;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-table th{
  position:sticky;
  top:0;
  z-index:1;
  color:#52637a;
  background:#f4f7fb;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-table th,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-table td{
  padding:.74rem .78rem;
  border-bottom:1px solid #edf2f8;
  color:#24334d;
  font-size:.76rem;
  vertical-align:middle;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-table tr:hover td{
  background:#f8fbff;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-link{
  color:#0f766e;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:1.45rem;
  max-width:100%;
  padding:.22rem .5rem;
  border-radius:999px;
  font-size:.64rem;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-actions-cell{
  display:flex;
  align-items:center;
  gap:.35rem;
  min-width:14.5rem;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-action-btn.danger{
  color:#dc2626;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.85rem 0 0;
  color:#60708a;
  font-size:.75rem;
  font-weight:750;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-page-buttons button,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-page-size{
  min-height:2.15rem;
  border:1px solid #d7e2f0;
  border-radius:8px;
  background:#fff;
  color:#52637a;
  font-weight:800;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-register-side{
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-accuracy-card,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-recent-card{
  padding:1rem;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-accuracy-layout{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:1rem;
  align-items:center;
  margin:.8rem 0;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-accuracy-ring svg{
  width:7.2rem;
  height:7.2rem;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-accuracy-meta{
  min-width:0;
  text-align:left;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-accuracy-meta span,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-accuracy-meta .inv-accuracy-status{
  display:block;
  color:#60708a;
  font-size:.72rem;
  font-weight:800;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-accuracy-meta strong{
  display:block;
  margin:.25rem 0;
  color:#102039;
  font-size:1rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-recent-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:.55rem;
  align-items:center;
  padding:.72rem 0;
  border-bottom:1px solid #edf2f8;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-recent-item:last-child{
  border-bottom:0;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-recent-date{
  margin-left:0;
  color:#60708a;
  font-size:.72rem;
  font-weight:750;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-empty,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-empty-sm,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-donut-empty{
  color:#60708a;
  font-size:.78rem;
  font-weight:750;
}

@media (max-width:1320px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-charts{
    grid-template-columns:1fr 1fr;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-top-card{
    grid-column:1/-1;
  }
}

@media (max-width:1080px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-manager-bar,
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-head,
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-register-row{
    grid-template-columns:1fr;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-actions{
    justify-content:flex-start;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-charts{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content > .page-container{
    padding:.75rem;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-manager-bar{
    min-height:0;
    padding:1rem;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-page-title{
    font-size:1.4rem !important;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-page-title .material-symbols-outlined{
    width:2.35rem;
    height:2.35rem;
    flex-basis:2.35rem;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-branch-pill,
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-actions,
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-actions .btn,
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-dropdown-wrap,
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-search-field,
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-select,
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-filter-btn,
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-check-label{
    width:100%;
    min-width:0;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-dropdown-menu{
    left:0;
    right:auto;
    width:100%;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-head{
    padding:.95rem;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-head h2{
    font-size:1.15rem;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis{
    grid-template-columns:1fr;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-donut-wrap{
    flex-direction:column;
    align-items:flex-start;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-donut-chart{
    flex-basis:auto;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-filter-row{
    padding:.7rem;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-table{
    min-width:66rem;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pagination,
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-accuracy-layout,
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-recent-item{
    grid-template-columns:1fr;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pagination{
    align-items:stretch;
  }
}

/* Inventory Overview Branch + KPI Refinement */
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-branch-pill{
  display:grid !important;
  grid-template-columns:auto minmax(8rem,1fr) auto;
  align-items:center;
  gap:.55rem;
  min-width:16rem;
  max-width:24rem;
  min-height:2.75rem;
  padding:.45rem .55rem .45rem .75rem;
  border:1px solid rgba(255,255,255,.55);
  border-radius:8px;
  color:#102039 !important;
  background:#fff !important;
  box-shadow:0 14px 30px rgba(15,23,42,.18);
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-branch-pill span:first-child{
  color:#60708a !important;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-branch-pill select{
  width:100%;
  min-width:0;
  min-height:2rem;
  padding:0 1.15rem 0 0;
  border:0 !important;
  outline:0;
  color:#102039 !important;
  background:#fff !important;
  font-size:.84rem;
  font-weight:900;
  text-overflow:ellipsis;
  appearance:auto;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-branch-pill .material-symbols-outlined{
  color:#0f766e !important;
  font-size:1rem !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis{
  grid-template-columns:repeat(5,minmax(12rem,1fr));
  align-items:stretch;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card{
  --inv-kpi-accent:#0f766e;
  position:relative;
  grid-template-columns:minmax(0,1fr);
  align-content:start;
  min-height:7.15rem;
  padding:.95rem 1rem .9rem;
  border-top:3px solid var(--inv-kpi-accent);
  box-shadow:0 14px 28px rgba(15,23,42,.075);
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card::before,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card::after{
  content:none !important;
  display:none !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card:nth-child(1){--inv-kpi-accent:#2563eb;}
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card:nth-child(2){--inv-kpi-accent:#16803c;}
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card:nth-child(3){--inv-kpi-accent:#7c3aed;}
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card:nth-child(4){--inv-kpi-accent:#dc2626;}
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card:nth-child(5){--inv-kpi-accent:#b45309;}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-icon{
  width:2.25rem;
  height:2.25rem;
  position:absolute;
  top:.85rem;
  right:.85rem;
  border:1px solid color-mix(in srgb,var(--inv-kpi-accent) 18%,#d9e4f2);
  background:color-mix(in srgb,var(--inv-kpi-accent) 12%,#fff) !important;
  color:var(--inv-kpi-accent) !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-icon .material-symbols-outlined{
  color:inherit !important;
  font-size:1.16rem !important;
  font-variation-settings:'FILL' 1,'wght' 650,'GRAD' 0,'opsz' 24;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-body{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-width:0;
  padding-right:2.65rem;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-label{
  max-width:100%;
  color:#60708a;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-value{
  max-width:100%;
  margin:.42rem 0 .28rem;
  color:#102039;
  font-size:1.15rem;
  font-weight:950;
  line-height:1.08;
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
  white-space:normal;
  overflow-wrap:anywhere;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-sub{
  max-width:100%;
  color:#6b7b92;
  font-size:.69rem;
  font-weight:800;
  white-space:normal;
  overflow-wrap:normal;
}

@media (max-width:1320px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis{
    grid-template-columns:repeat(3,minmax(12rem,1fr));
  }
}

@media (max-width:1080px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-branch-pill{
    max-width:none;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis{
    grid-template-columns:repeat(2,minmax(12rem,1fr));
  }
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-branch-pill{
    grid-template-columns:auto minmax(0,1fr) auto;
    width:100%;
    min-width:0;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis{
    grid-template-columns:1fr;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card{
    min-height:6.8rem;
  }
}

/* Inventory Overview KPI Alignment Final */
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:.85rem !important;
  align-items:stretch !important;
  margin:0 !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card{
  --inv-kpi-accent:#0f766e;
  display:grid !important;
  grid-template-columns:2.55rem minmax(0,1fr) !important;
  grid-template-rows:1fr !important;
  align-items:center !important;
  gap:.75rem !important;
  min-width:0 !important;
  min-height:6.35rem !important;
  height:100% !important;
  padding:1rem !important;
  overflow:hidden !important;
  border:1px solid rgba(217,228,242,.96) !important;
  border-left:4px solid var(--inv-kpi-accent) !important;
  border-top:1px solid rgba(217,228,242,.96) !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 12px 26px rgba(15,23,42,.065) !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card:nth-child(1){--inv-kpi-accent:#2563eb;}
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card:nth-child(2){--inv-kpi-accent:#16803c;}
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card:nth-child(3){--inv-kpi-accent:#7c3aed;}
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card:nth-child(4){--inv-kpi-accent:#dc2626;}
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card:nth-child(5){--inv-kpi-accent:#b45309;}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card::before,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card::after{
  content:none !important;
  display:none !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-icon{
  position:static !important;
  width:2.55rem !important;
  height:2.55rem !important;
  min-width:2.55rem !important;
  display:grid !important;
  place-items:center !important;
  align-self:center !important;
  border:1px solid color-mix(in srgb,var(--inv-kpi-accent) 18%,#d9e4f2) !important;
  border-radius:8px !important;
  background:color-mix(in srgb,var(--inv-kpi-accent) 11%,#fff) !important;
  color:var(--inv-kpi-accent) !important;
  box-shadow:none !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-icon .material-symbols-outlined{
  color:inherit !important;
  font-size:1.25rem !important;
  line-height:1 !important;
  font-variation-settings:'FILL' 1,'wght' 650,'GRAD' 0,'opsz' 24 !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-body{
  display:grid !important;
  grid-template-rows:auto auto auto !important;
  align-content:center !important;
  gap:.18rem !important;
  min-width:0 !important;
  padding:0 !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-label{
  display:block !important;
  overflow:hidden !important;
  color:#60708a !important;
  font-size:.64rem !important;
  font-weight:900 !important;
  letter-spacing:.035em !important;
  line-height:1.2 !important;
  text-overflow:ellipsis !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-value{
  display:block !important;
  overflow:hidden !important;
  margin:.16rem 0 .08rem !important;
  color:#102039 !important;
  font-family:var(--font-display) !important;
  font-size:1.08rem !important;
  font-weight:950 !important;
  line-height:1.1 !important;
  letter-spacing:0 !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-variant-numeric:tabular-nums !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-sub{
  display:block !important;
  overflow:hidden !important;
  color:#6b7b92 !important;
  font-size:.68rem !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

@media (max-width:1320px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media (max-width:1080px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis{
    grid-template-columns:1fr !important;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card{
    min-height:5.9rem !important;
  }
}

/* Inventory Overview KPI + Category Final Correction */
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr)) !important;
  gap:.9rem !important;
  align-items:stretch !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card{
  display:grid !important;
  grid-template-columns:3rem minmax(0,1fr) !important;
  align-items:center !important;
  gap:.85rem !important;
  min-height:6.4rem !important;
  padding:1rem 1.05rem !important;
  border:1px solid rgba(217,228,242,.96) !important;
  border-left:4px solid var(--inv-kpi-accent,#0f766e) !important;
  border-radius:8px !important;
  background:linear-gradient(180deg,#fff 0%,#f9fbfe 100%) !important;
  box-shadow:0 12px 26px rgba(15,23,42,.06) !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-icon{
  position:static !important;
  width:3rem !important;
  height:3rem !important;
  min-width:3rem !important;
  align-self:center !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-body{
  display:grid !important;
  grid-template-rows:1rem 1.45rem 1rem !important;
  align-items:center !important;
  gap:.16rem !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-label,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-sub{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-label{
  color:#60708a !important;
  font-size:.66rem !important;
  font-weight:900 !important;
  letter-spacing:.035em !important;
  text-transform:uppercase !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-value{
  min-width:0 !important;
  overflow:visible !important;
  color:#102039 !important;
  font-size:1.14rem !important;
  font-weight:950 !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
  text-overflow:clip !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-sub{
  color:#6b7b92 !important;
  font-size:.68rem !important;
  font-weight:800 !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-charts{
  grid-template-columns:minmax(28rem,1.22fr) minmax(22rem,1fr) minmax(24rem,1.05fr) !important;
  align-items:stretch !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-category-card{
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-category-card .inv-donut-wrap{
  display:grid !important;
  grid-template-columns:11.25rem minmax(0,1fr) !important;
  align-items:center !important;
  gap:1rem !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-category-card .inv-donut-chart{
  width:11.25rem !important;
  min-width:11.25rem !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-category-card .inv-donut-chart svg{
  width:11.25rem !important;
  height:11.25rem !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-category-card .inv-donut-legend{
  display:flex !important;
  flex-direction:column !important;
  gap:.42rem !important;
  min-width:0 !important;
  max-height:12.5rem !important;
  overflow:auto !important;
  padding-right:.25rem !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-category-card .inv-legend-item{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) minmax(8.75rem,auto) !important;
  align-items:center !important;
  gap:.45rem !important;
  margin:0 !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-category-card .inv-legend-item > span:not(.inv-legend-dot){
  min-width:0 !important;
  overflow:visible !important;
  color:#52637a !important;
  font-size:.74rem !important;
  font-weight:800 !important;
  white-space:normal !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-category-card .inv-legend-item strong{
  grid-column:auto !important;
  justify-self:end !important;
  margin:0 !important;
  color:#102039 !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  text-align:right !important;
  white-space:normal !important;
}

@media (max-width:1320px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-charts{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis{
    grid-template-columns:1fr !important;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-card{
    grid-template-columns:2.75rem minmax(0,1fr) !important;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-kpi-icon{
    width:2.75rem !important;
    height:2.75rem !important;
    min-width:2.75rem !important;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-category-card .inv-donut-wrap{
    grid-template-columns:1fr !important;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-category-card .inv-legend-item{
    grid-template-columns:auto minmax(0,1fr) !important;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-category-card .inv-legend-item strong{
    grid-column:2/3 !important;
    justify-self:start !important;
    text-align:left !important;
  }
}

/* Inventory Overview KPI Cards - Match PFI Module */
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;
  gap:.85rem !important;
  margin:0 !important;
  align-items:stretch !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pfi-metric-card{
  position:relative !important;
  min-height:6.6rem !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto auto auto !important;
  gap:.18rem !important;
  align-items:start !important;
  overflow:hidden !important;
  padding:.95rem 1rem !important;
  border-radius:8px !important;
  border:1px solid #dbe5f0 !important;
  border-left:0 !important;
  border-top:0 !important;
  background:#fff !important;
  color:#071226 !important;
  box-shadow:0 8px 24px rgba(15,23,42,.055) !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pfi-metric-card::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:.8rem !important;
  bottom:.8rem !important;
  width:3px !important;
  display:block !important;
  border-radius:99px !important;
  background:var(--inv-pfi-tone,#123e73) !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pfi-metric-card::after{
  content:"" !important;
  position:absolute !important;
  top:-1.7rem !important;
  right:-1.2rem !important;
  width:5.7rem !important;
  height:5.7rem !important;
  display:block !important;
  border-radius:0 0 0 4rem !important;
  background:var(--inv-pfi-tone,#123e73) !important;
  opacity:.075 !important;
  pointer-events:none !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pfi-kpi-head{
  position:relative !important;
  z-index:1 !important;
  display:grid !important;
  grid-template-columns:2.55rem minmax(0,1fr) auto !important;
  align-items:start !important;
  gap:.75rem !important;
  margin:0 0 .35rem !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pfi-kpi-head .material-symbols-outlined{
  grid-column:1 !important;
  grid-row:1 / span 4 !important;
  width:2.55rem !important;
  height:2.55rem !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  border-radius:7px !important;
  background:var(--inv-pfi-tone,#123e73) !important;
  color:#fff !important;
  font-size:1.15rem !important;
  line-height:1 !important;
  opacity:1 !important;
  box-shadow:none !important;
  font-variation-settings:'FILL' 1,'wght' 650,'GRAD' 0,'opsz' 24 !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pfi-kpi-badge{
  grid-column:3 !important;
  justify-self:end !important;
  display:inline-flex !important;
  align-items:center !important;
  min-height:1.45rem !important;
  padding:.18rem .55rem !important;
  border-radius:999px !important;
  background:#eef5ff !important;
  color:#123e73 !important;
  font-size:.62rem !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pfi-metric-card .inv-kpi-value{
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  grid-row:2 !important;
  margin:0 !important;
  padding-left:3.3rem !important;
  min-width:0 !important;
  overflow:hidden !important;
  color:#071226 !important;
  font-family:var(--font-display) !important;
  font-size:clamp(1.08rem,1.25vw,1.42rem) !important;
  font-weight:950 !important;
  line-height:1.05 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  font-variant-numeric:tabular-nums !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pfi-metric-card .inv-kpi-label{
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  grid-row:3 !important;
  padding-left:3.3rem !important;
  min-width:0 !important;
  overflow:hidden !important;
  color:#475569 !important;
  font-size:.7rem !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  opacity:1 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pfi-metric-card .inv-kpi-sub{
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  grid-row:4 !important;
  margin:.45rem 0 0 !important;
  padding:.45rem 0 0 3.3rem !important;
  border-top:1px solid #edf2f7 !important;
  color:#64748b !important;
  font-size:.62rem !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis{
    grid-template-columns:1fr !important;
  }
}

/* Company switcher must remain visible in the top bar for live multi-company work. */
html[data-auth-ready="app"] #app-topbar #cs-wrap{
  display:block !important;
  visibility:visible !important;
  flex:0 0 auto !important;
  position:relative !important;
}
html[data-auth-ready="app"] #app-topbar .company-pill{
  min-height:2.25rem !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:.38rem !important;
  white-space:nowrap !important;
  background:rgba(255,255,255,.09) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
}
html[data-auth-ready="app"] #app-topbar .company-pill #cs-label{
  max-width:7rem !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
@media (max-width:560px){
  html[data-auth-ready="app"] #app-topbar #cs-wrap{
    display:block !important;
  }
  html[data-auth-ready="app"] #app-topbar .company-pill{
    width:2.25rem !important;
    min-width:2.25rem !important;
    padding:0 !important;
    justify-content:center !important;
  }
  html[data-auth-ready="app"] #app-topbar .company-pill #cs-label,
  html[data-auth-ready="app"] #app-topbar .company-pill .material-symbols-outlined:last-child{
    display:none !important;
  }
}

/* HR Module Professional Polish */
html[data-auth-ready="app"] body[data-route="hr"] #app-content{
  background:
    linear-gradient(180deg,#f4f8fd 0%,#f8fbff 46%,#ffffff 100%) !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content > .page-container{
  max-width:104rem !important;
  padding-top:1rem !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-page{
  display:flex !important;
  flex-direction:column !important;
  gap:1rem !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-hero{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:1rem !important;
  align-items:end !important;
  padding:1.15rem !important;
  border:1px solid rgba(15,42,74,.10) !important;
  border-radius:8px !important;
  background:
    radial-gradient(circle at 92% 12%,rgba(255,255,255,.18),transparent 18rem),
    linear-gradient(135deg,#0b2d54 0%,#124f8f 58%,#167a7a 100%) !important;
  color:#fff !important;
  box-shadow:0 16px 38px rgba(15,42,74,.16) !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-breadcrumb{
  display:inline-flex !important;
  align-items:center !important;
  gap:.4rem !important;
  margin-bottom:.45rem !important;
  color:rgba(255,255,255,.72) !important;
  font-size:.7rem !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-breadcrumb .material-symbols-outlined{
  font-size:1rem !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-hero h1{
  margin:0 !important;
  color:#fff !important;
  font-family:var(--font-display) !important;
  font-size:1.75rem !important;
  font-weight:950 !important;
  letter-spacing:0 !important;
  line-height:1.05 !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-hero p{
  max-width:52rem !important;
  margin:.45rem 0 0 !important;
  color:rgba(255,255,255,.78) !important;
  font-size:.86rem !important;
  line-height:1.55 !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-hero-meta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:.45rem !important;
  margin-top:.75rem !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-hero-meta span{
  display:inline-flex !important;
  align-items:center !important;
  min-height:1.6rem !important;
  padding:.28rem .55rem !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  font-size:.68rem !important;
  font-weight:850 !important;
  white-space:nowrap !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-hero-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  gap:.5rem !important;
  min-width:18rem !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-hero-actions .btn{
  border-color:rgba(255,255,255,.22) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.12) !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-kpi-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:.8rem !important;
  align-items:stretch !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-kpi-card{
  position:relative !important;
  min-height:7rem !important;
  display:grid !important;
  grid-template-columns:2.45rem minmax(0,1fr) !important;
  gap:.75rem !important;
  align-items:center !important;
  padding:1rem .95rem .85rem !important;
  border:1px solid #dbe5f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 8px 22px rgba(15,23,42,.055) !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-kpi-card::after{
  content:"" !important;
  position:absolute !important;
  top:-2.2rem !important;
  right:-1.35rem !important;
  width:5.75rem !important;
  height:5.75rem !important;
  border-radius:0 0 0 5rem !important;
  background:color-mix(in srgb,var(--hr-tone,#123e73) 11%,#fff) !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-kpi-icon{
  width:2.45rem !important;
  height:2.45rem !important;
  display:grid !important;
  place-items:center !important;
  border-radius:7px !important;
  background:var(--hr-tone,#123e73) !important;
  color:#fff !important;
  box-shadow:0 8px 16px color-mix(in srgb,var(--hr-tone,#123e73) 25%,transparent) !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-kpi-icon .material-symbols-outlined{
  font-size:1.1rem !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-kpi-main{
  min-width:0 !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-kpi-value{
  overflow:hidden !important;
  color:#0f172a !important;
  font-family:var(--font-display) !important;
  font-size:1.22rem !important;
  font-weight:950 !important;
  line-height:1.08 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-kpi-label{
  margin-top:.16rem !important;
  overflow:hidden !important;
  color:#475569 !important;
  font-size:.68rem !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-kpi-sub{
  margin-top:.48rem !important;
  padding-top:.48rem !important;
  border-top:1px solid #e6edf6 !important;
  overflow:hidden !important;
  color:#64748b !important;
  font-size:.66rem !important;
  font-weight:850 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-connect-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:.75rem !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-link-card{
  min-height:5.9rem !important;
  display:grid !important;
  grid-template-columns:2rem minmax(0,1fr) !important;
  grid-template-rows:auto auto auto !important;
  gap:.06rem .62rem !important;
  align-items:center !important;
  padding:.85rem !important;
  border:1px solid #dbe5f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#0f172a !important;
  text-align:left !important;
  cursor:pointer !important;
  box-shadow:0 6px 18px rgba(15,23,42,.045) !important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-link-card:hover{
  transform:translateY(-2px) !important;
  border-color:color-mix(in srgb,var(--hr-tone,#123e73) 32%,#dbe5f0) !important;
  box-shadow:0 14px 28px rgba(15,23,42,.09) !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-link-card .material-symbols-outlined{
  grid-column:1 !important;
  grid-row:1 / span 3 !important;
  width:2rem !important;
  height:2rem !important;
  display:grid !important;
  place-items:center !important;
  border-radius:7px !important;
  background:color-mix(in srgb,var(--hr-tone,#123e73) 13%,#fff) !important;
  color:var(--hr-tone,#123e73) !important;
  font-size:1rem !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-link-card strong{
  overflow:hidden !important;
  font-family:var(--font-display) !important;
  font-size:1rem !important;
  font-weight:950 !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-link-card span:not(.material-symbols-outlined){
  overflow:hidden !important;
  color:#334155 !important;
  font-size:.73rem !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-link-card small{
  overflow:hidden !important;
  color:#64748b !important;
  font-size:.66rem !important;
  font-weight:750 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-tabs{
  display:flex !important;
  gap:.35rem !important;
  width:100% !important;
  padding:.35rem !important;
  border:1px solid #dbe5f0 !important;
  border-radius:8px !important;
  background:#eef4fb !important;
  overflow-x:auto !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-tab{
  min-height:2.25rem !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.35rem !important;
  padding:.48rem .72rem !important;
  border:0 !important;
  border-radius:7px !important;
  background:transparent !important;
  color:#50627c !important;
  font-size:.74rem !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  cursor:pointer !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-tab.is-active{
  background:#fff !important;
  color:#123e73 !important;
  box-shadow:0 6px 16px rgba(15,42,74,.10) !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-panel{
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-panel > .card,
html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-panel .card{
  border:1px solid #dbe5f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 8px 24px rgba(15,23,42,.05) !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-directory-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(18rem,1fr)) !important;
  gap:.9rem !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-employee-card{
  display:flex !important;
  flex-direction:column !important;
  min-height:16.75rem !important;
  cursor:pointer !important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-employee-head{
  display:flex !important;
  gap:.875rem !important;
  align-items:center !important;
  min-width:0 !important;
  margin-bottom:.95rem !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-avatar{
  width:3rem !important;
  height:3rem !important;
  display:grid !important;
  place-items:center !important;
  flex-shrink:0 !important;
  border-radius:999px !important;
  color:#fff !important;
  font-family:var(--font-display) !important;
  font-size:.86rem !important;
  font-weight:950 !important;
  box-shadow:0 10px 20px rgba(15,23,42,.12) !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-employee-facts{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:.55rem !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-employee-facts > div{
  min-width:0 !important;
  min-height:3.35rem !important;
  padding:.52rem .65rem !important;
  border:1px solid #e6edf6 !important;
  border-radius:7px !important;
  background:#f8fbff !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-employee-facts p{
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-employee-actions{
  display:flex !important;
  gap:.4rem !important;
  margin-top:auto !important;
  padding-top:.85rem !important;
  border-top:1px solid #e6edf6 !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-empty-state{
  grid-column:1 / -1 !important;
  display:grid !important;
  place-items:center !important;
  gap:.45rem !important;
  min-height:17rem !important;
  padding:2rem !important;
  border:1px dashed #cbd8e7 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#64748b !important;
  text-align:center !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-empty-state .material-symbols-outlined{
  color:#94a3b8 !important;
  font-size:2.4rem !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-empty-state h3{
  margin:0 !important;
  color:#0f172a !important;
  font-family:var(--font-display) !important;
  font-size:1rem !important;
  font-weight:950 !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .data-table{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .data-table th{
  padding:.72rem .68rem !important;
  background:#f8fafc !important;
  color:#0f2a4a !important;
  font-size:.64rem !important;
  font-weight:950 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .data-table td{
  padding:.72rem .68rem !important;
  color:#24334d !important;
  font-size:.76rem !important;
  vertical-align:middle !important;
  border-bottom:1px solid #e8eef6 !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .data-table tr:hover td{
  background:#f8fbff !important;
}

html[data-auth-ready="app"] body[data-route="hr"] #app-content .section-header{
  flex-wrap:wrap !important;
  gap:.5rem !important;
}

@media (max-width:1220px){
  html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-kpi-grid,
  html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-connect-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media (max-width:900px){
  html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-hero{
    grid-template-columns:1fr !important;
    align-items:start !important;
  }

  html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-hero-actions{
    width:100% !important;
    min-width:0 !important;
    justify-content:flex-start !important;
  }

  html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-hero-actions .btn{
    flex:1 1 10rem !important;
  }

  html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-kpi-grid,
  html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-connect-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-panel [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:640px){
  html[data-auth-ready="app"] body[data-route="hr"] #app-content > .page-container{
    padding-left:.75rem !important;
    padding-right:.75rem !important;
  }

  html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-hero{
    padding:.95rem !important;
  }

  html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-hero h1{
    font-size:1.32rem !important;
  }

  html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-kpi-grid,
  html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-connect-grid,
  html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-directory-grid{
    grid-template-columns:1fr !important;
  }

  html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-tabs{
    margin-left:-.05rem !important;
    margin-right:-.05rem !important;
  }

  html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-employee-facts{
    grid-template-columns:1fr !important;
  }

  html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-employee-actions{
    flex-wrap:wrap !important;
  }
}

/* Payroll Module Professional Polish */
html[data-auth-ready="app"] body[data-route="payroll"] #app-content{
  background:linear-gradient(180deg,#f4f8fd 0%,#f8fbff 48%,#ffffff 100%) !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content > .page-container,
html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-page{
  max-width:104rem !important;
  padding-top:1rem !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-page{
  display:flex !important;
  flex-direction:column !important;
  gap:1rem !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-hero{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:1rem !important;
  align-items:end !important;
  padding:1.15rem !important;
  border:1px solid rgba(15,42,74,.10) !important;
  border-radius:8px !important;
  background:
    radial-gradient(circle at 92% 12%,rgba(255,255,255,.18),transparent 18rem),
    linear-gradient(135deg,#0b2d54 0%,#123e73 52%,#0f766e 100%) !important;
  color:#fff !important;
  box-shadow:0 16px 38px rgba(15,42,74,.16) !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-breadcrumb{
  display:inline-flex !important;
  align-items:center !important;
  gap:.4rem !important;
  margin-bottom:.45rem !important;
  color:rgba(255,255,255,.72) !important;
  font-size:.7rem !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-breadcrumb .material-symbols-outlined{
  font-size:1rem !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-hero h1{
  margin:0 !important;
  color:#fff !important;
  font-family:var(--font-display) !important;
  font-size:1.75rem !important;
  font-weight:950 !important;
  letter-spacing:0 !important;
  line-height:1.05 !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-hero p{
  max-width:52rem !important;
  margin:.45rem 0 0 !important;
  color:rgba(255,255,255,.78) !important;
  font-size:.86rem !important;
  line-height:1.55 !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-hero-meta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:.45rem !important;
  margin-top:.75rem !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-hero-meta span{
  display:inline-flex !important;
  align-items:center !important;
  min-height:1.6rem !important;
  padding:.28rem .55rem !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  font-size:.68rem !important;
  font-weight:850 !important;
  white-space:nowrap !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-hero-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  gap:.5rem !important;
  min-width:20rem !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-hero-actions .btn{
  border-color:rgba(255,255,255,.22) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.12) !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-kpi-grid,
html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-report-kpis{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:.8rem !important;
  align-items:stretch !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-report-kpis{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-kpi-card{
  position:relative !important;
  min-height:7rem !important;
  display:grid !important;
  grid-template-columns:2.45rem minmax(0,1fr) !important;
  gap:.75rem !important;
  align-items:center !important;
  padding:1rem .95rem .85rem !important;
  border:1px solid #dbe5f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 8px 22px rgba(15,23,42,.055) !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-kpi-card::after{
  content:"" !important;
  position:absolute !important;
  top:-2.2rem !important;
  right:-1.35rem !important;
  width:5.75rem !important;
  height:5.75rem !important;
  border-radius:0 0 0 5rem !important;
  background:color-mix(in srgb,var(--payroll-tone,#123e73) 11%,#fff) !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-kpi-icon{
  width:2.45rem !important;
  height:2.45rem !important;
  display:grid !important;
  place-items:center !important;
  border-radius:7px !important;
  background:var(--payroll-tone,#123e73) !important;
  color:#fff !important;
  box-shadow:0 8px 16px color-mix(in srgb,var(--payroll-tone,#123e73) 25%,transparent) !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-kpi-icon .material-symbols-outlined{
  font-size:1.1rem !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-kpi-main{
  min-width:0 !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-kpi-value{
  overflow:hidden !important;
  color:#0f172a !important;
  font-family:var(--font-display) !important;
  font-size:1.16rem !important;
  font-weight:950 !important;
  line-height:1.08 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-kpi-label{
  margin-top:.16rem !important;
  overflow:hidden !important;
  color:#475569 !important;
  font-size:.68rem !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-kpi-sub{
  margin-top:.48rem !important;
  padding-top:.48rem !important;
  border-top:1px solid #e6edf6 !important;
  overflow:hidden !important;
  color:#64748b !important;
  font-size:.66rem !important;
  font-weight:850 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-connect-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:.75rem !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-link-card{
  min-height:5.9rem !important;
  display:grid !important;
  grid-template-columns:2rem minmax(0,1fr) !important;
  grid-template-rows:auto auto auto !important;
  gap:.06rem .62rem !important;
  align-items:center !important;
  padding:.85rem !important;
  border:1px solid #dbe5f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#0f172a !important;
  text-align:left !important;
  cursor:pointer !important;
  box-shadow:0 6px 18px rgba(15,23,42,.045) !important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-link-card:hover{
  transform:translateY(-2px) !important;
  border-color:color-mix(in srgb,var(--payroll-tone,#123e73) 32%,#dbe5f0) !important;
  box-shadow:0 14px 28px rgba(15,23,42,.09) !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-link-card .material-symbols-outlined{
  grid-column:1 !important;
  grid-row:1 / span 3 !important;
  width:2rem !important;
  height:2rem !important;
  display:grid !important;
  place-items:center !important;
  border-radius:7px !important;
  background:color-mix(in srgb,var(--payroll-tone,#123e73) 13%,#fff) !important;
  color:var(--payroll-tone,#123e73) !important;
  font-size:1rem !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-link-card strong{
  overflow:hidden !important;
  font-family:var(--font-display) !important;
  font-size:1rem !important;
  font-weight:950 !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-link-card span:not(.material-symbols-outlined){
  overflow:hidden !important;
  color:#334155 !important;
  font-size:.73rem !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-link-card small{
  overflow:hidden !important;
  color:#64748b !important;
  font-size:.66rem !important;
  font-weight:750 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-tabs{
  display:flex !important;
  gap:.35rem !important;
  width:100% !important;
  padding:.35rem !important;
  border:1px solid #dbe5f0 !important;
  border-radius:8px !important;
  background:#eef4fb !important;
  overflow-x:auto !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-tab{
  min-height:2.25rem !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.35rem !important;
  padding:.48rem .72rem !important;
  border:0 !important;
  border-radius:7px !important;
  background:transparent !important;
  color:#50627c !important;
  font-size:.74rem !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  cursor:pointer !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-tab.is-active{
  background:#fff !important;
  color:#123e73 !important;
  box-shadow:0 6px 16px rgba(15,42,74,.10) !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-card{
  border:1px solid #dbe5f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 8px 24px rgba(15,23,42,.05) !important;
  padding:1rem !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-card .section-header{
  flex-wrap:wrap !important;
  gap:.5rem !important;
  margin-bottom:.95rem !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-table{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-table th{
  padding:.72rem .68rem !important;
  background:#f8fafc !important;
  color:#0f2a4a !important;
  font-size:.64rem !important;
  font-weight:950 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-table td{
  padding:.72rem .68rem !important;
  color:#24334d !important;
  font-size:.76rem !important;
  vertical-align:middle !important;
  border-bottom:1px solid #e8eef6 !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-table tr:hover td{
  background:#f8fbff !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-row-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:.32rem !important;
  align-items:center !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-empty-state{
  display:grid !important;
  place-items:center !important;
  gap:.45rem !important;
  min-height:17rem !important;
  padding:2rem !important;
  border:1px dashed #cbd8e7 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#64748b !important;
  text-align:center !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-empty-state .material-symbols-outlined{
  color:#94a3b8 !important;
  font-size:2.4rem !important;
}

html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-empty-state h3{
  margin:0 !important;
  color:#0f172a !important;
  font-family:var(--font-display) !important;
  font-size:1rem !important;
  font-weight:950 !important;
}

@media (max-width:1220px){
  html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-kpi-grid,
  html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-connect-grid,
  html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-report-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media (max-width:900px){
  html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-hero{
    grid-template-columns:1fr !important;
    align-items:start !important;
  }

  html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-hero-actions{
    width:100% !important;
    min-width:0 !important;
    justify-content:flex-start !important;
  }

  html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-hero-actions .btn{
    flex:1 1 9rem !important;
  }

  html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-kpi-grid,
  html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-connect-grid,
  html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-report-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:640px){
  html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-page{
    padding-left:.75rem !important;
    padding-right:.75rem !important;
  }

  html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-hero{
    padding:.95rem !important;
  }

  html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-hero h1{
    font-size:1.32rem !important;
  }

  html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-kpi-grid,
  html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-connect-grid,
  html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-report-kpis{
    grid-template-columns:1fr !important;
  }

  html[data-auth-ready="app"] body[data-route="payroll"] #app-content .payroll-card{
    padding:.85rem !important;
  }
}

/* ================================================================
   Financial reports module polish
   ================================================================ */
html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .financial-reports-module{
  max-width:100%;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-page-header{
  border:1px solid rgba(203,213,225,.9);
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 58%,#f3f8f4 100%);
  box-shadow:0 14px 32px rgba(15,23,42,.075);
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-header-main{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
  width:100%;
  flex-wrap:wrap;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-title-block{
  min-width:0;
  max-width:58rem;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-bottom:.55rem;
  padding:.32rem .65rem;
  border:1px solid #dbeafe;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:.68rem;
  font-weight:950;
  letter-spacing:0;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-eyebrow .material-symbols-outlined{
  font-size:.95rem;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-title-block h1{
  margin:0;
  letter-spacing:0;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:.75rem;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-meta-row span{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  min-height:1.85rem;
  padding:.25rem .6rem;
  border:1px solid #e2e8f0;
  border-radius:999px;
  background:#fff;
  color:#475569;
  font-size:.72rem;
  font-weight:850;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-meta-row .material-symbols-outlined{
  color:#1d4ed8;
  font-size:1rem;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-header-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-header-actions .btn{
  min-height:2.35rem;
  justify-content:center;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  margin-bottom:1rem;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-kpi-card{
  position:relative;
  min-height:7.45rem;
  display:grid;
  grid-template-columns:2.55rem minmax(0,1fr) auto;
  grid-template-rows:auto auto 1fr auto;
  column-gap:.85rem;
  align-items:center;
  overflow:hidden;
  padding:1.05rem 1rem .85rem;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-kpi-card::after{
  content:"";
  position:absolute;
  top:-2.15rem;
  right:-1.35rem;
  width:5.65rem;
  height:5.65rem;
  border-radius:0 0 0 5rem;
  background:color-mix(in srgb,var(--finrep-tone,#1d4ed8) 10%,#fff);
  pointer-events:none;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-kpi-icon{
  grid-column:1;
  grid-row:1 / span 2;
  width:2.35rem;
  height:2.35rem;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:var(--finrep-tone,#1d4ed8);
  color:#fff;
  box-shadow:0 8px 16px color-mix(in srgb,var(--finrep-tone,#1d4ed8) 26%,transparent);
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-kpi-icon .material-symbols-outlined{
  font-size:1.05rem;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-kpi-value{
  grid-column:2 / 3;
  grid-row:1;
  min-width:0;
  overflow:hidden;
  color:#0f172a;
  font-family:var(--font-display);
  font-size:1.16rem;
  font-weight:950;
  line-height:1.08;
  letter-spacing:0;
  white-space:nowrap;
  text-overflow:ellipsis;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-kpi-label{
  grid-column:2 / 4;
  grid-row:2;
  min-width:0;
  margin-top:.08rem;
  overflow:hidden;
  color:#475569;
  font-size:.68rem;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-kpi-badge{
  grid-column:3;
  grid-row:1;
  justify-self:end;
  align-self:start;
  min-height:1.25rem;
  padding:.12rem .48rem;
  border-radius:999px;
  color:#123e73;
  font-size:.56rem;
  font-weight:950;
  line-height:1;
  text-transform:uppercase;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-kpi-sub{
  grid-column:2 / 4;
  grid-row:4;
  min-width:0;
  padding-top:.52rem;
  border-top:1px solid #e6edf6;
  overflow:hidden;
  color:#64748b;
  font-size:.68rem;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-source-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.75rem;
  margin-bottom:1.25rem;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-source-card{
  appearance:none;
  display:grid;
  grid-template-columns:2.2rem minmax(0,1fr) auto;
  align-items:center;
  gap:.7rem;
  min-height:4.6rem;
  padding:.85rem;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  color:#0f172a;
  text-align:left;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(15,23,42,.045);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-source-card:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--finrep-tone,#1d4ed8) 35%,#dbe5f0);
  box-shadow:0 12px 24px rgba(15,23,42,.075);
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-source-icon{
  width:2.15rem;
  height:2.15rem;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:color-mix(in srgb,var(--finrep-tone,#1d4ed8) 12%,#fff);
  color:var(--finrep-tone,#1d4ed8);
  font-size:1.05rem;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-source-copy{
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-source-copy strong,
html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-source-copy small{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-source-copy strong{
  color:#0f172a;
  font-size:.78rem;
  font-weight:950;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-source-copy small{
  margin-top:.15rem;
  color:#64748b;
  font-size:.66rem;
  font-weight:800;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-source-value{
  justify-self:end;
  color:var(--finrep-tone,#1d4ed8);
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:950;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-config-card,
html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-report-card{
  margin-bottom:1.5rem;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1rem 1.1rem;
  border-bottom:1px solid #e6edf6;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-section-head > div{
  display:flex;
  align-items:center;
  gap:.65rem;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-section-head > div > .material-symbols-outlined{
  width:2.15rem;
  height:2.15rem;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#123e73;
  color:#fff;
  font-size:1.05rem;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-section-head h2{
  margin:0;
  color:#0f172a;
  font-size:1rem;
  font-weight:950;
  letter-spacing:0;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-section-head p{
  margin:.12rem 0 0;
  color:#64748b;
  font-size:.76rem;
  font-weight:750;
  line-height:1.35;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-config-body{
  padding:1.1rem;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-report-tabs{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:.5rem;
  margin-bottom:1rem;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-report-tabs button{
  appearance:none;
  min-width:0;
  min-height:2.45rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  padding:.45rem .55rem;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  color:#334155;
  font-size:.7rem;
  font-weight:900;
  line-height:1.15;
  cursor:pointer;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-report-tabs button.active{
  border-color:#1d4ed8;
  background:#eff6ff;
  color:#1d4ed8;
  box-shadow:inset 0 0 0 1px rgba(29,78,216,.08);
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-report-tabs .material-symbols-outlined{
  font-size:1rem;
  flex:0 0 auto;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-config-grid{
  display:grid;
  grid-template-columns:1.15fr .95fr .95fr .9fr;
  gap:1rem;
  align-items:end;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-config-grid .form-group{
  margin:0;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-config-grid .form-label{
  color:#334155;
  font-size:.72rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-config-grid .form-select,
html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-config-grid .form-input{
  width:100%;
  min-height:2.65rem;
  border-color:#dbe5f0;
  border-radius:8px;
  font-weight:800;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-generate-btn{
  width:100%;
  min-height:2.65rem;
  justify-content:center;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-report-card{
  overflow-x:auto;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-report-card .card-body{
  min-width:min(100%,760px);
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-report-card table{
  min-width:760px;
}

html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-report-card h2,
html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-report-card h3{
  letter-spacing:0;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-source-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-report-tabs,
  html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-config-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-header-main,
  html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-section-head{
    align-items:flex-start;
    flex-direction:column;
  }

  html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-header-actions,
  html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-header-actions .btn,
  html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-generate-btn{
    width:100%;
  }

  html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-header-actions .btn{
    justify-content:center;
  }

  html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-kpi-grid,
  html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-source-grid,
  html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-report-tabs,
  html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-config-grid{
    grid-template-columns:1fr;
  }

  html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-source-card{
    grid-template-columns:2.2rem minmax(0,1fr) auto;
  }

  html[data-auth-ready="app"] body[data-route="financial-reports"] #app-content .finrep-report-card{
    margin-left:-.35rem;
    margin-right:-.35rem;
  }
}

/* ================================================================
   Operational reports module polish
   ================================================================ */
html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-module{
  max-width:100%;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-page-header{
  border:1px solid rgba(203,213,225,.9);
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 58%,#f0fdfa 100%);
  box-shadow:0 14px 32px rgba(15,23,42,.075);
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-header-main{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
  width:100%;
  flex-wrap:wrap;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-title-block{
  min-width:0;
  max-width:58rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-bottom:.55rem;
  padding:.32rem .65rem;
  border:1px solid #dbeafe;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:.68rem;
  font-weight:950;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-eyebrow .material-symbols-outlined{
  font-size:.95rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-title-block h1{
  margin:0;
  letter-spacing:0;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-title-block p{
  max-width:52rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:.75rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-meta-row span{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  min-height:1.85rem;
  padding:.25rem .6rem;
  border:1px solid #e2e8f0;
  border-radius:999px;
  background:#fff;
  color:#475569;
  font-size:.72rem;
  font-weight:850;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-meta-row .material-symbols-outlined{
  color:#1d4ed8;
  font-size:1rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-header-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-hub-kpis{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1rem;
  margin-bottom:1rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-hub-kpi{
  position:relative;
  min-height:7.35rem;
  display:grid;
  grid-template-columns:2.45rem minmax(0,1fr);
  grid-template-rows:auto auto 1fr auto;
  gap:.08rem .8rem;
  align-items:center;
  overflow:hidden;
  padding:1.05rem 1rem .85rem;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-hub-kpi::after{
  content:"";
  position:absolute;
  top:-2.15rem;
  right:-1.35rem;
  width:5.65rem;
  height:5.65rem;
  border-radius:0 0 0 5rem;
  background:color-mix(in srgb,var(--reports-tone,#1d4ed8) 10%,#fff);
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-hub-kpi-icon{
  grid-column:1;
  grid-row:1 / span 2;
  width:2.35rem;
  height:2.35rem;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:var(--reports-tone,#1d4ed8);
  color:#fff;
  box-shadow:0 8px 16px color-mix(in srgb,var(--reports-tone,#1d4ed8) 26%,transparent);
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-hub-kpi-icon .material-symbols-outlined{
  font-size:1.05rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-hub-kpi-value{
  grid-column:2;
  grid-row:1;
  min-width:0;
  overflow:hidden;
  color:#0f172a;
  font-family:var(--font-display);
  font-size:1.12rem;
  font-weight:950;
  line-height:1.08;
  white-space:nowrap;
  text-overflow:ellipsis;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-hub-kpi-label{
  grid-column:2;
  grid-row:2;
  min-width:0;
  overflow:hidden;
  color:#475569;
  font-size:.68rem;
  font-weight:900;
  white-space:nowrap;
  text-overflow:ellipsis;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-hub-kpi-sub{
  grid-column:2;
  grid-row:4;
  min-width:0;
  padding-top:.5rem;
  border-top:1px solid #e6edf6;
  overflow:hidden;
  color:#64748b;
  font-size:.68rem;
  font-weight:900;
  white-space:nowrap;
  text-overflow:ellipsis;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-source-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.75rem;
  margin-bottom:1.15rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-source-card{
  appearance:none;
  display:grid;
  grid-template-columns:2.15rem minmax(0,1fr) 1.1rem;
  align-items:center;
  gap:.7rem;
  min-height:4.55rem;
  padding:.85rem;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  color:#0f172a;
  text-align:left;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(15,23,42,.045);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-source-card:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--reports-tone,#1d4ed8) 35%,#dbe5f0);
  box-shadow:0 12px 24px rgba(15,23,42,.075);
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-source-icon{
  width:2.15rem;
  height:2.15rem;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:color-mix(in srgb,var(--reports-tone,#1d4ed8) 12%,#fff);
  color:var(--reports-tone,#1d4ed8);
  font-size:1.05rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-source-copy{
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-source-copy strong,
html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-source-copy small{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-source-copy strong{
  color:#0f172a;
  font-size:.78rem;
  font-weight:950;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-source-copy small{
  margin-top:.15rem;
  color:#64748b;
  font-size:.66rem;
  font-weight:800;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-source-arrow{
  color:#94a3b8;
  font-size:1rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-tabs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.65rem;
  margin-bottom:1.2rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-tab{
  appearance:none;
  min-width:0;
  min-height:5.7rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:.28rem;
  padding:.9rem;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  text-align:left;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(15,23,42,.045);
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-tab.active{
  border-color:var(--reports-tone,#1d4ed8);
  background:color-mix(in srgb,var(--reports-tone,#1d4ed8) 8%,#fff);
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-tab .material-symbols-outlined{
  color:var(--reports-tone,#1d4ed8);
  font-size:1.25rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-tab strong{
  color:#0f172a;
  font-size:.78rem;
  font-weight:950;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-tab small{
  color:#64748b;
  font-size:.65rem;
  font-weight:750;
  line-height:1.25;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-filter-card,
html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-content > .card,
html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-active-heading{
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-filter-card{
  margin-bottom:1.25rem;
  padding:0;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.1rem;
  border-bottom:1px solid #e6edf6;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-section-head > div{
  display:flex;
  align-items:center;
  gap:.65rem;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-section-head > div > .material-symbols-outlined{
  width:2.15rem;
  height:2.15rem;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#123e73;
  color:#fff;
  font-size:1.05rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-section-head h2,
html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-active-heading h2{
  margin:0;
  color:#0f172a;
  font-size:1rem;
  font-weight:950;
  letter-spacing:0;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-section-head p,
html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-active-heading p{
  margin:.12rem 0 0;
  color:#64748b;
  font-size:.76rem;
  font-weight:750;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-filter-grid{
  display:grid;
  grid-template-columns:.8fr .8fr 1.3fr auto;
  gap:1rem;
  align-items:end;
  padding:1.1rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-filter-grid .form-group{
  margin:0;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-filter-grid .form-input{
  min-height:2.55rem;
  border-color:#dbe5f0;
  border-radius:8px;
  font-weight:800;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-filter-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-active-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
  padding:1rem 1.1rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-active-heading > div{
  display:flex;
  align-items:center;
  gap:.65rem;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-active-heading > div > .material-symbols-outlined{
  width:2.2rem;
  height:2.2rem;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#eff6ff;
  font-size:1.1rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-content{
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-content .card{
  border-radius:8px;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-content .data-table{
  min-width:920px;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-content .kpi-card{
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-report-kpis{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:.85rem;
  margin-bottom:1.25rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-report-kpi{
  position:relative;
  min-height:6.35rem;
  display:grid;
  grid-template-columns:2.15rem minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:.1rem .7rem;
  align-content:center;
  overflow:hidden;
  padding:.95rem .85rem;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-report-kpi::after{
  content:"";
  position:absolute;
  top:-2rem;
  right:-1.4rem;
  width:5rem;
  height:5rem;
  border-radius:0 0 0 4.5rem;
  background:color-mix(in srgb,var(--reports-tone,#1d4ed8) 10%,#fff);
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-report-kpi-icon{
  grid-column:1;
  grid-row:1 / span 2;
  width:2.1rem;
  height:2.1rem;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:var(--reports-tone,#1d4ed8);
  color:#fff;
  box-shadow:0 7px 14px color-mix(in srgb,var(--reports-tone,#1d4ed8) 24%,transparent);
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-report-kpi-icon .material-symbols-outlined{
  font-size:1rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-report-kpi-value{
  grid-column:2;
  grid-row:1;
  min-width:0;
  overflow:hidden;
  color:#0f172a;
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:950;
  line-height:1.08;
  white-space:nowrap;
  text-overflow:ellipsis;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-report-kpi-label{
  grid-column:2;
  grid-row:2;
  min-width:0;
  overflow:hidden;
  color:#64748b;
  font-size:.66rem;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-report-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-bottom:1.25rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-report-grid-wide{
  grid-template-columns:minmax(0,1.55fr) minmax(18rem,.85fr);
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-report-grid-narrow{
  grid-template-columns:minmax(16rem,.75fr) minmax(0,1.25fr);
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-panel-card,
html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-table-card,
html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-customer-card{
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 12px 26px rgba(15,23,42,.055);
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-panel-card .section-header,
html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-table-card .section-header{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-bottom:1rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-panel-card .section-header .material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-table-card .section-header .material-symbols-outlined{
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:1rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-panel-card .section-header h2,
html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-table-card .section-header h2{
  margin:0;
  color:#0f172a;
  font-size:.95rem;
  font-weight:950;
  letter-spacing:0;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-panel-card .progress-bar,
html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-table-card .progress-bar{
  overflow:hidden;
  border-radius:999px;
  background:#e6edf6;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-table-card > div[style*="overflow-x:auto"]{
  margin:0 -.25rem;
  padding:0 .25rem;
  overflow-x:auto !important;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-table-card .data-table th{
  background:#f3f7fb;
  color:#082647;
  font-size:.68rem;
  font-weight:950;
  text-transform:uppercase;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-table-card .data-table td{
  vertical-align:middle;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-gauge-card svg{
  max-width:100%;
  height:auto;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-customer-card{
  margin-bottom:1.25rem !important;
  border-top:4px solid #1d4ed8 !important;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-customer-head{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1.15rem;
  padding-bottom:1rem;
  border-bottom:1px solid #e2e8f0;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-customer-avatar{
  width:3rem;
  height:3rem;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:50%;
  background:linear-gradient(135deg,#1d4ed8,#0f766e);
  color:#fff;
  font-family:var(--font-display);
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-customer-title{
  flex:1 1 14rem;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-customer-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem;
  min-width:min(100%,24rem);
  text-align:right;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-customer-metrics > div{
  min-width:0;
  padding:.55rem .65rem;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#f8fbff;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-customer-metrics p{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-timeline{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-timeline-item{
  display:flex;
  align-items:center;
  gap:.875rem;
  padding:.7rem .875rem;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#f8fbff;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-hub-kpis,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-source-grid,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-report-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-report-grid,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-report-grid-wide,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-report-grid-narrow{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-header-main,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-section-head,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-active-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-header-actions,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-header-actions .btn,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-active-heading .btn,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-filter-actions,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-filter-actions .btn{
    width:100%;
  }

  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-header-actions .btn,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-active-heading .btn,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-filter-actions .btn{
    justify-content:center;
  }

  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-hub-kpis,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-source-grid,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-tabs,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-filter-grid,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-report-kpis,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-customer-metrics{
    grid-template-columns:1fr;
  }

  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-customer-head,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-timeline-item{
    align-items:flex-start;
    flex-direction:column;
  }

  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-customer-metrics,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .reports-customer-head .btn{
    width:100%;
    text-align:left;
  }
}

/* Sales Performance Report redesign */
html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-report{
  display:flex;
  flex-direction:column;
  gap:1rem;
  color:#08235d;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  flex-wrap:wrap;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-head h2{
  display:flex;
  align-items:center;
  gap:.4rem;
  margin:0;
  color:#092866;
  font-family:var(--font-display);
  font-size:1.65rem;
  font-weight:950;
  letter-spacing:0;
  line-height:1.08;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-head h2 .material-symbols-outlined{
  color:#f59e0b;
  font-size:1.05rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-head p{
  margin:.25rem 0 0;
  color:#092866;
  font-size:.88rem;
  font-weight:650;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-controls{
  display:flex;
  gap:.65rem;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-controls > div{
  min-width:12.5rem;
  padding:.62rem .75rem;
  border:1px solid #dbe5f0;
  border-radius:6px;
  background:#fff;
  box-shadow:0 4px 12px rgba(15,23,42,.035);
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-controls span{
  display:block;
  color:#08235d;
  font-size:.64rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-controls strong{
  display:block;
  margin-top:.18rem;
  color:#092866;
  font-size:.72rem;
  font-weight:800;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-kpis{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:.75rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-kpi{
  min-height:5.85rem;
  display:grid;
  grid-template-columns:2.8rem minmax(0,1fr);
  gap:.75rem;
  align-items:center;
  padding:.9rem;
  border:1px solid #dbe5f0;
  border-radius:6px;
  background:#fff;
  box-shadow:0 6px 18px rgba(15,23,42,.045);
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-kpi-icon{
  width:2.8rem;
  height:2.8rem;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--sales-tone,#092866);
  color:#fff;
  box-shadow:0 8px 18px color-mix(in srgb,var(--sales-tone,#092866) 24%,transparent);
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-kpi-icon .material-symbols-outlined{
  font-size:1.45rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-kpi-copy{
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-kpi-copy > span{
  display:block;
  overflow:hidden;
  color:#092866;
  font-size:.62rem;
  font-weight:950;
  text-transform:uppercase;
  white-space:nowrap;
  text-overflow:ellipsis;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-kpi-copy strong{
  display:block;
  overflow:hidden;
  margin:.22rem 0 .18rem;
  color:#092866;
  font-family:var(--font-display);
  font-size:1.02rem;
  font-weight:950;
  white-space:nowrap;
  text-overflow:ellipsis;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-change{
  display:inline-flex;
  color:#047857;
  font-size:.61rem;
  font-weight:850;
  line-height:1.2;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-change.down{
  color:#be123c;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(26rem,1fr);
  gap:1rem;
  align-items:stretch;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-card,
html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-analytics-card{
  border:1px solid #dbe5f0;
  border-radius:6px;
  background:#fff;
  box-shadow:0 6px 18px rgba(15,23,42,.04);
  overflow:hidden;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-card h3,
html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-analytics-card h3{
  margin:0;
  padding:.78rem .9rem;
  color:#092866;
  font-family:var(--font-display);
  font-size:.86rem;
  font-weight:950;
  letter-spacing:0;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-table-wrap{
  overflow-x:auto;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-table{
  width:100%;
  min-width:44rem;
  border-collapse:collapse;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-table th{
  padding:.58rem .72rem;
  border-top:1px solid #dbe5f0;
  border-bottom:1px solid #dbe5f0;
  background:#f5f8fc;
  color:#092866;
  font-size:.61rem;
  font-weight:950;
  text-align:left;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-table td{
  padding:.5rem .72rem;
  border-bottom:1px solid #e6edf6;
  color:#092866;
  font-size:.68rem;
  font-weight:700;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-table tbody tr:hover td{
  background:#f8fbff;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-total td{
  background:#f5f8fc;
  color:#092866;
  font-size:.74rem;
  font-weight:950;
  text-transform:uppercase;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-empty{
  padding:2rem !important;
  color:#64748b !important;
  text-align:center;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-note,
html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-footer{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin:0;
  padding:.85rem .9rem;
  color:#092866;
  font-size:.68rem;
  line-height:1.45;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-note .material-symbols-outlined{
  color:#092866;
  font-size:.95rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-chart-legend{
  display:flex;
  justify-content:center;
  gap:2rem;
  margin:.2rem 0 .2rem;
  color:#092866;
  font-size:.68rem;
  font-weight:750;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-chart-legend span{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-chart-legend i{
  width:1.55rem;
  height:.2rem;
  border-radius:999px;
  background:#092866;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-chart-legend span:nth-child(2) i{
  background:#f59e0b;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-trend-svg{
  width:100%;
  min-height:18rem;
  display:block;
  overflow:visible;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-trend-svg text{
  fill:#092866;
  font-size:.62rem;
  font-weight:750;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-chart-grid{
  stroke:#e7edf6;
  stroke-width:1;
  stroke-dasharray:3 4;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-chart-axis{
  stroke:#cbd8e7;
  stroke-width:1.2;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-chart-line{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-chart-line.current{
  stroke:#092866;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-chart-line.compare{
  stroke:#f59e0b;
  stroke-dasharray:9 9;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-analytics-card{
  padding-bottom:.9rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-analytics-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0;
  padding:.8rem .6rem .3rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-summary-block{
  min-width:0;
  padding:.6rem .75rem;
  border-right:1px solid #dbe5f0;
  text-align:center;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-summary-block:last-child{
  border-right:0;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-summary-block > span{
  display:block;
  overflow:hidden;
  color:#092866;
  font-size:.62rem;
  font-weight:950;
  text-transform:uppercase;
  white-space:nowrap;
  text-overflow:ellipsis;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-summary-block > strong{
  display:block;
  overflow:hidden;
  margin:.55rem 0 .2rem;
  color:#092866;
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:950;
  white-space:nowrap;
  text-overflow:ellipsis;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-summary-block small{
  display:block;
  color:#092866;
  font-size:.62rem;
  font-style:normal;
  font-weight:650;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-summary-block div{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
  margin-top:.9rem;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-summary-block em{
  min-width:0;
  font-style:normal;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-summary-block b{
  display:block;
  overflow:hidden;
  color:#092866;
  font-size:.78rem;
  font-weight:950;
  white-space:nowrap;
  text-overflow:ellipsis;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.18rem .5rem;
  border-radius:999px;
  font-size:.62rem;
  font-weight:850;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-status.converted{
  background:#dcfce7;
  color:#047857;
}

html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-status.pending{
  background:#fef3c7;
  color:#b45309;
}

@media (max-width:1280px){
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-kpis,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-analytics-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-summary-block{
    border-right:0;
    border-bottom:1px solid #dbe5f0;
  }
}

@media (max-width:980px){
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-main-grid{
    grid-template-columns:1fr;
  }

  html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-controls{
    justify-content:flex-start;
  }
}

@media (max-width:720px){
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-kpis,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-analytics-grid{
    grid-template-columns:1fr;
  }

  html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-head h2{
    font-size:1.25rem;
  }

  html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-controls,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-controls > div,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content .sales-perf-controls .btn{
    width:100%;
  }
}

/* ================================================================
   Imprest module polish - finance workspace
   ================================================================ */
html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-module{
  max-width:100%;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-page-header{
  border:1px solid rgba(203,213,225,.9);
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 58%,#fff7ed 100%);
  box-shadow:0 14px 32px rgba(15,23,42,.075);
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-header-main{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
  flex-wrap:wrap;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-title-block{
  min-width:0;
  max-width:48rem;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-title-block h1{
  letter-spacing:0;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-header-actions,
html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-kpi-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1rem;
  margin-bottom:1.35rem;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-kpi-card{
  position:relative;
  min-height:7.35rem;
  display:grid;
  grid-template-columns:2.55rem minmax(0,1fr) auto;
  grid-template-rows:auto auto 1fr auto;
  column-gap:.85rem;
  align-items:center;
  overflow:hidden;
  padding:1.05rem 1rem .85rem;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-kpi-card::after{
  content:"";
  position:absolute;
  top:-2.1rem;
  right:-1.35rem;
  width:5.5rem;
  height:5.5rem;
  border-radius:0 0 0 5rem;
  background:color-mix(in srgb,var(--imprest-tone,#004699) 10%,#fff);
  pointer-events:none;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-kpi-icon{
  grid-column:1;
  grid-row:1 / span 2;
  width:2.35rem;
  height:2.35rem;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:var(--imprest-tone,#004699);
  color:#fff;
  box-shadow:0 8px 16px color-mix(in srgb,var(--imprest-tone,#004699) 26%,transparent);
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-kpi-icon .material-symbols-outlined{
  font-size:1.05rem;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-kpi-value{
  grid-column:2 / 4;
  grid-row:1;
  min-width:0;
  color:#0f172a;
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:950;
  line-height:1.08;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-kpi-label{
  grid-column:2 / 4;
  grid-row:2;
  min-width:0;
  margin-top:.08rem;
  color:#475569;
  font-size:.68rem;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-kpi-sub{
  grid-column:2 / 4;
  grid-row:4;
  min-width:0;
  padding-top:.55rem;
  border-top:1px solid #e6edf6;
  color:#64748b;
  font-size:.68rem;
  font-weight:850;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-tabbar{
  display:flex;
  width:fit-content;
  max-width:100%;
  gap:.25rem;
  padding:.25rem;
  margin-bottom:1.25rem;
  overflow-x:auto;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#edf3f9;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-tab{
  min-height:2.25rem;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .75rem;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#64748b;
  font-size:.78rem;
  font-weight:850;
  white-space:nowrap;
  cursor:pointer;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-tab.is-active{
  background:#fff;
  color:#123e73;
  box-shadow:0 6px 14px rgba(15,23,42,.08);
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-section-card{
  padding:0;
  overflow:hidden;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  padding:1rem 1.1rem;
  border-bottom:1px solid #e6edf6;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-section-head > div{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-section-head .material-symbols-outlined{
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#123e73;
  color:#fff;
  font-size:1rem;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-section-head h2{
  margin:0;
  color:#0f172a;
  font-size:1rem;
  font-weight:950;
  letter-spacing:0;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-section-head p{
  max-width:34rem;
  margin:0;
  color:#64748b;
  font-size:.78rem;
  font-weight:650;
  line-height:1.35;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-table-wrap{
  width:100%;
  overflow-x:auto;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-table{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-table thead th{
  background:#f3f7fb;
  color:#082647;
  font-size:.66rem;
  font-weight:950;
  letter-spacing:0;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-table tbody td{
  vertical-align:middle;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-requests-table{
  min-width:980px;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-actions .btn{
  min-height:2.05rem;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-replenishment-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:.8rem;
  padding:1rem;
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-mini-card{
  border:1px solid #dbe5f0;
  border-radius:8px;
  padding:.95rem;
  background:#fff;
  box-shadow:0 8px 18px rgba(15,23,42,.045);
}

html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-empty-state{
  text-align:center;
  padding:3rem 2rem;
  border:1px dashed #b9c7d8;
  border-radius:8px;
  background:#fff;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-header-main{
    align-items:stretch;
  }
  html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-header-actions{
    width:100%;
  }
  html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-header-actions .btn{
    flex:1 1 100%;
    justify-content:center;
  }
  html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-kpi-grid{
    grid-template-columns:1fr;
  }
  html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-tabbar{
    width:100%;
  }
  html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-section-head{
    flex-direction:column;
  }
  html[data-auth-ready="app"] body[data-route="imprest"] #app-content .imprest-actions .btn{
    flex:1 1 auto;
    justify-content:center;
  }
}

/* ================================================================
   Payment vouchers module polish
   ================================================================ */
html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-module{
  max-width:100%;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-page-header{
  border:1px solid rgba(203,213,225,.9);
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 58%,#f4f0ff 100%);
  box-shadow:0 14px 32px rgba(15,23,42,.075);
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-header-main{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
  flex-wrap:wrap;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-title-block{
  min-width:0;
  max-width:48rem;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-title-block h1{
  letter-spacing:0;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-header-actions,
html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-actions,
.voucher-modal-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-kpi-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1rem;
  margin-bottom:1.15rem;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-kpi-card{
  position:relative;
  min-height:7.35rem;
  display:grid;
  grid-template-columns:2.55rem minmax(0,1fr) auto;
  grid-template-rows:auto auto 1fr auto;
  column-gap:.85rem;
  align-items:center;
  overflow:hidden;
  padding:1.05rem 1rem .85rem;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-kpi-card::after{
  content:"";
  position:absolute;
  top:-2.1rem;
  right:-1.35rem;
  width:5.5rem;
  height:5.5rem;
  border-radius:0 0 0 5rem;
  background:color-mix(in srgb,var(--voucher-tone,#004699) 10%,#fff);
  pointer-events:none;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-kpi-icon{
  grid-column:1;
  grid-row:1 / span 2;
  width:2.35rem;
  height:2.35rem;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:var(--voucher-tone,#004699);
  color:#fff;
  box-shadow:0 8px 16px color-mix(in srgb,var(--voucher-tone,#004699) 26%,transparent);
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-kpi-icon .material-symbols-outlined{
  font-size:1.05rem;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-kpi-value{
  grid-column:2 / 4;
  grid-row:1;
  min-width:0;
  color:#0f172a;
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:950;
  line-height:1.08;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-kpi-label{
  grid-column:2 / 4;
  grid-row:2;
  color:#475569;
  font-size:.68rem;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-kpi-sub{
  grid-column:2 / 4;
  grid-row:4;
  padding-top:.55rem;
  border-top:1px solid #e6edf6;
  color:#64748b;
  font-size:.68rem;
  font-weight:850;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-workflow-strip{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.7rem;
  margin-bottom:1.25rem;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-flow-step{
  min-width:0;
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.75rem;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 18px rgba(15,23,42,.045);
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-flow-number{
  width:1.5rem;
  height:1.5rem;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:999px;
  background:#123e73;
  color:#fff;
  font-size:.72rem;
  font-weight:950;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-flow-step > .material-symbols-outlined{
  color:#7c3aed;
  font-size:1.15rem;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-flow-step strong,
html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-flow-step small{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-flow-step strong{
  color:#0f172a;
  font-size:.78rem;
  font-weight:950;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-flow-step small{
  margin-top:.05rem;
  color:#64748b;
  font-size:.68rem;
  font-weight:750;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-section-card{
  padding:0;
  overflow:hidden;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  padding:1rem 1.1rem;
  border-bottom:1px solid #e6edf6;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-section-head > div{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-section-head .material-symbols-outlined{
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#123e73;
  color:#fff;
  font-size:1rem;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-section-head h2{
  margin:0;
  color:#0f172a;
  font-size:1rem;
  font-weight:950;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-section-head p{
  max-width:34rem;
  margin:0;
  color:#64748b;
  font-size:.78rem;
  font-weight:650;
  line-height:1.35;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-table-wrap{
  width:100%;
  overflow-x:auto;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-table{
  width:100%;
  min-width:1040px;
  border-collapse:separate;
  border-spacing:0;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-table thead th{
  background:#f3f7fb;
  color:#082647;
  font-size:.66rem;
  font-weight:950;
  letter-spacing:0;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-table tbody td{
  vertical-align:middle;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-link{
  display:block;
  border:0;
  background:transparent;
  color:#123e73;
  font-weight:950;
  font-family:var(--font-display);
  cursor:pointer;
  padding:0;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-table small,
.voucher-muted{
  display:block;
  color:#64748b;
  font-size:.7rem;
  font-weight:650;
  line-height:1.35;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-progress{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  font-size:.72rem;
  color:#475569;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-progress-bar{
  height:.42rem;
  margin:.3rem 0;
  overflow:hidden;
  border-radius:999px;
  background:#e6edf6;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-progress-bar i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#16a34a,#22c55e);
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-sigs,
.voucher-approval-grid{
  display:flex;
  gap:.35rem;
  flex-wrap:wrap;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-sig{
  display:inline-flex;
  align-items:center;
  gap:.22rem;
  padding:.18rem .45rem;
  border-radius:999px;
  background:#f1f5f9;
  color:#64748b;
  font-size:.6rem;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-sig .material-symbols-outlined{
  font-size:.78rem;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-sig.is-signed{
  background:#dcfce7;
  color:#15803d;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-stage{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.26rem .62rem;
  border:1px solid color-mix(in srgb,var(--stage-color,#004699) 24%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--stage-color,#004699) 10%,#fff);
  color:var(--stage-color,#004699);
  font-size:.68rem;
  font-weight:900;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-stage .material-symbols-outlined{
  font-size:.9rem;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-empty-state{
  text-align:center;
  padding:3rem 2rem;
  border:1px dashed #b9c7d8;
  border-radius:8px;
  background:#fff;
}

html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-empty-state > .material-symbols-outlined{
  display:block;
  margin:0 auto .75rem;
  color:#7c3aed;
  font-size:3rem;
  opacity:.35;
}

.voucher-detail,
.voucher-settlement-modal,
.voucher-create-modal{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.voucher-detail-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.75rem;
}

.voucher-detail-metric{
  min-width:0;
  display:grid;
  grid-template-columns:2.15rem minmax(0,1fr);
  column-gap:.65rem;
  align-items:center;
  padding:.85rem;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
}

.voucher-detail-metric .material-symbols-outlined{
  grid-row:1 / span 2;
  width:2.15rem;
  height:2.15rem;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#123e73;
  color:#fff;
  font-size:1rem;
}

.voucher-detail-metric small{
  color:#64748b;
  font-size:.66rem;
  font-weight:900;
  text-transform:uppercase;
}

.voucher-detail-metric strong{
  min-width:0;
  overflow:hidden;
  color:#0f172a;
  font-size:.9rem;
  font-weight:950;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.voucher-detail-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

.voucher-detail section,
.voucher-detail-section{
  padding:1rem;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
}

.voucher-detail h3{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin:0 0 .8rem;
  color:#0f172a;
  font-size:.95rem;
  font-weight:950;
}

.voucher-detail h3 .material-symbols-outlined{
  color:#123e73;
  font-size:1rem;
}

.voucher-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.55rem;
}

.voucher-facts div{
  min-width:0;
  padding:.62rem;
  border-radius:7px;
  background:#f8fbff;
}

.voucher-facts span,
.voucher-mini-table span{
  display:block;
  color:#64748b;
  font-size:.66rem;
  font-weight:900;
  text-transform:uppercase;
}

.voucher-facts strong{
  display:block;
  margin-top:.18rem;
  color:#0f172a;
  font-size:.82rem;
  font-weight:900;
  word-break:break-word;
}

.voucher-approval-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.7rem;
}

.voucher-approval-card{
  padding:.85rem;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#f8fbff;
  text-align:center;
}

.voucher-approval-card.is-signed{
  border-color:#86efac;
  background:#f0fdf4;
}

.voucher-approval-card > .material-symbols-outlined{
  color:#64748b;
  font-size:1.55rem;
}

.voucher-approval-card.is-signed > .material-symbols-outlined{
  color:#16a34a;
}

.voucher-approval-card p{
  margin:.25rem 0 .15rem;
  color:#0f172a;
  font-size:.78rem;
  font-weight:950;
}

.voucher-approval-card small,
.voucher-approval-card em{
  color:#64748b;
  font-size:.67rem;
}

.voucher-approval-card strong{
  display:block;
  margin-top:.3rem;
  color:#15803d;
  font-size:.72rem;
}

.voucher-mini-table{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.voucher-mini-table div{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:.5rem;
  align-items:center;
  padding:.55rem .65rem;
  border-radius:7px;
  background:#f8fbff;
}

.voucher-mini-table strong{
  color:#0f172a;
  font-size:.82rem;
}

.voucher-mini-table code{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.voucher-modal-actions.is-footer{
  justify-content:flex-end;
}

.voucher-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-workflow-strip{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-header-main{
    align-items:stretch;
  }
  html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-header-actions{
    width:100%;
  }
  html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-header-actions .btn{
    flex:1 1 100%;
    justify-content:center;
  }
  html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-kpi-grid,
  html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-workflow-strip,
  .voucher-detail-grid,
  .voucher-detail-columns,
  .voucher-approval-grid,
  .voucher-form-grid{
    grid-template-columns:1fr;
  }
  html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-section-head{
    flex-direction:column;
  }
  .voucher-facts,
  .voucher-mini-table div{
    grid-template-columns:1fr;
  }
  .voucher-modal-actions .btn,
  html[data-auth-ready="app"] body[data-route="vouchers"] #app-content .voucher-actions .btn{
    flex:1 1 auto;
    justify-content:center;
  }
}

/* ================================================================
   Expenses module polish
   ================================================================ */
html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-module{
  max-width:100%;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-page-header{
  border:1px solid rgba(203,213,225,.9);
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 58%,#fff7ed 100%);
  box-shadow:0 14px 32px rgba(15,23,42,.075);
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-header-main{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
  flex-wrap:wrap;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-title-block{
  min-width:0;
  max-width:50rem;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-title-block h1{
  letter-spacing:0;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-header-actions,
html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-kpi-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1rem;
  margin-bottom:1.35rem;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-kpi-card{
  position:relative;
  min-height:7.35rem;
  display:grid;
  grid-template-columns:2.55rem minmax(0,1fr) auto;
  grid-template-rows:auto auto 1fr auto;
  column-gap:.85rem;
  align-items:center;
  overflow:hidden;
  padding:1.05rem 1rem .85rem;
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-kpi-card::after{
  content:"";
  position:absolute;
  top:-2.1rem;
  right:-1.35rem;
  width:5.5rem;
  height:5.5rem;
  border-radius:0 0 0 5rem;
  background:color-mix(in srgb,var(--expenses-tone,#004699) 10%,#fff);
  pointer-events:none;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-kpi-icon{
  grid-column:1;
  grid-row:1 / span 2;
  width:2.35rem;
  height:2.35rem;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:var(--expenses-tone,#004699);
  color:#fff;
  box-shadow:0 8px 16px color-mix(in srgb,var(--expenses-tone,#004699) 26%,transparent);
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-kpi-icon .material-symbols-outlined{
  font-size:1.05rem;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-kpi-value{
  grid-column:2 / 4;
  grid-row:1;
  min-width:0;
  overflow:hidden;
  color:#0f172a;
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:950;
  line-height:1.08;
  white-space:nowrap;
  text-overflow:ellipsis;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-kpi-label{
  grid-column:2 / 4;
  grid-row:2;
  min-width:0;
  overflow:hidden;
  color:#475569;
  font-size:.68rem;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-kpi-sub{
  grid-column:2 / 4;
  grid-row:4;
  min-width:0;
  padding-top:.55rem;
  border-top:1px solid #e6edf6;
  overflow:hidden;
  color:#64748b;
  font-size:.68rem;
  font-weight:850;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis;
  z-index:1;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-main-grid,
html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-two-grid{
  display:grid;
  gap:1.5rem;
  margin-bottom:1.5rem;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-main-grid{
  grid-template-columns:2fr 1fr;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-two-grid{
  grid-template-columns:1.15fr .85fr;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-two-grid.is-secondary{
  grid-template-columns:.9fr 1.1fr;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-side-stack{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-section-card{
  border:1px solid #dbe5f0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin:0 0 1rem;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-section-card[style*="padding:0"] .expenses-section-head,
html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-table-toolbar{
  margin:0;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-section-head > div{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-section-head .material-symbols-outlined{
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#123e73;
  color:#fff;
  font-size:1rem;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-section-head h2{
  margin:0;
  color:#0f172a;
  font-size:1rem;
  font-weight:950;
  letter-spacing:0;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-table-toolbar{
  display:flex;
  gap:.625rem;
  flex-wrap:wrap;
  align-items:center;
  padding:.95rem 1.1rem;
  border-bottom:1px solid #e6edf6;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-table-wrap{
  width:100%;
  overflow-x:auto;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-table{
  width:100%;
  min-width:1020px;
  border-collapse:separate;
  border-spacing:0;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-table thead th{
  background:#f3f7fb;
  color:#082647;
  font-size:.66rem;
  font-weight:950;
  letter-spacing:0;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-table tbody td{
  vertical-align:middle;
}

html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-actions .btn{
  min-height:2.05rem;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-main-grid,
  html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-two-grid,
  html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-two-grid.is-secondary{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-header-main{
    align-items:stretch;
  }
  html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-header-actions{
    width:100%;
  }
  html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-header-actions .btn{
    flex:1 1 100%;
    justify-content:center;
  }
  html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-kpi-grid{
    grid-template-columns:1fr;
  }
  html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-section-head,
  html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-table-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }
  html[data-auth-ready="app"] body[data-route="expenses"] #app-content .expenses-actions .btn{
    flex:1 1 auto;
    justify-content:center;
  }
}

/* Inventory Register Desktop Row Alignment */
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table-wrap{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  table-layout:fixed !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table th,
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table td{
  padding:.62rem .34rem !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table th{
  font-size:.64rem !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table td{
  font-size:.7rem !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table th:nth-child(1),
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table td:nth-child(1){
  width:10% !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table th:nth-child(2),
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table td:nth-child(2){
  width:15.5% !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table th:nth-child(3),
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table td:nth-child(3){
  width:5.2% !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table th:nth-child(4),
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table td:nth-child(4){
  width:7.1% !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table th:nth-child(5),
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table td:nth-child(5){
  width:9.7% !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table th:nth-child(6),
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table td:nth-child(6){
  width:12.5% !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table th:nth-child(7),
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table td:nth-child(7){
  width:11.8% !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table th:nth-child(8),
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table td:nth-child(8){
  width:8.4% !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table th:nth-child(9),
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table td:nth-child(9){
  width:5.1% !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table th:nth-child(10),
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-table td:nth-child(10){
  width:14.7% !important;
  min-width:6rem !important;
  padding-right:.2rem !important;
  overflow:visible !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-actions-cell{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:.18rem !important;
  width:auto !important;
  min-width:5.6rem !important;
  overflow:visible !important;
  white-space:nowrap !important;
  text-overflow:clip !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-actions-cell .btn,
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-actions-cell .inv-action-btn{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-actions-cell .btn-primary{
  width:1.65rem !important;
  min-width:1.65rem !important;
  max-width:1.65rem !important;
  min-height:1.65rem !important;
  height:1.65rem !important;
  padding:.28rem !important;
  font-size:0 !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-actions-cell .inv-action-btn{
  width:1.65rem !important;
  min-width:1.65rem !important;
  height:1.65rem !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-actions-cell .material-symbols-outlined{
  flex:0 0 auto !important;
  margin:0 !important;
  font-size:.86rem !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-overview-kpis:has(.inventory-shot-kpi-card){
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important;
  gap:.85rem !important;
  align-items:stretch !important;
  margin:0 !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-empty-overview-panel{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:.85rem !important;
  padding:1rem !important;
  border:1px dashed #b9cce4 !important;
  border-radius:8px !important;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%) !important;
  box-shadow:0 8px 20px rgba(15,23,42,.045) !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-empty-overview-panel > .material-symbols-outlined{
  width:2.75rem !important;
  height:2.75rem !important;
  display:grid !important;
  place-items:center !important;
  border-radius:8px !important;
  color:#123e73 !important;
  background:#eef5ff !important;
  font-size:1.35rem !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-empty-overview-panel strong{
  display:block !important;
  color:#102039 !important;
  font-size:.95rem !important;
  font-weight:950 !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-empty-overview-panel p{
  margin:.18rem 0 0 !important;
  color:#60708a !important;
  font-size:.78rem !important;
  font-weight:750 !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-empty-overview-panel > div:last-child{
  display:flex !important;
  align-items:center !important;
  gap:.5rem !important;
  flex-wrap:wrap !important;
}

@media (max-width:760px){
  html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-overview-kpis:has(.inventory-shot-kpi-card){
    grid-template-columns:1fr !important;
  }

  html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-empty-overview-panel{
    grid-template-columns:1fr !important;
  }

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-empty-overview-panel > div:last-child .btn{
    width:100% !important;
  }
}

/* Inventory overview register full-width layout */
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-register-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:1rem !important;
  width:100% !important;
  max-width:100% !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-register-main{
  width:100% !important;
  max-width:100% !important;
  grid-column:1 / -1 !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-register-side{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:1rem !important;
  width:100% !important;
  max-width:100% !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-register-card{
  padding:1rem !important;
  border:1px solid #dbe6f2 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 8px 22px rgba(15,23,42,.055) !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table-wrap{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
  border-radius:8px !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table{
  width:100% !important;
  min-width:64rem !important;
  table-layout:auto !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table th,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table td{
  padding:.54rem .42rem !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  font-size:.72rem !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table th{
  font-size:.6rem !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table th:nth-child(1),
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table td:nth-child(1){
  width:8.5% !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table th:nth-child(2),
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table td:nth-child(2){
  width:16% !important;
  max-width:13rem !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table th:nth-child(3),
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table td:nth-child(3){
  width:4.5% !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table th:nth-child(4),
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table td:nth-child(4){
  width:7% !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table th:nth-child(5),
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table td:nth-child(5),
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table th:nth-child(6),
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table td:nth-child(6){
  width:9% !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table th:nth-child(7),
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table td:nth-child(7){
  width:8.5% !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table th:nth-child(8),
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table td:nth-child(8){
  width:6.5% !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table th:nth-child(9),
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table td:nth-child(9){
  width:7% !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-actions-cell{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:.18rem !important;
  min-width:10.8rem !important;
  overflow:visible !important;
  white-space:nowrap !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-actions-cell .inv-receive-btn{
  width:auto !important;
  min-width:auto !important;
  max-width:none !important;
  height:1.72rem !important;
  min-height:1.72rem !important;
  padding:.28rem .38rem !important;
  font-size:0 !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-actions-cell .inv-action-btn{
  width:1.72rem !important;
  min-width:1.72rem !important;
  height:1.72rem !important;
  border-radius:7px !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-actions-cell .material-symbols-outlined{
  font-size:.86rem !important;
}

@media (max-width:1024px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-register-side{
    grid-template-columns:1fr !important;
  }
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table{
    min-width:64rem !important;
  }
}

@media (max-width:680px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-register-card{
    padding:.75rem !important;
  }
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-filter-row{
    align-items:stretch !important;
    flex-direction:column !important;
  }
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-search-field,
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-select,
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-filter-btn{
    width:100% !important;
    max-width:100% !important;
  }
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-table{
    min-width:62rem !important;
  }
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-edit-form{
    grid-template-columns:1fr !important;
  }
}

/* Finished Goods Store Professional UI */
html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-module{
  display:flex !important;
  flex-direction:column !important;
  gap:.9rem !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-page-header{
  margin-bottom:0 !important;
  padding:1rem 1.1rem !important;
  border:1px solid #dbe6f2 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 8px 22px rgba(15,23,42,.055) !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-page-header h1{
  margin:0 !important;
  color:#0f172a !important;
  font-size:1.36rem !important;
  line-height:1.15 !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-page-header p{
  display:block !important;
  max-width:42rem !important;
  margin:.32rem 0 0 !important;
  color:#64748b !important;
  font-size:.78rem !important;
  line-height:1.35 !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-header-actions{
  align-items:center !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-view-toggle{
  min-height:2.25rem !important;
  padding:.18rem !important;
  border:1px solid #dbe6f2 !important;
  border-radius:8px !important;
  background:#f8fafc !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-view-toggle .btn{
  min-height:1.9rem !important;
  padding:.42rem .62rem !important;
  border-radius:7px !important;
  color:#334155 !important;
  font-weight:850 !important;
  white-space:nowrap !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-page-header .btn-primary{
  min-height:2.25rem !important;
  border-radius:7px !important;
  background:#174f91 !important;
  box-shadow:0 8px 16px rgba(23,79,145,.18) !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-grid{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:.7rem !important;
  margin:0 !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-card{
  position:relative !important;
  min-height:5.3rem !important;
  display:grid !important;
  grid-template-columns:2.25rem minmax(0,1fr) auto !important;
  grid-template-rows:auto auto 1fr !important;
  column-gap:.62rem !important;
  row-gap:.1rem !important;
  align-items:center !important;
  padding:.74rem .78rem !important;
  border:1px solid #dbe6f2 !important;
  border-left:1px solid #dbe6f2 !important;
  border-radius:8px !important;
  background:#fff !important;
  overflow:hidden !important;
  box-shadow:0 6px 16px rgba(15,23,42,.045) !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-card::after{
  content:"" !important;
  position:absolute !important;
  top:-1.8rem !important;
  right:-1.2rem !important;
  width:5rem !important;
  height:5rem !important;
  border-radius:0 0 0 4rem !important;
  background:var(--fgs-tone,#174f91) !important;
  opacity:.1 !important;
  pointer-events:none !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-head{
  display:contents !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-head .material-symbols-outlined{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  width:2.15rem !important;
  height:2.15rem !important;
  display:grid !important;
  place-items:center !important;
  border-radius:7px !important;
  background:var(--fgs-tone,#174f91) !important;
  color:#fff !important;
  font-size:1rem !important;
  box-shadow:0 8px 14px color-mix(in srgb,var(--fgs-tone,#174f91) 22%,transparent) !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-label{
  grid-column:2 / 4 !important;
  grid-row:2 !important;
  min-width:0 !important;
  color:#475569 !important;
  font-size:.64rem !important;
  font-weight:900 !important;
  line-height:1.15 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-value{
  grid-column:2 / 4 !important;
  grid-row:1 !important;
  min-width:0 !important;
  margin:0 !important;
  color:#0f172a !important;
  font-size:clamp(1rem,1.18vw,1.22rem) !important;
  font-weight:950 !important;
  line-height:1.06 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-sub{
  grid-column:2 / 4 !important;
  grid-row:3 !important;
  min-width:0 !important;
  margin:.38rem 0 0 !important;
  padding-top:.44rem !important;
  border-top:1px solid #e6edf6 !important;
  color:#64748b !important;
  font-size:.6rem !important;
  font-weight:850 !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-toolbar{
  margin:0 !important;
  padding:.75rem !important;
  border:1px solid #dbe6f2 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 4px 14px rgba(15,23,42,.04) !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-filter-group{
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-search-box input,
html[data-auth-ready="app"] body[data-route="fgs"] #app-content #fgs-status{
  min-height:2.35rem !important;
  border:1px solid #d5e0ec !important;
  border-radius:7px !important;
  background:#f8fafc !important;
  color:#0f172a !important;
  font-size:.78rem !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-selection-bar{
  border-radius:7px !important;
  background:#eff6ff !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-card,
html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-dispatch-column,
html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-reservation-group{
  border:1px solid #dbe6f2 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 6px 18px rgba(15,23,42,.045) !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-card{
  padding:0 !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-card .section-header{
  min-height:3.25rem !important;
  padding:.85rem 1rem !important;
  border-bottom:1px solid #e6edf6 !important;
  background:#f8fafc !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-card .section-header h2{
  color:#0f172a !important;
  font-size:.95rem !important;
  font-weight:950 !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-table-wrap{
  width:100% !important;
  overflow-x:auto !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-table{
  width:100% !important;
  min-width:58rem !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-table th{
  padding:.72rem .65rem !important;
  background:#f8fafc !important;
  color:#0f2a4a !important;
  font-size:.64rem !important;
  font-weight:950 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-table td{
  padding:.72rem .65rem !important;
  color:#24334d !important;
  font-size:.74rem !important;
  vertical-align:middle !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-table p{
  margin:0 !important;
  line-height:1.28 !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-row:hover td{
  background:#f8fbff !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-status-pill{
  min-width:6.2rem !important;
  display:inline-flex !important;
  border-radius:999px !important;
  padding:.32rem .55rem !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-action-group{
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:.28rem !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-action-group button{
  width:1.9rem !important;
  height:1.9rem !important;
  border-radius:7px !important;
  box-shadow:0 2px 6px rgba(15,23,42,.05) !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-action-group .material-symbols-outlined{
  font-size:.95rem !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-dispatch-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:.85rem !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-dispatch-column{
  overflow:hidden !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-dispatch-item{
  margin-bottom:.55rem !important;
  border:1px solid #e1e9f3 !important;
  border-radius:8px !important;
  background:#fff !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-reservation-group{
  margin:1rem !important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-reservation-items{
  grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)) !important;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media (max-width:920px){
  html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-header-actions,
  html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-filter-group,
  html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-selection-bar{
    width:100% !important;
  }

  html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-view-toggle{
    width:100% !important;
    overflow-x:auto !important;
  }

  html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-header-actions > .btn-primary,
  html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-search-box,
  html[data-auth-ready="app"] body[data-route="fgs"] #app-content #fgs-status{
    width:100% !important;
  }

  html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-filter-group{
    flex-direction:column !important;
  }

  html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-dispatch-grid{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:680px){
  html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-page-header{
    padding:.9rem !important;
  }

  html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-grid{
    grid-template-columns:1fr !important;
  }

  html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-toolbar{
    padding:.65rem !important;
  }

  html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-selection-bar{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-reservation-group{
    margin:.75rem !important;
  }
}

/* Inventory KPI Global Screenshot Fallback */
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-overview-kpis{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important;
  gap:.85rem !important;
  align-items:stretch !important;
  margin:0 !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-kpi-card{
  --inv-pfi-tone:#123e73;
  position:relative !important;
  min-height:7rem !important;
  display:grid !important;
  grid-template-columns:2.35rem minmax(0,1fr) auto !important;
  grid-template-rows:auto auto .72rem auto !important;
  column-gap:.78rem !important;
  row-gap:.1rem !important;
  align-items:center !important;
  padding:1rem .95rem .85rem !important;
  overflow:hidden !important;
  border:1px solid #dbe5f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#071226 !important;
  box-shadow:0 8px 22px rgba(15,23,42,.055) !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-kpi-card:nth-child(1){--inv-pfi-tone:#123e73;}
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-kpi-card:nth-child(2){--inv-pfi-tone:#0f766e;}
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-kpi-card:nth-child(3){--inv-pfi-tone:#d97706;}
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-kpi-card:nth-child(4){--inv-pfi-tone:#15803d;}
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-kpi-card:nth-child(5){--inv-pfi-tone:#123e73;}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-kpi-card::before{
  content:"" !important;
  position:absolute !important;
  top:-2.15rem !important;
  right:-1.35rem !important;
  width:5.6rem !important;
  height:5.6rem !important;
  display:block !important;
  border-radius:0 0 0 5rem !important;
  background:color-mix(in srgb,var(--inv-pfi-tone,#123e73) 10%,#fff) !important;
  opacity:1 !important;
  pointer-events:none !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-kpi-card::after{
  content:"KES" !important;
  position:absolute !important;
  top:1.15rem !important;
  right:1.1rem !important;
  z-index:2 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:1.25rem !important;
  padding:.12rem .48rem !important;
  border-radius:999px !important;
  color:#123e73 !important;
  background:transparent !important;
  font-size:.56rem !important;
  font-weight:950 !important;
  line-height:1 !important;
  text-transform:uppercase !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-kpi-card:nth-child(2)::after{content:"Units" !important;}
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-kpi-card:nth-child(4)::after{content:"Alert" !important;}
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-kpi-card:nth-child(5)::after{content:"Review" !important;}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-kpi-body,
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-pfi-kpi-head{
  display:contents !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-kpi-icon,
html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-pfi-kpi-head .material-symbols-outlined{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  width:2.35rem !important;
  height:2.35rem !important;
  min-width:2.35rem !important;
  display:grid !important;
  place-items:center !important;
  align-self:center !important;
  border:0 !important;
  border-radius:7px !important;
  background:var(--inv-pfi-tone,#123e73) !important;
  color:#fff !important;
  font-size:1.05rem !important;
  line-height:1 !important;
  box-shadow:0 8px 16px color-mix(in srgb,var(--inv-pfi-tone,#123e73) 26%,transparent) !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-kpi-icon .material-symbols-outlined{
  color:#fff !important;
  font-size:1.05rem !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-pfi-kpi-badge{
  grid-column:3 !important;
  grid-row:1 !important;
  justify-self:end !important;
  align-self:start !important;
  min-height:1.25rem !important;
  padding:.12rem .48rem !important;
  border-radius:999px !important;
  color:#123e73 !important;
  background:transparent !important;
  font-size:.56rem !important;
  font-weight:950 !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  z-index:3 !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-pfi-metric-card::after{
  content:"" !important;
  display:none !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-kpi-value{
  grid-column:2 / 3 !important;
  grid-row:1 !important;
  align-self:end !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  color:#0f172a !important;
  font-family:var(--font-display) !important;
  font-size:1.2rem !important;
  font-weight:950 !important;
  line-height:1.08 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-kpi-label{
  grid-column:2 / 4 !important;
  grid-row:2 !important;
  align-self:start !important;
  min-width:0 !important;
  margin:.05rem 0 0 !important;
  padding:0 !important;
  overflow:hidden !important;
  color:#475569 !important;
  font-size:.68rem !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-kpi-sub{
  grid-column:2 / 4 !important;
  grid-row:4 !important;
  align-self:end !important;
  min-width:0 !important;
  margin:0 !important;
  padding:.5rem 0 0 !important;
  border-top:1px solid #e6edf6 !important;
  overflow:hidden !important;
  color:#64748b !important;
  font-size:.68rem !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  z-index:1 !important;
}

/* Invoice & Settlement Professional UI */
html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-module{
  display:flex !important;
  flex-direction:column !important;
  gap:.9rem !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-hero{
  margin:0 !important;
  padding:1rem 1.1rem !important;
  border:1px solid #dbe6f2 !important;
  border-top:4px solid #0f766e !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#0f172a !important;
  box-shadow:0 8px 22px rgba(15,23,42,.055) !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-hero-inner{
  gap:1rem !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-hero h1{
  color:#0f172a !important;
  font-size:1.36rem !important;
  line-height:1.15 !important;
  font-weight:950 !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-hero .material-symbols-outlined{
  color:#0f766e !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-hero-actions{
  align-items:center !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-hero-actions .btn{
  min-height:2.25rem !important;
  border-radius:7px !important;
  border:1px solid #dbe6f2 !important;
  background:#f8fafc !important;
  color:#123e73 !important;
  font-weight:900 !important;
  box-shadow:none !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-hero-actions .btn:last-child{
  background:#174f91 !important;
  border-color:#174f91 !important;
  color:#fff !important;
  box-shadow:0 8px 16px rgba(23,79,145,.18) !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-hero-actions .btn:last-child .material-symbols-outlined{
  color:#fff !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-kpi-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:.85rem !important;
  margin:0 !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-kpi-card{
  position:relative !important;
  min-height:7rem !important;
  display:grid !important;
  grid-template-columns:2.35rem minmax(0,1fr) auto !important;
  grid-template-rows:auto auto .72rem auto !important;
  column-gap:.78rem !important;
  row-gap:.1rem !important;
  align-items:center !important;
  padding:1rem .95rem .85rem !important;
  overflow:hidden !important;
  border:1px solid #dbe5f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#071226 !important;
  box-shadow:0 8px 22px rgba(15,23,42,.055) !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-kpi-card::before{
  content:"" !important;
  position:absolute !important;
  top:-2.15rem !important;
  right:-1.35rem !important;
  width:5.6rem !important;
  height:5.6rem !important;
  display:block !important;
  border-radius:0 0 0 5rem !important;
  background:color-mix(in srgb,var(--invoice-tone,#123e73) 10%,#fff) !important;
  opacity:1 !important;
  pointer-events:none !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-kpi-card::after{
  content:"" !important;
  position:absolute !important;
  grid-column:auto !important;
  top:auto !important;
  right:auto !important;
  width:auto !important;
  height:auto !important;
  display:none !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-kpi-head{
  display:contents !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-kpi-head .inv-kpi-icon{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  width:2.35rem !important;
  height:2.35rem !important;
  display:grid !important;
  place-items:center !important;
  align-self:center !important;
  border-radius:7px !important;
  background:var(--invoice-tone,#123e73) !important;
  color:#fff !important;
  font-size:1.05rem !important;
  line-height:1 !important;
  box-shadow:0 8px 16px color-mix(in srgb,var(--invoice-tone,#123e73) 26%,transparent) !important;
  opacity:1 !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-kpi-badge{
  grid-column:3 !important;
  grid-row:1 !important;
  justify-self:end !important;
  align-self:start !important;
  min-height:1.25rem !important;
  padding:.12rem .48rem !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#123e73 !important;
  font-size:.56rem !important;
  font-weight:950 !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-kpi-card .inv-kpi-value{
  grid-column:2 / 3 !important;
  grid-row:1 !important;
  align-self:end !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  color:#0f172a !important;
  font-family:var(--font-display) !important;
  font-size:1.22rem !important;
  font-weight:950 !important;
  line-height:1.08 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-kpi-card .inv-kpi-label{
  display:block !important;
  grid-column:2 / 4 !important;
  grid-row:2 !important;
  align-self:start !important;
  min-width:0 !important;
  margin:.05rem 0 0 !important;
  padding:0 !important;
  overflow:hidden !important;
  color:#475569 !important;
  font-size:.68rem !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-kpi-card .inv-kpi-sub,
html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-kpi-card div[style*="font-size:0.75rem"]{
  display:block !important;
  grid-column:2 / 4 !important;
  grid-row:4 !important;
  align-self:end !important;
  min-width:0 !important;
  margin:0 !important;
  padding:.5rem 0 0 !important;
  border-top:1px solid #e6edf6 !important;
  overflow:hidden !important;
  color:#64748b !important;
  font-size:.68rem !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  opacity:1 !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-card{
  border:1px solid #dbe6f2 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 6px 18px rgba(15,23,42,.045) !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-register-card,
html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-empty-card{
  margin:0 !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-card .section-header{
  min-height:3.25rem !important;
  padding:.85rem 1rem !important;
  border-bottom:1px solid #e6edf6 !important;
  background:#f8fafc !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-card .section-header h2{
  color:#0f172a !important;
  font-size:.95rem !important;
  font-weight:950 !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-table-wrap{
  width:100% !important;
  overflow-x:auto !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-table{
  width:100% !important;
  min-width:66rem !important;
  table-layout:auto !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-table th{
  padding:.74rem .72rem !important;
  background:#f8fafc !important;
  color:#0f2a4a !important;
  font-size:.65rem !important;
  font-weight:950 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-table td{
  padding:.78rem .72rem !important;
  color:#24334d !important;
  font-size:.76rem !important;
  vertical-align:middle !important;
  border-bottom:1px solid #e8eef6 !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-row:hover td{
  background:#f8fbff !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-action-group{
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:.28rem !important;
  white-space:nowrap !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-action-group .btn{
  min-height:1.95rem !important;
  border-radius:7px !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-action-group .btn-ghost{
  width:1.95rem !important;
  padding:.35rem !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-action-group .btn-orange{
  padding:.38rem .58rem !important;
  font-weight:900 !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-bottom-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:.9rem !important;
  margin:0 !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-settlement-row{
  border:1px solid #fed7aa !important;
  border-radius:8px !important;
  background:#fff7ed !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-settlement-row .progress-bar,
html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-table .progress-bar{
  height:.38rem !important;
  border-radius:999px !important;
  background:#e6edf6 !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-settlement-row .progress-fill,
html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-table .progress-fill{
  height:100% !important;
  border-radius:999px !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-empty-card .empty-state{
  padding:3rem 1rem !important;
}

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-empty-card .empty-state p{
  display:block !important;
  max-width:38rem !important;
  margin:.45rem auto 0 !important;
  color:#64748b !important;
  font-size:.82rem !important;
  line-height:1.45 !important;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:920px){
  html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-hero-actions,
  html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-bottom-grid{
    width:100% !important;
  }

  html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-hero-actions .btn{
    flex:1 1 10rem !important;
  }

  html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-bottom-grid{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:680px){
  html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-hero{
    padding:.9rem !important;
  }

  html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-hero h1{
    font-size:1.16rem !important;
  }

  html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-kpi-grid{
    grid-template-columns:1fr !important;
  }

  html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-hero-actions{
    flex-direction:column !important;
    align-items:stretch !important;
  }

html[data-auth-ready="app"] body[data-route="invoice"] #app-content .invoice-settlement-row{
    flex-direction:column !important;
    align-items:stretch !important;
  }
}

/* Accounts & Receipts Professional UI */
html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-module{
  display:flex !important;
  flex-direction:column !important;
  gap:.9rem !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-page-header{
  margin:0 !important;
  padding:1rem 1.1rem !important;
  border:1px solid #dbe6f2 !important;
  border-top:4px solid #0f766e !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 8px 22px rgba(15,23,42,.055) !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-page-header h1{
  margin:0 !important;
  color:#0f172a !important;
  font-size:1.36rem !important;
  line-height:1.15 !important;
  font-weight:950 !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-page-header p{
  display:block !important;
  max-width:44rem !important;
  margin:.32rem 0 0 !important;
  color:#64748b !important;
  font-size:.78rem !important;
  line-height:1.35 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-header-actions{
  align-items:center !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-header-actions .btn{
  min-height:2.25rem !important;
  border-radius:7px !important;
  font-weight:900 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-grid{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:.72rem !important;
  margin:0 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-card{
  position:relative !important;
  min-height:5.45rem !important;
  display:grid !important;
  grid-template-columns:2rem minmax(0,1fr) !important;
  grid-template-rows:auto auto auto !important;
  column-gap:.52rem !important;
  row-gap:.1rem !important;
  align-items:center !important;
  padding:.72rem .64rem !important;
  overflow:hidden !important;
  border:1px solid #dbe6f2 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 6px 16px rgba(15,23,42,.045) !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-card::before{
  display:none !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-card::after{
  content:"" !important;
  position:absolute !important;
  top:-1.7rem !important;
  right:-1.1rem !important;
  width:5rem !important;
  height:5rem !important;
  border-radius:0 0 0 4rem !important;
  background:var(--accounts-tone,#0f766e) !important;
  opacity:.1 !important;
  pointer-events:none !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-icon{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  width:2rem !important;
  height:2rem !important;
  min-width:2rem !important;
  display:grid !important;
  place-items:center !important;
  border-radius:7px !important;
  background:var(--accounts-tone,#0f766e) !important;
  color:#fff !important;
  box-shadow:0 8px 14px color-mix(in srgb,var(--accounts-tone,#0f766e) 22%,transparent) !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-icon .material-symbols-outlined{
  font-size:.95rem !important;
  line-height:1 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-value{
  display:block !important;
  grid-column:2 !important;
  grid-row:1 !important;
  min-width:0 !important;
  margin:0 !important;
  color:#0f172a !important;
  font-size:clamp(.9rem,1vw,1.05rem) !important;
  font-weight:950 !important;
  line-height:1.06 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-label{
  display:block !important;
  grid-column:2 !important;
  grid-row:2 !important;
  min-width:0 !important;
  margin:0 !important;
  color:#475569 !important;
  font-size:.59rem !important;
  font-weight:950 !important;
  line-height:1.1 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-sub{
  display:block !important;
  grid-column:2 !important;
  grid-row:3 !important;
  min-width:0 !important;
  margin:.36rem 0 0 !important;
  padding-top:.42rem !important;
  border-top:1px solid #e6edf6 !important;
  color:#64748b !important;
  font-size:.56rem !important;
  font-weight:850 !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  opacity:1 !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-tabbar{
  width:100% !important;
  margin:0 !important;
  padding:.35rem !important;
  gap:.32rem !important;
  border:1px solid #dbe6f2 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 4px 14px rgba(15,23,42,.04) !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-tabbar .btn{
  min-height:2.08rem !important;
  padding:.44rem .62rem !important;
  border-radius:7px !important;
  font-weight:850 !important;
  color:#334155 !important;
  white-space:nowrap !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-card,
html[data-auth-ready="app"] body[data-route="accounts"] #app-content .card{
  border:1px solid #dbe6f2 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 6px 18px rgba(15,23,42,.045) !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-card .section-header,
html[data-auth-ready="app"] body[data-route="accounts"] #app-content .card .section-header{
  min-height:3.18rem !important;
  padding:.82rem 1rem !important;
  border-bottom:1px solid #e6edf6 !important;
  background:#f8fafc !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-card .section-header h2,
html[data-auth-ready="app"] body[data-route="accounts"] #app-content .card .section-header h2{
  color:#0f172a !important;
  font-size:.92rem !important;
  font-weight:950 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-ledger-layout{
  grid-template-columns:minmax(0,1fr) minmax(18rem,22rem) !important;
  gap:.9rem !important;
  margin:0 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-ledger-filters{
  margin:0 0 .75rem !important;
  padding:.75rem !important;
  border:1px solid #dbe6f2 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 4px 14px rgba(15,23,42,.04) !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-ledger-filters .form-input,
html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-ledger-filters .form-select{
  min-height:2.28rem !important;
  border:1px solid #d5e0ec !important;
  border-radius:7px !important;
  background:#f8fafc !important;
  color:#0f172a !important;
  font-size:.76rem !important;
  font-weight:700 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-ledger-card{
  margin:0 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-ledger-head{
  padding:.9rem 1rem !important;
  background:#123e73 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-table-wrap{
  width:100% !important;
  overflow:auto !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-table{
  width:100% !important;
  min-width:68rem !important;
  table-layout:auto !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-table th{
  padding:.72rem .68rem !important;
  background:#f8fafc !important;
  color:#0f2a4a !important;
  font-size:.64rem !important;
  font-weight:950 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-table td{
  padding:.72rem .68rem !important;
  color:#24334d !important;
  font-size:.74rem !important;
  vertical-align:middle !important;
  border-bottom:1px solid #e8eef6 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-ledger-row:hover td,
html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-table tr:hover td{
  background:#f8fbff !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-side-panel{
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-two-grid,
html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-pc-grid{
  gap:.9rem !important;
  margin:0 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .progress-bar{
  height:.38rem !important;
  border-radius:999px !important;
  background:#e6edf6 !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .progress-fill,
html[data-auth-ready="app"] body[data-route="accounts"] #app-content .progress-bar > div{
  height:100% !important;
  border-radius:999px !important;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-ledger-layout,
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-pc-grid{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:920px){
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-header-actions,
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-two-grid{
    width:100% !important;
    grid-template-columns:1fr !important;
  }

  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-header-actions .btn{
    flex:1 1 10rem !important;
  }

  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-tabbar{
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
  }

  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-ledger-filters{
    flex-direction:column !important;
  }

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-ledger-filters .form-select,
html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-ledger-filters .form-input{
    width:100% !important;
  }
}

@media (max-width:680px){
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-page-header{
    padding:.9rem !important;
  }

  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-page-header h1{
    font-size:1.16rem !important;
  }

  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-grid{
    grid-template-columns:1fr !important;
  }

  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-header-actions{
    flex-direction:column !important;
    align-items:stretch !important;
  }
}

@media (max-width:760px){
  html[data-auth-ready="app"] #app-content .inv-overview-ref .inv-overview-kpis{
    grid-template-columns:1fr !important;
  }
}

/* Inventory KPI Screenshot Match */
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important;
  gap:.85rem !important;
  align-items:stretch !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pfi-metric-card{
  position:relative !important;
  min-height:7rem !important;
  display:grid !important;
  grid-template-columns:2.35rem minmax(0,1fr) auto !important;
  grid-template-rows:auto auto .72rem auto !important;
  column-gap:.78rem !important;
  row-gap:.1rem !important;
  align-items:center !important;
  padding:1rem .95rem .85rem !important;
  overflow:hidden !important;
  border:1px solid #dbe5f0 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 8px 22px rgba(15,23,42,.055) !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pfi-metric-card::before{
  content:none !important;
  display:none !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pfi-metric-card::after{
  content:"" !important;
  position:absolute !important;
  top:-2.15rem !important;
  right:-1.35rem !important;
  width:5.6rem !important;
  height:5.6rem !important;
  display:block !important;
  border-radius:0 0 0 5rem !important;
  background:color-mix(in srgb,var(--inv-pfi-tone,#123e73) 10%,#fff) !important;
  opacity:1 !important;
  pointer-events:none !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pfi-kpi-head{
  display:contents !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pfi-kpi-head .material-symbols-outlined{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  width:2.35rem !important;
  height:2.35rem !important;
  display:grid !important;
  place-items:center !important;
  align-self:center !important;
  border-radius:7px !important;
  background:var(--inv-pfi-tone,#123e73) !important;
  color:#fff !important;
  font-size:1.05rem !important;
  line-height:1 !important;
  box-shadow:0 8px 16px color-mix(in srgb,var(--inv-pfi-tone,#123e73) 26%,transparent) !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pfi-kpi-badge{
  grid-column:3 !important;
  grid-row:1 !important;
  justify-self:end !important;
  align-self:start !important;
  min-height:1.25rem !important;
  padding:.12rem .48rem !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#123e73 !important;
  font-size:.56rem !important;
  font-weight:950 !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pfi-metric-card .inv-kpi-value{
  grid-column:2 / 3 !important;
  grid-row:1 !important;
  align-self:end !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  color:#0f172a !important;
  font-family:var(--font-display) !important;
  font-size:1.2rem !important;
  font-weight:950 !important;
  line-height:1.08 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pfi-metric-card .inv-kpi-label{
  grid-column:2 / 4 !important;
  grid-row:2 !important;
  align-self:start !important;
  min-width:0 !important;
  margin:.05rem 0 0 !important;
  padding:0 !important;
  overflow:hidden !important;
  color:#475569 !important;
  font-size:.68rem !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-pfi-metric-card .inv-kpi-sub{
  grid-column:2 / 4 !important;
  grid-row:4 !important;
  align-self:end !important;
  min-width:0 !important;
  margin:0 !important;
  padding:.5rem 0 0 !important;
  border-top:1px solid #e6edf6 !important;
  overflow:hidden !important;
  color:#64748b !important;
  font-size:.68rem !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  z-index:1 !important;
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis{
    grid-template-columns:1fr !important;
  }
}
/* ================================================================
   Shell + Settings polish, June 2026
   ================================================================ */
#app-topbar{
  z-index:3000 !important;
  overflow:visible !important;
}
#app-topbar > div,
#app-topbar .company-switcher{
  overflow:visible !important;
}
.company-switcher{
  position:relative;
  isolation:isolate;
}
.company-switcher-menu{
  display:block;
  position:absolute;
  top:calc(100% + .7rem);
  right:0;
  width:min(21rem,calc(100vw - 1rem));
  padding:.55rem;
  border:1px solid rgba(148,163,184,.28);
  border-radius:18px;
  background:rgba(255,255,255,.98);
  box-shadow:0 24px 60px rgba(15,23,42,.24),0 0 0 1px rgba(255,255,255,.75) inset;
  z-index:4000;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px) scale(.98);
  transform-origin:top right;
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s var(--ease);
}
[data-theme="dark"] .company-switcher-menu{
  background:rgba(15,23,42,.98);
  border-color:rgba(148,163,184,.22);
  box-shadow:0 24px 60px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.05) inset;
}
.company-switcher.open .company-switcher-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.company-switcher-head{
  padding:.55rem .7rem .4rem;
  font-family:var(--font-display);
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.company-switcher-option{
  width:100%;
  display:grid;
  grid-template-columns:2.8rem minmax(0,1fr) 1.25rem;
  align-items:center;
  gap:.78rem;
  padding:.72rem;
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  color:var(--text-primary);
  cursor:pointer;
  text-align:left;
  transition:background .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease);
}
.company-switcher-option:hover{
  background:var(--brand-blue-faint);
  border-color:rgba(37,99,235,.16);
  transform:translateY(-1px);
}
.company-switcher-logo{
  width:2.8rem;
  height:2.8rem;
  border-radius:12px;
  overflow:hidden;
  flex-shrink:0;
  background:#fff;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
}
.company-switcher-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.company-switcher-option p{
  margin:0;
  font-size:.88rem;
  font-weight:850;
  color:var(--text-primary);
  line-height:1.25;
}
.company-switcher-option span:not(.material-symbols-outlined){
  display:block;
  margin-top:.12rem;
  color:var(--text-muted);
  font-size:.72rem;
  font-weight:650;
}
.company-switcher-option > .material-symbols-outlined{
  opacity:0;
  color:var(--success);
  font-size:1.1rem;
}
[data-company="eshkol"] .company-switcher-option:first-of-type > .material-symbols-outlined,
[data-company="rehoboth"] .company-switcher-option:last-of-type > .material-symbols-outlined{
  opacity:1;
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content{
  background:
    linear-gradient(180deg,rgba(248,250,252,.92),rgba(239,246,255,.72) 42%,rgba(248,250,252,.95)),
    var(--bg) !important;
}
html[data-auth-ready="app"] body[data-route="settings"] #app-content > .page-container,
html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-module{
  max-width:92rem !important;
  width:100%;
}
.settings-module{
  display:flex;
  flex-direction:column;
  gap:1.15rem;
}
.settings-hero{
  position:relative;
  overflow:hidden;
  border-radius:22px !important;
  padding:1.35rem !important;
  background:
    linear-gradient(135deg,rgba(9,31,78,.98),rgba(15,78,148,.9) 58%,rgba(255,122,0,.9)) !important;
  border:0 !important;
  box-shadow:0 20px 50px rgba(15,23,42,.18) !important;
  color:#fff !important;
}
.settings-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.08),transparent 34%,rgba(255,255,255,.08));
  pointer-events:none;
}
.settings-hero .breadcrumb{
  position:relative;
  z-index:1;
  background:rgba(255,255,255,.14) !important;
  color:rgba(255,255,255,.9) !important;
  border-color:rgba(255,255,255,.18) !important;
}
.settings-hero-row{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.settings-hero-copy h1{
  color:#fff !important;
  font-size:clamp(1.55rem,2.2vw,2.25rem) !important;
  margin:0;
}
.settings-hero-copy p{
  display:block !important;
  margin:.38rem 0 0 !important;
  max-width:42rem;
  color:rgba(255,255,255,.78) !important;
  font-size:.93rem !important;
  line-height:1.6;
}
.settings-actionbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:.65rem;
}
.settings-actionbar .btn{
  border-radius:12px !important;
  min-height:2.35rem;
}
.settings-sync-pill{
  display:inline-flex;
  align-items:center;
  min-height:2.35rem;
  padding:.5rem .8rem;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.9);
  font-size:.75rem;
  font-weight:850;
}
.settings-brand-card{
  margin-bottom:0 !important;
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 46%,#fff7ed 100%) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  color:var(--text-primary) !important;
  border-radius:20px !important;
  overflow:hidden !important;
}
.settings-brand-card > div[style*="position:absolute"]{
  display:none !important;
}
.settings-brand-card > div[style*="position:relative"]{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:1.25rem !important;
}
.settings-brand-card #logo-preview-wrap{
  width:5rem !important;
  height:5rem !important;
  border-radius:18px !important;
  background:#fff !important;
  border:1px solid rgba(148,163,184,.25) !important;
  box-shadow:var(--shadow-sm);
  cursor:pointer !important;
}
.settings-brand-card p{
  color:var(--text-secondary) !important;
}
.settings-brand-card p:first-child{
  color:var(--text-primary) !important;
  letter-spacing:0 !important;
}
.settings-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}
.settings-summary-card{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:1rem;
  border:1px solid rgba(148,163,184,.24);
  border-radius:18px;
  background:var(--surface-0);
  box-shadow:var(--shadow-xs);
  min-width:0;
}
.settings-summary-card > .material-symbols-outlined{
  width:2.65rem;
  height:2.65rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:color-mix(in srgb,var(--settings-accent) 12%,transparent);
  color:var(--settings-accent);
  flex-shrink:0;
}
.settings-summary-card strong{
  display:block;
  font-family:var(--font-display);
  color:var(--text-primary);
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.settings-summary-card p{
  margin:.12rem 0 0;
  color:var(--text-muted);
  font-size:.75rem;
  font-weight:750;
}
.settings-live-guard{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:1rem;
  align-items:center;
  padding:1.1rem;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.24);
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(248,250,252,.95)),
    var(--surface-0);
  box-shadow:0 18px 44px rgba(15,23,42,.08);
}
.settings-live-guard.is-on{
  border-color:rgba(22,163,74,.28);
  background:linear-gradient(135deg,#ffffff 0%,#f0fdf4 62%,#ecfeff 100%);
}
.settings-live-guard.is-off{
  border-color:rgba(245,158,11,.32);
  background:linear-gradient(135deg,#ffffff 0%,#fffbeb 70%,#fff7ed 100%);
}
.settings-live-guard-icon{
  width:3.35rem;
  height:3.35rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(135deg,var(--success),#047857);
  box-shadow:0 14px 30px rgba(5,150,105,.22);
}
.settings-live-guard.is-off .settings-live-guard-icon{
  background:linear-gradient(135deg,#f59e0b,#ea580c);
  box-shadow:0 14px 30px rgba(234,88,12,.2);
}
.settings-live-guard-icon .material-symbols-outlined{font-size:1.55rem;}
.settings-live-guard-copy{min-width:0;}
.settings-live-guard-kicker{
  display:block;
  margin-bottom:.2rem;
  color:var(--text-muted);
  font-size:.68rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.settings-live-guard h2{
  margin:0;
  color:var(--text-primary);
  font-family:var(--font-display);
  font-size:1.05rem;
  letter-spacing:0;
}
.settings-live-guard p{
  margin:.28rem 0 0;
  color:var(--text-secondary);
  font-size:.84rem;
  line-height:1.55;
}
.settings-live-guard-flags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.75rem;
}
.settings-live-guard-flags span{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  min-height:1.85rem;
  padding:.32rem .55rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.76);
  color:var(--text-secondary);
  font-size:.72rem;
  font-weight:800;
}
.settings-live-guard-flags b{
  color:var(--text-primary);
}
.settings-live-guard-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.55rem;
  flex-wrap:wrap;
}
.settings-quick-nav{
  position:sticky;
  top:calc(var(--topbar-h, 4rem) + .65rem);
  z-index:45;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:.55rem;
  padding:.55rem;
  border:1px solid rgba(148,163,184,.24);
  border-radius:18px;
  background:rgba(255,255,255,.88);
  box-shadow:0 18px 44px rgba(15,23,42,.08);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.settings-quick-nav a{
  min-width:0;
  min-height:2.65rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.5rem .7rem;
  border:1px solid transparent;
  border-radius:13px;
  color:var(--text-secondary);
  font-size:.78rem;
  font-weight:850;
  text-decoration:none;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.settings-quick-nav a:hover,
.settings-quick-nav a:focus-visible{
  background:var(--brand-blue-faint);
  border-color:rgba(37,99,235,.16);
  color:var(--brand-blue);
  transform:translateY(-1px);
}
.settings-quick-nav .material-symbols-outlined{
  font-size:1.08rem;
  flex-shrink:0;
}
.settings-main-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  align-items:start;
}
.settings-card-stack{
  min-width:0;
}
.settings-section-card,
.settings-sync-card,
.settings-danger-card{
  min-width:0;
}
.settings-section-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.94)),
    var(--surface-0) !important;
}
.settings-sync-card{
  background:linear-gradient(135deg,#fff,#f8fbff) !important;
}
.settings-sync-card > div[style*="grid-template-columns"]{
  grid-template-columns:minmax(11rem,.8fr) minmax(18rem,1.4fr) auto !important;
}
.settings-danger-card{
  box-shadow:0 18px 44px rgba(127,29,29,.08) !important;
}
.settings-branding-card,
.settings-cost-card{
  overflow:hidden;
}
html[data-auth-ready="app"] body[data-route="settings"] #app-content .card{
  border-radius:20px !important;
  border:1px solid rgba(148,163,184,.22) !important;
  box-shadow:0 14px 36px rgba(15,23,42,.06) !important;
}
html[data-auth-ready="app"] body[data-route="settings"] #app-content .section-header{
  padding-bottom:.85rem;
  margin-bottom:1rem;
  border-bottom:1px solid rgba(148,163,184,.18);
}
html[data-auth-ready="app"] body[data-route="settings"] #app-content .section-header .material-symbols-outlined{
  width:2.25rem;
  height:2.25rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  color:var(--brand-blue);
  background:var(--brand-blue-faint);
}
html[data-auth-ready="app"] body[data-route="settings"] #app-content .form-input,
html[data-auth-ready="app"] body[data-route="settings"] #app-content .form-select,
html[data-auth-ready="app"] body[data-route="settings"] #app-content textarea{
  border-radius:12px !important;
  border-color:rgba(148,163,184,.32) !important;
  background:var(--surface-0) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
html[data-auth-ready="app"] body[data-route="settings"] #app-content .form-input:focus,
html[data-auth-ready="app"] body[data-route="settings"] #app-content .form-select:focus,
html[data-auth-ready="app"] body[data-route="settings"] #app-content textarea:focus{
  border-color:var(--brand-blue) !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.12) !important;
}
html[data-auth-ready="app"] body[data-route="settings"] #app-content label:has(input[type="checkbox"]){
  display:flex !important;
  align-items:center;
  gap:.55rem;
  padding:.7rem .8rem;
  border:1px solid rgba(148,163,184,.22);
  border-radius:12px;
  background:var(--surface-1);
}
html[data-auth-ready="app"] body[data-route="settings"] #app-content input[type="checkbox"]{
  width:1rem;
  height:1rem;
  accent-color:var(--brand-blue);
}
@media (max-width:1100px){
  .settings-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .settings-live-guard{grid-template-columns:auto minmax(0,1fr);}
  .settings-live-guard-actions{grid-column:1/-1;justify-content:flex-start;}
  .settings-quick-nav{grid-template-columns:repeat(4,minmax(0,1fr));}
  .settings-main-grid{grid-template-columns:1fr !important;}
  .settings-sync-card > div[style*="grid-template-columns"]{grid-template-columns:1fr 1fr !important;}
  .settings-sync-card > div[style*="grid-template-columns"] > div:last-child{grid-column:1/-1;}
  .settings-brand-card > div[style*="position:relative"]{grid-template-columns:auto minmax(0,1fr) !important;}
  .settings-brand-card > div[style*="position:relative"] > div:last-child{text-align:left !important;grid-column:1/-1;}
}
@media (max-width:820px){
  .company-switcher-menu{right:auto;left:50%;transform:translate(-50%,-6px) scale(.98);transform-origin:top center;}
  .company-switcher.open .company-switcher-menu{transform:translate(-50%,0) scale(1);}
  .settings-hero{padding:1rem !important;border-radius:18px !important;}
  .settings-hero-row{align-items:flex-start;}
  .settings-actionbar{justify-content:flex-start;width:100%;}
  .settings-actionbar .btn{flex:1 1 9rem;}
  .settings-sync-pill{width:100%;justify-content:center;border-radius:12px;}
  .settings-summary-grid{grid-template-columns:1fr;}
  .settings-live-guard{
    grid-template-columns:1fr;
    padding:1rem;
  }
  .settings-live-guard-icon{
    width:3rem;
    height:3rem;
  }
  .settings-live-guard-actions .btn{
    flex:1 1 10rem;
  }
  .settings-quick-nav{
    position:relative;
    top:auto;
    display:flex;
    overflow-x:auto;
    gap:.45rem;
    padding:.45rem;
    scroll-snap-type:x proximity;
  }
  .settings-quick-nav a{
    flex:0 0 auto;
    min-width:8.2rem;
    scroll-snap-align:start;
  }
  .settings-brand-card > div[style*="position:relative"]{
    grid-template-columns:1fr !important;
    text-align:left;
  }
  .settings-brand-card #logo-preview-wrap{width:4.25rem !important;height:4.25rem !important;}
  .settings-sync-card > div[style*="grid-template-columns"]{grid-template-columns:1fr !important;}
  html[data-auth-ready="app"] body[data-route="settings"] #app-content div[style*="grid-template-columns:1fr 1fr"],
  html[data-auth-ready="app"] body[data-route="settings"] #app-content div[style*="grid-template-columns:repeat(2"],
  html[data-auth-ready="app"] body[data-route="settings"] #app-content div[style*="grid-template-columns:1.05fr"]{
    grid-template-columns:1fr !important;
  }
  html[data-auth-ready="app"] body[data-route="settings"] #app-content .card{
    border-radius:16px !important;
  }
}

#login-screen .login-footer.login-footer-motto{
  display:flex !important;
  grid-template-columns:none !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  margin:1.15rem 0 0 !important;
  padding:.95rem 0 0 !important;
  border-top:1px solid rgba(255,255,255,.14) !important;
  width:100% !important;
  text-align:center !important;
}
#login-screen .login-footer.login-footer-motto > span{
  display:inline-flex !important;
  align-items:center !important;
  border-right:0 !important;
  padding:0 !important;
  justify-content:center !important;
  width:auto !important;
  min-height:1.5rem;
  color:rgba(255,255,255,.92) !important;
  font-weight:900 !important;
  letter-spacing:.055em;
  text-transform:uppercase;
  line-height:1.2;
  white-space:nowrap;
}
#login-screen .login-footer.login-footer-motto .material-symbols-outlined{
  color:#ff6b00 !important;
  font-size:1.08rem !important;
  margin-top:-1px;
}
#login-screen .login-install-btn{
  width:100%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  min-height:2.65rem;
  border-radius:.85rem;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-weight:900;
  font-size:.86rem;
  cursor:pointer;
  margin-top:.65rem;
  transition:background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
#login-screen .login-install-btn:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.3);
  transform:translateY(-1px);
}
#login-screen .login-install-btn .material-symbols-outlined{
  color:#ff8a00;
  font-size:1.15rem;
}

/* Mobile install and phone responsiveness polish */
.mobile-install-prompt{
  position:fixed;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 1rem);
  z-index:9998;
  width:min(39rem, calc(100vw - 1.5rem));
  transform:translate(-50%, 1.25rem);
  opacity:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:.9rem;
  align-items:center;
  padding:.9rem 1rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.7);
  background:linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,249,255,.96));
  box-shadow:0 24px 64px rgba(15,23,42,.22), 0 0 0 1px rgba(15,23,42,.04);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:opacity .24s var(--ease), transform .24s var(--ease);
}
.mobile-install-prompt.show{
  opacity:1;
  transform:translate(-50%, 0);
}
.mobile-install-icon{
  width:2.75rem;
  height:2.75rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-light));
  color:#fff;
  box-shadow:var(--shadow-blue);
}
.mobile-install-icon .material-symbols-outlined{font-size:1.35rem;}
.mobile-install-copy{min-width:0;display:flex;flex-direction:column;gap:.18rem;}
.mobile-install-copy strong{
  font-family:var(--font-display);
  font-size:.95rem;
  color:#081a3a;
  line-height:1.2;
}
.mobile-install-copy span{
  font-size:.78rem;
  color:#475569;
  line-height:1.35;
}
.mobile-install-actions{display:flex;align-items:center;gap:.45rem;flex-wrap:nowrap;}
.mobile-install-actions .btn{white-space:nowrap;border-radius:12px;}
.mobile-install-close{
  position:absolute;
  top:.4rem;
  right:.45rem;
  width:1.7rem;
  height:1.7rem;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#64748b;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.mobile-install-close:hover{background:rgba(15,23,42,.07);color:#0f172a;}
.mobile-install-close .material-symbols-outlined{font-size:1rem;}
.mobile-install-help{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:1rem;
  align-items:flex-start;
}
.mobile-install-help-icon{
  width:3rem;
  height:3rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:var(--brand-blue-faint);
  color:var(--brand-blue);
}
.mobile-install-help h3{margin:0 0 .35rem;font-size:1.05rem;}
.mobile-install-help p{margin:0;color:var(--text-secondary);line-height:1.65;}
.pwa-install-checklist{
  display:grid;
  gap:.55rem;
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--border);
}
.pwa-install-check{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.65rem;
  align-items:flex-start;
  padding:.72rem .8rem;
  border-radius:14px;
  background:var(--surface-1);
  border:1px solid var(--border);
}
.pwa-install-check .material-symbols-outlined{
  font-size:1.2rem;
  margin-top:.05rem;
}
.pwa-install-check.ok .material-symbols-outlined{color:var(--success);}
.pwa-install-check.bad .material-symbols-outlined{color:var(--error);}
.pwa-install-check strong{
  display:block;
  color:var(--text-primary);
  font-size:.86rem;
  margin-bottom:.15rem;
}
.pwa-install-check span{
  display:block;
  color:var(--text-secondary);
  font-size:.78rem;
  line-height:1.4;
}
[data-theme="dark"] .mobile-install-prompt{
  background:linear-gradient(145deg, rgba(22,27,34,.97), rgba(17,24,39,.97));
  border-color:rgba(255,255,255,.12);
}
[data-theme="dark"] .mobile-install-copy strong{color:var(--text-primary);}
[data-theme="dark"] .mobile-install-copy span{color:var(--text-secondary);}

@media (max-width: 820px){
  :root{--topbar-h:3.6rem;}
  body{overflow-x:hidden;}
  #app-topbar{
    grid-template-columns:minmax(0,1fr) auto !important;
    height:var(--topbar-h) !important;
    min-height:var(--topbar-h) !important;
    padding:.45rem .6rem !important;
    gap:.45rem !important;
  }
  #app-topbar > div:first-child{gap:.45rem !important;}
  #app-topbar > div:last-child{
    justify-self:end !important;
    justify-content:flex-end !important;
    gap:.25rem !important;
    min-width:0;
  }
  .topbar-search-trigger{
    width:2.25rem !important;
    min-width:2.25rem !important;
    padding:0 !important;
    justify-content:center !important;
  }
  .topbar-search-trigger span:not(.material-symbols-outlined){display:none !important;}
  #company-logo-img,
  #company-logo-fallback{
    width:2rem !important;
    height:2rem !important;
  }
  #company-name{font-size:.88rem !important;max-width:5.8rem;}
  .topbar-portal-btn,
  #theme-btn{display:none !important;}
  .company-switcher{display:block !important;position:relative !important;z-index:2200;}
  .company-pill{
    height:2.25rem !important;
    padding:.35rem .48rem !important;
    border-radius:11px !important;
    gap:.25rem !important;
    max-width:6.8rem;
  }
  .company-pill #cs-label{
    display:inline-block;
    max-width:4.25rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.75rem;
  }
  .company-switcher-menu{
    position:fixed !important;
    top:calc(var(--topbar-h) + .45rem) !important;
    left:auto !important;
    right:.6rem !important;
    width:min(20rem, calc(100vw - 1.2rem)) !important;
    transform:translateY(-6px) scale(.98) !important;
    z-index:9999 !important;
  }
  .company-switcher.open .company-switcher-menu{
    transform:translateY(0) scale(1) !important;
  }
  .topbar-user-copy{display:none !important;}
  .topbar-user-btn{padding:.2rem !important;min-width:2.25rem;}
  .icon-btn{width:2.25rem;height:2.25rem;flex-shrink:0;}
  #app-content{
    margin-left:0 !important;
    padding:calc(var(--topbar-h) + .7rem) .7rem calc(5.25rem + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x:hidden;
  }
  #app-content > .page-container{
    width:100%;
    max-width:100%;
    gap:.85rem;
  }
  .page-header,
  .card,
  .modal-content,
  .kpi-card,
  .stats-card,
  .bimas-kpi{
    border-radius:14px !important;
  }
  .page-header,
  .card{
    padding:1rem !important;
  }
  .section-header{
    margin:-1rem -1rem .9rem !important;
    padding:.8rem 1rem !important;
  }
  h1{font-size:1.35rem;}
  h2{font-size:1.1rem;}
  h3{font-size:1rem;}
  .grid-2,
  .grid-3,
  .grid-4,
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:2fr"],
  [style*="grid-template-columns:1.2fr"],
  [style*="grid-template-columns:1.5fr"]{
    grid-template-columns:1fr !important;
  }
  .flex-between,
  .page-actions,
  .header-actions,
  .section-actions,
  .action-buttons,
  .form-actions,
  .hero-actions,
  .card-actions,
  .toolbar-actions,
  .table-actions,
  .row-actions,
  .modal-actions,
  .action-row{
    flex-wrap:wrap !important;
    gap:.55rem !important;
  }
  .page-actions .btn,
  .header-actions .btn,
  .section-actions .btn,
  .action-buttons .btn,
  .form-actions .btn,
  .hero-actions .btn,
  .card-actions .btn,
  .toolbar-actions .btn,
  .table-actions .btn,
  .row-actions .btn,
  .modal-actions .btn,
  .action-row .btn{
    flex:1 1 9.5rem;
    justify-content:center;
  }
  .table-wrapper,
  .table-responsive,
  [style*="overflow-x:auto"]{
    width:100%;
    max-width:100%;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .data-table,
  table{
    min-width:44rem;
  }
  .data-table th,
  .data-table td{
    padding:.62rem .7rem !important;
    font-size:.75rem !important;
    white-space:nowrap;
  }
  input,
  select,
  textarea,
  .form-input,
  .form-select{
    min-height:2.65rem;
    font-size:16px !important;
  }
  #app-bottomnav{
    height:auto;
    min-height:4.35rem;
    padding:.42rem .45rem calc(.42rem + env(safe-area-inset-bottom, 0px));
    gap:.25rem;
    border-top:1px solid rgba(148,163,184,.24);
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  [data-theme="dark"] #app-bottomnav{background:rgba(13,17,23,.94);}
  .bottomnav-item{
    min-width:0;
    padding:.36rem .18rem;
    border-radius:12px;
    gap:.15rem;
  }
  .bottomnav-item .material-symbols-outlined{font-size:1.16rem;}
  .bottomnav-item span:last-child{
    font-size:.62rem;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .modal-content{
    width:calc(100vw - 1rem) !important;
    max-width:calc(100vw - 1rem) !important;
    max-height:calc(100dvh - 1.25rem) !important;
    overflow:auto;
  }
  .toast-container{
    left:.7rem !important;
    right:.7rem !important;
    top:calc(var(--topbar-h) + .6rem) !important;
  }
  .toast{width:100%;}
}

@media (max-width: 520px){
  #company-name{display:none !important;}
  .company-pill{max-width:5.9rem;}
  .company-pill #cs-label{max-width:3.45rem;}
  .topbar-alert-btn:has(#topbar-mail-badge),
  .topbar-alert-btn:has(#topbar-chat-badge){display:none !important;}
  .mobile-install-prompt{
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    padding:.85rem .85rem .95rem;
  }
  .mobile-install-actions{
    grid-column:1/-1;
    width:100%;
  }
  .mobile-install-actions .btn{
    flex:1 1 0;
    justify-content:center;
  }
  .mobile-install-copy strong{font-size:.9rem;}
  .mobile-install-copy span{font-size:.74rem;}
}

/* Mobile app shell scroll ownership */
@media (max-width:1024px){
  :root{
    --mobile-bottomnav-h:calc(4.9rem + env(safe-area-inset-bottom, 0px));
  }
  html[data-auth-ready="app"],
  html[data-auth-ready="app"] body{
    width:100%;
    height:100% !important;
    min-height:100% !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }
  html[data-auth-ready="app"] #app-topbar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:180 !important;
  }
  html[data-auth-ready="app"] #app-content{
    position:fixed !important;
    top:var(--topbar-h) !important;
    left:0 !important;
    right:0 !important;
    bottom:var(--mobile-bottomnav-h) !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:.8rem .8rem 1rem !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
    z-index:1 !important;
  }
  html[data-auth-ready="app"] #app-content > .page-container{
    min-height:min-content !important;
    min-width:0 !important;
    padding-bottom:1rem !important;
  }
  html[data-auth-ready="app"] #app-sidebar{
    position:fixed !important;
    top:0 !important;
    bottom:0 !important;
    height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
    overscroll-behavior:contain !important;
    z-index:200 !important;
  }
  html[data-auth-ready="app"] #app-sidebar:not(.open):not(.mobile-open){
    pointer-events:none !important;
  }
  html[data-auth-ready="app"] #app-sidebar.open,
  html[data-auth-ready="app"] #app-sidebar.mobile-open{
    pointer-events:auto !important;
  }
  html[data-auth-ready="app"] #app-sidebar .sidebar-nav{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
  }
  html[data-auth-ready="app"] .sidebar-overlay{
    z-index:190 !important;
    touch-action:none !important;
  }
  html[data-auth-ready="app"] #app-bottomnav{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:170 !important;
  }
}

@media (max-width:520px){
  html[data-auth-ready="app"] #app-content{
    padding:.65rem .6rem .9rem !important;
  }
}

/* Android app settings */
.settings-mobile-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.85rem;
  margin-bottom:1rem;
}
.settings-mobile-stat{
  display:flex;
  align-items:center;
  gap:.75rem;
  min-width:0;
  padding:.95rem;
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  background:linear-gradient(180deg,var(--surface-0),var(--surface-1));
  box-shadow:var(--shadow-xs);
}
.settings-mobile-stat > .material-symbols-outlined{
  width:2.45rem;
  height:2.45rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:.75rem;
  color:#fff;
  background:var(--mobile-stat);
  box-shadow:0 10px 20px color-mix(in srgb, var(--mobile-stat) 24%, transparent);
}
.settings-mobile-stat strong{
  display:block;
  color:var(--text-primary);
  font-size:.95rem;
  font-weight:900;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.settings-mobile-stat p{
  color:var(--text-muted);
  font-size:.72rem;
  font-weight:700;
  margin:.16rem 0 0;
}
.settings-mobile-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  padding:.9rem;
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  background:var(--surface-1);
}
.settings-mobile-note{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  margin-top:.85rem;
  padding:.85rem .95rem;
  border-radius:var(--r-lg);
  background:var(--brand-blue-faint);
  color:var(--text-secondary);
}
.settings-mobile-note .material-symbols-outlined{
  color:var(--brand-blue);
  font-size:1.1rem;
  margin-top:.08rem;
}
.settings-mobile-note p{
  font-size:.78rem;
  line-height:1.55;
  margin:0;
}

@media (max-width:1024px){
  .settings-mobile-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:560px){
  .settings-mobile-grid{grid-template-columns:1fr;}
  .settings-mobile-actions .btn{
    flex:1 1 100%;
    justify-content:center;
  }
}

/* Mobile ERP finance navigation */
html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-actionbar,
html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-list{
  display:none;
}

@media (max-width:820px){
  html[data-auth-ready="app"] #app-bottomnav{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    align-items:stretch !important;
  }
  html[data-auth-ready="app"] .bottomnav-item{
    min-height:3.35rem !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:10px !important;
    color:#475569 !important;
    font-weight:850 !important;
  }
  html[data-auth-ready="app"] .bottomnav-item.active,
  html[data-auth-ready="app"] .bottomnav-item[aria-current="page"]{
    color:#0f766e !important;
    background:#ecfdf5 !important;
  }
  html[data-auth-ready="app"] .bottomnav-item .material-symbols-outlined{
    font-size:1.22rem !important;
  }
  html[data-auth-ready="app"] .bottomnav-item span:last-child{
    font-size:.62rem !important;
    line-height:1.05 !important;
    letter-spacing:0 !important;
  }

  html[data-auth-ready="app"] body[data-route="accounts"] #app-content{
    padding:.55rem .55rem .85rem !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-module{
    gap:.65rem !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-page-header{
    padding:.85rem !important;
    border-radius:8px !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-page-header .breadcrumb{
    display:none !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-page-header h1{
    font-size:1.16rem !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-page-header p{
    max-width:100% !important;
    font-size:.73rem !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-header-actions{
    width:100% !important;
    justify-content:stretch !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-header-actions .btn{
    flex:1 1 100% !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:.5rem !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-card{
    min-height:4.8rem !important;
    padding:.58rem !important;
    grid-template-columns:1.75rem minmax(0,1fr) !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-icon{
    width:1.75rem !important;
    height:1.75rem !important;
    min-width:1.75rem !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-value{
    font-size:.82rem !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-label,
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-sub{
    font-size:.54rem !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-tabbar{
    position:sticky !important;
    top:.15rem !important;
    z-index:25 !important;
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    padding:.3rem !important;
    margin-bottom:.55rem !important;
    -webkit-overflow-scrolling:touch !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-tabbar .btn{
    flex:0 0 auto !important;
    min-height:2.2rem !important;
    font-size:.72rem !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-actionbar{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:.45rem !important;
    margin:-.15rem 0 .25rem !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-actionbar button{
    min-width:0 !important;
    min-height:3.85rem !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.2rem !important;
    padding:.45rem .2rem !important;
    border:1px solid #dbe6f2 !important;
    border-radius:8px !important;
    background:#ffffff !important;
    color:#334155 !important;
    font:inherit !important;
    font-weight:900 !important;
    box-shadow:0 4px 12px rgba(15,23,42,.04) !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-actionbar button.active{
    border-color:#0f766e !important;
    color:#0f766e !important;
    background:#ecfdf5 !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-actionbar .material-symbols-outlined{
    font-size:1.15rem !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-actionbar strong{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:.62rem !important;
    line-height:1.05 !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-ledger-layout,
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-pc-grid{
    grid-template-columns:1fr !important;
    gap:.65rem !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-pc-grid > .accounts-card:nth-child(2){
    order:-1 !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-card .section-header,
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .card .section-header{
    min-height:0 !important;
    margin:-1rem -1rem .75rem !important;
    padding:.72rem .82rem !important;
  }
}

@media (max-width:640px){
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-pc-grid .accounts-table-wrap{
    display:none !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-petty-mobile-list{
    display:grid !important;
    gap:.55rem !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:.65rem !important;
    padding:.72rem !important;
    border:1px solid #dbe6f2 !important;
    border-radius:8px !important;
    background:#fff !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-row.is-income{
    border-left:4px solid #0f766e !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-row.is-expense{
    border-left:4px solid #dc2626 !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-row-main{
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:.55rem !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-row-main > .material-symbols-outlined{
    width:2rem !important;
    height:2rem !important;
    display:grid !important;
    place-items:center !important;
    flex:0 0 auto !important;
    border-radius:7px !important;
    background:#f1f5f9 !important;
    color:#0f766e !important;
    font-size:1rem !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-row-main strong,
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-row-main small,
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-row-money small{
    display:block !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-row-main strong{
    color:#0f172a !important;
    font-size:.8rem !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-row-main small,
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-row-money small{
    color:#64748b !important;
    font-size:.66rem !important;
    margin-top:.12rem !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-row-money{
    min-width:5.8rem !important;
    text-align:right !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-row-money strong{
    display:block !important;
    color:#0f172a !important;
    font-size:.78rem !important;
    white-space:nowrap !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-empty{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.32rem !important;
    min-height:9rem !important;
    padding:1rem !important;
    border:1px dashed #cbd5e1 !important;
    border-radius:8px !important;
    text-align:center !important;
    color:#64748b !important;
    background:#f8fafc !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-empty strong{
    color:#0f172a !important;
    font-size:.9rem !important;
  }
}

@media (max-width:420px){
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-mobile-actionbar{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-grid{
    grid-template-columns:1fr !important;
  }
}

/* Notifications module professional responsive UI */
html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-module{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-page-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:1rem;
  margin:0;
  padding:1.05rem 1.15rem;
  border:1px solid #dbe6f2;
  border-top:4px solid #2563eb;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.055);
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-breadcrumb{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin:0 0 .35rem;
  color:#2563eb;
  font-size:.68rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-breadcrumb .material-symbols-outlined{
  font-size:1rem;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-page-header h1{
  margin:0;
  color:#0f172a;
  font-size:1.45rem;
  line-height:1.12;
  font-weight:950;
  letter-spacing:0;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-page-header p{
  max-width:48rem;
  margin:.36rem 0 0;
  color:#64748b;
  font-size:.82rem;
  line-height:1.45;
  font-weight:650;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.55rem;
  flex-wrap:wrap;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-header-actions .btn{
  min-height:2.35rem;
  border-radius:7px;
  font-weight:900;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-kpi-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.72rem;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-kpi-card{
  position:relative;
  min-height:6.15rem;
  display:grid;
  grid-template-columns:2.45rem minmax(0,1fr);
  gap:.7rem;
  align-items:center;
  padding:.82rem .78rem;
  overflow:hidden;
  border:1px solid #dbe6f2;
  border-radius:8px;
  background:#fff;
  box-shadow:0 6px 18px rgba(15,23,42,.045);
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-kpi-card:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:var(--notif-tone,#2563eb);
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-kpi-icon{
  width:2.45rem;
  height:2.45rem;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:color-mix(in srgb,var(--notif-tone,#2563eb) 12%,#fff);
  color:var(--notif-tone,#2563eb);
  font-size:1.18rem;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-kpi-card strong,
html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-kpi-card span,
html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-kpi-card small{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-kpi-card strong{
  color:#0f172a;
  font-size:1.18rem;
  line-height:1.05;
  font-weight:950;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-kpi-card span:not(.material-symbols-outlined){
  margin-top:.18rem;
  color:#334155;
  font-size:.67rem;
  line-height:1.15;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.04em;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-kpi-card small{
  margin-top:.35rem;
  padding-top:.38rem;
  border-top:1px solid #e6edf6;
  color:#64748b;
  font-size:.62rem;
  line-height:1.15;
  font-weight:750;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-tabbar{
  display:flex;
  width:fit-content;
  max-width:100%;
  gap:.28rem;
  padding:.32rem;
  border:1px solid #dbe6f2;
  border-radius:8px;
  background:#fff;
  box-shadow:0 4px 14px rgba(15,23,42,.04);
  overflow-x:auto;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-tabbar button,
html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-severity-filter button{
  min-height:2.25rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  padding:.48rem .72rem;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#64748b;
  font:inherit;
  font-size:.76rem;
  font-weight:900;
  white-space:nowrap;
  cursor:pointer;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-tabbar button.active,
html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-severity-filter button.active{
  color:#2563eb;
  background:#eff6ff;
  box-shadow:0 3px 10px rgba(37,99,235,.1);
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-policy-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:.75rem;
  padding:.82rem .95rem;
  border:1px solid #bfdbfe;
  border-radius:8px;
  background:#eff6ff;
  color:#1e3a8a;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-policy-card > .material-symbols-outlined{
  width:2.15rem;
  height:2.15rem;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#fff;
  color:#2563eb;
  font-size:1.1rem;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-policy-card p{
  margin:0;
  color:#172554;
  font-size:.8rem;
  line-height:1.25;
  font-weight:950;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-policy-card small{
  display:block;
  margin-top:.12rem;
  color:#475569;
  font-size:.72rem;
  line-height:1.35;
  font-weight:700;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-list-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.72rem;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-severity-filter{
  display:flex;
  flex-wrap:wrap;
  gap:.25rem;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-alert-list{
  display:grid;
  gap:.62rem;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-alert-card{
  display:grid;
  grid-template-columns:2.45rem minmax(0,1fr);
  gap:.75rem;
  align-items:start;
  padding:.9rem;
  border:1px solid #dbe6f2;
  border-left:4px solid var(--notif-tone,#2563eb);
  border-radius:8px;
  background:#fff;
  box-shadow:0 6px 18px rgba(15,23,42,.035);
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-alert-card.is-unread{
  background:linear-gradient(180deg,#fff,#f8fbff);
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-alert-icon{
  width:2.45rem;
  height:2.45rem;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:color-mix(in srgb,var(--notif-tone,#2563eb) 12%,#fff);
  color:var(--notif-tone,#2563eb);
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-alert-icon .material-symbols-outlined{
  font-size:1.12rem;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-alert-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.65rem;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-alert-head h3{
  margin:0;
  color:#0f172a;
  font-size:.9rem;
  line-height:1.22;
  font-weight:950;
  letter-spacing:0;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-alert-card p{
  margin:.32rem 0 0;
  color:#475569;
  font-size:.8rem;
  line-height:1.55;
  font-weight:650;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-alert-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.38rem .65rem;
  margin-top:.55rem;
  color:#64748b;
  font-size:.68rem;
  font-weight:800;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-alert-meta span{
  display:inline-flex;
  align-items:center;
  gap:.22rem;
  min-width:0;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-alert-meta .material-symbols-outlined{
  font-size:.9rem;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-alert-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:.7rem;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  min-height:15rem;
  padding:2rem;
  border:1px dashed #cbd5e1;
  border-radius:8px;
  background:#f8fafc;
  text-align:center;
  color:#64748b;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-empty .material-symbols-outlined{
  color:#94a3b8;
  font-size:2.5rem;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-empty h3{
  margin:0;
  color:#0f172a;
  font-size:1rem;
  font-weight:950;
}

html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-empty p{
  margin:0;
  font-size:.78rem;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:820px){
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content{
    padding:.55rem .55rem .85rem !important;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-page-header{
    grid-template-columns:1fr;
    padding:.9rem;
    gap:.75rem;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-page-header h1{
    font-size:1.2rem;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-page-header p{
    font-size:.74rem;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-header-actions{
    justify-content:stretch;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-header-actions .btn{
    flex:1 1 8.5rem;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.5rem;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-kpi-card{
    min-height:5.25rem;
    grid-template-columns:2rem minmax(0,1fr);
    padding:.65rem;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-kpi-icon{
    width:2rem;
    height:2rem;
    font-size:1rem;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-kpi-card strong{
    font-size:.95rem;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-kpi-card span:not(.material-symbols-outlined){
    font-size:.58rem;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-kpi-card small{
    font-size:.56rem;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-tabbar{
    position:sticky;
    top:.15rem;
    z-index:25;
    width:100%;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-tabbar button{
    flex:1 0 auto;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-policy-card{
    grid-template-columns:auto minmax(0,1fr);
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-policy-card .btn{
    grid-column:1/-1;
    justify-content:center;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-list-toolbar{
    align-items:stretch;
    flex-direction:column;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-severity-filter{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-severity-filter button{
    min-width:0;
    padding:.45rem .22rem;
    font-size:.62rem;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-alert-card{
    grid-template-columns:1fr;
    gap:.55rem;
    padding:.78rem;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-alert-icon{
    width:2.15rem;
    height:2.15rem;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-alert-head{
    flex-direction:column;
    gap:.35rem;
  }
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-alert-actions .btn{
    flex:1 1 8rem;
    justify-content:center;
  }
}

@media (max-width:430px){
  html[data-auth-ready="app"] body[data-route="notifications"] #app-content .notifications-kpi-grid{
    grid-template-columns:1fr;
  }
}

/* ERP-wide KPI card polish */
html[data-auth-ready="app"] #app-content :where(
  .kpi-card,
  .stats-card,
  .dash-kpi,
  .bimas-kpi,
  .inv-kpi-card,
  .accounts-kpi-card,
  .notifications-kpi-card,
  .invoice-kpi-card,
  .imprest-kpi-card,
  .voucher-kpi-card,
  .expenses-kpi-card,
  .payroll-kpi-card,
  .finrep-kpi-card,
  .reports-hub-kpi,
  .reports-report-kpi,
  .sales-perf-kpi,
  .fgs-kpi-card
){
  position:relative !important;
  min-width:0 !important;
  overflow:hidden !important;
  border:1px solid #dbe6f2 !important;
  border-radius:8px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96)) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.055) !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

html[data-auth-ready="app"] #app-content :where(
  .kpi-card,
  .stats-card,
  .dash-kpi,
  .bimas-kpi,
  .inv-kpi-card,
  .accounts-kpi-card,
  .notifications-kpi-card,
  .invoice-kpi-card,
  .imprest-kpi-card,
  .voucher-kpi-card,
  .expenses-kpi-card,
  .payroll-kpi-card,
  .finrep-kpi-card,
  .reports-hub-kpi,
  .reports-report-kpi,
  .sales-perf-kpi,
  .fgs-kpi-card
):hover{
  transform:translateY(-1px) !important;
  border-color:#c7d7ea !important;
  box-shadow:0 12px 28px rgba(15,23,42,.075) !important;
}

html[data-auth-ready="app"] #app-content :where(
  .kpi-card,
  .stats-card,
  .dash-kpi,
  .bimas-kpi,
  .inv-kpi-card,
  .accounts-kpi-card,
  .notifications-kpi-card,
  .invoice-kpi-card,
  .imprest-kpi-card,
  .voucher-kpi-card,
  .expenses-kpi-card,
  .payroll-kpi-card,
  .finrep-kpi-card,
  .reports-hub-kpi,
  .reports-report-kpi,
  .sales-perf-kpi,
  .fgs-kpi-card
)::before{
  content:"" !important;
  position:absolute !important;
  inset:0 0 auto !important;
  height:3px !important;
  display:block !important;
  border-radius:8px 8px 0 0 !important;
  background:var(--kpi-bar,var(--notif-tone,var(--accounts-tone,var(--tone,var(--inv-pfi-tone,var(--brand-blue)))))) !important;
  opacity:.95 !important;
}

html[data-auth-ready="app"] #app-content :where(
  .kpi-card,
  .stats-card,
  .dash-kpi,
  .bimas-kpi,
  .inv-kpi-card,
  .accounts-kpi-card,
  .notifications-kpi-card,
  .invoice-kpi-card,
  .imprest-kpi-card,
  .voucher-kpi-card,
  .expenses-kpi-card,
  .payroll-kpi-card,
  .finrep-kpi-card,
  .reports-hub-kpi,
  .reports-report-kpi,
  .sales-perf-kpi,
  .fgs-kpi-card
)::after{
  content:"" !important;
  position:absolute !important;
  top:-2.4rem !important;
  right:-1.7rem !important;
  width:6.6rem !important;
  height:6.6rem !important;
  display:block !important;
  border-radius:0 0 0 5.8rem !important;
  background:var(--kpi-bar,var(--notif-tone,var(--accounts-tone,var(--tone,var(--inv-pfi-tone,var(--brand-blue)))))) !important;
  opacity:.075 !important;
  pointer-events:none !important;
  transform:none !important;
}

html[data-auth-ready="app"] #app-content :where(
  .kpi-icon,
  .bimas-kpi-icon,
  .dash-kpi .kicon,
  .inv-kpi-icon,
  .accounts-kpi-icon,
  .notifications-kpi-icon,
  .invoice-kpi-head .inv-kpi-icon,
  .imprest-kpi-icon,
  .voucher-kpi-icon,
  .expenses-kpi-icon,
  .payroll-kpi-icon,
  .finrep-kpi-icon,
  .reports-hub-kpi-icon,
  .reports-report-kpi-icon,
  .sales-perf-kpi-icon,
  .fgs-kpi-head .material-symbols-outlined
){
  border-radius:7px !important;
  box-shadow:0 8px 16px color-mix(in srgb,var(--kpi-icon-color,var(--notif-tone,var(--accounts-tone,var(--tone,var(--brand-blue))))) 22%,transparent) !important;
}

html[data-auth-ready="app"] #app-content :where(
  .kpi-value,
  .stats-value,
  .bimas-kpi strong,
  .dash-kpi .value,
  .inv-kpi-value,
  .accounts-kpi-value,
  .notifications-kpi-card strong,
  .invoice-kpi-card .inv-kpi-value,
  .imprest-kpi-value,
  .voucher-kpi-value,
  .expenses-kpi-value,
  .payroll-kpi-value,
  .finrep-kpi-value,
  .reports-hub-kpi-value,
  .reports-report-kpi-value,
  .sales-perf-kpi-copy strong,
  .fgs-kpi-value
){
  color:#0f172a !important;
  font-family:var(--font-display) !important;
  font-weight:950 !important;
  letter-spacing:0 !important;
  line-height:1.06 !important;
  text-wrap:balance !important;
}

html[data-auth-ready="app"] #app-content :where(
  .kpi-label,
  .stats-label,
  .bimas-kpi span:not(.material-symbols-outlined),
  .dash-kpi .label,
  .inv-kpi-label,
  .accounts-kpi-label,
  .notifications-kpi-card span:not(.material-symbols-outlined),
  .invoice-kpi-card .inv-kpi-label,
  .imprest-kpi-label,
  .voucher-kpi-label,
  .expenses-kpi-label,
  .payroll-kpi-label,
  .finrep-kpi-label,
  .reports-hub-kpi-label,
  .reports-report-kpi-label,
  .sales-perf-kpi-copy > span,
  .fgs-kpi-label
){
  color:#475569 !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

html[data-auth-ready="app"] #app-content :where(
  .kpi-sub,
  .bimas-kpi small,
  .dash-kpi .sub,
  .inv-kpi-sub,
  .accounts-kpi-sub,
  .notifications-kpi-card small,
  .invoice-kpi-card .inv-kpi-sub,
  .imprest-kpi-sub,
  .voucher-kpi-sub,
  .expenses-kpi-sub,
  .payroll-kpi-sub,
  .finrep-kpi-sub,
  .reports-hub-kpi-sub,
  .fgs-kpi-sub
){
  color:#64748b !important;
  font-weight:750 !important;
  letter-spacing:0 !important;
  line-height:1.25 !important;
}

@media (max-width:820px){
  html[data-auth-ready="app"] #app-content :where(
    .kpi-card,
    .stats-card,
    .dash-kpi,
    .bimas-kpi,
    .inv-kpi-card,
    .accounts-kpi-card,
    .notifications-kpi-card,
    .invoice-kpi-card,
    .imprest-kpi-card,
    .voucher-kpi-card,
    .expenses-kpi-card,
    .payroll-kpi-card,
    .finrep-kpi-card,
    .reports-hub-kpi,
    .reports-report-kpi,
    .sales-perf-kpi,
    .fgs-kpi-card
  ){
    border-radius:8px !important;
    box-shadow:0 6px 16px rgba(15,23,42,.05) !important;
  }

  html[data-auth-ready="app"] #app-content :where(
    .kpi-value,
    .stats-value,
    .bimas-kpi strong,
    .dash-kpi .value,
    .inv-kpi-value,
    .accounts-kpi-value,
    .notifications-kpi-card strong,
    .invoice-kpi-card .inv-kpi-value,
    .imprest-kpi-value,
    .voucher-kpi-value,
    .expenses-kpi-value,
    .payroll-kpi-value,
    .finrep-kpi-value,
    .reports-hub-kpi-value,
    .reports-report-kpi-value,
    .sales-perf-kpi-copy strong,
    .fgs-kpi-value
  ){
    font-size:clamp(.92rem,4vw,1.08rem) !important;
  }
}

/* KPI card polish override - high specificity pass */
html[data-auth-ready="app"] body #app-content .kpi-card,
html[data-auth-ready="app"] body #app-content .stats-card,
html[data-auth-ready="app"] body #app-content .dash-kpi,
html[data-auth-ready="app"] body #app-content .bimas-kpi,
html[data-auth-ready="app"] body #app-content .inv-kpi-card,
html[data-auth-ready="app"] body #app-content .accounts-kpi-card,
html[data-auth-ready="app"] body #app-content .notifications-kpi-card,
html[data-auth-ready="app"] body #app-content .invoice-kpi-card,
html[data-auth-ready="app"] body #app-content .imprest-kpi-card,
html[data-auth-ready="app"] body #app-content .voucher-kpi-card,
html[data-auth-ready="app"] body #app-content .expenses-kpi-card,
html[data-auth-ready="app"] body #app-content .payroll-kpi-card,
html[data-auth-ready="app"] body #app-content .finrep-kpi-card,
html[data-auth-ready="app"] body #app-content .reports-hub-kpi,
html[data-auth-ready="app"] body #app-content .reports-report-kpi,
html[data-auth-ready="app"] body #app-content .sales-perf-kpi,
html[data-auth-ready="app"] body #app-content .fgs-kpi-card{
  position:relative !important;
  overflow:hidden !important;
  border:1px solid #cbd8ea !important;
  border-radius:8px !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.07) !important;
}

html[data-auth-ready="app"] body #app-content .kpi-card::before,
html[data-auth-ready="app"] body #app-content .stats-card::before,
html[data-auth-ready="app"] body #app-content .dash-kpi::before,
html[data-auth-ready="app"] body #app-content .bimas-kpi::before,
html[data-auth-ready="app"] body #app-content .inv-kpi-card::before,
html[data-auth-ready="app"] body #app-content .accounts-kpi-card::before,
html[data-auth-ready="app"] body #app-content .notifications-kpi-card::before,
html[data-auth-ready="app"] body #app-content .invoice-kpi-card::before,
html[data-auth-ready="app"] body #app-content .imprest-kpi-card::before,
html[data-auth-ready="app"] body #app-content .voucher-kpi-card::before,
html[data-auth-ready="app"] body #app-content .expenses-kpi-card::before,
html[data-auth-ready="app"] body #app-content .payroll-kpi-card::before,
html[data-auth-ready="app"] body #app-content .finrep-kpi-card::before,
html[data-auth-ready="app"] body #app-content .reports-hub-kpi::before,
html[data-auth-ready="app"] body #app-content .reports-report-kpi::before,
html[data-auth-ready="app"] body #app-content .sales-perf-kpi::before,
html[data-auth-ready="app"] body #app-content .fgs-kpi-card::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:auto !important;
  width:auto !important;
  height:4px !important;
  display:block !important;
  border-radius:8px 8px 0 0 !important;
  background:var(--kpi-bar,var(--notif-tone,var(--accounts-tone,var(--tone,var(--inv-pfi-tone,var(--brand-blue)))))) !important;
  opacity:1 !important;
  transform:none !important;
}

html[data-auth-ready="app"] body #app-content .kpi-card::after,
html[data-auth-ready="app"] body #app-content .stats-card::after,
html[data-auth-ready="app"] body #app-content .dash-kpi::after,
html[data-auth-ready="app"] body #app-content .bimas-kpi::after,
html[data-auth-ready="app"] body #app-content .inv-kpi-card::after,
html[data-auth-ready="app"] body #app-content .accounts-kpi-card::after,
html[data-auth-ready="app"] body #app-content .notifications-kpi-card::after,
html[data-auth-ready="app"] body #app-content .invoice-kpi-card::after,
html[data-auth-ready="app"] body #app-content .imprest-kpi-card::after,
html[data-auth-ready="app"] body #app-content .voucher-kpi-card::after,
html[data-auth-ready="app"] body #app-content .expenses-kpi-card::after,
html[data-auth-ready="app"] body #app-content .payroll-kpi-card::after,
html[data-auth-ready="app"] body #app-content .finrep-kpi-card::after,
html[data-auth-ready="app"] body #app-content .reports-hub-kpi::after,
html[data-auth-ready="app"] body #app-content .reports-report-kpi::after,
html[data-auth-ready="app"] body #app-content .sales-perf-kpi::after,
html[data-auth-ready="app"] body #app-content .fgs-kpi-card::after{
  content:"" !important;
  position:absolute !important;
  top:-2.25rem !important;
  right:-1.5rem !important;
  width:6.2rem !important;
  height:6.2rem !important;
  display:block !important;
  border-radius:0 0 0 5.5rem !important;
  background:var(--kpi-bar,var(--notif-tone,var(--accounts-tone,var(--tone,var(--inv-pfi-tone,var(--brand-blue)))))) !important;
  opacity:.1 !important;
  pointer-events:none !important;
}

html[data-auth-ready="app"] body #app-content .kpi-icon,
html[data-auth-ready="app"] body #app-content .bimas-kpi-icon,
html[data-auth-ready="app"] body #app-content .dash-kpi .kicon,
html[data-auth-ready="app"] body #app-content .inv-kpi-icon,
html[data-auth-ready="app"] body #app-content .accounts-kpi-icon,
html[data-auth-ready="app"] body #app-content .notifications-kpi-icon,
html[data-auth-ready="app"] body #app-content .imprest-kpi-icon,
html[data-auth-ready="app"] body #app-content .voucher-kpi-icon,
html[data-auth-ready="app"] body #app-content .expenses-kpi-icon,
html[data-auth-ready="app"] body #app-content .payroll-kpi-icon,
html[data-auth-ready="app"] body #app-content .finrep-kpi-icon,
html[data-auth-ready="app"] body #app-content .reports-hub-kpi-icon,
html[data-auth-ready="app"] body #app-content .reports-report-kpi-icon,
html[data-auth-ready="app"] body #app-content .sales-perf-kpi-icon{
  width:2.4rem !important;
  height:2.4rem !important;
  min-width:2.4rem !important;
  display:grid !important;
  place-items:center !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:center !important;
  text-align:center !important;
  line-height:1 !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:8px !important;
  background:var(--kpi-icon-color,var(--notif-tone,var(--accounts-tone,var(--tone,var(--brand-blue))))) !important;
  color:#fff !important;
  box-shadow:0 9px 18px rgba(15,23,42,.14) !important;
}

html[data-auth-ready="app"] body #app-content .kpi-icon .material-symbols-outlined,
html[data-auth-ready="app"] body #app-content .bimas-kpi-icon .material-symbols-outlined,
html[data-auth-ready="app"] body #app-content .dash-kpi .kicon .material-symbols-outlined,
html[data-auth-ready="app"] body #app-content .inv-kpi-icon .material-symbols-outlined,
html[data-auth-ready="app"] body #app-content .accounts-kpi-icon .material-symbols-outlined{
  display:block !important;
  width:1em !important;
  height:1em !important;
  color:#fff !important;
  font-size:1.08rem !important;
  line-height:1 !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
}

html[data-auth-ready="app"] body #app-content .kpi-value,
html[data-auth-ready="app"] body #app-content .stats-value,
html[data-auth-ready="app"] body #app-content .dash-kpi .value,
html[data-auth-ready="app"] body #app-content .inv-kpi-value,
html[data-auth-ready="app"] body #app-content .accounts-kpi-value,
html[data-auth-ready="app"] body #app-content .notifications-kpi-card strong,
html[data-auth-ready="app"] body #app-content .imprest-kpi-value,
html[data-auth-ready="app"] body #app-content .voucher-kpi-value,
html[data-auth-ready="app"] body #app-content .expenses-kpi-value,
html[data-auth-ready="app"] body #app-content .payroll-kpi-value,
html[data-auth-ready="app"] body #app-content .finrep-kpi-value,
html[data-auth-ready="app"] body #app-content .reports-hub-kpi-value,
html[data-auth-ready="app"] body #app-content .reports-report-kpi-value,
html[data-auth-ready="app"] body #app-content .sales-perf-kpi-copy strong,
html[data-auth-ready="app"] body #app-content .fgs-kpi-value{
  color:#0f172a !important;
  font-size:clamp(1rem,1.2vw,1.28rem) !important;
  font-weight:950 !important;
  line-height:1.05 !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] body #app-content .kpi-label,
html[data-auth-ready="app"] body #app-content .stats-label,
html[data-auth-ready="app"] body #app-content .dash-kpi .label,
html[data-auth-ready="app"] body #app-content .inv-kpi-label,
html[data-auth-ready="app"] body #app-content .accounts-kpi-label,
html[data-auth-ready="app"] body #app-content .notifications-kpi-card span:not(.material-symbols-outlined),
html[data-auth-ready="app"] body #app-content .imprest-kpi-label,
html[data-auth-ready="app"] body #app-content .voucher-kpi-label,
html[data-auth-ready="app"] body #app-content .expenses-kpi-label,
html[data-auth-ready="app"] body #app-content .payroll-kpi-label,
html[data-auth-ready="app"] body #app-content .finrep-kpi-label,
html[data-auth-ready="app"] body #app-content .reports-hub-kpi-label,
html[data-auth-ready="app"] body #app-content .reports-report-kpi-label,
html[data-auth-ready="app"] body #app-content .sales-perf-kpi-copy > span,
html[data-auth-ready="app"] body #app-content .fgs-kpi-label{
  color:#334155 !important;
  font-size:.66rem !important;
  font-weight:950 !important;
  line-height:1.15 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

/* Accounts module KPI cards - finance dashboard polish */
html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-grid{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:.62rem !important;
  margin:0 0 .25rem !important;
  align-items:stretch !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-card{
  --accounts-card-tone:var(--accounts-tone,var(--kpi-icon-color,#0f766e));
  min-height:5.65rem !important;
  display:grid !important;
  grid-template-columns:2.25rem minmax(0,1fr) !important;
  grid-template-rows:auto auto auto !important;
  column-gap:.55rem !important;
  row-gap:.08rem !important;
  align-items:center !important;
  padding:.74rem .62rem .64rem !important;
  border:1px solid #cbd8ea !important;
  border-radius:8px !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
  box-shadow:0 7px 18px rgba(15,23,42,.06) !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-card::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 0 auto !important;
  height:4px !important;
  border-radius:8px 8px 0 0 !important;
  background:var(--accounts-card-tone) !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-card::after{
  content:"" !important;
  position:absolute !important;
  top:-1.8rem !important;
  right:-1.35rem !important;
  width:5.4rem !important;
  height:5.4rem !important;
  border-radius:0 0 0 4.8rem !important;
  background:var(--accounts-card-tone) !important;
  opacity:.11 !important;
  pointer-events:none !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-icon{
  grid-column:1 !important;
  grid-row:1 / span 3 !important;
  width:2.25rem !important;
  height:2.25rem !important;
  min-width:2.25rem !important;
  display:grid !important;
  place-items:center !important;
  align-self:center !important;
  justify-self:center !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:8px !important;
  background:var(--accounts-card-tone) !important;
  color:#fff !important;
  box-shadow:0 8px 14px color-mix(in srgb,var(--accounts-card-tone) 22%,transparent) !important;
  z-index:1 !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-icon .material-symbols-outlined{
  display:block !important;
  width:1em !important;
  height:1em !important;
  color:#fff !important;
  font-size:1.06rem !important;
  line-height:1 !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-value{
  grid-column:2 !important;
  grid-row:1 !important;
  color:#0f172a !important;
  font-size:clamp(.82rem,.92vw,1rem) !important;
  font-weight:950 !important;
  line-height:1.05 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-label{
  grid-column:2 !important;
  grid-row:2 !important;
  color:#334155 !important;
  font-size:.56rem !important;
  font-weight:950 !important;
  line-height:1.12 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-sub{
  grid-column:2 !important;
  grid-row:3 !important;
  margin:.32rem 0 0 !important;
  padding-top:.36rem !important;
  border-top:1px solid #e2e8f0 !important;
  color:#64748b !important;
  font-size:.52rem !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media (max-width:680px){
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:.55rem !important;
  }

  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-card{
    min-height:5.35rem !important;
    grid-template-columns:2.15rem minmax(0,1fr) !important;
    padding:.7rem .62rem !important;
  }

  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-icon{
    width:2.15rem !important;
    height:2.15rem !important;
    min-width:2.15rem !important;
  }

  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-icon .material-symbols-outlined{
    font-size:1.05rem !important;
  }
}

@media (max-width:430px){
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content .accounts-kpi-grid{
    grid-template-columns:1fr !important;
  }
}

/* Settings excellence pass: organized, modern, and duplicate-free. */
html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-module{
  max-width:1440px !important;
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-legacy-data-card{
  display:none !important;
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-readiness-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.85rem;
  margin:1rem 0;
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-readiness-card{
  min-width:0;
  display:grid;
  grid-template-columns:2.55rem minmax(0,1fr);
  gap:.75rem;
  align-items:center;
  padding:.9rem;
  border:1px solid rgba(148,163,184,.24);
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 26px rgba(15,23,42,.045);
  text-decoration:none;
  color:var(--text-primary);
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-readiness-card > .material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-data-utility > .material-symbols-outlined{
  width:2.55rem;
  height:2.55rem;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--settings-tone,var(--brand-blue));
  color:#fff;
  box-shadow:0 8px 18px color-mix(in srgb,var(--settings-tone,var(--brand-blue)) 18%,transparent);
  font-size:1.18rem;
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-readiness-card p,
html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-data-utility h3{
  margin:0;
  color:var(--text-muted);
  font-size:.68rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-readiness-card strong{
  display:block;
  margin:.08rem 0;
  color:var(--text-primary);
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:950;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-readiness-card small,
html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-data-utility p{
  display:block;
  color:var(--text-secondary);
  font-size:.72rem;
  line-height:1.35;
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-readiness-card:hover{
  border-color:color-mix(in srgb,var(--settings-tone,var(--brand-blue)) 30%,#dbe5f0);
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(15,23,42,.075);
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-quick-nav{
  grid-template-columns:repeat(auto-fit,minmax(6.8rem,1fr)) !important;
  margin:1rem 0 1.25rem;
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-force-btn{
  background:#b91c1c !important;
  color:#fff !important;
  border-color:#991b1b !important;
  box-shadow:0 8px 18px rgba(185,28,28,.18) !important;
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-data-utility-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem;
  margin-bottom:1rem;
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-data-utility{
  display:grid;
  grid-template-columns:2.55rem minmax(0,1fr) auto;
  gap:.75rem;
  align-items:center;
  padding:.85rem;
  border:1px solid rgba(148,163,184,.24);
  border-radius:14px;
  background:#fff;
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-data-utility > .material-symbols-outlined{
  --settings-tone:var(--brand-blue);
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-data-utility strong{
  color:var(--brand-blue);
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:950;
  white-space:nowrap;
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-section-card{
  margin-bottom:1.25rem !important;
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content .section-header h2{
  font-size:1rem !important;
  letter-spacing:0 !important;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-readiness-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-readiness-grid,
  html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-data-utility-grid{
    grid-template-columns:1fr;
  }

  html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-data-utility{
    grid-template-columns:2.55rem minmax(0,1fr);
  }

  html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-data-utility .btn,
  html[data-auth-ready="app"] body[data-route="settings"] #app-content .settings-data-utility strong{
    grid-column:2;
    justify-self:start;
  }
}

/* Executive dashboard final polish: keep hero text and icons bright. */
html[data-auth-ready="app"] #app-content .dash-hero h1,
html[data-auth-ready="app"] #app-content .ceo-title,
html[data-auth-ready="app"] #app-content .ceo-hero h1,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-hero h1,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-title,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-hero h1{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:0 2px 14px rgba(0,0,0,.28) !important;
}

html[data-auth-ready="app"] #app-content .dash-hero .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .ceo-hero .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .ceo-kpi-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .ceo-command i .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .ceo-report i .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .ceo-decision i .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .ceo-signal i .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .ceo-activity-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .dash-kpi .kicon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .dash-head-icon.material-symbols-outlined,
html[data-auth-ready="app"] #app-content .dash-shortcut .material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-hero .material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-hero .material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-kpi-icon .material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-command i .material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report i .material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-decision i .material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-signal i .material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-activity-icon .material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-kpi .kicon .material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-head-icon.material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-shortcut .material-symbols-outlined{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 24 !important;
}

html[data-auth-ready="app"] #app-content .ceo-kpi-icon,
html[data-auth-ready="app"] #app-content .ceo-command i,
html[data-auth-ready="app"] #app-content .ceo-report i,
html[data-auth-ready="app"] #app-content .ceo-decision i,
html[data-auth-ready="app"] #app-content .ceo-signal i,
html[data-auth-ready="app"] #app-content .ceo-activity-icon,
html[data-auth-ready="app"] #app-content .dash-kpi .kicon,
html[data-auth-ready="app"] #app-content .dash-activity-icon,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-kpi-icon,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-command i,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report i,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-decision i,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-signal i,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-activity-icon,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-kpi .kicon,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-activity-icon{
  background:var(--activity-tone,var(--tone,var(--kpi-icon-color,var(--brand-blue)))) !important;
  color:#fff !important;
  border:1px solid color-mix(in srgb,var(--activity-tone,var(--tone,var(--kpi-icon-color,var(--brand-blue)))) 70%,#ffffff) !important;
  box-shadow:0 8px 18px color-mix(in srgb,var(--activity-tone,var(--tone,var(--kpi-icon-color,var(--brand-blue)))) 20%,transparent) !important;
}

html[data-auth-ready="app"] #app-content .ceo-activity,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-activity{
  align-items:center !important;
  grid-template-columns:2.45rem minmax(0,1fr) auto !important;
}

html[data-auth-ready="app"] #app-content .ceo-activity-icon,
html[data-auth-ready="app"] #app-content .dash-activity-icon,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-activity-icon,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-activity-icon{
  display:grid !important;
  place-items:center !important;
  align-self:center !important;
  justify-self:center !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
}

html[data-auth-ready="app"] #app-content .ceo-activity-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .dash-activity-icon .material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-activity-icon .material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-activity-icon .material-symbols-outlined{
  display:block !important;
  width:1em !important;
  height:1em !important;
  line-height:1 !important;
  margin:0 !important;
  text-align:center !important;
}

/* BIMAS BOM dashboard and master screens */
html[data-auth-ready="app"] body[data-route^="bom"] #app-content,
html[data-auth-ready="app"] body[data-route^="bom"] #app-content > .page-container{
  width:100%;
  max-width:none !important;
  padding:1rem !important;
  overflow-x:hidden;
  background:#f8fbff;
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-bom-page,
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-master-page{
  width:100%;
  max-width:100%;
  min-width:0;
  color:#061b3b;
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-module-header,
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-master-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  border:0;
  padding:.1rem .1rem 1rem;
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-module-header h1,
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-master-header h1{
  margin:0;
  color:#061b80;
  font-size:1.55rem;
  font-weight:900;
  letter-spacing:0;
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-module-header p,
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-master-header p{
  margin:.28rem 0 0;
  color:#001b7a;
  font-size:.85rem;
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-bom-kpis{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:.65rem;
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-kpi{
  min-width:0;
  min-height:5.35rem;
  border:1px solid #dce7f6 !important;
  border-radius:8px !important;
  box-shadow:none !important;
  padding:.85rem !important;
  background:#fff !important;
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-bom-layout{
  grid-template-columns:minmax(0,1.55fr) minmax(23rem,.78fr);
  gap:.8rem;
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-bom-main,
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-detail-card,
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-chart-card,
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-product-card,
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-material-card,
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-side-card,
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-definition-card,
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-notes-card,
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-attachments-card,
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-master-empty{
  background:#fff;
  border:1px solid #dce7f6;
  border-radius:8px;
  box-shadow:none;
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-table-wrap,
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-master-table-wrap{
  max-width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.bom-master-page{display:flex;flex-direction:column;gap:.8rem;}
.bom-master-actions,.bom-master-savebar > div{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;flex-wrap:wrap;}
.bom-btn{height:2.35rem;border:1px solid #b8cdfb;border-radius:5px;background:#fff;color:#0022a5;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:0 .9rem;font-size:.75rem;font-weight:850;cursor:pointer;}
.bom-btn .material-symbols-outlined{font-size:1rem;}
.bom-btn.primary{background:#003ddb;border-color:#003ddb;color:#fff;}
.bom-btn.outline{background:#fff;color:#0022a5;}
.bom-btn.danger{border-color:#ffb8b8;color:#df1d2d;background:#fff5f5;}
.bom-btn.small{height:2rem;font-size:.7rem;}
.bom-btn.full{width:100%;}
.bom-btn:disabled{opacity:.55;cursor:not-allowed;}
.bom-master-select-row{display:flex;justify-content:flex-end;}
.bom-master-select-row label{display:flex;align-items:center;gap:.5rem;color:#001b7a;font-size:.72rem;font-weight:850;}
.bom-master-select-row select{min-width:22rem;height:2.2rem;border:1px solid #cfdcf0;border-radius:5px;color:#001b7a;font-weight:800;padding:0 .7rem;}
.bom-master-grid{display:grid;grid-template-columns:minmax(0,1fr) 18rem;gap:.8rem;align-items:start;}
.bom-master-main{min-width:0;display:flex;flex-direction:column;gap:.8rem;}
.bom-product-card{display:grid;grid-template-columns:8.6rem minmax(0,1fr) 17rem;gap:1rem;padding:1rem;}
.bom-product-image{border-right:1px solid #dce7f6;display:grid;place-items:center;min-height:8.8rem;}
.bom-product-image img{max-width:7.4rem;max-height:7.4rem;object-fit:contain;}
.bom-product-image .material-symbols-outlined{font-size:5rem;color:#111827;}
.bom-product-fields,.bom-status-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;min-width:0;}
.bom-status-fields{grid-template-columns:1fr;border-left:1px solid #dce7f6;padding-left:1rem;}
.bom-product-fields label,.bom-status-fields label{display:flex;flex-direction:column;gap:.35rem;min-width:0;}
.bom-product-fields label.wide{grid-column:1/-1;}
.bom-product-fields span,.bom-status-fields span{color:#001b7a;font-size:.66rem;font-weight:900;}
.bom-product-fields input,.bom-product-fields textarea,.bom-status-fields input,.bom-status-fields select,.bom-master-select-row select{border:1px solid #cfdcf0;border-radius:5px;background:#fff;color:#001b7a;font-size:.78rem;font-weight:750;outline:0;}
.bom-product-fields input,.bom-status-fields input,.bom-status-fields select{height:2.1rem;padding:0 .7rem;}
.bom-product-fields textarea{min-height:4.65rem;resize:vertical;padding:.65rem .7rem;}
.bom-master-tabs{display:flex;align-items:flex-end;gap:2rem;border-bottom:1px solid #dce7f6;padding:0 .2rem;overflow:auto;}
.bom-master-tabs button{border:0;border-bottom:2px solid transparent;background:transparent;color:#102449;padding:.75rem .3rem;font-size:.72rem;font-weight:850;white-space:nowrap;}
.bom-master-tabs button.active{color:#003ddb;border-bottom-color:#003ddb;}
.bom-material-card{padding:.7rem;}
.bom-section-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.25rem .25rem .7rem;}
.bom-section-head h2,.bom-side-card h2,.bom-definition-card h3,.bom-notes-card h3,.bom-attachments-card h3{margin:0;color:#001b80;font-size:.78rem;font-weight:900;}
.bom-section-head > div{display:flex;gap:.55rem;flex-wrap:wrap;}
.bom-master-table{width:100%;min-width:72rem;border-collapse:collapse;color:#001b7a;font-size:.69rem;}
.bom-master-table th{background:#f7f9fd;color:#001b7a;padding:.72rem .55rem;border:1px solid #e6edf7;font-size:.62rem;font-weight:900;text-align:left;}
.bom-master-table td{border:1px solid #e6edf7;padding:.42rem .5rem;vertical-align:middle;}
.bom-master-table input,.bom-master-table select{width:100%;height:1.8rem;border:1px solid transparent;border-radius:4px;background:transparent;color:#001b7a;font-size:.68rem;font-weight:750;outline:0;}
.bom-master-table input:focus,.bom-master-table select:focus{border-color:#9bb8ff;background:#fff;}
.bom-stage,.bom-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:4px;padding:.2rem .45rem;font-size:.62rem;font-weight:900;white-space:nowrap;}
.bom-stage.forecast{background:#eaf2ff;color:#0047d8;}
.bom-stage.final{background:#f1e8ff;color:#5b21b6;}
.bom-pill.active{background:#dff7e6;color:#0a7a33;}
.bom-pill.draft{background:#fff0d7;color:#d35400;}
.bom-switch{display:inline-flex;align-items:center;justify-content:center;}
.bom-switch input{display:none;}
.bom-switch span{width:2rem;height:1rem;border-radius:999px;background:#c9d2e3;position:relative;}
.bom-switch span:before{content:"";position:absolute;width:.78rem;height:.78rem;border-radius:50%;background:#fff;left:.12rem;top:.11rem;transition:.18s ease;}
.bom-switch input:checked + span{background:#19984a;}
.bom-switch input:checked + span:before{transform:translateX(.98rem);}
.bom-checkline{display:inline-flex;align-items:center;gap:.25rem;color:#0a7a33;font-size:.66rem;font-weight:850;}
.bom-icon{width:1.65rem;height:1.65rem;border:1px solid #ffd0d0;border-radius:4px;background:#fff5f5;color:#e31b2f;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.bom-icon .material-symbols-outlined{font-size:.95rem;}
.bom-material-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;padding:.8rem .2rem .15rem;color:#405370;font-size:.68rem;}
.bom-material-footer i{display:inline-block;width:.5rem;height:.5rem;border-radius:2px;margin-right:.35rem;}
.bom-material-footer .fixed{background:#19984a;}
.bom-material-footer .variable{background:#f97316;}
.bom-master-bottom{display:grid;grid-template-columns:1.2fr .9fr .65fr;gap:.8rem;}
.bom-definition-card,.bom-notes-card,.bom-attachments-card,.bom-side-card{padding:.95rem;}
.bom-definition-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:.8rem;}
.bom-definition-grid div,.bom-notes-card ol,.bom-empty-attach{border:1px solid #dce7f6;border-radius:5px;padding:.75rem;color:#204060;font-size:.68rem;line-height:1.6;}
.bom-definition-grid div:first-child{background:#f0fff4;border-color:#ccefd5;}
.bom-definition-grid .variable,.bom-notes-card ol{background:#fff8ec;border-color:#f5d6a4;}
.bom-definition-grid strong{display:block;color:#0a7a33;margin-bottom:.35rem;}
.bom-definition-grid .variable strong{color:#d35400;}
.bom-notes-card ol{margin:.8rem 0 0;padding-left:1.7rem;}
.bom-empty-attach{margin:.8rem 0;color:#60708a;background:#fbfdff;}
.bom-master-side{min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;}
.bom-info-line,.bom-cost-line{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:.62rem 0;color:#001b7a;font-size:.72rem;}
.bom-info-line span,.bom-cost-line span{color:#12346a;font-weight:750;}
.bom-info-line strong,.bom-cost-line strong{color:#001b7a;font-weight:900;text-align:right;}
.bom-cost-line.green strong{color:#0a7a33;}
.bom-cost-line.orange strong{color:#f97316;}
.bom-flow-row{display:grid;grid-template-columns:1.6rem 1fr;gap:.7rem;margin:.9rem 0;}
.bom-flow-row > strong{width:1.45rem;height:1.45rem;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.7rem;background:#12933f;}
.bom-flow-row.final > strong{background:#f97316;}
.bom-flow-row h3{margin:0 0 .35rem;font-size:.72rem;color:#0a7a33;font-weight:900;}
.bom-flow-row.final h3{color:#f97316;}
.bom-flow-row p{margin:0;color:#102449;font-size:.68rem;line-height:1.5;}
.bom-flow-row span{display:inline-block;margin-top:.45rem;background:#eaf7ed;color:#0a7a33;border-radius:4px;padding:.2rem .5rem;font-size:.62rem;font-weight:850;}
.bom-flow-row.final span{background:#fff0dd;color:#f97316;}
.bom-total-cost{border-top:1px solid #dce7f6;margin-top:.7rem;padding-top:.75rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;color:#001b7a;font-weight:900;}
.bom-total-cost strong{font-size:1.25rem;color:#0022a5;}
.bom-master-savebar{position:sticky;bottom:.5rem;z-index:2;background:#fff;border:1px solid #dce7f6;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem;}
.bom-master-empty{padding:3rem 1rem;text-align:center;color:#001b7a;}
.bom-master-empty .material-symbols-outlined{font-size:3rem;color:#003ddb;}
.bom-master-empty h2{margin:.5rem 0;color:#061b80;font-weight:900;}
.bom-master-empty p{margin:0 auto 1rem;max-width:34rem;color:#405370;}
.bom-inventory-picker{display:flex;flex-direction:column;gap:.45rem;max-height:26rem;overflow:auto;padding:.25rem;}
.bom-inventory-picker label{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem;align-items:center;border:1px solid #dce7f6;border-radius:6px;background:#fff;padding:.7rem;color:#061b3b;}
.bom-inventory-picker label:hover{border-color:#9bb8ff;background:#f8fbff;}
.bom-inventory-picker span{display:flex;flex-direction:column;gap:.18rem;min-width:0;font-size:.76rem;font-weight:750;}
.bom-inventory-picker strong{color:#003ddb;font-size:.7rem;}
.bom-inventory-picker em{font-style:normal;color:#405370;font-size:.7rem;font-weight:800;text-align:right;white-space:nowrap;}
.bom-section-empty{display:grid;place-items:center;text-align:center;gap:.5rem;min-height:10rem;color:#405370;border:1px dashed #b8cdfb;border-radius:8px;background:#f8fbff;padding:1rem;}
.bom-section-empty .material-symbols-outlined{font-size:2.25rem;color:#003ddb;}
.bom-section-empty p{margin:0;color:#061b80;font-weight:900;}
.bom-section-empty small{max-width:32rem;line-height:1.5;}

@media (max-width:1440px){
  html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-bom-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
  .bom-master-grid{grid-template-columns:1fr;}
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-bom-layout{grid-template-columns:1fr;}
  .bom-product-card{grid-template-columns:7.5rem 1fr;}
  .bom-status-fields{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));border-left:0;border-top:1px solid #dce7f6;padding:1rem 0 0;}
  .bom-master-bottom{grid-template-columns:1fr;}
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route^="bom"] #app-content,
  html[data-auth-ready="app"] body[data-route^="bom"] #app-content > .page-container{padding:.65rem !important;}
  html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-module-header,
  html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-master-header{flex-direction:column;}
  html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-bom-kpis{grid-template-columns:1fr;}
  .bom-master-actions,.bom-master-savebar,.bom-master-savebar > div{width:100%;flex-direction:column;align-items:stretch;}
  .bom-btn,.bom-master-select-row,.bom-master-select-row label,.bom-master-select-row select{width:100%;}
  .bom-product-card{grid-template-columns:1fr;}
  .bom-product-image{border-right:0;border-bottom:1px solid #dce7f6;min-height:7rem;}
  .bom-product-fields,.bom-status-fields,.bom-definition-grid{grid-template-columns:1fr;}
  .bom-material-card,.bom-side-card,.bom-definition-card,.bom-notes-card,.bom-attachments-card{padding:.75rem;}
  .bom-section-head{align-items:stretch;flex-direction:column;}
  .bom-section-head > div{flex-direction:column;}
  .bom-inventory-picker label{grid-template-columns:auto minmax(0,1fr);}
  .bom-inventory-picker em{grid-column:2;text-align:left;white-space:normal;}
}

/* BOM fit and field visibility hardening */
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content,
html[data-auth-ready="app"] body[data-route="bom"] #app-content{
  width:100% !important;
  max-width:100% !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content > .page-container,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content > .page-container,
html[data-auth-ready="app"] body[data-route="bom"] #app-content > .page-container{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:1rem !important;
  padding-right:1rem !important;
  box-sizing:border-box !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-page,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-page,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-page{
  width:100% !important;
  max-width:none !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-layout{
  grid-template-columns:minmax(0,1fr) minmax(22rem,.36fr) !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-grid{
  grid-template-columns:minmax(0,1fr) minmax(17rem,.24fr) !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table{
  table-layout:fixed !important;
  min-width:82rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(2),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(2){
  width:13.5rem !important;
  min-width:13.5rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(7),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(7){
  width:7rem !important;
  min-width:7rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table select,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table input{
  display:block !important;
  min-width:0 !important;
  height:2rem !important;
  padding:0 .45rem !important;
  background:#fff !important;
  color:#001b7a !important;
  border:1px solid #bfd0ec !important;
  opacity:1 !important;
  visibility:visible !important;
  appearance:auto !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table select option{
  color:#001b7a !important;
  background:#fff !important;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-layout,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-grid{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content > .page-container,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content > .page-container,
  html[data-auth-ready="app"] body[data-route="bom"] #app-content > .page-container{
    padding-left:.65rem !important;
    padding-right:.65rem !important;
  }
}

/* BOM Master full-width workbench and table control polish */
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-header,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-select-row,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-grid,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-savebar{
  width:100% !important;
  max-width:none !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-grid{
  grid-template-columns:1fr !important;
  align-items:start !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-side{
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:.75rem !important;
  width:100% !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-side-card{
  padding:.8rem !important;
  margin:0 !important;
  min-width:0 !important;
  height:100% !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-info-line,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-cost-line,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-total-cost{
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-info-line span,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-cost-line span,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-total-cost span{
  min-width:0 !important;
  overflow-wrap:anywhere !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-info-line strong,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-cost-line strong,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-total-cost strong{
  flex:0 0 auto !important;
  max-width:50% !important;
  overflow-wrap:anywhere !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-card{
  grid-template-columns:7.5rem minmax(0,1fr) minmax(14rem,.22fr) !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-bottom{
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(12rem,.55fr) !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table-wrap{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table{
  min-width:78rem !important;
  table-layout:fixed !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td{
  box-sizing:border-box !important;
  overflow:visible !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(1),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(1){width:2.4rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(2),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(2){width:11rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(3),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(3){width:9.5rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(4),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(4){width:10.5rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(8),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(8){width:9.2rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(9),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(9){width:6.8rem !important;text-align:center !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(10),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(10){width:5.8rem !important;text-align:center !important;}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-stage{
  width:100% !important;
  min-height:1.8rem !important;
  padding:.25rem .45rem !important;
  white-space:normal !important;
  text-align:center !important;
  line-height:1.15 !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-switch-field{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.45rem !important;
  width:100% !important;
  min-height:2rem !important;
  border:1px solid #d5e1f2 !important;
  border-radius:6px !important;
  background:#f8fbff !important;
  color:#001b7a !important;
  font-size:.68rem !important;
  font-weight:900 !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-switch-field em{
  min-width:1.6rem !important;
  font-style:normal !important;
  color:#001b7a !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-switch{
  flex:0 0 auto !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-switch span{
  width:2.15rem !important;
  height:1.12rem !important;
  box-shadow:inset 0 0 0 1px rgba(8,31,83,.08) !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-switch span:before{
  top:.16rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-checkline{
  justify-content:center !important;
  gap:.35rem !important;
  width:100% !important;
  min-height:2rem !important;
  border:1px solid #d5e1f2 !important;
  border-radius:6px !important;
  background:#fff !important;
  color:#001b7a !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-checkline input{
  width:1rem !important;
  height:1rem !important;
  accent-color:#19984a !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-checkline span{
  font-size:.68rem !important;
  font-weight:900 !important;
}

@media (max-width:1360px){
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-grid{
    grid-template-columns:1fr !important;
  }

  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-side{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:.75rem !important;
  }
}

@media (max-width:900px){
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-card,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-bottom,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-side{
    grid-template-columns:1fr !important;
  }
}

/* BOM final compact fit pass */
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content > .page-container,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content > .page-container,
html[data-auth-ready="app"] body[data-route="bom"] #app-content > .page-container{
  padding:.65rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-page,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-page,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-page{
  gap:.55rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-header{
  padding:0 0 .45rem !important;
  gap:.6rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header h1,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-header h1{
  font-size:1.28rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header p,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-header p{
  font-size:.74rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-kpis{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:.45rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi{
  min-height:4.35rem !important;
  padding:.55rem !important;
  gap:.5rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi-icon{
  width:2.25rem !important;
  height:2.25rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi strong{
  font-size:.95rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi small,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi em{
  font-size:.58rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-layout,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-layout{
  grid-template-columns:1fr !important;
  gap:.55rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-side,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-side{
  display:grid !important;
  grid-template-columns:1.35fr .65fr !important;
  gap:.55rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-detail-card{
  padding:.7rem !important;
  margin:0 !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-info{
  grid-template-columns:5.5rem minmax(0,1fr) !important;
  gap:.65rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-img{
  height:5.5rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-img .material-symbols-outlined{
  font-size:3rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-table{
  min-width:52rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-charts{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:.55rem !important;
  padding:0 .7rem .7rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-chart-card{
  padding:.7rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-card{
  grid-template-columns:5.5rem minmax(0,1fr) 12rem !important;
  gap:.65rem !important;
  padding:.7rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-image{
  min-height:6rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-image .material-symbols-outlined{
  font-size:3.5rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-fields{
  gap:.5rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-status-fields{
  gap:.5rem !important;
  padding-left:.65rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-fields input,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-status-fields input,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-status-fields select{
  height:1.85rem !important;
  font-size:.7rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-fields textarea{
  min-height:3.25rem !important;
  font-size:.7rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-side{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:.5rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-side-card{
  padding:.6rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-side-card h2{
  font-size:.68rem !important;
  margin-bottom:.45rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-info-line,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-cost-line{
  margin:.36rem 0 !important;
  font-size:.64rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-flow-row{
  grid-template-columns:1.2rem 1fr !important;
  gap:.4rem !important;
  margin:.42rem 0 !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-flow-row > strong{
  width:1.12rem !important;
  height:1.12rem !important;
  font-size:.58rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-flow-row h3{
  font-size:.62rem !important;
  margin-bottom:.18rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-flow-row p{
  font-size:.6rem !important;
  line-height:1.35 !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-flow-row span{
  font-size:.56rem !important;
  margin-top:.25rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-total-cost{
  margin-top:.45rem !important;
  padding-top:.45rem !important;
  font-size:.66rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-total-cost strong{
  font-size:.9rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table{
  min-width:70rem !important;
  font-size:.62rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th{
  padding:.45rem .35rem !important;
  font-size:.56rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td{
  padding:.3rem .35rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table input,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table select{
  height:1.65rem !important;
  font-size:.6rem !important;
  padding:0 .28rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-stage{
  min-height:1.55rem !important;
  font-size:.55rem !important;
  padding:.18rem .25rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-switch-field,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-checkline{
  min-height:1.65rem !important;
  font-size:.58rem !important;
  gap:.25rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-switch span{
  width:1.75rem !important;
  height:.92rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-switch span:before{
  width:.62rem !important;
  height:.62rem !important;
  top:.15rem !important;
  left:.14rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-switch input:checked + span:before{
  transform:translateX(.85rem) !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(2),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(2){width:9.5rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(3),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(3){width:8.4rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(4),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(4){width:8.6rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(8),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(8){width:7.4rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(9),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(9){width:5.7rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(10),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(10){width:4.8rem !important;}

@media (max-width:1280px){
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-kpis,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-charts,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-side{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:820px){
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-side,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-kpis,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-charts,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-side{
    grid-template-columns:1fr !important;
  }
}

/* BOM alignment reset - final layout authority */
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content,
html[data-auth-ready="app"] body[data-route="bom"] #app-content{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  overflow-x:hidden !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content > .page-container,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content > .page-container,
html[data-auth-ready="app"] body[data-route="bom"] #app-content > .page-container{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:.75rem !important;
  box-sizing:border-box !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content *,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content *,
html[data-auth-ready="app"] body[data-route="bom"] #app-content *{
  box-sizing:border-box !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-page,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-page,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-page{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:.75rem !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  overflow:visible !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-header{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:.75rem !important;
  width:100% !important;
  min-width:0 !important;
  padding:0 0 .25rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header > div,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-header > div:first-child{
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header h1,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-header h1{
  font-size:1.22rem !important;
  line-height:1.15 !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header p,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-header p{
  font-size:.72rem !important;
  line-height:1.3 !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-actions{
  flex:0 1 auto !important;
  justify-content:flex-end !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-actions .bom-btn{
  height:2rem !important;
  padding:0 .65rem !important;
  font-size:.66rem !important;
  white-space:nowrap !important;
}

/* Dashboard: every major section stays in the visible content column. */
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-kpis,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-kpis{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:.5rem !important;
  width:100% !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi{
  min-width:0 !important;
  min-height:4.25rem !important;
  padding:.55rem !important;
  gap:.45rem !important;
  align-items:center !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi-icon,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi-icon{
  width:2rem !important;
  height:2rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi-body,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi-body{
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi strong,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi strong{
  font-size:.9rem !important;
  line-height:1.15 !important;
  overflow-wrap:anywhere !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi small,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi em,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi small,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi em{
  font-size:.56rem !important;
  line-height:1.2 !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-layout,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:.75rem !important;
  width:100% !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-main,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-main{
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-side,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-side{
  display:grid !important;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr) !important;
  gap:.75rem !important;
  width:100% !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-detail-card,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-detail-card{
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:.75rem !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-info,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-product-info{
  grid-template-columns:5rem minmax(0,1fr) !important;
  gap:.6rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-info > div,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-product-info > div{
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-img,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-product-img{
  width:5rem !important;
  height:5rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-table-wrap,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-table-wrap{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  padding:0 .7rem .7rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-table,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-table{
  min-width:50rem !important;
  font-size:.66rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-charts,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-charts{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:.6rem !important;
  width:100% !important;
  padding:0 .7rem .7rem !important;
}

/* Master: top cards, summary cards, table, and lower cards line up on one ruler. */
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-grid,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-main,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-card,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-side,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-material-card,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-bottom,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-savebar{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:.65rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-main{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:.65rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-card{
  display:grid !important;
  grid-template-columns:4.75rem minmax(0,1fr) 11.5rem !important;
  gap:.55rem !important;
  padding:.6rem !important;
  align-items:stretch !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-image{
  min-height:5.25rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-fields{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:.42rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-status-fields{
  gap:.42rem !important;
  padding-left:.55rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-side{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:.55rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-side-card{
  min-width:0 !important;
  margin:0 !important;
  padding:.6rem !important;
  overflow:hidden !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-side-card h2{
  font-size:.66rem !important;
  line-height:1.15 !important;
  margin:0 0 .42rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-info-line,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-cost-line{
  margin:.32rem 0 !important;
  gap:.35rem !important;
  font-size:.61rem !important;
  line-height:1.25 !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-info-line strong,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-cost-line strong{
  max-width:54% !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-flow-row{
  grid-template-columns:1.05rem minmax(0,1fr) !important;
  gap:.35rem !important;
  margin:.34rem 0 !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-flow-row > strong{
  width:1.05rem !important;
  height:1.05rem !important;
  font-size:.55rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-flow-row h3{
  font-size:.58rem !important;
  line-height:1.2 !important;
  margin:0 0 .14rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-flow-row p{
  font-size:.58rem !important;
  line-height:1.28 !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-flow-row span{
  font-size:.54rem !important;
  margin-top:.2rem !important;
  padding:.12rem .35rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-total-cost{
  margin-top:.35rem !important;
  padding-top:.35rem !important;
  gap:.35rem !important;
  font-size:.62rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-total-cost strong{
  font-size:.82rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table-wrap{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  padding-bottom:.15rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table{
  min-width:64rem !important;
  table-layout:fixed !important;
  font-size:.58rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th{
  padding:.38rem .28rem !important;
  font-size:.52rem !important;
  line-height:1.15 !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td{
  padding:.25rem .28rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table input,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table select{
  height:1.5rem !important;
  font-size:.56rem !important;
  padding:0 .22rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(1),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(1){width:2rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(2),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(2){width:8.2rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(3),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(3){width:7.4rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(4),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(4){width:7.5rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(5),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(5){width:4.5rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(6),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(6){width:4rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(7),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(7){width:5.2rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(8),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(8){width:6.5rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(9),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(9){width:5rem !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th:nth-child(10),
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td:nth-child(10){width:4.2rem !important;}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-stage{
  min-height:1.42rem !important;
  font-size:.5rem !important;
  line-height:1.12 !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-switch-field,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-checkline{
  min-height:1.5rem !important;
  font-size:.52rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-bottom{
  display:grid !important;
  grid-template-columns:1.15fr .9fr .65fr !important;
  gap:.55rem !important;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-kpis,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-charts,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-side,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-bottom{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-card{
    grid-template-columns:4.75rem minmax(0,1fr) !important;
  }

  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-status-fields{
    grid-column:1/-1 !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    border-left:0 !important;
    border-top:1px solid #dce7f6 !important;
    padding:.55rem 0 0 !important;
  }
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-kpis,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-charts,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-side,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-side,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-bottom,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-card,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-status-fields{
    grid-template-columns:1fr !important;
  }
}

/* Direct BOM module fallback, independent of body route matching */
#app-content .bimas-bom-page,
#app-content .bom-master-page{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  overflow-x:hidden !important;
}

#app-content .bimas-bom-page{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:.75rem !important;
}

#app-content .bimas-bom-page .bimas-bom-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:.75rem !important;
  width:100% !important;
}

#app-content .bimas-bom-page .bimas-bom-main{
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
}

#app-content .bimas-bom-page .bimas-bom-side{
  display:grid !important;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr) !important;
  gap:.75rem !important;
  width:100% !important;
  min-width:0 !important;
}

#app-content .bimas-bom-page .bimas-bom-kpis{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:.5rem !important;
}

#app-content .bimas-bom-page .bimas-bom-charts{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:.6rem !important;
}

#app-content .bom-master-page{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:.65rem !important;
}

#app-content .bom-master-page .bom-master-grid,
#app-content .bom-master-page .bom-master-main{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:.65rem !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

#app-content .bom-master-page .bom-master-side{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:.55rem !important;
  width:100% !important;
  min-width:0 !important;
}

#app-content .bom-master-page .bom-side-card{
  min-width:0 !important;
  margin:0 !important;
  padding:.6rem !important;
  overflow:hidden !important;
}

#app-content .bom-master-page .bom-material-card,
#app-content .bom-master-page .bom-master-table-wrap{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

#app-content .bom-master-page .bom-master-table-wrap{
  overflow-x:auto !important;
}

#app-content .bom-master-page .bom-master-table{
  min-width:64rem !important;
  table-layout:fixed !important;
}

@media (max-width:1180px){
  #app-content .bimas-bom-page .bimas-bom-kpis,
  #app-content .bimas-bom-page .bimas-bom-charts,
  #app-content .bom-master-page .bom-master-side,
  #app-content .bom-master-page .bom-master-bottom{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:760px){
  #app-content .bimas-bom-page .bimas-bom-kpis,
  #app-content .bimas-bom-page .bimas-bom-charts,
  #app-content .bimas-bom-page .bimas-bom-side,
  #app-content .bom-master-page .bom-master-side,
  #app-content .bom-master-page .bom-master-bottom{
    grid-template-columns:1fr !important;
  }
}

/* BOM Master low-priority table columns compacted */
#app-content .bom-master-page .bom-master-table th:nth-child(11),
#app-content .bom-master-page .bom-master-table td:nth-child(11){
  width:3rem !important;
  min-width:3rem !important;
  text-align:center !important;
}

#app-content .bom-master-page .bom-master-table th:nth-child(12),
#app-content .bom-master-page .bom-master-table td:nth-child(12),
#app-content .bom-master-page .bom-master-table th:nth-child(13),
#app-content .bom-master-page .bom-master-table td:nth-child(13){
  width:2.25rem !important;
  min-width:2.25rem !important;
  text-align:center !important;
}

#app-content .bom-master-page .bom-scrap-input{
  padding:0 .12rem !important;
  text-align:center !important;
}

#app-content .bom-master-page .bom-pill.compact{
  width:1.35rem !important;
  height:1.35rem !important;
  min-width:1.35rem !important;
  padding:0 !important;
  border-radius:50% !important;
  font-size:.55rem !important;
}

#app-content .bom-master-page .bom-icon{
  width:1.35rem !important;
  height:1.35rem !important;
}

#app-content .bom-master-page .bom-icon .material-symbols-outlined{
  font-size:.8rem !important;
}

/* BOM reference-grade responsive layout and topbar clearance */
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content,
html[data-auth-ready="app"] body[data-route="bom"] #app-content{
  padding:calc(var(--topbar-h) + .85rem) .9rem .95rem !important;
  background:#f8fbff !important;
  width:auto !important;
  max-width:none !important;
  overflow-x:hidden !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content > .page-container,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content > .page-container,
html[data-auth-ready="app"] body[data-route="bom"] #app-content > .page-container{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-page,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-page,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-page{
  width:100% !important;
  max-width:none !important;
  gap:.78rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-header{
  min-height:3rem !important;
  padding:0 !important;
  align-items:center !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header{
  justify-content:flex-start !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-header{
  justify-content:space-between !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header h1,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-header h1{
  margin:0 !important;
  color:#06145f !important;
  font-size:1.42rem !important;
  line-height:1.08 !important;
  font-weight:950 !important;
  letter-spacing:0 !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header p,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-header p{
  margin:.26rem 0 0 !important;
  color:#132a6b !important;
  font-size:.78rem !important;
  font-weight:800 !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-kpis,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-kpis{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:.62rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi{
  min-height:5.4rem !important;
  padding:.74rem .76rem !important;
  border-radius:.48rem !important;
  box-shadow:0 10px 24px rgba(9,28,87,.045) !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi-icon,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi-icon{
  width:2.75rem !important;
  height:2.75rem !important;
  flex:0 0 2.75rem !important;
  border-radius:50% !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi strong,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi strong{
  font-size:1.08rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-layout,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-layout{
  grid-template-columns:minmax(0,1fr) minmax(22rem,.42fr) !important;
  align-items:start !important;
  gap:.78rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-main,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-main,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-side,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-side{
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-side,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-side{
  grid-template-columns:minmax(0,1fr) !important;
  gap:.78rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-main,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-detail-card,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-chart-card,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-main,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-detail-card,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-chart-card{
  border-radius:.5rem !important;
  border-color:#dce7f6 !important;
  box-shadow:0 9px 24px rgba(9,28,87,.045) !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-toolbar,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-toolbar{
  gap:.55rem !important;
  padding:.8rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-table-wrap,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-table-wrap{
  padding:0 .8rem .8rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-table,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-table{
  min-width:58rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-info,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-product-info{
  grid-template-columns:6.2rem minmax(0,1fr) !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-product-img,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-product-img{
  width:6.2rem !important;
  height:6.2rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-charts,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-charts{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:.78rem !important;
  padding:0 !important;
  margin-top:.78rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-main{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(19rem,.28fr) !important;
  grid-template-areas:
    "product side"
    "tabs tabs"
    "materials materials"
    "bottom bottom" !important;
  gap:.78rem !important;
  align-items:start !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-card{
  grid-area:product !important;
  grid-template-columns:8.2rem minmax(0,1fr) minmax(13rem,.25fr) !important;
  gap:.8rem !important;
  padding:.9rem !important;
  min-width:0 !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-side{
  grid-area:side !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:.78rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-tabs{grid-area:tabs !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-material-card{grid-area:materials !important;}
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-bottom{grid-area:bottom !important;}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-image{
  min-height:8.2rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-image img{
  max-width:7.4rem !important;
  max-height:7.4rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-fields{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:.68rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-status-fields{
  grid-template-columns:minmax(0,1fr) !important;
  gap:.68rem !important;
  padding-left:.9rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-side-card,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-card,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-material-card,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-definition-card,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-notes-card,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-attachments-card{
  border-radius:.5rem !important;
  border-color:#dce7f6 !important;
  box-shadow:0 9px 24px rgba(9,28,87,.045) !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-side-card{
  padding:.9rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-side-card h2{
  font-size:.76rem !important;
  margin-bottom:.62rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-info-line,
html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-cost-line{
  font-size:.69rem !important;
  margin:.5rem 0 !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-flow-row{
  grid-template-columns:1.6rem minmax(0,1fr) !important;
  gap:.65rem !important;
  margin:.82rem 0 !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-flow-row > strong{
  width:1.45rem !important;
  height:1.45rem !important;
  font-size:.7rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-flow-row h3{
  font-size:.68rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-flow-row p{
  font-size:.66rem !important;
  line-height:1.45 !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table{
  min-width:76rem !important;
  font-size:.64rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table th{
  font-size:.58rem !important;
  padding:.55rem .38rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-table td{
  padding:.36rem .38rem !important;
}

html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-bottom{
  grid-template-columns:minmax(0,1.12fr) minmax(0,.9fr) minmax(14rem,.58fr) !important;
  gap:.78rem !important;
}

@media (min-width:1500px){
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content,
  html[data-auth-ready="app"] body[data-route="bom"] #app-content{
    padding:calc(var(--topbar-h) + .95rem) 1rem 1rem !important;
  }
}

@media (max-width:1380px){
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-kpis,
  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-layout,
  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-layout,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-main{
    grid-template-columns:minmax(0,1fr) !important;
  }

  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-main{
    grid-template-areas:
      "product"
      "side"
      "tabs"
      "materials"
      "bottom" !important;
  }

  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-side{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:900px){
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content,
  html[data-auth-ready="app"] body[data-route="bom"] #app-content{
    padding:calc(var(--topbar-h) + .75rem) .65rem 4.5rem !important;
  }

  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-header,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-actions{
    align-items:stretch !important;
    flex-direction:column !important;
  }

  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-kpis,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-charts,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-side,
  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-kpis,
  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-charts,
  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-side,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-card,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-status-fields,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-side,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-bottom{
    grid-template-columns:minmax(0,1fr) !important;
  }

  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-product-fields{
    grid-template-columns:minmax(0,1fr) !important;
  }

  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-status-fields{
    border-left:0 !important;
    border-top:1px solid #dce7f6 !important;
    padding:.8rem 0 0 !important;
  }

  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-actions .bom-btn,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-select-row,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-select-row label,
  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-select-row select{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-page{
    overflow-x:hidden !important;
  }

  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-select-row label{
    align-items:stretch !important;
    flex-direction:column !important;
  }

  html[data-auth-ready="app"] body[data-route="bom-master"] #app-content .bom-master-tabs{
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:auto !important;
    gap:1rem !important;
  }
}
/* Production dashboard - live ERP view */
.production-dashboard{
  --prod-blue:#061a63;
  --prod-blue-2:#0b43c5;
  --prod-line:#dbe5f6;
  --prod-muted:#53638c;
  --prod-panel:#fff;
  color:var(--prod-blue);
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-width:0;
}
.prod-dash-topbar,
.prod-dash-actions,
.prod-dash-title,
.prod-dash-title > div{display:flex;align-items:center;}
.prod-dash-topbar{justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.prod-dash-title{gap:1rem;min-width:18rem;}
.prod-dash-title h1{margin:0;font-size:1.75rem;text-transform:uppercase;letter-spacing:0;font-weight:900;color:var(--prod-blue);line-height:1.05;}
.prod-dash-title p{margin:.25rem 0 0;color:var(--prod-muted);font-size:.9rem;}
.prod-dash-actions{gap:.65rem;flex-wrap:wrap;justify-content:flex-end;}
.prod-dash-filter{
  border:1px solid var(--prod-line);
  background:#fff;
  color:var(--prod-blue);
  min-height:2.55rem;
  border-radius:.45rem;
  padding:0 .9rem;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight:800;
  font-size:.8rem;
}
.prod-dash-tabs{background:transparent;border:0;box-shadow:none;padding:0;}
.prod-dash-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.7rem;}
.prod-dash-kpi{
  display:flex;
  align-items:center;
  gap:.85rem;
  min-height:6.1rem;
  background:#fff;
  border:1px solid var(--prod-line);
  border-radius:.55rem;
  box-shadow:0 12px 30px rgba(8,34,84,.06);
  padding:.9rem;
}
.prod-dash-kpi-icon{
  width:3.25rem;
  height:3.25rem;
  flex:0 0 3.25rem;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--kpi),color-mix(in srgb,var(--kpi),#000 12%));
  color:#fff;
}
.prod-dash-kpi-icon .material-symbols-outlined{font-size:1.75rem;}
.prod-dash-kpi span{display:block;font-size:.68rem;text-transform:uppercase;font-weight:900;color:#001aa5;margin-bottom:.25rem;}
.prod-dash-kpi strong{display:block;font-size:1.35rem;line-height:1.1;color:var(--prod-blue);letter-spacing:0;}
.prod-dash-kpi small{display:block;margin-top:.45rem;color:#05805f;font-weight:800;font-size:.72rem;}
.prod-dash-main-grid{display:grid;grid-template-columns:1.3fr 1.05fr 1fr;gap:.85rem;}
.prod-dash-mid-grid{display:grid;grid-template-columns:1.25fr .8fr 1.35fr;gap:.85rem;}
.prod-dash-bottom-grid{display:grid;grid-template-columns:1.25fr .9fr .9fr 1fr 1.35fr;gap:.85rem;}
.prod-dash-panel{
  background:var(--prod-panel);
  border:1px solid var(--prod-line);
  border-radius:.55rem;
  box-shadow:0 12px 30px rgba(8,34,84,.05);
  padding:1rem;
  min-width:0;
}
.prod-dash-panel h2{
  margin:0 0 1rem;
  font-size:.95rem;
  line-height:1.2;
  text-transform:uppercase;
  color:#001aa5;
  font-weight:900;
}
.prod-bar-legend{display:flex;align-items:center;justify-content:center;gap:1.2rem;font-size:.7rem;font-weight:900;color:#001a77;margin-bottom:.75rem;flex-wrap:wrap;}
.prod-bar-legend span{width:.85rem;height:.55rem;border-radius:.12rem;display:inline-block;margin-right:-.75rem;}
.prod-bar-legend .blue{background:#0b4ec7}.prod-bar-legend .green{background:#4b9230}.prod-bar-legend .gray{background:#aab3c2}
.prod-overview-body{display:grid;grid-template-columns:minmax(0,1fr) 9rem;gap:.9rem;align-items:stretch;}
.prod-bar-chart{height:13rem;display:grid;grid-template-columns:repeat(5,1fr);gap:.65rem;align-items:end;border-left:1px solid var(--prod-line);border-bottom:1px solid var(--prod-line);padding:.5rem .45rem .25rem;background:linear-gradient(to top,rgba(219,229,246,.7) 1px,transparent 1px) 0 0/100% 25%;}
.prod-bar-group{height:100%;display:grid;grid-template-rows:1fr auto;gap:.35rem;text-align:center;font-size:.68rem;color:#001a77;font-weight:900;}
.prod-bars{height:100%;display:flex;align-items:end;justify-content:center;gap:.08rem;}
.prod-bars i{width:24%;min-height:.35rem;border-radius:.1rem .1rem 0 0;display:block;}
.prod-bars .forecast{background:#0b4ec7}.prod-bars .customer{background:#4b9230}.prod-bars .completed{background:#aab3c2}
.prod-side-stats{display:grid;gap:.6rem;}
.prod-side-stats div{display:grid;grid-template-columns:1.9rem 1fr;gap:.45rem;align-items:center;}
.prod-side-stats .material-symbols-outlined{grid-row:span 2;width:1.9rem;height:1.9rem;border-radius:.4rem;background:#edf3ff;color:#0b43c5;display:grid;place-items:center;font-size:1.05rem;}
.prod-side-stats p{margin:0;font-size:.68rem;color:var(--prod-muted);font-weight:800;}
.prod-side-stats strong{font-size:.88rem;color:var(--prod-blue);}
.prod-donut-row{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:1.1rem;align-items:center;}
.prod-donut-row.compact{grid-template-columns:10rem minmax(0,1fr);}
.prod-donut{
  width:11.5rem;
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.prod-donut-row.compact .prod-donut{width:9.5rem;}
.prod-donut > div{width:54%;aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center;padding:.7rem;box-shadow:0 0 0 1px var(--prod-line);}
.prod-donut strong{font-size:1.15rem;color:#001a77;line-height:1;}
.prod-donut span,.prod-donut small{font-size:.65rem;color:#001a77;font-weight:900;}
.prod-donut small{color:var(--prod-muted);}
.prod-donut-legend{display:grid;gap:.65rem;min-width:0;}
.prod-donut-legend > div,.prod-metric-line{display:grid;grid-template-columns:.7rem minmax(0,1fr) auto;gap:.45rem;align-items:center;font-size:.72rem;color:#001a77;font-weight:800;}
.prod-donut-legend span,.prod-metric-line i{width:.55rem;height:.55rem;border-radius:.12rem;display:block;}
.prod-donut-legend p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prod-donut-legend strong,.prod-metric-line strong{font-size:.72rem;color:var(--prod-blue);}
.prod-panel-note{margin-top:1rem;border:1px solid var(--prod-line);background:#f3f6fc;border-radius:.35rem;padding:.7rem;color:#001aa5;font-weight:900;font-size:.75rem;display:flex;align-items:center;gap:.45rem;}
.prod-alert-list{display:grid;gap:.15rem;}
.prod-alert-row{display:grid;grid-template-columns:1.8rem minmax(0,1fr) auto;gap:.6rem;align-items:center;border-bottom:1px solid var(--prod-line);padding:.62rem .1rem;font-size:.75rem;font-weight:800;}
.prod-alert-row p{margin:0;color:#001a77;min-width:0;}
.prod-alert-row strong{color:#e11d2e;}
.prod-alert-row .material-symbols-outlined{font-size:1.25rem;}
.prod-alert-row.danger .material-symbols-outlined{color:#ff2525}.prod-alert-row.warning .material-symbols-outlined{color:#ff8a00}
.prod-link-btn{margin-top:.8rem;border:0;background:transparent;color:#0050d8;font-weight:900;font-size:.78rem;display:inline-flex;align-items:center;gap:.45rem;padding:0;cursor:pointer;}
.prod-table-wrap{overflow:auto;min-width:0;}
.prod-dash-table{width:100%;border-collapse:collapse;min-width:42rem;}
.prod-dash-table th,.prod-dash-table td{border-bottom:1px solid #e6edf8;padding:.55rem .55rem;text-align:left;font-size:.69rem;color:#001a77;white-space:nowrap;}
.prod-dash-table th{text-transform:uppercase;font-size:.6rem;background:#f7f9fd;font-weight:900;color:#001a77;}
.prod-dash-table button{border:0;background:transparent;color:#0b43c5;font-weight:900;padding:0;cursor:pointer;}
.prod-status{border-radius:.2rem;padding:.22rem .55rem;font-weight:900;font-size:.65rem;display:inline-block;}
.prod-status.green{background:#e9f8ef;color:#0a7a35}.prod-status.blue{background:#eef4ff;color:#0b43c5}
.prod-gauge{--value:0;width:11rem;aspect-ratio:2/1;margin:.2rem auto 1rem;border-radius:11rem 11rem 0 0;background:conic-gradient(from 270deg at 50% 100%,#0b63c7 0 calc(var(--value)*.5%),#f3a124 calc(var(--value)*.5%) 50%,#e2e8f0 0);position:relative;display:grid;place-items:end center;padding-bottom:.75rem;overflow:hidden;}
.prod-gauge::after{content:"";position:absolute;inset:34% 16% 0;background:#fff;border-radius:9rem 9rem 0 0;}
.prod-gauge strong,.prod-gauge span{position:relative;z-index:1;color:var(--prod-blue);font-weight:900;}
.prod-gauge strong{font-size:1.5rem}.prod-gauge span{font-size:.7rem;}
.prod-metric-list{display:grid;gap:.72rem;}
.prod-icon-line{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;gap:.6rem;font-size:.75rem;font-weight:800;color:#001a77;}
.prod-icon-line .material-symbols-outlined{width:2rem;height:2rem;border-radius:50%;background:#eef4ff;color:#0b43c5;display:grid;place-items:center;font-size:1.05rem;}
.prod-icon-line p{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prod-progress-list{display:grid;gap:1rem;}
.prod-progress-line{display:grid;grid-template-columns:minmax(7rem,1fr) minmax(5rem,9rem) 3.2rem;gap:.7rem;align-items:center;font-size:.72rem;color:#001a77;font-weight:900;}
.prod-progress-line div{height:.52rem;border-radius:2rem;background:#e4e9f2;overflow:hidden;}
.prod-progress-line i{height:100%;display:block;background:#0b63c7;border-radius:inherit;}
.prod-dash-footer{display:flex;gap:1rem;align-items:center;justify-content:space-between;background:#f4f7fd;border:1px solid var(--prod-line);border-radius:.45rem;color:#001a77;font-size:.75rem;font-weight:800;padding:.75rem 1rem;flex-wrap:wrap;}
.prod-dash-footer span{display:inline-flex;align-items:center;gap:.45rem;}
.prod-dash-footer button{border:0;background:transparent;color:#0050d8;font-weight:900;display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;}
@media (max-width:1500px){
  .prod-dash-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
  .prod-dash-main-grid,.prod-dash-mid-grid{grid-template-columns:1fr;}
  .prod-dash-bottom-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .prod-dash-title h1{font-size:1.35rem;}
  .prod-dash-actions,.prod-dash-actions .btn,.prod-dash-filter{width:100%;justify-content:center;}
  .prod-dash-kpis,.prod-dash-bottom-grid{grid-template-columns:1fr;}
  .prod-overview-body,.prod-donut-row,.prod-donut-row.compact{grid-template-columns:1fr;}
  .prod-donut{margin:auto;}
  .prod-progress-line{grid-template-columns:1fr;}
}

/* WIP Inventory dashboard */
#app-content:has(.wip-dashboard){background:#f7f9fd;padding:1rem 1.05rem 1.1rem;}
.wip-dashboard{--wip-blue:#07145f;--wip-line:#dbe4f3;--wip-muted:#52628a;display:grid;gap:.72rem;color:var(--wip-blue);font-family:Inter,var(--font-sans,system-ui,sans-serif);}
.wip-dashboard *{letter-spacing:0;}
.wip-head,.wip-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.wip-head h2{margin:0;text-transform:uppercase;font-size:1.7rem;font-weight:900;color:var(--wip-blue);}
.wip-head p{margin:.25rem 0 0;color:#31406b;font-weight:800;font-size:.84rem;}
.wip-head-actions{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;}
.wip-head-actions button,.wip-footer button,.wip-empty button{min-height:2.45rem;border:1px solid #d5deef;background:#fff;border-radius:.38rem;padding:.48rem .8rem;color:var(--wip-blue);font-size:.72rem;font-weight:900;display:inline-flex;align-items:center;gap:.42rem;cursor:pointer;box-shadow:0 5px 14px rgba(7,20,95,.04);}
.wip-head-actions .primary,.wip-empty .primary{background:#06256f;border-color:#06256f;color:#fff;}
.wip-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.58rem;}
.wip-kpi{--wip-tone:#1557d6;min-height:5.1rem;background:#fff;border:1px solid #dae3f2;border-radius:.48rem;padding:.72rem;display:grid;grid-template-columns:2.55rem minmax(0,1fr);gap:.65rem;align-items:center;box-shadow:0 9px 24px rgba(9,28,87,.055);position:relative;overflow:hidden;}
.wip-kpi::before{content:"";position:absolute;inset:0;border-top:3px solid var(--wip-tone);opacity:.75;pointer-events:none;}
.wip-kpi > .material-symbols-outlined{width:2.55rem;height:2.55rem;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--wip-tone),color-mix(in srgb,var(--wip-tone),#06123c 22%));color:#fff;font-size:1.3rem;box-shadow:0 9px 16px color-mix(in srgb,var(--wip-tone),transparent 74%);}
.wip-kpi small{display:block;color:#001aa5;font-size:.56rem;text-transform:uppercase;font-weight:900;line-height:1.1;}
.wip-kpi strong{display:block;margin:.2rem 0;color:#06146c;font-size:1.08rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wip-kpi em{display:block;color:#008264;font-style:normal;font-size:.58rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wip-grid{display:grid;gap:.72rem;}
.wip-grid.top{grid-template-columns:minmax(28rem,1.35fr) minmax(25rem,1.08fr) minmax(18rem,.82fr);}
.wip-grid.middle{grid-template-columns:minmax(38rem,1fr) minmax(18rem,.38fr);}
.wip-grid.bottom{grid-template-columns:minmax(24rem,.95fr) minmax(29rem,1.15fr) minmax(18rem,.7fr);}
.wip-panel,.wip-empty,.wip-footer{background:#fff;border:1px solid #d8e2f1;border-radius:.48rem;padding:.9rem .95rem;box-shadow:0 9px 24px rgba(9,28,87,.048);min-width:0;}
.wip-panel h3{margin:0 0 .85rem;text-transform:uppercase;color:#001aa5;font-size:.78rem;line-height:1.15;font-weight:900;}
.wip-panel.wide,.wip-panel.table-panel{min-width:0;}
.wip-product-split,.wip-aging{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:1rem;align-items:center;}
.wip-donut{width:10.9rem;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;box-shadow:0 13px 24px rgba(6,20,90,.11);}
.wip-donut.empty{background:#edf2f8;}
.wip-donut > div{width:56%;aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center;padding:.6rem;box-shadow:0 0 0 1px var(--wip-line);}
.wip-donut strong{font-size:1.08rem;line-height:1;color:#001a77;}
.wip-donut span,.wip-donut small{font-size:.58rem;color:#001a77;font-weight:900;}
.wip-donut small{color:var(--wip-muted);}
.wip-product-list,.wip-summary-list,.wip-aging-list,.wip-alert-list{display:grid;gap:.52rem;}
.wip-product-line{display:grid;grid-template-columns:.62rem minmax(0,1.4fr) 4.2rem 3.4rem 5.8rem;gap:.48rem;align-items:center;font-size:.66rem;font-weight:850;color:#001a77;}
.wip-product-line span,.wip-summary-list span,.wip-aging-list span{width:.58rem;height:.58rem;border-radius:.14rem;display:block;}
.wip-product-line p{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wip-product-line small{display:block;color:var(--wip-muted);font-size:.58rem;}
.wip-product-line strong,.wip-product-line em,.wip-product-line b{font-style:normal;text-align:right;white-space:nowrap;}
.wip-product-total{border-top:1px solid var(--wip-line);padding-top:.55rem;display:grid;grid-template-columns:minmax(0,1fr) 4.2rem 3.4rem 5.8rem;gap:.48rem;font-size:.68rem;font-weight:950;color:#001a77;}
.wip-chart-legend{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.65rem;font-size:.58rem;font-weight:900;color:#001a77;}
.wip-chart-legend span{display:inline-flex;align-items:center;gap:.35rem;min-width:0;}
.wip-chart-legend i{width:.58rem;height:.58rem;border-radius:.12rem;display:block;}
.wip-bars-chart{height:13rem;display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;align-items:end;border-left:1px solid var(--wip-line);border-bottom:1px solid var(--wip-line);padding:.5rem .45rem .25rem;background:linear-gradient(to top,rgba(189,202,225,.72) 1px,transparent 1px) 0 0/100% 20%,#fff;}
.wip-bars-group{height:100%;display:grid;grid-template-rows:1fr auto;gap:.28rem;text-align:center;font-size:.58rem;color:#001a77;font-weight:900;}
.wip-bars{height:100%;display:flex;align-items:end;justify-content:center;gap:.09rem;}
.wip-bars i{width:22%;min-height:.35rem;border-radius:.1rem .1rem 0 0;display:block;}
.wip-summary-list div,.wip-aging-list div,.wip-alert-list div{display:grid;grid-template-columns:1.35rem minmax(0,1fr) auto;gap:.45rem;align-items:center;border-bottom:1px solid var(--wip-line);padding:.48rem 0;font-size:.66rem;font-weight:850;}
.wip-summary-list p,.wip-aging-list p,.wip-alert-list p{margin:0;min-width:0;color:#001a77;}
.wip-summary-list strong,.wip-aging-list strong,.wip-alert-list strong{font-size:.64rem;color:#001a77;text-align:right;white-space:nowrap;}
.wip-link{margin-top:.72rem;border:0;background:transparent;color:#0050d8;font-weight:900;font-size:.68rem;display:inline-flex;align-items:center;gap:.35rem;padding:0;cursor:pointer;}
.wip-table-wrap{overflow:auto;min-width:0;}
.wip-table{width:100%;border-collapse:collapse;min-width:52rem;}
.wip-table.compact{min-width:44rem;}
.wip-table th,.wip-table td{border-bottom:1px solid #e6edf8;padding:.48rem .5rem;text-align:left;font-size:.6rem;color:#001a77;white-space:nowrap;}
.wip-table th{text-transform:uppercase;font-size:.52rem;background:#f7f9fd;font-weight:900;}
.wip-table tfoot td{font-weight:950;background:#fbfdff;}
.wip-table .green{color:#16803c;font-weight:900}.wip-table .orange{color:#ff5a00;font-weight:900}.wip-table .purple{color:#7b2fb2;font-weight:900}.wip-table .blue{color:#0050d8;font-weight:900}
.wip-status{display:inline-block;border-radius:.25rem;background:#e9f8ef;color:#0a7a35;border:1px solid #bfe7cd;padding:.18rem .45rem;font-size:.56rem;font-weight:900;}
.wip-trend-svg{width:100%;height:auto;display:block;min-height:11rem;}
.wip-trend-svg line{stroke:#dce5f1;stroke-width:1;}
.wip-trend-svg text{font-size:11px;fill:#52628a;font-weight:800;}
.wip-trend-svg path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.wip-alert-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem;}
.wip-alert-head h3{margin:0;}
.wip-alert-head button{border:0;background:transparent;color:#0050d8;font-size:.62rem;font-weight:900;cursor:pointer;}
.wip-empty{display:flex;align-items:center;gap:1rem;}
.wip-empty > .material-symbols-outlined{font-size:2rem;color:#2563eb;}
.wip-empty strong{display:block;font-weight:950;color:#001a77;}
.wip-empty p{margin:.2rem 0 0;color:var(--wip-muted);font-size:.76rem;font-weight:800;}
.wip-footer{font-size:.64rem;font-weight:850;color:#001a77;}
.wip-footer span{display:inline-flex;align-items:center;gap:.4rem;}
.wip-footer button{min-height:auto;border:0;box-shadow:none;padding:0;background:transparent;color:#0050d8;}
.wip-muted{margin:0;color:var(--wip-muted);font-weight:800;font-size:.72rem;}
@media (max-width:1180px){
  .wip-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .wip-grid.top,.wip-grid.middle,.wip-grid.bottom{grid-template-columns:1fr;}
}
@media (max-width:760px){
  #app-content:has(.wip-dashboard){padding:.7rem .55rem 5rem;}
  .wip-head h2{font-size:1.25rem;}
  .wip-head p{font-size:.74rem;}
  .wip-head-actions{display:grid;grid-template-columns:1fr;width:100%;}
  .wip-head-actions button{width:100%;justify-content:center;}
  .wip-kpi-grid{grid-template-columns:1fr;}
  .wip-product-split,.wip-aging{grid-template-columns:1fr;}
  .wip-donut{margin:auto;}
  .wip-product-line{grid-template-columns:.62rem minmax(0,1fr) 3.6rem;grid-auto-flow:row;}
  .wip-product-line em,.wip-product-line b{display:none;}
  .wip-product-total{grid-template-columns:minmax(0,1fr) 3.6rem 3.2rem;}
  .wip-product-total b:last-child{display:none;}
  .wip-bars-chart{height:11rem;gap:.35rem;}
  .wip-empty{align-items:flex-start;flex-direction:column;}
  .wip-footer{align-items:flex-start;}
}

/* WIP dashboard reference-style polish */
#app-content:has(.wip-dashboard){
  background:#f8fbff;
  padding:.95rem 1rem 1rem;
}
.wip-dashboard{
  --wip-blue:#07145f;
  --wip-strong:#00166f;
  --wip-line:#d9e3f2;
  --wip-muted:#52628a;
  gap:.62rem;
}
.wip-head{
  min-height:3.2rem;
  align-items:flex-start;
}
.wip-head h2{
  font-size:1.55rem;
  line-height:1.05;
  color:var(--wip-blue);
}
.wip-head p{
  margin-top:.32rem;
  color:#00166f;
  font-size:.78rem;
  font-weight:800;
}
.wip-head-actions{
  gap:.5rem;
}
.wip-head-actions button{
  min-height:2.35rem;
  border-radius:.28rem;
  padding:.45rem .78rem;
  border-color:#d5deee;
  color:#00166f;
  box-shadow:none;
  background:#fff;
}
.wip-head-actions .material-symbols-outlined{
  font-size:1.05rem;
}
.wip-head-actions .primary{
  background:#0731bc;
  border-color:#0731bc;
  box-shadow:0 8px 16px rgba(7,49,188,.14);
}
.wip-kpi-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:.55rem;
}
.wip-kpi{
  min-height:6.35rem;
  grid-template-columns:3.15rem minmax(0,1fr);
  gap:.72rem;
  padding:.88rem .82rem;
  border-radius:.34rem;
  border-color:#d7e2f2;
  box-shadow:0 8px 18px rgba(11,35,83,.045);
  background:#fff;
}
.wip-kpi::before{
  display:none;
}
.wip-kpi > .material-symbols-outlined{
  width:3.05rem;
  height:3.05rem;
  border-radius:50%;
  background:var(--wip-tone);
  box-shadow:0 10px 18px color-mix(in srgb,var(--wip-tone),transparent 78%);
  font-size:1.5rem;
}
.wip-kpi small{
  color:#001aa5;
  font-size:.56rem;
  line-height:1.15;
}
.wip-kpi strong{
  margin:.24rem 0 .2rem;
  color:#00166f;
  font-size:1.08rem;
  font-weight:950;
}
.wip-kpi em{
  color:#00166f;
  font-size:.62rem;
  opacity:.78;
}
.wip-grid{
  gap:.62rem;
}
.wip-grid.top{
  grid-template-columns:minmax(28rem,1.65fr) minmax(25rem,1.32fr) minmax(18rem,.92fr);
}
.wip-grid.middle{
  grid-template-columns:minmax(40rem,2.2fr) minmax(18rem,.78fr);
}
.wip-grid.bottom{
  grid-template-columns:minmax(24rem,1.05fr) minmax(30rem,1.28fr) minmax(18rem,.82fr);
}
.wip-panel,
.wip-empty,
.wip-footer{
  border-radius:.34rem;
  border-color:#d8e2f1;
  box-shadow:0 8px 18px rgba(11,35,83,.035);
  padding:.86rem .9rem;
}
.wip-panel h3{
  margin-bottom:.78rem;
  color:#001aa5;
  font-size:.78rem;
  letter-spacing:0;
}
.wip-product-split{
  grid-template-columns:12rem minmax(0,1fr);
  gap:1.05rem;
}
.wip-donut{
  width:10.7rem;
  box-shadow:none;
}
.wip-donut > div{
  width:57%;
  box-shadow:0 0 0 1px #e2eaf6;
}
.wip-donut strong{
  color:#00166f;
  font-size:1.1rem;
  font-weight:950;
}
.wip-donut span,
.wip-donut small{
  color:#00166f;
}
.wip-product-list{
  gap:.6rem;
}
.wip-product-line{
  grid-template-columns:.58rem minmax(0,1.45fr) 4rem 3.25rem 5.25rem;
  font-size:.68rem;
  color:#00166f;
}
.wip-product-line span,
.wip-summary-list span,
.wip-aging-list span{
  border-radius:.12rem;
}
.wip-product-line p{
  color:#00166f;
}
.wip-product-line small{
  color:#00166f;
  opacity:.72;
}
.wip-product-line strong,
.wip-product-line em,
.wip-product-line b{
  color:#001aa5;
  font-weight:950;
}
.wip-product-total{
  color:#00166f;
  border-top-color:#d8e2f1;
}
.wip-chart-legend{
  justify-content:center;
  gap:1.25rem;
  font-size:.56rem;
  color:#00166f;
}
.wip-bars-chart{
  height:12.5rem;
  border-color:#d8e2f1;
  background:
    linear-gradient(to top,rgba(203,214,234,.8) 1px,transparent 1px) 0 0/100% 20%,
    #fff;
}
.wip-bars-group{
  font-size:.58rem;
  color:#00166f;
}
.wip-bars i{
  border-radius:.08rem .08rem 0 0;
}
.wip-summary-list div,
.wip-aging-list div,
.wip-alert-list div{
  min-height:2.05rem;
  border-bottom-color:#e1e9f5;
  padding:.44rem 0;
  color:#00166f;
}
.wip-summary-list p,
.wip-aging-list p,
.wip-alert-list p{
  color:#00166f;
}
.wip-summary-list strong,
.wip-aging-list strong,
.wip-alert-list strong{
  color:#001aa5;
  font-weight:950;
}
.wip-link{
  color:#0050d8;
  font-size:.66rem;
}
.wip-table{
  min-width:58rem;
}
.wip-table.compact{
  min-width:46rem;
}
.wip-table th,
.wip-table td{
  padding:.5rem .52rem;
  border-color:#e3ebf6;
  color:#00166f;
  font-size:.61rem;
}
.wip-table th{
  background:#f7f9fd;
  color:#00166f;
  font-size:.52rem;
}
.wip-table tfoot td{
  color:#00166f;
}
.wip-status{
  border-radius:.2rem;
  background:#e8f7ed;
  border-color:#c7ebd3;
  color:#087132;
}
.wip-trend-svg{
  min-height:10.6rem;
}
.wip-trend-svg line{
  stroke:#d9e3f2;
}
.wip-alert-head button{
  color:#0050d8;
}
.wip-alert-list .material-symbols-outlined{
  font-size:1.16rem;
}
.wip-footer{
  min-height:2.45rem;
  background:#f4f7fd;
  color:#00166f;
  font-size:.64rem;
}

/* The full Material Symbols face is ~3,000 icons / 956KB, of which this app
   uses 341. fonts/material-symbols.woff2 is that subset (29KB) and is what
   every current browser loads — it was the last resource to arrive on
   production and, with font-display:block, every icon stayed invisible until
   it did. The .ttf is left in place purely as a format fallback for browsers
   with no WOFF2 support; modern browsers never request it.

   Regenerating the subset after adding a new icon: fonts/icon-names.txt holds
   the list, and DEPLOY.md records the command. An icon missing from that list
   renders as its literal name, so the list must be regenerated whenever one
   is added. */
@font-face{
  font-family:'Material Symbols Local';
  font-style:normal;
  font-weight:100 700;
  font-display:block;
  src:url("fonts/material-symbols.woff2?v=2") format("woff2"),
      url("fonts/material-symbols.ttf?v=1.0") format("truetype");
}

html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-dashboard .material-symbols-outlined{
  font-family:'Material Symbols Local','Material Symbols Outlined';
  font-weight:normal;
  font-style:normal;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  -webkit-font-feature-settings:'liga';
  font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-empty > .material-symbols-outlined{
  width:2.4rem;
  height:2.4rem;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eef4ff;
  color:#0b55d9;
  font-size:1.22rem;
}

/* WIP dashboard full-width desktop fit */
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content{
  padding:calc(var(--topbar-h) + .9rem) .9rem .9rem !important;
  background:#f8fbff !important;
  overflow-x:hidden !important;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content > .page-container{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content > .inv-module{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .page-container > .inv-module,
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .inv-module{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .inv-manager-bar,
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .inv-tabs-bar{
  display:none !important;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .inv-content{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-dashboard{
  width:100%;
  max-width:none;
  min-width:0;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-head{
  min-height:3rem;
  padding-top:.05rem;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-kpi-grid{
  gap:.58rem;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-kpi{
  min-height:5.85rem;
  padding:.78rem .82rem;
  grid-template-columns:3rem minmax(0,1fr);
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-kpi > .material-symbols-outlined{
  width:2.82rem;
  height:2.82rem;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-grid.top{
  grid-template-columns:minmax(0,1.55fr) minmax(0,1.23fr) minmax(17rem,.9fr);
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-grid.middle{
  grid-template-columns:minmax(0,2.35fr) minmax(17rem,.82fr);
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-grid.bottom{
  grid-template-columns:minmax(0,1.04fr) minmax(0,1.26fr) minmax(17rem,.82fr);
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-panel{
  padding:.84rem .9rem;
  min-width:0;
  overflow:hidden;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-table-wrap{
  max-width:100%;
  overflow:auto;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-product-list{
  min-width:0;
  overflow:hidden;
}
.wip-product-head{
  display:grid;
  grid-template-columns:.58rem minmax(0,1.45fr) 4rem 3.25rem 5.25rem;
  gap:.48rem;
  align-items:end;
  padding:0 0 .28rem;
  color:#00166f;
  font-size:.54rem;
  font-weight:950;
}
.wip-product-head p,
.wip-product-head strong,
.wip-product-head em,
.wip-product-head b{
  margin:0;
  font-style:normal;
  color:#00166f;
  white-space:nowrap;
}
.wip-product-head strong,
.wip-product-head em,
.wip-product-head b{
  text-align:right;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-product-split{
  grid-template-columns:minmax(9.6rem,11.2rem) minmax(0,1fr);
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-donut{
  width:10.05rem;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-aging{
  grid-template-columns:minmax(8.8rem,9.8rem) minmax(0,1fr);
  gap:.85rem;
  align-items:center;
  min-height:12.25rem;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-aging .wip-donut{
  width:9.35rem;
  justify-self:center;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-aging-list{
  gap:.42rem;
  min-width:0;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-aging-list div{
  grid-template-columns:.75rem minmax(0,1fr);
  grid-template-areas:
    "dot label"
    "dot value";
  gap:.08rem .45rem;
  align-items:center;
  min-height:0;
  padding:.36rem 0;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-aging-list span{
  grid-area:dot;
  width:.58rem;
  height:.58rem;
  align-self:start;
  margin-top:.12rem;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-aging-list p{
  grid-area:label;
  font-size:.66rem;
  font-weight:950;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-aging-list strong{
  grid-area:value;
  text-align:left;
  white-space:normal;
  line-height:1.25;
  font-size:.62rem;
  color:#00166f;
  opacity:.86;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-bars-chart{
  height:12.25rem;
}
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-table th,
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-table td{
  padding:.46rem .48rem;
}
@media (min-width:1500px){
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content{
    padding:calc(var(--topbar-h) + 1rem) 1.15rem 1rem !important;
  }
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-kpi{
    min-height:6.15rem;
  }
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-bars-chart{
    height:13.4rem;
  }
}
@media (max-width:1450px) and (min-width:1181px){
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-product-line,
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-product-head{
    grid-template-columns:.5rem minmax(0,1fr) 3.45rem 2.85rem;
  }
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-product-line b,
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-product-head b{
    display:none;
  }
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-product-split{
    grid-template-columns:minmax(8.5rem,9.6rem) minmax(0,1fr);
  }
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-donut{
    width:8.9rem;
  }
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-aging{
    grid-template-columns:1fr;
    gap:.62rem;
    min-height:0;
  }
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-aging .wip-donut{
    width:8.5rem;
  }
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-aging-list{
    gap:.18rem;
  }
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-aging-list div{
    padding:.28rem 0;
  }
}
@media (max-width:1180px){
  .wip-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .wip-grid.top,
  .wip-grid.middle,
  .wip-grid.bottom{grid-template-columns:1fr;}
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-grid.top,
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-grid.middle,
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-grid.bottom{
    grid-template-columns:1fr !important;
  }
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media (max-width:760px){
  #app-content:has(.wip-dashboard){padding:calc(var(--topbar-h) + .7rem) .55rem 5rem;}
  .wip-head h2{font-size:1.22rem;}
  .wip-head p{font-size:.72rem;}
  .wip-kpi{min-height:5.55rem;}
  .wip-kpi-grid{grid-template-columns:1fr;}
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-kpi-grid{
    grid-template-columns:1fr !important;
  }
  .wip-head-actions{display:grid;grid-template-columns:1fr;width:100%;}
  .wip-head-actions button{width:100%;justify-content:center;}
  .wip-product-split,
  .wip-aging{grid-template-columns:1fr;}
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-product-split,
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-aging{
    grid-template-columns:1fr !important;
  }
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-product-list{
    width:100%;
    overflow:hidden;
  }
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-donut{
    width:9.6rem;
    margin:auto;
  }
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-aging .wip-donut{
    width:9.2rem;
  }
  .wip-product-line{grid-template-columns:.58rem minmax(0,1fr) 3.9rem;}
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-product-line{
    grid-template-columns:.58rem minmax(0,1fr) 3.9rem !important;
  }
  .wip-product-head{display:none;}
  .wip-product-line em,
  .wip-product-line b{display:none;}
  .wip-product-total{grid-template-columns:minmax(0,1fr) 3.9rem 3.2rem;}
  .wip-product-total b:last-child{display:none;}
  .wip-bars-chart{height:10.8rem;}
}

/* Production dashboard polish against the provided reference */
#app-content:has(.production-dashboard){
  background:#f7f9fd;
  padding:1rem 1.05rem 1.1rem;
}
.production-dashboard{
  --prod-blue:#07145f;
  --prod-ink:#001165;
  --prod-accent:#0037a8;
  --prod-line:#dbe4f3;
  --prod-soft:#f2f6ff;
  --prod-muted:#52628a;
  gap:.72rem;
  max-width:100%;
  font-family:Inter, var(--font-sans, system-ui, sans-serif);
}
.production-dashboard *{letter-spacing:0;}
.production-dashboard .material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;}
.prod-dash-topbar{
  min-height:3.2rem;
  gap:.75rem;
}
.prod-dash-title{
  gap:.9rem;
  min-width:22rem;
}
.prod-dash-title .production-menu-btn{
  width:2.15rem;
  height:2.15rem;
  background:transparent;
  border:0;
  box-shadow:none;
  color:var(--prod-blue);
}
.prod-dash-title .production-menu-btn .material-symbols-outlined{font-size:1.9rem;}
.prod-dash-title h1{
  font-size:1.75rem;
  font-weight:900;
  color:var(--prod-blue);
  text-transform:uppercase;
}
.prod-dash-title p{
  font-size:.84rem;
  color:#31406b;
  margin-top:.32rem;
}
.prod-dash-actions{
  gap:.55rem;
  align-items:center;
}
.prod-dash-filter,
.prod-dash-actions .btn{
  min-height:2.55rem;
  border-radius:.38rem;
  border:1px solid #d5deef;
  box-shadow:0 5px 14px rgba(7,20,95,.04);
  font-size:.75rem;
  font-weight:900;
  white-space:nowrap;
}
.prod-dash-actions .btn-primary{
  background:#06256f;
  border-color:#06256f;
  color:#fff;
  padding-inline:1rem;
}
.prod-dash-bell{
  position:relative;
  width:2.55rem;
  height:2.55rem;
  border:0;
  background:transparent;
  color:var(--prod-blue);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.prod-dash-bell .material-symbols-outlined{font-size:1.45rem;}
.prod-dash-bell b{
  position:absolute;
  top:.08rem;
  right:.05rem;
  min-width:1rem;
  height:1rem;
  padding:0 .22rem;
  border-radius:99px;
  background:#e11d2e;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:.56rem;
  line-height:1;
  border:2px solid #fff;
}
.prod-dash-profile{
  border:0;
  background:transparent;
  display:grid;
  grid-template-columns:2.3rem max-content;
  grid-template-rows:1fr 1fr;
  column-gap:.55rem;
  align-items:center;
  text-align:left;
  color:var(--prod-blue);
  cursor:pointer;
  padding:0;
}
.prod-dash-profile > span{
  grid-row:1 / span 2;
  width:2.3rem;
  height:2.3rem;
  border-radius:50%;
  background:linear-gradient(135deg,#0b2f77,#ebe7df);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:.7rem;
  font-weight:900;
  box-shadow:0 0 0 2px #fff, 0 6px 14px rgba(7,20,95,.16);
}
.prod-dash-profile strong{font-size:.72rem;line-height:1;max-width:8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prod-dash-profile small{font-size:.58rem;color:#334164;line-height:1;max-width:8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prod-dash-kpis{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:.58rem;
}
.prod-dash-kpi{
  min-height:4.9rem;
  border-radius:.46rem;
  padding:.68rem .72rem;
  gap:.65rem;
  border-color:#dae3f2;
  box-shadow:0 9px 24px rgba(9,28,87,.055);
}
.prod-dash-kpi-icon{
  width:2.55rem;
  height:2.55rem;
  flex-basis:2.55rem;
}
.prod-dash-kpi-icon .material-symbols-outlined{font-size:1.34rem;color:#fff!important;}
.prod-dash-kpi span{
  color:#001aa5;
  font-size:.56rem;
  line-height:1.1;
}
.prod-dash-kpi strong{
  font-size:1.05rem;
  font-weight:500;
  color:#00146f;
  white-space:nowrap;
}
.prod-dash-kpi small{
  margin-top:.36rem;
  color:#008264;
  font-size:.58rem;
  white-space:nowrap;
}
.prod-dash-main-grid{
  grid-template-columns:minmax(29rem,1.45fr) minmax(25rem,1.05fr) minmax(21rem,.92fr);
  gap:.72rem;
}
.prod-dash-mid-grid{
  grid-template-columns:minmax(32rem,1.28fr) minmax(18rem,.78fr) minmax(32rem,1.3fr);
  gap:.72rem;
}
.prod-dash-bottom-grid{
  grid-template-columns:minmax(19rem,1.2fr) minmax(13rem,.78fr) minmax(14rem,.82fr) minmax(15rem,.92fr) minmax(20rem,1.25fr);
  gap:.72rem;
}
.prod-dash-panel{
  border-radius:.48rem;
  border-color:#d8e2f1;
  padding:.88rem .95rem;
  box-shadow:0 9px 24px rgba(9,28,87,.048);
  min-height:0;
}
.prod-dash-panel h2{
  margin-bottom:.88rem;
  font-size:.78rem;
  line-height:1.15;
  color:#001aa5;
}
.prod-overview-panel{min-height:17.25rem;}
.prod-bar-legend{
  justify-content:center;
  gap:1.75rem;
  font-size:.58rem;
  margin-bottom:.7rem;
}
.prod-bar-legend span{
  width:.75rem;
  height:.45rem;
  margin-right:-1.35rem;
}
.prod-overview-body{
  grid-template-columns:minmax(0,1fr) 7.7rem;
  gap:.72rem;
}
.prod-bar-chart{
  height:12.4rem;
  padding:.45rem .48rem .26rem;
  gap:.42rem;
  background:
    linear-gradient(to top,rgba(189,202,225,.72) 1px,transparent 1px) 0 0/100% 20%,
    #fff;
}
.prod-bar-group{font-size:.58rem;gap:.24rem;}
.prod-bars{gap:.06rem;}
.prod-bars i{width:23%;border-radius:.09rem .09rem 0 0;}
.prod-side-stats{gap:.48rem;}
.prod-side-stats div{grid-template-columns:1.72rem 1fr;gap:.4rem;}
.prod-side-stats .material-symbols-outlined{
  width:1.72rem;
  height:1.72rem;
  font-size:.96rem;
  border-radius:.34rem;
}
.prod-side-stats p{font-size:.58rem;}
.prod-side-stats strong{font-size:.78rem;}
.prod-donut-row{
  grid-template-columns:11.15rem minmax(0,1fr);
  gap:.96rem;
}
.prod-donut-row.compact{grid-template-columns:8.7rem minmax(0,1fr);}
.prod-donut{width:10.75rem;}
.prod-donut-row.compact .prod-donut{width:8.5rem;}
.prod-donut > div{width:56%;padding:.58rem;}
.prod-donut strong{font-size:1.05rem;}
.prod-donut span,.prod-donut small{font-size:.58rem;}
.prod-donut-legend{gap:.55rem;}
.prod-donut-legend > div,
.prod-metric-line{
  grid-template-columns:.6rem minmax(0,1fr) auto;
  gap:.4rem;
  font-size:.61rem;
}
.prod-donut-legend strong,
.prod-metric-line strong{font-size:.61rem;}
.prod-panel-note{
  padding:.55rem .65rem;
  border-radius:.32rem;
  font-size:.64rem;
  margin-top:.85rem;
}
.prod-alert-row{
  min-height:2.05rem;
  padding:.45rem 0;
  grid-template-columns:1.55rem minmax(0,1fr) auto;
  font-size:.64rem;
}
.prod-alert-row .material-symbols-outlined{font-size:1.14rem;}
.prod-alert-row strong{font-size:.66rem;}
.prod-link-btn{
  margin-top:.65rem;
  font-size:.66rem;
}
.prod-dash-table{min-width:38rem;}
.prod-dash-table th,
.prod-dash-table td{
  padding:.43rem .5rem;
  font-size:.58rem;
}
.prod-dash-table th{font-size:.52rem;}
.prod-status{
  border-radius:.24rem;
  padding:.2rem .45rem;
  font-size:.55rem;
}
.prod-gauge{
  width:9.6rem;
  margin:.05rem auto .8rem;
}
.prod-gauge strong{font-size:1.35rem;}
.prod-gauge span{font-size:.6rem;}
.prod-metric-list{gap:.58rem;}
.prod-icon-line{
  grid-template-columns:1.78rem minmax(0,1fr) auto;
  gap:.5rem;
  font-size:.64rem;
}
.prod-icon-line .material-symbols-outlined{
  width:1.78rem;
  height:1.78rem;
  font-size:.95rem;
}
.prod-progress-list{gap:.82rem;}
.prod-progress-line{
  grid-template-columns:minmax(7.8rem,1fr) minmax(6rem,8.4rem) 3rem;
  gap:.62rem;
  font-size:.63rem;
}
.prod-progress-line div{height:.48rem;}
.prod-dash-footer{
  min-height:2.45rem;
  padding:.55rem .8rem;
  border-radius:.42rem;
  font-size:.64rem;
}
@media (max-width:1700px){
  .prod-dash-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
  .prod-dash-main-grid,
  .prod-dash-mid-grid{grid-template-columns:1fr;}
  .prod-dash-bottom-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:1100px){
  .prod-dash-title{min-width:0;}
  .prod-dash-actions{width:100%;justify-content:flex-start;}
  .prod-dash-profile{margin-left:auto;}
  .prod-dash-main-grid,
  .prod-dash-mid-grid,
  .prod-dash-bottom-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  #app-content:has(.production-dashboard){padding:.7rem .55rem 5rem;}
  .prod-dash-topbar{align-items:flex-start;}
  .prod-dash-title{width:100%;align-items:flex-start;}
  .prod-dash-title h1{font-size:1.28rem;line-height:1.12;}
  .prod-dash-title p{font-size:.75rem;}
  .prod-dash-actions{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;}
  .prod-dash-filter,
  .prod-dash-actions .btn,
  .prod-dash-bell,
  .prod-dash-profile{width:100%;min-width:0;}
  .prod-dash-filter,
  .prod-dash-actions .btn{font-size:.65rem;padding-inline:.5rem;}
  .prod-dash-bell{background:#fff;border:1px solid var(--prod-line);border-radius:.38rem;}
  .prod-dash-profile{grid-column:1 / -1;justify-content:start;background:#fff;border:1px solid var(--prod-line);border-radius:.45rem;padding:.45rem;}
  .prod-dash-kpis{grid-template-columns:1fr;}
  .prod-dash-kpi{min-height:5.2rem;}
  .prod-overview-body,
  .prod-donut-row,
  .prod-donut-row.compact{grid-template-columns:1fr;}
  .prod-bar-chart{height:11rem;}
  .prod-side-stats{grid-template-columns:1fr 1fr;}
  .prod-donut{margin:auto;}
  .prod-dash-table{min-width:34rem;}
  .prod-progress-line{grid-template-columns:1fr;}
}

/* Production dashboard graphics refinement */
.production-dashboard{
  --prod-shadow:0 12px 28px rgba(10,31,82,.07);
  --prod-shadow-soft:0 7px 18px rgba(10,31,82,.045);
}
.prod-dash-kpi{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 0 0,color-mix(in srgb,var(--kpi),#fff 88%) 0 34%,transparent 35%),
    linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  box-shadow:var(--prod-shadow-soft);
}
.prod-dash-kpi::before{
  content:"";
  position:absolute;
  inset:0;
  border-top:3px solid color-mix(in srgb,var(--kpi),#fff 18%);
  opacity:.75;
  pointer-events:none;
}
.prod-dash-kpi::after{
  content:"";
  position:absolute;
  width:5.4rem;
  height:5.4rem;
  right:-2.25rem;
  bottom:-2.7rem;
  border-radius:50%;
  background:color-mix(in srgb,var(--kpi),transparent 90%);
  pointer-events:none;
}
.prod-dash-kpi-icon{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 32% 24%,rgba(255,255,255,.42),transparent 31%),
    linear-gradient(135deg,color-mix(in srgb,var(--kpi),#fff 6%),color-mix(in srgb,var(--kpi),#06123c 22%));
  box-shadow:
    inset 0 -8px 14px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.34),
    0 9px 16px color-mix(in srgb,var(--kpi),transparent 74%);
  color:#fff!important;
}
.prod-dash-kpi-icon::before{
  content:"";
  position:absolute;
  inset:.42rem;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  z-index:-1;
}
.prod-dash-kpi strong{
  font-family:var(--font-display, Inter, system-ui, sans-serif);
  color:#06146c;
  letter-spacing:0;
}
.prod-dash-kpi small::before{
  display:none!important;
}
.prod-dash-panel{
  background:
    linear-gradient(180deg,#fff 0%,#fdfefe 100%);
  box-shadow:var(--prod-shadow-soft);
}
.prod-dash-panel h2{
  display:flex;
  align-items:center;
  gap:.45rem;
}
.prod-dash-panel h2::before{
  content:"";
  width:.32rem;
  height:.85rem;
  border-radius:99px;
  background:#1557d6;
  display:inline-block;
}
.prod-donut{
  position:relative;
  background-clip:border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.75),
    0 13px 24px rgba(6,20,90,.11);
}
.prod-donut::before{
  content:"";
  position:absolute;
  inset:.35rem;
  border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,255,255,.6) 0 1.2deg,transparent 1.2deg 72deg,rgba(255,255,255,.6) 72deg 73.2deg,transparent 73.2deg 144deg,rgba(255,255,255,.6) 144deg 145.2deg,transparent 145.2deg 216deg,rgba(255,255,255,.6) 216deg 217.2deg,transparent 217.2deg 288deg,rgba(255,255,255,.6) 288deg 289.2deg,transparent 289.2deg 360deg);
  pointer-events:none;
}
.prod-donut > div{
  position:relative;
  z-index:1;
  background:
    radial-gradient(circle at 50% 0,#fff 0 30%,#f7faff 100%);
  box-shadow:
    0 0 0 1px #dce5f4,
    0 8px 18px rgba(7,20,95,.08);
}
.prod-donut strong{
  font-family:var(--font-display, Inter, system-ui, sans-serif);
  font-weight:900;
  color:#06146c;
}
.prod-donut-legend span,
.prod-metric-line i{
  border-radius:.2rem;
  box-shadow:0 0 0 2px rgba(255,255,255,.95),0 4px 8px rgba(7,20,95,.08);
}
.prod-gauge{
  background:
    conic-gradient(from 270deg at 50% 100%,#1557d6 0 calc(var(--value)*.34%),#2fb884 calc(var(--value)*.34%) calc(var(--value)*.5%),#f1a12b calc(var(--value)*.5%) 50%,#e4eaf4 0);
  box-shadow:0 12px 22px rgba(7,20,95,.09);
}
.prod-gauge::before{
  content:"";
  position:absolute;
  inset:9% 9% 0;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0));
  pointer-events:none;
}
.prod-gauge::after{
  background:#fff;
  box-shadow:0 -1px 0 rgba(7,20,95,.06);
}
.prod-gauge strong{
  font-family:var(--font-display, Inter, system-ui, sans-serif);
  color:#06146c;
}
.prod-side-stats .material-symbols-outlined,
.prod-icon-line .material-symbols-outlined{
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.85),transparent 35%),
    linear-gradient(135deg,#edf4ff,#dce8ff);
  color:#1557d6;
  box-shadow:inset 0 -3px 8px rgba(21,87,214,.08),0 6px 12px rgba(7,20,95,.06);
}
.prod-alert-row.danger .material-symbols-outlined{
  color:#ef2437;
  text-shadow:0 4px 12px rgba(239,36,55,.18);
}
.prod-alert-row.warning .material-symbols-outlined{
  color:#f28a00;
  text-shadow:0 4px 12px rgba(242,138,0,.18);
}
.prod-progress-line div{
  background:linear-gradient(90deg,#e7edf7,#dfe6f1);
  box-shadow:inset 0 1px 2px rgba(7,20,95,.08);
}
.prod-progress-line i{
  background:linear-gradient(90deg,#1557d6,#0a80d7);
  box-shadow:0 3px 8px rgba(21,87,214,.22);
}
.prod-status.green{
  background:#edf8f1;
  color:#168047;
  border:1px solid #d1eddb;
}
.prod-status.blue{
  background:#eef5ff;
  color:#1557d6;
  border:1px solid #d8e7ff;
}
.prod-bar-chart{
  position:relative;
  border-color:#d6e0f0;
  border-radius:.18rem;
  background:
    linear-gradient(to top,rgba(189,202,225,.78) 1px,transparent 1px) 0 0/100% 20%,
    linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}
.prod-bar-chart::before{
  content:"3K\A 2.5K\A 2K\A 1.5K\A 1K\A 500\A 0";
  white-space:pre;
  position:absolute;
  left:-2.05rem;
  top:-.15rem;
  bottom:.9rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#001a77;
  font-size:.54rem;
  font-weight:900;
  line-height:1;
}
.prod-bars .forecast{
  background:linear-gradient(180deg,#0f56cf,#062f92);
  box-shadow:0 5px 10px rgba(8,54,154,.18);
}
.prod-bars .customer{
  background:linear-gradient(180deg,#66a447,#3f822c);
  box-shadow:0 5px 10px rgba(63,130,44,.16);
}
.prod-bars .completed{
  background:linear-gradient(180deg,#c1c8d4,#9da7b6);
  box-shadow:0 5px 10px rgba(100,116,139,.12);
}
.prod-dash-table{
  border-collapse:separate;
  border-spacing:0;
}
.prod-dash-table th{
  position:sticky;
  top:0;
  z-index:1;
  background:#f6f9ff;
}
.prod-dash-table tbody tr:nth-child(even) td{background:#fbfdff;}
.prod-dash-table tbody tr:hover td{background:#f3f7ff;}
.prod-dash-table td:first-child,
.prod-dash-table th:first-child{border-left:1px solid #e6edf8;}
.prod-dash-table td:last-child,
.prod-dash-table th:last-child{border-right:1px solid #e6edf8;}
.prod-dash-table thead th:first-child{border-top-left-radius:.3rem;}
.prod-dash-table thead th:last-child{border-top-right-radius:.3rem;}
.prod-dash-footer{
  background:linear-gradient(180deg,#f7f9fe,#eef4ff);
  box-shadow:0 7px 18px rgba(7,20,95,.035);
}
@media (max-width:760px){
  .prod-bar-chart::before{display:none;}
}

/* Production dashboard final alignment fixes */
.production-dashboard .prod-dash-kpi-icon .material-symbols-outlined,
.production-dashboard .prod-dash-kpi-icon span{
  color:#fff!important;
  -webkit-text-fill-color:#fff;
}
.production-dashboard .prod-dash-kpi{
  min-height:4.75rem;
  padding:.62rem .68rem;
}
.production-dashboard .prod-dash-kpi-icon{
  width:2.42rem;
  height:2.42rem;
  flex:0 0 2.42rem;
}
.production-dashboard .prod-dash-kpi-icon .material-symbols-outlined{font-size:1.24rem!important;}
.production-dashboard .prod-dash-kpi strong{font-size:1rem;}
.production-dashboard .prod-bar-chart{
  margin-left:0;
  overflow:visible;
}
.production-dashboard .prod-chart-area{
  display:grid;
  grid-template-columns:1.95rem minmax(0,1fr);
  gap:.28rem;
  min-width:0;
}
.production-dashboard .prod-y-axis{
  height:12.4rem;
  display:grid;
  grid-template-rows:repeat(7,1fr);
  align-items:start;
  padding-top:.04rem;
  color:#001a77;
  font-size:.54rem;
  font-weight:900;
  text-align:right;
  line-height:1;
}
.production-dashboard .prod-y-axis span{display:block;}
.production-dashboard .prod-bar-chart::before{
  display:none;
}
.production-dashboard .prod-gauge{
  width:8.8rem;
  aspect-ratio:1;
  border-radius:50%;
  padding:0;
  margin:.05rem auto .85rem;
  display:grid;
  place-items:center;
  background:
    conic-gradient(from -90deg,#1557d6 0 calc(var(--value)*1%),#e5ebf4 calc(var(--value)*1%) 100%);
  box-shadow:0 12px 22px rgba(7,20,95,.09),inset 0 0 0 1px rgba(255,255,255,.72);
}
.production-dashboard .prod-gauge::before{
  content:"";
  position:absolute;
  inset:.5rem;
  border-radius:50%;
  background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(255,255,255,0));
  pointer-events:none;
}
.production-dashboard .prod-gauge::after{
  content:"";
  position:absolute;
  inset:1.35rem;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 1px #dfe7f4,0 8px 18px rgba(7,20,95,.08);
}
.production-dashboard .prod-gauge strong{
  position:relative;
  z-index:1;
  font-size:1.32rem;
  line-height:1;
}
.production-dashboard .prod-gauge span{
  position:relative;
  z-index:1;
  display:block;
  margin-top:1.55rem;
  font-size:.58rem;
}
.production-dashboard .prod-donut-row.compact{
  grid-template-columns:8.8rem minmax(0,1fr);
  align-items:center;
}
.production-dashboard .prod-donut-row.compact .prod-donut{
  width:8.25rem;
  justify-self:center;
}
.production-dashboard .prod-donut-row.compact .prod-donut-legend{
  gap:.48rem;
}
.production-dashboard .prod-donut-row.compact .prod-donut-legend .prod-metric-line{
  grid-template-columns:.62rem minmax(5.8rem,1fr) auto;
  align-items:start;
}
.production-dashboard .prod-donut-row.compact .prod-metric-line span{
  white-space:normal;
  line-height:1.25;
}
.production-dashboard .prod-donut-row.compact .prod-metric-line strong{
  white-space:nowrap;
  text-align:right;
}
@media (max-width:760px){
  .production-dashboard .prod-bar-chart{margin-left:0;}
  .production-dashboard .prod-chart-area{grid-template-columns:1fr;}
  .production-dashboard .prod-y-axis{display:none;}
  .production-dashboard .prod-donut-row.compact{grid-template-columns:1fr;}
  .production-dashboard .prod-donut-row.compact .prod-donut-legend .prod-metric-line{
    grid-template-columns:.62rem minmax(0,1fr) auto;
  }
}

/* ==========================================================================
   ESHKOL ERP v5 - PREMIUM UI & RESPONSIVE POLISH OVERRIDES
   ========================================================================== */

/* 1. Global Variables & Typography System */
:root {
  --fs-xs: 0.72rem;     /* 11.5px */
  --fs-sm: 0.8125rem;   /* 13px */
  --fs-base: 0.875rem;  /* 14px */
  --fs-md: 0.9375rem;   /* 15px */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-xl: 1.375rem;    /* 22px */
  --fs-2xl: 1.75rem;    /* 28px */
  --fs-3xl: 2.25rem;    /* 36px */

  --r-kpi: 1rem;
  --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-kpi: 0 4px 12px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
  --shadow-kpi-hover: 0 10px 25px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.03);
}

[data-theme="dark"] {
  --shadow-kpi: 0 4px 12px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-kpi-hover: 0 10px 25px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Force standard body font sizes and fonts globally */
html[data-auth-ready="app"] body,
body {
  font-family: var(--font-body) !important;
  font-size: var(--fs-base) !important;
  line-height: 1.55 !important;
}

/* 2. Standarized Heading Scale (Global Override) */
html[data-auth-ready="app"] #app-content h1,
html[data-auth-ready="app"] h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-3xl)) !important;
  font-weight: 850 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  margin-bottom: 0.5rem !important;
}

html[data-auth-ready="app"] #app-content h2,
html[data-auth-ready="app"] h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(var(--fs-lg), 2vw, var(--fs-xl)) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  margin-bottom: 0.4rem !important;
}

html[data-auth-ready="app"] #app-content h3,
html[data-auth-ready="app"] h3 {
  font-family: var(--font-display) !important;
  font-size: var(--fs-lg) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-bottom: 0.35rem !important;
}

html[data-auth-ready="app"] #app-content h4,
html[data-auth-ready="app"] h4 {
  font-family: var(--font-display) !important;
  font-size: var(--fs-md) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

/* 3. KPI Cards - Perfect Layout and Premium Styling */
html[data-auth-ready="app"] #app-content .bimas-kpi,
html[data-auth-ready="app"] #app-content .kpi-card,
html[data-auth-ready="app"] #app-content .stats-card,
html[data-auth-ready="app"] #app-content .dash-kpi,
html[data-auth-ready="app"] #app-content .inv-kpi-card {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 1.15rem !important;
  min-height: 6rem !important;
  padding: 1.25rem 1.4rem !important;
  overflow: hidden !important;
  background: var(--surface-0) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-kpi) !important;
  box-shadow: var(--shadow-kpi) !important;
  color: var(--text-primary) !important;
  transform: translateY(0) !important;
  min-width: 0 !important;
  transition: var(--transition-smooth) !important;
}

/* Remove decorative absolute overlays that clutter the card */
html[data-auth-ready="app"] #app-content .bimas-kpi::after,
html[data-auth-ready="app"] #app-content .kpi-card::after,
html[data-auth-ready="app"] #app-content .stats-card::after,
html[data-auth-ready="app"] #app-content .dash-kpi::after,
html[data-auth-ready="app"] #app-content .inv-kpi-card::after {
  display: none !important;
}

/* Elegant Hover States for KPI cards */
html[data-auth-ready="app"] #app-content .bimas-kpi:hover,
html[data-auth-ready="app"] #app-content .kpi-card:hover,
html[data-auth-ready="app"] #app-content .stats-card:hover,
html[data-auth-ready="app"] #app-content .dash-kpi:hover,
html[data-auth-ready="app"] #app-content .inv-kpi-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--bimas-kpi-accent, var(--brand-blue)) !important;
  box-shadow: var(--shadow-kpi-hover) !important;
}

/* Modern Centered Icon Badge */
html[data-auth-ready="app"] #app-content .bimas-kpi-icon,
html[data-auth-ready="app"] #app-content .kpi-icon,
html[data-auth-ready="app"] #app-content .stats-icon,
html[data-auth-ready="app"] #app-content .dash-kpi .kicon,
html[data-auth-ready="app"] #app-content .inv-kpi-icon {
  width: 2.85rem !important;
  height: 2.85rem !important;
  min-width: 2.85rem !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: color-mix(in srgb, var(--bimas-kpi-accent, var(--brand-blue)) 12%, transparent) !important;
  color: var(--bimas-kpi-accent, var(--brand-blue)) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  flex: 0 0 2.85rem !important;
  z-index: 1 !important;
  transition: var(--transition-smooth) !important;
}

html[data-auth-ready="app"] #app-content .bimas-kpi-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .kpi-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .stats-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .dash-kpi .kicon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .inv-kpi-icon .material-symbols-outlined {
  font-size: 1.35rem !important;
  color: var(--bimas-kpi-accent, var(--brand-blue)) !important;
  line-height: 1 !important;
}

/* Dynamic Hover Effect on Icons */
html[data-auth-ready="app"] #app-content .bimas-kpi:hover .bimas-kpi-icon,
html[data-auth-ready="app"] #app-content .kpi-card:hover .kpi-icon,
html[data-auth-ready="app"] #app-content .stats-card:hover .stats-icon,
html[data-auth-ready="app"] #app-content .dash-kpi:hover .kicon,
html[data-auth-ready="app"] #app-content .inv-kpi-card:hover .inv-kpi-icon {
  background: var(--bimas-kpi-accent, var(--brand-blue)) !important;
  color: #ffffff !important;
}
html[data-auth-ready="app"] #app-content .bimas-kpi:hover .bimas-kpi-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .kpi-card:hover .kpi-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .stats-card:hover .stats-icon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .dash-kpi:hover .kicon .material-symbols-outlined,
html[data-auth-ready="app"] #app-content .inv-kpi-card:hover .inv-kpi-icon .material-symbols-outlined {
  color: #ffffff !important;
}

/* Center Body Content Inside KPI */
html[data-auth-ready="app"] #app-content .bimas-kpi-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0.18rem !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  z-index: 1 !important;
}

/* KPI Title / Label styling */
html[data-auth-ready="app"] #app-content .bimas-kpi-body > :not(.bimas-kpi-value):not(.material-symbols-outlined),
html[data-auth-ready="app"] #app-content .kpi-label,
html[data-auth-ready="app"] #app-content .stats-label,
html[data-auth-ready="app"] #app-content .dash-kpi .label,
html[data-auth-ready="app"] #app-content .inv-kpi-label {
  font-family: var(--font-body) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--text-tertiary) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* KPI Primary Numeric Values - Highly Prominent */
html[data-auth-ready="app"] #app-content .bimas-kpi-value,
html[data-auth-ready="app"] #app-content .kpi-value,
html[data-auth-ready="app"] #app-content .stats-value,
html[data-auth-ready="app"] #app-content .dash-kpi .value,
html[data-auth-ready="app"] #app-content .inv-kpi-value {
  font-family: var(--font-display) !important;
  font-size: clamp(var(--fs-lg), 2.2vw, var(--fs-2xl)) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Sub-labels / helper text */
html[data-auth-ready="app"] #app-content .bimas-kpi .kpi-sub,
html[data-auth-ready="app"] #app-content .bimas-kpi .inv-kpi-sub,
html[data-auth-ready="app"] #app-content .bimas-kpi-body small,
html[data-auth-ready="app"] #app-content .bimas-kpi-body p,
html[data-auth-ready="app"] #app-content .bimas-kpi small {
  font-size: var(--fs-xs) !important;
  color: var(--text-muted) !important;
  line-height: 1.25 !important;
}

/* 4. Layout & Responsive Structure */
@media (max-width: 1024px) {
  /* Sidebar collapse layout fixes */
  #app-sidebar.sidebar-modern {
    transform: translateX(-100%) !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--sidebar-w) !important;
    z-index: 9999 !important;
    transition: transform 0.28s var(--ease) !important;
    box-shadow: none !important;
  }
  
  #app-sidebar.sidebar-modern.open,
  #app-sidebar.sidebar-modern.mobile-open {
    transform: translateX(0) !important;
    box-shadow: var(--shadow-xl) !important;
  }

  #app-content {
    margin-left: 0 !important;
    padding-bottom: 4.85rem !important; /* safe clearance for bottom navigation */
  }

  #app-topbar {
    left: 0 !important;
    width: 100% !important;
  }
}

/* Premium Topbar Glassmorphism */
#app-topbar {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* Mobile Bottom Navigation Bar Polish */
#app-bottomnav {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid var(--glass-border) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
  border-radius: 1.15rem 1.15rem 0 0 !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  height: auto !important;
  min-height: 4.25rem !important;
}

#app-bottomnav .bottomnav-item {
  color: var(--text-tertiary) !important;
  transition: var(--transition-smooth) !important;
}

#app-bottomnav .bottomnav-item.active {
  color: var(--brand-blue) !important;
  font-weight: 700 !important;
}

#app-bottomnav .bottomnav-item .material-symbols-outlined {
  font-size: 1.35rem !important;
  transition: var(--transition-smooth) !important;
}

#app-bottomnav .bottomnav-item.active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24 !important;
}

/* Mobile Form Inputs (Prevents iOS Zoom) */
@media (max-width: 768px) {
  .form-input,
  .form-select,
  .form-control,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important; /* Forces 16px to prevent iOS auto-zoom */
    min-height: 44px !important; /* Comfortable tap target */
  }

  .form-label {
    font-size: var(--fs-xs) !important;
  }
}

/* Form Action Buttons & Containers */
.form-actions,
.modal-actions,
.page-actions {
  display: flex !important;
  gap: 0.75rem !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}
@media (max-width: 520px) {
  .form-actions,
  .modal-actions,
  .page-actions {
    flex-direction: column !important;
  }
  .form-actions .btn,
  .modal-actions .btn,
  .page-actions .btn {
    width: 100% !important;
  }
}

/* 5. Clean, Consistent Table Styling & Responsive Scroll */
html[data-auth-ready="app"] #app-content .table-wrapper,
html[data-auth-ready="app"] #app-content .table-responsive,
html[data-auth-ready="app"] #app-content .data-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface-0) !important;
  margin-bottom: 1.25rem !important;
  /* Premium Scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}

html[data-auth-ready="app"] #app-content .table-wrapper::-webkit-scrollbar,
html[data-auth-ready="app"] #app-content .table-responsive::-webkit-scrollbar,
html[data-auth-ready="app"] #app-content .data-table-wrap::-webkit-scrollbar {
  height: 6px;
}
html[data-auth-ready="app"] #app-content .table-wrapper::-webkit-scrollbar-thumb,
html[data-auth-ready="app"] #app-content .table-responsive::-webkit-scrollbar-thumb,
html[data-auth-ready="app"] #app-content .data-table-wrap::-webkit-scrollbar-thumb {
  background-color: var(--surface-3);
  border-radius: 3px;
}

html[data-auth-ready="app"] #app-content .data-table,
html[data-auth-ready="app"] #app-content .inv-table,
html[data-auth-ready="app"] #app-content .so-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: var(--fs-base) !important;
  text-align: left !important;
  min-width: 48rem !important; /* Prevent squishing of data-dense tables */
}

html[data-auth-ready="app"] #app-content .data-table th,
html[data-auth-ready="app"] #app-content .inv-table th,
html[data-auth-ready="app"] #app-content .so-table th {
  background: var(--surface-1) !important;
  color: var(--text-secondary) !important;
  font-weight: 700 !important;
  font-size: var(--fs-sm) !important;
  padding: 0.85rem 1rem !important;
  border-bottom: 2px solid var(--border) !important;
}

html[data-auth-ready="app"] #app-content .data-table td,
html[data-auth-ready="app"] #app-content .inv-table td,
html[data-auth-ready="app"] #app-content .so-table td {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  vertical-align: middle !important;
}

html[data-auth-ready="app"] #app-content .data-table tbody tr:hover,
html[data-auth-ready="app"] #app-content .inv-table tbody tr:hover,
html[data-auth-ready="app"] #app-content .so-table tbody tr:hover {
  background: var(--surface-1) !important;
}

/* 6. General Visual Polish */
.btn {
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  padding: 0.625rem 1.15rem !important;
  border-radius: var(--r-md) !important;
  transition: var(--transition-smooth) !important;
}

.btn-sm {
  font-size: var(--fs-xs) !important;
  padding: 0.45rem 0.85rem !important;
}

.btn-lg {
  font-size: var(--fs-md) !important;
  padding: 0.75rem 1.4rem !important;
}

.card,
.dash-card,
.dashboard-card,
.module-card,
.so-card {
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-0) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 1.25rem !important;
  transition: var(--transition-smooth) !important;
}

/* Dynamic Grid Wrappers for KPI cards */
.kpi-grid,
.stats-grid,
.dash-kpi-grid,
.bi-kpi-grid,
.fgs-kpi-grid,
.inv-kpi-row,
.production-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)) !important;
  gap: 1.15rem !important;
  margin-bottom: 1.5rem !important;
}

/* Modal Overlay Polish */
.modal-overlay {
  background: rgba(15, 23, 42, 0.4) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.modal-content {
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xl) !important;
  background: var(--surface-0) !important;
}

/* Custom badges */
.badge {
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  padding: 0.25rem 0.55rem !important;
  border-radius: var(--r-full) !important;
}

/* 7. Full-width Overrides for BOM Dashboard & Master */
body[data-route^="bom"] #app-content > .bimas-bom-page,
body[data-route^="bom"] #app-content > .bom-master-page,
body[data-route^="bom"] #app-content > div {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  margin: 0 auto !important;
}

/* 8. Global Workspace Layout Repair to Prevent Right-edge Overflow */
html[data-auth-ready="app"] #app-content,
#app-content {
  width: auto !important;
  max-width: 100% !important;
}

/* 9. BOM Dashboard Layout Overlaps & Wrapping Fixes */
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-bom-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.95fr) !important;
  gap: 1.25rem !important;
}

@media (max-width: 1200px) {
  html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-bom-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-bom-charts {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)) !important;
  gap: 1rem !important;
  width: 100% !important;
}

/* Fix compact table min-width inside sidebar details card to prevent grid stretch */
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-table-wrap.compact .bimas-table {
  min-width: 30rem !important; /* 480px: allows table to scroll inside card, preventing card stretch */
}

/* 10. BOM Master Layout Overlaps & Wrapping Fixes */
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-master-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-product-fields {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)) !important;
  gap: 0.75rem !important;
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-master-side {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)) !important;
  gap: 1rem !important;
  width: 100% !important;
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-master-bottom {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)) !important;
  gap: 1rem !important;
  width: 100% !important;
}

/* Ensure table containers scroll instead of overflowing on right */
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bimas-table-wrap,
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-master-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  display: block !important;
}

/* Premium BOM dashboard polish */
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-page,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-page{
  --bom-ink:#071226;
  --bom-muted:#64748b;
  --bom-line:#d9e4f2;
  --bom-panel:#ffffff;
  --bom-soft:#f6f9fd;
  gap:16px!important;
  color:var(--bom-ink)!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-module-header,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header{
  border:0!important;
  border-radius:8px!important;
  padding:14px 16px!important;
  background:#071226!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-module-header h1,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header h1{
  color:#fff!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-module-header p,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-module-header p{
  color:#dbeafe!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-menu-btn,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-menu-btn{
  width:2.45rem!important;
  height:2.45rem!important;
  border-radius:8px!important;
  background:#fff!important;
  border:1px solid var(--bom-line)!important;
  color:#3157d5!important;
  box-shadow:0 10px 24px rgba(15,23,42,.07)!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-kpis,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-kpis{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:stretch!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi{
  position:relative!important;
  display:grid!important;
  grid-template-columns:2.25rem minmax(0,1fr)!important;
  align-items:center!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--bimas-kpi-color) 20%,#dbe5f0)!important;
  border-radius:8px!important;
  min-height:104px!important;
  padding:12px!important;
  gap:10px!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--bimas-kpi-color) 7%,#fff),#fff 46%)!important;
  box-shadow:0 16px 34px rgba(15,23,42,.09)!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi::before,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:4px!important;
  background:var(--bimas-kpi-color)!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi > i,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi > i{
  position:absolute!important;
  right:-1.4rem!important;
  top:-1.8rem!important;
  width:5.8rem!important;
  height:5.8rem!important;
  border-radius:50%!important;
  background:color-mix(in srgb,var(--bimas-kpi-color) 9%,transparent)!important;
  pointer-events:none!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi-icon,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi-icon{
  display:grid!important;
  place-items:center!important;
  width:36px!important;
  height:36px!important;
  border-radius:8px!important;
  background:var(--bimas-kpi-color)!important;
  color:#fff!important;
  box-shadow:0 12px 22px color-mix(in srgb,var(--bimas-kpi-color) 24%,transparent)!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi-icon .material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi-icon .material-symbols-outlined{
  font-size:1.45rem!important;
  line-height:1!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi-body,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi-body{
  min-width:0!important;
  display:grid!important;
  gap:.28rem!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi-body small,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi-body small{
  color:#000!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:0!important;
  font-size:10.5px!important;
  line-height:1.18!important;
  white-space:normal!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi-body strong,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi-body strong{
  color:#000!important;
  font-family:var(--font-display)!important;
  font-weight:1000!important;
  letter-spacing:0!important;
  white-space:normal!important;
  font-size:18px!important;
  line-height:1.12!important;
  display:block!important;
  max-width:100%!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi-body em,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi-body em{
  color:#000!important;
  font-style:normal!important;
  font-weight:900!important;
  font-size:10px!important;
  line-height:1.25!important;
  white-space:normal!important;
  opacity:.78!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi:hover,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi:hover{
  transform:translateY(-1px)!important;
  border-color:color-mix(in srgb,var(--bimas-kpi-color) 34%,#dbe5f0)!important;
  box-shadow:0 18px 38px rgba(15,23,42,.12)!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-main,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-main,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-detail-card,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-detail-card,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-chart-card,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-chart-card{
  border:1px solid var(--bom-line)!important;
  border-radius:8px!important;
  background:var(--bom-panel)!important;
  box-shadow:0 14px 32px rgba(15,23,42,.06)!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-tabs,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-tabs,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-toolbar,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-toolbar{
  padding:14px 16px!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-tabs button,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-tabs button{
  height:2.35rem!important;
  padding:0 .9rem!important;
  border-radius:7px!important;
  font-size:.76rem!important;
  font-weight:850!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-tabs button.active,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-tabs button.active{
  background:#071226!important;
  color:#fff!important;
  border-color:#071226!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-search,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-search,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-bom-toolbar select,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-bom-toolbar select{
  height:2.45rem!important;
  border-radius:7px!important;
  border:1px solid var(--bom-line)!important;
  background:#fff!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-table th,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-table th{
  background:#f4f7fb!important;
  color:#344766!important;
  font-size:.68rem!important;
  font-weight:900!important;
  letter-spacing:0!important;
  text-transform:uppercase!important;
  padding:.8rem .75rem!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-table td,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-table td{
  padding:.78rem .75rem!important;
  color:#10233f!important;
  font-size:.76rem!important;
}

html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-chart-card h3,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-chart-card h3,
html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-detail-head h2,
html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-detail-head h2{
  color:var(--bom-ink)!important;
  font-size:.92rem!important;
  font-weight:900!important;
  letter-spacing:0!important;
}

@media (max-width:760px){
  html[data-auth-ready="app"] body[data-route="bom"] #app-content .bimas-kpi,
  html[data-auth-ready="app"] body[data-route="bom-dashboard"] #app-content .bimas-kpi{
    min-height:104px!important;
    grid-template-columns:2.75rem minmax(0,1fr)!important;
  }
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-premium-kpi{
  grid-template-columns:36px minmax(0,1fr)!important;
  min-height:108px!important;
  padding:12px 10px 12px 13px!important;
  background:#fff!important;
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-premium-kpi-body{
  display:flex!important;
  min-width:0!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:4px!important;
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-premium-kpi-label,
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-premium-kpi-value,
html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-premium-kpi-note{
  color:#000!important;
  letter-spacing:0!important;
  text-shadow:none!important;
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-premium-kpi-label{
  display:block!important;
  font-size:11px!important;
  line-height:1.12!important;
  font-weight:950!important;
  text-transform:uppercase!important;
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-premium-kpi-value{
  display:block!important;
  max-width:100%!important;
  font-size:18px!important;
  line-height:1.08!important;
  font-weight:950!important;
  overflow-wrap:anywhere!important;
}

html[data-auth-ready="app"] body[data-route^="bom"] #app-content .bom-premium-kpi-note{
  display:block!important;
  font-size:10.5px!important;
  line-height:1.18!important;
  font-weight:900!important;
  opacity:.86!important;
  overflow-wrap:normal!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inventory-overview,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inventory-overview{
  color:#071226!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-head,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-head{
  align-items:center!important;
  gap:1rem!important;
  padding:1.1rem 1.25rem!important;
  border:1px solid rgba(219,229,240,.9)!important;
  border-radius:8px!important;
  background:linear-gradient(135deg,#08264d 0%,#123e73 58%,#0f766e 100%)!important;
  box-shadow:0 14px 34px rgba(15,23,42,.12)!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-head h2,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-head h2,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-head .material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-head .material-symbols-outlined{
  color:#fff!important;
  letter-spacing:0!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-head p,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-head p,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-last-updated,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-last-updated{
  color:rgba(255,255,255,.84)!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-kpis{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:.75rem!important;
  width:100%!important;
  margin:0!important;
  align-items:stretch!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-premium-kpi,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-premium-kpi{
  min-width:0!important;
  width:100%!important;
  color:#000!important;
  background:#fff!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-premium-kpi-value,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-premium-kpi-value,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-premium-kpi-label,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-premium-kpi-label,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-premium-kpi-note,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-premium-kpi-note,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-premium-kpi-badge,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-premium-kpi-badge{
  color:#000!important;
  font-weight:950!important;
  letter-spacing:0!important;
  text-shadow:none!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-premium-kpi-value,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-premium-kpi-value{
  font-size:clamp(.95rem,1.08vw,1.08rem)!important;
  overflow-wrap:anywhere!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-chart-card,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-chart-card,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-register-card,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-register-card,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-recent-card,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-recent-card{
  border:1px solid #dbe5f0!important;
  border-radius:8px!important;
  background:#fff!important;
  box-shadow:0 10px 28px rgba(15,23,42,.06)!important;
}

@media (max-width:1280px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis,
  html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media (max-width:820px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis,
  html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:560px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis,
  html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-kpis{
    grid-template-columns:1fr!important;
  }
}

@media (min-width:721px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis,
  html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-kpis,
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref .inv-overview-kpis,
  html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-ref .inv-overview-kpis{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:.55rem!important;
    align-items:stretch!important;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-premium-kpi,
  html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-premium-kpi{
    min-height:96px!important;
  }
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-premium-kpi-value,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-premium-kpi-value{
  color:#000!important;
  font-size:.98rem!important;
  font-weight:950!important;
  line-height:1.08!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-premium-kpi-label,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-premium-kpi-label,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-premium-kpi-note,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-premium-kpi-note{
  color:#000!important;
  font-size:.58rem!important;
  font-weight:950!important;
  line-height:1.14!important;
}

/* Inventory overview final desktop polish */
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-ref{
  width:100%!important;
  max-width:none!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:.82rem!important;
  align-items:start!important;
  padding:1.15rem 1.2rem 1.05rem!important;
  min-height:auto!important;
  border-radius:8px!important;
  overflow:visible!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-head > div:first-child{
  min-width:0!important;
  max-width:100%!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-eyebrow{
  display:block!important;
  max-width:12rem!important;
  color:#14b8a6!important;
  font-size:.66rem!important;
  font-weight:950!important;
  line-height:1.28!important;
  letter-spacing:.08em!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-head h2{
  margin:.18rem 0 0!important;
  color:#fff!important;
  font-size:1.55rem!important;
  font-weight:950!important;
  line-height:1.08!important;
  letter-spacing:0!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-head h2 .material-symbols-outlined{
  display:inline-grid!important;
  place-items:center!important;
  width:1.8rem!important;
  height:1.8rem!important;
  margin-left:.2rem!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.18)!important;
  color:#fff!important;
  font-size:1rem!important;
  vertical-align:middle!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-head p{
  display:none!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-actions{
  display:flex!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:.48rem!important;
  flex-wrap:wrap!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-last-updated{
  order:-2!important;
  flex:0 1 auto!important;
  max-width:15rem!important;
  min-height:2rem!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:.38rem .72rem!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.96)!important;
  color:#123e73!important;
  font-size:.66rem!important;
  font-weight:900!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  box-shadow:0 8px 18px rgba(15,23,42,.12)!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-refresh-btn{
  order:-1!important;
  width:2rem!important;
  min-width:2rem!important;
  height:2rem!important;
  min-height:2rem!important;
  display:inline-grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.78)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.98)!important;
  color:#123e73!important;
  box-shadow:0 8px 18px rgba(15,23,42,.12)!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-refresh-btn .material-symbols-outlined{
  color:#123e73!important;
  font-size:1rem!important;
  line-height:1!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-actions .btn{
  flex:0 0 auto!important;
  min-height:2.05rem!important;
  height:2.05rem!important;
  padding:.42rem .78rem!important;
  border-radius:7px!important;
  font-size:.72rem!important;
  font-weight:900!important;
  line-height:1!important;
  white-space:nowrap!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-actions .btn .material-symbols-outlined{
  font-size:.95rem!important;
  line-height:1!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-dropdown-wrap{
  flex:0 0 auto!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-register-row{
  display:grid!important;
  grid-template-columns:1fr!important;
  width:100%!important;
  max-width:none!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-register-main,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-register-card{
  width:100%!important;
  max-width:none!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-register-card{
  padding:1rem!important;
  overflow:hidden!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-filter-row{
  display:grid!important;
  grid-template-columns:minmax(18rem,1.4fr) minmax(9.5rem,.65fr) minmax(9.5rem,.65fr) auto auto!important;
  gap:.55rem!important;
  align-items:center!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-table-wrap{
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-table{
  width:100%!important;
  min-width:78rem!important;
}

@media (min-width:1280px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-table{
    min-width:0!important;
    table-layout:fixed!important;
  }
}

@media (max-width:980px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-actions{
    justify-content:flex-start!important;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-filter-row{
    grid-template-columns:1fr 1fr!important;
  }
}

@media (max-width:620px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-actions .btn,
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-dropdown-wrap{
    width:100%!important;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-actions .btn{
    justify-content:center!important;
  }

  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-filter-row{
    grid-template-columns:1fr!important;
  }
}

/* FGS KPI text visibility and alignment */
html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:.68rem!important;
  align-items:stretch!important;
  margin-bottom:1.35rem!important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-card{
  min-width:0!important;
  min-height:78px!important;
  display:grid!important;
  grid-template-columns:2.1rem minmax(0,1fr)!important;
  grid-template-rows:1fr!important;
  gap:.62rem!important;
  align-items:center!important;
  padding:.64rem .68rem!important;
  border:1px solid #dbe6f2!important;
  border-left:4px solid var(--fgs-tone,#174f91)!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#000!important;
  box-shadow:0 8px 22px rgba(15,23,42,.055)!important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-head{
  grid-column:1!important;
  grid-row:1!important;
  display:grid!important;
  place-items:center!important;
  min-width:0!important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-icon,
html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-head .material-symbols-outlined{
  width:2.1rem!important;
  height:2.1rem!important;
  display:grid!important;
  place-items:center!important;
  align-self:center!important;
  border-radius:7px!important;
  background:var(--fgs-tone,#174f91)!important;
  color:#fff!important;
  font-size:1rem!important;
  line-height:1!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-copy{
  grid-column:2!important;
  grid-row:1!important;
  display:flex!important;
  min-width:0!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:.12rem!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-value{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  font-size:1rem!important;
  font-weight:950!important;
  line-height:1.05!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-label{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  font-size:.58rem!important;
  font-weight:950!important;
  line-height:1.12!important;
  letter-spacing:0!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-sub{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border-top:0!important;
  color:#000!important;
  font-size:.56rem!important;
  font-weight:900!important;
  line-height:1.12!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  opacity:.84!important;
  text-shadow:none!important;
  z-index:1!important;
}

@media (max-width:1280px){
  html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media (max-width:720px){
  html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-grid{
    grid-template-columns:1fr!important;
  }
}

/* Dashboard final KPI/report lock: global look with icons on the left. */
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell .ceo-kpi,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi,
#app-content .ceo-shell .ceo-kpi,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-report,
#app-content .ceo-shell .ceo-report{
  position:relative!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:left!important;
  border:1px solid #dbe6f2!important;
  border-top:3px solid var(--tone,#174f91)!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 8px 18px rgba(15,23,42,.055)!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell .ceo-kpi,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi,
#app-content .ceo-shell .ceo-kpi{
  gap:.42rem!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-report,
#app-content .ceo-shell .ceo-report{
  min-height:68px!important;
  gap:.5rem!important;
  padding:.46rem .55rem!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell .ceo-kpi::before,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report::before,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi::before,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-report::before,
#app-content .ceo-shell .ceo-kpi::before,
#app-content .ceo-shell .ceo-report::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:3px!important;
  height:auto!important;
  border-radius:8px 0 0 8px!important;
  background:var(--tone,#174f91)!important;
  opacity:1!important;
  pointer-events:none!important;
  z-index:0!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell .ceo-kpi::after,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report::after,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi::after,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-report::after,
#app-content .ceo-shell .ceo-kpi::after,
#app-content .ceo-shell .ceo-report::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:-1.8rem!important;
  right:-1.35rem!important;
  width:4.9rem!important;
  height:4.9rem!important;
  border-radius:999px!important;
  background:var(--tone,#174f91)!important;
  opacity:.075!important;
  pointer-events:none!important;
  z-index:0!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell .ceo-kpi-icon,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report i,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi-icon,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-report i,
#app-content .ceo-shell .ceo-kpi-icon,
#app-content .ceo-shell .ceo-report i{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
  background:linear-gradient(135deg,var(--tone,#174f91),color-mix(in srgb,var(--tone,#174f91) 76%,#0f172a))!important;
  color:#fff!important;
  box-shadow:0 8px 14px color-mix(in srgb,var(--tone,#174f91) 22%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--tone,#174f91) 64%,#fff)!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell .ceo-kpi-icon,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi-icon,
#app-content .ceo-shell .ceo-kpi-icon{
  width:1.78rem!important;
  height:1.78rem!important;
  min-width:1.78rem!important;
  flex:0 0 1.78rem!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report i,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-report i,
#app-content .ceo-shell .ceo-report i{
  width:1.9rem!important;
  height:1.9rem!important;
  min-width:1.9rem!important;
  flex:0 0 1.9rem!important;
  font-style:normal!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell .ceo-kpi-copy,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report-copy,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi-copy,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-report-copy,
#app-content .ceo-shell .ceo-kpi-copy,
#app-content .ceo-shell .ceo-report-copy{
  position:relative!important;
  z-index:1!important;
  min-width:0!important;
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  text-align:left!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report-grid,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-report-grid,
#app-content .ceo-shell .ceo-report-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:.55rem!important;
  padding:.75rem!important;
  align-items:stretch!important;
}

/* Final mobile app rail: KPI and quick-action grids stay compact, not one-column. */
@media (max-width:767px){
  html[data-auth-ready="app"] #app-content :is(
    [class*="kpi-grid"],
    [class*="kpis"],
    [class*="metric-grid"],
    .bimas-auto-kpi-strip,
    .ceo-report-grid,
    .dash-grid,
    .dash-shortcuts,
    .ceo-command-strip
  ){
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:.36rem!important;
    align-items:stretch!important;
  }

  html[data-auth-ready="app"] #app-content :is(
    [class*="kpi-card"],
    [class*="metric-card"],
    .kpi-card,
    .bimas-kpi,
    .ops-kpi,
    .dash-kpi,
    .ceo-kpi,
    .reports-hub-kpi,
    .reports-report-kpi,
    .sales-perf-kpi,
    .prod-dash-kpi,
    .fgs-metric-card
  ){
    min-height:58px!important;
    height:58px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:.24rem!important;
    padding:.3rem .32rem!important;
    border-radius:8px!important;
    overflow:hidden!important;
  }

  html[data-auth-ready="app"] #app-content :is(
    [class*="kpi-card"],
    [class*="metric-card"],
    .kpi-card,
    .bimas-kpi,
    .ops-kpi,
    .dash-kpi,
    .ceo-kpi,
    .reports-hub-kpi,
    .reports-report-kpi,
    .sales-perf-kpi,
    .prod-dash-kpi,
    .fgs-metric-card
  ) :is([class*="kpi-icon"],[class*="metric-icon"],.kicon,.icon,.bimas-kpi-icon,.fgs-metric-icon){
    position:static!important;
    width:1.28rem!important;
    height:1.28rem!important;
    min-width:1.28rem!important;
    flex:0 0 1.28rem!important;
    border-radius:6px!important;
    font-size:.72rem!important;
  }

  html[data-auth-ready="app"] #app-content :is([class*="kpi-copy"],[class*="metric-copy"],[class*="kpi-main"],[class*="kpi-body"],.fgs-metric-copy){
    min-width:0!important;
    flex:1 1 auto!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:.03rem!important;
  }

  html[data-auth-ready="app"] #app-content :is([class*="kpi-label"],[class*="metric-label"],.kpi-label,.label,.fgs-metric-label){
    font-size:.38rem!important;
    line-height:1.03!important;
  }

  html[data-auth-ready="app"] #app-content :is([class*="kpi-value"],[class*="metric-value"],.kpi-value,.value,.fgs-metric-value){
    font-size:.56rem!important;
    line-height:1.04!important;
  }

  html[data-auth-ready="app"] #app-content :is([class*="kpi-sub"],[class*="metric-sub"],.kpi-sub,.sub,.fgs-metric-sub){
    font-size:.34rem!important;
    line-height:1.04!important;
    opacity:.78!important;
  }
}

@media (max-width:767px){
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report-grid,
  html[data-auth-ready="app"] #app-content .ceo-shell .ceo-report-grid,
  #app-content .ceo-shell .ceo-report-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:520px){
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report-grid,
  html[data-auth-ready="app"] #app-content .ceo-shell .ceo-report-grid,
  #app-content .ceo-shell .ceo-report-grid{
    grid-template-columns:1fr!important;
  }
}

/* CEO dashboard final desktop KPI rail: six compact cards in one line. */
@media (min-width:768px){
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-kpi-grid,
  html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi-grid,
  #app-content .ceo-shell .ceo-kpi-grid{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:.42rem!important;
    align-items:stretch!important;
    width:100%!important;
  }

  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-kpi,
  html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi,
  #app-content .ceo-shell .ceo-kpi{
    height:66px!important;
    min-height:66px!important;
    grid-template-columns:1.72rem minmax(0,1fr)!important;
    gap:.42rem!important;
    padding:.4rem .48rem!important;
  }

  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-kpi-icon,
  html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi-icon,
  #app-content .ceo-shell .ceo-kpi-icon{
    width:1.72rem!important;
    height:1.72rem!important;
    min-width:1.72rem!important;
  }

  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-kpi-icon .material-symbols-outlined,
  html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi-icon .material-symbols-outlined,
  #app-content .ceo-shell .ceo-kpi-icon .material-symbols-outlined{
    font-size:.9rem!important;
  }

  html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi-label{font-size:.46rem!important;}
  html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi-value{font-size:.78rem!important;}
  html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi-sub{font-size:.44rem!important;}
}

/* CEO KPI hard reset: icon stays left of copy and old placeholders are removed. */
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell .ceo-kpi,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi,
#app-content .ceo-shell .ceo-kpi{
  position:relative!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:.42rem!important;
  text-align:left!important;
  border:1px solid #dbe6f2!important;
  border-top:3px solid var(--tone,#174f91)!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 8px 18px rgba(15,23,42,.055)!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell .ceo-kpi::before,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi::before,
#app-content .ceo-shell .ceo-kpi::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:3px!important;
  height:auto!important;
  border-radius:8px 0 0 8px!important;
  background:var(--tone,#174f91)!important;
  opacity:1!important;
  pointer-events:none!important;
  z-index:0!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell .ceo-kpi::after,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi::after,
#app-content .ceo-shell .ceo-kpi::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:-1.8rem!important;
  right:-1.35rem!important;
  width:4.9rem!important;
  height:4.9rem!important;
  border-radius:999px!important;
  background:var(--tone,#174f91)!important;
  opacity:.075!important;
  pointer-events:none!important;
  z-index:0!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell .ceo-kpi-icon,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi-icon,
#app-content .ceo-shell .ceo-kpi-icon{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  grid-column:auto!important;
  grid-row:auto!important;
  width:1.78rem!important;
  height:1.78rem!important;
  min-width:1.78rem!important;
  flex:0 0 1.78rem!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  align-self:center!important;
  justify-self:start!important;
  border-radius:7px!important;
  background:linear-gradient(135deg,var(--tone,#174f91),color-mix(in srgb,var(--tone,#174f91) 76%,#0f172a))!important;
  color:#fff!important;
  box-shadow:0 8px 14px color-mix(in srgb,var(--tone,#174f91) 22%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--tone,#174f91) 64%,#ffffff)!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell .ceo-kpi-copy,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi-copy,
#app-content .ceo-shell .ceo-kpi-copy{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  text-align:left!important;
  position:relative!important;
  z-index:1!important;
}

/* FINAL END-OF-FILE KPI OVERRIDE */
html[data-auth-ready="app"] #app-content :is([class*="kpi-grid"],[class*="kpis"],[class*="metric-grid"]){
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:.78rem!important;
  align-items:stretch!important;
}

html[data-auth-ready="app"] #app-content :is([class*="kpi-card"],[class*="metric-card"],.kpi-card,.bimas-kpi,.ops-kpi,.dash-kpi,.ceo-kpi,.reports-hub-kpi,.reports-report-kpi,.sales-perf-kpi,.prod-dash-kpi){
  --erp-kpi-tone:var(--fgs-tone,var(--dn-tone,var(--drn-tone,var(--sof-tone,var(--cust-kpi-color,var(--pfi-tone,var(--inv-overview-tone,var(--wip-metric-tone,var(--accounts-tone,var(--payroll-tone,var(--production-kpi-color,var(--kpi,var(--tone,var(--notif-tone,var(--products-kpi-color,var(--reports-tone,var(--sales-tone,var(--invoice-tone,var(--kpi-icon-color,#174f91)))))))))))))))))));
  position:relative!important;
  min-width:0!important;
  min-height:88px!important;
  display:grid!important;
  grid-template-columns:2.35rem minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;
  align-content:center!important;
  align-items:center!important;
  gap:.08rem .66rem!important;
  padding:.64rem .72rem!important;
  border:1px solid #dbe6f2!important;
  border-top:3px solid var(--erp-kpi-tone)!important;
  border-left:1px solid #dbe6f2!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 8px 18px rgba(15,23,42,.055)!important;
  transform:none!important;
}

html[data-auth-ready="app"] #app-content :is([class*="kpi-card"],[class*="metric-card"],.kpi-card,.bimas-kpi,.ops-kpi,.dash-kpi,.ceo-kpi,.reports-hub-kpi,.reports-report-kpi,.sales-perf-kpi,.prod-dash-kpi)::before{
  display:none!important;
}

html[data-auth-ready="app"] #app-content :is([class*="kpi-card"],[class*="metric-card"],.kpi-card,.bimas-kpi,.ops-kpi,.dash-kpi,.ceo-kpi,.reports-hub-kpi,.reports-report-kpi,.sales-perf-kpi,.prod-dash-kpi)::after{
  content:""!important;
  position:absolute!important;
  top:-1.95rem!important;
  right:-1.35rem!important;
  width:5rem!important;
  height:5rem!important;
  border-radius:999px!important;
  background:var(--erp-kpi-tone)!important;
  opacity:.08!important;
  pointer-events:none!important;
  transform:none!important;
}

html[data-auth-ready="app"] #app-content :is([class*="kpi-card"],[class*="metric-card"],.kpi-card,.bimas-kpi,.ops-kpi,.dash-kpi,.ceo-kpi,.reports-hub-kpi,.reports-report-kpi,.sales-perf-kpi,.prod-dash-kpi) :is([class*="kpi-icon"],[class*="metric-icon"],.kicon,.icon,.reports-hub-kpi-icon,.reports-report-kpi-icon,.sales-perf-kpi-icon,.prod-dash-kpi-icon,.bimas-kpi-icon),
html[data-auth-ready="app"] #app-content :is([class*="kpi-icon"],[class*="metric-icon"],.notifications-kpi-icon).material-symbols-outlined{
  grid-column:1!important;
  grid-row:1 / span 3!important;
  width:2.35rem!important;
  height:2.35rem!important;
  min-width:2.35rem!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border-radius:7px!important;
  background:var(--erp-kpi-tone)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-style:normal!important;
  font-size:1.08rem!important;
  line-height:1!important;
  box-shadow:0 9px 16px color-mix(in srgb,var(--erp-kpi-tone) 24%,transparent)!important;
  z-index:1!important;
}

html[data-auth-ready="app"] #app-content :is([class*="kpi-card"],[class*="metric-card"],.kpi-card,.bimas-kpi,.ops-kpi,.dash-kpi,.ceo-kpi,.reports-hub-kpi,.reports-report-kpi,.sales-perf-kpi,.prod-dash-kpi) :is([class*="kpi-icon"],[class*="metric-icon"],.kicon,.icon,.reports-hub-kpi-icon,.reports-report-kpi-icon,.sales-perf-kpi-icon,.prod-dash-kpi-icon,.bimas-kpi-icon) .material-symbols-outlined{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:1.08rem!important;
  line-height:1!important;
}

html[data-auth-ready="app"] #app-content :is([class*="kpi-card"],[class*="metric-card"],.kpi-card,.bimas-kpi,.ops-kpi,.dash-kpi,.ceo-kpi,.reports-hub-kpi,.reports-report-kpi,.sales-perf-kpi,.prod-dash-kpi) :is([class*="kpi-copy"],[class*="metric-copy"],[class*="kpi-main"],[class*="kpi-body"]){
  grid-column:2!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:.12rem!important;
  z-index:1!important;
}

html[data-auth-ready="app"] #app-content :is([class*="kpi-card"],[class*="metric-card"],.kpi-card,.bimas-kpi,.ops-kpi,.dash-kpi,.ceo-kpi,.reports-hub-kpi,.reports-report-kpi,.sales-perf-kpi,.prod-dash-kpi) :is([class*="kpi-label"],[class*="metric-label"],.kpi-label,.label,small){
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  font-size:.58rem!important;
  font-weight:950!important;
  line-height:1.12!important;
  letter-spacing:0!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
}

html[data-auth-ready="app"] #app-content :is([class*="kpi-card"],[class*="metric-card"],.kpi-card,.bimas-kpi,.ops-kpi,.dash-kpi,.ceo-kpi,.reports-hub-kpi,.reports-report-kpi,.sales-perf-kpi,.prod-dash-kpi) :is([class*="kpi-value"],[class*="metric-value"],.kpi-value,.value,strong){
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  font-family:var(--font-display)!important;
  font-size:1.05rem!important;
  font-weight:950!important;
  line-height:1.08!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
}

html[data-auth-ready="app"] #app-content :is([class*="kpi-card"],[class*="metric-card"],.kpi-card,.bimas-kpi,.ops-kpi,.dash-kpi,.ceo-kpi,.reports-hub-kpi,.reports-report-kpi,.sales-perf-kpi,.prod-dash-kpi) :is([class*="kpi-sub"],[class*="metric-sub"],.kpi-sub,.sub,em){
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  color:#000!important;
  font-size:.54rem!important;
  font-style:normal!important;
  font-weight:900!important;
  line-height:1.12!important;
  letter-spacing:0!important;
  opacity:.8!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] #app-content :is([class*="kpi-grid"],[class*="kpis"],[class*="metric-grid"]){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:640px){
  html[data-auth-ready="app"] #app-content :is([class*="kpi-grid"],[class*="kpis"],[class*="metric-grid"]){
    grid-template-columns:1fr!important;
  }
}

/* FINAL ERP-wide KPI override: must remain at end of file */
html[data-auth-ready="app"] #app-content :is(
  [class*="kpi-grid"],
  [class*="kpis"],
  [class*="metric-grid"]
){
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:.78rem!important;
  align-items:stretch!important;
}

html[data-auth-ready="app"] #app-content :is(
  [class*="kpi-card"],
  [class*="metric-card"],
  .kpi-card,
  .bimas-kpi,
  .ops-kpi,
  .dash-kpi,
  .ceo-kpi,
  .reports-hub-kpi,
  .reports-report-kpi,
  .sales-perf-kpi,
  .prod-dash-kpi
){
  --erp-kpi-tone:var(--fgs-tone,var(--dn-tone,var(--drn-tone,var(--sof-tone,var(--cust-kpi-color,var(--pfi-tone,var(--inv-overview-tone,var(--wip-metric-tone,var(--accounts-tone,var(--payroll-tone,var(--production-kpi-color,var(--kpi,var(--tone,var(--notif-tone,var(--products-kpi-color,var(--reports-tone,var(--sales-tone,var(--invoice-tone,var(--kpi-icon-color,#174f91)))))))))))))))))));
  position:relative!important;
  min-width:0!important;
  min-height:88px!important;
  display:grid!important;
  grid-template-columns:2.35rem minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;
  align-content:center!important;
  align-items:center!important;
  gap:.08rem .66rem!important;
  padding:.64rem .72rem!important;
  border:1px solid #dbe6f2!important;
  border-top:3px solid var(--erp-kpi-tone)!important;
  border-left:1px solid #dbe6f2!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 8px 18px rgba(15,23,42,.055)!important;
  transform:none!important;
}

html[data-auth-ready="app"] #app-content :is(
  [class*="kpi-card"],
  [class*="metric-card"],
  .kpi-card,
  .bimas-kpi,
  .ops-kpi,
  .dash-kpi,
  .ceo-kpi,
  .reports-hub-kpi,
  .reports-report-kpi,
  .sales-perf-kpi,
  .prod-dash-kpi
)::before{
  display:none!important;
  width:0!important;
  height:0!important;
}

html[data-auth-ready="app"] #app-content :is(
  [class*="kpi-card"],
  [class*="metric-card"],
  .kpi-card,
  .bimas-kpi,
  .ops-kpi,
  .dash-kpi,
  .ceo-kpi,
  .reports-hub-kpi,
  .reports-report-kpi,
  .sales-perf-kpi,
  .prod-dash-kpi
)::after{
  content:""!important;
  position:absolute!important;
  top:-1.95rem!important;
  right:-1.35rem!important;
  width:5rem!important;
  height:5rem!important;
  border-radius:999px!important;
  background:var(--erp-kpi-tone)!important;
  opacity:.08!important;
  pointer-events:none!important;
  transform:none!important;
}

html[data-auth-ready="app"] #app-content :is(
  [class*="kpi-icon"],
  [class*="metric-icon"],
  .kicon,
  .reports-hub-kpi-icon,
  .reports-report-kpi-icon,
  .sales-perf-kpi-icon,
  .prod-dash-kpi-icon,
  .bimas-kpi-icon
){
  grid-column:1!important;
  grid-row:1 / span 3!important;
  width:2.35rem!important;
  height:2.35rem!important;
  min-width:2.35rem!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border-radius:7px!important;
  background:var(--erp-kpi-tone)!important;
  color:#fff!important;
  font-style:normal!important;
  font-size:1.08rem!important;
  line-height:1!important;
  box-shadow:0 9px 16px color-mix(in srgb,var(--erp-kpi-tone) 24%,transparent)!important;
  z-index:1!important;
}

html[data-auth-ready="app"] #app-content :is(
  [class*="kpi-icon"],
  [class*="metric-icon"],
  .kicon,
  .reports-hub-kpi-icon,
  .reports-report-kpi-icon,
  .sales-perf-kpi-icon,
  .prod-dash-kpi-icon,
  .bimas-kpi-icon
) .material-symbols-outlined,
html[data-auth-ready="app"] #app-content :is([class*="kpi-icon"],[class*="metric-icon"],.kicon).material-symbols-outlined{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:1.08rem!important;
  line-height:1!important;
}

html[data-auth-ready="app"] #app-content :is(
  [class*="kpi-copy"],
  [class*="metric-copy"],
  [class*="kpi-main"],
  [class*="kpi-body"]
){
  grid-column:2!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:.12rem!important;
  z-index:1!important;
}

html[data-auth-ready="app"] #app-content .ops-kpi .icon,
html[data-auth-ready="app"] #app-content :is(
  [class*="kpi-card"],
  [class*="metric-card"],
  .kpi-card,
  .bimas-kpi,
  .dash-kpi,
  .ceo-kpi,
  .reports-hub-kpi,
  .reports-report-kpi,
  .sales-perf-kpi,
  .prod-dash-kpi
) :is(
  [class*="kpi-label"],
  [class*="metric-label"],
  .kpi-label,
  .label
){
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  font-size:.58rem!important;
  font-weight:950!important;
  line-height:1.12!important;
  letter-spacing:0!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
}

html[data-auth-ready="app"] #app-content :is(
  [class*="kpi-card"],
  [class*="metric-card"],
  .kpi-card,
  .bimas-kpi,
  .ops-kpi,
  .dash-kpi,
  .ceo-kpi,
  .reports-hub-kpi,
  .reports-report-kpi,
  .sales-perf-kpi,
  .prod-dash-kpi
) :is(
  [class*="kpi-value"],
  [class*="metric-value"],
  .kpi-value,
  .value
){
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  font-family:var(--font-display)!important;
  font-size:1.05rem!important;
  font-weight:950!important;
  line-height:1.08!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
}

html[data-auth-ready="app"] #app-content :is(
  [class*="kpi-card"],
  [class*="metric-card"],
  .kpi-card,
  .bimas-kpi,
  .ops-kpi,
  .dash-kpi,
  .ceo-kpi,
  .reports-hub-kpi,
  .reports-report-kpi,
  .sales-perf-kpi,
  .prod-dash-kpi
) :is(
  [class*="kpi-sub"],
  [class*="metric-sub"],
  .kpi-sub,
  .sub
){
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  color:#000!important;
  font-size:.54rem!important;
  font-style:normal!important;
  font-weight:900!important;
  line-height:1.12!important;
  letter-spacing:0!important;
  opacity:.8!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] #app-content :is(
    [class*="kpi-grid"],
    [class*="kpis"],
    [class*="metric-grid"]
  ){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:640px){
  html[data-auth-ready="app"] #app-content :is(
    [class*="kpi-grid"],
    [class*="kpis"],
    [class*="metric-grid"]
  ){
    grid-template-columns:1fr!important;
  }
}

/* Customer KPI global-style polish */
html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:.78rem!important;
  margin:0 0 1.35rem!important;
  align-items:stretch!important;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-card{
  position:relative!important;
  min-width:0!important;
  min-height:92px!important;
  display:grid!important;
  grid-template-columns:2.45rem minmax(0,1fr)!important;
  gap:.72rem!important;
  align-items:center!important;
  padding:.72rem .78rem!important;
  border:1px solid #dbe6f2!important;
  border-top:3px solid var(--cust-kpi-color,#174f91)!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 8px 20px rgba(15,23,42,.055)!important;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-card::after{
  content:""!important;
  position:absolute!important;
  top:-2rem!important;
  right:-1.35rem!important;
  width:5rem!important;
  height:5rem!important;
  border-radius:999px!important;
  background:var(--cust-kpi-color,#174f91)!important;
  opacity:.08!important;
  pointer-events:none!important;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-card > .material-symbols-outlined{
  width:2.45rem!important;
  height:2.45rem!important;
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
  background:var(--cust-kpi-color,#174f91)!important;
  color:#fff!important;
  font-size:1.12rem!important;
  line-height:1!important;
  box-shadow:0 9px 16px color-mix(in srgb,var(--cust-kpi-color,#174f91) 24%,transparent)!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-card > div{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:.16rem!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-card small,
html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-card strong,
html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-card em{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-card small{
  font-size:.6rem!important;
  font-weight:950!important;
  line-height:1.12!important;
  text-transform:uppercase!important;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-card strong{
  font-family:var(--font-display)!important;
  font-size:1.12rem!important;
  font-weight:950!important;
  line-height:1.08!important;
}

html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-card em{
  font-style:normal!important;
  font-size:.55rem!important;
  font-weight:900!important;
  line-height:1.12!important;
  opacity:.8!important;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:640px){
  html[data-auth-ready="app"] body[data-route="customers"] #app-content .cust-kpi-grid{
    grid-template-columns:1fr!important;
  }
}

/* Remaining modules: global KPI style normalization */
html[data-auth-ready="app"] #app-content :is(
  .accounts-kpi-grid,
  .analytics-kpi-grid,
  .payroll-kpi-grid,
  .production-kpi-grid,
  .prod-dash-kpis,
  .ops-kpis,
  .notifications-kpi-grid,
  .products-kpi-grid,
  .reports-hub-kpis,
  .reports-report-kpis,
  .sales-perf-kpis,
  .invoice-kpi-grid,
  .inv-kpi-grid
){
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:.78rem!important;
  align-items:stretch!important;
  margin:0 0 1.35rem!important;
}

html[data-auth-ready="app"] #app-content :is(
  .kpi-card,
  .accounts-kpi-card,
  .payroll-kpi-card,
  .production-kpi-card,
  .prod-dash-kpi,
  .ops-kpi,
  .notifications-kpi-card,
  .products-kpi-card,
  .reports-hub-kpi,
  .reports-report-kpi,
  .sales-perf-kpi,
  .invoice-kpi-card
){
  --global-kpi-tone:var(--accounts-tone,var(--payroll-tone,var(--production-kpi-color,var(--kpi,var(--tone,var(--notif-tone,var(--products-kpi-color,var(--reports-tone,var(--sales-tone,var(--invoice-tone,var(--kpi-icon-color,var(--kpi-bar,#174f91))))))))))));
  position:relative!important;
  min-width:0!important;
  min-height:92px!important;
  display:grid!important;
  grid-template-columns:2.45rem minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;
  align-content:center!important;
  align-items:center!important;
  column-gap:.72rem!important;
  row-gap:.08rem!important;
  padding:.72rem .78rem!important;
  border:1px solid #dbe6f2!important;
  border-top:3px solid var(--global-kpi-tone)!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 8px 20px rgba(15,23,42,.055)!important;
  transform:none!important;
}

html[data-auth-ready="app"] #app-content :is(
  .kpi-card,
  .accounts-kpi-card,
  .payroll-kpi-card,
  .production-kpi-card,
  .prod-dash-kpi,
  .ops-kpi,
  .notifications-kpi-card,
  .products-kpi-card,
  .reports-hub-kpi,
  .reports-report-kpi,
  .sales-perf-kpi,
  .invoice-kpi-card
)::before{
  display:none!important;
}

html[data-auth-ready="app"] #app-content :is(
  .kpi-card,
  .accounts-kpi-card,
  .payroll-kpi-card,
  .production-kpi-card,
  .prod-dash-kpi,
  .ops-kpi,
  .notifications-kpi-card,
  .products-kpi-card,
  .reports-hub-kpi,
  .reports-report-kpi,
  .sales-perf-kpi,
  .invoice-kpi-card
)::after{
  content:""!important;
  position:absolute!important;
  top:-2rem!important;
  right:-1.35rem!important;
  width:5rem!important;
  height:5rem!important;
  border-radius:999px!important;
  background:var(--global-kpi-tone)!important;
  opacity:.08!important;
  pointer-events:none!important;
  transform:none!important;
}

html[data-auth-ready="app"] #app-content :is(
  .kpi-icon,
  .accounts-kpi-icon,
  .payroll-kpi-icon,
  .production-kpi-icon,
  .prod-dash-kpi-icon,
  .ops-kpi .icon,
  .notifications-kpi-icon,
  .products-kpi-card > .material-symbols-outlined,
  .reports-hub-kpi-icon,
  .reports-report-kpi-icon,
  .sales-perf-kpi-icon,
  .invoice-kpi-card .inv-kpi-icon
){
  grid-column:1!important;
  grid-row:1 / span 3!important;
  width:2.45rem!important;
  height:2.45rem!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  border-radius:7px!important;
  background:var(--global-kpi-tone)!important;
  color:#fff!important;
  box-shadow:0 9px 16px color-mix(in srgb,var(--global-kpi-tone) 24%,transparent)!important;
  z-index:1!important;
}

html[data-auth-ready="app"] #app-content :is(
  .kpi-icon,
  .accounts-kpi-icon,
  .payroll-kpi-icon,
  .production-kpi-icon,
  .prod-dash-kpi-icon,
  .ops-kpi .icon,
  .notifications-kpi-icon,
  .products-kpi-card > .material-symbols-outlined,
  .reports-hub-kpi-icon,
  .reports-report-kpi-icon,
  .sales-perf-kpi-icon,
  .invoice-kpi-card .inv-kpi-icon
) .material-symbols-outlined,
html[data-auth-ready="app"] #app-content :is(.notifications-kpi-icon,.products-kpi-card > .material-symbols-outlined){
  color:#fff!important;
  font-size:1.12rem!important;
  line-height:1!important;
}

html[data-auth-ready="app"] #app-content :is(
  .kpi-value,
  .accounts-kpi-value,
  .payroll-kpi-value,
  .production-kpi-value,
  .prod-dash-kpi strong,
  .ops-kpi strong,
  .notifications-kpi-value,
  .products-kpi-card strong,
  .reports-hub-kpi-value,
  .reports-report-kpi-value,
  .sales-perf-kpi-value,
  .invoice-kpi-card .inv-kpi-value
){
  grid-column:2!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  font-family:var(--font-display)!important;
  font-size:1.08rem!important;
  font-weight:950!important;
  line-height:1.08!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  z-index:1!important;
}

html[data-auth-ready="app"] #app-content :is(
  .kpi-label,
  .accounts-kpi-label,
  .payroll-kpi-label,
  .production-kpi-label,
  .prod-dash-kpi span,
  .ops-kpi > span,
  .notifications-kpi-label,
  .products-kpi-card small,
  .reports-hub-kpi-label,
  .reports-report-kpi-label,
  .sales-perf-kpi-label,
  .invoice-kpi-card .inv-kpi-label
){
  grid-column:2!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  font-size:.6rem!important;
  font-weight:950!important;
  line-height:1.12!important;
  letter-spacing:0!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  z-index:1!important;
}

html[data-auth-ready="app"] #app-content :is(
  .kpi-sub,
  .accounts-kpi-sub,
  .payroll-kpi-sub,
  .production-kpi-sub,
  .prod-dash-kpi small,
  .ops-kpi small,
  .notifications-kpi-sub,
  .products-kpi-card em,
  .reports-hub-kpi-sub,
  .reports-report-kpi-sub,
  .sales-perf-kpi-sub,
  .invoice-kpi-card .inv-kpi-sub
){
  grid-column:2!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  color:#000!important;
  font-size:.55rem!important;
  font-style:normal!important;
  font-weight:900!important;
  line-height:1.12!important;
  letter-spacing:0!important;
  opacity:.8!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  z-index:1!important;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] #app-content :is(
    .accounts-kpi-grid,
    .analytics-kpi-grid,
    .payroll-kpi-grid,
    .production-kpi-grid,
    .prod-dash-kpis,
    .ops-kpis,
    .notifications-kpi-grid,
    .products-kpi-grid,
    .reports-hub-kpis,
    .reports-report-kpis,
    .sales-perf-kpis,
    .invoice-kpi-grid,
    .inv-kpi-grid
  ){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:640px){
  html[data-auth-ready="app"] #app-content :is(
    .accounts-kpi-grid,
    .analytics-kpi-grid,
    .payroll-kpi-grid,
    .production-kpi-grid,
    .prod-dash-kpis,
    .ops-kpis,
    .notifications-kpi-grid,
    .products-kpi-grid,
    .reports-hub-kpis,
    .reports-report-kpis,
    .sales-perf-kpis,
    .invoice-kpi-grid,
    .inv-kpi-grid
  ){
    grid-template-columns:1fr!important;
  }
}

/* SOF KPI global-style polish */
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:.78rem!important;
  margin:0 0 1.15rem!important;
  align-items:stretch!important;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-kpi-card{
  position:relative!important;
  min-width:0!important;
  min-height:92px!important;
  display:grid!important;
  grid-template-columns:2.45rem minmax(0,1fr)!important;
  gap:.72rem!important;
  align-items:center!important;
  padding:.72rem .78rem!important;
  border:1px solid #dbe6f2!important;
  border-top:3px solid var(--sof-tone,#174f91)!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 8px 20px rgba(15,23,42,.055)!important;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-kpi-card::after{
  content:""!important;
  position:absolute!important;
  top:-2rem!important;
  right:-1.35rem!important;
  width:5rem!important;
  height:5rem!important;
  border-radius:999px!important;
  background:var(--sof-tone,#174f91)!important;
  opacity:.08!important;
  pointer-events:none!important;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-kpi-icon{
  width:2.45rem!important;
  height:2.45rem!important;
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
  background:var(--sof-tone,#174f91)!important;
  color:#fff!important;
  font-size:1.12rem!important;
  line-height:1!important;
  box-shadow:0 9px 16px color-mix(in srgb,var(--sof-tone,#174f91) 24%,transparent)!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-kpi-copy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:.16rem!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-kpi-label,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-kpi-value,
html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-kpi-sub{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-kpi-label{
  font-size:.6rem!important;
  font-weight:950!important;
  line-height:1.12!important;
  text-transform:uppercase!important;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-kpi-value{
  font-family:var(--font-display)!important;
  font-size:1.12rem!important;
  font-weight:950!important;
  line-height:1.08!important;
}

html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-kpi-sub{
  font-size:.55rem!important;
  font-weight:900!important;
  line-height:1.12!important;
  opacity:.8!important;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:640px){
  html[data-auth-ready="app"] body[data-route="sof"] #app-content .sof-kpi-grid{
    grid-template-columns:1fr!important;
  }
}

/* PFI KPI global-style polish */
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:.78rem!important;
  margin:0 0 1.35rem!important;
  align-items:stretch!important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card{
  --pfi-tone:#174f91;
  position:relative!important;
  min-width:0!important;
  min-height:92px!important;
  display:grid!important;
  grid-template-columns:2.4rem minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;
  align-content:center!important;
  align-items:center!important;
  column-gap:.72rem!important;
  row-gap:.08rem!important;
  padding:.68rem .78rem!important;
  border:1px solid #dbe6f2!important;
  border-top:3px solid var(--pfi-tone)!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 8px 20px rgba(15,23,42,.055)!important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card:nth-child(1){--pfi-tone:#174f91!important;}
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card:nth-child(2){--pfi-tone:#047857!important;}
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card:nth-child(3){--pfi-tone:#b45309!important;}
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card:nth-child(4){--pfi-tone:#16a34a!important;}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card::after{
  content:""!important;
  position:absolute!important;
  top:-1.95rem!important;
  right:-1.35rem!important;
  width:5rem!important;
  height:5rem!important;
  border-radius:999px!important;
  background:var(--pfi-tone)!important;
  opacity:.08!important;
  pointer-events:none!important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:first-child{
  display:contents!important;
  margin:0!important;
  padding:0!important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:first-child > .material-symbols-outlined{
  grid-column:1!important;
  grid-row:1 / span 3!important;
  width:2.4rem!important;
  height:2.4rem!important;
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
  background:var(--pfi-tone)!important;
  color:#fff!important;
  font-size:1.12rem!important;
  line-height:1!important;
  opacity:1!important;
  box-shadow:0 9px 16px color-mix(in srgb,var(--pfi-tone) 24%,transparent)!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:first-child > span:not(.material-symbols-outlined){
  position:absolute!important;
  top:.52rem!important;
  right:.58rem!important;
  z-index:2!important;
  max-width:4.2rem!important;
  padding:.12rem .38rem!important;
  border-radius:999px!important;
  background:#f6f8fb!important;
  color:#000!important;
  font-size:.52rem!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:nth-child(2),
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:nth-child(3),
html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:nth-child(4) > div{
  grid-column:2!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  color:#000!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:nth-child(2){
  font-family:var(--font-display)!important;
  font-size:1.06rem!important;
  font-weight:950!important;
  line-height:1.08!important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:nth-child(3){
  font-size:.6rem!important;
  font-weight:950!important;
  line-height:1.12!important;
  text-transform:uppercase!important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:nth-child(4){
  display:contents!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}

html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-metric-card > div:nth-child(4) > div{
  font-size:.55rem!important;
  font-weight:900!important;
  line-height:1.12!important;
  opacity:.8!important;
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:640px){
  html[data-auth-ready="app"] body[data-route="pfi"] #app-content .pfi-kpi-grid{
    grid-template-columns:1fr!important;
  }
}

/* Executive dashboard: CEO / Operations / Admin world-class polish */
#app-content .ceo-shell{
  isolation:isolate!important;
  gap:.9rem!important;
  margin:-1rem!important;
  padding:1rem!important;
  min-height:calc(100vh - var(--topbar-h))!important;
  background:
    linear-gradient(135deg,rgba(248,250,252,.98),rgba(241,245,249,.96) 42%,rgba(236,253,245,.68)),
    repeating-linear-gradient(135deg,rgba(15,23,42,.03) 0 1px,transparent 1px 16px)!important;
  color:#000!important;
  font-family:var(--font-body,Inter,Arial,sans-serif)!important;
}

#app-content .ceo-hero{
  position:relative!important;
  min-height:9.2rem!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(24rem,.42fr)!important;
  align-items:stretch!important;
  gap:1rem!important;
  padding:1.15rem!important;
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:8px!important;
  background:
    linear-gradient(135deg,#061636 0%,#0a3a78 46%,#066456 100%)!important;
  box-shadow:0 18px 40px rgba(7,27,70,.22)!important;
  overflow:hidden!important;
}

#app-content .ceo-hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 100%),
    linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 100%)!important;
  background-size:42px 42px!important;
  opacity:.42!important;
  pointer-events:none!important;
}

#app-content .ceo-hero::after{
  content:""!important;
  position:absolute!important;
  inset:auto 0 0!important;
  height:4px!important;
  background:linear-gradient(90deg,#f59e0b,#22c55e,#38bdf8,#2563eb)!important;
}

#app-content .ceo-hero > *{
  position:relative!important;
  z-index:1!important;
}

#app-content .ceo-eyebrow{
  display:inline-flex!important;
  align-items:center!important;
  gap:.38rem!important;
  color:#dff7ff!important;
  font-size:.68rem!important;
  font-weight:950!important;
  line-height:1.1!important;
  letter-spacing:0!important;
  text-transform:uppercase!important;
}

#app-content .ceo-title{
  max-width:46rem!important;
  margin:.42rem 0 0!important;
  color:#fff!important;
  font-family:var(--font-display,"Plus Jakarta Sans",Inter,sans-serif)!important;
  font-size:2.05rem!important;
  font-weight:950!important;
  line-height:1.05!important;
  letter-spacing:0!important;
  text-shadow:0 2px 16px rgba(0,0,0,.28)!important;
}

#app-content .ceo-subline{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:.5rem!important;
  margin-top:.8rem!important;
}

#app-content .ceo-role-chip{
  min-height:1.9rem!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:.35rem!important;
  padding:.28rem .68rem!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.13)!important;
  color:#fff!important;
  font-size:.7rem!important;
  font-weight:900!important;
  line-height:1!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16)!important;
}

#app-content .ceo-brief{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:.65rem!important;
}

#app-content .ceo-brief-card{
  min-height:5.45rem!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  border:1px solid rgba(255,255,255,.25)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.14)!important;
  padding:.75rem!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px rgba(0,0,0,.08)!important;
}

#app-content .ceo-brief-card span{
  color:#e0f2fe!important;
  font-size:.6rem!important;
  font-weight:950!important;
  line-height:1.1!important;
  letter-spacing:0!important;
  text-transform:uppercase!important;
}

#app-content .ceo-brief-card strong{
  margin:.32rem 0 0!important;
  color:#fff!important;
  font-family:var(--font-display,"Plus Jakarta Sans",Inter,sans-serif)!important;
  font-size:1.24rem!important;
  font-weight:950!important;
  line-height:1.05!important;
}

#app-content .ceo-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:.5rem!important;
  align-items:stretch!important;
}

#app-content .ceo-kpi{
  position:relative!important;
  min-width:0!important;
  min-height:72px!important;
  height:72px!important;
  display:grid!important;
  grid-template-columns:1.85rem minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;
  align-content:center!important;
  align-items:center!important;
  column-gap:.48rem!important;
  row-gap:.04rem!important;
  padding:.48rem .55rem!important;
  border:1px solid #dbe6f2!important;
  border-top:3px solid var(--tone,#0b4b8f)!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 10px 22px rgba(15,23,42,.06)!important;
}

#app-content .ceo-kpi::before{
  display:none!important;
}

#app-content .ceo-kpi::after{
  content:""!important;
  position:absolute!important;
  inset:auto 0 0!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,var(--tone,#0b4b8f),transparent)!important;
  opacity:.35!important;
}

#app-content .ceo-kpi-row{
  display:contents!important;
}

#app-content .ceo-kpi-icon{
  grid-column:1!important;
  grid-row:1 / span 3!important;
  width:1.85rem!important;
  height:1.85rem!important;
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
  background:var(--tone,#0b4b8f)!important;
  color:#fff!important;
  box-shadow:0 10px 18px color-mix(in srgb,var(--tone,#0b4b8f) 24%,transparent)!important;
}

#app-content .ceo-kpi-icon .material-symbols-outlined{
  color:#fff!important;
  font-size:.98rem!important;
  line-height:1!important;
}

#app-content .ceo-kpi-row > span{
  position:absolute!important;
  top:.52rem!important;
  right:.58rem!important;
  max-width:4rem!important;
  padding:.13rem .38rem!important;
  border-radius:999px!important;
  background:#f6f8fb!important;
  color:#000!important;
  font-size:.52rem!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#app-content .ceo-kpi > span:not(.ceo-kpi-row):not(.ceo-kpi-badge),
#app-content .ceo-kpi > strong,
#app-content .ceo-kpi > small{
  grid-column:2!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#app-content .ceo-kpi > span:not(.ceo-kpi-row):not(.ceo-kpi-badge){
  font-size:.6rem!important;
  font-weight:950!important;
  line-height:1.12!important;
  text-transform:uppercase!important;
}

#app-content .ceo-kpi > strong{
  font-family:var(--font-display,"Plus Jakarta Sans",Inter,sans-serif)!important;
  font-size:1.08rem!important;
  font-weight:950!important;
  line-height:1.08!important;
}

#app-content .ceo-kpi > small{
  font-size:.57rem!important;
  font-weight:900!important;
  line-height:1.12!important;
  opacity:.78!important;
}

#app-content .ceo-command-strip{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:.7rem!important;
}

#app-content .ceo-command,
#app-content .ceo-report,
#app-content .ceo-panel{
  border:1px solid #dbe6f2!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#000!important;
  box-shadow:0 10px 24px rgba(15,23,42,.055)!important;
}

#app-content .ceo-command{
  min-height:4.25rem!important;
  display:flex!important;
  align-items:center!important;
  gap:.62rem!important;
  padding:.65rem .7rem!important;
}

#app-content .ceo-command i,
#app-content .ceo-report i,
#app-content .ceo-decision i,
#app-content .ceo-signal i,
#app-content .ceo-activity-icon{
  width:2.25rem!important;
  height:2.25rem!important;
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
  background:var(--tone,#0b4b8f)!important;
  color:#fff!important;
  font-style:normal!important;
  box-shadow:0 9px 18px color-mix(in srgb,var(--tone,#0b4b8f) 22%,transparent)!important;
}

#app-content .ceo-command strong,
#app-content .ceo-report strong,
#app-content .ceo-decision strong,
#app-content .ceo-signal strong,
#app-content .ceo-activity strong{
  color:#000!important;
  font-size:.78rem!important;
  font-weight:950!important;
  line-height:1.16!important;
  letter-spacing:0!important;
}

#app-content .ceo-command span,
#app-content .ceo-report span,
#app-content .ceo-decision span,
#app-content .ceo-signal span,
#app-content .ceo-activity span{
  color:#334155!important;
  font-size:.64rem!important;
  font-weight:850!important;
  line-height:1.16!important;
  letter-spacing:0!important;
}

#app-content .ceo-panel{
  overflow:hidden!important;
}

#app-content .ceo-panel-head{
  min-height:3.15rem!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:.8rem!important;
  padding:.78rem .92rem!important;
  border-bottom:1px solid #e5edf6!important;
  background:linear-gradient(180deg,#fff,#f8fbff)!important;
}

#app-content .ceo-panel-head h2{
  margin:0!important;
  color:#000!important;
  font-family:var(--font-display,"Plus Jakarta Sans",Inter,sans-serif)!important;
  font-size:.96rem!important;
  font-weight:950!important;
  line-height:1.12!important;
  letter-spacing:0!important;
}

#app-content .ceo-report-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:.75rem!important;
  padding:.85rem!important;
}

#app-content .ceo-report{
  min-height:7.35rem!important;
  display:flex!important;
  flex-direction:column!important;
  gap:.38rem!important;
  padding:.78rem!important;
}

#app-content .ceo-report-footer{
  margin-top:auto!important;
  color:#000!important;
  font-size:.65rem!important;
  font-weight:950!important;
}

#app-content .ceo-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.12fr) minmax(22rem,.88fr)!important;
  gap:.9rem!important;
}

#app-content .ceo-decision-list,
#app-content .ceo-signal-list,
#app-content .ceo-activity-list{
  gap:.45rem!important;
  padding:.82rem!important;
}

#app-content .ceo-decision,
#app-content .ceo-signal,
#app-content .ceo-activity{
  border:1px solid #e2e8f0!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#000!important;
  box-shadow:0 5px 12px rgba(15,23,42,.035)!important;
}

#app-content .ceo-decision,
#app-content .ceo-signal{
  min-height:3.45rem!important;
  padding:.52rem .62rem!important;
}

#app-content .ceo-chart{
  min-height:14rem!important;
  height:auto!important;
  padding:1rem!important;
  display:grid!important;
  grid-template-columns:6.7rem minmax(0,1fr)!important;
  gap:1rem!important;
}

#app-content .ceo-ring{
  width:6.7rem!important;
  height:6.7rem!important;
  box-shadow:inset 0 0 0 1px #e2e8f0,0 10px 22px rgba(15,23,42,.06)!important;
}

#app-content .ceo-ring div{
  color:#000!important;
  font-family:var(--font-display,"Plus Jakarta Sans",Inter,sans-serif)!important;
  font-size:1.16rem!important;
  font-weight:950!important;
}

#app-content .ceo-flow-row{
  display:grid!important;
  grid-template-columns:6.2rem minmax(0,1fr) 2.2rem!important;
  gap:.58rem!important;
  align-items:center!important;
  margin:.5rem 0!important;
}

#app-content .ceo-flow-row b,
#app-content .ceo-flow-row strong{
  color:#000!important;
  font-size:.72rem!important;
  font-weight:950!important;
}

#app-content .ceo-flow-row div{
  height:.55rem!important;
  border-radius:999px!important;
  background:#e6edf6!important;
}

@media (max-width:1360px){
  #app-content .ceo-hero,
  #app-content .ceo-grid{
    grid-template-columns:1fr!important;
  }

  #app-content .ceo-command-strip{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  #app-content .ceo-report-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:820px){
  #app-content .ceo-shell{
    margin:-.75rem!important;
    padding:.75rem!important;
  }

  #app-content .ceo-title{
    font-size:1.55rem!important;
  }

  #app-content .ceo-brief{
    grid-template-columns:1fr!important;
  }

  #app-content .ceo-kpi-grid,
  #app-content .ceo-command-strip,
  #app-content .ceo-report-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  #app-content .ceo-chart{
    grid-template-columns:1fr!important;
  }
}

@media (max-width:560px){
  #app-content .ceo-kpi-grid,
  #app-content .ceo-command-strip,
  #app-content .ceo-report-grid{
    grid-template-columns:1fr!important;
  }
}

/* Dashboard premium executive polish */
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-shell,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell{
  gap:.88rem!important;
  margin:-1rem!important;
  padding:1rem!important;
  min-height:calc(100vh - var(--topbar-h))!important;
  background:
    linear-gradient(135deg,rgba(241,245,249,.92),rgba(248,250,252,.98) 45%,rgba(236,253,245,.72))!important;
  color:#000!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-hero,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-hero{
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:8px!important;
  background:linear-gradient(135deg,#071b46 0%,#0b4b8f 48%,#047857 100%)!important;
  color:#fff!important;
  box-shadow:0 18px 36px rgba(7,27,70,.18)!important;
  overflow:hidden!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-hero{
  padding:1.05rem 1.15rem!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-hero{
  padding:1rem!important;
  grid-template-columns:minmax(0,1fr) minmax(22rem,.42fr)!important;
  gap:.82rem!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-hero h1,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-title{
  margin:0!important;
  color:#fff!important;
  font-family:var(--font-display)!important;
  font-size:1.48rem!important;
  font-weight:950!important;
  line-height:1.08!important;
  letter-spacing:0!important;
  text-shadow:0 2px 14px rgba(0,0,0,.24)!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-hero .sub,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-eyebrow,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-role-chip{
  color:#f8fafc!important;
  font-weight:900!important;
  letter-spacing:0!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:.72rem!important;
  align-items:stretch!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:.5rem!important;
  align-items:stretch!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-card2,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-panel{
  border:1px solid #dbe6f2!important;
  border-radius:8px!important;
  background:#fff!important;
  box-shadow:0 10px 24px rgba(15,23,42,.055)!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-kpi,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-kpi{
  position:relative!important;
  min-width:0!important;
  min-height:72px!important;
  height:72px!important;
  display:grid!important;
  grid-template-columns:1.85rem minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;
  column-gap:.48rem!important;
  row-gap:.04rem!important;
  align-content:center!important;
  align-items:center!important;
  padding:.48rem .55rem!important;
  border:1px solid #dbe6f2!important;
  border-top:3px solid var(--tone,#0b4b8f)!important;
  border-radius:8px!important;
  background:
    linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 8px 20px rgba(15,23,42,.06)!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-kpi::before,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-kpi::before{
  display:none!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-kpi .kicon,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-kpi-icon{
  grid-column:1!important;
  grid-row:1 / span 3!important;
  width:1.85rem!important;
  height:1.85rem!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid color-mix(in srgb,var(--tone,#0b4b8f) 72%,#fff)!important;
  border-radius:7px!important;
  background:var(--tone,#0b4b8f)!important;
  color:#fff!important;
  box-shadow:0 9px 18px color-mix(in srgb,var(--tone,#0b4b8f) 22%,transparent)!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-kpi .kicon,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-kpi .kicon.material-symbols-outlined,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-kpi-icon .material-symbols-outlined{
  font-size:.98rem!important;
  line-height:1!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-kpi-row{
  display:contents!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-kpi-row > span{
  position:absolute!important;
  top:.52rem!important;
  right:.58rem!important;
  max-width:3.7rem!important;
  border-radius:999px!important;
  background:#f6f8fb!important;
  padding:.13rem .36rem!important;
  color:#000!important;
  font-size:.54rem!important;
  font-weight:950!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-kpi .label,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-kpi > span:not(.ceo-kpi-row):not(.ceo-kpi-badge){
  grid-column:2!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  font-size:.59rem!important;
  font-weight:950!important;
  line-height:1.12!important;
  letter-spacing:0!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-kpi .value,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-kpi > strong{
  grid-column:2!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  font-family:var(--font-display)!important;
  font-size:1.02rem!important;
  font-weight:950!important;
  line-height:1.08!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-kpi .sub,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-kpi > small{
  grid-column:2!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  font-size:.56rem!important;
  font-weight:850!important;
  line-height:1.12!important;
  letter-spacing:0!important;
  opacity:.78!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-spark{
  position:absolute!important;
  right:.42rem!important;
  bottom:.28rem!important;
  width:4.3rem!important;
  height:2.1rem!important;
  opacity:.28!important;
  pointer-events:none!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-meter,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-meter{
  grid-column:2!important;
  height:.32rem!important;
  margin:.12rem 0 0!important;
  border-radius:999px!important;
  background:#e9eef6!important;
  overflow:hidden!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-meter span,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-meter i{
  display:block!important;
  height:100%!important;
  border-radius:999px!important;
  background:var(--tone,#0b4b8f)!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-brief{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:.55rem!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-brief-card{
  min-height:4.8rem!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.14)!important;
  padding:.68rem!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-brief-card span,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-brief-card strong{
  color:#fff!important;
  font-weight:950!important;
  letter-spacing:0!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-command-strip,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:.66rem!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  padding:.8rem!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-command,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-shortcut,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-dept{
  min-width:0!important;
  border:1px solid #dbe6f2!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#000!important;
  box-shadow:0 8px 18px rgba(15,23,42,.045)!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-command strong,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-command span,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report strong,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report span,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-shortcut span,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-dept strong,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-dept span{
  color:#000!important;
  letter-spacing:0!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-grid,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-main-grid,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-two{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(22rem,.85fr)!important;
  gap:.88rem!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-panel-head,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-section-head{
  padding:.78rem .9rem!important;
  border-bottom:1px solid #e5edf6!important;
  background:linear-gradient(180deg,#fff,#f8fbff)!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-panel-head h2,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-section-head h2{
  margin:0!important;
  color:#000!important;
  font-family:var(--font-display)!important;
  font-size:.94rem!important;
  font-weight:950!important;
  line-height:1.14!important;
  letter-spacing:0!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-decision,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-signal,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-activity,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-work-item{
  border-radius:8px!important;
  border:1px solid #e2e8f0!important;
  background:#fff!important;
  color:#000!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-decision strong,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-signal strong,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-activity strong,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-work-item strong{
  color:#000!important;
  font-weight:950!important;
  letter-spacing:0!important;
}

@media (max-width:1360px){
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-command-strip{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:1180px){
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-main-grid,
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-two,
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-grid,
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-hero{
    grid-template-columns:1fr!important;
  }
}

@media (max-width:820px){
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-shell,
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell{
    margin:-.75rem!important;
    padding:.75rem!important;
  }

  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-kpi-grid,
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-command-strip,
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:640px){
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-grid,
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-kpi-grid,
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-command-strip,
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report-grid,
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-brief{
    grid-template-columns:1fr!important;
  }

  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .dash-hero-row{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:.7rem!important;
  }
}

/* Dashboard direct premium KPI classes: resilient against legacy generic rules */
#app-content .dash-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:.72rem!important;
}

#app-content .ceo-kpi-grid{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:.5rem!important;
}

#app-content .dash-premium-kpi,
#app-content .ceo-premium-kpi{
  position:relative!important;
  min-width:0!important;
  min-height:72px!important;
  height:72px!important;
  display:grid!important;
  grid-template-columns:1.85rem minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;
  align-content:center!important;
  align-items:center!important;
  column-gap:.48rem!important;
  row-gap:.04rem!important;
  padding:.48rem .55rem!important;
  border:1px solid #dbe6f2!important;
  border-top:3px solid var(--tone,#0b4b8f)!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 8px 18px rgba(15,23,42,.055)!important;
  transform:none!important;
}

#app-content .dash-premium-kpi::before,
#app-content .ceo-premium-kpi::before{
  display:none!important;
}

#app-content .dash-premium-kpi::after,
#app-content .ceo-premium-kpi::after{
  content:""!important;
  position:absolute!important;
  top:-1.85rem!important;
  right:-1.35rem!important;
  width:4.8rem!important;
  height:4.8rem!important;
  border-radius:999px!important;
  background:var(--tone,#0b4b8f)!important;
  opacity:.07!important;
  pointer-events:none!important;
}

#app-content .dash-premium-kpi-icon,
#app-content .ceo-premium-kpi-icon{
  grid-column:1!important;
  grid-row:1 / span 3!important;
  width:1.85rem!important;
  height:1.85rem!important;
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
  border:1px solid color-mix(in srgb,var(--tone,#0b4b8f) 72%,#fff)!important;
  background:var(--tone,#0b4b8f)!important;
  color:#fff!important;
  font-size:1.16rem!important;
  line-height:1!important;
  box-shadow:0 9px 16px color-mix(in srgb,var(--tone,#0b4b8f) 22%,transparent)!important;
  z-index:1!important;
}

#app-content .ceo-premium-kpi .ceo-kpi-row{
  display:contents!important;
}

#app-content .ceo-premium-kpi-badge{
  position:absolute!important;
  top:.48rem!important;
  right:.54rem!important;
  max-width:3.6rem!important;
  padding:.12rem .34rem!important;
  border-radius:999px!important;
  background:#f6f8fb!important;
  color:#000!important;
  font-size:.52rem!important;
  font-weight:950!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  z-index:2!important;
}

#app-content .dash-premium-kpi-label,
#app-content .dash-premium-kpi-value,
#app-content .dash-premium-kpi-sub,
#app-content .ceo-premium-kpi-label,
#app-content .ceo-premium-kpi-value,
#app-content .ceo-premium-kpi-sub{
  grid-column:2!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  letter-spacing:0!important;
  text-shadow:none!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  z-index:1!important;
}

#app-content .dash-premium-kpi-label,
#app-content .ceo-premium-kpi-label{
  font-size:.58rem!important;
  font-weight:950!important;
  line-height:1.12!important;
  text-transform:uppercase!important;
}

#app-content .dash-premium-kpi-value,
#app-content .ceo-premium-kpi-value{
  font-family:var(--font-display)!important;
  font-size:1.04rem!important;
  font-weight:950!important;
  line-height:1.06!important;
}

#app-content .dash-premium-kpi-sub,
#app-content .ceo-premium-kpi-sub{
  font-size:.55rem!important;
  font-weight:900!important;
  line-height:1.12!important;
  opacity:.8!important;
}

#app-content .dash-premium-kpi .dash-spark{
  position:absolute!important;
  right:.42rem!important;
  bottom:.28rem!important;
  width:4rem!important;
  height:2rem!important;
  opacity:.24!important;
}

#app-content .dash-premium-kpi .dash-meter,
#app-content .ceo-premium-kpi .ceo-meter{
  grid-column:2!important;
  height:.3rem!important;
  margin:.1rem 0 0!important;
}

@media (max-width:1360px){
  #app-content .ceo-command-strip{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}

@media (max-width:1180px){
  #app-content .dash-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:720px){
  #app-content .dash-grid,
  #app-content .ceo-kpi-grid{
    grid-template-columns:1fr!important;
  }
}

/* Dashboard shell-scoped fallback polish: no JS markup dependency */
#app-content .dash-shell .dash-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:.72rem!important;
  align-items:stretch!important;
}

#app-content .ceo-shell .ceo-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:.5rem!important;
  align-items:stretch!important;
}

#app-content .dash-shell .dash-kpi,
#app-content .ceo-shell .ceo-kpi{
  position:relative!important;
  min-width:0!important;
  min-height:72px!important;
  height:72px!important;
  display:grid!important;
  grid-template-columns:1.85rem minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;
  align-content:center!important;
  align-items:center!important;
  column-gap:.48rem!important;
  row-gap:.04rem!important;
  padding:.48rem .55rem!important;
  border:1px solid #dbe6f2!important;
  border-top:3px solid var(--tone,#0b4b8f)!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 8px 18px rgba(15,23,42,.055)!important;
}

#app-content .dash-shell .dash-kpi::before,
#app-content .ceo-shell .ceo-kpi::before{
  display:none!important;
}

#app-content .dash-shell .dash-kpi::after,
#app-content .ceo-shell .ceo-kpi::after{
  content:""!important;
  position:absolute!important;
  top:-1.85rem!important;
  right:-1.35rem!important;
  width:4.8rem!important;
  height:4.8rem!important;
  border-radius:999px!important;
  background:var(--tone,#0b4b8f)!important;
  opacity:.07!important;
  pointer-events:none!important;
}

#app-content .dash-shell .dash-kpi .kicon,
#app-content .ceo-shell .ceo-kpi-icon{
  grid-column:1!important;
  grid-row:1 / span 3!important;
  width:1.85rem!important;
  height:1.85rem!important;
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
  background:var(--tone,#0b4b8f)!important;
  color:#fff!important;
  font-size:.98rem!important;
  line-height:1!important;
  box-shadow:0 9px 16px color-mix(in srgb,var(--tone,#0b4b8f) 22%,transparent)!important;
  z-index:1!important;
}

#app-content .ceo-shell .ceo-kpi-row{
  display:contents!important;
}

#app-content .ceo-shell .ceo-kpi-row > span{
  position:absolute!important;
  top:.48rem!important;
  right:.54rem!important;
  max-width:3.6rem!important;
  padding:.12rem .34rem!important;
  border-radius:999px!important;
  background:#f6f8fb!important;
  color:#000!important;
  font-size:.52rem!important;
  font-weight:950!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  z-index:2!important;
}

#app-content .dash-shell .dash-kpi .label,
#app-content .ceo-shell .ceo-kpi > span:not(.ceo-kpi-row):not(.ceo-kpi-badge),
#app-content .dash-shell .dash-kpi .value,
#app-content .ceo-shell .ceo-kpi > strong,
#app-content .dash-shell .dash-kpi .sub,
#app-content .ceo-shell .ceo-kpi > small{
  grid-column:2!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  letter-spacing:0!important;
  text-shadow:none!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  z-index:1!important;
}

#app-content .dash-shell .dash-kpi .label,
#app-content .ceo-shell .ceo-kpi > span:not(.ceo-kpi-row):not(.ceo-kpi-badge){
  font-size:.58rem!important;
  font-weight:950!important;
  line-height:1.12!important;
  text-transform:uppercase!important;
}

#app-content .dash-shell .dash-kpi .value,
#app-content .ceo-shell .ceo-kpi > strong{
  font-family:var(--font-display)!important;
  font-size:1.04rem!important;
  font-weight:950!important;
  line-height:1.06!important;
}

#app-content .dash-shell .dash-kpi .sub,
#app-content .ceo-shell .ceo-kpi > small{
  font-size:.55rem!important;
  font-weight:900!important;
  line-height:1.12!important;
  opacity:.8!important;
}

@media (max-width:1360px){
  #app-content .ceo-shell .ceo-command-strip{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}

@media (max-width:1180px){
  #app-content .dash-shell .dash-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:720px){
  #app-content .dash-shell .dash-grid,
  #app-content .ceo-shell .ceo-kpi-grid{
    grid-template-columns:1fr!important;
  }
}

/* Dashboard recent activity compact desktop rows */
#app-content .dash-shell .dash-row{
  min-height:42px!important;
  display:grid!important;
  grid-template-columns:2rem minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:.55rem!important;
  padding:.38rem .58rem!important;
  border-radius:8px!important;
  border:1px solid #e2e8f0!important;
  background:#fff!important;
  box-shadow:0 4px 10px rgba(15,23,42,.035)!important;
}

#app-content .dash-shell .dash-activity-icon{
  width:2rem!important;
  height:2rem!important;
  min-width:2rem!important;
  border-radius:7px!important;
}

#app-content .dash-shell .dash-row > span:not(.dash-activity-icon){
  min-width:0!important;
  margin:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#app-content .ceo-shell .ceo-activity-list{
  gap:.38rem!important;
  padding:.75rem!important;
}

#app-content .ceo-shell .ceo-activity{
  min-height:42px!important;
  display:grid!important;
  grid-template-columns:2rem minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:.55rem!important;
  padding:.38rem .58rem!important;
  border-left:3px solid var(--tone,#0b4b8f)!important;
  border-radius:8px!important;
  box-shadow:0 4px 10px rgba(15,23,42,.035)!important;
}

#app-content .ceo-shell .ceo-activity-icon{
  width:2rem!important;
  height:2rem!important;
  min-width:2rem!important;
  border-radius:7px!important;
}

#app-content .ceo-shell .ceo-activity > span:nth-child(2){
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr)!important;
  align-items:center!important;
  gap:.5rem!important;
}

#app-content .ceo-shell .ceo-activity > span:nth-child(2) > strong,
#app-content .ceo-shell .ceo-activity > span:nth-child(2) > span{
  min-width:0!important;
  margin:0!important;
  display:block!important;
  color:#000!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#app-content .ceo-shell .ceo-activity-meta{
  display:none!important;
}

#app-content .ceo-shell .ceo-activity > small{
  margin:0!important;
  color:#000!important;
  font-size:.62rem!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

@media (max-width:760px){
  #app-content .ceo-shell .ceo-activity > span:nth-child(2){
    grid-template-columns:1fr!important;
    gap:.12rem!important;
  }

  #app-content .ceo-shell .ceo-activity{
    min-height:54px!important;
  }
}

/* Inventory WIP KPI global-style polish */
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:.72rem!important;
  align-items:stretch!important;
  margin:0!important;
}

html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-metric-card{
  --wip-metric-tone:#174f91;
  position:relative!important;
  min-width:0!important;
  min-height:96px!important;
  display:grid!important;
  grid-template-columns:2.45rem minmax(0,1fr)!important;
  gap:.72rem!important;
  align-items:center!important;
  padding:.82rem .78rem!important;
  border:1px solid #dbe6f2!important;
  border-radius:8px!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--wip-metric-tone) 7%,#fff),#fff 48%)!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 9px 24px rgba(15,23,42,.06)!important;
}

html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-metric-card::before{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto!important;
  height:3px!important;
  background:var(--wip-metric-tone)!important;
}

html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-metric-card::after{
  content:""!important;
  position:absolute!important;
  top:-2.15rem!important;
  right:-1.35rem!important;
  width:5.5rem!important;
  height:5.5rem!important;
  border-radius:999px!important;
  background:var(--wip-metric-tone)!important;
  opacity:.08!important;
  pointer-events:none!important;
}

html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-metric-icon{
  width:2.45rem!important;
  height:2.45rem!important;
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
  background:var(--wip-metric-tone)!important;
  color:#fff!important;
  font-size:1.12rem!important;
  line-height:1!important;
  box-shadow:0 9px 16px color-mix(in srgb,var(--wip-metric-tone) 24%,transparent)!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-metric-copy{
  display:flex!important;
  min-width:0!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:.18rem!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-metric-label,
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-metric-value,
html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-metric-sub{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
}

html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-metric-label{
  font-size:.58rem!important;
  font-weight:950!important;
  line-height:1.12!important;
  text-transform:uppercase!important;
}

html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-metric-value{
  font-family:var(--font-display)!important;
  font-size:1.04rem!important;
  font-weight:950!important;
  line-height:1.08!important;
}

html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-metric-sub{
  font-size:.54rem!important;
  font-weight:900!important;
  line-height:1.12!important;
  opacity:.82!important;
}

@media (max-width:1280px){
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media (max-width:720px){
  html[data-auth-ready="app"] body[data-route="inventory-wip"] #app-content .wip-kpi-grid{
    grid-template-columns:1fr!important;
  }
}

/* Fleet KPI global-style polish */
html[data-auth-ready="app"] body[data-route="fleet"] #app-content .fleet-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:.75rem!important;
  margin:0 0 1.35rem!important;
  align-items:stretch!important;
}

html[data-auth-ready="app"] body[data-route="fleet"] #app-content .fleet-kpi-card{
  --fleet-tone:#174f91;
  position:relative!important;
  min-width:0!important;
  min-height:92px!important;
  display:grid!important;
  grid-template-columns:2.45rem minmax(0,1fr)!important;
  gap:.72rem!important;
  align-items:center!important;
  padding:.82rem .78rem!important;
  border:1px solid #dbe6f2!important;
  border-radius:8px!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--fleet-tone) 7%,#fff),#fff 48%)!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 9px 24px rgba(15,23,42,.06)!important;
}

html[data-auth-ready="app"] body[data-route="fleet"] #app-content .fleet-kpi-card::before{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto!important;
  height:3px!important;
  background:var(--fleet-tone)!important;
}

html[data-auth-ready="app"] body[data-route="fleet"] #app-content .fleet-kpi-card::after{
  content:""!important;
  position:absolute!important;
  top:-2.15rem!important;
  right:-1.35rem!important;
  width:5.5rem!important;
  height:5.5rem!important;
  border-radius:999px!important;
  background:var(--fleet-tone)!important;
  opacity:.08!important;
  pointer-events:none!important;
}

html[data-auth-ready="app"] body[data-route="fleet"] #app-content .fleet-kpi-icon{
  width:2.45rem!important;
  height:2.45rem!important;
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
  background:var(--fleet-tone)!important;
  color:#fff!important;
  box-shadow:0 9px 16px color-mix(in srgb,var(--fleet-tone) 24%,transparent)!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="fleet"] #app-content .fleet-kpi-icon .material-symbols-outlined{
  color:#fff!important;
  font-size:1.12rem!important;
  line-height:1!important;
}

html[data-auth-ready="app"] body[data-route="fleet"] #app-content .fleet-kpi-copy{
  display:flex!important;
  min-width:0!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:.22rem!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="fleet"] #app-content .fleet-kpi-label,
html[data-auth-ready="app"] body[data-route="fleet"] #app-content .fleet-kpi-value{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
}

html[data-auth-ready="app"] body[data-route="fleet"] #app-content .fleet-kpi-label{
  font-size:.62rem!important;
  font-weight:950!important;
  line-height:1.12!important;
  text-transform:uppercase!important;
}

html[data-auth-ready="app"] body[data-route="fleet"] #app-content .fleet-kpi-value{
  font-family:var(--font-display)!important;
  font-size:1.08rem!important;
  font-weight:950!important;
  line-height:1.08!important;
}

@media (max-width:1280px){
  html[data-auth-ready="app"] body[data-route="fleet"] #app-content .fleet-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media (max-width:720px){
  html[data-auth-ready="app"] body[data-route="fleet"] #app-content .fleet-kpi-grid{
    grid-template-columns:1fr!important;
  }
}

/* DRN KPI global-style polish */
html[data-auth-ready="app"] body[data-route="drn"] #app-content .drn-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:.78rem!important;
  margin:0 0 1.35rem!important;
  align-items:stretch!important;
}

html[data-auth-ready="app"] body[data-route="drn"] #app-content .drn-kpi-card{
  --drn-tone:#174f91;
  position:relative!important;
  min-width:0!important;
  min-height:92px!important;
  display:grid!important;
  grid-template-columns:2.45rem minmax(0,1fr)!important;
  gap:.72rem!important;
  align-items:center!important;
  padding:.82rem .82rem!important;
  border:1px solid #dbe6f2!important;
  border-radius:8px!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--drn-tone) 7%,#fff),#fff 48%)!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 9px 24px rgba(15,23,42,.06)!important;
}

html[data-auth-ready="app"] body[data-route="drn"] #app-content .drn-kpi-card::before{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto!important;
  height:3px!important;
  background:var(--drn-tone)!important;
}

html[data-auth-ready="app"] body[data-route="drn"] #app-content .drn-kpi-card::after{
  content:""!important;
  position:absolute!important;
  top:-2.15rem!important;
  right:-1.35rem!important;
  width:5.5rem!important;
  height:5.5rem!important;
  border-radius:999px!important;
  background:var(--drn-tone)!important;
  opacity:.08!important;
  pointer-events:none!important;
}

html[data-auth-ready="app"] body[data-route="drn"] #app-content .drn-kpi-icon{
  width:2.45rem!important;
  height:2.45rem!important;
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
  background:var(--drn-tone)!important;
  color:#fff!important;
  box-shadow:0 9px 16px color-mix(in srgb,var(--drn-tone) 24%,transparent)!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="drn"] #app-content .drn-kpi-icon .material-symbols-outlined{
  color:#fff!important;
  font-size:1.12rem!important;
  line-height:1!important;
}

html[data-auth-ready="app"] body[data-route="drn"] #app-content .drn-kpi-copy{
  display:flex!important;
  min-width:0!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:.22rem!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="drn"] #app-content .drn-kpi-label,
html[data-auth-ready="app"] body[data-route="drn"] #app-content .drn-kpi-value{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
}

html[data-auth-ready="app"] body[data-route="drn"] #app-content .drn-kpi-label{
  font-size:.62rem!important;
  font-weight:950!important;
  line-height:1.12!important;
  text-transform:uppercase!important;
}

html[data-auth-ready="app"] body[data-route="drn"] #app-content .drn-kpi-value{
  font-family:var(--font-display)!important;
  font-size:1.12rem!important;
  font-weight:950!important;
  line-height:1.08!important;
}

@media (max-width:1100px){
  html[data-auth-ready="app"] body[data-route="drn"] #app-content .drn-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:640px){
  html[data-auth-ready="app"] body[data-route="drn"] #app-content .drn-kpi-grid{
    grid-template-columns:1fr!important;
  }
}

/* DN KPI global-style polish */
html[data-auth-ready="app"] body[data-route="dn"] #app-content .dn-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:.78rem!important;
  margin:0 0 1.35rem!important;
  align-items:stretch!important;
}

html[data-auth-ready="app"] body[data-route="dn"] #app-content .dn-kpi-card{
  --dn-tone:#174f91;
  position:relative!important;
  min-width:0!important;
  min-height:92px!important;
  display:grid!important;
  grid-template-columns:2.45rem minmax(0,1fr)!important;
  gap:.72rem!important;
  align-items:center!important;
  padding:.82rem .82rem!important;
  border:1px solid #dbe6f2!important;
  border-radius:8px!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--dn-tone) 7%,#fff),#fff 48%)!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 9px 24px rgba(15,23,42,.06)!important;
}

html[data-auth-ready="app"] body[data-route="dn"] #app-content .dn-kpi-card::before{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto!important;
  height:3px!important;
  background:var(--dn-tone)!important;
}

html[data-auth-ready="app"] body[data-route="dn"] #app-content .dn-kpi-card::after{
  content:""!important;
  position:absolute!important;
  top:-2.15rem!important;
  right:-1.35rem!important;
  width:5.5rem!important;
  height:5.5rem!important;
  border-radius:999px!important;
  background:var(--dn-tone)!important;
  opacity:.08!important;
  pointer-events:none!important;
}

html[data-auth-ready="app"] body[data-route="dn"] #app-content .dn-kpi-icon{
  width:2.45rem!important;
  height:2.45rem!important;
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
  background:var(--dn-tone)!important;
  color:#fff!important;
  box-shadow:0 9px 16px color-mix(in srgb,var(--dn-tone) 24%,transparent)!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="dn"] #app-content .dn-kpi-icon .material-symbols-outlined{
  color:#fff!important;
  font-size:1.12rem!important;
  line-height:1!important;
}

html[data-auth-ready="app"] body[data-route="dn"] #app-content .dn-kpi-copy{
  display:flex!important;
  min-width:0!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:.22rem!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="dn"] #app-content .dn-kpi-label,
html[data-auth-ready="app"] body[data-route="dn"] #app-content .dn-kpi-value{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
}

html[data-auth-ready="app"] body[data-route="dn"] #app-content .dn-kpi-label{
  font-size:.62rem!important;
  font-weight:950!important;
  line-height:1.12!important;
  text-transform:uppercase!important;
}

html[data-auth-ready="app"] body[data-route="dn"] #app-content .dn-kpi-value{
  font-family:var(--font-display)!important;
  font-size:1.12rem!important;
  font-weight:950!important;
  line-height:1.08!important;
}

@media (max-width:1100px){
  html[data-auth-ready="app"] body[data-route="dn"] #app-content .dn-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:640px){
  html[data-auth-ready="app"] body[data-route="dn"] #app-content .dn-kpi-grid{
    grid-template-columns:1fr!important;
  }
}

/* Inventory Overview KPI global-style polish */
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-kpis{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:.75rem!important;
  width:100%!important;
  margin:0 0 1.35rem!important;
  align-items:stretch!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-metric-card,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-metric-card{
  --inv-overview-tone:#174f91;
  position:relative!important;
  min-width:0!important;
  min-height:96px!important;
  display:grid!important;
  grid-template-columns:2.45rem minmax(0,1fr)!important;
  gap:.72rem!important;
  align-items:center!important;
  padding:.82rem .82rem!important;
  border:1px solid #dbe6f2!important;
  border-radius:8px!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--inv-overview-tone) 7%,#fff),#fff 48%)!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 9px 24px rgba(15,23,42,.06)!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-metric-card::before,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-metric-card::before{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto!important;
  height:3px!important;
  background:var(--inv-overview-tone)!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-metric-card::after,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-metric-card::after{
  content:""!important;
  position:absolute!important;
  top:-2.15rem!important;
  right:-1.35rem!important;
  width:5.5rem!important;
  height:5.5rem!important;
  border-radius:999px!important;
  background:var(--inv-overview-tone)!important;
  opacity:.08!important;
  pointer-events:none!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-metric-icon,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-metric-icon{
  width:2.45rem!important;
  height:2.45rem!important;
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
  background:var(--inv-overview-tone)!important;
  color:#fff!important;
  font-size:1.12rem!important;
  line-height:1!important;
  box-shadow:0 9px 16px color-mix(in srgb,var(--inv-overview-tone) 24%,transparent)!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-metric-badge,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-metric-badge{
  position:absolute!important;
  top:.52rem!important;
  right:.58rem!important;
  z-index:2!important;
  display:inline-flex!important;
  align-items:center!important;
  max-width:4.5rem!important;
  padding:.12rem .38rem!important;
  border-radius:999px!important;
  background:#f6f8fb!important;
  color:#000!important;
  font-size:.5rem!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-metric-copy,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-metric-copy{
  display:flex!important;
  min-width:0!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:.18rem!important;
  padding-right:1.85rem!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-metric-label,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-metric-label,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-metric-value,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-metric-value,
html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-metric-sub,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-metric-sub{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-metric-label,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-metric-label{
  font-size:.6rem!important;
  font-weight:950!important;
  line-height:1.12!important;
  text-transform:uppercase!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-metric-value,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-metric-value{
  font-family:var(--font-display)!important;
  font-size:1.06rem!important;
  font-weight:950!important;
  line-height:1.08!important;
}

html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-metric-sub,
html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-metric-sub{
  font-size:.56rem!important;
  font-weight:900!important;
  line-height:1.12!important;
  opacity:.82!important;
}

@media (max-width:1280px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis,
  html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media (max-width:780px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis,
  html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:560px){
  html[data-auth-ready="app"] body[data-route="inventory-overview"] #app-content .inv-overview-kpis,
  html[data-auth-ready="app"] body[data-route="inventory"] #app-content .inv-overview-kpis{
    grid-template-columns:1fr!important;
  }
}

/* FGS metric card reset: avoids legacy .fgs-kpi-* layout conflicts */
html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:.68rem!important;
  align-items:stretch!important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-metric-card{
  position:relative!important;
  min-width:0!important;
  min-height:70px!important;
  display:flex!important;
  align-items:center!important;
  gap:.62rem!important;
  padding:.58rem .7rem!important;
  border:1px solid #dbe6f2!important;
  border-top:3px solid var(--fgs-tone,#174f91)!important;
  border-left:1px solid #dbe6f2!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 7px 18px rgba(15,23,42,.055)!important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-metric-card::before{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto!important;
  height:0!important;
  display:none!important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-metric-card::after{
  content:""!important;
  position:absolute!important;
  top:-2rem!important;
  right:-1.35rem!important;
  width:4.8rem!important;
  height:4.8rem!important;
  border-radius:999px!important;
  background:var(--fgs-tone,#174f91)!important;
  opacity:.08!important;
  pointer-events:none!important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-metric-icon{
  flex:0 0 2.05rem!important;
  width:2.05rem!important;
  height:2.05rem!important;
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
  background:var(--fgs-tone,#174f91)!important;
  color:#fff!important;
  font-size:.96rem!important;
  line-height:1!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-metric-copy{
  display:flex!important;
  min-width:0!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:.08rem!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-metric-label,
html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-metric-value,
html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-metric-sub{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-metric-label{
  font-size:.58rem!important;
  font-weight:950!important;
  line-height:1.12!important;
  text-transform:uppercase!important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-metric-value{
  font-family:var(--font-display)!important;
  font-size:1rem!important;
  font-weight:950!important;
  line-height:1.05!important;
}

html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-metric-sub{
  font-size:.54rem!important;
  font-weight:900!important;
  line-height:1.12!important;
  opacity:.82!important;
}

@media (max-width:1280px){
  html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media (max-width:720px){
  html[data-auth-ready="app"] body[data-route="fgs"] #app-content .fgs-kpi-grid{
    grid-template-columns:1fr!important;
  }
}

/* Final EOF dashboard KPI lock: global styling with icons left of text. */
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell .ceo-kpi,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi,
#app-content .ceo-shell .ceo-kpi,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-report,
#app-content .ceo-shell .ceo-report{
  position:relative!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:left!important;
  border:1px solid #dbe6f2!important;
  border-top:3px solid var(--tone,#174f91)!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;
  color:#000!important;
  overflow:hidden!important;
  box-shadow:0 8px 18px rgba(15,23,42,.055)!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell .ceo-kpi::before,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report::before,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi::before,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-report::before,
#app-content .ceo-shell .ceo-kpi::before,
#app-content .ceo-shell .ceo-report::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:3px!important;
  border-radius:8px 0 0 8px!important;
  background:var(--tone,#174f91)!important;
  z-index:0!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell .ceo-kpi::after,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report::after,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi::after,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-report::after,
#app-content .ceo-shell .ceo-kpi::after,
#app-content .ceo-shell .ceo-report::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:-1.8rem!important;
  right:-1.35rem!important;
  width:4.9rem!important;
  height:4.9rem!important;
  border-radius:999px!important;
  background:var(--tone,#174f91)!important;
  opacity:.075!important;
  pointer-events:none!important;
  z-index:0!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell .ceo-kpi-icon,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report i,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi-icon,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-report i,
#app-content .ceo-shell .ceo-kpi-icon,
#app-content .ceo-shell .ceo-report i{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
  background:linear-gradient(135deg,var(--tone,#174f91),color-mix(in srgb,var(--tone,#174f91) 76%,#0f172a))!important;
  color:#fff!important;
  box-shadow:0 8px 14px color-mix(in srgb,var(--tone,#174f91) 22%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--tone,#174f91) 64%,#fff)!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell .ceo-kpi-icon,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi-icon,
#app-content .ceo-shell .ceo-kpi-icon{
  width:1.78rem!important;
  height:1.78rem!important;
  min-width:1.78rem!important;
  flex:0 0 1.78rem!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report i,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-report i,
#app-content .ceo-shell .ceo-report i{
  width:1.9rem!important;
  height:1.9rem!important;
  min-width:1.9rem!important;
  flex:0 0 1.9rem!important;
  font-style:normal!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-shell .ceo-kpi-copy,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report-copy,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-kpi-copy,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-report-copy,
#app-content .ceo-shell .ceo-kpi-copy,
#app-content .ceo-shell .ceo-report-copy{
  position:relative!important;
  z-index:1!important;
  min-width:0!important;
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  text-align:left!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .ceo-report-grid,
html[data-auth-ready="app"] #app-content .ceo-shell .ceo-report-grid,
#app-content .ceo-shell .ceo-report-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:.55rem!important;
  padding:.75rem!important;
  align-items:stretch!important;
}

/* BIMAS ERP FINAL MODULE REPAIR - fallback for browsers still holding older app shell */
#app-content .page-container .ceo-shell .ceo-hero,
#app-content .ceo-shell .ceo-hero{
  box-sizing:border-box!important;
  position:relative!important;
  min-height:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(18rem,.95fr)!important;
  align-items:stretch!important;
  gap:.9rem!important;
  padding:1rem!important;
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:8px!important;
  background:linear-gradient(135deg,#061636 0%,#0a3a78 48%,#066456 100%)!important;
  color:#fff!important;
  box-shadow:0 18px 40px rgba(7,27,70,.22)!important;
  overflow:hidden!important;
}

#app-content .page-container .ceo-shell .ceo-hero::before,
#app-content .ceo-shell .ceo-hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 100%),linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 100%)!important;
  background-size:42px 42px!important;
  opacity:.42!important;
  pointer-events:none!important;
}

#app-content .page-container .ceo-shell .ceo-hero::after,
#app-content .ceo-shell .ceo-hero::after{
  content:""!important;
  position:absolute!important;
  inset:auto 0 0 0!important;
  height:4px!important;
  background:linear-gradient(90deg,#f59e0b,#22c55e,#38bdf8,#2563eb)!important;
  pointer-events:none!important;
}

#app-content .page-container .ceo-shell .ceo-hero > *,
#app-content .ceo-shell .ceo-hero > *{
  min-width:0!important;
  position:relative!important;
  z-index:1!important;
}

#app-content .page-container .ceo-shell .ceo-title,
#app-content .ceo-shell .ceo-title{
  max-width:100%!important;
  margin:.35rem 0 0!important;
  font-family:var(--font-display,"Plus Jakarta Sans",Inter,sans-serif)!important;
  font-size:clamp(1.55rem,2.1vw,2.05rem)!important;
  font-weight:950!important;
  line-height:1.06!important;
  letter-spacing:0!important;
  color:#fff!important;
  text-shadow:0 2px 16px rgba(0,0,0,.28)!important;
}

#app-content .page-container .ceo-shell .ceo-eyebrow,
#app-content .ceo-shell .ceo-eyebrow{
  color:#dff7ff!important;
  font-size:.68rem!important;
  font-weight:950!important;
  line-height:1.1!important;
  letter-spacing:0!important;
  text-transform:uppercase!important;
}

#app-content .page-container .ceo-shell .ceo-subline,
#app-content .ceo-shell .ceo-subline{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:.45rem!important;
  margin-top:.72rem!important;
  min-width:0!important;
}

#app-content .page-container .ceo-shell .ceo-role-chip,
#app-content .ceo-shell .ceo-role-chip{
  max-width:100%!important;
  min-width:0!important;
  min-height:1.7rem!important;
  padding:.28rem .58rem!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:.32rem!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:.66rem!important;
  line-height:1!important;
  color:#fff!important;
}

#app-content .page-container .ceo-shell .ceo-brief,
#app-content .ceo-shell .ceo-brief{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:.55rem!important;
}

#app-content .page-container .ceo-shell .ceo-brief-card,
#app-content .ceo-shell .ceo-brief-card{
  min-width:0!important;
  min-height:4.4rem!important;
  padding:.62rem!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  overflow:hidden!important;
}

#app-content .page-container .ceo-shell .ceo-brief-card span,
#app-content .page-container .ceo-shell .ceo-brief-card strong,
#app-content .ceo-shell .ceo-brief-card span,
#app-content .ceo-shell .ceo-brief-card strong{
  max-width:100%!important;
  color:#fff!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#app-content .page-container .ceo-shell .ceo-kpi-grid,
#app-content .ceo-shell .ceo-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:.52rem!important;
  margin-block:.72rem .95rem!important;
  padding:0!important;
}

#app-content .page-container .ceo-shell .ceo-kpi,
#app-content .ceo-shell .ceo-kpi{
  min-width:0!important;
  min-height:76px!important;
  height:76px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:.52rem!important;
  padding:.56rem .62rem!important;
  text-align:left!important;
  border:1px solid #dbe6f2!important;
  border-top:3px solid var(--tone,#0b5cab)!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;
  color:#000!important;
  box-shadow:0 8px 18px rgba(15,23,42,.06)!important;
  overflow:hidden!important;
}

#app-content .page-container .ceo-shell .ceo-kpi-icon,
#app-content .ceo-shell .ceo-kpi-icon{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  width:1.82rem!important;
  height:1.82rem!important;
  min-width:1.82rem!important;
  flex:0 0 1.82rem!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  border-radius:7px!important;
  background:linear-gradient(135deg,var(--tone,#0b5cab),color-mix(in srgb,var(--tone,#0b5cab) 76%,#0f172a))!important;
  color:#fff!important;
  box-shadow:0 8px 14px color-mix(in srgb,var(--tone,#0b5cab) 22%,transparent)!important;
  z-index:1!important;
}

#app-content .page-container .ceo-shell .ceo-kpi-copy,
#app-content .ceo-shell .ceo-kpi-copy{
  min-width:0!important;
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:.05rem!important;
  text-align:left!important;
}

#app-content .page-container .ceo-shell :is(.ceo-kpi-label,.ceo-kpi-value,.ceo-kpi-sub),
#app-content .ceo-shell :is(.ceo-kpi-label,.ceo-kpi-value,.ceo-kpi-sub){
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  letter-spacing:0!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#app-content .page-container .ceo-shell .ceo-kpi-label,
#app-content .ceo-shell .ceo-kpi-label{font-size:.52rem!important;font-weight:950!important;line-height:1.08!important;text-transform:uppercase!important;}
#app-content .page-container .ceo-shell .ceo-kpi-value,
#app-content .ceo-shell .ceo-kpi-value{font-size:.84rem!important;font-weight:950!important;line-height:1.05!important;}
#app-content .page-container .ceo-shell .ceo-kpi-sub,
#app-content .ceo-shell .ceo-kpi-sub{color:#475569!important;font-size:.48rem!important;font-weight:850!important;line-height:1.08!important;}

#app-content .page-container .pfi-kpi-grid,
#app-content .pfi-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:.72rem!important;
  margin-block:.75rem 1.1rem!important;
  padding:0!important;
}

#app-content .page-container .pfi-metric-card,
#app-content .pfi-metric-card{
  min-width:0!important;
  min-height:84px!important;
  height:84px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:.62rem!important;
  padding:.62rem .75rem!important;
  border:1px solid #dbe6f2!important;
  border-top:3px solid var(--tone,var(--pfi-tone,#0b5cab))!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;
  color:#000!important;
  box-shadow:0 8px 18px rgba(15,23,42,.06)!important;
  overflow:hidden!important;
}

#app-content .page-container .pfi-metric-card .bimas-kpi-icon,
#app-content .pfi-metric-card .bimas-kpi-icon{
  width:2.05rem!important;
  height:2.05rem!important;
  min-width:2.05rem!important;
  flex:0 0 2.05rem!important;
}

#app-content .page-container .pfi-metric-card .bimas-kpi-body,
#app-content .pfi-metric-card .bimas-kpi-body{
  min-width:0!important;
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:.05rem!important;
}

#app-content .page-container .dash-shortcuts,
#app-content .dash-shortcuts{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr))!important;
  gap:.72rem!important;
}

#app-content .page-container .dash-shortcut,
#app-content .dash-shortcut{
  min-width:0!important;
  border:1px solid #dbe6f2!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;
  color:#000!important;
  box-shadow:0 8px 18px rgba(15,23,42,.06)!important;
  overflow:hidden!important;
}

#app-content .page-container .dash-shortcut .ico,
#app-content .dash-shortcut .ico{
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
  background:linear-gradient(135deg,#0b5cab,#0f3f77)!important;
  color:#fff!important;
}

#app-content .page-container .dash-shortcut > span:nth-child(2) > span:first-child,
#app-content .dash-shortcut > span:nth-child(2) > span:first-child{
  color:#000!important;
  font-weight:950!important;
  letter-spacing:0!important;
}

@media (max-width:1180px){
  #app-content .page-container .ceo-shell .ceo-hero,
  #app-content .ceo-shell .ceo-hero{grid-template-columns:1fr!important;}
  #app-content .page-container .ceo-shell .ceo-kpi-grid,
  #app-content .ceo-shell .ceo-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  #app-content .page-container .pfi-kpi-grid,
  #app-content .pfi-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

@media (max-width:700px){
  #app-content .page-container .ceo-shell .ceo-hero,
  #app-content .ceo-shell .ceo-hero{display:block!important;padding:.85rem!important;}
  #app-content .page-container .ceo-shell .ceo-title,
  #app-content .ceo-shell .ceo-title{font-size:1.55rem!important;line-height:1.08!important;}
  #app-content .page-container .ceo-shell .ceo-brief,
  #app-content .ceo-shell .ceo-brief{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.42rem!important;margin-top:.7rem!important;}
  #app-content .page-container .ceo-shell .ceo-kpi-grid,
  #app-content .ceo-shell .ceo-kpi-grid,
  #app-content .page-container .pfi-kpi-grid,
  #app-content .pfi-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.55rem!important;}
  #app-content .page-container .ceo-shell .ceo-kpi,
  #app-content .ceo-shell .ceo-kpi,
  #app-content .page-container .pfi-metric-card,
  #app-content .pfi-metric-card{min-height:82px!important;height:82px!important;padding:.54rem .58rem!important;gap:.5rem!important;}
  #app-content .page-container .dash-shortcuts,
  #app-content .dash-shortcuts{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.48rem!important;}
  #app-content .page-container .dash-shortcut,
  #app-content .dash-shortcut{min-height:5.65rem!important;height:5.65rem!important;padding:.52rem .36rem!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:.36rem!important;text-align:center!important;}
  #app-content .page-container .dash-shortcut .ico,
  #app-content .dash-shortcut .ico{width:2.25rem!important;height:2.25rem!important;min-width:2.25rem!important;margin:0!important;}
  #app-content .page-container .dash-shortcut > span:nth-child(2),
  #app-content .dash-shortcut > span:nth-child(2){min-width:0!important;width:100%!important;text-align:center!important;}
  #app-content .page-container .dash-shortcut > span:nth-child(2) > span:first-child,
  #app-content .dash-shortcut > span:nth-child(2) > span:first-child{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;white-space:normal!important;overflow:hidden!important;text-overflow:clip!important;font-size:.56rem!important;line-height:1.08!important;}
  #app-content .page-container .dash-shortcut-detail,
  #app-content .page-container .dash-shortcut .chev,
  #app-content .dash-shortcut-detail,
  #app-content .dash-shortcut .chev{display:none!important;}
}

/* BIMAS ERP FINAL KPI + SETTINGS REPAIR */
html[data-auth-ready="app"] body[data-route] #app-content#app-content .page-container :is(
  .bimas-kpi-grid,.bimas-auto-kpi-strip,.kpi-grid,.dash-grid,.dash-kpi-grid,.bi-kpi-grid,.sec-kpi-grid,
  .fgs-kpi-grid,.inv-kpi-grid,.inv-overview-kpis,.wip-kpi-grid,.accounts-kpi-grid,.sof-kpi-grid,
  .pfi-kpi-grid,.cust-kpi-grid,.customers-kpi-grid,.crm-kpi-grid,.products-kpi-grid,.production-kpi-grid,
  .fleet-kpi-grid,.drn-kpi-grid,.dn-kpi-grid,.voucher-kpi-grid,.notifications-kpi-grid,.reports-hub-kpis,
  .reports-report-kpis,.sales-perf-kpis,.ceo-kpi-grid,.ceo-report-grid,.ops-manager-kpis,.ops-kpis,
  .settings-summary-grid,.settings-readiness-grid,.settings-mobile-grid,[class*="-kpi-grid"],
  [class*="-metric-grid"],[class*="-stats-grid"],[class*="-kpis"]
){
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))!important;
  gap:.62rem!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
  margin-block:.72rem 1rem!important;
  padding:0!important;
}

html[data-auth-ready="app"] body[data-route] #app-content#app-content .page-container :is(
  .bimas-kpi,.bimas-auto-kpi-card,.kpi-card,.stats-card,.stat-card,.dash-kpi,.ceo-kpi,.ceo-report,
  .ops-kpi,.ops-manager-kpi,.reports-hub-kpi,.reports-report-kpi,.sales-perf-kpi,.prod-dash-kpi,
  .fgs-metric-card,.pfi-metric-card,.settings-summary-card,.settings-readiness-card,.settings-mobile-stat,
  [class*="kpi-card"],[class*="metric-card"],[class*="stat-card"]
){
  --erp-system-tone:#174f91;
  --erp-kpi-tone:var(--settings-accent,var(--settings-tone,var(--mobile-stat,var(--tone,var(--global-kpi-tone,var(--accounts-tone,var(--pfi-tone,var(--fgs-tone,var(--erp-system-tone)))))))))!important;
  box-sizing:border-box!important;
  position:relative!important;
  min-width:0!important;
  min-height:76px!important;
  height:76px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:.56rem!important;
  padding:.55rem .68rem!important;
  border:1px solid #dbe6f2!important;
  border-top:3px solid var(--erp-kpi-tone)!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;
  color:#000!important;
  box-shadow:0 8px 18px rgba(15,23,42,.06)!important;
  overflow:hidden!important;
  text-align:left!important;
  transform:none!important;
}

html[data-auth-ready="app"] body[data-route] #app-content#app-content .page-container :is(
  .bimas-kpi,.bimas-auto-kpi-card,.kpi-card,.stats-card,.stat-card,.dash-kpi,.ceo-kpi,.ceo-report,
  .ops-kpi,.ops-manager-kpi,.reports-hub-kpi,.reports-report-kpi,.sales-perf-kpi,.prod-dash-kpi,
  .fgs-metric-card,.pfi-metric-card,.settings-summary-card,.settings-readiness-card,.settings-mobile-stat,
  [class*="kpi-card"],[class*="metric-card"],[class*="stat-card"]
)::after{
  content:""!important;
  position:absolute!important;
  top:-2.1rem!important;
  right:-1.55rem!important;
  width:5.2rem!important;
  height:5.2rem!important;
  border-radius:999px!important;
  background:var(--erp-kpi-tone)!important;
  opacity:.07!important;
  pointer-events:none!important;
  transform:none!important;
}

html[data-auth-ready="app"] body[data-route] #app-content#app-content .page-container :is(
  .bimas-kpi-icon,.kpi-icon,.metric-icon,.stat-icon,.fgs-metric-icon,.ceo-kpi-icon,.reports-hub-kpi-icon,
  .reports-report-kpi-icon,.sales-perf-kpi-icon,.prod-dash-kpi-icon,
  .settings-summary-card > .material-symbols-outlined,.settings-readiness-card > .material-symbols-outlined,
  .settings-mobile-stat > .material-symbols-outlined,.kicon,.icon
){
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  z-index:1!important;
  width:2rem!important;
  height:2rem!important;
  min-width:2rem!important;
  flex:0 0 2rem!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border-radius:7px!important;
  background:linear-gradient(135deg,var(--erp-kpi-tone),color-mix(in srgb,var(--erp-kpi-tone) 76%,#0f172a))!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 8px 14px color-mix(in srgb,var(--erp-kpi-tone) 22%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--erp-kpi-tone) 58%,#fff)!important;
  font-style:normal!important;
  font-size:1rem!important;
  line-height:1!important;
}

html[data-auth-ready="app"] body[data-route] #app-content#app-content .page-container :is(.bimas-kpi-body,.bimas-kpi-copy,.kpi-body,.kpi-main,.kpi-copy,.metric-copy,.stat-copy,.fgs-metric-copy,.ceo-kpi-copy,.ceo-report-copy,.settings-summary-card > div,.settings-readiness-card > div,.settings-mobile-stat > div){
  min-width:0!important;
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:.04rem!important;
  text-align:left!important;
  position:relative!important;
  z-index:1!important;
}

html[data-auth-ready="app"] body[data-route] #app-content#app-content .page-container :is(.bimas-kpi-label,.kpi-label,.metric-label,.stat-label,.fgs-metric-label,.ceo-kpi-label,.dash-kpi .label,.settings-summary-card p,.settings-readiness-card p,.settings-mobile-stat p){
  display:block!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  color:#071529!important;
  font-family:var(--font-display,Inter,Arial,sans-serif)!important;
  font-size:.54rem!important;
  font-weight:950!important;
  line-height:1.08!important;
  letter-spacing:0!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-align:left!important;
}

html[data-auth-ready="app"] body[data-route] #app-content#app-content .page-container :is(.bimas-kpi-value,.kpi-value,.metric-value,.stat-value,.fgs-metric-value,.ceo-kpi-value,.dash-kpi .value,.settings-summary-card strong,.settings-readiness-card strong,.settings-mobile-stat strong){
  display:block!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  color:#000!important;
  font-family:var(--font-display,Inter,Arial,sans-serif)!important;
  font-size:.9rem!important;
  font-weight:950!important;
  line-height:1.05!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-align:left!important;
}

html[data-auth-ready="app"] body[data-route] #app-content#app-content .page-container :is(.bimas-kpi-sub,.kpi-sub,.metric-sub,.stat-sub,.fgs-metric-sub,.ceo-kpi-sub,.dash-kpi .sub,.settings-readiness-card small){
  display:block!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  color:#475569!important;
  font-size:.5rem!important;
  font-weight:850!important;
  line-height:1.08!important;
  letter-spacing:0!important;
  text-transform:none!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-align:left!important;
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content#app-content .settings-quick-nav{
  position:sticky!important;
  top:calc(var(--topbar-h,4rem) + .55rem)!important;
  z-index:45!important;
  display:grid!important;
  grid-template-columns:repeat(9,minmax(0,1fr))!important;
  gap:.5rem!important;
  padding:.55rem!important;
  margin:.9rem 0 1rem!important;
  border:1px solid #dbe6f2!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 12px 28px rgba(15,23,42,.08)!important;
  backdrop-filter:blur(14px)!important;
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content#app-content .settings-quick-nav a{
  min-width:0!important;
  min-height:2.75rem!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.42rem!important;
  padding:.48rem .52rem!important;
  border:1px solid transparent!important;
  border-radius:7px!important;
  color:#071529!important;
  font-size:.72rem!important;
  font-weight:900!important;
  line-height:1.12!important;
  text-decoration:none!important;
  white-space:normal!important;
  text-align:center!important;
  overflow:hidden!important;
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content#app-content .settings-quick-nav .material-symbols-outlined{
  color:#174f91!important;
  -webkit-text-fill-color:#174f91!important;
  font-size:1.05rem!important;
  flex:0 0 auto!important;
}

html[data-auth-ready="app"] body[data-route="settings"] #app-content#app-content .settings-quick-nav a:hover,
html[data-auth-ready="app"] body[data-route="settings"] #app-content#app-content .settings-quick-nav a:focus-visible{
  background:#eff6ff!important;
  border-color:#bdd7f6!important;
  color:#174f91!important;
  transform:translateY(-1px)!important;
}

@media (max-width:700px){
  html[data-auth-ready="app"] body[data-route] #app-content#app-content .page-container :is(.bimas-kpi-grid,.bimas-auto-kpi-strip,.kpi-grid,.dash-grid,.pfi-kpi-grid,.ceo-kpi-grid,.settings-summary-grid,.settings-readiness-grid,.settings-mobile-grid,[class*="-kpi-grid"],[class*="-metric-grid"],[class*="-stats-grid"],[class*="-kpis"]){
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:.42rem!important;
  }

  html[data-auth-ready="app"] body[data-route="settings"] #app-content#app-content .settings-quick-nav{
    position:relative!important;
    top:auto!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:.42rem!important;
    padding:.45rem!important;
    margin:.65rem 0 .8rem!important;
  }

  html[data-auth-ready="app"] body[data-route="settings"] #app-content#app-content .settings-quick-nav a{
    min-height:3rem!important;
    padding:.42rem .32rem!important;
    flex-direction:column!important;
    gap:.22rem!important;
    font-size:.62rem!important;
  }
}

/* BIMAS ERP visible module UI override - keep this at the very end of styles.css. */
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content#app-content .ceo-shell .ceo-kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:.52rem!important;}
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content#app-content .ceo-shell .ceo-report-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.58rem!important;}
html[data-auth-ready="app"] body[data-route="pfi"] #app-content#app-content .pfi-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.58rem!important;}
html[data-auth-ready="app"] body[data-route="reports"] #app-content#app-content .reports-hub-kpis{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:.58rem!important;}
html[data-auth-ready="app"] body[data-route="accounts"] #app-content#app-content .accounts-kpi-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:.5rem!important;}
html[data-auth-ready="app"] body[data-route="operations-center"] #app-content#app-content .ops-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.58rem!important;}
html[data-auth-ready="app"] body[data-route="backup-recovery"] #app-content#app-content .page-container > div:nth-child(2){grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.62rem!important;}
html[data-auth-ready="app"] body[data-route="audit-trail"] #app-content#app-content .page-container > div:nth-child(3){grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:.62rem!important;}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content#app-content .ceo-shell :is(.ceo-kpi,.ceo-report),
html[data-auth-ready="app"] body[data-route="pfi"] #app-content#app-content .pfi-metric-card,
html[data-auth-ready="app"] body[data-route="reports"] #app-content#app-content .reports-hub-kpi,
html[data-auth-ready="app"] body[data-route="accounts"] #app-content#app-content .accounts-kpi-card,
html[data-auth-ready="app"] body[data-route="operations-center"] #app-content#app-content .ops-kpi,
html[data-auth-ready="app"] body[data-route="backup-recovery"] #app-content#app-content .page-container > div:nth-child(2) > div,
html[data-auth-ready="app"] body[data-route="audit-trail"] #app-content#app-content .page-container > div:nth-child(3) > div{
  min-width:0!important;
  min-height:70px!important;
  height:70px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:.5rem!important;
  padding:.48rem .58rem!important;
  border:1px solid #dbe6f2!important;
  border-top:3px solid var(--tone,var(--reports-tone,var(--accounts-tone,var(--erp-kpi-tone,#174f91))))!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;
  color:#000!important;
  box-shadow:0 8px 18px rgba(15,23,42,.06)!important;
  overflow:hidden!important;
}

html[data-auth-ready="app"] body[data-route="dashboard"] #app-content#app-content .ceo-shell :is(.ceo-kpi-icon,.ceo-report i),
html[data-auth-ready="app"] body[data-route="pfi"] #app-content#app-content .pfi-metric-card .bimas-kpi-icon,
html[data-auth-ready="app"] body[data-route="reports"] #app-content#app-content .reports-hub-kpi-icon,
html[data-auth-ready="app"] body[data-route="accounts"] #app-content#app-content .accounts-kpi-icon,
html[data-auth-ready="app"] body[data-route="operations-center"] #app-content#app-content .ops-kpi .icon{
  width:1.82rem!important;
  height:1.82rem!important;
  min-width:1.82rem!important;
  flex:0 0 1.82rem!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  border-radius:7px!important;
  background:linear-gradient(135deg,var(--tone,var(--reports-tone,var(--accounts-tone,#174f91))),#0f172a)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

html[data-auth-ready="app"] body[data-route] #app-content#app-content :is(.bimas-kpi-label,.ceo-kpi-label,.reports-hub-kpi-label,.accounts-kpi-label,.kpi-label),
html[data-auth-ready="app"] body[data-route="backup-recovery"] #app-content#app-content .page-container > div:nth-child(2) > div > div:last-child,
html[data-auth-ready="app"] body[data-route="audit-trail"] #app-content#app-content .page-container > div:nth-child(3) > div > div:last-child{
  color:#071529!important;
  font-size:.48rem!important;
  font-weight:950!important;
  line-height:1.06!important;
  letter-spacing:0!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

html[data-auth-ready="app"] body[data-route] #app-content#app-content :is(.bimas-kpi-value,.ceo-kpi-value,.reports-hub-kpi-value,.accounts-kpi-value,.kpi-value),
html[data-auth-ready="app"] body[data-route="backup-recovery"] #app-content#app-content .page-container > div:nth-child(2) > div > div:first-child,
html[data-auth-ready="app"] body[data-route="audit-trail"] #app-content#app-content .page-container > div:nth-child(3) > div > div:first-child{
  color:#000!important;
  font-size:.82rem!important;
  font-weight:950!important;
  line-height:1.05!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

html[data-auth-ready="app"] body[data-route] #app-content#app-content :is(.bimas-kpi-sub,.ceo-kpi-sub,.reports-hub-kpi-sub,.accounts-kpi-sub,.kpi-sub){
  color:#475569!important;
  font-size:.43rem!important;
  font-weight:850!important;
  line-height:1.06!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content#app-content .accounts-module > .animate-in.d3 > .card:first-child{
  background:linear-gradient(135deg,#08235d 0%,#0b5cab 62%,#047857 100%)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.18)!important;
}

html[data-auth-ready="app"] body[data-route="accounts"] #app-content#app-content .accounts-module > .animate-in.d3 > .card:first-child :is(h2,p,span){
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
}

html[data-auth-ready="app"] body[data-route="security-center"] #app-content#app-content .sec-user-cell{
  display:flex!important;
  align-items:center!important;
  gap:.62rem!important;
  min-width:13rem!important;
}

html[data-auth-ready="app"] body[data-route="security-center"] #app-content#app-content .sec-user-cell > div{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
}

html[data-auth-ready="app"] body[data-route="security-center"] #app-content#app-content .sec-user-cell strong{
  display:block!important;
  color:#071529!important;
  font-size:.78rem!important;
  font-weight:950!important;
  line-height:1.12!important;
}

html[data-auth-ready="app"] body[data-route="security-center"] #app-content#app-content .sec-user-cell small{
  display:block!important;
  color:#64748b!important;
  font-size:.66rem!important;
  font-weight:800!important;
  line-height:1.18!important;
}

@media (max-width:700px){
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content#app-content .ceo-shell .ceo-kpi-grid,
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content#app-content .ceo-shell .ceo-report-grid,
  html[data-auth-ready="app"] body[data-route="pfi"] #app-content#app-content .pfi-kpi-grid,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content#app-content .reports-hub-kpis,
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content#app-content .accounts-kpi-grid,
  html[data-auth-ready="app"] body[data-route="operations-center"] #app-content#app-content .ops-kpis,
  html[data-auth-ready="app"] body[data-route="backup-recovery"] #app-content#app-content .page-container > div:nth-child(2),
  html[data-auth-ready="app"] body[data-route="audit-trail"] #app-content#app-content .page-container > div:nth-child(3){
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:.42rem!important;
  }

  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content#app-content .ceo-shell :is(.ceo-kpi,.ceo-report),
  html[data-auth-ready="app"] body[data-route="pfi"] #app-content#app-content .pfi-metric-card,
  html[data-auth-ready="app"] body[data-route="reports"] #app-content#app-content .reports-hub-kpi,
  html[data-auth-ready="app"] body[data-route="accounts"] #app-content#app-content .accounts-kpi-card,
  html[data-auth-ready="app"] body[data-route="operations-center"] #app-content#app-content .ops-kpi,
  html[data-auth-ready="app"] body[data-route="backup-recovery"] #app-content#app-content .page-container > div:nth-child(2) > div,
  html[data-auth-ready="app"] body[data-route="audit-trail"] #app-content#app-content .page-container > div:nth-child(3) > div{
    min-height:70px!important;
    height:70px!important;
    padding:.36rem .32rem!important;
    gap:.28rem!important;
  }
}
/* Staff role dashboard safety layout. */
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .staff-shell{
  box-sizing:border-box;width:100%;min-width:0;display:flex;flex-direction:column;gap:1rem;padding:1rem;
}
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .staff-hero{
  min-width:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.35rem;
  border-radius:1rem;color:#fff;background:linear-gradient(135deg,#062b57,#0b5cab 58%,#0f766e);
  box-shadow:0 14px 34px rgba(11,92,171,.2);
}
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .staff-hero h1,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .staff-hero h1 *,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .staff-hero .sub,
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .staff-hero .staff-role-badge{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .staff-hero h1{margin:0;}
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .staff-grid{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.85rem!important;
}
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .staff-grid>*{min-width:0!important;}
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .staff-main-grid{
  display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;gap:1rem!important;align-items:start;
}
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .staff-card{
  min-width:0;padding:1rem;border:1px solid #e2e8f0;border-radius:1rem;background:#fff;
  box-shadow:0 8px 22px rgba(15,23,42,.05);overflow:hidden;
}
html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .staff-quick-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.65rem!important;
}
@media(max-width:1100px){
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .staff-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .staff-main-grid{grid-template-columns:1fr!important;}
}
@media(max-width:680px){
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .staff-shell{padding:.7rem;}
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .staff-hero{align-items:flex-start;padding:1rem;}
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .staff-grid,
  html[data-auth-ready="app"] body[data-route="dashboard"] #app-content .staff-quick-grid{grid-template-columns:1fr!important;}
}
/* PFI create workspace - aligned to the operational PFI mockups */
html[data-auth-ready="app"] body[data-route="pfi"] .modal-content:has(#pfi-form){
  width:min(96rem,calc(100vw - 2rem));
  max-height:calc(100vh - 2rem);
  border-radius:1.15rem;
  overflow:hidden;
}
html[data-auth-ready="app"] body[data-route="pfi"] .modal-content:has(#pfi-form) .modal-body{
  padding:1rem 1.15rem 1.5rem;
  overflow:auto;
}
body[data-route="pfi"] .pfi-create-intro{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1rem;margin-bottom:.9rem;border:1px solid #cfe1f5;border-radius:.8rem;
  background:linear-gradient(110deg,#f7fbff,#eef7ff 62%,#fff8e8);
}
body[data-route="pfi"] .pfi-create-intro>div{display:flex;align-items:center;gap:.7rem;}
body[data-route="pfi"] .pfi-create-intro .material-symbols-outlined{color:#075eca;font-size:1.7rem;}
body[data-route="pfi"] .pfi-create-intro strong{display:block;color:#073f97;font:800 1.05rem/1.2 var(--font-display);}
body[data-route="pfi"] .pfi-create-intro small{display:block;color:var(--text-muted);margin-top:.18rem;}
body[data-route="pfi"] .pfi-autonumber{padding:.42rem .7rem;border:1px solid #b9d4f1;border-radius:.55rem;background:#fff;color:#075eca;font-size:.72rem;font-weight:800;}
body[data-route="pfi"] .pfi-form-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(22rem,.92fr);gap:.75rem;margin-bottom:.8rem;align-items:start;}
body[data-route="pfi"] .pfi-form-grid--commercial{grid-template-columns:1fr 1fr;}
body[data-route="pfi"] .pfi-form-section{overflow:hidden;border:1px solid #cfe0f2;border-radius:.75rem;background:#fff;box-shadow:0 5px 18px rgba(14,57,104,.055);}
body[data-route="pfi"] .pfi-form-section__head{display:flex;align-items:center;gap:.55rem;padding:.68rem .82rem;background:linear-gradient(90deg,#eaf5ff,#f7fbff);border-bottom:1px solid #d8e6f4;color:#053fa0;text-transform:uppercase;font-size:.78rem;letter-spacing:.025em;}
body[data-route="pfi"] .pfi-form-section__head .material-symbols-outlined{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:.55rem;background:#f59e0b;color:#fff;font-size:1rem;box-shadow:0 4px 10px rgba(245,158,11,.25);}
body[data-route="pfi"] .pfi-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem .75rem;padding:.8rem;}
body[data-route="pfi"] .pfi-field-span-2{grid-column:span 2;}
body[data-route="pfi"] .pfi-form .form-group{margin:0;min-width:0;}
body[data-route="pfi"] .pfi-form .form-label,body[data-route="pfi"] .pfi-form .form-label-sm{display:block;margin:0 0 .28rem;color:#123a69;font-size:.69rem;font-weight:800;letter-spacing:.015em;}
body[data-route="pfi"] .pfi-form .form-input,body[data-route="pfi"] .pfi-form .form-select{min-height:2.3rem;padding:.48rem .62rem;border-color:#c9daed;border-radius:.5rem;background:#fff;font-size:.78rem;color:#052f76;}
body[data-route="pfi"] .pfi-form .form-input:focus,body[data-route="pfi"] .pfi-form .form-select:focus{border-color:#1473e6;box-shadow:0 0 0 3px rgba(20,115,230,.1);}
body[data-route="pfi"] .pfi-required{color:#e11d48;}
body[data-route="pfi"] .pfi-field-help{display:block;margin-top:.25rem;color:#6f8196;font-size:.64rem;line-height:1.35;}
body[data-route="pfi"] .pfi-field-static{min-height:2.3rem;display:flex;align-items:center;gap:.48rem;padding:.42rem .58rem;border:1px solid #bfe3cf;border-radius:.5rem;background:linear-gradient(135deg,#f1fff7,#f8fffb);color:#126b3f;}
body[data-route="pfi"] .pfi-field-static .material-symbols-outlined{font-size:1.05rem;color:#15955a;}
body[data-route="pfi"] .pfi-field-static strong,body[data-route="pfi"] .pfi-field-static small{display:block;line-height:1.25;}
body[data-route="pfi"] .pfi-field-static strong{font-size:.72rem;}
body[data-route="pfi"] .pfi-field-static small{margin-top:.08rem;font-size:.61rem;color:#487463;}
body[data-route="pfi"] .pfi-branch-editor{margin:.05rem .8rem .8rem;border:1px dashed #9fc2e8;border-radius:.65rem;background:#f8fbff;}
body[data-route="pfi"] .pfi-branch-editor__title{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.62rem .72rem 0;color:#123a69;}
body[data-route="pfi"] .pfi-branch-editor__title strong,body[data-route="pfi"] .pfi-branch-editor__title small{display:block;}
body[data-route="pfi"] .pfi-branch-editor__title small{margin-top:.1rem;color:#73849a;font-size:.65rem;}
body[data-route="pfi"] #items-container{display:grid;grid-template-columns:1fr;gap:.6rem;}
body[data-route="pfi"] .pfi-item-card{padding:.75rem;border:1px solid #cbdff2;border-radius:.72rem;background:#fbfdff;box-shadow:0 3px 10px rgba(7,64,139,.04);}
body[data-route="pfi"] .pfi-item-card__head{margin-bottom:.58rem;}
body[data-route="pfi"] .pfi-item-card__head>span{color:#0648a6;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.075em;}
body[data-route="pfi"] .pfi-item-remove{display:grid;place-items:center;width:1.65rem;height:1.65rem;border:0;border-radius:50%;background:#fff0f2;cursor:pointer;}
body[data-route="pfi"] .pfi-item-grid{display:grid;grid-template-columns:2.2fr 1.15fr 1fr .55fr .68fr .72fr .72fr 1.1fr 1fr 1fr 1.1fr;gap:.5rem;align-items:end;}
body[data-route="pfi"] .pfi-item-product{min-width:12rem;}
body[data-route="pfi"] .pfi-item-product .form-select{margin-bottom:.35rem;}
body[data-route="pfi"] .pfi-item-card__total{display:flex;justify-content:flex-end;gap:1.25rem;flex-wrap:wrap;margin-top:.55rem;padding-top:.48rem;border-top:1px dashed #cad9e9;color:#6d7f93;font-size:.7rem;}
body[data-route="pfi"] .pfi-item-card__total strong{margin-left:.2rem;color:#0648a6;font-family:var(--font-display);}
body[data-route="pfi"] .pfi-financial-summary{margin:0 0 1rem;padding:.75rem;border:1px solid #acd0f5;border-radius:.75rem;background:linear-gradient(120deg,#f7fbff,#eef7ff);}
body[data-route="pfi"] .pfi-financial-summary__grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.4rem;align-items:stretch;}
body[data-route="pfi"] .pfi-financial-summary__grid>div{padding:.55rem .6rem;border-right:1px solid #d8e6f4;min-width:0;}
body[data-route="pfi"] .pfi-financial-summary__grid>div:last-child{border-right:0;}
body[data-route="pfi"] .pfi-financial-summary .form-label-sm{color:#58708d;font-size:.62rem;text-transform:uppercase;}
body[data-route="pfi"] .pfi-summary-number{color:#063d8e;font:800 .92rem/1.2 var(--font-display);white-space:nowrap;}
body[data-route="pfi"] .pfi-financial-summary #sub-total{font-size:1rem!important;line-height:1.2!important;white-space:nowrap;}
body[data-route="pfi"] .pfi-summary-number--accent{color:#d97706;}
body[data-route="pfi"] .pfi-summary-grand{border-radius:.5rem;background:#f6ab00!important;border-right:0!important;}
body[data-route="pfi"] .pfi-summary-grand .form-label-sm{color:#3a2700;}
body[data-route="pfi"] .pfi-summary-grand #grand-total{color:#073b8b;font:900 1.08rem/1.2 var(--font-display);white-space:nowrap;}
@media(max-width:1180px){body[data-route="pfi"] .pfi-item-grid{grid-template-columns:repeat(4,minmax(0,1fr));}body[data-route="pfi"] .pfi-item-product{grid-column:span 2;}body[data-route="pfi"] .pfi-financial-summary__grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:800px){html[data-auth-ready="app"] body[data-route="pfi"] .modal-content:has(#pfi-form){width:calc(100vw - .75rem);max-height:calc(100vh - .75rem);}body[data-route="pfi"] .pfi-form-grid,body[data-route="pfi"] .pfi-form-grid--commercial{grid-template-columns:1fr;}body[data-route="pfi"] .pfi-item-grid{grid-template-columns:repeat(2,minmax(0,1fr));}body[data-route="pfi"] .pfi-item-product{grid-column:span 2;}body[data-route="pfi"] .pfi-financial-summary__grid{grid-template-columns:repeat(2,1fr);}body[data-route="pfi"] .pfi-create-intro{align-items:flex-start;flex-direction:column;}}
@media(max-width:520px){body[data-route="pfi"] .pfi-field-grid{grid-template-columns:1fr;}body[data-route="pfi"] .pfi-field-span-2{grid-column:span 1;}body[data-route="pfi"] .pfi-item-grid{grid-template-columns:1fr;}body[data-route="pfi"] .pfi-item-product{grid-column:span 1;}body[data-route="pfi"] .pfi-financial-summary__grid{grid-template-columns:1fr 1fr;}body[data-route="pfi"] .pfi-branch-editor__title{align-items:flex-start;flex-direction:column;}}