/* ── Incident report (Pages/IncidentReport.razor) ──────────────────────────
   A document, not an app screen: always light "paper" with its own fixed
   palette, so it looks the same in the dark theme, on screen and in print
   (Print / Save as PDF). Every incident report uses this one stylesheet. */

.ir-doc {
    --ir-ink:      #0f172a;
    --ir-ink-2:    #334155;
    --ir-ink-3:    #64748b;
    --ir-rule:     #e2e8f0;
    --ir-soft:     #f8fafc;
    --ir-navy:     #0b1530;
    --ir-navy-2:   #1e2a5a;
    --ir-accent:   #4f46e5;
    --ir-bad:      #c81e1e;
    --ir-bad-soft: #fdecec;
    --ir-warn:     #b45309;
    --ir-warn-soft:#fff4e0;
    --ir-good:     #047857;
    --ir-good-soft:#e7f7ef;
    --ir-line:     #2563eb;

    max-width: 980px;
    margin: 0 auto 3rem;
    background: #fff;
    color: var(--ir-ink);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(2, 6, 23, .55), 0 0 0 1px rgba(15, 23, 42, .06);
    font-family: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .875rem;
    line-height: 1.5;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.ir-toolbar {
    max-width: 980px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.ir-loading { max-width: 980px; margin: 3rem auto; color: var(--color-ink-3); }

.ir-doc h1, .ir-doc h2, .ir-doc h3 { font-family: inherit; }

/* Cover */
.ir-cover {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.25rem 2.5rem 2rem;
    color: #fff;
    background:
        radial-gradient(1200px 300px at 0% 0%, rgba(99, 102, 241, .45), transparent 60%),
        radial-gradient(800px 260px at 100% 100%, rgba(14, 165, 233, .25), transparent 60%),
        linear-gradient(135deg, var(--ir-navy), var(--ir-navy-2));
}
.ir-brand {
    display: inline-block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: .25rem .6rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
}
.ir-brand-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.ir-brand-mark { width: 30px; height: auto; }
.ir-title { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .35rem; color: #fff; }
.ir-subtitle { color: rgba(255, 255, 255, .78); font-size: .9375rem; }
.ir-cover-right { display: flex; flex-direction: column; gap: .55rem; min-width: 220px; }
.ir-meta { display: flex; flex-direction: column; text-align: right; }
.ir-meta span { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.ir-meta strong { font-family: var(--font-mono, ui-monospace, monospace); font-size: .8125rem; font-weight: 600; }

/* Verdict */
.ir-verdict {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.25rem;
    align-items: start;
    margin: 1.75rem 2.5rem 0;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    border: 1px solid;
}
.ir-sev-critical { background: var(--ir-bad-soft); border-color: #f5b5b5; }
.ir-sev-warning  { background: var(--ir-warn-soft); border-color: #f3d29a; }
.ir-sev-clear    { background: var(--ir-good-soft); border-color: #a7dfc3; }
.ir-verdict-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: grid; place-items: center;
    font-size: 1.5rem;
    color: #fff;
}
.ir-sev-critical .ir-verdict-icon { background: var(--ir-bad); }
.ir-sev-warning  .ir-verdict-icon { background: var(--ir-warn); }
.ir-sev-clear    .ir-verdict-icon { background: var(--ir-good); }
.ir-verdict-label { font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ir-sev-critical .ir-verdict-label { color: var(--ir-bad); }
.ir-sev-warning  .ir-verdict-label { color: var(--ir-warn); }
.ir-sev-clear    .ir-verdict-label { color: var(--ir-good); }
.ir-verdict-headline { font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; margin: .15rem 0 .5rem; color: var(--ir-ink); }
.ir-verdict-summary { margin: 0; color: var(--ir-ink-2); }
.ir-stamp {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    padding: .7rem .8rem;
    border: 2px solid var(--ir-good);
    border-radius: 10px;
    color: var(--ir-good);
    font-size: .625rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    text-align: center; max-width: 110px;
    transform: rotate(-4deg);
    background: #fff;
}
.ir-stamp i { font-size: 1.5rem; }

/* KPIs */
.ir-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .75rem;
    margin: 1.25rem 2.5rem 0;
}
.ir-kpi {
    border: 1px solid var(--ir-rule);
    border-radius: 12px;
    padding: .85rem .9rem;
    background: var(--ir-soft);
    position: relative;
    overflow: hidden;
}
.ir-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--ir-rule); }
.ir-kpi.is-bad::before  { background: var(--ir-bad); }
.ir-kpi.is-warn::before { background: var(--ir-warn); }
.ir-kpi.is-good::before { background: var(--ir-good); }
.ir-kpi > i { color: var(--ir-ink-3); font-size: .9rem; }
.ir-kpi.is-bad > i  { color: var(--ir-bad); }
.ir-kpi.is-warn > i { color: var(--ir-warn); }
.ir-kpi.is-good > i { color: var(--ir-good); }
.ir-kpi-val { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; margin-top: .35rem; white-space: nowrap; }
.ir-kpi.is-bad .ir-kpi-val { color: var(--ir-bad); }
.ir-kpi-lbl { font-size: .6875rem; color: var(--ir-ink-3); line-height: 1.3; }
.ir-kpi-lbl small { display: block; }

/* Sections */
.ir-section { padding: 1.75rem 2.5rem 0; }
.ir-h {
    display: flex; align-items: center; gap: .65rem;
    font-size: 1rem; font-weight: 800; letter-spacing: -.01em;
    margin: 0 0 1rem;
    padding-bottom: .55rem;
    border-bottom: 2px solid var(--ir-ink);
    color: var(--ir-ink);
}
.ir-h span {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .6875rem;
    color: #fff;
    background: var(--ir-ink);
    border-radius: 6px;
    padding: .1rem .4rem;
}
.ir-h-break { margin-top: 1.75rem; }
.ir-empty { color: var(--ir-ink-3); font-style: italic; }

/* Route */
.ir-route { display: grid; grid-template-columns: 180px 1fr 180px; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.ir-stop { position: relative; }
.ir-stop-end { text-align: right; }
.ir-stop-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ir-accent); box-shadow: 0 0 0 4px rgba(79, 70, 229, .18); margin-bottom: .4rem; }
.ir-stop-end .ir-stop-dot { margin-left: auto; background: var(--ir-good); box-shadow: 0 0 0 4px rgba(4, 120, 87, .18); }
.ir-stop-lbl { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ir-ink-3); font-weight: 700; }
.ir-stop-name { font-weight: 800; font-size: 1rem; }
.ir-stop-time { font-size: .75rem; color: var(--ir-ink-3); font-family: var(--font-mono, ui-monospace, monospace); }
.ir-route-line {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ir-accent), var(--ir-good));
    opacity: .9;
}
.ir-route-seg { position: absolute; top: -3px; height: 16px; border-radius: 4px; background: var(--ir-bad); box-shadow: 0 0 0 2px #fff; }
.ir-route-door {
    position: absolute; top: -13px; transform: translateX(-50%);
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: #fff; color: var(--ir-bad); border: 2px solid var(--ir-bad);
    font-size: .7rem;
}
.ir-route-truck {
    position: absolute; left: 50%; top: 18px; transform: translateX(-50%);
    font-size: .75rem; font-weight: 700; color: var(--ir-ink-2); white-space: nowrap;
}
.ir-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .1rem 1.25rem; margin: 2.2rem 0 0; }
.ir-facts > div { padding: .55rem 0; border-top: 1px solid var(--ir-rule); }
.ir-facts dt { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ir-ink-3); font-weight: 700; }
.ir-facts dd { margin: 0; font-weight: 600; }

/* Charts */
.ir-chart { width: 100%; height: auto; display: block; }
.ir-band { fill: rgba(4, 120, 87, .09); stroke: rgba(4, 120, 87, .35); stroke-dasharray: 4 4; }
.ir-exc { fill: rgba(200, 30, 30, .1); }
.ir-exc-warn { fill: rgba(180, 83, 9, .12); }
.ir-grid { stroke: #eef2f7; stroke-width: 1; }
.ir-grid-v { stroke: #f3f6fa; }
.ir-axis { font-size: 10.5px; fill: var(--ir-ink-3); font-family: var(--font-mono, ui-monospace, monospace); }
.ir-axis-day { font-weight: 700; fill: var(--ir-ink-2); }
.ir-th-lbl { font-size: 10px; font-weight: 700; fill: var(--ir-good); }
.ir-line { fill: none; stroke: var(--ir-line); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.ir-line-hum { stroke: #0891b2; }
.ir-area { fill: rgba(37, 99, 235, .07); }
.ir-pt-bad { fill: var(--ir-bad); stroke: #fff; stroke-width: 1.5; }
.ir-pt-warn { fill: var(--ir-warn); stroke: #fff; stroke-width: 1.5; }
.ir-door-line { stroke: var(--ir-bad); stroke-width: 1.5; stroke-dasharray: 5 4; }
.ir-door-tag { fill: var(--ir-bad); }
.ir-door-txt { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; fill: #fff; }
.ir-alert-dot { fill: var(--ir-warn); stroke: #fff; stroke-width: 2; }
.ir-alert-txt { font-size: 11px; font-weight: 900; fill: #fff; }
.ir-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .75rem; color: var(--ir-ink-2); margin-top: .35rem; }
.ir-legend-note { margin-left: auto; color: var(--ir-ink-3); }
.ir-lg { display: inline-block; width: 18px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.ir-lg-line  { height: 3px; background: var(--ir-line); vertical-align: 2px; }
.ir-lg-band  { background: rgba(4, 120, 87, .15); border: 1px dashed rgba(4, 120, 87, .5); }
.ir-lg-exc   { background: rgba(200, 30, 30, .18); }
.ir-lg-door  { width: 3px; background: var(--ir-bad); }
.ir-lg-alert { width: 10px; border-radius: 50%; background: var(--ir-warn); }
.ir-subchart-title { margin: 1.1rem 0 .25rem; font-weight: 700; color: var(--ir-ink-2); font-size: .8125rem; }

/* Timeline */
.ir-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.ir-timeline::before { content: ""; position: absolute; left: 104px; top: 6px; bottom: 6px; width: 2px; background: var(--ir-rule); }
.ir-ti { display: grid; grid-template-columns: 86px 38px 1fr; gap: 0 .75rem; padding: .5rem 0; break-inside: avoid; }
.ir-ti-time { text-align: right; font-size: .6875rem; color: var(--ir-ink-3); font-family: var(--font-mono, ui-monospace, monospace); line-height: 1.25; padding-top: .2rem; }
.ir-ti-time strong { display: block; font-size: .9375rem; color: var(--ir-ink); }
.ir-ti-dot {
    position: relative; z-index: 1;
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    background: #fff; border: 2px solid var(--ir-rule); color: var(--ir-ink-3);
    font-size: .8rem;
}
.ir-ti-sev-critical .ir-ti-dot { background: var(--ir-bad); border-color: var(--ir-bad); color: #fff; box-shadow: 0 0 0 4px var(--ir-bad-soft); }
.ir-ti-sev-warning  .ir-ti-dot { background: var(--ir-warn); border-color: var(--ir-warn); color: #fff; box-shadow: 0 0 0 4px var(--ir-warn-soft); }
.ir-ti-tempback .ir-ti-dot, .ir-ti-humidityback .ir-ti-dot, .ir-ti-arrival .ir-ti-dot { border-color: var(--ir-good); color: var(--ir-good); }
.ir-ti-departure .ir-ti-dot { border-color: var(--ir-accent); color: var(--ir-accent); }
.ir-ti-note .ir-ti-dot, .ir-ti-action .ir-ti-dot, .ir-ti-photo .ir-ti-dot { border-color: var(--ir-ink-2); color: var(--ir-ink-2); }
.ir-ti-body { padding: .25rem 0 .35rem; }
.ir-ti-title { font-weight: 700; }
.ir-ti-sev-critical .ir-ti-title { color: var(--ir-bad); }
.ir-ti-detail { color: var(--ir-ink-2); font-size: .8125rem; }
.ir-ti-note .ir-ti-detail { background: var(--ir-soft); border-left: 3px solid var(--ir-ink-2); padding: .4rem .65rem; border-radius: 0 8px 8px 0; margin-top: .2rem; font-style: italic; }
.ir-ti-actor { font-size: .6875rem; color: var(--ir-ink-3); margin-top: .15rem; display: flex; align-items: center; gap: .3rem; }

/* Tables */
.ir-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.ir-table th {
    text-align: left; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ir-ink-3); font-weight: 700; padding: .45rem .5rem; border-bottom: 1px solid var(--ir-ink);
}
.ir-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--ir-rule); vertical-align: top; }
.ir-table tr.is-bad td  { background: var(--ir-bad-soft); }
.ir-table tr.is-warn td { background: var(--ir-warn-soft); }
.ir-table tr.is-bad td:first-child { box-shadow: inset 3px 0 0 var(--ir-bad); }
.ir-table tr.is-warn td:first-child { box-shadow: inset 3px 0 0 var(--ir-warn); }
.ir-table code { font-size: .6875rem; color: var(--ir-ink-3); }
.ir-table-compact { font-size: .75rem; }
.ir-table-compact td { padding: .28rem .5rem; }

/* Notes, photos */
.ir-note { margin: 0 0 .75rem; padding: .75rem 1rem; background: var(--ir-soft); border-left: 4px solid var(--ir-accent); border-radius: 0 10px 10px 0; break-inside: avoid; }
.ir-note p { margin: .25rem 0 0; color: var(--ir-ink); }
.ir-note-time { font-size: .6875rem; color: var(--ir-ink-3); font-family: var(--font-mono, ui-monospace, monospace); }
.ir-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.ir-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--ir-rule); }

/* Integrity */
.ir-integrity { display: flex; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 12px; border: 1px solid; }
.ir-integrity.is-ok { background: var(--ir-good-soft); border-color: #a7dfc3; }
.ir-integrity.is-broken { background: var(--ir-bad-soft); border-color: #f5b5b5; }
.ir-integrity > i { font-size: 2rem; }
.ir-integrity.is-ok > i { color: var(--ir-good); }
.ir-integrity.is-broken > i { color: var(--ir-bad); }
.ir-integrity p { margin: .35rem 0 .6rem; color: var(--ir-ink-2); font-size: .8125rem; }
.ir-hashes { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; font-size: .75rem; color: var(--ir-ink-3); }
.ir-hashes code { color: var(--ir-ink); }

/* Sign-off & footer */
.ir-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; font-size: .75rem; color: var(--ir-ink-3); padding-top: 1rem; }
.ir-sign-line { border-bottom: 1px solid var(--ir-ink-2); height: 2.5rem; margin-bottom: .35rem; }
.ir-appendix { padding-top: 2.25rem; }
.ir-footer {
    display: flex; justify-content: space-between; gap: 1rem;
    margin-top: 2rem; padding: .9rem 2.5rem;
    background: var(--ir-soft); border-top: 1px solid var(--ir-rule);
    font-size: .6875rem; color: var(--ir-ink-3);
}

@media (max-width: 900px) {
    .ir-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ir-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ir-cover { flex-direction: column; }
    .ir-meta { text-align: left; }
}

/* Print: the document only, edge to edge, A4. */
@media print {
    @page { size: A4; margin: 12mm; }
    body, .page-body, main { background: #fff !important; }
    .ir-doc { box-shadow: none; border-radius: 0; max-width: none; margin: 0; font-size: 8.6pt; overflow: visible; }
    .ir-cover, .ir-footer { border-radius: 0; }
    .ir-cover { padding: 1.4rem 1.6rem; }
    .ir-verdict, .ir-kpis { margin-left: 0; margin-right: 0; }
    .ir-section { padding-left: 0; padding-right: 0; }
    .ir-footer { padding-left: 0; padding-right: 0; }
    .ir-keep, .ir-verdict, .ir-kpis, .ir-route, tr { break-inside: avoid; }
    .ir-appendix { break-before: page; }
    .ir-h { break-after: avoid; }
}