/*
 * Local application stylesheet — UI Milestone 1.
 *
 * Hand-written and served statically on purpose: this project has no frontend
 * build system, and the milestone forbids introducing one. Everything here layers
 * on top of the Bootstrap 5 RTL build already loaded by layouts/app.blade.php.
 *
 * Logical properties (inline-start/end) are used throughout so the shell mirrors
 * correctly between the Arabic RTL default and an LTR locale without a second
 * stylesheet.
 */

/*
 * DLEEL CAR BRAND IDENTITY — the single definition. Never repeat a hex value
 * in a Blade file; every surface below reads these.
 *
 * PRIMARY  #4792AF  rgb(71,146,175)   links, primary actions, selected filters,
 *                                     normal chart bars, active and focus states
 * SECONDARY#BD1622  rgb(189,22,34)    RESERVED. Critical debt, failed imports,
 *                                     destructive actions, genuinely urgent
 *                                     conditions only — never decoration.
 *
 * The tints are derived from those two hues so the palette stays one family,
 * over neutral white and light-grey surfaces. Meaning is never carried by colour
 * alone: every state that uses colour also carries a text label or an icon.
 */
:root {
    --cmp-brand: #4792AF;
    --cmp-brand-rgb: 71, 146, 175;
    --cmp-brand-dark: #34718a;   /* AA text on white: 4.8:1 */
    --cmp-brand-darker: #245567;
    --cmp-brand-tint: #e8f1f5;
    --cmp-brand-tint-2: #cfe3ea;

    --cmp-critical: #BD1622;
    --cmp-critical-rgb: 189, 22, 34;
    --cmp-critical-dark: #94111a;  /* AA text on white: 7.1:1 */
    --cmp-critical-tint: #fbe9ea;

    --cmp-ink: #1f2933;
    --cmp-muted: #5b6b7a;
    --cmp-surface: #ffffff;
    --cmp-line: #dfe6ec;

    --cmp-sidebar-width: 260px;
    --cmp-header-height: 56px;
    --cmp-sidebar-bg: #0f1b2d;
    --cmp-sidebar-fg: #c7d2e0;
    --cmp-sidebar-fg-active: #ffffff;
    --cmp-sidebar-active: var(--cmp-brand);   /* was #1d4ed8, a generic blue that belonged to no brand */
    --cmp-body-bg: #f4f6fa;
}

/*
 * Arabic-first system font stack. Every family listed ships with Windows, macOS,
 * iOS, Android or common Linux distributions — there is NO webfont download and
 * no external dependency, which keeps the app usable offline and avoids adding a
 * build step purely to serve fonts.
 */
body {
    background: var(--cmp-body-bg);
    min-height: 100vh;
    font-family: "Segoe UI", "Noto Sans Arabic", "Noto Kufi Arabic", "Dubai",
                 "Geeza Pro", "Tahoma", "Arial", system-ui, -apple-system, sans-serif;
}

/* Arabic reads better with slightly more line height than Bootstrap's default. */
[dir="rtl"] body {
    line-height: 1.7;
}

/*
 * Latin-script identifiers (contract codes, emails, external IDs, phone numbers)
 * must stay left-to-right and visually intact even inside an RTL paragraph.
 */
.cmp-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* ------------------------------------------------------------------ shell */
.cmp-shell {
    display: flex;
    min-height: calc(100vh - var(--cmp-header-height));
}

.cmp-sidebar {
    width: var(--cmp-sidebar-width);
    flex: 0 0 var(--cmp-sidebar-width);
    background: var(--cmp-sidebar-bg);
    color: var(--cmp-sidebar-fg);
    padding: 1rem .75rem;
}

.cmp-content {
    flex: 1 1 auto;
    padding: 1.5rem;
    min-width: 0; /* lets wide tables scroll instead of stretching the layout */
}

/* ---------------------------------------------------------------- nav links */
.cmp-nav-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .625rem .75rem;
    margin-bottom: .125rem;
    border-radius: .5rem;
    color: var(--cmp-sidebar-fg);
    text-decoration: none;
    font-size: .9375rem;
    transition: background-color .15s ease, color .15s ease;
}

.cmp-nav-link:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--cmp-sidebar-fg-active);
}

.cmp-nav-link.active {
    background: var(--cmp-sidebar-active);
    color: var(--cmp-sidebar-fg-active);
    font-weight: 600;
}

/* Visible keyboard focus — Bootstrap's default ring disappears on this dark bg. */
.cmp-nav-link:focus-visible,
.cmp-skip-link:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.cmp-nav-heading {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .55;
    padding: 0 .75rem;
    margin: 1rem 0 .375rem;
}

.cmp-nav-icon {
    width: 1.25rem;
    text-align: center;
    flex: 0 0 auto;
}

/* -------------------------------------------------------- skip link (a11y) */
.cmp-skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 1080;
    padding: .5rem 1rem;
    background: #fff;
    border-radius: 0 0 .375rem 0;
}

.cmp-skip-link:focus {
    inset-inline-start: 0;
}

/* --------------------------------------------------------------- stat cards */
.cmp-stat {
    border: 1px solid #e5e9f0;
    border-radius: .75rem;
    background: #fff;
    padding: 1rem 1.125rem;
    height: 100%;
}

.cmp-stat-label {
    font-size: .8125rem;
    color: #6b7280;
    margin-bottom: .25rem;
}

.cmp-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #111827;
}

.cmp-stat-value.is-muted {
    color: #9ca3af;
    font-size: 1rem;
    font-weight: 500;
}

/* ------------------------------------------------------------------ tables */
.cmp-card {
    border: 1px solid #e5e9f0;
    border-radius: .75rem;
    background: #fff;
}

.cmp-card > .cmp-card-header {
    padding: .875rem 1.125rem;
    border-bottom: 1px solid #eef1f6;
    font-weight: 600;
}

.table thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    font-weight: 600;
    white-space: nowrap;
}

.cmp-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: #6b7280;
}

.cmp-empty-icon {
    font-size: 2rem;
    opacity: .35;
    display: block;
    margin-bottom: .5rem;
}

/*
 * Numeric cells: tabular figures keep money columns aligned, and forcing LTR
 * stops RTL reordering from mangling amounts, dates and identifiers.
 */
.cmp-numeric {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
}

/* Keep numeric cells hugging the correct edge in RTL tables. */
[dir="rtl"] td.cmp-numeric,
[dir="rtl"] dd.cmp-numeric {
    text-align: right;
}

[dir="rtl"] .text-end {
    text-align: left !important;
}

/* Badges sit inline with Arabic text without stretching the row. */
.badge {
    white-space: nowrap;
    vertical-align: middle;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 991.98px) {
    .cmp-sidebar {
        position: fixed;
        top: var(--cmp-header-height);
        bottom: 0;
        inset-inline-start: 0;
        z-index: 1040;
        transform: translateX(0);
        overflow-y: auto;
        display: none;
    }

    .cmp-sidebar.is-open {
        display: block;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .4);
    }

    .cmp-content {
        padding: 1rem;
    }
}

@media (min-width: 992px) {
    .cmp-sidebar-toggle {
        display: none;
    }
}


/* ══ UI Milestone 2 — dashboard ═══════════════════════════════════════════ */

/* Brand-coloured primary action, replacing Bootstrap's default blue. */
.cmp-btn-brand,
.btn.cmp-btn-brand {
    background: var(--cmp-brand);
    border-color: var(--cmp-brand);
    color: #fff;
}
.cmp-btn-brand:hover,
.cmp-btn-brand:focus {
    background: var(--cmp-brand-dark);
    border-color: var(--cmp-brand-dark);
    color: #fff;
}

/* One visible focus treatment for every interactive surface on the dashboard.
   Keyboard users must be able to see where they are without hunting. */
.cmp-kpi:focus-visible,
.cmp-tile:focus-visible,
.cmp-bar-row:focus-visible,
.cmp-btn-brand:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--cmp-brand);
    outline-offset: 2px;
}

/* KPI cards are links, so they carry link affordances rather than looking like
   inert panels that happen to be clickable. */
.cmp-kpi {
    display: block;
    background: var(--cmp-surface);
    border: 1px solid var(--cmp-line);
    border-radius: .5rem;
    padding: 1rem 1.15rem;
    text-decoration: none;
    color: var(--cmp-ink);
    height: 100%;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cmp-kpi:hover {
    border-color: var(--cmp-brand);
    box-shadow: 0 2px 10px rgba(var(--cmp-brand-rgb), .18);
    transform: translateY(-1px);
    color: var(--cmp-ink);
}
.cmp-kpi__label { color: var(--cmp-muted); font-size: .85rem; }
.cmp-kpi__value { font-size: 1.6rem; font-weight: 700; line-height: 1.25; }
.cmp-kpi__note  { color: var(--cmp-muted); font-size: .75rem; }

/* The accent rail is the ONLY place a KPI carries colour, and critical is the
   only card allowed the secondary brand colour. */
.cmp-kpi--brand    { border-inline-start: 4px solid var(--cmp-brand); }
.cmp-kpi--critical { border-inline-start: 4px solid var(--cmp-critical); }

.cmp-tile {
    display: block;
    background: var(--cmp-surface);
    border: 1px solid var(--cmp-line);
    border-radius: .5rem;
    padding: .7rem .85rem;
    text-decoration: none;
    color: var(--cmp-ink);
    height: 100%;
}
.cmp-tile:hover { border-color: var(--cmp-brand); color: var(--cmp-ink); }
.cmp-tile__label { color: var(--cmp-muted); font-size: .78rem; display: block; }
.cmp-tile__value { font-size: 1.15rem; font-weight: 700; }

/* Horizontal bars, drawn with CSS rather than a charting library — no runtime
   dependency, and the numbers stay readable when the bar is too short to hold
   them. Width is inline because it is data, not style. */
.cmp-bar-row {
    display: block;
    text-decoration: none;
    color: var(--cmp-ink);
    padding: .5rem .25rem;
    border-radius: .35rem;
}
.cmp-bar-row:hover { background: var(--cmp-brand-tint); color: var(--cmp-ink); }
.cmp-bar-track {
    background: var(--cmp-brand-tint);
    border-radius: 999px;
    height: .6rem;
    overflow: hidden;
}
.cmp-bar-fill {
    background: var(--cmp-brand);
    height: 100%;
    border-radius: 999px;
}
.cmp-bar-fill--critical { background: var(--cmp-critical); }

/* Freshness pills. Each pairs its colour with a word, so the meaning survives
   greyscale, colour blindness and a bad monitor. */
.cmp-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: 999px;
    padding: .15rem .6rem;
    font-size: .78rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.cmp-pill--ok      { background: var(--cmp-brand-tint); color: var(--cmp-brand-darker); border-color: var(--cmp-brand-tint-2); }
.cmp-pill--warn    { background: #fff4e5; color: #8a5300; border-color: #ffe0b2; }
.cmp-pill--danger  { background: var(--cmp-critical-tint); color: var(--cmp-critical-dark); border-color: #f3c7ca; }
.cmp-pill--muted   { background: #eef1f4; color: var(--cmp-muted); border-color: var(--cmp-line); }

.cmp-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--cmp-brand-tint);
    border: 1px solid var(--cmp-brand-tint-2);
    color: var(--cmp-brand-darker);
    border-radius: 999px;
    padding: .1rem .55rem;
    font-size: .78rem;
}

/* Tables scroll inside their own container, so a wide table never makes the
   PAGE scroll sideways on a phone. */
.cmp-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table-scroll > table { margin-bottom: 0; }

/* Digits line up in columns, which is what makes amounts comparable at a glance. */
.cmp-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 575.98px) {
    .cmp-kpi__value { font-size: 1.35rem; }
    .cmp-kpi { padding: .8rem .9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cmp-kpi, .cmp-kpi:hover { transition: none; transform: none; }
}

/* =================================================================== UI-M3
 * Visual refinement. Everything below reads the brand tokens defined at the top
 * of this file; no hex value is repeated here.
 *
 * The governing rule for red: --cmp-critical marks a CONDITION (overdue debt, a
 * critical case, a failed import), never a category. "Total remaining debt" is a
 * number, not an emergency, so it wears the brand colour like every other KPI.
 * ------------------------------------------------------------------------- */

/* ------------------------------------------------------------------ header */
.cmp-header {
    height: var(--cmp-header-height);
    background: var(--cmp-surface);
    border-bottom: 1px solid var(--cmp-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: 1rem;
}

/* No logo file exists in this project, so the brand is set honestly in type
   rather than with an invented mark. */
.cmp-brandmark {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--cmp-ink);
    text-decoration: none;
    letter-spacing: -.01em;
}

.cmp-brandmark__rule {
    width: 3px;
    height: 1.15rem;
    border-radius: 2px;
    background: var(--cmp-brand);
    flex: 0 0 auto;
}

.cmp-brandmark__name { font-size: 1rem; line-height: 1.2; }

.cmp-brandmark__sub {
    font-size: .75rem;
    font-weight: 500;
    color: var(--cmp-muted);
}

/* Identity block: who you are, then what you may do. Two lines, one hierarchy. */
.cmp-user {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-inline: .5rem;
}

.cmp-user__avatar {
    width: 2rem; height: 2rem;
    flex: 0 0 2rem;
    border-radius: 50%;
    background: var(--cmp-brand-tint);
    color: var(--cmp-brand-darker);
    display: grid; place-items: center;
    font-weight: 700; font-size: .8125rem;
}

.cmp-user__text { display: flex; flex-direction: column; line-height: 1.25; }
.cmp-user__name { font-size: .8125rem; font-weight: 600; color: var(--cmp-ink); }
.cmp-user__role { font-size: .6875rem; color: var(--cmp-muted); }

/* Logout stays reachable but never competes with the primary actions. */
.cmp-logout {
    border: 1px solid var(--cmp-line);
    background: transparent;
    color: var(--cmp-muted);
    border-radius: .5rem;
    padding: .3rem .7rem;
    font-size: .8125rem;
}

.cmp-logout:hover { color: var(--cmp-critical-dark); border-color: var(--cmp-critical); }
.cmp-logout:focus-visible { outline: 2px solid var(--cmp-brand); outline-offset: 2px; }

/* --------------------------------------------------------------- KPI cards */
.cmp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.cmp-kpi-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
}

.cmp-kpi-primary {
    /* The whole card is an anchor, so the link underline reached the headline
       number and made a figure look like a hyperlink. Decoration is removed
       here and reintroduced deliberately on hover, on the label only. */
    text-decoration: none;
    color: inherit;
    background: var(--cmp-surface);
    border: 1px solid var(--cmp-line);
    border-radius: .875rem;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(31, 41, 51, .04);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    position: relative;
    overflow: hidden;
}

/* A restrained accent rail, on the inline start so it mirrors under RTL. */
.cmp-kpi-primary::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--cmp-brand);
}

.cmp-kpi-primary__head {
    display: flex; align-items: center; gap: .5rem;
    color: var(--cmp-muted);
    font-size: .8125rem;
    font-weight: 600;
}

.cmp-kpi-primary__icon {
    width: 1.75rem; height: 1.75rem;
    border-radius: .5rem;
    background: var(--cmp-brand-tint);
    color: var(--cmp-brand-darker);
    display: grid; place-items: center;
    font-size: .9rem;
    flex: 0 0 auto;
}

.cmp-kpi-primary__value {
    font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.15rem);
    font-weight: 700;
    color: var(--cmp-ink);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.cmp-kpi-primary__unit {
    font-size: .875rem;
    font-weight: 600;
    color: var(--cmp-muted);
    margin-inline-start: .25rem;
}

.cmp-kpi-primary__note {
    font-size: .75rem;
    color: var(--cmp-muted);
    margin: 0;
}

/* Secondary row: compact, and actionable ones are real links. */
.cmp-kpi-mini {
    display: block;
    background: var(--cmp-surface);
    border: 1px solid var(--cmp-line);
    border-radius: .75rem;
    padding: .75rem .875rem;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

a.cmp-kpi-mini:hover {
    border-color: var(--cmp-brand);
    box-shadow: 0 2px 8px rgba(var(--cmp-brand-rgb), .16);
    transform: translateY(-1px);
}

a.cmp-kpi-mini:focus-visible {
    outline: 2px solid var(--cmp-brand);
    outline-offset: 2px;
}

.cmp-kpi-mini__label { font-size: .75rem; color: var(--cmp-muted); display: block; }
.cmp-kpi-mini__value {
    font-size: 1.35rem; font-weight: 700; color: var(--cmp-ink);
    font-variant-numeric: tabular-nums;
}
.cmp-kpi-mini--critical .cmp-kpi-mini__value { color: var(--cmp-critical-dark); }
.cmp-kpi-mini--critical { border-color: var(--cmp-critical-tint); }

/* ------------------------------------------------------------ aging panel */
.cmp-aging-seg {
    display: flex;
    height: .875rem;
    border-radius: .5rem;
    overflow: hidden;
    background: var(--cmp-brand-tint);
    margin-bottom: 1rem;
}

.cmp-aging-seg__part { display: block; height: 100%; }
.cmp-aging-seg__part + .cmp-aging-seg__part { border-inline-start: 1px solid #fff; }

.cmp-aging-row {
    display: grid;
    grid-template-columns: .75rem 1fr auto;
    align-items: center;
    gap: .625rem;
    padding: .5rem .25rem;
    border-radius: .5rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
}

a.cmp-aging-row:hover { background: var(--cmp-brand-tint); border-color: var(--cmp-brand-tint-2); }
a.cmp-aging-row:focus-visible { outline: 2px solid var(--cmp-brand); outline-offset: 1px; }

.cmp-aging-row__swatch { width: .75rem; height: .75rem; border-radius: .25rem; }
.cmp-aging-row__label { font-size: .875rem; color: var(--cmp-ink); }
.cmp-aging-row__meta {
    font-size: .8125rem; color: var(--cmp-muted);
    font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap;
}
.cmp-aging-row__amount { font-weight: 700; color: var(--cmp-ink); }
.cmp-aging-row--critical .cmp-aging-row__amount { color: var(--cmp-critical-dark); }

/* ----------------------------------------------------------- branch bars */
.cmp-branch-row {
    display: block;
    padding: .625rem .25rem;
    border-radius: .5rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
}

a.cmp-branch-row:hover { background: var(--cmp-brand-tint); border-color: var(--cmp-brand-tint-2); }
a.cmp-branch-row:focus-visible { outline: 2px solid var(--cmp-brand); outline-offset: 1px; }

.cmp-branch-row__top {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .75rem; margin-bottom: .375rem;
}
.cmp-branch-row__name { font-size: .9375rem; font-weight: 600; color: var(--cmp-ink); }
.cmp-branch-row__amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.cmp-branch-row__meta { font-size: .75rem; color: var(--cmp-muted); }
.cmp-branch-row__track {
    height: .5rem; border-radius: .25rem;
    background: var(--cmp-brand-tint); overflow: hidden;
}
.cmp-branch-row__fill { height: 100%; background: var(--cmp-brand); border-radius: .25rem; }

/* ------------------------------------------------------- priority cards */
.cmp-priority-grid {
    /* EXPLICIT columns, not auto-fit. auto-fit packed as many 140px tracks as
       fitted and left the fourth card stranded on its own row - a four-item
       severity scale reads as a scale only when the four sit together. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    align-items: stretch;
}

/* Very narrow phones: one column rather than two cramped ones. */
@media (max-width: 359.98px) {
    .cmp-priority-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Tablet upward: two per row while the panel spans the full content width. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .cmp-priority-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Desktop: the panel becomes half-width, and all four fit on one row. */
@media (min-width: 1200px) {
    .cmp-priority-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cmp-priority {
    display: block;
    border: 1px solid var(--cmp-line);
    border-radius: .75rem;
    padding: .75rem .875rem;
    text-decoration: none; color: inherit;
    background: var(--cmp-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

a.cmp-priority:hover { border-color: var(--cmp-brand); box-shadow: 0 2px 8px rgba(var(--cmp-brand-rgb), .16); }
a.cmp-priority:focus-visible { outline: 2px solid var(--cmp-brand); outline-offset: 2px; }

.cmp-priority__head { display: flex; align-items: center; gap: .375rem; }
.cmp-priority__dot { width: .625rem; height: .625rem; border-radius: 50%; flex: 0 0 auto; }
.cmp-priority__label { font-size: .8125rem; color: var(--cmp-muted); }
.cmp-priority__value {
    font-size: 1.5rem; font-weight: 700; color: var(--cmp-ink);
    font-variant-numeric: tabular-nums;
}
.cmp-priority--critical { border-color: var(--cmp-critical-tint); }
.cmp-priority--critical .cmp-priority__value { color: var(--cmp-critical-dark); }

/* --------------------------------------------------- branch performance */
.cmp-rate {
    display: inline-flex; align-items: center; gap: .5rem;
    font-variant-numeric: tabular-nums;
}
.cmp-rate__track {
    width: 3.5rem; height: .375rem; border-radius: .25rem;
    background: var(--cmp-brand-tint); overflow: hidden; flex: 0 0 auto;
}
.cmp-rate__fill { height: 100%; background: var(--cmp-brand); }

/* ------------------------------------------------------- blocked panel */
.cmp-blocked {
    border: 1px dashed var(--cmp-line);
    border-radius: .75rem;
    background: transparent;
}
.cmp-blocked__summary {
    cursor: pointer; padding: .625rem .875rem;
    font-size: .8125rem; color: var(--cmp-muted);
    display: flex; align-items: center; gap: .5rem;
    list-style: none;
}
.cmp-blocked__summary::-webkit-details-marker { display: none; }
.cmp-blocked__summary:focus-visible { outline: 2px solid var(--cmp-brand); outline-offset: 2px; border-radius: .75rem; }
.cmp-blocked__body { padding: 0 .875rem .75rem; font-size: .8125rem; color: var(--cmp-muted); }
.cmp-blocked__item { padding: .25rem 0; }

/* --------------------------------------------------------------- tables */
.cmp-table-compact { font-size: .875rem; }
.cmp-table-compact > :not(caption) > * > * { padding: .5rem .625rem; vertical-align: middle; }
.cmp-table-compact tbody tr:hover { background: var(--cmp-brand-tint); }
.cmp-cell-name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cmp-panel-link {
    font-size: .8125rem; color: var(--cmp-brand-dark);
    text-decoration: none; font-weight: 600; white-space: nowrap;
}
.cmp-panel-link:hover { text-decoration: underline; color: var(--cmp-brand-darker); }
.cmp-panel-link:focus-visible { outline: 2px solid var(--cmp-brand); outline-offset: 2px; border-radius: .25rem; }

/* -------------------------------------------------- applied filter chips */
.cmp-applied { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; }
.cmp-applied__chip {
    display: inline-flex; align-items: center; gap: .375rem;
    background: var(--cmp-brand-tint); color: var(--cmp-brand-darker);
    border: 1px solid var(--cmp-brand-tint-2);
    border-radius: 999px; padding: .1875rem .625rem; font-size: .75rem;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 767.98px) {
    .cmp-content { padding: 1rem .75rem; }
    .cmp-kpi-primary { padding: .875rem 1rem; }
    .cmp-kpi-primary__value { font-size: 1.5rem; }
    .cmp-user__text { display: none; }
    .cmp-brandmark__sub { display: none; }
    .cmp-aging-row { grid-template-columns: .75rem 1fr; row-gap: .125rem; }
    .cmp-aging-row__meta { grid-column: 2; text-align: start; }
}


/* ------------------------------------------- UI-M3 corrections after review */

/* Anchors wrapping a whole card must not underline their contents. */
a.cmp-kpi-primary,
a.cmp-kpi-primary:hover,
a.cmp-kpi-mini,
a.cmp-kpi-mini:hover,
a.cmp-branch-row,
a.cmp-branch-row:hover,
a.cmp-aging-row,
a.cmp-aging-row:hover,
a.cmp-priority,
a.cmp-priority:hover { text-decoration: none; color: inherit; }

a.cmp-kpi-primary:hover { border-color: var(--cmp-brand); box-shadow: 0 2px 10px rgba(var(--cmp-brand-rgb), .14); }
a.cmp-kpi-primary:hover .cmp-kpi-primary__head { color: var(--cmp-brand-darker); }
a.cmp-kpi-primary:focus-visible { outline: 2px solid var(--cmp-brand); outline-offset: 2px; }

/* The branch bar was built from <span> elements, which are inline and cannot
   take a height, so the track and fill rendered as nothing at all. */
.cmp-branch-row__top { display: flex; }
.cmp-branch-row__track { display: block; }
.cmp-branch-row__fill { display: block; }
.cmp-branch-row__meta { display: block; margin-top: .25rem; }
.cmp-aging-seg__part { display: block; }
.cmp-priority__head { display: flex; }
.cmp-kpi-primary__head { display: flex; }
.cmp-kpi-primary__value { display: block; }
.cmp-kpi-mini__value { display: block; }
.cmp-priority__value { display: block; }
.cmp-rate__track { display: inline-block; }
.cmp-rate__fill { display: block; }

/* ================================================================= UI-M3.1
 * Three bounded corrections found by reviewing the rendered screenshots.
 * ------------------------------------------------------------------------ */

/* 1 · equal-height priority cards ------------------------------------------
 * The grid stretches its tracks, but each card also has to fill the track it
 * was given, or a card with a shorter label sits shorter than its neighbours
 * and the row stops reading as one scale. */
.cmp-priority {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .25rem;
}

/* 2 · action buttons never break their label -------------------------------
 * Bootstrap 5 no longer sets white-space on .btn, so "إعادة تعيين" wrapped to
 * a second line and grew taller than the control beside it. Arabic action
 * labels are short phrases with real spaces in them; they must be treated as
 * one unit. */
.btn,
.cmp-btn-brand,
.cmp-logout,
.cmp-panel-link {
    white-space: nowrap;
}

/* One height and one baseline for every control in a filter row, whether it
   renders as <button> or as <a class="btn">. */
.cmp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .5rem;
}

.cmp-actions > .btn,
.cmp-actions > .cmp-btn-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.125rem;
    line-height: 1.2;
}

/* The primary action sizes to its own label and may shrink, never grow: given
   flex-grow it swallowed the whole track and pushed the reset control onto a
   second LINE, which is the same defect one level up from the wrapped text. */
.cmp-actions > .cmp-action-primary {
    flex: 0 1 auto;
    min-width: 5rem;
    max-width: 14rem;
}

.cmp-actions > .cmp-action-secondary {
    flex: 0 0 auto;
}

/* Below the small breakpoint the row stacks instead of squeezing. */
@media (max-width: 575.98px) {
    .cmp-actions > .cmp-action-primary,
    .cmp-actions > .cmp-action-secondary {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* 3 · logout label ---------------------------------------------------------
 * The full phrase wrapped in the mobile header. The visible text shortens; the
 * ACCESSIBLE name stays the full phrase via aria-label on the button, so
 * nothing is lost to a screen reader or to keyboard use. */
.cmp-logout__short { display: inline; }
.cmp-logout__full { display: none; }

@media (min-width: 768px) {
    .cmp-logout__short { display: none; }
    .cmp-logout__full { display: inline; }
}

/* ------------------------------------- absent-from-source badge (snapshot) */
/* Deliberately NEUTRAL, not red. A contract missing from the provider's file
   is a gap in the FEED, not a critical debt state, and dressing it in the
   alarm colour would tell the operator something untrue about the money. */
.cmp-missing-badge {
    font-size: .6875rem;
    font-weight: 500;
    color: var(--cmp-muted);
    border-color: var(--cmp-line) !important;
    white-space: normal;
}