@import '../../../../vendor/filament/filament/resources/css/theme.css';

@source '../../../../app/Filament/App/**/*';
@source '../../../../app/Livewire/**/*';
/*
 * `app/Services/**` porte des enums avec des classes Tailwind écrites en
 * dur (ex. `RiskLevel::matrixCellClasses()`) pour les vues hors composant
 * Filament — sans cette ligne, le scanner JIT ne les voit jamais et la case
 * reste blanche, même en reconstruisant les assets. Repéré sur la matrice
 * des risques (JOS-164) : seules les classes qui existaient déjà par
 * coïncidence ailleurs dans du Blade (ex. `bg-success-300`, déjà utilisé par
 * le calendrier de points) s'affichaient.
 */
@source '../../../../app/Services/**/*';
@source '../../../../resources/views/components/**/*';
@source '../../../../resources/views/filament/app/**/*';
@source '../../../../resources/views/livewire/**/*';
@source '../../../../resources/views/vendor/**/*';

/*
 * ============================================================================
 * Able Pro (Bootstrap admin template, preset-1) — component theme for Filament
 * ============================================================================
 * This project no longer renders actual Able Pro/Bootstrap markup — Filament's
 * own components (`.fi-section`, `.fi-btn`, `.fi-badge`, `.fi-sidebar`, ...)
 * stay in charge, and colors already come from Able Pro's real preset-1 hexes
 * via `AppPanelProvider::panel()`'s `->colors([...])`. What lives here is only
 * the *shape* language Able Pro is recognized by: 12px card radius with a flat
 * 1px border (Able Pro's own `--pc-card-box-shadow` is `none` in the default
 * preset — the soft shadow only exists in a separate opt-in "contrast" theme
 * mode that none of our reference screenshots used, so cards here are flat,
 * not shadowed), pill-ish buttons, a dashed sidebar border, a barely-off-white
 * page background. Tokens below were read directly out of the real template's
 * compiled CSS (style.css / style-preset.css) rather than eyeballed, so this
 * is a faithful reskin, not a reinterpretation.
 *
 * Dark mode note (2026-07-25): the first pass guessed dark surface colors from
 * Tailwind's own gray-800/900 scale instead of extracting Able Pro's actual
 * `[data-pc-theme=dark]` tokens, which is why it looked broken — Tailwind gray
 * and Able Pro's dark navy scale don't share hues, so sidebar/card/topbar ended
 * up mismatched against each other. Every hex below (light AND dark) was
 * re-verified against a real Able Pro dark-mode page the user saved and against
 * `style-preset.css`'s `[data-pc-theme=dark] { ... }` / `[data-pc-theme=dark]
 * .card { ... }` blocks — nothing here is estimated.
 */

:root {
    --ablepro-body-bg: #f8f9fa;
    --ablepro-border: #e7eaee;
    --ablepro-sidebar-border: #bec8d0;
    --ablepro-card-bg: #ffffff;
    --ablepro-card-border: #e7eaee;
    --ablepro-active-bg: #f3f5f7;
    --ablepro-topbar-bg: rgba(248, 249, 250, 0.7);
}

.dark {
    --ablepro-body-bg: #131920;
    --ablepro-border: #303f50;
    --ablepro-sidebar-border: #242d39;
    --ablepro-card-bg: #1b232d;
    --ablepro-card-border: #263240;
    --ablepro-active-bg: #19212a;
    --ablepro-topbar-bg: rgba(19, 25, 32, 0.7);
}
/* Opening the Aperçu panel (or any Filament modal) used to jump-scroll the
 * page to the bottom. Root cause, found by instrumenting HTMLElement.focus()
 * live: Alpine's focus-trap (bundled in Livewire) calls .focus() on the
 * modal's own root div (`#apercu-panel`, tabindex="-1", Filament's
 * <x-filament::modal> markup) when the trap activates — even with
 * `.noautofocus`, the trap still needs to focus *something* inside itself.
 * That root div is `position: static` (only its nested `.fi-modal-window-ctn`
 * is `fixed`), so it sits at its real, in-flow position in the document —
 * for our panel specifically, near the very end of <body> (it's mounted via
 * AppPanelProvider's `renderHook(PanelsRenderHook::BODY_END, ...)`, after all
 * page content). Focusing an in-flow element off-screen triggers the
 * browser's native "scroll focused element into view" — there is no JS call
 * to intercept (no scrollIntoView()/scrollTo(), confirmed by overriding both
 * live), it's built-in browser behavior tied to focus().
 *
 * Fix: make the wrapper itself `position: fixed` too, matching its child.
 * A fixed-position element has no "document position" to scroll to — it's
 * always within the viewport by definition — so focusing it never triggers
 * that native scroll. Zero visual effect: this div has no size/content of
 * its own (all real rendering happens in the nested fixed window-ctn).
 * Scoped to our own `#apercu-panel` id, not Filament's modals in general.
 *
 * Side effect of that fix (found right after): `position: fixed` — unlike
 * `absolute`/`relative` — *always* creates a new stacking context, even with
 * `z-index: auto`. Before, `#apercu-panel` was `static` and didn't isolate
 * its children (the overlay at z-index 40, the window at 50) — they competed
 * directly at the page's root stacking level against `.fi-sidebar`
 * (`position: sticky; z-index: 20`) and won easily. Once `#apercu-panel`
 * itself became `fixed`, it started isolating them into its own sub-context,
 * and — having no explicit z-index of its own — began competing at
 * effectively "0" against that same sidebar, which then painted on top of
 * the whole panel (overlay included) over the sidebar area. An explicit
 * z-index here, above the sidebar's 20, restores full-page coverage.
 */
#apercu-panel {
    position: fixed;
    inset: 0;
    z-index: 50;
}

/*
 * A second, different scroll jump in the same panel — this one mid-session,
 * not on open. Reported: picking a name in the "Assignations" popover
 * (JOS-XX validation workflow) yanked the scrolled-down panel back up,
 * landing far from where the click happened. Root cause: **CSS scroll
 * anchoring**, not JS/Alpine. Confirmed by reproducing it only through a
 * real, trusted click — a synthetic `.click()` never triggered it, which is
 * the signature of a browser-native layout heuristic rather than application
 * code (Chrome deliberately treats scroll-anchoring adjustments as
 * user-agent behavior, decoupled from event trust in general, but the
 * repro gap here traces to *what* a real click vs. `.click()` leaves as the
 * anchor candidate — not worth chasing further once the mechanism was
 * identified).
 *
 * The chain: picking a name shrinks the popover's search-results list down
 * to a one-row "choose a role" form in the same Livewire response that also
 * grows the avatar stack / "Untel (Responsable), ..." summary line — both
 * inside `.fi-modal-window`'s normal-flow scrolling content, above the
 * fold when the panel is scrolled down. Chrome's scroll anchoring sees
 * that shift and "corrects" the scroll position to compensate, which reads
 * as the panel jumping — confirmed on real hardware: `.fi-modal-window`'s
 * `scrollTop` measurably changes on a real click, never on a synthetic one.
 *
 * `overflow-anchor: none` on the scrolling container itself is the
 * standard fix — it doesn't disable Livewire's morph (the DOM keeps
 * updating correctly), only Chrome's own after-the-fact scroll correction.
 * `overflow-anchor` is NOT inherited (CSS spec), so `.fi-modal-window`
 * needs its own declaration — setting it on `html` alone (see below) does
 * not reach a nested scrolling container.
 */
#apercu-panel .fi-modal-window {
    overflow-anchor: none;
}

/*
 * Same popover, same trigger, on `view-project-element.blade.php`'s own
 * page (no modal there — the whole document scrolls) — so this one can't
 * stay scoped to `#apercu-panel` the way the fix above does. Scroll
 * anchoring has no real upside in an app whose content is constantly
 * reshaped by Livewire morphs, so this one is deliberately global rather
 * than chasing every scrollable ancestor that could someday host a
 * shrinking/growing Livewire-rendered list.
 */
html {
    overflow-anchor: none;
}

/*
 * Dashboard's mini-Kanban ("Répartition des tâches") caps each column at
 * ~3 cards + change (750px) with its own scrollbar, so a busy column
 * doesn't push the whole card (and the rest of the dashboard) tall. Scoped
 * to `.dashboard-kanban-columns [data-kanban-column]`
 * (task-distribution-card.blade.php) rather than SKanban's own markup —
 * the full Kanban page (kanban.blade.php) reuses the same shared component
 * and must keep its normal, uncapped column height.
 */
.dashboard-kanban-columns [data-kanban-column] {
    max-height: 300px;
    overflow-y: auto;
}

/*
 * Note body Markdown preview (NotesIndex's "Aperçu" toggle) — hand-rolled
 * instead of pulling in @tailwindcss/typography for one small preview pane.
 * Server-rendered via Str::markdown(), html_input stripped (see
 * NotesIndex::renderedBodyPreview()), so this only ever styles elements
 * CommonMark itself produced.
 */
.note-markdown :is(h1, h2, h3, h4) {
    font-weight: 700;
    margin: 0.6em 0 0.3em;
}
.note-markdown :is(h1, h2, h3, h4):first-child {
    margin-top: 0;
}
.note-markdown p {
    margin: 0.5em 0;
}
.note-markdown p:first-child {
    margin-top: 0;
}
.note-markdown p:last-child {
    margin-bottom: 0;
}
.note-markdown ul,
.note-markdown ol {
    margin: 0.5em 0;
    padding-left: 1.4em;
}
.note-markdown ul {
    list-style: disc;
}
.note-markdown ol {
    list-style: decimal;
}
.note-markdown code {
    background: var(--ablepro-active-bg);
    border-radius: 4px;
    padding: 0.1em 0.4em;
    font-size: 0.9em;
}
.note-markdown a {
    color: var(--primary-600, #6b9bbd);
    text-decoration: underline;
}

/*
 * Able Pro-style switch (pill track + circular thumb) for boolean toggles
 * rendered as a plain `<button role="switch" aria-checked="...">` rather
 * than Filament's full form-schema Toggle component — used by NoteEditor's
 * public/private control. `aria-checked` (not a Blade-conditional class on
 * the track itself) drives both colors so the two nested spans never need
 * their own if/else class lists.
 */
.ablepro-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--ablepro-border);
    transition: background-color 0.15s ease;
    vertical-align: middle;
    flex-shrink: 0;
}
button[aria-checked='true'] .ablepro-switch {
    background: var(--primary-600, #6b9bbd);
}
.ablepro-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}
button[aria-checked='true'] .ablepro-switch-thumb {
    transform: translateX(16px);
}

.fi-body {
    background: var(--ablepro-body-bg) !important;
}

/* Notification toasts (`.fi-no`) ship at the same z-50 as the Aperçu slide-over
   (`x-filament::modal`, App\Livewire\ApercuPanel) — at a tied z-index, whichever
   one is later in the DOM paints on top, and the Aperçu panel's render hook is
   registered at BODY_END, after Filament's own notifications, so a toast fired
   while the panel is open renders underneath it instead of over it. Bumping the
   toast layer above every z-50 overlay in the app fixes this regardless of DOM
   order, without touching the Aperçu panel's own z-index. */
.fi-no {
    z-index: 60 !important;
}

/* Sidebar: Able Pro's sidebar has no background of its own (`--pc-sidebar-background`
   is `transparent` in the real template) — it just shows the body color through,
   in both themes. Setting it explicitly here (rather than leaving it transparent)
   avoids depending on stacking order to get the same result. */
.fi-sidebar {
    background: var(--ablepro-body-bg) !important;
    border-right: 1px dashed var(--ablepro-sidebar-border) !important;
    box-shadow: none !important;
}

.fi-sidebar-item a,
.fi-tenant-menu-trigger {
    border-radius: 8px !important;
}
.fi-sidebar-item a:hover,
.fi-tenant-menu-trigger:hover {
    background: var(--ablepro-active-bg) !important;
}

.fi-sidebar-item-active a {
    background: var(--ablepro-active-bg) !important;
}

/*
 * Topbar: same soft blur-over-body treatment Able Pro uses (rgba body-bg +
 * backdrop-blur).
 *
 * The blur lives on a `::before` layer, not on `.fi-topbar` itself — a
 * `filter`/`backdrop-filter` on an element makes it the *containing block*
 * for any `position: fixed` descendant (CSS Filter Effects spec), and
 * Filament's dropdown panels (`.fi-dropdown-panel` — user menu, tenant
 * switcher, notifications) are exactly that: `position: fixed`, rendered
 * inside `.fi-topbar`. With `backdrop-filter` directly on the topbar, their
 * Floating-UI–computed coordinates (anchored to the *viewport*) got applied
 * inside the topbar's much smaller box instead, clipping the open panel to
 * a sliver at the top. Firefox enforces this spec rule strictly enough to
 * make it visible; it's the same containing-block rule everywhere, so
 * treat it as latent on any engine, not "a Firefox bug" — found 2026-08-18
 * from a user report ("le menu Utilisateur ne s'affiche pas complètement").
 * A `::before` sibling layer gets the visual blur without being an ancestor
 * of anything `position: fixed`.
 */
.fi-topbar {
    position: relative;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--ablepro-border);
}
.fi-topbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ablepro-topbar-bg);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    z-index: -1;
}

.fi-page-content{
    row-gap: calc(var(--spacing) * 6) !important;
}

.fi-page-header-main-ctn {
    row-gap: 0 !important;
    padding-block: 0 !important;
}


/* Cards/sections: flat — 12px radius + a 1px border, no drop shadow (see the
   file-level comment above for why: Able Pro's default preset shadow token
   is `none`). Background is explicit too: Able Pro's dark card bg (`#1b232d`)
   is deliberately a step lighter than the dark body bg (`#131920`) so cards
   still read as raised surfaces without a shadow — Filament's own default
   dark card color doesn't match that pairing. */
.fi-section {
    background: var(--ablepro-card-bg) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    border-color: var(--ablepro-card-border) !important;
}

section {
    border: 1px solid var(--ablepro-card-border) !important;
}

.fi-ta-ctn {
    background: var(--ablepro-card-bg) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    border: 1px solid var(--ablepro-card-border) !important;
    margin-top: calc(var(--spacing) * 6) !important;
}

/*
 * Champs de saisie « bruts » (ceux de nos propres vues Blade, pas les
 * composants Filament).
 *
 * Le Preflight de Tailwind v4 pose `border: 0 solid` sur *tout* : une classe
 * `border-gray-300` ne fixe donc que la couleur, jamais la largeur. Le plugin
 * `@tailwindcss/forms` — qui donnait historiquement 1px aux input/textarea/
 * select — n'est pas installé (Filament v4 ne l'utilise pas et stylise ses
 * champs lui-même). D'où des dizaines de champs sans bordure visible dans
 * l'app, alors que les déclencheurs de dropdown, eux, écrivent bien
 * `border border-gray-200` et s'affichent correctement.
 *
 * On rétablit la largeur ici plutôt que d'ajouter `border` dans ~37 vues :
 * une seule source, et les futurs champs en héritent sans y penser.
 *
 * Trois choix délibérés :
 *
 * 1. `@layer base` n'est pas cosmétique. Tailwind v4 range ses utilitaires
 *    dans une couche de cascade, et une règle HORS couche l'emporte toujours
 *    sur une règle en couche, quelle que soit la spécificité — y compris sur
 *    un `:where()` à spécificité nulle (vérifié : la couleur du token écrasait
 *    `border-gray-200`). Déclarée dans `base`, qui précède `utilities`, la
 *    règle redevient un simple défaut que chaque champ peut surcharger.
 * 2. `:where()` garde en plus la spécificité à zéro à l'intérieur de la
 *    couche, pour qu'un `border-0` ou une couleur au survol l'emporte sans
 *    avoir à surenchérir.
 * 3. `.fi-input` est exclu : Filament met `border-none` sur ses propres
 *    champs, la bordure étant dessinée par le wrapper `.fi-input-wrp`.
 *    Sans cette exclusion, on obtiendrait un double trait.
 *
 * Cases à cocher et boutons radio sont hors périmètre : ils gardent leur
 * rendu natif, sur lequel une bordure CSS n'a pas d'effet fiable.
 */
@layer base {
    :where(
        input:not([type='checkbox']):not([type='radio']):not(.fi-input),
        textarea:not(.fi-input),
        select:not(.fi-input)
    ) {
        border-width: 1px;
        border-style: solid;
        border-color: var(--ablepro-border);
        padding: 10px;
    }
}

/* Buttons: Able Pro's pill-ish 20px radius (vs. Filament's default rounded-lg). */
.fi-btn {
    border-radius: 20px !important;
}
.fi-btn.fi-color-primary {
    box-shadow: none !important;
    transition: filter 0.15s ease !important;
}
.fi-btn.fi-color-primary:hover {
    filter: brightness(0.93);
    text-decoration: none !important;
}

/* Badges: Able Pro's 6px radius (vs. Filament's default fully-rounded pill). */
.fi-badge {
    border-radius: 6px !important;
}

.fi-breadcrumbs .fi-breadcrumbs-item-label {
    @apply text-xs!;
}

.choices__item--selectable {
    @apply cursor-pointer!;
}

.bar-milestone .bar {
    fill: #F59E0B !important;
}

.bar-violated .bar {
    fill: #EF4444 !important;
}

::-webkit-scrollbar {
    width: .56vw !important;
    height: 8px !important;
}

::-webkit-scrollbar-button {
    width: 0px !important;
    height: 0px !important;
}

::-webkit-scrollbar-thumb {
    background: #e1e1e1 !important;
    border: 0px none #ffffff !important;
    border-radius: 50px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #ffffff !important;
}

::-webkit-scrollbar-thumb:active {
    background: #000000 !important;
}

::-webkit-scrollbar-track {
    background: #666666 !important;
    border: 0px none #ffffff !important;
}

::-webkit-scrollbar-track:hover {
    background: #666666 !important;
}

::-webkit-scrollbar-track:active {
    background: #333333 !important;
}

::-webkit-scrollbar-corner {
    background: transparent !important;
}

/*
 * Filament's own component CSS (text-input, markdown-editor, ...) is
 * imported into the Tailwind `components` layer (see
 * vendor/filament/forms/resources/css/index.css). Per the CSS cascade-layers
 * spec, a `!important` declared inside a *named* layer beats a `!important`
 * declared outside any layer ("unlayered"), regardless of selector
 * specificity — the opposite of what you'd expect. The markdown editor's
 * padding reset (`px-4! py-3!` in Filament's markdown-editor.css) is exactly
 * such a layered `!important`, which is why an unlayered override for it
 * silently lost even though devtools showed it as "applied". Putting our
 * own overrides in that same `components` layer puts them on equal footing,
 * where normal specificity/source-order rules decide (and we come later).
 */
@layer components {
    .quick-add-title .fi-input-wrp {
        box-shadow: none !important; /* tue à la fois la bordure ET le ring focus, les deux sont des box-shadow Tailwind */
        background: transparent !important;
    }

    .quick-add-description .EasyMDEContainer .CodeMirror {
        padding-inline: 0 !important;
        padding-block: 0 !important;
        padding: 0 !important;
    }

    .quick-add-description .fi-input-wrp {
        box-shadow: none !important; /* tue à la fois la bordure ET le ring focus, les deux sont des box-shadow Tailwind */
        background: transparent !important;
    }

    /*
     * Filament picks the button's bg/text shades dynamically (see
     * `.fi-btn:not(.fi-outlined).fi-color:not(label) { background-color:
     * var(--bg); color: var(--text) }` in Filament's own CSS) via classes
     * like `.fi-bg-color-400`/`.fi-text-color-900` that just set the `--bg`/
     * `--text` variables. Because `primary`'s base shade (500) reads as
     * "light" (lightness >= 0.65), Filament defaults every primary button to
     * a light background + dark text pairing instead of a solid dark button
     * with white text. Overriding the same two variables here — instead of
     * `background-color`/`color` directly — plugs into that exact mechanism
     * rather than fighting it.
     */
    .fi-btn.fi-color-primary:not(.fi-outlined) {
        --bg: var(--primary-700) !important;
        --text: #fff !important;
    }

    /*
     * Able Pro's real page container: full-width layout instead of
     * Filament's default `fi-width-7xl` cap (80rem/1280px), with the
     * template's own padding/max-width values instead of Filament's
     * responsive `padding-inline` steps on `.fi-main`.
     */
    .fi-width-7xl {
        max-width: 1800px !important;
    }

    .fi-main {
        padding: 28px 28px 60px !important;
    }
}

.el-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    padding: 0.125rem 0.300rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25rem;
}

/*
 * Element-type badges (tâche/réunion/jalon/chantier) — independent from the
 * semantic status colors (danger/warning/success used for blocked/waiting/
 * done etc.) so a type never visually collides with a status. Matches
 * HasElementPresentation::typeColor() (task=primary, meeting=pink,
 * milestone=danger, chantier=orange) — that trait's dots/icons and these
 * badges are meant to always agree.
 *
 * Usage: <span class="el-type-badge el-type-{{ $element->type->code }}">...</span>
 */



.el-type-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    padding: 0.125rem 0.300rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25rem;
}

.el-type-task {
    background-color: #eef3ff;
    color: #3161d1;
}
.dark .el-type-task {
    background-color: rgba(70, 128, 255, .14);
    color: #8fb4ff;
}

.el-type-meeting {
    background-color: #fdf2f8;
    color: #be185d;
}
.dark .el-type-meeting {
    background-color: rgba(244, 114, 182, .14);
    color: #f472b6;
}

.el-type-milestone {
    background-color: #fef2f2;
    color: #b91c1c;
}
.dark .el-type-milestone {
    background-color: rgba(248, 113, 113, .14);
    color: #f87171;
}

.el-type-chantier {
    background-color: #fff7ed;
    color: #c2410c;
}
.dark .el-type-chantier {
    background-color: rgba(251, 146, 60, .14);
    color: #fb923c;
}

/*
 * Status badges (à faire/en cours/bloqué/en attente/à valider/terminé/
 * annulé) — unlike .el-type-*, this reuses the EXISTING registered Filament
 * colors via var() instead of hardcoded hex, because
 * HasElementPresentation::statusColor() already maps these categories onto
 * the right semantic slots (primary/danger/warning/info/success/gray)
 * everywhere else in the app (tabs, dots, stat tiles) — referencing the same
 * tokens guarantees these badges can never drift out of sync with that
 * mapping.
 *
 * Usage: <span class="el-status-badge el-status-{{ $status->category }}">...</span>
 */
.el-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    padding: 0.125rem 0.300rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25rem;
}

/* 'todo' and 'cancelled' share the same neutral gray — statusColor() has no
   distinct case for either (both fall through to its 'gray' default). */
.el-status-todo,
.el-status-cancelled {
    background-color: var(--gray-100);
    color: var(--gray-500);
}
.dark .el-status-todo,
.dark .el-status-cancelled {
    background-color: color-mix(in oklab, var(--gray-500) 10%, transparent);
    color: var(--gray-400);
}

.el-status-in_progress {
    background-color: var(--primary-50);
    color: var(--primary-600);
}
.dark .el-status-in_progress {
    background-color: color-mix(in oklab, var(--primary-500) 10%, transparent);
    color: var(--primary-400);
}

.el-status-blocked {
    background-color: var(--danger-50);
    color: var(--danger-600);
}
.dark .el-status-blocked {
    background-color: color-mix(in oklab, var(--danger-500) 10%, transparent);
    color: var(--danger-400);
}

.el-status-waiting {
    background-color: var(--warning-50);
    color: var(--warning-600);
}
.dark .el-status-waiting {
    background-color: color-mix(in oklab, var(--warning-500) 10%, transparent);
    color: var(--warning-400);
}

.el-status-to_validate {
    background-color: var(--info-50);
    color: var(--info-600);
}
.dark .el-status-to_validate {
    background-color: color-mix(in oklab, var(--info-500) 10%, transparent);
    color: var(--info-400);
}

.el-status-done {
    background-color: var(--success-50);
    color: var(--success-600);
}
.dark .el-status-done {
    background-color: color-mix(in oklab, var(--success-500) 10%, transparent);
    color: var(--success-400);
}

/*
 * Résultats de la recherche globale.
 *
 * Toute la mise en forme d'un résultat passe par son *titre*, pas par ses
 * `details`. Filament rend `details` dans un `<dl>` sous la forme
 * « Libellé : valeur », avec la valeur échappée par Blade (`{{ $value }}`) —
 * donc aucune pastille possible, et la propriété est typée
 * `array<string, string>`. Le titre, lui, est explicitement `string | Htmlable` :
 * c'est le seul point du contrat qui autorise du markup. Voir
 * `App\Filament\App\Search\ResultTitle`, qui compose ce HTML.
 *
 * `.el-type-badge` (pastille colorée par type d'élément) est réutilisé tel
 * quel ; `.js-result-chip` est la pastille neutre pour projet/code/catégorie.
 */
.fi-global-search-result-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.js-result-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    border: 1px solid var(--ablepro-border);
    padding: 0.0625rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1rem;
    color: var(--gray-500);
}

.dark .js-result-chip {
    color: var(--gray-400);
}

/*
 * The project's sub-navigation tab bar (ProjectResource::getRecordSubNavigation(),
 * SubNavigationPosition::Top — Synthèse/Liste/Gantt/Kanban/Charge/
 * Utilisateurs/Paramètres) uses Filament's own `<x-filament::tabs>`
 * component, whose default look is a solid pill/segmented control. The
 * approved mockup for this page used a flatter, underlined tab style
 * instead (in the same spirit as the rest of this app's Able Pro reskin —
 * flat, bordered, no heavy fills) — scoped to `.fi-page-sub-navigation-tabs`
 * specifically so it doesn't affect `<x-filament::tabs>` used anywhere
 * else in the app.
 */
.fi-page-sub-navigation-tabs {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--ablepro-border) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
}
.fi-page-sub-navigation-tabs .fi-tabs-item {
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    padding-block: 0.625rem !important;
    color: var(--ablepro-sidebar-border);
}
.fi-page-sub-navigation-tabs .fi-tabs-item:hover {
    background: transparent !important;
    color: var(--primary-600);
}
.fi-page-sub-navigation-tabs .fi-tabs-item.fi-active {
    background: transparent !important;
    border-bottom-color: var(--primary-500) !important;
    color: var(--primary-700) !important;
}
.dark .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active {
    color: var(--primary-400) !important;
}

.fi-tabs:not(.fi-contained) {
    margin-inline: 0 !important;
    margin-top:25px !important;
    box-shadow: none !important;
}
.fi-tabs-item{
    color: var(--gray-400) !important;
    font-weight: bold !important;
}

.fi-tabs-item:not(.fi-active):hover .fi-tabs-item-label, .fi-tabs-item:not(.fi-active):hover>.fi-icon{
    color: var(--gray-600) !important;
}

.fi-tabs-item:not(.fi-active) .fi-tabs-item-label, .fi-tabs-item:not(.fi-active)>.fi-icon{
    color: var(--gray-400) !important;
}

.fi-tabs-item.fi-active .fi-tabs-item-label, .fi-tabs-item.fi-active>.fi-icon {
    color: var(--primary-700) !important;
}

@media (width >= 40rem) {
    .fi-global-search-results-ctn {
        width: 50vw !important;
        max-width: 50vw !important;
        inset-inline-end: auto !important;
        inset-inline-start: auto !important;
    }
}

.fi-sidebar-nav-groups {
    row-gap: calc(var(--spacing) * 1) !important;
}

.fi-header{
    margin-bottom: calc(var(--spacing) * 4) !important;
}


/* Sous-menu avec ligne de vie */
.submenu {
    @apply flex flex-col;
}

.submenu-item {
    @apply flex items-center gap-x-3 py-1.5 text-sm font-medium text-gray-600 dark:text-gray-300;
}

.submenu-item:hover {
    @apply text-primary-600 dark:text-primary-300;
}

.submenu-rail {
    @apply relative flex h-6 w-6 shrink-0 items-center justify-center;

    & i {
        @apply relative z-10 block h-1.5 w-1.5 rounded-full bg-gray-400 not-italic dark:bg-gray-500;
    }
}

.submenu-item:not(:first-child) .submenu-rail::before {
    content: '';
    @apply absolute -top-1/2 bottom-1/2 w-px bg-gray-300 dark:bg-gray-600;
}

.submenu-item:not(:last-child) .submenu-rail::after {
    content: '';
    @apply absolute top-1/2 -bottom-1/2 w-px bg-gray-300 dark:bg-gray-600;
}

.fi-input-wrp {
    border-radius: 999px !important;
    --tw-shadow:none !important;
    border: 1px solid  var(--gray-200)!important;
}

.dark .fi-input-wrp{
    border: 1px solid rgba(255,255,255, 0.1) !important;
}

.fi-input-wrp:not(.fi-disabled):focus-within {
    --tw-ring-color: var(--ablepro-primary, #6b9bbd) !important;
}

.quick-add-title .fi-input-wrp, .quick-add-description .fi-input-wrp{
    border:none !important;
}

/*
 * Popup "Transformer en sous-élément" (HasElementDetail::promoteChecklistItemAction) —
 * mêmes champs Type/Responsable/Échéance que les pilules déjà posées à la
 * main sur les chips Statut/Priorité/Début/Échéance du panneau Aperçu
 * (element-detail.blade.php) : rounded-full (déjà donné par `.fi-input-wrp`
 * ci-dessus), px-3 py-1.5, text-xs font-semibold. Seule la taille du texte/
 * padding manque ici, Filament posant les siens par défaut sur le bouton
 * intérieur plutôt que sur le wrapper.
 */
.apercu-chip-field .fi-select-input-btn,
.apercu-chip-field input[type="text"] {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    min-height: 0 !important;
}

/*
 * Description de la même popup : `.fi-input-wrp` ci-dessus est pensé pour
 * un champ court d'une ligne (rounded-full y dessine un pourtour net) — sur
 * l'éditeur multi-lignes de la description, la même règle donne une boîte
 * ovale au lieu d'un rectangle arrondi. Neutralisé ici plutôt que dans la
 * règle globale, pour ne pas affecter les autres usages de RichEditor.
 */
.promote-checklist-description .fi-input-wrp {
    border-radius: 0.5rem !important;
}

/* Fait qu'une section ->aside() (utilisée uniquement par le package
 * filament-edit-profile — grep confirme qu'aucun code de l'app n'utilise
 * aside() ailleurs) rejoigne la même carte que .fi-section :not(.fi-aside)
 * ci-dessus, plutôt que d'empiler une seconde boîte à l'intérieur. */
.fi-section.fi-aside {
    grid-template-columns: 1fr !important;
    row-gap:0 !important;
}

.fi-section.fi-aside > .fi-section-header {
    padding: 1rem 1.5rem !important; /* px-6 py-4, comme le header non-aside */
}

.fi-section.fi-aside.fi-section-has-header > .fi-section-content-ctn {
    border-top: 1px solid var(--ablepro-card-border) !important;
}

.fi-section.fi-aside > .fi-section-content-ctn {
    box-shadow: none !important; /* retire la boîte imbriquée de Filament */
    background: transparent !important;
}

html{
    scroll-behavior: smooth !important;
}

h2[id] {
    scroll-margin-top: 5rem;
}

.logo-before{
    display:none !important;
}

.dropdown-menu-btn{
    background-color: #FFF !important;
    border-radius: 0px !important;
    border-bottom: 2px solid var(--primary-500) !important;
    color: var(--ablepro-primary) !important;
}