/* ──────────────────────────────────────────────────────────────────────────
 * EDS chrome — shared design-system CSS for /ems pages.
 *
 * Extracted 2026-06-01 from the inline <style> blocks in
 * modules/ems/views/default/branch.php and branch_ahu.php so the rules live
 * in one place and can't drift between views.
 *
 * Consumes the --ems-* tokens that DistributorBootstrap injects into <html>
 * via views/layouts/main.php — so this auto-themes for CCL/Tansun/etc.
 *
 * Registered globally in views/layouts/main.php (registerCssFile). All rules
 * are scoped under `.eds-page` or `body.eds-active`, so they're inert on
 * non-EDS pages — safe to load sitewide.
 *
 * Brand bar chrome (`.eds-brand-bar*`) lives in @app/views/layouts/_eds_brandbar.php
 * and is kept there (self-contained partial). Don't move it.
 * ────────────────────────────────────────────────────────────────────────── */

/* When an EDS view is rendered the body gets .eds-active (set in registerJs).
   That lets us hide the legacy layout chrome so we don't show 3 stacked
   headers (admin topbar + breadcrumb + our brand bar). */
body.eds-active #topbar { display: none !important; }
body.eds-active .breadcrumb { display: none !important; }
body.eds-active nav[aria-label="breadcrumb"] { display: none !important; }
/* Don't zero #page-content's padding-top — the brand bar's `-1.5rem`
   margin-top cancels it. Zeroing pulls the brand bar 24px off the
   viewport (clipped header on iPad, less visible on desktop). */

.eds-page { font-family: var(--bs-body-font-family); color: var(--ems-text); }

.eds-page .eds-head { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 18px; }
.eds-page .eds-head .h-left { flex: 1; }
.eds-page .eds-head h1 { font-size: 30px; font-weight: 700; margin: 0; line-height: 1.1; letter-spacing: -.015em; color: var(--ems-text); }
.eds-page .eds-head .sub { margin-top: 4px; color: var(--ems-text-secondary); font-size: 14px; }
/* 2026-05-31 iteration 4: action bar is now a SIBLING of h-left (not nested),
   so it sits beside the title on the same row rather than wrapping under
   the subtitle. flex-shrink:0 stops it collapsing if the title is long. */
.eds-page .eds-head .h-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }

.eds-page .eds-saving {
    background: linear-gradient(90deg, color-mix(in srgb, var(--ems-success) 6%, transparent), transparent 60%);
    border: 1px solid var(--ems-border);
    border-left: 4px solid var(--ems-success);
    border-radius: 14px;
    padding: 14px 22px;
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 14px;
    box-shadow: 0 1px 0 rgba(20,30,50,.04), 0 8px 20px -14px rgba(20,30,50,.18);
}
.eds-page .eds-saving .label { font-size: 11px; color: var(--ems-text-secondary); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.eds-page .eds-saving .figure { font-weight: 700; color: var(--ems-success); font-size: 24px; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.eds-page .eds-saving .small { font-size: 12px; color: var(--ems-text-secondary); }
.eds-page .eds-saving .spacer { flex: 1; }

.eds-page .eds-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.eds-page .eds-kpi {
    background: var(--ems-surface); border: 1px solid var(--ems-border);
    border-radius: 14px; padding: 16px 18px;
    box-shadow: 0 1px 0 rgba(20,30,50,.04), 0 8px 20px -14px rgba(20,30,50,.18);
    text-decoration: none; color: inherit;
    transition: transform .08s, box-shadow .08s;
}
.eds-page .eds-kpi:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(20,30,50,.04), 0 14px 24px -14px rgba(20,30,50,.28); color: inherit; }
.eds-page .eds-kpi .label { font-size: 11px; color: var(--ems-text-secondary); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; }
.eds-page .eds-kpi .value { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 30px; line-height: 1; letter-spacing: -.02em; color: var(--ems-text); }
.eds-page .eds-kpi .sub { font-size: 12px; color: var(--ems-text-secondary); margin-top: 4px; }

.eds-page .eds-quick-actions {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    background: var(--ems-surface); border: 1px solid var(--ems-border);
    border-radius: 14px; padding: 10px 14px;
    box-shadow: 0 1px 0 rgba(20,30,50,.04), 0 8px 20px -14px rgba(20,30,50,.18);
    margin-bottom: 14px;
}
.eds-page .eds-quick-actions .label {
    display: flex; align-items: center;
    font-size: 10.5px; color: var(--ems-text-muted); letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
    padding-right: 10px; border-right: 1px solid var(--ems-border); margin-right: 4px;
}
.eds-page .eds-card {
    background: var(--ems-surface); border: 1px solid var(--ems-border);
    border-radius: 14px; padding: 18px 22px;
    box-shadow: 0 1px 0 rgba(20,30,50,.04), 0 8px 20px -14px rgba(20,30,50,.18);
    margin-bottom: 14px;
}
.eds-page .eds-card-head {
    display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px;
    padding-bottom: 10px; border-bottom: 1px solid var(--ems-border);
}
.eds-page .eds-card-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ems-text); }
.eds-page .eds-card-head .spacer { flex: 1; }
.eds-page .eds-card-head .meta { font-size: 11px; color: var(--ems-text-muted); letter-spacing: .06em; }

.eds-page .eds-zones-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.eds-page .eds-zones-table thead th {
    padding: 10px 12px; background: var(--ems-surface-alt);
    text-align: left; font-size: 10.5px; color: var(--ems-text-secondary);
    letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
    border-bottom: 1px solid var(--ems-border);
}
.eds-page .eds-zones-table thead th.num { text-align: right; }
.eds-page .eds-zones-table thead th.ctr { text-align: center; }
.eds-page .eds-zones-table tbody tr { border-bottom: 1px solid var(--ems-border); cursor: pointer; transition: background .08s; }
.eds-page .eds-zones-table tbody tr:last-child { border-bottom: 0; }
.eds-page .eds-zones-table tbody tr:hover { background: var(--ems-surface-alt); }
/* Stretched-link hosts: the row's name-cell anchor uses Bootstrap
   .stretched-link so right-click / ctrl-click / middle-click all work
   natively. Requires position: relative on the row so the anchor's
   ::after sizes to the row (not the cell). 2026-06-05 — replaces JS
   click handlers in branches.php / branch.php / branch_ahu.php /
   corporation/index.php. Modern browsers (Chrome 115+, Firefox 84+,
   Safari 16+) honour `position` on <tr>; fine for an internal tool. */
.eds-page .eds-zones-table tbody tr.zone-row,
.eds-page .eds-branches-table tbody tr.brow,
.eds-page .eds-branches-table tbody tr.brow-corp td.corp-head { position: relative; }
/* Bare .zone-row / .brow used outside the table wrappers. */
tr.zone-row, tr.brow { position: relative; }
.eds-page .eds-zones-table td { padding: 10px 12px; vertical-align: middle; }
.eds-page .eds-zones-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.eds-page .eds-zones-table td.ctr { text-align: center; }
.eds-page .eds-zones-table td .zname { font-weight: 600; color: var(--ems-text); }
.eds-page .eds-zones-table td .zname a { color: inherit; text-decoration: none; }
.eds-page .eds-zones-table td .zsub { font-size: 11px; color: var(--ems-text-muted); margin-top: 1px; }

/* Sync dot — replaces the old "On device" badge column (2026-05-31 per Ben).
   Same data (z.pending_sync from /ems/default/branch-overrides); just shown
   as a 10px coloured circle in the leftmost cell. */
.eds-page .zone-sync-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    background: var(--ems-text-muted); vertical-align: middle;
    box-shadow: 0 0 0 2px rgba(0,0,0,.04);   /* subtle halo so the dot reads on hover */
}
.eds-page .zone-sync-dot--synced  { background: var(--ems-success); }
.eds-page .zone-sync-dot--pending { background: var(--ems-warning); }
.eds-page .zone-sync-dot--error   { background: var(--ems-danger);  }
.eds-page .zone-sync-dot--unknown { background: var(--ems-text-muted); }
.eds-page .eds-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    background: var(--ems-surface-alt); color: var(--ems-text-secondary);
}
.eds-page .eds-pill.success { background: color-mix(in srgb, var(--ems-success) 14%, transparent); color: var(--ems-success); }
.eds-page .eds-pill.warn    { background: color-mix(in srgb, var(--ems-warning) 14%, transparent); color: var(--ems-warning); }
.eds-page .eds-pill.danger  { background: color-mix(in srgb, var(--ems-danger) 14%, transparent); color: var(--ems-danger); }
.eds-page .eds-pill.info    { background: color-mix(in srgb, var(--ems-secondary) 14%, transparent); color: var(--ems-secondary); }
.eds-page .eds-pill.confidence-high { background: color-mix(in srgb, var(--ems-success) 12%, transparent); color: var(--ems-success); }
.eds-page .eds-pill.confidence-med  { background: color-mix(in srgb, var(--ems-secondary) 12%, transparent); color: var(--ems-secondary); }
.eds-page .eds-pill.confidence-low  { background: color-mix(in srgb, var(--ems-warning) 12%, transparent); color: var(--ems-warning); }

.eds-page .eds-segmented {
    display: inline-flex; border: 1px solid var(--ems-border); border-radius: 8px; overflow: hidden;
    background: var(--ems-surface);
}
.eds-page .eds-segmented .btn {
    border-radius: 0; border: 0; border-right: 1px solid var(--ems-border);
    padding: 5px 12px; font-size: 12px; font-weight: 600;
    background: transparent; color: var(--ems-text-secondary);
}
.eds-page .eds-segmented .btn:last-child { border-right: 0; }
.eds-page .eds-segmented .btn.active { background: var(--ems-text); color: #fff; }

/* 2026-05-31: harmonised with .eds-card-head so building + ARMM card heads
   match the rest of the cards (white background, padding, bottom border).
   Was using surface-alt grey which read as a different visual language. */
.eds-page .eds-building-head {
    display: flex; align-items: baseline; gap: 12px;
    padding: 16px 22px 14px; background: var(--ems-surface);
    border-bottom: 1px solid var(--ems-border);
}
.eds-page .eds-building-head i.bi { color: var(--ems-text-secondary); font-size: 14px; align-self: center; }
.eds-page .eds-building-head h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ems-text); }
.eds-page .eds-building-head .spacer { flex: 1; }
.eds-page .eds-building-head .meta { font-size: 11px; color: var(--ems-text-muted); letter-spacing: .06em; }
.eds-page .eds-armm-row {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 14px;
    padding: 10px 18px; align-items: center; font-size: 12.5px;
    border-bottom: 1px solid var(--ems-border);
}
.eds-page .eds-armm-row:last-child { border-bottom: 0; }
.eds-page .eds-armm-row code { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 11px; background: var(--ems-surface-alt); padding: 1px 6px; border-radius: 3px; }

/* ──────────────────────────────────────────────────────────────────────────
 * AHU-specific chrome — only used by /ems/default/branch_ahu.php.
 * Kept in this file so the AHU view doesn't need its own inline <style>.
 * ────────────────────────────────────────────────────────────────────────── */

/* ── AHU card — matches eds-card surface + softer header/footer ─────────── */
.eds-page .eds-ahu-card {
    background: var(--ems-surface);
    border: 1px solid var(--ems-border);
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    display: flex; flex-direction: column;
    box-shadow: 0 1px 0 rgba(20,30,50,.04), 0 8px 20px -14px rgba(20,30,50,.18);
    transition: box-shadow .12s, transform .12s;
}
.eds-page .eds-ahu-card:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(20,30,50,.04), 0 14px 24px -14px rgba(20,30,50,.28); }
.eds-page .eds-ahu-card.is-maint {
    border-color: var(--ems-warning);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ems-warning) 30%, transparent), 0 8px 20px -14px rgba(20,30,50,.18);
}
.eds-page .eds-ahu-card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    background: var(--ems-surface);
    border-bottom: 1px solid var(--ems-border);
    gap: 8px;
}
.eds-page .eds-ahu-card-head > div:first-child a {
    color: var(--ems-text); text-decoration: none; font-weight: 700; font-size: 14px;
}
.eds-page .eds-ahu-card-head > div:first-child a:hover { color: var(--ems-primary); }
.eds-page .eds-ahu-card-body {
    padding: 12px 14px;
    flex: 1; display: flex; flex-direction: column; gap: 10px;
}
.eds-page .eds-ahu-card-body .btn-group .btn {
    border-radius: 8px !important;
    margin-right: 4px;
    font-weight: 600;
}
.eds-page .eds-ahu-card-body .btn-group .btn:last-child { margin-right: 0; }
.eds-page .eds-ahu-card-foot {
    display: flex; gap: 6px; justify-content: flex-end;
    padding: 8px 12px;
    background: var(--ems-surface-alt);
    border-top: 1px solid var(--ems-border);
}
.eds-page .eds-ahu-card-foot .btn-xs {
    font-size: 11px; padding: 3px 8px; border-radius: 6px;
}

/* Zone-row chrome — shared by branch.php and branch_ahu.php (both render
   <tr class="zone-row"> rows that are click-to-navigate). Same hover/focus
   ring as the eds-zones-table tbody tr rule above; kept distinct because
   branch_ahu.php styles bare .zone-row (not nested under .eds-zones-table). */
.zone-row:hover { background: var(--ems-surface-alt) !important; }
.zone-row:focus { outline: 2px solid var(--ems-primary); outline-offset: -2px; }