/*
 * Zazu Cloud Connect — App Stylesheet
 * Custom overrides on top of Horizon admin theme
 */

/* ── Pace preloader: disable the full-page white overlay ────────────────── */
/* The Horizon theme's pace.css uses body:after as a blocking white overlay.  */
/* We disable it here so pages render immediately without a preloader screen. */
body::after { display: none !important; }
.pace         { display: none !important; }

/* ── Sidebar nav separators ──────────────────────────────────────────────── */
.side-menu > li.nav-separator {
    pointer-events: none;
    padding: 18px 20px 6px;
    cursor: default;
}

.side-menu > li.nav-separator > span {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}

/* Light sidebar variant */
.sidebar-skin-light .side-menu > li.nav-separator > span {
    color: rgba(0, 0, 0, 0.3);
}

/* ── User avatar initials fallback ──────────────────────────────────────── */
.avatar-initials {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: #4a6fa5;
    line-height: 1;
}

/* ── Dashboard onboarding list ──────────────────────────────────────────── */
.onboarding-list li:last-child {
    border-bottom: none !important;
}

/* ── Public card page ───────────────────────────────────────────────────── */
.public-card-wrap {
    max-width: 440px;
    margin: 0 auto;
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }

/* ── Accessibility (ZAZ-009, WCAG 2.2 AA) ───────────────────────────────── */
/* Brand orange #f15a24 is 3.37:1 on white and 4.29:1 on navy: enough for focus rings,
   icons, borders and large text (3:1), not for small text (4.5:1). Small orange text and
   white-on-orange buttons use the darker shade of the same hue, 5.08:1 on white. */
:root {
    --zazu-orange: #f15a24;
    --zazu-orange-aa: #c4420f;
    --zazu-orange-aa-hover: #a8380d;
    --zazu-navy: #011d79;
}

/* Skip link: off-screen until focused, then the first thing on the page (2.4.1). */
.skip-link {
    position: absolute;
    left: .75rem;
    top: -200px;
    z-index: 2000;
    padding: .6rem 1rem;
    background: var(--zazu-navy);
    color: #fff;
    font-weight: 700;
    border-radius: 0 0 6px 6px;
    text-decoration: none;
}
.skip-link:focus { top: 0; color: #fff; text-decoration: underline; }

/* Visible keyboard focus everywhere (2.4.7, 2.4.11): orange ring, 3:1+ on white and navy. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--zazu-orange) !important;
    outline-offset: 2px !important;
    box-shadow: none;
}
.form-control:focus-visible, .custom-select:focus-visible { outline-offset: 0 !important; }
/* The sidebar's links sit flush with its edges: draw the ring inside. */
.side-menu a:focus-visible { outline-offset: -3px !important; }
/* main#main-content takes focus from the skip link; it is not a control. */
#main-content:focus { outline: none; }

/* Small text in the brand colour (1.4.3). */
.text-primary, .color-primary { color: var(--zazu-orange-aa) !important; }
.btn-outline-primary, .btn-primary.btn-link, .btn-white:not(.btn-link), .btn-white:not(.btn-link):hover { color: var(--zazu-orange-aa); }
.btn-outline-primary { border-color: var(--zazu-orange-aa); }
.btn-primary:not(.btn-link),
.btn-primary:not(.btn-link).disabled,
.btn-primary:not(.btn-link):disabled,
.btn-outline-primary:hover,
.page-item.active .page-link,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: var(--zazu-orange-aa);
    border-color: var(--zazu-orange-aa);
    color: #fff;
}
.btn-primary:not(.btn-link):hover,
.btn-primary:not(.btn-link):focus,
.btn-primary:not(.btn-link):not(:disabled):not(.disabled):active {
    background-color: var(--zazu-orange-aa-hover);
    border-color: var(--zazu-orange-aa-hover);
    color: #fff;
}
.page-link:hover { color: var(--zazu-orange-aa); }

/* The theme's link/danger red #f4364c is 3.83:1 on white: use the darker #c9253a for
   text and for white-on-red fills (5.5:1 on white, 5.1:1 on the #f6f7fb page). */
a { color: #c9253a; }
.text-danger { color: #c9253a !important; }
.btn-link, .btn-outline-danger, .breadcrumb > .active { color: #c9253a; }
.btn-outline-danger { border-color: #c9253a; }
.btn-danger:not(.btn-link), .btn-outline-danger:hover, .badge-danger { background-color: #c9253a; border-color: #c9253a; color: #fff; }

/* The theme's .text-muted (#ccc, 1.6:1) and breadcrumb links (#999, 2.9:1) are
   unreadable small text: #666 is 5.7:1 on white, 5.4:1 on the page background. */
.text-muted { color: #666 !important; }
.breadcrumb a, .breadcrumb-item a { color: #666; }
/* Placeholder text is still text (4.54:1 on white). */
.form-control::placeholder, input::placeholder { color: #767676; opacity: 1; }
.navbar-search input[type="search"]::placeholder { color: #000; }
/* The theme greys out every <small>/.small at #ccc. */
.small, small { color: #666; }
/* Bootstrap badge/outline colours that fail 4.5:1 for their small text. */
.badge-info { background-color: #0b63ce; color: #fff; }
.btn-outline-warning { color: #8a5a00; border-color: #c98a00; }
.btn-outline-warning:hover { color: #212529; }

/* Polite announcer (entity switch confirmations). It stays rendered while empty (a live
   region that is display:none until filled is often not announced); empty, it takes no space. */
.shell-announcer:empty { margin: 0; padding: 0; border: 0; }
.shell-announcer {
    margin: 1rem 1.25rem 0;
    padding: .55rem .9rem;
    border-left: 3px solid var(--zazu-orange);
    background: #fff7f3;
    color: #333;
    font-size: 13px;
    border-radius: 0 4px 4px 0;
}

/* Header legal-entity switcher. The theme's search box is 50% wide; let it give way
   so the header stays on one row (same layout when there is no switcher). */
.navbar > .container-fluid:has(.navbar-entity-switcher) { flex-wrap: nowrap; }
.navbar > .container-fluid > .navbar-header, .navbar > .container-fluid > .navbar-nav { flex-shrink: 0; }
.navbar-search { flex: 0 1 50%; min-width: 0; }
.navbar-entity-switcher { padding: 0 .5rem; min-width: 0; flex: 0 0 auto; }
.navbar-entity-label { text-transform: none; letter-spacing: 0; font-weight: 400; }
.navbar-entity-label { font-size: 13px; color: #555; white-space: nowrap; }
.navbar-entity-label .ti { font-size: 16px; vertical-align: -2px; margin-right: .3rem; }
.navbar-entity-select { max-width: 14rem; min-width: 10rem; }
@media (max-width: 1199.98px) {
    /* The label stays for screen readers; the icon marks the control visually. */
    .navbar-entity-label-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .navbar-entity-select { max-width: 12rem; }
}

/* Data tables (x-data-table): sortable header links look like headers. */
.data-table th a.sort-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.data-table th a.sort-link:hover { text-decoration: underline; }

/* ── WCAG 2.2 AA audit fixes (2026-11-11) ───────────────────────────────── */
/* Field boundaries (1.4.11): the theme's #e6ecf5 / #ced4da / #ddd borders are 1.2–1.5:1
   on white. #8a8a8a is 3.45:1 on white, 3.22:1 on the #f6f7fb page. */
.form-control, .custom-select { border-color: #8a8a8a; }
.form-control:focus, .custom-select:focus { border-color: var(--zazu-orange); }
.form-control.is-invalid, .custom-select.is-invalid { border-color: #c9253a; }
.invalid-feedback { color: #c9253a; font-size: 13px; }
/* Sign-in pages: underline-only fields. The theme draws the underline as a #e6ecf5
   background gradient (1.19:1); #767676 is 4.54:1 on white, 4.24:1 on #f6f7fb. The orange
   bar still grows in on focus, and the 3px focus ring applies on top. */
.form-control-line, .login-left input.form-control-line {
    border: 0; border-radius: 0; background-color: transparent;
    background-image: linear-gradient(var(--zazu-orange), var(--zazu-orange)), linear-gradient(#767676, #767676);
    background-size: 0 2px, 100% 1px; background-position: center bottom, center bottom; background-repeat: no-repeat;
}
.form-control-line:focus, .login-left input.form-control-line:focus { background-size: 100% 2px, 100% 1px; }
.form-control-line.is-invalid, .login-left input.form-control-line.is-invalid { background-image: linear-gradient(#c9253a, #c9253a), linear-gradient(#c9253a, #c9253a); background-size: 100% 2px, 100% 2px; }
.custom-control-label::before { background-color: #fff; border: 1px solid #767676; }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--zazu-navy); border-color: var(--zazu-navy); }
/* Custom checkboxes and switches hide the real input: ring the visible box on keyboard focus. */
.custom-control-input:focus-visible ~ .custom-control-label::before { outline: 3px solid var(--zazu-orange); outline-offset: 2px; box-shadow: none; }

/* Theme colour variants that fail 4.5:1 for small text (1.4.3), fixed in one batch. */
.btn-outline-success { color: #1e7e4f; border-color: #1e7e4f; }               /* was #4be1ab, 1.66:1 → 5.06:1 */
.btn-outline-success:hover, .btn-outline-success:not(:disabled):not(.disabled):active { color: #fff; background-color: #1e7e4f; border-color: #1e7e4f; }
.btn-outline-info { color: #0b63ce; border-color: #0b63ce; }                  /* was #117eff, 3.85:1 → 5.69:1 */
.btn-outline-info:hover, .btn-outline-info:not(:disabled):not(.disabled):active { color: #fff; background-color: #0b63ce; border-color: #0b63ce; }
.btn-outline-default:hover, .btn-outline-default:focus, .btn-outline-default:active { color: #fff; background-color: #666; border-color: #666; } /* white on #ccc was 1.61:1 */
.btn-outline-default { border-color: #8a8a8a; }
.text-success { color: #1e7e4f !important; }
.text-info { color: #0b63ce !important; }
.text-warning { color: #8a5a00 !important; }
.badge-light { border: 1px solid #8a8a8a; }
.btn-light, .btn-light:hover { color: #212529; border-color: #8a8a8a; }                     /* was white on #f8f9fa, invisible */
/* Inline code (the authenticator setup key): #e83e8c is 3.82:1; #c2185b is 5.87:1 on white. */
code { color: #c2185b; }

/* Links in running text are underlined, not told apart by colour alone (1.4.1). */
main p a:not(.btn), main li > a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.zhelp-item),
main .form-text a, main .alert a, .help-article a, .zhelp-cta, .zhelp-muted a { text-decoration: underline; }
main .breadcrumb a { text-decoration: none; }

/* Collapsed desktop sidebar (4.1.2, 1.4.13): the theme hid the labels with display:none, leaving
   icon-only links with no name. The label stays in the accessibility tree, visually hidden, and
   shows as a tooltip on hover or keyboard focus. */
@media (min-width: 961px) {
    [data-sidebar-state="collapse"] .side-menu > li > a .hide-menu {
        display: block;
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0, 0, 0, 0); white-space: nowrap; margin: 0;
    }
    [data-sidebar-state="collapse"] .side-menu > li > a:hover .hide-menu,
    [data-sidebar-state="collapse"] .side-menu > li > a:focus .hide-menu {
        width: auto; height: auto; clip: auto; overflow: visible;
        left: calc(100% + 6px); top: 50%; transform: translateY(-50%);
        padding: .35rem .7rem; border-radius: 4px; z-index: 1100;
        background: #1a1a2e; color: #fff; font-size: 13px; line-height: 1.3;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .25); pointer-events: none;
    }
    [data-sidebar-state="collapse"] .side-menu > li > a .mm-caret { display: none; }
}

/* Below lg the legal-entity switcher gets its own row under the header bar (1.4.10): at
   320px it covered the account menu and the select shrank to 42px. */
@media (max-width: 991.98px) {
    .navbar { height: auto; }
    .navbar > .container-fluid:has(.navbar-entity-switcher) { flex-wrap: wrap; height: auto; }
    .navbar > .container-fluid > .navbar-header,
    .navbar > .container-fluid > .navbar-nav { height: 3.75rem; }
    .navbar-entity-switcher {
        order: 10; flex: 1 0 100%; padding: .5rem .75rem;
        border-top: 1px solid #e6ecf5; background: #fff;
    }
    .navbar-entity-switcher { min-width: 0; }
    .navbar-entity-label { flex-shrink: 0; }
    .navbar-entity-select { flex: 1 1 auto; min-width: 10rem; max-width: 24rem; }
    .navbar-entity-submit { flex-shrink: 0; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .navbar-entity-switcher .navbar-entity-label-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* The header search was a borderless, full-height field: give it a 3:1 boundary (1.4.11). */
.navbar-search input[type="search"] { height: 2.5rem; margin-top: .625rem; border: 1px solid #8a8a8a; border-radius: 4px; }

/* Header controls kept at every width: the Help toggle (was lg-only). */
.navbar-help { flex-shrink: 0; }

/* Scrollable table regions take keyboard focus (2.1.1): ring them like controls. */
.table-responsive[tabindex="0"]:focus-visible { outline: 3px solid var(--zazu-orange); outline-offset: 2px; }

/* KRA PIN card at 320px (1.4.10): the PIN wraps and Copy sits under it. */
.kra-pin-value { font-size: clamp(1.25rem, 7vw, 1.75rem); letter-spacing: .06em; word-break: break-all; overflow-wrap: anywhere; }
.kra-copy-status:empty { display: inline; }

/* Sign-in pages at narrow widths (1.4.10, 2.4.11): the theme pins the footer to the bottom of
   the viewport, over the Sign In button once the form is taller than the screen, and keeps the
   form at half width (160px at 320px). */
.body-bg-full .footer { position: static; }
@media (max-width: 575.98px) {
    .login-left .w-50 { width: 100% !important; padding: 0 1rem; }
}

/* Error summary (3.3.1): focusable so it is read first; no ring on the programmatic focus. */
.error-summary:focus { outline: 3px solid #c9253a; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}