/*
 * EchoCAD Night — Shell Components & Bootstrap Re-skin
 * -----------------------------------------------------
 * Component-level CSS for every PHP page that uses the unified shell.
 * Every value resolves to a token from tokens.css. No hardcoded
 * colors / spacing / shadows in here.
 *
 * Layout:
 *   1. Base: body, links, headings, scrollbars
 *   2. Bootstrap re-skin (rebind --bs-* under body.ec-shell + a small
 *      set of targeted overrides for things --bs-* doesn't reach).
 *      This is what lets ~73 admin pages inherit the dark theme
 *      without any markup edits.
 *   3. Shell skeleton: topbar, sidebar, main
 *   4. Components: page-title, breadcrumb, card, KPI, pill, count-chip,
 *      row-icon, segmented control, quick-actions, activity feed,
 *      live-strip, callout, form-grid, toolbar, pager, mobile-bottom-nav
 *   5. Status pills, priority badges
 *   6. Toast, empty-state
 *   7. Auth shell (login)
 */


/* ============================================================
 * 1. Base
 * ============================================================ */

body.ec-shell {
    margin: 0;
    min-height: 100vh;
}

body.ec-shell h1,
body.ec-shell h2,
body.ec-shell h3,
body.ec-shell h4,
body.ec-shell h5,
body.ec-shell h6 {
    color: var(--ec-fg-0);
    font-weight: var(--ec-font-weight-semibold);
    margin: 0;
    letter-spacing: -0.01em;
}

body.ec-shell ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
body.ec-shell ::-webkit-scrollbar-track {
    background: transparent;
}
body.ec-shell ::-webkit-scrollbar-thumb {
    background: var(--ec-line-2);
    border-radius: var(--ec-radius-pill);
    border: 2px solid var(--ec-bg-1);
}
body.ec-shell ::-webkit-scrollbar-thumb:hover {
    background: var(--ec-fg-4);
}
body.ec-shell {
    scrollbar-width: thin;
    scrollbar-color: var(--ec-line-2) transparent;
}

/* Material Symbols default sizing — opsz/fill axis tuned for UI use. */
body.ec-shell .material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
    vertical-align: middle;
    user-select: none;
    line-height: 1;
}
body.ec-shell .ms-fill,
body.ec-shell .material-symbols-outlined.ms-fill {
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}


/* ============================================================
 * 2. Bootstrap re-skin
 * ------------------------------------------------------------
 * Rebinding --bs-* under body.ec-shell takes care of the bulk of
 * Bootstrap's component coloring (cards, alerts, buttons, badges,
 * lists, popovers, navs, etc.). The selectors below the variable
 * block patch the things that Bootstrap renders with hardcoded
 * background-color/color rules instead of variables.
 * ============================================================ */

body.ec-shell {
    --bs-body-bg:           var(--ec-color-bg);
    --bs-body-color:        var(--ec-color-text);
    --bs-body-color-rgb:    250, 250, 250;
    --bs-body-bg-rgb:       0, 0, 0;
    --bs-emphasis-color:    var(--ec-fg-0);
    --bs-emphasis-color-rgb: 250, 250, 250;
    --bs-secondary-color:   var(--ec-fg-2);
    --bs-secondary-bg:      var(--ec-bg-3);
    --bs-secondary-bg-rgb:  24, 24, 28;
    --bs-tertiary-color:    var(--ec-fg-3);
    --bs-tertiary-bg:       var(--ec-bg-3);
    --bs-tertiary-bg-rgb:   24, 24, 28;

    --bs-link-color:        var(--ec-blue-hi);
    --bs-link-color-rgb:    59, 130, 246;
    --bs-link-hover-color:  var(--ec-blue);

    --bs-border-color:           var(--ec-line-1);
    --bs-border-color-translucent: var(--ec-line-1);

    --bs-primary:   var(--ec-blue);
    --bs-secondary: var(--ec-fg-3);
    --bs-success:   var(--ec-green);
    --bs-warning:   var(--ec-yellow);
    --bs-danger:    var(--ec-red);
    --bs-info:      var(--ec-blue);
    --bs-light:     var(--ec-bg-3);
    --bs-dark:      var(--ec-bg-1);

    --bs-primary-rgb:   37, 99, 235;
    --bs-secondary-rgb: 113, 113, 122;
    --bs-success-rgb:   22, 163, 74;
    --bs-warning-rgb:   234, 179, 8;
    --bs-danger-rgb:    220, 38, 38;
    --bs-info-rgb:      37, 99, 235;
    --bs-light-rgb:     24, 24, 28;
    --bs-dark-rgb:      10, 10, 11;

    --bs-primary-bg-subtle:   rgba(37, 99, 235, 0.12);
    --bs-success-bg-subtle:   rgba(22, 163, 74, 0.12);
    --bs-warning-bg-subtle:   rgba(234, 179, 8, 0.12);
    --bs-danger-bg-subtle:    rgba(220, 38, 38, 0.12);
    --bs-info-bg-subtle:      rgba(37, 99, 235, 0.12);
    --bs-secondary-bg-subtle: var(--ec-bg-3);
    --bs-light-bg-subtle:     var(--ec-bg-2);
    --bs-dark-bg-subtle:      var(--ec-bg-1);

    --bs-primary-border-subtle: rgba(37, 99, 235, 0.3);
    --bs-success-border-subtle: rgba(22, 163, 74, 0.3);
    --bs-warning-border-subtle: rgba(234, 179, 8, 0.3);
    --bs-danger-border-subtle:  rgba(220, 38, 38, 0.3);
    --bs-info-border-subtle:    rgba(37, 99, 235, 0.3);

    --bs-primary-text-emphasis: var(--ec-blue-hi);
    --bs-success-text-emphasis: var(--ec-green-hi);
    --bs-warning-text-emphasis: var(--ec-yellow-hi);
    --bs-danger-text-emphasis:  var(--ec-red-hi);
    --bs-info-text-emphasis:    var(--ec-blue-hi);

    --bs-heading-color:     var(--ec-fg-0);
    --bs-code-color:        var(--ec-yellow-hi);
    --bs-highlight-bg:      rgba(234, 179, 8, 0.25);
    --bs-form-valid-color:  var(--ec-green-hi);
    --bs-form-valid-border-color: var(--ec-green);
    --bs-form-invalid-color: var(--ec-red-hi);
    --bs-form-invalid-border-color: var(--ec-red);

    --bs-body-font-family:  var(--ec-font-family-base);
    --bs-body-font-size:    var(--ec-font-size-base);
    --bs-body-line-height:  var(--ec-line-height-base);
    --bs-font-monospace:    var(--ec-font-family-mono);

    --bs-border-radius:    var(--ec-radius-md);
    --bs-border-radius-sm: var(--ec-radius-sm);
    --bs-border-radius-lg: var(--ec-radius-lg);
}

/* Card */
body.ec-shell .card {
    background-color: var(--ec-bg-2);
    border-color: var(--ec-line-1);
    color: var(--ec-fg-1);
    box-shadow: var(--ec-shadow-card);
}
body.ec-shell .card-header,
body.ec-shell .card-footer {
    background-color: transparent;
    border-color: var(--ec-line-1);
    color: var(--ec-fg-0);
}

/* Form controls — Bootstrap hardcodes #fff/#dee2e6 so we have to
 * patch these explicitly. */
body.ec-shell .form-control,
body.ec-shell .form-select {
    background-color: var(--ec-bg-2);
    border-color: var(--ec-line-1);
    color: var(--ec-fg-0);
}
body.ec-shell .form-control::placeholder { color: var(--ec-fg-4); }
body.ec-shell .form-control:focus,
body.ec-shell .form-select:focus {
    background-color: var(--ec-bg-2);
    border-color: var(--ec-blue);
    color: var(--ec-fg-0);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
body.ec-shell .form-control:disabled,
body.ec-shell .form-control[readonly] {
    background-color: var(--ec-bg-3);
    color: var(--ec-fg-3);
}
body.ec-shell .form-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2371717a'><path d='M5.5 7.5L10 12l4.5-4.5'/></svg>");
}
body.ec-shell .form-check-input {
    background-color: var(--ec-bg-2);
    border-color: var(--ec-line-2);
}
body.ec-shell .form-check-input:checked {
    background-color: var(--ec-blue);
    border-color: var(--ec-blue);
}
body.ec-shell .form-label,
body.ec-shell .col-form-label {
    color: var(--ec-fg-1);
    font-weight: var(--ec-font-weight-semibold);
}
body.ec-shell .form-text {
    color: var(--ec-fg-3);
}
body.ec-shell .input-group-text {
    background-color: var(--ec-bg-3);
    border-color: var(--ec-line-1);
    color: var(--ec-fg-2);
}

/* Buttons — keep Bootstrap class names; restyle via tokens. */
body.ec-shell .btn {
    font-weight: var(--ec-font-weight-medium);
    border-radius: var(--ec-radius-sm);
    transition: background-color .15s, border-color .15s, color .15s, transform .05s;
}
body.ec-shell .btn:active { transform: translateY(1px); }
body.ec-shell .btn-primary {
    background-color: var(--ec-blue);
    border-color: var(--ec-blue);
    color: #fff;
}
body.ec-shell .btn-primary:hover,
body.ec-shell .btn-primary:focus {
    background-color: var(--ec-blue-hi);
    border-color: var(--ec-blue-hi);
    color: #fff;
}
body.ec-shell .btn-success {
    background-color: var(--ec-green);
    border-color: var(--ec-green);
    color: #fff;
}
body.ec-shell .btn-success:hover {
    background-color: var(--ec-green-hi);
    border-color: var(--ec-green-hi);
    color: #fff;
}
body.ec-shell .btn-danger {
    background-color: var(--ec-red);
    border-color: var(--ec-red);
    color: #fff;
}
body.ec-shell .btn-danger:hover {
    background-color: var(--ec-red-hi);
    border-color: var(--ec-red-hi);
    color: #fff;
}
body.ec-shell .btn-warning {
    background-color: var(--ec-yellow);
    border-color: var(--ec-yellow);
    color: #1a1a1a;
}
body.ec-shell .btn-warning:hover {
    background-color: var(--ec-yellow-hi);
    border-color: var(--ec-yellow-hi);
    color: #1a1a1a;
}
body.ec-shell .btn-secondary {
    background-color: var(--ec-bg-3);
    border-color: var(--ec-line-1);
    color: var(--ec-fg-1);
}
body.ec-shell .btn-secondary:hover {
    background-color: var(--ec-bg-4);
    border-color: var(--ec-line-2);
    color: var(--ec-fg-0);
}
body.ec-shell .btn-light {
    background-color: var(--ec-bg-3);
    border-color: var(--ec-line-1);
    color: var(--ec-fg-1);
}
body.ec-shell .btn-dark {
    background-color: var(--ec-bg-1);
    border-color: var(--ec-line-2);
    color: var(--ec-fg-0);
}
body.ec-shell .btn-outline-primary {
    color: var(--ec-blue-hi);
    border-color: var(--ec-blue);
    background: transparent;
}
body.ec-shell .btn-outline-primary:hover {
    background-color: var(--ec-blue);
    color: #fff;
}
body.ec-shell .btn-outline-secondary {
    color: var(--ec-fg-1);
    border-color: var(--ec-line-2);
    background: transparent;
}
body.ec-shell .btn-outline-secondary:hover {
    background-color: var(--ec-bg-3);
    color: var(--ec-fg-0);
}
body.ec-shell .btn-link {
    color: var(--ec-blue-hi);
}
body.ec-shell .btn-link:hover {
    color: var(--ec-blue);
}

/* Tables */
body.ec-shell .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ec-fg-1);
    --bs-table-border-color: var(--ec-line-1);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-striped-color: var(--ec-fg-1);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-color: var(--ec-fg-0);
    color: var(--ec-fg-1);
    border-color: var(--ec-line-1);
}
body.ec-shell .table > thead {
    background-color: var(--ec-bg-3);
    color: var(--ec-fg-3);
}
body.ec-shell .table > thead th {
    text-transform: uppercase;
    font-size: var(--ec-font-size-xs);
    letter-spacing: 0.06em;
    font-weight: var(--ec-font-weight-semibold);
    color: var(--ec-fg-3);
    border-bottom: 1px solid var(--ec-line-1);
    background-color: var(--ec-bg-3);
}
body.ec-shell .table > :not(caption) > * > * {
    background-color: transparent;
    color: inherit;
    border-bottom-color: var(--ec-line-1);
}

/* Dropdowns */
body.ec-shell .dropdown-menu {
    background-color: var(--ec-bg-2);
    border-color: var(--ec-line-1);
    color: var(--ec-fg-1);
    box-shadow: var(--ec-shadow-md);
}
body.ec-shell .dropdown-item {
    color: var(--ec-fg-1);
}
body.ec-shell .dropdown-item:hover,
body.ec-shell .dropdown-item:focus {
    background-color: var(--ec-bg-3);
    color: var(--ec-fg-0);
}
body.ec-shell .dropdown-item.active,
body.ec-shell .dropdown-item:active {
    background-color: var(--ec-blue);
    color: #fff;
}
body.ec-shell .dropdown-divider {
    border-top-color: var(--ec-line-1);
}
body.ec-shell .dropdown-header {
    color: var(--ec-fg-3);
}

/* Modals */
body.ec-shell .modal-content {
    background-color: var(--ec-bg-2);
    border-color: var(--ec-line-1);
    color: var(--ec-fg-1);
    box-shadow: var(--ec-shadow-lg);
}
body.ec-shell .modal-header,
body.ec-shell .modal-footer {
    border-color: var(--ec-line-1);
}
body.ec-shell .modal-backdrop.show {
    opacity: 0.7;
}
body.ec-shell .btn-close {
    filter: invert(1) grayscale(100%) brightness(2);
}

/* Alerts */
body.ec-shell .alert {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--ec-radius-md);
}
body.ec-shell .alert-primary,
body.ec-shell .alert-info {
    background-color: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.3);
    color: var(--ec-blue-hi);
}
body.ec-shell .alert-success {
    background-color: rgba(22, 163, 74, 0.08);
    border-color: rgba(22, 163, 74, 0.3);
    color: var(--ec-green-hi);
}
body.ec-shell .alert-warning {
    background-color: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.3);
    color: var(--ec-yellow-hi);
}
body.ec-shell .alert-danger {
    background-color: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.3);
    color: var(--ec-red-hi);
}
body.ec-shell .alert-secondary,
body.ec-shell .alert-light,
body.ec-shell .alert-dark {
    background-color: var(--ec-bg-3);
    border-color: var(--ec-line-1);
    color: var(--ec-fg-1);
}

/* Badges */
body.ec-shell .badge {
    font-weight: var(--ec-font-weight-semibold);
    letter-spacing: 0.02em;
}
body.ec-shell .badge.text-bg-primary,
body.ec-shell .badge.bg-primary { background-color: var(--ec-blue) !important; color: #fff !important; }
body.ec-shell .badge.text-bg-success,
body.ec-shell .badge.bg-success { background-color: var(--ec-green) !important; color: #fff !important; }
body.ec-shell .badge.text-bg-warning,
body.ec-shell .badge.bg-warning { background-color: var(--ec-yellow) !important; color: #1a1a1a !important; }
body.ec-shell .badge.text-bg-danger,
body.ec-shell .badge.bg-danger  { background-color: var(--ec-red) !important; color: #fff !important; }
body.ec-shell .badge.text-bg-info,
body.ec-shell .badge.bg-info    { background-color: var(--ec-blue) !important; color: #fff !important; }
body.ec-shell .badge.text-bg-secondary,
body.ec-shell .badge.bg-secondary { background-color: var(--ec-bg-3) !important; color: var(--ec-fg-1) !important; }

/* Nav tabs / pills */
body.ec-shell .nav-tabs {
    border-bottom-color: var(--ec-line-1);
}
body.ec-shell .nav-tabs .nav-link {
    color: var(--ec-fg-2);
    border: 1px solid transparent;
    border-bottom: 0;
}
body.ec-shell .nav-tabs .nav-link:hover {
    color: var(--ec-fg-0);
    border-color: var(--ec-line-1) var(--ec-line-1) transparent;
    isolation: isolate;
}
body.ec-shell .nav-tabs .nav-link.active {
    background-color: var(--ec-bg-2);
    border-color: var(--ec-line-1) var(--ec-line-1) var(--ec-bg-2);
    color: var(--ec-fg-0);
}
body.ec-shell .nav-pills .nav-link {
    color: var(--ec-fg-2);
}
body.ec-shell .nav-pills .nav-link.active,
body.ec-shell .nav-pills .show > .nav-link {
    background-color: var(--ec-blue);
    color: #fff;
}

/* Pagination */
body.ec-shell .pagination .page-link {
    background-color: transparent;
    border-color: var(--ec-line-1);
    color: var(--ec-fg-1);
}
body.ec-shell .pagination .page-link:hover {
    background-color: var(--ec-bg-3);
    border-color: var(--ec-line-2);
    color: var(--ec-fg-0);
}
body.ec-shell .pagination .page-item.active .page-link {
    background-color: var(--ec-blue);
    border-color: var(--ec-blue);
    color: #fff;
}
body.ec-shell .pagination .page-item.disabled .page-link {
    background-color: transparent;
    border-color: var(--ec-line-1);
    color: var(--ec-fg-4);
}

/* List groups */
body.ec-shell .list-group {
    background-color: var(--ec-bg-2);
    border-color: var(--ec-line-1);
}
body.ec-shell .list-group-item {
    background-color: transparent;
    border-color: var(--ec-line-1);
    color: var(--ec-fg-1);
}
body.ec-shell .list-group-item.active {
    background-color: var(--ec-blue);
    border-color: var(--ec-blue);
    color: #fff;
}

/* Offcanvas (used by mobile sidebar) */
body.ec-shell .offcanvas {
    background-color: var(--ec-bg-1);
    color: var(--ec-fg-1);
    border-color: var(--ec-line-1);
}

/* Bootstrap text-muted everywhere should read as fg-3, not Bootstrap's
 * default mid-gray which disappears on black. */
body.ec-shell .text-muted {
    color: var(--ec-fg-3) !important;
}
body.ec-shell .text-secondary {
    color: var(--ec-fg-2) !important;
}

/* Borders */
body.ec-shell .border,
body.ec-shell .border-top,
body.ec-shell .border-end,
body.ec-shell .border-bottom,
body.ec-shell .border-start {
    border-color: var(--ec-line-1) !important;
}

/* Background utilities */
body.ec-shell .bg-body { background-color: var(--ec-color-bg) !important; }
body.ec-shell .bg-light { background-color: var(--ec-bg-3) !important; }
body.ec-shell .bg-dark { background-color: var(--ec-bg-1) !important; }
body.ec-shell .bg-white { background-color: var(--ec-bg-2) !important; }


/* ============================================================
 * 3. Shell skeleton
 * ============================================================ */

/* ---------- Topbar ---------- */
.ec-shell .ec-topbar {
    position: sticky;
    top: 0;
    z-index: var(--ec-z-topbar);
    height: var(--ec-topbar-height);
    background-color: var(--ec-bg-1);
    border-bottom: 1px solid var(--ec-line-1);
    display: flex;
    align-items: center;
    gap: var(--ec-space-3);
    padding: 0 var(--ec-space-4);
}

.ec-shell .ec-topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--ec-space-2);
    font-weight: var(--ec-font-weight-bold);
    color: var(--ec-fg-0);
    text-decoration: none;
    letter-spacing: -0.01em;
    font-size: var(--ec-font-size-md);
    min-width: calc(var(--ec-sidebar-width) - 16px);
    padding-right: var(--ec-space-3);
    height: 100%;
    margin-left: -16px;
    padding-left: 20px;
    border-right: 1px solid var(--ec-line-1);
}
.ec-shell .ec-topbar__brand:hover {
    color: var(--ec-fg-0);
    text-decoration: none;
}

.ec-shell .ec-topbar__brand-logo {
    height: 26px;
    width: auto;
    display: block;
    object-fit: contain;
}

.ec-shell .ec-topbar__brand-divider {
    width: 1px;
    align-self: stretch;
    background: var(--ec-line-1);
    margin: 8px 4px 8px 6px;
}

.ec-shell .ec-topbar__brand-caption {
    color: var(--ec-fg-3);
    font-size: var(--ec-font-size-sm);
    font-weight: var(--ec-font-weight-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ec-shell .ec-topbar__title {
    font-size: var(--ec-font-size-md);
    font-weight: var(--ec-font-weight-medium);
    color: var(--ec-fg-2);
    display: flex;
    align-items: center;
    gap: var(--ec-space-2);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ec-shell .ec-topbar__title .material-symbols-outlined {
    font-size: 16px;
    color: var(--ec-fg-3);
}

.ec-shell .ec-topbar__search {
    flex: 1;
    max-width: 420px;
    margin: 0 var(--ec-space-4);
    position: relative;
}
.ec-shell .ec-topbar__search input {
    width: 100%;
    height: 34px;
    background: var(--ec-bg-2);
    border: 1px solid var(--ec-line-1);
    border-radius: var(--ec-radius-md);
    color: var(--ec-fg-0);
    font: inherit;
    padding: 0 10px 0 34px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.ec-shell .ec-topbar__search input::placeholder {
    color: var(--ec-fg-4);
}
.ec-shell .ec-topbar__search input:focus {
    border-color: var(--ec-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.ec-shell .ec-topbar__search .ec-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ec-fg-3);
    font-size: 18px;
    pointer-events: none;
}
.ec-shell .ec-topbar__search .ec-kbd {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--ec-font-family-mono);
    font-size: 10px;
    color: var(--ec-fg-3);
    border: 1px solid var(--ec-line-2);
    background: var(--ec-bg-1);
    border-radius: 4px;
    padding: 1px 5px;
}

.ec-shell .ec-topbar__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--ec-space-1);
}

.ec-shell .ec-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--ec-radius-md);
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--ec-fg-2);
    border: 1px solid transparent;
    cursor: pointer;
    position: relative;
    transition: background-color .15s, color .15s, border-color .15s;
    text-decoration: none;
    padding: 0;
}
.ec-shell .ec-icon-btn:hover,
.ec-shell .ec-icon-btn:focus {
    background-color: var(--ec-bg-2);
    color: var(--ec-fg-0);
    border-color: transparent;
}
.ec-shell .ec-icon-btn .material-symbols-outlined {
    font-size: 20px;
}
.ec-shell .ec-icon-btn .ec-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ec-red);
    box-shadow: 0 0 0 2px var(--ec-bg-1);
}

.ec-shell .ec-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ec-blue);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: var(--ec-font-weight-semibold);
    flex-shrink: 0;
}

.ec-shell .ec-user-chip {
    display: flex;
    align-items: center;
    gap: var(--ec-space-2);
    padding: 4px 10px 4px 4px;
    border-radius: 20px;
    border: 1px solid var(--ec-line-1);
    background: var(--ec-bg-2);
    color: var(--ec-fg-1);
    cursor: pointer;
    text-decoration: none;
}
.ec-shell .ec-user-chip:hover,
.ec-shell .ec-user-chip:focus {
    background: var(--ec-bg-3);
    color: var(--ec-fg-0);
    text-decoration: none;
}
.ec-shell .ec-user-chip__name {
    font-size: var(--ec-font-size-sm);
    font-weight: var(--ec-font-weight-medium);
    color: var(--ec-fg-1);
}
.ec-shell .ec-user-chip .material-symbols-outlined {
    font-size: 16px;
    color: var(--ec-fg-3);
}

/* ---------- Shell body / sidebar / main ---------- */
.ec-shell .ec-shell-body {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - var(--ec-topbar-height));
}

/* Sidebar grows naturally to match the page height (no internal
 * scroll, no sticky viewport-locked rail). The flex parent
 * .ec-shell-body has align-items: stretch so the sidebar's column
 * automatically extends to whatever height the main content sets,
 * giving the visual "rail runs the whole length of the page" the
 * user expects. */
.ec-shell .ec-sidebar {
    width: var(--ec-sidebar-width);
    flex-shrink: 0;
    background-color: var(--ec-bg-1);
    color: var(--ec-color-sidebar-text);
    border-right: 1px solid var(--ec-line-1);
    padding: 12px 8px 24px;
}

/* Green-gradient "Open EchoCAD" hero CTA at the top of the sidebar. */
.ec-shell .ec-sidebar__hero {
    margin: 6px 4px 10px;
    background: linear-gradient(135deg, var(--ec-green) 0%, #059669 100%);
    border-radius: var(--ec-radius-md);
    padding: 10px 12px;
    color: #fff !important;
    font-weight: var(--ec-font-weight-semibold);
    font-size: var(--ec-font-size-sm);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
    text-decoration: none !important;
    cursor: pointer;
    transition: filter .15s;
}
.ec-shell .ec-sidebar__hero:hover {
    filter: brightness(1.05);
    color: #fff !important;
}
.ec-shell .ec-sidebar__hero .material-symbols-outlined {
    color: #fff;
    font-size: 18px;
}
.ec-shell .ec-sidebar__hero-arrow {
    margin-left: auto;
    font-size: 16px;
    opacity: 0.85;
}

.ec-shell .ec-sidebar__section + .ec-sidebar__section {
    margin-top: 14px;
}

.ec-shell .ec-sidebar__section-label {
    font-size: 10px;
    font-weight: var(--ec-font-weight-semibold);
    color: var(--ec-fg-4) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 12px 6px;
}

.ec-shell .ec-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Nested sub-list shown under an active parent. Indent matches the
 * parent icon position; the items themselves are smaller and have
 * no leading icon — they're sub-section anchors, not standalone
 * destinations. */
.ec-shell .ec-sidebar__sublist {
    list-style: none;
    margin: 2px 0 6px 12px;
    padding: 0 0 0 10px;
    border-left: 1px solid var(--ec-line-1);
}
.ec-shell .ec-sidebar__link--child {
    padding: 5px 10px;
    font-size: var(--ec-font-size-xs);
    font-weight: var(--ec-font-weight-medium);
    color: var(--ec-fg-3) !important;
    border-radius: 5px;
}
.ec-shell .ec-sidebar__link--child:hover,
.ec-shell .ec-sidebar__link--child:focus {
    background-color: transparent;
    color: var(--ec-fg-1) !important;
}
.ec-shell .ec-sidebar__link--child .material-symbols-outlined {
    font-size: 14px;
}
.ec-shell .ec-sidebar__link--child.is-active {
    background-color: transparent;
    color: var(--ec-blue-hi) !important;
    box-shadow: none;
}
.ec-shell .ec-sidebar__link--child.is-active::before {
    display: none;
}

/* !important on every sidebar-link color rule below: defense in depth
 * so a future Bootstrap or per-page <a> rule can't darken the
 * navigation back into invisibility. */
.ec-shell .ec-sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 6px;
    color: var(--ec-fg-2) !important;
    font-size: var(--ec-font-size-sm);
    font-weight: var(--ec-font-weight-medium);
    text-decoration: none !important;
    margin: 1px 0;
    position: relative;
    transition: background-color .12s, color .12s;
}
.ec-shell .ec-sidebar__link:hover,
.ec-shell .ec-sidebar__link:focus {
    background-color: var(--ec-bg-2);
    color: var(--ec-fg-0) !important;
}
.ec-shell .ec-sidebar__link.is-active {
    background-color: var(--ec-bg-3);
    color: var(--ec-fg-0) !important;
    box-shadow: inset 0 0 0 1px var(--ec-line-2);
}
.ec-shell .ec-sidebar__link.is-active::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 6px;
    bottom: 6px;
    width: 4px;
    background: var(--ec-blue);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.45);
}
.ec-shell .ec-sidebar__link .material-symbols-outlined {
    font-size: 18px;
    color: var(--ec-fg-3);
}
.ec-shell .ec-sidebar__link:hover .material-symbols-outlined,
.ec-shell .ec-sidebar__link.is-active .material-symbols-outlined {
    color: var(--ec-fg-0);
}

.ec-shell .ec-sidebar__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ec-shell .ec-sidebar__count {
    margin-left: auto;
    font-size: 11px;
    color: var(--ec-fg-4);
    font-variant-numeric: tabular-nums;
}

.ec-shell .ec-sidebar__badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: var(--ec-font-weight-semibold);
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--ec-red);
    color: #fff;
}

/* Off-canvas variant of the sidebar (Bootstrap offcanvas inner). */
.ec-offcanvas-sidebar {
    background-color: var(--ec-bg-1);
    color: var(--ec-color-sidebar-text);
}
.ec-offcanvas-sidebar .ec-sidebar__link {
    color: var(--ec-color-sidebar-text) !important;
}

.ec-shell .ec-main {
    flex: 1;
    min-width: 0;
    padding: 20px 28px 60px;
    background-color: var(--ec-color-bg);
}

.ec-shell .ec-mobile-menu-btn {
    display: none;
}


/* ============================================================
 * 4. Components
 * ============================================================ */

/* ---------- Page title / page-header / breadcrumb ---------- */
.ec-shell .ec-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0 0 var(--ec-space-2);
    padding: 0;
    font-size: var(--ec-font-size-sm);
    color: var(--ec-fg-3);
}
.ec-shell .ec-breadcrumb__item a {
    color: var(--ec-fg-3);
    text-decoration: none;
}
.ec-shell .ec-breadcrumb__item a:hover {
    color: var(--ec-fg-0);
    text-decoration: underline;
}
.ec-shell .ec-breadcrumb__item + .ec-breadcrumb__item::before {
    content: 'chevron_right';
    font-family: 'Material Symbols Outlined';
    font-size: 14px;
    color: var(--ec-fg-4);
    margin-right: 2px;
    vertical-align: middle;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}
.ec-shell .ec-breadcrumb__item.is-current {
    color: var(--ec-fg-1);
    font-weight: var(--ec-font-weight-medium);
}

.ec-shell .ec-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ec-space-4);
    margin-bottom: var(--ec-space-5);
    flex-wrap: wrap;
}

.ec-shell .ec-page-title {
    font-size: var(--ec-font-size-2xl);
    font-weight: var(--ec-font-weight-bold);
    color: var(--ec-fg-0);
    letter-spacing: -0.02em;
    margin: 0;
}
.ec-shell .ec-page-subtitle {
    color: var(--ec-fg-3);
    font-size: var(--ec-font-size-sm);
    margin-top: 2px;
}

.ec-shell .ec-section-title {
    font-size: var(--ec-font-size-xl);
    font-weight: var(--ec-font-weight-semibold);
    margin: var(--ec-space-5) 0 var(--ec-space-3);
    padding-bottom: var(--ec-space-2);
    border-bottom: 1px solid var(--ec-color-border-subtle);
    color: var(--ec-fg-0);
}

/* ---------- Card (project-owned, uses .ec-card not .card) ---------- */
.ec-shell .ec-card {
    position: relative;
    background-color: var(--ec-bg-2);
    border: 1px solid var(--ec-line-1);
    border-radius: var(--ec-radius-lg);
    box-shadow: var(--ec-shadow-card);
    margin-bottom: var(--ec-space-4);
}
.ec-shell .ec-card__header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ec-line-1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ec-space-3);
}
.ec-shell .ec-card__title {
    font-size: var(--ec-font-size-base);
    font-weight: var(--ec-font-weight-semibold);
    color: var(--ec-fg-0);
    margin: 0;
}
.ec-shell .ec-card__body {
    padding: 18px;
}
.ec-shell .ec-card__body.no-pad {
    padding: 0;
}
.ec-shell .ec-card__footer {
    padding: 14px 18px;
    border-top: 1px solid var(--ec-line-1);
    background-color: transparent;
    border-bottom-left-radius: var(--ec-radius-lg);
    border-bottom-right-radius: var(--ec-radius-lg);
}

/* ---------- Grid ---------- */
.ec-shell .ec-grid {
    display: grid;
    gap: 14px;
}
.ec-shell .ec-grid--2  { grid-template-columns: 2fr 1fr; }
.ec-shell .ec-grid--3  { grid-template-columns: 1fr 2fr; }
.ec-shell .ec-grid--half { grid-template-columns: 1fr 1fr; }

/* ---------- KPI cards ---------- */
.ec-shell .ec-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: var(--ec-space-5);
}
.ec-shell .ec-kpi {
    background: var(--ec-bg-2);
    border: 1px solid var(--ec-line-1);
    border-radius: var(--ec-radius-lg);
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    transition: border-color .15s;
}
.ec-shell .ec-kpi:hover {
    border-color: var(--ec-line-2);
}
.ec-shell .ec-kpi__accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ec-blue);
}
.ec-shell .ec-kpi__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ec-fg-2);
    font-size: var(--ec-font-size-sm);
    font-weight: var(--ec-font-weight-medium);
    margin-bottom: 10px;
}
.ec-shell .ec-kpi__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--ec-radius-md);
    display: grid;
    place-items: center;
    background: var(--ec-bg-3);
}
.ec-shell .ec-kpi__icon .material-symbols-outlined {
    font-size: 18px;
}
.ec-shell .ec-kpi__value {
    font-size: var(--ec-font-size-3xl);
    font-weight: var(--ec-font-weight-bold);
    color: var(--ec-fg-0);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.ec-shell .ec-kpi__sub {
    color: var(--ec-fg-3);
    font-size: var(--ec-font-size-sm);
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ec-shell .ec-kpi__sub .ec-delta { color: var(--ec-green-hi); font-weight: var(--ec-font-weight-medium); }
.ec-shell .ec-kpi__sub .ec-delta.down { color: var(--ec-red-hi); }
.ec-shell .ec-kpi__sub .material-symbols-outlined { font-size: 14px; }

.ec-shell .ec-kpi--red    .ec-kpi__accent { background: var(--ec-red); }
.ec-shell .ec-kpi--red    .ec-kpi__icon   { background: rgba(239, 68, 68, 0.12); color: var(--ec-red-hi); }
.ec-shell .ec-kpi--blue   .ec-kpi__accent { background: var(--ec-blue); }
.ec-shell .ec-kpi--blue   .ec-kpi__icon   { background: rgba(59, 130, 246, 0.12); color: var(--ec-blue-hi); }
.ec-shell .ec-kpi--green  .ec-kpi__accent { background: var(--ec-green); }
.ec-shell .ec-kpi--green  .ec-kpi__icon   { background: rgba(22, 163, 74, 0.12); color: var(--ec-green-hi); }
.ec-shell .ec-kpi--amber,
.ec-shell .ec-kpi--yellow { }
.ec-shell .ec-kpi--amber  .ec-kpi__accent,
.ec-shell .ec-kpi--yellow .ec-kpi__accent { background: var(--ec-yellow); }
.ec-shell .ec-kpi--amber  .ec-kpi__icon,
.ec-shell .ec-kpi--yellow .ec-kpi__icon   { background: rgba(234, 179, 8, 0.12); color: var(--ec-yellow-hi); }
.ec-shell .ec-kpi--violet .ec-kpi__accent { background: var(--ec-violet); }
.ec-shell .ec-kpi--violet .ec-kpi__icon   { background: rgba(124, 58, 237, 0.12); color: #a78bfa; }
.ec-shell .ec-kpi--cyan   .ec-kpi__accent { background: var(--ec-blue); }
.ec-shell .ec-kpi--cyan   .ec-kpi__icon   { background: rgba(37, 99, 235, 0.12); color: var(--ec-blue-hi); }

/* ---------- Pills ---------- */
.ec-shell .ec-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--ec-radius-pill);
    font-size: var(--ec-font-size-xs);
    font-weight: var(--ec-font-weight-semibold);
    line-height: 1.5;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}
.ec-shell .ec-pill .material-symbols-outlined { font-size: 12px; }
.ec-shell .ec-pill--active { background: rgba(22, 163, 74, 0.12); color: var(--ec-green-hi); border-color: rgba(22, 163, 74, 0.3); }
.ec-shell .ec-pill--warn   { background: rgba(234, 179, 8, 0.12); color: var(--ec-yellow-hi); border-color: rgba(234, 179, 8, 0.3); }
.ec-shell .ec-pill--danger { background: rgba(220, 38, 38, 0.12); color: var(--ec-red-hi); border-color: rgba(220, 38, 38, 0.3); }
.ec-shell .ec-pill--info   { background: rgba(37, 99, 235, 0.12); color: var(--ec-blue-hi); border-color: rgba(37, 99, 235, 0.3); }
.ec-shell .ec-pill--muted  { background: var(--ec-bg-3); color: var(--ec-fg-2); border-color: var(--ec-line-2); }

/* ---------- Count chip ---------- */
.ec-shell .ec-count-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--ec-radius-sm);
    background: var(--ec-bg-3);
    border: 1px solid var(--ec-line-1);
    color: var(--ec-fg-1);
    font-size: var(--ec-font-size-sm);
    font-variant-numeric: tabular-nums;
    font-weight: var(--ec-font-weight-medium);
}
.ec-shell .ec-count-chip .material-symbols-outlined {
    font-size: 14px;
    color: var(--ec-fg-3);
}

/* ---------- Row icon (the small icon tile in table rows) ---------- */
.ec-shell .ec-row-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--ec-radius-md);
    background: var(--ec-bg-3);
    border: 1px solid var(--ec-line-1);
    display: grid;
    place-items: center;
    color: var(--ec-fg-2);
}
.ec-shell .ec-row-icon .material-symbols-outlined { font-size: 18px; }

/* ---------- Live dot ---------- */
.ec-shell .ec-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ec-green);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25);
    animation: ec-pulse 2s ease-in-out infinite;
    display: inline-block;
}
@keyframes ec-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25); }
    50%      { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.05); }
}

/* ---------- Segmented control ---------- */
.ec-shell .ec-seg {
    display: inline-flex;
    background: var(--ec-bg-2);
    border: 1px solid var(--ec-line-1);
    border-radius: var(--ec-radius-md);
    padding: 3px;
    gap: 2px;
}
.ec-shell .ec-seg button {
    border: none;
    background: transparent;
    color: var(--ec-fg-2);
    padding: 5px 12px;
    font: inherit;
    font-size: var(--ec-font-size-sm);
    font-weight: var(--ec-font-weight-medium);
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ec-shell .ec-seg button:hover { color: var(--ec-fg-1); }
.ec-shell .ec-seg button.is-active {
    background: var(--ec-bg-3);
    color: var(--ec-fg-0);
    box-shadow: inset 0 0 0 1px var(--ec-line-2);
}
.ec-shell .ec-seg button .material-symbols-outlined { font-size: 14px; }

/* ---------- Quick actions grid ---------- */
.ec-shell .ec-qa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ec-shell .ec-qa {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--ec-bg-2);
    border: 1px solid var(--ec-line-1);
    border-radius: var(--ec-radius-md);
    color: var(--ec-fg-1);
    font-size: var(--ec-font-size-sm);
    font-weight: var(--ec-font-weight-medium);
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s, background .15s, transform .05s;
}
.ec-shell .ec-qa:hover {
    border-color: var(--ec-line-2);
    background: var(--ec-bg-3);
    color: var(--ec-fg-0);
    text-decoration: none;
}
.ec-shell .ec-qa:active { transform: translateY(1px); }
.ec-shell .ec-qa__icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
}
.ec-shell .ec-qa__icon .material-symbols-outlined { font-size: 18px; }
.ec-shell .ec-qa--primary .ec-qa__icon { background: var(--ec-blue); }
.ec-shell .ec-qa--green   .ec-qa__icon { background: var(--ec-green); }
.ec-shell .ec-qa--amber,
.ec-shell .ec-qa--yellow  { }
.ec-shell .ec-qa--amber   .ec-qa__icon,
.ec-shell .ec-qa--yellow  .ec-qa__icon { background: var(--ec-yellow); }
.ec-shell .ec-qa--violet  .ec-qa__icon { background: var(--ec-violet); }
.ec-shell .ec-qa--cyan    .ec-qa__icon { background: var(--ec-blue); }
.ec-shell .ec-qa--red     .ec-qa__icon { background: var(--ec-red); }
.ec-shell .ec-qa__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.ec-shell .ec-qa__meta small {
    color: var(--ec-fg-3);
    font-weight: var(--ec-font-weight-regular);
    font-size: var(--ec-font-size-xs);
}

/* ---------- Activity feed ---------- */
.ec-shell .ec-feed { padding: 4px 0; }
.ec-shell .ec-feed__item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--ec-line-1);
    font-size: var(--ec-font-size-sm);
}
.ec-shell .ec-feed__item:last-child { border-bottom: 0; }
.ec-shell .ec-feed__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ec-bg-3);
    display: grid;
    place-items: center;
    color: var(--ec-fg-2);
    border: 1px solid var(--ec-line-1);
}
.ec-shell .ec-feed__dot .material-symbols-outlined { font-size: 14px; }
.ec-shell .ec-feed__dot--blue  { background: rgba(59, 130, 246, 0.15); color: var(--ec-blue-hi);   border-color: rgba(59, 130, 246, 0.3); }
.ec-shell .ec-feed__dot--green { background: rgba(22, 163, 74, 0.15);  color: var(--ec-green-hi);  border-color: rgba(22, 163, 74, 0.3); }
.ec-shell .ec-feed__dot--amber { background: rgba(234, 179, 8, 0.15);  color: var(--ec-yellow-hi); border-color: rgba(234, 179, 8, 0.3); }
.ec-shell .ec-feed__dot--red   { background: rgba(239, 68, 68, 0.15);  color: var(--ec-red-hi);    border-color: rgba(239, 68, 68, 0.3); }
.ec-shell .ec-feed__body strong { color: var(--ec-fg-0); font-weight: var(--ec-font-weight-semibold); }
.ec-shell .ec-feed__body .ec-meta { color: var(--ec-fg-3); }
.ec-shell .ec-feed__time {
    color: var(--ec-fg-3);
    font-size: var(--ec-font-size-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- Live strip (red emphasis bar at top of dashboard) ---------- */
.ec-shell .ec-live-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.08) 0%, transparent 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--ec-radius-md);
    margin-bottom: var(--ec-space-4);
    font-size: var(--ec-font-size-sm);
}
.ec-shell .ec-live-strip__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ec-red-hi);
    font-weight: var(--ec-font-weight-semibold);
    text-transform: uppercase;
    font-size: var(--ec-font-size-xs);
    letter-spacing: 0.08em;
}
.ec-shell .ec-live-strip__label::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ec-red);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
    animation: ec-pulse-red 1.5s ease-in-out infinite;
}
@keyframes ec-pulse-red {
    0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }
    50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.05); }
}
.ec-shell .ec-live-strip__divider { width: 1px; height: 16px; background: var(--ec-line-1); }
.ec-shell .ec-live-strip__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ec-fg-1);
    font-size: var(--ec-font-size-sm);
}
.ec-shell .ec-live-strip__chip b {
    color: var(--ec-fg-0);
    font-weight: var(--ec-font-weight-semibold);
}

/* ---------- Callout ---------- */
.ec-shell .ec-callout {
    padding: 12px 14px;
    border-radius: var(--ec-radius-md);
    border: 1px solid;
    display: flex;
    gap: 10px;
    font-size: var(--ec-font-size-sm);
}
.ec-shell .ec-callout .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}
.ec-shell .ec-callout__title {
    font-weight: var(--ec-font-weight-semibold);
    margin-bottom: 4px;
    color: var(--ec-fg-0);
    font-size: var(--ec-font-size-sm);
}
.ec-shell .ec-callout__body { color: var(--ec-fg-2); }
.ec-shell .ec-callout--blue  { background: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.3); color: var(--ec-blue-hi); }
.ec-shell .ec-callout--green { background: rgba(22, 163, 74, 0.08); border-color: rgba(22, 163, 74, 0.3); color: var(--ec-green-hi); }
.ec-shell .ec-callout--amber,
.ec-shell .ec-callout--yellow { background: rgba(234, 179, 8, 0.1); border-color: rgba(234, 179, 8, 0.3); color: var(--ec-yellow-hi); }
.ec-shell .ec-callout ul { margin: 4px 0 0; padding-left: 18px; color: var(--ec-fg-2); font-weight: var(--ec-font-weight-regular); }
.ec-shell .ec-callout ul li { margin: 2px 0; }

/* ---------- Form layout (12-col grid) ---------- */
.ec-shell .ec-form-page {
    max-width: 1120px;
    margin: 0 auto;
}
.ec-shell .ec-form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px 20px;
}
.ec-shell .ec-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ec-shell .ec-field.col-12 { grid-column: span 12; }
.ec-shell .ec-field.col-8  { grid-column: span 8; }
.ec-shell .ec-field.col-6  { grid-column: span 6; }
.ec-shell .ec-field.col-4  { grid-column: span 4; }
.ec-shell .ec-field.col-3  { grid-column: span 3; }
.ec-shell .ec-field label {
    font-size: var(--ec-font-size-sm);
    font-weight: var(--ec-font-weight-semibold);
    color: var(--ec-fg-1);
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}
.ec-shell .ec-field label .ec-req { color: var(--ec-red-hi); font-weight: var(--ec-font-weight-bold); }
.ec-shell .ec-field .ec-hint { color: var(--ec-fg-3); font-size: var(--ec-font-size-xs); }
/* width: 100% applies to text-style inputs only. Excludes checkboxes,
 * radios, file/range/color inputs, and Bootstrap's .form-check-input
 * so a radio group inside .ec-field doesn't expand each radio to fill
 * the column. */
.ec-shell .ec-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not(.form-check-input),
.ec-shell .ec-field select,
.ec-shell .ec-field textarea {
    width: 100%;
    min-width: 0;
}
.ec-shell .ec-field textarea {
    background: var(--ec-bg-2);
    border: 1px solid var(--ec-line-1);
    border-radius: var(--ec-radius-sm);
    color: var(--ec-fg-0);
    padding: 10px;
    font: inherit;
    min-height: 80px;
    outline: none;
    resize: vertical;
}
.ec-shell .ec-field textarea:focus {
    border-color: var(--ec-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.ec-shell .ec-section-head {
    grid-column: span 12;
    display: flex;
    align-items: center;
    gap: var(--ec-space-2);
    margin-top: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ec-line-1);
    font-size: var(--ec-font-size-xs);
    font-weight: var(--ec-font-weight-semibold);
    color: var(--ec-fg-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.ec-shell .ec-section-head .material-symbols-outlined {
    font-size: 14px;
    color: var(--ec-fg-3);
}

.ec-shell .ec-form-actions {
    grid-column: span 12;
    display: flex;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ec-line-1);
    margin-top: 6px;
}

/* ---------- Toolbar (filters above tables) ---------- */
.ec-shell .ec-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ec-line-1);
    flex-wrap: wrap;
}
.ec-shell .ec-toolbar .ec-spacer { flex: 1; }

/* ---------- Pager ---------- */
.ec-shell .ec-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    color: var(--ec-fg-3);
    font-size: var(--ec-font-size-sm);
    border-top: 1px solid var(--ec-line-1);
}
.ec-shell .ec-pager__nav {
    display: flex;
    gap: 4px;
}
.ec-shell .ec-pg-btn {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--ec-line-1);
    border-radius: var(--ec-radius-sm);
    color: var(--ec-fg-2);
    cursor: pointer;
    font: inherit;
    font-size: var(--ec-font-size-sm);
}
.ec-shell .ec-pg-btn:hover {
    background: var(--ec-bg-3);
    color: var(--ec-fg-0);
}
.ec-shell .ec-pg-btn:disabled,
.ec-shell a.ec-pg-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.ec-shell a.ec-pg-btn { text-decoration: none; }
.ec-shell a.ec-pg-btn:hover { text-decoration: none; }
.ec-shell .ec-pg-btn.is-active {
    background: var(--ec-blue);
    border-color: var(--ec-blue);
    color: #fff;
}

/* ---------- Mobile bottom nav (hidden by default) ---------- */
.ec-shell .ec-mobile-bottom-nav { display: none; }


/* ============================================================
 * 5. Status pills + priority badges (kept from prior tokens)
 * ============================================================ */

.ec-shell .ec-status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ec-space-1);
    padding: 2px var(--ec-space-2);
    border-radius: var(--ec-radius-pill);
    font-size: var(--ec-font-size-xs);
    font-weight: var(--ec-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: #fff;
    background-color: var(--ec-color-status-cleared);
    white-space: nowrap;
}
.ec-shell .ec-status-pill--available { background-color: var(--ec-color-status-available); }
.ec-shell .ec-status-pill--assigned  { background-color: var(--ec-color-status-assigned); color: #1a1a1a; }
.ec-shell .ec-status-pill--enroute   { background-color: var(--ec-color-status-enroute); color: #1a1a1a; }
.ec-shell .ec-status-pill--on-scene  { background-color: var(--ec-color-status-on-scene); }
.ec-shell .ec-status-pill--cleared   { background-color: var(--ec-color-status-cleared); }
.ec-shell .ec-status-pill--oos       { background-color: var(--ec-color-status-oos); }

.ec-shell .ec-priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 var(--ec-space-1);
    border-radius: var(--ec-radius-sm);
    font-size: var(--ec-font-size-xs);
    font-weight: var(--ec-font-weight-bold);
    color: #fff;
    background-color: var(--ec-color-status-cleared);
}
.ec-shell .ec-priority-badge--p1 { background-color: var(--ec-color-priority-1); }
.ec-shell .ec-priority-badge--p2 { background-color: var(--ec-color-priority-2); }
.ec-shell .ec-priority-badge--p3 { background-color: var(--ec-color-priority-3); color: #1a1a1a; }
.ec-shell .ec-priority-badge--p4 { background-color: var(--ec-color-priority-4); color: #1a1a1a; }
.ec-shell .ec-priority-badge--p5 { background-color: var(--ec-color-priority-5); color: #1a1a1a; }
.ec-shell .ec-priority-badge--p6 { background-color: var(--ec-color-priority-6); color: #1a1a1a; }
.ec-shell .ec-priority-badge--p7 { background-color: var(--ec-color-priority-7); }
.ec-shell .ec-priority-badge--p8 { background-color: var(--ec-color-priority-8); }
.ec-shell .ec-priority-badge--p9 { background-color: var(--ec-color-priority-9); }


/* ============================================================
 * 6. Empty state, toast
 * ============================================================ */

.ec-shell .ec-empty-state {
    text-align: center;
    padding: var(--ec-space-7) var(--ec-space-4);
    color: var(--ec-fg-3);
    background-color: var(--ec-bg-2);
    border: 1px dashed var(--ec-line-2);
    border-radius: var(--ec-radius-md);
}
.ec-shell .ec-empty-state__icon {
    font-size: 40px !important;
    color: var(--ec-fg-4);
    margin-bottom: var(--ec-space-3);
}
.ec-shell .ec-empty-state__title {
    font-size: var(--ec-font-size-md);
    font-weight: var(--ec-font-weight-semibold);
    color: var(--ec-fg-1);
    margin: 0 0 var(--ec-space-2);
}
.ec-shell .ec-empty-state__body {
    margin: 0 auto;
    max-width: 48ch;
}

.ec-toast-container {
    position: fixed;
    top: calc(var(--ec-topbar-height) + var(--ec-space-3));
    right: var(--ec-space-4);
    z-index: var(--ec-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--ec-space-2);
    pointer-events: none;
    max-width: min(380px, calc(100vw - var(--ec-space-7)));
}
.ec-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--ec-space-2);
    background-color: var(--ec-bg-2);
    color: var(--ec-fg-1);
    border: 1px solid var(--ec-line-1);
    border-left: 4px solid var(--ec-blue);
    border-radius: var(--ec-radius-md);
    box-shadow: var(--ec-shadow-md);
    padding: var(--ec-space-3) var(--ec-space-4);
    font-size: var(--ec-font-size-sm);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.ec-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.ec-toast--success { border-left-color: var(--ec-green); }
.ec-toast--info    { border-left-color: var(--ec-blue); }
.ec-toast--warning { border-left-color: var(--ec-yellow); }
.ec-toast--danger  { border-left-color: var(--ec-red); }


/* ============================================================
 * 7. Auth shell (login)
 * ============================================================ */

.ec-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ec-space-4);
    background-color: var(--ec-color-bg);
    background-image:
        radial-gradient(circle at 20% 80%, rgba(37, 99, 235, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(22, 163, 74, 0.06) 0%, transparent 50%);
}
.ec-auth-card {
    width: 100%;
    max-width: 400px;
    background-color: var(--ec-bg-2);
    border: 1px solid var(--ec-line-1);
    border-radius: var(--ec-radius-lg);
    padding: var(--ec-space-6);
    box-shadow: var(--ec-shadow-lg);
}
.ec-auth-card__header {
    text-align: center;
    margin-bottom: var(--ec-space-5);
}
.ec-auth-card__logo {
    max-width: 200px;
    margin: 0 auto var(--ec-space-4);
    display: block;
}
.ec-auth-card__title {
    font-size: var(--ec-font-size-2xl);
    font-weight: var(--ec-font-weight-bold);
    color: var(--ec-fg-0);
    margin: 0 0 var(--ec-space-1);
    letter-spacing: -0.02em;
}
.ec-auth-card__subtitle {
    font-size: var(--ec-font-size-sm);
    color: var(--ec-fg-3);
    margin: 0;
}
.ec-auth-card__footer {
    text-align: center;
    margin-top: var(--ec-space-5);
    padding-top: var(--ec-space-4);
    border-top: 1px solid var(--ec-line-1);
    color: var(--ec-fg-3);
    font-size: var(--ec-font-size-xs);
}


/* ============================================================
 * 8. Dispatch row (kept from prior shell, restyled to dark)
 * ============================================================ */

.ec-shell .ec-dispatch-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: var(--ec-space-3);
    align-items: center;
    padding: var(--ec-space-3) var(--ec-space-4);
    border-bottom: 1px solid var(--ec-line-1);
    background-color: var(--ec-bg-2);
    transition: background-color 0.12s ease;
}
.ec-shell .ec-dispatch-row:hover {
    background-color: var(--ec-bg-3);
}
.ec-shell .ec-dispatch-row__title {
    font-weight: var(--ec-font-weight-semibold);
    color: var(--ec-fg-0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ec-shell .ec-dispatch-row__subtitle {
    font-size: var(--ec-font-size-sm);
    color: var(--ec-fg-3);
}


/* ============================================================
 * 9. Responsive
 * ============================================================ */

@media (max-width: 1200px) {
    .ec-shell .ec-kpis { grid-template-columns: repeat(2, 1fr); }
    .ec-shell .ec-grid--2,
    .ec-shell .ec-grid--3 { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
    .ec-shell .ec-sidebar { display: none; }
    .ec-shell .ec-mobile-menu-btn { display: inline-flex; }
    .ec-shell .ec-main { padding: 16px; }
    .ec-shell .ec-topbar__brand {
        min-width: auto;
        border-right: none;
        margin-left: 0;
        padding-left: 0;
    }
    .ec-shell .ec-topbar__title { font-size: var(--ec-font-size-base); }
}

@media (max-width: 900px) {
    .ec-shell .ec-form-grid { grid-template-columns: repeat(6, 1fr); }
    .ec-shell .ec-field.col-8,
    .ec-shell .ec-field.col-6,
    .ec-shell .ec-field.col-4,
    .ec-shell .ec-field.col-3 { grid-column: span 6; }
}

@media (max-width: 640px) {
    .ec-shell .ec-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ec-shell .ec-kpi { padding: 12px 14px; }
    .ec-shell .ec-kpi__value { font-size: var(--ec-font-size-2xl); }
    .ec-shell .ec-grid--half { grid-template-columns: 1fr; }
    .ec-shell .ec-topbar__search { display: none; }
    .ec-shell .ec-qa-grid { grid-template-columns: 1fr; }
    .ec-shell .ec-page-title { font-size: var(--ec-font-size-xl); }
    .ec-shell .ec-hide-sm { display: none; }

    .ec-shell .ec-mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--ec-bg-1);
        border-top: 1px solid var(--ec-line-1);
        height: 62px;
        z-index: var(--ec-z-topbar);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .ec-shell .ec-mobile-bottom-nav .ec-bn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--ec-fg-3);
        font-size: 10px;
        font-weight: var(--ec-font-weight-medium);
        cursor: pointer;
        position: relative;
        text-decoration: none;
    }
    .ec-shell .ec-mobile-bottom-nav .ec-bn.is-active { color: var(--ec-blue-hi); }
    .ec-shell .ec-mobile-bottom-nav .ec-bn.is-active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 30%;
        right: 30%;
        height: 2px;
        background: var(--ec-blue);
        border-radius: 0 0 2px 2px;
    }
    .ec-shell .ec-mobile-bottom-nav .ec-bn .material-symbols-outlined { font-size: 22px; }
    .ec-shell .ec-main { padding-bottom: 80px; }
}


/* ============================================================
 * 10. Anti-overflow defenses (N3: zero horizontal scrolling)
 * ------------------------------------------------------------
 * The hard rule: nothing in the EchoCAD shell may produce
 * horizontal scrolling, ever. These defenses make wide content
 * (long URLs, big images, fixed-width tables, modals, etc.) wrap
 * or shrink instead of pushing the viewport.
 *
 * Bootstrap's .table-responsive is explicitly neutralized — it
 * uses overflow-x: auto, which produces a horizontal scrollbar
 * by design. Pages that haven't been migrated yet may visually
 * overflow until the sweep reaches them, but the scrollbar will
 * be gone immediately.
 * ============================================================ */

html { overflow-x: hidden; }
body.ec-shell { overflow-x: hidden; max-width: 100vw; }

.ec-shell .ec-main { min-width: 0; max-width: 100%; }

/* Children of the main column must allow shrink. Bootstrap's grid
 * cols default to min-width: auto, which causes them to refuse to
 * shrink below their content's intrinsic width — that's what blows
 * out flex/grid containers. */
.ec-shell .ec-main .row > * { min-width: 0; }

/* Wide media never forces scroll. */
.ec-shell .ec-main img,
.ec-shell .ec-main svg,
.ec-shell .ec-main video,
.ec-shell .ec-main canvas,
.ec-shell .ec-main iframe { max-width: 100%; height: auto; }

/* Long URLs / unbroken strings wrap instead of pushing siblings. */
.ec-shell .ec-main pre,
.ec-shell .ec-main code,
.ec-shell .ec-main kbd,
.ec-shell .ec-main samp { overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }

/* Tables. word-break on cells keeps long emails / URLs from
 * widening a column past the viewport. min-width: 0 is required
 * for nested flex items inside cells. */
.ec-shell .table { width: 100%; }
.ec-shell .table th,
.ec-shell .table td { word-break: break-word; min-width: 0; }

/* The Bootstrap horizontal-scroll wrapper is banned. Pages that
 * still have it visually keep it (the markup is harmless), but
 * the scroll behavior is removed. The migration sweep removes
 * the markup; this defense covers everything in between. */
.ec-shell .table-responsive,
.ec-shell .table-responsive-sm,
.ec-shell .table-responsive-md,
.ec-shell .table-responsive-lg,
.ec-shell .table-responsive-xl,
.ec-shell .table-responsive-xxl { overflow-x: visible !important; }

/* Modals must always fit the viewport with a small margin. */
.ec-shell .modal-dialog { max-width: min(720px, calc(100vw - 16px)); }
@media (min-width: 992px) {
    .ec-shell .modal-lg { max-width: min(900px, calc(100vw - 16px)); }
    .ec-shell .modal-xl { max-width: min(1140px, calc(100vw - 16px)); }
}

/* Page-header action clusters wrap to a new row instead of pushing
 * horizontal scroll, and collapse to icon-only buttons on phones. */
.ec-shell .ec-page-header { flex-wrap: wrap; row-gap: 12px; }
@media (max-width: 575.98px) {
    .ec-shell .ec-page-header .ec-btn-label { display: none; }
    .ec-shell .ec-page-header .btn { padding: 0 10px; }
}


/* ============================================================
 * 11. Responsive column-hide utilities
 * ------------------------------------------------------------
 * Used by Pattern B in list pages — mark non-critical table
 * columns with these classes so they hide at narrow viewports
 * before they can ever push horizontal overflow.
 * ============================================================ */

@media (max-width: 1199.98px) { .ec-shell .ec-hide-lg { display: none !important; } }
@media (max-width: 991.98px)  { .ec-shell .ec-hide-md { display: none !important; } }
@media (max-width: 767.98px)  { .ec-shell .ec-hide-sm { display: none !important; } }


/* ============================================================
 * 12. .ec-list — Pattern A mobile-card list
 * ------------------------------------------------------------
 * Used by every list page in Phase 3+ alongside the desktop
 * <table>. Pages render the table at >=768px and this list at
 * <=767.98px. Same data; no horizontal scroll.
 *
 * Markup:
 *   <div class="ec-list">
 *     <a class="ec-list-card" href="/detail/...">
 *       <div class="ec-row-icon" style="background:...;color:...;"></div>
 *       <div class="ec-list-card__meta">
 *         <div class="ec-list-card__name">Primary identifier</div>
 *         <div class="ec-list-card__sub">
 *           <span><span class="material-symbols-outlined">group</span>12</span>
 *           ...
 *         </div>
 *       </div>
 *       <span class="ec-pill ec-pill--active">Active</span>
 *       <span class="material-symbols-outlined">chevron_right</span>
 *     </a>
 *   </div>
 * ============================================================ */

.ec-shell .ec-list { display: block; }
.ec-shell .ec-list-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--ec-line-1);
    color: var(--ec-fg-1);
    text-decoration: none;
    transition: background-color 0.12s;
}
.ec-shell .ec-list-card:last-child { border-bottom: 0; }
.ec-shell .ec-list-card:hover,
.ec-shell .ec-list-card:focus,
.ec-shell .ec-list-card:focus-within {
    background-color: var(--ec-bg-3);
    color: var(--ec-fg-0);
    text-decoration: none;
}
.ec-shell .ec-list-card__meta {
    flex: 1;
    min-width: 0;
}
.ec-shell .ec-list-card__name {
    color: var(--ec-fg-0);
    font-weight: var(--ec-font-weight-semibold);
    font-size: var(--ec-font-size-base);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ec-shell .ec-list-card__sub {
    color: var(--ec-fg-3);
    font-size: var(--ec-font-size-sm);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.ec-shell .ec-list-card__sub span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.ec-shell .ec-list-card__sub .material-symbols-outlined { font-size: 13px; }
/* Tappable nav region for a card that also carries a trailing action
   (e.g. a delete <form>). The card becomes a <div class="ec-list-card">;
   this <a class="ec-list-card__link"> holds the icon + meta and the
   navigation, and sibling controls (pills, forms) sit after it. */
.ec-shell .ec-list-card__link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.ec-shell .ec-list-card__link:hover,
.ec-shell .ec-list-card__link:focus { color: inherit; text-decoration: none; }

/* ============================================================
   Agency picker
   ------------------------------------------------------------
   Typeable autocomplete that replaces every <select name="agency_id">
   and the legacy multi-agency checkbox blocks. Hydrated by
   assets/echocad-ui/agency-picker.js. Single mode renders an input +
   hidden id; multi mode renders a chip stack + input. Component is
   not gated on body.ec-shell because legacy CAD pages (new-call.php,
   search.php) also use it.
   ============================================================ */
.ec-agency-picker {
    position: relative;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--ec-space-1);
    width: 100%;
    min-width: 0;
}
.ec-agency-picker__input {
    flex: 1 1 160px;
    min-width: 0;
}
.ec-agency-picker__clear {
    background: transparent;
    border: 1px solid var(--ec-line-1);
    color: var(--ec-fg-3);
    border-radius: var(--ec-radius-sm);
    padding: 0 var(--ec-space-2);
    font-size: var(--ec-font-size-md);
    line-height: 1;
    cursor: pointer;
}
.ec-agency-picker__clear:hover {
    color: var(--ec-fg-0);
    border-color: var(--ec-line-2);
    background: var(--ec-bg-3);
}
.ec-agency-picker__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    padding: 4px 0;
    list-style: none;
    background: var(--ec-bg-2);
    border: 1px solid var(--ec-line-1);
    border-radius: var(--ec-radius-md);
    box-shadow: var(--ec-shadow-card);
    max-height: 320px;
    overflow-y: auto;
    z-index: 1080;
}
.ec-agency-picker__menu li {
    padding: 6px 12px;
    cursor: pointer;
    color: var(--ec-fg-1);
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 3px solid transparent;
}
.ec-agency-picker__menu li.is-highlighted,
.ec-agency-picker__menu li:hover {
    background: var(--ec-bg-3);
    color: var(--ec-fg-0);
    border-left-color: var(--ec-blue);
}
.ec-agency-picker__opt-name {
    font-size: var(--ec-font-size-base);
    font-weight: 500;
}
.ec-agency-picker__opt-sub {
    font-size: var(--ec-font-size-xs);
    color: var(--ec-fg-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ec-agency-picker__empty,
.ec-agency-picker__more {
    color: var(--ec-fg-3);
    font-style: italic;
    cursor: default !important;
    border-left-color: transparent !important;
    background: transparent !important;
}

/* Multi-select chip stack. Chips render before the input, share the
   same wrapper so they wrap inline like a tag input. */
.ec-agency-picker--multi {
    align-items: flex-start;
    background: var(--ec-bg-2);
    border: 1px solid var(--ec-line-1);
    border-radius: var(--ec-radius-md);
    padding: 6px;
    gap: 6px;
}
.ec-agency-picker--multi .ec-agency-picker__input {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 4px 6px;
    color: var(--ec-fg-0);
    flex: 1 1 140px;
    min-width: 120px;
    outline: none;
}
.ec-agency-picker--multi .ec-agency-picker__input:focus {
    background: transparent;
    box-shadow: none;
}
.ec-agency-picker__chips {
    display: contents;
}
.ec-agency-picker__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--ec-bg-3);
    border: 1px solid var(--ec-line-2);
    color: var(--ec-fg-0);
    padding: 2px 6px 2px 10px;
    border-radius: var(--ec-radius-pill);
    font-size: var(--ec-font-size-sm);
    line-height: 1.4;
}
.ec-agency-picker__chip-x {
    background: transparent;
    border: 0;
    color: var(--ec-fg-3);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    border-radius: var(--ec-radius-circle);
}
.ec-agency-picker__chip-x:hover {
    color: var(--ec-fg-0);
    background: var(--ec-bg-4);
}


/* ============================================================
 * Role-aware admin dashboard components (added Phase 4)
 * ------------------------------------------------------------
 * Components for the consolidated admin dashboard at /admin.
 * Each is documented in docs/echocad-design-system.md under
 * "Component reference". The patterns here replace the live-strip
 * + sessions-strip + 3-of-4-redundant-KPI-tile stack from the
 * original page with a single dense ops snapshot, real performance
 * KPIs with sparklines, a cross-agency tenant rollup table for
 * Echo911 super-admins, a system-health grid, an in-page filter
 * slot in the page header, and a launcher hero card.
 * ============================================================ */

/* ---------- Ops snapshot ----------
   Consolidated "right now" strip. Replaces the original live-strip
   + sessions-strip + 3 status KPI tiles with a single horizontal
   row of grouped clusters. Each cluster has a label, big number,
   and optional secondary stat.

   Markup:
     <div class="ec-ops-snapshot">
       <div class="ec-ops-snapshot__cluster">
         <div class="ec-ops-snapshot__label">Active</div>
         <div class="ec-ops-snapshot__value">3</div>
         <div class="ec-ops-snapshot__sub">+2 from last hour</div>
       </div>
       <span class="ec-ops-snapshot__divider"></span>
       ...
       <div class="ec-ops-snapshot__health">
         <span class="ec-live-dot"></span>All systems operational
       </div>
     </div>

   Tone modifiers on a cluster (.ec-ops-snapshot__cluster--red /
   --amber / --green / --blue) tint the label + accent dot.
*/
.ec-shell .ec-ops-snapshot {
    display: flex;
    align-items: stretch;
    gap: var(--ec-space-3);
    padding: var(--ec-space-4) var(--ec-space-5);
    background: var(--ec-bg-2);
    border: 1px solid var(--ec-line-1);
    border-radius: var(--ec-radius-lg);
    box-shadow: var(--ec-shadow-card);
    margin-bottom: var(--ec-space-4);
    flex-wrap: wrap;
}
.ec-shell .ec-ops-snapshot__cluster {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 var(--ec-space-3);
    min-width: 110px;
    flex: 0 0 auto;
}
.ec-shell .ec-ops-snapshot__label {
    color: var(--ec-fg-3);
    font-size: var(--ec-font-size-xs);
    font-weight: var(--ec-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ec-shell .ec-ops-snapshot__label .material-symbols-outlined {
    font-size: 14px;
}
.ec-shell .ec-ops-snapshot__value {
    color: var(--ec-fg-0);
    font-size: var(--ec-font-size-xl);
    font-weight: var(--ec-font-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.ec-shell .ec-ops-snapshot__value small {
    color: var(--ec-fg-3);
    font-size: var(--ec-font-size-sm);
    font-weight: var(--ec-font-weight-medium);
    margin-left: 2px;
}
.ec-shell .ec-ops-snapshot__sub {
    color: var(--ec-fg-3);
    font-size: var(--ec-font-size-xs);
    display: flex;
    align-items: center;
    gap: 4px;
}
.ec-shell .ec-ops-snapshot__sub .material-symbols-outlined {
    font-size: 12px;
}
.ec-shell .ec-ops-snapshot__divider {
    width: 1px;
    background: var(--ec-line-1);
    flex: 0 0 1px;
}
.ec-shell .ec-ops-snapshot__health {
    margin-left: auto;
    color: var(--ec-fg-2);
    font-size: var(--ec-font-size-sm);
    align-self: center;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--ec-space-3);
}

/* Cluster tone modifiers — tint just the label + value accent so
   the snapshot doesn't shout the way the old red live-strip did. */
.ec-shell .ec-ops-snapshot__cluster--red    .ec-ops-snapshot__label { color: var(--ec-red-hi); }
.ec-shell .ec-ops-snapshot__cluster--blue   .ec-ops-snapshot__label { color: var(--ec-blue-hi); }
.ec-shell .ec-ops-snapshot__cluster--green  .ec-ops-snapshot__label { color: var(--ec-green-hi); }
.ec-shell .ec-ops-snapshot__cluster--amber  .ec-ops-snapshot__label,
.ec-shell .ec-ops-snapshot__cluster--yellow .ec-ops-snapshot__label { color: var(--ec-yellow-hi); }

/* Quiet variant: a cluster at its quiet/healthy zero (e.g.
   "0 active incidents" — that's the GOOD state). Drops the tint
   so the dashboard doesn't read like an emergency on a quiet day. */
.ec-shell .ec-ops-snapshot__cluster--quiet .ec-ops-snapshot__label {
    color: var(--ec-fg-3);
}

@media (max-width: 768px) {
    .ec-shell .ec-ops-snapshot {
        padding: var(--ec-space-3);
        gap: var(--ec-space-2);
    }
    .ec-shell .ec-ops-snapshot__cluster {
        min-width: 0;
        flex: 1 1 45%;
        padding: var(--ec-space-2);
    }
    .ec-shell .ec-ops-snapshot__divider {
        display: none;
    }
    .ec-shell .ec-ops-snapshot__health {
        margin-left: 0;
        flex: 1 1 100%;
        padding: var(--ec-space-2);
    }
}

/* ---------- KPI metric variant ----------
   Modifier on the existing .ec-kpi that adds a sparkline slot below
   the value, plus a slightly tighter delta presentation. Pairs with
   .ec-spark. Use this for REAL KPIs (avg dispatch time, calls/hr,
   fleet utilization) that have a meaningful trend over time --
   distinct from the now-state KPIs (incidents, dispatchers online)
   which still use the base .ec-kpi.

   Markup:
     <div class="ec-kpi ec-kpi--metric ec-kpi--blue">
       <span class="ec-kpi__accent"></span>
       <div class="ec-kpi__head">Avg Dispatch <div class="ec-kpi__icon">...</div></div>
       <div class="ec-kpi__value">2:14</div>
       <div class="ec-kpi__spark"><svg class="ec-spark" ...></svg></div>
       <div class="ec-kpi__sub"><span class="ec-delta">-12%</span> vs last week</div>
     </div>
*/
.ec-shell .ec-kpi--metric .ec-kpi__value {
    margin-bottom: 6px;
}
.ec-shell .ec-kpi__spark {
    margin-bottom: 4px;
    height: 28px;
    display: block;
}

/* Quiet variant: drops the loud accent color when a KPI is at its
   quiet/healthy zero (e.g. red Active Incidents tile when there are
   zero active incidents). The tile itself stays neutral; the icon
   chip and accent stripe go to the muted palette. */
.ec-shell .ec-kpi--quiet .ec-kpi__accent {
    background: var(--ec-line-2) !important;
}
.ec-shell .ec-kpi--quiet .ec-kpi__icon {
    background: var(--ec-bg-3) !important;
    color: var(--ec-fg-3) !important;
}

/* Delta tones for the sub-line, using the sane-delta helper output:
   .ec-delta--good  — green
   .ec-delta--bad   — red
   .ec-delta--neutral — muted */
.ec-shell .ec-kpi__sub .ec-delta--good    { color: var(--ec-green-hi); }
.ec-shell .ec-kpi__sub .ec-delta--bad     { color: var(--ec-red-hi); }
.ec-shell .ec-kpi__sub .ec-delta--neutral { color: var(--ec-fg-3); }

/* ---------- Sparkline ----------
   Minimal inline SVG sparkline. The page emits an <svg class="ec-spark">
   sized to its container; this rule controls stroke width and the
   default color. Override per-tile via the --ec-spark-color custom
   property (e.g. style="--ec-spark-color: var(--ec-blue-hi);"). */
.ec-shell .ec-spark {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.ec-shell .ec-spark path,
.ec-shell .ec-spark polyline {
    fill: none;
    stroke: var(--ec-spark-color, var(--ec-blue-hi));
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ec-shell .ec-spark .ec-spark__fill {
    fill: var(--ec-spark-color, var(--ec-blue-hi));
    fill-opacity: 0.12;
    stroke: none;
}

/* ---------- Tenant rollup table (Echo911 super-admin) ----------
   Cross-agency status table. Built on .ec-card so it inherits the
   surface treatment. Rows are flex (not <table>) so they collapse
   gracefully on small screens.

   Markup:
     <div class="ec-card">
       <div class="ec-tenant-table">
         <div class="ec-tenant-table__head">
           <div class="ec-tenant-table__col ec-tenant-table__col--name">Agency</div>
           ...
         </div>
         <a class="ec-tenant-row" href="...">
           <div class="ec-tenant-row__col ec-tenant-row__col--name">
             <strong>Acme PD</strong>
             <small>acme-pd</small>
           </div>
           ...
         </a>
       </div>
     </div>
*/
.ec-shell .ec-tenant-table {
    display: block;
}
.ec-shell .ec-tenant-table__head,
.ec-shell .ec-tenant-row {
    display: grid;
    grid-template-columns: minmax(160px, 2fr) repeat(4, minmax(80px, 1fr)) 1.5fr;
    gap: var(--ec-space-3);
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ec-line-1);
}
.ec-shell .ec-tenant-table__head {
    color: var(--ec-fg-3);
    font-size: var(--ec-font-size-xs);
    font-weight: var(--ec-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--ec-bg-3);
    border-radius: 0; /* sits inside .ec-card; card handles outer radius */
}
.ec-shell .ec-tenant-row {
    color: var(--ec-fg-1);
    text-decoration: none;
    font-size: var(--ec-font-size-base);
    transition: background-color .15s, border-color .15s;
}
.ec-shell .ec-tenant-row:hover {
    background: var(--ec-bg-3);
    color: var(--ec-fg-0);
    text-decoration: none;
}
.ec-shell .ec-tenant-row:last-child {
    border-bottom: 0;
}
.ec-shell .ec-tenant-row__col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ec-shell .ec-tenant-row__col strong {
    color: var(--ec-fg-0);
    font-weight: var(--ec-font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ec-shell .ec-tenant-row__col small {
    color: var(--ec-fg-3);
    font-size: var(--ec-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ec-shell .ec-tenant-row__metric {
    font-variant-numeric: tabular-nums;
    color: var(--ec-fg-0);
    font-weight: var(--ec-font-weight-semibold);
}
.ec-shell .ec-tenant-row__metric--muted {
    color: var(--ec-fg-3);
    font-weight: var(--ec-font-weight-regular);
}
.ec-shell .ec-tenant-row__heartbeat {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ec-fg-2);
    font-size: var(--ec-font-size-sm);
}
.ec-shell .ec-tenant-row__heartbeat--stale {
    color: var(--ec-fg-3);
}
.ec-shell .ec-tenant-row__heartbeat-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--ec-radius-circle);
    background: var(--ec-green);
    flex: 0 0 6px;
}
.ec-shell .ec-tenant-row__heartbeat--stale .ec-tenant-row__heartbeat-dot {
    background: var(--ec-fg-4);
}

@media (max-width: 768px) {
    .ec-shell .ec-tenant-table__head {
        display: none;
    }
    .ec-shell .ec-tenant-row {
        grid-template-columns: 1fr 1fr;
        padding: var(--ec-space-3);
    }
    .ec-shell .ec-tenant-row__col--name {
        grid-column: 1 / -1;
    }
}

/* ---------- System health grid ----------
   Compact grid of service-status nodes for the Echo911 super-admin
   view. Each node is a colored dot + label + optional age. Status
   modifiers: --up (green), --warn (amber), --down (red), --unknown.

   Markup:
     <div class="ec-system-health">
       <div class="ec-system-health__node ec-system-health__node--up">
         <span class="ec-system-health__dot"></span>
         <div>
           <div class="ec-system-health__name">PHP API</div>
           <div class="ec-system-health__age">2s ago</div>
         </div>
       </div>
       ...
     </div>
*/
.ec-shell .ec-system-health {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--ec-space-2);
}
.ec-shell .ec-system-health__node {
    display: flex;
    align-items: center;
    gap: var(--ec-space-2);
    padding: 10px 12px;
    background: var(--ec-bg-3);
    border: 1px solid var(--ec-line-1);
    border-radius: var(--ec-radius-md);
}
.ec-shell .ec-system-health__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--ec-radius-circle);
    background: var(--ec-fg-4);
    flex: 0 0 8px;
}
.ec-shell .ec-system-health__name {
    color: var(--ec-fg-0);
    font-size: var(--ec-font-size-sm);
    font-weight: var(--ec-font-weight-medium);
}
.ec-shell .ec-system-health__age {
    color: var(--ec-fg-3);
    font-size: var(--ec-font-size-xs);
    margin-top: 2px;
}
.ec-shell .ec-system-health__node--up      .ec-system-health__dot { background: var(--ec-green); }
.ec-shell .ec-system-health__node--warn    .ec-system-health__dot { background: var(--ec-yellow); }
.ec-shell .ec-system-health__node--down    .ec-system-health__dot { background: var(--ec-red); }
.ec-shell .ec-system-health__node--unknown .ec-system-health__dot { background: var(--ec-fg-4); }

/* ---------- Page header filter slot ----------
   Extends the existing .ec-page-header to hold an inline filter
   chip alongside the segmented control. Used by the Echo911
   super-admin view for the in-page agency picker.

   Markup:
     <div class="ec-page-header">
       <div>...title + subtitle...</div>
       <div class="ec-page-header__actions">
         <div class="ec-page-header__filter">
           <span class="material-symbols-outlined">filter_alt</span>
           <select>...</select>
         </div>
         <div class="ec-seg">...</div>
       </div>
     </div>
*/
.ec-shell .ec-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--ec-space-3);
    flex-wrap: wrap;
}
.ec-shell .ec-page-header__filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    background: var(--ec-bg-3);
    border: 1px solid var(--ec-line-1);
    border-radius: var(--ec-radius-pill);
    color: var(--ec-fg-1);
    font-size: var(--ec-font-size-sm);
    font-weight: var(--ec-font-weight-medium);
}
.ec-shell .ec-page-header__filter .material-symbols-outlined {
    font-size: 16px;
    color: var(--ec-fg-3);
}
.ec-shell .ec-page-header__filter select,
.ec-shell .ec-page-header__filter input {
    background: transparent;
    border: 0;
    color: var(--ec-fg-0);
    padding: 2px 4px;
    font: inherit;
    outline: none;
    min-width: 140px;
    appearance: none;
    /* Render the native option popup in dark mode so the open dropdown isn't a
       white panel with near-white (unreadable) option text. */
    color-scheme: dark;
}
/* Explicit option colors as a fallback for browsers that ignore color-scheme
   on the popup (the EchoCAD Night surface is dark-only). */
.ec-shell .ec-page-header__filter option {
    background-color: var(--ec-bg-2);
    color: var(--ec-fg-0);
}

/* ---------- Launcher hero ----------
   Full-width primary CTA for the dispatcher launcher view. A big
   call-to-action card with a left icon, headline + subhead, and
   a right-aligned chevron / inline stats.

   Markup:
     <a class="ec-launcher-hero" href="/dispatch/">
       <div class="ec-launcher-hero__icon">
         <span class="material-symbols-outlined">desktop_windows</span>
       </div>
       <div class="ec-launcher-hero__body">
         <h2 class="ec-launcher-hero__title">Open EchoCAD</h2>
         <div class="ec-launcher-hero__sub">3 active incidents · 4 dispatchers online</div>
       </div>
       <div class="ec-launcher-hero__cta">
         Launch
         <span class="material-symbols-outlined">arrow_forward</span>
       </div>
     </a>
*/
.ec-shell .ec-launcher-hero {
    display: flex;
    align-items: center;
    gap: var(--ec-space-4);
    padding: var(--ec-space-5);
    background: linear-gradient(135deg, var(--ec-bg-2) 0%, var(--ec-bg-3) 100%);
    border: 1px solid var(--ec-line-2);
    border-radius: var(--ec-radius-lg);
    box-shadow: var(--ec-shadow-md);
    color: var(--ec-fg-0);
    text-decoration: none;
    transition: border-color .15s, transform .15s;
    margin-bottom: var(--ec-space-4);
}
.ec-shell .ec-launcher-hero:hover {
    border-color: var(--ec-blue);
    text-decoration: none;
    color: var(--ec-fg-0);
}
.ec-shell .ec-launcher-hero:active {
    transform: translateY(1px);
}
.ec-shell .ec-launcher-hero__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--ec-radius-md);
    background: var(--ec-blue);
    color: var(--ec-fg-0);
    display: grid;
    place-items: center;
    flex: 0 0 56px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}
.ec-shell .ec-launcher-hero__icon .material-symbols-outlined {
    font-size: 28px;
}
.ec-shell .ec-launcher-hero__body {
    flex: 1 1 auto;
    min-width: 0;
}
.ec-shell .ec-launcher-hero__title {
    font-size: var(--ec-font-size-xl);
    font-weight: var(--ec-font-weight-bold);
    margin: 0 0 4px;
    color: var(--ec-fg-0);
    letter-spacing: -0.02em;
}
.ec-shell .ec-launcher-hero__sub {
    color: var(--ec-fg-2);
    font-size: var(--ec-font-size-sm);
}
.ec-shell .ec-launcher-hero__cta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ec-blue-hi);
    font-weight: var(--ec-font-weight-semibold);
    font-size: var(--ec-font-size-sm);
}
.ec-shell .ec-launcher-hero__cta .material-symbols-outlined {
    font-size: 18px;
}

/* ---------- Roster list ----------
   Compact list used by the dispatcher / unit roster cards in the
   agency-admin view. Each row is a small avatar circle (initials),
   name + meta, and a trailing status pill or duration.

   Markup:
     <ul class="ec-roster">
       <li class="ec-roster__item">
         <div class="ec-roster__avatar">DO</div>
         <div class="ec-roster__body">
           <strong>Dispatcher 000</strong>
           <small>web · 12m on shift</small>
         </div>
         <span class="ec-pill ec-pill--green">On duty</span>
       </li>
     </ul>
*/
.ec-shell .ec-roster {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ec-shell .ec-roster__item {
    display: flex;
    align-items: center;
    gap: var(--ec-space-3);
    padding: 10px 18px;
    border-bottom: 1px solid var(--ec-line-1);
}
.ec-shell .ec-roster__item:last-child { border-bottom: 0; }
.ec-shell .ec-roster__avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--ec-radius-circle);
    background: var(--ec-bg-3);
    color: var(--ec-fg-1);
    display: grid;
    place-items: center;
    font-size: var(--ec-font-size-xs);
    font-weight: var(--ec-font-weight-semibold);
    flex: 0 0 32px;
    text-transform: uppercase;
}
.ec-shell .ec-roster__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ec-shell .ec-roster__body strong {
    color: var(--ec-fg-0);
    font-weight: var(--ec-font-weight-semibold);
    font-size: var(--ec-font-size-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ec-shell .ec-roster__body small {
    color: var(--ec-fg-3);
    font-size: var(--ec-font-size-xs);
}

/* ---------- Wrong-door splash ----------
   Single-screen card for users who landed on /admin by mistake
   (agency_user, property_manager). Doesn't show any dashboard data;
   just names the right destination and links to it.

   Markup:
     <div class="ec-wrong-door">
       <span class="material-symbols-outlined ec-wrong-door__icon">door_open</span>
       <h2 class="ec-wrong-door__title">This dashboard is for admins</h2>
       <p class="ec-wrong-door__body">As a field user, your home is the EchoMDT app...</p>
       <a class="btn btn-primary" href="/mdt/">Open EchoMDT</a>
     </div>
*/
.ec-shell .ec-wrong-door {
    max-width: 540px;
    margin: 64px auto;
    padding: var(--ec-space-6);
    text-align: center;
    background: var(--ec-bg-2);
    border: 1px solid var(--ec-line-1);
    border-radius: var(--ec-radius-lg);
    box-shadow: var(--ec-shadow-card);
}
.ec-shell .ec-wrong-door__icon {
    font-size: 56px;
    color: var(--ec-fg-3);
    margin-bottom: var(--ec-space-3);
    display: block;
}
.ec-shell .ec-wrong-door__title {
    color: var(--ec-fg-0);
    font-size: var(--ec-font-size-xl);
    font-weight: var(--ec-font-weight-semibold);
    margin: 0 0 var(--ec-space-2);
}
.ec-shell .ec-wrong-door__body {
    color: var(--ec-fg-2);
    font-size: var(--ec-font-size-base);
    margin: 0 0 var(--ec-space-4);
    line-height: var(--ec-line-height-base);
}