/* ============================================================================
   ui-modern.css — premium UI layer for the Fleet Management app
   Refined navy + soft-indigo palette, layered shadows, glass navbar,
   tabular-figure typography. Carries the login page's visual language
   into the rest of the app at a more premium tier.
   Loaded LAST so it overrides AdminLTE / Bootstrap / custom.css without
   those files being modified. To revert: comment out the single <link>
   tag in index.html.
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* ---------- Design tokens ---------- */
:root {
    /* Ink scale */
    --um-ink-900:  #0b1426;
    --um-ink-800:  #0f1e36;
    --um-ink-700:  #1e293b;
    --um-ink-600:  #334155;
    --um-ink-500:  #475569;
    --um-ink-400:  #64748b;
    --um-ink-300:  #94a3b8;
    --um-ink-200:  #cbd5e1;
    --um-ink-100:  #e2e8f0;
    --um-ink-50:   #f1f5f9;

    /* Brand (deeper, more refined navy than bright blue) */
    --um-primary:        #1e3a8a;     /* deep indigo navy */
    --um-primary-strong: #172554;     /* darker hover */
    --um-primary-soft:   #eef2ff;     /* subtle background tint */
    --um-primary-glow:   rgba(30,58,138,.18);

    /* Accent (warm copper, used very sparingly for emphasis) */
    --um-accent:         #b45309;
    --um-accent-soft:    #fef3c7;

    /* Semantic */
    --um-success:        #047857;
    --um-success-soft:   #d1fae5;
    --um-warning:        #b45309;
    --um-warning-soft:   #fef3c7;
    --um-danger:         #b91c1c;
    --um-danger-soft:    #fee2e2;
    --um-info:           #0e7490;
    --um-info-soft:      #cffafe;

    /* Surfaces */
    --um-bg-page:        #f4f6fb;
    --um-surface:        #ffffff;
    --um-surface-alt:    #fafbfd;
    --um-surface-bg:     #f1f5f9;
    --um-surface-grad:   linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);

    /* Borders */
    --um-border:         rgba(15,23,42,.08);
    --um-border-strong:  rgba(15,23,42,.14);

    /* Shadows — multi-stop for premium depth */
    --um-shadow-xs:  0 1px 2px rgba(15,23,42,.04);
    --um-shadow-sm:  0 1px 2px rgba(15,23,42,.04), 0 2px 4px -1px rgba(15,23,42,.04);
    --um-shadow:     0 1px 2px rgba(15,23,42,.04), 0 6px 16px -4px rgba(15,23,42,.10);
    --um-shadow-md:  0 2px 4px rgba(15,23,42,.04), 0 16px 32px -10px rgba(15,23,42,.18);
    --um-shadow-lg:  0 30px 60px -15px rgba(15,23,42,.28), 0 8px 16px -8px rgba(15,23,42,.12);
    --um-shadow-ring: 0 0 0 4px rgba(30,58,138,.14);

    /* Radius — tightened for a crisper, less rounded look */
    --um-radius-xs:  3px;
    --um-radius-sm:  5px;
    --um-radius:     7px;
    --um-radius-lg:  9px;
    --um-radius-xl:  12px;

    /* Motion */
    --um-ease: cubic-bezier(.22, 1, .36, 1);

    /* Typography */
    --um-font: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Source Sans Pro', Roboto, Helvetica, Arial, sans-serif;
    --um-font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
}

/* ---------- Base typography & page background ---------- */
body, .content-wrapper, .container, .container-fluid {
    font-family: var(--um-font);
    color: var(--um-ink-800);
    font-feature-settings: "cv11", "ss01", "tnum";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body:not(.login-page) {
    background:
        radial-gradient(1200px 600px at 100% -10%, rgba(30,58,138,.05), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(180,83,9,.04), transparent 60%),
        var(--um-bg-page);
    background-attachment: fixed;
}

::selection { background: var(--um-primary-soft); color: var(--um-ink-900); }

/* Tabular figures inside data tables & stats */
.um-table-wrap table.table tbody td,
.um-table-wrap table.table tfoot td,
.um-stat-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ============================================================================
   SIDEBAR LAYOUT (Variant A · Charcoal Premium)
   The old top navbar is hidden; this sidebar replaces it. The original
   <nav> stays in the DOM so any legacy JS that references its IDs keeps
   working — only its visibility is removed.
   ============================================================================ */

/* (Sidebar layout removed — kept ui-modern.css's restyled top navbar.) */

/* ---------- SIDEBAR ---------- */
.um-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 240px;
    background: linear-gradient(180deg, #11151c 0%, #0a0d12 100%);
    color: rgba(255,255,255,.7);
    display: flex;
    flex-direction: column;
    z-index: 1030;
    box-shadow:
        inset -1px 0 0 rgba(255,255,255,.04),     /* faint inner highlight on right */
        1px 0 0 rgba(0,0,0,.5),                    /* hard outer edge for separation */
        8px 0 32px -16px rgba(0,0,0,.6);           /* soft shadow into page */
    font-family: var(--um-font);
}
/* Thin copper accent strip down the right edge — the "premium watch" detail */
.um-sidebar::after {
    content: '';
    position: absolute;
    top: 60px; bottom: 60px; right: 0;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(212,165,116,.18) 30%,
        rgba(212,165,116,.35) 50%,
        rgba(212,165,116,.18) 70%,
        transparent 100%);
    pointer-events: none;
}
.um-sidebar .side-head {
    padding: 14px 16px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    position: relative;
}
/* Refined separator under brand: gradient line instead of flat border */
.um-sidebar .side-head::after {
    content: '';
    position: absolute;
    left: 16px; right: 16px; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.10) 30%, rgba(212,165,116,.25) 50%, rgba(255,255,255,.10) 70%, transparent);
}
.um-sidebar .brand-mark {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, #2745a3 0%, var(--um-primary) 60%, #16307a 100%);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 4px 10px -3px rgba(30,58,138,.5);
    flex-shrink: 0;
    letter-spacing: -.01em;
}
/* Actual SHAR logo when used in place of the gradient brand-mark */
.um-sidebar .brand-logo {
    height: 30px;
    width: auto;
    max-width: 38px;
    object-fit: contain;
    flex-shrink: 0;
    filter: brightness(1.05);
}
.um-sidebar .side-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    flex: 1;
}
.um-sidebar .side-brand:hover { color: inherit; text-decoration: none; }
.um-sidebar .brand-text {
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -.01em;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.um-sidebar .brand-text small {
    display: block;
    font-size: 9.5px;
    color: rgba(212,165,116,.7);   /* copper accent */
    font-weight: 500;
    margin-top: 2px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.um-sidebar .side-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-bottom: 8px;
}
.um-sidebar .side-scroll::-webkit-scrollbar { width: 6px; }
.um-sidebar .side-scroll::-webkit-scrollbar-track { background: transparent; }
.um-sidebar .side-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 3px; }

.um-sidebar .section-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(212,165,116,.55);   /* copper-tinted section labels */
    padding: 18px 18px 6px;
    user-select: none;
}
.um-sidebar .nav-grp { padding: 0 10px 4px; }

/* Collapsible section group (accordion) */
.um-sidebar .nav-sec { padding: 0 10px; margin-bottom: 2px; }
.um-sidebar .nav-sec-head {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 7px 10px;
    color: rgba(255,255,255,.78);
    text-align: left;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    transition: background .15s var(--um-ease), color .15s var(--um-ease);
    line-height: 1.3;
    font-family: var(--um-font);
}
.um-sidebar .nav-sec-head > i:first-child {
    width: 16px;
    text-align: center;
    color: rgba(212,165,116,.85);
    font-size: 12px;
    flex-shrink: 0;
    transition: color .15s var(--um-ease);
}
.um-sidebar .nav-sec-head .sec-caret {
    margin-left: auto;
    font-size: 9px;
    color: rgba(255,255,255,.35);
    transition: transform .25s var(--um-ease), color .15s var(--um-ease);
}
.um-sidebar .nav-sec-head:hover {
    background: rgba(255,255,255,.04);
    color: #fff;
}
.um-sidebar .nav-sec.open > .nav-sec-head {
    background: rgba(255,255,255,.07);
    color: #fff;
}
.um-sidebar .nav-sec.open > .nav-sec-head .sec-caret {
    transform: rotate(180deg);
    color: #d4a574;
}
.um-sidebar .nav-sec.open > .nav-sec-head > i:first-child { color: #d4a574; }

/* Body of an open section — animated slide-open via max-height */
.um-sidebar .nav-sec-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s var(--um-ease);
    padding: 0;
}
.um-sidebar .nav-sec.open > .nav-sec-body {
    max-height: 5000px;     /* large enough for any section */
    padding: 4px 0 6px;
}
.um-sidebar .nav-sec-body .nav-item-x {
    margin: 0;
    padding-left: 40px;     /* indented under sub-section caret */
    font-size: 11.5px;
    color: rgba(255,255,255,.6);
    font-weight: 400;
    padding-top: 5px;
    padding-bottom: 5px;
}
.um-sidebar .nav-sec-body .nav-item-x:hover {
    padding-left: 42px;
    color: #fff;
}
.um-sidebar .nav-sec-body .nav-item-x.active {
    color: #fff;
    background: rgba(255,255,255,.04);
}

/* ----- Sub-section (2nd-level drill) ----- */
.um-sidebar .nav-sub { margin-top: 2px; }
.um-sidebar .nav-sub-head {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 6px 12px 6px 32px;
    color: rgba(212,165,116,.6);
    text-align: left;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .15s var(--um-ease), color .15s var(--um-ease);
    font-family: var(--um-font);
}
.um-sidebar .nav-sub-head:hover {
    background: rgba(212,165,116,.06);
    color: rgba(212,165,116,.95);
}
.um-sidebar .nav-sub-head .sub-caret {
    margin-left: auto;
    font-size: 7.5px;
    color: inherit;
    opacity: .7;
    transition: transform .25s var(--um-ease);
}
.um-sidebar .nav-sub.open > .nav-sub-head {
    background: rgba(212,165,116,.08);
    color: #d4a574;
}
.um-sidebar .nav-sub.open > .nav-sub-head .sub-caret {
    transform: rotate(180deg);
    opacity: 1;
}
.um-sidebar .nav-sub-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s var(--um-ease);
}
.um-sidebar .nav-sub.open > .nav-sub-body {
    max-height: 2000px;
    padding: 2px 0 4px;
}
.um-sidebar .nav-item-x {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 10px;
    color: rgba(255,255,255,.72);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 450;
    border-radius: 5px;
    transition: background .2s var(--um-ease), color .2s var(--um-ease), padding-left .15s var(--um-ease);
    position: relative;
    line-height: 1.3;
}
.um-sidebar .nav-item-x i {
    width: 16px;
    text-align: center;
    color: rgba(255,255,255,.45);
    font-size: 12px;
    flex-shrink: 0;
    transition: color .2s var(--um-ease);
}
.um-sidebar .nav-item-x:hover {
    background: rgba(255,255,255,.05);
    color: #fff;
    text-decoration: none;
    padding-left: 12px;   /* subtle slide-right on hover */
}
.um-sidebar .nav-item-x:hover i { color: #d4a574; }
.um-sidebar .nav-item-x.active {
    background: linear-gradient(90deg, rgba(212,165,116,.10) 0%, rgba(212,165,116,.02) 100%);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(212,165,116,.12);
}
.um-sidebar .nav-item-x.active i { color: #d4a574; }
.um-sidebar .nav-item-x.active::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    background: #d4a574;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(212,165,116,.4);
}

.um-sidebar .side-foot {
    flex-shrink: 0;
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.um-sidebar .side-foot .user-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.um-sidebar .side-foot .avatar {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, #d4a574, #b88550);
    color: #1a0f00;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.um-sidebar .side-foot .who {
    font-size: 12px;
    color: #fff;
    font-weight: 500;
    line-height: 1.2;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}
.um-sidebar .side-foot .who small {
    display: block;
    color: rgba(212,165,116,.7);
    font-size: 9.5px;
    font-weight: 600;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Sign-out button — full-width pill, copper border, red on hover so it's
   never missed even when scrolled all the way down. */
.um-sidebar .side-foot .logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(220,38,38,.10);
    color: #fca5a5;
    border: 1px solid rgba(220,38,38,.18);
    border-radius: 5px;
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background .15s var(--um-ease), color .15s var(--um-ease), border-color .15s var(--um-ease);
}
.um-sidebar .side-foot .logout-btn:hover {
    background: rgba(220,38,38,.25);
    color: #fff;
    border-color: rgba(220,38,38,.5);
    text-decoration: none;
}
.um-sidebar .side-foot .logout-btn i { font-size: 11px; }

/* ---------- TOPBAR (slim header inside content area) ---------- */
.um-topbar {
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--um-border);
    padding: 10px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 16px -10px rgba(15,23,42,.12);
}
.um-topbar .um-crumb {
    font-size: 12.5px;
    color: var(--um-ink-400);
    font-weight: 450;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    background: var(--um-surface-bg);
    border-radius: 6px;
    border: 1px solid var(--um-border);
}
.um-topbar .um-crumb b {
    color: var(--um-ink-900);
    font-weight: 600;
}
.um-topbar .um-crumb i.fa-chevron-right {
    font-size: 9px;
    opacity: .5;
    margin: 0 2px;
}
.um-topbar .um-crumb > i:first-child {
    color: var(--um-primary);
    opacity: .9 !important;
}
.um-topbar .um-spacer { flex: 1; }

/* Topbar quick-search input (collapsible to icon on small screens) */
.um-topbar .um-search {
    position: relative;
    width: 240px;
}
.um-topbar .um-search input {
    width: 100%;
    background: var(--um-surface-bg);
    border: 1px solid var(--um-border);
    border-radius: 6px;
    padding: 5px 10px 5px 30px;
    font-size: 12.5px;
    color: var(--um-ink-700);
    font-family: var(--um-font);
    transition: background .15s var(--um-ease), border-color .15s var(--um-ease), box-shadow .15s var(--um-ease);
}
.um-topbar .um-search input::placeholder { color: var(--um-ink-300); }
.um-topbar .um-search input:focus {
    background: var(--um-surface);
    border-color: var(--um-primary);
    box-shadow: 0 0 0 3px rgba(30,58,138,.12);
    outline: none;
}
.um-topbar .um-search > i {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--um-ink-300);
    font-size: 11.5px;
    pointer-events: none;
}
.um-topbar .um-search > kbd {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--um-ink-400);
    background: var(--um-surface);
    border: 1px solid var(--um-border);
    border-radius: 3px;
    padding: 1px 5px;
    font-family: var(--um-font);
    font-weight: 500;
}

/* Generic icon button (bell, settings, etc.) in topbar */
.um-topbar .um-ic-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--um-ink-500);
    width: 32px; height: 32px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    position: relative;
    transition: background .15s var(--um-ease), color .15s var(--um-ease);
}
.um-topbar .um-ic-btn:hover {
    background: var(--um-surface-bg);
    color: var(--um-ink-900);
    border-color: var(--um-border);
}
.um-topbar .um-ic-btn .um-dot {
    position: absolute;
    top: 7px; right: 8px;
    width: 7px; height: 7px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid var(--um-surface);
}

/* Thin vertical divider between groups */
.um-topbar .um-vr {
    width: 1px;
    height: 22px;
    background: var(--um-border);
    margin: 0 4px;
}

.um-topbar .um-greet {  /* legacy — kept harmless in case any other page still uses it */
    font-size: 12.5px;
    color: var(--um-ink-500);
    font-weight: 500;
}

@media (max-width: 767.98px) {
    .um-topbar { padding: 8px 14px; min-height: 48px; }
    .um-topbar .um-search { display: none; }
    .um-topbar .um-vr { display: none; }
}
.um-topbar .um-sidebar-toggle {
    background: transparent;
    border: 1px solid var(--um-border);
    color: var(--um-ink-700);
    width: 32px; height: 32px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s var(--um-ease);
}
.um-topbar .um-sidebar-toggle:hover { background: var(--um-surface-bg); }

/* ---------- USER DROPDOWN (rich) in the dark navbar ----------
   Pill trigger: avatar circle + name + role + chevron.
   Click opens a refined dropdown with header (avatar + name + role),
   divider, Change Password and Sign Out items. Sign Out is red. */
nav.navbar.bg-navy .um-userdrop { position: relative; }
nav.navbar.bg-navy .um-userdrop-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 4px 10px 4px 4px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .18s var(--um-ease), border-color .18s var(--um-ease);
    line-height: 1;
    font-family: var(--um-font);
}
nav.navbar.bg-navy .um-userdrop-btn:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
}
nav.navbar.bg-navy .um-userdrop-btn[aria-expanded="true"] {
    background: rgba(255,255,255,.10);
    border-color: rgba(212,165,116,.5);
    box-shadow: 0 0 0 3px rgba(212,165,116,.12);
}

/* Avatar circle inside the trigger */
nav.navbar.bg-navy .um-userdrop-avatar {
    width: 28px; height: 28px;
    background: linear-gradient(135deg, #d4a574, #b88550);
    color: #1a0f00;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}

/* Stack username (white) + role (copper) inside the trigger */
nav.navbar.bg-navy .um-userdrop-meta {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    min-width: 0;
}
nav.navbar.bg-navy .um-userdrop-name {
    color: #fff;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: -.005em;
}
nav.navbar.bg-navy .um-userdrop-role {
    color: rgba(212,165,116,.75);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 2px;
}

/* Chevron caret on the right */
nav.navbar.bg-navy .um-userdrop-caret {
    color: rgba(255,255,255,.55);
    font-size: 9px;
    transition: transform .25s var(--um-ease), color .15s var(--um-ease);
    margin-left: 2px;
}
nav.navbar.bg-navy .um-userdrop-btn[aria-expanded="true"] .um-userdrop-caret {
    transform: rotate(180deg);
    color: #d4a574;
}

/* ---- Dropdown PANEL ---- */
.um-userdrop-menu {
    min-width: 200px !important;
    padding: 4px !important;
    margin-top: 8px !important;
    border: 1px solid var(--um-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 36px -10px rgba(15,23,42,.25), 0 4px 10px rgba(15,23,42,.06) !important;
    background: var(--um-surface) !important;
}

/* Dropdown items */
.um-userdrop-menu .um-userdrop-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 12px !important;
    font-size: 12.5px !important;
    color: var(--um-ink-700) !important;
    font-weight: 500;
    border-radius: 5px !important;
    transition: background .12s var(--um-ease), color .12s var(--um-ease);
}
.um-userdrop-menu .um-userdrop-item > i {
    width: 18px;
    text-align: center;
    color: var(--um-ink-400);
    font-size: 13px;
    transition: color .12s var(--um-ease);
}
.um-userdrop-menu .um-userdrop-item:hover {
    background: var(--um-surface-bg) !important;
    color: var(--um-ink-900) !important;
}
.um-userdrop-menu .um-userdrop-item:hover > i { color: var(--um-primary); }

/* Log out — red emphasis */
.um-userdrop-menu .um-userdrop-logout { color: #b91c1c !important; }
.um-userdrop-menu .um-userdrop-logout > i { color: #ef4444 !important; }
.um-userdrop-menu .um-userdrop-logout:hover {
    background: #fef2f2 !important;
    color: #991b1b !important;
}
.um-userdrop-menu .um-userdrop-logout:hover > i { color: #b91c1c !important; }


/* ---------- (legacy) USER BAR in the dark navbar (always-visible buttons) ----------
   Three pieces side-by-side: user info display, Change Password button,
   Sign out button (red). Both actions visible without click. */
nav.navbar.bg-navy .um-user-bar { gap: 8px; white-space: nowrap; }
nav.navbar.bg-navy .um-user-info {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    color: rgba(255,255,255,.92);
    font-size: 12.5px;
    font-weight: 500;
}
nav.navbar.bg-navy .um-user-info > i {
    color: #d4a574;
    font-size: 16px;
}
nav.navbar.bg-navy .um-nav-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.85);
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: background .15s var(--um-ease), color .15s var(--um-ease), border-color .15s var(--um-ease);
    line-height: 1.4;
}
nav.navbar.bg-navy .um-nav-action:hover {
    background: rgba(255,255,255,.10);
    color: #fff;
    border-color: rgba(255,255,255,.20);
    text-decoration: none;
}
nav.navbar.bg-navy .um-nav-action > i { font-size: 12px; }
/* Sign out — red emphasis */
nav.navbar.bg-navy .um-nav-action.um-logout {
    background: rgba(220,38,38,.15);
    border-color: rgba(220,38,38,.30);
    color: #fca5a5;
}
nav.navbar.bg-navy .um-nav-action.um-logout:hover {
    background: rgba(220,38,38,.30);
    border-color: rgba(220,38,38,.55);
    color: #fff;
}
/* Mobile drawer variant — full width pills stacked */
.um-user-bar-mobile .um-user-info { color: rgba(255,255,255,.92); font-size: 13px; }
.um-user-bar-mobile .um-user-info > i { color: #d4a574; font-size: 16px; }
.um-user-bar-mobile .um-nav-action { width: auto; justify-content: flex-start; }


/* ---------- (legacy) USER MENU when inside the dark navbar ----------
   Same DOM as the light-surface user menu below, but skinned for the
   charcoal navbar: copper icon, white-ish text, subtle white-tint pill. */
nav.navbar.bg-navy .um-user-menu .um-user-btn {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.92) !important;
}
nav.navbar.bg-navy .um-user-menu .um-user-btn:hover {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.18) !important;
    color: #fff !important;
}
nav.navbar.bg-navy .um-user-menu .um-user-btn[aria-expanded="true"] {
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(212,165,116,.4) !important;
    color: #fff !important;
}
nav.navbar.bg-navy .um-user-menu .um-user-btn > i.fa-circle-user {
    color: #d4a574 !important;
    font-size: 16px;
}
nav.navbar.bg-navy .um-user-menu .um-user-btn > i.um-user-caret {
    color: rgba(255,255,255,.55) !important;
}
nav.navbar.bg-navy .um-user-menu .um-user-btn[aria-expanded="true"] > i.um-user-caret {
    color: #d4a574 !important;
}

/* ---------- USER MENU (light surface, generic) ---------- */
.um-user-menu .um-user-btn {
    background: transparent;
    border: 1px solid var(--um-border);
    border-radius: 5px;
    padding: 4px 10px 4px 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--um-ink-700);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s var(--um-ease), border-color .15s var(--um-ease);
    line-height: 1;
}
.um-user-menu .um-user-btn:hover {
    background: var(--um-surface-bg);
    border-color: var(--um-border-strong);
}
.um-user-menu .um-user-btn > i.fa-circle-user {
    font-size: 18px;
    color: var(--um-primary);
}
.um-user-menu .um-user-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.um-user-menu .um-user-btn > i.um-user-caret {
    font-size: 9px;
    color: var(--um-ink-400);
    transition: transform .2s var(--um-ease);
}
.um-user-menu .um-user-btn[aria-expanded="true"] {
    background: var(--um-surface-bg);
    border-color: var(--um-border-strong);
}
.um-user-menu .um-user-btn[aria-expanded="true"] > i.um-user-caret {
    transform: rotate(180deg);
    color: var(--um-primary);
}
/* Dropdown body */
.um-user-menu .dropdown-menu {
    min-width: 220px;
    margin-top: 6px !important;
    padding: 4px !important;
}
.um-user-menu .um-user-head {
    padding: 10px 12px 8px;
}
.um-user-menu .um-user-head-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--um-ink-900);
    line-height: 1.2;
}
.um-user-menu .um-user-head-role {
    font-size: 11px;
    color: var(--um-ink-400);
    margin-top: 2px;
    text-transform: capitalize;
}
.um-user-menu .dropdown-divider {
    margin: 4px 0 !important;
    border-top-color: var(--um-border) !important;
}
.um-user-menu .dropdown-item {
    font-size: 12.5px !important;
    padding: 7px 12px !important;
    display: flex;
    align-items: center;
    gap: 9px;
}
.um-user-menu .dropdown-item i {
    width: 14px;
    text-align: center;
    color: var(--um-ink-400);
    font-size: 12px;
}
.um-user-menu .dropdown-item:hover i { color: var(--um-primary); }
/* Log Out item — red emphasis on hover */
.um-user-menu .dropdown-item[href="#!login"]:hover {
    background: #fef2f2;
    color: #b91c1c;
}
.um-user-menu .dropdown-item[href="#!login"]:hover i { color: #b91c1c; }

/* ---------- Mobile: collapsible sidebar ---------- */
@media (max-width: 991.98px) {
    body.um-has-sidebar { padding-left: 0; }
    .um-sidebar {
        transform: translateX(-100%);
        transition: transform .25s var(--um-ease);
    }
    body.um-sidebar-open .um-sidebar { transform: translateX(0); }
    body.um-sidebar-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 1029;
    }
}
@media (min-width: 992px) {
    .um-topbar .um-sidebar-toggle { display: none; }
}


/* ---------- (legacy) TOP NAVBAR — KEPT FOR REFERENCE BUT HIDDEN ---------- */
/* The original .navbar.bg-navy is hidden by the rule above when the
   sidebar layout is active. The styles below remain for the case where
   um-has-sidebar is not set (e.g. legacy fallback) — harmless leftovers. */
nav.navbar.bg-navy {
    background: #14171f !important;
    border-bottom: 0;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 1px 0 rgba(0,0,0,.55),
        0 12px 28px -18px rgba(0,0,0,.7);
    padding: .25rem .75rem;
    position: relative;
    min-height: 46px;
}
nav.navbar.bg-navy > .container {
    align-items: center;
}
nav.navbar.bg-navy .navbar-toggler {
    border: 1px solid rgba(255,255,255,.12);
    padding: .3rem .5rem;
    border-radius: 4px;
    background: rgba(255,255,255,.03);
}
nav.navbar.bg-navy .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
nav.navbar.bg-navy .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23d4a574' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Top-level nav items — pill-shaped, no underline indicators */
nav.navbar.bg-navy .navbar-nav { gap: 2px; }
nav.navbar.bg-navy .nav-link {
    color: rgba(255,255,255,.7) !important;
    font-weight: 450;
    font-size: .76rem;
    letter-spacing: -.002em;
    padding: .32rem .6rem !important;
    border-radius: 4px;
    transition: background .18s var(--um-ease), color .18s var(--um-ease);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    line-height: 1.4;
}
nav.navbar.bg-navy .nav-link:hover,
nav.navbar.bg-navy .nav-link:focus {
    background: rgba(255,255,255,.06);
    color: #ffffff !important;
}
/* Open dropdown / active item — solid pill, no underline */
nav.navbar.bg-navy .nav-item.show > .nav-link,
nav.navbar.bg-navy .nav-link[aria-expanded="true"] {
    background: rgba(255,255,255,.11);
    color: #ffffff !important;
}
nav.navbar.bg-navy .nav-link.dropdown-toggle::after {
    margin-left: .3rem;
    border-top: 4px solid currentColor;
    opacity: .45;
}
/* Copper-tinted icons, smaller */
nav.navbar.bg-navy .nav-link i.fa,
nav.navbar.bg-navy .nav-link i.fas,
nav.navbar.bg-navy .nav-link i.far {
    color: #d4a574;
    font-size: .76rem;
}

/* Logo link — smaller, refined */
nav.navbar.bg-navy a > img {
    height: 28px !important;
    transition: opacity .2s var(--um-ease);
}
nav.navbar.bg-navy a:hover > img { opacity: .88; }

/* Logout / right-side button — refined red on the dark bar */
nav.navbar.bg-navy .btn-danger {
    background: #b91c1c !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 500 !important;
    font-size: .74rem !important;
    padding: .3rem .75rem !important;
    border-radius: 4px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 1px 2px rgba(0,0,0,.25) !important;
    transition: background .15s var(--um-ease), transform .15s var(--um-ease) !important;
}
nav.navbar.bg-navy .btn-danger:hover {
    background: #dc2626 !important;
    transform: translateY(-1px);
}

/* ---------- DROPDOWN MENUS ---------- */
.dropdown-menu {
    border: 1px solid var(--um-border) !important;
    border-radius: var(--um-radius) !important;
    box-shadow: var(--um-shadow-md) !important;
    padding: .3rem !important;
    min-width: 220px;
    font-size: .8rem;
    margin-top: .4rem;
    background: var(--um-surface);
}
.dropdown-menu .dropdown-item {
    border-radius: var(--um-radius-sm);
    padding: .4rem .7rem;
    color: var(--um-ink-700);
    font-weight: 450;
    font-size: .8rem;
    transition: background .15s var(--um-ease), color .15s var(--um-ease), padding-left .15s var(--um-ease);
    position: relative;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: var(--um-primary-soft);
    color: var(--um-primary-strong);
    padding-left: .95rem;
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background: var(--um-primary);
    color: #fff;
}
.dropdown-submenu > .dropdown-item.dropdown-toggle::after {
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    border-right: 0;
    margin-left: auto;
    margin-top: 7px;
    opacity: .55;
}

/* ---------- PAGE CONTAINER + HEADER ---------- */
[ng-controller] > .container-fluid,
.container-fluid[ng-controller] {
    padding: 1.5rem 1.75rem;
    max-width: none;
    margin: 0;
}

.um-page-header {
    background: var(--um-surface-grad);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-lg);
    box-shadow: var(--um-shadow-sm);
    padding: .95rem 1.2rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    position: relative;
    overflow: hidden;
}
/* Premium accent: thin gradient bar on the left edge */
.um-page-header::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--um-primary) 0%, var(--um-accent) 100%);
    border-radius: var(--um-radius-lg) 0 0 var(--um-radius-lg);
}
.um-page-header h1,
.um-page-header h2,
.um-page-header h3,
.um-page-header h4,
.um-page-header .um-page-title {
    margin: 0;
    color: var(--um-ink-900);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: -.01em;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    flex: 1 1 auto;
    line-height: 1.25;
}
.um-page-header .um-page-title::before {
    content: '';
    display: none;
}
.um-page-header .um-page-title i {
    color: var(--um-primary);
    font-size: .82rem;
    width: 26px;
    height: 26px;
    background: var(--um-primary-soft);
    border-radius: var(--um-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.um-page-header .um-page-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

/* Generic card container */
.um-card {
    background: var(--um-surface-grad);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-lg);
    box-shadow: var(--um-shadow-sm);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}
.um-card .um-card-title {
    font-size: .82rem;
    font-weight: 600;
    color: var(--um-ink-500);
    letter-spacing: 0;
    margin: 0 0 .85rem;
}

/* Section divider — small gap top/bottom so consecutive filter rows
   sit close together instead of feeling like separate cards. */
.um-divider {
    border: 0;
    border-top: 1px solid var(--um-border);
    margin: .5rem -.25rem;
}

/* ---------- FORM CONTROLS ---------- */
.um-card .form-control,
.um-card .form-select,
.um-page-header .form-control,
.um-page-header .form-select,
.um-filter-bar .form-control,
.um-filter-bar .form-select {
    border: 1px solid var(--um-border-strong);
    border-radius: var(--um-radius);
    padding: .45rem .75rem;
    font-size: .8rem;
    color: var(--um-ink-800);
    background: var(--um-surface);
    transition: border-color .2s var(--um-ease), box-shadow .2s var(--um-ease);
    box-shadow: var(--um-shadow-xs);
}
.um-card .form-control:focus,
.um-card .form-select:focus,
.um-page-header .form-control:focus,
.um-page-header .form-select:focus,
.um-filter-bar .form-control:focus,
.um-filter-bar .form-select:focus {
    border-color: var(--um-primary);
    box-shadow: var(--um-shadow-ring);
    outline: none;
}
.um-card label,
.um-filter-bar label {
    font-size: .72rem;
    font-weight: 500;
    color: var(--um-ink-500);
    letter-spacing: 0;
    margin-bottom: .3rem;
    display: block;
}

/* ---------- BUTTONS ---------- */
.btn {
    border-radius: var(--um-radius);
    font-weight: 500;
    font-size: .76rem;
    letter-spacing: -.002em;
    padding: .4rem .85rem;
    transition: transform .15s var(--um-ease), box-shadow .25s var(--um-ease), background .15s var(--um-ease), filter .15s var(--um-ease);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid transparent;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); filter: brightness(.97); }
.btn:focus-visible { box-shadow: var(--um-shadow-ring) !important; }

.btn-primary,
.btn-info,
.btn.btn-info.btn-sm {
    background: linear-gradient(180deg, #2745a3 0%, var(--um-primary) 60%, #16307a 100%) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 1px 2px rgba(15,23,42,.06),
        0 8px 18px -6px rgba(30,58,138,.45) !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.btn-primary:hover:not(:disabled),
.btn-info:hover:not(:disabled) {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 1px 2px rgba(15,23,42,.06),
        0 14px 26px -6px rgba(30,58,138,.55) !important;
}

.btn-secondary {
    background: var(--um-surface) !important;
    border: 1px solid var(--um-border-strong) !important;
    color: var(--um-ink-700) !important;
    box-shadow: var(--um-shadow-sm) !important;
}
.btn-secondary:hover:not(:disabled) {
    background: var(--um-surface-alt) !important;
    border-color: var(--um-ink-300) !important;
    color: var(--um-ink-900) !important;
}

.btn-success {
    background: linear-gradient(180deg, #0a8665 0%, var(--um-success) 60%, #035e44 100%) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 1px 2px rgba(15,23,42,.06),
        0 8px 18px -6px rgba(4,120,87,.4) !important;
}
.btn-danger {
    background: linear-gradient(180deg, #d52424 0%, var(--um-danger) 60%, #8a1414 100%) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 1px 2px rgba(15,23,42,.06),
        0 8px 18px -6px rgba(185,28,28,.45) !important;
}
.btn-warning {
    background: linear-gradient(180deg, #d3690c 0%, var(--um-warning) 60%, #8a3f06 100%) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 1px 2px rgba(15,23,42,.06),
        0 8px 18px -6px rgba(180,83,9,.45) !important;
}
.btn-sm { padding: .3rem .7rem; font-size: .72rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: grayscale(.15); }

/* ---------- FILTER BAR + MULTI-SELECT DROPDOWNS ---------- */
.um-filter-bar {
    background: var(--um-surface-grad);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-lg);
    box-shadow: var(--um-shadow-sm);
    padding: 1.15rem 1.35rem;
    margin-bottom: 1.35rem;
}
.um-filter-bar .row { row-gap: 1rem; }

/* <site-filter> directive support — the directive's template renders its
   own label ("Select Site:") + a trailing <hr/>. Inside the new filter
   bar we clean those up so it matches the other filter controls.
   Untouched outside .um-filter-bar (legacy pages unaffected). */
.um-filter-bar site-filter > div > label,
.um-filter-bar site-filter label[for="siteFilter"] {
    font-size: .72rem;
    font-weight: 500;
    color: var(--um-ink-500);
    margin-bottom: .3rem;
    letter-spacing: 0;
    text-transform: none;
}
/* Strip the trailing colon "Select Site:" → "Site" */
.um-filter-bar site-filter label[for="siteFilter"] {
    visibility: hidden;
    position: relative;
}
.um-filter-bar site-filter label[for="siteFilter"]::before {
    content: 'Site';
    visibility: visible;
    position: absolute;
    left: 0; top: 0;
}
/* Hide the legacy <hr/> the directive emits — the filter bar already
   provides its own visual grouping. */
.um-filter-bar site-filter hr { display: none; }
/* The directive's <select> matches the rest of the filter row */
.um-filter-bar site-filter select.form-control {
    border: 1px solid var(--um-border-strong);
    border-radius: var(--um-radius);
    padding: .45rem .75rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--um-ink-800);
    background: var(--um-surface);
    box-shadow: var(--um-shadow-xs);
}
.um-filter-bar site-filter select.form-control:focus {
    border-color: var(--um-primary);
    box-shadow: var(--um-shadow-ring);
    outline: none;
}

/* Filter trigger button */
.dropdown-custom-wrapper > button.form-control {
    background: var(--um-surface);
    border: 1px solid var(--um-border-strong);
    border-radius: var(--um-radius);
    color: var(--um-ink-800);
    font-weight: 500;
    font-size: .8rem;
    padding: .45rem .75rem;
    text-align: left;
    transition: border-color .2s var(--um-ease), box-shadow .2s var(--um-ease);
    height: auto;
    line-height: 1.4;
    box-shadow: var(--um-shadow-xs);
}
.dropdown-custom-wrapper > button.form-control:hover {
    border-color: var(--um-ink-300);
}
.dropdown-custom-wrapper > button.form-control:focus,
.dropdown-custom-wrapper.um-open > button.form-control {
    border-color: var(--um-primary);
    box-shadow: var(--um-shadow-ring);
    outline: none;
}
.dropdown-custom-wrapper > button.form-control .fa-caret-down {
    color: var(--um-ink-400);
    font-size: .78rem;
    transition: transform .2s var(--um-ease);
}
.dropdown-custom-wrapper.um-open > button.form-control .fa-caret-down {
    transform: rotate(180deg);
}

/* Floating panel */
.dropdown-custom-wrapper > div[ng-show] {
    border: 1px solid var(--um-border) !important;
    border-radius: var(--um-radius) !important;
    box-shadow: var(--um-shadow-lg) !important;
    padding: .7rem !important;
    background: var(--um-surface) !important;
    min-width: 230px;
    animation: um-drop-in .18s var(--um-ease);
}
@keyframes um-drop-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dropdown-custom-wrapper > div[ng-show] a {
    color: var(--um-primary);
    font-size: .72rem;
    font-weight: 600;
    text-decoration: none;
    padding: .25rem .5rem;
    border-radius: var(--um-radius-sm);
    transition: background .15s var(--um-ease);
    letter-spacing: .02em;
}
.dropdown-custom-wrapper > div[ng-show] a:hover {
    background: var(--um-primary-soft);
}
.dropdown-custom-wrapper > div[ng-show] .form-check {
    padding: .3rem .55rem .3rem 2.1rem;
    margin: 0;
    border-radius: var(--um-radius-sm);
    transition: background .12s var(--um-ease);
}
.dropdown-custom-wrapper > div[ng-show] .form-check:hover {
    background: var(--um-surface-alt);
}
.dropdown-custom-wrapper > div[ng-show] .form-check-input {
    margin-left: -1.6rem;
    margin-top: .25rem;
    width: 1em;
    height: 1em;
    border: 1.5px solid var(--um-ink-300);
    border-radius: var(--um-radius-xs);
    cursor: pointer;
    transition: border-color .15s var(--um-ease), background-color .15s var(--um-ease);
}
.dropdown-custom-wrapper > div[ng-show] .form-check-input:checked {
    background-color: var(--um-primary);
    border-color: var(--um-primary);
}
.dropdown-custom-wrapper > div[ng-show] .form-check-label {
    font-size: .78rem;
    color: var(--um-ink-800);
    cursor: pointer;
    font-weight: 450;
}

/* ---------- TABLES ---------- */
.um-table-wrap {
    background: var(--um-surface);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-lg);
    box-shadow: var(--um-shadow);
    overflow: hidden;
}
.um-table-wrap .table-responsive {
    overflow: auto;
    max-height: 75vh;
}
.um-table-wrap table.table {
    margin: 0;
    font-size: .8rem;
    border-collapse: separate;
    border-spacing: 0;
}
.um-table-wrap thead th {
    background: var(--um-surface-alt) !important;
    color: var(--um-ink-500) !important;
    font-weight: 500;
    font-size: .72rem;
    letter-spacing: 0;
    border: 0 !important;
    border-bottom: 1px solid var(--um-border) !important;
    padding: .55rem .85rem !important;
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
}
.um-table-wrap tbody td {
    border-top: 1px solid var(--um-border);
    padding: .55rem .85rem;
    color: var(--um-ink-800);
    vertical-align: middle;
    font-weight: 400;
    font-size: .8rem;
}
.um-table-wrap tbody tr {
    transition: background .15s var(--um-ease);
}
.um-table-wrap tbody tr:nth-child(even) { background: rgba(241, 245, 249, .35); }
.um-table-wrap tbody tr:hover {
    background: var(--um-primary-soft) !important;
}
.um-table-wrap tfoot td,
.um-table-wrap tr.table-secondary td {
    background: var(--um-surface-alt) !important;
    color: var(--um-ink-900) !important;
    font-weight: 600;
    border-top: 1px solid var(--um-border-strong) !important;
    padding: .6rem .85rem !important;
    font-size: .8rem;
}

/* ---------- BADGES ---------- */
.um-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    font-weight: 500;
    padding: .15rem .45rem;
    border-radius: 4px;
    background: var(--um-primary-soft);
    color: var(--um-primary-strong);
    letter-spacing: 0;
    line-height: 1.3;
    border: 1px solid rgba(30,58,138,.12);
}
.um-badge.um-badge-success {
    background: var(--um-success-soft);
    color: #065f46;
    border-color: rgba(4,120,87,.16);
}
.um-badge.um-badge-warning {
    background: var(--um-warning-soft);
    color: #78350f;
    border-color: rgba(180,83,9,.18);
}
.um-badge.um-badge-danger {
    background: var(--um-danger-soft);
    color: #7f1d1d;
    border-color: rgba(185,28,28,.18);
}
.um-badge.um-badge-muted {
    background: var(--um-surface-bg);
    color: var(--um-ink-500);
    border-color: var(--um-border-strong);
}

/* ---------- LOADING / EMPTY STATES ---------- */
.um-empty {
    text-align: center;
    padding: 3.5rem 1rem;
    color: var(--um-ink-400);
    font-size: .95rem;
    font-weight: 500;
}
.um-empty i {
    font-size: 2.4rem;
    display: block;
    margin-bottom: .9rem;
    opacity: .35;
    color: var(--um-ink-300);
}

/* ---------- STAT TILES (premium) ---------- */
.um-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.35rem;
}
.um-stat {
    background: var(--um-surface-grad);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-lg);
    box-shadow: var(--um-shadow-sm);
    padding: .85rem 1.05rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    transition: transform .25s var(--um-ease), box-shadow .25s var(--um-ease), border-color .25s var(--um-ease);
    position: relative;
    overflow: hidden;
}
.um-stat::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(400px 200px at 100% 0%, rgba(30,58,138,.06), transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s var(--um-ease);
}
.um-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--um-shadow-md);
    border-color: var(--um-border-strong);
}
.um-stat:hover::after { opacity: 1; }

.um-stat-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--um-radius-sm);
    background: var(--um-primary-soft);
    color: var(--um-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(30,58,138,.08);
}
.um-stat-meta { line-height: 1.25; min-width: 0; }
.um-stat-label {
    font-size: .68rem;
    color: var(--um-ink-400);
    font-weight: 500;
    margin-bottom: .15rem;
    letter-spacing: 0;
}
.um-stat-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--um-ink-900);
    letter-spacing: -.012em;
    line-height: 1.1;
}

/* ---------- Mini breakdown stat cards (shared by report pages) ----------
   Usage:
   <div class="um-mini-section">
     <div class="um-mini-title"><i class="fa fa-circle-info"></i> By Status</div>
     <div class="um-mini-grid">
       <div class="um-mini tone-green">
         <div>
           <div class="um-mini-label">Running</div>
           <div class="um-mini-pct">62% of total</div>
         </div>
         <div class="um-mini-count">62</div>
       </div>
     </div>
   </div>                                                                  */
.um-mini-section {
    background: #fff;
    border: 1px solid var(--um-border, #e2e8f0);
    border-radius: 12px;
    padding: .85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    margin-bottom: 1rem;
}
.um-mini-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--um-ink-900, #0f172a);
    margin-bottom: .65rem;
}
.um-mini-title i { color: var(--um-primary, #1e3a8a); }
.um-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .55rem;
}
.um-mini {
    border: 1px solid var(--um-border, #e2e8f0);
    border-left: 3px solid var(--um-border, #e2e8f0);
    border-radius: 8px;
    padding: .55rem .7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    transition: background .15s;
    min-height: 56px;
}
.um-mini:hover { background: var(--um-surface-alt, #f8fafc); }
.um-mini .um-mini-label {
    font-size: .72rem;
    color: var(--um-ink-700, #475569);
    font-weight: 500;
    line-height: 1.15;
}
.um-mini .um-mini-count {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--um-ink-900, #0f172a);
    line-height: 1;
}
.um-mini .um-mini-pct {
    font-size: .65rem;
    color: #94a3b8;
    font-weight: 500;
    margin-top: 2px;
}
.um-mini.tone-green  { border-left-color: #16a34a; }
.um-mini.tone-green .um-mini-count  { color: #16a34a; }
.um-mini.tone-amber  { border-left-color: #d97706; }
.um-mini.tone-amber .um-mini-count  { color: #d97706; }
.um-mini.tone-red    { border-left-color: #dc2626; }
.um-mini.tone-red .um-mini-count    { color: #dc2626; }
.um-mini.tone-blue   { border-left-color: #2563eb; }
.um-mini.tone-blue .um-mini-count   { color: #2563eb; }
.um-mini.tone-purple { border-left-color: #7c3aed; }
.um-mini.tone-purple .um-mini-count { color: #7c3aed; }
.um-mini.tone-gray   { border-left-color: #94a3b8; }
.um-mini.tone-gray .um-mini-count   { color: #475569; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    nav.navbar.bg-navy .nav-link { padding: .55rem .75rem !important; }
    .um-page-header { padding: 1.1rem 1.2rem; }
    .um-page-header .um-page-title { font-size: 1.15rem; }
    .um-page-header .um-page-title i { width: 34px; height: 34px; font-size: 1rem; }
    .um-filter-bar { padding: 1rem 1.1rem; }
    [ng-controller] > .container-fluid,
    .container-fluid[ng-controller] { padding: 1rem 1rem; }
    .um-stat-value { font-size: 1.35rem; }
}
@media (max-width: 575.98px) {
    .um-page-header { flex-direction: column; align-items: stretch; }
    .um-page-header .um-page-actions { justify-content: flex-end; }
    .um-stat-grid { grid-template-columns: 1fr; }
}