/* themeUAEGov.css — UAE Gov Web Theme (v1.2.0 — Stage 1 quick-wins)
 * Spec: docs/superpowers/specs/2026-05-04-uaegov-web-theme-design.md
 * Reference: designsystem.gov.ae, tdra.gov.ae
 *
 * Loaded via <link id="udpTheme"> in _BackOffice / _BackOffice_Forms /
 * _Website / _Blank layouts. Activated when cookie UDP_UserSelectedTheme
 * is unset (default) or equals "themeUAEGov".
 *
 * v1.1.0 — Cosmetic-only rewrite:
 *   - DROPPED: height/width/padding/margin/font-size on components.
 *     The existing app.css / udpStyle.css / backoffice.css / Bootstrap
 *     dimensions are preserved exactly so MS01 page layouts do not shift.
 *   - KEPT: colours, background, border-color, border-radius, box-shadow,
 *     focus rings, transitions, font-weight, font-family.
 *   - Chrome (topbar / layout-wrapper / sidebar) uses --ae-chrome (#344b61)
 *     gray instead of a black-to-gold gradient. AEGold (#92722A action /
 *     #B68A35 brand) stays only for action elements: buttons, links,
 *     badges, focus rings, accents.
 *
 * Untouched: existing themes (Golden / Red / Green / Default / Dark / CFS),
 * uae-ds-theme.css (mobile), and all base CSS (app.css, udpStyle.css,
 * backoffice.css, udpStylemob.css).
 *
 * v1.2.0 — Stage 1 quick wins:
 *   - Inter font loaded for display headings (.display-1 ... .display-6)
 *     per UAE DS "secondary heading font" spec. Body + h1-h6 stay Roboto
 *     to avoid reflow risk on existing MS01 pages.
 *   - .alert-solid variants synthesised (UAE DS solid alert mode).
 *   - .card[data-clickable="true"] hover-lift (transform + shadow) re-added.
 *   - Logical properties pass (margin/padding-inline) for Stage 2 RTL setup.
 *
 * Section map:
 *   1. Tokens (:root)
 *   2. Global colour & link rules
 *   3. Bootstrap core — colours only
 *   4. Toastr
 *   5. Back-office shell — chrome in #344b61
 *   6. Website chrome
 *   7. bs-stepper wizard — colours only
 *   8. SmartAIInput — colours only
 *   9. Selective Kendo — colours only
 *  10. Legacy theme classes
 *  11. ThemePicker swatch
 *  12. Reduced-motion safety net
 */

/* Inter — UAE DS secondary heading font. Loaded only for hero headings
   (.display-*) so regular h1-h6 keep Roboto and existing layouts unaffected. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================
 * 1. Tokens
 * ============================================================ */

:root {
    /* --- Primary — AEGold (action / brand accent) --- */
    --ae-primary-50:  #F9F7ED;
    --ae-primary-100: #F2ECCF;
    --ae-primary-200: #E6D7A2;
    --ae-primary-300: #D7BC6D;
    --ae-primary-400: #CBA344;
    --ae-primary-500: #B68A35;  /* brand only */
    --ae-primary-600: #92722A;  /* default action */
    --ae-primary-700: #7C5E24;  /* action hover */
    --ae-primary-800: #6C4527;  /* action active */
    --ae-primary-900: #5D3B26;
    --ae-primary-950: #361E12;

    /* --- Chrome — slate gray (topbar / layout-wrapper / sidebar shell + actions) --- */
    --ae-chrome:        #344b61;
    --ae-chrome-dark:   #232f3d;   /* gradient dark stop, hover */
    --ae-chrome-darker: #1a2632;   /* active state */
    --ae-chrome-light:  #4a6379;   /* lighter accent */
    --ae-chrome-50:     #EEF1F4;   /* very subtle tint — hover bg */
    --ae-chrome-100:    #D6DDE5;   /* light tint — soft bg / selected bg */
    --ae-chrome-200:    #B4C0CD;   /* light border accent */

    /* Action aliases — point at chrome so theme select drives buttons,
       card borders, hover tints, focus rings, sidebar active. AEGold
       remains available below for .btn-golden and decorative usage. */
    --ae-action:        var(--ae-chrome);
    --ae-action-hover:  var(--ae-chrome-dark);
    --ae-action-active: var(--ae-chrome-darker);

    /* --- Neutrals — AEBlack --- */
    --ae-neutral-0:   #FFFFFF;
    --ae-neutral-50:  #F7F7F7;
    --ae-neutral-100: #E1E3E5;
    --ae-neutral-200: #C3C6CB;
    --ae-neutral-300: #9EA2A9;
    --ae-neutral-400: #797E86;
    --ae-neutral-500: #5F646D;
    --ae-neutral-600: #4B4F58;
    --ae-neutral-700: #3E4046;
    --ae-neutral-800: #232528;
    --ae-neutral-900: #1B1D21;
    --ae-neutral-950: #0E0F12;

    /* --- Semantic --- */
    --ae-error-50:    #FEF2F2;
    --ae-error-100:   #FDE4E3;
    --ae-error-700:   #B52520;
    --ae-error-800:   #95231F;

    --ae-success-50:  #F3FAF4;
    --ae-success-100: #E4F4E7;
    --ae-success-700: #2F663C;
    --ae-success-800: #2A5133;

    --ae-warning-50:  #FFFBEB;
    --ae-warning-100: #FDF4C8;
    --ae-warning-700: #B2550B;

    --ae-info-50:     #E7F5FF;
    --ae-info-100:    #D3EDFF;
    --ae-info-700:    #003CFF;

    /* --- Typography (font-family only — no size overrides) --- */
    --ae-font-sans:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ae-font-display: 'Inter', 'Roboto', system-ui, sans-serif;

    --ae-fw-medium:    500;
    --ae-fw-semibold:  600;
    --ae-fw-bold:      700;

    /* --- Radii (subtle, no layout impact) --- */
    --ae-radius-sm:   4px;
    --ae-radius-md:   6px;
    --ae-radius-lg:   8px;
    --ae-radius-xl:  12px;
    --ae-radius-pill: 9999px;

    /* --- Shadows --- */
    --ae-shadow-xs:    0 1px  2px  rgba(14, 15, 18, .05);
    --ae-shadow-sm:    0 1px  3px  rgba(14, 15, 18, .08);
    --ae-shadow-md:    0 4px  12px rgba(195, 198, 203, .35);
    --ae-shadow-lg:    0 8px  24px rgba(95, 100, 109, .25);
    --ae-shadow-xl:    0 16px 40px rgba(95, 100, 109, .30);

    --ae-shadow-glow-primary: 0 0 0 4px rgba(52,  75, 97, .25);   /* chrome focus ring */
    --ae-shadow-glow-error:   0 0 0 4px rgba(181, 37, 32, .25);
    --ae-shadow-glow-gold:    0 0 0 4px rgba(146, 114, 42, .25);  /* legacy / decorative */

    /* --- Motion --- */
    --ae-transition-fast: 120ms ease-out;
    --ae-transition-base: 200ms ease-out;
}

/* ============================================================
 * 2. Global colour & link rules
 *    (no font-size / line-height changes — defer to base CSS)
 * ============================================================ */

body {
    color: var(--ae-neutral-800);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ae-neutral-900);
}

/* UAE DS hero headings use Inter (secondary heading font). Regular h1-h6
   stay on Roboto so existing layouts don't reflow. Pages opt into Inter
   by adding the .display-* class (Bootstrap-stock). */
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6,
h1.display, h2.display {
    font-family: var(--ae-font-display);
    font-weight: var(--ae-fw-bold);
    letter-spacing: -0.01em;
}

a {
    color: var(--ae-action);
    transition: color var(--ae-transition-fast);
}

a:hover {
    color: var(--ae-action-hover);
}

*:focus-visible {
    outline: none;
    box-shadow: var(--ae-shadow-glow-primary);
}

/* ============================================================
 * 2.a  WCAG 2.2 SC 2.4.7 (Focus Visible) + SC 2.4.11 (Focus Not Obscured)
 *      Sprint 2 / roadmap items A-11 + A-12.
 * ============================================================ */

/* Keep the focused element clear of the sticky #page-topbar / public banner. */
html {
    scroll-padding-top: 96px;
}

:focus-visible {
    scroll-margin-top: 96px;
}

/* Selectors elsewhere in app.css that set `outline: none` for visual polish
   (Select2 wrappers, table-row checkboxes, custom action cells) lose the
   default focus ring. Re-introduce a visible glow so keyboard users can see
   where focus is — paired with `outline: 2px solid transparent` so Windows
   High Contrast Mode users still get a system ring. */
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus,
.select2-container--default .select2-selection--single:focus-visible,
.select2-container--default .select2-selection--multiple:focus-visible,
table .form-check-input:focus-visible,
.k-grid tr:focus-visible,
.k-grid td:focus-visible,
.k-pager-numbers a:focus-visible,
.k-pager-nav:focus-visible {
    outline: 2px solid transparent !important;
    box-shadow: 0 0 0 3px var(--ae-chrome, #1d4ed8) !important;
}

/* SC 2.5.8 Target Size (Minimum, WCAG 2.2) — ensure tiny icon buttons /
   pagination cells meet 24x24 CSS px. */
button, [role="button"], .btn-icon, .k-pager-numbers a, .k-pager-nav {
    min-height: 24px;
    min-width: 24px;
}

/* SC 1.4.11 — Windows High Contrast Mode / forced-colors override.
   Brand glows disappear in forced-colors; restore a system-defined ring. */
@media (forced-colors: active) {
    :focus-visible {
        outline: 2px solid Highlight !important;
        outline-offset: 2px;
        box-shadow: none !important;
    }
    .btn, .form-control, .k-grid {
        forced-color-adjust: none;
        border: 1px solid ButtonText;
    }
}

/* ============================================================
 * 2.b  SC 1.4.1 Use of Color (A-16) — every error state must carry
 *      a non-colour signal as well as the red border.
 * ============================================================ */

/* Keep Bootstrap's invalid SVG icon on the right-hand side of the field
   even when local CSS sets a custom border-color. Recoloured with the
   WCAG-safe #D32F2F variant (A-13). */
.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid,
.was-validated .form-select:invalid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23D32F2F'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23D32F2F' stroke='none'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
    padding-right: calc(1.5em + 0.75rem) !important;
}

/* Prefix every validation-message slot with a warning glyph so the meaning
   is conveyed by shape + text, not just colour. Scoped tightly to the
   canonical message containers so legitimate decoration uses of
   .text-danger (the required-field asterisk) are untouched. */
.field-validation-error::before,
.invalid-feedback:not(:empty)::before,
span[asp-validation-for]:not(:empty)::before,
span[data-valmsg-for]:not(:empty):not(.field-validation-valid)::before,
.text-danger[role="alert"]:not(:empty)::before {
    content: "⚠ ";
    font-weight: 700;
    margin-right: 0.2em;
    color: #D32F2F;
}

/* ============================================================
 * 2.c  SC 1.4.1 Use of Color (continuation, P2.3) — status badges
 *      across dashboards / grids. The badges already convey state via
 *      colour (`.badge-soft-success` green, `.badge-soft-danger` red etc.);
 *      add a leading glyph so shape + text conveys the same information.
 * ============================================================ */
.badge.badge-soft-success::before,
.badge.bg-success::before,
.badge.text-bg-success::before {
    content: "✓\00a0";
    font-weight: 700;
}
.badge.badge-soft-danger::before,
.badge.bg-danger::before,
.badge.text-bg-danger::before {
    content: "!\00a0";
    font-weight: 700;
}
.badge.badge-soft-warning::before,
.badge.bg-warning::before,
.badge.text-bg-warning::before {
    content: "⚠\00a0";
    font-weight: 700;
}
.badge.badge-soft-info::before,
.badge.bg-info::before,
.badge.text-bg-info::before {
    content: "ℹ\00a0";
    font-weight: 700;
}
/* Primary / secondary / dark are neutral categories — no semantic glyph,
   but make sure the leading whitespace is reset so contents align with
   the variants above. */
.badge.badge-soft-primary::before,
.badge.badge-soft-secondary::before,
.badge.badge-soft-dark::before {
    content: "";
}

.text-theme,
.text-aeprimary {
    color: var(--ae-action);
}

.border-theme {
    border-color: var(--ae-action);
}

/* ============================================================
 * 3. Bootstrap core — colours only (no size overrides)
 * ============================================================ */

/* --- 3.1 Buttons (UAE DS spec) ---
       Sizes (verbatim from designsystem.gov.ae/docs/components/button):
         btn-xs   2rem   (32px)  | padding 0 1rem    | font 0.875rem
         btn-sm   2.5rem (40px)  | padding 0 1.25rem | font 0.875rem
         btn-base 3rem   (48px)  | padding 0 1.5rem  | font 1rem        ← default
         btn-lg   3.25rem(52px)  | padding 0 1.75rem | font 1.125rem
       Variants: solid (default) / .btn-outline / .btn-soft / .btn-link
       Colour modifier: .btn-secondary (any variant)
       Icon-only: .btn-icon (square aspect)
       UAE DS class: .aegov-btn — aliased to Bootstrap's .btn here. */

.btn,
.aegov-btn {
    font-family: var(--ae-font-sans);
    font-weight: var(--ae-fw-semibold);
    font-size: 1rem;
    height: 3rem;
    padding: 0 1.5rem;
    border-radius: var(--ae-radius-md);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color var(--ae-transition-base),
        border-color var(--ae-transition-base),
        box-shadow var(--ae-transition-base),
        color var(--ae-transition-base);
}

.btn:focus-visible,
.aegov-btn:focus-visible {
    box-shadow: var(--ae-shadow-glow-primary);
    outline: none;
}

.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"],
.aegov-btn:disabled,
.aegov-btn.disabled,
.aegov-btn[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* SVG / icon children — auto-sized, follow currentColor */
.btn > svg,
.btn > i,
.btn > .ph,
.aegov-btn > svg,
.aegov-btn > i,
.aegov-btn > .ph {
    flex-shrink: 0;
    color: currentColor;
}

.btn > svg,
.aegov-btn > svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Sizes — only override the dimensions changed by each size class */

.btn-xs,
.btn-xsm,
.aegov-btn.btn-xs {
    height: 2rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    border-radius: var(--ae-radius-sm);
    gap: 0.375rem;
}

.btn-sm,
.aegov-btn.btn-sm {
    height: 2.5rem;
    padding: 0 1.25rem;
    font-size: 0.875rem;
    gap: 0.375rem;
}

.btn-lg,
.aegov-btn.btn-lg {
    height: 3.25rem;
    padding: 0 1.75rem;
    font-size: 1.125rem;
}

.btn-xs > svg, .btn-xsm > svg, .aegov-btn.btn-xs > svg { width: 1rem;    height: 1rem; }
.btn-sm > svg,                  .aegov-btn.btn-sm > svg { width: 1.125rem; height: 1.125rem; }
.btn-lg > svg,                  .aegov-btn.btn-lg > svg { width: 1.25rem;  height: 1.25rem; }

/* Icon-only — square aspect, no text padding */
.btn-icon,
.aegov-btn.btn-icon {
    width: 3rem;
    padding: 0;
    gap: 0;
}

.btn-xs.btn-icon,  .btn-xsm.btn-icon,  .aegov-btn.btn-xs.btn-icon  { width: 2rem; }
.btn-sm.btn-icon,                       .aegov-btn.btn-sm.btn-icon { width: 2.5rem; }
.btn-lg.btn-icon,                       .aegov-btn.btn-lg.btn-icon { width: 3.25rem; }

/* Primary */
.btn-primary {
    background-color: var(--ae-action);
    border-color: var(--ae-action);
    color: var(--ae-neutral-0);
}
.btn-primary:hover {
    background-color: var(--ae-action-hover);
    border-color: var(--ae-action-hover);
    color: var(--ae-neutral-0);
}
.btn-primary:active,
.btn-primary.active,
.btn-primary:focus:active {
    background-color: var(--ae-action-active);
    border-color: var(--ae-action-active);
    color: var(--ae-neutral-0);
}
.btn-primary:focus-visible {
    box-shadow: var(--ae-shadow-glow-primary);
    outline: none;
}

/* Outline variant — UAE DS uses .btn-outline (no -primary suffix);
   Bootstrap uses .btn-outline-primary. Both work. */
.btn-outline,
.btn-outline-primary,
.aegov-btn.btn-outline {
    background-color: var(--ae-neutral-0);
    color: var(--ae-action);
    border-color: var(--ae-action);
}
.btn-outline:hover,
.btn-outline-primary:hover,
.aegov-btn.btn-outline:hover {
    background-color: var(--ae-chrome-50);
    color: var(--ae-action-hover);
    border-color: var(--ae-action-hover);
}

/* Outline + secondary modifier (UAE DS pattern: .btn-outline.btn-secondary) */
.btn-outline.btn-secondary,
.aegov-btn.btn-outline.btn-secondary {
    background-color: var(--ae-neutral-0);
    color: var(--ae-chrome);
    border-color: var(--ae-chrome);
}
.btn-outline.btn-secondary:hover,
.aegov-btn.btn-outline.btn-secondary:hover {
    background-color: var(--ae-neutral-50);
    color: var(--ae-chrome-dark);
    border-color: var(--ae-chrome-dark);
}

/* Secondary = chrome gray (matches new chrome colour) */
.btn-secondary {
    background-color: var(--ae-chrome);
    border-color: var(--ae-chrome);
    color: var(--ae-neutral-0);
}
.btn-secondary:hover {
    background-color: var(--ae-chrome-dark);
    border-color: var(--ae-chrome-dark);
    color: var(--ae-neutral-0);
}

.btn-outline-secondary {
    background-color: var(--ae-neutral-0);
    color: var(--ae-chrome);
    border-color: var(--ae-chrome);
}
.btn-outline-secondary:hover {
    background-color: rgba(52, 75, 97, .08);
    color: var(--ae-chrome-dark);
    border-color: var(--ae-chrome-dark);
}

.btn-success {
    background-color: var(--ae-success-700);
    border-color: var(--ae-success-700);
    color: var(--ae-neutral-0);
}
.btn-success:hover {
    background-color: var(--ae-success-800);
    border-color: var(--ae-success-800);
    color: var(--ae-neutral-0);
}

.btn-danger {
    background-color: var(--ae-error-700);
    border-color: var(--ae-error-700);
    color: var(--ae-neutral-0);
}
.btn-danger:hover {
    background-color: var(--ae-error-800);
    border-color: var(--ae-error-800);
    color: var(--ae-neutral-0);
}
.btn-danger:focus-visible {
    box-shadow: var(--ae-shadow-glow-error);
}

.btn-warning {
    background-color: var(--ae-warning-700);
    border-color: var(--ae-warning-700);
    color: var(--ae-neutral-0);
}
.btn-warning:hover {
    background-color: #944509;
    border-color: #944509;
    color: var(--ae-neutral-0);
}

.btn-info {
    background-color: var(--ae-info-700);
    border-color: var(--ae-info-700);
    color: var(--ae-neutral-0);
}
.btn-info:hover {
    background-color: #002dc2;
    border-color: #002dc2;
    color: var(--ae-neutral-0);
}

/* Link variant — UAE DS .btn-link / Bootstrap .btn-link */
.btn-link,
.aegov-btn.btn-link {
    background-color: transparent;
    border-color: transparent;
    color: var(--ae-action);
    height: auto;
    padding: 0.25rem 0.5rem;
}
.btn-link:hover,
.aegov-btn.btn-link:hover {
    color: var(--ae-action-hover);
    text-decoration: underline;
    background-color: transparent;
}

.btn-link.btn-secondary,
.aegov-btn.btn-link.btn-secondary {
    color: var(--ae-chrome);
}
.btn-link.btn-secondary:hover,
.aegov-btn.btn-link.btn-secondary:hover {
    color: var(--ae-chrome-dark);
}

/* Soft variant — UAE DS .btn-soft / Bootstrap .btn-soft-primary
   Tinted background + action-toned text. Less emphatic than solid. */
.btn-soft,
.btn-soft-primary,
.aegov-btn.btn-soft {
    background-color: var(--ae-chrome-50);
    color: var(--ae-action-active);
    border-color: transparent;
}
.btn-soft:hover,
.btn-soft-primary:hover,
.aegov-btn.btn-soft:hover {
    background-color: var(--ae-chrome-100);
    color: var(--ae-action-active);
}

.btn-soft.btn-secondary,
.btn-soft-secondary,
.aegov-btn.btn-soft.btn-secondary {
    background-color: var(--ae-neutral-100);
    color: var(--ae-neutral-900);
    border-color: transparent;
}
.btn-soft.btn-secondary:hover,
.btn-soft-secondary:hover,
.aegov-btn.btn-soft.btn-secondary:hover {
    background-color: var(--ae-neutral-200);
}

.btn-soft-success {
    background-color: var(--ae-success-100);
    color: var(--ae-success-800);
    border-color: transparent;
}
.btn-soft-success:hover {
    background-color: #cdebd2;       /* slightly darker green-100 */
}

.btn-soft-danger {
    background-color: var(--ae-error-100);
    color: var(--ae-error-800);
    border-color: transparent;
}
.btn-soft-danger:hover {
    background-color: #fbcbc7;       /* slightly darker red-100 */
}

.btn-soft-warning {
    background-color: var(--ae-warning-100);
    color: var(--ae-warning-700);
    border-color: transparent;
}

.btn-soft-info {
    background-color: var(--ae-info-100);
    color: var(--ae-info-700);
    border-color: transparent;
}

/* --- 3.2 Form controls (UAE DS spec) ---
       Sizes (verbatim from designsystem.gov.ae/docs/components/input):
         control-sm   40px height | py-2.5 (0.625rem) | font 0.875rem
         control-base 48px height | py-3   (0.75rem)  | font 1rem      ← default
         control-lg   56px height | py-3.5 (0.875rem) | font 1.125rem
       Bootstrap .form-control / Kendo .k-input rules left at native sizing
       so existing pages don't shift. Pages that opt into the UAE DS
       .aegov-form-control wrapper get exact spec sizing. */

.form-control,
textarea.form-control,
input.form-control,
select.form-control,
.aegov-form-control input,
.aegov-form-control textarea,
.aegov-form-control select,
.aegov-form-control .form-control-input > input,
.aegov-form-control .form-control-input > textarea,
.aegov-form-control .form-control-input > select {
    color: var(--ae-neutral-900);
    /*border: 1px solid var(--ae-neutral-400);*/ /* a11y: SC 1.4.11 — raised from neutral-200 (1.64:1) to meet 3:1 non-text contrast */
    border-radius: var(--ae-radius-md);
    background-color: var(--ae-neutral-0);
    font-family: var(--ae-font-sans);
    transition:
        border-color var(--ae-transition-base),
        box-shadow var(--ae-transition-base);
}

.form-control::placeholder,
textarea.form-control::placeholder,
.aegov-form-control input::placeholder,
.aegov-form-control textarea::placeholder {
    color: var(--ae-neutral-400);
}

.form-control:focus,
textarea.form-control:focus,
.aegov-form-control input:focus,
.aegov-form-control textarea:focus,
.aegov-form-control select:focus {
    border-color: var(--ae-action);
    box-shadow: var(--ae-shadow-glow-primary);
    outline: none;
}

.form-control[readonly],
.form-control:disabled,
textarea.form-control:disabled,
.aegov-form-control input:disabled,
.aegov-form-control textarea:disabled,
.aegov-form-control[aria-disabled="true"] input,
.aegov-form-control[aria-disabled="true"] textarea {
    background-color: var(--ae-neutral-50);
    color: var(--ae-neutral-700);
    cursor: not-allowed;
}

/* Error state — Bootstrap .is-invalid + UAE DS .control-error */
.form-control.is-invalid,
.form-select.is-invalid,
.aegov-form-control.control-error input,
.aegov-form-control.control-error textarea,
.aegov-form-control.control-error select {
    border-color: var(--ae-error-700);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.aegov-form-control.control-error input:focus,
.aegov-form-control.control-error textarea:focus {
    box-shadow: var(--ae-shadow-glow-error);
}

.aegov-form-control.control-error label,
.aegov-form-control.control-error .error-message {
    color: var(--ae-error-700);
}

/* UAE DS .aegov-form-control wrapper + sizes */
.aegov-form-control {
    display: block;
    margin-bottom: 1rem;
}

.aegov-form-control > label {
    display: block;
    color: var(--ae-neutral-700);
    font-weight: var(--ae-fw-medium);
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
}

.aegov-form-control .form-control-input {
    position: relative;
    display: flex;
    align-items: stretch;
    background-color: var(--ae-neutral-0);
}

.aegov-form-control .form-control-input > input,
.aegov-form-control .form-control-input > textarea,
.aegov-form-control .form-control-input > select {
    flex: 1 1 auto;
    width: 100%;
    height: 3rem;                       /* control-base default 48px */
    padding: 0 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
}

.aegov-form-control .form-control-input > textarea {
    height: auto;
    min-height: 6rem;
    padding: 0.75rem;
    line-height: 1.6;
}

/* Sizes */
.aegov-form-control.control-sm .form-control-input > input,
.aegov-form-control.control-sm .form-control-input > textarea,
.aegov-form-control.control-sm .form-control-input > select {
    height: 2.5rem;                     /* 40px */
    font-size: 0.875rem;
}

.aegov-form-control.control-lg .form-control-input > input,
.aegov-form-control.control-lg .form-control-input > textarea,
.aegov-form-control.control-lg .form-control-input > select {
    height: 3.5rem;                     /* 56px */
    font-size: 1.125rem;
    padding: 0 1rem;
}

/* Prefix / suffix (icons or text inside the field group) */
.aegov-form-control .control-prefix,
.aegov-form-control .control-suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 0.75rem;
    background-color: var(--ae-neutral-50);
    border: 1px solid var(--ae-neutral-200);
    color: var(--ae-neutral-600);
    font-size: 0.875rem;
}

.aegov-form-control .control-prefix {
    border-inline-end: none;
    border-radius: var(--ae-radius-md) 0 0 var(--ae-radius-md);
}

.aegov-form-control .control-suffix {
    border-inline-start: none;
    border-radius: 0 var(--ae-radius-md) var(--ae-radius-md) 0;
}

.aegov-form-control .control-prefix + input,
.aegov-form-control .control-prefix + textarea,
.aegov-form-control .control-prefix + select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.aegov-form-control .form-control-input > input:has(+ .control-suffix),
.aegov-form-control .form-control-input > select:has(+ .control-suffix),
.aegov-form-control .form-control-input > input:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Helper text + error message (UAE DS classes) */
.aegov-form-control .text-aeblack-500,
.aegov-form-control .form-text {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--ae-neutral-500);
}

.aegov-form-control .error-message {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--ae-error-700);
    font-weight: var(--ae-fw-medium);
}

.aegov-form-control .error-message strong {
    font-weight: var(--ae-fw-semibold);
}

/* Secondary colour variant */
.aegov-form-control.control-secondary input:focus,
.aegov-form-control.control-secondary textarea:focus,
.aegov-form-control.control-secondary select:focus {
    border-color: var(--ae-chrome);
    box-shadow: var(--ae-shadow-glow-primary);
}

.form-select {
    color: var(--ae-neutral-900);
    border-color: var(--ae-neutral-400); /* a11y: SC 1.4.11 — raised from neutral-200 (1.64:1) to meet 3:1 non-text contrast */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23344b61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

.form-select:focus {
    border-color: var(--ae-action);
    box-shadow: var(--ae-shadow-glow-primary);
    outline: none;
}

/* Checkbox / Radio (UAE DS spec) ---
       Sizes: check-sm 16x16 / check-base 20x20 (default) / check-lg 24x24.
       Class hooks: Bootstrap .form-check-input + UAE DS .aegov-check-item /
       .aegov-check-group / .group-list. .check-secondary modifier swaps
       to AEBlack accent.

       Unchecked state must look EMPTY (no theme colour, no fill).
       Theme colour appears only on :checked. accent-color is intentionally
       NOT set on the base rule because in modern Chrome/Edge it tints the
       unchecked border, making the control read as "already selected". */

.form-check-input,
.aegov-check-item input[type="checkbox"],
.aegov-check-item input[type="radio"],
.aegov-check-group input[type="checkbox"],
.aegov-check-group input[type="radio"] {
    background-color: var(--ae-neutral-0);
    border-color: var(--ae-neutral-400); /* a11y: SC 1.4.11 — raised from neutral-300 (2.43:1) to meet 3:1 non-text contrast */
    cursor: pointer;
    transition:
        background-color var(--ae-transition-fast),
        border-color var(--ae-transition-fast),
        box-shadow var(--ae-transition-fast);
}

.form-check-input:checked,
.aegov-check-item input[type="checkbox"]:checked,
.aegov-check-item input[type="radio"]:checked,
.aegov-check-group input[type="checkbox"]:checked,
.aegov-check-group input[type="radio"]:checked {
    background-color: var(--ae-action);
    border-color: var(--ae-action);
}

.form-check-input:indeterminate {
    border-color: var(--ae-action);
}

.form-check-input:focus-visible,
.aegov-check-item input:focus-visible,
.aegov-check-group input:focus-visible {
    box-shadow: var(--ae-shadow-glow-primary);
    outline: none;
}

.form-check-input:disabled,
.form-check-input[aria-disabled="true"],
.aegov-check-item input:disabled,
.aegov-check-group input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Plain native radios / checkboxes (NO .form-check-input, NO .k-checkbox).
   Without these rules, accent-color (or browser default) tints unchecked
   states. We render them custom so unchecked = empty white, checked =
   themed action colour with a checkmark/dot inside. */

input[type="checkbox"]:not(.form-check-input):not(.k-checkbox):not([class*="aegov-toggle"]),
input[type="radio"]:not(.form-check-input):not(.k-radio) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1rem;
    height: 1rem;
    margin: 0 0.375rem 0 0;
    background-color: var(--ae-neutral-0);
    border: 1.5px solid var(--ae-neutral-400); /* a11y: SC 1.4.11 — raised from neutral-300 (2.43:1) to meet 3:1 non-text contrast */
    flex-shrink: 0;
    vertical-align: middle;
    cursor: pointer;
    transition:
        background-color var(--ae-transition-fast),
        border-color var(--ae-transition-fast),
        box-shadow var(--ae-transition-fast);
    position: relative;
}

input[type="checkbox"]:not(.form-check-input):not(.k-checkbox):not([class*="aegov-toggle"]) {
    border-radius: var(--ae-radius-sm);
}

input[type="radio"]:not(.form-check-input):not(.k-radio) {
    border-radius: var(--ae-radius-pill);
}
    input[type="checkbox"]:not(.form-check-input):not(.k-checkbox):disabled,
    input[type="radio"]:not(.form-check-input):not(.k-radio):disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background-color: var(--ae-neutral-800);
    }
input[type="checkbox"]:not(.form-check-input):not(.k-checkbox):hover,
input[type="radio"]:not(.form-check-input):not(.k-radio):hover {
    border-color: var(--ae-action);
}

input[type="checkbox"]:not(.form-check-input):not(.k-checkbox):focus-visible,
input[type="radio"]:not(.form-check-input):not(.k-radio):focus-visible {
    box-shadow: var(--ae-shadow-glow-primary);
    outline: none;
}

input[type="checkbox"]:not(.form-check-input):not(.k-checkbox):checked {
    background-color: var(--ae-action);
    border-color: var(--ae-action);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8l3.5 3.5L13 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-size: 75% 75%;
    background-repeat: no-repeat;
    background-position: center;
}

input[type="radio"]:not(.form-check-input):not(.k-radio):checked {
    border-color: var(--ae-action);
    background-color: var(--ae-neutral-0);
    background-image: radial-gradient(circle, var(--ae-action) 38%, transparent 42%);
}



.form-check-label,
.aegov-check-item label,
.aegov-check-group label {
    color: var(--ae-neutral-800);
    cursor: pointer;
}

/* UAE DS .aegov-check-item — single checkbox/radio with label */
.aegov-check-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.aegov-check-item input[type="checkbox"],
.aegov-check-item input[type="radio"] {
    width: 1.25rem;                      /* check-base 20px */
    height: 1.25rem;
    margin: 0;
    flex-shrink: 0;
}

/* Sizes */
.aegov-check-item.check-sm input,
.aegov-check-group.check-sm input {
    width: 1rem;                         /* 16px */
    height: 1rem;
}
.aegov-check-item.check-sm label,
.aegov-check-group.check-sm label {
    font-size: 0.875rem;
}

.aegov-check-item.check-lg input,
.aegov-check-group.check-lg input {
    width: 1.5rem;                       /* 24px */
    height: 1.5rem;
}
.aegov-check-item.check-lg label,
.aegov-check-group.check-lg label {
    font-size: 1.125rem;
}

/* .aegov-check-group — vertical layout with description text */
.aegov-check-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.aegov-check-group .aegov-check-item {
    align-items: flex-start;
}

.aegov-check-group .aegov-check-item label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    line-height: 1.4;
}

.aegov-check-group .aegov-check-item label .check-description,
.aegov-check-group .aegov-check-item label small {
    color: var(--ae-neutral-500);
    font-size: 0.75rem;
    font-weight: var(--ae-fw-regular);
}

/* List variant — full-row clickable, with hover */
.aegov-check-group.group-list {
    border: 1px solid var(--ae-neutral-100);
    border-radius: var(--ae-radius-md);
    gap: 0;
    padding: 0;
}

.aegov-check-group.group-list .aegov-check-item {
    padding: 0.75rem 1rem;
    margin: 0;
    border-bottom: 1px solid var(--ae-neutral-100);
    transition: background-color var(--ae-transition-fast);
}

.aegov-check-group.group-list .aegov-check-item:last-child {
    border-bottom: none;
}

.aegov-check-group.group-list .aegov-check-item:hover {
    background-color: var(--ae-chrome-50);
}

/* Secondary colour modifier — uses chrome (AEBlack-equivalent).
   Unchecked stays neutral (empty); only :checked switches to chrome. */
.aegov-check-item.check-secondary input:checked,
.aegov-check-group.check-secondary input:checked {
    background-color: var(--ae-chrome);
    border-color: var(--ae-chrome);
}

.aegov-check-item.check-secondary input[type="radio"]:checked {
    background-image: radial-gradient(circle, var(--ae-chrome) 38%, transparent 42%);
    background-color: var(--ae-neutral-0);
}

.input-group-text {
    background-color: var(--ae-neutral-50);
    border-color: var(--ae-neutral-200);
    color: var(--ae-neutral-700);
}

label,
.form-label {
    color: var(--ae-neutral-700);
}

label .required,
.form-required,
.required {
    color: var(--ae-error-700);
}

.invalid-feedback,
.error,
.text-danger {
    color: var(--ae-error-700);
}

/* --- 3.3 Cards (colours only) --- */

.card {
    background-color: var(--ae-neutral-0);
    border-color: var(--ae-neutral-100);
}

.card-header {
    background-color: var(--ae-neutral-50);
    border-bottom-color: var(--ae-neutral-100);
    color: var(--ae-neutral-900);
}

.card-body {
    color: var(--ae-neutral-800);
}

.card-footer {
    background-color: var(--ae-neutral-50);
    border-top-color: var(--ae-neutral-100);
    color: var(--ae-neutral-700);
}

/* Hover lift — opt-in via <a class="card"> or [data-clickable="true"].
   Pages must explicitly tag the card; otherwise no transform / no shadow
   change, so existing static cards are unaffected. */
a.card,
.card[data-clickable="true"] {
    cursor: pointer;
    transition:
        transform var(--ae-transition-base),
        box-shadow var(--ae-transition-base),
        border-color var(--ae-transition-base);
}

a.card:hover,
.card[data-clickable="true"]:hover {
    transform: translateY(-1px);
    box-shadow: var(--ae-shadow-md);
    border-color: var(--ae-neutral-200);
}

a.card:focus-visible,
.card[data-clickable="true"]:focus-visible {
    box-shadow: var(--ae-shadow-glow-primary);
    outline: none;
}

/* --- 3.4 Modals (UAE DS spec) ---
       Padding: 1rem mobile / 1.25rem md / 1.5rem xl (per UAE DS p-4 md:p-5 xl:p-6).
       Class hooks: Bootstrap .modal / .modal-content / .modal-header / .modal-body
       AND UAE DS .aegov-modal / .aegov-modal-wrapper / .aegov-modal-close.
       .modal-serious variant: red accent on the title bar for high-consequence
       confirmation dialogs. */

.modal-content,
.aegov-modal-wrapper {
    background-color: var(--ae-neutral-0);
    border: none;
    box-shadow: var(--ae-shadow-xl);
    border-radius: var(--ae-radius-xl);
    padding: 0;
}

.modal-header,
.aegov-modal-wrapper > h2,
.aegov-modal-wrapper > .aegov-modal-header {
    background-color: var(--ae-neutral-50);
    border-bottom: 1px solid var(--ae-neutral-100);
    padding: 1rem 1.25rem;
}

.modal-title,
.modal-header h5,
.aegov-modal-wrapper > h2 {
    color: var(--ae-neutral-900);
    font-weight: var(--ae-fw-semibold);
    font-size: 1.25rem;
    margin: 0;
}

.modal-body,
.aegov-modal-wrapper > .aegov-modal-body,
.aegov-modal-wrapper > div:not(.aegov-modal-header):not(.aegov-modal-footer) {
    color: var(--ae-neutral-800);
    padding: 1rem 1.25rem;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .modal-header,
    .aegov-modal-wrapper > h2 { padding: 1.25rem 1.5rem; }
    .modal-body,
    .aegov-modal-wrapper > .aegov-modal-body { padding: 1.25rem 1.5rem; }
}

@media (min-width: 1280px) {
    .modal-header,
    .aegov-modal-wrapper > h2 { padding: 1.5rem 1.75rem; }
    .modal-body,
    .aegov-modal-wrapper > .aegov-modal-body { padding: 1.5rem 1.75rem; }
}

.modal-footer,
.aegov-modal-wrapper > .aegov-modal-footer {
    border-top: 1px solid var(--ae-neutral-100);
    padding: 1rem 1.25rem;
    background-color: var(--ae-neutral-50);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.modal-backdrop.show {
    background-color: rgba(14, 15, 18, .55);
    opacity: 1;
}

/* Close button — Bootstrap .btn-close / UAE DS .aegov-modal-close.
   Position: top-2 end-2 (top-right, 0.5rem offset) per UAE DS. */
.btn-close,
.aegov-modal-close {
    color: var(--ae-neutral-500);
    /*background: transparent;*/
    border: none;
    border-radius: var(--ae-radius-sm);
    padding: 0.25rem;
    cursor: pointer;
    transition:
        background-color var(--ae-transition-fast),
        color var(--ae-transition-fast);
}

.btn-close:hover,
.aegov-modal-close:hover {
    color: var(--ae-neutral-900);
    background-color: var(--ae-neutral-100);
}

.aegov-modal-close {
    position: absolute;
    top: 0.5rem;
    inset-inline-end: 0.5rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.aegov-modal-close > svg {
    width: 1.25rem;
    height: 1.25rem;
}

.aegov-modal-wrapper {
    position: relative;
}

/* .modal-serious variant — red accent for destructive/high-consequence
   actions (e.g. "Delete account?", "Cancel application?"). */
.modal-serious .modal-content,
.modal-serious .aegov-modal-wrapper {
    border-top: 4px solid var(--ae-error-700);
}

.modal-serious .modal-header,
.modal-serious .aegov-modal-wrapper > h2 {
    background-color: var(--ae-error-50);
    color: var(--ae-error-800);
    border-bottom-color: var(--ae-error-100);
}

.modal-serious .modal-title,
.modal-serious .aegov-modal-wrapper > h2 {
    color: var(--ae-error-800);
}

/* --- 3.5 Accordion (UAE DS aligned) ---
       Supports both Bootstrap (.accordion / .accordion-button / .accordion-body)
       and UAE DS (.aegov-accordion / .accordion-title / .accordion-content /
       .accordion-content-body) class hooks. Visual treatment matches the
       UAE DS reference: subtle tinted expanded header (chrome-50 bg +
       dark text + 3-px chrome action bottom border), 1.5rem vertical
       padding, chevron rotates 180° on expand. Plus-icon variant via
       [class*="rotate-45"] modifier rotates 45° instead of 180°. */

.accordion,
.aegov-accordion {
    --bs-accordion-btn-focus-border-color: var(--ae-action);
    --bs-accordion-btn-focus-box-shadow: var(--ae-shadow-glow-primary);
    --bs-accordion-active-color: var(--ae-neutral-900);
    --bs-accordion-active-bg: var(--ae-chrome-50);
    margin-bottom: 16px;
}

.accordion-item {
    background-color: var(--ae-neutral-0);
    border: 1px solid var(--ae-neutral-100);
    border-radius: var(--ae-radius-md);
    margin-bottom: 8px;
    overflow: hidden;
}

/* Bootstrap removes top border on non-first items (shared-border layout);
   restore it so each item reads as a separate card. */
.accordion-item:not(:first-of-type) {
    border-top: 1px solid var(--ae-neutral-100);
}

.accordion-item:last-child {
    margin-bottom: 0;
}

.accordion-item:first-of-type,
.accordion-item:last-of-type {
    border-radius: var(--ae-radius-md);
}

/* Header / title — Bootstrap uses .accordion-button, UAE DS uses
   .accordion-title button. Same styling on both. */
.accordion-button,
.aegov-accordion .accordion-title > button,
.aegov-accordion .accordion-title[role="button"] {
    background-color: var(--ae-chrome-50);
    color: var(--ae-neutral-900);
    font-weight: var(--ae-fw-semibold);
    padding: 1rem;
    border: none;
    border-bottom: 3px solid transparent;
    width: 100%;
    text-align: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    transition:
        background-color var(--ae-transition-base),
        color var(--ae-transition-base),
        border-color var(--ae-transition-base);
}

.accordion-button:hover,
.aegov-accordion .accordion-title > button:hover {
    background-color: var(--ae-chrome-50);
    color: var(--ae-action);
}

/* Expanded — subtle tint instead of full action bg. The 3-px chrome
   bottom-border is the action accent, matching the UAE DS reference. */
.accordion-button:not(.collapsed),
.aegov-accordion .accordion-title > button[aria-expanded="true"],
.aegov-accordion .accordion-active .accordion-title > button {
    background-color: var(--ae-chrome-50);
    color: var(--ae-neutral-900);
    /*border-bottom-color: var(--ae-action);*/
    box-shadow: none;
}

.accordion-button:focus-visible,
.aegov-accordion .accordion-title > button:focus-visible {
    box-shadow: var(--ae-shadow-glow-primary);
    outline: none;
    z-index: 1;
}

/* Chevron rotation — Bootstrap rotates ::after, UAE DS rotates the
   inline <svg data-accordion-icon>. Both end at 180° for the default
   chevron variant. */
.accordion-button::after {
    transition: transform var(--ae-transition-base);
}

.accordion-button:not(.collapsed)::after {
    /* Bootstrap already rotates this; we only need to keep the chevron
       dark (no filter inversion now that the bg is light). */
    filter: none;
    transform: rotate(180deg);
}

.aegov-accordion [data-accordion-icon] {
    transition: transform var(--ae-transition-base);
    flex-shrink: 0;
}

.aegov-accordion .accordion-active [data-accordion-icon],
.aegov-accordion .accordion-title > button[aria-expanded="true"] [data-accordion-icon] {
    transform: rotate(180deg);
}

/* Plus-icon variant — UAE DS uses [&_.accordion-active_svg]:rotate-45
   utility. Match with a generic class-includes selector. */
.aegov-accordion[class*="rotate-45"] .accordion-active [data-accordion-icon],
.aegov-accordion[class*="rotate-45"] .accordion-title > button[aria-expanded="true"] [data-accordion-icon] {
    transform: rotate(45deg);
}

/* Body / content — Bootstrap uses .accordion-body, UAE DS uses
   .accordion-content > .accordion-content-body. */
.accordion-body,
.aegov-accordion .accordion-content,
.aegov-accordion .accordion-content > .accordion-content-body {
    background-color: var(--ae-neutral-0);
    color: var(--ae-neutral-800);
    padding: 1.5rem 1.25rem;                 /* UAE DS: 1.5rem vertical */
    line-height: 1.6;
}

.aegov-accordion .accordion-content {
    /* Outer wrapper has no padding — inner .accordion-content-body owns it.
       Bootstrap's .accordion-body is the inner element directly. */
    padding: 0;
}

.aegov-accordion .accordion-content.hidden {
    display: none;
}

/* --- 3.6 Alerts (colours only) --- */

.alert-success {
    background-color: var(--ae-success-100);
    color: var(--ae-success-700);
    border-inline-start: 4px solid var(--ae-success-700);
}
.alert-danger {
    background-color: var(--ae-error-100);
    color: var(--ae-error-700);
    border-inline-start: 4px solid var(--ae-error-700);
}
.alert-warning {
    background-color: var(--ae-warning-100);
    color: var(--ae-warning-700);
    border-inline-start: 4px solid var(--ae-warning-700);
}
.alert-info {
    background-color: var(--ae-info-100);
    color: var(--ae-info-700);
    border-inline-start: 4px solid var(--ae-info-700);
}
.alert-primary {
    background-color: var(--ae-chrome-50);
    color: var(--ae-action-active);
    border-inline-start: 4px solid var(--ae-action);
}
.alert-secondary {
    background-color: var(--ae-neutral-100);
    color: var(--ae-neutral-900);
    border-inline-start: 4px solid var(--ae-chrome);
}

/* UAE DS alert-solid variants (opt-in via .alert.alert-solid).
   Stronger visual emphasis — solid semantic background + white text.
   No left border (semantic colour fills the whole surface). */
.alert.alert-solid {
    border-inline-start: none;
    color: var(--ae-neutral-0);
}
.alert.alert-solid.alert-success { background-color: var(--ae-success-700); color: var(--ae-neutral-0); }
.alert.alert-solid.alert-danger  { background-color: var(--ae-error-700);   color: var(--ae-neutral-0); }
.alert.alert-solid.alert-warning { background-color: var(--ae-warning-700); color: var(--ae-neutral-0); }
.alert.alert-solid.alert-info    { background-color: var(--ae-info-700);    color: var(--ae-neutral-0); }
.alert.alert-solid.alert-primary { background-color: var(--ae-action);      color: var(--ae-neutral-0); }
.alert.alert-solid.alert-secondary { background-color: var(--ae-chrome);    color: var(--ae-neutral-0); }

.alert.alert-solid a,
.alert.alert-solid .alert-link {
    color: var(--ae-neutral-0);
    text-decoration: underline;
}

.alert.alert-solid .btn-close,
.alert.alert-solid [aria-label="Close"] {
    color: var(--ae-neutral-0);
    filter: brightness(0) invert(1);
}

/* --- 3.7 Badges (background colours only) --- */

.bg-primary,
.badge-primary {
    background-color: var(--ae-chrome-50) !important;
    color: var(--ae-chrome-dark) !important;
}

.bg-secondary,
.badge-secondary {
    background-color: var(--ae-chrome) !important;
    color: var(--ae-neutral-0) !important;
}

.bg-success,
.badge-success {
    background-color: var(--ae-success-700) !important;
    color: var(--ae-neutral-0) !important;
}

.bg-danger,
.badge-danger {
    background-color: var(--ae-error-700) !important;
    color: var(--ae-neutral-0) !important;
}

.bg-warning,
.badge-warning {
    background-color: var(--ae-warning-700) !important;
    color: var(--ae-neutral-0) !important;
}

.bg-info,
.badge-info {
    background-color: var(--ae-info-700) !important;
    color: var(--ae-neutral-0) !important;
}

/* --- 3.8 Nav (tabs / pills) — colours only --- */

.nav-tabs {
    border-bottom-color: var(--ae-neutral-200);
}

.nav-tabs .nav-link {
    color: var(--ae-neutral-700);
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    transition:
        color var(--ae-transition-fast),
        border-color var(--ae-transition-fast);
}

.nav-tabs .nav-link:hover {
    color: var(--ae-action);
    border-bottom-color: var(--ae-chrome-200);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--ae-neutral-900);
    background-color: transparent;
    border-bottom-color: var(--ae-action);
}

.nav-pills .nav-link {
    color: var(--ae-neutral-700);
}

.nav-pills .nav-link:hover {
    background-color: var(--ae-chrome-50);
    color: var(--ae-action);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--ae-action);
    color: var(--ae-neutral-0);
}

/* --- 3.9 Dropdowns (colours only) --- */

.dropdown-menu {
    background-color: var(--ae-neutral-0);
    border-color: var(--ae-neutral-100);
    box-shadow: var(--ae-shadow-md);
}

.dropdown-item {
    color: var(--ae-neutral-800);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ae-chrome-50);
    color: var(--ae-action);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--ae-action);
    color: var(--ae-neutral-0);
}

.dropdown-divider {
    border-top-color: var(--ae-neutral-100);
}

/* --- 3.10 Pagination (UAE DS spec) ---
       UAE DS classes: .aegov-pagination wrapper, .aegov-pagination-page,
       .aegov-pagination-current (with aria-current="page"),
       .aegov-pagination-previous, .aegov-pagination-next,
       .aegov-pagination-extend (ellipsis), .aegov-pagination-first/-last.
       Bootstrap classes (.pagination + .page-link + .page-item) aliased
       to the same look. */

.pagination,
.aegov-pagination {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-link,
.aegov-pagination-page,
.aegov-pagination-previous,
.aegov-pagination-next,
.aegov-pagination-first,
.aegov-pagination-last {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.625rem;
    color: var(--ae-neutral-700);
    background-color: var(--ae-neutral-0);
    border: 1px solid var(--ae-neutral-200);
    border-radius: var(--ae-radius-md);
    font-size: 0.875rem;
    font-weight: var(--ae-fw-medium);
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--ae-transition-fast),
        color var(--ae-transition-fast),
        border-color var(--ae-transition-fast);
}

.page-link:hover,
.aegov-pagination-page:hover,
.aegov-pagination-previous:hover,
.aegov-pagination-next:hover,
.aegov-pagination-first:hover,
.aegov-pagination-last:hover {
    background-color: var(--ae-chrome-50);
    color: var(--ae-action);
    border-color: var(--ae-chrome-200);
}

.page-link:focus-visible,
.aegov-pagination-page:focus-visible,
.aegov-pagination-previous:focus-visible,
.aegov-pagination-next:focus-visible {
    box-shadow: var(--ae-shadow-glow-primary);
    outline: none;
    z-index: 1;
}

.page-item.active .page-link,
.aegov-pagination-current,
.aegov-pagination [aria-current="page"] {
    background-color: var(--ae-action) !important;
    color: var(--ae-neutral-0) !important;
    border-color: var(--ae-action) !important;
}

.page-item.disabled .page-link,
.aegov-pagination-previous[aria-disabled="true"],
.aegov-pagination-next[aria-disabled="true"],
.aegov-pagination-first[aria-disabled="true"],
.aegov-pagination-last[aria-disabled="true"] {
    background-color: var(--ae-neutral-50);
    color: var(--ae-neutral-400);
    border-color: var(--ae-neutral-100);
    cursor: not-allowed;
    pointer-events: none;
}

/* Ellipsis "…" between page numbers */
.aegov-pagination-extend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    color: var(--ae-neutral-500);
    font-weight: var(--ae-fw-bold);
    user-select: none;
}

/* Previous / Next directional arrows — flip in RTL */
.aegov-pagination-previous svg,
.aegov-pagination-next svg,
.aegov-pagination-first svg,
.aegov-pagination-last svg {
    width: 1rem;
    height: 1rem;
    color: currentColor;
}

[dir="rtl"] .aegov-pagination-previous svg,
[dir="rtl"] .aegov-pagination-next svg,
.rtl\:rotate-180 {
    transform: rotate(180deg);
}

/* Smaller / larger page-number modifiers (UAE DS spec).
   Pages further from the current page get a subtler treatment so the
   active page reads as the focal point. Used in long pagination strips
   like "1 ... 4 5 [6] 7 8 ... 99". */
.aegov-pagination-smaller,
.aegov-pagination-larger {
    color: var(--ae-neutral-500);
    background-color: transparent;
    border-color: var(--ae-neutral-100);
    font-weight: var(--ae-fw-regular);
}

.aegov-pagination-smaller:hover,
.aegov-pagination-larger:hover {
    background-color: var(--ae-chrome-50);
    color: var(--ae-action);
    border-color: var(--ae-chrome-200);
}

/* Mobile / desktop responsive split (UAE DS uses Tailwind utilities).
   Mobile shows simplified Previous/Next + "Page X of Y"; desktop shows
   full numbered strip with ellipsis. */
@media (min-width: 640px) {
    .sm\:hidden,
    .aegov-pagination-mobile {
        display: none !important;
    }
    .max-sm\:hidden,
    .aegov-pagination-desktop {
        display: flex !important;
    }
}

@media (max-width: 639.98px) {
    .max-sm\:hidden,
    .aegov-pagination-desktop {
        display: none !important;
    }
    .sm\:hidden,
    .aegov-pagination-mobile {
        display: flex !important;
    }
}

/* "Page X of Y" mobile info text */
.aegov-pagination-info,
.aegov-pagination .pagination-info {
    color: var(--ae-neutral-700);
    font-size: 0.875rem;
    font-weight: var(--ae-fw-medium);
    padding: 0 0.75rem;
}

/* --- 3.11 Breadcrumb --- */

.breadcrumb-item {
    color: var(--ae-neutral-500);
}

.breadcrumb-item a {
    color: var(--ae-action);
}

.breadcrumb-item a:hover {
    color: var(--ae-action-hover);
}

.breadcrumb-item.active {
    color: var(--ae-neutral-900);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--ae-neutral-400);
}

/* --- 3.12 Tables --- */

.table {
    color: var(--ae-neutral-800);
    border-color: var(--ae-neutral-100);
    --bs-table-hover-bg: var(--ae-chrome-50);
}

.table thead th {
    background-color: var(--ae-neutral-50);
    color: var(--ae-neutral-700);
    border-bottom-color: var(--ae-neutral-200);
}

.table tbody td {
    border-color: var(--ae-neutral-100);
    color: var(--ae-neutral-800);
}

.table-striped tbody tr:nth-of-type(odd) > * {
    background-color: var(--ae-neutral-50);
}

.table-hover tbody tr:hover > * {
    background-color: var(--ae-chrome-50);
}

/* --- 3.13 Progress --- */

.progress {
    background-color: var(--ae-neutral-100);
}

.progress-bar {
    background-color: var(--ae-action);
}

/* --- 3.14 List group --- */

.list-group-item {
    border-color: var(--ae-neutral-100);
    color: var(--ae-neutral-800);
}

.list-group-item.active {
    background-color: var(--ae-action);
    border-color: var(--ae-action);
    color: var(--ae-neutral-0);
}

.list-group-item.disabled {
    color: var(--ae-neutral-400);
    background-color: var(--ae-neutral-50);
}

/* --- 3.15 Tooltip (UAE DS spec) ---
       Dark navy bg + white text + small border-radius + max-width.
       Class hooks: Bootstrap .tooltip / Kendo .k-tooltip / UAE DS .aegov-tooltip.
       Placement variants: top (default), right, bottom, left — controlled by
       data-tooltip-placement / data-popper-placement / .bs-tooltip-* / Kendo class. */

.tooltip,
.aegov-tooltip,
.k-tooltip {
    z-index: 10;
    font-family: var(--ae-font-sans);
    font-size: 0.75rem;
    font-weight: var(--ae-fw-medium);
    line-height: 1.4;
    pointer-events: none;
    transition:
        opacity var(--ae-transition-base),
        transform var(--ae-transition-base);
}

.tooltip-inner,
.aegov-tooltip,
.k-tooltip {
    background-color: var(--ae-neutral-900) !important;   /* dark navy */
    color: var(--ae-neutral-0) !important;
    border: none !important;
    border-radius: var(--ae-radius-sm) !important;
    padding: 0.375rem 0.625rem !important;
    max-width: 16rem;
    box-shadow: var(--ae-shadow-md);
    text-align: start;
}

/* Standalone .aegov-tooltip — UAE DS structure includes the arrow as a
   .tooltip-arrow child element (popper-driven). */
.aegov-tooltip {
    display: inline-block;
    position: absolute;
}

.aegov-tooltip .tooltip-arrow,
.aegov-tooltip [data-popper-arrow] {
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--ae-neutral-900);
    transform: rotate(45deg);
    position: absolute;
}

/* Bootstrap arrow placement */
.tooltip .tooltip-arrow::before { border-top-color: var(--ae-neutral-900); }
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before { border-right-color: var(--ae-neutral-900); }
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before { border-bottom-color: var(--ae-neutral-900); }
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before { border-left-color: var(--ae-neutral-900); }

/* Kendo tooltip — same dark-navy palette */
.k-tooltip {
    border: none !important;
}

.k-tooltip .k-callout {
    color: var(--ae-neutral-900) !important;
}

.k-tooltip-content {
    color: var(--ae-neutral-0) !important;
}

/* Animation entrance */
.tooltip.show,
.aegov-tooltip.show,
.k-tooltip.k-animation-container-shown {
    opacity: 1;
}

/* --- 3.16 Popover --- */

.popover {
    background-color: var(--ae-neutral-0);
    border-color: var(--ae-neutral-100);
    box-shadow: var(--ae-shadow-md);
}

.popover-header {
    background-color: var(--ae-neutral-50);
    color: var(--ae-neutral-900);
    border-bottom-color: var(--ae-neutral-100);
}

.popover-body {
    color: var(--ae-neutral-800);
}

/* --- 3.17 Spinner --- */

.spinner-border,
.spinner-grow {
    color: var(--ae-action);
}

/* --- 3.18 Toast (Bootstrap) --- */

.toast {
    background-color: var(--ae-neutral-0);
    border-color: var(--ae-neutral-100);
    box-shadow: var(--ae-shadow-lg);
}

.toast-header {
    background-color: var(--ae-neutral-50);
    color: var(--ae-neutral-900);
    border-bottom-color: var(--ae-neutral-100);
}

.toast-body {
    color: var(--ae-neutral-800);
}

/* ============================================================
 * 4. Toastr (third-party — beats toastr.min.css)
 * ============================================================ */

#toast-container > .toast-success {
    background-color: var(--ae-success-100) !important;
    color: var(--ae-success-700) !important;
    border-inline-start: 4px solid var(--ae-success-700);
    /* Green tick icon (replaces toastr default white checkmark on green bg) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F663C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 7'/></svg>") !important;
    background-position: 15px center !important;
    background-repeat: no-repeat !important;
    background-size: 24px 24px !important;
}

#toast-container > .toast-error {
    background-color: var(--ae-error-100) !important;
    color: var(--ae-error-700) !important;
    border-inline-start: 4px solid var(--ae-error-700);
    /* Red cross icon (replaces toastr default white X on red bg) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B52520' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='6' y1='6' x2='18' y2='18'/><line x1='18' y1='6' x2='6' y2='18'/></svg>") !important;
    background-position: 15px center !important;
    background-repeat: no-repeat !important;
    background-size: 24px 24px !important;
}

#toast-container > .toast-warning {
    background-color: var(--ae-warning-100) !important;
    color: var(--ae-warning-700) !important;
    border-inline-start: 4px solid var(--ae-warning-700);
    /* Orange triangle exclamation icon */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B2550B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 L22 21 H2 Z'/><line x1='12' y1='10' x2='12' y2='14'/><circle cx='12' cy='17.5' r='0.6' fill='%23B2550B' stroke='none'/></svg>") !important;
    background-position: 15px center !important;
    background-repeat: no-repeat !important;
    background-size: 24px 24px !important;
}

#toast-container > .toast-info {
    background-color: var(--ae-info-100) !important;
    color: var(--ae-info-700) !important;
    border-inline-start: 4px solid var(--ae-info-700);
    /* Blue info icon */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003CFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='11' x2='12' y2='17'/><circle cx='12' cy='7.5' r='0.6' fill='%23003CFF' stroke='none'/></svg>") !important;
    background-position: 15px center !important;
    background-repeat: no-repeat !important;
    background-size: 24px 24px !important;
}
#toast-container > .toast-success .toast-progress { background-color: var(--ae-success-700); }
#toast-container > .toast-error   .toast-progress { background-color: var(--ae-error-700); }
#toast-container > .toast-warning .toast-progress { background-color: var(--ae-warning-700); }
#toast-container > .toast-info    .toast-progress { background-color: var(--ae-info-700); }

/* ============================================================
 * 5. Back-office shell — chrome in #344b61
 * ============================================================ */

#page-topbar {
    background-color: var(--ae-chrome) !important;
    background-image: linear-gradient(
        90deg,
        var(--ae-chrome-dark) 0%,
        var(--ae-chrome) 100%
    ) !important;
    box-shadow: var(--ae-shadow-sm);
}

#page-topbar h3,
#page-topbar h5,
#page-topbar a,
#page-topbar .text-white {
    color: var(--ae-neutral-0) !important;
    text-decoration: none;
}

#vertical-menu-btn {
    background-color: transparent;
    color: var(--ae-neutral-0);
    border: none;
}
#vertical-menu-btn:hover { color: rgba(255, 255, 255, .75); }
#vertical-menu-btn:focus-visible { box-shadow: var(--ae-shadow-glow-primary); }

.vertical-menu {
    background-color: var(--ae-chrome-50) !important;
    border-inline-end: 1px solid var(--ae-chrome-100);
}

.vertical-menu .user-img img {
    border-color: var(--ae-action) !important;
}

.user-wid {
    background-color: var(--ae-chrome-50);
}

.user-wid hr {
    border-top-color: var(--ae-neutral-100);
    opacity: 1;
}

/* Sidebar links — base layout
   The active indicator is rendered via an absolute-positioned ::before so
   activating an item doesn't shift the text horizontally. The inline
   <style> block in BackOfficeLeftBar.cshtml owns the padding (via
   !important), so we don't fight that here. */
#sidebar-menu ul li a {
    position: relative;
    color: var(--ae-neutral-700);
    text-decoration: none;
    border-radius: var(--ae-radius-sm);
    transition:
        background-color var(--ae-transition-fast),
        color var(--ae-transition-fast);
}

/* The 4-px active indicator — sits flush to the inline-start edge,
   transparent until the link is active or hovered. */
#sidebar-menu ul li a::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background-color: transparent;
    border-radius: 0 var(--ae-radius-sm) var(--ae-radius-sm) 0;
    transition: background-color var(--ae-transition-fast);
    pointer-events: none;
}

#sidebar-menu ul li a:hover {
    color: var(--ae-action);
    background-color: var(--ae-chrome-100);   /* one step darker than the new chrome-50 sidebar surface */
}

#sidebar-menu ul li a:hover::before {
    background-color: var(--ae-chrome-200);
}

#sidebar-menu ul li a:focus-visible {
    outline: none;
    box-shadow: var(--ae-shadow-glow-primary);
    z-index: 1;
}

/* Active page highlight — applied by udpHighlightCurrentNav() in UDP.js
   when window.location.pathname matches the link's href. Bootstrap and
   metismenu also use these classes for sub-menu expand state.
   aria-current="page" is the WAI-ARIA marker JS sets for screen
   readers; we mirror the same visuals on it. */
#sidebar-menu .active > a,
#sidebar-menu li.active > a,
#sidebar-menu a.active,
#sidebar-menu a[aria-current="page"],
.metismenu .mm-active > a,
#sidebar-menu li.mm-active > a {
    color: var(--ae-action) !important;
    background-color: var(--ae-chrome-100) !important;   /* darker than chrome-50 sidebar so the active row pops */
    font-weight: var(--ae-fw-semibold) !important;
}

#sidebar-menu .active > a::before,
#sidebar-menu li.active > a::before,
#sidebar-menu a.active::before,
#sidebar-menu a[aria-current="page"]::before,
.metismenu .mm-active > a::before,
#sidebar-menu li.mm-active > a::before {
    background-color: var(--ae-action) !important;
}

/* Icon colour follows hover/active state */
#sidebar-menu ul li a i,
#sidebar-menu ul li a .ph,
#sidebar-menu ul li a .fa,
#sidebar-menu ul li a .fas,
#sidebar-menu ul li a .far,
#sidebar-menu ul li a .fab {
    color: var(--ae-neutral-500);
    transition: color var(--ae-transition-fast);
}

#sidebar-menu ul li a:hover i,
#sidebar-menu ul li a:hover .ph,
#sidebar-menu ul li a:hover .fa,
#sidebar-menu ul li a:hover .fas,
#sidebar-menu ul li a:hover .far,
#sidebar-menu ul li a:hover .fab {
    color: var(--ae-action);
}

#sidebar-menu .active > a i,
#sidebar-menu .active > a .ph,
#sidebar-menu li.active > a i,
#sidebar-menu li.active > a .ph,
.metismenu .mm-active > a i,
.metismenu .mm-active > a .ph,
#sidebar-menu li.mm-active > a i,
#sidebar-menu li.mm-active > a .ph {
    color: var(--ae-action) !important;
}

/* Description sub-text under the main label — tinted neutral, picks up
   the action colour when active so the whole row reads as one unit. */
#sidebar-menu ul li a .text-secondary,
#sidebar-menu ul li a div.small {
    color: var(--ae-neutral-500) !important;
    transition: color var(--ae-transition-fast);
}

#sidebar-menu .active > a .text-secondary,
#sidebar-menu .active > a div.small,
#sidebar-menu li.active > a .text-secondary,
#sidebar-menu li.active > a div.small,
.metismenu .mm-active > a .text-secondary,
.metismenu .mm-active > a div.small,
#sidebar-menu li.mm-active > a .text-secondary,
#sidebar-menu li.mm-active > a div.small {
    color: var(--ae-action) !important;
    opacity: 0.75;
}

/* Spacing between top-level <li> items — small breathing room without
   changing the per-item padding the inline <style> sets. */
#sidebar-menu ul.metismenu > li {
    margin-bottom: 2px;
}

.submenu-left {
    background-color: var(--ae-chrome-50) !important;
}

.page-title-box h4,
.page-title-box .page-title {
    color: var(--ae-neutral-0) !important;
}

.page-title-box a       { color: var(--ae-neutral-0) !important; }
.page-title-box a:hover { color: rgba(255, 255, 255, .75) !important; }

#workspaceDropDown.dropdown-menu {
    background-color: var(--ae-neutral-0);
    border-color: var(--ae-neutral-100);
    box-shadow: var(--ae-shadow-md);
}

#workspaceDropDown .dropdown-item {
    color: var(--ae-neutral-800);
}
#workspaceDropDown .dropdown-item:hover {
    background-color: var(--ae-chrome-50);
    color: var(--ae-action) !important;
}

.footer {
    background-color: var(--ae-neutral-50);
    border-top-color: var(--ae-neutral-100);
    color: var(--ae-neutral-500);
}

/* Layout-wrapper background gradient (existing UDP-internal selector) */
body[data-layout="detached"] #layout-wrapper::before {
    background: linear-gradient(
        to left,
        var(--ae-chrome),
        var(--ae-chrome-dark)
    ) !important;
}

@media (max-width: 991.98px) {
    body[data-topbar="colored"] #page-topbar {
        background: linear-gradient(
            to left,
            var(--ae-chrome),
            var(--ae-chrome-dark)
        ) !important;
    }
}

/* ============================================================
 * 6. Website chrome (_Website.cshtml)
 * ============================================================ */

body > main {
    background-color: var(--ae-neutral-0);
}

header.s4-notdlg {
    background-color: var(--ae-neutral-0);
}

.menu1 {
    background-color: var(--ae-neutral-0);
}

.menu2 {
    background-color: var(--ae-neutral-50);
    border-top: 1px solid var(--ae-neutral-100);
    border-bottom: 1px solid var(--ae-neutral-100);
}

.useraccess .nav-link {
    color: var(--ae-action) !important;
}

.useraccess .nav-link:hover {
    color: var(--ae-action-hover) !important;
}

.useraccess .nav-item .dropdown-menu {
    background-color: var(--ae-neutral-0) !important;
    border-color: var(--ae-neutral-100);
    box-shadow: var(--ae-shadow-md);
}

.divcookie {
    background-color: var(--ae-neutral-950) !important;
    color: var(--ae-neutral-0) !important;
}

.divcookie h4,
.divcookie p,
.divcookie span {
    color: var(--ae-neutral-0) !important;
}

.page-footer,
footer.page-footer {
    background-color: var(--ae-neutral-50);
    color: var(--ae-neutral-700);
    border-top: 1px solid var(--ae-neutral-100);
}

.page-footer h5,
.GcaaAboutFooter,
.GcaaUsingFooter,
.GcaaInfoSupportFooter,
.GcaaReferencesFooter {
    color: var(--ae-neutral-900) !important;
}

.page-footer a,
.page-footer ul li a {
    color: var(--ae-neutral-700);
}

.page-footer a:hover {
    color: var(--ae-action);
}

footer .ph,
footer .ph-fill {
    color: var(--ae-neutral-500) !important;
    transition: color var(--ae-transition-fast);
}

footer .ph:hover,
footer a:hover .ph {
    color: var(--ae-action) !important;
}

.divThemeSettings .modal-content,
.settingModal {
    background-color: var(--ae-neutral-0);
}

/* ============================================================
 * 7. bs-stepper wizard — colours only
 * ============================================================ */

.bs-stepper-header .step .step-trigger {
    color: var(--ae-neutral-700);
    transition: background-color var(--ae-transition-fast);
}

.bs-stepper-header .step .step-trigger:hover {
    background-color: var(--ae-chrome-50);
}

.bs-stepper-circle {
    background-color: var(--ae-neutral-0);
    color: var(--ae-neutral-700);
    border: 1px solid var(--ae-neutral-300);
    transition:
        background-color var(--ae-transition-base),
        border-color var(--ae-transition-base),
        color var(--ae-transition-base);
}

.bs-stepper .step.active .bs-stepper-circle {
    background-color: var(--ae-action);
    border-color: var(--ae-action);
    color: var(--ae-neutral-0);
    box-shadow: var(--ae-shadow-glow-primary);
}

.bs-stepper .step.complete .bs-stepper-circle,
.bs-stepper .step.crossed .bs-stepper-circle {
    background-color: var(--ae-success-700);
    border-color: var(--ae-success-700);
    color: var(--ae-neutral-0);
}

.bs-stepper-line,
.bs-stepper .line {
    background-color: var(--ae-neutral-200);
}

.bs-stepper .step.complete + .line,
.bs-stepper .step.complete ~ .line {
    background-color: var(--ae-action);
}

.bs-stepper-content,
.bs-stepper-pane {
    background-color: var(--ae-neutral-0);
}

/* ============================================================
 * 8. SmartAIInput — colours only
 * ============================================================ */

.smart-ai-input-container,
.SmartAIInput-Wrapper {
    background-color: var(--ae-neutral-0);
    border-color: var(--ae-neutral-200);
    transition:
        border-color var(--ae-transition-base),
        box-shadow var(--ae-transition-base);
}

.smart-ai-input-container:focus-within,
.SmartAIInput-Wrapper:focus-within {
    border-color: var(--ae-action);
    box-shadow: var(--ae-shadow-glow-primary);
}

.smart-ai-input-toolbar {
    background-color: var(--ae-neutral-50);
    border-bottom-color: var(--ae-neutral-100);
}

.smart-ai-input-button {
    background-color: var(--ae-chrome-50);
    color: var(--ae-action-active);
    border: none;
}
.smart-ai-input-button:hover {
    background-color: var(--ae-chrome-100);
}

/* ============================================================
 * 9. Selective Kendo — colours only (no height overrides)
 * ============================================================ */

/* --- 9.1 Kendo buttons --- */

.k-button {
    transition:
        background-color var(--ae-transition-base),
        border-color var(--ae-transition-base),
        box-shadow var(--ae-transition-base),
        color var(--ae-transition-base);
}

.k-button-solid-primary,
.k-button-solid-base.k-primary {
    background-color: var(--ae-action) !important;
    border-color: var(--ae-action) !important;
    color: var(--ae-neutral-0) !important;
}

.k-button-solid-primary:hover,
.k-button-solid-base.k-primary:hover {
    background-color: var(--ae-action-hover) !important;
    border-color: var(--ae-action-hover) !important;
    color: var(--ae-neutral-0) !important;
}

.k-button-solid-primary:focus-visible,
.k-button-solid-base.k-primary:focus-visible {
    box-shadow: var(--ae-shadow-glow-primary) !important;
    outline: none;
}

.k-button-outline-primary {
    background-color: var(--ae-neutral-0) !important;
    color: var(--ae-action) !important;
    border-color: var(--ae-action) !important;
}
.k-button-outline-primary:hover {
    background-color: var(--ae-chrome-50) !important;
    color: var(--ae-action-hover) !important;
}

.k-button-flat-primary {
    background-color: transparent !important;
    color: var(--ae-action) !important;
    border-color: transparent !important;
}
.k-button-flat-primary:hover {
    background-color: var(--ae-chrome-50) !important;
}

/* --- 9.2 Kendo inputs (colours only) --- */

.k-input,
.k-picker,
.k-input-solid,
.k-textbox,
.k-numerictextbox,
.k-datepicker,
.k-timepicker,
.k-datetimepicker,
.k-combobox,
.k-dropdownlist,
.k-multiselect {
    border-color: var(--ae-neutral-400) !important; /* a11y: SC 1.4.11 — raised from neutral-200 (1.64:1) to meet 3:1 non-text contrast */
    background-color: var(--ae-neutral-0) !important;
    color: var(--ae-neutral-900) !important;
    transition:
        border-color var(--ae-transition-base),
        box-shadow var(--ae-transition-base);
}

.k-input:focus-within,
.k-picker:focus-within,
.k-input.k-focus,
.k-picker.k-focus {
    border-color: var(--ae-action) !important;
    box-shadow: var(--ae-shadow-glow-primary) !important;
    outline: none;
}

.k-input-button,
.k-select {
    color: var(--ae-action) !important;
}

/* --- 9.3 Kendo lists / popups --- */

.k-list-content,
.k-popup .k-list {
    background-color: var(--ae-neutral-0) !important;
    border-color: var(--ae-neutral-100) !important;
    box-shadow: var(--ae-shadow-md) !important;
}

.k-list-item {
    color: var(--ae-neutral-800) !important;
}

.k-list-item:hover,
.k-list-item.k-hover {
    background-color: var(--ae-chrome-50) !important;
    color: var(--ae-action) !important;
}

.k-list-item.k-selected,
.k-list-item.k-state-selected {
    background-color: var(--ae-action) !important;
    color: var(--ae-neutral-0) !important;
}

/* --- 9.4 Kendo grid --- */

/* .k-grid {
    border-color: var(--ae-neutral-100) !important;
} */

.k-grid .k-grid-header,
.k-grid .k-grid-header th.k-header {
    background-color: var(--ae-neutral-50) !important;
    color: var(--ae-neutral-700) !important;
    border-bottom-color: var(--ae-neutral-200) !important;
}

.k-grid .k-grid-content tr:hover,
.k-grid tr.k-state-hover {
    background-color: var(--ae-chrome-50) !important;
}

.k-grid tr.k-selected,
.k-grid tr.k-state-selected {
    background-color: var(--ae-chrome-50) !important;
    color: var(--ae-neutral-900) !important;
    box-shadow: inset 3px 0 0 var(--ae-action);
}

.k-grid td {
    border-color: var(--ae-neutral-100) !important;
}

/* Anchor tags rendered inside grid cells (e.g. action links, deep-link
   IDs, file names) follow the active theme's action colour. Bootstrap's
   default link blue would otherwise leak through. */
.k-grid a,
.k-grid td a,
.k-grid tbody a,
.k-grid .k-grid-content a {
    color: var(--ae-action) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.k-grid a:hover,
.k-grid td a:hover,
.k-grid tbody a:hover,
.k-grid .k-grid-content a:hover {
    color: var(--ae-action-hover) !important;
}

/* Visited / focus states — keep readable and themed */
.k-grid a:visited,
.k-grid td a:visited {
    color: var(--ae-action) !important;
}

.k-grid a:focus-visible,
.k-grid td a:focus-visible {
    outline: none;
    box-shadow: var(--ae-shadow-glow-primary);
    border-radius: var(--ae-radius-sm);
}

/* Same treatment inside selected rows so links stay readable on the
   chrome-50 selection background (chrome-50 + chrome action = AA pass). */
.k-grid tr.k-selected a,
.k-grid tr.k-state-selected a {
    color: var(--ae-action-hover) !important;
}

/* Mirror for other Kendo container widgets that often hold links */
.k-listview a,
.k-treeview a,
.k-window-content a,
.k-dialog a {
    color: var(--ae-action) !important;
}

.k-listview a:hover,
.k-treeview a:hover,
.k-window-content a:hover,
.k-dialog a:hover {
    color: var(--ae-action-hover) !important;
}

/* --- 9.5 Kendo pager --- */

/* Kendo pager — repainted to match UAE DS .aegov-pagination spec.
   Each .k-link in the page-number list mirrors the .aegov-pagination-page
   button style (min-width 2.25rem, 2.25rem height, md radius). */
.k-pager-wrap,
.k-pager {
    background-color: var(--ae-neutral-0) !important;
    border-top: 1px solid var(--ae-neutral-100) !important;
    color: var(--ae-neutral-700) !important;
    padding: 0.5rem 0.75rem !important;
    gap: 0.25rem;
}

.k-pager-numbers,
.k-pager-numbers-wrap {
    gap: 0.25rem;
}

.k-pager .k-link,
.k-pager-numbers .k-link,
.k-pager-nav .k-link,
.k-pager-first .k-link,
.k-pager-last .k-link {
    min-width: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0 0.625rem !important;
    color: var(--ae-neutral-700) !important;
    background-color: var(--ae-neutral-0) !important;
    border: 1px solid var(--ae-neutral-200) !important;
    border-radius: var(--ae-radius-md) !important;
    font-size: 0.875rem !important;
    font-weight: var(--ae-fw-medium) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color var(--ae-transition-fast),
        color var(--ae-transition-fast),
        border-color var(--ae-transition-fast);
}

.k-pager .k-link:hover,
.k-pager-numbers .k-link:hover,
.k-pager-nav .k-link:hover {
    background-color: var(--ae-chrome-50) !important;
    color: var(--ae-action) !important;
    border-color: var(--ae-chrome-200) !important;
}

.k-pager .k-link:focus-visible {
    box-shadow: var(--ae-shadow-glow-primary) !important;
    outline: none !important;
    z-index: 1;
}

.k-pager-numbers .k-link.k-state-selected,
.k-pager-numbers .k-link.k-selected,
.k-pager .k-link.k-state-selected,
.k-pager .k-link.k-selected {
    background-color: var(--ae-action) !important;
    color: var(--ae-neutral-0) !important;
    border-color: var(--ae-action) !important;
}

.k-pager .k-link.k-state-disabled,
.k-pager .k-link.k-disabled {
    background-color: var(--ae-neutral-50) !important;
    color: var(--ae-neutral-400) !important;
    border-color: var(--ae-neutral-100) !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Page-size dropdown + "items per page" selector inside the pager */
.k-pager .k-dropdownlist,
.k-pager .k-picker,
.k-pager-sizes .k-dropdownlist {
    border-color: var(--ae-neutral-200) !important;
    border-radius: var(--ae-radius-md) !important;
    height: 2.25rem !important;
    background-color: var(--ae-neutral-0) !important;
}

.k-pager-info {
    /* SC 1.4.3 — neutral-500 (#5F646D) tested at ~3.9:1 on tinted card
       backgrounds in some SortSite reports. neutral-700 (#3E4046) lands
       at ~10:1 on white and ~9.4:1 on chrome-50 tints — passes AA + AAA. */
    color: var(--ae-neutral-700) !important;
    font-size: 0.875rem !important;
}

/* --- 9.6 Kendo window / dialog --- */

.k-window,
.k-dialog {
    background-color: var(--ae-neutral-0) !important;
    border: none !important;
    box-shadow: var(--ae-shadow-xl) !important;
}

.k-window-titlebar,
.k-dialog-titlebar {
    background-color: var(--ae-neutral-50) !important;
    color: var(--ae-neutral-900) !important;
    border-bottom-color: var(--ae-neutral-100) !important;
}

/* --- 9.7 Kendo tabstrip --- */

.k-tabstrip-items {
    border-bottom-color: var(--ae-neutral-200) !important;
}

.k-tabstrip-items .k-item {
    color: var(--ae-neutral-700) !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    background-color: transparent !important;
}

.k-tabstrip-items .k-item.k-state-active,
.k-tabstrip-items .k-item.k-active {
    color: var(--ae-neutral-900) !important;
    background-color: transparent !important;
    border-bottom-color: var(--ae-action) !important;
}

/* --- 9.8 Kendo editor --- */

.k-editor {
    border-color: var(--ae-neutral-200) !important;
}

.k-editor:focus-within {
    border-color: var(--ae-action) !important;
    box-shadow: var(--ae-shadow-glow-primary) !important;
}

.k-editor .k-toolbar,
.k-editor-toolbar {
    background-color: var(--ae-neutral-50) !important;
    border-bottom-color: var(--ae-neutral-100) !important;
}

/* --- 9.9 Kendo calendar --- */

.k-calendar .k-state-selected,
.k-calendar .k-selected,
.k-calendar td.k-selected .k-link {
    background-color: var(--ae-action) !important;
    color: var(--ae-neutral-0) !important;
}

.k-calendar .k-today,
.k-calendar td.k-today .k-link {
    box-shadow: inset 0 0 0 1px var(--ae-action);
    color: var(--ae-action) !important;
}

/* --- 9.10 Kendo checkbox / radio --- */

.k-checkbox,
.k-radio {
    border-color: var(--ae-neutral-400) !important; /* a11y: SC 1.4.11 — raised from neutral-300 (2.43:1) to meet 3:1 non-text contrast */
    background-color: var(--ae-neutral-0) !important;
}

.k-checkbox:checked,
.k-radio:checked {
    background-color: var(--ae-action) !important;
    border-color: var(--ae-action) !important;
}

.k-checkbox:focus-visible,
.k-radio:focus-visible {
    box-shadow: var(--ae-shadow-glow-primary) !important;
}

/* --- 9.11 Kendo Scheduler --- */

.k-scheduler {
    background-color: var(--ae-neutral-0) !important;
    border-color: var(--ae-neutral-100) !important;
    color: var(--ae-neutral-800) !important;
}

.k-scheduler-toolbar,
.k-scheduler .k-scheduler-toolbar {
    background-color: var(--ae-neutral-50) !important;
    border-bottom: 1px solid var(--ae-neutral-100) !important;
    color: var(--ae-neutral-900) !important;
}

.k-scheduler-header,
.k-scheduler .k-scheduler-header,
.k-scheduler-times .k-time-text {
    background-color: var(--ae-neutral-50) !important;
    color: var(--ae-neutral-700) !important;
    border-color: var(--ae-neutral-200) !important;
    font-weight: var(--ae-fw-semibold) !important;
}

.k-scheduler-table td,
.k-scheduler-content td {
    border-color: var(--ae-neutral-100) !important;
}

.k-scheduler .k-event,
.k-scheduler-event {
    background-color: var(--ae-action) !important;
    color: var(--ae-neutral-0) !important;
    border-color: var(--ae-action-active) !important;
    border-radius: var(--ae-radius-sm) !important;
}

.k-scheduler .k-event:hover {
    background-color: var(--ae-action-hover) !important;
}

.k-scheduler .k-today,
.k-scheduler-table td.k-today {
    background-color: var(--ae-chrome-50) !important;
}

.k-scheduler .k-state-selected,
.k-scheduler .k-selected {
    background-color: var(--ae-chrome-100) !important;
    box-shadow: inset 2px 0 0 var(--ae-action);
}

/* --- 9.12 Kendo Gantt --- */

.k-gantt {
    background-color: var(--ae-neutral-0) !important;
    border-color: var(--ae-neutral-100) !important;
    color: var(--ae-neutral-800) !important;
}

.k-gantt-toolbar {
    background-color: var(--ae-neutral-50) !important;
    border-bottom: 1px solid var(--ae-neutral-100) !important;
}

.k-gantt-header,
.k-gantt-rows-header {
    background-color: var(--ae-neutral-50) !important;
    color: var(--ae-neutral-700) !important;
    font-weight: var(--ae-fw-semibold) !important;
    border-color: var(--ae-neutral-200) !important;
}

.k-gantt .k-task,
.k-task-summary,
.k-task-single {
    background-color: var(--ae-action) !important;
    color: var(--ae-neutral-0) !important;
    border-color: var(--ae-action-active) !important;
    border-radius: var(--ae-radius-sm) !important;
}

.k-task-milestone,
.k-gantt .k-task-milestone-mark {
    background-color: var(--ae-action-active) !important;
    color: var(--ae-neutral-0) !important;
}

.k-gantt .k-task-complete {
    background-color: var(--ae-success-700) !important;
    border-color: var(--ae-success-800) !important;
}

.k-gantt-rows-table tr:hover {
    background-color: var(--ae-chrome-50) !important;
}

/* --- 9.13 Kendo Charts (uses inline SVG; theme via series + plotArea) --- */

.k-chart {
    background-color: var(--ae-neutral-0) !important;
    color: var(--ae-neutral-800) !important;
    font-family: var(--ae-font-sans) !important;
}

.k-chart .k-legend,
.k-chart .k-legend-item {
    color: var(--ae-neutral-700) !important;
    font-family: var(--ae-font-sans) !important;
    font-size: var(--ae-text-sm, 0.875rem);
}

/* Series colours — use the chrome + supporting palette
   (Sea / Orange / Camel / Fuchsia / Slate). Pages can pass
   chart series colours explicitly via Kendo's `seriesColors`
   config, but these CSS variables let pages reference them. */
:root {
    --ae-chart-series-1: var(--ae-action);
    --ae-chart-series-2: var(--ae-accent-sea-700);
    --ae-chart-series-3: var(--ae-accent-orange-700);
    --ae-chart-series-4: var(--ae-accent-camel-700);
    --ae-chart-series-5: var(--ae-accent-fuchsia-700);
    --ae-chart-series-6: var(--ae-accent-slate-700);
}

/* --- 9.14 Kendo ListView --- */

.k-listview {
    background-color: var(--ae-neutral-0) !important;
    border-color: var(--ae-neutral-100) !important;
    color: var(--ae-neutral-800) !important;
}

.k-listview-content > .k-listview-item {
    background-color: var(--ae-neutral-0) !important;
    border-bottom: 1px solid var(--ae-neutral-100) !important;
    color: var(--ae-neutral-800) !important;
    transition: background-color var(--ae-transition-fast);
}

.k-listview-content > .k-listview-item:hover,
.k-listview-content > .k-listview-item.k-state-hover {
    background-color: var(--ae-chrome-50) !important;
}

.k-listview-content > .k-listview-item.k-state-selected,
.k-listview-content > .k-listview-item.k-selected {
    background-color: var(--ae-chrome-100) !important;
    color: var(--ae-neutral-900) !important;
    box-shadow: inset 3px 0 0 var(--ae-action);
}

/* --- 9.15 Kendo TreeView --- */

.k-treeview {
    background-color: var(--ae-neutral-0) !important;
    color: var(--ae-neutral-800) !important;
}

.k-treeview .k-in,
.k-treeview .k-treeview-leaf {
    color: var(--ae-neutral-800) !important;
    border-radius: var(--ae-radius-sm) !important;
    transition: background-color var(--ae-transition-fast);
}

.k-treeview .k-in:hover,
.k-treeview .k-treeview-leaf:hover,
.k-treeview .k-state-hover {
    background-color: var(--ae-chrome-50) !important;
    color: var(--ae-action) !important;
}

.k-treeview .k-state-selected,
.k-treeview .k-treeview-leaf.k-selected {
    background-color: var(--ae-action) !important;
    color: var(--ae-neutral-0) !important;
}

.k-treeview .k-icon,
.k-treeview .k-i-expand,
.k-treeview .k-i-collapse {
    color: var(--ae-neutral-600) !important;
}

/* --- 9.16 Kendo FileBrowser / Upload --- */

.k-filebrowser,
.k-upload {
    background-color: var(--ae-neutral-0) !important;
    border-color: var(--ae-neutral-100) !important;
    border-radius: var(--ae-radius-md) !important;
}

.k-filebrowser-toolbar,
.k-upload .k-upload-button {
    background-color: var(--ae-neutral-50) !important;
    color: var(--ae-neutral-800) !important;
    border-color: var(--ae-neutral-200) !important;
}

.k-upload .k-upload-files {
    background-color: var(--ae-neutral-0) !important;
    border-top: 1px solid var(--ae-neutral-100) !important;
}

.k-upload .k-file {
    color: var(--ae-neutral-800) !important;
    border-bottom: 1px solid var(--ae-neutral-100) !important;
}

.k-upload .k-progress {
    background-color: var(--ae-action) !important;
    opacity: .6;
}

.k-upload .k-file-success .k-progress {
    background-color: var(--ae-success-700) !important;
}

.k-upload .k-file-error .k-progress {
    background-color: var(--ae-error-700) !important;
}

.k-upload-status,
.k-upload-status-total {
    color: var(--ae-neutral-700) !important;
}

/* Drop-zone (k-dropzone or .k-external-dropzone) */
.k-dropzone,
.k-external-dropzone {
    background-color: var(--ae-chrome-50) !important;
    border: 2px dashed var(--ae-neutral-300) !important;
    color: var(--ae-neutral-700) !important;
    border-radius: var(--ae-radius-md) !important;
    transition:
        border-color var(--ae-transition-base),
        background-color var(--ae-transition-base);
}

.k-dropzone-active,
.k-dropzone:hover,
.k-external-dropzone:hover,
.k-external-dropzone.k-dropzone-active {
    border-color: var(--ae-action) !important;
    background-color: var(--ae-chrome-100) !important;
    color: var(--ae-action) !important;
}

/* --- 9.17 Kendo Splitter --- */

.k-splitter {
    background-color: var(--ae-neutral-0) !important;
    border-color: var(--ae-neutral-100) !important;
}

.k-splitbar {
    background-color: var(--ae-neutral-100) !important;
    border-color: var(--ae-neutral-200) !important;
    transition: background-color var(--ae-transition-fast);
}

.k-splitbar:hover,
.k-splitbar.k-resizing {
    background-color: var(--ae-action) !important;
}

/* --- 9.18 Kendo PanelBar --- */

.k-panelbar {
    background-color: var(--ae-neutral-0) !important;
    border-color: var(--ae-neutral-100) !important;
    border-radius: var(--ae-radius-md) !important;
}

.k-panelbar > .k-panelbar-item > .k-link,
.k-panelbar .k-panelbar-header {
    background-color: var(--ae-neutral-50) !important;
    color: var(--ae-neutral-900) !important;
    border-color: var(--ae-neutral-100) !important;
    font-weight: var(--ae-fw-semibold) !important;
    transition: background-color var(--ae-transition-fast);
}

.k-panelbar > .k-panelbar-item > .k-link:hover {
    background-color: var(--ae-chrome-50) !important;
    color: var(--ae-action) !important;
}

.k-panelbar > .k-panelbar-item.k-state-active > .k-link,
.k-panelbar > .k-panelbar-item.k-active > .k-link {
    background-color: var(--ae-action) !important;
    color: var(--ae-neutral-0) !important;
}

.k-panelbar .k-panelbar-content {
    background-color: var(--ae-neutral-0) !important;
    color: var(--ae-neutral-800) !important;
}

/* --- 9.19 Kendo Toolbar --- */

.k-toolbar {
    background-color: var(--ae-neutral-50) !important;
    border-color: var(--ae-neutral-100) !important;
    color: var(--ae-neutral-800) !important;
    border-radius: var(--ae-radius-md) !important;
}

.k-toolbar .k-button {
    background-color: transparent !important;
    color: var(--ae-neutral-800) !important;
    border-color: transparent !important;
}

.k-toolbar .k-button:hover {
    background-color: var(--ae-chrome-50) !important;
    color: var(--ae-action) !important;
}

.k-toolbar .k-button.k-state-active,
.k-toolbar .k-button.k-active {
    background-color: var(--ae-action) !important;
    color: var(--ae-neutral-0) !important;
}

.k-toolbar .k-separator {
    border-color: var(--ae-neutral-200) !important;
}

/* --- 9.20 Kendo Notification (different from toastr) --- */

.k-notification-success {
    background-color: var(--ae-success-100) !important;
    color: var(--ae-success-700) !important;
    border-inline-start: 4px solid var(--ae-success-700) !important;
}
.k-notification-error {
    background-color: var(--ae-error-100) !important;
    color: var(--ae-error-700) !important;
    border-inline-start: 4px solid var(--ae-error-700) !important;
}
.k-notification-warning {
    background-color: var(--ae-warning-100) !important;
    color: var(--ae-warning-700) !important;
    border-inline-start: 4px solid var(--ae-warning-700) !important;
}
.k-notification-info {
    background-color: var(--ae-info-100) !important;
    color: var(--ae-info-700) !important;
    border-inline-start: 4px solid var(--ae-info-700) !important;
}

/* --- 9.21 Kendo ProgressBar --- */

.k-progressbar {
    background-color: var(--ae-neutral-100) !important;
    border-color: var(--ae-neutral-200) !important;
    border-radius: var(--ae-radius-pill) !important;
}

.k-progressbar .k-state-selected,
.k-progressbar .k-progress {
    background-color: var(--ae-action) !important;
    color: var(--ae-neutral-0) !important;
}

.k-progressbar.k-progressbar-success .k-progress { background-color: var(--ae-success-700) !important; }
.k-progressbar.k-progressbar-error   .k-progress { background-color: var(--ae-error-700) !important; }
.k-progressbar.k-progressbar-warning .k-progress { background-color: var(--ae-warning-700) !important; }

/* ============================================================
 * 10. Legacy theme classes (UDP-internal)
 * ============================================================ */

.btn-Theme {
    color: var(--ae-neutral-0) !important;
    background-color: var(--ae-action) !important;
    border-color: var(--ae-action) !important;
}
.btn-Theme:hover {
    color: var(--ae-neutral-0) !important;
    background-color: var(--ae-action-hover) !important;
    border-color: var(--ae-action-hover) !important;
}

.btn-default {
    color: var(--ae-neutral-0) !important;
    background-color: var(--ae-chrome) !important;
    border-color: var(--ae-chrome) !important;
}
.btn-default:hover {
    background-color: var(--ae-chrome-dark) !important;
    border-color: var(--ae-chrome-dark) !important;
    color: var(--ae-neutral-0) !important;
}

.btn-golden {
    color: var(--ae-neutral-0) !important;
    background-color: var(--ae-primary-500) !important;
    border-color: var(--ae-primary-500) !important;
}
.btn-golden:hover {
    background-color: var(--ae-primary-600) !important;
    border-color: var(--ae-primary-600) !important;
    color: var(--ae-neutral-0) !important;
}

.btn-maroon {
    color: var(--ae-neutral-0) !important;
    background-color: var(--ae-error-800) !important;
    border-color: var(--ae-error-800) !important;
}
.btn-maroon:hover {
    background-color: var(--ae-error-700) !important;
    border-color: var(--ae-error-700) !important;
    color: var(--ae-neutral-0) !important;
}

.btn-green {
    color: var(--ae-neutral-0) !important;
    background-color: var(--ae-success-700) !important;
    border-color: var(--ae-success-700) !important;
}
.btn-green:hover {
    background-color: var(--ae-success-800) !important;
    border-color: var(--ae-success-800) !important;
    color: var(--ae-neutral-0) !important;
}

.alert-Theme {
    background-color: var(--ae-chrome-50) !important;
    color: var(--ae-action-active) !important;
    border-inline-start: 4px solid var(--ae-action);
}

.card-Header-Theme {
    background-color: var(--ae-neutral-50) !important;
    color: var(--ae-neutral-900) !important;
    border-inline-start: 3px solid var(--ae-action);
}

.card-Header-Theme .card-body label {
    color: var(--ae-neutral-900);
}

.card-footer-Theme {
    background-color: var(--ae-neutral-100) !important;
    color: var(--ae-neutral-700) !important;
}

.tile-Theme {
    background-color: var(--ae-chrome-50) !important;
    color: var(--ae-chrome-dark) !important;
    border-inline-start: 3px solid var(--ae-action);
}

.badge-theme {
    background-color: var(--ae-action) !important;
    color: var(--ae-neutral-0) !important;
    margin-bottom: 5px;
}
.badge-theme:hover {
    background-color: var(--ae-action-hover) !important;
    color: var(--ae-neutral-0) !important;
}

.gradient-theme {
    background: linear-gradient(180deg, var(--ae-chrome), var(--ae-neutral-950));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.progress-bar-theme {
    background-color: var(--ae-action) !important;
}

.hApplicationHeader {
    color: var(--ae-neutral-900) !important;
}

.bg-circle-avatar {
    background-color: var(--ae-chrome-50) !important;
}

/* ============================================================
 * 11. ThemePicker swatch (for the future 6th button)
 * ============================================================ */

.btn-uae,
.btnThemeUAEGov {
    color: var(--ae-neutral-0) !important;
    background-color: var(--ae-chrome) !important;
    border-color: var(--ae-chrome) !important;
}
.btn-uae:hover,
.btnThemeUAEGov:hover {
    background-color: var(--ae-chrome-dark) !important;
    border-color: var(--ae-chrome-dark) !important;
    color: var(--ae-neutral-0) !important;
}

/* ============================================================
 * 13. DocumentViewer page (uses _Blank layout — file-list + preview)
 * ============================================================ */

.document-viewer {
    background-color: var(--ae-neutral-0);
}

.documentListing {
    background-color: var(--ae-neutral-50);
    color: var(--ae-neutral-800);
    border: 1px solid var(--ae-neutral-100);
    border-radius: var(--ae-radius-lg);
}

.documentListing .card-title {
    color: var(--ae-neutral-900) !important;
}

.documentListing a,
.documentListing .nav-link {
    color: var(--ae-action);
}

.documentListing a:hover,
.documentListing .nav-link:hover {
    color: var(--ae-action-hover);
}

.documentListing a.text-black,
.documentListing .nav-link.text-black {
    color: var(--ae-neutral-900) !important;
}

.documentListing a.text-black:hover,
.documentListing .nav-link.text-black:hover {
    color: var(--ae-action) !important;
}

.documentListing .text-theme {
    color: var(--ae-action) !important;
}

.documentListing hr {
    border-top: 1px solid var(--ae-neutral-200);
    color: var(--ae-neutral-200);
    opacity: 1;
}

.preview-area {
    background-color: var(--ae-neutral-0);
}

.preview-docs {
    background-color: var(--ae-neutral-100);
    color: var(--ae-neutral-800);
    border: 1px solid var(--ae-neutral-200);
}

#divDefaultViewerTextCard,
#divDefaultViewerTextCard.bg-light {
    background-color: var(--ae-neutral-50) !important;
    border-color: var(--ae-neutral-100) !important;
}

#divDefaultViewerTextCard .card-header {
    background-color: var(--ae-chrome);
    color: var(--ae-neutral-0);
    border-bottom: 1px solid var(--ae-neutral-100);
}

#divDefaultViewerTextCard .card-title {
    color: var(--ae-neutral-900);
}

/* ============================================================
 * 14. UAE DS component synthesis (opt-in by markup)
 *     Pages adopt these by adding .aegov-* classes to elements;
 *     existing pages are unaffected.
 * ============================================================ */

/* --- 14.1 .aegov-banner — full-width announcement banner ---
   Markup: <div class="aegov-banner aegov-banner-info" role="status">
              <span class="aegov-banner-icon">…</span>
              <div class="aegov-banner-content">
                  <strong class="aegov-banner-title">Title</strong>
                  <p class="aegov-banner-body">Body text…</p>
              </div>
              <button class="aegov-banner-dismiss" aria-label="Dismiss">×</button>
           </div>
*/
.aegov-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--ae-radius-md);
    background-color: var(--ae-chrome-50);
    color: var(--ae-neutral-900);
    border-inline-start: 4px solid var(--ae-action);
    font-family: var(--ae-font-sans);
}

.aegov-banner-info    { background-color: var(--ae-info-100);    color: var(--ae-info-700);    border-inline-start-color: var(--ae-info-700); }
.aegov-banner-success { background-color: var(--ae-success-100); color: var(--ae-success-700); border-inline-start-color: var(--ae-success-700); }
.aegov-banner-warning { background-color: var(--ae-warning-100); color: var(--ae-warning-700); border-inline-start-color: var(--ae-warning-700); }
.aegov-banner-error   { background-color: var(--ae-error-100);   color: var(--ae-error-700);   border-inline-start-color: var(--ae-error-700); }
.aegov-banner-neutral { background-color: var(--ae-neutral-100); color: var(--ae-neutral-900); border-inline-start-color: var(--ae-chrome); }

.aegov-banner-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.aegov-banner-content {
    flex: 1 1 auto;
    min-width: 0;
}

.aegov-banner-title {
    display: block;
    font-weight: var(--ae-fw-semibold);
    margin-bottom: 4px;
}

.aegov-banner-body {
    margin: 0;
    color: inherit;
    font-size: 14px;
    line-height: 1.5;
}

.aegov-banner-dismiss {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: currentColor;
    cursor: pointer;
    opacity: .7;
    transition: opacity var(--ae-transition-fast);
    padding: 0 4px;
    line-height: 1;
}
.aegov-banner-dismiss:hover { opacity: 1; }

/* --- 14.2 .aegov-toggle — switch / on-off toggle ---
   Markup: <label class="aegov-toggle">
              <input type="checkbox" class="aegov-toggle-input">
              <span class="aegov-toggle-track"></span>
              <span class="aegov-toggle-label">Label</span>
           </label>
*/
.aegov-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-family: var(--ae-font-sans);
}

.aegov-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.aegov-toggle-track {
    flex: 0 0 auto;
    width: 36px;
    height: 20px;
    background-color: var(--ae-neutral-300);
    border-radius: var(--ae-radius-pill);
    position: relative;
    transition: background-color var(--ae-transition-base);
}

.aegov-toggle-track::after {
    content: "";
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 16px;
    height: 16px;
    background-color: var(--ae-neutral-0);
    border-radius: 50%;
    box-shadow: var(--ae-shadow-xs);
    transition: inset-inline-start var(--ae-transition-base);
}

.aegov-toggle-input:checked + .aegov-toggle-track {
    background-color: var(--ae-action);
}

.aegov-toggle-input:checked + .aegov-toggle-track::after {
    inset-inline-start: 18px;
}

.aegov-toggle-input:focus-visible + .aegov-toggle-track {
    box-shadow: var(--ae-shadow-glow-primary);
}

.aegov-toggle-input:disabled + .aegov-toggle-track {
    background-color: var(--ae-neutral-200);
    cursor: not-allowed;
}

.aegov-toggle-label {
    color: var(--ae-neutral-800);
    font-size: 14px;
}

/* --- 14.3 .aegov-range-slider — range input ---
   Markup: <input type="range" class="aegov-range-slider" min="0" max="100">
*/
.aegov-range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background-color: var(--ae-neutral-200);
    border-radius: var(--ae-radius-pill);
    outline: none;
    cursor: pointer;
    transition: background-color var(--ae-transition-fast);
}

.aegov-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: var(--ae-action);
    border: 2px solid var(--ae-neutral-0);
    border-radius: 50%;
    box-shadow: var(--ae-shadow-sm);
    cursor: pointer;
    transition:
        background-color var(--ae-transition-fast),
        transform var(--ae-transition-fast);
}

.aegov-range-slider::-webkit-slider-thumb:hover {
    background-color: var(--ae-action-hover);
    transform: scale(1.1);
}

.aegov-range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background-color: var(--ae-action);
    border: 2px solid var(--ae-neutral-0);
    border-radius: 50%;
    box-shadow: var(--ae-shadow-sm);
    cursor: pointer;
}

.aegov-range-slider:focus-visible {
    box-shadow: var(--ae-shadow-glow-primary);
}

.aegov-range-slider:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* --- 14.4 .aegov-blockquote — quoted text styling ---
   Markup: <blockquote class="aegov-blockquote">
              <p>Quote text…</p>
              <cite class="aegov-blockquote-cite">— Author</cite>
           </blockquote>
*/
.aegov-blockquote {
    margin: 16px 0;
    padding: 16px 20px;
    background-color: var(--ae-chrome-50);
    border-inline-start: 4px solid var(--ae-action);
    border-radius: 0 var(--ae-radius-md) var(--ae-radius-md) 0;
    font-family: var(--ae-font-sans);
    color: var(--ae-neutral-800);
    font-style: italic;
}

.aegov-blockquote p {
    margin: 0;
    line-height: 1.5;
}

.aegov-blockquote-cite,
.aegov-blockquote cite {
    display: block;
    margin-top: 8px;
    color: var(--ae-neutral-600);
    font-style: normal;
    font-weight: var(--ae-fw-medium);
    font-size: 14px;
}

/* --- 14.5 .aegov-file-input — drag-drop file upload ---
   Markup: <label class="aegov-file-input">
              <input type="file" class="aegov-file-input-control">
              <span class="aegov-file-input-text">
                  <strong>Choose a file</strong> or drag it here
              </span>
              <span class="aegov-file-input-hint">PDF, DOCX up to 10 MB</span>
           </label>
*/
.aegov-file-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    background-color: var(--ae-chrome-50);
    border: 2px dashed var(--ae-neutral-300);
    border-radius: var(--ae-radius-md);
    color: var(--ae-neutral-700);
    cursor: pointer;
    text-align: center;
    transition:
        border-color var(--ae-transition-base),
        background-color var(--ae-transition-base),
        color var(--ae-transition-base);
}

.aegov-file-input:hover {
    border-color: var(--ae-action);
    background-color: var(--ae-chrome-100);
    color: var(--ae-action);
}

.aegov-file-input:focus-within {
    border-color: var(--ae-action);
    box-shadow: var(--ae-shadow-glow-primary);
    outline: none;
}

.aegov-file-input-control {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.aegov-file-input-text {
    font-size: 14px;
    color: inherit;
}

.aegov-file-input-text strong {
    color: var(--ae-action);
    font-weight: var(--ae-fw-semibold);
}

.aegov-file-input-hint {
    font-size: 12px;
    color: var(--ae-neutral-500);
}

.aegov-file-input.is-dragover,
.aegov-file-input[data-dragover="true"] {
    border-color: var(--ae-action);
    background-color: var(--ae-chrome-100);
    color: var(--ae-action);
}

.aegov-file-input.is-disabled,
.aegov-file-input[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
 * 15. Application Log component (Comment.cshtml — back-office)
 *
 * Markup contract (unchanged — pure CSS overlay):
 *   #divCommentComponent
 *     ├─ accordion#accordionComments  (header: "Application Log" / "Case Log")
 *     │   └─ accordion-body
 *     │       ├─ recent-comment alert (.highlight when present)
 *     │       ├─ .card
 *     │       │   ├─ .card-header
 *     │       │   │   ├─ #heading-collapsed (toggle: "Application Log History")
 *     │       │   │   └─ #commentTypeContainer (3 radios: Comment / Activity Log / Email Log)
 *     │       │   └─ .card-body
 *     │       │       └─ ul#commentsList (AJAX-loaded items)
 *     │       └─ comment input (textarea + Add Comments link + modal)
 *     └─ #divAddApplicationCommentsDialog (modal)
 *
 * Goal: present the 3 radios as a UAE DS-style tab strip without
 * touching the markup (we hide the radios and style the labels via
 * :has(input:checked)).
 * ============================================================ */

/* --- 15.1 Outer wrapper + accordion --- */

#divCommentComponent #accordionComments .accordion-button span {
    font-weight: var(--ae-fw-semibold);
}

/* --- 15.2 Recent-comment alert (kills the inline yellow keyframe) --- */

#divCommentComponent .highlight,
#divCommentComponent .col-sm-12.highlight {
    background-color: var(--ae-warning-100) !important;
    color: var(--ae-warning-700) !important;
    border-inline-start: 4px solid var(--ae-warning-700) !important;
    border-radius: 0 var(--ae-radius-md) var(--ae-radius-md) 0;
    animation: none !important;   /* override the inline @keyframes highlightFade */
    border-top: none;
    border-bottom: none;
    border-inline-end: none;
}

#divCommentComponent .highlight b {
    color: var(--ae-neutral-900);
    font-weight: var(--ae-fw-semibold);
}

#divCommentComponent .highlight .text-theme {
    color: var(--ae-action) !important;
    font-weight: var(--ae-fw-medium);
}

/* --- 15.3 Collapsible card wrapping the 3-section history --- */

#divCommentComponent .card {
    border: 1px solid var(--ae-neutral-100) !important;
    border-radius: var(--ae-radius-md) !important;
    overflow: hidden;
    box-shadow: var(--ae-shadow-xs);
}

#divCommentComponent .card-header {
    background-color: var(--ae-chrome-50) !important;
    border-bottom: 1px solid var(--ae-neutral-100) !important;
    padding: 12px 16px !important;
}

#divCommentComponent #heading-collapsed a {
    text-decoration: none !important;
    color: var(--ae-neutral-900) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color var(--ae-transition-fast);
}

#divCommentComponent #heading-collapsed a span {
    color: var(--ae-neutral-900) !important;
    font-weight: var(--ae-fw-semibold) !important;
    font-size: var(--ae-text-sm, 0.875rem);
}

#divCommentComponent #heading-collapsed a:hover span {
    color: var(--ae-action) !important;
}

#divCommentComponent #heading-collapsed .fa-chevron-down,
#divCommentComponent #heading-collapsed .fa-chevron-up {
    color: var(--ae-neutral-500);
    margin-inline-start: 8px;
    transition:
        transform var(--ae-transition-base),
        color var(--ae-transition-fast);
}

#divCommentComponent #heading-collapsed a:hover .fa-chevron-down,
#divCommentComponent #heading-collapsed a:hover .fa-chevron-up {
    color: var(--ae-action);
}

#divCommentComponent #heading-collapsed a:not(.collapsed) .fa-chevron-down {
    transform: rotate(180deg);
}

/* --- 15.4 The 3-section radio group — kept as actual radios,
       just themed accent + clean spacing. Selected label gets the
       theme action colour for prominence. --- */

#commentTypeContainer {
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    padding: 4px 0;
}

#commentTypeContainer label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--ae-neutral-800) !important;
    font-size: var(--ae-text-sm, 0.875rem) !important;
    font-weight: var(--ae-fw-medium) !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    border-radius: var(--ae-radius-sm);
    transition:
        color var(--ae-transition-fast),
        background-color var(--ae-transition-fast);
}

#commentTypeContainer label:hover {
    background-color: var(--ae-chrome-50);
}

/* Selected label — theme action colour + slightly bolder. The radio
   itself remains visible. */
#commentTypeContainer label:has(input[type="radio"]:checked) {
    color: var(--ae-action) !important;
    font-weight: var(--ae-fw-semibold) !important;
}

#commentTypeContainer input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    flex: 0 0 auto;
}

#commentTypeContainer label:focus-within {
    outline: none;
    box-shadow: var(--ae-shadow-glow-primary);
}

/* --- 15.5 #commentsList — UAE DS feed view ---
       Markup contract (rendered by _CommentsPartial.cshtml):
         .udp-comment-feed
           ├─ .udp-comment-item.is-master     ← user-deletable comment
           │   ├─ .udp-comment-meta
           │   │   ├─ .udp-comment-author
           │   │   ├─ .udp-comment-sep        ← "·" separator
           │   │   ├─ .udp-comment-date
           │   │   └─ .udp-comment-delete     ← trash button (master only)
           │   └─ .udp-comment-body
           ├─ .udp-comment-item               ← system / activity / email
           │   ├─ .udp-comment-meta
           │   └─ .udp-comment-body
           ...
       Empty state: .udp-comment-feed.udp-comment-feed-empty                */

#commentsList {
    list-style: none;
    padding: 0;
    margin: 0;
}

.udp-comment-feed {
    background-color: var(--ae-neutral-0);
    border: 1px solid var(--ae-neutral-100);
    border-radius: var(--ae-radius-md);
    overflow: hidden;
    box-shadow: var(--ae-shadow-xs);
}

.udp-comment-feed-empty {
    padding: 24px;
    color: var(--ae-neutral-500);
    font-size: var(--ae-text-sm, 0.875rem);
    text-align: center;
    font-style: italic;
}

.udp-comment-item {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ae-neutral-100);
    transition: background-color var(--ae-transition-fast);
    position: relative;
}

.udp-comment-item:last-child {
    border-bottom: none;
}

.udp-comment-item:hover {
    background-color: var(--ae-chrome-50);
}

/* Master comments — slight inline-start accent so user-authored entries
   are visually distinguishable from system/activity/email entries. */
.udp-comment-item.is-master {
    border-inline-start: 3px solid var(--ae-action);
    padding-inline-start: 15px;
}

.udp-comment-meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.udp-comment-author {
    color: var(--ae-neutral-900);
    font-weight: var(--ae-fw-semibold);
    font-size: var(--ae-text-sm, 0.875rem);
}

.udp-comment-sep {
    color: var(--ae-neutral-300);
    font-weight: var(--ae-fw-bold);
}

.udp-comment-date {
    color: var(--ae-neutral-500);
    font-size: var(--ae-text-xs, 0.75rem);
    font-weight: var(--ae-fw-regular);
    font-family: var(--ae-font-sans);
}

.udp-comment-delete {
    background: none;
    border: none;
    color: var(--ae-neutral-400);
    margin-inline-start: auto;
    padding: 4px 8px;
    border-radius: var(--ae-radius-sm);
    cursor: pointer;
    line-height: 1;
    transition:
        background-color var(--ae-transition-fast),
        color var(--ae-transition-fast);
}

.udp-comment-delete:hover {
    color: var(--ae-error-700);
    background-color: var(--ae-error-100);
}

.udp-comment-delete:focus-visible {
    outline: none;
    box-shadow: var(--ae-shadow-glow-error);
    color: var(--ae-error-700);
}

.udp-comment-delete .k-icon {
    font-size: 14px;
}

.udp-comment-body {
    color: var(--ae-neutral-800);
    font-size: var(--ae-text-sm, 0.875rem);
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.udp-comment-body p:last-child {
    margin-bottom: 0;
}

/* Email-log entries (the partial passes a long HTML string with From/To/
   Cc/Subject/Attachment/Body separated by <Br/>). Light tweak so the
   key/value rhythm reads cleanly. */
.udp-comment-body br + br {
    line-height: 0.75;
}

/* --- 15.6 Comment input area + Add Comments link --- */

#divCommentComponent textarea[name="CommentText"],
#divCommentComponent textarea#txtApplicationComments {
    border-color: var(--ae-neutral-200);
    border-radius: var(--ae-radius-md);
    color: var(--ae-neutral-900);
    transition:
        border-color var(--ae-transition-base),
        box-shadow var(--ae-transition-base);
}

#divCommentComponent textarea[name="CommentText"]:focus,
#divCommentComponent textarea#txtApplicationComments:focus {
    border-color: var(--ae-action);
    box-shadow: var(--ae-shadow-glow-primary);
    outline: none;
}

#divCommentComponent a[data-bs-target="#divAddApplicationCommentsDialog"] {
    color: var(--ae-action) !important;
    font-weight: var(--ae-fw-medium);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    padding: 6px 12px;
    border-radius: var(--ae-radius-md);
    transition:
        background-color var(--ae-transition-fast),
        color var(--ae-transition-fast);
}

#divCommentComponent a[data-bs-target="#divAddApplicationCommentsDialog"]:hover {
    background-color: var(--ae-chrome-50);
    color: var(--ae-action-hover) !important;
}

#divCommentComponent a[data-bs-target="#divAddApplicationCommentsDialog"]::before {
    content: "+";
    font-weight: var(--ae-fw-bold);
    font-size: 1.1em;
    line-height: 1;
}

/* --- 15.7 Comment-visibility radios (Internal / External) --- */

#divCommentComponent .form-check-inline {
    margin-inline-end: 16px !important;
}

/* Comment-visibility radios — empty unchecked, action-coloured when selected
   (handled by the generic input[type="radio"] rule above; no accent-color
   here so unchecked stays neutral). */

#divCommentComponent .form-check-inline label {
    color: var(--ae-neutral-700);
    font-weight: var(--ae-fw-medium);
    cursor: pointer;
    margin-inline-start: 4px;
}

/* --- 15.8 Add-Comments modal styling --- */

#divAddApplicationCommentsDialog .modal-header .modal-title {
    color: var(--ae-neutral-950);
    font-weight: var(--ae-fw-semibold);
}

/* AddComments modal radios — empty unchecked, action-coloured when selected
   (handled by the generic input[type="radio"] rule). */

#divAddApplicationCommentsDialog .modal-footer .btn-Theme {
    background-color: var(--ae-neutral-200) !important;
    color: var(--ae-neutral-900) !important;
    border-color: var(--ae-neutral-200) !important;
}

#divAddApplicationCommentsDialog .modal-footer .btn-Theme:hover {
    background-color: var(--ae-neutral-300) !important;
    border-color: var(--ae-neutral-300) !important;
}

/* ============================================================
 * 16. UAE DS components — additions for full coverage
 *     (designsystem.gov.ae/docs/components → 28 components total).
 *     Adds: .aegov-avatar, .main-navigation, .aegovs-slider-style.
 *     Pure CSS, opt-in by markup; existing pages unaffected.
 * ============================================================ */

/* --- 16.1 .aegov-avatar — generic avatar component ---
   Markup: <div class="aegov-avatar avatar-base">
              <img src="..." alt="">
              <span class="alert-indicator" data-state="online"></span>
           </div>
   Sizes: avatar-xs (24), avatar-sm (32), avatar-base (40 default),
          avatar-lg (48), avatar-xl (56), avatar-2xl (64), avatar-3xl (80). */
.aegov-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--ae-chrome-50);
    color: var(--ae-action);
    border-radius: var(--ae-radius-pill);
    overflow: hidden;
    flex-shrink: 0;
    font-weight: var(--ae-fw-semibold);
    font-size: 14px;
    text-transform: uppercase;
    user-select: none;
    line-height: 1;
}

.aegov-avatar.avatar-rounded {
    border-radius: var(--ae-radius-md);
}

.aegov-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.aegov-avatar.no-user {
    background-color: var(--ae-neutral-100);
    color: var(--ae-neutral-500);
}

/* Sizes */
.aegov-avatar.avatar-xs   { width: 24px; height: 24px; font-size: 10px; }
.aegov-avatar.avatar-sm   { width: 32px; height: 32px; font-size: 12px; }
.aegov-avatar.avatar-base { width: 40px; height: 40px; font-size: 14px; }
.aegov-avatar.avatar-lg   { width: 48px; height: 48px; font-size: 16px; }
.aegov-avatar.avatar-xl   { width: 56px; height: 56px; font-size: 18px; }
.aegov-avatar.avatar-2xl  { width: 64px; height: 64px; font-size: 20px; }
.aegov-avatar.avatar-3xl  { width: 80px; height: 80px; font-size: 24px; }

/* Status indicator dot — bottom-right corner */
.aegov-avatar .alert-indicator {
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
    width: 25%;
    height: 25%;
    min-width: 8px;
    min-height: 8px;
    background-color: var(--ae-success-700);
    border: 2px solid var(--ae-neutral-0);
    border-radius: var(--ae-radius-pill);
    box-sizing: border-box;
}

.aegov-avatar .alert-indicator[data-state="online"]  { background-color: var(--ae-success-700); }
.aegov-avatar .alert-indicator[data-state="offline"] { background-color: var(--ae-neutral-400); }
.aegov-avatar .alert-indicator[data-state="busy"]    { background-color: var(--ae-error-700); }
.aegov-avatar .alert-indicator[data-state="away"]    { background-color: var(--ae-warning-700); }

/* Avatar group — overlapping stack */
.aegov-avatar-group {
    display: inline-flex;
    align-items: center;
}

.aegov-avatar-group .aegov-avatar {
    margin-inline-start: -8px;
    border: 2px solid var(--ae-neutral-0);
    box-shadow: var(--ae-shadow-xs);
}

.aegov-avatar-group .aegov-avatar:first-child {
    margin-inline-start: 0;
}

/* --- 16.2 .main-navigation — UAE DS top-bar navigation pattern ---
   Opt-in. Pages adopting this wrap their <nav> with .main-navigation.
   The existing _Website.cshtml GCAA banner stays as-is; this rule
   stands by for pages that want the pure UAE DS look. */
.main-navigation {
    background-color: var(--ae-neutral-0);
    border-bottom: 1px solid var(--ae-neutral-100);
    padding: 12px 0;
}

.main-navigation .nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
    flex-wrap: wrap;
}

.main-navigation .menu-item {
    position: relative;
}

.main-navigation .menu-item > a,
.main-navigation .menu-item > .submenu-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    color: var(--ae-neutral-800);
    font-weight: var(--ae-fw-medium);
    font-size: var(--ae-text-sm, 0.875rem);
    text-decoration: none;
    border-radius: var(--ae-radius-md);
    border: none;
    background: transparent;
    cursor: pointer;
    transition:
        color var(--ae-transition-fast),
        background-color var(--ae-transition-fast);
}

.main-navigation .menu-item > a:hover,
.main-navigation .menu-item > .submenu-btn:hover {
    color: var(--ae-action);
    background-color: var(--ae-chrome-50);
}

.main-navigation .menu-item.is-active > a,
.main-navigation .menu-item > a[aria-current="page"] {
    color: var(--ae-action);
    background-color: var(--ae-chrome-100);
    font-weight: var(--ae-fw-semibold);
}

.main-navigation .menu-item > a:focus-visible,
.main-navigation .menu-item > .submenu-btn:focus-visible {
    outline: none;
    box-shadow: var(--ae-shadow-glow-primary);
}

.main-navigation .header-navs-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

.main-navigation .header-navs-right > * {
    color: var(--ae-neutral-700);
}

.main-navigation .responsive-menu {
    display: none;
}

@media (max-width: 1024px) {
    .main-navigation .nav-menu      { display: none; }
    .main-navigation .responsive-menu { display: block; }
}

/* --- 16.3 .aegovs-slider-style — UAE DS carousel pattern ---
   Reference impl uses Slick Slider. Bootstrap carousel works too.
   Both get themed dots, arrows, and card containers. */

.aegovs-slider-style {
    position: relative;
    overflow: hidden;
}

/* Slick Slider hooks — only fire if Slick library is loaded on the page */
.aegovs-slider-style .slick-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.aegovs-slider-style .slick-dots li {
    width: auto;
    height: 8px;
    margin: 0;
}

.aegovs-slider-style .slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
    background-color: var(--ae-neutral-300);
    border: none;
    border-radius: var(--ae-radius-pill);
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
    transition:
        background-color var(--ae-transition-fast),
        width var(--ae-transition-fast);
}

.aegovs-slider-style .slick-dots li button::before {
    display: none;   /* hide Slick's default ::before bullet */
}

.aegovs-slider-style .slick-dots li button:hover {
    background-color: var(--ae-action-hover);
}

.aegovs-slider-style .slick-dots li.slick-active button {
    background-color: var(--ae-action);
    width: 20px;
}

.aegovs-slider-style .slick-prev,
.aegovs-slider-style .slick-next {
    width: 36px;
    height: 36px;
    background-color: var(--ae-neutral-0);
    border: 1px solid var(--ae-neutral-200);
    border-radius: var(--ae-radius-pill);
    color: var(--ae-action);
    box-shadow: var(--ae-shadow-sm);
    z-index: 2;
    transition:
        background-color var(--ae-transition-fast),
        border-color var(--ae-transition-fast);
}

.aegovs-slider-style .slick-prev:hover,
.aegovs-slider-style .slick-next:hover {
    background-color: var(--ae-chrome-50);
    border-color: var(--ae-action);
}

.aegovs-slider-style .slick-prev::before,
.aegovs-slider-style .slick-next::before {
    color: var(--ae-action);
    opacity: 1;
    font-size: 18px;
}

/* Bootstrap carousel — same colour treatment for the alternative impl */
.carousel-indicators [data-bs-target] {
    background-color: var(--ae-neutral-300);
    border: none;
    width: 8px;
    height: 8px;
    border-radius: var(--ae-radius-pill);
    margin: 0 4px;
    transition:
        background-color var(--ae-transition-fast),
        width var(--ae-transition-fast);
}

.carousel-indicators .active {
    background-color: var(--ae-action);
    width: 20px;
}

.carousel-control-prev,
.carousel-control-next {
    opacity: 1;
    transition: opacity var(--ae-transition-fast);
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 0.85;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: var(--ae-neutral-0);
    border-radius: var(--ae-radius-pill);
    padding: 8px;
    background-size: 60% 60%;
    width: 36px;
    height: 36px;
    box-shadow: var(--ae-shadow-sm);
}

.carousel-caption {
    color: var(--ae-neutral-0);
    background-color: rgba(14, 15, 18, 0.55);
    padding: 12px 16px;
    border-radius: var(--ae-radius-md);
    bottom: 24px;
}

/* Card variants used inside sliders (logo / initiative / news cards) */
.aegov-card,
.card-news {
    background-color: var(--ae-neutral-0);
    border: 1px solid var(--ae-neutral-100);
    border-radius: var(--ae-radius-lg);
    padding: 16px;
    box-shadow: var(--ae-shadow-xs);
    transition:
        box-shadow var(--ae-transition-base),
        transform var(--ae-transition-base);
}

.aegov-card:hover,
.card-news:hover {
    box-shadow: var(--ae-shadow-md);
    transform: translateY(-2px);
}

/* Slider variants — slight padding adjustments */
.logos-slider .slick-slide,
.initiative-slider .slick-slide,
.news-card-slider .slick-slide {
    padding: 0 10px;
}

/* ============================================================
 * 17. .Left-nav — fixed left-side icon strip on AppForm pages
 *     (BackOfficeAppFormLeftBar.cshtml). Colour comes from the
 *     active theme so the strip matches every picker swatch.
 * ============================================================ */

.Left-nav {
    background-color: var(--ae-action);
    box-shadow: var(--ae-shadow-md);
}

.Left-nav ul li {
    border-radius: var(--ae-radius-sm);
    padding: 6px 8px;
    transition:
        background-color var(--ae-transition-fast),
        transform var(--ae-transition-fast);
}

.Left-nav .icon {
    color: var(--ae-neutral-0);
    transition: color var(--ae-transition-fast);
}

.Left-nav .icon i {
    color: var(--ae-neutral-0);
    transition: color var(--ae-transition-fast);
}

/* Hover — subtle lift via slightly darker chrome bg + small scale */
.Left-nav ul li:hover {
    background-color: var(--ae-action-hover);
    transform: translateX(2px);
}

.Left-nav ul li:hover .icon,
.Left-nav ul li:hover .icon i {
    color: var(--ae-neutral-0);   /* keep white for readability on dark theme bg */
}

.Left-nav ul li:focus-visible {
    outline: none;
    box-shadow: var(--ae-shadow-glow-primary);
}

/* Mobile — horizontal strip, lighter background since icons go dark */
@media (max-width: 768px) {
    .Left-nav {
        background-color: var(--ae-chrome-50);
        box-shadow: none;
    }

    .Left-nav .icon,
    .Left-nav .icon i {
        color: var(--ae-action);
    }

    .Left-nav ul li:hover {
        background-color: var(--ae-chrome-100);
        transform: none;
    }

    .Left-nav ul li:hover .icon,
    .Left-nav ul li:hover .icon i {
        color: var(--ae-action-hover);
    }
}

/* ============================================================
 * 12. Reduced-motion safety net
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
 * 13. Form-control contrast hardening (Silktide / WCAG SC 1.4.11)
 *     Defense-in-depth: this block lives at end-of-file so it
 *     wins the cascade over any earlier rules (including
 *     Telerik default-main.css's .k-input-solid border). Uses
 *     neutral-500 (#5F646D, ~5.77:1 vs white) for comfortable
 *     margin over the 3:1 minimum.
 * ============================================================ */

.form-control,
.form-select,
.form-check-input,
select,
textarea,
input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]),
.k-input,
.k-input-solid,
.k-picker,
.k-picker-solid,
.k-textbox,
.k-numerictextbox,
.k-combobox,
.k-dropdownlist,
.k-dropdowntree,
.k-multiselect,
.k-datepicker,
.k-timepicker,
.k-datetimepicker,
.k-daterangepicker,
.k-checkbox,
.k-radio {
    border-color: var(--ae-neutral-500) !important;
}

/* Preserve focus / invalid / checked color cues — don't override these states */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.k-input:focus-within,
.k-input.k-focus,
.k-picker:focus-within,
.k-picker.k-focus {
    border-color: var(--ae-action) !important;
}

.form-control.is-invalid,
.form-select.is-invalid,
.k-input.k-invalid,
.k-picker.k-invalid {
    border-color: var(--ae-error-700) !important;
}

.form-check-input:checked,
.k-checkbox:checked,
.k-radio:checked {
    border-color: var(--ae-action) !important;
}