/*
 * Zigzag Request Center — the states and breakpoints the design system tokens do
 * not carry. Everything else is inline, exactly as the design file lays it out.
 *
 * The visual system derives from Zigzag Delivery: #F26F21 reserved for action and
 * active state, warm neutrals for everything else, round corners, soft ambient
 * shadows, Poppins. The density differs — this is a work tool on desktop, not a
 * consumer app on mobile.
 */

* { box-sizing: border-box; }

body {
    margin: 0;
    background: #F7F7F8;
    font-family: Poppins, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #374151;
}

a { color: #E25A0F; text-decoration: none; }
a:hover { color: #F26F21; }
input, select, textarea, button { font-family: inherit; }

[x-cloak] { display: none !important; }

@keyframes zzIn  { from { opacity: 0; transform: translateY(7px); }             to { opacity: 1; transform: none; } }
@keyframes zzPop { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }

.zz-view { animation: zzIn .24s ease both; }

/* ------------------------------------------------------------------- Overlays

   Layout lives in a class, never in an inline style, because x-show removes the
   inline `display` property when it reveals an element — an inline
   `display:flex` would be wiped on the first open and the panel would fall back
   to `block`, dropping out of its centred position. */

.zz-modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(23, 24, 27, .55);
    backdrop-filter: blur(2px);
}
.zz-modal-backdrop { position: absolute; inset: 0; }

.zz-modal-panel {
    position: relative;
    width: 100%;
    max-width: 470px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(23, 24, 27, .28);
    overflow: hidden;
}

.zz-modal-head { padding: 20px 22px 16px; border-bottom: 1px solid #F1F2F4; flex: none; }
/* The body is the only scrolling region, so the header and the actions stay
   reachable however long the field list grows. */
.zz-modal-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 13px; overflow-y: auto; }
.zz-modal-foot { padding: 16px 22px 20px; display: flex; gap: 10px; flex: none; border-top: 1px solid #F1F2F4; }

.zz-modal-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.zz-modal-row dt { font-size: 12px; color: #9CA3AF; flex: none; }
.zz-modal-row dd { font-size: 13px; font-weight: 600; color: #17181B; text-align: right; min-width: 0; word-break: break-word; }

.zz-confirm-panel { max-width: 430px; }
.zz-confirm-head { display: flex; align-items: flex-start; gap: 13px; padding: 22px 22px 18px; }
.zz-confirm-glyph {
    width: 42px; height: 42px; flex: none;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
}
.zz-confirm-glyph.is-danger  { background: #FEECEC; color: #B42318; }
.zz-confirm-glyph.is-primary { background: #FFEDE0; color: #B8480C; }
.zz-confirm-title {
    font-size: 16.5px; font-weight: 700; letter-spacing: -.02em;
    color: #17181B; line-height: 1.3;
}
.zz-confirm-text {
    margin: 6px 0 0;
    font-size: 13px; line-height: 1.6; color: #6B7280;
}
.zz-confirm-note {
    margin: 0 22px 4px;
    display: flex; align-items: flex-start; gap: 8px;
    background: #FBFBFC; border: 1px solid #F1F2F4; border-radius: 12px;
    padding: 10px 12px;
    font-size: 12px; line-height: 1.5; color: #6B7280;
}

.zz-drawer { position: fixed; inset: 0; z-index: 60; display: flex; }

/* Same reason as .zz-modal: a revealed block needs its layout from a class. */
.zz-stack { display: flex; flex-direction: column; }

@media (max-width: 560px) {
    .zz-modal { padding: 0; align-items: flex-end; }
    .zz-modal-panel { max-width: none; max-height: 92vh; border-radius: 20px 20px 0 0; }
    .zz-modal-foot { flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: reduce) {
    .zz-modal-panel { animation: none !important; }
}

/* ------------------------------------------------- Coque et barre laterale */

.zz-shell {
    --sidebar-w: 248px;
    min-height: 100vh;
    display: flex;
    background: var(--surface-page);
    font-family: var(--font-core, Poppins, system-ui, sans-serif);
}
.zz-shell.is-rail { --sidebar-w: 76px; }

/*
 * Le rail se declenche a la largeur reelle de la barre, pas a celle du
 * viewport : le pli demande par l'utilisateur et le pli automatique du laptop
 * partagent donc le meme jeu de regles (@container plus bas) au lieu d'en
 * maintenir deux copies qui derivent.
 */
.zz-sidebar {
    /*
     * La barre laterale porte sa propre palette sombre, independante des
     * tokens clairs utilises par le reste de l'appli : chaque regle
     * ci-dessous consomme deja ces memes variables, donc les redefinir ici
     * suffit a basculer toute la colonne (nav, pied, badges) sans dupliquer
     * les regles.
     */
    --surface-card: var(--neutral-900);
    --surface-page: rgba(255, 255, 255, .04);
    --surface-sunken: rgba(255, 255, 255, .07);
    --surface-brand-soft: rgba(242, 111, 33, .14);
    --border-hairline: rgba(255, 255, 255, .08);
    --text-heading: #FFFFFF;
    --text-muted: #A9ABB6;
    --text-placeholder: #75777F;

    container-type: inline-size;
    width: var(--sidebar-w); flex: none;
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    overflow: hidden;
    background: var(--surface-card);
    border-right: 1px solid var(--border-hairline);
    transition: width var(--dur-slow, 240ms) var(--ease-standard, cubic-bezier(.4, 0, .2, 1));
}

/* ------------------------------------------------------------- La marque */

.zz-brand {
    flex: none;
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-4) var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--border-hairline);
}
.zz-brand-lockup {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: var(--space-2);
    text-decoration: none;
}
.zz-brand-mark { width: 34px; height: 34px; flex: none; object-fit: contain; display: block; }
.zz-brand-text { min-width: 0; }
.zz-brand-text b {
    display: block; white-space: nowrap;
    font: var(--weight-bold) 14.5px/1.15 var(--font-core);
    letter-spacing: var(--track-tight);
    color: var(--text-heading);
}
.zz-brand-text b i { font-style: normal; color: var(--green-600); }
.zz-brand-text small {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font: var(--weight-bold) 9px/1.5 var(--font-core);
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-placeholder);
}

.zz-rail-toggle {
    width: 28px; height: 28px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-hairline); border-radius: var(--radius-sm);
    background: var(--surface-card); color: var(--text-placeholder);
    cursor: pointer; outline-offset: 2px;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.zz-rail-toggle:hover {
    color: var(--text-brand);
    border-color: var(--border-focus);
    background: var(--surface-brand-soft);
}
.zz-rail-toggle svg { transition: transform var(--dur-slow, 240ms) var(--ease-standard, cubic-bezier(.4, 0, .2, 1)); }
.is-rail .zz-rail-toggle svg { transform: rotate(180deg); }

/* ---------------------------------------------------------------- Navigation */

.zz-side-nav {
    flex: 1; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    padding: var(--space-2) var(--space-3) var(--space-4);
    display: flex; flex-direction: column; gap: 3px;
}

.zz-nav-head {
    font: var(--weight-bold) 9.5px/1 var(--font-core);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-placeholder);
    padding: var(--space-4) var(--space-3) var(--space-2);
    border-top: 1px solid var(--border-hairline);
}

.zz-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 42px;
    padding: 10px var(--space-3);
    border: none;
    border-radius: var(--radius-md);
    font: var(--weight-medium) 13px/1.2 var(--font-core);
    text-align: left;
    text-decoration: none;
    transition: background-color var(--dur-fast, 150ms) var(--ease-standard, cubic-bezier(.4, 0, .2, 1)),
                color var(--dur-fast, 150ms) var(--ease-standard, cubic-bezier(.4, 0, .2, 1));
}
.zz-nav > svg { flex: none; }
/*
 * `.zz-root a` in the vendored design system (base.css) sets every anchor's
 * color at (class + element) specificity — higher than a single class. Idle
 * and active nav links need the extra `.zz-side-nav`/`.zz-drawer` ancestor
 * class to actually win instead of silently falling back to brand orange.
 */
.zz-side-nav .zz-nav-idle,
.zz-drawer .zz-nav-idle       { background: transparent; color: var(--text-muted); }
.zz-side-nav .zz-nav-idle:hover,
.zz-drawer .zz-nav-idle:hover { background: var(--surface-sunken); color: var(--text-heading); }
.zz-side-nav .zz-nav-active,
.zz-drawer .zz-nav-active {
    background: var(--brand-gradient);
    color: var(--text-on-brand);
    font-weight: var(--weight-semibold);
    box-shadow: var(--shadow-brand);
}

.zz-nav-badge {
    flex: none; min-width: 20px; text-align: center;
    padding: 0 6px; border-radius: var(--radius-pill);
    font: var(--weight-bold) 10.5px/19px var(--font-core);
    background: var(--surface-sunken); color: var(--text-muted);
}
.zz-nav-active .zz-nav-badge { background: rgba(255, 255, 255, .28); color: var(--text-on-brand); }

/* ------------------------------------------------------------ Pied de barre */

.zz-side-foot {
    flex: none;
    padding: var(--space-3);
    border-top: 1px solid var(--border-hairline);
    display: flex; flex-direction: column; gap: var(--space-3);
}
.zz-usercard {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
    background: var(--surface-page);
}
.zz-usercard-link {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: var(--space-2);
    text-decoration: none;
}
.zz-usercard-av {
    width: 32px; height: 32px; flex: none; border-radius: var(--radius-circle);
    display: flex; align-items: center; justify-content: center;
    font: var(--weight-bold) 11.5px/1 var(--font-core);
    color: var(--text-on-brand); background: var(--brand-gradient);
}

/* ------------------------------------- Le rail : barre repliee sous 140px */

@container (max-width: 140px) {
    .zz-sidebar-label { display: none; }
    .zz-brand { flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; }
    .zz-brand-lockup { flex: none; justify-content: center; }
    .zz-side-nav { padding-left: 0; padding-right: 0; align-items: center; }
    .zz-nav { width: 48px; min-height: 44px; padding: 0; justify-content: center; }
    .zz-nav-badge {
        position: absolute; top: 3px; right: 3px;
        min-width: 17px; padding: 0 4px;
        font-size: 9px; line-height: 17px;
    }
    .zz-side-foot { padding-left: 0; padding-right: 0; align-items: center; }
    .zz-usercard { border: none; background: transparent; padding: 0; justify-content: center; }
    .zz-usercard-link { flex: none; }
}

.zz-icon-btn {
    width: 30px; height: 30px;
    border: none; border-radius: 9px;
    background: transparent; color: #9CA3AF;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.zz-icon-btn:hover { background: #F1F2F4; color: #374151; }
.zz-sidebar .zz-icon-btn:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }

/* -------------------------------------------------------------------- Buttons */

/* Press is scale(.97) with orange darkening — never an opacity change.

   The fill sits on the dark half of the brand ramp (orange-600 → orange-700), not
   on orange-500: white on #F26F21 is ~3:1, too weak for a 13.5px label, and the
   wide ambient glow blurred the pill's edge into the page on top of that. */
.zz-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; border-radius: 999px;
    background: linear-gradient(90deg, #9e3800, #C2490A);
    color: #FFFFFF; font-weight: 700; letter-spacing: .01em; cursor: pointer;
    box-shadow: 0 4px 12px rgba(173, 162, 156, 0.22);
    transition: filter 150ms ease, transform 90ms ease;
    text-decoration: none;
}
.zz-btn-primary:hover  { filter: brightness(1.09); color: #FFFFFF; }
.zz-btn-primary:active { transform: scale(.97); }
.zz-btn-primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.zz-btn-outline {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid #E7E8EB; border-radius: 999px;
    background: #FFFFFF; color: #374151; font-weight: 600; cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, transform 90ms ease;
    text-decoration: none;
}
.zz-btn-outline:hover  { border-color: #D3D5DA; color: #17181B; }
.zz-btn-outline:active { transform: scale(.97); }

.zz-btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; border-radius: 12px;
    background: #DC2626; color: #FFFFFF;
    font-size: 13.5px; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(220, 38, 38, .26);
    transition: filter 150ms ease, transform 120ms ease;
}
.zz-btn-danger:hover  { filter: brightness(1.07); color: #FFFFFF; }
.zz-btn-danger:active { transform: scale(.97); }
.zz-btn-danger:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.zz-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; border-radius: 999px;
    background: transparent; color: #6B7280; font-weight: 600; cursor: pointer;
}
.zz-btn-ghost:hover { color: #17181B; }

.zz-link {
    border: none; background: transparent; color: #E25A0F;
    font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 2px;
}
.zz-link:hover { color: #F26F21; }

/* --------------------------------------------------------------------- Fields */

/* Focus is a 2px #FF8C42 ring. */
.zz-input, .zz-select, .zz-textarea {
    width: 100%;
    border: 1px solid #E7E8EB;
    border-radius: 14px;
    background: #FFFFFF;
    font-size: 13.5px;
    color: #17181B;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.zz-input, .zz-select { height: 46px; padding: 0 15px; }
.zz-select { cursor: pointer; padding-right: 12px; }
.zz-textarea { padding: 12px 14px; line-height: 1.55; resize: vertical; }
.zz-input:focus, .zz-select:focus, .zz-textarea:focus {
    border-color: #FF8C42;
    box-shadow: 0 0 0 2px #FFEDE0;
}
.zz-input.is-invalid, .zz-select.is-invalid, .zz-textarea.is-invalid { border-color: #EF4444; }
.zz-field-error { font-size: 11.5px; color: #B42318; margin-top: 6px; }

.zz-filter-input, .zz-filter-select {
    height: 42px;
    border: 1px solid #E7E8EB;
    border-radius: 999px;
    font-size: 12.5px;
    color: #374151;
    outline: none;
    padding: 0 14px;
    background: #FFFFFF;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.zz-filter-input { background: #F7F7F8; color: #17181B; font-size: 13px; }
.zz-filter-select { cursor: pointer; }
.zz-filter-input:focus, .zz-filter-select:focus {
    border-color: #FF8C42; background: #FFFFFF; box-shadow: 0 0 0 2px #FFEDE0;
}

/* --------------------------------------------------------------------- Cards */

/* White, 1px hairline, two-layer ambient shadow. Never a hard drop shadow. */
.zz-card {
    background: #FFFFFF;
    border: 1px solid #E7E8EB;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(23, 24, 27, .04), 0 6px 16px rgba(23, 24, 27, .04);
}
.zz-card-lg { border-radius: 16px; }

.zz-row-link {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 13px 18px;
    border: none; border-bottom: 1px solid #F7F7F8;
    background: transparent; cursor: pointer; text-align: left;
    text-decoration: none;
}
.zz-row-link:hover { background: #FBFBFC; }

.zz-row-btn {
    height: 32px; padding: 0 11px;
    border: 1px solid #E7E8EB; border-radius: 999px;
    background: #FFFFFF; color: #374151;
    font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.zz-row-btn:hover { border-color: #D3D5DA; }

.zz-row-btn-primary {
    height: 32px; padding: 0 12px;
    border: none; border-radius: 999px;
    background: linear-gradient(90deg, #F26F21, #E25A0F);
    color: #FFFFFF; font-size: 11.5px; font-weight: 600; cursor: pointer;
    box-shadow: 0 3px 10px rgba(242, 111, 33, .26);
}
.zz-row-btn-primary:hover { filter: brightness(1.06); }

/* The backoffice's "Note" button: plain until a note is written, then tinted so
   an annotated demande stands out in the list without being opened. Shared by
   the row pill and the mobile card's outline button. */
.zz-note-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.zz-note-btn svg { flex: none; }
.zz-note-btn.has-note { background: #FFF7F1; border-color: #FFD9BF; color: #B8480C; }
.zz-note-btn.has-note:hover { border-color: #FFB27E; color: #B8480C; }

/* ------------------------------------------- Réception d'argent (demandeur)
   The requester's acknowledgement is its own act, not a second "Traiter": it is
   green like the Réception badge it produces, so the button and the resulting
   status read as one state. One class, three footprints — page, row, card. */
.zz-receive { display: inline-flex; min-width: 0; }

.zz-receive-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; height: 38px; padding: 0 17px;
    border: none; border-radius: 999px;
    /* Darker than green-500/600: white on those falls under 4.5:1 at this size. */
    background: linear-gradient(90deg, #0D7F38, #0A6B2E);
    color: #FFFFFF; font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
    white-space: nowrap; cursor: pointer;
    box-shadow: 0 3px 10px rgba(10, 107, 46, .24);
    transition: filter 150ms ease, transform 90ms ease;
}
.zz-receive-btn:hover  { filter: brightness(1.07); color: #FFFFFF; }
.zz-receive-btn:active { transform: scale(.97); }
.zz-receive-btn:focus-visible { outline: 2px solid #0D7F38; outline-offset: 2px; }
.zz-receive-btn svg { flex: none; }

/* Detail screen: aligned with the 42px header actions beside it, and a full-width
   target on a phone rather than a small pill under a wrapped title. */
.zz-receive.is-page .zz-receive-btn { height: 42px; padding: 0 20px; font-size: 13.5px; }

/* Table row: the compact pill of the row's action cell. */
.zz-receive.is-row .zz-receive-btn { height: 32px; padding: 0 13px; font-size: 11.5px; gap: 5px; }

/* Mobile card: shares the row of actions with "Voir", so it grows like it does. */
.zz-receive.is-block { flex: 1 1 0; }
.zz-receive.is-block .zz-receive-btn { min-height: 44px; font-size: 13px; }

@media (max-width: 560px) {
    .zz-receive.is-page { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .zz-receive-btn { transition: none; }
    .zz-receive-btn:active { transform: none; }
}

.zz-notice {
    background: #FFF7F1;
    border: 1px solid #FFD9BF;
    border-radius: 14px;
    padding: 13px 16px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #B8480C;
}

/* Selection: peach fill, 1.5px orange border, check bubble at the top-right. */
.zz-tile {
    position: relative;
    display: flex; align-items: flex-start; gap: 11px;
    min-height: 64px; padding: 13px 14px;
    border: 1px solid #E7E8EB; border-radius: 14px;
    background: #FFFFFF; cursor: pointer; text-align: left;
    transition: border-color 150ms ease, background-color 150ms ease;
}
.zz-tile:hover { border-color: #FFB27E; background: #FFF7F1; }
.zz-tile.is-selected { border: 1.5px solid #F26F21; background: #FFF7F1; }

.zz-chip {
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 15px;
    border: 1px solid #E7E8EB; border-radius: 999px;
    background: #FFFFFF; color: #374151;
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.zz-chip:hover { border-color: #FFB27E; }
.zz-chip.is-selected { border: 1.5px solid #F26F21; background: #FFEDE0; color: #B8480C; font-weight: 600; }

.zz-step-num {
    width: 20px; height: 20px; border-radius: 50%;
    background: #FFEDE0; color: #B8480C;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex: none;
}

.zz-num { font-variant-numeric: tabular-nums; }

/* Keyboard focus, consistent across every interactive surface — the same
   treatment .zz-notif-trigger already used, extended to the elements that had
   nothing but the browser's inconsistent default outline. */
.zz-btn-primary:focus-visible,
.zz-btn-outline:focus-visible,
.zz-btn-danger:focus-visible,
.zz-btn-ghost:focus-visible,
.zz-row-btn:focus-visible,
.zz-row-btn-primary:focus-visible,
.zz-icon-btn:focus-visible,
.zz-nav:focus-visible,
.zz-chip:focus-visible,
.zz-link:focus-visible {
    outline: 2px solid #F26F21;
    outline-offset: 2px;
}

/* ------------------------------------------------------------- Four breakpoints */

.zz-sidebar { display: flex; }
.zz-burger  { display: none; }
.zz-cards   { display: none; }

/* The table -> cards switch happens at the breakpoint, not by hiding columns. */
@media (max-width: 899px) {
    .zz-sidebar { display: none; }
    .zz-burger {
        display: flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; flex: none;
        border: 1px solid #E7E8EB; border-radius: 12px;
        background: #FFFFFF; color: #374151; cursor: pointer;
    }
    .zz-table { display: none; }
    .zz-cards { display: flex; flex-direction: column; gap: 11px; }
}

/* Laptop width (900-1100px): the full 250px sidebar no longer fits alongside
   the content comfortably, but there's no need to hide it behind a drawer
   either — it collapses to an icon rail instead. Labels carry over as a
   `title` attribute on each link. `!important` is needed here (as it already
   is for `[x-cloak]` above) because the width is set inline on the element,
   which a plain stylesheet rule cannot outrank. */
@media (min-width: 900px) and (max-width: 1180px) {
    .zz-shell:not(.is-wide) { --sidebar-w: 76px; }
}

.zz-scroll-x { overflow-x: auto; }

/* Filter bars (request-filters component, the audit screen's own form): each
   field keeps a comfortable minimum instead of shrinking to a sliver, and on
   a phone the whole bar stacks to full-width fields and full-width buttons —
   the shrink-to-fit behaviour a bare `flex-wrap` gives you reads as broken on
   a 375px screen. `!important` overrides each field's inline `flex:0 1 Npx`
   basis, the same way the icon-rail breakpoint above overrides inline width. */
.zz-filter-bar > * { flex-grow: 1 !important; }
/* On a phone the bar becomes a two-column grid: search full-width, selects
   and dates paired, the two buttons side by side. Grid (not a column flexbox)
   because in a column the inline `flex:0 1 Npx` basis would become each
   field's *height* and turn the pills into giant ovals. */
@media (max-width: 560px) {
    .zz-filter-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        padding: 12px !important;
    }
    .zz-filter-bar > * {
        flex: none !important;
        width: 100%;
        min-width: 0 !important;
        height: 42px !important;
        justify-content: center;
    }
    .zz-filter-bar > input[type="search"],
    .zz-filter-bar > .zz-filter-select:nth-of-type(3) { grid-column: 1 / -1; }
    .zz-filter-select { padding: 0 10px; text-overflow: ellipsis; }
}

/* Configuration table rows (users/zones/reasons/types/audit lists). */
.zz-config-row { transition: background-color 120ms ease; }
.zz-config-row:hover { background: #FBFBFC; }
.zz-config-row:last-child { border-bottom: none; }

/* Dashboard stat tiles. A lower minmax floor than the desktop-authored inline
   version so two columns still fit inside a 360-390px phone's content width;
   collapses to one column on the very narrowest devices. */
.zz-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}
@media (max-width: 360px) {
    .zz-stat-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- Native checkboxes */

/* A .zz-chip wrapping a checkbox (zone / request-type assignment) highlights
   itself the same way the JS-driven picker chips do, without needing JS here. */
.zz-chip:has(input:checked) {
    border: 1.5px solid #F26F21;
    background: #FFEDE0;
    color: #B8480C;
    font-weight: 600;
}
.zz-chip input[type="checkbox"],
.zz-chip input[type="radio"] {
    accent-color: #F26F21;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* ------------------------------------------------------------------- Errors */

.zz-form-error {
    background: #FEECEC;
    border: 1px solid #F5C6C6;
    border-radius: 14px;
    padding: 13px 16px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #B42318;
}

/* ------------------------------------------------------------ Notifications

   The bell is the only surface in the app that interrupts an admin, so it is
   the one place that earns a little motion: the badge pulses while something is
   unread, and the glyph swings once each time the count goes up. Both are
   dropped entirely under `prefers-reduced-motion`. */

.zz-notif-trigger {
    position: relative;
    width: 38px; height: 38px;
    border: 1px solid transparent; border-radius: 12px;
    background: transparent; color: #6B7280;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.zz-notif-trigger:hover { background: #F5F5F7; color: #17181B; }
.zz-notif-trigger.is-open { background: #FFF3EA; border-color: #FBD9BE; color: #E25A0F; }
.zz-notif-trigger:focus-visible { outline: 2px solid #F26F21; outline-offset: 2px; }
.zz-sound-toggle.is-muted { color: #9CA3AF; }
.zz-sound-toggle.is-playing { background: #FFF3EA; border-color: #FBD9BE; color: #E25A0F; animation: zzSoundPulse 1.5s ease-in-out infinite; }
@keyframes zzSoundPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 111, 33, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(242, 111, 33, 0); }
}

@keyframes zzBellSwing {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(13deg); }
    35% { transform: rotate(-11deg); }
    55% { transform: rotate(7deg); }
    75% { transform: rotate(-4deg); }
}
.zz-notif-trigger.is-ringing > svg { animation: zzBellSwing 900ms ease-in-out; transform-origin: 50% 15%; }

.zz-notif-badge {
    position: absolute; top: 1px; right: 1px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; border: 2px solid #FFFFFF;
    background: linear-gradient(180deg, #F43F5E, #E11D48);
    color: #FFFFFF;
    font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: -.2px;
    display: flex; align-items: center; justify-content: center;
    animation: zzBadgePulse 2.4s ease-out infinite;
}

/* The ring expands as a spreading box-shadow rather than a scaled pseudo-element:
   the number stays crisp, and there is no stacking order to lose against the
   trigger's own background once the panel is open. */
@keyframes zzBadgePulse {
    0%       { box-shadow: 0 2px 6px rgba(225, 29, 72, .38), 0 0 0 0 rgba(225, 29, 72, .5); }
    70%, 100% { box-shadow: 0 2px 6px rgba(225, 29, 72, .38), 0 0 0 8px rgba(225, 29, 72, 0); }
}

.zz-notif-panel {
    position: absolute; top: calc(100% + 12px); right: 0;
    width: 404px; max-width: calc(100vw - 32px);
    background: #FFFFFF;
    border: 1px solid #ECEDEF; border-radius: 20px;
    box-shadow: 0 1px 2px rgba(23, 24, 27, .04), 0 24px 56px -12px rgba(23, 24, 27, .22);
    display: flex; flex-direction: column; overflow: hidden;
    z-index: 50;
}

.zz-notif-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 18px 13px;
    border-bottom: 1px solid #F1F2F4;
}
.zz-notif-head-title {
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 700; color: #17181B; letter-spacing: -.2px;
}
.zz-notif-count {
    min-width: 20px; padding: 2px 7px;
    border-radius: 999px; background: #FFF3EA;
    color: #E25A0F; font-size: 10.5px; font-weight: 700; line-height: 1.5;
}
.zz-notif-markall {
    border: none; background: transparent; padding: 4px 2px;
    color: #6B7280; font-size: 11.5px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: color 120ms ease;
}
.zz-notif-markall:hover { color: #E25A0F; }

.zz-notif-list { overflow-y: auto; max-height: 58vh; }
.zz-notif-list::-webkit-scrollbar { width: 10px; }
.zz-notif-list::-webkit-scrollbar-thumb {
    background: #E1E2E5; border-radius: 999px; border: 3px solid #FFFFFF;
}

/* `--tone` is set per row from the notification's own tone, so the icon tint and
   the unread dot both derive from one value instead of parallel classes. */
.zz-notif-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 13px 18px;
    border-bottom: 1px solid #F5F5F7;
    text-decoration: none;
    transition: background-color 130ms ease;
}
.zz-notif-item:hover { background: #FAFAFB; }
.zz-notif-item:last-child { border-bottom: none; }
.zz-notif-item:focus-visible { outline: 2px solid #F26F21; outline-offset: -2px; }

.zz-notif-item.is-unread { background: #FEFCFA; }
.zz-notif-item.is-unread:hover { background: #FDF8F4; }

.zz-notif-icon {
    width: 34px; height: 34px; flex: none;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: #F5F5F7;
    background: color-mix(in srgb, var(--tone, #9CA3AF) 12%, #FFFFFF);
    color: var(--tone, #9CA3AF);
}

.zz-notif-body { min-width: 0; flex: 1; }
.zz-notif-message {
    display: block;
    font-size: 12.5px; line-height: 1.5; color: #2B2D31;
}
.zz-notif-item.is-unread .zz-notif-message { color: #17181B; font-weight: 500; }

.zz-notif-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-top: 5px;
    font-size: 10.5px; color: #9CA3AF;
}
.zz-notif-ref {
    font-weight: 700; letter-spacing: .3px; color: #6B7280;
    font-variant-numeric: tabular-nums;
}
.zz-notif-meta-sep { width: 3px; height: 3px; border-radius: 50%; background: #D8D9DD; }

.zz-notif-unread-dot {
    width: 7px; height: 7px; flex: none; margin-top: 13px;
    border-radius: 50%; background: var(--tone, #F26F21);
}

.zz-notif-empty {
    padding: 40px 24px 44px; text-align: center;
}
.zz-notif-empty-glyph {
    width: 48px; height: 48px; margin: 0 auto 14px;
    border-radius: 16px; background: #F7F7F8; color: #C4C6CB;
    display: flex; align-items: center; justify-content: center;
}
.zz-notif-empty-title { font-size: 13px; font-weight: 600; color: #4B5563; }
.zz-notif-empty-hint { font-size: 11.5px; color: #9CA3AF; margin-top: 4px; line-height: 1.55; }

.zz-notif-foot {
    padding: 11px 18px; border-top: 1px solid #F1F2F4; background: #FCFCFD;
    text-align: center;
}
.zz-notif-foot a { font-size: 11.5px; font-weight: 600; }

@media (max-width: 560px) {
    .zz-notif-panel { position: fixed; top: 62px; right: 16px; left: 16px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .zz-notif-trigger.is-ringing > svg { animation: none; }
    .zz-sound-toggle.is-playing { animation: none; }
    .zz-notif-badge { animation: none; box-shadow: 0 2px 6px rgba(225, 29, 72, .38); }
}

/* ============================================================
   COCKPIT
   Barre superieure, tuiles de synthese, files de travail.
   Tout passe par les tokens du design system : une seule
   source de verite pour la couleur, le rayon et l'ombre.
   ============================================================ */

/* ---------------------------------------------------- Barre superieure */

.zz-topbar {
    position: sticky; top: 0; z-index: 30;
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-hairline);
    padding: 12px clamp(16px, 3vw, 28px);
    display: flex; align-items: center; gap: var(--space-4);
    flex-wrap: wrap;
}

/* Le titre garde la priorite d'espace ; les outils a droite ne se compriment pas. */
.zz-topbar-title { flex: 1 1 240px; min-width: 0; }

.zz-greet {
    font: var(--weight-bold) clamp(19px, 2vw, 24px)/var(--line-tight) var(--font-core);
    letter-spacing: var(--track-tight);
    color: var(--text-heading);
    margin: 0;
}
.zz-greet em {
    font-style: normal;
    color: var(--text-brand);
}
.zz-greet-sub {
    font: var(--text-meta);
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.zz-topbar-tools {
    display: flex; align-items: center; gap: var(--space-2);
    flex: 0 1 auto; min-width: 0;
}

/* --------------------------------------------------------- Recherche */

.zz-search {
    flex: 1 1 200px; min-width: 0; max-width: 340px;
    display: flex; align-items: center; gap: var(--space-2);
    height: var(--control-h-md);
    padding: 0 var(--space-2) 0 var(--space-3);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    background: var(--surface-page);
    color: var(--text-placeholder);
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.zz-search:focus-within {
    background: var(--surface-card);
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(242, 111, 33, .12);
}
.zz-search input {
    flex: 1; min-width: 0;
    border: none; background: transparent; outline: none;
    font: var(--text-meta); color: var(--text-heading);
}
.zz-search input::placeholder { color: var(--text-placeholder); }
.zz-search input::-webkit-search-cancel-button { display: none; }

.zz-kbd {
    flex: none;
    font: var(--weight-semibold) 10.5px/1 var(--font-core);
    color: var(--text-muted);
    background: var(--surface-card);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-xs);
    padding: 4px 6px;
}

/* ------------------------------------------------------------ Horloge */

.zz-clock {
    flex: none; text-align: right; line-height: var(--line-snug);
    padding-right: var(--space-1);
}
.zz-clock-date {
    font: var(--weight-medium) 11px/1.3 var(--font-core);
    color: var(--text-muted); white-space: nowrap;
}
.zz-clock-time {
    font: var(--weight-bold) var(--size-h3)/1.15 var(--font-core);
    color: var(--text-heading);
    letter-spacing: var(--track-tight);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- Puce profil */

.zz-root .zz-userchip {
    flex: none; display: flex; align-items: center; gap: var(--space-2);
    padding: 3px var(--space-2) 3px 3px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-muted); text-decoration: none;
    transition: border-color .16s ease, background .16s ease;
}
.zz-root .zz-userchip:hover {
    border-color: var(--border-focus);
    background: var(--surface-brand-soft);
    color: var(--text-brand);
}
.zz-userchip-av {
    width: 30px; height: 30px; border-radius: var(--radius-circle); flex: none;
    display: flex; align-items: center; justify-content: center;
    font: var(--weight-bold) 11px/1 var(--font-core);
    color: var(--text-on-brand);
    background: var(--brand);
}

@media (max-width: 1080px) { .zz-clock { display: none; } }
@media (max-width: 760px) {
    .zz-search { order: 5; flex-basis: 100%; max-width: none; }
    .zz-topbar-tools { flex-wrap: wrap; }
}

/* Sur telephone le raccourci clavier ne veut rien dire, et le sous-titre a
   droit a deux lignes plutot qu'a une troncature. */
@media (max-width: 560px) {
    .zz-topbar { padding: 10px var(--space-4); gap: var(--space-3); }
    .zz-kbd { display: none; }
    .zz-greet-sub { white-space: normal; }
}

/* ============================================================
   Tuiles de synthese
   Le chiffre porte l'information ; la jauge n'apparait que
   lorsqu'une part reelle existe — jamais de courbe decorative.
   ============================================================ */

.zz-stat-grid {
    display: grid; gap: var(--gap-card-stack);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.zz-stat {
    padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-2);
}
.zz-stat-head { display: flex; align-items: center; gap: var(--space-2); }

.zz-stat-icon {
    width: 30px; height: 30px; flex: none;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
}
.zz-stat-icon.is-brand   { background: var(--orange-50);   color: var(--orange-600); }
.zz-stat-icon.is-success { background: var(--green-50);    color: var(--green-600); }
.zz-stat-icon.is-info    { background: #EFF4FF;            color: var(--blue-500); }
.zz-stat-icon.is-neutral { background: var(--neutral-100); color: var(--neutral-500); }

/* Libelle en casse de phrase : les capitales espacees criaient plus fort que le chiffre. */
.zz-stat-label {
    font: var(--weight-semibold) var(--size-body-sm)/1.3 var(--font-core);
    color: var(--text-muted);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Chiffres proportionnels : tabular-nums fait respirer un nombre court a cette taille. */
.zz-stat-value {
    font: var(--weight-bold) 32px/1 var(--font-core);
    letter-spacing: -.03em;
    color: var(--text-heading);
    margin-top: var(--space-1);
}
.zz-stat-value.is-brand   { color: var(--orange-600); }
.zz-stat-value.is-success { color: var(--green-600); }
.zz-stat-value.is-info    { color: var(--blue-500); }

.zz-stat-hint {
    font: var(--weight-regular) var(--size-caption)/1.4 var(--font-core);
    color: var(--text-muted);
}

/* La part est une proportion : elle se lit comme une jauge, pas comme une tendance. */
.zz-stat-meter { margin-top: auto; padding-top: var(--space-2); }
.zz-stat-meter .zz-track { height: 6px; }
.zz-stat-share {
    display: flex; align-items: baseline; gap: 5px;
    margin-top: 6px;
    font: var(--weight-regular) 11px/1 var(--font-core);
    color: var(--text-muted);
}
.zz-stat-share b {
    font-weight: var(--weight-bold);
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- Jauges */

.zz-track {
    height: 8px; border-radius: var(--radius-pill);
    background: var(--surface-sunken); overflow: hidden;
}
.zz-track > span {
    display: block; height: 100%; border-radius: var(--radius-pill);
    background: var(--neutral-400);
    transition: width .5s cubic-bezier(.16, 1, .3, 1);
}
.zz-track.is-brand   > span { background: var(--orange-500); }
.zz-track.is-success > span { background: var(--green-500); }
.zz-track.is-info    > span { background: var(--blue-500); }

/* --------------------------------------------- Files, severite, etats */

.zz-sev { width: 3px; align-self: stretch; min-height: 32px; border-radius: var(--radius-pill); flex: none; }
.zz-sev.is-1 { background: var(--red-500); }
.zz-sev.is-2 { background: var(--orange-500); }
.zz-sev.is-3 { background: var(--yellow-500); }
.zz-sev.is-4 { background: var(--neutral-300); }

.zz-dot { width: 8px; height: 8px; border-radius: var(--radius-circle); flex: none; }
.zz-dot.is-overdue { background: var(--red-500);     box-shadow: 0 0 0 3px var(--red-50); }
.zz-dot.is-today   { background: var(--yellow-500);  box-shadow: 0 0 0 3px #FEF6E0; }
.zz-dot.is-unknown { background: var(--neutral-400); box-shadow: 0 0 0 3px var(--neutral-100); }
.zz-dot.is-planned { background: var(--blue-500);    box-shadow: 0 0 0 3px #EFF4FF; }

/* ------------------------------------------------------ Pied de carte */

.zz-root .zz-cardfoot {
    display: flex; align-items: center; gap: var(--space-3);
    margin: 0 var(--space-4) var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-page);
    border: 1px solid var(--border-hairline);
    text-decoration: none; color: inherit;
    transition: border-color .16s ease, background .16s ease;
}
.zz-root .zz-cardfoot:hover { border-color: var(--border-focus); background: var(--surface-brand-soft); }
.zz-cardfoot-glyph {
    width: 30px; height: 30px; flex: none; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    background: var(--orange-50); color: var(--orange-600);
}

/* --------------------------------------------------- Devise laterale */

.zz-motto {
    display: flex; align-items: center; justify-content: center;
    gap: var(--space-2); flex-wrap: wrap;
}
.zz-motto span {
    display: inline-flex; align-items: center; gap: 4px;
    font: var(--weight-semibold) 9px/1 var(--font-core);
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-placeholder);
}
.zz-motto i { width: 5px; height: 5px; border-radius: var(--radius-circle); flex: none; }

/* ------------------------------------------------------ Bandeau signature */

.zz-banner {
    position: relative; overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-hairline);
    background: var(--surface-card);
    padding: var(--space-5) clamp(var(--space-4), 3vw, var(--space-8));
    display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
}
/* Un halo tres doux cote droit : la couleur reste dans les mots, pas dans le fond. */
.zz-banner::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(480px 160px at 100% 50%, rgba(22, 163, 74, .07), transparent 70%);
}
.zz-banner > * { position: relative; z-index: 1; }

.zz-banner-text { flex: 1 1 260px; min-width: 0; }
.zz-banner-claim {
    font: var(--weight-bold) clamp(17px, 2vw, 21px)/var(--line-snug) var(--font-core);
    letter-spacing: var(--track-tight);
    color: var(--text-heading);
    margin: 0;
}
/* Les trois verbes suivent la progression du logo : orange -> ambre -> vert. */
.zz-banner-claim span:nth-child(1) { color: var(--orange-500); }
.zz-banner-claim span:nth-child(2) { color: var(--yellow-500); }
.zz-banner-claim span:nth-child(3) { color: var(--green-500); }
.zz-banner-sub {
    font: var(--text-meta);
    color: var(--text-muted);
    margin-top: var(--space-1);
}
.zz-banner-mark {
    flex: none; width: 42px; height: 42px; object-fit: contain;
    opacity: .95;
}
@media (max-width: 560px) { .zz-banner-mark { display: none; } }

.zz-root .zz-banner-go {
    width: var(--control-h-sm); height: var(--control-h-sm); flex: none;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center; text-decoration: none;
    background: var(--brand); color: var(--text-on-brand);
    transition: background .16s ease, transform .16s ease;
}
.zz-root .zz-banner-go:hover { background: var(--brand-press); color: var(--text-on-brand); transform: translateX(2px); }

/* ============================================================
   Telephone et appli installee (ecran d'accueil)
   Place en fin de fichier pour passer apres les regles de la
   barre superieure. `env(safe-area-inset-*)` vaut 0 hors encoche :
   la page ne bouge pas sur un ecran classique. Les `!important`
   ecrasent des styles poses en ligne, comme ailleurs ici.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.zz-root { -webkit-tap-highlight-color: transparent; }

.zz-topbar {
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-left: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-left));
    padding-right: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-right));
}
.zz-main {
    padding-left: calc(clamp(16px, 2.4vw, 26px) + env(safe-area-inset-left)) !important;
    padding-right: calc(clamp(16px, 2.4vw, 26px) + env(safe-area-inset-right)) !important;
    padding-bottom: calc(clamp(16px, 2.4vw, 26px) + env(safe-area-inset-bottom)) !important;
}
.zz-drawer-panel {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

@media (max-width: 560px) {
    .zz-topbar {
        padding-top: calc(10px + env(safe-area-inset-top));
        padding-left: calc(var(--space-4) + env(safe-area-inset-left));
        padding-right: calc(var(--space-4) + env(safe-area-inset-right));
    }

    /* Le titre prend toute la ligne, les outils passent dessous a pleine largeur. */
    .zz-topbar-title { flex-basis: calc(100% - 56px); }
    .zz-topbar-tools { flex: 1 1 100%; justify-content: flex-end; }

    /* Le bouton « Nouvelle demande » devient une pastille icone. */
    .zz-topbar-cta { width: 44px; padding: 0 !important; justify-content: center; }
    .zz-topbar-cta-label { display: none; }

    /* iOS zoome sur tout champ sous 16px et ne dezoome jamais. */
    .zz-root input:not([type="checkbox"]):not([type="radio"]),
    .zz-root select,
    .zz-root textarea { font-size: 16px !important; }

    .zz-form-grid { grid-template-columns: 1fr !important; }

    .zz-toast {
        left: 16px; right: 16px !important;
        bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        max-width: none !important;
    }

    .zz-modal-panel { padding-bottom: env(safe-area-inset-bottom); }
}

/* Lancee depuis l'ecran d'accueil : pas de rebond qui devoile le fond. */
@media (display-mode: standalone) {
    html, body { overscroll-behavior-y: none; }
}