/*
 * AAR Insurance Kenya (AIK) brand tokens.
 *
 * Loaded AFTER theme.min.css so these override the duralux defaults. Values come
 * from `docs/aik brand/AIK-brand-guidelines_2.md` (v2.1, sourced from the AAR
 * Insurance Design and Brand Guidelines 2026 V1a), which supersedes the v1.0
 * document and the earlier Startappz palette entirely.
 *
 * Three rules drive most of what looks unusual below, and none of them are
 * stylistic preferences:
 *
 *   1. Brand red (#ED1C24) is LOGO ARTWORK ONLY (§3.2). It never appears as a
 *      button, link, heading, active state, or fill. Status uses the semantic
 *      tokens so the two can never be confused.
 *   2. Text on brand orange is WHITE. This is a DELIBERATE DEVIATION from §3.7
 *      and §6.1, which specify a black label and call it an accessibility
 *      decision rather than a style choice. White on #F58320 is 2.58:1 and does
 *      not meet WCAG 2.1 AA (4.5:1 normal, 3:1 large). Signed off by the product
 *      owner on 2026-08-18; record it in the accessibility statement alongside
 *      the §3.5 heading exception. Do not "fix" this back without asking.
 *   3. Orange is a ~10% accent (§3.7, the 60/30/10 rule). It is not a surface.
 *
 * No hard-coded colours in Blade or inline styles; everything routes through
 * the custom properties declared here.
 */

:root {
    /* ---- Core palette, 2026 brand book (§3.1) ---- */
    --aik-primary: #F58320;      /* brand orange, Pantone 151 C */
    --aik-brand-black: #231F20;
    --aik-brand-grey: #C8C7C7;
    --aik-brand-gold: #C8A24D;   /* extended palette, accent only */
    --aik-brand-red: #ED1C24;    /* logo artwork only, never UI (§3.2) */

    /* ---- Orange ramp (§3.4). 100-500 are published tints; 50 and 600+ derived ---- */
    --aik-orange-50: #FEF3E9;
    --aik-orange-100: #FDE6D2;
    --aik-orange-200: #FBCDA6;
    --aik-orange-300: #F9B579;
    --aik-orange-400: #F79C4D;
    --aik-orange-500: #F58320;
    --aik-orange-600: #D8731C;
    --aik-orange-700: #C96B1A;
    --aik-orange-800: #AC5C16;
    --aik-orange-900: #7A4210;
    --aik-orange-950: #361D07;

    /* ---- Gold tints, published (§3.1) ---- */
    --aik-gold-20: #F4ECDB;
    --aik-gold-40: #E9DAB8;
    --aik-gold-60: #DEC794;
    --aik-gold-80: #D3B571;

    /* ---- Neutrals: tints of the palette grey and palette black (§3.6) ---- */
    --aik-white: #FFFFFF;
    --aik-grey-50: #F4F4F4;
    --aik-grey-100: #E9E9E9;
    --aik-grey-200: #DEDDDD;
    --aik-grey-300: #D3D2D2;
    --aik-grey-400: #C8C7C7;
    --aik-grey-500: #A7A5A6;
    --aik-grey-600: #7B7979;
    --aik-grey-700: #4F4C4D;
    --aik-grey-800: #393536;
    --aik-grey-900: #231F20;
    --aik-black: #000000;

    /* ---- Applied roles (§15.1) ---- */
    --aik-bg: var(--aik-white);
    --aik-text: var(--aik-black);
    --aik-text-secondary: var(--aik-grey-700);
    --aik-heading: var(--aik-orange-500);
    --aik-heading-regulated: var(--aik-orange-700);
    --aik-link: var(--aik-orange-800);
    --aik-border: var(--aik-grey-200);
    --aik-focus: var(--aik-orange-700);

    /* ---- Semantics (§3.6). Deliberately outside the brand palette so status
            is never carried by a brand colour. ---- */
    --aik-success: #127A45;   --aik-success-bg: #E8F5EC;
    --aik-error:   #B00020;   --aik-error-bg:   #FDECEE;
    --aik-warning: #8A5300;   --aik-warning-bg: #FFF6E5;
    --aik-info:    #0B63CE;   --aik-info-bg:    #E9F1FC;

    /* ---- Type (§4) ---- */
    --aik-font-sans: 'Poppins', system-ui, sans-serif;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;

    /* ---- Radius (§5.3) ---- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 999px;

    /* ---- Elevation (§5.4). Grey-based and low; never coloured. ---- */
    --shadow-sm: 0 1px 2px rgba(35, 31, 32, 0.06);
    --shadow-md: 0 4px 12px rgba(35, 31, 32, 0.08);
    --shadow-lg: 0 12px 32px rgba(35, 31, 32, 0.12);

    /* ---- Bootstrap / duralux bridge ----
       Bootstrap derives most component colour from these, so mapping them here
       recolours the bulk of the theme without per-component overrides. */
    --bs-primary: var(--aik-primary);
    --bs-primary-rgb: 245, 131, 32;
    --bs-link-color: var(--aik-link);
    --bs-link-color-rgb: 172, 92, 22;
    --bs-link-hover-color: var(--aik-orange-900);
    --bs-link-hover-color-rgb: 122, 66, 16;
    --bs-body-color: var(--aik-text);
    --bs-body-bg: var(--aik-bg);
    --bs-border-color: var(--aik-border);
    --bs-font-sans-serif: var(--aik-font-sans);

    /* Bootstrap ships `code` at its own #D63384 pink, which is in no part of
       §3.1. Permission keys and config names are set in it across the admin, so
       it takes the darkest published orange instead (8:1 on white). */
    --bs-code-color: var(--aik-orange-900);
}

/*
 * Accessible heading theme (§3.5 rule 4). Opt in with data-theme="accessible"
 * on <html> to lift orange headings from 2.58:1 to 4.89:1.
 */
[data-theme="accessible"] {
    --aik-heading: var(--aik-orange-800);
}

/* ==========================================================================
   Typography (§4)
   Poppins is the only typeface. Weights are limited to 400/500/600 — the book
   rules out Light, Bold, ExtraBold, Black, and every italic (§4.2).
   ========================================================================== */

body,
.text-body {
    font-family: var(--aik-font-sans);
    font-weight: var(--fw-regular);
    color: var(--aik-text);
}

/*
 * H1-H3 carry the orange heading token; H4 and below are black (§4.3). That
 * split is the 24px floor from §3.5 rule 1 — orange is only legible enough at
 * display sizes. The duralux admin uses h4/h5 for stat figures and card titles,
 * so in practice almost every heading here resolves to black, which is correct.
 */
h1, h2, h3,
.h1, .h2, .h3 {
    font-family: var(--aik-font-sans);
    font-weight: var(--fw-semibold);
    color: var(--aik-heading);
}

h4, h5, h6,
.h4, .h5, .h6 {
    font-family: var(--aik-font-sans);
    font-weight: var(--fw-medium);
    color: var(--aik-text);
}

/*
 * Headings below the 24px orange floor must stay black (§3.5 rule 1). The
 * admin uses h2/h3 for small card and form titles, so those opt out of the
 * orange heading colour rather than failing contrast at 20px.
 */
h1.heading-compact, h2.heading-compact, h3.heading-compact,
h2.accordion-header {
    color: var(--aik-text);
}

/*
 * Weight ladder (§4.2). Poppins is loaded at 400/500/600 only — the book rules
 * out Light, Thin, Bold, ExtraBold, Black and every italic. Bootstrap's .fw-bold
 * asks for 700, which would either synthesise a faux-bold or fall back to a
 * weight we do not ship, so the utilities are remapped onto the allowed ladder
 * here instead of being edited out of ~90 call sites.
 */
.fw-bold, .fw-bolder, .fw-semibold {
    font-weight: var(--fw-semibold) !important;
}

.fw-medium {
    font-weight: var(--fw-medium) !important;
}

.fw-light, .fw-lighter, .fw-normal {
    font-weight: var(--fw-regular) !important;
}

/* Poppins ships no italic in the brand set (§4.2). */
em, i:not([class*="feather"]):not([class*="bi-"]):not([class*="fa-"]) {
    font-style: normal;
    font-weight: var(--fw-medium);
}

/* Regulatory, policy, claims and pricing pages lift headings to the large-text
   AA value (§3.5 rule 3). Add .content-regulated to the page wrapper. */
.content-regulated h1, .content-regulated h2, .content-regulated h3 {
    color: var(--aik-heading-regulated);
}

/* Secondary/caption/legal text sits at grey-700, not grey-600 — grey-600 is
   4.33:1 and misses the 4.5:1 body threshold (§3.6). */
.text-muted,
small.text-muted,
.form-text,
.card-subtitle {
    color: var(--aik-text-secondary) !important;
}

/* Premiums, claim amounts and benefit tables use tabular figures (§4.4). */
.table td, .table th,
.text-numeric {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Focus (§6.1) — "Never remove the focus ring."
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--aik-focus);
    outline-offset: 2px;
}

/* Duralux ships `outline:none` on several interactive elements; restore a
   visible ring rather than relying on the box-shadow it substitutes. */
.btn:focus-visible,
.nxl-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible {
    outline: 2px solid var(--aik-focus);
    outline-offset: 2px;
}

/* ==========================================================================
   Buttons (§6.1)
   ========================================================================== */

.btn-primary {
    --bs-btn-bg: var(--aik-primary);
    --bs-btn-border-color: var(--aik-primary);
    --bs-btn-color: var(--aik-white);
    --bs-btn-hover-bg: var(--aik-orange-600);
    --bs-btn-hover-border-color: var(--aik-orange-600);
    --bs-btn-hover-color: var(--aik-white);
    --bs-btn-active-bg: var(--aik-orange-700);
    --bs-btn-active-border-color: var(--aik-orange-700);
    --bs-btn-active-color: var(--aik-white);
    --bs-btn-disabled-bg: var(--aik-grey-100);
    --bs-btn-disabled-border-color: var(--aik-grey-100);
    --bs-btn-disabled-color: var(--aik-grey-400);
    font-weight: var(--fw-medium);
}

/* White label pinned across every state — see the deviation note in the file
   header. Hover/active drop to orange-600/700, which lifts white to 3.29:1 and
   3.75:1 respectively, so the resting state is the weakest of the three. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:disabled {
    color: var(--aik-white);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--aik-orange-600);
    border-color: var(--aik-orange-600);
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--aik-orange-700);
    border-color: var(--aik-orange-700);
}

/* Secondary — outlined, transparent fill. */
.btn-outline-primary {
    --bs-btn-color: var(--aik-black);
    --bs-btn-border-color: var(--aik-primary);
    --bs-btn-hover-bg: var(--aik-orange-100);
    --bs-btn-hover-border-color: var(--aik-primary);
    --bs-btn-hover-color: var(--aik-black);
    --bs-btn-active-bg: var(--aik-orange-200);
    --bs-btn-active-border-color: var(--aik-primary);
    --bs-btn-active-color: var(--aik-black);
    border-width: 2px;
    font-weight: var(--fw-medium);
}

/* Tertiary — text only. */
.btn-link {
    --bs-btn-color: var(--aik-link);
    --bs-btn-hover-color: var(--aik-orange-900);
    font-weight: var(--fw-medium);
}

/* Destructive — semantic error, never the brand red (§3.2). */
.btn-danger,
.btn-outline-danger {
    --bs-btn-color: var(--aik-error);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--aik-error);
    --bs-btn-hover-bg: var(--aik-error-bg);
    --bs-btn-hover-border-color: var(--aik-error);
    --bs-btn-hover-color: var(--aik-error);
    --bs-btn-active-bg: #FBD9DD;
    --bs-btn-active-border-color: var(--aik-error);
    --bs-btn-active-color: var(--aik-error);
    border-width: 2px;
    font-weight: var(--fw-medium);
}

/* Minimum target size 44x44 including icon-only controls (§6.1). */
.btn-icon,
.avatar-text.avatar-md {
    min-width: 44px;
    min-height: 44px;
}

/* ==========================================================================
   Links (§4.5) — accessible orange with a persistent underline.
   Scoped to content so nav items, buttons, dropdowns and pagination keep their
   component treatment. The underline is a WCAG 1.4.1 win: links in dense admin
   tables stop depending on colour alone.
   ========================================================================== */

.admin-content-body a:not(.btn):not(.nxl-link):not(.dropdown-item):not(.nav-link):not(.page-link):not(.badge):not(.avatar-text):not([role="button"]):not([class*="btn-"]) {
    color: var(--aik-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.admin-content-body a:not(.btn):not(.nxl-link):not(.dropdown-item):not(.nav-link):not(.page-link):not(.badge):not(.avatar-text):not([role="button"]):not([class*="btn-"]):hover {
    color: var(--aik-orange-900);
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   Forms (§6.2)
   ========================================================================== */

.form-control,
.form-select {
    border: 1px solid var(--aik-border);
    border-radius: var(--radius-md);
    font-family: var(--aik-font-sans);
}

/*
 * Focus: ONE ring, not two.
 *
 * §6.2 specs a 2px orange border *plus* a #C96B1A outline. Rendered literally
 * that is two concentric orange rings with a gap between them, which reads as a
 * drawing error rather than a focus state. The resting grey border is therefore
 * left alone and the outline carries the focus indication on its own — still a
 * 2px ring in the §6.2 focus colour, so the accessibility requirement in §6.1
 * ("never remove the focus ring") is met with a single stroke.
 */
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
    /* !important is required here: the duralux theme ships
       `border-color:#f58320!important` on focus, which is the inner of the two
       rings. Equal specificity, so this (loaded later) wins. */
    border-color: var(--aik-border) !important;
    box-shadow: none !important;
    outline: 2px solid var(--aik-focus);
    outline-offset: 2px;
}

.form-label {
    font-size: 14px;
    font-weight: var(--fw-medium);
    color: var(--aik-black);
}

.form-control::placeholder {
    color: var(--aik-grey-700);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border: 2px solid var(--aik-error);
}

.invalid-feedback,
.form-error {
    font-size: 13px;
    color: var(--aik-error);
}

.form-check-input:checked {
    background-color: var(--aik-primary);
    border-color: var(--aik-primary);
}

/* ==========================================================================
   Sidebar navigation (§6.4)
   Duralux ships a neutral blue-grey for hover and the selected item. The active
   state is a light orange wash with dark orange, semibold type — no solid fill
   and no orange rail: a full-height sidebar of solid orange would blow the 10%
   orange budget in §3.7, and the rail read as a stray border rather than an
   indicator. Active state is carried by fill + colour + weight together, so it
   is never colour alone. Selectors mirror the theme's own specificity so these
   (loaded later) win without !important.
   ========================================================================== */

.nxl-navigation .navbar-content .nxl-navbar .nxl-item:hover > .nxl-link {
    color: var(--aik-link);
    background-color: var(--aik-orange-50);
}

.nxl-navigation .navbar-content .nxl-navbar .nxl-item:hover > .nxl-link .nxl-micon i,
.nxl-navigation .navbar-content .nxl-navbar .nxl-item:hover > .nxl-link .nxl-arrow i {
    color: var(--aik-link);
}

.nxl-navigation .navbar-content .nxl-navbar .nxl-item.active > .nxl-link {
    color: var(--aik-link);
    background-color: var(--aik-orange-100);
    font-weight: var(--fw-semibold);
}

.nxl-navigation .navbar-content .nxl-navbar .nxl-item.active > .nxl-link .nxl-micon i,
.nxl-navigation .navbar-content .nxl-navbar .nxl-item.active > .nxl-link .nxl-arrow i {
    color: var(--aik-link);
}

/* Active submenu child — sits below an open parent, so it takes the lighter
   wash and drops the rail to avoid a double rule. */
.nxl-navigation .navbar-content .nxl-submenu .nxl-item.active > .nxl-link {
    color: var(--aik-link);
    background-color: var(--aik-orange-50);
    font-weight: var(--fw-semibold);
}

/* ==========================================================================
   Logo (§2)
   The sidebar brand block is raised to 130px so the portrait logo can render at
   its 98px digital minimum (§2.3) with clear space intact. Only the portrait
   variant was supplied; a landscape SVG is still outstanding (see §16 notes in
   the brand doc) and would let this block return to the theme's 80px.
   ========================================================================== */

.nxl-navigation .navbar-wrapper .m-header {
    height: 130px;
    padding: 16px 30px;
    justify-content: center;
}

.navbar-content {
    height: calc(100vh - 130px);
}

.brand-logo {
    height: 98px;
    width: auto;
    max-width: 100%;
}

/*
 * §2.5 forbids CSS filters, shadows, opacity changes and blend modes on the
 * logo. Duralux inverts .logo-lg for its dark sidebar variants, which would
 * recolour the mark — neutralised here.
 */
.m-header .logo-lg,
.m-header .logo-sm,
.brand-logo {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* Collapsed sidebar shows the diamond mark alone, which §2.7 sanctions since
   the "Insurance" wordmark is illegible below roughly 48px. */
.m-header .logo-sm {
    width: 42px;
    height: 42px;
}

/* ==========================================================================
   Cards (§6.3) and tables (§6.6)
   ========================================================================== */

.card {
    border: 1px solid var(--aik-border);
    border-radius: var(--radius-lg);
}

.card:hover.card-interactive {
    box-shadow: var(--shadow-md);
    border-color: var(--aik-orange-400);
}

.table > thead th {
    background-color: var(--aik-grey-100);
    font-size: 14px;
    font-weight: var(--fw-semibold);
    color: var(--aik-black);
}

/*
 * Duralux re-declares the header row inside `.table-responsive` at 10px weight
 * 700 uppercase. That selector outranks the rule above (0,2,2 against 0,1,2)
 * and every table in the admin sits in a `.table-responsive`, so the §6.6
 * header was dead everywhere: 700 is a weight the brand does not have (§4.2 —
 * Poppins is loaded at 400/500/600, so the browser was synthesising a faux
 * bold) and 10px is under the 12px floor (§4.4).
 *
 * Matched at the same specificity, and since the markup convention across the
 * admin is an uppercase header, this lands on the one uppercase treatment §4.4
 * does sanction — a 12px eyebrow label at 0.08em tracking — rather than §6.6's
 * 14px sentence case, which would have meant 14px ALL CAPS everywhere.
 */
.table-responsive .table > thead th,
.table-responsive .table > tfoot th {
    font-size: 12px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    color: var(--aik-black);
}

.table > tbody td {
    border-bottom: 1px solid var(--aik-grey-100);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--aik-grey-50);
    background-color: var(--aik-grey-50);
}

/* ==========================================================================
   Alerts and badges (§6.7) — borderless semantic surface.
   ========================================================================== */

/*
 * Alerts are a tinted surface with semantic text, no rule of any kind: the
 * product owner asked for the accent edge to go (2026-08-28). Bootstrap's own
 * `.alert` paints a 1px border on all four sides, so `border: 0` stays to keep
 * that off. Status is still carried by the background tint AND the semantic
 * text colour plus the message itself, never by colour alone.
 */
.alert {
    border: 0;
    border-radius: var(--radius-md);
}

.alert-success { background-color: var(--aik-success-bg); color: var(--aik-success); }
.alert-danger  { background-color: var(--aik-error-bg);   color: var(--aik-error); }
.alert-warning { background-color: var(--aik-warning-bg); color: var(--aik-warning); }
.alert-info    { background-color: var(--aik-info-bg);    color: var(--aik-info); }

/* Utility alias kept for templates that referenced the old brand accent. */
.text-brand { color: var(--aik-orange-800) !important; }
.bg-brand { background-color: var(--aik-primary) !important; color: var(--aik-white) !important; }

::selection {
    background: var(--aik-orange-100);
    color: var(--aik-orange-950);
}

/* Regulatory + attribution line. §14 sets a 12px floor and forbids abbreviating
   or hiding the regulatory statement. */
.aik-legal-line {
    font-size: 12px;
    color: var(--aik-text-secondary);
    line-height: 1.5;
}

/* ==========================================================================
   Global footer (<x-brand-footer />)
   Carries the §14 regulatory line and the vendor attribution on every page.
   Kept quiet: grey-700 type at the 12px floor, no heavy rules or fills.
   ========================================================================== */

.aik-footer {
    padding: 20px 30px 24px;
    text-align: center;
}

.aik-footer .aik-legal-line {
    margin: 0 0 2px;
}

.aik-footer .aik-legal-line:last-child {
    margin-bottom: 0;
}

.aik-footer-org {
    font-weight: var(--fw-semibold);
}

.aik-footer-sep {
    padding: 0 4px;
    color: var(--aik-grey-500);
}

.aik-footer a {
    color: var(--aik-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.aik-footer a:hover {
    color: var(--aik-orange-900);
}

/* Header user-menu avatar. Formerly the Startappz "bolt" device; now a neutral
   grey chip so no brand colour is spent on chrome. */
.brand-avatar {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--aik-grey-100);
    color: var(--aik-grey-900);
    font-size: 18px;
}

/* ==========================================================================
   Error pages (400 / 401 / 403 / 404 / 405 / 413 / 419 / 429 / 500 / 503)
   Shared chrome lives in resources/views/layouts/error.blade.php.
   ========================================================================== */

.error-wrapper {
    background: var(--aik-grey-50);
}

.error-card {
    background: var(--aik-white);
    width: 100%;
    max-width: 560px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--aik-border);
}

.error-illustration svg {
    width: 260px;
    max-width: 80vw;
    height: auto;
}

.error-eyebrow {
    letter-spacing: 0.18em;
    font-size: 0.8rem;
    color: var(--aik-text-secondary);
}

.error-title {
    font-family: var(--aik-font-sans);
    font-weight: var(--fw-semibold);
    color: var(--aik-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.error-message {
    max-width: 32rem;
    color: var(--aik-text);
}

.error-detail,
.error-support {
    max-width: 32rem;
    margin-inline: auto;
}

/*
 * Below ~420px the two actions stop fitting side by side; stacking them full
 * width keeps each target above the 44px minimum rather than shrinking them.
 */
@media (max-width: 420px) {
    .error-actions {
        flex-direction: column;
    }

    .error-actions .btn {
        width: 100%;
    }
}

/* OTP code input — wide spacing for legibility. */
.otp-input {
    letter-spacing: 0.6em;
    text-align: center;
    font-size: 1.5rem;
    font-weight: var(--fw-semibold);
}

/*
 * Content gutters. The `.page-header` bar is a full-width in-flow sub-header, so
 * we leave it edge-to-edge and pad only the page body below it. Without this the
 * cards sit flush against the header bar and the container sides. Mirrors the
 * theme's 30px gutter.
 */
.nxl-container .nxl-content .admin-content-body {
    padding: 25px 30px 10px;
}

/* Stat / summary card (dashboard) — see docs/duralux-breadcrumbs-and-card-spacing.md. */
.stat-card {
    transition: all 0.3s ease;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.stat-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 24px;
}

/* Reduced motion — the hover lift is decorative (§10). */
@media (prefers-reduced-motion: reduce) {
    .stat-card {
        transition: none;
    }
    .stat-card:hover {
        transform: none;
    }
}

/* Record-header avatar initials (§3.6). The theme's `.text-primary` is raw Brand
   Orange, which is 2.58:1 on the soft-orange tint and misses AA, so the initials
   take the accessible orange instead. */
.record-header-avatar {
    color: var(--aik-orange-800);
}

/* ==========================================================================
   Soft "primary" tint (§3.1, §3.4)
   Duralux ships `.bg-soft-primary{background-color:#ebeefa}` — a lilac from its
   own blue palette. Every KPI tile and count badge in the admin therefore sat on
   an off-palette wash with a raw Brand Orange glyph on top, which is ~2.4:1 and
   misses AA (§3.5). Remap the wash to the published orange 50 tint and take the
   glyph down the ramp: orange-900 on orange-50 is 7.3:1. Same reasoning as
   `.record-header-avatar` above, applied at the tint itself so the two agree.
   `!important` matches the theme's own, which is why it is needed here.
   ========================================================================== */

.bg-soft-primary {
    background-color: var(--aik-orange-50) !important;
}

.bg-soft-primary.text-primary,
.bg-soft-primary .text-primary {
    color: var(--aik-orange-900) !important;
}

/* ==========================================================================
   Soft "secondary" tint (§3.6)
   Duralux ships every other `.bg-soft-*` wash but not this one — the only
   `bg-soft-secondary` rule in the theme is `.btn.bg-soft-secondary:hover`. So
   the ~60 `badge bg-soft-secondary text-secondary` chips across the admin (the
   neutral, non-status states: "AIMS off", "Blocked", the reference chips in
   `<x-record-header>`) painted NO surface at all and fell back to Bootstrap's
   `--bs-secondary-rgb` slate #64748B, which is in no part of §3.1. The neutral
   state gets a real surface off the palette neutrals; grey-800 on grey-100 is
   9.97:1. `!important` matches the theme's own on the sibling `.bg-soft-*`
   utilities, which is why it is needed here.
   ========================================================================== */

.bg-soft-secondary {
    background-color: var(--aik-grey-100) !important;
}

.bg-soft-secondary.text-secondary,
.bg-soft-secondary .text-secondary {
    color: var(--aik-grey-800) !important;
}

/* ==========================================================================
   Pill navigation (§3.7, §6.4)
   Bootstrap ships `.nav-pills` with an active pill filled solid #F58320 and a
   white label, and every INACTIVE pill inherits `--bs-nav-link-color` — which
   the bridge above maps to the orange link token. The two product switchers
   that use this (AIMS sync, the policy report) therefore rendered a whole row
   of orange, on pages that already spend their orange budget on a KPI tint and
   the filter button. That is orange as a surface, which §3.7's 60/30/10 rules
   out, and the filled pill also carries white at 2.58:1 — the signed-off button
   deviation, extended to a component it was never signed off for.

   Same resolution as the sidebar above: the active state is carried by fill +
   colour + weight together (never colour alone), using the light orange wash
   and the accessible orange, which is 4.89:1 and clears AA.
   ========================================================================== */

.nav-pills .nav-link {
    color: var(--aik-text-secondary);
    font-weight: var(--fw-medium);
}

.nav-pills .nav-link:hover {
    color: var(--aik-link);
    background-color: var(--aik-orange-50);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--aik-link);
    background-color: var(--aik-orange-100);
    font-weight: var(--fw-semibold);
}

/* ==========================================================================
   Sidebar open/close controls
   Duralux renders both togglers as `javascript:void(0)` anchors and styles them
   by element (`.nxl-navigation-toggle a`). They are real <button>s here so they
   are keyboard-operable and can carry aria-expanded, which means the anchor
   styling no longer reaches them — these rules restore the same look on a
   button, plus the focus ring the theme's anchors get from the :focus-visible
   block above.
   ========================================================================== */

.btn-sidebar-toggle {
    padding: 0;
    border: 0;
    background: none;
    color: var(--aik-black);
    line-height: normal;
    cursor: pointer;
}

.btn-sidebar-toggle:focus-visible {
    outline: 2px solid var(--aik-focus);
    outline-offset: 2px;
}

/* One control, two icons: the collapse arrow only appears once the rail is
   collapsed, so the button never lies about what pressing it will do. The
   theme's own approach (two elements, `display:none` juggled from JS) is what
   broke — it revealed an id this layout never rendered. */
.btn-sidebar-toggle [data-sidebar-icon-collapsed],
html.minimenu .btn-sidebar-toggle [data-sidebar-icon-expanded] {
    display: none;
}

html.minimenu .btn-sidebar-toggle [data-sidebar-icon-collapsed] {
    display: inline-block;
}

/* The collapsed rail hides every `.nxl-mtext` label and only restores them on
   :hover, so a keyboard user tabbing through the rail would meet a column of
   unlabelled icons. Mirroring the theme's hover rules onto :focus-within gives
   keyboard and switch users the same flyout the mouse gets (WCAG 2.1.1/2.4.7).
   Selectors match the theme's specificity so these, loaded later, win. */
html.minimenu .nxl-navigation:focus-within .navbar-content {
    position: absolute !important;
    width: 280px;
    background-color: #fff;
    border-right: 1px solid #dedddd;
    transition: all 0.3s ease;
}

html.minimenu .nxl-navigation:focus-within .navbar-content .card,
html.minimenu .nxl-navigation:focus-within .navbar-content .nxl-arrow,
html.minimenu .nxl-navigation:focus-within .navbar-content .nxl-caption,
html.minimenu .nxl-navigation:focus-within .navbar-content .nxl-mtext {
    display: inline-block;
    transition: all 0.3s ease;
}

html.minimenu .nxl-navigation:focus-within .navbar-content .nxl-link {
    margin: 0 15px;
    margin-bottom: 3px;
    padding: 10px 20px;
}

html.minimenu .nxl-navigation:focus-within .navbar-content .nxl-submenu .nxl-link {
    margin-bottom: 3px;
    padding-left: 20px;
    margin-left: 50px !important;
    margin-right: 15px !important;
}

html.minimenu .nxl-navigation:focus-within .navbar-content .nxl-submenu .nxl-submenu .nxl-link {
    margin-left: 65px !important;
}

html.minimenu .nxl-navigation:focus-within .navbar-content .nxl-hasmenu.nxl-trigger > .nxl-submenu {
    display: block;
}

html.minimenu .nxl-navigation:focus-within .navbar-content .nxl-caption:before {
    content: none;
}

html.minimenu .nxl-navigation:focus-within .navbar-content .nxl-caption label {
    display: block;
}

/* The 130px brand block (§2.3) is a portrait lockup that has no room on the
   100px rail; the theme's own `.logo-lg`/`.logo-sm` swap handles the mark, but
   the block still has to shrink with it or the rail opens on 130px of padding. */
html.minimenu .nxl-navigation .navbar-wrapper .m-header {
    height: 80px;
    padding: 16px;
}

html.minimenu .navbar-content {
    height: calc(100vh - 80px);
}