/* AR Beam screen color accents — Operations / Timecards / Payroll & Payments.
   Scoped by body classes set by screen-color-pop.js. Design intent:
   color-coded module accents for wayfinding + livelier surfaces, while
   preserving all status semantics (green=approve, red=decline, amber=pending).
   Palette matches the AR Beam design system (#2d8cff blue, #43d9d6 teal). */

/* ============ OPERATIONS — blue-gray NEUMORPHIC surfaces ============
   Replaces the flat gray backgrounds with a blue-tinted neu palette:
   raised soft-extruded panels, inset wells for inputs/scroll areas. */
body.arb-screen-operations.arb-screen-operations .portal-main,
body.arb-screen-operations.arb-screen-operations .view {
  background: #e7edf7 !important;
}
body.arb-screen-operations.arb-screen-operations :where(.ops-panel, .ops-matrix, .ops-pctgrid, .ops-donuts > *, .panel, .stat, .summary-strip > *, .ops-addcab, .ops-modal, .glass, .glass-soft, .pm-table-wrap, .pm-tracker, .pm-stat, .pm-ingest) {
  background: #e7edf7 !important;
  box-shadow: 9px 9px 18px #c3cfe1, -9px -9px 18px #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  border-radius: 16px !important;
}
/* keep the module accent on panels */
body.arb-screen-operations.arb-screen-operations .ops-panel,
body.arb-screen-operations.arb-screen-operations .panel {
  border-left: 4px solid #2d8cff !important;
}
/* inset wells: inputs, pre blocks, scroll regions, table bodies */
body.arb-screen-operations.arb-screen-operations :where(input, select, textarea, .ops-pre, .ops-scroll, .ops-table, .pm-table-wrap table, .mtx-scroll) {
  background: #e7edf7 !important;
  box-shadow: inset 5px 5px 11px #c3cfe1, inset -5px -5px 11px #ffffff !important;
  border: 0 !important;
  border-radius: 10px !important;
}
body.arb-screen-operations.arb-screen-operations .ops-table thead th {
  background: linear-gradient(180deg, #dcecff, #cfe4ff) !important;
  box-shadow: none !important;
}
body.arb-screen-operations.arb-screen-operations .ops-table tbody tr:hover {
  background: rgba(45, 140, 255, .10) !important;
}
/* raised neu buttons/tabs that are not already colored */
body.arb-screen-operations.arb-screen-operations .ops-subnav button,
body.arb-screen-operations.arb-screen-operations .ops-subnav .ops-tab {
  background: #e7edf7 !important;
  box-shadow: 5px 5px 11px #c3cfe1, -5px -5px 11px #ffffff !important;
  border: 0 !important;
  color: #1550a8 !important;
  font-weight: 800 !important;
}
body.arb-screen-operations.arb-screen-operations .ops-subnav button.on,
body.arb-screen-operations.arb-screen-operations .ops-subnav .ops-tab.on,
body.arb-screen-operations.arb-screen-operations .ops-subnav button.active {
  background: linear-gradient(135deg, #2d8cff, #43d9d6) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(45, 140, 255, .32) !important;
}

/* ============ OPERATIONS (original accents) ============ */
body.arb-screen-operations.arb-screen-operations .ops-toolbar,
body.arb-screen-operations.arb-screen-operations .ops-panel > h2,
body.arb-screen-operations.arb-screen-operations .ops-panel > h3:first-child,
body.arb-screen-operations.arb-screen-operations .ops-toolbar-title {
  color: #ffffff !important;
}
body.arb-screen-operations.arb-screen-operations .ops-toolbar {
  background: linear-gradient(120deg, #2d8cff, #1f6fe0 55%, #14a0b4) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  box-shadow: 0 10px 24px rgba(45, 140, 255, .28) !important;
}
body.arb-screen-operations.arb-screen-operations .ops-toolbar :where(h2,h3,span,div,button) {
  color: #ffffff !important;
}
body.arb-screen-operations.arb-screen-operations .ops-panel {
  background: linear-gradient(180deg, rgba(45, 140, 255, .07), rgba(20, 160, 180, .04)) !important;
  border: 1px solid rgba(45, 140, 255, .22) !important;
  border-left: 4px solid #2d8cff !important;
  border-radius: 14px !important;
}
body.arb-screen-operations.arb-screen-operations .ops-table thead th {
  background: linear-gradient(180deg, #dcecff, #cfe4ff) !important;
  color: #1550a8 !important;
  font-weight: 800 !important;
  border-bottom: 2px solid #9cc6ff !important;
}
body.arb-screen-operations.arb-screen-operations .ops-table tbody tr:hover {
  background: rgba(45, 140, 255, .08) !important;
}
body.arb-screen-operations.arb-screen-operations .ops-subnav button,
body.arb-screen-operations.arb-screen-operations .ops-subnav .ops-tab {
  border-radius: 999px !important;
}
body.arb-screen-operations.arb-screen-operations .ops-subnav button.on,
body.arb-screen-operations.arb-screen-operations .ops-subnav .ops-tab.on,
body.arb-screen-operations.arb-screen-operations .ops-subnav button.active {
  background: linear-gradient(135deg, #2d8cff, #43d9d6) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(45, 140, 255, .32) !important;
}
body.arb-screen-operations.arb-screen-operations .ops-addcab {
  border-left: 4px solid #14a0b4 !important;
  background: linear-gradient(180deg, rgba(20, 160, 180, .08), rgba(20, 160, 180, .03)) !important;
}
body.arb-screen-operations.arb-screen-operations .ops-donuts > * {
  border-radius: 14px !important;
}

/* ============ TIMECARDS — indigo / violet ============ */
body.arb-screen-timecards.arb-screen-timecards .ts-topbar {
  background: linear-gradient(120deg, #6a5cff, #5747e8 55%, #8b5cf6) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  box-shadow: 0 10px 24px rgba(106, 92, 255, .28) !important;
}
body.arb-screen-timecards.arb-screen-timecards .ts-topbar :where(h2,h3,span,div,button,.ts-title) {
  color: #ffffff !important;
}
body.arb-screen-timecards.arb-screen-timecards .ts-card-h {
  background: linear-gradient(120deg, rgba(106, 92, 255, .14), rgba(139, 92, 246, .08)) !important;
  border-left: 4px solid #6a5cff !important;
  border-radius: 12px !important;
  color: #312a86 !important;
}
body.arb-screen-timecards.arb-screen-timecards .ts-daycard {
  background: linear-gradient(180deg, rgba(106, 92, 255, .06), rgba(139, 92, 246, .03)) !important;
  border: 1px solid rgba(106, 92, 255, .20) !important;
  border-radius: 12px !important;
}
body.arb-screen-timecards.arb-screen-timecards .ts-daycard-hdr {
  background: linear-gradient(180deg, #e7e4ff, #dcd7ff) !important;
  color: #3b2fa0 !important;
  font-weight: 800 !important;
  border-radius: 10px 10px 0 0 !important;
}
body.arb-screen-timecards.arb-screen-timecards .ts-table thead th,
body.arb-screen-timecards.arb-screen-timecards .ts-logged-hdr {
  background: linear-gradient(180deg, #e7e4ff, #dcd7ff) !important;
  color: #3b2fa0 !important;
  font-weight: 800 !important;
  border-bottom: 2px solid #b9adff !important;
}
body.arb-screen-timecards.arb-screen-timecards .ts-table tbody tr:hover {
  background: rgba(106, 92, 255, .08) !important;
}
body.arb-screen-timecards.arb-screen-timecards .ts-col-total,
body.arb-screen-timecards.arb-screen-timecards .ts-cell-total,
body.arb-screen-timecards.arb-screen-timecards .ts-total,
body.arb-screen-timecards.arb-screen-timecards .ts-bd-total {
  color: #4c3ee0 !important;
  font-weight: 800 !important;
}
body.arb-screen-timecards.arb-screen-timecards .ts-stagebar {
  background: linear-gradient(90deg, #6a5cff, #8b5cf6) !important;
}
body.arb-screen-timecards.arb-screen-timecards .ts-chips > * {
  border-radius: 999px !important;
}

/* ============ PAYROLL & PAYMENTS — emerald / teal ============ */
body.arb-screen-payroll.arb-screen-payroll .portal-main > h2 + *,
body.arb-screen-payroll.arb-screen-payroll .paycomp-grp {
  border-radius: 14px !important;
}
body.arb-screen-payroll.arb-screen-payroll .paycomp-grp {
  background: linear-gradient(180deg, rgba(16, 163, 127, .07), rgba(20, 160, 180, .04)) !important;
  border: 1px solid rgba(16, 163, 127, .22) !important;
  border-left: 4px solid #10a37f !important;
}
body.arb-screen-payroll.arb-screen-payroll .paycomp-grp-head {
  background: linear-gradient(120deg, #10a37f, #0c8a6c 55%, #14a0b4) !important;
  color: #ffffff !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 12px 16px !important;
  box-shadow: 0 8px 20px rgba(16, 163, 127, .26) !important;
}
body.arb-screen-payroll.arb-screen-payroll .paycomp-grp-head :where(h2,h3,span,div,button,strong) {
  color: #ffffff !important;
}
body.arb-screen-payroll.arb-screen-payroll .paycomp-total,
body.arb-screen-payroll.arb-screen-payroll .paycomp-grp-total {
  color: #0a7a5e !important;
  font-weight: 800 !important;
}
body.arb-screen-payroll.arb-screen-payroll .paycomp-remit {
  border-left: 3px solid #14a0b4 !important;
  background: linear-gradient(180deg, rgba(20, 160, 180, .07), rgba(20, 160, 180, .03)) !important;
  border-radius: 10px !important;
}
body.arb-screen-payroll.arb-screen-payroll .paycomp-remit-ref {
  color: #0c7f96 !important;
  font-weight: 700 !important;
}
body.arb-screen-payroll.arb-screen-payroll .paycomp-archive-head {
  background: linear-gradient(180deg, #d7f3ea, #c6ecdf) !important;
  color: #0a7a5e !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
}
body.arb-screen-payroll.arb-screen-payroll .qbo-steps {
  background: linear-gradient(180deg, rgba(16, 163, 127, .06), rgba(16, 163, 127, .02)) !important;
  border: 1px solid rgba(16, 163, 127, .18) !important;
  border-radius: 12px !important;
}

/* Payroll overlay (payroll-adp.js) — stat cards, workflow panels, exceptions */
body.arb-screen-payroll.arb-screen-payroll .stat {
  background: linear-gradient(180deg, rgba(16, 163, 127, .12), rgba(20, 160, 180, .05)) !important;
  border: 1px solid rgba(16, 163, 127, .26) !important;
  border-radius: 14px !important;
}
body.arb-screen-payroll.arb-screen-payroll .stat-label {
  color: #0a7a5e !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}
body.arb-screen-payroll.arb-screen-payroll .stat-value {
  color: #0b3f33 !important;
}
body.arb-screen-payroll.arb-screen-payroll .stat-foot {
  color: #3d6b5e !important;
}
body.arb-screen-payroll.arb-screen-payroll .panel {
  border: 1px solid rgba(16, 163, 127, .20) !important;
  border-left: 4px solid #10a37f !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(16, 163, 127, .05), rgba(16, 163, 127, .015)) !important;
}
body.arb-screen-payroll.arb-screen-payroll .panel-head {
  background: linear-gradient(120deg, #10a37f, #0c8a6c 55%, #14a0b4) !important;
  color: #ffffff !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 12px 16px !important;
  margin: -1px -1px 0 -1px !important;
  box-shadow: 0 8px 20px rgba(16, 163, 127, .24) !important;
}
body.arb-screen-payroll.arb-screen-payroll .panel-head :where(h2,h3,h4,p,span,div,strong,button,small) {
  color: #ffffff !important;
}
body.arb-screen-payroll.arb-screen-payroll .panel-head .ghost-button,
body.arb-screen-payroll.arb-screen-payroll .panel-head button {
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .35) !important;
}
body.arb-screen-payroll.arb-screen-payroll .exc-row {
  border-left: 3px solid #e6a94a !important;
  border-radius: 10px !important;
}

/* Shared: section headings inside these screens get a colored accent bar */
body.arb-screen-operations.arb-screen-operations .portal-main h3,
body.arb-screen-timecards.arb-screen-timecards .portal-main h3,
body.arb-screen-payroll.arb-screen-payroll .portal-main h3,
body.arb-screen-reports.arb-screen-reports .portal-main h3,
body.arb-screen-applications.arb-screen-applications .portal-main h3 {
  position: relative;
  padding-left: 12px !important;
}
body.arb-screen-operations.arb-screen-operations .portal-main h3::before,
body.arb-screen-timecards.arb-screen-timecards .portal-main h3::before,
body.arb-screen-payroll.arb-screen-payroll .portal-main h3::before,
body.arb-screen-reports.arb-screen-reports .portal-main h3::before,
body.arb-screen-applications.arb-screen-applications .portal-main h3::before {
  content: "";
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 4px; border-radius: 4px;
}
body.arb-screen-operations.arb-screen-operations .portal-main h3::before { background: linear-gradient(180deg, #2d8cff, #43d9d6); }
body.arb-screen-timecards.arb-screen-timecards .portal-main h3::before { background: linear-gradient(180deg, #6a5cff, #8b5cf6); }
body.arb-screen-payroll.arb-screen-payroll .portal-main h3::before { background: linear-gradient(180deg, #10a37f, #14a0b4); }
body.arb-screen-reports.arb-screen-reports .portal-main h3::before { background: linear-gradient(180deg, #ff8b2c, #ffb020); }
body.arb-screen-applications.arb-screen-applications .portal-main h3::before { background: linear-gradient(180deg, #c026d3, #e879f9); }

/* ============ TIMECARDS (admin review view) — real DOM hooks ============ */
body.arb-screen-timecards.arb-screen-timecards .topbar {
  background: linear-gradient(120deg, #6a5cff, #5747e8 55%, #8b5cf6) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  box-shadow: 0 10px 24px rgba(106, 92, 255, .28) !important;
}
body.arb-screen-timecards.arb-screen-timecards .topbar :where(h2,h3,p,span,div,button,.who,.topbar-right) {
  color: #ffffff !important;
}
body.arb-screen-timecards.arb-screen-timecards .topbar .ghost-button {
  background: rgba(255, 255, 255, .18) !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  color: #ffffff !important;
}
body.arb-screen-timecards.arb-screen-timecards .panel {
  border: 1px solid rgba(106, 92, 255, .20) !important;
  border-left: 4px solid #6a5cff !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(106, 92, 255, .05), rgba(139, 92, 246, .02)) !important;
}
body.arb-screen-timecards.arb-screen-timecards .panel-head {
  background: linear-gradient(120deg, #6a5cff, #5747e8 55%, #8b5cf6) !important;
  color: #ffffff !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 12px 16px !important;
  margin: -1px -1px 0 -1px !important;
  box-shadow: 0 8px 20px rgba(106, 92, 255, .24) !important;
}
body.arb-screen-timecards.arb-screen-timecards .panel-head :where(h2,h3,h4,p,span,div,strong,button,small) {
  color: #ffffff !important;
}
body.arb-screen-timecards.arb-screen-timecards .panel-head .ghost-button {
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .35) !important;
}

/* ============ REPORTS — AR Beam brand orange / amber ============ */
body.arb-screen-reports.arb-screen-reports .topbar {
  background: linear-gradient(120deg, #ff8b2c, #e8760a 55%, #ffb020) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  box-shadow: 0 10px 24px rgba(255, 139, 44, .30) !important;
}
body.arb-screen-reports.arb-screen-reports .topbar :where(h2,h3,p,span,div,button,.who,.topbar-right) {
  color: #ffffff !important;
}
body.arb-screen-reports.arb-screen-reports .topbar .ghost-button {
  background: rgba(255, 255, 255, .18) !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  color: #ffffff !important;
}
body.arb-screen-reports.arb-screen-reports .rd-head {
  background: linear-gradient(120deg, #ff8b2c, #e8760a 55%, #ffb020) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  box-shadow: 0 10px 24px rgba(255, 139, 44, .30) !important;
}
body.arb-screen-reports.arb-screen-reports .rd-head :where(h2,h3,h4,p,span,div,strong,button,small,.rd-generated) {
  color: #ffffff !important;
}
body.arb-screen-reports.arb-screen-reports .rd-kpi {
  background: linear-gradient(180deg, rgba(255, 139, 44, .12), rgba(255, 176, 32, .05)) !important;
  border: 1px solid rgba(255, 139, 44, .26) !important;
  border-radius: 14px !important;
}
body.arb-screen-reports.arb-screen-reports .rd-cat {
  border-left: 4px solid #ff8b2c !important;
  padding-left: 12px !important;
  color: #9a4a00 !important;
}
body.arb-screen-reports.arb-screen-reports .rd-card {
  border: 1px solid rgba(255, 139, 44, .18) !important;
  border-left: 4px solid rgba(255, 139, 44, .55) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255, 139, 44, .05), rgba(255, 176, 32, .02)) !important;
}
body.arb-screen-reports.arb-screen-reports .rd-card:hover {
  border-left-color: #ff8b2c !important;
  background: linear-gradient(180deg, rgba(255, 139, 44, .10), rgba(255, 176, 32, .04)) !important;
}
body.arb-screen-reports.arb-screen-reports .stat {
  background: linear-gradient(180deg, rgba(255, 139, 44, .12), rgba(255, 176, 32, .05)) !important;
  border: 1px solid rgba(255, 139, 44, .26) !important;
  border-radius: 14px !important;
}
body.arb-screen-reports.arb-screen-reports .stat-label {
  color: #9a4a00 !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}
body.arb-screen-reports.arb-screen-reports .panel {
  border: 1px solid rgba(255, 139, 44, .20) !important;
  border-left: 4px solid #ff8b2c !important;
  border-radius: 14px !important;
}
body.arb-screen-reports.arb-screen-reports .panel-head {
  background: linear-gradient(120deg, #ff8b2c, #e8760a 55%, #ffb020) !important;
  color: #ffffff !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 12px 16px !important;
  margin: -1px -1px 0 -1px !important;
  box-shadow: 0 8px 20px rgba(255, 139, 44, .26) !important;
}
body.arb-screen-reports.arb-screen-reports .panel-head :where(h2,h3,h4,p,span,div,strong,button,small) {
  color: #ffffff !important;
}
body.arb-screen-reports.arb-screen-reports .panel-head .ghost-button {
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .35) !important;
}

/* ============ OTDR "Program Health" metric (v15) ============
   Layout mirrors Testing & Remediation: gradient ring left, legend right. */
.arb-ph {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 10px 8px 6px;
  flex-wrap: wrap;
}
.arb-ph-ring {
  --pct: 0;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: conic-gradient(from -90deg,
    #22c55e 0%, #10a37f calc(var(--pct) * 1%),
    #dde5f0 calc(var(--pct) * 1%) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 10px 10px 22px #c3cfe1, -10px -10px 22px #ffffff;
  flex: 0 0 auto;
}
.arb-ph-hole {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: #e7edf7;
  box-shadow: inset 5px 5px 11px #c3cfe1, inset -5px -5px 11px #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.arb-ph-pct { font-size: 30px; font-weight: 900; color: #0f2a43; line-height: 1.05; letter-spacing: -0.01em; }
.arb-ph-sub { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; color: #5b6b80; text-transform: uppercase; margin-top: 2px; }
.arb-ph-frac { font-size: 11.5px; font-weight: 700; color: #33475e; margin-top: 1px; font-variant-numeric: tabular-nums; }
.arb-ph-legend { flex: 1 1 220px; min-width: 200px; }
.arb-ph-title { font-size: 15px; font-weight: 900; color: #172333; margin-bottom: 10px; }
.arb-ph-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: #33475e;
  border-bottom: 1px solid rgba(76, 89, 104, .08);
}
.arb-ph-row:last-child { border-bottom: 0; }
.arb-ph-lbl { flex: 1; }
.arb-ph-num { font-weight: 900; color: #172333; font-variant-numeric: tabular-nums; }
.arb-ph-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(0,0,0,.04); }
.arb-ph-dot.arb-ph-pass { background: #22c55e; }
.arb-ph-dot.arb-ph-warn { background: #f59e0b; }
.arb-ph-dot.arb-ph-none { background: #94a3b8; }
.arb-ph-dot.arb-ph-fail { background: #ef4444; }
@media (max-width: 640px) { .arb-ph { justify-content: center; } }

/* ============ OTDR dashboard extras (v14) ============
   1) "Test budget" .btn: dark-on-dark -> light neu button with dark text.
   2) Subnav track: dark gray gradient bar -> inset neu segmented track.
   3) Pass-rate donut: bigger + neumorphic ring. */
body.arb-portal-light .btn,
body.arb-portal-light button.btn.arb-action {
  background: #e7edf7 !important;
  color: #172333 !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  box-shadow: 5px 5px 11px #c3cfe1, -5px -5px 11px #ffffff !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}
body.arb-portal-light .btn:hover,
body.arb-portal-light button.btn.arb-action:hover {
  box-shadow: 3px 3px 8px #c3cfe1, -3px -3px 8px #ffffff !important;
  color: #1550a8 !important;
}
body.arb-portal-light .seg.ops-subnav {
  background: #e7edf7 !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .5) !important;
  box-shadow: inset 6px 6px 13px #c3cfe1, inset -6px -6px 13px #ffffff !important;
  border-radius: 14px !important;
}
body.arb-portal-light .otchart-card .donut {
  padding: 18px !important;
  border-radius: 50% !important;
  background: #e7edf7 !important;
  box-shadow: 10px 10px 22px #c3cfe1, -10px -10px 22px #ffffff,
              inset 4px 4px 9px rgba(195, 207, 225, .55), inset -4px -4px 9px rgba(255, 255, 255, .9) !important;
}
body.arb-portal-light .otchart-card .donut svg {
  width: 190px !important;
  height: 190px !important;
  filter: drop-shadow(5px 5px 9px rgba(195, 207, 225, .8)) drop-shadow(-5px -5px 9px rgba(255, 255, 255, .9));
}
body.arb-portal-light .otchart-card .donut svg text {
  font-weight: 800 !important;
}

/* ============ Light-theme neutralization of dark-theme chart cards ============
   glass-darken.css (built for the dark theme) forces .otchart-card to dark
   slate rgba(13,19,30,.6); on the light neu theme these read as gray blocks. */
body.arb-portal-light .otchart-card {
  background: #e7edf7 !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  box-shadow: 9px 9px 18px #c3cfe1, -9px -9px 18px #ffffff !important;
  color: #172333 !important;
}
body.arb-portal-light .otchart-card :where(h2,h3,h4,p,div,span,small,b,strong) {
  color: #172333 !important;
}
body.arb-portal-light .otchart-card svg text[fill="#ffd24b"],
body.arb-portal-light .otchart-card svg text[fill="#f3c55d"],
body.arb-portal-light .otchart-card svg text[fill="#e6a94a"],
body.arb-portal-light .otchart-card svg tspan[fill="#ffd24b"],
body.arb-portal-light .otchart-card svg tspan[fill="#f3c55d"],
body.arb-portal-light .otchart-card svg tspan[fill="#e6a94a"] {
  fill: #9a6200 !important;
}

/* fastreporter KPI "View details →" pseudo-links: yellow -> accessible amber */
body.arb-portal-light .otdr-stats .stat.glass.arb-kpi-live::after {
  color: #9a6200 !important;
  opacity: 1 !important;
}

/* ============ YELLOW TEXT legibility on light backgrounds ============
   Pale yellows (#ffb020 / #e6a94a) are unreadable on the light neu theme.
   Darken to the theme's own accessible amber (#9a6200); tinted bgs stay. */
body.arb-portal-light .pill-amber,
body.arb-portal-light .eq-warn,
body.arb-portal-light .eq-signbanner,
body.arb-portal-light .exc-warn .exc-sev,
body.arb-portal-light .exc-flag,
body.arb-portal-light .neg.disp,
body.arb-portal-light .ts-leave-cell,
body.arb-portal-light .days-badge.y {
  color: #9a6200 !important;
  text-shadow: none !important;
}
body.arb-portal-light .eq-signbanner {
  background: rgba(154, 98, 0, .10) !important;
}
/* inline bright-yellow text tagged by JS (dashboard "Onboarding Pending" chips) */
body .arb-yellow-fix.arb-yellow-fix.arb-yellow-fix {
  color: #8a5a00 !important;
  text-shadow: none !important;
}

/* ============ SHIFT pills & chips — high-contrast, distinctive ============
   DAY   = solid amber with near-black bold text
   NIGHT = solid indigo with white bold text (black on indigo is unreadable)
   Classes tripled to beat theme !important rules at equal/higher specificity. */
body .arb-shift-pill {
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  text-shadow: none !important;
  border-width: 1px !important;
  border-style: solid !important;
}
body .arb-shift-day.arb-shift-day.arb-shift-day {
  background: linear-gradient(135deg, #ffc24d, #ffab00) !important;
  background-color: #ffb020 !important;
  color: #241a00 !important;
  border-color: #d98a00 !important;
  box-shadow: 0 2px 8px rgba(255, 176, 32, .40) !important;
}
body .arb-shift-day.arb-shift-day.arb-shift-day :where(span,b,strong,small) { color: #241a00 !important; text-shadow: none !important; }
body .arb-shift-night.arb-shift-night.arb-shift-night {
  background: linear-gradient(135deg, #4f56e3, #353bb8) !important;
  background-color: #4348d1 !important;
  color: #ffffff !important;
  border-color: #2e33a0 !important;
  box-shadow: 0 2px 8px rgba(67, 72, 209, .40) !important;
}
body .arb-shift-night.arb-shift-night.arb-shift-night :where(span,b,strong,small) { color: #ffffff !important; text-shadow: none !important; }

/* Topbar shift chip ("Day Shift · 0700-1900"): bold dark text on strong cyan */
body.arb-portal-light .shift-chip.shift-chip {
  background: linear-gradient(135deg, #a8e0fa, #7fd0f4) !important;
  background-color: #a8e0fa !important;
  color: #0b1f2e !important;
  font-weight: 800 !important;
  border: 1px solid #5cb8e8 !important;
  box-shadow: 0 3px 10px rgba(69, 180, 232, .35) !important;
  text-shadow: none !important;
}
body.arb-portal-light .shift-chip.shift-chip :where(span,b,strong,small) {
  color: #0b1f2e !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}
/* Operations matrix inline shift tag (untagged fallback = day-styled) */
body.arb-portal-light .pm-shift:not(.arb-shift-pill) {
  background: #ffb020 !important;
  color: #241a00 !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  padding: 1px 7px !important;
}

/* Shift chip inside gradient screen topbars: light pill + dark bold text */
body.arb-screen-operations.arb-screen-operations .topbar .shift-chip,
body.arb-screen-timecards.arb-screen-timecards .topbar .shift-chip,
body.arb-screen-payroll.arb-screen-payroll .topbar .shift-chip,
body.arb-screen-reports.arb-screen-reports .topbar .shift-chip,
body.arb-screen-applications.arb-screen-applications .topbar .shift-chip,
body.arb-screen-operations.arb-screen-operations .ops-toolbar .shift-chip,
body.arb-screen-timecards.arb-screen-timecards .ts-topbar .shift-chip {
  background: rgba(255, 255, 255, .94) !important;
  background-image: none !important;
  color: #0b1f2e !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255, 255, 255, .65) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18) !important;
  text-shadow: none !important;
}
body.arb-screen-operations.arb-screen-operations .topbar .shift-chip :where(span,b,strong,small,div),
body.arb-screen-timecards.arb-screen-timecards .topbar .shift-chip :where(span,b,strong,small,div),
body.arb-screen-payroll.arb-screen-payroll .topbar .shift-chip :where(span,b,strong,small,div),
body.arb-screen-reports.arb-screen-reports .topbar .shift-chip :where(span,b,strong,small,div),
body.arb-screen-applications.arb-screen-applications .topbar .shift-chip :where(span,b,strong,small,div),
body.arb-screen-operations.arb-screen-operations .ops-toolbar .shift-chip :where(span,b,strong,small,div),
body.arb-screen-timecards.arb-screen-timecards .ts-topbar .shift-chip :where(span,b,strong,small,div) {
  color: #0b1f2e !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

/* Shift <select> dropdowns (Applications review / record modal): colored by value */
body select.arb-shift-day.arb-shift-day.arb-shift-day {
  background: linear-gradient(135deg, #ffc24d, #ffab00) !important;
  background-color: #ffb020 !important;
  color: #241a00 !important;
  font-weight: 800 !important;
  border: 1px solid #d98a00 !important;
  text-shadow: none !important;
}
body select.arb-shift-night.arb-shift-night.arb-shift-night {
  background: linear-gradient(135deg, #4f56e3, #353bb8) !important;
  background-color: #4348d1 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border: 1px solid #2e33a0 !important;
  text-shadow: none !important;
}
body select.arb-shift-day option,
body select.arb-shift-night option {
  background: #ffffff !important;
  color: #172333 !important;
  font-weight: 600 !important;
}

/* ============ APPLICATIONS (recruitment) — magenta / fuchsia ============ */
body.arb-screen-applications.arb-screen-applications .topbar {
  background: linear-gradient(120deg, #c026d3, #a21caf 55%, #e879f9) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  box-shadow: 0 10px 24px rgba(192, 38, 211, .30) !important;
}
body.arb-screen-applications.arb-screen-applications .topbar :where(h2,h3,p,span,div,button,.who,.topbar-right) {
  color: #ffffff !important;
}
body.arb-screen-applications.arb-screen-applications .topbar .ghost-button {
  background: rgba(255, 255, 255, .18) !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  color: #ffffff !important;
}
body.arb-screen-applications.arb-screen-applications .panel {
  border: 1px solid rgba(192, 38, 211, .20) !important;
  border-left: 4px solid #c026d3 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(192, 38, 211, .05), rgba(232, 121, 249, .02)) !important;
}
body.arb-screen-applications.arb-screen-applications .panel-head {
  background: linear-gradient(120deg, #c026d3, #a21caf 55%, #e879f9) !important;
  color: #ffffff !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 12px 16px !important;
  margin: -1px -1px 0 -1px !important;
  box-shadow: 0 8px 20px rgba(192, 38, 211, .26) !important;
}
body.arb-screen-applications.arb-screen-applications .panel-head :where(h2,h3,h4,p,span,div,strong,button,small) {
  color: #ffffff !important;
}
body.arb-screen-applications.arb-screen-applications .panel-head .ghost-button {
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .35) !important;
}
body.arb-screen-applications.arb-screen-applications .application-card {
  border: 1px solid rgba(192, 38, 211, .16) !important;
  border-left: 4px solid rgba(192, 38, 211, .50) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(192, 38, 211, .045), rgba(232, 121, 249, .02)) !important;
}
body.arb-screen-applications.arb-screen-applications .application-card:hover {
  border-left-color: #c026d3 !important;
  background: linear-gradient(180deg, rgba(192, 38, 211, .09), rgba(232, 121, 249, .04)) !important;
}
body.arb-screen-applications.arb-screen-applications .application-head {
  color: #5b1165 !important;
}

/* Ghost buttons sitting on gradient toolbars: glass-on-gradient treatment */
body.arb-screen-operations.arb-screen-operations .ops-toolbar .ghost-button,
body.arb-screen-timecards.arb-screen-timecards .ts-topbar .ghost-button {
  background: rgba(255, 255, 255, .18) !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
body.arb-screen-operations.arb-screen-operations .ops-toolbar .ghost-button:hover,
body.arb-screen-timecards.arb-screen-timecards .ts-topbar .ghost-button:hover {
  background: rgba(255, 255, 255, .30) !important;
}

/* Stat strips / summary cards on these screens get subtle module tints */
body.arb-screen-operations.arb-screen-operations .summary-strip > *,
body.arb-screen-operations.arb-screen-operations .pm-stat {
  background: linear-gradient(180deg, rgba(45, 140, 255, .10), rgba(45, 140, 255, .04)) !important;
  border: 1px solid rgba(45, 140, 255, .20) !important;
  border-radius: 12px !important;
}
body.arb-screen-timecards.arb-screen-timecards .summary-strip > *,
body.arb-screen-timecards.arb-screen-timecards .pm-stat {
  background: linear-gradient(180deg, rgba(106, 92, 255, .10), rgba(106, 92, 255, .04)) !important;
  border: 1px solid rgba(106, 92, 255, .20) !important;
  border-radius: 12px !important;
}
body.arb-screen-payroll.arb-screen-payroll .summary-strip > *,
body.arb-screen-payroll.arb-screen-payroll .pm-stat {
  background: linear-gradient(180deg, rgba(16, 163, 127, .10), rgba(16, 163, 127, .04)) !important;
  border: 1px solid rgba(16, 163, 127, .20) !important;
  border-radius: 12px !important;
}