/* ============================================================
   HSD Fuel Invoices + Invoice Decant modules — scoped UI layer
   Ported from Shar ui-modern.css: ONLY the `um-*` component classes
   these 3 pages use (page header, filter bar, table, badges) plus the
   palette variables they reference. No global body/navbar/container
   overrides, so the rest of the BGR app is unaffected.
   ============================================================ */
:root {
    --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;
    --um-primary:#1e3a8a; --um-primary-strong:#172554; --um-primary-soft:#eef2ff; --um-primary-glow:rgba(30,58,138,.18);
    --um-accent:#b45309; --um-accent-soft:#fef3c7;
    --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;
    --um-bg-page:#f4f6fb; --um-surface:#fff; --um-surface-alt:#fafbfd; --um-surface-bg:#f1f5f9;
    --um-surface-grad:linear-gradient(180deg,#fff 0%,#fafbfd 100%);
    --um-border:rgba(15,23,42,.08); --um-border-strong:rgba(15,23,42,.14);
    --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-ring:0 0 0 4px rgba(30,58,138,.14);
    --um-radius-xs:3px; --um-radius-sm:5px; --um-radius:7px; --um-radius-lg:9px; --um-radius-xl:12px;
    --um-ease:cubic-bezier(.22,1,.36,1);
}

/* ---- Page header (title left, action buttons right, aligned) ---- */
.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: .8rem 1.1rem;
    margin: .5rem 0 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    position: relative;
    overflow: hidden;
}
.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 .um-page-title {
    margin: 0; color: var(--um-ink-900); font-weight: 600; font-size: 1.05rem;
    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 i {
    color: var(--um-primary); font-size: .9rem; width: 32px; height: 32px;
    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: .5rem; flex-wrap: wrap; justify-content: flex-end;
}
.um-page-header .um-page-actions .btn { white-space: nowrap; }

/* ---- Filter bar ---- */
.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: 1rem 1.15rem;
    margin-bottom: 1.15rem;
}
.um-filter-bar .row { row-gap: 1rem; }
.um-filter-bar label {
    font-size: .72rem; font-weight: 500; color: var(--um-ink-500);
    margin-bottom: .3rem; display: block; letter-spacing: 0;
}
.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: .82rem; color: var(--um-ink-800);
    background: var(--um-surface); box-shadow: var(--um-shadow-xs);
    transition: border-color .2s var(--um-ease), box-shadow .2s var(--um-ease);
}
.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;
}

/* ---- Table wrapper ---- */
.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 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);
    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); }

/* ---- Divider ---- */
.um-divider { border: 0; border-top: 1px solid var(--um-border); margin: .5rem -.25rem; }