:root {
  --app-accent: #f5842e;
  --app-accent-2: #e86d1f;
  --app-accent-soft: #ffb689;
  --app-accent-mid: #ef9061;
  --app-accent-mid-2: #ee844f;
  --app-on-accent: #5e2a00;
  --app-accent-fill: #f5842e;
  --app-font-family: Manrope, "Segoe UI", Arial, sans-serif;
  --app-font-scale: 1;
}

body,
button,
input,
select,
textarea,
.reference-dashboard,
.saptha-auth-screen {
  font-family: var(--app-font-family) !important;
}

body {
  font-size: 16px;
}

body.app-text-bold :where(h1, h2, h3, h4, h5, h6, p, strong, span, small, label, input, select, textarea, button, td, th) {
  font-weight: 700 !important;
}

body.app-text-italic :where(h1, h2, h3, h4, h5, h6, p, strong, span:not(.material-symbols-rounded):not(.mdi), small, label, input, select, textarea, button, td, th) {
  font-style: italic !important;
}

/* Map the selected accent onto both dashboard generations. */
:root {
  --orange: var(--app-accent) !important;
  --orange-2: var(--app-accent-soft) !important;
  --on-orange: var(--app-on-accent) !important;
  --ref-violet: var(--app-accent) !important;
  --ref-violet-2: var(--app-accent-2) !important;
  --sap-primary: var(--app-accent) !important;
  --sap-primary-2: var(--app-accent-2) !important;
  --sap-primary-3: var(--app-accent-2) !important;
}

.ref-navigation button.active,
.ref-primary-button,
.ref-user,
.ref-profile-avatar,
.ref-tree-view-more,
.ref-profile-view-more,
.ref-reports>header button,
.ref-report-controls nav button.active,
.ref-header-popover>footer button,
.saptha-primary-button,
.saptha-login-submit {
  background: var(--app-accent-fill) !important;
}

.ref-bar-chart i,
.ref-analytic-bars p em,
.ref-report-status p>em,
.ref-progress>i,
.ref-progress>span,
.ref-status-progress,
.ref-status-assigned {
  background: var(--app-accent-fill) !important;
}

.ref-icon-button:hover,
.ref-icon-button:hover .material-symbols-rounded,
.ref-page-title>.ref-icon-button,
.ref-header-popover>header b,
.ref-profile-meta p .material-symbols-rounded,
.ref-analytic-card header span {
  color: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
}

/* The shipping dashboard was dark-only. These overrides add a true light palette. */
html[data-theme="light"] {
  color-scheme: light;
  --ref-page: #eef1f5;
  --ref-shell: #f8f9fb;
  --ref-surface: #ffffff;
  --ref-ink: #1f2937;
  --ref-muted: #687386;
  --ref-border: #dce1e8;
  --ref-dark: #252930;
  --ref-dark-soft: #f1f3f6;
  --slate-high: #edf0f4;
  --slate-highest: #e2e7ed;
  --faint: #8b95a5;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] .reference-dashboard {
  background: radial-gradient(circle at 84% -6%, color-mix(in srgb, var(--app-accent) 10%, transparent), transparent 34%), var(--ref-page) !important;
}

html[data-theme="light"] .reference-shell {
  border-color: #d8dde5 !important;
  background: var(--ref-shell) !important;
  box-shadow: 0 22px 55px rgba(35, 45, 62, .12) !important;
}

html[data-theme="light"] .ref-icon-button {
  border-color: #d9dee6 !important;
  color: #4b5563 !important;
  background: #fff !important;
}

html[data-theme="light"] .ref-icon-button .material-symbols-rounded {
  color: inherit;
}

html[data-theme="light"] .ref-user {
  color: #fff !important;
  border-color: transparent !important;
  background: var(--app-accent-fill) !important;
}

html[data-theme="light"] .ref-navigation {
  border: 1px solid #343942;
  background: #252930 !important;
  box-shadow: 0 8px 22px rgba(35, 39, 47, .16) !important;
}

html[data-theme="light"] :is(.ref-metric-card, .ref-analytic-card, .ref-data-panel, .ref-workspace, .ref-filterbar, .ref-report-kpis article, .ref-report-panel, .ref-profile-overview, .ref-profile-timeline, .ref-engineer-profile-overview, .ref-eng-accounts, .ref-header-popover) {
  border-color: var(--ref-border) !important;
  background: var(--ref-surface) !important;
  box-shadow: 0 8px 24px rgba(35, 45, 62, .07) !important;
}

html[data-theme="light"] .ref-metric-card:nth-child(n) {
  background: linear-gradient(150deg, #fff 62%, #f5f7fa) !important;
}

html[data-theme="light"] :is(.ref-request-row, .ref-overdue-list > div:not(.ref-empty-visual), .ref-page-nav button, .ref-profile-meta, .ref-profile-card, .ref-filter-dropdown, .ref-filter-search, .ref-filter-date) {
  border-color: var(--ref-border) !important;
  background: #fff !important;
}

html[data-theme="light"] :is(.ref-request-detail, .ref-tree-detail) {
  border-color: var(--ref-border) !important;
  background: radial-gradient(circle at 82% -12%, color-mix(in srgb, var(--app-accent) 12%, transparent), transparent 55%), linear-gradient(160deg, #fff, #f6f8fb) !important;
}

html[data-theme="light"] :is(.ref-detail-tabs, .ref-segmented-tabs, .ref-analytic-bars p > i) {
  background: #edf0f4 !important;
}

html[data-theme="light"] :is(.ref-metric-label > span, .ref-overdue-list strong, .ref-profile-card strong) {
  color: var(--ref-ink) !important;
}

html[data-theme="light"] .ref-header-popover>div>button:hover {
  background: #f3f5f8 !important;
}

/* Complete light treatment for the kiosk/overview surfaces that ship dark. */
html[data-theme="light"] .ref-view-overview .ref-ov-head :is(h1, h2, h3, strong),
html[data-theme="light"] .ref-view-overview .tl-cid strong,
html[data-theme="light"] .ref-view-overview .tl-ring span,
html[data-theme="light"] .ref-view-overview .tl-stats b,
html[data-theme="light"] .ref-view-overview .ref-ov-cal-title,
html[data-theme="light"] .ref-view-overview .ref-ov-agenda>header>span,
html[data-theme="light"] .ref-view-overview .ref-panel-empty strong {
  color: #202936 !important;
}

html[data-theme="light"] .ref-view-overview .tl-card {
  border-color: #dbe1e8 !important;
  color: #202936 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important;
  box-shadow: 0 10px 26px rgba(31, 41, 55, .09) !important;
}

html[data-theme="light"] .ref-view-overview .tl-card.ranked {
  border-color: color-mix(in srgb, var(--tint) 34%, #dbe1e8) !important;
}

html[data-theme="light"] .ref-view-overview .tl-card:hover {
  border-color: color-mix(in srgb, var(--tint) 58%, #dbe1e8) !important;
  box-shadow: 0 16px 34px rgba(31, 41, 55, .14) !important;
}

html[data-theme="light"] .ref-view-overview .tl-wash {
  opacity: .09;
}

html[data-theme="light"] .ref-view-overview .tl-chips em {
  border-color: #d8dee7;
  color: #536071;
  background: #f2f5f8;
}

html[data-theme="light"] .ref-view-overview .tl-rank.r1 {
  border-color: transparent;
  color: #392407;
}

html[data-theme="light"] .ref-view-overview .tl-live {
  color: #9a6500;
  border-color: #e7c36e;
  background: #fff7dc;
}

html[data-theme="light"] .ref-view-overview .tl-stats {
  border-color: #dce2e9;
  background: #dce2e9;
}

html[data-theme="light"] .ref-view-overview .tl-stats>div {
  color: #202936;
  background: #f5f7fa;
}

html[data-theme="light"] .ref-view-overview .tl-stats span,
html[data-theme="light"] .ref-view-overview .tl-cap,
html[data-theme="light"] .ref-view-overview .tl-cta {
  color: #6b7686 !important;
}

html[data-theme="light"] .ref-view-overview .tl-cta {
  border-color: #dce2e9;
  background: #fff;
}

html[data-theme="light"] .ref-view-overview .tl-card:hover .tl-cta {
  color: var(--app-accent) !important;
  background: color-mix(in srgb, var(--app-accent) 5%, #fff) !important;
}

/* Field Crew: borders provide separation in light mode; gray elevation shadows
   beneath the cards and engineer avatars only make the surface look dirty. */
html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-overview .ref-crew-scene .tl-card,
html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-overview .ref-crew-scene .tl-card:hover,
html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-overview .ref-crew-scene .tl-medal {
  box-shadow: none !important;
}

html[data-theme="light"] .ref-view-overview :is(.ref-ov-kpi, .ref-ov-card, .ref-ov-cal, .ref-ov-agenda) {
  border-color: #dbe1e8 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .ref-view-overview :is(.ref-ov-watch-row, .ref-ov-capacity-stats span, .ref-ov-agenda-list > div, .ref-panel-empty.compact, .ref-ov-agenda .ref-panel-empty) {
  border-color: #e0e5eb !important;
  color: #536071 !important;
  background: #f5f7fa !important;
}

html[data-theme="light"] .ref-view-overview :is(.ref-ov-cal-day, .ref-ov-cal-head > button, .ref-ov-cal-title:hover, .ref-ov-agenda-list .dt, .ref-ov-hbars p > i) {
  border-color: #dce2e9 !important;
  color: #536071 !important;
  background: #f1f4f7 !important;
}

html[data-theme="light"] .ref-view-overview .ref-ov-cal-day.has {
  border-color: color-mix(in srgb, var(--app-accent) 42%, #dce2e9) !important;
  color: #202936 !important;
  background: rgb(from var(--app-accent) r g b / var(--heat, .34)) !important;
}

html[data-theme="light"] .ref-view-overview .ref-ov-cal-day.has :is(em, i) {
  color: var(--app-on-accent) !important;
}

html[data-theme="light"] .ref-view-overview .ref-ov-cal-foot {
  border-color: #dce2e9 !important;
}

html[data-theme="light"] .ref-view-overview .ref-ov-cal-foot>span,
html[data-theme="light"] .ref-view-overview .ref-ov-agenda-list p strong {
  color: #384454 !important;
}

html[data-theme="light"] .ref-view-overview .ref-ov-donut-track {
  stroke: #e1e6ec !important;
}

html[data-theme="light"] .ref-view-overview .ref-ov-donut-center strong {
  color: #202936 !important;
}

html[data-theme="light"] .ref-view-overview .ref-ov-donut-center span {
  color: #6b7686 !important;
}

html[data-theme="light"] .reference-dashboard.ref-view-overview .ref-ov-capacity-stats span {
  border-color: #dce2e9 !important;
  color: #202936 !important;
  background: #f1f4f7 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .reference-dashboard.ref-view-overview .ref-ov-capacity-stats b {
  color: #202936 !important;
}

html[data-theme="light"] .reference-dashboard.ref-view-overview .ref-ov-capacity-stats small {
  color: #687386 !important;
}

html[data-theme="light"] .reference-dashboard.ref-view-overview .ref-ov-gauge-ring {
  background: radial-gradient(closest-side, #fff 76%, transparent 77%), conic-gradient(var(--tone) calc(var(--val) * 1%), #e3e8ee 0) !important;
  filter: drop-shadow(0 5px 11px rgba(31, 41, 55, .12)) !important;
}

html[data-theme="light"] .reference-dashboard.ref-view-overview .ref-ov-gauge-ring strong,
html[data-theme="light"] .reference-dashboard.ref-view-overview .ref-radial-ring strong {
  color: #202936 !important;
}

html[data-theme="light"] .reference-dashboard.ref-view-overview .ref-radial-ring {
  background: radial-gradient(closest-side, #fff 71%, transparent 72%), conic-gradient(var(--tone) calc(var(--val) * 1%), #e3e8ee 0) !important;
  filter: drop-shadow(0 5px 11px rgba(31, 41, 55, .12)) !important;
}

html[data-theme="light"] .reference-dashboard.ref-view-overview .ref-radial-ring::after {
  box-shadow: inset 0 0 0 1px rgba(31, 41, 55, .06), 0 0 13px -7px var(--tone) !important;
}

html[data-theme="light"] .reference-dashboard.ref-view-overview .ref-radial>b {
  color: #202936 !important;
}

html[data-theme="light"] .reference-dashboard.ref-view-overview .ref-radial>small {
  color: #687386 !important;
}

/* Light-mode contrast contract. Every surface owns its foreground colours so
   changing the page theme cannot leave dark text on a dark island (or vice versa). */
html[data-theme="light"] .ref-view-overview :is(.ref-ov-kpi-head > span, .ref-ov-kpi-note, .ref-area-labels, .ref-stack-legend, .ref-ov-donut-legend span, .ref-ov-gauge-meta small, .ref-radial > small, .ref-ov-bigstat > small, .ref-ov-ribbon-item span, .ref-ov-watch-row small) {
  color: #687386 !important;
}

html[data-theme="light"] .ref-view-overview :is(.ref-ov-kpi-num strong, .ref-ov-card > header h3, .ref-ov-hbars p > span, .ref-ov-hbars p > b, .ref-ov-donut-legend b, .ref-ov-gauge-ring strong, .ref-ov-gauge-meta b, .ref-radial strong, .ref-radial > b, .ref-ov-bigstat > strong, .ref-ov-bigstat > span, .ref-ov-ribbon-item strong, .ref-ov-funnel-row > span, .ref-ov-funnel-row > b, .ref-ov-board-row .who, .ref-ov-board-row > b, .ref-ov-watch-row strong) {
  color: #202936 !important;
}

html[data-theme="light"] .ref-view-overview :is(.ref-ov-ribbon-item, .ref-ov-heat-cell) {
  border-color: #dce2e9 !important;
  background: #f5f7fa !important;
}

html[data-theme="light"] .ref-view-overview :is(.ref-ov-hbars p > i, .ref-ov-funnel-row > i, .ref-ov-board-row > i) {
  background: #e5e9ee !important;
}

html[data-theme="light"] .ref-view-overview :is(.ref-ov-hbars p + p, .ref-ov-bigstat) {
  border-color: #e1e6ec !important;
}

html[data-theme="light"] .ref-view-overview .ref-ov-board-row .rank {
  color: #596576 !important;
  background: #e9edf2 !important;
}

html[data-theme="light"] .ref-view-overview .ref-ov-board-row.lead .rank {
  color: var(--app-on-accent) !important;
  background: var(--app-accent-fill) !important;
}

/* Field Timeline uses the same cards as the kiosk, but light mode must render
   them as genuine light cards instead of black cards with black typography. */
html[data-theme="light"] .ref-view-timeline .tl-card {
  border-color: #d9e0e8 !important;
  color: #202936 !important;
  background: linear-gradient(180deg, #fff 0%, #f6f8fb 100%) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .ref-view-timeline .tl-card.ranked {
  border-color: color-mix(in srgb, var(--tint) 38%, #d9e0e8) !important;
}

html[data-theme="light"] .ref-view-timeline .tl-card:hover {
  border-color: color-mix(in srgb, var(--tint) 58%, #d9e0e8) !important;
  box-shadow: none !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-timeline :is(.tl-card, .tl-card:hover, .tl-medal) {
  box-shadow: none !important;
}

html[data-theme="light"] .ref-view-timeline .tl-wash {
  opacity: .08 !important;
}

html[data-theme="light"] .ref-view-timeline :is(.tl-cid strong, .tl-ring span, .tl-stats b) {
  color: #202936 !important;
}

html[data-theme="light"] .ref-view-timeline :is(.tl-cid small, .tl-stats span, .tl-cap, .tl-cta) {
  color: #687386 !important;
}

html[data-theme="light"] .ref-view-timeline .tl-chips em {
  border-color: #d8dee7 !important;
  color: #536071 !important;
  background: #f2f5f8 !important;
}

html[data-theme="light"] .ref-view-timeline .tl-stats {
  border-color: #dce2e9 !important;
  background: #dce2e9 !important;
}

html[data-theme="light"] .ref-view-timeline .tl-stats>div {
  color: #202936 !important;
  background: #f4f7fa !important;
}

html[data-theme="light"] .ref-view-timeline .tl-cta {
  border-color: #dce2e9 !important;
  background: #fff !important;
}

html[data-theme="light"] .ref-view-timeline .tl-card:hover .tl-cta {
  color: var(--app-accent) !important;
  background: color-mix(in srgb, var(--app-accent) 5%, #fff) !important;
}

/* Requests workspace: the list and frame are light; the operational fact cards
   remain dark, preserving the visual hierarchy with readable light type. */
html[data-theme="light"] .ref-view-requests :is(.ref-workspace-header, .ref-workspace-body > aside, .ref-request-detail > header, .ref-request-detail > footer) {
  color: #202936 !important;
}

html[data-theme="light"] .ref-view-requests .ref-request-row {
  border-color: #dbe1e8 !important;
  color: #202936 !important;
  background: #fff !important;
}

html[data-theme="light"] .ref-view-requests .ref-request-row:hover {
  background: #f5f7fa !important;
}

html[data-theme="light"] .ref-view-requests .ref-request-row.active {
  border-color: color-mix(in srgb, var(--app-accent) 55%, #dbe1e8) !important;
  background: color-mix(in srgb, var(--app-accent) 5%, #fff) !important;
}

html[data-theme="light"] .ref-view-requests .ref-request-id strong {
  color: #263141 !important;
}

html[data-theme="light"] .ref-view-requests .ref-request-id small,
html[data-theme="light"] .ref-view-requests .ref-request-row>b,
html[data-theme="light"] .ref-view-requests .ref-request-detail>header :is(span, small),
html[data-theme="light"] .ref-view-requests .ref-request-detail>footer>span {
  color: #687386 !important;
}

html[data-theme="light"] .ref-view-requests .ref-request-detail>header h2 {
  color: #202936 !important;
}

html[data-theme="light"] .ref-view-requests .ref-detail-tabs button:not(.active) {
  color: #687386 !important;
  -webkit-text-fill-color: #687386 !important;
}

html[data-theme="light"] .ref-view-requests .ref-detail-tabs button:not(.active)>span {
  color: #687386 !important;
  -webkit-text-fill-color: #687386 !important;
}

html[data-theme="light"] .ref-view-requests :is(.ref-detail-items article, .ref-detail-description, .ref-assignment-main, .ref-assignment-mini, .ref-assignment-roster, .ref-media-board) {
  --ref-ink: #f4f6f8;
  --ref-muted: #aeb6c2;
  border-color: #343943 !important;
  color: #f4f6f8 !important;
  background-color: #1e2228 !important;
}

html[data-theme="light"] .ref-view-requests .ref-detail-items article :is(strong, h3),
html[data-theme="light"] .ref-view-requests .ref-detail-description p,
html[data-theme="light"] .ref-view-requests :is(.ref-assignment-main, .ref-assignment-mini, .ref-assignment-roster, .ref-media-board) :is(h3, strong, b) {
  color: #f4f6f8 !important;
}

html[data-theme="light"] .ref-view-requests .ref-detail-items article>span,
html[data-theme="light"] .ref-view-requests .ref-detail-description>span,
html[data-theme="light"] .ref-view-requests :is(.ref-assignment-main, .ref-assignment-mini, .ref-assignment-roster, .ref-media-board) :is(p, small, label) {
  color: #aeb6c2 !important;
}

/* Live Tracker deliberately retains dark browsing/detail sidebars. Pin their
   typography to the dark palette while keeping the analytics row light. */
html[data-theme="light"] .ref-view-map :is(.ref-map-browse, .ref-map-sr-panel) {
  --ref-ink: #f2f4f7;
  --ref-muted: #a7b0bd;
  color: #f2f4f7 !important;
  background: linear-gradient(155deg, #252930 0%, #1b1e23 100%) !important;
}

html[data-theme="light"] .ref-view-map .ref-map-request-card {
  border-color: #323740 !important;
  color: #f2f4f7 !important;
  background: #22262c !important;
}

html[data-theme="light"] .ref-view-map .ref-map-request-card:hover,
html[data-theme="light"] .ref-view-map .ref-map-request-card.active {
  border-color: color-mix(in srgb, var(--app-accent) 50%, #323740) !important;
  background: #2a2f37 !important;
}

html[data-theme="light"] .ref-view-map .ref-map-request-card strong,
html[data-theme="light"] .ref-view-map .ref-map-sr-panel :is(h2, h3, strong) {
  color: #f2f4f7 !important;
}

html[data-theme="light"] .ref-view-map .ref-map-request-card small,
html[data-theme="light"] .ref-view-map .ref-map-sr-panel :is(p, small, time) {
  color: #a7b0bd !important;
}

html[data-theme="light"] .ref-view-map .ref-map-sr-panel .ref-sr-detail-grid>div {
  border-color: #343943 !important;
  background: #22262c !important;
}

html[data-theme="light"] .ref-view-map .ref-map-sr-panel .ref-sr-detail-grid small {
  color: #8994a3 !important;
}

html[data-theme="light"] .ref-view-map .ref-analytic-card {
  --ref-ink: #202936;
  --ref-muted: #687386;
}

html[data-theme="light"] .ref-view-map .ref-analytic-card :is(h3, b) {
  color: #202936 !important;
}

html[data-theme="light"] .ref-view-map .ref-analytic-card p>span {
  color: #687386 !important;
}

html[data-theme="light"] .ref-view-map .ref-analytic-bars p>i {
  background: #e8ecf1 !important;
}

/* Reports intentionally mix a light command area with dark BI panels. */
html[data-theme="light"] .ref-view-reports .ref-report-headline h2 {
  color: #202936 !important;
}

html[data-theme="light"] .ref-view-reports .ref-report-headline p {
  color: #687386 !important;
}

html[data-theme="light"] .ref-view-reports .ref-report-headline>span {
  color: var(--app-accent) !important;
}

html[data-theme="light"] .ref-view-reports .ref-report-kpis article {
  --ref-ink: #202936;
  --ref-muted: #687386;
  border-color: #dbe1e8 !important;
  background: #fff !important;
}

html[data-theme="light"] .ref-view-reports .ref-report-kpis article :is(strong, b) {
  color: #202936 !important;
}

html[data-theme="light"] .ref-view-reports .ref-report-kpis article :is(span, small) {
  color: #687386 !important;
}

html[data-theme="light"] .ref-view-reports :is(.ref-report-health-card, .ref-report-hero-chart, .ref-report-rings, .ref-report-operations, .ref-report-gauge, .ref-report-workload, .ref-report-types-card, .ref-report-demand) {
  --ref-ink: #f4f6f8;
  --ref-muted: #aab2be;
  border-color: #303641 !important;
  color: #f4f6f8 !important;
  background-color: #1d2127 !important;
}

html[data-theme="light"] .ref-view-reports :is(.ref-report-health-card, .ref-report-hero-chart, .ref-report-rings, .ref-report-operations, .ref-report-gauge, .ref-report-workload, .ref-report-types-card, .ref-report-demand) :is(h2, h3, h4, strong, b) {
  color: #f4f6f8 !important;
}

html[data-theme="light"] .ref-view-reports :is(.ref-report-health-card, .ref-report-hero-chart, .ref-report-rings, .ref-report-operations, .ref-report-gauge, .ref-report-workload, .ref-report-types-card, .ref-report-demand) :is(p, small, span:not(.material-symbols-rounded)) {
  color: #aab2be !important;
}

html[data-theme="light"] .ref-view-reports :is(.ref-report-rings, .ref-report-operations, .ref-report-gauge, .ref-report-workload, .ref-report-types-card, .ref-report-demand)>header>span,
html[data-theme="light"] .ref-view-reports .ref-report-demand>header>div:first-child>span {
  color: var(--app-accent) !important;
}

html[data-theme="light"] .ref-view-reports .ref-eng-name strong,
html[data-theme="light"] .ref-view-reports .ref-demand-compact-body .account strong {
  color: #eef1f5 !important;
}

html[data-theme="light"] .ref-view-reports .ref-demand-compact-body .account small,
html[data-theme="light"] .ref-view-reports .ref-workload-legend,
html[data-theme="light"] .ref-view-reports .ref-demand-compact-head {
  color: #9fa8b5 !important;
}

/* Light means light: content panels never fall back to the shipping black
   theme. Dark navigation controls remain intentional and visually separate. */
html[data-theme="light"] :is(.ref-loading, .ref-error) {
  border-color: #dbe1e8 !important;
  color: #202936 !important;
  background: linear-gradient(180deg, #fff, #f6f8fb) !important;
  box-shadow: 0 10px 28px rgba(31, 41, 55, .08) !important;
}

html[data-theme="light"] .ref-loading>span {
  border-color: #d9e0e8 !important;
  border-top-color: var(--app-accent) !important;
}

html[data-theme="light"] .ref-loading strong,
html[data-theme="light"] .ref-error strong {
  color: #202936 !important;
}

html[data-theme="light"] .ref-loading small,
html[data-theme="light"] .ref-error span {
  color: #687386 !important;
}

html[data-theme="light"] .reference-dashboard.ref-view-timeline .tl-card:hover {
  border-color: color-mix(in srgb, var(--tint) 48%, #d9e0e8) !important;
  color: #202936 !important;
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--tint) 5%, #f6f8fb) 100%) !important;
  box-shadow: 0 16px 34px rgba(31, 41, 55, .14), inset 0 0 0 1px color-mix(in srgb, var(--tint) 16%, transparent) !important;
}

html[data-theme="light"] .reference-dashboard.ref-view-timeline .tl-card:hover .tl-cta {
  color: var(--app-accent) !important;
  background: color-mix(in srgb, var(--tint) 5%, #fff) !important;
}

html[data-theme="light"] .ref-view-map :is(.ref-map-browse, .ref-map-sr-panel) {
  --ref-ink: #202936;
  --ref-muted: #687386;
  border: 1px solid #dbe1e8 !important;
  color: #202936 !important;
  background: linear-gradient(180deg, #fff 0%, #f6f8fb 100%) !important;
  box-shadow: 0 10px 26px rgba(31, 41, 55, .08) !important;
}

html[data-theme="light"] .ref-view-map .ref-map-request-card {
  border-color: #dce2e9 !important;
  color: #202936 !important;
  background: #fff !important;
}

html[data-theme="light"] .ref-view-map .ref-map-request-card:hover,
html[data-theme="light"] .ref-view-map .ref-map-request-card.active {
  border-color: color-mix(in srgb, var(--app-accent) 50%, #dce2e9) !important;
  background: color-mix(in srgb, var(--app-accent) 6%, #fff) !important;
}

html[data-theme="light"] .ref-view-map .ref-map-request-card strong,
html[data-theme="light"] .ref-view-map .ref-map-sr-panel :is(h2, h3, strong) {
  color: #202936 !important;
}

html[data-theme="light"] .ref-view-map .ref-map-request-card small,
html[data-theme="light"] .ref-view-map .ref-map-sr-panel :is(p, small, time) {
  color: #687386 !important;
}

html[data-theme="light"] .ref-view-map .ref-map-sr-panel .ref-sr-progress-steps span>i {
  border-color: #fff !important;
}

html[data-theme="light"] .ref-view-map .ref-map-sr-panel .ref-sr-progress-steps span::before {
  background: #dce2e9 !important;
}

html[data-theme="light"] .ref-view-map .ref-map-sr-panel .ref-sr-progress-steps span.done::before {
  background: var(--app-accent) !important;
}

html[data-theme="light"] .ref-view-map .ref-map-sr-panel .ref-sr-detail-grid>div {
  border-color: #dce2e9 !important;
  background: #f1f4f7 !important;
}

html[data-theme="light"] .ref-view-map .ref-map-sr-panel .ref-sr-detail-grid small {
  color: #687386 !important;
}

html[data-theme="light"] .ref-view-map .ref-map-sr-panel .ref-sr-engineers>div {
  border-color: #dfe4ea !important;
}

html[data-theme="light"] .ref-view-requests :is(.ref-detail-items article, .ref-detail-description, .ref-assignment-main, .ref-assignment-mini, .ref-assignment-roster, .ref-media-board) {
  --ref-ink: #202936;
  --ref-muted: #687386;
  border-color: #dbe1e8 !important;
  color: #202936 !important;
  background: linear-gradient(180deg, #fff, #f4f7fa) !important;
  box-shadow: 0 7px 20px rgba(31, 41, 55, .06) !important;
}

html[data-theme="light"] .ref-view-requests .ref-detail-items article :is(strong, h3),
html[data-theme="light"] .ref-view-requests .ref-detail-description p,
html[data-theme="light"] .ref-view-requests :is(.ref-assignment-main, .ref-assignment-mini, .ref-assignment-roster, .ref-media-board) :is(h3, strong, b) {
  color: #202936 !important;
}

html[data-theme="light"] .ref-view-requests .ref-detail-items article>span,
html[data-theme="light"] .ref-view-requests .ref-detail-description>span,
html[data-theme="light"] .ref-view-requests :is(.ref-assignment-main, .ref-assignment-mini, .ref-assignment-roster, .ref-media-board) :is(p, small, label) {
  color: #687386 !important;
}

html[data-theme="light"] .ref-view-reports :is(.ref-report-health-card, .ref-report-hero-chart, .ref-report-rings, .ref-report-operations, .ref-report-gauge, .ref-report-workload, .ref-report-types-card, .ref-report-demand) {
  --ref-ink: #202936;
  --ref-muted: #687386;
  border-color: #dbe1e8 !important;
  color: #202936 !important;
  background: linear-gradient(180deg, #fff 0%, #f5f7fa 100%) !important;
  box-shadow: 0 10px 28px rgba(31, 41, 55, .08) !important;
}

html[data-theme="light"] .ref-view-reports :is(.ref-report-health-card, .ref-report-hero-chart, .ref-report-rings, .ref-report-operations, .ref-report-gauge, .ref-report-workload, .ref-report-types-card, .ref-report-demand) :is(h2, h3, h4, strong, b) {
  color: #202936 !important;
}

html[data-theme="light"] .ref-view-reports :is(.ref-report-health-card, .ref-report-hero-chart, .ref-report-rings, .ref-report-operations, .ref-report-gauge, .ref-report-workload, .ref-report-types-card, .ref-report-demand) :is(p, small, span:not(.material-symbols-rounded)) {
  color: #687386 !important;
}

html[data-theme="light"] .ref-view-reports :is(.ref-report-rings, .ref-report-operations, .ref-report-gauge, .ref-report-workload, .ref-report-types-card, .ref-report-demand)>header>span,
html[data-theme="light"] .ref-view-reports .ref-report-demand>header>div:first-child>span {
  color: var(--app-accent) !important;
}

html[data-theme="light"] .ref-view-reports :is(.ref-eng-name strong, .ref-demand-compact-body .account strong) {
  color: #202936 !important;
}

html[data-theme="light"] .ref-view-reports :is(.ref-report-ring-list > div, .ref-demand-compact-body > button, .ref-demand-compact-table, .ref-report-demand--compact > header) {
  border-color: #dce2e9 !important;
  background-color: transparent !important;
}

html[data-theme="light"] .ref-view-reports :is(.ref-eng-bar, .ref-report-status p > i, .ref-demand-compact-body .delivery > i) {
  background: #e6eaf0 !important;
}

/* Header utility menus (notifications, schedule and rotation) are light too. */
html[data-theme="light"] .ref-header-popover:not(.ref-profile-popover) {
  --ref-ink: #202936;
  --ref-muted: #687386;
  border-color: #d8dee7 !important;
  color: #202936 !important;
  background: #fff !important;
  box-shadow: 0 20px 48px rgba(31, 41, 55, .16) !important;
}

html[data-theme="light"] .ref-header-popover:not(.ref-profile-popover)>header,
html[data-theme="light"] .ref-header-popover:not(.ref-profile-popover)>div,
html[data-theme="light"] .ref-header-popover:not(.ref-profile-popover)>footer {
  border-color: #e1e6ec !important;
  background: #fff !important;
}

html[data-theme="light"] .ref-header-popover:not(.ref-profile-popover)>header h3 {
  color: #202936 !important;
}

html[data-theme="light"] .ref-header-popover:not(.ref-profile-popover)>header span {
  color: #687386 !important;
}

html[data-theme="light"] .ref-header-popover:not(.ref-profile-popover)>header b {
  color: var(--app-accent) !important;
  background: color-mix(in srgb, var(--app-accent) 12%, #fff) !important;
}

html[data-theme="light"] .ref-header-popover:not(.ref-profile-popover)>div>button {
  border: 1px solid transparent !important;
  color: #202936 !important;
  background: #fff !important;
}

html[data-theme="light"] .ref-header-popover:not(.ref-profile-popover)>div>button:hover,
html[data-theme="light"] .ref-header-popover:not(.ref-profile-popover)>div>button.selected {
  border-color: #e0e5eb !important;
  background: #f3f6f9 !important;
}

html[data-theme="light"] .ref-header-popover:not(.ref-profile-popover)>div>button strong {
  color: #263141 !important;
}

html[data-theme="light"] .ref-header-popover:not(.ref-profile-popover)>div>button small,
html[data-theme="light"] .ref-header-popover:not(.ref-profile-popover) time {
  color: #687386 !important;
}

html[data-theme="light"] .ref-header-popover:not(.ref-profile-popover)>div>button>.material-symbols-rounded {
  color: #8792a2 !important;
}

html[data-theme="light"] .ref-header-popover:not(.ref-profile-popover)>footer button {
  color: var(--app-on-accent) !important;
  background: var(--app-accent-fill) !important;
}

/* Final high-specificity light pass. The legacy dashboard contains late
   dark-theme rules with !important; mirror their exact structural depth. */
html[data-theme="light"] body .reference-dashboard.reference-dashboard .ref-filterbar .ref-filter-control .ref-filter-trigger,
html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-report-controls .ref-filter-control,
html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-report-controls .ref-filter-control .ref-filter-trigger {
  border-color: #d9e0e8 !important;
  color: #344153 !important;
  background: #fff !important;
  box-shadow: none !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard .ref-filter-trigger .material-symbols-rounded {
  color: #687386 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard .ref-filter-menu,
html[data-theme="light"] body .reference-dashboard.reference-dashboard .ref-filter-menu>label,
html[data-theme="light"] body .reference-dashboard.reference-dashboard .ref-filter-menu>div,
html[data-theme="light"] body .reference-dashboard.reference-dashboard .ref-filter-menu>div>button {
  border-color: #dce2e9 !important;
  color: #344153 !important;
  background: #fff !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard .ref-filter-menu>div>button :is(strong, span) {
  color: #344153 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard .ref-filter-menu>div>button small {
  color: #687386 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard .ref-filter-menu>div>button:hover,
html[data-theme="light"] body .reference-dashboard.reference-dashboard .ref-filter-menu>div>button.selected {
  background: #f2f5f8 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard .ref-segmented-tabs {
  border-color: #d8dfe7 !important;
  background: #eef2f6 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard .ref-segmented-tabs button {
  color: #687386 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard .ref-segmented-tabs button.active {
  color: var(--app-on-accent) !important;
  background: var(--app-accent-fill) !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard .ref-segmented-tabs button.active>span {
  color: var(--app-on-accent) !important;
  background: rgba(255, 255, 255, .5) !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-overview .ref-ov-scene .ref-ov-card .ref-ov-capacity .ref-ov-capacity-stats>span {
  border-color: #dce2e9 !important;
  color: #202936 !important;
  background: #eef2f6 !important;
  box-shadow: none !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-overview .ref-ov-capacity-stats>span>b {
  color: #202936 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-overview .ref-ov-capacity-stats>span>small {
  color: #687386 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-overview .ref-ov-card .ref-ov-capacity .ref-cap-stats.ref-cap-stats>div {
  border-color: #dbe2ea !important;
  color: #202936 !important;
  background: #f1f4f7 !important;
  box-shadow: none !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-overview .ref-ov-card .ref-ov-capacity .ref-cap-stats.ref-cap-stats>div>b {
  color: #202936 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-overview .ref-ov-card .ref-ov-capacity .ref-cap-stats.ref-cap-stats>div>small {
  color: #687386 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-map .ref-map-browse .ref-map-request-list>button.ref-map-request-card.active {
  border-color: color-mix(in srgb, var(--app-accent) 38%, #dce2e9) !important;
  color: #202936 !important;
  background: color-mix(in srgb, var(--app-accent) 6%, #fff) !important;
  box-shadow: inset 3px 0 0 var(--app-accent) !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-map .ref-map-browse .ref-map-request-list>button.ref-map-request-card.active .ref-request-id :is(strong, small) {
  color: #202936 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-timeline .ref-filterbar .tl-seg {
  border-color: #d9e0e8 !important;
  color: #344153 !important;
  background: #eef2f6 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-timeline .ref-filterbar .tl-seg button:not(.on) {
  color: #687386 !important;
  background: transparent !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-timeline .ref-filterbar .tl-seg button.on {
  color: var(--app-on-accent) !important;
  background: var(--app-accent-fill) !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-timeline .reference-content .ref-timeline-workspace .tl-loadmore,
html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-timeline .reference-content .ref-timeline-workspace .tl-loadmore:hover {
  border-color: color-mix(in srgb, var(--app-accent) 34%, #d9e0e8) !important;
  color: var(--app-accent) !important;
  background: #fff !important;
  box-shadow: 0 6px 18px rgba(31, 41, 55, .08) !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-timeline .tl-loadmore b {
  color: #687386 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-reports .ref-report-controls {
  border-color: #dbe1e8 !important;
  color: #202936 !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(31, 41, 55, .07) !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v4>article {
  --ref-ink: #202936;
  --ref-muted: #687386;
  border-color: #dbe1e8 !important;
  color: #202936 !important;
  background: linear-gradient(180deg, #fff 0%, #f5f7fa 100%) !important;
  box-shadow: 0 10px 28px rgba(31, 41, 55, .08) !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v4>article :is(h2, h3, h4, strong, b) {
  color: #202936 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v4>article :is(p, small, span:not(.material-symbols-rounded)) {
  color: #687386 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v4>article>header>span,
html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-report-demand>header>div:first-child>span {
  color: var(--app-accent) !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-demand-compact-table,
html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-demand-compact-head,
html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-demand-compact-pagination,
html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-demand-compact-pagination button {
  border-color: #dce2e9 !important;
  color: #344153 !important;
  background: #fff !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-demand-compact-body>button {
  border-color: #e2e7ed !important;
  color: #344153 !important;
  background: transparent !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-demand-compact-body .account strong,
html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-demand-compact-body .requests,
html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-demand-compact-body .delivery>b {
  color: #202936 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports :is(.ref-report-pipeline p > i, .ref-report-status p > i, .ref-report-workload .ref-eng-bar, .ref-demand-compact-body .delivery > i) {
  background: #e3e8ee !important;
}

/* Remaining dark atoms: navigation, chart legends, map chrome and connectors. */
/* The primary navigation is a sibling of the dashboard body inside .ref-header. */
html[data-theme="light"] body .ref-header.ref-header .ref-navigation.ref-navigation {
  border-color: #d7dee7 !important;
  background: #fff !important;
  box-shadow: none !important;
}

html[data-theme="light"] body .ref-header.ref-header .ref-navigation.ref-navigation button:not(.active) {
  color: #687386 !important;
  -webkit-text-fill-color: #687386 !important;
}

html[data-theme="light"] body .ref-header.ref-header .ref-navigation.ref-navigation button:not(.active):hover {
  color: #202936 !important;
  -webkit-text-fill-color: #202936 !important;
  background: #f1f4f7 !important;
}

html[data-theme="light"] body .ref-header.ref-header .ref-navigation.ref-navigation button.active {
  color: var(--app-on-accent) !important;
  -webkit-text-fill-color: var(--app-on-accent) !important;
  background: var(--app-accent-fill) !important;
}

html[data-theme="light"] body .ref-header.ref-header .ref-navigation.ref-navigation button.active :is(span, .material-symbols-rounded) {
  color: var(--app-on-accent) !important;
  -webkit-text-fill-color: var(--app-on-accent) !important;
}

html[data-theme="light"] body .ref-header.ref-header :is(.ref-rot, .ref-rot-timing) {
  border-color: #d7dee7 !important;
  color: #344153 !important;
  background: #fff !important;
  box-shadow: none !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-overview .ref-ov-head .ref-ov-dots.ref-ov-dots {
  border-color: #d7dee7 !important;
  background: #fff !important;
  box-shadow: none !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-overview .ref-ov-head .ref-ov-dots.ref-ov-dots button:not(.active) {
  color: #687386 !important;
  -webkit-text-fill-color: #687386 !important;
  background: transparent !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-overview .ref-ov-head .ref-ov-dots.ref-ov-dots button:not(.active):hover {
  color: #202936 !important;
  -webkit-text-fill-color: #202936 !important;
  background: #f1f4f7 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-overview .ref-ov-head .ref-ov-dots.ref-ov-dots button.active {
  color: var(--app-on-accent) !important;
  -webkit-text-fill-color: var(--app-on-accent) !important;
  background: var(--app-accent-fill) !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard .ref-request-avatar {
  border-color: #cbd4df !important;
  color: #273344 !important;
  background: color-mix(in srgb, var(--app-accent) 11%, #eef2f6) !important;
  box-shadow: 0 4px 10px rgba(31, 41, 55, .10) !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-requests .ref-request-detail>footer button {
  border-color: color-mix(in srgb, var(--app-accent) 34%, #d7dee7) !important;
  color: var(--app-accent) !important;
  -webkit-text-fill-color: var(--app-accent) !important;
  background: #fff !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-map .ref-map-stage .ref-map-legend {
  border-color: #d6dde6 !important;
  color: #344153 !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 7px 20px rgba(31, 41, 55, .13) !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-map .ref-map-stage .ref-map-legend>span,
html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-map .ref-map-stage .ref-map-legend>b {
  border-color: #dce2e9 !important;
  color: #566274 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-map .ref-map-stage,
html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-map .ref-map-stage iframe {
  background: #eef2f6 !important;
  color-scheme: light;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-map .ref-map-analytics .ref-analytic-donut-card .ref-donut-center>strong {
  color: #202936 !important;
  -webkit-text-fill-color: #202936 !important;
  opacity: 1 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-map .ref-map-analytics .ref-analytic-donut-card .ref-donut-center>strong>small,
html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-map .ref-map-analytics .ref-analytic-donut-card .ref-donut-center>span {
  color: #687386 !important;
  -webkit-text-fill-color: #687386 !important;
  opacity: 1 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-map .ref-map-analytics .ref-analytic-donut-card .ref-donut-track {
  stroke: #dfe5ec !important;
}

/* Live Tracker composition: deliberate gutters and a polished request rail. */
.reference-dashboard.ref-view-map .reference-content.reference-content {
  gap: 16px !important;
}

.reference-dashboard.ref-view-map .reference-content>.ref-map-workspace.ref-map-workspace--3col {
  gap: 18px !important;
}

.reference-dashboard.ref-view-map .reference-content>.ref-map-analytics .ref-analytic-charts--row {
  gap: 16px !important;
}

.reference-dashboard.ref-view-map .ref-filterbar.ref-filterbar--3 {
  gap: 14px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.reference-dashboard.ref-view-map .ref-map-browse.ref-map-browse {
  box-sizing: border-box !important;
  padding: 14px !important;
  border-radius: 22px !important;
}

.reference-dashboard.ref-view-map .ref-map-browse .ref-map-request-list.ref-map-request-list {
  gap: 10px !important;
  max-height: 360px !important;
  padding: 0 !important;
}

.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card {
  min-height: 64px !important;
  height: 64px !important;
  max-height: 64px !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  gap: 11px !important;
  border-radius: 16px !important;
  padding: 10px 12px !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease !important;
}

.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card:hover {
  transform: translateX(2px) !important;
}

.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card>.ref-request-avatar {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 13px !important;
  font-size: 10px !important;
}

.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card .ref-request-id strong {
  font-size: 12.5px !important;
  line-height: 1.2 !important;
}

.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card .ref-request-id small {
  margin-top: 4px !important;
  font-size: 9px !important;
}

.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card>.ref-status {
  border-radius: 999px !important;
  padding: 5px 9px !important;
  font-size: 8px !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-map .ref-map-browse.ref-map-browse {
  border: 1px solid #dbe2ea !important;
  background: linear-gradient(180deg, #fbfcfd 0%, #f4f7fa 100%) !important;
  box-shadow: none !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-map :is(.ref-map-stage, .ref-map-sr-panel) {
  box-shadow: none !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card {
  border: 1px solid #e3e8ee !important;
  color: #202936 !important;
  background: #fff !important;
  box-shadow: 0 4px 13px rgba(31, 41, 55, .055) !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card:hover {
  border-color: color-mix(in srgb, var(--app-accent) 30%, #dbe2ea) !important;
  background: color-mix(in srgb, var(--app-accent) 3%, #fff) !important;
  box-shadow: 0 8px 20px rgba(31, 41, 55, .10) !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card.active {
  border-color: color-mix(in srgb, var(--app-accent) 42%, #dbe2ea) !important;
  background: linear-gradient(105deg, color-mix(in srgb, var(--app-accent) 10%, #fff), #fff 72%) !important;
  box-shadow: inset 4px 0 0 var(--app-accent), 0 9px 23px rgba(31, 41, 55, .11) !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card.active>.ref-request-avatar {
  border-color: color-mix(in srgb, var(--app-accent) 55%, #fff) !important;
  color: var(--app-on-accent) !important;
  -webkit-text-fill-color: var(--app-on-accent) !important;
  background: var(--app-accent-fill) !important;
  box-shadow: 0 5px 13px color-mix(in srgb, var(--app-accent) 22%, transparent) !important;
}

@media (max-width: 1100px) {
  .reference-dashboard.ref-view-map .reference-content.reference-content {
    gap: 12px !important;
  }

  .reference-dashboard.ref-view-map .reference-content>.ref-map-workspace.ref-map-workspace--3col {
    gap: 12px !important;
  }
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-timeline .tl-card .tl-trail :is(line, path) {
  opacity: .72 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-timeline .tl-card .tl-trail circle {
  stroke: #fff !important;
  stroke-width: 1.8px !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-timeline .tl-card .tl-ring circle:first-child {
  stroke: #e0e6ed !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-report-ring-list>p {
  border-color: #dbe2e9 !important;
  color: #344153 !important;
  background: #f1f4f7 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-report-ring-list>p :is(span, b, small) {
  color: #344153 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-report-ring-visual .track {
  stroke: #dfe5ec !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-flow .ref-flow-spine {
  opacity: 1 !important;
  background: #cbd5e1 !important;
  box-shadow: 0 1px 0 #fff !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-flow .ref-flow-node>i.zero {
  border-color: #cbd5e1 !important;
  color: #4b5869 !important;
  background: #e8edf2 !important;
  box-shadow: 0 3px 9px rgba(31, 41, 55, .08) !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-typecol .ref-typecol-bar {
  background: #e6ebf1 !important;
}

html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-reports .ref-demand-compact-body .rank {
  color: #687386 !important;
}

/* Portal-rendered dialogs sit under <body>, not inside .reference-dashboard. */
html[data-theme="light"] body :is(.ref-export-dialog, .ref-preview-panel, .ref-cust-modal-panel, .ref-sr-modal-panel, .ref-media-modal > section) {
  --ref-shell: #fff;
  --ref-card: #f5f7fa;
  --ref-ink: #202936;
  --ref-muted: #687386;
  --ref-faint: #8994a3;
  --ref-border: #dbe2ea;
  border-color: #dbe2ea !important;
  color: #202936 !important;
  background: #fff !important;
  box-shadow: 0 28px 80px rgba(31, 41, 55, .22) !important;
  color-scheme: light;
}

html[data-theme="light"] body :is(.ref-export-dialog, .ref-preview-panel, .ref-cust-modal-panel, .ref-sr-modal-panel, .ref-media-modal > section) :is(h1, h2, h3, h4, h5, strong, b) {
  color: #202936 !important;
  -webkit-text-fill-color: #202936 !important;
}

html[data-theme="light"] body :is(.ref-export-dialog, .ref-preview-panel, .ref-cust-modal-panel, .ref-sr-modal-panel, .ref-media-modal > section) :is(p, small) {
  color: #687386 !important;
}

html[data-theme="light"] body .ref-export-modal .ref-export-dialog>header,
html[data-theme="light"] body .ref-export-modal .ref-export-cards {
  border-color: #e0e6ed !important;
  background: #fff !important;
}

html[data-theme="light"] body .ref-export-modal .ref-export-card.ref-export-card {
  border-color: #dbe2ea !important;
  color: #202936 !important;
  background: #f5f7fa !important;
}

html[data-theme="light"] body .ref-export-modal .ref-export-card.ref-export-card:hover {
  border-color: var(--app-accent) !important;
  background: #eef2f6 !important;
}

html[data-theme="light"] body .ref-export-modal .ref-export-card.ref-export-card.universal {
  border-color: color-mix(in srgb, var(--app-accent) 42%, #dbe2ea) !important;
  background: color-mix(in srgb, var(--app-accent) 8%, #fff) !important;
}

html[data-theme="light"] body .ref-export-modal .ref-export-close.ref-export-close,
html[data-theme="light"] body .ref-preview-modal .ref-preview-close.ref-preview-close,
html[data-theme="light"] body :is(.ref-cust-modal-close, .ref-sr-modal-close) {
  border-color: #d8e0e8 !important;
  color: #4b5869 !important;
  background: #fff !important;
}

html[data-theme="light"] body .ref-preview-modal .ref-preview-head {
  border-color: #dbe2ea !important;
  background: #fff !important;
}

html[data-theme="light"] body .ref-preview-modal .ref-preview-body {
  background: #eef2f6 !important;
}

html[data-theme="light"] body .ref-preview-modal :is(.ref-xlsp, .ref-xlsp-tabs, .ref-xlsp-body) {
  border-color: #dbe2ea !important;
  color: #202936 !important;
  background: #fff !important;
}

html[data-theme="light"] body .ref-preview-modal .ref-xlsp-tabs button.on,
html[data-theme="light"] body .ref-preview-modal .ref-xlsp-kpis>div,
html[data-theme="light"] body .ref-preview-modal .ref-xlsp-tablewrap {
  border-color: #dbe2ea !important;
  color: #202936 !important;
  background: #f5f7fa !important;
}

html[data-theme="light"] body .ref-preview-modal .ref-xlsp-table th {
  border-color: #dbe2ea !important;
  color: #344153 !important;
  background: #edf1f5 !important;
}

html[data-theme="light"] body .ref-preview-modal .ref-xlsp-table td {
  border-color: #e3e8ee !important;
  color: #4b5869 !important;
  background: #fff !important;
}

html[data-theme="light"] body .ref-preview-modal .ref-xlsp-table tbody tr:nth-child(even) td {
  background: #f7f9fb !important;
}

html[data-theme="light"] body .ref-preview-modal .ref-docp-band {
  border-color: #dbe2ea !important;
  background: #f1f4f7 !important;
}

html[data-theme="light"] body .ref-media-modal>section>header,
html[data-theme="light"] body .ref-media-modal>section>footer {
  border-color: #dbe2ea !important;
  color: #344153 !important;
  background: #fff !important;
}

html[data-theme="light"] body .ref-media-modal .ref-media-preview {
  background: #eef2f6 !important;
}

html[data-theme="light"] body .ref-media-modal .ref-icon-button {
  border-color: #d8e0e8 !important;
  color: #4b5869 !important;
  background: #fff !important;
}

html[data-theme="light"] body .ref-cust-modal-panel.tld,
html[data-theme="light"] body .ref-cust-modal-panel :is(.ref-customer-profile, .ref-engineer-profile),
html[data-theme="light"] body .ref-sr-modal-panel .ref-request-detail {
  color: #202936 !important;
  background: #fff !important;
}

html[data-theme="light"] body .ref-cust-modal-panel :is(.ref-acct-panel, .ref-profile-timeline > div, .ref-engineer-profile-timeline > div, .ref-eng-accounts > div),
html[data-theme="light"] body .ref-sr-modal-panel :is(.ref-detail-body, .ref-detail-tabs, .ref-detail-items--2 article, .ref-progress-card, .ref-detail-description, .ref-detail-timeline article, .ref-assignee-grid article, .ref-assignment-main, .ref-assignment-mini) {
  border-color: #dbe2ea !important;
  color: #202936 !important;
  background: #f5f7fa !important;
}

html[data-theme="light"] body .ref-sr-modal-panel .ref-request-detail> :is(header, footer),
html[data-theme="light"] body .ref-sr-modal-panel .ref-detail-tabs {
  border-color: #dbe2ea !important;
  background: #fff !important;
}

html[data-theme="light"] body .ref-sr-modal-panel .ref-detail-tabs button:not(.active) {
  color: #687386 !important;
  background: transparent !important;
}

html[data-theme="light"] body .ref-sr-modal-panel :is(.ref-detail-timeline::before, .ref-progress-card i, .ref-acct-pipeline i) {
  background: #dfe6ed !important;
}

/* Request details are fully light in light mode. Keep the semantic accent
   colours, but remove the dark islands left by the media metrics and actions. */
html[data-theme="light"] body .ref-sr-modal-panel {
  --req-bg: #ffffff;
  --req-header: #ffffff;
  --req-tabbar: #ffffff;
  --req-card: #f5f7fa;
  --req-card-soft: #ffffff;
  --req-border: #dbe2ea;
  --req-text: #202936;
  --req-muted: #687386;
  animation: ref-light-modal-in .18s cubic-bezier(.2, .8, .2, 1) both !important;
}

@keyframes ref-light-modal-in {
  from {
    transform: translateY(8px) scale(.985);
  }

  to {
    transform: translateY(0) scale(1);
  }
}

html[data-theme="light"] body .ref-sr-modal-panel .ref-request-detail>header>div>span,
html[data-theme="light"] body .ref-sr-modal-panel .ref-detail-items--2 article>span,
html[data-theme="light"] body .ref-sr-modal-panel .ref-progress-card>span,
html[data-theme="light"] body .ref-sr-modal-panel .ref-request-detail>footer>span {
  color: #667386 !important;
  -webkit-text-fill-color: #667386 !important;
}

html[data-theme="light"] body .ref-sr-modal-panel .ref-request-detail>header .ref-status {
  border-color: color-mix(in srgb, var(--app-accent) 32%, #dbe2ea) !important;
  color: color-mix(in srgb, var(--app-accent) 72%, #202936) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--app-accent) 72%, #202936) !important;
  background: color-mix(in srgb, var(--app-accent) 11%, #ffffff) !important;
}

/* Light request views use tinted icon tiles, never dark-theme islands. */
html[data-theme="light"] body :is(.ref-sr-modal-panel, .ref-view-requests) .ref-detail-items--2 article:nth-child(1)>.material-symbols-rounded,
html[data-theme="light"] body :is(.ref-sr-modal-panel, .ref-view-requests) :is(.ref-media-stats article:nth-child(1), .ref-assignment-contact span:nth-child(1), .ref-assignment-status)>.material-symbols-rounded {
  border-color: #b8e5e7 !important;
  color: #087d84 !important;
  -webkit-text-fill-color: #087d84 !important;
  background: #def5f6 !important;
  box-shadow: none !important;
}

html[data-theme="light"] body :is(.ref-sr-modal-panel, .ref-view-requests) .ref-detail-items--2 article:nth-child(2)>.material-symbols-rounded,
html[data-theme="light"] body :is(.ref-sr-modal-panel, .ref-view-requests) :is(.ref-media-stats article:nth-child(2), .ref-assignment-contact span:nth-child(2))>.material-symbols-rounded {
  border-color: #d5c9f4 !important;
  color: #6841bd !important;
  -webkit-text-fill-color: #6841bd !important;
  background: #eee9fb !important;
  box-shadow: none !important;
}

html[data-theme="light"] body :is(.ref-sr-modal-panel, .ref-view-requests) .ref-detail-items--2 article:nth-child(3)>.material-symbols-rounded,
html[data-theme="light"] body :is(.ref-sr-modal-panel, .ref-view-requests) :is(.ref-media-stats article:nth-child(3), .ref-assignment-contact span:nth-child(3), .ref-media-latest)>.material-symbols-rounded {
  border-color: #ead6a5 !important;
  color: #8a5a00 !important;
  -webkit-text-fill-color: #8a5a00 !important;
  background: #fff3d3 !important;
  box-shadow: none !important;
}

html[data-theme="light"] body :is(.ref-sr-modal-panel, .ref-view-requests) .ref-assignment-mini:nth-child(1) .material-symbols-rounded {
  color: #087d84 !important;
  -webkit-text-fill-color: #087d84 !important;
  background: #def5f6 !important;
}

html[data-theme="light"] body :is(.ref-sr-modal-panel, .ref-view-requests) .ref-assignment-mini:nth-child(2) .material-symbols-rounded {
  color: #6841bd !important;
  -webkit-text-fill-color: #6841bd !important;
  background: #eee9fb !important;
}

html[data-theme="light"] body :is(.ref-sr-modal-panel, .ref-view-requests) .ref-assignment-mini:nth-child(3) .material-symbols-rounded {
  color: #8a5a00 !important;
  -webkit-text-fill-color: #8a5a00 !important;
  background: #fff3d3 !important;
}

html[data-theme="light"] body .ref-sr-modal-panel :is(.ref-media-stats article, .ref-media-latest, .ref-media-strip > button:not(:has(img))) {
  border-color: #dbe2ea !important;
  color: #202936 !important;
  background: linear-gradient(160deg, #ffffff 0%, #f5f7fa 100%) !important;
  box-shadow: none !important;
}

html[data-theme="light"] body .ref-sr-modal-panel .ref-media-stats :is(span, strong),
html[data-theme="light"] body .ref-sr-modal-panel .ref-media-latest :is(span, strong) {
  color: #202936 !important;
  -webkit-text-fill-color: #202936 !important;
}

html[data-theme="light"] body .ref-sr-modal-panel .ref-media-stats span,
html[data-theme="light"] body .ref-sr-modal-panel .ref-media-latest span {
  color: #687386 !important;
  -webkit-text-fill-color: #687386 !important;
}

html[data-theme="light"] body .ref-sr-modal-panel .ref-detail-map-label {
  border: 1px solid #d7dee7 !important;
  color: #344153 !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 4px 12px rgba(31, 41, 55, .12) !important;
}

html[data-theme="light"] body .ref-sr-modal-panel .ref-request-detail>footer button {
  border-color: color-mix(in srgb, var(--app-accent) 34%, #d7dee7) !important;
  color: var(--app-accent) !important;
  -webkit-text-fill-color: var(--app-accent) !important;
  background: color-mix(in srgb, var(--app-accent) 5%, #ffffff) !important;
  box-shadow: none !important;
}

html[data-theme="light"] body .ref-sr-modal-panel .ref-request-detail>footer button:hover {
  border-color: var(--app-accent) !important;
  background: color-mix(in srgb, var(--app-accent) 10%, #ffffff) !important;
}

/* Leaderboard rows must not flash the dark-theme hover surface in light mode. */
html[data-theme="light"] body .reference-dashboard.reference-dashboard.ref-view-overview .ref-ov-board-row:hover {
  background: color-mix(in srgb, var(--app-accent) 6%, #f1f4f7) !important;
}

/* Top-navigation settings dropdown. */
.ref-appearance-button {
  display: inline-flex !important;
}

/* Compact account menu anchored to the profile avatar. */
.ref-profile-popover {
  top: 50px !important;
  right: 0 !important;
  width: min(288px, calc(100vw - 24px)) !important;
  overflow: visible !important;
  border: 1px solid #363a42 !important;
  border-radius: 17px !important;
  background: #1e2024 !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .4) !important;
}

.ref-profile-popover::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 16px;
  width: 11px;
  height: 11px;
  border-top: 1px solid #363a42;
  border-left: 1px solid #363a42;
  background: #1e2024;
  transform: rotate(45deg);
}

.ref-profile-card {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  border-bottom: 1px solid #30343b !important;
  border-radius: 17px 17px 0 0;
  padding: 13px 14px !important;
  background: #1e2024 !important;
}

.ref-profile-avatar {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  position: relative;
  flex: 0 0 42px !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: var(--app-on-accent) !important;
  background: var(--app-accent-fill) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.ref-profile-avatar>i {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 9px;
  height: 9px;
  border: 2px solid #1e2024;
  border-radius: 50%;
  background: #34d399;
}

.ref-profile-card>div {
  min-width: 0;
}

.ref-profile-card>div>small {
  display: block;
  margin: 0 0 2px;
  color: var(--app-accent);
  font-size: 7px !important;
  font-weight: 750;
  letter-spacing: .65px;
  text-transform: uppercase;
}

.ref-profile-card>div>strong {
  display: block;
  overflow: hidden;
  color: #f1f3f6 !important;
  font-size: 13px !important;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-profile-card>div>span {
  display: block;
  margin-top: 3px;
  color: #929aa6;
  font-size: 9px !important;
}

.ref-profile-meta {
  display: grid !important;
  gap: 6px !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 10px !important;
  background: #1e2024 !important;
}

.ref-profile-meta p {
  min-height: 47px;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 7px 9px;
  background: #24272c;
}

.ref-profile-meta p>i {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex: 0 0 29px;
  border-radius: 9px;
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 14%, transparent);
  font-style: normal;
}

.ref-profile-meta p>i .material-symbols-rounded {
  color: inherit !important;
  font-size: 16px !important;
}

.ref-profile-meta p>span {
  min-width: 0;
}

.ref-profile-meta p small,
.ref-profile-meta p b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-profile-meta p small {
  color: #858e9b;
  font-size: 7px !important;
  font-weight: 600;
  letter-spacing: .25px;
}

.ref-profile-meta p b {
  margin-top: 2px;
  color: #dfe3e8 !important;
  font-size: 9px !important;
  font-weight: 700;
}

.ref-profile-popover>footer {
  border-top: 1px solid #30343b !important;
  border-radius: 0 0 17px 17px;
  padding: 10px !important;
  background: #1e2024 !important;
}

.ref-profile-popover>footer button {
  min-height: 38px !important;
  border: 1px solid #3a3e46 !important;
  border-radius: 11px !important;
  padding: 8px 12px !important;
  color: #f18b82 !important;
  background: #24272c !important;
  box-shadow: none !important;
  font-size: 9px !important;
}

.ref-profile-popover>footer button:hover {
  border-color: #ef716d !important;
  color: #fff !important;
  background: #b94743 !important;
}

.ref-profile-popover>footer button .material-symbols-rounded {
  font-size: 16px !important;
}

html[data-theme="light"] .ref-profile-popover {
  border-color: #d9dee6 !important;
  background: #fff !important;
  box-shadow: 0 20px 48px rgba(31, 41, 55, .16) !important;
}

html[data-theme="light"] .ref-profile-popover::before,
html[data-theme="light"] .ref-profile-card,
html[data-theme="light"] .ref-profile-meta,
html[data-theme="light"] .ref-profile-popover>footer {
  border-color: #e3e7ed !important;
  background: #fff !important;
}

html[data-theme="light"] .ref-profile-card>div>strong {
  color: #1f2937 !important;
}

html[data-theme="light"] .ref-profile-card>div>span {
  color: #6b7280;
}

html[data-theme="light"] .ref-profile-avatar>i {
  border-color: #fff;
}

html[data-theme="light"] .ref-profile-meta p {
  background: #f6f7f9;
}

html[data-theme="light"] .ref-profile-meta p b {
  color: #374151 !important;
}

html[data-theme="light"] .ref-profile-popover>footer button {
  border-color: #f2d1cf !important;
  color: #c2413b !important;
  background: #fff7f6 !important;
}

.appearance-layer {
  position: fixed;
  inset: 0;
  z-index: 10050;
  pointer-events: none;
  font-family: var(--app-font-family);
}

.appearance-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: rgba(5, 8, 12, .26);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}

.appearance-panel {
  --ap-bg: #fff;
  --ap-soft: #f5f6f8;
  --ap-ink: #20242b;
  --ap-muted: #747e8d;
  --ap-border: #e1e5eb;
  position: absolute;
  top: 78px;
  right: max(22px, calc((100vw - 1460px) / 2));
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100vh - 94px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ap-border);
  border-radius: 20px;
  color: var(--ap-ink);
  background: var(--ap-bg);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
  pointer-events: auto;
  animation: appearance-in .18s ease-out;
}

html[data-theme="dark"] .appearance-panel {
  --ap-bg: #1e2024;
  --ap-soft: #272a2f;
  --ap-ink: #eef0f4;
  --ap-muted: #a5acb7;
  --ap-border: #383c43;
}

@keyframes appearance-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.985);
  }
}

.appearance-panel>header {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--ap-border);
  padding: 14px 18px;
}

.appearance-panel>header span,
.appearance-section-title small {
  display: block;
  color: var(--ap-muted);
  font-size: 11px;
}

.appearance-panel>header h2 {
  margin: 2px 0 0;
  color: var(--ap-ink);
  font-size: 21px;
}

.appearance-panel>header>button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ap-border);
  border-radius: 11px;
  color: var(--ap-ink);
  background: var(--ap-soft);
}

.appearance-panel-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.appearance-panel section {
  border-bottom: 1px solid var(--ap-border);
  padding: 18px;
}

.appearance-section-title {
  margin-bottom: 12px;
}

.appearance-section-title strong {
  display: block;
  font-size: 13px;
}

.appearance-section-title small {
  margin-top: 3px;
  line-height: 1.4;
}

.appearance-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.appearance-mode-grid button {
  min-height: 72px;
  display: grid;
  place-items: center;
  position: relative;
  gap: 4px;
  border: 1px solid var(--ap-border);
  border-radius: 13px;
  color: var(--ap-muted);
  background: var(--ap-soft);
}

.appearance-mode-grid button>span {
  font-size: 23px;
}

.appearance-mode-grid button b {
  font-size: 11px;
}

.appearance-mode-grid button i {
  position: absolute;
  top: 7px;
  right: 7px;
  color: var(--app-accent);
  font-size: 15px;
  font-style: normal;
}

.appearance-mode-grid button.selected,
.appearance-font-list button.selected,
.appearance-type-controls button.selected {
  border-color: var(--app-accent);
  color: var(--app-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 14%, transparent);
}

.appearance-swatches+.appearance-swatches {
  margin-top: 12px;
}

.appearance-swatches label {
  display: block;
  margin-bottom: 7px;
  color: var(--ap-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.appearance-swatches>div {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
}

.appearance-swatches button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  justify-self: center;
  position: relative;
  border: 2px solid transparent;
  border-radius: 999px !important;
  padding: 0 !important;
  color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25), 0 3px 9px rgba(0, 0, 0, .2);
  transition: transform .16s ease, box-shadow .16s ease;
}

.appearance-swatches button::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: inherit;
  pointer-events: none;
}

.appearance-swatches button:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .3), 0 8px 18px rgba(0, 0, 0, .28);
}

.appearance-swatches button.selected {
  border-color: var(--ap-bg);
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .26);
}

.appearance-swatches button span {
  position: relative;
  z-index: 1;
  font-size: 16px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.appearance-font-search {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ap-border);
  border-radius: 11px;
  padding: 0 11px;
  color: var(--ap-muted);
  background: var(--ap-soft);
}

.appearance-font-search>span {
  font-size: 18px;
}

.appearance-font-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--ap-ink);
  background: transparent;
  font-size: 12px;
}

.appearance-font-list {
  max-height: 210px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  overflow-y: auto;
  margin-top: 9px;
  padding-right: 3px;
  scrollbar-width: thin;
}

.appearance-font-list button {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--ap-border);
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--ap-ink);
  background: var(--ap-bg);
  text-align: left;
}

.appearance-font-list button>span {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appearance-font-list button small {
  color: var(--ap-muted);
  font: 8px var(--app-font-family) !important;
  text-transform: uppercase;
}

.appearance-font-list button i {
  color: var(--app-accent);
  font-size: 15px;
  font-style: normal;
}

.appearance-type-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 13px;
}

.appearance-type-controls button {
  min-height: 52px;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 1px solid var(--ap-border);
  border-radius: 10px;
  color: var(--ap-ink);
  background: var(--ap-soft);
}

.appearance-type-controls button:disabled {
  opacity: .38;
}

.appearance-type-controls button b,
.appearance-type-controls button i {
  font: 700 15px var(--app-font-family);
}

.appearance-type-controls button i {
  font-style: italic;
}

.appearance-type-controls button span {
  color: var(--ap-muted);
  font-size: 9px;
}

.appearance-size-status {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--ap-muted);
  font-size: 10px;
}

.appearance-panel>footer {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  background: var(--ap-soft);
}

.appearance-panel>footer button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  color: var(--app-accent);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
}

.appearance-panel>footer button span {
  font-size: 17px;
}

.appearance-panel>footer small {
  color: var(--ap-muted);
  font-size: 9px;
}

@media (max-width: 700px) {
  .appearance-panel {
    top: 62px;
    right: 12px;
    max-height: calc(100vh - 74px);
  }

  .appearance-font-list {
    grid-template-columns: 1fr;
  }

  .appearance-swatches>div {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 5px;
  }

  .appearance-swatches button {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
  }
}

/* Flat light-mode elevation policy. Component styles are intentionally shadowed
   in dark mode; light mode uses borders only across pages and portal dialogs. */
html[data-theme="light"] body #root .reference-dashboard *,
html[data-theme="light"] body.theme-light :is(.ref-sr-modal, .ref-cust-modal, .ref-media-modal, .ref-export-modal, .ref-preview-modal, .ref-acct-modal) *,
html[data-theme="light"] body.theme-light :is(.ref-sr-modal-panel, .ref-cust-modal-panel, .ref-media-modal > section, .ref-export-dialog, .ref-preview-panel) {
  box-shadow: none !important;
}

/* Account and engineer drill-downs share this portal shell. The original
   component was dark-only; provide a complete light palette for every layer. */
html[data-theme="light"] body.theme-light .ref-acct-modal>section {
  border-color: #d7dee7 !important;
  color: #202936 !important;
  background: #ffffff !important;
  scrollbar-color: #c7d0dc transparent !important;
  animation: ref-light-modal-in .18s cubic-bezier(.2, .8, .2, 1) both !important;
}

html[data-theme="light"] body.theme-light .ref-acct-modal>section>header {
  border-bottom: 1px solid #dbe2ea !important;
  background: radial-gradient(circle at 88% -30%, color-mix(in srgb, var(--app-accent) 12%, transparent), transparent 46%), linear-gradient(125deg, #ffffff, #f5f7fa) !important;
}

html[data-theme="light"] body.theme-light .ref-acct-close {
  border-color: #d7dee7 !important;
  color: #4b5869 !important;
  background: #f5f7fa !important;
}

html[data-theme="light"] body.theme-light .ref-acct-emoji {
  border-color: color-mix(in srgb, var(--app-accent) 30%, #d7dee7) !important;
  color: var(--app-accent) !important;
  background: color-mix(in srgb, var(--app-accent) 9%, #ffffff) !important;
}

html[data-theme="light"] body.theme-light .ref-acct-title>span {
  color: var(--app-accent) !important;
}

html[data-theme="light"] body.theme-light .ref-acct-title h2,
html[data-theme="light"] body.theme-light .ref-acct-panel h3,
html[data-theme="light"] body.theme-light .ref-acct-stats>div:not(.good):not(.warn):not(.bad) strong,
html[data-theme="light"] body.theme-light .ref-acct-pipeline p b,
html[data-theme="light"] body.theme-light .ref-acct-req-row>strong,
html[data-theme="light"] body.theme-light .ref-score-ring :is(strong, small) {
  color: #202936 !important;
  -webkit-text-fill-color: #202936 !important;
}

html[data-theme="light"] body.theme-light .ref-acct-title p,
html[data-theme="light"] body.theme-light .ref-acct-signal,
html[data-theme="light"] body.theme-light .ref-acct-pipeline p,
html[data-theme="light"] body.theme-light .ref-acct-req-row :is(.eng, .date, .sno),
html[data-theme="light"] body.theme-light .ref-acct-req-head,
html[data-theme="light"] body.theme-light .ref-acct-stats span,
html[data-theme="light"] body.theme-light .ref-acct-eng>span {
  color: #687386 !important;
}

html[data-theme="light"] body.theme-light .ref-acct-stats>div,
html[data-theme="light"] body.theme-light .ref-acct-panel {
  border-color: #dbe2ea !important;
  background: #f7f9fb !important;
}

html[data-theme="light"] body.theme-light .ref-acct-stats>div.good strong {
  color: #15805d !important;
}

html[data-theme="light"] body.theme-light .ref-acct-stats>div.warn strong {
  color: #946200 !important;
}

html[data-theme="light"] body.theme-light .ref-acct-stats>div.bad strong {
  color: #b84338 !important;
}

html[data-theme="light"] body.theme-light .ref-acct-pipeline p>i {
  background: #dfe6ed !important;
}

html[data-theme="light"] body.theme-light .ref-acct-req-head,
html[data-theme="light"] body.theme-light .ref-acct-req-row {
  border-color: #e0e6ed !important;
}

html[data-theme="light"] body.theme-light .ref-acct-req-row[role="button"]:hover {
  background: #f1f4f7 !important;
}

html[data-theme="light"] body.theme-light .ref-acct-modal .ref-ring-track {
  stroke: #dfe6ed !important;
}

html[data-theme="light"] body.theme-light .ref-acct-status {
  color: #536071 !important;
  background: #e9eef3 !important;
}

html[data-theme="light"] body.theme-light .ref-acct-status.s-complete {
  color: #147451 !important;
  background: #ddf5ea !important;
}

html[data-theme="light"] body.theme-light .ref-acct-status.s-cancelled {
  color: #aa3e34 !important;
  background: #fde7e4 !important;
}

html[data-theme="light"] body.theme-light .ref-acct-status.s-progress,
html[data-theme="light"] body.theme-light .ref-acct-status.s-hold {
  color: #8a5a00 !important;
  background: #fff1cf !important;
}

html[data-theme="light"] body.theme-light .ref-acct-title .ref-demand-tag,
html[data-theme="light"] body.theme-light :is(.ref-acct-eng b, .ref-acct-eng-chip) {
  border-color: color-mix(in srgb, var(--app-accent) 30%, #dbe2ea) !important;
  color: color-mix(in srgb, var(--app-accent) 75%, #202936) !important;
  background: color-mix(in srgb, var(--app-accent) 8%, #ffffff) !important;
}

html[data-theme="light"] body.theme-light .ref-acct-eng-more {
  border-color: #dbe2ea !important;
  color: #687386 !important;
  background: #eef2f6 !important;
}

/* Request picker opened from the Reports page. */
html[data-theme="light"] body.theme-light .ref-acct-chooser-card {
  border-color: #d7dee7 !important;
  color: #202936 !important;
  background: #ffffff !important;
}

html[data-theme="light"] body.theme-light .ref-acct-chooser-card>header h4,
html[data-theme="light"] body.theme-light .ref-acct-chooser-item strong {
  color: #202936 !important;
}

html[data-theme="light"] body.theme-light .ref-acct-chooser-card>header button,
html[data-theme="light"] body.theme-light .ref-acct-chooser-search,
html[data-theme="light"] body.theme-light .ref-acct-chooser-item,
html[data-theme="light"] body.theme-light .ref-acct-chooser-list button {
  border-color: #dbe2ea !important;
  color: #344153 !important;
  background: #f5f7fa !important;
}

html[data-theme="light"] body.theme-light .ref-acct-chooser-search input {
  color: #202936 !important;
}

html[data-theme="light"] body.theme-light .ref-acct-chooser-item:hover,
html[data-theme="light"] body.theme-light .ref-acct-chooser-list button:hover {
  background: #edf2f6 !important;
}

html[data-theme="light"] body.theme-light .ref-acct-chooser-all {
  color: #202936 !important;
  background: linear-gradient(120deg, #fff0e5, #fffaf6) !important;
}

html[data-theme="light"] body.theme-light .ref-acct-chooser-all strong {
  color: #202936 !important;
}

html[data-theme="light"] body.theme-light .ref-acct-chooser-all small {
  color: #667386 !important;
}

html[data-theme="light"] body.theme-light .ref-acct-chooser-all>.material-symbols-rounded {
  color: #d85d10 !important;
}

html[data-theme="light"] body.theme-light .ref-acct-chooser-card>header h4 em,
html[data-theme="light"] body.theme-light .ref-acct-chooser-sep,
html[data-theme="light"] body.theme-light .ref-acct-chooser-item small,
html[data-theme="light"] body.theme-light .ref-acct-chooser-foot .count {
  color: #687386 !important;
}

html[data-theme="light"] body.theme-light .ref-acct-chooser-foot .all-toggle {
  color: #344153 !important;
}

html[data-theme="light"] body.theme-light .ref-acct-chooser-search input::placeholder {
  color: #7a8595 !important;
}