/* ============================================================================
   Dashboard widget canvas (widget platform Commit D1)
   Grid + cell chrome for the widget-rendered Admin (D1) / Company (D2)
   dashboards. Card look/typography deliberately comes from the EXISTING
   kpi.css classes (.dashboard-stat-card, .chart-card, .dashboard-pipeline-*,
   .dashboard-top-clients, .section-card, .dashboard-info-card) so the default
   layout stays visually identical to the pre-widget pages — this file only
   adds the 12-column canvas, skeletons, and the quiet unavailable/error card.
   Adapted from mockups/dashboard-widgets-review-2026-06-29/dashboard-widgets.css
   but on the app's real tokens (--primary --border --text-secondary --bg
   --surface). Linked with asp-append-version (NOT @import — dashboard sub-CSS
   @import is not cache-busted).
   ========================================================================== */

.dashboard-widget-grid {
    --dash-row-unit: 30px;
    --dash-grid-gap: 16px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: var(--dash-row-unit);
    grid-auto-flow: row;
    align-items: start;
    gap: var(--dash-grid-gap);
    position: relative;
}

.dashboard-widget-cell {
    grid-column: span var(--widget-span, 12);
    grid-row: span var(--widget-rows, 6);
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}
.dashboard-widget-cell[hidden] { display: none !important; }
.dashboard-widget-grid.is-pipeline-composed .dashboard-widget-cell[data-general-information="true"]::before {
    content: attr(data-general-information-label);
    position: absolute;
    z-index: 3;
    top: 8px;
    right: 8px;
    padding: 2px 7px;
    border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 88%, var(--primary) 12%);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
}
.dashboard-widget-grid.is-editing .dashboard-widget-cell[data-general-information="true"]::before {
    display: none;
}

.dashboard-widget-spacer-row {
    grid-column: 1 / -1 !important;
    grid-row: span 2;
    min-height: calc(var(--dash-row-unit) * 2 + var(--dash-grid-gap));
}
.dashboard-widget-grid.is-editing .dashboard-widget-spacer-row {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 55%, transparent);
}

/* V4 (2026-08-18): row gutter chrome — a dashed rule ABOVE every visual row with the row label at
   the left and a centred outlined ⊕ (adds a widget in a NEW row exactly there). The first row's
   line sits in the grid's edit-mode padding-top. Absolutely positioned inside the grid (root). */
.dashboard-widget-grid.is-editing { padding-top: 26px; }
.widget-row-line {
    position: absolute; left: 0; right: 0; z-index: 7;
    border-top: 1px dashed #C9C2AE;
    pointer-events: none;
}
.widget-row-label {
    position: absolute; left: 0; z-index: 8;
    transform: translateY(-50%);
    padding: 0 8px 0 0;
    background: var(--bg);
    font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: var(--text-secondary);
    pointer-events: none;
}

/* Owner 2026-08-03: per-widget "start on a new line" — an explicit column-1
   start makes the grid open a new row for this cell, decoupling it from the
   previous row's track height. Persisted via config.breakBefore. */
.dashboard-widget-cell.widget-break-before {
    grid-column: 1 / span var(--widget-span, 12);
}

/* Fixed-unit tile contract: the grid owns height and every rendered state
   fills exactly the same cell. Content adapts inside the card. */
.dashboard-widget-cell > article,
.dashboard-widget-cell > a.dashboard-stat-card,
.dashboard-widget-cell > .widget-skeleton {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* (V4: the left-gutter break arrow was replaced by the per-widget ↵ in the edit bar.) */

.dashboard-widget-cell > .dashboard-stat-card {
    --dashboard-card-header-margin: 4px;
    display: flex;
    flex-direction: column;
    align-content: initial;
    padding-block: 10px;
}

.dashboard-widget-cell > article {
    display: flex;
    flex-direction: column;
}

.dashboard-widget-cell .dashboard-chart,
.dashboard-widget-cell .dashboard-table-scroll,
.dashboard-widget-cell .dashboard-queue-list,
.dashboard-widget-cell .dashboard-contact-list,
.dashboard-widget-cell .dashboard-info-items,
.dashboard-widget-cell .dashboard-company-members,
.dashboard-widget-cell .activity-list,
.dashboard-widget-cell .dashboard-top-clients > ol,
.dashboard-widget-cell .dashboard-pipeline-grid {
    min-height: 0;
}

.dashboard-widget-cell .dashboard-table-scroll,
.dashboard-widget-cell .dashboard-queue-list,
.dashboard-widget-cell .dashboard-contact-list,
.dashboard-widget-cell .dashboard-info-items,
.dashboard-widget-cell .dashboard-company-members,
.dashboard-widget-cell .activity-list,
.dashboard-widget-cell .dashboard-top-clients > ol {
    flex: 1 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
}

.dashboard-widget-cell .dashboard-chart,
.dashboard-widget-cell .dashboard-pipeline-grid {
    flex: 1 1 auto;
}

/* 1A (polish plan 2026-08-25): the gauges card owns the SAME canonical widget
   surface as its neighbours (kpi.css .dashboard-pipeline-card family) — a real
   background in both themes, not the page bg showing through. Radius/shadow
   come from the shared `.dashboard-widget-cell > .card` override. */
.dashboard-frequency-gauges-card {
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
}
.dashboard-frequency-gauges {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 18px;
    flex: 1 1 auto;
}
.dashboard-frequency-gauge {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
}
.dashboard-frequency-gauge-label {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.dashboard-frequency-gauge-visual {
    position: relative;
    width: min(100%, 190px);
    aspect-ratio: 1.8 / 1;
}
.dashboard-frequency-gauge-visual svg {
    display: block;
    width: 100%;
    height: 100%;
}
.dashboard-frequency-gauge-track,
.dashboard-frequency-gauge-fill {
    fill: none;
    stroke-width: 20;
    stroke-linecap: butt;
}
.dashboard-frequency-gauge-track { stroke: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.dashboard-frequency-gauge-fill { stroke: var(--primary); }
.dashboard-frequency-gauge-visual strong {
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    color: var(--text-primary);
    font-family: var(--font-display, inherit);
    font-size: clamp(24px, 2.6vw, 42px);
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .dashboard-frequency-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Two gauge rows need more vertical tracks than the four-across desktop
       composition. The mobile canvas is single-column, so this deterministic
       minimum cannot disturb a neighbouring card. */
    .dashboard-widget-cell[data-widget-key="client.daznis.frequencies"] {
        --widget-rows: 11 !important;
    }
}

.dashboard-chart-well {
    margin: 6px 14px 14px;
    padding: 6px 8px 2px;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg) 72%, var(--surface));
}

/* 4A (polish plan 2026-08-25): branded searchable combobox — orange trigger
   rail, label + selection stacked inside the trigger, search pinned first in
   the popover, "All pipelines" as the first listbox row, code badges. */
.dashboard-filter-field[data-dashboard-pipeline] { position: relative; min-width: 230px; }
.dashboard-pipeline-trigger {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 12px 6px 10px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent-orange, var(--primary));
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.dashboard-pipeline-trigger:focus-visible {
    outline: 2px solid var(--accent-orange, var(--primary));
    outline-offset: 1px;
}
.dashboard-pipeline-trigger-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.dashboard-pipeline-trigger-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.dashboard-pipeline-trigger [data-dashboard-pipeline-summary] {
    display: flex;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-pipeline-chip {
    max-width: 150px;
    padding: 2px 7px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-pipeline-popover {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    width: min(360px, 90vw);
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
}
.dashboard-pipeline-popover[hidden] { display: none; }
/* "All pipelines" — the first row INSIDE the listbox, styled as a selected
   option when the filter is clear (warm active background, visible check). */
.dashboard-pipeline-clear {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-bottom: 2px;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}
.dashboard-pipeline-clear i { visibility: hidden; font-size: 11px; color: var(--accent-orange, var(--primary)); }
.dashboard-pipeline-clear.is-active {
    background: color-mix(in srgb, var(--accent-orange, var(--primary)) 12%, var(--surface));
    color: var(--accent-orange-text, var(--text-primary));
}
.dashboard-pipeline-clear.is-active i { visibility: visible; }
.dashboard-pipeline-clear:hover { background: var(--bg); }
/* Search rides FIRST in the popover and owns the open-state focus. */
.dashboard-pipeline-popover input[type="search"] {
    width: 100%;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-primary);
}
.dashboard-pipeline-popover input[type="search"]:focus-visible {
    outline: 2px solid var(--accent-orange, var(--primary));
    outline-offset: 1px;
}
.dashboard-pipeline-options { max-height: 260px; overflow: auto; }
.dashboard-pipeline-options label {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border-radius: 7px;
    cursor: pointer;
}
.dashboard-pipeline-options label:hover { background: var(--bg); }
.dashboard-pipeline-options label[hidden] { display: none; }
/* Keyboard-active option (arrow navigation). */
.dashboard-pipeline-options .is-keyboard-active {
    outline: 2px solid var(--accent-orange, var(--primary));
    outline-offset: -2px;
    background: var(--bg);
}
/* Compact pipeline-code badge for scanning (option-scoped class — the KPI
   tiles own the unrelated .dashboard-pipeline-code). */
.dashboard-pipeline-option-code {
    flex: none;
    min-width: 38px;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 14%, var(--surface));
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .03em;
    text-align: center;
    text-transform: uppercase;
}
.dashboard-pipeline-option-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-widget-table .dashboard-table-date {
    min-width: 104px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* kpi.css gives .section-card a 20px top margin (fixed lower sections rhythm);
   inside the canvas the grid gap already provides it. */
.dashboard-widget-cell .section-card {
    margin-top: 0;
}

/* Feed empty text — replaces the retired partial's inline style 1:1. */
.dashboard-feed-empty {
    margin: 0;
    padding: 8px 0;
    color: var(--text-muted);
    font-size: 12.5px;
}

/* ---- Quiet unavailable / failed-to-load card --------------------------- */

.dashboard-widget-unavailable {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 20px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.dashboard-widget-unavailable p {
    margin: 0;
    color: var(--text-secondary);
}

/* ---- Loading skeletons -------------------------------------------------- */

.widget-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.skeleton-line,
.skeleton-fill {
    display: block;
    border-radius: 4px;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.05) 25%,
        rgba(0, 0, 0, 0.10) 37%,
        rgba(0, 0, 0, 0.05) 63%);
    background-size: 400% 100%;
    animation: widget-skeleton-shimmer 1.4s ease infinite;
}

.skeleton-line--label { width: 40%; height: 12px; }
.skeleton-line--value { width: 60%; height: 24px; }
.skeleton-fill { flex: 1 1 auto; min-height: 24px; }

/* Cell units, not type-specific guesses, size every skeleton. */
.widget-skeleton--kpi,
.widget-skeleton--chart,
.widget-skeleton--table,
.widget-skeleton--queue,
.widget-skeleton--timeline,
.widget-skeleton--info,
.widget-skeleton--map { min-height: 0; }

@keyframes widget-skeleton-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Period re-fetch: keep the old card visible but dimmed until fresh data lands. */
/* Final-sweep #14: KPI drill cards render as <a>, not <article> — dim them too. */
.dashboard-widget-cell.is-refreshing > article,
.dashboard-widget-cell.is-refreshing > a.dashboard-stat-card {
    opacity: 0.55;
    transition: opacity 150ms ease;
}

/* Screen-reader-only loading note. */
.widget-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-line,
    .skeleton-fill {
        animation: none;
    }
}

/* Mirror kpi.css's 1100px collapse: every widget stacks full-width; the
   tighter 16px gap matches the old within-section stacking rhythm. */
@media (max-width: 1100px) {
    .dashboard-widget-grid {
        --dash-grid-gap: 16px;
    }

    .dashboard-widget-cell {
        grid-column: 1 / -1;
    }
}

/* ============================================================================
   Commit F — queue / lean-table / contact renderers (widget-canvas.js).
   Card chrome mirrors .dashboard-stat-card (kpi.css) so the new cards sit
   flush with the parity widgets. The widget table follows the app's
   .data-table conventions (uppercase --bg header, bordered rows, row hover)
   WITHOUT its list-page min-width/sticky header — it must fit a 6-span card;
   wide content scrolls inside .dashboard-table-scroll instead.
   ========================================================================== */

.dashboard-queue-card,
.dashboard-table-card,
.dashboard-contact-card,
.dashboard-info-items-card {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

/* ---- Queue (documents-needed, expiring/recent policies) ----------------- */

.dashboard-queue-list,
.dashboard-contact-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-queue-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
}

.dashboard-queue-list li:last-child .dashboard-queue-row {
    border-bottom: 0;
}

.dashboard-queue-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dashboard-queue-title {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.dashboard-queue-row:hover .dashboard-queue-title {
    color: var(--primary);
    text-decoration: underline;
}

.dashboard-queue-subtitle {
    color: var(--text-secondary);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Right-aligned count/date pill (queue rows + the table's badge column). */
.dashboard-queue-badge,
.dashboard-table-badge {
    flex: 0 0 auto;
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- Lean table (claims.status.table) ------------------------------------ */

.dashboard-table-scroll {
    position: relative;
    overflow-x: auto;
    scrollbar-width: thin;
}

.dashboard-widget-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    /* --table-header-bg, not --bg: a column header must not be painted with
       the page-ground token (see site.css .data-table thead th). */
.dashboard-widget-table thead th {
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--text-secondary);
    background: var(--table-header-bg);
    white-space: nowrap;
}

.dashboard-widget-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.dashboard-widget-table tbody tr:last-child td {
    border-bottom: 0;
}

.dashboard-widget-table tbody tr:hover {
    background: var(--bg);
}

.dashboard-widget-table td a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.dashboard-widget-table td a:hover {
    text-decoration: underline;
}

.dashboard-table-badge-cell {
    text-align: right;
}

@media (max-width: 1100px) {
    .dashboard-table-scroll {
        padding-bottom: 4px;
        box-shadow: inset -18px 0 18px -20px var(--text-secondary);
    }

    .dashboard-table-scroll::after {
        content: "";
        position: sticky;
        right: 0;
        top: 0;
        float: right;
        display: block;
        width: 18px;
        height: 1px;
        min-height: 100%;
        margin-left: -18px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(255,255,255,0), var(--surface));
    }

    [data-theme="dark"] .dashboard-table-scroll::after {
        background: linear-gradient(90deg, rgba(0,0,0,0), var(--surface));
    }
}

/* ---- Contacts (claims.handler.contact) ----------------------------------- */

.dashboard-contact-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.dashboard-contact-list li:last-child {
    border-bottom: 0;
}

.dashboard-contact-name {
    font-size: 14px;
    font-weight: 600;
}

.dashboard-contact-email {
    color: var(--primary);
    font-size: 13px;
    text-decoration: none;
    word-break: break-all;
}

.dashboard-contact-email:hover {
    text-decoration: underline;
}

/* ---- Generic info rows (W3 client portal cards) -------------------------- */

.dashboard-info-items {
    display: grid;
    grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 10px;
    margin: 0;
}

.dashboard-info-items dt {
    color: var(--text-secondary);
    font-size: 12.5px;
}

.dashboard-info-items dd {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
}

.dashboard-info-items dd span:first-child,
.dashboard-info-items dd a:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-info-items dd a {
    color: var(--primary);
    text-decoration: none;
}

.dashboard-info-items dd a:hover {
    text-decoration: underline;
}

.dashboard-info-items small {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
}

/* Rich KPI parity: catalog-backed summary widgets may retain the supporting
   facts from the fixed section they replaced without changing their KPI type. */
.dashboard-stat-supporting-items {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.dashboard-stat-supporting-items dd {
    flex-wrap: wrap;
}

.dashboard-info-badge {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 700;
}

@media (max-width: 640px) {
    .dashboard-info-items {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }

    .dashboard-info-items dd {
        margin-bottom: 8px;
    }
}

/* ============================================================================
   Widget editor (Commit E) — edit-mode chrome, catalog drawer, edit banner.
   Visual language adapted from mockups/dashboard-widgets-review-2026-06-29/
   02-admin-edit.html + 05-client-edit.html onto the app's real tokens.
   The drawer + reset modal are hoisted to <body> by widget-editor.js so no
   transformed ancestor traps their fixed positioning (stacking-context trap).
   ========================================================================== */

/* Header: period selector + Customize button share the right side. */
.dashboard-kpi-header-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.dashboard-edit-error {
    color: var(--danger);
    font-size: 13px;
}

/* ---- Edit banner (Save / Reset / Cancel control surface) ---------------- */

/* C2 (dashboard-editor plan, 2026-08-18) — the concurrency conflict is its OWN full-width
   strip ABOVE the edit banner, amber, with attribution text + the two actions; the banner's
   save primaries are disabled while it shows. Was an inline one-liner inside the banner. */
.dashboard-edit-conflict--strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 0 0 10px;
    padding: 12px 16px;
    border: 1px solid var(--accent-orange-text, var(--warning-text));
    border-left-width: 6px;
    border-radius: var(--radius-md, 8px);
    background: var(--warning-bg, #fbf3e0);
    color: var(--text, #1a1a1a);
    box-shadow: var(--shadow-raised, 0 8px 24px rgba(0,0,0,.12));
}
.dashboard-edit-conflict-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 320px; }
.dashboard-edit-conflict-text strong { font-size: 14px; }
.dashboard-edit-conflict-text span { font-size: 13px; color: var(--text-secondary); }
.dashboard-edit-conflict-actions { display: flex; gap: 8px; flex: 0 0 auto; }

/* V4 „Stripes“ (owner pick 2026-08-18, mockups/dashboard-editor-brand-2026-08-18): brand off-white
   banner with the brand stripe band at the right edge, orange scope switch, Pantone-grey shadows. */
.dashboard-edit-banner {
    --brand-yellow: #F8A900;
    --brand-orange: #F47421;
    --brand-offwhite: #EAE7D8;
    --brand-grey: #201B16;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    padding-right: 84px;
    border: 1px solid #D9D3C0;
    border-radius: 14px;
    background: var(--brand-offwhite);
    box-shadow: 0 2px 8px rgba(32, 27, 22, .12);
    font-size: 13px;
}

.dashboard-edit-bottom-bar {
    position: fixed;
    left: var(--sidebar-width, 260px);
    right: 0;
    bottom: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 22px;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 -8px 24px rgba(32, 27, 22, .14);
    backdrop-filter: blur(10px);
}
.dashboard-edit-bottom-bar[hidden] { display: none; }
.dashboard-edit-bottom-actions { display: flex; align-items: center; gap: 8px; }
body.dashboard-widget-editing .main-content { padding-bottom: 78px; }
.dashboard-edit-banner .btn-secondary,
.dashboard-edit-banner .btn-primary { padding: 8px 12px; font-size: 13px; }
.dashboard-edit-banner .dashboard-edit-mode-switch button { padding: 6px 11px; font-size: 12.5px; white-space: nowrap; }
.dashboard-edit-banner .dashboard-promote-link { white-space: nowrap; }
.dashboard-edit-banner::after {
    content: '';
    position: absolute; z-index: 0;
    right: -30px; top: -20px; width: 110px; height: 220px;
    transform: skewX(-18deg);
    background: repeating-linear-gradient(90deg, var(--brand-orange) 0 9px, transparent 9px 20px);
    opacity: .9;
    pointer-events: none;
}
.dashboard-edit-banner > * { position: relative; z-index: 2; }
.dashboard-edit-banner.is-default-mode {
    border-color: var(--brand-yellow);
    background: #FDEFC9;
}
.dashboard-edit-banner .btn-secondary,
.dashboard-edit-banner .btn-primary { white-space: nowrap; }

/* The class sets display:flex, which would beat the [hidden] UA default. */
.dashboard-edit-banner[hidden] {
    display: none;
}

.dashboard-edit-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dashboard-edit-banner-text span {
    color: var(--text-secondary);
    font-size: 13px;
}

.dashboard-edit-banner-text small {
    color: var(--text-muted);
    font-size: 12px;
}

/* C4 (owner 2026-08-18): scope row = prominent mode switch + secondary "make default" link. */
.dashboard-edit-scope-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* V4: one line — the banner is compact enough at ≥1366 */
    gap: 6px 12px;
    margin-bottom: 0;
}
@media (max-width: 1365px) { .dashboard-edit-scope-row { flex-wrap: wrap; } }
.dashboard-edit-mode-switch {
    display: inline-flex;
    width: fit-content;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border-strong, var(--border));
    border-radius: 10px;
    background: var(--bg, #f5f3f0);
}
.dashboard-default-split--secondary { display: inline-flex; align-items: center; gap: 2px; }
.dashboard-default-split--secondary[hidden] { display: none; }
.dashboard-promote-link,
.dashboard-default-split--secondary .dashboard-default-split-toggle {
    background: transparent;
    border: 0;
    padding: 4px 6px;
    color: var(--primary-text, var(--primary));
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
}
.dashboard-promote-link:hover,
.dashboard-default-split--secondary .dashboard-default-split-toggle:hover { background: var(--surface-hover, var(--hover-bg)); }
.dashboard-promote-link:focus-visible,
.dashboard-default-split--secondary .dashboard-default-split-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.dashboard-edit-mode-switch[hidden] {
    display: none;
}

.dashboard-edit-mode-switch button {
    border: 0;
    border-radius: 8px;
    padding: 7px 12px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.dashboard-edit-mode-switch button.is-active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(32, 27, 22, .12);
}

.dashboard-edit-banner-actions {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
    flex: 0 0 auto;
}
.dashboard-edit-change-count { color: var(--text-secondary); white-space: nowrap; }
@media (max-width: 1365px) { .dashboard-edit-banner-actions { flex-wrap: wrap; } }

.dashboard-default-split {
    position: relative;
    display: inline-flex;
}

.dashboard-default-split[hidden] {
    display: none;
}

.dashboard-default-split > button:first-child {
    border-radius: 8px 0 0 8px;
}

.dashboard-default-split-toggle {
    min-width: 34px;
    padding-inline: 8px;
    border-left: 0;
    border-radius: 0 8px 8px 0;
}

.dashboard-default-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    min-width: 250px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.dashboard-default-menu[hidden] {
    display: none;
}

.dashboard-default-menu button {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-primary, var(--text, #1a1a1a));
    text-align: left;
    cursor: pointer;
}

.dashboard-default-menu button:hover,
.dashboard-default-menu button:focus-visible {
    background: var(--primary-light);
}

.dashboard-default-scopes {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.dashboard-default-scopes legend {
    margin-bottom: 8px;
    font-weight: 700;
}

.dashboard-default-scopes label,
.dashboard-default-apply-all {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-default-apply-all {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.dashboard-default-overrides {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.dashboard-default-overrides h3 {
    margin: 0 0 8px;
    font-size: 14px;
}

.dashboard-default-override-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
}

.dashboard-edit-status {
    font-size: 13px;
    color: var(--text-secondary);
}

.dashboard-edit-status.is-error {
    color: var(--danger);
    font-weight: 600;
}

/* Editing state: a period switch would discard unsaved edits (Admin links
   navigate; Company re-hydrates) — the selector is inert while editing. */
body.dashboard-widget-editing .dashboard-period-selector {
    opacity: 0.55;
    pointer-events: none;
}

/* ---- Per-cell edit chrome ------------------------------------------------ */

/* Owner 2026-08-03 (row-uniformity round): the editor must preview the SAME
   box the page renders. The dashed outline moves to the actual card (true,
   content-sized height); the grid cell keeps only a faint track guide so the
   slot being dragged within stays visible. Previously the outline traced the
   cell — grid items stretch to the row track, so every widget in a row looked
   equal-height in the editor while the page showed content-sized cards. */
.dashboard-widget-grid.is-editing .dashboard-widget-cell[data-widget-key] {
    outline: 1px dashed color-mix(in srgb, var(--border) 45%, transparent);
    outline-offset: 6px;
    border-radius: var(--radius);
}

.dashboard-widget-grid.is-editing .dashboard-widget-cell[data-widget-key] > article,
.dashboard-widget-grid.is-editing .dashboard-widget-cell[data-widget-key] > a.dashboard-stat-card,
.dashboard-widget-grid.is-editing .dashboard-widget-cell[data-widget-key] > .widget-skeleton {
    /* 2px, not 1.5px — Chromium truncates fractional outline widths to 1px,
       which would leave card and cell guides distinguishable only by alpha. */
    outline: 2px dashed var(--border);
    outline-offset: 2px;
    border-radius: var(--radius);
    /* The edit bar participates in the cell's flex column. A literal 100%
       height here makes bar + card taller than the grid track after a row
       resize, allowing rich card content to paint over the following row.
       Give the card the remaining space and keep its existing inner scroll
       regions instead. */
    height: auto;
    flex-basis: 0;
}

.dashboard-widget-grid.is-editing .dashboard-widget-cell[data-widget-key]:hover > article,
.dashboard-widget-grid.is-editing .dashboard-widget-cell[data-widget-key]:hover > a.dashboard-stat-card,
.dashboard-widget-grid.is-editing .dashboard-widget-cell[data-widget-key]:hover > .widget-skeleton {
    outline-color: var(--accent-orange-line);
}

/* Card bodies are inert while editing (no accidental links/chart tooltips
   mid-drag); only the edit bar stays interactive. */
.dashboard-widget-grid.is-editing .dashboard-widget-cell[data-widget-key] > :not(.widget-edit-bar):not(.widget-resize-handle) {
    pointer-events: none;
}

/* Review round 3: the view-mode drill/chip affordances (E2 header ↗ link, E3
   config chips) are HIDDEN while editing so the editor chrome stays uncluttered
   and the "suppressed while editing" invariant holds even for cells that were
   rendered in view mode before Customize was clicked (syncCanvas doesn't
   re-hydrate them, so the renderConfigChips/applyHeaderDrill guards can't reach
   them — CSS suppression is class-driven and immune to that timing). Both are
   already pointer-events:none via the rule above; this removes the visual noise. */
.dashboard-widget-grid.is-editing .dashboard-config-chips,
.dashboard-widget-grid.is-editing .dashboard-drill-link {
    display: none;
}

.widget-edit-bar {
    position: relative;
}

.widget-settings-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; /* D7: JS positions it under the clicked gear (inline left), caret via --caret-left */
    z-index: 20;
    width: min(260px, 88vw);
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
/* D7 (2026-08-18): caret pointing at the gear the popover belongs to. */
.widget-settings-popover::before {
    content: '';
    position: absolute;
    top: -7px;
    left: var(--caret-left, 18px);
    width: 12px; height: 12px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    transform: rotate(45deg);
}

.widget-settings-field {
    display: grid;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.widget-settings-field input,
.widget-settings-field select {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 5px 8px;
    background: var(--surface);
    color: var(--text-primary, var(--text, #1a1a1a));
    font: inherit;
}

/* WPF-29 (P5-45): claim-number picker inside the settings popover. */
.widget-claim-picker {
    position: relative;
    display: grid;
    gap: 4px;
}

.widget-claim-picker-clear {
    position: absolute;
    top: 5px;
    right: 4px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.widget-claim-picker-clear:hover {
    background: var(--bg);
    color: var(--text-primary, var(--text, #1a1a1a));
}

.widget-claim-picker-status {
    font-weight: 400;
    color: var(--text-secondary);
}

.widget-claim-picker-status:empty {
    display: none;
}

.widget-claim-picker-list {
    display: grid;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
}

.widget-claim-picker-option {
    display: grid;
    gap: 2px;
    padding: 6px 8px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary, var(--text, #1a1a1a));
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.widget-claim-picker-option:last-child {
    border-bottom: none;
}

.widget-claim-picker-option:hover,
.widget-claim-picker-option.is-active {
    background: var(--bg);
}

.widget-claim-picker-option span {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-secondary);
}

.widget-claim-picker-empty {
    padding: 8px;
    font-weight: 400;
    color: var(--text-secondary);
}

/* Source cell while its ghost is in flight — in-grid placeholder look. */
.dashboard-widget-cell.is-dragging {
    opacity: 0.45;
    outline: 2px dashed var(--accent-orange-line);
    outline-offset: 4px;
    border-radius: var(--radius);
}

.widget-edit-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 8px;
    border: 1px solid #F1E3B8;
    border-radius: 10px;
    background: #FFF4D6; /* V4: light-yellow edit bars */
    box-shadow: 0 2px 8px rgba(32, 27, 22, .12);
}
.widget-edit-bar-spacer { flex: 1 1 auto; }
/* V4 / D4: the per-widget ↵ "start on a new line" toggle */
.widget-edit-bar .widget-edit-break.is-active {
    background: #FBEBC5;
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--brand-yellow, #F8A900);
}

.widget-edit-bar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    flex: 0 0 auto;
}

.widget-edit-bar button:hover {
    background: var(--bg);
    color: var(--text);
}

.widget-edit-grip {
    cursor: grab;
    /* The grip owns the touch gesture: no browser panning may start on it, so
       a touch drag never scrolls the page (scrolling elsewhere is untouched —
       widget-editor.js pointer drag). */
    touch-action: none;
}

.widget-edit-grip:active {
    cursor: grabbing;
}

.widget-edit-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 13px;
}

.widget-edit-span {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.widget-edit-span button.is-active {
    color: #fff;
    border-color: var(--primary);
    background: var(--primary);
}

.widget-edit-span-value {
    min-width: 44px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.widget-edit-hide:hover {
    color: var(--danger);
}

/* ---- WPF-22 (P5-36/37): widget failure states, retry, stale disclosure --- */

.dashboard-widget-failure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.dashboard-widget-retry {
    display: inline-flex;
    align-items: center;
    margin: 0 auto 14px;
}

.dashboard-widget-error-ref {
    display: block;
    margin: -6px 0 10px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
}

/* Stale-data disclosure: the failed refresh kept the previous card; a small
   banner above it says the data may be outdated and offers a scoped retry. */
.dashboard-widget-stale-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    padding: 6px 10px;
    border: 1px solid var(--accent-orange-line, #f0c37e);
    border-radius: 8px;
    background: var(--primary-light, #fff7ed);
    color: var(--text-secondary);
    font-size: 12px;
}

.dashboard-widget-stale-banner .dashboard-widget-retry {
    margin: 0;
    flex: none;
    padding: 2px 10px;
    font-size: 12px;
}

/* ---- Add-widget tile ----------------------------------------------------- */

.dashboard-widget-add {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 84px;
    padding: 16px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.dashboard-widget-add:hover {
    border-color: var(--accent-orange-line);
    background: var(--primary-light);
    color: var(--text);
}

/* ---- Catalog drawer ------------------------------------------------------ */

.dashboard-widget-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 92vw;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    z-index: 100002;
    transition: transform 200ms ease; /* slide away/back around a drag */
}
/* Phase 2 moved the editor chrome above z-100000 (page sticky surfaces). The
   reset/discard/promote confirms are .modal-overlay (z-1000 in site.css) and
   must STILL win over the drawer + bottom bar, so they get their own stop. */
#widgetEditorDiscardModal,
#widgetEditorResetModal,
#dashboardPromoteDefaultModal {
    z-index: 100010;
}
body.dashboard-widget-drawer-open .main-content {
    padding-right: min(396px, 32vw);
    transition: padding-right 160ms ease;
}
/* One action surface at a time: the drawer footer carries Save/Done, so the
   sticky bottom bar hides instead of floating beside a second Cancel. */
body.dashboard-widget-drawer-open .dashboard-edit-bottom-bar { display: none; }

/* Dragging an entry out of the drawer slides it away so the grid underneath
   is reachable (essential on touch, where the drawer overlays the canvas);
   widget-editor.js removes the class after the drop and it slides back. */
.dashboard-widget-drawer.is-drag-away {
    transform: translateX(110%);
    pointer-events: none;
}

.dashboard-widget-drawer[hidden] {
    display: none;
}

/* WPF-18 (P5-33): the add-widget drawer is an overlay surface — while it is
   open (body.dashboard-widget-drawer-open, toggled by widget-editor.js) the
   global floating controls are suppressed instead of racing it on z-index:
   the assistant FAB (z-1050, assistant.css) would otherwise sit ON TOP of the
   drawer/bottom-sheet and the scroll FABs (z-900, site.css) tie with it.
   Phase 2: the drawer sits at z-100002 with the rest of the editor chrome;
   the reset/discard/promote confirms are bumped to z-100010 above it. */
body.dashboard-widget-drawer-open .scroll-fab {
    visibility: hidden;
    pointer-events: none;
}

.widget-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.widget-drawer-head h2 {
    margin: 0;
    font-size: 18px;
}

.widget-drawer-note {
    margin: 12px 20px 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* C3 (dashboard-editor plan, owner 2026-08-18): ONE rule for the drawer tools row.
   Two competing declarations (this grid one + a later "chrome polish" flex one) left
   the search input at 22 px beside a 295 px type select at the 400 px drawer width —
   flex:1 without min-width:0 lets the input's intrinsic size collapse under the
   select's content width. Search owns the row; the type select is a compact
   secondary control at natural width. */
.widget-drawer-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.widget-drawer-tools input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.widget-drawer-tools select {
    flex: 0 0 auto;
    width: auto;
    max-width: 44%;
}
.widget-drawer-tools input,
.widget-drawer-tools select {
    min-height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 9px;
    background: var(--surface);
    color: var(--text-primary, var(--text, #1a1a1a));
    font: inherit;
    font-size: 13px;
}

.widget-drawer-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px 20px 24px;
}
/* D11 (2026-08-18): the drawer lists EVERY widget; the ones on the page are marked and removable. */
/* Token-mixed, not literal cream — the dark theme keeps its own surface/text,
   so a hardcoded light tint left white titles on cream rows in dark mode. */
.widget-drawer-item.is-added {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
}
.widget-drawer-item.is-added:hover {
    border-color: #B32020;
    background: color-mix(in srgb, #B32020 10%, var(--surface));
}
.widget-drawer-item-added {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--accent-orange-text, var(--primary));
}
/* Claims-columns pattern: ONE state chip per entry. Added shows the check +
   label (hover tints removal-red - the click removes); not-added shows + Add. */
.widget-drawer-item.is-added:hover .widget-drawer-item-added { color: #B32020; }
.widget-drawer-item-add {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 1px 8px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-secondary); font-size: 12px; font-weight: 600;
}
.widget-drawer-item:not(.is-added):hover .widget-drawer-item-add {
    border-color: var(--primary); color: var(--primary);
}
.widget-drawer-foot {
    flex: 0 0 auto;
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.widget-drawer-group {
    margin: 14px 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--text-muted);
}

.widget-drawer-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    margin-bottom: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    text-align: left;
    font: inherit;
    /* Vertical touch pans keep scrolling the drawer list; a horizontal pull
       starts the drag-onto-grid gesture (widget-editor.js). */
    touch-action: pan-y;
}

.widget-drawer-item:hover {
    border-color: var(--accent-orange-line);
    background: var(--primary-light);
}

.widget-drawer-item strong {
    font-size: 14px;
}

.widget-drawer-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.widget-drawer-item-soon {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

/* WPF-24 (P5-40): planned (provider-less) entries — visible, clearly separated,
   not interactive. The button is disabled; style it as an informational card. */
.widget-drawer-group--planned {
    margin-top: 22px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

.widget-drawer-item--planned,
.widget-drawer-item--planned:hover {
    opacity: 0.6;
    cursor: default;
    border-style: dashed;
    background: var(--surface);
}

.widget-drawer-empty {
    margin: 0;
    padding: 24px 0;
    color: var(--text-secondary);
    font-size: 13px;
}

/* WPF-31 (P5-46): one-click way out of a filter-caused drawer zero state. */
.widget-drawer-clear-filters {
    justify-self: start;
    margin-top: 4px;
}

/* ---- Pointer-drag surfaces (widget-editor.js, mouse/touch/pen) ----------- */

/* Floating drag ghost — a translated clone appended to <body>. Tall chart
   cards are capped so the ghost never blankets the drop area on touch. */
.widget-drag-ghost {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    max-height: 280px;
    overflow: hidden;
    z-index: 100004; /* above the drawer (100002) — the clone must stay visible
                        while the pointer is still over the drawer region */
    pointer-events: none;
    opacity: 0.92;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    will-change: transform;
}

/* Insertion placeholder while a drawer entry hovers over the grid. */
/* Ghost-preview drop indicator (owner 2026-08-02, B5): the grid stays frozen
   while dragging; this fixed-position accent bar marks the adopted drop slot
   in the grid gap. Removed with the drag. */
.widget-drop-indicator {
    position: fixed;
    z-index: 1200;
    border-radius: 3px;
    background: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
    pointer-events: none;
    display: none;
}

/* feature #4 — clear DnD insertion indicator: the drop slot (exact size/position the
   widget will land in) gets a strong brand-orange dashed outline, an inset glow, and a
   soft pulse so the target position is unmistakable during drag. */
.widget-drop-placeholder {
    min-height: 96px;
    border: 2px dashed var(--primary);
    border-radius: var(--radius);
    background: rgba(232, 120, 10, 0.10);
    box-shadow: inset 0 0 0 1px rgba(232, 120, 10, 0.25);
    animation: widget-drop-pulse 1.1s ease-in-out infinite;
}
@keyframes widget-drop-pulse {
    0%, 100% { background: rgba(232, 120, 10, 0.08); }
    50%      { background: rgba(232, 120, 10, 0.16); }
}

/* feature #3 — view-mode "add widget" discoverability CTA (below the grid). Subtle
   dashed invitation; hidden once editing (the in-grid Add tile + drawer take over). */
.dashboard-add-widget-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px;
    padding: 10px 18px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.dashboard-add-widget-cta:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--hover-bg);
}
body.dashboard-widget-editing .dashboard-add-widget-cta { display: none; }
/* D6 (2026-08-18): the header Add was retired — view mode has only „Konfigūruoti valdiklius“. */
/* V4 (2026-08-18): the centred ⊕ on every row line — outlined orange, fills on hover. */
.widget-row-add-gutter {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    width: 28px; height: 28px;
    border-radius: 999px;
    border: 2px solid var(--primary);
    background: var(--surface);
    color: var(--accent-orange-text, var(--primary));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(32, 27, 22, .12);
    transition: border-color .15s, color .15s, background .15s, transform .15s;
}
.widget-row-add-gutter:hover, .widget-row-add-gutter:focus-visible {
    background: var(--primary); color: #fff; outline: none;
    transform: translate(-50%, -50%) scale(1.06);
}
.widget-row-free-add {
    position: absolute;
    z-index: 9;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 2px dashed var(--border);
    border-radius: 999px;
    color: var(--primary);
    background: var(--surface);
    cursor: pointer;
}
.widget-row-free-add:hover,
.widget-row-free-add:focus-visible { border-color: var(--primary); outline: 2px solid var(--focus-ring); }
.dashboard-banner-add { white-space: nowrap; }

/* While a drag is in flight: no text selection anywhere, grabbing cursor
   (the class lives on <body> only for the duration of the drag). */
body.dashboard-widget-drag-active,
body.dashboard-widget-drag-active * {
    cursor: grabbing !important;
}

body.dashboard-widget-drag-active {
    user-select: none;
    -webkit-user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    /* WPF-23 (P5-39): no drawer slide, no drop-slot pulse, no ghost easing —
       drag/drop and the drawer stay fully functional, just motion-free. */
    .dashboard-widget-drawer {
        transition: none;
    }

    .widget-drop-placeholder {
        animation: none;
    }

    .widget-drag-ghost {
        transition: none;
    }
}

/* ---- Sensitivity chips (mockup sens-chip on app-safe colors) ------------- */

.widget-sens-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
}

.widget-sens-chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.widget-sens--operational { color: #1d4ed8; }
.widget-sens--financial   { color: var(--danger); }
.widget-sens--adminonly   { color: #4b5563; }
.widget-sens--clientsafe  { color: #15803d; }

@media (max-width: 1100px) {
    .dashboard-edit-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .widget-drawer-tools {
        flex-wrap: wrap;
    }
    .widget-drawer-tools select { max-width: 100%; }

    /* E4 mobile polish (phase-3 §E4): the catalog drawer becomes a BOTTOM SHEET
       — full-width, anchored to the bottom, capped height — so it no longer
       overlays the whole grid as a right-side panel on a phone and the canvas
       behind it stays reachable. */
    .dashboard-widget-drawer {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        max-height: 78vh;
        border-left: 0;
        border-top: 1px solid var(--border);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16);
    }

    /* Dragging an entry out now slides the sheet DOWN, not sideways. Later in
       source order than the base .is-drag-away rule, so it wins when matched. */
    .dashboard-widget-drawer.is-drag-away {
        transform: translateY(110%);
    }

    /* E4: the per-widget edit bar wraps its controls instead of squeezing the
       title to nothing / overflowing the cell on a narrow viewport. */
    .widget-edit-bar {
        flex-wrap: wrap;
    }
}

/* W8/G8 — map widgets. The canvas div is collapsed until a map actually draws
   (drawMap sets min-height), so the fallback table stands alone headless / when
   the Maps API is blocked; when the map enhances, the redundant table hides. */
.dashboard-map-card {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    /* Tile grid 2026-08-04: the canvas fills the fixed tile via flex — with
       min-height 0 inline and no flex sizing the Google map rendered into a
       zero-height container (blank card once the fallback hid on 'idle'). */
    display: flex;
    flex-direction: column;
}
/* F8: cap the canvas height so an enhanced Google map can never stretch the card
   (drawMap sets min-height 240px; this bounds the top). */
.dashboard-map-canvas { width: 100%; flex: 1 1 auto; min-height: 200px; margin-top: 12px; border-radius: 8px; overflow: hidden; }
.dashboard-map-note { display: block; color: var(--text-secondary); margin: 6px 0 0; font-size: 0.85em; }

/* D-C1.5 — explicit source quality/coverage. State text remains visible, so
   color is supplementary rather than the only status signal. */
.dashboard-data-quality {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 7px;
    background: rgba(107, 114, 128, .07);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}
.dashboard-data-quality-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-primary);
}
.dashboard-data-quality-state { font-weight: 600; }
.dashboard-data-quality-reason { margin: 0; color: var(--text-primary); }
.dashboard-data-quality-message { margin: 0; }
.dashboard-data-quality-asof { font-size: 11px; }
.dashboard-data-quality--complete { border-left-color: #15803d; background: rgba(21, 128, 61, .08); }
.dashboard-data-quality--noRecords { border-left-color: #64748b; }
.dashboard-data-quality--partial { border-left-color: var(--accent-orange-text, #B44C09); background: rgba(180, 83, 9, .09); }
.dashboard-data-quality--unavailable { border-left-color: #b91c1c; background: rgba(185, 28, 28, .08); }
.dashboard-data-quality--notCalculable { border-left-color: #7e22ce; background: rgba(126, 34, 206, .08); }
/* F8: the always-rendered fallback table stands in when the map can't enhance
   (headless / no key / tilesloaded never fires for a tile-less map). Cap its
   height + scroll it so a long region list can never run the card away to ~3,700px. */
.dashboard-map-fallback-scroll { margin-top: 8px; max-height: 260px; overflow-y: auto; }
.dashboard-map-fallback-scroll.dashboard-map-fallback--enhanced,
.dashboard-map-fallback--enhanced { display: none; }

@media (max-width: 576px) {
    .dashboard-widget-grid {
        padding-bottom: 72px;
    }
}

/* E3 view-mode config chips (phase-3 §E3): the widget's saved T3 config
   (period override / max rows / claim / variant) surfaced read-only on the card
   face, each with a one-click clear. Cell-level row above the card so a KPI
   drill <a> never nests an interactive clear button. */
.dashboard-config-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.dashboard-config-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
}
.dashboard-config-chip-label { font-weight: 600; }
.dashboard-config-chip-value { color: var(--primary); }
.dashboard-config-chip-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.dashboard-config-chip-clear:hover,
.dashboard-config-chip-clear:focus-visible {
    background: rgba(0, 0, 0, .06);
    color: var(--primary);
}

/* ── Dark theme (final-sweep #11): widgets.css is the only stylesheet that
   styles these classes, so the dark overrides live here too. ─────────────── */
html[data-theme="dark"] .dashboard-edit-banner.is-default-mode {
    background: #2b2113;
    border-color: var(--accent-orange-text, #B44C09);
}
html[data-theme="dark"] .dashboard-edit-banner.is-default-mode strong,
html[data-theme="dark"] .dashboard-edit-banner.is-default-mode p {
    color: var(--text, #efe9e1);
}
html[data-theme="dark"] .widget-sens--operational { color: #93b4f5; }
html[data-theme="dark"] .widget-sens--adminonly   { color: #b3bac4; }
html[data-theme="dark"] .widget-sens--clientsafe  { color: #6fce8f; }
html[data-theme="dark"] .skeleton-line,
html[data-theme="dark"] .skeleton-fill {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.06) 25%,
        rgba(255, 255, 255, 0.12) 37%,
        rgba(255, 255, 255, 0.06) 63%);
    background-size: 400% 100%;
}
.dashboard-filter-field--checkbox {
    align-items: center;
    flex-direction: row;
    gap: .5rem;
    max-width: 18rem;
}

.dashboard-filter-field--checkbox input {
    inline-size: 1rem;
    block-size: 1rem;
}

/* ── I3 (owner 2026-08-01): mockup 1+5 hybrid widget chrome ─────────────────
   Monitoring-style eyebrow labels + editorial hero numbers with ▲/▼ deltas.
   Applies to every widget-canvas card (Company + Admin kinds inherit). */
.dashboard-widget-cell .dashboard-widget-eyebrow {
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.dashboard-widget-cell .dashboard-stat-card strong {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    margin: 0;
    /* P6b (owner 2026-08-02): the 38px hero read as oversized next to the
       mockup — option-1 uses 30/700 and long EUR values stay on one line. */
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    min-block-size: calc(1.2em + 2px);
    max-width: 100%;
    padding-block: 1px;
    text-align: center;
    white-space: nowrap;
}
.dashboard-widget-cell .dashboard-stat-card small {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}
.dashboard-widget-cell .dashboard-stat-card small.up::before { content: "▲ "; font-size: 10px; }
.dashboard-widget-cell .dashboard-stat-card small.down::before { content: "▼ "; font-size: 10px; }
.dashboard-widget-cell > .card,
.dashboard-widget-cell > .dashboard-stat-card,
.dashboard-widget-cell .chart-card {
    box-shadow: none;
    border-radius: 12px;
}
.dashboard-widget-cell .dashboard-card-header h2 {
    font-size: 15px;
    font-weight: 650;
}

/* Q4 (owner 2026-08-06): every card has the same two-level header footprint.
   A stable block height keeps KPI/list/chart titles aligned across a row even
   when one Lithuanian title wraps. */
.dashboard-widget-cell .dashboard-widget-heading {
    min-height: 38px;
}
.dashboard-widget-cell .dashboard-stat-content {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    overflow: visible;
    padding-block: 3px;
    text-align: center;
}
/* Editorial thin rules for list rows inside widgets (mockup 5). */
.dashboard-widget-cell .dashboard-info-items > div,
.dashboard-widget-cell .dashboard-status-row {
    border-bottom: 1px dotted var(--border);
}
.dashboard-widget-cell .dashboard-info-items > div:last-child,
.dashboard-widget-cell .dashboard-status-row:last-child {
    border-bottom: 0;
}

/* ── I4/I5 (owner 2026-08-01): drawer + editor chrome polish ───────────────
   The catalog drawer inherits the shared hive-drawer header; the per-widget
   edit bar (drag handle, span stepper, rows field) gets the compact pill
   treatment so editing feels like part of the new card chrome. */
/* (drawer tools row consolidated into the single rule above — C3, 2026-08-18) */
.widget-edit-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    background: #FFF4D6; /* V4 (2026-08-18): light-yellow bars (was a peach primary tint) */
    padding: 6px 10px;
}
.widget-edit-title {
    font-size: 12.5px;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.widget-edit-span {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    padding: 1px 3px;
}
.widget-edit-span button {
    border: 0;
    background: transparent;
    color: var(--text);
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
    cursor: pointer;
    min-width: 20px;
    min-height: 18px;
    border-radius: 999px;
}
.widget-edit-span button:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.widget-edit-span-value {
    font-size: 12px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    min-width: 34px;
    text-align: center;
}
.dashboard-widget-cell .dashboard-stat-card strong.dashboard-stat-value--text {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.35;
}

/* P-matrix M8 — tinted comparison delta chip beside the hero value. */
.dashboard-widget-cell .dashboard-stat-card .dashboard-stat-delta {
    display: inline-block;
    margin-left: 8px;
    vertical-align: 4px;
    font-style: normal;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
    border-radius: 6px;
    padding: 1px 7px;
    background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
    color: var(--text-secondary);
}
.dashboard-widget-cell .dashboard-stat-card .dashboard-stat-delta.up {
    background: #E7F6F1;
    color: #0F7A5C;
}
.dashboard-widget-cell .dashboard-stat-card .dashboard-stat-delta.down {
    background: #FBEAEA;
    color: #C0323B;
}
html[data-theme="dark"] .dashboard-widget-cell .dashboard-stat-card .dashboard-stat-delta.up {
    background: rgba(18, 173, 133, .16);
    color: #3ECBA7;
}
html[data-theme="dark"] .dashboard-widget-cell .dashboard-stat-card .dashboard-stat-delta.down {
    background: rgba(228, 101, 95, .16);
    color: #F08A85;
}

/* P2/M2 (owner 2026-08-01): ONE right-aligned control row in the header band —
   pills, claim-type select, apply checkbox and Tinkinti sit on a single line
   at desktop widths; the select drops its stacked label above (visually
   hidden, still read by screen readers). */
@media (min-width: 1100px) {
    .dashboard-kpi-header { align-items: flex-start; }
    .dashboard-kpi-header-tools {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        flex-wrap: wrap;
    }
    .dashboard-kpi-header-tools .dashboard-global-filters { align-items: center; }
    .dashboard-kpi-header-tools .dashboard-filter-field > span {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .dashboard-kpi-header-tools .dashboard-filter-field { position: relative; }
    .dashboard-kpi-header-tools .dashboard-filter-field--checkbox > span {
        position: static;
        width: auto; height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        max-width: 15rem;
        font-size: 12px;
        line-height: 1.25;
    }
}

/* P-matrix M5 — the info affordance is a top-right ghost icon, not a bubble
   before the eyebrow. DOM order stays (screen readers hear it first); only
   the visual position moves. Ghost until hover/focus; always tappable. */
.dashboard-widget-cell .dashboard-stat-card { position: relative; }
.dashboard-widget-cell .dashboard-stat-card > .dashboard-widget-filter-help {
    position: absolute;
    top: 10px;
    right: 12px;
}
.dashboard-widget-cell .dashboard-widget-filter-help__button {
    opacity: .45;
    transition: opacity .15s ease;
}
.dashboard-widget-cell .dashboard-stat-card:hover .dashboard-widget-filter-help__button,
.dashboard-widget-cell .dashboard-widget-filter-help__button:focus-visible,
.dashboard-widget-cell .dashboard-card-header:hover .dashboard-widget-filter-help__button {
    opacity: 1;
}

/* P4/M15 — resize handles (edit mode only) + edit-bar dedup. Handles keep
   40px hit zones for touch; visuals stay subtle until hover/drag. */
.dashboard-widget-cell { position: relative; }
.widget-resize-handle { position: absolute; z-index: 6; touch-action: none; }
.widget-resize-handle--e {
    top: 0; right: -10px; width: 20px; height: 100%;
    cursor: ew-resize;
}
/* O3 (owner 2026-08-03): left-border width resize, mirroring east. */
.widget-resize-handle--w {
    top: 0; left: -10px; width: 20px; height: 100%;
    cursor: ew-resize;
}
.widget-resize-handle--s {
    left: 0; bottom: -10px; height: 20px; width: 100%;
    cursor: ns-resize;
}
.widget-resize-handle--se {
    right: -10px; bottom: -10px; width: 28px; height: 28px;
    cursor: nwse-resize;
}
.widget-resize-handle--se::after {
    content: "";
    position: absolute;
    right: 12px; bottom: 12px;
    width: 10px; height: 10px;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    border-radius: 2px;
    opacity: .5;
}
.dashboard-widget-cell:hover .widget-resize-handle--se::after,
.dashboard-widget-cell.is-resizing .widget-resize-handle--se::after { opacity: 1; }
.dashboard-widget-cell.is-resizing > * { user-select: none; }
.dashboard-widget-cell.is-resizing {
    outline: 2px dashed var(--primary);
    outline-offset: 2px;
    border-radius: 12px;
}
.widget-resize-ghost {
    position: fixed;
    z-index: 100003;
    pointer-events: none;
    border: 2px dashed var(--primary);
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.dashboard-widget-cell.is-new-widget {
    animation: dashboard-widget-insert 1.2s ease-out;
}
@keyframes dashboard-widget-insert {
    0%, 35% { outline: 4px solid color-mix(in srgb, var(--primary) 75%, transparent); transform: scale(1.012); }
    100% { outline-color: transparent; transform: none; }
}

@media (max-width: 600px) {
    .dashboard-edit-bottom-bar { left: 0; padding: 8px; }
    .dashboard-edit-bottom-bar > span { display: none; }
    /* LT „Atšaukti pakeitimą" clips mid-word in the one-row bar — icon-only,
       the button keeps its aria-label. */
    .dashboard-edit-bottom-bar .widget-undo-label { display: none; }
    .dashboard-edit-bottom-bar [data-widget-edit-undo] { flex: 0 0 auto; }
    .dashboard-edit-bottom-actions { width: 100%; }
    .dashboard-edit-bottom-actions > button {
        flex: .8 1 0;
        min-width: 0;
        height: 44px;
        min-height: 44px;
        padding: 8px 10px;
        font-size: 12.5px;
        white-space: nowrap;
    }
    .dashboard-edit-bottom-actions > [data-widget-edit-save] { flex-grow: 1.65; }
    .dashboard-widget-grid.is-editing .widget-resize-handle,
    .dashboard-widget-grid.is-editing .widget-edit-span,
    .dashboard-widget-grid.is-editing .widget-edit-break { display: none; }
    .dashboard-widget-grid.is-editing .dashboard-widget-cell { --widget-span: 12 !important; }
    body.dashboard-widget-drawer-open .main-content { padding-right: inherit; }
    body.dashboard-widget-drawer-open .dashboard-edit-bottom-bar { right: 0; bottom: 78vh; }
}
/* M15: the edit bar overlays without repeating the card's own title — the
   grip, size readout and icons are the bar; identity stays on the card. */
.widget-edit-bar .widget-edit-title {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* P6 — two-level stat header (mockup parity): thematic eyebrow above, bold
   title below, then the hero number. */
.dashboard-widget-cell .dashboard-stat-card .dashboard-stat-title {
    font-size: 15px;
    font-weight: 650;
    color: var(--text);
    margin: 2px 0 0;
    font-family: var(--font-heading);
    line-height: 1.25;
    text-transform: none;
    letter-spacing: normal;
}
/* FAB runway: the floating assistant button must never sit on the last row. */
.dashboard-widget-grid { padding-bottom: 88px; }

/* P6/M12 — one pill treatment for every widget badge (queue rows, table
   cells, info items), matching the mockup chip look. */
.dashboard-queue-badge,
.dashboard-table-badge,
.dashboard-info-badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 650;
    border-radius: 999px;
    padding: 2px 9px;
    background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* P6c (owner 2026-08-02) — header filter select and quick lookup styled to
   the band: same radii/borders as the pill group, eyebrow-style labels. */
.dashboard-kpi-header-tools .dashboard-filter-field select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface)
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6660' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")
        no-repeat right 12px center;
    padding: 8px 30px 8px 12px;
    font-size: 13.5px;
    color: var(--text);
    min-width: 170px;
}
.dashboard-claim-lookup > label {
    display: block;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
/* Owner 2026-08-02: the __control box carries the border/radius/focus ring —
   the inner input must stay chromeless or the card reads as permanently
   focused (double border). */
.dashboard-claim-lookup__control input,
.dashboard-claim-lookup input[type="search"],
.dashboard-claim-lookup input[type="text"] {
    border: 0;
    border-radius: 0;
    outline: 0;
    font-size: 13.5px;
}
.dashboard-claim-lookup__hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
}

/* ── Widget review 2026-08-02 (owner live feedback) ───────────────────────── */

/* Įmonės informacija rendered on the gray page tint — every widget card sits
   on the elevated surface. */
.dashboard-widget-cell .dashboard-info-card {
    background: var(--surface);
}

/* Aggregate company card: member-company rows (name + code · status). */
.dashboard-company-members {
    margin: 0;
    padding: 0;
    list-style: none;
}
.dashboard-company-member {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dotted var(--border);
}
.dashboard-company-member:last-child { border-bottom: 0; }
.dashboard-company-member strong {
    font-size: 13.5px;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-company-member-meta {
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

/* Contact rows: follower name + per-follower claim-count pill. */
.dashboard-contact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.dashboard-contact-badge,
.dashboard-widget-cell .dashboard-queue-badge,
.dashboard-widget-cell .dashboard-table-badge {
    flex: 0 0 auto;
    padding: 2px 10px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 11%, transparent);
    color: color-mix(in srgb, var(--primary) 82%, var(--text-primary));
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Brand pass — "too black on white": eyebrows and card headers carry the
   brand hue; counts/pills warm-tinted (above); charts already lead orange. */
.dashboard-widget-cell .dashboard-widget-eyebrow {
    color: var(--primary);
}

.dashboard-widget-cell {
    --dashboard-card-header-gap: 16px;
    --dashboard-card-header-margin: 14px;
}

.dashboard-country-flag {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    margin-inline-start: .35rem;
    min-width: 1.5rem;
}

.dashboard-country-flag__image {
    border: 1px solid color-mix(in srgb, var(--border-color, #d7dce3) 80%, transparent);
    border-radius: 2px;
    display: none;
    height: .8rem;
    /* The shipped artwork uses a 4:3 canvas, including special designs such
       as Switzerland and Nepal. Keep the complete source inside the stable
       feed-row slot instead of cropping it to that slot. */
    object-fit: contain;
    width: 1.25rem;
}

.dashboard-country-flag__fallback {
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.dashboard-country-flag.is-loaded .dashboard-country-flag__image {
    display: block;
}

.dashboard-country-flag.is-loaded .dashboard-country-flag__fallback {
    display: none;
}

.dashboard-widget-cell .activity-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .dashboard-widget-cell .activity-item {
        display: grid;
        gap: 6px 8px;
        grid-template-columns: 18px minmax(0, 1fr) auto;
    }

    .dashboard-widget-cell .activity-time {
        grid-column: 1 / -1;
        width: auto;
    }

    .dashboard-widget-cell .activity-icon {
        grid-column: 1;
    }

    .dashboard-widget-cell .activity-text {
        grid-column: 2;
    }

    .dashboard-widget-cell .dashboard-country-flag {
        align-self: start;
        grid-column: 3;
        margin-inline-start: 0;
    }
}

.dashboard-data-attribution {
    color: var(--text-muted);
    display: inline-block;
    font-size: .7rem;
    margin-top: .65rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.dashboard-widget-cell > .card,
.dashboard-widget-cell > .dashboard-stat-card,
.dashboard-widget-cell .chart-card {
    border-top: 3px solid color-mix(in srgb, var(--primary) 28%, var(--border));
}

/* Risk signals (info-items) — align the value column, tint badges, and calm
   the explanatory notes. */
.dashboard-widget-cell .dashboard-info-items dd {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dashboard-widget-cell .dashboard-info-items dd > span:first-child,
.dashboard-widget-cell .dashboard-info-items dd > a:first-child {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.dashboard-widget-cell .dashboard-info-badge {
    padding: 2px 10px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 11%, transparent);
    color: color-mix(in srgb, var(--primary) 82%, var(--text-primary));
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.dashboard-widget-cell .dashboard-info-note {
    color: var(--text-muted);
    font-size: 12px;
    font-style: normal;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dashboard-contact-badge,
    :root:not([data-theme="light"]) .dashboard-widget-cell .dashboard-queue-badge,
    :root:not([data-theme="light"]) .dashboard-widget-cell .dashboard-table-badge,
    :root:not([data-theme="light"]) .dashboard-widget-cell .dashboard-info-badge {
        background: color-mix(in srgb, var(--primary) 22%, transparent);
        color: color-mix(in srgb, var(--primary) 70%, #ffffff);
    }
}
:root[data-theme="dark"] .dashboard-contact-badge,
:root[data-theme="dark"] .dashboard-widget-cell .dashboard-queue-badge,
:root[data-theme="dark"] .dashboard-widget-cell .dashboard-table-badge,
:root[data-theme="dark"] .dashboard-widget-cell .dashboard-info-badge {
    background: color-mix(in srgb, var(--primary) 22%, transparent);
    color: color-mix(in srgb, var(--primary) 70%, #ffffff);
}

/* ── S1–S4 (owner 2026-08-02, B4): per-group accent system ──────────────────
   Color codes MEANING: each catalog group carries its own accent, applied to
   the eyebrow text (ink-safe darkened step), the card top hairline and the
   count pills. Card bodies stay white; chart palettes are untouched (identity
   stays with the entity). Ink steps are WCAG 4.5:1+ on both surfaces. */
.dashboard-widget-cell {
    --widget-accent: var(--primary);
    --widget-accent-ink: var(--accent-orange-text, #B44C09);
}
.dashboard-widget-cell[data-widget-group="client-portal"] {
    --widget-accent: #2563EB;
    --widget-accent-ink: #2563EB;
}
.dashboard-widget-cell[data-widget-group="financial"] {
    --widget-accent: #7C3AED;
    --widget-accent-ink: #6D28D9;
}
.dashboard-widget-cell[data-widget-group="reports"] {
    --widget-accent: #DB2777;
    --widget-accent-ink: #BE185D;
}
.dashboard-widget-cell[data-widget-group="policies"] {
    --widget-accent: #0F9D75;
    --widget-accent-ink: #047857;
}
.dashboard-widget-cell[data-widget-group="admin-system"] {
    --widget-accent: #64748B;
    --widget-accent-ink: #475569;
}
:root[data-theme="dark"] .dashboard-widget-cell,
:root[data-theme="dark"] .dashboard-widget-cell[data-widget-group] {
    --widget-accent-ink: color-mix(in srgb, var(--widget-accent) 60%, #ffffff);
}

/* Accent consumers — override the earlier brand-only rules. */
.dashboard-widget-cell .dashboard-widget-eyebrow {
    color: var(--widget-accent-ink);
}
.dashboard-widget-cell > .card,
.dashboard-widget-cell > .dashboard-stat-card,
.dashboard-widget-cell .chart-card {
    border-top: 3px solid color-mix(in srgb, var(--widget-accent) 32%, var(--border));
}
.dashboard-contact-badge,
.dashboard-widget-cell .dashboard-queue-badge,
.dashboard-widget-cell .dashboard-table-badge,
.dashboard-widget-cell .dashboard-info-badge {
    background: color-mix(in srgb, var(--widget-accent, var(--primary)) 11%, transparent);
    color: color-mix(in srgb, var(--widget-accent-ink, var(--primary)) 88%, var(--text-primary));
}

/* S8: deadline badge severity. */
.dashboard-widget-cell .dashboard-table-badge--warning {
    background: color-mix(in srgb, var(--accent-orange-text, #B44C09) 14%, transparent);
    color: #92400E;
}
.dashboard-widget-cell .dashboard-table-badge--danger {
    background: color-mix(in srgb, var(--danger, #DC2626) 12%, transparent);
    color: var(--danger, #DC2626);
}
:root[data-theme="dark"] .dashboard-widget-cell .dashboard-table-badge--warning { color: #FCD34D; }
:root[data-theme="dark"] .dashboard-widget-cell .dashboard-table-badge--danger { color: #FCA5A5; }

/* A5 — one semantic chip contract across every widget renderer. Legacy
   component classes remain only for layout; colour comes exclusively from
   these named tones. Accent is brand identity, never an attention state. */
.dashboard-widget-cell {
    --dashboard-chip-accent-bg: #FFF0E2;
    --dashboard-chip-accent-ink: #8A3D00;
    --dashboard-chip-ok-bg: #E7F6F1;
    --dashboard-chip-ok-ink: #0B6B50;
    --dashboard-chip-warn-bg: #FFF4CC;
    --dashboard-chip-warn-ink: #765000;
    --dashboard-chip-bad-bg: #FBEAEA;
    --dashboard-chip-bad-ink: #A5232D;
    --dashboard-chip-neutral-bg: color-mix(in srgb, var(--text-secondary) 12%, transparent);
    --dashboard-chip-neutral-ink: var(--text-secondary);
}

:root[data-theme="dark"] .dashboard-widget-cell {
    --dashboard-chip-accent-bg: rgba(239, 111, 0, .20);
    --dashboard-chip-accent-ink: #FFD0A3;
    --dashboard-chip-ok-bg: rgba(18, 173, 133, .18);
    --dashboard-chip-ok-ink: #6EE7C3;
    --dashboard-chip-warn-bg: rgba(234, 179, 8, .18);
    --dashboard-chip-warn-ink: #FDE68A;
    --dashboard-chip-bad-bg: rgba(228, 101, 95, .18);
    --dashboard-chip-bad-ink: #FCA5A5;
    --dashboard-chip-neutral-bg: rgba(148, 163, 184, .16);
    --dashboard-chip-neutral-ink: #CBD5E1;
}

.dashboard-widget-cell .dashboard-chip {
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.25;
    padding: 2px 8px;
    white-space: nowrap;
}

.dashboard-widget-cell .dashboard-chip.dashboard-chip--accent {
    background: var(--dashboard-chip-accent-bg);
    color: var(--dashboard-chip-accent-ink);
}

.dashboard-widget-cell .dashboard-chip.dashboard-chip--ok {
    background: var(--dashboard-chip-ok-bg);
    color: var(--dashboard-chip-ok-ink);
}

.dashboard-widget-cell .dashboard-chip.dashboard-chip--warn {
    background: var(--dashboard-chip-warn-bg);
    color: var(--dashboard-chip-warn-ink);
}

.dashboard-widget-cell .dashboard-chip.dashboard-chip--bad {
    background: var(--dashboard-chip-bad-bg);
    color: var(--dashboard-chip-bad-ink);
}

.dashboard-widget-cell .dashboard-chip.dashboard-chip--neutral {
    background: var(--dashboard-chip-neutral-bg);
    color: var(--dashboard-chip-neutral-ink);
}

.dashboard-widget-cell .dashboard-stat-card .dashboard-chip.dashboard-chip--ok {
    background: var(--dashboard-chip-ok-bg);
    color: var(--dashboard-chip-ok-ink);
}

.dashboard-widget-cell .dashboard-stat-card .dashboard-chip.dashboard-chip--bad {
    background: var(--dashboard-chip-bad-bg);
    color: var(--dashboard-chip-bad-ink);
}

.dashboard-widget-cell .dashboard-stat-card .dashboard-chip.dashboard-chip--neutral {
    background: var(--dashboard-chip-neutral-bg);
    color: var(--dashboard-chip-neutral-ink);
}

/* S5: the "Daliniai duomenys" banner becomes a compact header-corner chip —
   the repeated full-width banner row read as an alarm on ~15 cards. */
.dashboard-data-quality {
    position: absolute;
    top: 14px;
    right: 16px;
    margin: 0;
    padding: 2px 10px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-orange-text, #B44C09) 12%, transparent);
    color: #92400E;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-data-quality--unavailable,
.dashboard-data-quality--notCalculable {
    background: color-mix(in srgb, var(--danger, #DC2626) 10%, transparent);
    color: var(--danger, #DC2626);
}
.dashboard-data-quality .dashboard-data-quality-heading { display: inline; }
:root[data-theme="dark"] .dashboard-data-quality { color: #FCD34D; }
:root[data-theme="dark"] .dashboard-data-quality--unavailable,
:root[data-theme="dark"] .dashboard-data-quality--notCalculable { color: #FCA5A5; }

/* S7: mini pivot tables (assignment-rule effectiveness, handler scorecard)
   inherit the standard widget-table chrome instead of bare browser tables. */
.dashboard-widget-cell table:not(.dashboard-widget-table) {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
    /* --table-header-bg, not --bg: a column header must not be painted with
       the page-ground token (see site.css .data-table thead th). */
.dashboard-widget-cell table:not(.dashboard-widget-table) th {
    text-align: left;
    padding: 8px 10px;
    background: var(--table-header-bg);
    color: var(--text-secondary);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.dashboard-widget-cell table:not(.dashboard-widget-table) td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}

/* Small-multiples panel labels (round 3: dual-unit charts split into stacked
   single-axis charts; each panel is named by its series). */
.dashboard-chart-panel-label {
    display: block;
    margin: 4px 0 0;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* W1 (2026-08-03): compact typed state card — empty / unavailable /
   notConfigured render one explanatory sentence instead of a blank
   chart-sized canvas. data-widget-state on the cell carries the state. */
.dashboard-state-card .dashboard-state-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0 2px;
}
.dashboard-state-icon.fas {
    font-size: 20px;
    color: var(--text-secondary);
    margin-top: 2px;
    flex-shrink: 0;
}
.dashboard-state-card--notConfigured .dashboard-state-icon.fas { color: #f59e0b; }
.dashboard-state-card--unavailable .dashboard-state-icon.fas { color: #ef4444; }
.dashboard-state-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
}
.dashboard-state-meta {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #9ca3af;
}

/* Register P2 (2026-08-03): in-widget links wear the action token, never
   browser-default blue; focus stays visible without relying on color alone. */
.dashboard-widget-cell a.dashboard-inline-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}
.dashboard-widget-cell a.dashboard-inline-link:hover { text-decoration: underline; }
.dashboard-widget-cell a.dashboard-inline-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}