/*
 * Shortext — thème Filament 4
 *
 * Feuille non compilée, chargée après le CSS de Filament. Filament range ses
 * styles dans des @layer : les règles ci-dessous, hors couche, passent devant
 * sans avoir besoin de !important (sauf pour les variables posées en ligne).
 *
 * Les couleurs `--primary-*` et `--gray-*` viennent des palettes enregistrées
 * par ShortextThemePlugin ; ce fichier ne pose que la forme et les surfaces.
 */

/* ------------------------------------------------------------------ */
/* Jetons                                                              */
/* ------------------------------------------------------------------ */

/*
 * Fonds neutres, sans teinte : le contraste fond de page / carte porte la
 * lisibilité, le vert est réservé aux actions et aux indicateurs.
 */
:root {
    --st-canvas: #efefef;
    --st-surface: #ffffff;
    --st-surface-2: #f3f3f3;
    --st-field: #f3f3f3;
    --st-field-line: transparent;
    --st-line: rgba(0, 0, 0, 0.07);
    --st-line-strong: rgba(0, 0, 0, 0.12);
    --st-text: #111312;
    --st-muted: #646766;
    --st-on-accent: #0a1908;
    --st-accent-text: var(--primary-700);
    --st-accent-soft: color-mix(in oklab, var(--primary-500) 16%, transparent);
    --st-active: #ececec;
    --st-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 20px rgba(0, 0, 0, 0.04);
    --st-overlay: rgba(17, 19, 18, 0.45);

    --st-radius-card: 1.25rem;
    --st-radius-inner: 0.875rem;
    --st-radius-control: 0.75rem;
    --st-radius-pill: 999px;
    --st-gutter: 0.75rem;
}

.dark {
    /* Fond presque noir : les cartes (#222524) s'en détachent nettement. */
    --st-canvas: #0c0d0d;
    --st-surface: #222524;
    --st-surface-2: #292c2b;
    /* Champs nettement plus clairs que la carte, avec un filet : ils se
       détachent du fond sans peser. */
    --st-field: #343837;
    --st-field-line: rgba(255, 255, 255, 0.1);
    --st-line: rgba(255, 255, 255, 0.08);
    --st-line-strong: rgba(255, 255, 255, 0.13);
    --st-text: #f2f3f3;
    --st-muted: #a3a5a4;
    --st-accent-text: var(--primary-400);
    --st-accent-soft: color-mix(in oklab, var(--primary-500) 12%, transparent);
    --st-active: #303332;
    /* No shadow, but still a valid shadow: "none" inside the card rule's list would void it, border line included */
    --st-shadow: 0 0 #0000;
    --st-overlay: rgba(10, 11, 11, 0.7);
}

/* Surface d'une carte : bordure fine + ombre douce en clair. */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-sc-wizard.fi-contained,
.fi-fo-repeater-item,
.fi-fo-builder-item {
    border-radius: var(--st-radius-card);
    background-color: var(--st-surface);
    box-shadow: 0 0 0 1px var(--st-line), var(--st-shadow);
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

.fi-body {
    background-color: var(--st-canvas);
    color: var(--st-text);
    -webkit-font-smoothing: antialiased;
}

.fi-body * {
    scrollbar-width: thin;
    scrollbar-color: var(--st-line-strong) transparent;
}

.fi-header-heading,
.fi-simple-header-heading {
    font-weight: 500;
    letter-spacing: -0.02em;
}

.fi-header-subheading,
.fi-simple-header-subheading {
    color: var(--st-muted);
}

/* ------------------------------------------------------------------ */
/* Topbar                                                              */
/* ------------------------------------------------------------------ */

.fi-topbar {
    background-color: var(--st-canvas);
    box-shadow: none;
}

.fi-global-search .fi-input-wrp {
    border-radius: var(--st-radius-pill);
    background-color: var(--st-surface);
    box-shadow: 0 0 0 1px var(--st-line);
}

.fi-topbar .fi-icon-btn,
.fi-topbar .fi-user-menu-trigger {
    border-radius: var(--st-radius-pill);
}

/* ------------------------------------------------------------------ */
/* Sidebar                                                             */
/* ------------------------------------------------------------------ */

.fi-sidebar-nav {
    gap: 1.25rem;
    padding: 1rem 0.75rem;
}

.fi-sidebar-nav-groups {
    gap: 1.25rem;
    margin-inline: 0;
}

.fi-sidebar-group-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--st-muted);
}

.fi-sidebar-item-btn,
.fi-sidebar-group-dropdown-trigger-btn,
.fi-sidebar-database-notifications-btn {
    border-radius: var(--st-radius-control);
    padding: 0.5rem 0.75rem;
}

.fi-sidebar-item-label {
    color: var(--st-muted);
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background-color: var(--st-surface-2);
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover > .fi-sidebar-item-label {
    color: var(--st-text);
}

/* Élément actif : fond neutre, seule une barre lime sur le bord le signale. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--st-active);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-inline-start: -0.75rem;
    top: 50%;
    width: 3px;
    height: 1.25rem;
    border-start-end-radius: 3px;
    border-end-end-radius: 3px;
    background-color: var(--primary-500);
    transform: translateY(-50%);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--st-text);
    font-weight: 600;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--st-text);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-grouped-border-part {
    background-color: var(--primary-500);
}

.fi-sidebar-item-grouped-border-part-not-first,
.fi-sidebar-item-grouped-border-part-not-last {
    background-color: var(--st-line-strong);
}

.fi-sidebar-footer {
    margin-inline: 0.75rem;
    border-color: var(--st-line);
}

.fi-tenant-menu-trigger {
    border-radius: var(--st-radius-inner);
    background-color: var(--st-surface-2);
}

.fi-sidebar-header-controls::after {
    border-color: var(--st-line);
}

/* Sidebar détachée : une carte arrondie décollée des bords (écrans larges). */
@media (min-width: 64rem) {
    html.st-detached-sidebar .fi-body:not(.fi-body-has-top-navigation) .fi-sidebar {
        top: calc(var(--topbar-height, 0px) + var(--st-banner-height, 0px) + var(--st-gutter));
        height: calc(100dvh - var(--topbar-height, 0px) - var(--st-banner-height, 0px) - 2 * var(--st-gutter));
        margin: var(--st-gutter) 0 var(--st-gutter) var(--st-gutter);
        border-radius: var(--st-radius-card);
        background-color: var(--st-surface);
        box-shadow: 0 0 0 1px var(--st-line), var(--st-shadow);
        /* Pas d'overflow: hidden : en mode replié, les menus des groupes
           s'ouvrent dans la sidebar et doivent pouvoir en déborder. */
    }

    html.st-detached-sidebar .fi-body:not(.fi-body-has-topbar):not(.fi-body-has-top-navigation) .fi-sidebar {
        top: var(--st-gutter);
        height: calc(100dvh - 2 * var(--st-gutter));
    }

    html.st-detached-sidebar .fi-body:not(.fi-body-has-topbar) .fi-sidebar-header {
        background-color: transparent;
    }
}

/*
 * Navigation repliée : les badges restent visibles, en pastille sur le coin
 * de l'icône. Vaut pour la sidebar principale (->collapsedSidebarBadges())
 * et pour la sous-navigation des clusters (->collapsibleSubNavigation()).
 * Filament masque les badges de la sidebar repliée par un x-show en ligne,
 * d'où le !important sur display.
 */
@media (min-width: 48rem) {
    :is(html.st-collapsed-badges .fi-main-sidebar:not(.fi-sidebar-open), html.st-subnav-collapsed .fi-page-sub-navigation-sidebar) .fi-sidebar-item-btn {
        position: relative;
    }

    :is(html.st-collapsed-badges .fi-main-sidebar:not(.fi-sidebar-open), html.st-subnav-collapsed .fi-page-sub-navigation-sidebar) .fi-sidebar-item-badge-ctn {
        display: flex !important;
        position: absolute;
        top: -0.125rem;
        inset-inline-end: -0.125rem;
        opacity: 1;
        transform: none;
    }

    :is(html.st-collapsed-badges .fi-main-sidebar:not(.fi-sidebar-open), html.st-subnav-collapsed .fi-page-sub-navigation-sidebar) .fi-sidebar-item-badge-ctn .fi-badge {
        min-width: 1.125rem;
        height: 1.125rem;
        padding: 0 0.25rem;
        align-items: center;
        justify-content: center;
        font-size: 0.625rem;
        line-height: 1;
        letter-spacing: -0.02em;
        box-shadow: 0 0 0 2px var(--st-surface);
    }

    /* Sous-navigation : le bouton occupe toute la colonne et l'icône y est
       centrée, la pastille se cale donc sur l'icône plutôt que sur le bord. */
    html.st-subnav-collapsed .fi-page-sub-navigation-sidebar .fi-sidebar-item-badge-ctn {
        top: 0;
        inset-inline-end: calc(50% - 1.25rem);
    }

    /* Filament aligne le libellé sur la ligne de base : dans une pastille de
       hauteur fixe, il faut le recentrer. */
    :is(html.st-collapsed-badges .fi-main-sidebar:not(.fi-sidebar-open), html.st-subnav-collapsed .fi-page-sub-navigation-sidebar) .fi-sidebar-item-badge-ctn :is(.fi-badge-label-ctn, .fi-badge-label, .st-odo) {
        display: flex;
        align-self: center;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
}

/* Tiroir mobile : même surface, coins arrondis côté contenu. */
@media (max-width: 63.999rem) {
    .fi-sidebar.fi-sidebar-open {
        background-color: var(--st-surface);
        border-start-end-radius: var(--st-radius-card);
        border-end-end-radius: var(--st-radius-card);
    }
}

/* ------------------------------------------------------------------ */
/* Bandeaux de compte (->banners()) et pastille de solde               */
/* ------------------------------------------------------------------ */

/*
 * Les bandeaux collent en haut de l'écran, au-dessus de la topbar. Leur
 * hauteur, mesurée par shortext-motion.js, est déduite de la topbar, de la
 * sidebar et du contenu : la page tient toujours dans l'écran, sans défilement
 * en trop. z-index 30 : sous le tiroir mobile de la sidebar (même rang, plus
 * loin dans la page).
 */
:root {
    --st-banner-height: 0px;
}

.st-banners {
    position: sticky;
    top: 0;
    z-index: 30;
}

.fi-topbar-ctn {
    top: var(--st-banner-height);
}

.fi-body.fi-body-has-topbar .fi-main-ctn {
    min-height: calc(100dvh - var(--topbar-height) - var(--st-banner-height));
}

@media (min-width: 64rem) {
    .fi-body-has-topbar .fi-sidebar {
        top: calc(var(--topbar-height) + var(--st-banner-height));
        height: calc(100dvh - var(--topbar-height) - var(--st-banner-height));
    }
}

/* Couleur du niveau, partagée par la bande du haut et les cartes du panneau. */
.st-banner,
.st-alert {
    --st-banner-color: var(--info-500);
}

.st-banner-warning,
.st-alert-warning {
    --st-banner-color: var(--warning-500);
}

.st-banner-danger,
.st-alert-danger {
    --st-banner-color: var(--danger-500);
}

.st-banner {
    position: relative;
    border-bottom: 1px solid color-mix(in oklab, var(--st-banner-color) 35%, transparent);
    background-color: color-mix(in oklab, var(--st-banner-color) 14%, var(--st-canvas));
    color: var(--st-text);
    font-size: 0.875rem;
}


.st-banner-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-height: 2.75rem;
    padding: 0.375rem 1rem;
}

.st-banner-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    color: var(--st-banner-color);
}

.st-banner-text {
    flex: 1 1 18rem;
    margin: 0;
    line-height: 1.4;
}

.st-banner-title {
    margin-inline-end: 0.375rem;
    font-weight: 600;
}

.st-banner-message {
    color: color-mix(in oklab, var(--st-text) 82%, transparent);
}

.st-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-inline-start: auto;
}

.st-banner-action {
    display: inline-flex;
    align-items: center;
    min-height: 1.875rem;
    padding: 0 0.875rem;
    border-radius: var(--st-radius-pill);
    background-color: var(--st-banner-color);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* Texte blanc lisible : teinte 600 pour le bleu et le rouge ; le jaune de
   l'avertissement garde sa teinte 500 et appelle un texte foncé. */
:is(.st-banner-info, .st-alert-info) .st-banner-action {
    background-color: var(--info-600);
}

:is(.st-banner-danger, .st-alert-danger) .st-banner-action {
    background-color: var(--danger-600);
}

:is(.st-banner-warning, .st-alert-warning) .st-banner-action {
    color: #1a1300;
}

/* Panneau « Alertes du compte » : une carte par alerte. */
.st-alerts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 0.875rem 0.875rem 1rem;
    border-radius: var(--st-radius-inner);
    background-color: color-mix(in oklab, var(--st-banner-color) 10%, var(--st-surface-2));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--st-banner-color) 28%, transparent);
}

.st-alert-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--st-radius-pill);
    background-color: color-mix(in oklab, var(--st-banner-color) 20%, transparent);
    color: var(--st-banner-color);
}

.st-alert-icon .fi-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.st-alert-body {
    flex: 1;
    min-width: 0;
}

.st-alert-title {
    margin: 0 0 0.125rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.st-alert-message {
    margin: 0;
    color: var(--st-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

.st-alert-actions {
    margin-top: 0.625rem;
}

.st-alerts-empty {
    margin: 0;
    padding: 2rem 0;
    color: var(--st-muted);
    text-align: center;
}

.st-banner-action:hover {
    filter: brightness(1.08);
}

.st-banner-note {
    color: var(--st-muted);
    font-size: 0.8125rem;
}

.st-banner-more {
    min-height: 1.875rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: var(--st-radius-pill);
    background-color: color-mix(in oklab, var(--st-banner-color) 18%, transparent);
    color: var(--st-text);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.st-banner-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    border: 0;
    border-radius: var(--st-radius-pill);
    background: transparent;
    color: var(--st-muted);
    cursor: pointer;
}

.st-banner-dismiss:hover {
    background-color: color-mix(in oklab, var(--st-banner-color) 18%, transparent);
    color: var(--st-text);
}

.st-banner-dismiss .fi-icon {
    width: 1rem;
    height: 1rem;
}

.st-balance-chip {
    --st-chip-color: var(--st-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding: 0 0.875rem;
    border-radius: var(--st-radius-pill);
    background-color: var(--st-surface);
    box-shadow: 0 0 0 1px var(--st-line);
    color: var(--st-text);
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
}

a.st-balance-chip:hover {
    background-color: var(--st-surface-2);
}

.st-balance-chip-icon {
    width: 1rem;
    height: 1rem;
    color: var(--st-chip-color);
}

.st-balance-chip-warning {
    --st-chip-color: var(--warning-500);
    background-color: color-mix(in oklab, var(--warning-500) 14%, var(--st-surface));
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--warning-500) 40%, transparent);
}

.st-balance-chip-danger {
    --st-chip-color: var(--danger-500);
    background-color: color-mix(in oklab, var(--danger-500) 14%, var(--st-surface));
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--danger-500) 40%, transparent);
}

/* ------------------------------------------------------------------ */
/* Sections, onglets, assistant                                        */
/* ------------------------------------------------------------------ */

.fi-section.fi-secondary:not(.fi-aside),
.fi-section.fi-secondary.fi-aside > .fi-section-content-ctn {
    background-color: var(--st-surface-2);
}

.fi-section-header-heading {
    font-weight: 600;
}

.fi-section-header-description {
    color: var(--st-muted);
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-section-has-header:not(.fi-collapsed) > .fi-section-content-ctn,
.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-footer {
    border-color: var(--st-line);
}

.fi-tabs:not(.fi-contained) {
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--st-radius-pill);
    background-color: var(--st-surface);
    box-shadow: 0 0 0 1px var(--st-line), var(--st-shadow);
}

.fi-tabs.fi-contained {
    border-color: var(--st-line);
}

.fi-tabs.fi-vertical:not(.fi-contained) {
    border-radius: var(--st-radius-card);
}

.fi-tabs-item {
    border-radius: var(--st-radius-pill);
    padding: 0.4375rem 0.875rem;
}

.fi-tabs.fi-vertical .fi-tabs-item {
    border-radius: var(--st-radius-control);
}

.fi-tabs-item:hover,
.fi-tabs-item:focus-visible {
    background-color: var(--st-surface-2);
}

.fi-tabs-item.fi-active {
    background-color: var(--st-active);
    box-shadow: inset 0 0 0 1px var(--st-line-strong);
}

.fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--st-text);
}

.fi-tabs-item.fi-active > .fi-icon {
    color: var(--st-accent-text);
}

.fi-sc-wizard .fi-sc-wizard-header {
    border-color: var(--st-line);
}

.fi-sc-wizard .fi-sc-wizard-header-step-separator {
    color: var(--st-line-strong);
}

.fi-sc-wizard .fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-icon-ctn {
    background-color: var(--primary-500);
}

.fi-sc-wizard .fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-icon-ctn .fi-icon {
    color: var(--st-on-accent);
}

.fi-sc-wizard .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-icon-ctn {
    border-color: var(--primary-500);
    background-color: var(--st-accent-soft);
}

.fi-sc-wizard .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-number,
.fi-sc-wizard .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-label {
    color: var(--st-accent-text);
}

/* ------------------------------------------------------------------ */
/* Boutons, liens, badges                                              */
/* ------------------------------------------------------------------ */

.fi-btn {
    border-radius: var(--st-radius-pill);
    padding-inline: 1rem;
}

.fi-btn.fi-size-xs,
.fi-btn.fi-size-sm {
    padding-inline: 0.75rem;
}

.fi-btn.fi-size-lg,
.fi-btn.fi-size-xl {
    padding-inline: 1.25rem;
}

/* Texte calculé d'après la couleur (blanc sur le vert, foncé sur le lime). */
.fi-btn.fi-color-primary:not(.fi-outlined):not(label),
.fi-btn.fi-color-primary:not(.fi-outlined):is(:checked + label) {
    --bg: var(--primary-500);
    --dark-bg: var(--primary-500);
    --hover-bg: var(--primary-600);
    --dark-hover-bg: var(--primary-600);
    --text: var(--st-on-accent);
    --dark-text: var(--st-on-accent);
    --hover-text: var(--st-on-accent);
    --dark-hover-text: var(--st-on-accent);
    font-weight: 600;
}

.fi-btn:not(.fi-color):not(.fi-outlined) {
    background-color: var(--st-surface-2);
    box-shadow: 0 0 0 1px var(--st-line-strong);
}

.fi-btn:not(.fi-color):not(.fi-outlined):not(.fi-disabled):not([disabled]):hover {
    background-color: var(--st-field);
}

.fi-icon-btn {
    border-radius: var(--st-radius-pill);
}

.fi-link.fi-color-primary {
    color: var(--st-accent-text);
}

/*
 * Groupe de boutons (ToggleButtons->grouped(), groupe d'actions en boutons) :
 * un rail en pilule, les boutons posés dedans sans contour propre. Sans cela,
 * le bouton choisi (pilule) recouvre le cadre rectangulaire du groupe et la
 * bordure n'apparaît que du côté des boutons non choisis.
 */
.fi-btn-group {
    gap: 2px;
    padding: 3px;
    border-radius: var(--st-radius-pill);
    background-color: var(--st-field);
    box-shadow: 0 0 0 1px var(--st-field-line);
}

.fi-btn-group > .fi-btn,
.fi-btn-group > .fi-btn:not(:nth-child(1 of .fi-btn)) {
    margin-inline-end: 0;
    border-radius: var(--st-radius-pill);
    box-shadow: none;
}

/* Bouton non choisi : transparent sur le rail, le choisi garde sa couleur. */
.fi-btn-group > .fi-btn[aria-pressed='false'],
.fi-btn-group > .fi-btn:not(.fi-color):not(.fi-outlined) {
    background-color: transparent;
}

.fi-btn-group > .fi-btn[aria-pressed='false']:not([disabled]):hover,
.fi-btn-group > .fi-btn:not(.fi-color):not(.fi-outlined):not([disabled]):hover {
    background-color: var(--st-active);
}

.fi-badge {
    border-radius: var(--st-radius-pill);
    padding-inline: 0.625rem;
    box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Champs                                                              */
/* ------------------------------------------------------------------ */

.fi-input-wrp {
    border-radius: var(--st-radius-control);
    background-color: var(--st-field);
    box-shadow: 0 0 0 1px var(--st-field-line);
}

.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
    box-shadow: 0 0 0 1px var(--primary-500), 0 0 0 4px var(--st-accent-soft);
}

.fi-input-wrp.fi-invalid,
.fi-input-wrp.fi-invalid:not(.fi-disabled):focus-within {
    box-shadow: 0 0 0 1px var(--danger-500);
}

.fi-input-wrp.fi-disabled {
    background-color: transparent;
    box-shadow: 0 0 0 1px var(--st-line);
}

.fi-input::placeholder,
.fi-select-input::placeholder {
    color: var(--st-muted);
}

.fi-checkbox-input {
    border-radius: 0.375rem;
}

.fi-fo-field-label-required-mark {
    color: var(--st-accent-text);
}

.fi-sc-text.fi-color-gray {
    color: var(--st-muted);
}

/* Curseur (Slider) : piste du thème, plage en couleur principale, poignées rondes. */
.fi-fo-slider {
    border-radius: var(--st-radius-pill);
    box-shadow: none;
}

.fi-fo-slider .noUi-connects {
    border-radius: var(--st-radius-pill);
    background-color: var(--st-field);
}

.fi-fo-slider .noUi-connect {
    background-color: var(--primary-500);
}

.fi-fo-slider .noUi-handle {
    border-radius: var(--st-radius-pill);
    border-color: var(--st-line-strong);
    background-color: var(--st-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.fi-fo-slider .noUi-tooltip {
    border-radius: 0.5rem;
    background-color: var(--st-surface);
    color: var(--st-text);
    box-shadow: 0 0 0 1px var(--st-line-strong);
}

/* Éditeur de code : remplace le fond « One Dark » par les surfaces du thème. */
.fi-fo-code-editor {
    border-radius: var(--st-radius-control);
    overflow: hidden;
}

.fi-fo-code-editor .cm-editor {
    background-color: var(--st-field);
}

.fi-fo-code-editor .cm-gutters {
    border-color: var(--st-line);
    background-color: var(--st-surface-2);
    color: var(--st-muted);
}

.fi-fo-code-editor :is(.cm-activeLine, .cm-activeLineGutter) {
    background-color: var(--st-accent-soft);
}

.fi-fo-code-editor .cm-editor.cm-focused {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--primary-500);
}

/* ------------------------------------------------------------------ */
/* Tableaux et pagination                                              */
/* ------------------------------------------------------------------ */

.fi-ta-header-toolbar,
.fi-ta-ctn .fi-ta-header {
    border-color: var(--st-line);
}

.fi-ta-search-field .fi-input-wrp {
    border-radius: var(--st-radius-pill);
}

.fi-ta-header-cell {
    color: var(--st-muted);
}

.fi-ta-table > thead > tr {
    background-color: var(--st-surface-2);
}

.fi-ta-table > tbody,
.fi-ta-table > tbody > tr,
.fi-ta-table > thead {
    border-color: var(--st-line);
}

.fi-ta-row.fi-selected:not(.fi-striped) {
    background-color: var(--st-accent-soft);
}

/*
 * Actions de ligne visibles au survol seulement (->hoverTableActions()).
 * Réservé aux écrans à souris : sur tactile, elles restent affichées.
 * Elles réapparaissent aussi au clavier et tant qu'un de leurs menus est ouvert.
 */
@media (hover: hover) {
    html.st-hover-actions .fi-ta-row .fi-ta-actions,
    html.st-hover-actions .fi-ta-record .fi-ta-actions {
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    html.st-hover-actions .fi-ta-row:hover .fi-ta-actions,
    html.st-hover-actions .fi-ta-row:focus-within .fi-ta-actions,
    html.st-hover-actions .fi-ta-record:hover .fi-ta-actions,
    html.st-hover-actions .fi-ta-record:focus-within .fi-ta-actions,
    html.st-hover-actions .fi-ta-actions:has([aria-expanded='true']) {
        opacity: 1;
    }
}

.fi-ta-ctn .fi-pagination {
    border-color: var(--st-line);
}

.fi-pagination .fi-pagination-items {
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--st-radius-pill);
    background-color: var(--st-surface-2);
    box-shadow: 0 0 0 1px var(--st-line);
}

.fi-pagination .fi-pagination-item {
    border: 0;
}

.fi-pagination .fi-pagination-item .fi-pagination-item-btn {
    min-width: 2rem;
    justify-content: center;
    border-radius: var(--st-radius-pill);
}

.fi-pagination .fi-pagination-item.fi-active .fi-pagination-item-btn {
    background-color: var(--primary-500);
}

.fi-pagination .fi-pagination-item.fi-active .fi-pagination-item-label {
    color: var(--st-on-accent);
}

.fi-pagination-records-per-page-select .fi-input-wrp {
    border-radius: var(--st-radius-pill);
}

/* ------------------------------------------------------------------ */
/* Sous-navigation repliable (->collapsibleSubNavigation())            */
/* ------------------------------------------------------------------ */

.st-subnav-toggle {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 0.5rem;
}

@media (max-width: 47.999rem) {
    .st-subnav-toggle {
        display: none;
    }
}

@media (min-width: 48rem) {
    html.st-subnav-ready .fi-page-sub-navigation-sidebar-ctn {
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    html.st-subnav-ready .fi-page-sub-navigation-sidebar :is(.fi-sidebar-item-label, .fi-sidebar-item-badge-ctn, .fi-sidebar-group-label) {
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    html.st-subnav-collapsed .fi-page-sub-navigation-sidebar-ctn {
        width: 4.25rem;
    }

    html.st-subnav-collapsed .st-subnav-toggle {
        justify-content: center;
    }

    /* Les badges, eux, restent en pastille (voir « Navigation repliée »). */
    html.st-subnav-collapsed .fi-page-sub-navigation-sidebar :is(.fi-sidebar-item-label, .fi-sidebar-group-label) {
        display: none;
    }

    html.st-subnav-collapsed .fi-page-sub-navigation-sidebar .fi-sidebar-item-btn {
        justify-content: center;
        padding-inline: 0.75rem;
    }

    /* Infobulle : le libellé de l'élément, à droite de l'icône. */
    html.st-subnav-collapsed .fi-page-sub-navigation-sidebar [data-st-label]::after {
        content: attr(data-st-label);
        position: absolute;
        inset-inline-start: calc(100% + 0.5rem);
        top: 50%;
        z-index: 40;
        padding: 0.375rem 0.625rem;
        border-radius: 0.5rem;
        background-color: var(--st-text);
        color: var(--st-canvas);
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%);
        transition: opacity 0.12s ease 0.04s;
    }

    html.st-subnav-collapsed .fi-page-sub-navigation-sidebar .fi-sidebar-item:is(:hover, :focus-within) [data-st-label]::after {
        opacity: 1;
    }
}

/* ------------------------------------------------------------------ */
/* Compteurs à rouleaux (->animatedCounters())                          */
/* ------------------------------------------------------------------ */

.st-odo {
    display: inline-flex;
    font-variant-numeric: tabular-nums;
}

.st-odo-d {
    display: inline-block;
    height: 1.2em;
    overflow: hidden;
    line-height: 1.2em;
}

.st-odo-s {
    display: flex;
    flex-direction: column;
    transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.st-odo-s > span {
    height: 1.2em;
}

.st-odo-c {
    white-space: pre;
}

.st-odo-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Canevas des étincelles au clic (->clickSpark()). Sélecteur limité au
   <canvas> : `st-click-spark` est aussi la classe d'option posée sur <html>. */
canvas.st-click-spark-canvas {
    position: fixed;
    inset: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Widgets                                                             */
/* ------------------------------------------------------------------ */

.fi-wi-stats-overview-stat-value {
    font-weight: 600;
    letter-spacing: -0.02em;
}

.fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat-description {
    color: var(--st-muted);
}

/* ------------------------------------------------------------------ */
/* Menus, modales, notifications                                       */
/* ------------------------------------------------------------------ */

.fi-dropdown-panel {
    border-radius: 1rem;
    background-color: var(--st-surface);
    box-shadow: 0 0 0 1px var(--st-line-strong), 0 12px 32px rgba(0, 0, 0, 0.18);
    /* Horizontal only: this rule is outside Filament's layers, and a plain
       overflow: hidden overrode its overflow-y: auto, so a long menu or
       select list stayed frozen at its max height. */
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.fi-dropdown-list {
    padding: 0.25rem;
}

.fi-dropdown-list-item {
    border-radius: 0.625rem;
}

.fi-modal-close-overlay {
    background-color: var(--st-overlay);
    backdrop-filter: blur(4px);
}

.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window {
    border-radius: 1.5rem;
    background-color: var(--st-surface);
    box-shadow: 0 0 0 1px var(--st-line-strong), 0 24px 60px rgba(0, 0, 0, 0.3);
}

/* Panneau latéral : décollé du bord, comme le reste des surfaces. */
@media (min-width: 40rem) {
    .fi-modal.fi-modal-slide-over > .fi-modal-window-ctn > .fi-modal-window {
        height: calc(100dvh - 2 * var(--st-gutter));
        margin-block: var(--st-gutter);
        border-radius: var(--st-radius-card);
        background-color: var(--st-surface);
        box-shadow: 0 0 0 1px var(--st-line-strong), 0 24px 60px rgba(0, 0, 0, 0.3);
    }

    /* Seule la marge côté bord change : Filament ancre le panneau avec l'autre. */
    .fi-modal.fi-modal-slide-over:not(.fi-modal-slide-over-from-start) > .fi-modal-window-ctn > .fi-modal-window {
        margin-inline-end: var(--st-gutter);
    }

    .fi-modal.fi-modal-slide-over.fi-modal-slide-over-from-start > .fi-modal-window-ctn > .fi-modal-window {
        margin-inline-start: var(--st-gutter);
    }
}

.fi-modal-footer,
.fi-modal-header {
    border-color: var(--st-line);
}

.fi-no-notification {
    border-radius: 1rem;
    background-color: var(--st-surface);
    box-shadow: 0 0 0 1px var(--st-line-strong), 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* ------------------------------------------------------------------ */
/* Pages simples (connexion, inscription)                              */
/* ------------------------------------------------------------------ */

.fi-simple-layout {
    background-color: var(--st-canvas);
}

/*
 * ->authBackground() : motif du thème, cercles concentriques très discrets,
 * avec trois points posés sur les anneaux (comme des planètes en orbite).
 */
html.st-auth-pattern .fi-simple-layout {
    background-image:
        radial-gradient(circle at calc(50% + 42rem) 50%, var(--primary-500) 0 0.3rem, transparent 0.34rem),
        radial-gradient(circle at calc(50% - 22.52rem) calc(50% - 13rem), color-mix(in oklab, var(--primary-500) 60%, transparent) 0 0.24rem, transparent 0.28rem),
        radial-gradient(circle at calc(50% + 17rem) calc(50% + 29.44rem), color-mix(in oklab, var(--primary-500) 40%, transparent) 0 0.2rem, transparent 0.24rem),
        radial-gradient(circle at 50% 50%, transparent 0 17.95rem, var(--st-line) 18rem, transparent 18.05rem),
        radial-gradient(circle at 50% 50%, transparent 0 25.95rem, var(--st-line) 26rem, transparent 26.05rem),
        radial-gradient(circle at 50% 50%, transparent 0 33.95rem, var(--st-line) 34rem, transparent 34.05rem),
        radial-gradient(circle at 50% 50%, transparent 0 41.95rem, var(--st-line) 42rem, transparent 42.05rem);
    background-attachment: fixed;
}

/* ->authBackground('…') : image de marque, voilée pour garder la carte lisible. */
html.st-auth-image .fi-simple-layout {
    background-image:
        linear-gradient(var(--st-overlay), var(--st-overlay)),
        var(--st-auth-image);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.fi-simple-main {
    border-radius: 1.5rem;
    background-color: var(--st-surface);
    box-shadow: 0 0 0 1px var(--st-line), 0 20px 50px rgba(0, 0, 0, 0.12);
}

/*
 * Calendrier : Guava Calendar (EventCalendar 4). Seulement des variables et
 * des classes `.ec-*` : le widget de l'application n'a rien à changer.
 * Cases arrondies séparées par la couleur de la carte, aujourd'hui entouré de
 * la couleur principale, événements teintés de la couleur de leur intention
 * avec un liseré plein à gauche.
 */
.fi-body .ec {
    --ec-bg-color: transparent;
    --ec-border-color: transparent;
    --ec-text-color: var(--st-text);
    --ec-today-bg-color: transparent;
    --ec-highlight-color: var(--st-accent-soft);
    --ec-popup-bg-color: var(--st-surface);
    --ec-button-bg-color: var(--st-surface-2);
    --ec-button-border-color: transparent;
    --ec-button-text-color: var(--st-text);
    --ec-button-active-bg-color: var(--st-active);
    --ec-button-active-border-color: transparent;
    --ec-button-active-text-color: var(--st-text);
    --ec-now-indicator-color: var(--danger-500);
    font-size: 0.8125rem;
}

.fi-body .ec-toolbar {
    margin-bottom: 0.75rem;
}

.fi-body .ec-title {
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.fi-body .ec-button {
    height: 2rem;
    padding: 0 0.875rem;
    border: 0;
    border-radius: var(--st-radius-pill);
    box-shadow: 0 0 0 1px var(--st-line);
    font-weight: 500;
}

.fi-body .ec-button:not(:disabled):hover {
    background-color: var(--st-field);
}

.fi-body .ec-button:disabled {
    opacity: 0.55;
}

.fi-body .ec-button.ec-active {
    background-color: var(--st-active);
    box-shadow: inset 0 0 0 1px var(--st-line-strong);
}

.fi-body .ec-button-group {
    gap: 0.25rem;
}

.fi-body .ec-button-group .ec-button {
    border-radius: var(--st-radius-pill);
}

.fi-body .ec-button-group .ec-button.ec-prev,
.fi-body .ec-button-group .ec-button.ec-next {
    width: 2rem;
    padding: 0;
}

/* Jours de la semaine */
.fi-body .ec-header {
    border: 0;
}

.fi-body .ec-header .ec-day {
    padding: 0.375rem 0;
    border: 0;
    background: none;
    color: var(--st-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Cases du mois et colonnes de la semaine */
.fi-body .ec-body {
    border: 0;
}

.fi-body .ec-day-grid .ec-body .ec-day,
.fi-body .ec-time-grid .ec-body .ec-day {
    border: 3px solid var(--st-surface);
    border-radius: 0.875rem;
    background-color: var(--st-surface-2);
}

.fi-body .ec-day-grid .ec-body .ec-day {
    min-height: 5.5rem;
}

.fi-body .ec-body .ec-day.ec-sat,
.fi-body .ec-body .ec-day.ec-sun {
    background-color: color-mix(in oklab, var(--st-surface-2) 60%, var(--st-surface));
}

.fi-body .ec-body .ec-day.ec-other-month {
    opacity: 0.45;
}

.fi-body .ec-day-grid .ec-body .ec-day.ec-today,
.fi-body .ec-time-grid .ec-body .ec-day.ec-today {
    box-shadow: inset 0 0 0 1.5px var(--primary-500);
}

.fi-body .ec-day-head {
    color: var(--st-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.fi-body .ec-day-grid .ec-day-head time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    border-radius: var(--st-radius-pill);
}

.fi-body .ec-day-grid .ec-today .ec-day-head time {
    background-color: var(--primary-500);
    color: var(--st-on-accent);
}

.fi-body .ec-day-foot a {
    color: var(--st-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.fi-body .ec-day-foot a:hover {
    color: var(--st-text);
}

/* Événements : teinte de la couleur de l'intention (posée en ligne) */
.fi-body .ec-event {
    position: relative;
    overflow: hidden;
    padding: 0.125rem 0.375rem;
    border-radius: 0.5rem;
    box-shadow: none;
    color: var(--st-text) !important;
}

.fi-body .ec-event::before {
    position: absolute;
    inset: 0 0 0 3px;
    content: '';
    background-color: var(--st-surface-2);
    opacity: 0.8;
    pointer-events: none;
}

.fi-body .ec-event-body {
    position: relative;
    z-index: 1;
}

.fi-body .ec-event-time {
    font-weight: 600;
}

.fi-body .ec-event:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 1px;
}

/* Semaine et jour : lignes des heures et heure actuelle */
.fi-body .ec-time-grid {
    --ec-border-color: var(--st-line);
}

.fi-body .ec-time-grid .ec-sidebar,
.fi-body .ec-time-grid .ec-time {
    color: var(--st-muted);
    font-size: 0.6875rem;
}

.fi-body .ec-now-indicator {
    height: 2px;
}

/* Liste (agenda) */
.fi-body .ec-list .ec-body .ec-day {
    border: 0;
    background: none;
}

.fi-body .ec-list .ec-day-head {
    padding: 0.875rem 0 0.375rem;
    border-bottom: 1px solid var(--st-line);
    background: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fi-body .ec-list .ec-today .ec-day-head {
    color: var(--st-accent-text);
}

.fi-body .ec-list .ec-event {
    padding: 0.625rem 0.25rem;
    border-bottom: 1px solid var(--st-line);
    border-radius: 0;
    background: none !important;
}

.fi-body .ec-list .ec-event::before {
    display: none;
}

.fi-body .ec-list .ec-event-tag {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

/* Fenêtre « +N » : liste défilante, sous le menu d'actions. */
.fi-body .ec-popup {
    max-height: min(22rem, 70vh);
    overflow-y: auto;
    border: 0;
    border-radius: var(--st-radius-inner);
    box-shadow: 0 0 0 1px var(--st-line-strong), 0 16px 40px rgba(0, 0, 0, 0.35);
    scrollbar-width: thin;
}

.fi-body .ec-popup .ec-day-head {
    padding-bottom: 0.375rem;
}

/* Le menu d'actions passe au-dessus de la fenêtre « +N » (z-index 1010
   d'EventCalendar). Le conteneur de Guava compte sur des classes Tailwind
   (absolute, z-30) que l'application ne compile pas forcément : on pose tout ici. */
.fi-body [calendar-context-menu] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1020;
}

.fi-body [calendar-context-menu] .fi-dropdown-panel {
    z-index: 1020;
}

/* Calendrier calé sur la hauteur de l'écran (shortext-motion.js) : seul son
   contenu défile. */
html.st-calendar-lock,
html.st-calendar-lock body {
    overflow: hidden;
}

.st-calendar-fit .fi-body .ec {
    display: flex;
    flex-direction: column;
}

.st-calendar-fit .fi-body .ec > .ec-main,
.st-calendar-fit .fi-body .ec > .ec-body,
.st-calendar-fit .fi-body .ec .ec-body {
    min-height: 0;
}

.st-calendar-fit .fi-body .ec .ec-body {
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Vue mois : les cases se partagent la hauteur, rien à faire défiler. Le
   corps ne coupe donc pas la fenêtre « +N », qui défile elle-même au besoin. */
.fi-body .ec-day-grid .ec-body,
.fi-body .ec-day-grid .ec-content,
.st-calendar-fit .fi-body .ec-day-grid .ec-body {
    overflow: visible;
}

/* Menu d'actions au clic sur un événement (Guava) */
.fi-body [calendar-context-menu] .fi-dropdown-panel {
    width: 16rem;
    max-width: calc(100vw - 1.5rem);
    padding: 0.25rem;
    border-radius: var(--st-radius-inner);
    background-color: var(--st-surface);
    box-shadow: 0 0 0 1px var(--st-line-strong), 0 16px 40px rgba(0, 0, 0, 0.35);
    transition: translate 0.12s ease;
}

.fi-body .st-cm-head {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.625rem 0.625rem 0.625rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--st-line);
}

.fi-body .st-cm-head[hidden] {
    display: none;
}

.fi-body .st-cm-head i {
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    margin-top: 0.3rem;
    border-radius: 50%;
}

.fi-body .st-cm-head > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.fi-body .st-cm-title {
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-body .st-cm-time {
    color: var(--st-muted);
    font-size: 0.75rem;
}

.fi-body [calendar-context-menu] .fi-dropdown-list {
    padding: 0;
}

.fi-body [calendar-context-menu] .fi-dropdown-list-item {
    border-radius: 0.625rem;
}

/* L'action dangereuse (supprimer) est mise à part. */
.fi-body [calendar-context-menu] .fi-dropdown-list > div:has(.fi-color-danger) {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--st-line);
}