/* ==========================================================================
AZI admin theme — brands Filament to the official identity.
Works WITH Filament's design tokens rather than rewriting its internals,
so it survives framework updates. Single source of truth for admin brand.
========================================================================== */
:root {
--azi-navy: #001F44;
--azi-navy-dark: #00152F;
--azi-grey: #585855;
--azi-grey-light: #B9BBBB;
--azi-surface-alt:#E7E7E6;
--azi-border: #E1E1E0;
}
/* ---- Typography: Sora everywhere ---- */
.fi-body, .fi-sidebar, .fi-topbar, .fi-main,
.fi-simple-layout, .fi-simple-header-heading {
font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.fi-header-heading, .fi-section-header-heading, .fi-modal-heading { font-weight: 700; letter-spacing: -.01em; }
/* ---- Sidebar: navy brand surface ---- */
.fi-sidebar {
background: var(--azi-navy);
border-inline-end: none;
}
.fi-sidebar .fi-sidebar-header {
background: var(--azi-navy);
box-shadow: none;
border-block-end: 1px solid rgba(255,255,255,.08);
}
/* nav item labels + icons in light ink on navy */
.fi-sidebar-item-label { color: rgba(255,255,255,.82); font-weight: 500; }
.fi-sidebar-item-icon { color: rgba(255,255,255,.6); }
.fi-sidebar-item:hover .fi-sidebar-item-label,
.fi-sidebar-item:hover .fi-sidebar-item-icon { color: #fff; }
.fi-sidebar-item:hover .fi-sidebar-item-btn,
.fi-sidebar-item:hover .fi-sidebar-item-button { background: rgba(255,255,255,.06); }
/* active item */
.fi-sidebar-item.fi-active .fi-sidebar-item-button {
background: rgba(255,255,255,.12);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: #fff; }
.fi-sidebar-group-label { color: rgba(255,255,255,.45); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; }
/* ---- Topbar ---- */
.fi-topbar > nav {
background: #fff;
border-block-end: 1px solid var(--azi-border);
box-shadow: none;
}
/* ---- Primary buttons → navy (replaces Filament amber) ---- */
/* links & primary text accents */
.fi-link-color-primary { color: var(--azi-navy) !important; }
/* ---- Cards / sections ---- */
.fi-section, .fi-wi { border-radius: 10px; }
.fi-main { background: var(--azi-surface-alt); }
/* ---- Tables: hover + spacing ---- */
.fi-ta-row { transition: background-color .12s ease; }
.fi-ta-row:hover { background: rgba(0,31,68,.03); }
.fi-ta-header-cell { font-weight: 600; color: var(--azi-grey); }
/* ---- Inputs: navy focus ring ---- */
.fi-input:focus, .fi-select-input:focus, .fi-textarea:focus {
--tw-ring-color: var(--azi-navy) !important;
border-color: var(--azi-navy) !important;
}
/* ---- Checkboxes / toggles active → navy ---- */
.fi-checkbox-input:checked, .fi-toggle[aria-checked="true"] {
background-color: var(--azi-navy) !important;
}
/* ---- Pagination active page → navy ---- */
.fi-pagination-item[aria-current="page"] .fi-btn {
background-color: var(--azi-navy) !important;
color: #fff !important;
}
/* ---- Dashboard stat widgets ---- */
.fi-wi-stats-overview-stat {
border: 1px solid var(--azi-border);
border-radius: 12px;
transition: box-shadow .15s ease, transform .15s ease;
}
.fi-wi-stats-overview-stat:hover {
box-shadow: 0 4px 14px rgba(0,31,68,.08);
}
/* ---- Login page brand ---- */
.fi-simple-layout { background: var(--azi-surface-alt); }
.fi-simple-main { border-radius: 14px; border: 1px solid var(--azi-border); }
/* ---- Focus visibility (accessibility) ---- */
.fi-btn:focus-visible, .fi-link:focus-visible, .fi-input:focus-visible {
outline: 2px solid var(--azi-navy);
outline-offset: 2px;
}
/* ==========================================================================
DROP 1 (admin) — spacing tokens + TRUE NAVY primary button.
Presentation only, works with Filament's classes.
========================================================================== */
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
}
/* ---- The fix: Filament derives a mid-palette shade for primary buttons, which
rendered light blue. Force the true brand navy on the actual button fills. ---- */
/* Login "Sign in" button specifically (simple layout) */
/* Primary links / active accents to true navy too */
.fi-link-color-primary { color: #001F44 !important; }
.fi-tabs-item.fi-active { color: #001F44 !important; }
/* ---- Consistent gutters / rhythm on content ---- */
.fi-main { padding: var(--space-4) !important; }
.fi-section { padding: var(--space-4); }
.fi-section + .fi-section,
.fi-wi + .fi-wi { margin-block-start: var(--space-3); }
/* ---- Consistent table cell padding ---- */
.fi-ta-cell { padding-block: var(--space-2); }
.fi-ta-header-cell { padding-block: var(--space-2); }
/* ---- Form field rhythm to match the portal ---- */
.fi-fo-field-wrp + .fi-fo-field-wrp { margin-block-start: var(--space-3); }
/* Filament derives button colour from --primary-* palette tokens (RGB triplets),
not a plain background rule. Override those so buttons use true AZI navy. */
:root, .fi {
--primary-50: oklch(0.966 0.014 254.7);
--primary-100: oklch(0.925 0.032 254.7);
--primary-200: oklch(0.858 0.062 254.7);
/* Hover reads 300 (hover:fi-bg-color-300). Darker than 400, not lighter -
hovering a navy button should deepen it. */
--primary-300: oklch(0.265 0.078 254.7);
/* Filament v5 fills primary buttons from the 400 step (fi-bg-color-400), not
500 or 600 - so this is the one that has to be AZI navy. Hover reads 300
(above), which is darker still. */
--primary-400: oklch(0.334 0.098 254.7);
--primary-500: oklch(0.535 0.150 254.7);
--primary-600: oklch(0.334 0.098 254.7);
--primary-700: oklch(0.302 0.088 254.7);
--primary-800: oklch(0.258 0.075 254.7);
--primary-900: oklch(0.221 0.063 254.7);
/* Filament v5 reads 950 for the LABEL on a primary button (fi-text-color-950).
With 400 set to navy the label must be near-white, not the dark step a
conventional scale would put here. The scale is not conventional: what
matters is which step each class actually reads. */
--primary-950: oklch(0.985 0.002 254.7);
}
/* Active sidebar item — translucent white. Scoped through .fi-sidebar and the
nav for specificity above Filament's default; covers both the fi-active class
and aria-current, and both -btn/-button naming, so it cannot miss. */
aside.fi-sidebar nav .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
aside.fi-sidebar nav .fi-sidebar-item.fi-active > .fi-sidebar-item-button,
aside.fi-sidebar nav .fi-sidebar-item[aria-current] > .fi-sidebar-item-btn,
aside.fi-sidebar nav .fi-sidebar-item .fi-sidebar-item-btn[aria-current="page"] {
background-color: rgba(255, 255, 255, 0.10) !important;
background-image: none !important;
}
aside.fi-sidebar nav .fi-sidebar-item.fi-active .fi-sidebar-item-label,
aside.fi-sidebar nav .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
aside.fi-sidebar nav .fi-sidebar-item[aria-current] .fi-sidebar-item-label,
aside.fi-sidebar nav .fi-sidebar-item[aria-current] .fi-sidebar-item-icon {
color: #ffffff !important;
}
/* ==========================================================================
========================================================================== */
/* ==========================================================================
========================================================================== */
/* ==========================================================================
BEGIN — Case file details, approved redesign (pass 3, 17 Sep 2026)
Append-only. Nothing above this line is modified.
To revert: delete everything between BEGIN and END, and restore the two
Blade files from ~/noc-before-casefile-* (original) or
~/noc-casefile-pass1-* (first pass).
PASS 2 adds the approved COMPOSITION: wider canvas, header and stepper as
their own cards, and a 3:2 two-column body — case facts on the left, the
state of the work on the right.
Documents remain where Filament renders the relation manager. Moving them
into the left column requires the page to assemble its own regions, which
is Phase 2 alongside the ACTIONS panel.
Custom properties are prefixed --cf- so they cannot collide with the
--azi-* and --space-* sets defined above, which the rest of the panel uses.
========================================================================== */
/* >>> THESE MOVED TO :root ON 2 OCTOBER, ON THE THIRD OCCURRENCE. <<<
They were scoped to `.azi-cf, .azi-th, .azi-sm`, and three separate rules
ended up referencing them from OUTSIDE that scope. Each time the var()
resolved to nothing, the whole declaration was dropped as invalid, and
Filament's preflight won the property by default:
1. the case header's pills var(--cf-warn-edge) -> no border, no
colour at all
2. .azi-hd was added to the list, which fixed 1 and nothing else
3. the Reject button var(--cf-stop-fg) -> border: 0px,
and not red
Reject is the one that proves the pattern, and the test written for it
found a fourth on its first run: --cf-border was READ in three rules and
DECLARED IN NONE. The token is --azi-border and always was; those three
only ever drew a border because each happened to carry the fallback
#E1E1E0, which is --azi-border's value typed out by hand. A fallback
nobody thought about was the only thing holding them up.
>>> THREE OCCURRENCES OF ONE SHAPE IS WHERE THIS STOPS BEING AN INSTANCE.
<<< Adding a fourth selector to the list would have fixed Reject and left
the fifth consumer to find. The argument against :root was that it puts
forty custom properties on every page in the panel - which is true, costs
nothing at render (custom properties inherit; they are not drawn), and has
now been wrong three times. The scope was never protecting anything.
Declared once, visible everywhere, and CaseHeaderStylesTest asserts that
every --cf-* this stylesheet READS is one it also declares. */
:root {
--cf-navy: #001F44;
--cf-ink: #101828;
--cf-ink-2: #5C6270;
--cf-ink-3: #667085;
--cf-line: #DDE0E5;
--cf-line-soft: #E8EAEE;
--cf-surface: #FFFFFF;
--cf-surface-alt: #F7F8FA;
--cf-rail: #E4E6EA;
--cf-dot: #CFD3DA;
--cf-warn-fg: #6E4A0C;
--cf-warn-edge: #B98A2E;
--cf-warn-bg: #FBF4E6;
--cf-warn-border: #EAD7AE;
--cf-ok-fg: #275B44;
--cf-ok-bg: #E8F0EC;
--cf-stop-fg: #8C2A22;
--cf-stop-bg: #F8EAE8;
--cf-stop-border: #EBD4D1;
/* Filament's own column-gap on .fi-ac, measured in the browser. The
decision cluster has to cancel it to close the seams between its three
buttons, and a value with a name is a value somebody can re-measure. */
--azi-ac-gap: 8px;
--cf-r: 12px;
--cf-r-sm: 8px;
}
/* ---------- Canvas ----------
The approved page is #EEF0F3 at a wide measure. Filament's .fi-main is
#E7E7E6 and narrower. Scoped to pages carrying the case view so no other
admin screen changes. */
.fi-main:has(.azi-cf) {
background: #EEF0F3;
max-inline-size: 1560px;
}
/* ---------- Filament page header ----------
The heading, the breadcrumb and eight action buttons were competing for one
row, so "View case file" broke across three lines and the breadcrumb stacked
with it. The actions are UNTOUCHED — they simply get their own row instead of
squeezing the title. Scoped to this page only. */
.fi-main:has(.azi-cf) .fi-header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 12px;
}
.fi-main:has(.azi-cf) .fi-header > * { flex: 1 1 100%; min-inline-size: 0; }
.fi-main:has(.azi-cf) .fi-header-heading {
font-size: 22px;
letter-spacing: -.02em;
line-height: 1.2;
}
.fi-main:has(.azi-cf) .fi-breadcrumbs { display: flex; flex-wrap: wrap; }
.fi-main:has(.azi-cf) .fi-header-actions,
.fi-main:has(.azi-cf) .fi-header .fi-ac {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start;
}
.azi-cf { display: flex; flex-direction: column; gap: 14px; color: var(--cf-ink); }
/* Cards — the shape everything on this page is made of. */
.azi-cf__card {
background: var(--cf-surface);
border: 1px solid var(--cf-line);
border-radius: var(--cf-r);
padding: 16px;
}
.azi-cf__card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-block-end: 12px;
padding-block-end: 10px;
border-block-end: 1px solid var(--cf-line-soft);
}
.azi-cf__card-title { font-size: 14px; font-weight: 700; letter-spacing: -.015em; color: var(--cf-navy); }
.azi-cf__card-head--stacked {
display: block;
}
.azi-cf__card-head--stacked .azi-cf__card-title { display: block; }
.azi-cf__card-head--stacked .azi-cf__card-sub { display: block; margin-block-start: 4px; }
.azi-cf__card-sub {
font-size: 10.5px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cf-ink-3);
}
/* ---------- Notices ---------- */
.azi-cf__notice {
border: 1px solid var(--cf-warn-border);
border-inline-start: 4px solid var(--cf-warn-edge);
background: var(--cf-warn-bg);
color: var(--cf-warn-fg);
border-radius: 0 var(--cf-r) var(--cf-r) 0;
padding: 11px 14px;
font-size: 13px;
line-height: 1.55;
}
/* Red, not amber: this one blocks handover rather than advising. */
.azi-cf__notice--stop {
border-color: var(--cf-stop-border);
border-inline-start-color: var(--cf-stop-fg);
background: var(--cf-stop-bg);
color: var(--cf-stop-fg);
}
.azi-cf__notice-meta { margin-block-start: 4px; opacity: .85; }
/* ---------- Header card ---------- */
.azi-cf__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.azi-cf__ident { flex: 1 1 300px; min-inline-size: 0; }
.azi-cf__topline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.azi-cf__ref {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
letter-spacing: .02em;
color: var(--cf-ink-3);
font-variant-numeric: tabular-nums;
}
.azi-cf__title {
margin: 6px 0 0;
font-size: 20px;
font-weight: 700;
letter-spacing: -.025em;
line-height: 1.2;
color: var(--cf-navy);
}
.azi-cf__headmeta {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
text-align: end;
}
/* Quieter than the title: this is context, not the subject of the page. */
.azi-cf__meta { font-size: 12.5px; color: var(--cf-ink-3); line-height: 1.5; }
.azi-cf__meta:empty { display: none; }
.azi-cf__chip {
padding: 5px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.azi-cf__chip--ok { background: var(--cf-ok-bg); color: var(--cf-ok-fg); }
.azi-cf__chip--warn { background: var(--cf-warn-bg); color: var(--cf-warn-fg); }
.azi-cf__chip--stop { background: var(--cf-stop-bg); color: var(--cf-stop-fg); }
/* ---------- Stepper card ---------- */
.azi-cf__stepper { overflow-x: auto; padding: 18px 16px 14px; }
.azi-cf__stepper-track {
display: flex;
align-items: flex-start;
min-inline-size: 820px;
inline-size: 100%;
}
.azi-cf__step {
flex: 1 1 0;
min-inline-size: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 7px;
position: relative;
}
.azi-cf__step-line {
position: absolute;
top: 14px;
inset-inline-start: 50%;
inline-size: 100%;
block-size: 2px;
background: var(--cf-rail);
}
.azi-cf__step-line.is-done { background: var(--cf-ok-fg); }
.azi-cf__step-node {
position: relative;
z-index: 1;
inline-size: 28px;
block-size: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
background: var(--cf-surface);
color: var(--cf-ink-3);
border: 2px solid var(--cf-dot);
}
.azi-cf__step-node.is-done { background: var(--cf-ok-fg); color: #fff; border: none; }
.azi-cf__step-node.is-current { background: var(--cf-navy); color: #fff; border: none; }
.azi-cf__step-node.is-returned { background: var(--cf-warn-edge); color: #fff; border: none; }
.azi-cf__step-label { font-size: 11.5px; font-weight: 400; color: var(--cf-ink-3); line-height: 1.2; }
.azi-cf__step-label.is-done { color: var(--cf-ink-2); }
.azi-cf__step-label.is-current { color: var(--cf-navy); font-weight: 600; }
.azi-cf__step-label.is-returned { color: var(--cf-warn-fg); font-weight: 600; }
.azi-cf__step-date { font-size: 11px; color: var(--cf-ink-3); font-variant-numeric: tabular-nums; }
/* ---------- Callouts ---------- */
.azi-cf__callout {
border: 1px solid var(--cf-warn-border);
border-inline-start: 4px solid var(--cf-warn-edge);
background: var(--cf-warn-bg);
color: var(--cf-warn-fg);
padding: 12px 16px;
border-radius: 0 var(--cf-r) var(--cf-r) 0;
}
.azi-cf__callout--stop {
border-color: var(--cf-stop-border);
border-inline-start-color: var(--cf-stop-fg);
background: var(--cf-stop-bg);
color: var(--cf-stop-fg);
}
.azi-cf__callout-title { font-weight: 700; margin-block-end: 6px; }
.azi-cf__callout-body,
.azi-cf__callout-item { font-size: 13px; line-height: 1.6; }
/* ---------- The two columns — 3:2, per the approved design ---------- */
.azi-cf__cols { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.azi-cf__col { display: flex; flex-direction: column; gap: 14px; min-inline-size: 0; }
.azi-cf__col--main { flex: 3 1 560px; }
.azi-cf__col--side { flex: 2 1 300px; }
/* ---------- Payment ----------
Amber because amber means money — the same rule the customer portal uses,
and the reason the fee is no longer a grey line under the title. */
/* Neutral by default; amber only while payment is actually due. */
.azi-cf__pay {
background: var(--cf-surface-alt);
border-color: var(--cf-rail);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.azi-cf__pay-label {
font-size: 10.5px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cf-ink-2);
}
.azi-cf__pay-amount {
font-size: 20px;
font-weight: 700;
letter-spacing: -.02em;
color: var(--cf-ink);
font-variant-numeric: tabular-nums;
}
.azi-cf__pay.is-due { background: #FCF9F2; border-color: #EFE6D3; }
.azi-cf__pay.is-due .azi-cf__pay-label,
.azi-cf__pay.is-due .azi-cf__pay-amount { color: var(--cf-warn-fg); }
/* ---------- Detail panels ---------- */
/* One card with divided sections, not a box inside a box. The nested border
was a second frame the approved design does not have. */
.azi-cf__panel {
border: 0;
border-block-start: 1px solid var(--cf-line-soft);
border-radius: 0;
padding: 14px 0 2px;
margin-block-end: 0;
background: transparent;
}
.azi-cf__panel:first-of-type { border-block-start: 0; padding-block-start: 0; }
.azi-cf__panel:last-child { margin-block-end: 0; }
.azi-cf__panel-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-block-end: 8px;
flex-wrap: wrap;
}
.azi-cf__panel-title { font-size: 13px; font-weight: 700; color: var(--cf-navy); }
.azi-cf__verify { font-size: 11px; font-weight: 600; white-space: nowrap; }
.azi-cf__verify.is-ok { color: var(--cf-ok-fg); }
.azi-cf__verify.is-pending { color: var(--cf-warn-fg); }
.azi-cf__row { display: flex; font-size: 13px; padding-block: 3px; gap: 12px; }
.azi-cf__row-label { inline-size: 175px; flex-shrink: 0; color: var(--cf-ink-2); }
.azi-cf__row-value { color: var(--cf-ink); min-inline-size: 0; }
/* Amber, not red: an absent value is outstanding, not an error. */
.azi-cf__row-value.is-missing { color: var(--cf-warn-fg); }
/* ---------- Verification summary (right column) ---------- */
.azi-cf__vrow {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: 11px;
/* Top, not centre: the tick belongs beside the label's first line, which is
what keeps a two-line label from pushing the mark out of alignment. */
align-items: start;
padding-block: 10px;
border-block-end: 1px solid var(--cf-line-soft);
}
.azi-cf__vrow:first-of-type { padding-block-start: 0; }
.azi-cf__vrow:last-child { border-block-end: none; padding-block-end: 0; }
.azi-cf__vmark {
margin-block-start: 1px;
inline-size: 20px;
block-size: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
.azi-cf__vmark.is-ok { background: var(--cf-ok-bg); color: var(--cf-ok-fg); }
.azi-cf__vmark.is-pending { background: var(--cf-warn-bg); color: var(--cf-warn-fg); }
.azi-cf__vbody { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.azi-cf__vlabel { font-size: 13px; font-weight: 600; color: var(--cf-ink); }
.azi-cf__vstate { font-size: 11.5px; }
.azi-cf__vstate.is-ok { color: var(--cf-ok-fg); }
.azi-cf__vstate.is-pending { color: var(--cf-warn-fg); }
/* ---------- History (still collapsed — see the view comment) ---------- */
/* Matches the Verification card's rhythm so the two read as a set. */
.azi-cf__history { display: block; }
.azi-cf__history-summary {
font-size: 14px;
font-weight: 700;
letter-spacing: -.015em;
color: var(--cf-navy);
cursor: pointer;
list-style: none;
}
.azi-cf__history-summary::-webkit-details-marker { display: none; }
.azi-cf__history-summary::before { content: "▸ "; color: var(--cf-ink-3); font-weight: 400; }
.azi-cf__history[open] .azi-cf__history-summary::before { content: "▾ "; }
.azi-cf__history[open] .azi-cf__history-summary {
padding-block-end: 10px;
margin-block-end: 12px;
border-block-end: 1px solid var(--cf-line-soft);
}
.azi-cf__history-count { color: var(--cf-ink-3); font-weight: 400; font-size: 12.5px; }
/* ---------- Shared rail (history + thread) ---------- */
.azi-cf__rail, .azi-th__rail { position: relative; padding-inline-start: 22px; }
.azi-cf__rail-line, .azi-th__rail-line {
position: absolute;
inset-inline-start: 6px;
top: 4px;
bottom: 4px;
inline-size: 2px;
background: var(--cf-rail);
}
.azi-cf__entry { position: relative; margin-block-end: 16px; }
.azi-cf__entry:last-child { margin-block-end: 0; }
.azi-cf__entry-dot {
position: absolute;
inset-inline-start: -22px;
top: 2px;
inline-size: 14px;
block-size: 14px;
border-radius: 50%;
background: var(--cf-dot);
border: 3px solid #fff;
}
.azi-cf__entry-text { font-size: 13.5px; color: var(--cf-ink); }
.azi-cf__entry-quote { font-size: 13px; color: var(--cf-ink-2); font-style: italic; }
.azi-cf__entry-meta { font-size: 12px; color: var(--cf-ink-3); }
.azi-cf__empty { font-size: 13px; color: var(--cf-ink-3); }
/* ---------- Thread — the approved panel treatment, unchanged behaviour ---------- */
.azi-th {
display: block;
margin-block-start: 14px;
background: var(--cf-surface);
border: 1px solid var(--cf-line);
border-radius: var(--cf-r);
padding: 16px;
color: var(--cf-ink);
}
/* The relay obligation: an accent edge and a state line, not a badge among
other badges. Ordinary notes are information; this is work. */
.azi-th__relay {
border: 1px solid var(--cf-stop-border);
border-inline-start: 4px solid var(--cf-stop-fg);
background: var(--cf-stop-bg);
padding: 12px 14px;
border-radius: 0 var(--cf-r) var(--cf-r) 0;
margin-block-end: 16px;
}
.azi-th__relay-title { font-size: 13px; font-weight: 700; color: var(--cf-stop-fg); }
.azi-th__relay-body { font-size: 13px; color: var(--cf-stop-fg); margin-block-start: 4px; line-height: 1.55; }
.azi-th__relay-note { font-size: 12px; color: var(--cf-stop-fg); opacity: .82; margin-block-start: 6px; }
.azi-th__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-block-end: 12px;
padding-block-end: 10px;
border-block-end: 1px solid var(--cf-line-soft);
}
.azi-th__title { font-size: 14px; font-weight: 700; letter-spacing: -.015em; color: var(--cf-navy); }
.azi-th__count { font-size: 12.5px; color: var(--cf-ink-3); }
.azi-th__entry { position: relative; margin-block-end: 16px; }
.azi-th__entry:last-child { margin-block-end: 0; }
.azi-th__dot {
position: absolute;
inset-inline-start: -22px;
top: 2px;
inline-size: 14px;
block-size: 14px;
border-radius: 50%;
border: 3px solid #fff;
}
/* Navy for customer-visible, grey for internal — comments-design-v1.1 §12.5. */
.azi-th__dot.is-customer { background: var(--cf-navy); }
.azi-th__dot.is-internal { background: var(--cf-dot); }
.azi-th__body--internal {
background: var(--cf-surface-alt);
border: 1px solid var(--cf-line-soft);
border-radius: var(--cf-r-sm);
padding: 8px 10px;
}
.azi-th__text { font-size: 13.5px; color: var(--cf-ink); white-space: pre-wrap; }
/* States an event, not a category. */
.azi-th__sent {
display: inline-block;
font-size: 12px;
color: var(--cf-navy);
background: #E7EBF2;
padding: 2px 8px;
border-radius: 999px;
margin-block-start: 6px;
}
.azi-th__meta { font-size: 12px; color: var(--cf-ink-3); margin-block-start: 4px; }
.azi-th__empty { font-size: 13px; color: var(--cf-ink-3); }
/* ---------- Documents relation manager ----------
Themed toward the approved design in place. Position is Phase 2. */
.fi-main:has(.azi-cf) .fi-ta-ctn,
.fi-main:has(.azi-cf) .fi-sc-has-gap > .fi-rn-mgr .fi-sc {
border-radius: var(--cf-r);
border-color: var(--cf-line);
}
/* ---------- Narrow screens ----------
Approvals happen from phones. The columns stack via flex-wrap on their own
basis; the detail rows stack rather than squeezing a 175px label column. */
@media (max-width: 680px) {
.azi-cf__row { flex-direction: column; gap: 2px; padding-block: 5px; }
.azi-cf__row-label { inline-size: auto; font-size: 12px; }
.azi-cf__panel-head { flex-direction: column; align-items: flex-start; gap: 4px; }
.azi-cf__head { flex-direction: column; }
.azi-cf__headmeta { align-items: flex-start; text-align: start; }
}
/* ==========================================================================
END — Case file details, approved redesign
========================================================================== */
/* ---------- AW-40 Summary — first on the page, one treatment for every role ----------
The recommendation is the only thing sized to be read from across a desk; the
three facts under it are what an approver checks it against, so they are
quiet by construction rather than by being smaller versions of the same
thing. Send-back history is last and only appears when there is any. */
.azi-sm {
display: block;
margin-block-end: 14px;
background: var(--cf-surface);
border: 1px solid var(--cf-line);
border-radius: var(--cf-r);
padding: 16px;
color: var(--cf-ink);
}
.azi-sm__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-block-end: 12px;
padding-block-end: 10px;
border-block-end: 1px solid var(--cf-line-soft);
}
.azi-sm__title { font-size: 14px; font-weight: 700; letter-spacing: -.015em; color: var(--cf-navy); }
.azi-sm__stage { font-size: 12.5px; color: var(--cf-ink-3); }
/* The recommendation carries an accent edge for the same reason the relay
obligation does: it is the line the panel exists to deliver, and a heading
among headings would not say so. */
.azi-sm__rec {
border-inline-start: 4px solid var(--cf-navy);
background: var(--cf-surface-alt);
padding: 12px 14px;
border-radius: 0 var(--cf-r-sm) var(--cf-r-sm) 0;
}
.azi-sm__rec-label {
font-size: 11.5px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--cf-ink-3);
}
.azi-sm__rec-body {
font-size: 16px;
font-weight: 600;
line-height: 1.45;
color: var(--cf-navy);
margin-block-start: 4px;
/* An empty recommendation must not collapse the block to its label - see the
ruling recorded in summary.blade.php. The row keeps its height so the panel
reads as "nothing recorded" rather than as a rendering fault. */
min-block-size: 23px;
}
.azi-sm__facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 12px 20px;
margin-block-start: 14px;
}
.azi-sm__fact dt {
font-size: 11.5px;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--cf-ink-3);
}
.azi-sm__fact dd {
font-size: 13.5px;
color: var(--cf-ink);
margin: 3px 0 0;
line-height: 1.5;
min-block-size: 20px;
}
/* Item 2: the senior brief. It sits ABOVE the page header, so it has to read as
a standalone card rather than as part of the body - and it must be quieter
than the approve button it sits over, not louder. */
.azi-sb {
margin-block-end: 18px;
padding: 16px 18px;
border: 1px solid var(--cf-line, #E4E7EC);
border-inline-start: 4px solid var(--cf-navy, #001F44);
border-radius: 10px;
background: #fff;
}
.azi-sb__head {
font-size: 12.5px;
font-weight: 600;
letter-spacing: .01em;
color: var(--cf-ink-2);
margin-block-end: 10px;
}
.azi-sb__label {
font-size: 11.5px;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--cf-ink-3);
}
.azi-sb__rec { margin-block-end: 12px; }
.azi-sb__rec-body {
font-size: 15px;
font-weight: 600;
color: var(--cf-ink);
margin-block-start: 3px;
line-height: 1.4;
}
.azi-sb__facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 12px 20px;
margin: 0;
}
.azi-sb__fact dt {
font-size: 11.5px;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--cf-ink-3);
}
.azi-sb__fact dd { font-size: 13.5px; color: var(--cf-ink); margin: 3px 0 0; line-height: 1.5; }
.azi-sb__comments { margin-block-start: 14px; }
.azi-sb__comments-body {
font-size: 13.5px;
color: var(--cf-ink);
line-height: 1.55;
margin-block-start: 3px;
white-space: pre-line;
}
/* Item 2: the decision word on a stage row. A send-back and an approval used to
render identically - see the note in summary.blade.php. */
.azi-sm__stage-decision {
display: inline-block;
margin-inline-start: 8px;
padding: 1px 7px;
border-radius: 10px;
border: 1px solid var(--cf-warn-border);
background: var(--cf-warn-bg);
color: var(--cf-warn-fg);
font-size: 11px;
font-weight: 600;
vertical-align: 1px;
}
/* Item 1: the credit assessment history./* Item 1: the credit assessment history. Deliberately quieter than the AW-40
summary above it - this is the working, not the decision, and it must not
compete with the panel an approver is meant to read first. */
.azi-ca__version {
padding: 14px 0;
border-block-start: 1px solid var(--cf-line, #E4E7EC);
}
.azi-ca__version:first-child { border-block-start: 0; padding-block-start: 0; }
/* "[Role] - [Full Name] - [Date]", ruled 22 September. ONE line, one element:
the parts are joined in the model so the heading can be asserted whole, which
also means there is nothing here to space apart. */
.azi-ca__who {
font-size: 12.5px;
font-weight: 600;
color: var(--cf-ink-2);
margin-block-end: 8px;
}
.azi-ca__rec-label,
.azi-ca__comments-label {
font-size: 11.5px;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--cf-ink-3);
}
.azi-ca__rec-body { font-size: 13.5px; color: var(--cf-ink); margin-block-start: 3px; }
.azi-ca__comments { margin-block-start: 10px; }
.azi-ca__comments-body {
font-size: 13px;
color: var(--cf-ink);
line-height: 1.55;
margin-block-start: 3px;
white-space: pre-line;
}
.azi-ca__facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 10px 20px;
margin-block-start: 10px;
}
.azi-ca__fact dt {
font-size: 11.5px;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--cf-ink-3);
}
.azi-ca__fact dd { font-size: 13.5px; color: var(--cf-ink); margin: 3px 0 0; line-height: 1.5; }
/* SP-26: the CRM pill. THREE STATES, THREE COLOURS, and grey is a real one -
"not checked" must never be shown in the same colour as "not in CRM", because
one waits on an admin upload and the other is a fact about the customer. */
.azi-sm__crm {
display: inline-block;
margin-inline-start: 8px;
padding: 1px 7px;
border-radius: 10px;
border: 1px solid transparent;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .01em;
vertical-align: 1px;
}
.azi-sm__crm--yes { background: var(--cf-ok-bg); color: var(--cf-ok-fg); border-color: var(--cf-ok-fg); }
.azi-sm__crm--no { background: var(--cf-warn-bg); color: var(--cf-warn-fg); border-color: var(--cf-warn-border); }
.azi-sm__crm--unknown { background: #F2F4F7; color: var(--cf-ink-3); border-color: #D6DAE1; }
.azi-sm__comments { margin-block-start: 14px; }
.azi-sm__comments-label {
font-size: 11.5px;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--cf-ink-3);
}
.azi-sm__comments-body {
font-size: 13.5px;
line-height: 1.6;
color: var(--cf-ink);
margin-block-start: 3px;
white-space: pre-line;
min-block-size: 21px;
}
.azi-sm__back {
margin-block-start: 16px;
padding-block-start: 12px;
border-block-start: 1px solid var(--cf-line-soft);
}
/* Item 3: the send-back history collapses. The marker is hidden and replaced
with a worded toggle - "Show history" says what opening it gives you, where a
bare triangle says only that something is hidden. */
.azi-sm__back > summary { cursor: pointer; list-style: none; }
.azi-sm__back > summary::-webkit-details-marker { display: none; }
.azi-sm__back-toggle {
margin-inline-start: 10px;
font-size: 12px;
font-weight: 500;
color: var(--cf-navy, #001F44);
text-decoration: underline;
}
.azi-sm__back[open] .azi-sm__back-toggle::after { content: ''; }
.azi-sm__back[open] .azi-sm__back-toggle { visibility: hidden; }
.azi-sm__back-label {
font-size: 12.5px;
font-weight: 700;
color: var(--cf-warn-fg);
margin-block-end: 8px;
}
.azi-sm__back-row { margin-block-end: 10px; }
.azi-sm__back-row:last-child { margin-block-end: 0; }
.azi-sm__back-to { font-size: 12.5px; font-weight: 600; color: var(--cf-ink-2); }
.azi-sm__back-when { font-size: 12px; color: var(--cf-ink-3); margin-inline-start: 8px; }
.azi-sm__back-why { font-size: 13px; color: var(--cf-ink); line-height: 1.55; margin-block-start: 2px; }
/* AW-40 change 3: the reference blocks. Quiet by construction - these are what
an approver checks the assessment AGAINST, not what they are deciding. */
.azi-sm__group {
margin-block-start: 16px;
padding-block-start: 12px;
border-block-start: 1px solid var(--cf-line-soft);
}
.azi-sm__group-label {
font-size: 11.5px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--cf-navy);
margin-block-end: 8px;
}
.azi-sm__driver {
display: flex;
align-items: baseline;
gap: 10px;
font-size: 13.5px;
color: var(--cf-ink);
padding-block: 3px;
}
.azi-sm__driver-name { font-weight: 600; }
.azi-sm__driver-nat { font-size: 12.5px; color: var(--cf-ink-3); }
.azi-sm__stages {
margin-block-start: 16px;
padding-block-start: 12px;
border-block-start: 1px solid var(--cf-line-soft);
}
.azi-sm__stage-comment { margin-block-end: 12px; }
.azi-sm__stage-comment:last-child { margin-block-end: 0; }
/* >>> THE UPPERCASE WENT, AND IT WAS THE WHOLE COMPLAINT. <<< This rendered
"CREDIT CONTROL MANAGER . MANAR CC . 16 SEP 2026" - a person's name shouted
in a label style meant for column headings. A name is not a heading.
The size stays small and the colour stays quiet: this line is attribution,
not content. What changed is that it now reads as a sentence about a person
rather than as a field label. */
.azi-sm__stage-who {
font-size: 12.5px;
letter-spacing: 0;
color: var(--cf-ink-3);
}
/* ---------- The actor line: name, role, date ----------
Shared by the stage decisions, the send-back history and the verification
marks, so all three attribute work the same way. */
.azi-actor__who {
font-weight: 700;
color: var(--cf-ink);
}
.azi-actor__when {
font-weight: 400;
color: var(--cf-ink-3);
}
.azi-sm__back-by {
font-size: 12.5px;
margin-block-start: 2px;
}
.azi-sm__stage-body {
font-size: 13.5px;
line-height: 1.6;
color: var(--cf-ink);
margin-block-start: 3px;
white-space: pre-line;
}
/* SP-18: the same-actor mark, on the case page. A fact, not an accusation -
so it uses the warning palette rather than the stop palette: something to
notice when reading the history, never something that blocks work. */
.azi-cf__step-same {
position: absolute;
inset-block-start: -4px;
inset-inline-end: 6px;
inline-size: 15px;
block-size: 15px;
border-radius: 50%;
background: var(--cf-warn-bg);
border: 1px solid var(--cf-warn-edge);
color: var(--cf-warn-fg);
font-size: 10.5px;
font-weight: 700;
line-height: 13px;
text-align: center;
}
.azi-cf__same-actor {
margin-block-start: 14px;
padding: 10px 12px;
border: 1px solid var(--cf-warn-border);
border-inline-start: 4px solid var(--cf-warn-edge);
background: var(--cf-warn-bg);
border-radius: 0 var(--cf-r-sm) var(--cf-r-sm) 0;
}
.azi-cf__same-actor-row { display: flex; gap: 8px; align-items: baseline; }
.azi-cf__same-actor-row + .azi-cf__same-actor-row { margin-block-start: 6px; }
.azi-cf__same-actor-stage {
font-size: 12px;
font-weight: 700;
color: var(--cf-warn-fg);
white-space: nowrap;
}
.azi-cf__same-actor-text { font-size: 12.5px; color: var(--cf-warn-fg); line-height: 1.5; }
/* ---------- SP-14: the forced password change ----------
THE MARKUP CARRIED THESE CLASSES AND THE STYLESHEET HAD NONE OF THEM, so the
page rendered as browser-default text and inputs inside the panel chrome -
unstyled in the one place a person cannot navigate away from until they act.
Built from the tokens above rather than from new colours: the navy is the
panel's navy, the border is the panel's border, and the radius and spacing
match the cards on the case page. A screen nobody can skip should not be the
screen that looks unfinished. */
.azi-pw {
max-width: 460px;
background: #fff;
border: 1px solid var(--azi-border);
border-radius: 12px;
padding: 28px;
box-shadow: 0 1px 2px rgba(0, 31, 68, .04);
}
/* The message is the reason the page exists, so it leads rather than sits as a
caption. Its wording is ruled and is not this rule's business. */
.azi-pw__lead {
font-size: 15px;
line-height: 1.55;
color: var(--azi-navy);
margin: 0 0 22px;
padding-inline-start: 12px;
border-inline-start: 3px solid var(--azi-navy);
}
.azi-pw__form { display: flex; flex-direction: column; gap: 6px; }
.azi-pw__form label {
font-size: 12.5px;
font-weight: 600;
color: var(--azi-grey);
margin-block-start: 12px;
}
.azi-pw__form label:first-of-type { margin-block-start: 0; }
.azi-pw__form input[type="password"] {
width: 100%;
font: inherit;
font-size: 14px;
padding: 9px 12px;
color: var(--azi-navy);
background: #fff;
border: 1px solid var(--azi-border);
border-radius: 8px;
transition: border-color .12s ease, box-shadow .12s ease;
}
.azi-pw__form input[type="password"]:focus {
outline: none;
border-color: var(--azi-navy);
box-shadow: 0 0 0 3px rgba(0, 31, 68, .10);
}
.azi-pw__form button[type="submit"] {
margin-block-start: 22px;
align-self: flex-start;
font: inherit;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--azi-navy);
border: 0;
border-radius: 8px;
padding: 10px 20px;
cursor: pointer;
transition: background .12s ease;
}
.azi-pw__form button[type="submit"]:hover { background: var(--azi-navy-dark); }
/* Red, and ABOVE the button rather than below it - a message under the control
it refers to is read after the second click, not before it. */
.azi-pw__error {
margin-block-start: 12px;
font-size: 13px;
color: #B42318;
background: #FEF3F2;
border: 1px solid #FECDCA;
border-radius: 8px;
padding: 9px 12px;
}
/* ---------- AW-11: the sent-back sub-label ----------
Amber, under the reference, and only on a case that arrived from above. It
must read as a NOTE rather than as an error: a sent-back case is ordinary
work, not a failure, and red would put it in the same visual class as a
rejection. Smaller than the reference it sits under, so the row still reads
reference-first. */
.azi-sentback {
color: #B54708;
font-weight: 600;
font-size: 11.5px;
letter-spacing: .01em;
}
/* ==========================================================================
BEGIN — Admin dashboard (19 Sep 2026, compact v2)
Append-only. Nothing above this line is modified.
To revert: delete everything between BEGIN and END, restore the provider's
Dashboard import, and remove the two new files.
Everything is scoped under .azd. THE ONE EXCEPTION is the width rule
directly below, which uses :has(.azd) so it applies on this page and no
other: the dashboard needs more of the desktop than Filament's default
measure gives it, and that measure is set on a fi- container.
COMPACTED, NOT SHRUNK. The first attempt took everything down at once and
the result read as a zoomed-out page rather than a designed one. This sits
between that and the original: the WIDTH does the work, and the type and
the rows stay at a size a person reads comfortably at 100%.
Body and table text 13-14px. Card titles 15px. Rows 52px, against 58 in
the original and 46 in the over-compacted pass. Gaps 14, padding 15.
Vertical scrolling is expected and fine - fitting one viewport was never
the goal.
========================================================================== */
/* ---------- Page width ----------
The only rule here touching a fi- class, and scoped so it cannot reach
another admin page. Filament's default measure leaves the dashboard
narrower than the design assumes at 100% zoom. */
.fi-main:has(.azd) {
max-inline-size: 1680px;
padding: 22px 26px !important;
}
.azd {
--d-navy: #001F44;
--d-ink: #101828;
--d-ink-2: #5C6270;
--d-ink-3: #667085;
--d-line: #DDE0E5;
--d-soft: #E8EAEE;
--d-surface: #FFFFFF;
--d-alt: #F7F8FA;
--d-amber: #B98A2E;
--d-amber-fg:#6E4A0C;
--d-amber-bg:#FBF4E6;
--d-green: #275B44;
--d-green-bg:#E8F0EC;
--d-red: #8C2A22;
--d-red-bg: #F8EAE8;
--d-steel: #4A6285;
display: flex;
flex-direction: column;
gap: 14px;
color: var(--d-ink);
}
.azd__stamp {
font-size: 11px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--d-ink-3);
}
.azd__row { display: grid; gap: 14px; align-items: start; }
.azd__row--top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.azd__row--mid { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
.azd__row--bot { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
/* ---------- Cards ---------- */
.azd-card {
background: var(--d-surface);
border: 1px solid var(--d-line);
border-radius: 12px;
overflow: hidden;
}
.azd-card__head {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
padding: 14px 16px;
border-block-end: 1px solid var(--d-soft);
}
.azd-card__title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--d-navy); }
.azd-card__sub {
font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; color: var(--d-ink-3);
}
.azd-card__aside { margin-inline-start: auto; font-size: 12.5px; color: var(--d-ink-2); }
.azd-card__note { color: var(--d-ink-3); }
.azd-card__foot {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 11px 16px; border-block-start: 1px solid var(--d-soft);
font-size: 12.5px; color: var(--d-ink-2);
}
.azd-card__foot a { color: var(--d-navy); font-weight: 600; text-decoration: none; }
.azd-card__foot a:hover { text-decoration: underline; }
/* ---------- Awaiting your action ---------- */
.azd-await {
background: var(--d-navy);
border-radius: 14px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
min-block-size: 100%;
}
.azd-await__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 17px 19px 0; }
.azd-await__eyebrow {
margin: 0 0 12px; font-size: 10.5px; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62);
}
.azd-await__figure { display: flex; align-items: flex-end; gap: 14px; margin: 0 0 18px; }
.azd-await__number { font-size: 45px; font-weight: 700; letter-spacing: -.04em; line-height: .9; }
.azd-await__line { font-size: 13.5px; line-height: 1.35; color: rgba(255,255,255,.86); max-inline-size: 22ch; }
.azd-await__cta {
flex: 0 0 auto;
background: #fff; color: var(--d-navy);
font-size: 13.5px; font-weight: 700;
padding: 11px 16px; border-radius: 9px; text-decoration: none;
white-space: nowrap;
}
.azd-await__cta:hover { background: #E7EBF2; }
.azd-await__split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block-start: 1px solid rgba(255,255,255,.14); }
.azd-await__cell { padding: 13px 16px; }
.azd-await__cell + .azd-await__cell { border-inline-start: 1px solid rgba(255,255,255,.14); }
.azd-await__cell-label {
margin: 0 0 6px; font-size: 10px; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.azd-await__cell-value { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.azd-await__cell-hint { margin-inline-start: 8px; font-size: 11.5px; font-weight: 400; color: rgba(255,255,255,.6); }
/* ---------- KPI cards ---------- */
.azd-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.azd-kpi {
background: var(--d-surface);
border: 1px solid var(--d-line);
border-block-start: 2px solid var(--d-navy);
border-radius: 12px;
padding: 14px 15px;
}
.azd-kpi--amber { border-block-start-color: var(--d-amber); }
.azd-kpi--green { border-block-start-color: var(--d-green); }
.azd-kpi__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.azd-kpi__label { font-size: 13.5px; font-weight: 600; color: var(--d-ink); }
.azd-kpi__delta { font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); cursor: help; }
.azd-kpi__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-block: 6px 4px; }
.azd-kpi__value { font-size: 31px; font-weight: 700; letter-spacing: -.035em; line-height: 1; color: var(--d-navy); }
/* Eight weekly buckets, each a real count. */
.azd-kpi__spark { display: flex; align-items: flex-end; gap: 2px; block-size: 24px; }
.azd-kpi__spark i { inline-size: 4px; background: var(--d-soft); border-radius: 1px; }
.azd-kpi--amber .azd-kpi__spark i { background: #EFE0C2; }
.azd-kpi--green .azd-kpi__spark i { background: #D6E5DC; }
.azd-kpi__note { margin: 0; font-size: 12.5px; color: var(--d-ink-3); }
/* ---------- Requires immediate attention ---------- */
.azd-tabs { margin-inline-start: auto; display: flex; gap: 3px; padding: 3px; background: #F0F1F3; border-radius: 9px; }
.azd-tab {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 11px; border-radius: 7px;
font-size: 12.5px; font-weight: 600; color: var(--d-ink-2);
}
.azd-tab.is-active { background: #fff; color: var(--d-navy); box-shadow: 0 1px 2px rgba(0,31,68,.08); }
.azd-tab__count { font-weight: 500; color: var(--d-ink-3); }
.azd-thead, .azd-row {
display: grid;
grid-template-columns: minmax(0, 1.7fr) 56px minmax(0, 1fr) 80px 96px;
gap: 12px;
align-items: center;
padding-inline: 16px;
}
.azd-thead {
block-size: 36px; background: var(--d-alt); border-block-end: 1px solid var(--d-soft);
font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--d-ink-3);
}
.azd-thead__end { text-align: end; }
.azd-row { position: relative; min-block-size: 52px; border-block-end: 1px solid var(--d-soft); }
.azd-row:last-of-type { border-block-end: 0; }
.azd-row::before {
content: ""; position: absolute; inset-block: 10px; inset-inline-start: 0;
inline-size: 3px; border-start-end-radius: 3px; border-end-end-radius: 3px; background: var(--d-navy);
}
.azd-row--amber::before { background: var(--d-amber); }
.azd-row--green::before { background: var(--d-green); }
.azd-row--red::before { background: var(--d-red); }
.azd-row--grey::before { background: #C9CBCF; }
.azd-row__name { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--d-navy); }
.azd-row__meta { margin: 2px 0 0; font-size: 12.5px; color: var(--d-ink-3); font-variant-numeric: tabular-nums; }
.azd-row__div { font-size: 12.5px; font-weight: 600; color: var(--d-ink-2); }
.azd-row__wait { text-align: end; font-size: 13.5px; font-weight: 700; color: var(--d-red); font-variant-numeric: tabular-nums; }
.azd-row__go { text-align: end; }
.azd-row__go a { font-size: 12.5px; font-weight: 600; color: var(--d-navy); text-decoration: none; white-space: nowrap; }
.azd-row__go a:hover { text-decoration: underline; }
.azd-chip {
display: inline-block; padding: 4px 9px; border-radius: 7px;
font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.azd-chip--navy { background: #E7EBF2; color: var(--d-navy); }
.azd-chip--amber { background: var(--d-amber-bg); color: var(--d-amber-fg); }
.azd-chip--green { background: var(--d-green-bg); color: var(--d-green); }
.azd-chip--grey { background: #EAEBEC; color: var(--d-ink-2); }
/* ---------- Workflow distribution ---------- */
.azd-dist__bar { display: flex; gap: 2px; margin: 14px 16px 12px; block-size: 8px; }
.azd-dist__seg { display: block; border-radius: 2px; }
.azd-dist__seg--navy { background: var(--d-navy); }
.azd-dist__seg--steel { background: var(--d-steel); }
.azd-dist__seg--amber { background: var(--d-amber); }
.azd-dist__seg--red { background: var(--d-red); }
.azd-dist__seg--green { background: var(--d-green); }
.azd-dist__row {
display: grid; grid-template-columns: 10px minmax(0, 1fr) 46px 46px;
gap: 10px; align-items: center;
padding: 9px 16px; border-block-start: 1px solid var(--d-soft);
font-size: 13px;
}
.azd-dist__dot { inline-size: 8px; block-size: 8px; border-radius: 2px; }
.azd-dist__dot--navy { background: var(--d-navy); }
.azd-dist__dot--steel { background: var(--d-steel); }
.azd-dist__dot--amber { background: var(--d-amber); }
.azd-dist__dot--red { background: var(--d-red); }
.azd-dist__dot--green { background: var(--d-green); }
.azd-dist__label { color: var(--d-ink); }
.azd-dist__count { text-align: end; font-weight: 700; color: var(--d-navy); font-variant-numeric: tabular-nums; }
.azd-dist__share { text-align: end; color: var(--d-ink-3); font-variant-numeric: tabular-nums; }
/* ---------- Division performance ---------- */
.azd-divs__head, .azd-divs__row {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.6fr) 70px 96px 70px;
gap: 14px; align-items: center; padding-inline: 16px;
}
.azd-divs__head {
block-size: 36px; background: var(--d-alt); border-block-end: 1px solid var(--d-soft);
font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--d-ink-3);
}
.azd-divs__num { text-align: end; font-variant-numeric: tabular-nums; }
.azd-divs__row { min-block-size: 54px; border-block-end: 1px solid var(--d-soft); font-size: 13px; }
.azd-divs__row:last-of-type { border-block-end: 0; }
.azd-divs__name { display: flex; align-items: center; gap: 11px; min-inline-size: 0; }
.azd-divs__code {
flex: 0 0 auto; inline-size: 32px; block-size: 24px; border-radius: 7px;
background: var(--d-navy); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.azd-divs__title { display: block; font-weight: 700; color: var(--d-navy); }
.azd-divs__sub { display: block; font-size: 12px; color: var(--d-ink-3); }
.azd-divs__track { block-size: 8px; background: var(--d-soft); border-radius: 4px; overflow: hidden; }
.azd-divs__fill { display: block; block-size: 100%; background: var(--d-navy); border-radius: 4px; }
.azd-divs__fill i{ display: block; block-size: 100%; background: var(--d-green); margin-inline-start: auto; }
.azd-divs__total { font-weight: 700; color: var(--d-navy); }
.azd-divs__key { display: inline-block; inline-size: 8px; block-size: 8px; border-radius: 2px; margin-inline-end: 5px; }
.azd-divs__key--open { background: var(--d-navy); }
.azd-divs__key--done { background: var(--d-green); margin-inline-start: 12px; }
/* ---------- Side column ---------- */
.azd-side { display: flex; flex-direction: column; gap: 14px; }
.azd-pa {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 13px 16px; border-block-end: 1px solid var(--d-soft);
}
.azd-pa:last-child { border-block-end: 0; }
.azd-pa__label { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--d-navy); }
.azd-pa__note { margin: 2px 0 0; font-size: 12.5px; color: var(--d-ink-3); }
.azd-pa__right { display: flex; align-items: center; gap: 10px; }
.azd-pa__count { font-size: 21px; font-weight: 700; letter-spacing: -.03em; color: var(--d-navy); font-variant-numeric: tabular-nums; }
.azd-pa__flag {
font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
background: var(--d-amber-bg); color: var(--d-amber-fg); white-space: nowrap;
}
.azd-act { display: flex; gap: 11px; padding: 11px 16px; border-block-end: 1px solid var(--d-soft); }
.azd-act:last-child { border-block-end: 0; }
.azd-act__dot { flex: 0 0 8px; inline-size: 8px; block-size: 8px; border-radius: 50%; margin-block-start: 5px; }
.azd-act__dot--navy { background: var(--d-navy); }
.azd-act__dot--green { background: var(--d-green); }
.azd-act__dot--red { background: var(--d-red); }
.azd-act__text { margin: 0; font-size: 13px; color: var(--d-navy); font-weight: 600; line-height: 1.4; }
.azd-act__meta { margin: 2px 0 0; font-size: 12px; color: var(--d-ink-3); }
/* ---------- Empty ---------- */
.azd-empty { padding: 30px 16px; text-align: center; }
.azd-empty__title { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--d-navy); }
.azd-empty__body { margin: 0; font-size: 12.5px; color: var(--d-ink-3); }
/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
.azd__row--top, .azd__row--mid, .azd__row--bot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
/* Mobile keeps the roomier rhythm: compaction is for the desktop view. */
.fi-main:has(.azd) { padding: 14px 12px !important; }
.azd__row, .azd { gap: 16px; }
.azd-kpis { grid-template-columns: minmax(0, 1fr); }
.azd-await__head { flex-direction: column; gap: 14px; }
.azd-await__cta { align-self: stretch; text-align: center; }
.azd-await__split { grid-template-columns: minmax(0, 1fr); }
.azd-await__cell + .azd-await__cell { border-inline-start: 0; border-block-start: 1px solid rgba(255,255,255,.14); }
.azd-await__number { font-size: 42px; }
/* The two tables stop being grids and stack, rather than scrolling
sideways on a phone. */
.azd-thead, .azd-divs__head { display: none; }
.azd-row, .azd-divs__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; padding-block: 14px; }
.azd-row__div, .azd-divs__track { display: none; }
.azd-tabs { inline-size: 100%; overflow-x: auto; }
}
/* ==========================================================================
END — Admin dashboard
========================================================================== */
/* ==========================================================================
BEGIN — Admin topbar (19 Sep 2026)
Append-only. Nothing above this line is modified.
To revert: delete everything between BEGIN and END, remove the two
renderHooks from AdminPanelProvider, and delete the two partials.
Compact, aligned to the dashboard's own measure, with one hairline rather
than a shadow - which is what will let it sit beside a navy sidebar without
looking like a separate application.
NOTHING FUNCTIONAL IS TOUCHED. The global search is Filament's, the user
menu trigger and its dropdown are Filament's, and no route, permission or
behaviour is altered. This file positions and styles what is already there.
========================================================================== */
/* ---------- The bar ---------- */
.fi-topbar > nav {
min-block-size: 56px;
background: #fff;
border-block-end: 1px solid #E4E7EC;
box-shadow: none;
/* THE SAME MEASURE AND GUTTERS AS THE DASHBOARD. This is most of what makes
the header feel attached: the search was ending at the browser's edge
while the content below stopped 26px short of it. */
max-inline-size: 1680px;
margin-inline: auto;
padding-inline: 26px !important;
display: flex;
align-items: center;
gap: 14px;
}
/* ---------- Left: page title and stamp ---------- */
.azt-title { display: flex; align-items: center; gap: 12px; min-inline-size: 0; }
.azt-title__text {
font-size: 17px;
font-weight: 700;
letter-spacing: -.02em;
color: #001F44;
white-space: nowrap;
}
.azt-title__rule { inline-size: 1px; block-size: 18px; background: #E4E7EC; }
.azt-title__stamp {
font-size: 11px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: #667085;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* THE DASHBOARD'S OWN COPIES, HIDDEN NOT REMOVED. The Blade still renders
them; one deleted rule each brings them back. Scoped with :has(.azd) so no
other admin page loses its heading. */
.azd__stamp { display: none; }
.fi-main:has(.azd) .fi-header-heading,
.fi-main:has(.azd) .fi-header { display: none; }
/* ---------- Middle: the existing global search ---------- */
/* Pushed off the title and given the rest of the row, so it reads as part of
the bar rather than floating at the far right. */
.fi-topbar .fi-global-search { margin-inline-start: auto; order: 5; }
.fi-topbar .fi-global-search-field .fi-input-wrp,
.fi-topbar .fi-global-search .fi-input-wrp {
inline-size: clamp(280px, 30vw, 420px);
min-block-size: 34px;
background: #F4F5F7;
border: 1px solid #E4E7EC;
border-radius: 8px;
box-shadow: none;
}
.fi-topbar .fi-global-search input {
font-size: 13px;
color: #101828;
background: transparent;
}
.fi-topbar .fi-global-search input::placeholder { color: #667085; }
/* The same focus language the dashboard uses. */
.fi-topbar .fi-global-search .fi-input-wrp:focus-within {
background: #fff;
border-color: #001F44;
box-shadow: 0 0 0 2px rgba(0, 31, 68, .12);
}
/* ---------- Right: the user block ---------- */
/* A divider before the user area, drawn on the text block so it appears only
when there is a user to divide from. */
.azt-user {
order: 8;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1px;
padding-inline-start: 16px;
margin-inline-start: 2px;
border-inline-start: 1px solid #E4E7EC;
/* Only Filament's trigger opens the menu. */
pointer-events: none;
}
.azt-user__name { font-size: 13px; font-weight: 600; color: #101828; white-space: nowrap; line-height: 1.25; }
.azt-user__role { font-size: 11.5px; color: #667085; white-space: nowrap; line-height: 1.25; }
/* Filament's own trigger, ordered after the text so the two read as one
block. Its behaviour is untouched. */
.fi-topbar .fi-user-menu,
.fi-topbar .fi-dropdown { order: 9; }
.fi-topbar .fi-avatar,
.fi-topbar .fi-user-avatar {
inline-size: 30px;
block-size: 30px;
background: #001F44;
color: #fff;
font-size: 11.5px;
font-weight: 700;
}
/* The chevron, drawn rather than added as an element, so no markup is needed
inside Filament's trigger. */
.fi-topbar .fi-user-menu::after,
.fi-topbar .fi-dropdown:last-child::after {
content: "";
display: inline-block;
inline-size: 6px;
block-size: 6px;
margin-inline-start: 9px;
border-inline-end: 1.5px solid #98A2B3;
border-block-end: 1.5px solid #98A2B3;
transform: translateY(-2px) rotate(45deg);
pointer-events: none;
}
.fi-topbar .fi-user-menu,
.fi-topbar .fi-dropdown:last-child { display: inline-flex; align-items: center; }
/* ---------- Narrow ---------- */
@media (max-width: 1023px) {
/* The name and role drop; the avatar and its menu stay exactly as they are. */
.azt-user { display: none; }
.azt-title__rule, .azt-title__stamp { display: none; }
.fi-topbar .fi-global-search-field .fi-input-wrp,
.fi-topbar .fi-global-search .fi-input-wrp { inline-size: clamp(180px, 40vw, 280px); }
}
@media (max-width: 767px) {
.fi-topbar > nav { padding-inline: 14px !important; gap: 10px; }
.azt-title__text { font-size: 15px; }
}
/* ==========================================================================
END — Admin topbar
========================================================================== */
/* ==========================================================================
BEGIN — Case header: meta bar, verification pills, decision cluster
Ruled 1 October 2026, styled 2 October. Append-only, like the blocks above.
To revert: delete everything between BEGIN and END and remove the
case-header render hook from AdminPanelProvider.
>>> IT REUSES --cf-warn-* AND --cf-ok-*, NOT A NEW PALETTE. <<< The ruling
names tokens (--border-warning, --text-warning, --bg-success) that this
project does not have; the equivalents it DOES have are the --cf-* set
defined with the case-file redesign above, and they are already what the
journey panel's verification marks use. A second amber would be a second
amber: two greens on one screen, drifting the first time either changed.
ruled name this project
--border-warning -> --cf-warn-edge
--text-warning -> --cf-warn-fg
--bg-success -> --cf-ok-bg
--text-success -> --cf-ok-fg
--border-success -> --cf-ok-fg (at 40% via colour-mix)
========================================================================== */
.azi-hd {
background: #FFFFFF;
border: 1px solid var(--azi-border, #E1E1E0);
border-radius: var(--cf-r, 12px);
margin-block-end: 1rem;
padding: 1rem 1.25rem;
}
/* ---- Zone 1: the meta bar ---- */
.azi-hd__meta {
align-items: start;
display: grid;
gap: .75rem 1.5rem;
grid-template-columns: minmax(0, 1fr) auto;
}
.azi-hd__crumb {
color: var(--azi-grey, #585855);
font-size: .8125rem;
margin: 0 0 .15rem;
}
.azi-hd__crumb a { color: inherit; text-decoration: none; }
.azi-hd__crumb a:hover { text-decoration: underline; }
.azi-hd__crumb span { margin-inline: .35rem; }
.azi-hd__title {
font-size: 1.25rem;
font-weight: 650;
line-height: 1.25;
margin: 0;
}
.azi-hd__plate {
background: var(--azi-surface-alt, #E7E7E6);
border-radius: var(--cf-r-sm, 8px);
font-size: .875rem;
font-weight: 600;
margin-inline-start: .5rem;
padding: .1rem .45rem;
vertical-align: middle;
}
/* The four approved tones, same meanings as the customer's list: act (amber),
wait (navy), done (green), stop (red). Colour follows MEANING - amber is not
"warning" here, it means somebody must act. */
.azi-hd__status {
border-radius: 999px;
display: inline-block;
font-size: .75rem;
font-weight: 600;
margin-block-start: .4rem;
padding: .2rem .6rem;
}
.azi-hd .azi-hd__status--act { background: var(--cf-warn-bg); color: var(--cf-warn-fg); }
.azi-hd .azi-hd__status--wait { background: var(--azi-surface-alt, #E7E7E6); color: var(--azi-navy, #001F44); }
.azi-hd .azi-hd__status--done { background: var(--cf-ok-bg); color: var(--cf-ok-fg); }
.azi-hd .azi-hd__status--stop { background: var(--cf-stop-bg); color: var(--cf-stop-fg); }
.azi-hd .azi-hd__status--neutral { background: var(--azi-surface-alt, #E7E7E6); color: var(--azi-grey, #585855); }
.azi-hd__facts {
display: flex;
flex-wrap: wrap;
gap: .4rem 1.5rem;
grid-column: 1 / -1;
margin: 0;
}
.azi-hd__facts div { min-width: 0; }
.azi-hd__facts dt {
color: var(--azi-grey, #585855);
font-size: .6875rem;
letter-spacing: .02em;
text-transform: uppercase;
}
.azi-hd__facts dd { font-size: .875rem; font-weight: 500; margin: 0; }
/* RIGHT-ALIGNED, ruled. Sits on the meta grid's second column beside the
title, so it holds the corner whatever the title's length. */
.azi-hd__fee {
font-size: 1rem;
font-weight: 650;
margin: 0;
text-align: end;
white-space: nowrap;
}
/* ---- Zone 2: verification ---- */
.azi-hd__verify {
border-block-start: 1px solid var(--azi-border, #E1E1E0);
margin-block-start: .9rem;
padding-block-start: .9rem;
}
.azi-hd__verify-head {
align-items: center;
display: flex;
gap: .75rem;
margin-block-end: .6rem;
}
.azi-hd .azi-hd__toggle {
background: none;
border: 0;
color: var(--azi-navy, #001F44);
cursor: pointer;
font-size: .8125rem;
font-weight: 600;
padding: 0;
text-decoration: underline;
}
/* TURNS GREEN WHEN EVERY PILL IS, ruled. The class is set from server state -
see pillProgress() - so it cannot say complete while the gate disagrees. */
.azi-hd__count {
color: var(--azi-grey, #585855);
font-size: .8125rem;
font-weight: 600;
}
.azi-hd__count.is-complete { color: var(--cf-ok-fg); }
.azi-hd__group {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin-block-end: .5rem;
}
.azi-hd__group-label {
color: var(--azi-grey, #585855);
font-size: .6875rem;
letter-spacing: .02em;
margin-inline-end: .25rem;
min-width: 7.5rem;
text-transform: uppercase;
}
.azi-hd__none { color: var(--azi-grey, #585855); font-size: .8125rem; }
/* >>> EVERY RULE BELOW IS SCOPED UNDER .azi-hd, AND NOT FOR TIDINESS. <<<
Filament's stylesheet loads AFTER this one, and its preflight sets
`button { border: 0 }` and a default `color` at single-class specificity. A
bare `.azi-pill` rule ties and loses: the browser reported
`border: 0px none` and Tailwind's ink colour on a pill whose border-radius -
a property preflight does not touch - had applied correctly from the same
rule. Two classes beat one, and nothing here needs !important.
>>> THE PILLS. <<< Pending and verified must be distinguishable at a glance
and without relying on colour alone - the verified state also carries a
checkmark, drawn in the Blade, so the two differ in shape as well as hue. */
.azi-hd .azi-pill {
background: #FFFFFF;
border: 1px solid var(--cf-warn-edge);
border-radius: 999px;
color: var(--cf-warn-fg);
cursor: pointer;
font-size: .8125rem;
font-weight: 600;
padding: .25rem .7rem;
transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.azi-hd .azi-pill:hover { background: var(--cf-warn-bg); }
.azi-hd .azi-pill.is-done {
background: var(--cf-ok-bg);
border-color: color-mix(in srgb, var(--cf-ok-fg) 40%, transparent);
color: var(--cf-ok-fg);
}
.azi-hd .azi-pill.is-done:hover {
border-color: var(--cf-ok-fg);
}
/* wire:loading.attr="disabled" lands here between the click and the round
trip. Dimmed rather than frozen, so a slow connection reads as "working"
rather than "did not register". */
.azi-hd .azi-pill[disabled] { cursor: progress; opacity: .55; }
.azi-hd .azi-pill:focus-visible {
outline: 2px solid var(--azi-navy, #001F44);
outline-offset: 2px;
}
/* ---- Zone 3: the decision cluster ----
>>> CONNECTED, AND PUSHED TO THE RIGHT. <<< margin-inline-start:auto on the
FIRST decision button takes up the slack in Filament's flex row, which is
what separates the cluster from the operational actions without needing a
wrapper element the framework does not give us.
The classes come from ViewCaseFile::DECISION_ACTIONS rather than from a
position selector: "the last three buttons" would still match three after
somebody added a fourth, and would group the wrong ones. */
.fi-ac .azi-dc { margin-inline-start: 0; }
.fi-ac .azi-dc:not(.azi-dc ~ .azi-dc) { margin-inline-start: auto; }
/* Adjacent members share one border and lose the seam between them.
>>> -1px WAS NOT ENOUGH, AND THE CLUSTER WAS NEVER JOINED. <<< .fi-ac is a
flex row with column-gap: 8px, so -1px left a 7px channel between every pair
- measured in the browser, approve..sendback 7px, sendback..reject 7px. The
gap has to be cancelled before the 1px of border overlap can do anything.
This is the one value here that depends on a number Filament owns. It has a
name at the top of this file for that reason; if .fi-ac's gap ever changes,
re-measure and change it there. */
.fi-ac .azi-dc + .azi-dc {
border-start-start-radius: 0;
border-end-start-radius: 0;
margin-inline-start: calc(-1px - var(--azi-ac-gap, 8px));
}
.fi-ac .azi-dc:not(:last-child) {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
/* APPROVE — filled, brand blue. The ruling says blue and this project's blue
is AZI navy; a second blue would be a second brand. */
.fi-ac .azi-dc--go {
background-color: var(--azi-navy, #001F44) !important;
border: 1px solid var(--azi-navy, #001F44) !important;
color: #FFFFFF !important;
}
.fi-ac .azi-dc--go:hover:not([disabled]) {
background-color: var(--azi-navy-dark, #00152F) !important;
}
/* DISABLED, NOT HIDDEN - the one exception to hide-not-disable. It must still
read as a button that exists, so it keeps its shape and loses its weight. */
.fi-ac .azi-dc--go[disabled] {
background-color: var(--azi-grey-light, #B9BBBB) !important;
border-color: var(--azi-grey-light, #B9BBBB) !important;
cursor: not-allowed;
opacity: 1;
}
/* SEND BACK — neutral. Not a warning: it is an ordinary step backwards, and
amber here would make the middle of three buttons the loudest. */
.fi-ac .azi-dc--back {
background-color: #FFFFFF !important;
border: 1px solid var(--azi-border, #E1E1E0) !important;
color: var(--azi-grey, #585855) !important;
}
.fi-ac .azi-dc--back:hover {
background-color: var(--azi-surface-alt, #E7E7E6) !important;
}
/* REJECT — outline, never fill. Ruled: destructive styling, not primary. A
filled red button beside a filled blue one is two things competing for the
same click; the outline says "available, and not the way forward". */
.fi-ac .azi-dc--stop {
background-color: #FFFFFF !important;
border: 1px solid var(--cf-stop-fg) !important;
color: var(--cf-stop-fg) !important;
}
.fi-ac .azi-dc--stop:hover {
background-color: var(--cf-stop-bg) !important;
}
@media (max-width: 48rem) {
.azi-hd__meta { grid-template-columns: minmax(0, 1fr); }
.azi-hd__fee { text-align: start; }
.azi-hd__group-label { min-width: 100%; }
/* The cluster stops being a cluster on a phone: three connected buttons at
that width are three targets a thumb cannot tell apart. */
.fi-ac .azi-dc,
.fi-ac .azi-dc + .azi-dc {
border-radius: var(--cf-r-sm, 8px) !important;
margin-inline-start: 0;
}
}
/* ==========================================================================
END — Case header
========================================================================== */
/* ==========================================================================
CRM upload — the waiting experience. Item 3, ruled 3 October.
The --cf-* tokens are readable here because they moved to :root on the same
day, for the third time of asking. Nothing in this block redeclares them.
========================================================================== */
/* ---- The drop zone. Item 4, ruled 3 October ----
>>> THE INPUT IS HIDDEN WITH opacity, NOT display:none. <<< A display:none
input cannot be focused, so the keyboard route to this control would have
disappeared along with the old grey button. It covers the zone at zero
opacity: tab reaches it, Enter opens the picker, and :focus-within draws the
ring on the zone the sighted user is looking at. */
.azi-cu__drop {
align-items: center;
border: 2px dashed var(--cf-line, #DDE0E5);
border-radius: var(--cf-r, 12px);
display: flex;
flex-direction: column;
gap: .5rem;
justify-content: center;
padding: 2rem 1rem;
position: relative;
text-align: center;
transition: background-color .12s ease, border-color .12s ease;
}
.azi-cu__drop input[type="file"] {
cursor: pointer;
inset: 0;
opacity: 0;
position: absolute;
width: 100%;
}
.azi-cu__drop.is-over,
.azi-cu__drop:hover { background: var(--cf-surface-alt, #F7F8FA); border-color: var(--azi-navy, #001F44); }
.azi-cu__drop.is-set { border-style: solid; border-color: var(--cf-ok-fg, #275B44); }
.azi-cu__drop:focus-within {
outline: 2px solid var(--azi-navy, #001F44);
outline-offset: 2px;
}
.azi-cu__drop-icon { color: var(--azi-navy, #001F44); height: 2rem; width: 2rem; }
.azi-cu__drop-text { margin: 0; }
.azi-cu__drop-swap { color: var(--cf-ink-2, #5C6270); font-size: .8125rem; }
/* ---- The report card ---- */
/* >>> LARGE FIGURES, SMALL LABELS. Ruled. <<< The is drawn above the
by grid order, NOT by writing them the wrong way round in the markup - a
screen reader still hears "Total rows: 72,431" rather than a number with no
subject. */
.azi-cu__stats {
display: grid;
gap: .75rem;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
margin: 0;
}
.azi-cu__stat {
background: var(--cf-surface-alt, #F7F8FA);
border: 1px solid var(--cf-line-soft, #E8EAEE);
border-radius: var(--cf-r-sm, 8px);
padding: .85rem 1rem;
}
.azi-cu__stat dd {
color: var(--cf-ink, #101828);
font-size: 1.75rem;
font-variant-numeric: tabular-nums;
font-weight: 650;
line-height: 1.1;
margin: 0;
}
.azi-cu__stat dt {
color: var(--cf-ink-2, #5C6270);
font-size: .75rem;
letter-spacing: .02em;
margin-block-start: .2rem;
text-transform: uppercase;
}
/* The tone is carried on the FIGURE only. A tinted tile for every non-zero
count would make a summary of four numbers into four warnings. */
.azi-cu__stat.is-ok dd { color: var(--cf-ok-fg, #275B44); }
.azi-cu__stat.is-warn dd { color: var(--cf-warn-fg, #6E4A0C); }
.azi-cu__stat.is-stop dd { color: var(--cf-stop-fg, #8C2A22); }
/* CRM finding 1: the invalid breakdown, under the tile that raised it. Small,
indented, and plainly subordinate - it is a reading of one figure above it
rather than a finding of its own. */
.azi-cu__why {
border-inline-start: 2px solid var(--cf-line, #DDE0E5);
display: grid;
gap: .1rem 1rem;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
margin: 0;
padding-inline-start: .85rem;
}
.azi-cu__why > div { display: flex; gap: 1rem; justify-content: space-between; }
.azi-cu__why dt { color: var(--cf-ink-2, #5C6270); font-size: .8125rem; }
.azi-cu__why dd { font-size: .8125rem; font-variant-numeric: tabular-nums; font-weight: 600; margin: 0; }
/* The tinted panels: green for what the file would do, amber for what wants
looking at, red for the destructive branch. */
.azi-cu__panel {
border: 1px solid transparent;
border-radius: var(--cf-r, 12px);
padding: 1rem 1.15rem;
}
.azi-cu__panel.is-ok { background: var(--cf-ok-bg, #E8F0EC); border-color: color-mix(in srgb, var(--cf-ok-fg) 22%, transparent); }
.azi-cu__panel.is-warn { background: var(--cf-warn-bg, #FBF4E6); border-color: var(--cf-warn-border, #EAD7AE); }
.azi-cu__panel.is-stop { background: var(--cf-stop-bg, #F8EAE8); border-color: var(--cf-stop-border, #EBD4D1); }
.azi-cu__panel-title { font-weight: 600; margin: 0; }
.azi-cu__rows {
display: grid;
gap: .15rem 2rem;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
margin-block-start: .6rem;
}
.azi-cu__rows > div {
border-block-end: 1px solid color-mix(in srgb, var(--cf-ink-2) 14%, transparent);
display: flex;
justify-content: space-between;
padding-block: .3rem;
}
.azi-cu__rows dt { color: var(--cf-ink-2, #5C6270); }
.azi-cu__rows dd { font-variant-numeric: tabular-nums; font-weight: 600; margin: 0; }
/* >>> A TABLE, BECAUSE EVERY ROW IS THE SAME THREE FACTS. <<< A bullet list
makes the reader find the number, the row and the reason separately on every
line; columns line them up. */
.azi-cu__table {
border-collapse: collapse;
font-size: .8125rem;
width: 100%;
}
.azi-cu__table th {
color: var(--cf-ink-2, #5C6270);
font-size: .7rem;
font-weight: 600;
letter-spacing: .02em;
text-align: start;
text-transform: uppercase;
}
.azi-cu__table th,
.azi-cu__table td {
border-block-end: 1px solid color-mix(in srgb, var(--cf-ink-2) 14%, transparent);
padding: .35rem .5rem .35rem 0;
}
.azi-cu__table td { font-variant-numeric: tabular-nums; }
.azi-cu__table tr:last-child td { border-block-end: 0; }
/* A neutral panel: the findings' shape without their tone. */
details.azi-cu__panel { border-color: var(--cf-line-soft, #E8EAEE); }
details.azi-cu__panel > summary { font-size: 1rem; font-weight: 600; text-decoration: none; }
details.azi-cu__panel > summary:hover { text-decoration: underline; }
.azi-cu__fold > summary {
cursor: pointer;
font-size: .8125rem;
font-weight: 600;
text-decoration: underline;
}
.azi-cu__fold > summary:focus-visible {
outline: 2px solid var(--azi-navy, #001F44);
outline-offset: 2px;
}
/* The decision, ruled to the bottom and on its own. A rule above it says the
reading is over. */
.azi-cu__decide {
align-items: center;
border-block-start: 1px solid var(--cf-line, #DDE0E5);
display: flex;
flex-wrap: wrap;
gap: .75rem 1.25rem;
justify-content: space-between;
padding-block-start: 1.25rem;
}
.azi-cu__decide-acts { display: flex; flex-wrap: wrap; gap: .6rem; }
.azi-cu__csv {
color: var(--cf-ink-2, #5C6270);
font-size: .8125rem;
text-decoration: underline;
}
.azi-cu__csv:hover { color: var(--azi-navy, #001F44); }
/* >>> THE HOVER THAT MAKES A LABEL VANISH, AND IT IS NOT THE BUTTON THE
RULING NAMED. <<< Ruled 3 October as "white text on hover is invisible on
light buttons". The browser says the opposite, on the other button:
Confirm upload rest text oklch(0.985 …) on bg oklch(0.334 …)
hover text oklch(0.258 …) on bg oklch(0.265 …)
Lightness 0.258 on 0.265. That is not low contrast, it is none - about
1.03:1 - and it happens at the exact moment somebody is about to click.
THE CAUSE IS THE BRAND COLOUR, NOT A RULE IN THIS FILE. Filament builds a
button's hover from `hover:fi-bg-color-300 hover:fi-text-color-800`: lighten
the fill, darken the label. That convention assumes a palette whose 300 is
light. AZI navy is dark at its light end, so both ends of the hover land in
the same place.
The first version of this block targeted .fi-btn-color-gray and
.fi-btn-color-primary, which DO NOT EXIST in Filament 5.6 - the classes are
`fi-btn` and `fi-color-primary`. It matched nothing and passed every test,
which is the third time a rule in this stylesheet has been silently inert.
The selectors below were read off the rendered button.
Both states are stated for both buttons, so nothing downstream can take one
and leave the other inheriting.
>>> SCOPED TO THIS SCREEN, AS RULED - AND THE DEFECT IS NOT. <<< Every
primary button in the panel hovers into the same dark-on-dark. Reported
rather than widened: this stylesheet is shared by every screen, and "fix all
hover states across the page" is a scope somebody chose. */
.azi-cu .fi-btn.fi-color-primary,
.azi-cu .fi-btn.fi-color-primary:hover,
.azi-cu .fi-btn.fi-color-primary:focus-visible {
color: #FFFFFF !important;
}
.azi-cu .fi-btn.fi-color-primary:hover {
background-color: var(--azi-navy-dark, #00152F) !important;
}
/* The secondary button is already correct - dark label, white fill, near-white
on hover - and it is stated anyway. The pair is what the rule is: a later
change to one of these buttons should not be able to leave the other's
label inheriting from whatever happens to be above it. */
.azi-cu .fi-btn:not(.fi-color-primary),
.azi-cu .fi-btn:not(.fi-color-primary):hover,
.azi-cu .fi-btn:not(.fi-color-primary):focus-visible {
color: var(--cf-ink, #101828) !important;
}
.azi-cu .fi-btn:not(.fi-color-primary):hover {
background-color: var(--cf-surface-alt, #F7F8FA) !important;
}
/* >>> A SPINNER THAT STOPS SPINNING WHEN ASKED TO. <<< An admin who has turned
animation off at the operating system gets a static mark rather than nothing:
the element still says "there is a process here", which is the information,
and only the motion goes. */
.azi-cu__spin {
animation: azi-cu-spin .8s linear infinite;
border: 2px solid var(--cf-line, #DDE0E5);
border-block-start-color: var(--azi-navy, #001F44);
border-radius: 50%;
display: inline-block;
height: .85em;
margin-inline-end: .45rem;
vertical-align: -.1em;
width: .85em;
}
@keyframes azi-cu-spin { to { transform: rotate(360deg); } }
/* >>> INDETERMINATE ON PURPOSE. <<< CrmSheet streams the file and never counts
it first - a second parse is the expensive half on XLSX - so there is no
total to show a percentage against. This bar says "working"; the running
count beside it says how far. A bar that invented a percentage would be a
number an admin could watch being wrong. */
.azi-cu__bar {
background: var(--cf-line-soft, #E8EAEE);
border-radius: 999px;
height: 4px;
margin-block-start: .75rem;
overflow: hidden;
}
/* >>> DETERMINATE WHEN THERE IS A TOTAL, ANIMATED WHEN THERE IS NOT. <<<
Ruled 3 October: "X of Y rows analysed". The fill is the same element in
both states, so a file that turns out to be countable does not swap one bar
for another - it just stops sliding and starts filling. */
.azi-cu__bar > span {
background: var(--azi-navy, #001F44);
display: block;
height: 100%;
inline-size: 0;
transition: inline-size .4s linear;
}
/* No total: the bar says "working" rather than "how far". */
.azi-cu__bar.is-waiting > span {
animation: azi-cu-slide 1.4s ease-in-out infinite;
inline-size: 35%;
transition: none;
}
@keyframes azi-cu-slide {
0% { transform: translateX(-100%); }
100% { transform: translateX(340%); }
}
/* The brief "analysis complete" the ruling asks for, between the spinner and
the report. Green because it is the one moment on this screen that is purely
good news - every other panel here is a number to read. */
.azi-cu__done {
background: var(--cf-ok-bg, #E8F0EC);
border-radius: var(--cf-r-sm, 8px);
color: var(--cf-ok-fg, #275B44);
font-weight: 600;
margin-block-end: .75rem;
padding: .5rem .75rem;
}
/* >>> MOTION IS A PREFERENCE, NOT A DECORATION. <<< Both animations here are
the kind that trigger vestibular symptoms - a spin and a slide, repeating
without end. Stopped rather than hidden: the spinner keeps its ring and the
bar keeps its fill, so the screen still reads as busy. */
@media (prefers-reduced-motion: reduce) {
.azi-cu__spin { animation: none; }
/* The determinate fill keeps its width - that width is information, and
removing it would take the progress with the motion. Only the
indeterminate slide stops. */
.azi-cu__bar > span { transition: none; }
.azi-cu__bar.is-waiting > span { animation: none; inline-size: 100%; opacity: .45; }
}
/* ==========================================================================
SP-33 — THE STAFF SIGN-IN PAGE. Ruled 23 September.
>>> EVERY RULE IS SCOPED UNDER .azi-login OR .azi-login-body. <<< This
project has twice shipped CSS that matched nothing and twice shipped rules
Filament's preflight outranked; the standing answer is two classes and a
scope that cannot collide. .azi-login-body is set by the page itself
(Login::getExtraBodyAttributes), which is the only anchor above this view
that the page controls.
PALETTE: --azi-navy (#001F44), white, grey. No gold and no accent colour -
an earlier direction proposed gold and the business withdrew it.
========================================================================== */
/* Undo the centred column SimplePage's layout puts every page in. Width::Full
from getMaxWidth() removes the max-width; these remove the padding and the
vertical centring that would otherwise leave the split floating. */
.azi-login-body .fi-simple-layout,
.azi-login-body .fi-simple-main-ctn {
min-height: 100vh;
min-height: 100dvh;
padding: 0;
}
/* >>> THE MARGIN IS THE ONE THAT MATTERED, AND ONLY A BROWSER SAID SO. <<<
This rule zeroed the padding and shipped. main.fi-simple-main also carries
margin: 64px 0, which left a grey band above and below the split and made a
900px-tall viewport scroll by exactly 128px. Every test passed: the markup
was right, the selectors were right, and nothing that reads HTML or CSS text
can see a margin on an element three levels up. Found on the screenshot
pass, which is why there is one. */
.azi-login-body .fi-simple-main {
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
margin: 0;
max-width: none;
padding: 0;
width: 100%;
}
.azi-login {
display: grid;
grid-template-columns: 1fr;
/* >>> min-height ON THE CONTAINER DOES NOT REACH THE PANELS. <<< The single
implicit row is auto-sized, so it takes the height of its content - 675px
on a 1440x900 screen - and the remaining 225px sat below as the layout's
grey. Grid items stretch to their ROW, not to the container, so the row is
what has to be told to fill. Measured, not reasoned: the panels reported
top..bottom 0..675 inside a container reporting 900. */
/* STACKED: the navy is a HEADER and takes only what it needs; the form takes
the rest. The rows are this way round because "collapses to a branded
header" is what the stacking was ruled to do - and because 1fr on the
first row does the opposite, which is how a 899px window ended up with an
820px navy panel and the Sign in button below the fold. */
grid-template-rows: auto 1fr;
min-height: 100vh;
min-height: 100dvh;
}
@media (min-width: 900px) {
/* THE SPLIT. 5fr/4fr rather than 1fr/1fr: the form is the thing being used
and a half-page of white around a 320px column reads as empty rather than
as spacious. */
.azi-login {
grid-template-columns: 5fr 4fr;
/* SIDE BY SIDE: one row, and it fills. Without this the single implicit
row is auto-sized to its content and the panels stop short of the
viewport - measured at 675px inside a 900px container. */
grid-template-rows: 1fr;
}
}
/* ---------------------------------------------------------------- the navy */
.azi-login .azi-login__brand {
background: var(--azi-navy, #001F44);
color: #FFFFFF;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
padding: 28px 24px;
position: relative;
}
@media (min-width: 900px) {
.azi-login .azi-login__brand { padding: 56px 56px 40px; }
}
/* THE ANIMATION, HALF ONE. A slow diagonal wash over the navy - corporate
rather than playful, as ruled. It is a separate absolutely-positioned
element rather than a background on the panel so that the text above it
never inherits a moving paint, and it is aria-hidden in the markup. */
.azi-login .azi-login__wash {
background:
radial-gradient(60% 55% at 15% 10%, rgba(255, 255, 255, .10), transparent 70%),
radial-gradient(55% 50% at 85% 85%, rgba(255, 255, 255, .07), transparent 72%);
inset: 0;
position: absolute;
animation: azi-login-wash 24s ease-in-out infinite alternate;
}
@keyframes azi-login-wash {
from { transform: translate3d(-3%, -2%, 0) scale(1.04); }
to { transform: translate3d(3%, 2%, 0) scale(1.10); }
}
.azi-login .azi-login__brandinner,
.azi-login .azi-login__foot { position: relative; }
.azi-login .azi-login__eyebrow {
color: rgba(255, 255, 255, .70);
font-size: 12px;
font-weight: 600;
letter-spacing: .14em;
margin: 0 0 10px;
text-transform: uppercase;
}
.azi-login .azi-login__name {
font-size: clamp(26px, 3.4vw, 40px);
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.15;
margin: 0;
}
.azi-login .azi-login__lede {
color: rgba(255, 255, 255, .78);
font-size: 15px;
line-height: 1.6;
margin: 12px 0 0;
max-width: 34ch;
}
.azi-login .azi-login__divisions {
border-top: 1px solid rgba(255, 255, 255, .18);
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
list-style: none;
margin: 28px 0 0;
padding: 22px 0 0;
}
/* THE ANIMATION, HALF TWO: the division names fade up in turn. --azi-delay is
set per item in the view, so a fifth division needs no rule here. */
.azi-login .azi-login__division {
animation: azi-login-rise .7s ease-out both;
animation-delay: var(--azi-delay, 0s);
color: rgba(255, 255, 255, .92);
font-size: 14px;
font-weight: 600;
letter-spacing: .01em;
}
@keyframes azi-login-rise {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.azi-login .azi-login__foot {
color: rgba(255, 255, 255, .55);
font-size: 12px;
letter-spacing: .06em;
margin: 32px 0 0;
text-transform: uppercase;
}
/* --------------------------------------------------------------- the white */
.azi-login .azi-login__form {
align-items: center;
background: #FFFFFF;
display: flex;
justify-content: center;
padding: 40px 24px 56px;
}
/* >>> A SMALL PHONE PUT THE SIGN IN BUTTON 17px BELOW THE FOLD. <<< Measured
at 360x740, which is a real Android size and the tightest thing anyone will
open this on. The header and the form each give back a little vertical
padding rather than one of them giving back a lot, so nothing looks cramped
on its own. Above this width the roomier spacing stands. */
@media (max-width: 420px) {
.azi-login .azi-login__brand { padding: 20px 20px 18px; }
.azi-login .azi-login__form { padding: 24px 20px 32px; }
.azi-login .azi-login__divisions { margin-top: 20px; padding-top: 16px; }
.azi-login .azi-login__foot { margin-top: 20px; }
}
.azi-login .azi-login__forminner {
max-width: 380px;
width: 100%;
}
/* THE MOBILE-ONLY LINE. On a narrow screen the navy panel collapses to a
header strip above this, and a person needs to know what they are signing
in to without scrolling back up. */
.azi-login .azi-login__compact {
color: var(--azi-grey, #585855);
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
margin: 0 0 18px;
text-transform: uppercase;
}
@media (min-width: 900px) {
.azi-login .azi-login__compact { display: none; }
}
.azi-login .azi-login__title {
color: var(--azi-navy, #001F44);
font-size: 26px;
font-weight: 700;
letter-spacing: -.01em;
margin: 0;
}
.azi-login .azi-login__sub {
color: var(--azi-grey, #585855);
font-size: 14px;
line-height: 1.6;
margin: 8px 0 26px;
}
/* The submit button spans the column: it is the only action on the page. */
.azi-login .fi-form .fi-btn {
justify-content: center;
width: 100%;
}
/* ------------------------------------------------- motion, and the lack of it */
/* >>> A SLOW GRADIENT IS DECORATION AND MUST BE SKIPPABLE. <<< Both halves of
the animation stop, and the division names settle at their final state
rather than never appearing - a fade-in that is disabled by leaving opacity
at 0 is how reduced-motion turns into a blank panel. */
@media (prefers-reduced-motion: reduce) {
.azi-login .azi-login__wash { animation: none; }
.azi-login .azi-login__division {
animation: none;
opacity: 1;
transform: none;
}
}
/* ==========================================================================
CP-32 — the Customer 360 page. Every rule scoped under .azi-c360, for the
reason SP-33's block records: this project has shipped CSS keyed to a class
Filament does not emit, and CSS its preflight outranked.
========================================================================== */
.azi-c360 { display: grid; gap: 20px; }
.azi-c360 .azi-c360__head {
align-items: flex-start;
border-bottom: 1px solid var(--azi-border, #E1E1E0);
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
justify-content: space-between;
padding-bottom: 16px;
}
.azi-c360 .azi-c360__eyebrow {
color: var(--azi-grey, #585855);
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
margin: 0;
text-transform: uppercase;
}
.azi-c360 .azi-c360__name {
color: var(--azi-navy, #001F44);
font-size: 22px;
font-weight: 700;
margin: 4px 0 0;
}
.azi-c360 .azi-c360__contact {
color: var(--azi-grey, #585855);
font-size: 14px;
margin: 4px 0 0;
}
.azi-c360 .azi-c360__crm {
border-radius: 999px;
font-size: 12px;
font-weight: 700;
padding: 5px 12px;
white-space: nowrap;
}
/* >>> THE SLUGS ARE yes / no / unknown, AND THE FIRST DRAFT GUESSED
match / no-match. <<< Caught by reading CrmMatch::slug() rather than by the
page looking wrong, which it would not have: an unmatched selector styles
nothing and this project has shipped a whole block keyed to a class Filament
does not emit. A test now ties these three to the enum's own output. */
.azi-c360 .azi-c360__crm--yes { background: #E7F4EC; color: #1B7F4B; }
.azi-c360 .azi-c360__crm--no { background: #FDF0E3; color: #8A4B00; }
.azi-c360 .azi-c360__crm--unknown { background: #EEEEEE; color: #585855; }
/* TILES: auto-fit rather than four fixed columns, so they reflow on a narrow
window instead of overflowing it. */
.azi-c360 .azi-c360__tiles {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.azi-c360 .azi-c360__tile {
background: var(--azi-surface-alt, #E7E7E6);
border-radius: 8px;
padding: 14px 16px;
}
.azi-c360 .azi-c360__tilenum {
color: var(--azi-navy, #001F44);
font-size: 22px;
font-weight: 700;
line-height: 1.2;
margin: 0;
/* Tabular figures: four tiles whose numbers jitter as they change width
read as unstable. */
font-variant-numeric: tabular-nums;
}
.azi-c360 .azi-c360__tilelabel {
color: var(--azi-grey, #585855);
font-size: 12px;
margin: 4px 0 0;
}
/* Sections */
.azi-c360__table { border-collapse: collapse; font-size: 13px; width: 100%; }
.azi-c360__table th,
.azi-c360__table td {
border-bottom: 1px solid var(--azi-border, #E1E1E0);
padding: 8px 10px;
text-align: start;
}
.azi-c360__table th {
color: var(--azi-grey, #585855);
font-size: 12px;
font-weight: 600;
}
.azi-c360__table .azi-c360__num { font-variant-numeric: tabular-nums; text-align: end; }
.azi-c360__years {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-block-end: 16px;
}
.azi-c360__year {
background: var(--azi-surface-alt, #E7E7E6);
border-radius: 8px;
padding: 8px 14px;
}
.azi-c360__yearlabel {
color: var(--azi-grey, #585855);
display: block;
font-size: 12px;
}
.azi-c360__yearnum {
color: var(--azi-navy, #001F44);
font-variant-numeric: tabular-nums;
font-weight: 700;
}
.azi-c360__timeline { display: grid; gap: 14px; margin: 0; }
.azi-c360__event dt {
color: var(--azi-grey, #585855);
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
.azi-c360__event dd {
color: var(--azi-navy, #001F44);
font-size: 14px;
font-weight: 600;
margin: 3px 0 0;
}
.azi-c360__ago,
.azi-c360__detail {
color: var(--azi-grey, #585855);
font-weight: 400;
}
.azi-c360__detail { display: block; font-size: 13px; margin-block-start: 2px; }
/* >>> NOT --azi-grey-light. <<< That token is documented in the portal
stylesheet as never for body text because it fails contrast, and an absent
value is exactly the text somebody needs to be able to read. */
.azi-c360__none { color: var(--azi-grey, #585855); font-style: italic; }