/*
 * ZANZIBAR ACADEMY CENTRE: panel styles (UI polish pass, owner 06/11/2026).
 * Plain CSS registered through Filament's assets (AdminPanelProvider::assets()); no Node,
 * no Vite theme, so only plain CSS on Filament's own .fi-* classes. Display only.
 * Published to public/css/app/ by `php artisan filament:assets` (run by filament:upgrade
 * after every composer install), so edit this file, never the published copy.
 */

/* #1 Phone: the topbar must fit 375 px. Search, bell, FR/ع, role and avatar were ~470 px wide
   and pushed the whole page sideways. Below 640 px: tighter gaps, a search field that shrinks,
   and the role moves into the user menu (zac-role-in-menu). */
.zac-role-in-menu { display: none; padding: .5rem .75rem 0; }

@media (max-width: 639.98px) {
    .fi-topbar { padding-inline: .75rem; }
    .fi-topbar-open-sidebar-btn,
    .fi-topbar-close-sidebar-btn { margin-inline-end: .5rem !important; }
    .fi-topbar-end { gap: .5rem; min-width: 0; }
    .fi-topbar-end .fi-global-search-ctn { flex: 1 1 auto; min-width: 0; }
    .fi-topbar-end .fi-global-search-field { min-width: 0; }
    .zac-topbar-role { display: none; }
    .zac-role-in-menu { display: block; }
}

/* #2 Impayés below xl: the stacked cell (filament.tables.unpaid-summary). Filament's own colour
   variables, so dark mode and RTL (logical properties only) follow. */
.zac-unpaid-summary {
    display: flex; flex-direction: column; gap: .3rem;
    padding: .75rem 1rem; min-width: 11rem;
    white-space: normal; font-size: .875rem; line-height: 1.4;
}
.zac-unpaid-summary a { color: inherit; text-decoration: none; }
.zac-unpaid-summary a:hover { text-decoration: underline; }
.zac-unpaid-summary a:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; border-radius: .25rem; }
.zac-unpaid-summary .zac-unpaid-name { font-weight: 500; }
.zac-unpaid-summary .zac-muted { color: var(--gray-500); }
.zac-unpaid-figures { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.zac-unpaid-remaining { font-weight: 600; } /* #6: plain; the ancienneté badge carries the urgency */
.zac-unpaid-credit { font-weight: 600; color: var(--info-600); }
.dark .zac-unpaid-summary .zac-muted { color: var(--gray-400); }
.dark .zac-unpaid-summary a:focus-visible { outline-color: var(--primary-400); }
.dark .zac-unpaid-credit { color: var(--info-400); }

@media (max-width: 639.98px) {
    /* Encaisser keeps its icon on phones; the label stays for screen readers. */
    .zac-unpaid .fi-ta-actions .fi-link-label {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    .zac-unpaid .fi-ta-actions { gap: .5rem; }
    /* A 32 px tap area around the Encaisser icon. */
    .zac-unpaid .fi-ta-actions .fi-link { min-width: 2rem; min-height: 2rem; display: inline-flex; align-items: center; justify-content: center; }
}

/* #3 WhatsApp, Relancer, Rappel: a gray button (or menu item) with a green chat icon, so the
   solid primary (Encaisser) stays the first thing the eye finds. !important: Filament's own
   icon-colour selectors are deeper than ours. Green 700 / 400 keep the icon above 3:1. */
.zac-whatsapp > .fi-icon,
.zac-whatsapp .fi-dropdown-list-item-icon,
.fi-dropdown-list-item.zac-whatsapp .fi-icon { color: var(--success-700) !important; }
.dark .zac-whatsapp > .fi-icon,
.dark .zac-whatsapp .fi-dropdown-list-item-icon,
.dark .fi-dropdown-list-item.zac-whatsapp .fi-icon { color: var(--success-400) !important; }

/* #8 Dashboard lists (filament.widgets.dashboard-list): the actions keep a fixed place at the end of
   the row and never drop under the text; Filament's gray tokens for secondary text. */
.zac-list { display: flex; flex-direction: column; gap: .75rem; }
.zac-list-empty { font-size: .875rem; color: var(--gray-500); }
.zac-list-section { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-500); margin-bottom: .25rem; }
.zac-list-row { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--gray-200); }
.zac-list-text { flex: 1 1 auto; min-width: 0; }
.zac-list-title { font-weight: 500; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.zac-list-meta { font-size: .8rem; color: var(--gray-500); }
.zac-list-actions { flex: none; display: flex; flex-wrap: nowrap; gap: .35rem; }
.zac-list-footer { margin-top: .75rem; }
.dark .zac-list-empty, .dark .zac-list-section, .dark .zac-list-meta { color: var(--gray-400); }
.dark .zac-list-row { border-bottom-color: rgb(255 255 255 / .1); }

@media (max-width: 639.98px) {
    /* Phones: Encaisser keeps its label; the other buttons show their icon only. */
    .zac-list-actions .fi-btn:not(.zac-btn-main) .zac-btn-label {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    .zac-list-actions .fi-btn:not(.zac-btn-main) { padding-inline: .5rem; min-width: 2rem; min-height: 2rem; justify-content: center; }
}

/* Page titles (owner, 08/11/2026): Montserrat 600, bundled (public/fonts/montserrat, OFL), for h1 only;
   Inter stays for the UI. Arabic keeps Tajawal. Montserrat is ~7 % wider than Inter, so on phones the
   title is 1.375rem instead of 1.5rem: no title wraps sooner than before. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../../fonts/montserrat/montserrat-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../../fonts/montserrat/montserrat-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
html:not([lang="ar"]) .fi-header-heading,
html:not([lang="ar"]) .fi-simple-header-heading { font-family: 'Montserrat', var(--font-family), ui-sans-serif, system-ui, sans-serif; font-weight: 600; }
@media (max-width: 639.98px) {
    html:not([lang="ar"]) .fi-header-heading { font-size: 1.375rem; }
}

/* #14 KPI cards (filament.widgets.kpi-cards), on Filament's colour tokens so light, dark and the
   brand palette (primary = navy, info = turquoise, gold) follow the panel. The dark --primary-400
   is the light blue of dark-mode-colors.blade.php. */
.zac-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 1024px) { .zac-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zac-kpi {
    container-type: inline-size; min-width: 0;
    display: flex; flex-direction: column; gap: .35rem;
    padding: 1rem; border-radius: .75rem;
    background: white;
    box-shadow: 0 1px 2px color-mix(in oklab, var(--gray-950) 6%, transparent);
    outline: 1px solid color-mix(in oklab, var(--gray-950) 5%, transparent);
}
.dark .zac-kpi { background: var(--gray-900); outline-color: rgb(255 255 255 / .1); }
.zac-kpi-icon { width: 2.25rem; height: 2.25rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; }
.zac-kpi-icon svg { width: 1.25rem; height: 1.25rem; }
.zac-tone-navy { background: var(--primary-50); color: var(--primary-600); }
.zac-tone-turquoise { background: var(--info-50); color: var(--info-700); }
.zac-tone-gold { background: var(--gold-50); color: var(--gold-700); }
.zac-tone-danger { background: var(--danger-50); color: var(--danger-700); }
.dark .zac-tone-navy { background: color-mix(in oklab, var(--primary-400) 15%, transparent); color: var(--primary-400); }
.dark .zac-tone-turquoise { background: color-mix(in oklab, var(--info-400) 18%, transparent); color: var(--info-400); }
.dark .zac-tone-gold { background: color-mix(in oklab, var(--gold-400) 15%, transparent); color: var(--gold-400); }
.dark .zac-tone-danger { background: color-mix(in oklab, var(--danger-400) 15%, transparent); color: var(--danger-400); }
/* #8: the figure never breaks over two lines; it scales down with the card width instead. */
.zac-kpi-value { font-size: 1.5rem; font-size: min(1.5rem, 13cqi); font-weight: 700; line-height: 1.2; color: var(--gray-950); white-space: nowrap; font-variant-numeric: tabular-nums; }
.zac-kpi-value-long { font-size: min(1.5rem, 11cqi); }
.dark .zac-kpi-value { color: white; }
.zac-kpi-label { font-size: .85rem; color: var(--gray-500); }
.zac-kpi-note { font-size: .75rem; color: var(--gray-500); display: flex; align-items: center; gap: .25rem; }
.dark .zac-kpi-label, .dark .zac-kpi-note { color: var(--gray-400); }
.zac-kpi-note svg { width: 1rem; height: 1rem; flex: none; }
.zac-up, .zac-down { display: inline-flex; }
.zac-up { color: var(--success-700); } .zac-down { color: var(--danger-700); }
.dark .zac-up { color: var(--success-400); } .dark .zac-down { color: var(--danger-400); }

/* Top bar (filament.topbar.locale-and-role): language switch and role, moved from inline styles. */
.zac-topbar-tools { display: flex; align-items: center; gap: .5rem; }
.zac-locale-switch { display: flex; gap: .25rem; }

/* Secondary text and row dividers in the finance summary and the roll call: Filament's grays
   instead of opacity, so dark mode matches the rest of the panel. */
.zac-muted-text { color: var(--gray-500); }
.zac-muted-strong { color: var(--gray-600); }
.zac-divider { border-bottom: 1px solid var(--gray-200); }
.dark .zac-muted-text { color: var(--gray-400); }
.dark .zac-muted-strong { color: var(--gray-300); }
.dark .zac-divider { border-bottom-color: rgb(255 255 255 / .1); }

/* Keyboard focus (owner's browser test, 08/11/2026): the "×" of a filter chip (Supprimer le
   filtre) and of a select (Effacer la sélection) had no visible focus. A ring in the panel
   primary: navy in light mode, the light blue of dark-mode-colors in dark mode. */
.fi-badge .fi-badge-delete-btn:focus-visible,
.fi-select-input .fi-select-input-value-remove-btn:focus-visible,
.fi-select-input-value-remove-btn:focus-visible {
    outline-style: solid; outline-width: 2px; outline-offset: 2px;
    outline-color: var(--primary-600); border-radius: .25rem;
}
.dark .fi-badge .fi-badge-delete-btn:focus-visible,
.dark .fi-select-input-value-remove-btn:focus-visible { outline-color: var(--primary-400); }

/* =============================================================================================
   DESIGN ROUND 2 (owner, 09/11/2026): a branded product, not default Filament.
   Brand Kit colours. Contrast measured (WCAG 2.x): white on navy 12.8:1; white 80 % on navy 8.7:1;
   white on the active navy 9.6:1; group labels at 60 % white 5.6:1 (50 % gave 4.4:1, below AA);
   gold on navy 6.8:1; link turquoise (--info-700, #016572) 6.8:1 on white, 6.3:1 on sand.
   ============================================================================================= */
:root {
    --zac-navy: #133359;
    --zac-navy-dark: #0E2846;   /* logo band */
    --zac-navy-active: #1E4673; /* active menu item */
    --zac-gold: #EBB358;
    --zac-sand: #FAF6EE;
}

/* --- Logo (filament.brand.logo): one variant per background -------------------------------- */
.zac-logo { display: inline-flex; align-items: center; height: 100%; }
.zac-logo-on-navy { display: none; align-items: center; gap: .65rem; height: 100%; }
.zac-logo-on-light { display: block; height: 100%; width: auto; }
.fi-sidebar .zac-logo-on-navy,
.fi-topbar-start .zac-logo-on-navy { display: inline-flex; }
.fi-sidebar .zac-logo-on-light,
.fi-topbar-start .zac-logo-on-light { display: none; }
.zac-logo-icon { height: 100%; width: auto; flex: none; }
/* Owner (10/11/2026): on a light page the colour logo, the white one when that page is dark. */
.zac-logo-on-light .zac-logo-color,
.zac-logo-on-light .zac-logo-white { height: 100%; width: auto; }
.zac-logo-on-light .zac-logo-white { display: none; }
.dark .zac-logo-on-light .zac-logo-white { display: block; }
.dark .zac-logo-on-light .zac-logo-color { display: none; }
.zac-logo-text { display: flex; flex-direction: column; line-height: 1.05; color: white; font-family: 'Montserrat', var(--font-family), sans-serif; font-weight: 600; }
.zac-logo-name { font-size: .95rem; letter-spacing: .14em; }
.zac-logo-sub { font-size: .62rem; letter-spacing: .38em; color: rgb(255 255 255 / .8); }

/* --- Sidebar: solid navy in light and dark mode --------------------------------------------- */
.fi-body .fi-sidebar { background: var(--zac-navy); }
/* Scrollbar for the navy (the nav is the element that scrolls): a translucent white thumb on a
   transparent track. Standard properties, plus the WebKit ones for Safari and older Chrome. */
.fi-sidebar .fi-sidebar-nav { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .25) transparent; }
.fi-sidebar .fi-sidebar-nav::-webkit-scrollbar { width: 8px; }
.fi-sidebar .fi-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.fi-sidebar .fi-sidebar-nav::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .25); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; }
.fi-sidebar .fi-sidebar-nav::-webkit-scrollbar-thumb:hover { background-color: rgb(255 255 255 / .4); }
.fi-body .fi-sidebar.fi-sidebar-open { box-shadow: none; }
.fi-body-has-topbar .fi-sidebar .fi-sidebar-header { background: var(--zac-navy-dark); box-shadow: none; }
.fi-sidebar .fi-sidebar-group-label {
    font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    color: rgb(255 255 255 / .6);
}
.fi-sidebar .fi-sidebar-group-btn .fi-icon,
.fi-sidebar .fi-sidebar-group-collapse-btn,
.fi-sidebar .fi-sidebar-group-collapse-btn .fi-icon { color: rgb(255 255 255 / .6) !important; }
.fi-sidebar .fi-sidebar-item .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar .fi-sidebar-item .fi-sidebar-item-btn > .fi-sidebar-item-label { color: rgb(255 255 255 / .8); }
.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible { background: rgb(255 255 255 / .08); }
.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover > .fi-icon,
.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover > .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible > .fi-icon,
.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible > .fi-sidebar-item-label { color: white; }
.fi-sidebar .fi-sidebar-item > .fi-sidebar-item-btn:focus-visible { outline: 2px solid rgb(255 255 255 / .9); outline-offset: -2px; }
/* Active item: lighter navy, white, and a 3 px gold bar on the start side (right in Arabic). */
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--zac-navy-active); box-shadow: inset 3px 0 0 var(--zac-gold); }
[dir="rtl"] .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { box-shadow: inset -3px 0 0 var(--zac-gold); }
.fi-sidebar .fi-sidebar-item.fi-active.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover { background: var(--zac-navy-active); }
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label { color: white; }
.fi-sidebar .fi-icon-btn,
.fi-sidebar .fi-icon-btn .fi-icon { color: rgb(255 255 255 / .8) !important; }

/* Desktop: the top-bar start (collapse button + logo) becomes the darker navy band above the sidebar. */
@media (min-width: 1024px) {
    .fi-topbar-start {
        align-self: stretch; box-sizing: border-box; width: var(--sidebar-width);
        margin-inline-start: -1rem; margin-inline-end: 1.5rem; padding-inline: 1rem;
        background: var(--zac-navy-dark);
    }
    .fi-body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-topbar-start { width: var(--collapsed-sidebar-width); }
    .fi-topbar-start .fi-icon-btn,
    .fi-topbar-start .fi-icon-btn .fi-icon { color: rgb(255 255 255 / .8) !important; }
    .fi-topbar-start .fi-icon-btn:hover,
    .fi-topbar-start .fi-icon-btn:focus-visible { background: rgb(255 255 255 / .08); }
    .fi-topbar-start .fi-icon-btn:focus-visible { outline: 2px solid rgb(255 255 255 / .9); }
    .fi-topbar-start > a:focus-visible { outline: 2px solid rgb(255 255 255 / .9); outline-offset: 2px; border-radius: .25rem; }
    /* The role shows under the logo while the sidebar is open: no second copy in the top bar. */
    .fi-body:has(.fi-sidebar.fi-sidebar-open) .zac-topbar-role { display: none; }
    .fi-sidebar:not(.fi-sidebar-open) .zac-sidebar-user { display: none; }
}

/* User block under the logo (filament.sidebar.user). */
.zac-sidebar-user { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: 0 .5rem 1.25rem; margin-inline: -.5rem; border-bottom: 1px solid rgb(255 255 255 / .12); }
.zac-sidebar-user-name { color: white; font-weight: 600; font-size: .9rem; line-height: 1.3; overflow-wrap: break-word; }
.zac-role-chip { display: inline-flex; align-items: center; padding: .1rem .55rem; border: 1px solid var(--zac-gold); border-radius: 9999px; color: var(--zac-gold); font-size: .72rem; font-weight: 600; line-height: 1.4; }

/* Arabic: no letter spacing (it breaks the joined letters), uppercase has no effect. */
html[lang="ar"] .fi-sidebar .fi-sidebar-group-label { letter-spacing: 0; font-size: .78rem; }

/* --- Page background, header band, tables, links --------------------------------------------- */
html:not(.dark) .fi-body { background: var(--zac-sand); }

/* A white page header band with a bottom border, edge to edge (box-shadow + clip-path: no overflow). */
.fi-main .fi-page-header-main-ctn > .fi-header {
    margin-top: -2rem; padding-block: 1.5rem;
    background: white;
    box-shadow: 0 0 0 100vmax white, 0 1px 0 100vmax var(--gray-200);
    clip-path: inset(0 -100vmax -1px -100vmax);
}
.dark .fi-main .fi-page-header-main-ctn > .fi-header {
    background: var(--gray-900);
    box-shadow: 0 0 0 100vmax var(--gray-900), 0 1px 0 100vmax rgb(255 255 255 / .1);
}

/* Table headers: small uppercase gray labels with letter spacing; rows a little more compact. */
.fi-ta-header-cell,
.fi-ta-header-cell .fi-ta-header-cell-sort-btn {
    font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-600);
}
.dark .fi-ta-header-cell,
.dark .fi-ta-header-cell .fi-ta-header-cell-sort-btn { color: var(--gray-400); }
html[lang="ar"] .fi-ta-header-cell,
html[lang="ar"] .fi-ta-header-cell .fi-ta-header-cell-sort-btn { letter-spacing: 0; font-size: .8rem; }
.fi-ta-cell .fi-ta-text:not(.fi-inline) { padding-block: .75rem; }
.fi-ta-cell:has(.fi-ta-actions) { padding-block: .75rem; }

/* Links in turquoise, the darker shade for text (AA): Filament links and links inside detail pages. */
.fi-link.fi-color.fi-color-primary { color: var(--info-700); }
.dark .fi-link.fi-color.fi-color-primary { color: var(--info-400); }
.fi-in-text a[href] { color: var(--info-700); font-weight: 500; }
.fi-in-text a[href]:hover { text-decoration: underline; }
.dark .fi-in-text a[href] { color: var(--info-400); }

/* --- Login (filament.auth.login-panel): navy side from 1024 px, the form on sand ---------------- */
.zac-login-panel { display: none; }
.fi-simple-layout:has(.zac-auth-band) { background: var(--zac-sand); }
.dark .fi-simple-layout:has(.zac-auth-band) { background: var(--gray-950); }
/* Card logo (desktop MFA / password pages): the colour horizontal logo, white when dark. */
.fi-simple-layout:has(.zac-auth-band) .fi-simple-header .fi-logo { height: auto !important; width: min(17rem, 100%); margin-inline: auto; }
.fi-simple-layout:has(.zac-auth-band) .fi-simple-header .zac-logo-on-light,
.fi-simple-layout:has(.zac-auth-band) .fi-simple-header .zac-logo-on-light img { width: 100%; height: auto; }

/* Below 1024 px (owner, 10/11/2026): a navy band with the brand, about a third of the screen, and the
   form card overlapping it by 28 px. Fits with the e-mail, password and button visible at 360 x 740. */
.zac-auth-band { display: none; }
@media (max-width: 1023.98px) {
    .fi-simple-layout:has(.zac-auth-band) { align-items: stretch; }
    .zac-auth-band {
        position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
        height: 32svh; min-height: 11rem; max-height: 18rem;
        padding: 1.5rem 1.5rem calc(1.5rem + 28px);
        background: var(--zac-navy); color: white;
    }
    .zac-auth-band-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
    .zac-auth-band-logo { width: min(17rem, 78vw); height: auto; }
    .fi-simple-layout:has(.zac-auth-band) .fi-simple-main-ctn { align-items: flex-start; padding-inline: 1rem; }
    .fi-simple-layout:has(.zac-auth-band) .fi-simple-main {
        position: relative; z-index: 1; margin-top: -28px; margin-bottom: 2rem;
        padding-block: 2rem; border-radius: .75rem;
    }
    /* The band already carries the logo. */
    .fi-simple-layout:has(.zac-auth-band) .fi-simple-header .fi-logo { display: none; }
    /* Signed-in simple pages (MFA, password): the bell and the user menu sit on the navy band. */
    .fi-simple-layout:has(.zac-auth-band) .fi-simple-layout-header { z-index: 2; }
    .fi-simple-layout:has(.zac-auth-band) .fi-simple-layout-header .fi-icon-btn,
    .fi-simple-layout:has(.zac-auth-band) .fi-simple-layout-header .fi-icon-btn .fi-icon { color: rgb(255 255 255 / .85) !important; }
}
@media (min-width: 1024px) {
    .fi-simple-layout:has(.zac-login-panel) {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
    }
    .zac-login-panel {
        grid-column: 1; grid-row: 1 / span 3;
        position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
        min-height: 100dvh; background: var(--zac-navy); color: white;
    }
    .fi-simple-layout:has(.zac-login-panel) .fi-simple-main-ctn { grid-column: 2; grid-row: 1 / span 3; min-height: 100dvh; padding-inline: 2rem; }
    .fi-simple-layout:has(.zac-login-panel) .fi-simple-header .fi-logo { display: none; }
}
.zac-login-pattern { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .22; }
.zac-login-panel-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 3rem; text-align: center; }
.zac-login-panel-logo { width: min(24rem, 80%); height: auto; }
.zac-login-panel-line, .zac-auth-band-line { font-family: 'Montserrat', var(--font-family), sans-serif; font-weight: 600; font-size: 1.05rem; letter-spacing: .04em; color: white; }
html[lang="ar"] .zac-login-panel-line, html[lang="ar"] .zac-auth-band-line { font-family: var(--font-family), sans-serif; letter-spacing: 0; font-size: 1.15rem; }

/* Contrast scan (owner, 09/11/2026): the "—" placeholder for an empty value was gray-400 on white
   (2.6:1). Gray-500 on white is 4.8:1; in dark mode gray-400 on gray-900 is 6.9:1. */
.fi-in-entry .fi-in-placeholder,
.fi-ta-cell .fi-ta-placeholder { color: var(--gray-500); }
.dark .fi-in-entry .fi-in-placeholder,
.dark .fi-ta-cell .fi-ta-placeholder { color: var(--gray-400); }