/* BIMAS KPI stability layer
   Keeps module-owned KPI markup intact and prevents values/labels from colliding
   at desktop, tablet and phone widths. Loaded last by the module loader. */

#app-content :is(
  .af-kpi,.ocr-tile,.oad-metric,.ops-hub-kpi,.pfi-summary-tile,.sof-summary-tile,
  .invoice-kpi,.inv-kpi-card,.inv-overview-kpi,.production-kpi-card,.prod-dash-kpi,
  .hr-kpi-card,.payroll-kpi-card,.accounts-kpi-card,.crm-kpi-card,.cust-kpi-card,
  .dn-kpi-card,.drn-kpi-card,.expenses-kpi-card,.fleet-kpi-card,.fr-kpi,.gl-kpi-card,
  .imprest-kpi-card,.notifications-kpi-card,.reports-hub-kpi,.reports-report-kpi,
  .rss-kpi,.sales-perf-kpi,.sec-kpi-card,.voucher-kpi-card,.bmv3-kpi,.bimas-kpi
) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#app-content :is(
  .af-kpi,.ocr-tile,.oad-metric,.ops-hub-kpi,.pfi-summary-tile,.sof-summary-tile,
  .invoice-kpi,.inv-kpi-card,.inv-overview-kpi,.production-kpi-card,.prod-dash-kpi,
  .hr-kpi-card,.payroll-kpi-card,.accounts-kpi-card,.crm-kpi-card,.cust-kpi-card,
  .dn-kpi-card,.drn-kpi-card,.expenses-kpi-card,.fleet-kpi-card,.fr-kpi,.gl-kpi-card,
  .imprest-kpi-card,.notifications-kpi-card,.reports-hub-kpi,.reports-report-kpi,
  .rss-kpi,.sales-perf-kpi,.sec-kpi-card,.voucher-kpi-card,.bmv3-kpi,.bimas-kpi
) > * {
  min-width: 0 !important;
}

#app-content :is(
  .af-kpi strong,.ocr-tile strong,.oad-metric strong,.ops-hub-kpi strong,
  .pfi-summary-value,.sof-summary-value,.invoice-kpi strong,.inv-kpi-card strong,
  .inv-overview-kpi strong,.production-kpi-card strong,.prod-dash-kpi strong,
  .hr-kpi-card strong,.payroll-kpi-card strong,.accounts-kpi-card strong,
  .crm-kpi-card strong,.cust-kpi-card strong,.dn-kpi-card strong,.drn-kpi-card strong,
  .expenses-kpi-card strong,.fleet-kpi-card strong,.fr-kpi strong,.gl-kpi-card strong,
  .imprest-kpi-card strong,.notifications-kpi-card strong,.reports-hub-kpi strong,
  .reports-report-kpi strong,.rss-kpi strong,.sales-perf-kpi strong,.sec-kpi-card strong,
  .voucher-kpi-card strong,.bmv3-kpi strong,.bimas-kpi-value
) {
  display: block !important;
  max-width: 100% !important;
  font-size: clamp(.92rem, 1.1vw, 1.2rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

#app-content :is(
  .af-kpi b,.af-kpi small,.ocr-tile span,.ocr-tile small,.oad-metric span,.oad-metric small,
  .ops-hub-kpi span,.ops-hub-kpi small,.pfi-summary-label,.pfi-summary-note,
  .sof-summary-label,.sof-summary-note,.invoice-kpi span,.invoice-kpi small,
  .bimas-kpi-label,.bimas-kpi-sub
) {
  max-width: 100% !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Keep icon-font fallbacks inside their circle. If the external glyph font is
   slow or unavailable, its plain-text token must never cover KPI content. */
#app-content .af-kpi .af-kpi-icon {
  flex: 0 0 2.8rem !important;
  width: 2.8rem !important;
  height: 2.8rem !important;
  overflow: hidden !important;
}

#app-content .af-kpi .af-kpi-icon > .material-symbols-outlined {
  display: block !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  overflow: hidden !important;
  font-family: "Material Symbols Outlined" !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-auth-ready="app"] body #app-content#app-content .af-shell .af-kpis,
html[data-auth-ready="app"] body #app-content#app-content :is(
  .af-kpis,.ocr-kpis,.oad-metrics,.ops-hub-kpis,.pfi-summary-grid,.sof-summary-strip,
  .invoice-kpis,.inv-kpi-grid,.inv-overview-kpis,.production-kpi-grid,.prod-dash-kpis,
  .hr-kpi-grid,.payroll-kpi-grid,.accounts-kpi-grid,.crm-kpi-grid,.cust-kpi-grid,
  .dn-kpi-grid,.drn-kpi-grid,.expenses-kpi-grid,.fleet-kpi-grid,.gl-kpi-grid,
  .imprest-kpi-grid,.notifications-kpi-grid,.reports-hub-kpis,.reports-report-kpis,
  .sales-perf-kpis,.sec-kpi-grid,.voucher-kpi-grid,.bimas-kpi-grid
) {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(10.75rem, 1fr)) !important;
  gap: .65rem !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 760px) {
  html[data-auth-ready="app"] body #app-content#app-content .af-shell .af-kpis,
  html[data-auth-ready="app"] body #app-content#app-content :is(
    .af-kpis,.ocr-kpis,.oad-metrics,.ops-hub-kpis,.pfi-summary-grid,.sof-summary-strip,
    .invoice-kpis,.inv-kpi-grid,.inv-overview-kpis,.production-kpi-grid,.prod-dash-kpis,
    .hr-kpi-grid,.payroll-kpi-grid,.accounts-kpi-grid,.crm-kpi-grid,.cust-kpi-grid,
    .dn-kpi-grid,.drn-kpi-grid,.expenses-kpi-grid,.fleet-kpi-grid,.gl-kpi-grid,
    .imprest-kpi-grid,.notifications-kpi-grid,.reports-hub-kpis,.reports-report-kpis,
    .sales-perf-kpis,.sec-kpi-grid,.voucher-kpi-grid,.bimas-kpi-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 420px) {
  html[data-auth-ready="app"] body #app-content#app-content .af-shell .af-kpis,
  html[data-auth-ready="app"] body #app-content#app-content :is(
    .af-kpis,.ocr-kpis,.oad-metrics,.ops-hub-kpis,.pfi-summary-grid,.sof-summary-strip,
    .invoice-kpis,.inv-kpi-grid,.inv-overview-kpis,.production-kpi-grid,.prod-dash-kpis,
    .hr-kpi-grid,.payroll-kpi-grid,.accounts-kpi-grid,.crm-kpi-grid,.cust-kpi-grid,
    .dn-kpi-grid,.drn-kpi-grid,.expenses-kpi-grid,.fleet-kpi-grid,.gl-kpi-grid,
    .imprest-kpi-grid,.notifications-kpi-grid,.reports-hub-kpis,.reports-report-kpis,
    .sales-perf-kpis,.sec-kpi-grid,.voucher-kpi-grid,.bimas-kpi-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}