/* BIMAS visual harmony v2
   Final shared presentation layer. It deliberately loads after every route
   stylesheet so typography, compact KPIs and the business-area rail remain
   consistent while module-specific workflows keep their own structure. */

html[data-auth-ready="app"] {
  --bvh-font-body: Inter, "Segoe UI", Arial, sans-serif;
  --bvh-font-display: "Plus Jakarta Sans", Inter, "Segoe UI", Arial, sans-serif;
  --bvh-ink: #102a43;
  --bvh-muted: #647b91;
  --bvh-line: #d9e5ee;
  --bvh-soft: #f5f9fc;
  --bvh-paper: #ffffff;
  --bvh-teal: #0f8a7e;
  --bvh-navy: #0d3558;
  --bvh-shadow: 0 7px 22px rgba(15, 39, 66, .055);
}

/* ── Premium business-area rail ─────────────────────────────────────────── */
html[data-auth-ready="app"]:root #app-sidebar#app-sidebar.dcc-domain-sidebar {
  background:
    radial-gradient(circle at 12% 3%, rgba(45, 212, 191, .13), transparent 28%),
    linear-gradient(178deg, #092f3b 0%, #0c2934 46%, #102a36 100%) !important;
  border-right: 1px solid rgba(121, 216, 202, .16) !important;
  box-shadow: 10px 0 30px rgba(8, 28, 40, .12) !important;
}

html[data-auth-ready="app"]:root #app-sidebar#app-sidebar.dcc-domain-sidebar .sidebar-brand {
  border-bottom: 1px solid rgba(180, 235, 225, .12) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent) !important;
}

html[data-auth-ready="app"]:root #app-sidebar#app-sidebar.dcc-domain-sidebar .sidebar-search {
  min-height: 42px !important;
  margin: 10px 12px 7px !important;
  padding: 0 11px !important;
  border: 1px solid rgba(161, 220, 212, .18) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.03) !important;
}

html[data-auth-ready="app"]:root #app-sidebar#app-sidebar.dcc-domain-sidebar .sidebar-nav {
  padding: 5px 9px 10px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(151, 210, 202, .28) transparent !important;
}

html[data-auth-ready="app"]:root #app-sidebar#app-sidebar.dcc-domain-sidebar .nav-home {
  min-height: 43px !important;
  margin: 0 1px 7px !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(164, 221, 213, .12) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.04) !important;
  color: #eaf9f7 !important;
  font: 720 11px/1.2 var(--bvh-font-body) !important;
}

html[data-auth-ready="app"]:root #app-sidebar#app-sidebar.dcc-domain-sidebar .nav-home.active,
html[data-auth-ready="app"]:root #app-sidebar#app-sidebar.dcc-domain-sidebar .nav-home[aria-current="page"] {
  color: #0a4c45 !important;
  background: linear-gradient(135deg, #c7f4e9, #a9e7dc) !important;
  border-color: #d8fff7 !important;
  box-shadow: 0 8px 20px rgba(3, 20, 27, .2) !important;
}

.dcc-sidebar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 5px 5px;
  color: #91aaaF;
  font: 800 8.5px/1 var(--bvh-font-body);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.dcc-sidebar-heading b {
  color: #73d6c5;
  font: 800 8px/1 var(--bvh-font-body);
  letter-spacing: .04em;
}

html[data-auth-ready="app"]:root #app-sidebar#app-sidebar.dcc-domain-sidebar .nav-group {
  margin: 2px 0 !important;
  padding: 0 !important;
}

html[data-auth-ready="app"]:root #app-sidebar#app-sidebar.dcc-domain-sidebar .nav-group-header {
  position: relative !important;
  min-height: 43px !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 31px minmax(0,1fr) auto 15px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  color: #d7e9e8 !important;
  background: transparent !important;
  font-family: var(--bvh-font-body) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
}

html[data-auth-ready="app"]:root #app-sidebar#app-sidebar.dcc-domain-sidebar .nav-group-header:hover {
  color: #fff !important;
  background: rgba(255,255,255,.065) !important;
  border-color: rgba(173, 229, 220, .13) !important;
  transform: translateX(2px) !important;
}

html[data-auth-ready="app"]:root #app-sidebar#app-sidebar.dcc-domain-sidebar .nav-group-icon {
  display: grid !important;
  place-items: center !important;
  width: 31px !important;
  height: 31px !important;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent) !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, currentColor 12%, rgba(255,255,255,.02)) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}

html[data-auth-ready="app"]:root #app-sidebar#app-sidebar.dcc-domain-sidebar .nav-group-label {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  font: 720 10.5px/1.16 var(--bvh-font-body) !important;
  letter-spacing: -.005em !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html[data-auth-ready="app"]:root #app-sidebar#app-sidebar.dcc-domain-sidebar .nav-group-count {
  min-width: 23px !important;
  height: 20px !important;
  padding: 0 5px !important;
  border: 1px solid rgba(170, 218, 211, .17) !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.055) !important;
  color: #bcd3d2 !important;
  font: 750 9px/1 var(--bvh-font-body) !important;
}

html[data-auth-ready="app"]:root #app-sidebar#app-sidebar.dcc-domain-sidebar .nav-group-chevron {
  display: block !important;
  color: #7fa3a4 !important;
  font-size: 15px !important;
  transform: rotate(-90deg) !important;
}

html[data-auth-ready="app"]:root #app-sidebar#app-sidebar.dcc-domain-sidebar .nav-group.dcc-active .nav-group-header {
  color: #0a4e48 !important;
  background: linear-gradient(135deg, #d7f8f0 0%, #bdece2 100%) !important;
  border-color: #e8fff9 !important;
  box-shadow: 0 8px 20px rgba(3, 20, 27, .2), inset 3px 0 #0f8a7e !important;
  transform: none !important;
}
html[data-auth-ready="app"]:root #app-sidebar#app-sidebar.dcc-domain-sidebar .nav-group.dcc-active .nav-group-icon {
  color: #08796f !important;
  border-color: rgba(15,138,126,.16) !important;
  background: rgba(15,138,126,.1) !important;
}
html[data-auth-ready="app"]:root #app-sidebar#app-sidebar.dcc-domain-sidebar .nav-group.dcc-active .nav-group-count {
  color: #0a625a !important;
  border-color: rgba(15,138,126,.14) !important;
  background: rgba(255,255,255,.55) !important;
}

/* ── ERP-wide type and component rhythm ─────────────────────────────────── */
html[data-auth-ready="app"] body[data-route] #app-content {
  color: var(--bvh-ink);
  font: 400 12px/1.48 var(--bvh-font-body);
  letter-spacing: 0;
}

html[data-auth-ready="app"] body[data-route] #app-content :is(h1,h2,h3,h4,h5,h6) {
  margin-top: 0;
  color: var(--bvh-ink);
  font-family: var(--bvh-font-display) !important;
  letter-spacing: -.025em;
}
html[data-auth-ready="app"] body[data-route] #app-content h1 { font-size: clamp(21px,2vw,27px) !important; line-height: 1.12 !important; }
html[data-auth-ready="app"] body[data-route] #app-content h2 { font-size: clamp(16px,1.45vw,19px) !important; line-height: 1.2 !important; }
html[data-auth-ready="app"] body[data-route] #app-content h3 { font-size: 13.5px !important; line-height: 1.25 !important; }
html[data-auth-ready="app"] body[data-route] #app-content :is(p,.subtitle,.page-subtitle,[class*="-subtitle"]) { font-size: 11px; line-height: 1.48; }

/* Dark hero titles must keep their intended contrast. Earlier compatibility
   layers standardise page titles to navy; this semantic guard restores white
   only inside deliberately dark corporate banners, without changing headings
   on light cards, forms or document surfaces. */
html[data-auth-ready="app"] body[data-route] #app-content#app-content#app-content :is(
  .ad-hero,.settings-hero,.an-hero,.ops-hub-hero,.ceo-hero,.bm-hero,
  .ef-hero,.ops-hero,.ic-hero,.notifications-page-header,.crw-hero,
  .ex-hero,.bi-live-hero,.portal-hero,.pfi-command-hero,.pfi-detail-hero,
  .pdw-hero,.pcw-hero,.production-control-hero,.qc-hero,.rss-stock-hero,
  .sec-hero,.stx-hero,.dashboard-hero,.dash-hero,.so-hero,.hr-hero,
  .payroll-hero,.staff-hero,.sc-hero,.fin-mobile-hero--gl,
  .fin-mobile-hero--finance,.fin-mobile-hero--ops,.fin-mobile-hero--sales
) :is(h1,h2,.page-title,.module-title,[class$="-page-title"],[class$="-module-title"]),
html[data-auth-ready="app"] body[data-route] #app-content#app-content#app-content .dw-hero:not(.bkr-masthead):not(.usr-masthead) :is(
  h1,h2,.page-title,.module-title,[class$="-page-title"],[class$="-module-title"]
) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-auth-ready="app"] body[data-route] #app-content :is(
  .card,.panel,.section-card,.content-card,.dashboard-card,.data-card,
  [class$="-panel"],[class$="-section"],[class$="-card"]
):not(:is(.kpi-card,.metric-card,.stat-card,[class*="-kpi-card"],[class*="-metric-card"],[class*="-stat-card"])) {
  border-radius: 12px;
}

html[data-auth-ready="app"] body[data-route] #app-content :is(
  .card,.panel,.section-card,.content-card,.dashboard-card,.data-card,
  [class$="-panel"],[class$="-section"]
) {
  border-color: var(--bvh-line);
  box-shadow: var(--bvh-shadow);
}

html[data-auth-ready="app"] body[data-route] #app-content :is(
  input:not([type="checkbox"]):not([type="radio"]),select,textarea,
  .form-control,.input,.select
) {
  font: 500 11.5px/1.25 var(--bvh-font-body) !important;
}
html[data-auth-ready="app"] body[data-route] #app-content :is(label,.form-label,[class$="-label"]) {
  font-family: var(--bvh-font-body);
  font-size: 10px;
}
html[data-auth-ready="app"] body[data-route] #app-content :is(button,.btn,[class*="-btn"]):not(.icon-btn) {
  font-family: var(--bvh-font-body) !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
}

html[data-auth-ready="app"] body[data-route] #app-content table:not(.calendar-grid):not(.gantt-table):not(.label-sheet) {
  font-family: var(--bvh-font-body) !important;
  font-size: 10.5px !important;
  line-height: 1.34 !important;
}
html[data-auth-ready="app"] body[data-route] #app-content table:not(.calendar-grid):not(.gantt-table):not(.label-sheet) thead th {
  padding: 8px 9px !important;
  color: #36536f !important;
  background: #f0f6fb !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
}
html[data-auth-ready="app"] body[data-route] #app-content table:not(.calendar-grid):not(.gantt-table):not(.label-sheet) tbody td {
  padding: 8px 9px !important;
  border-color: #e6edf3 !important;
}

/* ── Compact KPI standard, based on the command-centre reference cards ─── */
html[data-auth-ready="app"] body[data-route] #app-content :is(
  .bimas-kpi-grid,.bimas-auto-kpi-strip,.dashboard-kpis,.dashboard-metric-grid,
  [class*="-kpi-grid"],[class*="-metric-grid"],[class*="-stats-grid"],[class$="-kpis"]
) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit,minmax(155px,1fr)) !important;
  gap: 9px !important;
  align-items: stretch !important;
  margin: 0 0 12px !important;
}

html[data-auth-ready="app"] body[data-route] #app-content :is(
  .bimas-kpi,.bimas-auto-kpi-card,.kpi-card,.metric-card,.stat-card,.stats-card,
  .dash-kpi,.ceo-kpi,.dashboard-metric-card,.notifications-kpi-card,
  [class*="-kpi-card"],[class*="-metric-card"],[class*="-stat-card"]
) {
  --erp-kpi-tone: var(--bimas-kpi-accent,var(--kpi-icon-color,var(--tone,#0f8a7e)));
  min-width: 0 !important;
  min-height: 70px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0,1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  align-items: center !important;
  gap: 1px 9px !important;
  padding: 9px 10px !important;
  border: 1px solid var(--bvh-line) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg,#fff,#f8fbfd) !important;
  color: var(--bvh-ink) !important;
  box-shadow: 0 5px 15px rgba(15,39,66,.045) !important;
  overflow: hidden !important;
  transform: none !important;
}
html[data-auth-ready="app"] body[data-route] #app-content :is(
  .bimas-kpi,.bimas-auto-kpi-card,.kpi-card,.metric-card,.stat-card,.stats-card,
  .dash-kpi,.ceo-kpi,.dashboard-metric-card,.notifications-kpi-card,
  [class*="-kpi-card"],[class*="-metric-card"],[class*="-stat-card"]
)::before,
html[data-auth-ready="app"] body[data-route] #app-content :is(
  .bimas-kpi,.bimas-auto-kpi-card,.kpi-card,.metric-card,.stat-card,.stats-card,
  .dash-kpi,.ceo-kpi,.dashboard-metric-card,.notifications-kpi-card,
  [class*="-kpi-card"],[class*="-metric-card"],[class*="-stat-card"]
)::after { display: none !important; }

html[data-auth-ready="app"] body[data-route] #app-content :is(
  .bimas-kpi,.bimas-auto-kpi-card,.kpi-card,.metric-card,.stat-card,.stats-card,
  .dash-kpi,.ceo-kpi,.dashboard-metric-card,.notifications-kpi-card,
  [class*="-kpi-card"],[class*="-metric-card"],[class*="-stat-card"]
) :is(
  .bimas-kpi-icon,.kpi-icon,.metric-icon,.stat-icon,.kicon,.icon,
  [class*="-kpi-icon"],[class*="-metric-icon"],[class*="-stat-icon"]
) {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: color-mix(in srgb,var(--erp-kpi-tone) 11%,#f4fbfa) !important;
  color: var(--erp-kpi-tone) !important;
  -webkit-text-fill-color: var(--erp-kpi-tone) !important;
  box-shadow: none !important;
  font-size: 17px !important;
}
html[data-auth-ready="app"] body[data-route] #app-content :is(
  .bimas-kpi,.bimas-auto-kpi-card,.kpi-card,.metric-card,.stat-card,.stats-card,
  .dash-kpi,.ceo-kpi,.dashboard-metric-card,.notifications-kpi-card,
  [class*="-kpi-card"],[class*="-metric-card"],[class*="-stat-card"]
) :is(.material-symbols-outlined) {
  color: var(--erp-kpi-tone) !important;
  -webkit-text-fill-color: var(--erp-kpi-tone) !important;
  font-size: 17px !important;
}

html[data-auth-ready="app"] body[data-route] #app-content :is(
  .bimas-kpi-label,.kpi-label,.metric-label,.stat-label,
  [class*="-kpi-label"],[class*="-metric-label"],[class*="-stat-label"]
) {
  color: #49627a !important;
  font: 720 9px/1.15 var(--bvh-font-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html[data-auth-ready="app"] body[data-route] #app-content :is(
  .bimas-kpi-value,.kpi-value,.metric-value,.stat-value,
  [class*="-kpi-value"],[class*="-metric-value"],[class*="-stat-value"]
) {
  color: var(--bvh-ink) !important;
  font: 800 16px/1.08 var(--bvh-font-display) !important;
  letter-spacing: -.025em !important;
}
html[data-auth-ready="app"] body[data-route] #app-content :is(
  .bimas-kpi-sub,.kpi-sub,.metric-sub,.stat-sub,
  [class*="-kpi-sub"],[class*="-metric-sub"],[class*="-stat-sub"]
) {
  color: var(--bvh-muted) !important;
  font: 500 8.5px/1.2 var(--bvh-font-body) !important;
  opacity: 1 !important;
}

/* Legacy and specialist modules use semantic metric containers instead of
   the shared KPI class names. Bring those surfaces into the same system. */
html[data-auth-ready="app"] body[data-route] #app-content :is(
  .ad-audit-metrics,.ad-metrics,.af-kpis,.an-metrics,.bi-category-kpis,
  .bi-exec-kpi-grid,.bkr-metrics,.bm-kpis,.bom-w-metrics,.calendar-metrics,
  .crw-figures,.ex-metrics,.fr-kpis,.hrs-ref-metrics,.hrs-metrics,.ic-kpis,
  .ip-kpis,.ivw-metrics,.oad-metrics,.oc-attendance-metrics,.oc-kpis,.oc-stats,
  .ocr-metrics,.ops-hub-kpis,.pcw-figures,.pdw-figures,.pfi-command-kpis,
  .pfo-kpis,.pts-kpi-grid,.qc-hero-metrics,.qtw-stats,.sales-metrics,.metrics
) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit,minmax(155px,1fr)) !important;
  gap: 9px !important;
  align-items: stretch !important;
  margin: 0 0 12px !important;
}
html[data-auth-ready="app"] body[data-route] #app-content :is(
  .ad-audit-metrics,.ad-metrics,.af-kpis,.an-metrics,.bi-category-kpis,
  .bi-exec-kpi-grid,.bkr-metrics,.bm-kpis,.bom-w-metrics,.calendar-metrics,
  .crw-figures,.ex-metrics,.fr-kpis,.hrs-ref-metrics,.hrs-metrics,.ic-kpis,
  .ip-kpis,.ivw-metrics,.oad-metrics,.oc-attendance-metrics,.oc-kpis,.oc-stats,
  .ocr-metrics,.ops-hub-kpis,.pcw-figures,.pdw-figures,.pfi-command-kpis,
  .pfo-kpis,.pts-kpi-grid,.qc-hero-metrics,.qtw-stats,.sales-metrics,.metrics
)>*,
html[data-auth-ready="app"] body[data-route] #app-content :is(
  .fin-mobile-kpi,.oad-metric,.ocr-tile,.omd-indicator
) {
  min-width: 0 !important;
  min-height: 70px !important;
  padding: 9px 10px !important;
  border: 1px solid var(--bvh-line) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg,#fff,#f8fbfd) !important;
  color: var(--bvh-ink) !important;
  box-shadow: 0 5px 15px rgba(15,39,66,.045) !important;
  transform: none !important;
}
html[data-auth-ready="app"] body[data-route] #app-content .pdw-figure {
  display: grid !important;
  grid-template-columns: 34px minmax(0,1fr) !important;
  align-content: center !important;
  align-items: center !important;
  gap: 1px 9px !important;
}
html[data-auth-ready="app"] body[data-route] #app-content .pdw-figure>.pdw-icon:first-child {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 8px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
html[data-auth-ready="app"] body[data-route] #app-content .pdw-figure>span:not(.pdw-icon) {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
html[data-auth-ready="app"] body[data-route] #app-content .pdw-figure small {
  color: #49627a !important;
  font: 720 9px/1.15 var(--bvh-font-body) !important;
}
html[data-auth-ready="app"] body[data-route] #app-content .pdw-figure strong {
  color: var(--bvh-ink) !important;
  font: 800 16px/1.08 var(--bvh-font-display) !important;
}
html[data-auth-ready="app"] body[data-route] #app-content .pdw-figure em {
  color: var(--bvh-muted) !important;
  font: 500 8.5px/1.2 var(--bvh-font-body) !important;
}
html[data-auth-ready="app"] body[data-route] #app-content .pdw-figure>.pdw-icon:last-child { display: none !important; }

html[data-auth-ready="app"] body[data-route] #app-content :is(
  .ad-audit-metrics,.ad-metrics,.af-kpis,.an-metrics,.bi-category-kpis,
  .bi-exec-kpi-grid,.bkr-metrics,.bm-kpis,.bom-w-metrics,.calendar-metrics,
  .crw-figures,.ex-metrics,.fr-kpis,.hrs-ref-metrics,.hrs-metrics,.ic-kpis,
  .ip-kpis,.ivw-metrics,.oad-metrics,.oc-attendance-metrics,.oc-kpis,.oc-stats,
  .ocr-metrics,.ops-hub-kpis,.pcw-figures,.pfi-command-kpis,.pfo-kpis,
  .pts-kpi-grid,.qc-hero-metrics,.qtw-stats,.sales-metrics,.metrics
)>* strong,
html[data-auth-ready="app"] body[data-route] #app-content :is(
  .fin-mobile-kpi,.oad-metric,.ocr-tile,.omd-indicator
) strong {
  color: var(--bvh-ink) !important;
  font: 800 16px/1.08 var(--bvh-font-display) !important;
  letter-spacing: -.025em !important;
}
html[data-auth-ready="app"] body[data-route] #app-content :is(
  .ad-audit-metrics,.ad-metrics,.af-kpis,.an-metrics,.bi-category-kpis,
  .bi-exec-kpi-grid,.bkr-metrics,.bm-kpis,.bom-w-metrics,.calendar-metrics,
  .crw-figures,.ex-metrics,.fr-kpis,.hrs-ref-metrics,.hrs-metrics,.ic-kpis,
  .ip-kpis,.ivw-metrics,.oad-metrics,.oc-attendance-metrics,.oc-kpis,.oc-stats,
  .ocr-metrics,.ops-hub-kpis,.pcw-figures,.pfi-command-kpis,.pfo-kpis,
  .pts-kpi-grid,.qc-hero-metrics,.qtw-stats,.sales-metrics,.metrics
)>* :is(span:not(.material-symbols-outlined),small,em),
html[data-auth-ready="app"] body[data-route] #app-content :is(
  .fin-mobile-kpi,.oad-metric,.ocr-tile,.omd-indicator
) :is(span:not(.material-symbols-outlined),small,em) {
  font-family: var(--bvh-font-body) !important;
  line-height: 1.25 !important;
}

/* Icon-font integrity. KPI, table and button typography must never turn a
   Material Symbols token (for example "groups") into visible body text. */
html[data-auth-ready="app"] body[data-route] #app-content .material-symbols-outlined {
  font-family: "Material Symbols Local", "Material Symbols Outlined", sans-serif !important;
  font-weight: normal !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-feature-settings: "liga" !important;
  font-feature-settings: "liga" !important;
}

/* Legacy department workspaces intentionally ship high-specificity card rules.
   This compatibility shield makes the shared compact metric contract decisive
   without reaching into forms, document layouts or workflow panels. */
html[data-auth-ready="app"] body[data-route] #app-content#app-content#app-content#app-content :is(
  .ad-audit-metrics,.ad-metrics,.af-kpis,.an-metrics,.bi-category-kpis,
  .bi-exec-kpi-grid,.bkr-metrics,.bm-kpis,.bom-w-metrics,.calendar-metrics,
  .crw-figures,.ex-metrics,.fr-kpis,.hrs-ref-metrics,.hrs-metrics,.ic-kpis,
  .ip-kpis,.ivw-metrics,.oad-metrics,.oc-attendance-metrics,.oc-kpis,.oc-stats,
  .ocr-metrics,.ops-hub-kpis,.pcw-figures,.pdw-figures,.pfi-command-kpis,
  .pfo-kpis,.pts-kpi-grid,.qc-hero-metrics,.qtw-stats,.sales-metrics,.metrics
) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit,minmax(155px,1fr)) !important;
  gap: 9px !important;
  align-items: stretch !important;
  margin: 0 0 12px !important;
}
html[data-auth-ready="app"] body[data-route] #app-content#app-content#app-content#app-content :is(
  .ad-audit-metrics,.ad-metrics,.af-kpis,.an-metrics,.bi-category-kpis,
  .bi-exec-kpi-grid,.bkr-metrics,.bm-kpis,.bom-w-metrics,.calendar-metrics,
  .crw-figures,.ex-metrics,.fr-kpis,.hrs-ref-metrics,.hrs-metrics,.ic-kpis,
  .ip-kpis,.ivw-metrics,.oad-metrics,.oc-attendance-metrics,.oc-kpis,.oc-stats,
  .ocr-metrics,.ops-hub-kpis,.pcw-figures,.pdw-figures,.pfi-command-kpis,
  .pfo-kpis,.pts-kpi-grid,.qc-hero-metrics,.qtw-stats,.sales-metrics,.metrics
)>*,
html[data-auth-ready="app"] body[data-route] #app-content#app-content#app-content#app-content :is(
  .fin-mobile-kpi,.oad-metric,.ocr-tile,.omd-indicator
) {
  height: auto !important;
  min-height: 70px !important;
  padding: 9px 10px !important;
  border: 1px solid var(--bvh-line) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg,#fff,#f8fbfd) !important;
  color: var(--bvh-ink) !important;
  box-shadow: 0 5px 15px rgba(15,39,66,.045) !important;
  overflow: hidden !important;
}
html[data-auth-ready="app"] body[data-route] #app-content#app-content#app-content#app-content :is(
  .ad-audit-metrics,.ad-metrics,.af-kpis,.an-metrics,.bi-category-kpis,
  .bi-exec-kpi-grid,.bkr-metrics,.bm-kpis,.bom-w-metrics,.calendar-metrics,
  .crw-figures,.ex-metrics,.fr-kpis,.hrs-ref-metrics,.hrs-metrics,.ic-kpis,
  .ip-kpis,.ivw-metrics,.oad-metrics,.oc-attendance-metrics,.oc-kpis,.oc-stats,
  .ocr-metrics,.ops-hub-kpis,.pcw-figures,.pfi-command-kpis,.pfo-kpis,
  .pts-kpi-grid,.qc-hero-metrics,.qtw-stats,.sales-metrics,.metrics
)>* strong,
html[data-auth-ready="app"] body[data-route] #app-content#app-content#app-content#app-content :is(
  .fin-mobile-kpi,.oad-metric,.ocr-tile,.omd-indicator
) strong {
  color: var(--bvh-ink) !important;
  font: 800 16px/1.08 var(--bvh-font-display) !important;
  letter-spacing: -.025em !important;
}
html[data-auth-ready="app"] body[data-route] #app-content#app-content#app-content#app-content :is(
  .ad-audit-metrics,.ad-metrics,.af-kpis,.an-metrics,.bi-category-kpis,
  .bi-exec-kpi-grid,.bkr-metrics,.bm-kpis,.bom-w-metrics,.calendar-metrics,
  .crw-figures,.ex-metrics,.fr-kpis,.hrs-ref-metrics,.hrs-metrics,.ic-kpis,
  .ip-kpis,.ivw-metrics,.oad-metrics,.oc-attendance-metrics,.oc-kpis,.oc-stats,
  .ocr-metrics,.ops-hub-kpis,.pcw-figures,.pfi-command-kpis,.pfo-kpis,
  .pts-kpi-grid,.qc-hero-metrics,.qtw-stats,.sales-metrics,.metrics
)>* :is(small,em),
html[data-auth-ready="app"] body[data-route] #app-content#app-content#app-content#app-content :is(
  .fin-mobile-kpi,.oad-metric,.ocr-tile,.omd-indicator
) :is(small,em) {
  color: var(--bvh-muted) !important;
  font: 500 8.5px/1.2 var(--bvh-font-body) !important;
}

/* Command-centre cards are the design reference shown by the user. */
.dcc-global-centres { padding: 16px !important; }
.dcc-global-centres > header { margin-bottom: 12px !important; }
.dcc-domain-grid { gap: 9px !important; }
.dcc-domain-grid > a {
  min-height: 102px !important;
  padding: 12px 13px !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg,#fff,#f7fafc) !important;
  box-shadow: none !important;
}

/* ── Dark mode ──────────────────────────────────────────────────────────── */
html[data-theme="dark"][data-auth-ready="app"] {
  --bvh-ink: #edf6ff;
  --bvh-muted: #9eb2c5;
  --bvh-line: #29445c;
  --bvh-soft: #0b1d30;
  --bvh-paper: #0d2136;
  --bvh-shadow: 0 8px 22px rgba(0,0,0,.2);
}
html[data-theme="dark"][data-auth-ready="app"] body[data-route] #app-content table:not(.calendar-grid):not(.gantt-table):not(.label-sheet) thead th {
  color: #c8d9e8 !important;
  background: #132b40 !important;
}
html[data-theme="dark"][data-auth-ready="app"] body[data-route] #app-content table:not(.calendar-grid):not(.gantt-table):not(.label-sheet) tbody td {
  border-color: #294157 !important;
}
html[data-theme="dark"][data-auth-ready="app"] body[data-route] #app-content :is(
  .bimas-kpi,.bimas-auto-kpi-card,.kpi-card,.metric-card,.stat-card,.stats-card,
  .dash-kpi,.ceo-kpi,.dashboard-metric-card,.notifications-kpi-card,
  [class*="-kpi-card"],[class*="-metric-card"],[class*="-stat-card"]
) {
  background: linear-gradient(145deg,#10283f,#0d2035) !important;
  border-color: #29445c !important;
}
html[data-theme="dark"][data-auth-ready="app"] body[data-route] #app-content :is(
  .ad-audit-metrics,.ad-metrics,.af-kpis,.an-metrics,.bi-category-kpis,
  .bi-exec-kpi-grid,.bkr-metrics,.bm-kpis,.bom-w-metrics,.calendar-metrics,
  .crw-figures,.ex-metrics,.fr-kpis,.hrs-ref-metrics,.hrs-metrics,.ic-kpis,
  .ip-kpis,.ivw-metrics,.oad-metrics,.oc-attendance-metrics,.oc-kpis,.oc-stats,
  .ocr-metrics,.ops-hub-kpis,.pcw-figures,.pdw-figures,.pfi-command-kpis,
  .pfo-kpis,.pts-kpi-grid,.qc-hero-metrics,.qtw-stats,.sales-metrics,.metrics
)>*,
html[data-theme="dark"][data-auth-ready="app"] body[data-route] #app-content :is(
  .fin-mobile-kpi,.oad-metric,.ocr-tile,.omd-indicator
) {
  background: linear-gradient(145deg,#10283f,#0d2035) !important;
  border-color: #29445c !important;
}
html[data-theme="dark"][data-auth-ready="app"] body[data-route] #app-content :is(
  .bimas-kpi,.bimas-auto-kpi-card,.kpi-card,.metric-card,.stat-card,.stats-card,
  .dash-kpi,.ceo-kpi,.dashboard-metric-card,.notifications-kpi-card,
  [class*="-kpi-card"],[class*="-metric-card"],[class*="-stat-card"]
) :is(.bimas-kpi-label,.kpi-label,.metric-label,.stat-label,[class*="-kpi-label"],[class*="-metric-label"],[class*="-stat-label"]) { color: #afc3d5 !important; }
html[data-theme="dark"][data-auth-ready="app"] body[data-route] #app-content :is(
  .bimas-kpi,.bimas-auto-kpi-card,.kpi-card,.metric-card,.stat-card,.stats-card,
  .dash-kpi,.ceo-kpi,.dashboard-metric-card,.notifications-kpi-card,
  [class*="-kpi-card"],[class*="-metric-card"],[class*="-stat-card"]
) :is(.bimas-kpi-sub,.kpi-sub,.metric-sub,.stat-sub,[class*="-kpi-sub"],[class*="-metric-sub"],[class*="-stat-sub"]) { color: #91a9bd !important; }

/* ── Responsive density ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  html[data-auth-ready="app"] body[data-route] #app-content :is(
    .bimas-kpi-grid,.bimas-auto-kpi-strip,.dashboard-kpis,.dashboard-metric-grid,
    [class*="-kpi-grid"],[class*="-metric-grid"],[class*="-stats-grid"],[class$="-kpis"]
  ) { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  html[data-auth-ready="app"] body[data-route] #app-content :is(
    .ad-audit-metrics,.ad-metrics,.af-kpis,.an-metrics,.bi-category-kpis,
    .bi-exec-kpi-grid,.bkr-metrics,.bm-kpis,.bom-w-metrics,.calendar-metrics,
    .crw-figures,.ex-metrics,.fr-kpis,.hrs-ref-metrics,.hrs-metrics,.ic-kpis,
    .ip-kpis,.ivw-metrics,.oad-metrics,.oc-attendance-metrics,.oc-kpis,.oc-stats,
    .ocr-metrics,.ops-hub-kpis,.pcw-figures,.pdw-figures,.pfi-command-kpis,
    .pfo-kpis,.pts-kpi-grid,.qc-hero-metrics,.qtw-stats,.sales-metrics,.metrics
  ) { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 640px) {
  html[data-auth-ready="app"] body[data-route] #app-content { font-size: 11.5px; }
  html[data-auth-ready="app"] body[data-route] #app-content :is(
    .bimas-kpi,.bimas-auto-kpi-card,.kpi-card,.metric-card,.stat-card,.stats-card,
    .dash-kpi,.ceo-kpi,.dashboard-metric-card,.notifications-kpi-card,
    [class*="-kpi-card"],[class*="-metric-card"],[class*="-stat-card"]
  ) { min-height: 66px !important; padding: 8px 9px !important; }
  html[data-auth-ready="app"] body[data-route] #app-content :is(
    .ad-audit-metrics,.ad-metrics,.af-kpis,.an-metrics,.bi-category-kpis,
    .bi-exec-kpi-grid,.bkr-metrics,.bm-kpis,.bom-w-metrics,.calendar-metrics,
    .crw-figures,.ex-metrics,.fr-kpis,.hrs-ref-metrics,.hrs-metrics,.ic-kpis,
    .ip-kpis,.ivw-metrics,.oad-metrics,.oc-attendance-metrics,.oc-kpis,.oc-stats,
    .ocr-metrics,.ops-hub-kpis,.pcw-figures,.pdw-figures,.pfi-command-kpis,
    .pfo-kpis,.pts-kpi-grid,.qc-hero-metrics,.qtw-stats,.sales-metrics,.metrics
  )>* { min-height: 66px !important; padding: 8px 9px !important; }
  .dcc-domain-grid > a { min-height: 92px !important; }
}

@media (max-width: 430px) {
  html[data-auth-ready="app"] body[data-route] #app-content :is(
    .bimas-kpi-grid,.bimas-auto-kpi-strip,.dashboard-kpis,.dashboard-metric-grid,
    [class*="-kpi-grid"],[class*="-metric-grid"],[class*="-stats-grid"],[class$="-kpis"]
  ) { grid-template-columns: 1fr !important; }
  html[data-auth-ready="app"] body[data-route] #app-content :is(
    .ad-audit-metrics,.ad-metrics,.af-kpis,.an-metrics,.bi-category-kpis,
    .bi-exec-kpi-grid,.bkr-metrics,.bm-kpis,.bom-w-metrics,.calendar-metrics,
    .crw-figures,.ex-metrics,.fr-kpis,.hrs-ref-metrics,.hrs-metrics,.ic-kpis,
    .ip-kpis,.ivw-metrics,.oad-metrics,.oc-attendance-metrics,.oc-kpis,.oc-stats,
    .ocr-metrics,.ops-hub-kpis,.pcw-figures,.pdw-figures,.pfi-command-kpis,
    .pfo-kpis,.pts-kpi-grid,.qc-hero-metrics,.qtw-stats,.sales-metrics,.metrics
  ) { grid-template-columns: 1fr !important; }
  .dcc-sidebar-heading { padding-inline: 3px; }
}

/* Match the legacy compatibility shield at responsive breakpoints. */
@media (max-width: 900px) {
  html[data-auth-ready="app"] body[data-route] #app-content#app-content#app-content#app-content :is(
    .ad-audit-metrics,.ad-metrics,.af-kpis,.an-metrics,.bi-category-kpis,
    .bi-exec-kpi-grid,.bkr-metrics,.bm-kpis,.bom-w-metrics,.calendar-metrics,
    .crw-figures,.ex-metrics,.fr-kpis,.hrs-ref-metrics,.hrs-metrics,.ic-kpis,
    .ip-kpis,.ivw-metrics,.oad-metrics,.oc-attendance-metrics,.oc-kpis,.oc-stats,
    .ocr-metrics,.ops-hub-kpis,.pcw-figures,.pdw-figures,.pfi-command-kpis,
    .pfo-kpis,.pts-kpi-grid,.qc-hero-metrics,.qtw-stats,.sales-metrics,.metrics
  ) { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 640px) {
  html[data-auth-ready="app"] body[data-route] #app-content#app-content#app-content#app-content :is(
    .ad-audit-metrics,.ad-metrics,.af-kpis,.an-metrics,.bi-category-kpis,
    .bi-exec-kpi-grid,.bkr-metrics,.bm-kpis,.bom-w-metrics,.calendar-metrics,
    .crw-figures,.ex-metrics,.fr-kpis,.hrs-ref-metrics,.hrs-metrics,.ic-kpis,
    .ip-kpis,.ivw-metrics,.oad-metrics,.oc-attendance-metrics,.oc-kpis,.oc-stats,
    .ocr-metrics,.ops-hub-kpis,.pcw-figures,.pdw-figures,.pfi-command-kpis,
    .pfo-kpis,.pts-kpi-grid,.qc-hero-metrics,.qtw-stats,.sales-metrics,.metrics
  )>*,
  html[data-auth-ready="app"] body[data-route] #app-content#app-content#app-content#app-content :is(
    .fin-mobile-kpi,.oad-metric,.ocr-tile,.omd-indicator
  ) {
    height: auto !important;
    min-height: 72px !important;
    max-height: none !important;
    padding: 8px 9px !important;
  }

  /* PFI summary cards carry a label, value and operational note. A fixed
     compact height clipped the value on phones, so use a horizontal,
     content-aware card at this breakpoint. */
  html[data-auth-ready="app"] body[data-route="pfi"] #app-content#app-content#app-content#app-content .pfi-command-kpis > .pfr-overview-tile {
    display: grid !important;
    grid-template-columns: 36px minmax(0,1fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    align-content: center !important;
    gap: 0 10px !important;
    height: auto !important;
    min-height: 84px !important;
    max-height: none !important;
    padding: 10px 11px !important;
    overflow: visible !important;
  }
  html[data-auth-ready="app"] body[data-route="pfi"] #app-content#app-content#app-content#app-content .pfi-command-kpis > .pfr-overview-tile .pfi-summary-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    margin: 0 !important;
  }
  html[data-auth-ready="app"] body[data-route="pfi"] #app-content#app-content#app-content#app-content .pfi-command-kpis > .pfr-overview-tile .pfi-summary-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  html[data-auth-ready="app"] body[data-route="pfi"] #app-content#app-content#app-content#app-content .pfi-command-kpis > .pfr-overview-tile :is(.pfi-summary-label,.pfi-summary-value,.pfi-summary-note) {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  html[data-auth-ready="app"] body[data-route="pfi"] #app-content#app-content#app-content#app-content .pfi-command-kpis > .pfr-overview-tile .pfi-summary-label {
    font: 700 9px/1.25 var(--bvh-font-body) !important;
    color: #49627a !important;
    text-transform: none !important;
  }
  html[data-auth-ready="app"] body[data-route="pfi"] #app-content#app-content#app-content#app-content .pfi-command-kpis > .pfr-overview-tile .pfi-summary-value {
    font: 800 15px/1.2 var(--bvh-font-display) !important;
    color: var(--bvh-ink) !important;
    overflow-wrap: anywhere !important;
  }
  html[data-auth-ready="app"] body[data-route="pfi"] #app-content#app-content#app-content#app-content .pfi-command-kpis > .pfr-overview-tile .pfi-summary-note {
    font: 500 8px/1.25 var(--bvh-font-body) !important;
    color: var(--bvh-muted) !important;
  }
}

@media (max-width: 430px) {
  html[data-auth-ready="app"] body[data-route] #app-content#app-content#app-content#app-content :is(
    .ad-audit-metrics,.ad-metrics,.af-kpis,.an-metrics,.bi-category-kpis,
    .bi-exec-kpi-grid,.bkr-metrics,.bm-kpis,.bom-w-metrics,.calendar-metrics,
    .crw-figures,.ex-metrics,.fr-kpis,.hrs-ref-metrics,.hrs-metrics,.ic-kpis,
    .ip-kpis,.ivw-metrics,.oad-metrics,.oc-attendance-metrics,.oc-kpis,.oc-stats,
    .ocr-metrics,.ops-hub-kpis,.pcw-figures,.pdw-figures,.pfi-command-kpis,
    .pfo-kpis,.pts-kpi-grid,.qc-hero-metrics,.qtw-stats,.sales-metrics,.metrics
  ) { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-auth-ready="app"] #app-sidebar *,
  html[data-auth-ready="app"] body[data-route] #app-content * { transition: none !important; }
}

@media print {
  .dcc-sidebar-heading { display: none !important; }
}