/*
 * Styles for the EU Portal SLA Dashboard (Catalyst:views/eu-sla-dashboard/*): every rule is
 * scoped under .eu-sla-dashboard or an esd- prefixed class, so nothing here leaks into the
 * rest of the portal and nothing in the portal theme is overridden outside the dashboard.
 *
 * Theming. Colours come from the CatAwesome theme's CSS variables (panel, text, link, state
 * and border tokens). The theme does not define priority, chart or label tokens, so those are
 * declared locally: the light values on .eu-sla-dashboard and the dark values on
 * html.dark .eu-sla-dashboard, which is the theme's own dark-mode hook. The two blocks list
 * the same custom properties so a reviewer can compare them side by side.
 *
 * Panel look. Panels reuse Bootstrap's .panel markup so the theme's panel background and
 * border apply, then add the theme's record-panel drop shadow (1px 1px 3px rgba(0,0,0,.04))
 * and a 10px radius from --panel-border-radius. The theme paints a white background on
 * .panel-heading, which would square off the rounded top corners, so the heading gets a
 * matching top radius. Bootstrap's .panel-body clearfix pseudo-elements become empty flex
 * items in the column-flex bodies used here and add an unwanted gap below the heading, so
 * they are disabled.
 *
 * Layout. The page is a column of rows: a KPI grid, full-width panels, and "pair" rows that
 * sit side by side above about 900px of content width and stack below it (flex-basis 440px
 * with wrapping). Grids use auto-fit with minimum column widths rather than breakpoints, so
 * the layout adapts to the side-navigation and to narrow viewports without media queries;
 * the only media queries are the side-navbar header bleed at 768px and print.
 *
 * Print (Export PDF). The print block hides the navigation, header band, picker and tour,
 * removes page padding and shadows, keeps panels and rows from splitting across pages, and
 * replaces the blurred "no data" placeholder (blur may not print) with a bordered empty box
 * and its "No Data" label.
 *
 * Typography and motion: weights 400/500/600 only; transitions are colour-only at 150ms.
 */

/* ── Theme tokens (light) ────────────────────────────────────────────────── */

.eu-sla-dashboard {
    /* Tokens the theme lacks: priority colours, blocked/over-target, done/up. */
    --sh-priority-critical: #e16e90;
    --sh-priority-high: #e4a133;
    --sh-priority-medium: #618cda;
    --sh-priority-low: #a4a4a4;
    --sh-blocked: #e16e90;
    --sh-stage-done: #6fd685;
    --text-label-color: var(--text-muted-color);
    --text-panel-heading-color: var(--text-color);

    /* Dashboard-only tokens: allowance bar segments, SLA badge, day-strip states, the
       "with client" holder badge, warning badges, the tour backdrop, focus ring and radius. */
    --esd-approved: #618cda;
    --esd-unestimated: #e4a133;
    --esd-sla-green: #79c37f;
    --esd-up: #6fd685;
    --esd-degraded: #e4a133;
    --esd-down: #e16e90;
    --esd-holder-client-bg: rgba(228, 161, 51, .14);
    --esd-holder-client-text: #a8670f;
    --esd-warning-bg: rgba(228, 161, 51, .16);
    --esd-warning-text: #a8670f;
    --esd-spot-backdrop: rgba(219, 219, 219, .5);
    --esd-focus: 0 0 0 1px #66afe9, 0 0 8px rgba(102, 175, 233, .6);
    --esd-radius: var(--panel-border-radius, 6px);

    /* Positioning context for the picker and tour containers. */
    position: relative;
    font-size: 14px;
    line-height: 1.571;
    color: var(--text-color);
}

/* ── Theme tokens (dark) ─────────────────────────────────────────────────── */

/* Same token names as above. Priority and chart hues are unchanged (they sit on panel
   backgrounds in both modes); the tinted badges switch to lighter text on darker tints and
   the tour backdrop becomes a dark veil. */
html.dark .eu-sla-dashboard {
    --sh-priority-critical: #e16e90;
    --sh-priority-high: #e4a133;
    --sh-priority-medium: #618cda;
    --sh-priority-low: #a4a4a4;
    --sh-blocked: #e16e90;
    --sh-stage-done: #6fd685;
    --text-label-color: var(--text-muted-color);
    --text-panel-heading-color: var(--text-color);

    --esd-holder-client-bg: rgba(228, 161, 51, .18);
    --esd-holder-client-text: #e4a133;
    --esd-warning-bg: rgba(228, 161, 51, .2);
    --esd-warning-text: #e4a133;
    --esd-spot-backdrop: rgba(0, 0, 0, .55);
}

/* ── Base elements ───────────────────────────────────────────────────────── */

/* Links: medium weight, no underline, theme link colours. */
.eu-sla-dashboard a {
    color: var(--link-color);
    font-weight: 500;
    text-decoration: none;
}

.eu-sla-dashboard a:hover,
.eu-sla-dashboard a:focus {
    color: var(--link-hover-color);
    text-decoration: none;
}

/* One focus ring for every button and link, keyboard-only (focus-visible). */
.eu-sla-dashboard button:focus-visible,
.eu-sla-dashboard a:focus-visible {
    outline: none;
    box-shadow: var(--esd-focus);
}

/* ── Header band ─────────────────────────────────────────────────────────── */

/* Full-width band holding Tour and the period controls, right-aligned, above the content. */
.esd-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px 24px;
    min-height: 64px;
    padding: 12px 0;
    box-sizing: border-box;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--panel-default-border, var(--default-border-color));
    box-shadow: var(--sh-band-shadow, 0 1px 3px rgba(0, 0, 0, .06));
    position: relative;
    z-index: 3;
}

/* With the side navigation, bleed the band to the page edges so its border and shadow run
   edge to edge like the theme's own header. */
@media screen and (min-width: 768px) {
    body[data-navbar="side"] .eu-sla-dashboard > .esd-header {
        margin: 0 calc(-1 * var(--sh-page-x, 24px));
        padding: 12px var(--sh-page-x, 24px);
    }
}

.esd-header-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

/* ── Staff toolbar bar (Account page tab) ───────────────────────────────── */

/* On the Account page the record root carries the theme's `.detail[data-sh-detail]` marker, so
   the theme's one-row header owns the band above (title, Detail / SLA Dashboard tabs, Star and
   Follow). The dashboard header then becomes a toolbar bar under that band, matching the Project
   Plan toolbar the theme draws: 48px tall, panel background, panel border with the lighter
   bottom edge, panel radius, 16px below the band. Period controls sit on the left, Export PDF on
   the right. */
.esd-header.esd-header-bar {
    justify-content: space-between;
    min-height: 48px;
    margin: 16px 0 0;
    padding: 8px 12px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-default-border, var(--default-border-color));
    border-bottom-color: var(--default-border-color);
    border-radius: var(--panel-border-radius, var(--esd-radius));
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .04);
}

/* The bar must not bleed to the page edges like the portal band does. */
@media screen and (min-width: 768px) {
    body[data-navbar="side"] .eu-sla-dashboard > .esd-header.esd-header-bar {
        margin: 16px 0 0;
        padding: 8px 12px;
    }
}

/* Spread the controls across the bar: the period group left, Export PDF right. */
.esd-header-bar .esd-header-controls {
    flex: 1 1 auto;
    justify-content: space-between;
    margin-left: 0;
}

/* The bar already provides the gap below the band; keep the 16px rhythm to the first panel row. */
.detail[data-sh-detail] > .eu-sla-dashboard > .esd-main {
    padding-top: 16px;
}

.esd-header-divider {
    width: 1px;
    height: 20px;
    background: var(--default-border-color);
}

/* Period controls are the anchor for the absolutely positioned picker popover. */
.esd-period {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Header buttons: 32px tall, icon + text, theme radius. Icon-only buttons are square; the
   month button has a fixed minimum width so the label change does not shift the controls. */
.eu-sla-dashboard .esd-btn-header {
    height: 32px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1;
    border-radius: var(--border-radius, 6px);
    transition: background-color .15s ease-in-out, color .15s ease-in-out, border-color .15s ease-in-out;
}

.eu-sla-dashboard .esd-btn-icon {
    width: 32px;
    padding: 0;
    justify-content: center;
}

.eu-sla-dashboard .esd-btn-month {
    min-width: 150px;
    justify-content: center;
}

.eu-sla-dashboard .esd-btn-month.active {
    background: var(--btn-default-hover-bg, var(--state-default-bg));
}

.eu-sla-dashboard .esd-btn-month .esd-caret {
    font-size: 10px;
    color: var(--text-muted-color);
}

/* Ghost button (Tour, tour close): borderless until hovered. */
.eu-sla-dashboard .esd-btn-ghost,
.eu-sla-dashboard .esd-btn-ghost:focus {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    color: var(--text-gray-color);
}

.eu-sla-dashboard .esd-btn-ghost:hover {
    background: var(--table-bg-accent);
    color: var(--text-color);
}

.eu-sla-dashboard .esd-btn-header .far,
.eu-sla-dashboard .esd-btn-header .fas {
    font-size: 12px;
}

/* ── Main layout ─────────────────────────────────────────────────────────── */

/* Vertical stack of rows with a 16px rhythm. */
.esd-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: var(--sh-page-y, 20px) 0 40px;
}

.esd-state {
    padding-top: 32px;
    text-align: center;
}

/* While a month request is in flight the four month-dependent panels dim; the page view
   toggles the class, so no re-render is needed. */
.esd-main.is-month-loading [data-panel="kpis"],
.esd-main.is-month-loading [data-panel="cases-by-priority"],
.esd-main.is-month-loading [data-panel="sla-hours"],
.esd-main.is-month-loading [data-panel="site-uptime"] {
    opacity: .6;
    transition: opacity .15s ease-in-out;
}

/* Side-by-side pair that wraps to a single column when either item would drop below 440px.
   Items stretch so both panels share the taller height. */
.esd-row-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
}

.esd-row-pair-item {
    flex: 1 1 440px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* A panel marked esd-panel-fill grows to fill its stretched container. */
.esd-row-pair-item > .esd-panel-fill,
.esd-panel-container > .esd-panel-fill {
    flex: 1;
    height: 100%;
}

/* ── Panel anatomy ───────────────────────────────────────────────────────── */

/* Panel shell: theme border and background, 10px radius, the theme's record-panel shadow,
   column flex so the body can grow. */
.eu-sla-dashboard .esd-panel {
    margin: 0;
    box-sizing: border-box;
    border-radius: var(--esd-radius);
    border: 1px solid var(--panel-default-border, var(--default-border-color));
    background: var(--panel-bg);
    /* Same drop shadow as the theme's record panels. */
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .04);
    display: flex;
    flex-direction: column;
}

/* The theme paints a background on .panel-heading; round its top corners to match the panel. */
.eu-sla-dashboard .esd-panel > .esd-panel-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px 0;
    margin: 0;
    background: var(--panel-bg);
    border: 0;
    border-radius: var(--esd-radius) var(--esd-radius) 0 0;
}

/* Bootstrap's .panel-body clearfix pseudo-elements become empty flex items in column layouts and
   add a full gap above the first child; the panels' flex layout needs no clearfix. */
.eu-sla-dashboard .esd-panel-body::before,
.eu-sla-dashboard .esd-panel-body::after {
    display: none;
}

/* Heading title and the muted right-hand "action" text (counts, month). */
.eu-sla-dashboard .esd-panel-title {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-panel-heading-color);
}

.esd-panel-action {
    font-size: 12px;
    color: var(--text-muted-color);
    white-space: nowrap;
}

/* Body padding is 14px below the heading (the heading carries the top 16px) and 20px at the
   sides and bottom; KPI tiles have no heading and use an even 16px. */
.eu-sla-dashboard .esd-panel-body {
    padding: 14px 20px 20px;
    flex: 1;
}

.eu-sla-dashboard .esd-kpi > .esd-kpi-body {
    padding: 16px 20px;
}

/* Vertical stacks with a fixed gap, and a space-between row. */
.esd-stack-8 { display: flex; flex-direction: column; gap: 8px; }
.esd-stack-12 { display: flex; flex-direction: column; gap: 12px; }
.esd-stack-16 { display: flex; flex-direction: column; gap: 16px; }
.esd-stack-20 { display: flex; flex-direction: column; gap: 20px; }

.esd-between {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

/* ── Text utilities ──────────────────────────────────────────────────────── */

/* Small single-purpose classes used throughout the templates: meta (12px muted), secondary
   (grey), subheading, section title, value weights, danger text, alignment, empty-state line. */
.esd-meta { font-size: 12px; color: var(--text-muted-color); }
.esd-muted { color: var(--text-muted-color); }
.esd-secondary { color: var(--text-gray-color); }
.esd-secondary-13 { font-size: 13px; color: var(--text-gray-color); }
.esd-subheading { font-size: 13px; font-weight: 500; color: var(--text-gray-color); }
.esd-section-title { font-size: 14px; font-weight: 500; color: var(--text-color); }
.esd-value-14 { font-size: 14px; font-weight: 500; }
.esd-value-500 { font-weight: 500; }
.esd-danger-text { color: var(--state-danger-text); }
.esd-right { text-align: right; }
.esd-link-13 { font-size: 13px; }
.esd-push-right { margin-left: auto; }
.esd-empty { padding: 8px 0; color: var(--text-muted-color); }

/* Single-line truncation; min-width: 0 lets it shrink inside flex and grid tracks. */
.esd-ellipsis {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The large figure used by KPI tiles, Open Now and the SLA Hours headline. */
.esd-kpi-value {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
}

/* Screen-reader-only text (the "Monitoring data unavailable for {Month}" sentence). */
.esd-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */

/* Base badge: tinted background with matching text, 12px semibold, never wraps. Tinted
   variants map to the theme's state colours (and the dashboard's warning tint); solid
   variants are white text on a priority or status colour. */
.esd-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--state-default-text, var(--text-gray-color));
    background: var(--state-default-bg);
}

.esd-badge .far,
.esd-badge .fas { font-size: 9px; }

.esd-badge-default { color: var(--state-default-text, var(--text-gray-color)); background: var(--state-default-bg); }
.esd-badge-primary { color: var(--state-primary-text); background: var(--state-primary-bg); }
.esd-badge-success { color: var(--state-success-text); background: var(--state-success-bg); }
.esd-badge-danger { color: var(--state-danger-text); background: var(--state-danger-bg); }
.esd-badge-warning { color: var(--esd-warning-text); background: var(--esd-warning-bg); }

/* Holder badges on the Open Cases tile: Catalyst in the primary tint, client in amber. */
.esd-badge-holder-catalyst { color: var(--state-primary-text); background: var(--state-primary-bg); }
.esd-badge-holder-client { color: var(--esd-holder-client-text); background: var(--esd-holder-client-bg); }

/* Solid badges: SLA (green), Action (amber), and the four priority colours. */
.esd-badge-solid { color: #fff; }
.esd-badge-solid.esd-badge-sla { background: var(--esd-sla-green); }
.esd-badge-solid.esd-badge-action { background: var(--esd-unestimated); }
.esd-badge-solid.esd-priority-critical { background: var(--sh-priority-critical); }
.esd-badge-solid.esd-priority-high { background: var(--sh-priority-high); }
.esd-badge-solid.esd-priority-medium { background: var(--sh-priority-medium); }
.esd-badge-solid.esd-priority-low { background: var(--sh-priority-low); }
.esd-badge-solid.esd-priority-other { background: var(--label-default-bg, #707683); }

/* ── KPI row ─────────────────────────────────────────────────────────────── */

/* Five equal tiles that reflow as the width allows. The 200px minimum is the largest value
   that still fits all five on one row beside the 220px side navigation at 1440px wide; a
   larger minimum wraps the fifth tile onto its own row. */
.esd-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.esd-kpi-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.esd-kpi-label {
    font-size: 13px;
    color: var(--text-label-color);
}

.esd-kpi-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.esd-kpi-note {
    font-size: 12px;
    color: var(--text-muted-color);
}

/* Open Cases tile: two holder columns, each a figure above its badge. */
.esd-kpi-holders {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 2px;
}

.esd-kpi-holder {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* ── Cases by Priority ───────────────────────────────────────────────────── */

/* One bordered tile per priority, reflowing at a 220px minimum. */
.esd-priority-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.esd-priority-tile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--default-border-color);
    border-radius: 6px;
}

.esd-priority-tile-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 20px;
}

.esd-priority-open {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* Lower half of a tile, separated by a rule: responses count, average, bar, target line. */
.esd-priority-responses {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--default-border-color);
}

/* Response bar: a 4px track, a fill coloured by priority (danger when over target) and a
   2px target marker that overhangs the track. Fill width and marker position come from the
   view as inline percentages. */
.esd-bar-track {
    position: relative;
    height: 4px;
    margin: 4px 0;
    border-radius: 2px;
    background: var(--state-default-bg);
}

.esd-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 2px;
    transition: background-color .15s ease-in-out;
}

.esd-bar-fill.esd-priority-critical { background: var(--sh-priority-critical); }
.esd-bar-fill.esd-priority-high { background: var(--sh-priority-high); }
.esd-bar-fill.esd-priority-medium { background: var(--sh-priority-medium); }
.esd-bar-fill.esd-priority-low { background: var(--sh-priority-low); }
.esd-bar-fill.esd-priority-other { background: var(--text-gray-color); }
.esd-bar-fill.is-over { background: var(--sh-blocked); }

.esd-bar-marker {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 12px;
    background: var(--text-gray-color);
}

/* Footer row: totals, legend items and the right-pushed "View Cases" link. */
.esd-priority-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 14px;
}

.esd-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.esd-legend-13 { font-size: 13px; gap: 8px 20px; }

.esd-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.esd-legend-marker { width: 2px; height: 12px; background: var(--text-gray-color); }
.esd-legend-dot { width: 6px; height: 6px; }
.esd-legend-dot-over { background: var(--sh-blocked); }

/* ── SLA Hours ───────────────────────────────────────────────────────────── */

/* Headline: big remaining figure with its caption and the over-by note on one baseline. */
.esd-headline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

/* Allowance bar: segments laid out by inline percentage widths with a 2px gap. Remaining is
   a hollow segment (inset border) so it reads as unused capacity. */
.esd-allowance-bar {
    display: flex;
    gap: 2px;
    height: 12px;
}

.esd-allowance-seg {
    border-radius: 4px;
    min-width: 2px;
}

.esd-seg-approved { background: var(--esd-approved); }
.esd-seg-unestimated { background: var(--esd-unestimated); }
.esd-seg-remaining { background: var(--state-default-bg); box-shadow: inset 0 0 0 1px var(--default-border-color); }

.esd-swatch {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* Approved Estimates and Unestimated Work lists side by side, stacking below 240px each. */
.esd-hours-lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px 24px;
}

.esd-list {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.esd-list-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--default-border-color);
}

/* List row: 84px for the Case number (wide enough for "#C-123456"), flexible name, 48px hours. */
.esd-hours-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 48px;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--default-border-color);
}

/* ── Site Uptime and Response ────────────────────────────────────────────── */

/* Detailed layout: one .esd-site block per site (head, day strip, response bars, axis). */
.esd-site {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.esd-site-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.esd-site-link { flex: 1; min-width: 0; }

/* 6px status markers: green with no incidents, red with incidents, hollow neutral when the
   site has no usable monitoring data (never red for missing data). */
.esd-status-square {
    flex: none;
    width: 6px;
    height: 6px;
}

.esd-status-dot {
    flex: none;
    width: 6px;
    height: 6px;
}

.esd-status-square.is-ok,
.esd-status-dot.is-ok { background: var(--sh-stage-done); }
.esd-status-square.is-down,
.esd-status-dot.is-down { background: var(--sh-blocked); }
.esd-status-square.is-neutral,
.esd-status-dot.is-neutral { background: var(--state-default-bg); box-shadow: inset 0 0 0 1px var(--btn-default-border); }

.esd-site-stats {
    display: flex;
    gap: 20px;
}

.esd-site-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Day strip: one flexible cell per day of the month. 20px tall in the detailed layout, 12px
   in the compact table. Cell colour encodes the day state; future days are the empty track
   colour and no-data days add a hollow border so they differ from future days. Placeholder
   cells (unavailable sites) are a flat grey and are blurred by the wrapper. */
.esd-day-strip {
    display: flex;
    gap: 2px;
    height: 20px;
}

.esd-day-strip-sm {
    height: 12px;
    gap: 1px;
}

.esd-day-cell {
    flex: 1;
    min-width: 0;
    border-radius: 2px;
    background: var(--state-default-bg);
}

.esd-day-cell.is-up { background: var(--esd-up); }
.esd-day-cell.is-degraded { background: var(--esd-degraded); }
.esd-day-cell.is-down { background: var(--esd-down); }
.esd-day-cell.is-future { background: var(--state-default-bg); }
.esd-day-cell.is-nodata { background: var(--state-default-bg); box-shadow: inset 0 0 0 1px var(--btn-default-border); }
.esd-day-cell.is-placeholder { background: var(--btn-default-border); box-shadow: none; }

/* Daily response bars: bottom-aligned, heights are inline percentages of the site's busiest
   day. A bar highlights in the link colour on hover; placeholder bars do not. */
.esd-response-bars {
    display: flex;
    gap: 2px;
    height: 32px;
    align-items: flex-end;
}

.esd-response-bar {
    flex: 1;
    min-width: 0;
    border-radius: 2px 2px 0 0;
    background: var(--btn-default-border);
    transition: background-color .15s ease-in-out;
}

.esd-response-bar:hover { background: var(--link-color); }
.esd-response-bar.is-placeholder:hover { background: var(--btn-default-border); }

.esd-site-axis {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

/* Unavailable treatment: the placeholder graph is blurred and dimmed, cannot be clicked or
   selected, and sits under a centred "No Data" label. The overlay ignores pointer events so
   the site link in the row above remains usable. */
.esd-placeholder { position: relative; }

.esd-blur {
    filter: blur(3px);
    opacity: .5;
    pointer-events: none;
    user-select: none;
}

.esd-nodata-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.esd-nodata-label {
    padding: 2px 10px;
    border-radius: 4px;
    background: var(--panel-bg);
    border: 1px solid var(--default-border-color);
    font-size: 12px;
    color: var(--text-muted-color);
}

/* Legend swatches for Up / Degraded / Down and the response-bar colour. */
.esd-swatch-8 {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.esd-swatch-8.is-up { background: var(--esd-up); }
.esd-swatch-8.is-degraded { background: var(--esd-degraded); }
.esd-swatch-8.is-down { background: var(--esd-down); }
.esd-swatch-8.is-bar { background: var(--btn-default-border); }

/* Compact table (more than four sites): name, small day strip, uptime, average ms. The body
   is a positioning context for the panel-wide "No Data" overlay. */
.esd-site-table { display: flex; flex-direction: column; }
.esd-site-table-body { position: relative; }

.esd-site-table-head,
.esd-site-table-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(90px, 1.2fr) 68px 64px;
    gap: 12px;
    align-items: center;
}

.esd-site-table-head {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--default-border-color);
}

.esd-site-table-row {
    padding: 7px 0;
    border-bottom: 1px solid var(--default-border-color);
    transition: background-color .15s ease-in-out;
}

.esd-site-table-row:hover { background: var(--table-bg-accent); }

.esd-site-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.esd-site-table-foot {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 8px;
}

/* ── Awaiting Approval ───────────────────────────────────────────────────── */

/* Underline tabs: the active tab's 2px bottom border overlaps the list's top rule. */
.esd-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--default-border-color);
}

.eu-sla-dashboard .esd-tab {
    padding: 8px 0;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-gray-color);
    transition: color .15s ease-in-out, border-color .15s ease-in-out;
}

.eu-sla-dashboard .esd-tab:hover { color: var(--text-color); }

.eu-sla-dashboard .esd-tab.active {
    color: var(--text-color);
    font-weight: 500;
    border-bottom-color: var(--text-color);
}

.esd-section-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* Lists are rule-separated rows; the last row in a group or list drops its bottom rule. */
.esd-approval-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--default-border-color);
}

.esd-approval-group {
    display: flex;
    flex-direction: column;
}

/* Group row: number + name on the left, note + roll-up badge on the right, wrapping when
   narrow. The whole row is a pointer target for expanding. */
.esd-approval-group-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 4px 16px;
    padding: 7px 8px;
    border-bottom: 1px solid var(--default-border-color);
    cursor: pointer;
    transition: background-color .15s ease-in-out;
}

.esd-approval-group-row:hover { background: var(--table-bg-accent); }

/* The toggle is the keyboard target; the row around it is the pointer target. */
.eu-sla-dashboard .esd-approval-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.esd-approval-group-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 220px;
}

.esd-approval-group-side {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.esd-chevron {
    width: 10px;
    font-size: 10px;
    color: var(--text-muted-color);
    text-align: center;
}

/* Expanded item: a whole-row link indented under the group's chevron, with name + meta,
   an hours column and a status badge column. */
.eu-sla-dashboard .esd-approval-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 6px 8px 6px 26px;
    border-bottom: 1px solid var(--default-border-color);
    color: inherit;
    font-weight: 400;
    transition: background-color .15s ease-in-out;
}

.eu-sla-dashboard .esd-approval-item:hover {
    background: var(--table-bg-accent);
    color: inherit;
}

.esd-link-text { color: var(--link-color); font-weight: 500; }
.eu-sla-dashboard .esd-approval-item:hover .esd-link-text { color: var(--link-hover-color); }

.esd-approval-item-main {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.esd-approval-item-hours {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 64px;
}

.esd-approval-item-status {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-width: 150px;
}

.esd-approval-group:last-child > :last-child { border-bottom: 0; }

/* Quote row: name + meta, parent, net amount, and the badge link; columns wrap when narrow. */
.esd-quote-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--default-border-color);
    transition: background-color .15s ease-in-out;
}

.esd-quote-row:hover { background: var(--table-bg-accent); }
.esd-quote-row:last-child { border-bottom: 0; }

.esd-quote-main,
.esd-quote-parent {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 200px;
}

.esd-quote-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 96px;
}

.esd-view-all {
    padding: 2px 8px;
    align-self: flex-start;
}

/* ── Stream / My Cases ───────────────────────────────────────────────────── */

/* The stream is the core stream list view (views/stream/record/list) rendered inside the
   panel; its notes keep the core styling, so only the container is styled here. */
.esd-stream { display: flex; flex-direction: column; }

/* My Cases: a four-column grid with a 420px minimum that scrolls sideways in a narrow panel
   rather than wrapping the badge columns. Column widths: number, name, status, priority. */
.esd-cases-scroll {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
}

.esd-cases-head,
.esd-cases-row {
    min-width: 420px;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 96px 72px;
    gap: 12px;
    align-items: center;
}

.esd-cases-head {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--default-border-color);
}

.esd-cases-row {
    padding: 8px 0;
    border-bottom: 1px solid var(--default-border-color);
    transition: background-color .15s ease-in-out;
}

.esd-cases-row:hover { background: var(--table-bg-accent); }
.esd-cases-row:last-child { border-bottom: 0; }

/* ── Month picker ────────────────────────────────────────────────────────── */

/* Popover anchored below the period controls, above the header's stacking context, never
   wider than the viewport. */
.esd-picker-container {
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 21;
    max-width: calc(100vw - 32px);
}

/* Dropdown-styled card with a title and a 3 × 4 month grid. */
.esd-picker {
    width: 252px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .11);
}

.esd-picker-title { font-size: 13px; }

.esd-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

/* Month cells are plain buttons; the selected month inverts to the navigation rail colour. */
.eu-sla-dashboard .esd-picker-cell {
    padding: 5px 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-color);
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.eu-sla-dashboard .esd-picker-cell:hover { background: var(--table-bg-accent); }

.eu-sla-dashboard .esd-picker-cell.is-selected {
    background: var(--sh-rail-bg, #2a3349);
    color: #fff;
    font-weight: 600;
}

/* ── Tour ────────────────────────────────────────────────────────────────── */

/* Three fixed layers above Bootstrap's modal range: an invisible full-screen backdrop that
   closes on click (1060), the spotlight (1061) and the popover (1062). */
.esd-tour-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060;
}

/* Spotlight: a bordered, rounded box placed over the target by the view. The 9999px spread
   box-shadow in the backdrop colour veils everything outside the box without a second
   element; pointer events pass through to the page. */
.esd-tour-spot {
    position: fixed;
    z-index: 1061;
    pointer-events: none;
    border-radius: 12px;
    border: 1px solid #66afe9;
    box-shadow: 0 0 8px rgba(102, 175, 233, .6), 0 0 0 9999px var(--esd-spot-backdrop);
}

/* Popover: a modal-styled card positioned by the view; no outline because it receives
   programmatic focus on every step. */
.esd-tour-popover {
    position: fixed;
    z-index: 1062;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--modal-content-bg, var(--panel-bg));
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    outline: none;
}

.esd-tour-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.esd-tour-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.esd-tour-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-color);
}

.eu-sla-dashboard .esd-tour-close {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.esd-tour-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.571;
    color: var(--text-gray-color);
    text-wrap: pretty;
}

.esd-tour-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.esd-tour-dots {
    display: flex;
    gap: 2px;
}

/* Step dots: 14px hit targets drawing a 6px dot; the active dot uses the rail colour. */
.eu-sla-dashboard .esd-tour-dot {
    width: 14px;
    height: 14px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.eu-sla-dashboard .esd-tour-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--state-default-bg);
    transition: background-color .15s ease-in-out;
}

.eu-sla-dashboard .esd-tour-dot.is-active::before { background: var(--sh-rail-bg, #2a3349); }

.esd-tour-buttons {
    display: flex;
    gap: 8px;
}

/* ── Print / Export PDF ──────────────────────────────────────────────────── */

/* Export PDF is window.print(). Hide chrome and interactive overlays, strip page padding and
   panel shadows, force colour printing, keep panels/tiles/rows on one page, and swap the
   blurred placeholder for a bordered box with its "No Data" label. */
@media print {
    #navbar,
    #header,
    #footer,
    .navbar,
    .side-nav,
    .collapsed-modal-bar,
    .esd-header,
    .esd-picker-container,
    .esd-tour {
        display: none !important;
    }

    body,
    body[data-navbar="side"] {
        padding: 0 !important;
        background: #fff !important;
    }

    body[data-navbar="side"].has-navbar > #content.content,
    #content.content {
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
    }

    .eu-sla-dashboard {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        background: #fff;
    }

    .esd-main { padding: 0; }

    .eu-sla-dashboard .esd-panel {
        break-inside: avoid;
        box-shadow: none;
    }

    .esd-priority-tile,
    .esd-site,
    .esd-approval-group,
    .esd-quote-row {
        break-inside: avoid;
    }

    /* Blur may not print: swap the placeholder graph for an empty bordered box with "No Data". */
    .esd-blur { visibility: hidden; }

    .esd-placeholder,
    .esd-site-table-body.is-unavailable {
        border: 1px solid var(--default-border-color);
        border-radius: 4px;
    }

    .esd-nodata-label {
        border-color: var(--default-border-color);
    }
}

/* ── Overrides ───────────────────────────────────────────────────────────── */

/* Case numbers such as "#C-123456" stay on one line in their 84px column, truncating with an
   ellipsis if a longer number ever appears, instead of wrapping onto two lines. */
.eu-sla-dashboard .esd-hours-row > .esd-secondary:first-child,
.eu-sla-dashboard .esd-cases-row > .esd-secondary:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}