/* Shared dashboard presentation. Load after page styles; print documents keep their own palette. */
@media screen {
  :root {
    --dashboard-max-width: 1760px;
    --dashboard-gutter: clamp(12px, 2.5vw, 48px);
    --bg-page: #14191e;
    --bg-page-soft: #191f25;
    --bg-card: #1c2228;
    --bg-card-strong: #28313a;
    --bg-input: #191f25;
    --bg-hover: #343f49;
    --bg-primary: #347e30;
    --bg-primary-hover: #286426;
    --border: #35414c;
    --border-strong: #56636f;
    --text-primary: #eef1f4;
    --text-secondary: #d0d7df;
    --text-muted: #a5b0bc;
    --text-faint: #929eab;
    --blue-text: #c3ced8;
    --blue-bg: rgba(137, 155, 173, .16);
    --ring: rgba(165, 184, 199, .35);
    --dashboard-bar-fill: linear-gradient(90deg, #2563eb, #60a5fa);
    --radius: 16px;
    --radius-sm: 10px;
    --shadow-md: none;
    --shadow-lg: 0 12px 28px #0005;
    /* Legacy Quiz tokens now use the dashboard palette. */
    --bg: var(--bg-page);
    --panel: var(--bg-card);
    --panel-2: var(--bg-card-strong);
    --text: var(--text-primary);
    --muted: var(--text-muted);
    --line: var(--border);
    --accent: #347e30;
    --accent-2: #568751;
    --chip: var(--bg-card-strong);
    --option: var(--bg-input);
    --option-hover: var(--bg-hover);
  }
  body.dashboard-themed {
    color-scheme:dark;
    padding: 20px var(--dashboard-gutter) 40px;
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 1.5;
  }
  html:has(> body.dashboard-themed) { color-scheme:dark; }
  html:has(> body.dashboard-themed), body.dashboard-themed * { scrollbar-color:#56636f #191f25; scrollbar-width:auto; }
  html:has(> body.dashboard-themed)::-webkit-scrollbar, body.dashboard-themed *::-webkit-scrollbar { width:12px; height:12px; }
  html:has(> body.dashboard-themed)::-webkit-scrollbar-track, body.dashboard-themed *::-webkit-scrollbar-track { background:#191f25; }
  html:has(> body.dashboard-themed)::-webkit-scrollbar-thumb, body.dashboard-themed *::-webkit-scrollbar-thumb { background:#56636f; border:3px solid #191f25; border-radius:8px; }
  html:has(> body.dashboard-themed)::-webkit-scrollbar-thumb:hover, body.dashboard-themed *::-webkit-scrollbar-thumb:hover { background:#7a8793; }
  body.dashboard-themed > :is(#dashboardNav, main, .app-shell) {
    width: 100%;
    max-width: var(--dashboard-max-width);
    margin-inline: auto;
  }
  body.dashboard-themed > #dashboardNav { margin-bottom: 26px; }
  body.dashboard-themed #dashboardNav .dashboard-nav { margin: 0; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; backdrop-filter: none; }
  body.dashboard-themed > :is(main, .app-shell) { margin-top: 0; padding: 0 0 40px; }
  body.dashboard-themed .dashboard-nav-group .dashboard-nav-menu { gap: 0; }
  body.dashboard-themed .dashboard-nav-group .dashboard-nav-menu a.btn { border: 0; border-radius: 0; background: transparent; padding: 11px 12px; }
  body.dashboard-themed .dashboard-nav-group .dashboard-nav-menu a.btn + a.btn { border-top: 1px solid var(--border); }
  body.dashboard-themed .dashboard-nav-group .dashboard-nav-menu a.btn:hover,
  body.dashboard-themed .dashboard-nav-group .dashboard-nav-menu a.btn:focus-visible,
  body.dashboard-themed .dashboard-nav-group .dashboard-nav-menu a.btn[aria-current="page"] { background: var(--bg-hover); }
  body.dashboard-themed .dashboard-page-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap; gap: 16px; width: 100%;
    margin: 0 0 22px; padding: 0;
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
  }
  body.dashboard-themed :is(.prime-page,.extension-usage-page) > .dashboard-page-header { margin-bottom: 4px; }
  body.dashboard-themed #viewLeaves > .dashboard-page-header { margin-bottom: 8px; }
  body.dashboard-themed .dashboard-page-header > div:first-child { min-width: 0; }
  body.dashboard-themed .dashboard-page-header h1 { font-size: clamp(25px, 2vw, 32px); line-height: 1.2; letter-spacing: -.025em; font-weight: 800; color: var(--text-primary); margin: 0 0 8px; }
  body.dashboard-themed .dashboard-page-header :is(.dashboard-eyebrow, .api-eyebrow, .prime-eyebrow, .extension-usage-eyebrow) { color: var(--blue-text); font-size: 11px; font-weight: 800; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 7px; }
  body.dashboard-themed .dashboard-page-header :is(p, .panel-subtitle, .faq-subtitle, .font-12) { font-size: 14px; line-height: 1.5; color: var(--text-muted); margin: 0; max-width: 90ch; }
  body.dashboard-themed :is(.card, .page-card, .ui-card, .panel, .prime-panel, .extension-panel, .api-panel, .api-stat-card, .api-model-usage-card, .quiz-sidebar) { color: var(--text-primary); background: var(--bg-card); border-color: var(--border); border-radius: var(--radius); box-shadow: none; backdrop-filter: none; }
  body.dashboard-themed :is(.card, .prime-panel, .extension-panel, .api-panel) { padding: 20px; }
  body.dashboard-themed .salary-selection-card { background: var(--bg-card-strong); border-color: var(--border); }
  body.dashboard-themed .salary-toolbar { border-top: 1px solid var(--border); }
  body.dashboard-themed :is(.people-modal-card, .dashboard-nav-menu, .cpx-block-dialog, dialog) { background: var(--bg-card-strong); color: var(--text-primary); border-color: var(--border); }
  body.dashboard-themed :is(.extension-feature-item, .extension-hidden-feature-bar, .oi-filter-card, .ids-apps-panel, .quiz-question-box, .quiz-question-list, .ai-message-assistant) { background: var(--bg-card-strong); border-color: var(--border); }
  body.dashboard-themed :is(h2,h3,h4,h5,.panel-title):not(.salary-slip *) { color: var(--text-primary); }
  body.dashboard-themed :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]),select,textarea) { background-color: var(--bg-input); color: var(--text-primary); border-color: var(--border); }
  body.dashboard-themed :is(input,textarea)::placeholder { color: var(--text-faint); opacity: 1; }
  body.dashboard-themed :is(input,select,textarea):focus-visible { border-color: var(--blue-text); outline: 2px solid var(--ring); outline-offset: 1px; }
  body.dashboard-themed .btn { border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 13px; font-size: 13px; line-height: 1.3; font-weight: 700; color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-card-strong); box-shadow: none; }
  body.dashboard-themed #dashboardNav .btn { padding: 8px 12px; font-size: 14px; }
  body.dashboard-themed .btn:hover { background: var(--bg-hover); border-color: var(--blue-text); }
  body.dashboard-themed :is(.btn-primary,.btn-continue,.btn.primary) { background: var(--bg-primary); border-color: var(--bg-primary); color: #fff; }
  body.dashboard-themed :is(.btn-primary,.btn-continue,.btn.primary):hover { background: var(--bg-primary-hover); }
  body.dashboard-themed .dashboard-nav a[aria-current="page"], body.dashboard-themed .btn.active { background: var(--blue-bg); border-color: var(--blue-text); }
  body.dashboard-themed :is(.ids-view-tabs .btn.active, #idsSubBatchTabs .ids-sub-tab.active) { background:var(--bg-primary); border-color:var(--bg-primary); color:#fff; }
  body.dashboard-themed :is(.ids-view-tabs .btn.active, #idsSubBatchTabs .ids-sub-tab.active):hover { background:var(--bg-primary-hover); border-color:var(--bg-primary-hover); }
  body.dashboard-themed .btn:is([data-link-service="cpx"],[href^="https://admin-cp.cpx-research.com/"]) { background:#00acc1; border-color:#00acc1; color:#082b32; }
  body.dashboard-themed .btn:is([data-link-service="cpx"],[href^="https://admin-cp.cpx-research.com/"]):hover { background:#15bacc; border-color:#15bacc; }
  body.dashboard-themed .btn:is([data-link-service="prime"],[href^="https://admin.primesurveys.com/"]) { background:#7367f0; border-color:#7367f0; color:#090528; }
  body.dashboard-themed .btn:is([data-link-service="prime"],[href^="https://admin.primesurveys.com/"]):hover { background:#8378f4; border-color:#8378f4; }
  body.dashboard-themed .btn:disabled { opacity: .5; }
  body.dashboard-themed .btn.success { background: var(--green-bg); color: var(--green-text); border-color: var(--green-text); }
  body.dashboard-themed :is(.btn-warning,.btn.warning) { background: var(--yellow-bg); color: var(--yellow-text); border-color: var(--yellow-text); }
  body.dashboard-themed :is(.btn-danger,.btn.danger) { background: var(--red-bg); color: var(--red-text); border-color: var(--red-text); }
  body.dashboard-themed .ui-table-wrap { background: var(--bg-card); border-color: var(--border); }
  body.dashboard-themed :is(.table, .ui-table, .extension-table, .api-table, .ids-table) { color: var(--text-primary); --bs-table-bg: transparent; --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border); }
  body.dashboard-themed :is(.table, .ui-table, .extension-table, .api-table, .ids-table) th { background: var(--bg-input); color: var(--text-secondary); border-color: var(--border); }
  body.dashboard-themed :is(.table, .ui-table, .extension-table, .api-table, .ids-table) td { border-color: var(--border); }
  body.dashboard-themed :is(.api-bar,.extension-progress,.ids-top-track,.ids-block-track) { background: var(--bg-hover); }
  /* Shared screen-only table chrome; salary documents retain their paper styling. */
  body.dashboard-themed table th:not(.salary-slip *) { background: var(--bg-input) !important; color: var(--text-secondary); border-color: var(--border); }
  body.dashboard-themed :is(.prime-modal-backdrop,.ids-app-modal-backdrop,.people-modal-backdrop,.oi-modal-backdrop,.ui-modal-backdrop,.modal-backdrop,.modal-overlay) { background: rgba(14, 17, 20, .76) !important; }
  body.dashboard-themed dialog::backdrop { background: rgba(14, 17, 20, .76) !important; }
  #primeExtractionLogDetails[hidden], #primeRefreshExtractionLogBtn[hidden] { display: none !important; }
  body.dashboard-themed .table-responsive { max-width: 100%; overflow-x: auto; }
  body.dashboard-themed :is(.extension-progress-fill,.api-bar-fill,.ids-top-fill,.prime-top-fill,.progress-fill) { background: var(--dashboard-bar-fill); }
  body.dashboard-themed progress { accent-color: #3b82f6; }
  body.dashboard-themed progress::-webkit-progress-value { background: var(--dashboard-bar-fill); }
  body.dashboard-themed progress::-moz-progress-bar { background: var(--dashboard-bar-fill); }
  body.dashboard-themed .people-switch input:checked + .people-slider,
  body.dashboard-themed .salary-filter-option input[role="switch"]:checked { background: var(--bg-primary); }
  body.dashboard-themed .faq-card { scroll-margin-top: 20px; }
  body.dashboard-themed .faq-hero { align-items: flex-start; }
  body.dashboard-themed :is(.quiz-card,.quiz-item,.circle-btn,.nav-btn,.progress-track) { background: var(--bg-input); border-color: var(--border); }
  body.dashboard-themed :is(.quiz-card.active,.quiz-item.active,.nav-btn.active) { background: var(--blue-bg); border-color: var(--blue-text); }
  body.dashboard-themed .quiz-sidebar { border-radius: var(--radius); }
  body.dashboard-themed :is(.quiz-list-item,.question-nav-btn,.answer-option,.option) { border-color: var(--border); }
  body.dashboard-themed .topbar.dashboard-page-header { border-bottom: 0; }
  @media(max-width:700px) {
    body.dashboard-themed { padding-top: 12px; }
    body.dashboard-themed > #dashboardNav { margin-bottom: 22px; }
    body.dashboard-themed :is(.card,.prime-panel,.extension-panel,.api-panel) { padding: 14px; }
    body.dashboard-themed .dashboard-page-header { gap: 12px; margin-bottom: 18px; }
    body.dashboard-themed .dashboard-page-header > div { max-width: 100%; }
  }
}
@media print {
  .dashboard-page-header { display: none !important; }
}

.dashboard-impersonation-banner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; flex:none; padding:12px 16px; margin:0 auto 16px; width:100%; max-width:1760px; box-sizing:border-box; color:#ffe0a3; background:#493a20; border:1px solid #826530; border-radius:10px; font:14px/1.5 system-ui; }
@media print { .dashboard-impersonation-banner { display:none !important; } }