/* ════════════════════════════════════════════════════════════════════
   ECLIPSE.CSS — consolidated application stylesheet
   Location : EclipseRCLShared/wwwroot/css/eclipse.css
   Served as: _content/EclipseRCLShared/css/eclipse.css

   Contents (in order):
     1. Font import (DM Sans / DM Mono)
     2. Design tokens (:root variables)      — was MainLayout.razor <style>
     3. Reusable page/component helpers      — was MainLayout.razor <style>
     4. Navbar / sidebar / modal styles      — was MainLayout.razor <style>
     5. Page scaffold regions                — new (EclPageScaffold)

   LOAD ORDER RULE: this file must be the LAST stylesheet <link> in
   App.razor. It previously lived in an inline <style> block inside
   MainLayout (which cascades after all <head> links), so several rules
   rely on winning by source order. Keep it last.

   Copyright (c) 2026 Eclipse Technologies. All Rights Reserved
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ════════════════════════════════════════════════════════════════════
   ECLIPSE DESIGN TOKENS
   Single source of truth for colours, spacing, radii, shadows.
   Additive only — defines variables, overrides nothing existing.
   Reference these in pages via the helper classes below, or directly
   with var(--ecl-…). Change a value here = whole app updates.
   ════════════════════════════════════════════════════════════════════ */
:root {
    /* Brand */
    --ecl-primary-dark: #1e3a5f;
    --ecl-primary: #2d5a8e;
    --ecl-primary-grad: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
    --ecl-accent-soft: #e8eeff;
    --ecl-accent-hover: #f0f4ff;
    /* Surfaces & text */
    --ecl-bg: #f1f5f9;
    --ecl-surface: #ffffff;
    --ecl-border: #e2e8f0;
    --ecl-border-soft: #f1f5f9;
    --ecl-text: #334155;
    --ecl-text-muted: #64748b;
    --ecl-text-faint: #94a3b8;
    /* State */
    --ecl-danger: #b91c1c;
    --ecl-success: #15803d;
    /* Primitives */
    --ecl-radius: 10px;
    --ecl-radius-sm: 6px;
    --ecl-radius-pill: 20px;
    --ecl-shadow: 0 2px 16px rgba(0,0,0,0.06);
    --ecl-shadow-pop: 0 10px 28px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.06);
    --ecl-font: 'DM Sans', sans-serif;
    --ecl-btn-height: 40px;
}

/* ════════════════════════════════════════════════════════════════════
   REUSABLE PAGE / COMPONENT HELPERS
   Wrap page content in these for a consistent look. Opt-in: existing
   pages are unaffected until they adopt these classes.
   ════════════════════════════════════════════════════════════════════ */
.ecl-page {
    background: var(--ecl-bg);
    font-family: var(--ecl-font);
    min-height: 100%;
}

.ecl-card {
    background: var(--ecl-surface);
    border: 1px solid var(--ecl-border);
    border-radius: var(--ecl-radius);
    box-shadow: var(--ecl-shadow);
    padding: 20px;
}

    .ecl-card + .ecl-card {
        margin-top: 18px;
    }

.ecl-page-header {
    background: var(--ecl-primary-grad);
    color: #ffffff;
    border-radius: var(--ecl-radius);
    padding: 16px 20px;
    margin-bottom: 18px;
    box-shadow: var(--ecl-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .ecl-page-header h1,
    .ecl-page-header .ecl-page-title {
        font-size: 1.05rem;
        font-weight: 600;
        color: #ffffff;
        margin: 0;
        letter-spacing: 0.01em;
    }

    .ecl-page-header .ecl-page-subtitle {
        font-size: 0.8rem;
        color: rgba(255,255,255,0.75);
        margin: 2px 0 0;
    }

.ecl-section-title {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ecl-text-faint);
    margin: 0 0 8px;
}

.ecl-btn-primary {
    background: var(--ecl-primary);
    color: #ffffff;
    border: none;
    height: var(--ecl-btn-height);
    border-radius: var(--ecl-radius);
    padding: 0 18px;
    font-family: var(--ecl-font);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

    .ecl-btn-primary:hover {
        background: var(--ecl-primary-dark);
        box-shadow: 0 2px 8px rgba(30,58,95,0.3);
    }

.ecl-btn-secondary {
    background: var(--ecl-surface);
    color: var(--ecl-text);
    border: 1px solid var(--ecl-border);
    height: var(--ecl-btn-height);
    border-radius: var(--ecl-radius);
    padding: 0 18px;
    font-family: var(--ecl-font);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .ecl-btn-secondary:hover {
        background: var(--ecl-accent-hover);
        border-color: #c7d7f0;
        color: var(--ecl-primary-dark);
    }

.ecl-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

body, .page, .sidebar, article, button, input {
    font-family: 'DM Sans', sans-serif !important;
}

/* Restore FontAwesome glyphs — body !important would otherwise override them */
.fa, i[class*="fa-"] {
    font-family: FontAwesome !important;
    font-style: normal !important;
}

/* ════════════════════════════════════════
   TOP NAVBAR
   ════════════════════════════════════════ */
.sticky.top-0.z-50.flex.flex-row.flex-wrap {
    background: var(--ecl-primary-grad) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.2) !important;
    padding: 12px 24px !important;
}

.sticky.top-0.z-50 .flex-none.w-56 img {
    /*   background: #ffffff;*/
    border-radius: 8px;
    padding: 4px 8px;
    filter: none;
}

.sticky.top-0.z-50 .text-gray-800,
.sticky.top-0.z-50 .text-gray-500,
.sticky.top-0.z-50 .text-gray-900,
.sticky.top-0.z-50 h1 {
    color: rgba(255,255,255,0.9) !important;
}

.sticky.top-0.z-50 .text-sm.font-semibold {
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Stacked user id + cost centre in the top nav (visible on every page) */
.ecl-user-id-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    text-transform: none;
}

.ecl-user-id {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
}

.ecl-user-cc {
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(255,255,255,0.65);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
}

    .ecl-user-cc i {
        font-size: 0.6rem;
        opacity: 0.8;
    }

.sticky.top-0.z-50 .fa.fa-chevron-down {
    color: rgba(255,255,255,0.6) !important;
}

.sticky.top-0.z-50 button:hover .fa,
.sticky.top-0.z-50 button:hover i {
    color: #ffffff !important;
}

.sticky.top-0.z-50 .w-8.h-8.rounded-full {
    border: 2px solid rgba(255,255,255,0.3) !important;
}

.sticky.top-0.z-50 .rounded-full.bg-red-700 {
    box-shadow: 0 0 0 2px var(--ecl-primary-dark) !important;
    font-size: 0.6rem !important;
}

/* ── User Dropdown ── */
.menu.rounded.bg-white.shadow-md {
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.06) !important;
    overflow: hidden;
    min-width: 200px !important;
}

    .menu.rounded.bg-white.shadow-md a {
        font-size: 0.82rem !important;
        padding: 10px 16px !important;
        color: #334155 !important;
        border-bottom: 1px solid #f8fafc !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        transition: background 0.12s, color 0.12s !important;
    }

        .menu.rounded.bg-white.shadow-md a:last-child {
            border-bottom: none !important;
        }

        .menu.rounded.bg-white.shadow-md a:hover {
            background: #f0f4ff !important;
            color: var(--ecl-primary-dark) !important;
        }

/* ── User menu (restyled) ── */
.ecl-usermenu {
    /* Belt-and-braces: force a fixed width + right-anchor with !important
       so no ancestor container (Tailwind md:w-full, wide navbar, etc.) can
       stretch the panel across the header. Was previously bleeding to the
       full width of a distant positioned ancestor. */
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    right: 0 !important;
    left: auto !important;
    background: var(--ecl-surface);
    border: 1px solid var(--ecl-border);
    border-radius: var(--ecl-radius);
    box-shadow: var(--ecl-shadow-pop);
    overflow: hidden;
    padding: 6px;
}

.ecl-usermenu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ecl-border-soft);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ecl-text-muted);
}

    .ecl-usermenu-head i {
        color: var(--ecl-text-faint);
        width: 16px;
        text-align: center;
    }

.ecl-usermenu-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: var(--ecl-radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ecl-text);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}

    /* Unified muted icon treatment — colour comes in on hover */
    .ecl-usermenu-item i {
        width: 16px;
        text-align: center;
        font-size: 0.9rem;
        color: var(--ecl-text-faint);
        transition: color 0.12s;
        flex-shrink: 0;
    }

    .ecl-usermenu-item span {
        flex: 1;
    }

    .ecl-usermenu-item:hover {
        background: var(--ecl-accent-soft);
        color: var(--ecl-primary-dark);
    }

        .ecl-usermenu-item:hover i {
            color: var(--ecl-primary);
        }

/* Cost-centre row reads as context/value, not a plain action */
.ecl-usermenu-context span {
    /* DM Sans + tabular figures for a plain zero (DM Mono's zero is always
       dotted/slashed); tabular keeps the code digits aligned. */
    font-family: 'DM Sans', sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    font-size: 0.8rem;
}

.ecl-usermenu-chev {
    font-size: 0.65rem !important;
    color: var(--ecl-text-faint);
}

/* Logout — distinct exit action, separated and red-tinted */
.ecl-usermenu-logout {
    margin-top: 4px;
    border-top: 1px solid var(--ecl-border-soft);
    border-radius: 0 0 var(--ecl-radius-sm) var(--ecl-radius-sm);
    color: var(--ecl-danger);
}

    .ecl-usermenu-logout i {
        color: var(--ecl-danger);
    }

    .ecl-usermenu-logout:hover {
        background: #fef2f2;
        color: var(--ecl-danger);
    }

        .ecl-usermenu-logout:hover i {
            color: var(--ecl-danger);
        }

/* ════════════════════════════════════════
   SIDEBAR  —  REDESIGNED (state-driven)
   ════════════════════════════════════════ */
.ecl-sidebar {
    width: 264px;
    background: #ffffff;
    border-right: 1px solid #e8edf3;
    box-shadow: 2px 0 16px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: none;
    transition: margin-left 0.22s ease, width 0.22s ease;
}

    /* Desktop collapsed state — slides off to the left, no JS needed */
    .ecl-sidebar.collapsed {
        margin-left: -264px;
    }

/* Sidebar header (logo row already in top navbar; this is the close/title strip) */
.ecl-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

    .ecl-sidebar-head .title {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ecl-primary-dark);
    }

    .ecl-sidebar-head .collapse-btn {
        color: var(--ecl-primary);
        font-size: 0.9rem;
        background: none;
        border: none;
        cursor: pointer;
        transition: color 0.15s;
        padding: 4px;
    }

        .ecl-sidebar-head .collapse-btn:hover {
            color: var(--ecl-primary-dark);
        }

/* ── Search ── */
.ecl-search-wrap {
    position: relative;
    margin: 10px 12px 6px;
    flex-shrink: 0;
}

.ecl-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.75rem;
    pointer-events: none;
    z-index: 1;
}

.ecl-search-input {
    width: 100%;
    padding: 9px 12px 9px 32px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #f4f7fb;
    font-size: 0.8rem;
    color: #334155;
    font-family: 'DM Sans', sans-serif;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    outline: none;
    box-sizing: border-box;
}

    .ecl-search-input::placeholder {
        color: #b0bac9;
    }

    .ecl-search-input:focus {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(147,197,253,0.2);
        background: #ffffff;
    }

/* ── Scroll region holding the tree ── */
.ecl-nav-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px 16px;
}

    .ecl-nav-scroll::-webkit-scrollbar {
        width: 3px;
    }

    .ecl-nav-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .ecl-nav-scroll::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 2px;
    }

        .ecl-nav-scroll::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

.ecl-section-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #b0bac9;
    padding: 12px 10px 6px;
}

/* ── Category row (top level) ── */
.ecl-cat {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2px;
}

.ecl-cat-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
    user-select: none;
}

    .ecl-cat-header:hover {
        background: #f0f4ff;
    }

    .ecl-cat-header.active {
        background: var(--ecl-primary-grad);
    }

        .ecl-cat-header.active .ecl-cat-label {
            color: #ffffff;
            font-weight: 600;
        }

        .ecl-cat-header.active img.ecl-icon {
            /* Keep the logo in full colour; sit it on a white chip so it stays
       legible on the dark active bar, and bump the size a touch. */
            background: #ffffff;
            padding: 2px;
            width: 26px;
            height: 26px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.25);
        }

        .ecl-cat-header.active .ecl-chevron {
            color: rgba(255,255,255,0.7);
        }

    .ecl-cat-header img.ecl-icon {
        width: 22px;
        height: 22px;
        border-radius: 5px;
        object-fit: contain;
        flex-shrink: 0;
    }

    /* FontAwesome icon used by shortcuts (Home) — sized to match image icons */
    .ecl-cat-header .ecl-icon-fa {
        width: 22px;
        font-size: 1rem;
        text-align: center;
        color: #64748b;
        flex-shrink: 0;
    }

    .ecl-cat-header.active .ecl-icon-fa {
        color: #ffffff;
    }

.ecl-cat-label {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 500;
    color: #334155;
    text-transform: capitalize;
    line-height: 1.2;
}

.ecl-chevron {
    color: #94a3b8;
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

    .ecl-chevron.open {
        transform: rotate(180deg);
    }

/* ── Expanded body of a category ── */
.ecl-cat-body {
    padding: 2px 0 6px 6px;
    margin-left: 12px;
    border-left: 1px solid #eef2f7;
}

/* ── Sub-category header ── */
.ecl-subcat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin: 4px 0 2px;
    cursor: pointer;
    border-radius: 7px;
    background: var(--ecl-primary-grad, linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%));
    transition: filter 0.12s, box-shadow 0.12s;
    user-select: none;
    box-shadow: 0 1px 3px rgba(30,58,95,0.18);
}

    .ecl-subcat-header:hover {
        filter: brightness(1.08);
        box-shadow: 0 2px 6px rgba(30,58,95,0.28);
    }

.ecl-subcat-label {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
}

/* Chevron sits on the navy bar — make it white to match */
.ecl-subcat-header .ecl-chevron {
    color: rgba(255,255,255,0.8);
}

/* ── Form link (leaf) ── */
.ecl-form-list {
    position: relative;
    padding-left: 6px;
    margin: 2px 0 4px 4px;
    border-left: 1.5px solid #e8edf3;
}

.ecl-form-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px 6px 8px;
    margin: 0 4px;
    font-size: 0.8rem;
    font-weight: 400;
    color: #3d4f63;
    line-height: 1.3;
    text-decoration: none;
    border-radius: 6px;
    text-transform: capitalize;
    transition: background 0.12s, color 0.12s;
}

    /* Small connector dot anchoring each item to the guide line */
    .ecl-form-link::before {
        content: '';
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #cbd5e1;
        flex-shrink: 0;
        transition: background 0.12s, transform 0.12s;
    }

    .ecl-form-link:hover {
        background: #f0f5ff;
        color: var(--ecl-primary-dark);
        font-weight: 500;
    }

        .ecl-form-link:hover::before {
            background: var(--ecl-primary);
            transform: scale(1.3);
        }

    .ecl-form-link.active {
        background: var(--ecl-accent-soft);
        color: var(--ecl-primary-dark);
        font-weight: 600;
    }

        .ecl-form-link.active::before {
            background: var(--ecl-primary);
            transform: scale(1.4);
        }

.ecl-empty-hint {
    padding: 10px 12px;
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
}

/* ── Open-sidebar tab (shows when collapsed on desktop) ── */
.ecl-open-tab {
    position: fixed;
    top: 80px;
    left: 0;
    z-index: 40;
    background: var(--ecl-primary-grad);
    color: #fff;
    border: none;
    border-radius: 0 8px 8px 0;
    padding: 10px 8px;
    cursor: pointer;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
    transition: padding 0.15s;
}

    .ecl-open-tab:hover {
        padding-left: 12px;
    }

/* ════════════════════════════════════════
   MOBILE DRAWER
   ════════════════════════════════════════ */
.ecl-mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.55);
    z-index: 45;
    animation: ecl-fade 0.2s ease;
}

@keyframes ecl-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .ecl-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 50;
        width: 280px;
        margin-left: 0;
        box-shadow: 4px 0 24px rgba(0,0,0,0.25);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

        .ecl-sidebar.drawer-open {
            transform: translateX(0);
        }
        /* On mobile the desktop "collapsed" class is irrelevant; drawer state rules */
        .ecl-sidebar.collapsed {
            margin-left: 0;
        }
}

/* ── Main content ── */
.bg-gray-100.flex-1.p-6 {
    background: #f1f5f9 !important;
}

/* ── Scrollbars — thin, rounded, subtle (matches sidebar treatment) ── */
/* Main content scroll area */
article.overflow-y-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

article.overflow-y-scroll::-webkit-scrollbar-track {
    background: transparent;
}

article.overflow-y-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

    article.overflow-y-scroll::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
        background-clip: content-box;
    }

/* Global fallback for any other scroll containers in the app */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

    *::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
        background-clip: content-box;
    }

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* ════════════════════════════════════════
   REUSABLE MODAL  (.ecl-modal-*)
   Compact, branded, scrolls. Reuse these classes on other modals
   (incl. EclModal.razor) for a consistent look.
   ════════════════════════════════════════ */
.ecl-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(15,23,42,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: ecl-fade 0.15s ease;
}

.ecl-modal {
    background: var(--ecl-surface);
    border-radius: var(--ecl-radius);
    box-shadow: var(--ecl-shadow-pop);
    width: 100%;
    max-width: 760px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--ecl-font);
}

.ecl-modal-header {
    background: var(--ecl-primary-grad);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.ecl-modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.ecl-modal-subtitle {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.7);
    margin: 2px 0 0;
}

/* Close button — matches the Task Capture / search modal close (translucent
   white square, white X). The explicit white on the inner i stops a global
   .fa / red utility from tinting the glyph red. */
.ecl-modal-close {
    background: rgba(255,255,255,0.14) !important;
    border: none;
    color: #ffffff !important;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .ecl-modal-close i,
    .ecl-modal-close .fa {
        color: #ffffff !important;
    }

    .ecl-modal-close:hover {
        background: rgba(255,255,255,0.26) !important;
    }

.ecl-modal-search-wrap {
    position: relative;
    padding: 16px 20px 8px;
    flex-shrink: 0;
}

.ecl-modal-search-icon {
    position: absolute;
    left: 33px;
    top: 50%;
    transform: translateY(-30%);
    color: var(--ecl-text-faint);
    font-size: 0.8rem;
    pointer-events: none;
}

.ecl-modal-search {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 1px solid var(--ecl-border);
    border-radius: var(--ecl-radius-sm);
    background: #f8fafc;
    font-size: 0.88rem;
    color: var(--ecl-text);
    font-family: var(--ecl-font);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

    .ecl-modal-search:focus {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(147,197,253,0.2);
        background: #ffffff;
    }

    .ecl-modal-search::placeholder {
        color: var(--ecl-text-faint);
    }

.ecl-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
}

.ecl-modal-loading,
.ecl-modal-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 120px;
    color: var(--ecl-text-muted);
    font-size: 0.85rem;
}

.ecl-modal-table {
    width: 100%;
    border-collapse: collapse;
}

    .ecl-modal-table thead th {
        position: sticky;
        top: 0;
        background: var(--ecl-surface);
        z-index: 1;
        text-align: left;
        padding: 10px 14px;
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--ecl-primary-dark);
        border-bottom: 2px solid var(--ecl-border);
    }

.ecl-modal-row {
    cursor: pointer;
    transition: background 0.1s;
}

    .ecl-modal-row td {
        padding: 11px 14px;
        font-size: 0.83rem;
        color: var(--ecl-text);
        border-bottom: 1px solid var(--ecl-border-soft);
    }

        .ecl-modal-row td.mono {
            /* DM Mono's zero always carries a dot or slash (the 'zero' feature only
       switches between the two), which reads as a struck-through zero. Use the
       body sans with tabular figures instead: plain oval zeros that still align
       in a column. */
            font-family: 'DM Sans', sans-serif;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.02em;
            font-size: 0.8rem;
            color: var(--ecl-text-muted);
        }

    .ecl-modal-row:hover td {
        background: var(--ecl-accent-soft);
        color: var(--ecl-primary-dark);
    }

        .ecl-modal-row:hover td.mono {
            color: var(--ecl-primary);
        }

/* Company (COM) group header — non-clickable banner that groups its branches */
.ecl-modal-company td {
    padding: 10px 14px;
    background: var(--ecl-accent-soft);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ecl-primary-dark);
    border-bottom: 1px solid #d7e0f5;
    border-top: 1px solid #d7e0f5;
    cursor: default; /* not selectable */
    user-select: none;
}

    .ecl-modal-company td.mono {
        color: var(--ecl-primary);
    }

/* No hover affordance on company rows — signals "not clickable" */
.ecl-modal-company:hover td {
    background: var(--ecl-accent-soft);
}

/* Child branches sit visually under their company */
.ecl-modal-child td:first-child {
    padding-left: 28px;
    position: relative;
}

    .ecl-modal-child td:first-child::before {
        content: '';
        position: absolute;
        left: 14px;
        top: 50%;
        width: 6px;
        height: 1px;
        background: var(--ecl-text-faint);
        opacity: 0.5;
    }

.ecl-modal-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--ecl-border-soft);
    color: var(--ecl-text-muted);
}

    .ecl-modal-tag.com {
        background: var(--ecl-accent-soft);
        color: var(--ecl-primary);
    }

.ecl-modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--ecl-border-soft);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

/* ════════════════════════════════════════
   NAVBAR POPOVERS  (notifications / approvals)
   ════════════════════════════════════════ */
.ecl-popover {
    width: 360px;
    max-width: calc(100vw - 24px);
    background: var(--ecl-surface);
    border: 1px solid var(--ecl-border);
    border-radius: var(--ecl-radius);
    box-shadow: var(--ecl-shadow-pop);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ecl-popover-wide {
    width: 420px;
}

.ecl-popover-header {
    background: var(--ecl-primary-grad);
    padding: 13px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.ecl-popover-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
}

    .ecl-popover-title i {
        color: rgba(255,255,255,0.8);
        font-size: 0.85rem;
    }

.ecl-popover-count {
    background: #ffffff;
    color: var(--ecl-primary-dark);
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ecl-popover-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ecl-popover-close {
    background: rgba(255,255,255,0.12);
    border: none;
    color: #ffffff;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s;
}

    .ecl-popover-close:hover {
        background: rgba(255,255,255,0.25);
    }

.ecl-popover-body {
    background: var(--ecl-surface);
}

.ecl-popover-scroll {
    max-height: 380px;
    overflow-y: auto;
}

.ecl-popover-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 20px;
    color: var(--ecl-text-faint);
    font-size: 0.82rem;
}

    .ecl-popover-empty i {
        font-size: 1.5rem;
        opacity: 0.5;
    }

.ecl-popover-footer {
    border-top: 1px solid var(--ecl-border-soft);
    padding: 8px;
    flex-shrink: 0;
}

.ecl-popover-link {
    display: block;
    text-align: center;
    padding: 9px;
    border-radius: var(--ecl-radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--ecl-primary);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}

    .ecl-popover-link:hover {
        background: var(--ecl-accent-soft);
        color: var(--ecl-primary-dark);
    }

/* ── Approval list item ── */
.ecl-approval-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ecl-border-soft);
    text-decoration: none;
    transition: background 0.1s;
}

    .ecl-approval-item:last-child {
        border-bottom: none;
    }

    .ecl-approval-item:hover {
        background: var(--ecl-accent-hover);
    }

.ecl-approval-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--ecl-accent-soft);
    color: var(--ecl-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.ecl-approval-info {
    flex: 1;
    min-width: 0;
}

.ecl-approval-amount {
    /* DM Sans + tabular figures: plain zero, digits still aligned. */
    font-family: 'DM Sans', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ecl-primary-dark);
    line-height: 1.2;
}

.ecl-approval-meta {
    font-size: 0.74rem;
    color: var(--ecl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.ecl-approval-sub {
    font-size: 0.7rem;
    color: var(--ecl-text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ecl-approval-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.ecl-approval-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.12s;
}

    .ecl-approval-btn:hover {
        filter: brightness(0.92);
    }

    .ecl-approval-btn.accept {
        background: #dcfce7;
        color: #15803d;
    }

    .ecl-approval-btn.reject {
        background: #fee2e2;
        color: #b91c1c;
    }

    .ecl-approval-btn.finalize {
        background: var(--ecl-accent-soft);
        color: var(--ecl-primary);
    }

/* ════════════════════════════════════════════════════════════════════
   5. PAGE SCAFFOLD REGIONS  (EclPageScaffold / EclDynamicPage)
   ════════════════════════════════════════════════════════════════════ */

/* Content column + optional aside panel */
.ecl-scaffold-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}

    .ecl-scaffold-main.has-aside {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

@media (max-width: 1100px) {
    .ecl-scaffold-main.has-aside {
        grid-template-columns: 1fr;
    }
}

.ecl-scaffold-primary > * + * {
    margin-top: 18px;
}

/* Toolbar: filter controls flow in a row and wrap */
.ecl-region-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-end;
    padding: 14px 20px;
}

/* Footer button bar sits flush right, matches ecl-btn-row spacing */
.ecl-region-footer {
    justify-content: flex-end;
    margin-top: 0; /* .ecl-btn-row adds 16px; scaffold gap already covers it */
}

/* Header actions cluster (right side of the banner) */
.ecl-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Aside panel headings reuse the section-title style */
.ecl-region-aside .ecl-section-title {
    margin-top: 14px;
}

    .ecl-region-aside .ecl-section-title:first-child {
        margin-top: 0;
    }

/* ════════════════════════════════════════════════════════════════════
   6. BLAZOR ERROR UI
   Hidden by default; blazor.web.js flips it visible on an unhandled
   exception. Fixed bottom banner so it never participates in the
   layout flex row (unstyled, it rendered as a phantom right column).
   ════════════════════════════════════════════════════════════════════ */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background: #fef9c3;
    color: #713f12;
    border-top: 1px solid #fde047;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.12);
    padding: 0.6rem 1.25rem 0.7rem;
    font-family: var(--ecl-font);
    font-size: 0.85rem;
}

    #blazor-error-ui .reload {
        color: var(--ecl-primary);
        font-weight: 600;
        text-decoration: underline;
        margin-left: 8px;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 1rem;
        top: 0.6rem;
    }


/* ============================================================================
   COMPONENT & PAGE STYLES — merged from per-page <style> blocks.
   Appended so the inline blocks can be removed from the .razor files.
   ============================================================================ */


/* ---------- EclButton ---------- */
/* ── Canonical Eclipse button — solid fill, rounded, icon-left, inline ──
       Colours now read from the shared --ecl-* brand tokens (with fallbacks)
       so every button matches the app. Sizing/behaviour unchanged. */
.ecl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border: none;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.16s ease;
}

    .ecl-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .ecl-btn .ecl-btn-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        /* icon sits inline via the flex gap — no absolute positioning */
    }

.ecl-btn-primary {
    background: var(--ecl-primary, #2d5a8e);
    color: #fff;
}

    .ecl-btn-primary:hover:not(:disabled) {
        background: var(--ecl-primary-dark, #1e3a5f);
        box-shadow: 0 4px 14px rgba(30, 58, 95, 0.32);
        transform: translateY(-1px);
    }

.ecl-btn-danger {
    background: #dc2626;
    color: #fff;
}

    .ecl-btn-danger:hover:not(:disabled) {
        background: #b91c1c;
        box-shadow: 0 4px 14px rgba(185, 28, 28, 0.32);
        transform: translateY(-1px);
    }


/* ---------- EclTextBox ---------- */
/* ── Brand field styling (label-notch kept, look modernised) ─────────
       Soft tokened border, navy focus ring, proper radius. Applies to text,
       time, tel, number, date and search variants via the .ecl-field class. */
.ecl-field {
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding: 9px 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--ecl-text, #334155);
    background: var(--ecl-surface, #ffffff);
    border: 1px solid var(--ecl-border, #cbd5e1);
    border-radius: var(--ecl-radius-sm, 8px);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .ecl-field::placeholder {
        color: var(--ecl-text-faint, #94a3b8);
    }

    .ecl-field:focus {
        border-color: var(--ecl-primary, #2d5a8e);
        box-shadow: 0 0 0 3px rgba(45, 90, 142, 0.16);
    }

    .ecl-field:disabled {
        background: var(--ecl-border-soft, #f1f5f9);
        color: var(--ecl-text-muted, #64748b);
        cursor: not-allowed;
    }

.ecl-field-number {
    text-align: right;
}
/* Search variant: room for the magnifier button on the right */
.ecl-field-search {
    padding-right: 44px;
}

.ecl-field-search-btn {
    color: var(--ecl-primary, #2d5a8e);
    opacity: 0.85;
    border-top-right-radius: var(--ecl-radius-sm, 8px);
    border-bottom-right-radius: var(--ecl-radius-sm, 8px);
    transition: color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

    .ecl-field-search-btn:hover {
        color: var(--ecl-primary-dark, #1e3a5f);
        opacity: 1;
        background: var(--ecl-accent-soft, #e8eeff);
    }

/* Notch label — tidied to brand muted slate, sits on the border line */
.ecl-field-label {
    color: var(--ecl-text-muted, #64748b) !important;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.blue {
    width: 95%;
    background-color: rgba(59, 130, 246, 0.10);
    color: rgb(59 130 246);
    border: 1px rgb(59 130 246) solid;
    padding: 2px;
    border-radius: 10px;
}

.red {
    width: 5%;
    height: 25px;
    background-color: rgba(239, 68, 68, 0.10);
    color: rgb(0 0 0);
    border: 1px rgb(239 68 68) solid;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    padding-left: 4px;
    border-radius: 50%;
}


/* ---------- EclTextArea ---------- */
/* ── Brand textarea (matches EclTextBox fields) ─────────────────────── */
.ecl-textarea {
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding: 9px 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ecl-text, #334155);
    background: var(--ecl-surface, #ffffff);
    border: 1px solid var(--ecl-border, #cbd5e1);
    border-radius: var(--ecl-radius-sm, 8px);
    outline: none;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .ecl-textarea::placeholder {
        color: var(--ecl-text-faint, #94a3b8);
    }

    .ecl-textarea:focus {
        border-color: var(--ecl-primary, #2d5a8e);
        box-shadow: 0 0 0 3px rgba(45, 90, 142, 0.16);
    }

.ecl-field-label {
    color: var(--ecl-text-muted, #64748b) !important;
    font-weight: 600;
}


/* ---------- EclModal ---------- */
/* ── Search modal — branded restyle (scoped to .ecl-srch) ───────────────
               Local fallbacks mirror the global --ecl-* tokens so the modal stays
               on-brand even in isolation. Only presentation changed; all row logic and
               bindValues wiring are untouched. */
.ecl-srch {
    --s-primary-dark: var(--ecl-primary-dark, #1e3a5f);
    --s-primary: var(--ecl-primary, #2d5a8e);
    --s-primary-grad: var(--ecl-primary-grad, linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%));
    --s-accent-soft: var(--ecl-accent-soft, #e8eeff);
    --s-text: var(--ecl-text, #334155);
    --s-muted: var(--ecl-text-muted, #64748b);
    --s-border: var(--ecl-border, #e2e8f0);
    --s-border-soft: var(--ecl-border-soft, #f1f5f9);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 12px 40px rgba(15,23,42,0.10);
    border: 1px solid var(--s-border);
}

/* Header — navy banner matching the rest of the app */
.ecl-srch-head {
    background: var(--s-primary-grad);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ecl-srch-head-titles {
    display: flex;
    align-items: center;
    gap: 13px;
}

.ecl-srch-head-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.ecl-srch-eyebrow {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: rgba(255,255,255,0.72);
}

.ecl-srch-title {
    margin: 2px 0 0;
    font-size: 1.18rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
}

.ecl-srch-close {
    background: rgba(255,255,255,0.14) !important;
    border: none;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 1.05rem;
    transition: all 0.15s;
}

    .ecl-srch-close svg {
        color: #fff !important;
        stroke: #fff !important;
    }

    .ecl-srch-close:hover {
        background: rgba(255,255,255,0.26) !important;
    }

/* Body */
.ecl-srch-body {
    padding: 16px 18px 18px;
    background: #fff;
}

/* Loading */
.ecl-srch-loading {
    gap: 12px;
}

.ecl-srch-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--s-accent-soft);
    border-top-color: var(--s-primary);
    animation: ecl-srch-spin 0.8s linear infinite;
}

@@keyframes ecl-srch-spin {
    to {
        transform: rotate(360deg);
    }
}

.ecl-srch-loading-text {
    font-size: 0.8rem;
    color: var(--s-muted);
    font-weight: 600;
}

/* Table */
.ecl-srch-table-wrap {
    width: 100%;
    border: 1px solid var(--s-border);
    border-radius: 12px;
    overflow: hidden;
}

.ecl-srch-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.ecl-srch-thead-row th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--s-primary);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 24px;
}

    .ecl-srch-thead-row th:first-child {
        padding-left: 18px;
    }

.ecl-srch-tbody .ecl-srch-row td {
    font-size: 0.84rem;
    color: var(--s-text);
    font-weight: 500;
    border-top: 1px solid var(--s-border-soft);
    background: #fff;
    transition: background 0.12s;
}

.ecl-srch-tbody .ecl-srch-row:nth-child(even) td {
    background: #fafbfc;
}

.ecl-srch-tbody .ecl-srch-row:hover td {
    background: var(--s-accent-soft);
    color: var(--s-primary-dark);
}

.ecl-srch-check {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 5px;
    border: 1px solid #94a3b8;
    accent-color: var(--s-primary);
    cursor: pointer;
}

/* Footer (multi-select) */
.ecl-srch-foot {
    display: flex;
    justify-content: flex-end;
    padding: 14px 20px;
    border-top: 1px solid var(--s-border);
    background: #f8fafc;
}

.ecl-srch-add-btn {
    height: 40px;
    padding: 0 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background: var(--s-primary) !important;
    color: #fff !important;
    font-size: 0.84rem;
    font-weight: 700;
    transition: all 0.16s ease;
}

    .ecl-srch-add-btn:hover {
        background: var(--s-primary-dark) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(30,58,95,0.32);
    }


/* ---------- EclAttachments ---------- */
.ecl-attach {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ecl-dropzone {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    transition: border-color 0.18s ease, background 0.18s ease;
    cursor: pointer;
}

    .ecl-dropzone:hover {
        border-color: var(--t-primary);
        background: var(--t-accent-soft);
    }

.ecl-dropzone-over {
    border-color: var(--t-primary);
    background: var(--t-accent-soft);
}

.ecl-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.ecl-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 26px 16px;
    text-align: center;
    pointer-events: none;
}

.ecl-dropzone-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--t-primary-grad);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.ecl-dropzone-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--t-primary-dark);
}

.ecl-dropzone-sub {
    margin: 0;
    font-size: 0.78rem;
    color: var(--t-muted);
}

.ecl-dropzone-link {
    color: var(--ecl-secondary, #036cdb);
    font-weight: 700;
    text-decoration: underline;
}

.ecl-attach-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.8rem;
}

.ecl-attach-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: var(--t-faint);
    font-size: 0.84rem;
}

.ecl-attach-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ecl-attach-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--t-border);
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .ecl-attach-row:hover {
        border-color: var(--t-primary);
        box-shadow: 0 2px 10px rgba(45,90,142,0.08);
    }

.ecl-attach-open {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.ecl-attach-fileicon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    flex-shrink: 0;
    background: var(--t-accent-soft);
    color: var(--t-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.ecl-attach-open:hover .ecl-attach-fileicon {
    background: var(--t-primary-grad);
    color: #fff;
}

.ecl-attach-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.ecl-attach-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--t-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}

.ecl-attach-open:hover .ecl-attach-name {
    color: var(--t-primary);
    text-decoration: underline;
}

.ecl-attach-size {
    font-size: 0.72rem;
    color: var(--t-muted);
}

.ecl-attach-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ecl-attach-dl,
.ecl-attach-del {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.ecl-attach-dl {
    background: var(--t-accent-soft);
    color: var(--t-primary);
}

    .ecl-attach-dl:hover {
        background: var(--t-primary-grad);
        color: #fff;
    }

.ecl-attach-del {
    background: #f1f5f9;
    color: #64748b;
}

    .ecl-attach-del:hover {
        background: #fee2e2;
        color: #dc2626;
    }


/* ---------- EclGrid ---------- */
.ecl-grid {
    --g-primary-dark: var(--ecl-primary-dark, #1e3a5f);
    --g-primary: var(--ecl-primary, #2d5a8e);
    --g-accent-soft: var(--ecl-accent-soft, #e8eeff);
    --g-text: var(--ecl-text, #334155);
    --g-muted: var(--ecl-text-muted, #64748b);
    --g-border: var(--ecl-border, #e2e8f0);
    --g-border-soft: var(--ecl-border-soft, #f1f5f9);
}

.ecl-grid-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.ecl-grid-groupby {
    padding: 8px 12px;
    font-size: 0.86rem;
    color: var(--g-text);
    background: var(--ecl-surface, #fff);
    border: 1px solid var(--ecl-border, #cbd5e1);
    border-radius: var(--ecl-radius-sm, 8px);
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .ecl-grid-groupby:focus {
        border-color: var(--g-primary);
        box-shadow: 0 0 0 3px rgba(45, 90, 142, 0.16);
    }

.ecl-grid-scroll {
    overflow-x: auto;
    border: 1px solid var(--g-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.03);
}

.ecl-grid-table {
    width: 100%;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
}

    .ecl-grid-table thead th {
        background: var(--g-border-soft);
        padding: 12px 16px;
        font-size: 0.66rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--g-muted);
        border-bottom: 1px solid var(--g-border);
        cursor: pointer;
        white-space: nowrap;
        user-select: none;
        transition: color 0.12s ease;
    }

        .ecl-grid-table thead th:hover {
            color: var(--g-primary);
        }

.ecl-grid-th-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ecl-grid-sort {
    font-size: 0.7rem;
    color: var(--g-primary);
}

.ecl-grid-row td {
    padding: 11px 16px;
    font-size: 0.85rem;
    color: var(--g-text);
    border-bottom: 1px solid var(--g-border-soft);
}

.ecl-grid-row:hover td {
    background: #f8fafc;
}

.ecl-grid-group-cell {
    padding: 11px 16px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--g-primary-dark);
    background: var(--g-accent-soft);
    border-bottom: 1px solid var(--g-border);
    cursor: pointer;
    user-select: none;
}

    .ecl-grid-group-cell:hover {
        background: #dde7fb;
    }

.ecl-grid-group-caret {
    display: inline-block;
    width: 16px;
    color: var(--g-primary);
    font-size: 0.7rem;
}


/* ---------- TaskMaintenance ---------- */
/* ── Task Maintenance — aligned to the shared --ecl-* brand tokens ─────
                   Local fallbacks mirror the global tokens defined in MainLayout, so this
                   page stays on-brand even if viewed in isolation. */
.tm-page {
    --t-primary-dark: var(--ecl-primary-dark, #1e3a5f);
    --t-primary: var(--ecl-primary, #2d5a8e);
    --t-primary-grad: var(--ecl-primary-grad, linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%));
    --t-accent-soft: var(--ecl-accent-soft, #e8eeff);
    --t-accent-hover: var(--ecl-accent-hover, #f0f4ff);
    --t-text: var(--ecl-text, #334155);
    --t-muted: var(--ecl-text-muted, #64748b);
    --t-faint: var(--ecl-text-faint, #94a3b8);
    --t-border: var(--ecl-border, #e2e8f0);
    --t-border-soft: var(--ecl-border-soft, #f1f5f9);
    max-width: 1700px;
    margin: 0 auto;
    padding: 22px 26px 40px;
    color: #0f172a;
}

/* Header — branded banner like the rest of the app */
.tm-header {
    background: var(--t-primary-grad);
    border-radius: var(--ecl-radius, 10px);
    padding: 18px 22px;
    margin-bottom: 22px;
    box-shadow: var(--ecl-shadow, 0 2px 16px rgba(0,0,0,0.06));
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tm-header-titles {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tm-header-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .tm-header-icon i {
        color: #fff;
        font-size: 1.15rem;
    }

.tm-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
}

.tm-subtitle {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.75);
}

/* Full-width content column (capture panel is now a modal) */
.tm-main {
    min-width: 0;
}

/* Cards */
.tm-card {
    background: #fff;
    border: 1px solid var(--t-border);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.03);
}

/* Capture header card */
/* Extra bottom room so the User ID detail line (e.g. "Taariq Solomons"),
                   which EclTextBox renders absolutely positioned below the input, sits
                   INSIDE the card instead of spilling past its bottom edge. */
.tm-capture-head {
    padding: 18px 20px 34px;
    margin-bottom: 18px;
}

.tm-capture-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto;
    gap: 16px;
    align-items: end;
}
/* Alignment fix: EclTextBox wraps itself in `.relative mb-4 mt-2`, so its
                   visible box sits inside its own margins. The Get Details button has no
                   such margins, so with align-items:end the button hung lower than the
                   fields. Strip the textbox margins inside this grid so every cell's control
                   shares the same bottom edge, and the button lines up with the inputs. */
.tm-capture-field > div {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative;
}
    /* The detail span (Details param) is positioned absolute -bottom-8 by
                   EclTextBox. Pin it neatly just under its own input and keep it clipped to
                   the field width so it never overlaps the next column or spills out. */
    .tm-capture-field > div > span[class*="-bottom-8"] {
        bottom: -26px !important;
        left: 0 !important;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--t-text, #334155);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

.tm-capture-action {
    display: flex;
    align-items: flex-end;
}
    /* Match the button height to the EclTextBox input height for a clean row. */
    .tm-capture-action .tm-btn {
        height: 42px;
    }

.tm-capture-field :where(input) {
    min-height: 42px;
}
/* Total Time is a disabled EclTextBox, which renders a grey input that looked
                   odd next to the white fields. Force its background white (it's the only
                   disabled input in this row). */
.tm-capture-field input:disabled,
.tm-capture-field input[disabled] {
    background-color: #ffffff !important;
    color: var(--t-text, #334155) !important;
    -webkit-text-fill-color: var(--t-text, #334155) !important;
    opacity: 1 !important;
}

/* Buttons — aligned to the canonical EclButton (.ecl-btn) look */
.tm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    border: none;
    transition: all 0.16s ease;
    white-space: nowrap;
    text-decoration: none;
    font-family: inherit;
}

    .tm-btn i {
        font-size: 0.9rem;
        line-height: 1;
        flex-shrink: 0;
    }
/* Explicit colours + !important so a global `button {}` reset or Tailwind
                   base can't strip the background (which was making the white Save text
                   disappear on a white surface). */
.tm-btn-primary {
    background: var(--t-primary, #2d5a8e) !important;
    color: #ffffff !important;
}

    .tm-btn-primary i {
        color: #ffffff !important;
    }

    .tm-btn-primary:hover {
        background: var(--t-primary-dark, #1e3a5f) !important;
        box-shadow: 0 4px 14px rgba(30,58,95,0.32);
        transform: translateY(-1px);
    }

.tm-btn-soft {
    background: var(--t-accent-soft, #e8eeff) !important;
    color: var(--t-primary, #2d5a8e) !important;
}

    .tm-btn-soft:hover {
        background: var(--t-accent-hover, #f0f4ff) !important;
    }

.tm-btn-ghost {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

    .tm-btn-ghost i {
        color: #475569 !important;
    }

    .tm-btn-ghost:hover {
        border-color: var(--t-faint) !important;
        color: var(--t-text, #334155) !important;
    }

.tm-btn-block {
    width: 100%;
}
/* On the navy header banner: a translucent white button that reads on-brand */
.tm-btn-onbrand {
    background: rgba(255,255,255,0.16) !important;
    color: #ffffff !important;
}

    .tm-btn-onbrand i {
        color: #ffffff !important;
    }

    .tm-btn-onbrand:hover {
        background: rgba(255,255,255,0.26) !important;
        transform: translateY(-1px);
    }

/* ── Task Capture modal overlay + dialog ─────────────────────────────── */
.tm-modal-overlay {
    /* The modal markup is a sibling of .tm-page, so the --t-* tokens defined
                       on .tm-page don't cascade here. Redefine them on the overlay so the
                       navy header (and everything else in the modal) resolves correctly. */
    --t-primary-dark: var(--ecl-primary-dark, #1e3a5f);
    --t-primary: var(--ecl-primary, #2d5a8e);
    --t-primary-grad: var(--ecl-primary-grad, linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%));
    --t-accent-soft: var(--ecl-accent-soft, #e8eeff);
    --t-accent-hover: var(--ecl-accent-hover, #f0f4ff);
    --t-text: var(--ecl-text, #334155);
    --t-muted: var(--ecl-text-muted, #64748b);
    --t-faint: var(--ecl-text-faint, #94a3b8);
    --t-border: var(--ecl-border, #e2e8f0);
    --t-border-soft: var(--ecl-border-soft, #f1f5f9);
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}

.tm-modal-dialog {
    width: 100%;
    max-width: 780px;
    background: #fff;
    border: 1px solid var(--t-border);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.38);
    overflow: hidden;
    max-height: calc(100vh - 80px);
}

.tm-modal-close {
    background: rgba(255,255,255,0.14) !important;
    border: none;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 1.05rem;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .tm-modal-close i {
        color: #fff !important;
    }

    .tm-modal-close:hover {
        background: rgba(255,255,255,0.26) !important;
    }

/* Branded navy banner head — matches the page header and the other pages.
                   Literal gradient fallback + !important so a global rule or an unresolved
                   token can't render it white. */
.tm-drawer-head {
    padding: 20px 24px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%) !important;
    background: var(--t-primary-grad, linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%)) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.tm-eyebrow {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-weight: 700;
    color: rgba(255,255,255,0.72) !important;
}

.tm-drawer-title {
    margin: 2px 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff !important;
}

.tm-drawer-tabs {
    display: flex;
    padding: 0 24px;
    border-bottom: 1px solid var(--t-border);
    background: #fff;
    flex-shrink: 0;
}

.tm-drawer-tab {
    padding: 13px 4px;
    margin-right: 22px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--t-faint);
    transition: all 0.2s;
}

.tm-drawer-tab-on {
    color: var(--t-primary);
    border-bottom-color: var(--t-primary);
    font-weight: 700;
}

.tm-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 26px 28px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}
/* Even two-column rhythm. align-items:start keeps every cell pinned to the
                   top of its grid row so paired controls share one baseline. The row gap
                   carries the vertical spacing now (the components' own margins are
                   neutralised below), giving consistent, even rows throughout. */
.tm-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 18px;
    align-items: start;
}

.tm-col-2 {
    grid-column: span 1;
    min-width: 0;
}

.tm-col-full {
    grid-column: 1 / -1;
    min-width: 0;
}

/* ── Alignment fix ───────────────────────────────────────────────────────
                   EclTextBox wraps itself in `.relative mb-4 mt-2` (its own top/bottom
                   margins), while EclDropdown has no such margins. On a row that pairs the
                   two (e.g. Priority dropdown + Responsible textbox) the textbox's mt-2
                   shoved it ~8px lower, so the controls didn't line up.

                   Inside this grid only, strip those stray margins so both component types
                   start at the same Y. The grid's row-gap now owns all vertical spacing, so
                   spacing stays even and the pair lines up exactly. */
.tm-field-grid > .tm-col-2 > div,
.tm-field-grid > .tm-col-full > div {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Give the floating-label controls a touch of headroom for the label that
                   sits at -top-2, now that the component margin is gone. Applied to the cell
                   so it affects textbox and dropdown identically. */
.tm-field-grid > .tm-col-2,
.tm-field-grid > .tm-col-full {
    padding-top: 2px;
}

.tm-field-grid :where(input, select, .ecl-input, [class*="w-full"]) {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ── Details-span fix ────────────────────────────────────────────────────
                   Fields with a resolved name (Customer / Responsible / Assigned) render
                   that text as an absolutely-positioned span at -bottom-8 via EclTextBox.
                   Without reserved room it overlapped the next row's label (e.g. Customer's
                   "Foster Felts – Per Site" landing on the Subject label). Reserve bottom
                   space on any cell that contains a detail span, and pin the span tidily
                   under its own input, clipped so it can't spill sideways. */
.tm-field-grid > .tm-col-2:has(span[class*="-bottom-8"]),
.tm-field-grid > .tm-col-full:has(span[class*="-bottom-8"]) {
    padding-bottom: 26px;
}

.tm-field-grid span[class*="-bottom-8"] {
    bottom: -26px !important;
    left: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--t-text, #334155);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Normalise control height across EclTextBox inputs and EclDropdown so every
                   field reads as the same pill, matching the rest of the app. */
.tm-field-grid input:not([type="checkbox"]),
.tm-field-grid select {
    min-height: 42px;
}
/* EclDropdown's clickable box → same height + rounding as the inputs. */
.tm-field-grid > .tm-col-2 > .relative > div[class*="border"],
.tm-field-grid > .tm-col-full > .relative > div[class*="border"] {
    min-height: 42px;
}

.tm-drawer-foot {
    padding: 16px 26px;
    border-top: 1px solid var(--t-border);
    background: #f8fafc;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

/* Table */
.tm-table-card {
    padding: 4px;
    overflow: hidden;
}

.tm-table-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.tm-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
}

    .tm-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f8fafc;
        border-bottom: 1px solid var(--t-border);
        padding: 12px 10px;
        font-size: 0.64rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--t-muted);
        white-space: nowrap;
    }

.tm-th-center {
    text-align: center;
}

/* Per-row delete button in the capture grid. Subtle by default (so the grid
                   stays calm), resolving to a clear red affordance on hover. */
.tm-row-del {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.85rem;
    transition: background 0.12s, color 0.12s;
}

    .tm-row-del:hover {
        background: #fee2e2;
        color: #b91c1c;
    }

    .tm-row-del i, .tm-row-del .fa {
        color: inherit !important;
    }

.tm-table tbody td {
    padding: 6px 8px;
    vertical-align: middle;
    white-space: nowrap;
}

.tm-row-active {
    background: var(--t-accent-soft);
    box-shadow: inset 3px 0 0 var(--t-primary);
}

.tm-row {
    border-top: 1px solid var(--t-border-soft);
}

    .tm-row:hover {
        background: #f8fafc;
    }

.tm-row-editable {
    background: #f5f8ff;
}

    .tm-row-editable:hover {
        background: var(--t-accent-soft, #e8eeff);
    }

.tm-input {
    width: 100%;
    min-width: 120px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 7px 9px;
    font-size: 0.82rem;
    color: #0f172a;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .tm-input:focus {
        border-color: var(--t-primary);
        box-shadow: 0 0 0 3px rgba(45, 90, 142, 0.16);
    }

    .tm-input:disabled {
        background: #f1f5f9;
        color: var(--t-muted);
        cursor: not-allowed;
    }
/* Read-only Subject once a task is resolved via search — greyed and
                   non-interactive so it's clearly populated-from-task, not hand-editable. */
.tm-input-locked,
.tm-input-locked:focus {
    background: #f1f5f9;
    color: var(--t-muted);
    cursor: not-allowed;
    box-shadow: none;
    border-color: #cbd5e1;
}

.tm-input-wide {
    min-width: 200px;
}

.tm-input-narrow {
    min-width: 80px;
}

.tm-select {
    min-width: 150px;
    cursor: pointer;
}

.tm-check {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 6px;
    border: 1px solid #94a3b8;
    accent-color: #059669;
    cursor: pointer;
}

.tm-table-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--t-muted);
    border-top: 1px solid var(--t-border-soft);
}

    .tm-table-hint kbd {
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        border-bottom-width: 2px;
        border-radius: 5px;
        padding: 1px 6px;
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--t-text);
        font-family: inherit;
    }

/* Save bar — sits under the timesheet table */
.tm-save-bar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 14px 2px 0;
}

/* Empty state — shown before Get Details loads the grid */
.tm-empty {
    background: #fff;
    border: 1px dashed var(--t-border);
    border-radius: 16px;
    padding: 48px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tm-empty-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--t-accent-soft);
    color: var(--t-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.tm-empty-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--t-primary-dark);
}

.tm-empty-text {
    margin: 0;
    max-width: 380px;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--t-muted);
}

    .tm-empty-text strong {
        color: var(--t-text);
        font-weight: 700;
    }

/* Responsive — let the modal fill more of the screen on narrow viewports */
@@media (max-width: 760px) {
    .tm-modal-dialog {
        max-width: 100%;
    }

    .tm-field-grid {
        grid-template-columns: 1fr;
    }
}

@@media (max-width: 900px) {
    .tm-capture-grid {
        grid-template-columns: 1fr 1fr;
    }

    .tm-capture-action {
        grid-column: 1 / -1;
    }
}


/* ---------- PURP0010T ---------- */
/* ── Purchase Order — aligned to the shared --ecl-* brand tokens ─────────
                           The outer container is now EclPageScaffold (CssClass="po-page"), which
                           owns max-width / padding / scroll. This rule only defines the local token
                           palette that the rest of the PO styles consume. */
.po-page {
    --t-primary-dark: var(--ecl-primary-dark, #1e3a5f);
    --t-primary: var(--ecl-primary, #2d5a8e);
    --t-primary-grad: var(--ecl-primary-grad, linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%));
    --t-accent-soft: var(--ecl-accent-soft, #e8eeff);
    --t-accent-hover: var(--ecl-accent-hover, #f0f4ff);
    --t-text: var(--ecl-text, #334155);
    --t-muted: var(--ecl-text-muted, #64748b);
    --t-faint: var(--ecl-text-faint, #94a3b8);
    --t-border: var(--ecl-border, #e2e8f0);
    --t-border-soft: var(--ecl-border-soft, #f1f5f9);
    color: #0f172a;
}

/* Header actions live in the scaffold's HeaderRight slot */
.po-mode {
    display: flex;
    gap: 14px;
    padding-right: 6px;
}

.po-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 0.82rem;
    cursor: pointer;
}

/* Cards */
.po-card {
    background: #fff;
    border: 1px solid var(--t-border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.03);
}

/* Order strip */
.po-strip {
    padding: 16px 18px;
}

.po-strip-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.4fr 1.2fr 1.4fr 0.9fr;
    gap: 16px;
    align-items: start;
}

.po-capex {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 6px;
    align-self: end;
}

.po-capex-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--t-faint);
}

.po-val {
    font-weight: 700;
    color: var(--t-text);
}

.po-neg {
    font-weight: 700;
    color: #dc2626;
}

/* ── Required-field cues (shown only after a save is attempted) ──────────
                           The Supplier field is a shared EclTextBox we don't restyle directly; when
                           its wrapper carries .po-field-required we tint the inner input border red.
                           Targeting input + the search-box border div covers both EclTextBox modes. */
.po-field-required input,
.po-field-required .relative > div[class*="border"] {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220,38,38,0.14) !important;
    border-radius: 8px;
}

.po-required-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #dc2626;
}
/* Grid emphasis when no line is captured yet. */
.po-grid-required {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220,38,38,0.12);
}

.po-grid-required-hint {
    margin-left: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fecaca;
}

    .po-grid-required-hint i {
        color: #fecaca;
    }

/* ── Alignment fix (mirrors TSKP0080T) ────────────────────────────────────
                           EclTextBox wraps itself in `.relative mb-4 mt-2` (its own top/bottom
                           margins); EclDropdown has none. Mixing the two in a row (e.g. the strip's
                           Order Nbr / Supplier textboxes next to the PO Reason dropdown) pushed the
                           dropdown ~8px lower so nothing shared a baseline. Inside the PO grids we
                           strip those stray margins so every control starts at the same Y, and let
                           the grid gap / column flow own all spacing. */
.po-strip-grid > div > .relative {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Normalise control heights so textbox + dropdown read as the same pill. */
.po-strip-grid input:not([type="checkbox"]):not([type="radio"]),
.po-strip-grid select {
    min-height: 42px;
}

.po-strip-grid > div > .relative > div[class*="border"] {
    min-height: 42px;
}

/* Reserve room under the Supplier / Allocation cells for the resolved-name
                           detail span (rendered absolute at -bottom-8 by EclTextBox) so it sits
                           below the box instead of overlapping the row, and pin it tidily. */
.po-strip-grid > div:has(span[class*="-bottom-8"]) {
    padding-bottom: 24px;
}

.po-strip-grid span[class*="-bottom-8"] {
    bottom: -24px !important;
    left: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--t-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Capture-flow layout: wide primary zone + narrower reference rail. */
.po-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.po-primary {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
/* Order Details + Delivery sit side by side inside the primary zone. */
.po-primary-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.po-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Panels */
.po-panel {
    overflow: hidden;
}

.po-panel-head {
    background: var(--t-primary-grad);
    color: #fff;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 8px 14px;
}

/* ── Reference cards (Credit Indicator, Authorization) ────────────────────
                           These are read-only context, not capture. We quiet them: a light header
                           instead of the full navy bar so the data-entry panels lead the eye. */
.po-refcard {
    overflow: hidden;
    border-color: var(--t-border-soft);
}

.po-refcard-head {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f1f5f9;
    color: var(--t-muted);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 14px;
    border-bottom: 1px solid var(--t-border);
}

    .po-refcard-head i {
        color: var(--t-faint);
        font-size: 0.82rem;
    }

.po-refcard-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.po-radio-dark {
    color: var(--t-text);
}

.po-warn-ico {
    color: #dc2626;
    margin-right: 4px;
}
/* Even vertical rhythm inside a panel: the gap owns spacing, and each
                           EclTextBox/EclDropdown's own margins are neutralised below so a panel that
                           mixes the two (Order Details has textboxes + VAT/Terms dropdowns) keeps
                           consistent gaps instead of bunching where a dropdown sits. */
.po-panel-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .po-panel-body > .relative,
    .po-inline > div > .relative {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .po-panel-body input:not([type="checkbox"]):not([type="radio"]),
    .po-panel-body select {
        min-height: 42px;
    }

    .po-panel-body > .relative > div[class*="border"],
    .po-inline > div > .relative > div[class*="border"] {
        min-height: 42px;
    }

.po-inline {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.po-inline-grow {
    flex: 1;
    min-width: 0;
}

.po-inline-narrow {
    width: 88px;
    flex-shrink: 0;
}

.po-textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.84rem;
    color: #0f172a;
    outline: none;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .po-textarea:focus {
        border-color: var(--t-primary);
        box-shadow: 0 0 0 3px rgba(45,90,142,0.16);
    }

/* Sub-panels (Order Type, Authorization) */
.po-subpanel {
    border: 1px solid var(--t-border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 12px;
}

.po-subpanel-head {
    background: #eef2f7;
    color: var(--t-primary-dark);
    font-weight: 600;
    font-size: 0.72rem;
    padding: 6px 12px;
    border-bottom: 1px solid var(--t-border);
}

.po-ordertype {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
}

    .po-ordertype .po-radio {
        color: var(--t-text);
    }

.po-auth {
    padding: 10px 12px;
}

    .po-auth .po-radio {
        color: var(--t-text);
    }

/* Key/value rows */
.po-kv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.86rem;
}

.po-kv-key {
    color: var(--t-muted);
}

.po-kv-val {
    font-weight: 600;
    color: var(--t-text);
}

.po-kv-total {
    border-top: 1px solid var(--t-border);
    padding-top: 10px;
    margin-top: 4px;
}

    .po-kv-total .po-kv-key, .po-kv-total .po-kv-val {
        font-weight: 700;
        color: var(--t-primary-dark);
    }

.po-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
}

.po-status-link {
    color: var(--ecl-secondary, #036cdb);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
}

/* Buttons */
.po-btn-ghost {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    font-size: 0.76rem;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.16s;
}

    .po-btn-ghost:hover {
        background: rgba(255,255,255,0.25);
    }

.po-btn-soft {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--t-accent-soft);
    color: var(--t-primary);
    border: none;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.16s;
}

    .po-btn-soft:hover {
        background: var(--t-accent-hover);
    }

/* Grid */
.po-grid-card {
    overflow: hidden;
}

.po-grid-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.po-table-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.po-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
}

    .po-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f8fafc;
        border-bottom: 1px solid var(--t-border);
        padding: 10px;
        font-size: 0.64rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--t-muted);
        white-space: nowrap;
    }

    .po-table tbody td {
        padding: 5px 8px;
        vertical-align: middle;
        white-space: nowrap;
        border-top: 1px solid var(--t-border-soft);
    }

    .po-table tbody tr:nth-child(even) {
        background: #f8fafc;
    }

    .po-table tfoot td {
        padding: 10px 8px;
        background: #f1f5f9;
        border-top: 1px solid var(--t-border);
    }

.po-num {
    text-align: right;
}

.po-th-center {
    text-align: center;
}

.po-strong {
    font-weight: 700;
    color: var(--t-text);
}

.po-empty-row {
    padding: 24px;
    text-align: center;
    color: var(--t-faint);
}

.po-cell {
    width: 100%;
    min-width: 90px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 6px;
    background: transparent;
    font-size: 0.82rem;
    color: #0f172a;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

    .po-cell:focus {
        border-color: var(--t-primary);
        background: #fff;
        box-shadow: 0 0 0 2px rgba(45,90,142,0.2);
    }

.po-cell-wide {
    min-width: 170px;
}

.po-select {
    cursor: pointer;
    background: #fff;
}

    .po-select:focus {
        border-color: var(--t-primary);
        box-shadow: 0 0 0 2px rgba(45,90,142,0.2);
    }

.po-row-del {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 0.9rem;
}

    .po-row-del:hover {
        color: #b91c1c;
    }

/* Footer */
.po-footer {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.po-audit {
    overflow: hidden;
}
/* passed to EclTabPanel via CssClass */
.po-totals {
    overflow: hidden;
}

/* Save bar */
/* Sticky action bar — stays visible while the line list scrolls. */
.po-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 0;
    padding: 12px 16px;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(6px);
    border: 1px solid var(--t-border);
    border-radius: 14px;
    box-shadow: 0 -2px 14px rgba(15,23,42,0.06);
}

.po-save-bar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.po-save-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.po-save-total {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.po-save-total-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--t-faint);
}

.po-save-total-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--t-primary-dark);
}

.po-dirty-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

    .po-dirty-pill i {
        font-size: 0.5rem;
        color: #f59e0b;
    }

/* ── Attachments tab ──────────────────────────────────────────────────── */
.po-attach {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.po-dropzone {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    transition: border-color 0.18s ease, background 0.18s ease;
    cursor: pointer;
}

    .po-dropzone:hover {
        border-color: var(--t-primary);
        background: var(--t-accent-soft);
    }

.po-dropzone-over {
    border-color: var(--t-primary);
    background: var(--t-accent-soft);
}

/* The InputFile renders a real <input type=file>; stretch + hide it over the
                           zone so a click or drop anywhere triggers it. */
.po-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.po-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 26px 16px;
    text-align: center;
    pointer-events: none;
}

.po-dropzone-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--t-primary-grad);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.po-dropzone-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--t-primary-dark);
}

.po-dropzone-sub {
    margin: 0;
    font-size: 0.78rem;
    color: var(--t-muted);
}

.po-dropzone-link {
    color: var(--ecl-secondary, #036cdb);
    font-weight: 700;
    text-decoration: underline;
}

.po-attach-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.8rem;
}

.po-attach-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: var(--t-faint);
    font-size: 0.84rem;
}

.po-attach-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.po-attach-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--t-border);
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .po-attach-row:hover {
        border-color: var(--t-primary);
        box-shadow: 0 2px 10px rgba(45,90,142,0.08);
    }

/* The icon + name area is a button that downloads on click. */
.po-attach-open {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.po-attach-fileicon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    flex-shrink: 0;
    background: var(--t-accent-soft);
    color: var(--t-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.po-attach-open:hover .po-attach-fileicon {
    background: var(--t-primary-grad);
    color: #fff;
}

.po-attach-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.po-attach-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--t-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}

.po-attach-open:hover .po-attach-name {
    color: var(--t-primary);
    text-decoration: underline;
}

.po-attach-size {
    font-size: 0.72rem;
    color: var(--t-muted);
}

.po-attach-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.po-attach-dl,
.po-attach-del {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.po-attach-dl {
    background: var(--t-accent-soft);
    color: var(--t-primary);
}

    .po-attach-dl:hover {
        background: var(--t-primary-grad);
        color: #fff;
    }

.po-attach-del {
    background: #f1f5f9;
    color: #64748b;
}

    .po-attach-del:hover {
        background: #fee2e2;
        color: #dc2626;
    }

/* Responsive */
@@media (max-width: 1180px) {
    /* Reference rail drops below the primary zone on narrower screens. */
    .po-layout {
        grid-template-columns: 1fr;
    }

    .po-footer {
        grid-template-columns: 1fr;
    }

    .po-strip-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@@media (max-width: 720px) {
    .po-primary-row {
        grid-template-columns: 1fr;
    }

    .po-strip-grid {
        grid-template-columns: 1fr;
    }
}


/* ---------- MainLayout footer ----------
   Full navy bar, matching the top header — the app's brand chrome bookending
   the page. White text on the navy gradient with the "Eclipse Technologies"
   wordmark bolder for the brand anchor. */
.ecl-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--ecl-primary-grad, linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%));
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08) inset;
}

.ecl-footer-copy,
.ecl-footer-note {
    color: rgba(255, 255, 255, 0.75);
}

.ecl-footer-brand {
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.04em;
}

.ecl-footer-sep {
    color: rgba(255, 255, 255, 0.4);
}


/* ---------- Body error overlay (from ErrorBoundary in MainLayout) ---------- */
.ecl-error-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ecl-error-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.25);
    max-width: 460px;
    width: 100%;
    padding: 28px 26px 22px;
    text-align: center;
    animation: eclErrorPop 0.18s ease-out;
}

@keyframes eclErrorPop {
    from {
        transform: scale(0.94);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.ecl-error-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #fef3c7;
    color: #b45309;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 14px;
}

.ecl-error-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ecl-primary-dark, #1e3a5f);
    margin: 0 0 8px;
}

.ecl-error-body {
    font-size: 0.86rem;
    color: var(--ecl-text-muted, #64748b);
    line-height: 1.5;
    margin: 0 0 20px;
}

.ecl-error-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.ecl-error-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 8px;
    border: none;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

    .ecl-error-btn:active {
        transform: translateY(1px);
    }

.ecl-error-btn-secondary {
    background: #f1f5f9;
    color: var(--ecl-text, #334155);
}

    .ecl-error-btn-secondary:hover {
        background: #e2e8f0;
    }

.ecl-error-btn-primary {
    background: var(--ecl-primary-grad, linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%));
    color: #fff;
}

    .ecl-error-btn-primary:hover {
        filter: brightness(1.08);
    }


/* ============================================================================
   HomeSetupModal — customize your home page
   Append to eclipse.css. Uses --ecl-primary / --ecl-primary-dark tokens so it
   matches the rest of the app.
============================================================================ */

.ecl-setup-root {
    position: fixed;
    inset: 0;
    z-index: 4200;
}

.ecl-setup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}

.ecl-setup-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    pointer-events: none;
}

.ecl-setup-box {
    position: relative;
    pointer-events: auto;
    width: 100%;
    max-width: 620px;
    max-height: 88vh;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ecl-setup-pop 0.18s ease-out;
}

@keyframes ecl-setup-pop {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.ecl-setup-head {
    padding: 18px 22px 16px;
    background: var(--ecl-primary-grad, linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%));
    color: #fff;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.ecl-setup-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
}

.ecl-setup-sub {
    margin: 3px 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.4;
}

.ecl-setup-close {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

    .ecl-setup-close:hover {
        background: rgba(255, 255, 255, 0.22);
    }

/* ── Body ───────────────────────────────────────────────────────────────── */
.ecl-setup-body {
    padding: 16px 22px;
    overflow-y: auto;
    flex: 1;
}

.ecl-setup-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 2px 12px;
    border-bottom: 1px solid rgba(30, 58, 95, 0.08);
    margin-bottom: 12px;
}

.ecl-setup-count {
    font-size: 0.82rem;
    color: var(--ecl-primary, #2d5a8e);
}

    .ecl-setup-count strong {
        color: var(--ecl-primary-dark, #1e3a5f);
        font-weight: 700;
    }

.ecl-setup-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ecl-setup-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ecl-primary, #2d5a8e);
    cursor: pointer;
}

    .ecl-setup-link:hover {
        text-decoration: underline;
    }

.ecl-setup-dot {
    color: rgba(30, 58, 95, 0.3);
    font-size: 0.8rem;
}

/* ── Groups & items ─────────────────────────────────────────────────────── */
.ecl-setup-group {
    margin-bottom: 14px;
}

    .ecl-setup-group:last-child {
        margin-bottom: 0;
    }

.ecl-setup-group-head {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ecl-primary-dark, #1e3a5f);
    margin-bottom: 6px;
    padding-left: 4px;
}

.ecl-setup-group-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ecl-setup-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(30, 58, 95, 0.14);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .ecl-setup-item:hover {
        border-color: var(--ecl-primary, #2d5a8e);
        background: rgba(45, 90, 142, 0.02);
    }

    .ecl-setup-item.is-on {
        background: rgba(45, 90, 142, 0.04);
        border-color: rgba(45, 90, 142, 0.28);
    }

    .ecl-setup-item input[type="checkbox"] {
        margin: 3px 0 0;
        width: 16px;
        height: 16px;
        accent-color: var(--ecl-primary-dark, #1e3a5f);
        cursor: pointer;
        flex-shrink: 0;
    }

.ecl-setup-item-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.ecl-setup-item-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ecl-primary-dark, #1e3a5f);
    line-height: 1.3;
}

.ecl-setup-item-desc {
    font-size: 0.78rem;
    color: var(--ecl-primary, #2d5a8e);
    opacity: 0.85;
    line-height: 1.4;
}

.ecl-setup-item-state {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ecl-primary, #2d5a8e);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.ecl-setup-item.is-on .ecl-setup-item-state {
    background: rgba(45, 90, 142, 0.12);
    border-radius: 50%;
}

/* ── Loading / empty / error ────────────────────────────────────────────── */
.ecl-setup-loading, .ecl-setup-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--ecl-primary, #2d5a8e);
    gap: 12px;
}

    .ecl-setup-empty i {
        font-size: 1.5rem;
        opacity: 0.55;
    }

    .ecl-setup-empty p {
        margin: 0;
        font-size: 0.86rem;
        text-align: center;
    }

.ecl-setup-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(45, 90, 142, 0.2);
    border-top-color: var(--ecl-primary-dark, #1e3a5f);
    border-radius: 50%;
    animation: ecl-setup-spin 0.8s linear infinite;
}

@keyframes ecl-setup-spin {
    to {
        transform: rotate(360deg);
    }
}

.ecl-setup-error {
    margin-top: 12px;
    padding: 10px 14px;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 0.82rem;
    text-align: center;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.ecl-setup-foot {
    padding: 14px 22px 16px;
    border-top: 1px solid rgba(30, 58, 95, 0.08);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #fafbfc;
}

.ecl-setup-btn-ghost {
    height: 40px;
    padding: 0 18px;
    background: #fff;
    color: var(--ecl-primary-dark, #1e3a5f);
    border: 1px solid rgba(30, 58, 95, 0.2);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .ecl-setup-btn-ghost:hover:not(:disabled) {
        border-color: var(--ecl-primary, #2d5a8e);
        background: rgba(45, 90, 142, 0.04);
    }

    .ecl-setup-btn-ghost:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.ecl-setup-btn-primary {
    height: 40px;
    padding: 0 18px;
    background: var(--ecl-primary-grad, linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%));
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: filter 0.15s ease, transform 0.05s ease;
}

    .ecl-setup-btn-primary:hover:not(:disabled) {
        filter: brightness(1.08);
    }

    .ecl-setup-btn-primary:active:not(:disabled) {
        transform: translateY(1px);
    }

    .ecl-setup-btn-primary:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }


/* ============================================================================
   Home page — widget stack layout
   Append to eclipse.css.

   Widgets used to be a two-column body-grid; they're now a single vertical
   stack so DisplayOrder from the DB is authoritative. If you ever want to go
   back to columns, add a Placement/Column field to HomeWidgets in SQL and
   read it here — do NOT hard-code column decisions in Home.razor.
============================================================================ */

.dash-page-actions {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 5;
    display: flex;
    gap: 8px;
}

.dash-widget-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
    max-width: 1080px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .dash-widget-stack {
        padding: 16px;
        gap: 14px;
    }
}

.dash-widget-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 32px 24px;
    background: #fff;
    border: 1px solid rgba(30, 58, 95, 0.08);
    border-radius: 12px;
    color: var(--ecl-primary, #2d5a8e);
    font-size: 0.88rem;
}

.dash-widget-empty-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 26px;
    background: #fff;
    border: 1px dashed rgba(30, 58, 95, 0.22);
    border-radius: 12px;
    color: var(--ecl-primary, #2d5a8e);
}

.dash-widget-empty-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(45, 90, 142, 0.08);
    border-radius: 12px;
    color: var(--ecl-primary-dark, #1e3a5f);
    font-size: 1.4rem;
    flex-shrink: 0;
}

.dash-widget-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ecl-primary-dark, #1e3a5f);
    margin-bottom: 3px;
}

.dash-widget-empty-sub {
    font-size: 0.82rem;
    color: var(--ecl-primary, #2d5a8e);
    line-height: 1.45;
}

/* Empty state inside an individual widget (e.g. Approvals when queue is empty). */
.dash-widget-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 20px;
    font-size: 0.85rem;
    color: var(--ecl-primary, #2d5a8e);
}

    .dash-widget-empty i {
        font-size: 1.1rem;
        opacity: 0.7;
    }

/* ── Placeholder widget (for un-wired widgets) ─────────────────────────── */
.dash-widget-placeholder {
    border: 1px dashed rgba(30, 58, 95, 0.2);
    background: rgba(248, 250, 252, 0.6);
}

.dash-widget-stub-badge {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ecl-primary, #2d5a8e);
    background: rgba(45, 90, 142, 0.1);
    padding: 3px 9px;
    border-radius: 10px;
}

.dash-widget-placeholder-body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
}

.dash-widget-placeholder-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(45, 90, 142, 0.08);
    color: var(--ecl-primary-dark, #1e3a5f);
    border-radius: 10px;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.dash-widget-placeholder-line {
    margin: 0 0 4px;
    font-size: 0.88rem;
    color: var(--ecl-primary-dark, #1e3a5f);
    font-weight: 500;
}

.dash-widget-placeholder-sub {
    margin: 0;
    font-size: 0.78rem;
    color: var(--ecl-primary, #2d5a8e);
    line-height: 1.45;
}


/* ============================================================================
   Home layout — Customize button + widget-slot additions
   Append to eclipse.css.
============================================================================ */

/* Customize button: fixed to the page top-right, over the hero when present
   or over whatever is at the top of the page when the greeting widget is off.
   Sits above the hero (z-index) so it's always reachable. */
.dash-page-actions {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 5;
    display: flex;
    gap: 8px;
}

.dash-customize-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .dash-customize-btn:hover {
        background: rgba(255, 255, 255, 0.22);
        border-color: rgba(255, 255, 255, 0.4);
    }

    .dash-customize-btn i {
        font-size: 0.75rem;
    }

/* When the greeting widget is OFF, the Customize button sits over whatever
   is at the top — often the stats row which has a white background. In that
   case the white-on-transparent button is invisible. This variant kicks in
   when the outer wrapper has a "no-hero" class (Home.razor sets it based on
   IsWidgetVisible("greeting")). Not wired here — see fallback below. */
.dash-no-hero .dash-customize-btn {
    background: var(--ecl-primary, #2d5a8e);
    color: #fff;
    border-color: transparent;
}

/* Fallback: if the hero is ever hidden and the button ends up on a light
   background, this @supports rule uses background-clip/color-adjust to
   keep it legible. Cheaper alternative: the .dash-no-hero variant above. */

/* Ensure .dash is a positioning root for the absolute button. Original
   .dash already had position:relative implied by child z-index behaviour,
   but making it explicit is safer than trusting inherited context. */
.dash {
    position: relative;
}


/* ============================================================================
   Setup modal — placement tag next to each widget name
============================================================================ */

.ecl-setup-item-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ecl-setup-placement-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ecl-primary, #2d5a8e);
    background: rgba(45, 90, 142, 0.09);
    border-radius: 8px;
    white-space: nowrap;
}


/* ============================================================================
   Home layout — Customize button + setup modal additions
   Append to eclipse.css.

   NOTE on the button: earlier we styled this as white-on-transparent so it
   would blend into the navy hero. That worked WHILE the hero was visible.
   When users hid the greeting widget, the button became invisible white-on-
   white against the stats-row cards. This rewrite uses a solid navy pill
   that reads well on ANY background (hero, stats row, empty page). No
   conditional class needed — one style, always legible.
============================================================================ */

.dash-page-actions {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 10; /* stays above hero content and stat cards */
    display: flex;
    gap: 8px;
}

.dash-customize-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    background: var(--ecl-primary, #2d5a8e);
    color: #fff;
    border: 1px solid var(--ecl-primary-dark, #1e3a5f);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(30, 58, 95, 0.18);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

    .dash-customize-btn:hover {
        background: var(--ecl-primary-dark, #1e3a5f);
        box-shadow: 0 3px 10px rgba(30, 58, 95, 0.28);
    }

    .dash-customize-btn:active {
        transform: translateY(1px);
    }

    .dash-customize-btn i {
        font-size: 0.75rem;
    }

/* Ensure .dash is a positioning root for the absolute button. Original
   .dash relied on inherited context which was fine but brittle; making it
   explicit prevents the button from anchoring to a stray ancestor. */
.dash {
    position: relative;
}


/* ============================================================================
   Setup modal — placement tag next to each widget name
============================================================================ */

.ecl-setup-item-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ecl-setup-placement-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ecl-primary, #2d5a8e);
    background: rgba(45, 90, 142, 0.09);
    border-radius: 8px;
    white-space: nowrap;
}

/* ============================================================================
   Home layout — Customize button + setup modal additions
   Append to eclipse.css.

   NOTE on the button: earlier we styled this as white-on-transparent so it
   would blend into the navy hero. That worked WHILE the hero was visible.
   When users hid the greeting widget, the button became invisible white-on-
   white against the stats-row cards. This rewrite uses a solid navy pill
   that reads well on ANY background (hero, stats row, empty page). No
   conditional class needed — one style, always legible.
============================================================================ */

.dash-page-actions {
    /* Anchored to the VIEWPORT, not .dash. Previously used position:absolute
       inside .dash, but .dash sometimes extends past the visible viewport
       (padding + grid content), which pushed the button off-screen to the
       right. position:fixed sidesteps that entirely — the button is always
       20px from the actual visible right edge, no matter what .dash is doing.
       Side effect: the button also stays put on scroll, which is a small UX
       win for reaching Customize from anywhere on the page. */
    position: fixed;
    top: 80px; /* below the top nav bar (approx 60px) with breathing room */
    right: 24px;
    z-index: 900; /* above page content, below top-nav dropdowns (~1000) */
    display: flex;
    gap: 8px;
}

.dash-customize-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    background: var(--ecl-primary, #2d5a8e);
    color: #fff;
    border: 1px solid var(--ecl-primary-dark, #1e3a5f);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(30, 58, 95, 0.18);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

    .dash-customize-btn:hover {
        background: var(--ecl-primary-dark, #1e3a5f);
        box-shadow: 0 3px 10px rgba(30, 58, 95, 0.28);
    }

    .dash-customize-btn:active {
        transform: translateY(1px);
    }

    .dash-customize-btn i {
        font-size: 0.75rem;
    }


/* ============================================================================
   Setup modal — placement tag next to each widget name
============================================================================ */

.ecl-setup-item-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ecl-setup-placement-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ecl-primary, #2d5a8e);
    background: rgba(45, 90, 142, 0.09);
    border-radius: 8px;
    white-space: nowrap;
}



/* =========================================================================
   Cost Centre Report — scoped styles
   Follows the Eclipse Mobile style guide. Uses --ecl-* CSS vars with hex
   fallbacks so the page renders even if the app-level :root isn't loaded.
   ======================================================================= */

.ecl-ccr-page {
    font-family: 'DM Sans', sans-serif;
    color: var(--ecl-text, #334155);
    background: #f1f5f9;
    min-height: 100%;
    padding: 20px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Hidden scrollbars, per style guide */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .ecl-ccr-page::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

::deep article.overflow-y-scroll {
    overflow-y: auto !important;
}

/* --------- Hero header --------- */
.ecl-ccr-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    color: #fff !important;
    background: var(--ecl-primary-grad, linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%)) !important;
    box-shadow: 0 8px 20px rgba(30, 58, 95, 0.18);
}

.ecl-ccr-hero-back {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: none;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

    .ecl-ccr-hero-back:hover {
        background: rgba(255, 255, 255, 0.22);
    }

    .ecl-ccr-hero-back:active {
        transform: translateY(1px);
    }

.ecl-ccr-hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(30, 58, 95, 0.20);
}

.ecl-ccr-hero-copy {
    flex: 1;
    min-width: 0;
}

.ecl-ccr-hero-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.ecl-ccr-hero-sub {
    margin: 4px 0 0;
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.92;
}

.ecl-ccr-hero-actions {
    display: flex;
    gap: 10px;
}

.ecl-ccr-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font: 600 0.85rem/1 'DM Sans', sans-serif;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

    .ecl-ccr-hero-btn:hover {
        background: rgba(255, 255, 255, 0.18);
    }

    .ecl-ccr-hero-btn:active {
        transform: translateY(1px);
    }

/* --------- KPI strip --------- */
.ecl-ccr-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ecl-ccr-kpi {
    background: #ffffff;
    border: 1px solid var(--ecl-border, #e2e8f0);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

    .ecl-ccr-kpi:hover {
        border-color: #cbd5e1;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    }

.ecl-ccr-kpi-label {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ecl-text-muted, #64748b);
}

.ecl-ccr-kpi-value {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ecl-primary-dark, #1e3a5f);
    letter-spacing: -0.01em;
}

.ecl-ccr-kpi-meta {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ecl-text-muted, #64748b);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.ecl-ccr-delta {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.ecl-ccr-delta--up {
    background: rgba(34, 197, 94, .12);
    color: #15803d;
    border-color: rgba(34, 197, 94, .35);
}

.ecl-ccr-delta--down {
    background: rgba(239, 68, 68, .10);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, .35);
}

/* --------- Section wrapper --------- */
.ecl-ccr-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ecl-ccr-section-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 2px;
}

.ecl-ccr-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ecl-primary-dark, #1e3a5f);
    letter-spacing: -0.01em;
}

.ecl-ccr-section-sub {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ecl-text-muted, #64748b);
}

/* --------- Card base --------- */
.ecl-ccr-card {
    background: #ffffff;
    border: 1px solid var(--ecl-border, #e2e8f0);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

    .ecl-ccr-card:hover {
        border-color: #cbd5e1;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    }

.ecl-ccr-card-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ecl-ccr-card-eyebrow {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ecl-text-muted, #64748b);
}

.ecl-ccr-card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ecl-primary-dark, #1e3a5f);
    letter-spacing: -0.01em;
}

/* --------- Donut row --------- */
.ecl-ccr-donut-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.ecl-ccr-donut {
    min-height: 320px;
}

/* --------- Variance cards --------- */
.ecl-ccr-variance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ecl-ccr-var-card {
    gap: 14px;
}

.ecl-ccr-var-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ecl-ccr-var-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    flex: 0 0 auto;
}

.ecl-ccr-var-title {
    flex: 1;
    min-width: 0;
}

.ecl-ccr-var-name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ecl-primary-dark, #1e3a5f);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ecl-ccr-var-share {
    margin: 2px 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ecl-text-muted, #64748b);
}

.ecl-ccr-var-values {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid var(--ecl-border, #e2e8f0);
    border-radius: 10px;
}

.ecl-ccr-var-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.ecl-ccr-var-key {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ecl-text-muted, #64748b);
}

.ecl-ccr-var-num {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ecl-text, #334155);
    font-variant-numeric: tabular-nums;
}

.ecl-ccr-var-deltas {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ecl-ccr-var-delta {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
}

.ecl-ccr-var-dkey {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ecl-text-muted, #64748b);
}

.ecl-ccr-var-dabs {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ecl-text, #334155);
    font-variant-numeric: tabular-nums;
}

/* --------- Badge (mirrors style guide's ecl-in-badge) --------- */
.ecl-in-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ecl-in-badge--green {
    background: rgba(34, 197, 94, .12);
    color: #15803d;
    border-color: rgba(34, 197, 94, .35);
}

.ecl-in-badge--yellow {
    background: rgba(234, 179, 8, .12);
    color: #a16207;
    border-color: rgba(234, 179, 8, .35);
}

.ecl-in-badge--red {
    background: rgba(239, 68, 68, .10);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, .35);
}

.ecl-in-badge--blue {
    background: rgba(45, 90, 142, .10);
    color: var(--ecl-primary, #2d5a8e);
    border-color: rgba(45, 90, 142, .35);
}

/* --------- Monthly chart grid --------- */
.ecl-ccr-chart-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ecl-ccr-chart-card {
    padding: 14px;
    gap: 8px;
}

.ecl-ccr-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 0 2px 4px;
}

.ecl-ccr-chart-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ecl-primary-dark, #1e3a5f);
}

.ecl-ccr-chart-sub {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ecl-text-muted, #64748b);
}

.ecl-ccr-chart {
    min-height: 220px;
}

.ecl-ccr-chart--tall {
    min-height: 320px;
}

/* --------- Profit + margin row --------- */
.ecl-ccr-profit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* --------- Responsive collapse --------- */
@media (max-width: 1280px) {
    .ecl-ccr-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ecl-ccr-variance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ecl-ccr-chart-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ecl-ccr-donut-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .ecl-ccr-page {
        padding: 14px;
    }

    .ecl-ccr-hero {
        flex-wrap: wrap;
    }

    .ecl-ccr-hero-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .ecl-ccr-kpis {
        grid-template-columns: 1fr;
    }

    .ecl-ccr-variance-grid {
        grid-template-columns: 1fr;
    }

    .ecl-ccr-chart-grid {
        grid-template-columns: 1fr;
    }

    .ecl-ccr-profit-grid {
        grid-template-columns: 1fr;
    }
}

.ecl-ccr-donut {
    position: relative;
    height: 320px;
    width: 100%;
}

.ecl-ccr-chart {
    position: relative;
    height: 220px;
    width: 100%;
}

.ecl-ccr-chart--tall {
    height: 320px;
}

/* Chart.js canvas needs to fill its container */
.ecl-ccr-donut canvas,
.ecl-ccr-chart canvas {
    max-width: 100% !important;
    max-height: 100% !important;
}