/* ==========================================================================
   Reports & KPIs — page styles
   Mirrors the prototype screenshot exactly
   ========================================================================== */

/* 1. Page shell */
.set-breadcrumb {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 14px 44px 6px;
}

.set-hero {
    padding: 30px 44px 0;
}

.set-title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 48px;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: var(--brand-ink);
    margin: 0 0 4px;
}

.set-subtitle {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-3);
    margin: 0;
}

/* 2. KPI cards */
.set-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.set-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-2xl);
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 118px;
}

.set-card--wide {
    grid-column: 1 / -1;
}

.set-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.set-card-title {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}

.set-card-sub {
    display: block;
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-3);
    margin-top: 4px;
}

.set-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 16px;
    border: 0;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background var(--tr-fast) ease, transform var(--tr-fast) ease;
}

.set-btn--ghost {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line);
}

.set-btn--ghost:hover {
    background: var(--paper-2);
}

.set-kpi {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: auto;
}

.set-kpi__value {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--brand-ink);
}

.set-kpi__unit {
    font-family: var(--f-mono);
    font-size: 13px;
    color: var(--ink-4);
}

/* 2.5 Answer band — up to three figures that answer the report's question,
   rendered by the shared ReportAnswerBand.razor component. */
.answer-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.answer-figure {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-2xl);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.answer-figure__label {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.answer-figure__value {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--brand-ink);
}

.answer-figure__value--good { color: var(--success); }
.answer-figure__value--warn { color: var(--warning); }
.answer-figure__value--bad { color: var(--danger); }
.answer-figure__value--neutral { color: var(--brand-ink); }

.answer-figure__sub {
    font-size: 12.5px;
    color: var(--ink-4);
}

/* 2.6 Report chart — Chart.js canvas rendered by ReportChart.razor. maintainAspectRatio is
   false on the JS side, so the canvas needs an explicit height here or Chart.js collapses it
   to zero and the wrapping div renders as dead whitespace. */
.report-chart {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-2xl);
    padding: 20px 22px;
    margin-bottom: 20px;
}

.report-chart__canvas-wrap {
    position: relative;
    height: 280px;
}

.report-chart__caption {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--ink-4);
    text-align: center;
}

/* 3. Bar charts */
.set-barlist {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.set-barlist__empty {
    font-size: 13px;
    color: var(--ink-3);
    padding: 10px 0;
    text-align: center;
}

.set-barrow {
    display: grid;
    grid-template-columns: 1fr auto 80px;
    gap: 14px;
    align-items: center;
    min-height: 28px;
}

.set-barrow--priority {
    grid-template-columns: 110px 1fr auto;
}

.set-barrow--type {
    grid-template-columns: 70px 1fr auto;
}

.set-barrow__left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.set-barrow__id {
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-tile);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.set-barrow__name {
    font-size: 13px;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.set-barrow__bar {
    height: 18px;
    background: var(--paper-3);
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
}

.set-barrow__bar--pri {
    background: var(--paper-2);
}

.set-barrow__bar--type {
    background: var(--paper-2);
}

.set-barrow__fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.8s var(--ease-house);
}

/* Priority bar colors (left-aligned, red to gray) */
.set-barrow--priority .set-barrow__fill {
    background: linear-gradient(90deg, var(--pri-critical) 0%, var(--pri-high) 33%, var(--pri-medium) 66%, var(--pri-low) 100%);
}

/* Type bar colors (left-aligned, all blue) */
.set-barrow--type .set-barrow__fill {
    background: var(--brand);
}

.set-barrow__right {
    font-family: var(--f-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-tile);
    text-align: right;
}

.set-barrow__unit {
    font-size: 12px;
    color: var(--ink-4);
}

/* 4. Toasts */
.set-toast {
    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--ink);
    color: #fff;
    padding: 13px 20px;
    border-radius: var(--r-lg);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--shadow-toast);
    animation: r360fade 0.25s ease;
}

.set-toast__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--toast-dot);
    flex-shrink: 0;
}

/* 5. Focus treatment — 1.5px brand border + 4px halo */
.set-btn:focus,
.set-btn:active {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(5, 153, 225, 0.15);
}

/* 6. Export bar — right-aligns the Export Excel button above a report body */
.rep-export-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

/* 7. Hover states */
.set-card:hover {
    border-color: var(--brand);
}

.set-card:hover .set-btn {
    transform: translateY(-1px);
}

/* ==========================================================================
   8. Report body chrome (.rep-*)
   Global (not scoped) on purpose, same reason as the .elf-* block below:
   every report body (bars, card sub-labels, empty states, low-stock rows) is
   rendered by a child ReportParts component (CriticalFailureReport.razor,
   PmComplianceReport.razor, etc.), not by Reports.razor's own markup, so
   Reports.razor.css's scoped rules never reach that markup.
   ========================================================================== */

.rep-card-sub {
    font-size: 12.5px;
    color: var(--ink-4);
    margin-top: 2px;
}

.rep-bar-block {
    margin-bottom: 14px;
}

.rep-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 5px;
}

.rep-bar-name {
    color: var(--ink-2);
    font-weight: 500;
}

.rep-bar-meta {
    font-family: var(--f-mono);
    color: var(--ink-4);
}

.rep-bar-count {
    font-family: var(--f-mono);
    color: var(--ink);
    font-weight: 600;
}

.rep-bar-track {
    height: 10px;
    background: var(--paper-3);
    border-radius: var(--r-pill);
    overflow: hidden;
}

.rep-bar-fill {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
}

.rep-bar-fill--dark {
    background: var(--brand-ink);
}

.rep-bar-fill--success {
    background: var(--success);
}

.rep-bar-fill--warning {
    background: var(--warning);
}

.rep-bar-fill--danger {
    background: var(--danger);
}

.rep-bar-fill--info {
    background: var(--brand);
}

.rep-empty {
    font-size: 13px;
    color: var(--ink-4);
    padding: 24px 0;
    text-align: center;
}

/* Highlight row for inventory items below minimum stock level */
.inv-row--low td {
    background: var(--warning-bg);
}

/* Passed to MudTabs as PanelClass; MudTabs renders the panel div itself. */
.rep-tab-panel {
    padding-top: 12px;
}

/* ==========================================================================
   9. Email-log filter bar (.elf-*)
   Global (not scoped) on purpose: EmailLogTab.razor is a separate component,
   so Reports.razor.css scoped styles never reach its markup. These class
   names live here so the filter controls pick up real styling.
   ========================================================================== */

/* Card that wraps all filter fields. Fields wrap onto a second row on narrow
   viewports; align-items:end keeps labels stacked above controls neatly. */
.elf-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.04);
}

/* One labelled field = micro-label stacked above its control. */
.elf-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

/* The free-text search field expands to absorb leftover width. */
.elf-field--grow {
    flex: 1 1 220px;
}

/* Pushes the trailing action(s) (e.g. Clear) to the right edge of the bar. */
.elf-actions {
    margin-left: auto;
    display: flex;
    align-items: flex-end;
}

/* Uppercase mono micro-label, matching the report eyebrow treatment. */
.elf-label {
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* Shared control skin for every input/select in the bar — uniform height,
   border, radius and typography so dates, selects and search line up. */
.elf-control {
    height: 38px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 0 12px;
    font-size: 13px;
    color: var(--ink);
    background: var(--paper);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.elf-control:hover {
    border-color: var(--line-strong);
}

/* Brand focus ring matching .set-btn (1.5px border + 4px halo). */
.elf-control:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(5, 153, 225, 0.15);
}

/* Native <select>: strip the OS chrome and draw a custom chevron so it
   matches the inputs. extra right padding leaves room for the arrow. */
.elf-control--select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6878' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* Date inputs render their own picker icon; nudge it to brand on hover. */
.elf-control[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
}

.elf-control[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 0.9;
}

/* Ghost Clear button — quiet until hovered, then brand-tinted. */
.elf-clear {
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--paper);
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.elf-clear:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--paper-2);
}

/* Stack fields full-width on small screens so controls stay tappable. */
@media (max-width: 720px) {
    .elf-field,
    .elf-field--grow { flex: 1 1 100%; }
    .elf-actions { margin-left: 0; }
}

/* ── Report page print rules ──
   A printed report is the header, the answer band, the chart and the table. Everything the reader
   cannot click on paper is dropped. Global (not scoped) because these elements are rendered by
   several different components and Blazor CSS isolation would not reach all of them. */
@media print {
    /* App chrome: nothing on paper. */
    .sidenav, .mobile-tabbar, .page-header, .r360-toast-host,
    .report-head__actions, .report-filters, .report-crumb {
        display: none !important;
    }

    /* Full width once the nav is gone. */
    main, .page-content { margin: 0 !important; padding: 0 !important; width: 100% !important; }

    /* Keep the answer band on the same page as the title it explains. */
    .report-head, .answer-band { break-inside: avoid; }

    /* Chart canvases print as bitmaps; give them a fixed height so they do not collapse. */
    .report-chart__canvas-wrap { height: 260px !important; break-inside: avoid; }

    /* Table headers repeat on every printed page. */
    .r360-table thead { display: table-header-group; }
    .r360-table tr { break-inside: avoid; }

    /* Colour must survive the print pipeline: status pills are meaningless in greyscale. */
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}