/*
 * Rymotel back office: shared stylesheet of the four Filament panels (admin, partner, ops, support).
 * docs/design/backoffice/SPEC.md §2.6, the polish of 2026-10-05 (docs/design/backoffice/polish/SPEC-polish.md §2, §3);
 * docs/design/backoffice.md lists every overridden fi-* selector with the Filament 5.9 view or CSS that proves it.
 *
 * Plain unlayered CSS, published by `php artisan filament:assets` to public/css/app/ (no Vite, no Node at release,
 * ADR-054). Every selector starts with .fi-, [dir="rtl"] .fi-, [dir="rtl"] .rym-, :root, html.fi, .rym- or a.rym-;
 * logical properties only; no !important, no `transition: all`, no ease-in-out, and :hover only inside
 * `@media (hover: hover) and (pointer: fine)`. Never redefine --primary-* or --gray-*: Filament prints them inline
 * after this file. Filament's own rules live in cascade layers, so an unlayered rule here wins without !important.
 */

/* 1. Fonts: "Rymotel Sans" = Manrope (Latin) + Noto Sans Arabic, self-hosted (SIL OFL 1.1, licences next to the
   files). The browser downloads a face only when a character of its range is on the page. */
@font-face {
    font-family: "Rymotel Sans";
    src: url("../../fonts/rymotel/manrope-latin-wght.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    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: "Rymotel Sans";
    src: url("../../fonts/rymotel/manrope-latin-ext-wght.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF,
        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Rymotel Sans";
    src: url("../../fonts/rymotel/noto-sans-arabic-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
        U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* 2. Tokens (what Filament has no variable for; SPEC-polish §2). */
:root {
    /* kept */
    --rym-bo-focus: #b4513a;
    --rym-bo-focus-width: 3px;
    --rym-bo-focus-offset: 2px;
    --rym-bo-target: 44px;

    /* type, Latin (Manrope variable 200-800): size / line height */
    --rym-bo-fs-label: .75rem;          /* 12/16 group labels, chips, menu and tab counts */
    --rym-bo-lh-label: 1rem;
    --rym-bo-fs-meta: .8125rem;         /* 13/18 meta, descriptions, badges, table headers */
    --rym-bo-lh-meta: 1.125rem;
    --rym-bo-fs-body: .875rem;          /* 14/20 = Filament text-sm: tables, menu, inputs */
    --rym-bo-lh-body: 1.25rem;
    --rym-bo-fs-row: .9375rem;          /* 15/22 attention rows, subheading, empty heading */
    --rym-bo-lh-row: 1.375rem;
    --rym-bo-fs-section: 1.0625rem;     /* 17/24 section and widget headings */
    --rym-bo-lh-section: 1.5rem;
    --rym-bo-fs-card: 1.25rem;          /* 20/26 phone task card title */
    --rym-bo-lh-card: 1.625rem;
    --rym-bo-fs-figure: 1.625rem;       /* 26/32 key-figure value */
    --rym-bo-lh-figure: 2rem;
    --rym-bo-fs-title: 1.75rem;         /* 28/34 page title (24/32 under 40 rem) */
    --rym-bo-lh-title: 2.125rem;
    --rym-bo-fw-section: 650;
    --rym-bo-track-title: -.02em;
    --rym-bo-track-figure: -.01em;
    --rym-bo-track-label: .01em;

    /* space and density (4 px grid; Filament's 24 px widget gap and 32 px page gap are kept) */
    --rym-bo-row: 3rem;                 /* 48 px list row */
    --rym-bo-cta: 3.25rem;              /* 52 px phone primary, shortcut row */
    --rym-bo-tile: 2rem;                /* 32 px tone tile: 20 px glyph + 6 px padding */

    /* edges and elevation */
    --rym-bo-hairline: var(--gray-200);                       /* surfaces and dividers, decorative only */
    --rym-bo-edge-field: #7f8fa5;                             /* resting field edge, 3.24:1 on white (a literal, not a --gray-* redefinition) */
    --rym-bo-shadow-1: 0 1px 2px rgb(15 23 43 / .05);         /* the one surface shadow */
    --rym-bo-shadow-raised: 0 1px 2px rgb(15 23 43 / .06), 0 4px 12px rgb(15 23 43 / .08); /* no new use */

    /* motion */
    --rym-bo-transition: 150ms ease;
    --rym-bo-ease-out: cubic-bezier(.23, 1, .32, 1);
    --rym-bo-dur-press: 100ms;
}

/* 3. Typography. Arabic: no tracking (letter-spacing breaks the joining), one optical step larger at body sizes
   (Noto Sans Arabic has a smaller x-height), a 13 px floor, taller lines. Unlayered, so it beats Filament's
   @layer theme definitions. */
:root:lang(ar) {
    --tracking-tighter: 0;
    --tracking-tight: 0;
    --tracking-normal: 0;
    --tracking-wide: 0;
    --tracking-wider: 0;
    --tracking-widest: 0;
    --text-xs: 0.8125rem;
    --text-xs--line-height: 1.6;
    --text-sm: .9375rem;                /* 15 px */
    --text-sm--line-height: 1.7;
    --text-base: 1.0625rem;             /* 17 px */
    --text-base--line-height: 1.75;
    --text-lg--line-height: 1.7;
    --text-2xl--line-height: 1.45;
    --text-3xl--line-height: 1.4;
    --rym-bo-fs-label: .8125rem;        /* 13/20, the 13 px floor */
    --rym-bo-lh-label: 1.25rem;
    --rym-bo-fs-meta: .875rem;          /* 14/22 */
    --rym-bo-lh-meta: 1.375rem;
    --rym-bo-fs-body: .9375rem;         /* 15/24 */
    --rym-bo-lh-body: 1.5rem;
    --rym-bo-fs-row: 1rem;              /* 16/26 */
    --rym-bo-lh-row: 1.625rem;
    --rym-bo-lh-section: 1.75rem;       /* 17/28, 700 */
    --rym-bo-fw-section: 700;
    --rym-bo-lh-card: 2rem;
    --rym-bo-lh-figure: 2.25rem;
    --rym-bo-lh-title: 2.5rem;
    --rym-bo-track-title: 0;
    --rym-bo-track-figure: 0;
    --rym-bo-track-label: 0;
}

:root:lang(ar) .fi-body,
:root:lang(ar) .fi-body [class*="rym-"] {
    text-transform: none;
    font-style: normal;
    letter-spacing: 0;
}

/* 3.1 Page header: the title 28/34 (24/32 on phones), the subheading 15/22. */
.fi-header-heading {
    font-size: var(--rym-bo-fs-title);
    line-height: var(--rym-bo-lh-title);
    font-weight: 700;
    letter-spacing: var(--rym-bo-track-title);
    text-wrap: balance;
}

@media (max-width: 39.99rem) {
    .fi-header-heading {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

:root:lang(ar) .fi-header-heading {
    line-height: var(--rym-bo-lh-title);
}

.fi-header-subheading {
    font-size: var(--rym-bo-fs-row);
    line-height: var(--rym-bo-lh-row);
    color: var(--gray-600);
    max-inline-size: 42rem;
    text-wrap: pretty;
}

/* Spacing: Filament 5.9 already uses 1.5 rem between widgets (widget.css gap-6) and 2 rem between page sections
   (page.css gap-y-8): no override. */

/* 4. Visible focus (2.4.7, 2.4.11): 3 px coral outline, 2 px offset; never under the sticky top bar. */
.fi-body :is(
    .fi-sidebar-item-btn,
    .fi-sidebar-group-btn,
    .fi-tabs-item,
    .fi-link,
    .fi-btn,
    .fi-icon-btn,
    .fi-dropdown-list-item,
    .fi-pagination-item-btn,
    .fi-ta-cell a,
    .fi-wi-stats-overview-stat,
    .fi-user-menu-trigger,
    .fi-sidebar-header a,
    .fi-topbar-start > a,
    .fi-badge-delete-btn,
    .fi-ta-content-ctn[data-rym-scroll-region],
    [class*="rym-"] a,
    a[class*="rym-"],
    button[class*="rym-"],
    summary[class*="rym-"]
):focus-visible {
    outline: var(--rym-bo-focus-width) solid var(--rym-bo-focus);
    outline-offset: var(--rym-bo-focus-offset);
}

html.fi {
    scroll-padding-block-start: calc(var(--topbar-height, 4rem) + 1rem);
}

/* 5. Targets (2.5.8, AC-13): 44 px. e2e expectTouchTargets checks width and height of every a and button inside a
   header, nav or footer, so the controls Filament renders there get both. */
.fi-sidebar-item-btn,
.fi-sidebar-group-btn,
.fi-pagination-item-btn,
.fi-pagination-previous-btn,
.fi-pagination-next-btn,
.fi-tabs-item,
.fi-header .fi-btn,
.fi-section-header .fi-btn {
    min-block-size: var(--rym-bo-target);
}

.fi-topbar .fi-icon-btn,
.fi-section-header .fi-icon-btn,
.fi-sidebar-group-collapse-btn,
.fi-sidebar-close-collapse-sidebar-btn,
.fi-sidebar-open-collapse-sidebar-btn,
.fi-user-menu-trigger,
.fi-section-header .fi-link,
.fi-breadcrumbs-item a,
.fi-sidebar-header a,
.fi-topbar-start > a {
    min-block-size: var(--rym-bo-target);
    min-inline-size: var(--rym-bo-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The « remove » cross of a filter indicator badge: 24 px (2.5.8 minimum; Filament's is 20 px, axe target-size). */
.fi-badge .fi-badge-delete-btn {
    min-block-size: 1.5rem;
    min-inline-size: 1.5rem;
}

@media (pointer: coarse) {
    .fi-input-wrp,
    .fi-ta-actions .fi-icon-btn,
    .fi-ta-actions .fi-link,
    .fi-ta-actions .fi-btn {
        min-block-size: var(--rym-bo-target);
    }
}

/* 6. One material (3.2): white surfaces with a gray-200 hairline and one 1 px slate shadow (was Filament's
   0 1px 3px #0000001a plus a 5 % ring); the chrome is a white plane with a hairline and no shadow. */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-tabs:not(.fi-contained) {
    --tw-ring-color: var(--rym-bo-hairline);
    --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgb(15 23 43 / .05));
}

.fi-section-header-heading {
    font-size: var(--rym-bo-fs-section);
    line-height: var(--rym-bo-lh-section);
    font-weight: var(--rym-bo-fw-section);
    text-wrap: balance;
}

.fi-section-header-description {
    font-size: var(--rym-bo-fs-meta);
    color: var(--gray-600);
}

/* The section icon carries no colour class when gray (SectionComponent\IconComponent has a default gray). */
.fi-section > .fi-section-header > .fi-icon:is(:not(.fi-color), .fi-color-gray) {
    color: var(--gray-500);
}

@media (min-width: 64rem) {
    .fi-sidebar {
        background-color: #fff;
        border-inline-end: 1px solid var(--rym-bo-hairline);
    }

    /* The dead « × » beside the logo on a desktop: 0,3,0 beats the 0,2,0 `.fi-topbar .fi-icon-btn` of § 5. Below
       64 rem Alpine's inline display still toggles the pair. */
    .fi-topbar .fi-icon-btn:is(.fi-topbar-close-sidebar-btn, .fi-topbar-open-sidebar-btn) {
        display: none;
    }
}

.fi-topbar {
    --tw-shadow: 0 0 #0000;
    --tw-ring-color: transparent;
    box-shadow: 0 1px 0 var(--rym-bo-hairline);
}

/* Phones: 16 px card padding (was 24), +16 px of line length on a 390 px screen. */
@media (max-width: 39.99rem) {
    .fi-section:not(.fi-section-not-contained):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content {
        padding: 1rem;
    }

    .fi-section:not(.fi-section-not-contained) > .fi-section-header {
        padding: .75rem 1rem;
    }
}

/* 7. Sidebar (3.3): every group is collapsible (PanelMenu), so every header row keeps its 44 px collapse button
   (§ 5); about 60 px from one group to the next (16 px gap + 44 px header row). */
.fi-sidebar-nav-groups {
    row-gap: 1rem;
}

.fi-sidebar-group {
    row-gap: 2px;
}

.fi-sidebar-group-label {
    font-size: var(--rym-bo-fs-label);
    line-height: var(--rym-bo-lh-label);
    font-weight: 600;
    letter-spacing: var(--rym-bo-track-label);
    text-transform: none;
    color: var(--gray-600);
}

.fi-sidebar-item-label {
    white-space: normal;
    text-overflow: clip;
    line-height: 1.25rem;
}

.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn > .fi-icon {
    color: var(--gray-500);
}

/* Current item: a primary-50 fill and a straight 3 px pill that never touches the 8 px corner (no inset shadow, no
   RTL duplicate: the pill sits on the inline start in both directions). */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--primary-50);
    box-shadow: none;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: "";
    position: absolute;
    inset-block: .625rem;
    inset-inline-start: 0;
    inline-size: 3px;
    border-radius: 999px;
    background: var(--primary-600);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > :is(.fi-sidebar-item-label, .fi-icon) {
    color: var(--primary-700);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    font-weight: 600;
}

.fi-sidebar-item .fi-badge {
    font-variant-numeric: tabular-nums;
}

.fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
    overscroll-behavior: contain;
}

/* 8. Logo: the PNG has an opaque cream ground. */
.fi-logo {
    mix-blend-mode: multiply;
}

/* 9. Chrome: non-production banner, space marker, login locale switcher. */
.rym-env-banner {
    background: var(--warning-50);
    color: var(--warning-800);
    min-block-size: 2rem;
    padding-inline: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: var(--text-sm);
    border-block-end: 1px solid var(--warning-200);
}

@media (max-width: 40rem) {
    .rym-env-banner {
        font-size: var(--rym-bo-fs-meta);
        line-height: 1.3;
        padding-block: .375rem;
    }
}

.rym-env-banner__icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: none;
}

/* The space's name, aligned with the item icons (was a gray-100 pill): 17.83:1. */
.rym-space-marker {
    display: block;
    background: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 .5rem;
    font-size: var(--rym-bo-fs-meta);
    line-height: var(--rym-bo-lh-meta);
    font-weight: 700;
    color: var(--gray-900);
}

.rym-locale-switcher {
    display: flex;
    justify-content: center;
    gap: .5rem;
}

.rym-locale-switcher__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--rym-bo-target);
    min-inline-size: var(--rym-bo-target);
    padding-inline: .75rem;
}

.rym-locale-switcher__link[aria-current="true"] {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .25em;
}

.rym-login-notice {
    margin-block-end: 1rem;
}

/* 10. Home widget kit (SPEC §4, SPEC-polish §3.4-§3.9). */

/* « À traiter » (3.4): one 48 px divided row per item; the tone lives in a 32 px tinted tile (icon shape + tile
   colour + the visually hidden word), the meta sits under the sentence. The anchor's class string is untouched. */
.rym-attention {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rym-attention > li + li {
    border-block-start: 1px solid var(--rym-bo-hairline);
}

.rym-attention__row {
    --rym-tone-bg: var(--gray-100);
    --rym-tone-fg: var(--gray-600);
    position: relative;
    display: grid;
    grid-template-columns: var(--rym-bo-tile) minmax(0, 1fr) 1.25rem;
    column-gap: .75rem;
    align-items: start;
    align-content: center;
    min-block-size: var(--rym-bo-row);
    padding: .5rem;
    margin-inline: -.5rem;
    border: 0;
    border-radius: var(--radius-lg);
    color: var(--gray-950);
    text-decoration: none;
    transition: background-color var(--rym-bo-transition);
}

.rym-attention__row[data-tone="problem"] {
    --rym-tone-bg: var(--danger-50);
    --rym-tone-fg: var(--danger-700);     /* 5.83:1 */
}

.rym-attention__row[data-tone="to_act"] {
    --rym-tone-bg: var(--warning-50);
    --rym-tone-fg: var(--warning-700);    /* 4.85:1 */
}

.rym-attention__row[data-tone="in_progress"] {
    --rym-tone-bg: var(--info-50);
    --rym-tone-fg: var(--info-700);       /* 5.49:1 */
}

.rym-attention__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    box-sizing: border-box;
    inline-size: var(--rym-bo-tile);
    block-size: var(--rym-bo-tile);
    padding: .375rem;
    flex: none;
    border-radius: var(--radius-md);
    background: var(--rym-tone-bg);
    color: var(--rym-tone-fg);
}

.rym-attention__text {
    grid-column: 2;
    grid-row: 1;
    min-inline-size: 0;
    padding-block-start: calc((var(--rym-bo-tile) - var(--rym-bo-lh-row)) / 2);
    font-size: var(--rym-bo-fs-row);
    line-height: var(--rym-bo-lh-row);
    font-weight: 500;
}

.rym-attention__meta {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--rym-bo-fs-meta);
    line-height: var(--rym-bo-lh-meta);
    color: var(--gray-600);
    font-variant-numeric: tabular-nums;
}

.rym-attention__chevron {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--gray-500);
}

@media (hover: hover) and (pointer: fine) {
    a.rym-attention__row:hover {
        background-color: var(--gray-100);
    }
}

a.rym-attention__row:active {
    background-color: var(--primary-50);
    transition-duration: 0ms;
}

.rym-attention__empty {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-block-size: var(--rym-bo-row);
    margin: 0;
    font-size: var(--rym-bo-fs-row);
    color: var(--gray-700);
}

.rym-attention__empty .rym-attention__icon {
    background: var(--success-50);
    color: var(--success-700);            /* 4.68:1 */
}

.rym-attention__more {
    margin-block-start: .5rem;
}

.rym-attention__more > summary {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--rym-bo-target);
    padding-inline: .75rem;
    cursor: pointer;
    color: var(--primary-700);
    font-weight: 600;
}

.rym-attention__more > summary:focus-visible {
    outline: var(--rym-bo-focus-width) solid var(--rym-bo-focus);
    outline-offset: var(--rym-bo-focus-offset);
}

.rym-attention__more > .rym-attention {
    margin-block-start: .5rem;
}

/* Shortcuts as a list (3.5): divided 52 px rows; columns without dividers when the card is full width. */
.rym-quick-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rym-quick-links > li + li {
    border-block-start: 1px solid var(--rym-bo-hairline);
}

.rym-quick-link {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-block-size: var(--rym-bo-cta);
    padding: .625rem .5rem;
    margin-inline: -.5rem;
    border-radius: var(--radius-lg);
    background: transparent;
    box-shadow: none;
    color: var(--gray-950);
    text-decoration: none;
    transition: background-color var(--rym-bo-transition);
}

.rym-quick-link__icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: none;
    margin-block-start: calc((var(--rym-bo-lh-body) - 1.25rem) / 2);
    color: var(--primary-600);            /* 5.08:1; no tile: tiles mean tones */
}

.rym-quick-link__body {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-inline-size: 0;
}

.rym-quick-link__title {
    font-size: var(--rym-bo-fs-body);
    line-height: var(--rym-bo-lh-body);
    font-weight: 600;
}

.rym-quick-link__text {
    font-size: var(--rym-bo-fs-meta);
    line-height: var(--rym-bo-lh-meta);
    color: var(--gray-600);
    text-wrap: pretty;
}

@media (hover: hover) and (pointer: fine) {
    .rym-quick-link:hover {
        background-color: var(--gray-100);
        box-shadow: none;
    }
}

.rym-quick-link:active {
    background-color: var(--primary-50);
    transition-duration: 0ms;
}

.rym-quick-links-widget .fi-section-content {
    container-type: inline-size;
}

@container (min-width: 40rem) {
    .rym-quick-links {
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
        column-gap: 1.5rem;
        row-gap: .25rem;
    }

    .rym-quick-links > li + li {
        border-block-start: 0;
    }
}

/* Home grid (3.6, product-owner decision 1): at >= 80 rem, on a home that shows « À traiter », the shortcuts and the
   key figures, the shortcuts span two rows and the figures take the 8 columns under « À traiter ». Each widget root
   carries fi-grid-col, fi-wi-widget and its own class, directly under .fi-sc.fi-grid (Page.php:601, Schema.php:236,
   widget.blade.php:2). A home without the trio keeps Filament's grid: no hole. */
@media (min-width: 80rem) {
    .fi-grid:has(> .rym-attention-widget):has(> .fi-wi-stats-overview) > .fi-grid-col.rym-quick-links-widget {
        grid-row: span 2;
        align-self: start;
    }

    .fi-grid:has(> .rym-attention-widget):has(> .rym-quick-links-widget) > .fi-grid-col.fi-wi-stats-overview {
        grid-column: span 8 / span 8;
    }
}

/* Key figures (3.7): the value 26/650 under the 28 px title; tone only when action is needed (words in 800, the arrow
   in 700, a tinted ring); a zero figure in gray-500; long amounts drop to 18 px in a narrow card, never wrapped. */
.fi-wi-stats-overview-stat-label {
    color: var(--gray-600);
}

.rym-stat {
    container-type: inline-size;
    padding: 1.25rem;
    transition: background-color var(--rym-bo-transition), box-shadow var(--rym-bo-transition);
}

.rym-stat .fi-wi-stats-overview-stat-label {
    font-size: var(--rym-bo-fs-meta);
    line-height: var(--rym-bo-lh-meta);
    font-weight: 500;
}

.rym-stat .fi-wi-stats-overview-stat-value {
    font-size: var(--rym-bo-fs-figure);
    line-height: var(--rym-bo-lh-figure);
    font-weight: 650;
    letter-spacing: var(--rym-bo-track-figure);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@container (max-width: 13rem) {
    .rym-stat .fi-wi-stats-overview-stat-value {
        font-size: 1.375rem;
        line-height: 1.75rem;
    }
}

@container (max-width: 10rem) {
    .rym-stat[data-long="1"] .fi-wi-stats-overview-stat-value {
        font-size: 1.125rem;
        line-height: 1.5rem;
    }
}

.rym-stat .fi-wi-stats-overview-stat-description {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: .5rem;
    font-size: var(--rym-bo-fs-meta);
    line-height: var(--rym-bo-lh-meta);
    color: var(--gray-600);
}

.rym-stat .fi-wi-stats-overview-stat-description .fi-icon {
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--gray-500);
}

.rym-stat .fi-wi-stats-overview-stat-description.fi-color:not(.fi-color-gray) {
    color: var(--color-800);              /* amber 7.09, red 8.36 */
    font-weight: 600;
}

.rym-stat .fi-wi-stats-overview-stat-description.fi-color:not(.fi-color-gray) .fi-icon {
    color: var(--color-700);              /* amber 5.03, red 6.42 */
}

.rym-stat:has(.fi-wi-stats-overview-stat-description.fi-color-danger) {
    --tw-ring-color: var(--danger-200);
}

.rym-stat:has(.fi-wi-stats-overview-stat-description.fi-color-warning) {
    --tw-ring-color: var(--warning-300);
}

.rym-stat[data-zero="1"] .fi-wi-stats-overview-stat-value {
    color: var(--gray-500);               /* 4.72:1 */
}

@media (hover: hover) and (pointer: fine) {
    a.rym-stat:hover {
        --tw-ring-color: var(--primary-300);
    }

    a.rym-stat:hover .fi-wi-stats-overview-stat-description .fi-icon {
        color: var(--primary-600);
    }
}

a.rym-stat:active {
    background-color: var(--primary-50);
    transition-duration: 0ms;
}

@media (max-width: 39.99rem) {
    .rym-stat {
        padding: 1rem;
    }
}

/* Getting started (3.8): one 44 px row per step, label first; a decorative meter beside the words. */
.rym-checklist__progress {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-block: 0 .5rem;
    font-size: var(--rym-bo-fs-body);
    font-weight: 600;
    color: var(--gray-700);
}

.rym-checklist__meter {
    appearance: none;
    inline-size: 8rem;
    block-size: .375rem;
    border: 0;
    border-radius: 999px;
    background: var(--gray-200);
    overflow: hidden;
}

.rym-checklist__meter::-webkit-progress-bar {
    background: var(--gray-200);
}

.rym-checklist__meter::-webkit-progress-value {
    background: var(--primary-600);       /* 4.15:1 on gray-200 */
    border-radius: 999px;
}

.rym-checklist__meter::-moz-progress-bar {
    background: var(--primary-600);
    border-radius: 999px;
}

.rym-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 0 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rym-checklist__step {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-block-size: var(--rym-bo-target);
}

.rym-checklist__icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: none;
    margin-block-start: 0;
    color: var(--gray-600);
}

.rym-checklist__step[data-state="done"] .rym-checklist__icon {
    color: var(--success-700);            /* 4.89:1 */
}

.rym-checklist__step[data-state="in_progress"] .rym-checklist__icon {
    color: var(--info-700);               /* 5.86:1 */
}

.rym-checklist__step[data-state="todo"] .rym-checklist__icon {
    color: var(--warning-700);            /* 5.03:1 */
}

.rym-checklist__body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .5rem;
    row-gap: 0;
    min-inline-size: 0;
}

.rym-checklist__label {
    font-size: var(--rym-bo-fs-body);
    font-weight: 600;
}

.rym-checklist__label a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--rym-bo-target);
    color: var(--primary-700);
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, var(--primary-700) 40%, transparent);
    text-underline-offset: .2em;
}

@media (hover: hover) and (pointer: fine) {
    .rym-checklist__label a:hover {
        text-decoration-color: currentColor;
    }
}

.rym-checklist__state,
.rym-checklist__hint {
    font-size: var(--rym-bo-fs-meta);
    color: var(--gray-600);
}

.rym-checklist__hint::before {
    content: "·" / "";
    margin-inline-end: .5rem;
}

.rym-checklist__step[data-state="todo"] .rym-checklist__state {
    color: var(--warning-800);            /* 7.09:1 */
    font-weight: 600;
}

.rym-checklist__step[data-state="in_progress"] .rym-checklist__state {
    color: var(--info-700);               /* 5.86:1 */
    font-weight: 600;
}

.rym-checklist__step[data-state="done"] .rym-checklist__label {
    font-weight: 500;
}

.rym-checklist__step[data-state="done"] .rym-checklist__label a {
    color: var(--gray-700);               /* 10.72:1, never struck */
}

/* Panel guide (3.9): divided rows, no card inside the card. */
.rym-guide__intro {
    margin-block-end: 1rem;
    color: var(--gray-700);
}

.rym-guide__tasks {
    display: grid;
    gap: 0 2rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.rym-guide__task {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem 0;
    border-radius: 0;
    box-shadow: none;
    border-block-start: 1px solid var(--rym-bo-hairline);
}

.rym-guide__task-title {
    font-weight: 600;
}

.rym-guide__task-title a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--rym-bo-target);
    color: var(--primary-700);            /* 6.95:1 */
    text-decoration: underline;
}

.rym-guide__task-text {
    font-size: var(--rym-bo-fs-meta);
    line-height: var(--rym-bo-lh-meta);
    color: var(--gray-600);
}

/* 11. Tables and work lists (3.10): quiet headers, about 48 px rows, tabular digits, references never broken. */
.fi-ta-header-cell {
    font-size: var(--rym-bo-fs-meta);
    line-height: var(--rym-bo-lh-meta);
    font-weight: 600;
    color: var(--gray-600);
    padding-block: .625rem;
}

.fi-ta-table {
    font-variant-numeric: tabular-nums;
}

/* Never on a stacked phone table below 40 rem: Filament resets its text cells to 0 there, and an unlayered rule
   would beat that reset. */
.fi-ta-table:not(.fi-ta-table-stacked-on-mobile) .fi-ta-text:not(.fi-inline) {
    padding-block: .75rem;
}

@media (min-width: 40rem) {
    .fi-ta-table-stacked-on-mobile .fi-ta-text:not(.fi-inline) {
        padding-block: .75rem;
    }
}

.fi-body .fi-ta-text-description {
    color: var(--gray-600);
    font-size: var(--rym-bo-fs-meta);
    line-height: var(--rym-bo-lh-meta);
}

/* References (->fontFamily(FontFamily::Mono)): one face on every machine, never broken, left to right and whole in
   Arabic, aligned on the column's start edge. Never a column-level dir="ltr". */
.fi-body :is(.fi-ta-text-item, .fi-in-text-item).fi-font-mono {
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .01em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums slashed-zero;
    font-variant-ligatures: none;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: match-parent;
    text-align: -webkit-match-parent;     /* Chromium computes the unprefixed value as the item's own start (left) */
}

/* On record pages Filament 5.9 renders `.fi-in-text-item` as a full-width -webkit-box (its line clamp, app.css
   `.fi-in-text-item:not(.fi-bulleted li.fi-in-text-item)`): a reference never wraps, so it becomes a block as wide as its
   text, which sits on the column's start edge (right in Arabic) in every engine (C-07, support review). */
.fi-body .fi-in-text-item.fi-font-mono {
    display: block;
    inline-size: fit-content;
    max-inline-size: 100%;
}

/* Icons in cells: idle icons gray-500 (Filament: gray-400, 2.63:1), meaningful icons in their 700 shade. */
.fi-body :is(.fi-ta-text-item > .fi-icon, .fi-ta-icon > .fi-icon, .fi-ta-icon > a > .fi-icon):not(.fi-color) {
    color: var(--gray-500);
}

.fi-body :is(.fi-ta-text-item > .fi-icon, .fi-ta-icon > .fi-icon, .fi-ta-icon > a > .fi-icon).fi-color:not(.fi-color-gray) {
    color: var(--color-700);
}

/* Home work lists (WorkListWidget::table() puts rym-worklist on the .fi-ta root): top-aligned, two-line descriptions.
   Filament keeps a table body on one line; the description wraps (within the width of its value) so the clamp can
   apply, the values themselves stay on one line. */
.rym-worklist .fi-ta-cell {
    vertical-align: top;
}

.rym-worklist .fi-ta-text-description {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* No « 0 » on the filter trigger: DisplayDefaults puts the active filter count on the trigger (3.19). */
.fi-icon-btn[data-active-filters="0"] > .fi-icon-btn-badge-ctn {
    display: none;
}

/* Priority (StatusStyle::priorityColumn): Normale and Basse as gray-600 words (7.68:1); Haute and Urgente are badges.
   A one-value cell is ONE element carrying `fi-ta-text rym-priority fi-ta-text-item` (TextColumn::toEmbeddedHtml(),
   the `$stateCount === 1` branch); a cell with a description nests the item. A badge cell's root has no colour class
   but its badge sets its own colour, so the gray never reaches a badge. */
.fi-ta-text.rym-priority.fi-ta-text-item:not(.fi-color),
.fi-ta-text.rym-priority .fi-ta-text-item:not(.fi-color) {
    color: var(--gray-600);
}

/* « Tout voir » in a table header: a 44 px target (AC-13). */
.fi-ta-header .fi-link {
    min-block-size: var(--rym-bo-target);
    display: inline-flex;
    align-items: center;
    padding-inline: .5rem;
    color: var(--primary-700);
    font-weight: 600;
}

/* Filament aligns the label on the baseline, which puts it at the top of the 44 px target: centre it, so it lines up
   with the table heading. */
.fi-ta-header .fi-link > .fi-link-label {
    align-self: center;
}

/* Empty states (3.11): no column names over nothing; a primary-50 disc; readable words. */
.fi-ta-ctn:has(.fi-ta-empty-state) .fi-ta-table > thead {
    display: none;
}

.fi-ta-empty-state .fi-ta-empty-state-icon-bg {
    background-color: var(--primary-50);
    padding: .625rem;
    margin-block-end: .75rem;
}

.fi-ta-empty-state .fi-ta-empty-state-icon-bg .fi-icon {
    color: var(--primary-600);            /* 4.65:1 */
}

.fi-ta-empty-state-heading {
    font-size: var(--rym-bo-fs-row);
    line-height: var(--rym-bo-lh-row);
}

.fi-ta-empty-state-description {
    color: var(--gray-600);               /* 7.68:1 */
    font-size: var(--rym-bo-fs-meta);
    max-inline-size: 40ch;
    margin-inline: auto;
    text-wrap: pretty;
}

.rym-worklist .fi-ta-empty-state {
    padding-block: 1.5rem;
}

/* Tabs (3.12): start-aligned; the current tab is primary-50 with a 2 px primary-600 bar and a primary-700 label. */
.fi-tabs:not(.fi-contained):not(.fi-vertical) {
    margin-inline: 0;
}

.fi-tabs-item {
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.fi-tabs-item .fi-tabs-item-label {
    color: var(--gray-600);
}

.fi-tabs-item.fi-active {
    background-color: var(--primary-50);
}

.fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--primary-700);            /* 6.28:1; weight unchanged: no reflow on click */
}

.fi-tabs-item.fi-active::after {
    content: "";
    position: absolute;
    inset-inline: .75rem;
    inset-block-end: .1875rem;
    block-size: 2px;
    border-radius: 999px;
    background: var(--primary-600);       /* 4.65:1 */
}

@media (hover: hover) and (pointer: fine) {
    .fi-tabs-item:not(.fi-active):hover {
        background-color: var(--gray-100);
    }
}

.fi-tabs-item .fi-badge {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 39.99rem) {
    .fi-tabs {
        scroll-padding-inline: .5rem;
        scroll-snap-type: x proximity;
    }
}

/* Badges and the five tones (3.13): weight 600, no tracking, text and icon in the same AA shade, a 24 % ring. */
.fi-body .fi-badge {
    letter-spacing: 0;
    font-weight: 600;
}

/* The scan columns (table cells, record-page entries, the task card and checklist): 13/18 badges. Elsewhere (the
   filter indicators « Statut : … » above a table) Filament's `.fi-badge-label:not(.fi-wrapped)` ellipsis keeps
   working, so no horizontal scroll at 360 px (C-08). */
.fi-body :is(.fi-ta-cell, .fi-in-entry-content, .rym-now-card, .rym-task-checklist) .fi-badge {
    font-size: var(--rym-bo-fs-meta);
    line-height: var(--rym-bo-lh-meta);
    min-block-size: 1.5rem;
    padding-block: .1875rem;
    padding-inline: .5rem;
    gap: .25rem;
}

/* In a table (which scrolls inside its own container), on the task card and in the checklist, a status stays on one
   line and never shrinks. */
.fi-body :is(.fi-ta-cell, .rym-now-card, .rym-task-checklist) .fi-badge {
    white-space: nowrap;
    flex-shrink: 0;
}

/* On a record page a badge wraps inside its column instead of being cut: in a narrow column of three, « En attente du
   demandeur » lost its last word (integration, 2026-10-05; the support ticket history did this first). */
.fi-body .fi-in-entry-content .fi-badge {
    max-inline-size: 100%;
    white-space: normal;                  /* app.css `.fi-badge:not(.fi-wrapped){white-space:nowrap;overflow:hidden}` */
}

.fi-body .fi-in-entry-content .fi-badge .fi-badge-label {
    white-space: normal;
    overflow: visible;
}

.fi-body .fi-badge.fi-color {
    color: var(--color-700);
    --tw-ring-color: color-mix(in oklab, var(--color-600) 24%, transparent);
}

.fi-body .fi-badge:is(.fi-color-warning, .fi-color-success, .fi-color-label) {
    color: var(--color-800);
}

.fi-body .fi-badge .fi-icon {
    color: currentColor;
}

.fi-body .fi-badge:not(.fi-color) {
    background-color: var(--gray-100);
    color: var(--gray-700);               /* 9.45:1 */
    --tw-ring-color: var(--rym-bo-hairline);
}

/* 12. Buttons and focus (3.14). One focus language: no Filament 2 px ring under the coral outline (outlined buttons
   keep theirs: it is their edge); inward where a container clips. */
.fi-body :is(.fi-btn:not(.fi-outlined), .fi-icon-btn, .fi-tabs-item, .fi-pagination-item-btn):focus-visible {
    --tw-ring-shadow: 0 0 #0000;
}

.fi-body :is(.fi-tabs .fi-tabs-item, .fi-ta-content .fi-ta-cell a, .fi-sidebar-nav .fi-sidebar-item-btn):focus-visible {
    outline-offset: -3px;
}

/* AA on hover: Filament 5.9 hovers a filled primary button in primary-500 (white 3.68:1) and a danger one in red-500
   (3.85:1). Success, warning and info keep Filament's own AA pairs: no override. */
.fi-btn:not(.fi-outlined).fi-color-primary {
    --hover-bg: var(--primary-700);       /* white 6.95:1 */
    --hover-text: #fff;
}

.fi-btn:not(.fi-outlined).fi-color-danger {
    --hover-bg: var(--danger-700);        /* white 6.42:1 */
    --hover-text: #fff;
}

/* Press: instant and small; controls are not text. */
.fi-btn {
    transition-property: background-color, color, box-shadow, transform;
    transition-duration: 150ms;
    transition-timing-function: ease;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

/* SPEC-polish `button.fi-btn`, written from .fi- (same 0,1,1): link buttons keep iOS "open in new tab". */
.fi-btn:is(button) {
    -webkit-touch-callout: none;
}

.fi-btn:not(.fi-disabled):not([disabled]):active {
    transform: scale(.98);
    transition-duration: var(--rym-bo-dur-press);
    transition-timing-function: var(--rym-bo-ease-out);
}

/* 13. Inputs and browser surfaces (3.15): the resting field edge #7f8fa5 (3.24:1, 1.4.11); invalid fields keep the
   danger ring and focus keeps Filament's primary-600 ring. */
.fi-input-wrp:not(:focus-within):not(.fi-invalid) {
    --tw-ring-color: var(--rym-bo-edge-field);
}

.fi-checkbox-input:not(:checked):not(.fi-invalid) {
    --tw-ring-color: var(--rym-bo-edge-field);
}

.fi-body .fi-input::placeholder {
    color: var(--gray-500);               /* 4.72:1 */
}

.fi-body {
    accent-color: var(--primary-600);
    caret-color: var(--primary-600);
}

.fi-body ::selection {
    background: var(--primary-100);
    color: var(--gray-950);               /* 17.05:1 */
}

/* Touch screens: form text at 16 px (Filament's is 14 px), or iOS Safari zooms the page into a focused field and does
   not zoom back (sign-in, field-agent forms; accessibility audit of 2026-10-07, docs/accessibility/audit-report.md). */
@media (pointer: coarse) {
    .fi-input,
    .fi-select-input,
    .fi-one-time-code-input-digit {
        font-size: 1rem;
    }
}

/* 14. Board chips (partner calendar, ops planning and cleaning board): colour pairs copied unchanged from the inline
   styles of Ops/Pages/Planning.php, Ops/Pages/CleaningBoard.php and Partner/Pages/GroupedCalendar.php (8.36 to
   12.67:1). Each chip carries its text; the colour is never the only cue. */
.rym-chip {
    display: inline-block;
    font-size: .75rem;
    line-height: 1.35;
    border-radius: var(--radius-sm);
    padding: .125rem .375rem;
    background: #f3f4f6;
    color: #374151;
}

:root:lang(ar) .rym-chip {
    font-size: .8125rem;
}

.rym-chip--arrival,
.rym-chip--free,
.rym-chip--on-time {
    background: #dcfce7;
    color: #14532d;
}

.rym-chip--occupied,
.rym-chip--sold {
    background: #dbeafe;
    color: #1e3a8a;
}

.rym-chip--departure {
    background: #e0e7ff;
    color: #312e81;
}

.rym-chip--blocked,
.rym-chip--conflict {
    background: #fee2e2;
    color: #7f1d1d;
}

.rym-chip--maintenance,
.rym-chip--late {
    background: #ffedd5;
    color: #7c2d12;
}

.rym-chip--held {
    background: #fef3c7;
    color: #78350f;
}

.rym-chip--group-claimed {
    background: #e5e7eb;
    color: #1f2937;
}

.rym-chip--stop-sell {
    background: #ffedd5;
    color: #7c2d12;
    outline: 2px dashed #b45309;
    outline-offset: -2px;
}

.rym-chip--tasks,
.rym-chip--unknown {
    background: #f3f4f6;
    color: #374151;
}

/* A planning day with nothing in it: plain text, no chip (#6b7280 on white, 4.79:1). */
.rym-chip-empty {
    font-size: .75rem;
    color: #6b7280;
}

:root:lang(ar) .rym-chip-empty {
    font-size: .8125rem;
}

/* Past days: a hatched overlay with full-contrast text (replaces opacity .55/.6). */
.rym-chip--past {
    background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgb(15 23 43 / .07) 6px 12px);
}

.rym-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rym-legend .rym-chip {
    padding: .125rem .5rem;
    margin: .125rem;
}

/* 15. Helpers. */
.rym-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Money and counts: same-width digits so columns line up. */
.rym-tabular {
    font-variant-numeric: tabular-nums;
}

[dir="rtl"] .rym-flip-rtl {
    transform: scaleX(-1);
}

.rym-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[dir="rtl"] .rym-stat .fi-wi-stats-overview-stat-description svg {
    transform: scaleX(-1);
}

/* Bidi (3.16): free text that may be in the other language (alert bodies, ticket subjects) takes each paragraph's own
   direction, aligned on the column's start edge. Never on an element whose fragments are already isolated.
   Filament 5.9 renders a one-value cell without description as ONE element that carries both the column's classes and
   `fi-ta-text-item` (TextColumn::toEmbeddedHtml(), the `$stateCount === 1` branch), hence the compound form.
   Chromium computes the unprefixed `match-parent` as `start` of the item itself; its prefixed value resolves against the
   column's direction (right in Arabic). Other engines ignore the prefixed value and keep `match-parent`. */
[dir="rtl"] .rym-free-text.fi-ta-text-item,
[dir="rtl"] .rym-free-text :is(.fi-ta-text-item, .fi-ta-text-description, .fi-in-text-item) {
    unicode-bidi: plaintext;
    text-align: match-parent;
    text-align: -webkit-match-parent;
}

/* 16. Motion (3.18, SPEC-polish §5): 150 ms ease colour fades and a 100 ms press, no entrance animation. Reduced
   motion removes the movement (the press scale) and keeps the colour feedback. */
@media (prefers-reduced-motion: reduce) {
    .fi-btn:not(.fi-disabled):not([disabled]):active,
    .rym-now-card .rym-now-card__open:active {
        transform: none;
    }
}

/*
 * Empty values that carry meaning (« Non attribué », « Aucun objectif fixé », « Dans les délais ») are Filament
 * placeholders, gray-400 by default (2.6:1 on white, axe color-contrast): gray-600 (7.6:1), as body text (WCAG 1.4.3),
 * in every panel (moved here from the support stylesheet at the integration of the back-office redesign).
 */
.fi-body .fi-ta-placeholder,
.fi-body .fi-in-placeholder {
    color: var(--gray-600);
}