/* ============================================================================
   FlashFix Reports (Components/Pages/Reports.razor)
   ----------------------------------------------------------------------------
   Everything is namespaced .rpt-* so it never collides with the app shell.
   Colours come only from the theme tokens (app.css :root/.light and the
   unified layer in flashfix-app.css), so every surface follows the dark/light
   toggle and the accent picker. Text sizes use the app's type scale times
   --text-scale, so the text-zoom preference reaches the reports too.
   KPI cards are the shared KpiCard. The graphs are the report's own Plotly charts
   (wwwroot/js/reports-charts.js), the HTML funnel bars below, and the shared DonutChart
   for frame colours and glass.
   ============================================================================ */

.rpt {
    --rpt-radius: 10px;
    --rpt-border: var(--border, var(--steel));
    --rpt-head-bg: color-mix(in srgb, var(--steel), transparent 55%);
    /* Accent-coloured text. Brass reads on the dark panels; on white it needs the darker ink. */
    --rpt-accent-ink: var(--brass);
    --rpt-good-ink: var(--green);
    --rpt-bad-ink: var(--red);
    --rpt-warn-ink: var(--orange);
    --rpt-xs: calc(var(--text-xs, 11px) * var(--text-scale, 1));
    --rpt-sm: calc(var(--text-sm, 12.5px) * var(--text-scale, 1));
    --rpt-md: calc(var(--text-md, 14px) * var(--text-scale, 1));
    --rpt-lg: calc(var(--text-lg, 16px) * var(--text-scale, 1));
    color: var(--text);
}

:root.light .rpt {
    --rpt-accent-ink: var(--accent-ink);
    --rpt-bad-ink: color-mix(in srgb, var(--red), #000 28%);
    --rpt-head-bg: #f4f7f9;
}

.rpt-stack { display: flex; flex-direction: column; gap: 16px; }
.rpt-stack > .grid4 { margin-bottom: 0; }

/* ---------- What the tab answers, and what its figures read against ---------- */
.rpt-tabhead { display: flex; flex-direction: column; gap: 8px; }
.rpt-intro { margin: 0; font-size: var(--rpt-md); line-height: 1.45; color: var(--text); max-width: 900px; }
.rpt-context {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
    font-size: var(--rpt-xs); color: var(--muted);
}
.rpt-context > span { display: inline-flex; align-items: center; gap: 6px; }
.rpt-context .ui-icon { width: 14px; height: 14px; color: var(--rpt-accent-ink); }
.rpt-context b { color: var(--text); font-weight: 600; }
.rpt-context em {
    font-style: normal; font-weight: 600; color: var(--rpt-accent-ink);
    background: color-mix(in srgb, var(--brass), transparent 86%);
    padding: 1px 8px; border-radius: 99px;
}

/* "Now": today's position, not something that happened inside the dates. */
.rpt-now {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 99px; vertical-align: middle;
    font-family: 'JetBrains Mono', monospace; font-size: calc(9.5px * var(--text-scale, 1)); font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; line-height: 1.4;
    color: color-mix(in srgb, var(--blue), var(--text) 40%);
    background: color-mix(in srgb, var(--blue), transparent 84%);
    border: 1px solid color-mix(in srgb, var(--blue), transparent 60%);
}
.rpt-context .rpt-now { margin-left: 0; }

/* ---------- KPI rows (shared KpiCard inside .grid4) ---------- */
/* A long value, such as the best-selling product's name, wraps rather than spilling out of its card. */
.rpt-kpis .kpi .kpi-value { overflow-wrap: anywhere; }
/* Six cards: three to a row, or all six on a wide screen, never five and one left over. */
.grid4.rpt-kpis.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1500px) { .grid4.rpt-kpis.six { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .grid4.rpt-kpis.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid4.rpt-kpis.six { grid-template-columns: 1fr; } }

/* ---------- The Sales tab's view switcher (the app's .segmented control) ---------- */
.rpt-viewbar { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.rpt-views { flex-wrap: wrap; }
.rpt-views button { font-size: var(--rpt-sm); font-weight: 500; }
.rpt-view-note { margin: 0; font-size: var(--rpt-xs); color: var(--muted); }
.rpt-gran { flex: none; }
@media (max-width: 720px) {
    .rpt-views { width: 100%; }
    .rpt-views button { flex: 1 1 45%; padding-inline: 8px; }
}

/* ---------- Cards ---------- */
.rpt-card {
    min-width: 0;
    background: var(--panel);
    border: 1px solid var(--rpt-border);
    border-radius: var(--rpt-radius);
    padding: 16px 18px;
}
:root.light .rpt-card { box-shadow: 0 1px 2px #1e2a3808; }
.rpt-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.rpt-card-head > div:first-child { flex: 1 1 320px; min-width: 0; }
/* Headings are real h3/h4 for screen readers; Bootstrap's reboot sizes are reset here. */
.rpt .rpt-card-title {
    margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
    font-family: inherit; font-size: var(--rpt-md); font-weight: 600; line-height: 1.35; color: var(--text);
}
.rpt-card-sub { margin: 4px 0 0; font-size: var(--rpt-xs); line-height: 1.5; color: var(--muted); max-width: 820px; }
.rpt-chip {
    flex: none; align-self: flex-start;
    font-family: 'JetBrains Mono', monospace; font-size: var(--rpt-xs); font-weight: 600; color: var(--muted);
    background: color-mix(in srgb, var(--steel), transparent 35%);
    padding: 2px 9px; border-radius: 99px; white-space: nowrap;
}
:root.light .rpt-chip { background: #edf2f6; }
.rpt .rpt-subhead {
    margin: 18px 0 8px; display: flex; align-items: baseline; gap: 8px;
    font-family: inherit; font-size: var(--rpt-sm); font-weight: 600; color: var(--text);
}
.rpt .rpt-subhead .rpt-num { color: var(--muted); font-size: var(--rpt-xs); }
.rpt-foot-note { margin: 12px 0 0; font-size: var(--rpt-xs); line-height: 1.5; color: var(--muted); }

/* ---------- Layouts ---------- */
.rpt-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.rpt-split.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rpt-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rpt-bento { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1100px) {
    .rpt-split, .rpt-split.even, .rpt-cols3, .rpt-bento { grid-template-columns: minmax(0, 1fr); }
}

/* Facts: a few labelled numbers under a report, each with a line saying what it means. */
.rpt-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px;
    margin-top: 14px;
}
.rpt-facts > div {
    display: flex; flex-direction: column; gap: 3px; min-width: 0;
    padding: 10px 12px; border: 1px solid var(--rpt-border); border-radius: 8px;
    background: color-mix(in srgb, var(--steel), transparent 70%);
}
:root.light .rpt-facts > div { background: #f6f8fa; }
.rpt-facts b { font-family: 'JetBrains Mono', monospace; font-size: var(--rpt-lg); font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.rpt-facts small { font-size: var(--rpt-xs); line-height: 1.45; color: var(--muted); }
.rpt-facts .rpt-track { margin-top: 4px; }

.rpt-label {
    display: block;
    font-family: 'JetBrains Mono', monospace; font-size: calc(10px * var(--text-scale, 1)); font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Tables ---------- */
.rpt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* No fixed minimum: numbers never wrap, so a table only scrolls sideways when its columns truly cannot fit. */
.rpt-table { width: 100%; border-collapse: collapse; text-align: left; }
.rpt-table th {
    padding: 8px 10px; white-space: nowrap; vertical-align: bottom;
    font-size: var(--rpt-xs); font-weight: 600; color: var(--muted); letter-spacing: .02em;
    background: var(--rpt-head-bg); border-bottom: 1px solid var(--rpt-border);
}
.rpt-table thead th:first-child { border-top-left-radius: 6px; }
.rpt-table thead th:last-child { border-top-right-radius: 6px; }
.rpt-table td {
    padding: 9px 10px; vertical-align: middle;
    font-size: var(--rpt-sm); color: var(--text);
    border-bottom: 1px solid color-mix(in srgb, var(--rpt-border), transparent 30%);
}
.rpt-table tbody tr:last-child td { border-bottom: 0; }
.rpt-table tbody tr:hover td { background: color-mix(in srgb, var(--steel), transparent 72%); }
:root.light .rpt-table tbody tr:hover td { background: #f4f7f9; }
.rpt-table tfoot td { font-weight: 600; border-top: 1px solid var(--rpt-border); border-bottom: 0; }
.rpt-table .r { text-align: right; }
.rpt-table .c { text-align: center; }
.rpt-table td .empty-state { padding: 22px 12px; }
.rpt-bar-col { width: 32%; min-width: 120px; }
.rpt-target-col { min-width: 150px; }
.rpt-actions { white-space: nowrap; }
.rpt-actions .btn + .btn { margin-left: 6px; }
.rpt-table .rpt-row-muted td, .rpt-table .rpt-row-muted .rpt-rep b { color: var(--muted); }
/* A phase heading inside the open-orders table: the rows under it are that phase's stages. */
.rpt-group-row th {
    padding: 10px 10px 4px; background: transparent; border-bottom: 0;
    font-size: var(--rpt-sm); font-weight: 600; color: var(--text); text-align: left;
}
.rpt-group-row th .rpt-muted { font-weight: 400; font-size: var(--rpt-xs); margin-left: 6px; }
.rpt-table tbody + tbody .rpt-group-row th { border-top: 1px solid var(--rpt-border); }
.rpt-cell-note { display: block; margin-top: 2px; font-size: var(--rpt-xs); color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.rpt-cell-wrap { min-width: 160px; white-space: normal; }

/* Text tones. Scoped under .rpt so they beat the table cell's own colour (.rpt-table td). */
.rpt-num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpt .rpt-strong { font-weight: 600; color: var(--text); }
.rpt .rpt-muted { color: var(--muted); }
.rpt .rpt-good { color: var(--rpt-good-ink); }
.rpt .rpt-bad { color: var(--rpt-bad-ink); }
.rpt .rpt-warn { color: var(--rpt-warn-ink); }
.rpt-nowrap { white-space: nowrap; }
.rpt-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.rpt-link:hover { color: var(--rpt-accent-ink); }

/* ---------- Bars ---------- */
.rpt-track { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--steel), transparent 15%); overflow: hidden; }
:root.light .rpt-track { background: #e6ecf1; }
.rpt-track.slim { height: 5px; }
.rpt-fill { height: 100%; min-width: 2px; border-radius: 99px; background: var(--blue); }
.rpt-fill.green { background: var(--green); }
.rpt-fill.amber { background: var(--brass); }
.rpt-fill.blue { background: var(--blue); }
.rpt-fill.red { background: var(--red); }
/* Share bar with its percentage beside it. */
.rpt-share, .rpt-attain { display: flex; align-items: center; gap: 8px; }
.rpt-share .rpt-track, .rpt-attain .rpt-track { flex: 1; min-width: 60px; }
.rpt-share .rpt-num, .rpt-attain .rpt-num { flex: none; min-width: 38px; text-align: right; font-size: var(--rpt-xs); color: var(--muted); }

/* ---------- Chart hosts and legends ---------- */
.rpt-chart { width: 100%; min-width: 0; }
.rpt-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 6px; font-size: var(--rpt-xs); color: var(--muted); }
.rpt-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.rpt-legend .dot { width: 14px; height: 4px; border-radius: 2px; display: inline-block; background: var(--blue); }
.rpt-legend .dot.brass { background: var(--brass); }
.rpt-legend .dot.blue { background: var(--blue); }
.rpt-legend .dot.green { background: var(--green); }
.rpt-legend .dot.orange { background: var(--orange); }
/* A dotted line in the chart is drawn as a dotted key. */
.rpt-legend .dot.dash { height: 0; background: none; border-top: 3px dotted var(--blue); border-radius: 0; }
.rpt-legend .dot.dash.orange { border-top-color: var(--orange); }
.rpt-legend .dot.dash.green { border-top-color: var(--green); }
.rpt-card .chart-donut { margin-top: 4px; }

/* ---------- Sales conversion funnel: one bar per stage, the drop between stages on the line between them ---------- */
.rpt-funnel { display: flex; flex-direction: column; gap: 8px; }
.rpt-stage, .rpt-dropoff { display: flex; align-items: center; gap: 12px; }
.rpt-stage .count, .rpt-dropoff .count { width: 96px; flex-shrink: 0; text-align: right; }
.rpt-stage .conv, .rpt-dropoff .conv { width: 78px; flex-shrink: 0; text-align: center; }
.rpt-stage .count b { display: block; font-family: 'JetBrains Mono', monospace; font-size: var(--rpt-lg); font-weight: 700; line-height: 1.1; color: var(--text); }
.rpt .rpt-stage .count.won b { color: var(--rpt-good-ink); }
.rpt-stage .count span { font-size: var(--rpt-xs); color: var(--muted); }
.rpt-stage .barwrap { flex: 1; min-width: 0; }
.rpt-bar {
    --rpt-bar-ink: #fff;
    height: 38px; max-width: 100%; min-width: 96px; padding: 0 14px; border-radius: 9px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.rpt-bar .name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--rpt-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rpt-bar-ink);
}
.rpt-bar .meta { flex: none; font-family: 'JetBrains Mono', monospace; font-size: var(--rpt-xs); font-weight: 700; color: var(--rpt-bar-ink); }
/* Each bar is its own size container: a short bar drops the conversion (it is in the column on the right too)
   and tightens the stage name, so the name is never cut to a couple of letters. */
.rpt-bar { container-type: inline-size; }
@container (max-width: 240px) { .rpt-bar .meta { display: none; } }
@container (max-width: 130px) { .rpt-bar .name { letter-spacing: 0; font-size: calc(10px * var(--text-scale, 1)); } }
/* Blues carry white text in both themes. */
.rpt-fb-1 { background: linear-gradient(90deg, #2a4058, #3f5f80); }
.rpt-fb-2 { background: linear-gradient(90deg, #3f5f80, #4a6f95); }
.rpt-fb-3 { background: linear-gradient(90deg, #496b8c, #4f79a1); }
/* Brass, and the dark theme's bright greens, carry dark ink: white on them is barely readable. */
.rpt-fb-4 { --rpt-bar-ink: var(--on-accent, #10151c); background: linear-gradient(90deg, var(--brass), color-mix(in srgb, var(--brass), #000 12%)); }
.rpt-fb-5 { --rpt-bar-ink: #0b1f13; background: linear-gradient(90deg, #2ea36a, #22c55e); }
.rpt-fb-6 { --rpt-bar-ink: #0b1f13; background: linear-gradient(90deg, #16a34a, #22c55e); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #22c55e, transparent 55%); }
/* The light theme's greens are deep, so they keep white text. */
:root.light .rpt-fb-5 { --rpt-bar-ink: #fff; background: linear-gradient(90deg, #15803d, #166534); }
:root.light .rpt-fb-6 { --rpt-bar-ink: #fff; background: linear-gradient(90deg, #166534, #14532d); box-shadow: none; }
.rpt-stage .conv { font-family: 'JetBrains Mono', monospace; font-size: var(--rpt-xs); font-weight: 700; color: var(--muted); }
.rpt .rpt-stage .conv.won { color: var(--rpt-good-ink); }
.rpt-dropoff .line { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.rpt-dropoff .rule { flex: 1; border-top: 1px dashed var(--rpt-border); }
.rpt-dropoff-badge {
    padding: 2px 8px; border-radius: 99px; white-space: nowrap;
    font-family: 'JetBrains Mono', monospace; font-size: calc(10.5px * var(--text-scale, 1)); font-weight: 700;
    color: var(--rpt-bad-ink); background: color-mix(in srgb, var(--red), transparent 88%);
    border: 1px solid color-mix(in srgb, var(--red), transparent 62%);
}
/* The biggest drop stands out from the others. */
.rpt-dropoff-badge.worst { background: color-mix(in srgb, var(--red), transparent 76%); border-color: var(--red); }
.rpt-dropoff-badge.flat { color: var(--muted); background: color-mix(in srgb, var(--steel), transparent 40%); border-color: var(--rpt-border); }
:root.light .rpt-dropoff-badge.flat { background: #edf2f6; }
.rpt-funnel-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rpt-border); }
.rpt-funnel-foot .c { min-width: 0; text-align: center; }
.rpt-funnel-foot .l { font-family: 'JetBrains Mono', monospace; font-size: calc(10px * var(--text-scale, 1)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* No colour of its own: the value inherits the text colour unless it is marked good or bad. */
.rpt-funnel-foot .v { margin-top: 4px; font-size: var(--rpt-sm); font-weight: 700; }
@media (max-width: 720px) {
    .rpt-stage .count, .rpt-dropoff .count { width: 62px; }
    .rpt-stage .conv, .rpt-dropoff .conv { width: 54px; }
    .rpt-bar { padding: 0 10px; }
    .rpt-dropoff .line { padding: 0 4px; }
    .rpt-funnel-foot { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Time per stage: one card per step above the stage duration chart ---------- */
.rpt-ttv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .rpt-ttv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rpt-ttv-grid { grid-template-columns: minmax(0, 1fr); } }
.rpt-ttv {
    min-width: 0; padding: 12px 14px; border: 1px solid var(--rpt-border); border-radius: var(--rpt-radius);
    background: color-mix(in srgb, var(--steel), transparent 55%);
}
:root.light .rpt-ttv { background: var(--panel); box-shadow: 0 1px 2px #1e2a3808; }
.rpt-ttv .rpt-label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.rpt-label .rpt-badge { text-transform: none; letter-spacing: 0; font-family: inherit; }
.rpt-ttv .val { margin-top: 6px; }
.rpt-ttv .val b { font-family: 'JetBrains Mono', monospace; font-size: calc(var(--text-xl, 20px) * var(--text-scale, 1)); font-weight: 700; color: var(--text); }
.rpt-ttv .val b small { font-size: var(--rpt-sm); font-weight: 600; color: var(--muted); }
.rpt-ttv .sub { margin: 4px 0 0; color: var(--muted); }

/* ---------- People ---------- */
.rpt-rep { display: flex; align-items: center; gap: 9px; }
.rpt-rep b { display: block; font-weight: 600; line-height: 1.2; color: var(--text); }
.rpt-rep span { font-size: var(--rpt-xs); color: var(--muted); }
.rpt-avatar {
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
    font-size: calc(10.5px * var(--text-scale, 1)); font-weight: 700; color: var(--on-accent, #10151c);
    background: var(--brass);
}
.rpt-row-muted .rpt-avatar { background: color-mix(in srgb, var(--steel), var(--muted) 30%); color: var(--text); }

/* ---------- Badges ---------- */
.rpt-badge {
    display: inline-block; padding: 2px 8px; border-radius: 99px; white-space: nowrap; vertical-align: middle;
    font-size: var(--rpt-xs); font-weight: 600; line-height: 1.4;
    color: var(--muted); background: color-mix(in srgb, var(--steel), transparent 30%);
}
:root.light .rpt-badge { background: #edf2f6; }
.rpt .rpt-badge.green { color: var(--rpt-good-ink); background: color-mix(in srgb, var(--green), transparent 86%); }
.rpt .rpt-badge.amber { color: var(--rpt-accent-ink); background: color-mix(in srgb, var(--brass), transparent 84%); }
.rpt .rpt-badge.red { color: var(--rpt-bad-ink); background: color-mix(in srgb, var(--red), transparent 87%); }
.rpt-strong .rpt-badge { margin-left: 6px; }

/* Target levels are listed, never added together. */
.rpt-level {
    display: inline-block; margin-right: 4px; padding: 1px 6px; border-radius: 5px; vertical-align: middle;
    font-size: calc(10px * var(--text-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.rpt-level.person { color: color-mix(in srgb, var(--purple), var(--text) 25%); background: color-mix(in srgb, var(--purple), transparent 85%); }
.rpt-level.branch { color: color-mix(in srgb, var(--blue), var(--text) 40%); background: color-mix(in srgb, var(--blue), transparent 82%); }
.rpt-level.organisation { color: var(--rpt-accent-ink); background: color-mix(in srgb, var(--brass), transparent 84%); }

/* Why we lose: the records behind each reason. */
.rpt-drill { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--rpt-xs); }
.rpt-drill a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; font-family: 'JetBrains Mono', monospace; }
.rpt-drill a:hover { color: var(--rpt-accent-ink); }

/* ---------- Payments for Xero ---------- */
.rpt-export-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rpt-export-actions .btn { flex: none; }
.rpt-notice {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 12px; border-radius: 8px;
    font-size: var(--rpt-sm);
    color: var(--rpt-good-ink); background: color-mix(in srgb, var(--green), transparent 90%);
    border: 1px solid color-mix(in srgb, var(--green), transparent 60%);
}
.rpt-notice svg { width: 16px; height: 16px; flex: none; }
.rpt-note { font-size: var(--rpt-xs); margin: 6px 0 0; }

/* ============================================================================
   Page bar: the date range, organisation and branch filters
   ============================================================================ */
.rpt-hdr-filters { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.rpt-ctrl,
.rpt-select select {
    height: 32px; border: 1px solid var(--rpt-border); border-radius: 8px;
    background: var(--surface-control, var(--steel)); color: var(--text);
    font-family: inherit; font-size: var(--rpt-sm); font-weight: 500;
    transition: border-color .15s ease, background-color .15s ease;
}
.rpt-ctrl { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; max-width: 100%; }
.rpt-ctrl > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-ctrl:hover:not(:disabled),
.rpt-select select:hover:not(:disabled) { border-color: color-mix(in srgb, var(--brass), transparent 45%); }
.rpt-ctrl:disabled, .rpt-select select:disabled { opacity: .6; cursor: default; }
.rpt-ctrl .ui-icon, .rpt-select .ui-icon { width: 14px; height: 14px; flex: none; }
.rpt-ctrl .lead, .rpt-select .lead { color: var(--rpt-accent-ink); }
.rpt-ctrl .caret, .rpt-select .caret { color: var(--muted); }

.rpt-select { position: relative; display: inline-flex; align-items: center; }
.rpt-select > .ui-icon { position: absolute; pointer-events: none; }
.rpt-select > .lead { left: 10px; }
.rpt-select > .caret { right: 9px; }
.rpt-select select { appearance: none; -webkit-appearance: none; min-width: 170px; max-width: 240px; padding: 0 30px 0 32px; cursor: pointer; }
.rpt-select select:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }

@media (max-width: 720px) {
    .rpt-hdr-filters { width: 100%; }
    .rpt-pop, .rpt-ctrl, .rpt-select, .rpt-select select { flex: 1 1 100%; width: 100%; max-width: none; }
}

/* ---------- Two-month date picker ---------- */
.rpt-pop { position: relative; display: inline-flex; min-width: 0; }
.rpt-pop-backdrop { position: fixed; inset: 0; z-index: 90; background: transparent; }
.rpt-cal-pop {
    /* Fixed to the viewport's right edge so the two-month panel never clips off-screen,
       wherever the trigger sits inside the right-aligned page bar. */
    position: fixed; top: 56px; right: 16px; z-index: 200;
    width: 700px; max-width: calc(100vw - 32px); max-height: calc(100vh - 72px); overflow: auto;
    display: flex; flex-direction: column; gap: 14px;
    padding: 18px 20px; border: 1px solid var(--rpt-border); border-radius: 14px;
    background: var(--panel); color: var(--text);
    box-shadow: 0 22px 54px rgba(0, 0, 0, .5);
}
:root.light .rpt-cal-pop { box-shadow: 0 18px 44px rgba(30, 42, 56, .18); }
.rpt-cal-pop:focus { outline: none; }
.rpt-cal-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.rpt-preset {
    border: 1px solid var(--rpt-border); background: var(--surface-control, var(--steel)); color: var(--text);
    border-radius: 99px; padding: 5px 12px;
    font-family: inherit; font-size: var(--rpt-xs); font-weight: 500;
    transition: border-color .15s ease, background-color .15s ease;
}
.rpt-preset:hover:not(:disabled) { border-color: var(--brass); }
.rpt-preset.active { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 82%); color: var(--text); font-weight: 600; }
.rpt-cal-grid { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 30px; gap: 16px; align-items: start; }
.rpt-cal-title { text-align: center; font-size: var(--rpt-md); font-weight: 600; margin-bottom: 10px; }
.rpt-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.rpt-cal-dow span { text-align: center; font-size: var(--rpt-xs); font-weight: 600; color: var(--muted); padding-bottom: 6px; }
.rpt-cal-day {
    height: 34px; display: grid; place-items: center; border: 0; background: transparent; padding: 0;
    color: var(--text); font-family: inherit; font-size: var(--rpt-sm);
    border-radius: 8px; cursor: pointer; transition: background-color .12s ease;
}
.rpt-cal-day:hover:not(.empty):not(.sel) { background: color-mix(in srgb, var(--steel), transparent 25%); }
:root.light .rpt-cal-day:hover:not(.empty):not(.sel) { background: #e9eff4; }
.rpt-cal-day.empty { visibility: hidden; cursor: default; }
.rpt-cal-day.inrange { background: color-mix(in srgb, var(--brass), transparent 82%); border-radius: 0; }
.rpt-cal-day.sel { background: var(--brass); color: var(--on-accent, #10151c); font-weight: 700; }
.rpt-cal-day.sel.start { border-radius: 8px 0 0 8px; }
.rpt-cal-day.sel.end { border-radius: 0 8px 8px 0; }
.rpt-cal-day.sel.single { border-radius: 8px; }
.rpt-cal-nav {
    margin-top: 2px; width: 30px; height: 30px; border-radius: 50%; padding: 0;
    border: 1px solid var(--rpt-border); background: var(--panel); color: var(--muted);
    display: grid; place-items: center; transition: border-color .15s ease, color .15s ease;
}
.rpt-cal-nav:hover { border-color: var(--brass); color: var(--text); }
.rpt-cal-nav .ui-icon { width: 14px; height: 14px; }
.rpt-cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--rpt-border); }
.rpt-cal-hint { font-size: var(--rpt-xs); color: var(--muted); }
.rpt-cal-actions { display: flex; align-items: center; gap: 8px; }
.rpt-cal-actions .btn { flex: none; }

@media (max-width: 720px) {
    .rpt-cal-pop { top: 12px; right: 12px; left: 12px; width: auto; max-width: none; padding: 14px; }
    /* One month on a phone: the second sits under the first. */
    .rpt-cal-grid { grid-template-columns: 30px minmax(0, 1fr) 30px; }
    .rpt-cal-grid .rpt-cal:nth-of-type(2) { grid-column: 2; grid-row: 2; }
}

/* Shown in a chart's place when the chart library cannot be fetched (offline, or the CDN blocked). */
.rpt-chart-fallback { margin: 0; padding: 48px 12px; text-align: center; font-size: var(--rpt-sm); color: var(--muted); }

/* ---------- Destructive buttons in the light theme ----------
   app.css's `.light .btn:not(.primary)` (0,3,0) outranks `.btn.danger` (0,2,0) and turns destructive buttons
   grey in the light theme. On this page (dialogs included, see .rpt-dialogs) they stay red: solid in a
   confirmation, an outline on a table row. */
:root.light .rpt .btn.danger:not(.ghost) { border-color: #dc2626; background: #dc2626; color: #fff; }
:root.light .rpt .btn.danger:not(.ghost):hover:not(:disabled) { border-color: #b91c1c; background: #b91c1c; }
:root.light .rpt .btn.danger.ghost { border-color: color-mix(in srgb, #dc2626, transparent 50%); background: transparent; color: #b91c1c; }
:root.light .rpt .btn.danger.ghost:hover:not(:disabled) { border-color: #dc2626; background: color-mix(in srgb, #dc2626, transparent 92%); }
.rpt .btn.danger.ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--red), transparent 88%); }

/* On a phone the bars give way to the numbers: a table keeps its figures (and any share %) on screen
   instead of scrolling sideways to reach them. */
@media (max-width: 560px) {
    .rpt-bar-col { width: auto; min-width: 0; }
    .rpt-bar-col .rpt-track { display: none; }
    .rpt-card { padding: 14px; }
}

/* ============================================================================
   Company hierarchy (Components/Shared/HierarchyChart.razor)
   An org chart drawn from nested lists. Every list item is a box; the lines from
   a box down to its children are the items' ::before/::after borders and the
   list's own ::before. On a narrow screen the same lists become an indented tree.
   ============================================================================ */
.rpt-org-scroll { overflow-x: auto; padding: 4px 2px 12px; -webkit-overflow-scrolling: touch; }
.rpt-org-scroll:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 8px; }
.rpt-org-tree, .rpt-org-tree ul { --org-line: color-mix(in srgb, var(--muted), transparent 40%); margin: 0; padding: 0; list-style: none; }
.rpt-org-tree { display: flex; justify-content: center; min-width: max-content; }
.rpt-org-tree ul { position: relative; display: flex; justify-content: center; padding-top: 22px; }
.rpt-org-tree li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px 7px 0; }
/* The line along the top of a row of siblings, and the drop into each one. */
.rpt-org-tree li::before, .rpt-org-tree li::after {
    content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 22px;
    border-top: 1.5px solid var(--org-line);
}
.rpt-org-tree li::after { right: auto; left: 50%; border-left: 1.5px solid var(--org-line); }
.rpt-org-tree li:only-child::before, .rpt-org-tree li:only-child::after { display: none; }
.rpt-org-tree li:only-child { padding-top: 0; }
.rpt-org-tree li:first-child::before, .rpt-org-tree li:last-child::after { border: 0; }
.rpt-org-tree li:last-child::before { border-right: 1.5px solid var(--org-line); border-top-right-radius: 10px; }
.rpt-org-tree li:first-child::after { border-top-left-radius: 10px; }
/* The drop from a box to the line above its children. */
.rpt-org-tree ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 22px; border-left: 1.5px solid var(--org-line); }

.rpt-org-node {
    position: relative; min-width: 0; padding: 12px 14px; text-align: left;
    background: var(--panel); border: 1px solid var(--rpt-border); border-radius: 12px;
}
:root.light .rpt-org-node { box-shadow: 0 1px 3px #1e2a3814; }
.rpt-org-root { width: 340px; border-top: 3px solid var(--brass); }
.rpt-org-region { width: 250px; border-top: 3px solid var(--blue); background: color-mix(in srgb, var(--panel), var(--blue) 7%); }
.rpt-org-branch { width: 264px; border-top: 3px solid color-mix(in srgb, var(--green), var(--panel) 25%); }
.rpt-org-unplaced { width: 250px; border-style: dashed; }
.rpt-org-head b { display: block; font-size: var(--rpt-md); font-weight: 700; line-height: 1.3; color: var(--text); }
.rpt-org-kind, .rpt-org-label {
    display: block; font-family: 'JetBrains Mono', monospace; font-size: calc(10px * var(--text-scale, 1)); font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.rpt-org-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.rpt-org-sub { display: block; margin-top: 2px; font-size: var(--rpt-xs); line-height: 1.45; color: var(--muted); }
.rpt-org-section { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--rpt-border); }
/* A shade darker than muted: it also sits on the region box's tint. */
.rpt-org-note { margin: 2px 0 0; font-size: var(--rpt-xs); line-height: 1.45; color: color-mix(in srgb, var(--muted), var(--text) 22%); }
.rpt-org-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rpt-org-actions .btn { flex: none; }

/* A person: avatar, name, role, whom they report to, their targets, and + to set one. */
.rpt-org-people { display: grid; gap: 2px; }
.rpt-org-person {
    display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: start;
    margin: 0 -6px; padding: 6px; border-radius: 8px; transition: background-color .14s ease;
}
.rpt-org-person:hover { background: color-mix(in srgb, var(--steel), transparent 65%); }
:root.light .rpt-org-person:hover { background: #f2f5f8; }
.rpt-org-person .who { min-width: 0; }
.rpt-org-person .who b { display: block; font-size: var(--rpt-sm); font-weight: 600; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.rpt-org-person .who b .rpt-badge { margin-left: 4px; }
.rpt-org-person .who > span { display: block; font-size: var(--rpt-xs); line-height: 1.4; color: var(--muted); }
.rpt-org-person .who > .line { color: color-mix(in srgb, var(--muted), var(--text) 30%); }
.rpt-org-person.suspended { opacity: .55; }
.rpt-org-add {
    width: 26px; height: 26px; padding: 0; display: grid; place-items: center; flex: none;
    border: 1px solid var(--rpt-border); border-radius: 7px; background: transparent; color: var(--muted);
    transition: color .14s ease, border-color .14s ease, background-color .14s ease;
}
.rpt-org-add:hover:not(:disabled), .rpt-org-add:focus-visible { color: var(--rpt-accent-ink); border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 88%); }
.rpt-org-add:disabled { opacity: .5; cursor: default; }
.rpt-org-add .ui-icon { width: 14px; height: 14px; }

/* A target: what it measures, a short bar and how far along it is. A button when it can be changed. */
.rpt-org-targets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.rpt-org-target {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 8px;
    border: 1px solid var(--rpt-border); border-radius: 99px;
    background: color-mix(in srgb, var(--steel), transparent 55%); color: var(--text);
    font-family: inherit; font-size: var(--rpt-xs); line-height: 1.5;
}
:root.light .rpt-org-target { background: #f2f5f8; }
.rpt-org-target > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-org-target .rpt-track { flex: none; width: 34px; height: 5px; }
.rpt-org-target b { flex: none; white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-weight: 700; }
button.rpt-org-target { cursor: pointer; }
button.rpt-org-target:hover:not(:disabled) { border-color: var(--brass); }

/* The list view: the same people as a table, grouped like the chart. */
.rpt-org-list .rpt-org-targets { margin-top: 0; }

/* A narrow screen: the same lists as an indented tree, a line down the left and a short arm to each box. */
@media (max-width: 900px) {
    .rpt-org-tree, .rpt-org-tree ul { display: block; min-width: 0; }
    /* The arm starts on the list's left line, so the list itself has no padding. */
    .rpt-org-tree ul { margin-left: 16px; padding: 0; border-left: 1.5px solid var(--org-line); }
    .rpt-org-tree li:nth-child(n) { display: block; padding: 12px 0 0 16px; }
    .rpt-org-tree > li:nth-child(n) { padding: 0; }
    .rpt-org-tree li:nth-child(n)::before {
        display: block; top: 32px; left: 0; right: auto; width: 14px; height: 0;
        border: 0; border-top: 1.5px solid var(--org-line); border-radius: 0;
    }
    .rpt-org-tree li:nth-child(n)::after, .rpt-org-tree ul::before, .rpt-org-tree > li:nth-child(n)::before { display: none; }
    .rpt-org-root, .rpt-org-region, .rpt-org-branch, .rpt-org-unplaced { width: auto; }
}