/* ---------- HIPS client: tokens (light / dark) ---------- */
:root {
    color-scheme: light;
    --surface-0: #f4f4f2;
    --surface-1: #fcfcfb;
    --surface-2: #efeee9;
    --text-primary: #0b0b0b;
    --text-secondary: #52514e;
    --text-muted: #898781;
    --border: rgba(11, 11, 11, 0.12);
    --accent: #0F766E;      /* HIPS Teal */
    --accent-ink: #ffffff;
    --bubble-me: #E8F3F2;   /* teal-50 */
    --critical: #d03b3b;
    --good-ink: #006300;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --surface-0: #111110;
        --surface-1: #1a1a19;
        --surface-2: #242423;
        --text-primary: #ffffff;
        --text-secondary: #c3c2b7;
        --text-muted: #898781;
        --border: rgba(255, 255, 255, 0.12);
        --accent: #3FB8AE;      /* teal, lifted for the dark surface */
        --accent-ink: #0b0b0b;
        --bubble-me: #123b38;
        --critical: #e66767;
        --good-ink: #0ca30c;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --surface-0: #111110;
    --surface-1: #1a1a19;
    --surface-2: #242423;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --border: rgba(255, 255, 255, 0.12);
    --accent: #3FB8AE;
    --accent-ink: #0b0b0b;
    --bubble-me: #123b38;
    --critical: #e66767;
    --good-ink: #0ca30c;
}

body {
    margin: 0;
    background: var(--surface-0);
    color: var(--text-primary);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.45;
}
h1:focus { outline: none; }
a { color: var(--accent); }

.site-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
    padding: 10px 16px; background: var(--surface-1); border-bottom: 1px solid var(--border);
}
.site-header .brand { font-weight: 650; color: var(--text-primary); text-decoration: none; }
.site-header .site-name { color: var(--text-muted); font-size: .85rem; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 14px; }
.site-header nav a { color: var(--text-secondary); text-decoration: none; padding: 4px 0; }
.site-header nav a.active { color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--accent); }
.site-main { max-width: 860px; margin: 0 auto; padding: 20px 16px 48px; }
.lead { color: var(--text-secondary); margin-top: 0; }
.muted { color: var(--text-muted); }

.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 12px 0; }
.btn { font: inherit; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-1);
       color: var(--text-primary); cursor: pointer; }
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn-primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-link { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
input, textarea, select { font: inherit; color: var(--text-primary); background: var(--surface-1);
                          border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; }
textarea { width: 100%; box-sizing: border-box; min-height: 110px; resize: vertical; }
label.field { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--text-secondary); }

table.data { border-collapse: collapse; width: 100%; }
.table-wrap { overflow-x: auto; max-width: 100%; }
table.data .nw { white-space: nowrap; }
.table-wrap table.data { font-size: .85rem; }
.table-wrap table.data th, .table-wrap table.data td { padding: 6px 6px; }
table.data th, table.data td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data th { font-weight: 600; color: var(--text-secondary); font-size: .85rem; }

.badge { display: inline-block; font-size: .75rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border);
         color: var(--text-secondary); }
.badge-locked::before { content: "🔒 "; }
.badge-draft { border-style: dashed; }
.alert { border-left: 3px solid var(--critical); padding: 8px 12px; background: var(--surface-1); border-radius: 6px; }
.ok { border-left: 3px solid var(--good-ink); padding: 8px 12px; background: var(--surface-1); border-radius: 6px; }

/* ---------- report chat ---------- */
.chat { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.bubble { max-width: 85%; padding: 9px 12px; border-radius: 14px; white-space: pre-wrap; }
.bubble.assistant { align-self: flex-start; background: var(--surface-1); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.bubble.reporter { align-self: flex-end; background: var(--bubble-me); border-bottom-right-radius: 4px; }
.answer { padding: 10px 0 4px; border-top: 1px solid var(--border); scroll-margin-bottom: 24px; }
.answer:focus { outline: none; }
.picker { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; margin: 8px 0; }
.picker .option { text-align: left; }
.picker .option.suggested { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.suggestion-note { font-size: .8rem; color: var(--text-muted); }
.mic.listening { background: var(--critical); color: #fff; border-color: transparent; }

#blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0;
                   padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; color: #000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.site-header .user { margin-left: auto; font-size: .85rem; color: var(--text-secondary); display: inline-flex; gap: 8px; align-items: center; }

.site-header .brand { display: inline-flex; align-items: center; gap: 8px; }
.site-header .brand img { width: 22px; height: 22px; }
.back-home { display: inline-block; margin-top: 12px; }

/* New incident, form version */
.incident-form { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.incident-form select, .incident-form textarea { width: 100%; }
.incident-form textarea { min-height: 90px; }
label.check { display: flex; align-items: center; gap: 6px; font-size: .9rem; align-self: flex-end; padding-bottom: 6px; }

/* OSHA-equivalent forms (Pages/OshaPrint) */
.print-page { max-width: 1400px; margin: 0 auto; padding: 16px; background: #fff; color: #000; }
.osha-form { font-size: 11px; margin-bottom: 24px; }
.osha-head { display: flex; justify-content: space-between; gap: 24px; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 8px; }
.osha-title { font-size: 12px; font-weight: 700; }
.osha-name { font-size: 18px; font-weight: 700; }
.osha-meta { text-align: right; font-size: 11px; }
.osha-small { font-size: 10px; color: #222; }
.osha-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.osha-form h3 { font-size: 12px; margin: 10px 0 4px; }
table.osha-grid { border-collapse: collapse; width: 100%; }
table.osha-grid th, table.osha-grid td { border: 1px solid #000; padding: 3px 5px; vertical-align: top; }
table.osha-grid thead th { font-size: 9.5px; font-weight: 600; background: #f0f0f0; }
table.osha-grid.kv th { width: 45%; text-align: left; font-weight: 600; background: #f7f7f7; }
table.osha-grid .c { text-align: center; }
table.osha-grid .r { text-align: right; }
table.osha-grid .big { font-size: 16px; font-weight: 700; }
table.osha-grid td.sign { height: 28px; }
ul.problems li { color: var(--danger, #b42318); }
@media print {
  @page { size: landscape; margin: 10mm; }
  .no-print { display: none; }
  .print-page { padding: 0; max-width: none; }
  .page-break { page-break-after: always; }
}

/* OSHA year status */
.year-status { display: inline-block; font-weight: 600; font-size: .9rem; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); margin: 4px 0 8px; }
.year-status.status-YearToDate { background: #FEF3C7; color: #78350F; border-color: #FCD34D; }
.year-status.status-AwaitingCertification { background: #E0F2FE; color: #0C4A6E; border-color: #7DD3FC; }
.year-status.status-Final { background: #DCFCE7; color: #14532D; border-color: #86EFAC; }
.osha-stamp { border: 2px solid #B45309; color: #B45309; font-weight: 700; padding: 4px 10px; display: inline-block; margin: 0 0 8px; font-size: 12px; }

/* ---------- Reports ---------- */
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 14px; }
.report-grid label, .benchmark label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--text-secondary); }
.report-grid select, .report-grid input, .benchmark select { font: inherit; font-size: .9rem; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); }
.report-filters { margin-top: 10px; }
.report-filters summary { cursor: pointer; color: var(--text-secondary); font-size: .9rem; margin-bottom: 8px; }
.report-heading { font-size: 1.1rem; margin: 18px 0 2px; }
.report-sub { margin: 0 0 8px; font-size: .9rem; }
.report-table th[scope=row] { font-weight: 500; }
.report-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.benchmark h2 { font-size: 1.05rem; margin: 0 0 4px; }
.benchmark .row { align-items: end; margin: 8px 0; }
.is-updating { opacity: .55; transition: opacity .15s; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Dashboard: month status (same look as HIPS Central) ---------- */
:root { --ms-due: #9a6700; --ms-late: #b42318; --grid: #e1e0d9; --baseline: #c3c2b7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ms-due: #e3b341; --ms-late: #f97066; --grid: #2c2c2a; --baseline: #383835; } }
:root[data-theme="dark"] { --ms-due: #e3b341; --ms-late: #f97066; --grid: #2c2c2a; --baseline: #383835; }
.month-strip { display: flex; gap: 4px; list-style: none; margin: 8px 0; padding: 0; flex-wrap: wrap; }
.month-strip a { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; }
.month-strip .ms-label { font-size: .7rem; color: var(--text-muted); white-space: nowrap; }
.ms-cell { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 22px; border-radius: 4px;
           font-size: .72rem; font-weight: 700; border: 1.5px solid transparent; box-sizing: border-box; }
.ms-submitted .ms-cell { background: var(--accent); }
.ms-noevents .ms-cell { background: var(--surface-1); border-color: var(--accent); color: var(--accent); }
.ms-notpart .ms-cell { background: repeating-linear-gradient(135deg, var(--grid) 0 3px, var(--surface-1) 3px 6px); border-color: var(--baseline); }
.ms-due .ms-cell { background: var(--surface-1); border: 1.5px dashed var(--ms-due); }
.ms-pastdue .ms-cell { background: var(--ms-late); color: #fff; }
.ms-inprogress .ms-cell { background: var(--surface-1); border: 1px dashed var(--baseline); }
.month-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 4px 0 12px; padding: 0; font-size: .8rem; color: var(--text-secondary); }
.month-legend li { display: inline-flex; align-items: center; gap: 6px; }
.month-legend .ms-cell { width: 18px; height: 14px; font-size: .6rem; }
.alerts { list-style: none; padding: 0; margin: 12px 0; }
.alerts li { padding: 8px 12px; border-left: 3px solid var(--ms-due); background: var(--surface-1); border-radius: 0 6px 6px 0; margin-bottom: 6px; }
.alerts li.late { border-left-color: var(--ms-late); }
.alerts li.good { border-left-color: var(--good-ink); }
.standing.good { color: var(--good-ink); }
.standing.low { color: var(--ms-late); }
.ms-badge-pastdue { color: var(--ms-late); border-color: var(--ms-late); }
.ms-badge-due { color: var(--ms-due); border-color: var(--ms-due); }
.ms-badge-notpart { border-style: dashed; }
.ms-review .ms-cell { background: repeating-linear-gradient(90deg, var(--accent) 0 2px, var(--surface-1) 2px 5px); border: 1px solid var(--accent); }

/* ---------- Import from Excel ---------- */
.late-text { color: var(--ms-late); }
.badge-error { color: var(--ms-late); border-color: var(--ms-late); }

/* ---------- Month page: staffing ---------- */
details.occupations { margin: 10px 0; }
details.occupations summary { cursor: pointer; font-weight: 600; }
.occ-group { border: 1px solid var(--border); border-radius: 8px; margin: 8px 0; padding: 6px 12px 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.occ-group legend { font-weight: 600; font-size: .9rem; padding: 0 4px; }
.occ-group label.occ { font-size: .85rem; }
.occ-group label.occ input { width: 7em; }

/* ---------- Staffing profile ---------- */
table.data.staffing input { width: 8em; text-align: right; }
fieldset.contractors { border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; margin: 10px 0; }
fieldset.contractors legend { font-weight: 600; padding: 0 4px; }

/* ---------- Preventability ---------- */
.card.preventable { border-left: 4px solid var(--ms-late); }
.card.preventable p { margin: 6px 0 0; }

/* ---------- report bar chart (OHSN style; Components/BarChart) ---------- */
.viz-root { background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px 8px; margin: 10px 0; }
.viz-caption { margin: 0 0 8px; font-size: .85rem; color: var(--text-secondary); }
.viz-scroll { overflow-x: auto; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0 0 6px; padding: 0; font-size: .85rem; color: var(--text-secondary); }
.viz-legend li { display: inline-flex; align-items: center; gap: 6px; }
.viz-chart { width: 100%; height: auto; display: block; font-size: 12px; }
.viz-grid { stroke: var(--grid); stroke-width: 1; }
.viz-baseline { stroke: var(--baseline); stroke-width: 1; }
.viz-tick { fill: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-label { fill: var(--text-secondary); }
.viz-axis-title { fill: var(--text-secondary); font-size: 11px; }
.viz-value { fill: var(--text-primary); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-value-second { fill: var(--text-secondary); }
.mark-first { fill: var(--accent); }
.mark-second { fill: var(--text-muted); }
.mark-whisker { fill: none; stroke: var(--text-primary); stroke-width: 1.5; }
.viz-hit { fill: transparent; }
.viz-col:hover .viz-hit, .viz-col:focus .viz-hit { fill: var(--grid); fill-opacity: .45; }
.viz-col:focus { outline: none; }
.viz-col:focus-visible .viz-hit { stroke: var(--accent); stroke-width: 1.5; }

/* ---------- dictation hint on Report an incident: the device's own dictation (touch keyboard mic, or Windows+H / Mac Fn Fn) ---------- */
.dictate-hint { font-size: .85rem; margin: 6px 0 0; }
.dictate-hint kbd { font: inherit; font-size: .8rem; padding: 1px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-1); color: var(--text-primary); }
.dictate-desktop { display: none; }
@media (pointer: fine) { .dictate-touch { display: none; } .dictate-desktop { display: block; } }

/* ---------- grouped bar chart (national OSHA rates by year; Components/GroupedBarChart) ---------- */
:root { --series-s2: #e0703d; --series-s3: #6d4fd8; --series-s4: #a996ee; --series-s5: #6b6a66; --series-s6: #a9a8a2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --series-s3: #8f76ee; --series-s4: #5e4bb0; --series-s5: #a9a8a2; --series-s6: #6b6a66; } }
:root[data-theme="dark"] { --series-s3: #8f76ee; --series-s4: #5e4bb0; --series-s5: #a9a8a2; --series-s6: #6b6a66; }
.mark-s1 { fill: var(--accent); }
.mark-s2 { fill: var(--series-s2); }
.mark-s3 { fill: var(--series-s3); }
.mark-s4 { fill: var(--series-s4); }
.mark-s5 { fill: var(--series-s5); }
.mark-s6 { fill: var(--series-s6); }
.viz-title { text-align: center; line-height: 1.45; margin: 0 0 8px; font-size: .9rem; color: var(--text-secondary); }
.viz-title div:first-child { font-weight: 600; font-size: 1.02rem; color: var(--text-primary); }
.viz-row:hover .viz-hit, .viz-row:focus .viz-hit { fill: var(--grid); fill-opacity: .45; }
.viz-row:focus { outline: none; }
.rate-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rate-table tr.is-bls td, .rate-table tr.is-bls th { color: var(--text-secondary); }
.rate-notes { font-size: .85rem; color: var(--text-secondary); padding-left: 18px; }

/* ---------- Reports form in three groups: what, period and comparison period, other hospitals (Dr. Gomaa 2026-10-28) ---------- */
.report-group { border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px 10px; margin: 0 0 10px; }
.report-group legend { font-size: .85rem; font-weight: 600; color: var(--text-secondary); padding: 0 4px; }
.report-group .report-filters { margin-top: 6px; }
.note-latest { font-size: .9rem; margin: 4px 0 8px; }