/* ════════════════════════════════════════════════════════════════════
   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, var(--ecl-primary-dark, #1e3a5f) 0%, var(--ecl-primary, #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 {
    min-width: 220px;
    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: var(--ecl-primary, #2d5a8e);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

    article.overflow-y-scroll::-webkit-scrollbar-thumb:hover {
        background: var(--ecl-primary-dark, #1e3a5f);
        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: rgba(45, 90, 142, 0.45); /* translucent navy — subtle on small inline scroll areas */
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

    *::-webkit-scrollbar-thumb:hover {
        background: var(--ecl-primary, #2d5a8e);
        background-clip: content-box;
    }

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(45, 90, 142, 0.45) 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,
    .ecl-field[disabled],
    .ecl-field[readonly],
    .ecl-field:read-only {
        background: #ffffff;
        color: var(--ecl-text, #334155);
        -webkit-text-fill-color: var(--ecl-text, #334155);
        opacity: 1;
        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: #ffffff;
    background: var(--ecl-primary, #2d5a8e);
    opacity: 1;
    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: #ffffff;
        opacity: 1;
        background: var(--ecl-primary-dark, #1e3a5f);
    }

/* Date variant: full-height navy picker button with white calendar glyph.
   Mirrors .ecl-field-search-btn. The native indicator is over-sized and pulled
   out with negative margins so the navy fills the field interior and bleeds to
   the edge — no position:relative on the input (which disturbed the notch label)
   and no height growth (negative margins cancel the extra box height for layout).
   WebKit/Blink only. */
.ecl-field[type="date"]::-webkit-calendar-picker-indicator,
.ecl-field-date::-webkit-calendar-picker-indicator {
    width: 41px;
    height: 40px;
    box-sizing: border-box;
    margin: -10px -13px -10px 8px;
    padding: 0;
    background-color: var(--ecl-primary, #2d5a8e);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='2.25' y='3.25' width='11.5' height='10.5' rx='1.5'/%3E%3Cline x1='2.25' y1='6.25' x2='13.75' y2='6.25'/%3E%3Cline x1='5.25' y1='1.75' x2='5.25' y2='4'/%3E%3Cline x1='10.75' y1='1.75' x2='10.75' y2='4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    border-radius: 0 6px 6px 0;
    opacity: 1;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ecl-field[type="date"]:hover::-webkit-calendar-picker-indicator,
.ecl-field-date:hover::-webkit-calendar-picker-indicator {
    background-color: var(--ecl-primary-dark, #1e3a5f);
}

/* Native radios & checkboxes — brand navy tick/fill */
input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--ecl-primary, #2d5a8e);
}

/* 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: var(--ecl-primary-grad, 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,
    .tm-input[readonly],
    .tm-input:read-only {
        background: #ffffff;
        color: var(--t-text, #334155);
        -webkit-text-fill-color: var(--t-text, #334155);
        opacity: 1;
        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: #ffffff;
    color: var(--t-text, #334155);
    -webkit-text-fill-color: var(--t-text, #334155);
    opacity: 1;
    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: 12px 16px;
}

/* Order strip: 5-across grid (Order Nbr / Supplier / PO Reason / Allocation / Capex). */
.po-strip-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.4fr 1.2fr 1.4fr 0.9fr;
    gap: 12px;
    align-items: start;
}

    .po-strip-grid > div > .relative {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .po-strip-grid input:not([type="checkbox"]):not([type="radio"]),
    .po-strip-grid select {
        min-height: 38px;
    }

    .po-strip-grid > div > .relative > div[class*="border"] {
        min-height: 38px;
    }
    /* Reserve room under Supplier / Allocation for the resolved-name detail span so it
   sits below the box instead of overlapping the next field. */
    .po-strip-grid > div:has(span[class*="-bottom-8"]) {
        padding-bottom: 22px;
    }

    .po-strip-grid span[class*="-bottom-8"] {
        bottom: -22px !important;
        left: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--t-text, #334155);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

.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;
    }

/* Capture-flow layout: wide primary zone + narrower reference rail. */
.po-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.po-primary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    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: 12px;
    align-items: start;
}

@media (max-width: 1180px) {
    .po-strip-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .po-strip-grid {
        grid-template-columns: 1fr;
    }

    .po-primary-row {
        grid-template-columns: 1fr;
    }
}

.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: 6px 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: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

    .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;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
}

/* 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;
    }
}

/* ---------- 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;
}

/* ── Form layout grid — 12-column, responsive, neat by default ──────────
   Wrap fields in .ecl-form-grid and give each column an .ecl-col-N span
   (N = 1..12, 12 = full row). Gaps, alignment and wrapping are handled for
   you so pages stay tidy without per-page margin tuning.
     Desktop  : .ecl-col-N
     Tablet   : .ecl-col-md-N   (applies <= 992px)
     Phone    : .ecl-col-sm-N   (applies <= 640px; omit to stack full width)
   Pairs with the <EclFormGrid> / <EclFormCol> components. */
.ecl-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px 16px;
    align-items: start;
    width: 100%;
}

    /* keep nested field controls full-width inside their column */
    .ecl-form-grid > [class*="ecl-col-"] > .ecl-field,
    .ecl-form-grid > [class*="ecl-col-"] > .ecl-textarea {
        width: 100%;
    }

.ecl-col-1 {
    grid-column: span 1;
}

.ecl-col-2 {
    grid-column: span 2;
}

.ecl-col-3 {
    grid-column: span 3;
}

.ecl-col-4 {
    grid-column: span 4;
}

.ecl-col-5 {
    grid-column: span 5;
}

.ecl-col-6 {
    grid-column: span 6;
}

.ecl-col-7 {
    grid-column: span 7;
}

.ecl-col-8 {
    grid-column: span 8;
}

.ecl-col-9 {
    grid-column: span 9;
}

.ecl-col-10 {
    grid-column: span 10;
}

.ecl-col-11 {
    grid-column: span 11;
}

.ecl-col-12 {
    grid-column: span 12;
}

@media (max-width: 992px) {
    .ecl-col-md-1 {
        grid-column: span 1;
    }

    .ecl-col-md-2 {
        grid-column: span 2;
    }

    .ecl-col-md-3 {
        grid-column: span 3;
    }

    .ecl-col-md-4 {
        grid-column: span 4;
    }

    .ecl-col-md-5 {
        grid-column: span 5;
    }

    .ecl-col-md-6 {
        grid-column: span 6;
    }

    .ecl-col-md-7 {
        grid-column: span 7;
    }

    .ecl-col-md-8 {
        grid-column: span 8;
    }

    .ecl-col-md-9 {
        grid-column: span 9;
    }

    .ecl-col-md-10 {
        grid-column: span 10;
    }

    .ecl-col-md-11 {
        grid-column: span 11;
    }

    .ecl-col-md-12 {
        grid-column: span 12;
    }
}

@media (max-width: 640px) {
    .ecl-col-sm-1 {
        grid-column: span 1;
    }

    .ecl-col-sm-2 {
        grid-column: span 2;
    }

    .ecl-col-sm-3 {
        grid-column: span 3;
    }

    .ecl-col-sm-4 {
        grid-column: span 4;
    }

    .ecl-col-sm-5 {
        grid-column: span 5;
    }

    .ecl-col-sm-6 {
        grid-column: span 6;
    }

    .ecl-col-sm-7 {
        grid-column: span 7;
    }

    .ecl-col-sm-8 {
        grid-column: span 8;
    }

    .ecl-col-sm-9 {
        grid-column: span 9;
    }

    .ecl-col-sm-10 {
        grid-column: span 10;
    }

    .ecl-col-sm-11 {
        grid-column: span 11;
    }

    .ecl-col-sm-12 {
        grid-column: span 12;
    }
}

/* Form-grid field normalisation — ported from .po-strip-grid so controls inside
   <EclFormGrid> keep even heights and reserve room for EclTextBox resolved-name
   detail spans (Supplier / Allocation) instead of overlapping the row. */
.ecl-form-grid > [class*="ecl-col-"] > .relative {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.ecl-form-grid input:not([type="checkbox"]):not([type="radio"]),
.ecl-form-grid select {
    min-height: 42px;
}

.ecl-form-grid > [class*="ecl-col-"] > .relative > div[class*="border"] {
    min-height: 42px;
}

.ecl-form-grid > [class*="ecl-col-"]:has(span[class*="-bottom-8"]) {
    padding-bottom: 24px;
}

.ecl-form-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(--ecl-text, #334155);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Compact capture zone ────────────────────────────────────────────────
   Tightens the header/capture panels so they don't dominate the page. Scoped
   to .po-capture (the capture EclFormGrid); the Item/Account line grid is a
   sibling outside it and is unaffected. */
.po-capture .po-panel-body {
    padding: 9px 11px;
    gap: 8px;
}

.po-capture .po-refcard-body {
    padding: 9px 11px;
}

.po-capture .po-panel-head {
    padding: 6px 12px;
    font-size: 0.78rem;
}

.po-capture .ecl-form-grid {
    gap: 9px 12px;
}

    .po-capture .ecl-form-grid input:not([type="checkbox"]):not([type="radio"]),
    .po-capture .ecl-form-grid select {
        min-height: 36px;
    }

    .po-capture .ecl-form-grid > [class*="ecl-col-"] > .relative > div[class*="border"] {
        min-height: 36px;
    }

.po-capture .po-textarea {
    min-height: 0;
}

/* ── App-wide alignment for number / date fields ─────────────────────────────
   Apply to any EclTextBox using Type="number" or Type="date" (renders as
   .ecl-field with the matching input type), plus any raw input[type="…"]
   used directly on a page (e.g. the po-cell number cells in the PO grid).
   `.po-num` covers header / footer cells the grid uses for figures. */
.ecl-field[type="number"],
.ecl-field[type="date"],
input[type="number"].po-cell,
input[type="number"].tm-input,
input[type="number"] {
    text-align: right;
}

input.po-cell.po-num,
input.tm-input.po-num,
input.po-num {
    text-align: right;
}

/* ── PO grid font parity with the TM grid ───────────────────────────────────
   Inputs don't inherit font-family by default, so .po-cell / .po-select were
   rendering in the browser system font while .tm-input showed DM Sans (which
   its ancestor inherited). Explicitly set DM Sans on the PO grid, plus tabular
   figures on the numeric cells and totals so columns of digits line up. */
.po-table,
.po-table th,
.po-table td,
.po-cell,
.po-select {
    font-family: 'DM Sans', sans-serif;
}

.po-num,
.po-strong,
input.po-num {
    font-variant-numeric: tabular-nums;
}

/* ── TM grid: right-align the date, time and numeric columns ─────────────
   Those cells render as plain `<input type="text" class="tm-input">` (dates
   and times are formatted server-side), so the app-wide type-based selector
   couldn't catch them. Target them by column position instead:
       6 = Tran Date
       7 = Start Time
       8 = End Time
       9 = Hours
      10 = Minutes
      11 = Comp %
   Applies to every row (capture + committed) inside .tm-table. */
.tm-table td:nth-child(6) > input.tm-input,
.tm-table td:nth-child(7) > input.tm-input,
.tm-table td:nth-child(8) > input.tm-input,
.tm-table td:nth-child(9) > input.tm-input,
.tm-table td:nth-child(10) > input.tm-input,
.tm-table td:nth-child(11) > input.tm-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Opt-in helper: add `tm-input-right` to any input to force right-align. */
.tm-input.tm-input-right,
input.tm-input-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── PO grid: right-align editable numeric cells (Qty, Cost Excl) ────────
   Display-only cost/vat/total cells already inherit right-align from .po-num
   on the <td>. The two editable inputs (columns 7 = Qty, 8 = Cost Excl) are
   <input class="po-cell po-num">; make sure that combination is right-aligned. */
.po-table td:nth-child(7) > input.po-cell,
.po-table td:nth-child(8) > input.po-cell,
input.po-cell.po-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
