/* librevolve.powerbi.css — self-contained Power BI / Microsoft Fluent report skin.
 *
 * This stylesheet is INDEPENDENT of class.ui.css. It is the whole look for the
 * clean-separation Power BI build (powerbi.html → librevolve.powerbi.js): report
 * shell, slicer pane, page navigator, visual tiles, KPI cards, matrix, data bars.
 *
 * Variable-driven (no hardcoded hex inside rules where a token exists). The chart
 * palette token --lv-chart-palette is read by PbiChart so the Plotly visuals pick
 * up the Power BI colourway without naming a theme in JS (theme-blind, like the
 * existing Service.Sector.views helper).
 */
:root {
    /* Fluent typography */
    --pbi-font:        "Segoe UI", "Segoe", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --pbi-font-semi:   "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;

    /* Power BI blue + Fluent neutrals */
    --pbi-accent:      #118DFF;
    --pbi-accent-700:  #0078D4;
    --pbi-ink:         #201f1e;   /* neutralPrimary  */
    --pbi-ink-2:       #605e5c;   /* neutralSecondary */
    --pbi-ink-3:       #a19f9d;   /* neutralTertiary  */
    --pbi-canvas:      #f3f2f1;   /* neutralLighter — the report canvas */
    --pbi-surface:     #ffffff;
    --pbi-surface-2:   #faf9f8;   /* neutralLighterAlt — zebra / header */
    --pbi-border:      #edebe9;   /* neutralLight */
    --pbi-border-2:    #e1dfdd;

    /* Status (Power BI) */
    --pbi-success:     #107C10;
    --pbi-warn:        #F2C811;
    --pbi-danger:      #D13438;
    --pbi-neutral:     #c8c6c4;

    /* Geometry */
    --pbi-radius:      3px;
    --pbi-gap:         12px;
    --pbi-shadow:      0 1.6px 3.6px rgba(0,0,0,.10), 0 .3px .9px rgba(0,0,0,.07);

    /* Chart palette — read by PbiChart (presence opts charts into theming) */
    --lv-chart-palette: #118DFF,#12239E,#E66C37,#6B007B,#E044A7,#744EC2,#D9B300,#D64550;
}

/* ── Shell ──────────────────────────────────────────────────────────────── */
/* this build does not load class.ui.css, so set the box model ourselves —
   without it width:100% inputs/buttons grow by their own padding and misalign */
.pbi-app, .pbi-app *, .pbi-login-wrap, .pbi-login-wrap * { box-sizing:border-box; }
.pbi-app { display:flex; flex-direction:column; height:100dvh; min-height:0;
    font-family:var(--pbi-font); color:var(--pbi-ink); background:var(--pbi-canvas); }
.pbi-titlebar { flex:0 0 auto; display:flex; align-items:stretch; gap:0;
    padding:0 16px; min-height:54px; background:var(--pbi-surface); border-bottom:1px solid var(--pbi-border-2); }
.pbi-brand { align-self:center; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
    background:var(--pbi-accent); color:#fff; border-radius:var(--pbi-radius); font-size:16px; margin-right:10px; }
.pbi-titleblock { align-self:center; display:flex; flex-direction:column; justify-content:center; margin-right:24px; }
.pbi-title { font-family:var(--pbi-font-semi); font-weight:600; font-size:1.02rem; line-height:1.15; }
.pbi-subtitle { color:var(--pbi-ink-2); font-size:.72rem; line-height:1.1; }
.pbi-titlebar-spacer { flex:1 1 auto; }

/* top-right icons: settings + account, each with a dropdown */
.pbi-topactions { align-self:center; display:flex; align-items:center; gap:2px; margin-left:8px; }
.pbi-iconmenu { position:relative; }
.pbi-iconbtn { width:32px; height:32px; border-radius:50%; border:none; background:transparent;
    color:var(--pbi-ink-2); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; }
.pbi-iconbtn:hover { background:var(--pbi-surface-2); color:var(--pbi-ink); }
.pbi-menu { position:absolute; right:0; top:40px; min-width:172px; background:var(--pbi-surface);
    border:1px solid var(--pbi-border-2); border-radius:var(--pbi-radius); box-shadow:var(--pbi-shadow);
    padding:4px; display:none; z-index:50; }
.pbi-iconmenu.open .pbi-menu { display:block; }
.pbi-menu-head { padding:7px 10px; font-size:.78rem; color:var(--pbi-ink-2);
    font-family:var(--pbi-font-semi); }
.pbi-menu-sub { padding:0 10px 6px; font-size:.74rem; color:var(--pbi-ink-3); }
.pbi-menu-sep { height:1px; background:var(--pbi-border); margin:3px 0; }
.pbi-menu-item { padding:7px 10px; font-size:.82rem; color:var(--pbi-ink); border-radius:2px; cursor:pointer; }
.pbi-menu-item:hover { background:var(--pbi-surface-2); }

/* login card (sign-in gate) */
.pbi-login-wrap { position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    background:var(--pbi-canvas); font-family:var(--pbi-font); }
.pbi-login-card { background:var(--pbi-surface); border:1px solid var(--pbi-border); border-radius:var(--pbi-radius);
    box-shadow:var(--pbi-shadow); padding:28px 26px; width:300px; display:flex; flex-direction:column; gap:11px; }
.pbi-login-brand { width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    background:var(--pbi-accent); color:#fff; border-radius:var(--pbi-radius); font-size:20px; }
.pbi-login-title { font-family:var(--pbi-font-semi); font-weight:600; font-size:1.18rem; color:var(--pbi-ink); }
.pbi-login-sub { color:var(--pbi-ink-2); font-size:.8rem; margin-top:-6px; }
.pbi-login-actions { margin-top:2px; }
.pbi-login-actions .pbi-btn { width:100%; justify-content:center; }
.pbi-login-err { color:var(--pbi-danger); font-size:.8rem; min-height:1em; }

.pbi-main { flex:1 1 auto; display:flex; min-height:0; }

/* ── Slicer pane ────────────────────────────────────────────────────────── */
.pbi-slicers { flex:0 0 228px; display:flex; flex-direction:column; gap:var(--pbi-gap);
    padding:var(--pbi-gap); overflow:auto; background:var(--pbi-canvas);
    border-right:1px solid var(--pbi-border-2); }
.pbi-slicers:empty { display:none; }   /* pages with no slicer (About) → full-width canvas */

/* ── Narrative prose + documentation (About) ────────────────────────────── */
.pbi-prose { color:var(--pbi-ink); font-size:.88rem; line-height:1.5; max-width:64rem; }
.pbi-prose p { margin:0 0 10px; }
.pbi-prose p:last-child { margin-bottom:0; }
.pbi-prose strong { font-family:var(--pbi-font-semi); }
.pbi-prose a, .pbi-mail { color:var(--pbi-accent-700); text-decoration:none; }
.pbi-prose a:hover { text-decoration:underline; }
.pbi-feature-loop { display:inline-block; min-width:96px; font-family:var(--pbi-font-semi);
    color:var(--pbi-accent-700); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }

/* live metric chips */
.pbi-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.pbi-chip { display:inline-flex; align-items:baseline; gap:5px; padding:4px 11px; background:var(--pbi-surface-2);
    border:1px solid var(--pbi-border); border-radius:12px; font-size:.78rem; color:var(--pbi-ink-2); }
.pbi-chip strong { font-family:var(--pbi-font-semi); color:var(--pbi-ink); font-size:.86rem; }
.pbi-about-foot { font-size:.74rem; color:var(--pbi-ink-3); margin-top:12px; }

/* embedded screenshots */
.pbi-shot { display:block; width:100%; max-width:780px; border:1px solid var(--pbi-border);
    border-radius:var(--pbi-radius); box-shadow:var(--pbi-shadow); margin-top:4px; }

/* how-to blocks (Training) */
.pbi-howto ol { margin:2px 0 8px 1.15rem; padding:0; font-size:.85rem; line-height:1.55; color:var(--pbi-ink); }
.pbi-howto ol li { margin-bottom:3px; }
.pbi-howto-result { font-size:.82rem; color:var(--pbi-ink-2); margin-bottom:4px; }

/* research lists */
.pbi-nextdev { margin:0 0 0 1.15rem; padding:0; font-size:.86rem; line-height:1.6; }
.pbi-nextdev li { margin-bottom:7px; }
.pbi-refs { margin:0; padding-left:1.3rem; font-size:.82rem; line-height:1.6; }
.pbi-refs li { margin-bottom:4px; }
.pbi-refs a { color:var(--pbi-accent-700); text-decoration:none; }
.pbi-refs a:hover { text-decoration:underline; }
.pbi-slicer { background:var(--pbi-surface); border:1px solid var(--pbi-border);
    border-radius:var(--pbi-radius); box-shadow:var(--pbi-shadow); display:flex; flex-direction:column; min-height:0; }
.pbi-slicer-head { padding:7px 10px; font-family:var(--pbi-font-semi); font-size:.74rem;
    text-transform:uppercase; letter-spacing:.04em; color:var(--pbi-ink-2);
    border-bottom:1px solid var(--pbi-border); display:flex; align-items:center; gap:6px; }
.pbi-slicer-search { margin:6px 8px 0; padding:5px 8px; font:inherit; font-size:.8rem;
    border:1px solid var(--pbi-border-2); border-radius:var(--pbi-radius); color:var(--pbi-ink); }
.pbi-slicer-list { overflow:auto; max-height:240px; padding:4px; }
.pbi-slicer-item { padding:5px 8px; font-size:.82rem; border-radius:2px; cursor:pointer;
    color:var(--pbi-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pbi-slicer-item:hover { background:var(--pbi-surface-2); }
.pbi-slicer-item.pbi-on { background:#e5f1fb; color:var(--pbi-accent-700); font-family:var(--pbi-font-semi); }

/* ── Canvas + visual grid ───────────────────────────────────────────────── */
.pbi-canvas { flex:1 1 auto; overflow:auto; padding:var(--pbi-gap); min-width:0; }
.pbi-grid { display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--pbi-gap); align-content:start; }
.pbi-span-1  { grid-column:span 1;  } .pbi-span-2  { grid-column:span 2;  }
.pbi-span-3  { grid-column:span 3;  } .pbi-span-4  { grid-column:span 4;  }
.pbi-span-5  { grid-column:span 5;  } .pbi-span-6  { grid-column:span 6;  }
.pbi-span-7  { grid-column:span 7;  } .pbi-span-8  { grid-column:span 8;  }
.pbi-span-9  { grid-column:span 9;  } .pbi-span-10 { grid-column:span 10; }
.pbi-span-11 { grid-column:span 11; } .pbi-span-12 { grid-column:span 12; }
@media (max-width:900px){ .pbi-grid > * { grid-column:span 12 !important; } }
/* a grid item that stacks its own children vertically (League: bar above detail) */
.pbi-stack { display:flex; flex-direction:column; gap:var(--pbi-gap); min-width:0; }
.pbi-stack > .pbi-grid { margin:0; }

/* ── Phone (≤640px): stack the shell, wrap the title bar, scroll the tab set ── */
@media (max-width:640px) {
    /* the whole report scrolls as one page rather than fixed full-height panes */
    .pbi-app { height:auto; min-height:100dvh; }
    .pbi-titlebar { flex-wrap:wrap; align-items:center; padding:8px 12px; min-height:0; row-gap:6px; }
    .pbi-titleblock { margin-right:0; }
    .pbi-topactions { margin-left:auto; }            /* icons pin to the right of row 1 */
    .pbi-titlebar-spacer { display:none; }
    .pbi-nav { order:3; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .pbi-nav-item { padding:7px 12px; white-space:nowrap; }
    /* slicer pane drops above the canvas instead of beside it */
    .pbi-main { flex-direction:column; min-height:0; }
    .pbi-slicers { flex:0 0 auto; width:auto; border-right:none; border-bottom:1px solid var(--pbi-border-2); }
    .pbi-canvas { overflow:visible; }
}

/* ── Visual tile ────────────────────────────────────────────────────────── */
.pbi-visual { background:var(--pbi-surface); border:1px solid var(--pbi-border);
    border-radius:var(--pbi-radius); box-shadow:var(--pbi-shadow);
    display:flex; flex-direction:column; min-height:0; min-width:0; }
.pbi-visual-head { padding:8px 12px 4px; }
.pbi-visual-title { font-family:var(--pbi-font-semi); font-weight:600; font-size:.92rem; }
.pbi-visual-sub { color:var(--pbi-ink-2); font-size:.74rem; margin-top:1px; }
.pbi-visual-body { padding:6px 12px 12px; flex:1 1 auto; min-height:0; min-width:0; overflow:auto; }
.pbi-empty { color:var(--pbi-ink-3); font-size:.82rem; padding:16px 4px; }

/* ── KPI card ───────────────────────────────────────────────────────────── */
.pbi-kpi { display:flex; flex-direction:column; gap:2px; padding:12px 14px;
    border-left:3px solid var(--pbi-accent); }
.pbi-kpi-value { font-family:var(--pbi-font-semi); font-weight:600; font-size:1.7rem; line-height:1.05; }
.pbi-kpi-label { color:var(--pbi-ink-2); font-size:.76rem; }
.pbi-kpi-sub { color:var(--pbi-ink-3); font-size:.72rem; }
.pbi-kpi.s-priority  { border-left-color:var(--pbi-danger);  }
.pbi-kpi.s-attention { border-left-color:var(--pbi-warn);    }
.pbi-kpi.s-on_track  { border-left-color:var(--pbi-neutral); }
.pbi-kpi.s-leading   { border-left-color:var(--pbi-success); }

/* ── Matrix / table visual ──────────────────────────────────────────────── */
.pbi-matrix { width:100%; border-collapse:collapse; font-size:.82rem; }
.pbi-matrix thead th { position:sticky; top:0; background:var(--pbi-surface-2);
    text-align:left; font-family:var(--pbi-font-semi); font-weight:600; color:var(--pbi-ink-2);
    padding:6px 10px; border-bottom:1px solid var(--pbi-border-2); white-space:nowrap; }
.pbi-matrix tbody td { padding:5px 10px; border-bottom:1px solid var(--pbi-border); vertical-align:middle; }
.pbi-matrix tbody tr:nth-child(even) { background:var(--pbi-surface-2); }
.pbi-matrix tbody tr:hover { background:#f0f6fc; }
.pbi-num { text-align:right; font-variant-numeric:tabular-nums; }
.pbi-center { text-align:center; }

/* data-bar cell: a filled bar behind a right-aligned number (width is data-driven) */
.pbi-databar { position:relative; min-width:90px; }
.pbi-databar-fill { position:absolute; top:3px; bottom:3px; left:0; background:#cfe4fb; border-radius:2px; }
.pbi-databar-val { position:relative; z-index:1; display:block; text-align:right; font-variant-numeric:tabular-nums; }

/* status pill (conditional formatting) */
.pbi-pill { display:inline-block; padding:1px 8px; border-radius:10px; font-size:.72rem;
    font-family:var(--pbi-font-semi); color:#fff; }
.pbi-pill.s-priority  { background:var(--pbi-danger);  }
.pbi-pill.s-attention { background:var(--pbi-warn); color:#5a4a00; }
.pbi-pill.s-on_track  { background:var(--pbi-neutral); color:var(--pbi-ink); }
.pbi-pill.s-leading   { background:var(--pbi-success); }
.pbi-pill.s-neutral   { background:#e1dfdd; color:var(--pbi-ink-2); }
.pbi-star { color:var(--pbi-warn); }

/* box-and-whisker sparkline cell (Standing distribution): cohort min—[p25·med·p75]—max
   with the selected library marked. positions are data-driven (the only inline styles) */
.pbi-bw { position:relative; height:18px; min-width:130px; }
.pbi-bw-line { position:absolute; top:50%; left:0; right:0; height:2px; background:var(--pbi-border-2); transform:translateY(-50%); }
.pbi-bw-box { position:absolute; top:3px; bottom:3px; background:var(--pbi-surface-2); border:1px solid var(--pbi-ink-3); border-radius:2px; }
.pbi-bw-med { position:absolute; top:1px; bottom:1px; width:2px; background:var(--pbi-ink-2); }
.pbi-bw-mark { position:absolute; top:50%; width:11px; height:11px; border-radius:50%; border:2px solid #fff; box-shadow:var(--pbi-shadow); transform:translate(-50%,-50%); }

/* progress (Improve data bars) */
.pbi-prog { height:8px; background:var(--pbi-border); border-radius:4px; overflow:hidden; margin-top:3px; }
.pbi-prog-fill { height:100%; background:var(--pbi-accent); }
.pbi-prog-fill.good { background:var(--pbi-success); }
.pbi-prog-fill.warn { background:var(--pbi-warn); }
.pbi-prog-fill.bad  { background:var(--pbi-danger); }

/* ── Action buttons (Actions start-cycle · Improve advance/re-measure) ────── */
.pbi-btnbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:2px 0 4px; }
.pbi-btn { font:inherit; font-size:.82rem; font-family:var(--pbi-font-semi); cursor:pointer;
    padding:6px 14px; border-radius:var(--pbi-radius); border:1px solid var(--pbi-border-2);
    background:var(--pbi-surface); color:var(--pbi-ink); display:inline-flex; align-items:center; gap:6px; }
.pbi-btn:hover { background:var(--pbi-surface-2); }
.pbi-btn-primary { background:var(--pbi-accent); border-color:var(--pbi-accent); color:#fff; }
.pbi-btn-primary:hover { background:var(--pbi-accent-700); border-color:var(--pbi-accent-700); }
.pbi-btn:disabled { opacity:.55; cursor:default; }

/* clickable matrix rows (drill-through) */
.pbi-matrix tbody tr.pbi-click { cursor:pointer; }
.pbi-matrix tbody tr.pbi-sel, .pbi-matrix tbody tr.pbi-sel:nth-child(even) {
    background:#e5f1fb; box-shadow:inset 3px 0 0 var(--pbi-accent); }

/* PDSA phase stepper (Improve) */
.pbi-stepper { display:flex; align-items:center; flex-wrap:wrap; margin:4px 0 12px; }
.pbi-step { display:flex; align-items:center; gap:7px; }
.pbi-step-dot { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:.7rem; font-family:var(--pbi-font-semi); background:var(--pbi-surface-2);
    border:2px solid var(--pbi-border-2); color:var(--pbi-ink-3); }
.pbi-step.done .pbi-step-dot { background:var(--pbi-success); border-color:var(--pbi-success); color:#fff; }
.pbi-step.active .pbi-step-dot { background:var(--pbi-accent); border-color:var(--pbi-accent); color:#fff; }
.pbi-step-label { font-size:.8rem; color:var(--pbi-ink-2); text-transform:capitalize; }
.pbi-step.active .pbi-step-label { color:var(--pbi-accent-700); font-family:var(--pbi-font-semi); }
.pbi-step-line { width:30px; height:2px; background:var(--pbi-border-2); margin:0 8px; }
.pbi-step-line.done { background:var(--pbi-success); }

/* sparkline (Standing 3-year trend) */
.pbi-trend { display:inline-flex; align-items:center; gap:7px; }
.pbi-spark { vertical-align:middle; display:block; }
.pbi-trend-arrow { font-size:.82rem; font-family:var(--pbi-font-semi); }

/* edit form (Metrics page) */
.pbi-form { display:flex; flex-direction:column; gap:10px; }
.pbi-field { display:flex; flex-direction:column; gap:3px; }
.pbi-field-check { flex-direction:row; align-items:center; gap:8px; }
.pbi-field-label { font-size:.72rem; font-family:var(--pbi-font-semi); color:var(--pbi-ink-2);
    text-transform:uppercase; letter-spacing:.03em; }
.pbi-input { font:inherit; font-size:.84rem; padding:6px 9px; border:1px solid var(--pbi-border-2);
    border-radius:var(--pbi-radius); color:var(--pbi-ink); background:var(--pbi-surface); width:100%; }
.pbi-input:focus { outline:none; border-color:var(--pbi-accent); }
textarea.pbi-input { resize:vertical; }
.pbi-check { width:16px; height:16px; flex:0 0 auto; }
.pbi-saved { color:var(--pbi-success); font-size:.78rem; font-family:var(--pbi-font-semi); }

/* drill detail list (Actions intervention detail) */
.pbi-detail-item { padding:9px 2px; border-bottom:1px solid var(--pbi-border); }
.pbi-detail-item:last-child { border-bottom:none; }
.pbi-detail-title { font-family:var(--pbi-font-semi); font-size:.86rem; color:var(--pbi-ink); }
.pbi-detail-meta { color:var(--pbi-ink-2); font-size:.76rem; margin-top:2px; }
.pbi-detail-desc { color:var(--pbi-ink-2); font-size:.78rem; margin-top:4px; line-height:1.35; }

/* ── Tab set — the page navigator, inline in the top bar ─────────────────── */
.pbi-nav { display:flex; align-items:stretch; gap:2px; }
.pbi-nav-item { padding:0 15px; font-size:.82rem; color:var(--pbi-ink-2); cursor:pointer;
    border-bottom:3px solid transparent; display:flex; align-items:center; gap:6px; }
.pbi-nav-item:hover { background:var(--pbi-surface-2); color:var(--pbi-ink); }
.pbi-nav-item.pbi-on { color:var(--pbi-accent-700); border-bottom-color:var(--pbi-accent);
    font-family:var(--pbi-font-semi); }

/* ── Error banner (fail-loud) ───────────────────────────────────────────── */
.pbi-error { margin:var(--pbi-gap); padding:14px 16px; background:#fde7e9;
    border:1px solid var(--pbi-danger); border-radius:var(--pbi-radius);
    color:#8a0b10; font-size:.85rem; font-family:var(--pbi-font); }

/* ── Head actions (P5) — right-floated buttons in a visual's head; the
      title/subtitle stack is untouched. ─────────────────────────────────── */
.pbi-head-action { float:right; margin-left:8px; margin-top:-2px; }

/* ── Print / PDF (P5) — the browser is the PDF engine. Chrome collapses;
      the canvas becomes the page; tiles avoid page breaks. ────────────────── */
@media print {
    .pbi-titlebar, .pbi-slicers, .pbi-login-wrap { display:none !important; }
    .pbi-app, .pbi-main, .pbi-canvas { display:block !important; overflow:visible !important;
        height:auto !important; padding:0 !important; background:#fff !important; }
    .pbi-grid { display:block !important; }
    .pbi-visual { box-shadow:none !important; border:1px solid #d5d3d1;
        break-inside:avoid; page-break-inside:avoid; margin:0 0 10px; width:100% !important; }
    .pbi-head-action { display:none !important; }
}