/**
 * OD Connect — thème mini-apps par défaut.
 *
 * Palette + identité visuelle alignées 1:1 sur `miniapps/app_main/assets/style.css`
 * (référence historique). Toutes les classes du framework sont préfixées
 * `.miniapp-*` pour éviter les collisions avec d'autres bundles, mais
 * suivent la structure BEM d'app_main (`__sub-element`, `--modifier`).
 *
 * Cf. §1.3 + §7.2 du doc proposition.
 *
 * Note typo : fonts Rajdhani/Nunito référencées mais non bundlées (anti-CDN
 * §1.2.1). Fallback `system-ui` couvre l'essentiel. Pour rendu strict,
 * self-host les woff2 via `config/miniapp/theme/fonts/`.
 */

:root {
    /* ════════ Palette OD Connect ════════ */
    --clr-bg:           #f5f7fa;
    --clr-surface:      #ffffff;
    --clr-surface-alt:  #f8f9fb;
    --clr-border:       #e2e6ec;
    --clr-border-light: #edf0f4;

    --clr-navy:         #1b2a4a;
    --clr-navy-light:   #263c66;
    --clr-navy-dark:    #111d36;
    --clr-navy-deep:    #0c1528;

    --clr-blue-mid:     #2e6daa;
    --clr-blue-light:   #4a8cc8;
    --clr-blue-pale:    #d6e6f5;

    --clr-teal:         #3ab5b0;
    --clr-teal-light:   #5ccec9;
    --clr-teal-pale:    #e6f7f6;

    --clr-pink:         #e84393;
    --clr-pink-pale:    #fde8f2;
    --clr-orange:       #f5a623;
    --clr-orange-pale:  #fef5e0;

    --clr-danger:       #d44040;
    --clr-text:         #1b2a4a;
    --clr-text-2:       #4a5b72;
    --clr-text-3:       #8e97a6;

    /* ════════ Typo ════════ */
    --ff-display: 'Rajdhani', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ff-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ════════ Tokens divers ════════ */
    --radius:     6px;
    --radius-lg:  10px;

    --shadow-sm:  0 2px 8px rgba(27, 42, 74, .06);
    --shadow-md:  0 6px 24px rgba(27, 42, 74, .10);

    --sidebar-w:  260px;
    --topbar-h:   60px;
    --transition: .22s cubic-bezier(.4, 0, .2, 1);

    /* ════════ Surcharge Bootstrap 5 ════════ */
    --bs-primary:                 var(--clr-navy);
    --bs-primary-rgb:             27, 42, 74;
    --bs-secondary:               var(--clr-blue-mid);
    --bs-secondary-rgb:           46, 109, 170;
    --bs-info:                    var(--clr-teal);
    --bs-info-rgb:                58, 181, 176;
    --bs-warning:                 var(--clr-orange);
    --bs-warning-rgb:             245, 166, 35;
    --bs-danger:                  var(--clr-danger);
    --bs-danger-rgb:              212, 64, 64;
    --bs-success:                 var(--clr-teal);
    --bs-success-rgb:             58, 181, 176;

    --bs-link-color:              var(--clr-blue-mid);
    --bs-link-color-rgb:          46, 109, 170;
    --bs-link-hover-color:        var(--clr-teal);
    --bs-link-hover-color-rgb:    58, 181, 176;

    --bs-body-color:              var(--clr-text);
    --bs-body-bg:                 var(--clr-bg);
    --bs-body-font-family:        var(--ff-body);
    --bs-body-font-size:          0.95rem;
    --bs-body-line-height:        1.6;

    --bs-border-color:            var(--clr-border);
    --bs-border-radius:           var(--radius);
    --bs-border-radius-lg:        var(--radius-lg);
}

* { box-sizing: border-box; }

/* ════════ Form controls — fond blanc explicite ════════ */

/* Bootstrap dérive `--bs-form-control-bg` de `--bs-body-bg` ; comme notre
   theme met `--bs-body-bg` à `--clr-bg` (gris pâle de fond d'app), tous
   les inputs héritent de ce gris — ce qui crée une confusion avec l'état
   disabled/readonly. On force le fond blanc sur les inputs *actifs*, et
   on garde un gris distinct pour disabled/readonly. */
.form-control,
.form-select,
.input-group-text {
    background-color: #fff;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--clr-surface-alt);
}

/* Champs `widget: month` (sélecteur de mois, type=month) : on déplace l'icône
   d'ouverture du calendrier à GAUCHE du champ. Présentation pure → CSS, pas de
   JS (cf. règle de moindre puissance). On réserve la place à gauche via
   padding-left et on positionne le pseudo-élément natif en absolu dans ce gap.
   WebKit/Blink uniquement (Chrome, Edge, Safari) — Firefox dégrade type=month
   en champ texte sans icône, donc la règle y est simplement sans effet. */
.form-control[type="month"] {
    position: relative;
    padding-left: 2.25rem;
}

.form-control[type="month"]::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0.75rem;
    margin: 0;
}

/* ════════ Layout shell ════════ */
body.miniapp-shell {
    margin: 0;
    min-height: 100vh;
    background: var(--clr-bg);
    color: var(--clr-text);
    font-family: var(--ff-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* Garde-fou contre tout débordement résiduel sur petits écrans (mots
       longs non wrap, sidebar translateX caché, etc.). Ne masque rien de
       fonctionnel — un vrai overflow vertical reste géré normalement. */
    overflow-x: hidden;
}

.miniapp-layout {
    display: flex;
    min-height: 100vh;
}

.miniapp-layout__main {
    flex: 1;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* `min-width: 0` requis sur un flex child pour qu'il puisse rétrécir
       en-dessous de son contenu intrinsèque — sans ça, flex-shrink est
       inerte et le contenu déborde latéralement (cause des scrollbars
       horizontaux résiduels sur mobile). */
    min-width: 0;
}

/* ════════ SIDEBAR — Dégradé navy diagonal + tricolore haut ════════ */
.miniapp-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    background: linear-gradient(160deg, var(--clr-navy-deep) 0%, var(--clr-navy) 35%, var(--clr-blue-mid) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 100;
}

.miniapp-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--clr-teal), var(--clr-pink), var(--clr-orange));
}

.miniapp-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 20px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.miniapp-sidebar__logo {
    width: 42px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #fff;
    position: relative;
    flex-shrink: 0;
}

.miniapp-sidebar__logo::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--clr-teal-light);
    border-right: 2px solid var(--clr-teal-light);
}

.miniapp-sidebar__brand-text {
    font-family: var(--ff-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.2;
}

.miniapp-sidebar__brand-text small {
    display: block;
    font-family: var(--ff-body);
    font-size: .6rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .4;
    margin-top: 2px;
}

.miniapp-sidebar__nav {
    flex: 1;
    padding: 8px 10px;
}

.miniapp-sidebar__section {
    margin-bottom: 4px;
}

.miniapp-sidebar__section-title {
    font-family: var(--ff-display);
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .4);
    padding: 16px 14px 6px;
}

.miniapp-sidebar__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius);
    color: rgba(255, 255, 255, .55);
    font-family: var(--ff-body);
    font-size: .87rem;
    font-weight: 600;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all var(--transition);
}

.miniapp-sidebar__link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border-left-color: rgba(255, 255, 255, .3);
}

.miniapp-sidebar__link--active {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-left-color: var(--clr-orange);
    font-weight: 700;
}

.miniapp-sidebar__link i {
    opacity: .5;
    flex-shrink: 0;
    font-size: 1.05rem;
}

.miniapp-sidebar__link:hover i {
    opacity: 1;
    color: var(--clr-teal-light);
}

.miniapp-sidebar__link--active i {
    opacity: 1;
    color: var(--clr-orange);
}

/* ════════ TOPBAR ════════ */
.miniapp-topbar {
    height: var(--topbar-h);
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.miniapp-topbar__left,
.miniapp-topbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.miniapp-topbar__menu-btn {
    /* Toujours visible (desktop + mobile) : desktop il déclenche le collapse
       icons-only, mobile il ouvre le drawer off-canvas. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--clr-navy);
    border-radius: var(--radius);
}

.miniapp-topbar__menu-btn:hover {
    background: var(--clr-bg);
}

/* Dropdown trigger (lang + user). */
.miniapp-dropdown {
    position: relative;
}

.miniapp-dropdown__trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    background: var(--clr-surface);
    cursor: pointer;
    font-family: var(--ff-body);
    font-size: .82rem;
    font-weight: 700;
    color: var(--clr-navy);
    text-decoration: none;
    transition: all var(--transition);
}

.miniapp-dropdown__trigger:hover {
    border-color: var(--clr-blue-mid);
    color: var(--clr-blue-mid);
}

/* User badge pill avec avatar circulaire. */
.miniapp-topbar__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 5px;
    border-radius: 30px;
    background: var(--clr-surface-alt);
    border: 1px solid var(--clr-border);
    color: var(--clr-navy);
    text-decoration: none;
}

.miniapp-topbar__user:hover {
    border-color: var(--clr-blue-mid);
    color: var(--clr-navy);
}

.miniapp-topbar__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-navy), var(--clr-blue-mid));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-display);
    font-size: .75rem;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: .02em;
}

.miniapp-topbar__username {
    font-size: .85rem;
    font-weight: 700;
    color: var(--clr-navy);
}

/* Logout link with icon (separate from user dropdown). */
.miniapp-topbar__logout {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius);
    color: var(--clr-text-3);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition);
}

.miniapp-topbar__logout:hover {
    color: var(--clr-pink);
    background: var(--clr-pink-pale);
}

/* ════════ Main content ════════ */
.miniapp-content {
    flex: 1;
    padding: 30px 32px;
    background: var(--clr-surface);
}

/* F6 (POC SupplierProfile, 2026-05-27) : en mode dev, la Symfony Web
   Debug Toolbar (`.sf-toolbar`, position fixed bottom) recouvre les
   30-40 px les plus bas de la page — y compris le bouton « Enregistrer »
   ou les actions du footer. On réserve l'espace via :has() (supporté
   par tous les navigateurs cibles depuis fin 2023). Coût en prod :
   nul — la règle ne s'applique que si la toolbar est présente. */
body:has(.sf-toolbar) .miniapp-layout__main {
    padding-bottom: 48px;
}

.miniapp-page-header {
    margin-bottom: 28px;
}

.miniapp-page-header__title {
    font-family: var(--ff-display);
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--clr-navy);
    line-height: 1.2;
    margin: 0;
}

.miniapp-page-header__sub {
    font-size: .88rem;
    color: var(--clr-text-2);
    margin-top: 4px;
    font-weight: 400;
}

/* Lien « Retour à la liste » en haut des pages view/edit/new — style
   discret mais distinct (pas un simple lien bleu) avec hover marqué. */
.miniapp-page-header__sub a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--clr-blue-pale);
    color: var(--clr-blue-mid);
    font-weight: 500;
    font-size: .82rem;
    transition: background var(--transition), color var(--transition);
}

.miniapp-page-header__sub a:hover {
    background: var(--clr-navy);
    color: #fff;
    text-decoration: none;
}

.miniapp-page-header__sub a i {
    font-size: .85rem;
}

/* ════════ Onglets nav-tabs modernisés ════════ */

.miniapp-content .nav-tabs {
    border-bottom: 1px solid var(--clr-border);
    gap: 4px;
}

.miniapp-content .nav-tabs .nav-link {
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 10px 16px;
    color: var(--clr-text-3);
    font-weight: 500;
    background: transparent;
    transition: color var(--transition), border-color var(--transition);
}

.miniapp-content .nav-tabs .nav-link:hover {
    color: var(--clr-navy);
    border-bottom-color: var(--clr-border);
}

.miniapp-content .nav-tabs .nav-link.active {
    color: var(--clr-navy);
    background: transparent;
    border-bottom-color: var(--clr-teal);
    font-weight: 600;
}

/* Headings dans le contenu. */
.miniapp-content h1,
.miniapp-content h2,
.miniapp-content h3,
.miniapp-content h4 {
    font-family: var(--ff-display);
    color: var(--clr-navy);
    font-weight: 700;
}

.miniapp-content h1 {
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* SDK / info banner. */
.miniapp-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--clr-blue-pale);
    border-left: 3px solid var(--clr-blue-mid);
    border-radius: 0;
    font-size: .84rem;
    color: var(--clr-navy);
    margin-bottom: 28px;
}

.miniapp-banner code {
    font-family: 'Courier New', monospace;
    font-size: .8rem;
    background: rgba(46, 109, 170, .12);
    color: var(--clr-blue-mid);
    padding: 1px 6px;
    border-radius: 3px;
}

/* ════════ Boutons primaires ════════ */
.btn-primary {
    --bs-btn-bg:                 var(--clr-navy);
    --bs-btn-border-color:       var(--clr-navy);
    --bs-btn-hover-bg:           var(--clr-navy-light);
    --bs-btn-hover-border-color: var(--clr-navy-light);
    --bs-btn-active-bg:          var(--clr-navy-dark);
    --bs-btn-active-border-color: var(--clr-navy-dark);
    --bs-btn-disabled-bg:        var(--clr-navy);
    --bs-btn-disabled-border-color: var(--clr-navy);
    font-family: var(--ff-body);
    font-weight: 700;
}

.btn-outline-secondary {
    --bs-btn-color:              var(--clr-navy);
    --bs-btn-border-color:       var(--clr-border);
    --bs-btn-hover-bg:           var(--clr-surface);
    --bs-btn-hover-border-color: var(--clr-blue-mid);
    --bs-btn-hover-color:        var(--clr-blue-mid);
}

/* ════════ Dashboard cards — header coloré + body navy ════════ */
/* La carte est un <div> wrapper autour d'un <a class="miniapp-card__link">.
   Cette séparation permet à SortableJS d'attacher un handle (le grip) hors
   du <a> sans subir le drag-link natif du navigateur. */
.miniapp-card {
    display: flex;
    flex-direction: column;
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    position: relative;
    /* Bootstrap `.row` étire les `.col-*` à la hauteur de la ligne via
       `align-items: stretch` (défaut flex). On force la carte à remplir
       cette hauteur, sinon les descriptions de longueurs différentes
       (« Annuaire CRM unifié — personnes et organisations. » vs
       « Gestion des comptes utilisateurs OD Connect. ») cassent l'alignement. */
    height: 100%;
}

.miniapp-card__link {
    display: flex;
    flex-direction: column;
    color: var(--clr-text);
    cursor: pointer;
    text-decoration: none;
    /* Le lien interne doit lui aussi occuper toute la carte pour que
       `.miniapp-card__body { flex: 1 }` ait un parent à étirer. */
    flex: 1;
}

.miniapp-card__link:hover {
    color: var(--clr-text);
}

.miniapp-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

/* Handle drag-and-drop — visible au hover du wrapper, ou en permanence sur
   touch (pas de hover). Position absolue pour ne pas perturber le layout
   interne de la carte. */
.miniapp-card__grip {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--clr-text-muted, #6c757d);
    cursor: grab;
    opacity: 0;
    transition: opacity var(--transition);
    user-select: none;
}

.miniapp-card__grip:active {
    cursor: grabbing;
}

.miniapp-card:hover .miniapp-card__grip {
    opacity: 1;
}

/* Touch devices : grip toujours visible (pas de hover). */
@media (hover: none) {
    .miniapp-card__grip {
        opacity: 0.6;
    }
}

.miniapp-card__icon {
    width: 100%;
    height: 100px;
    background: var(--card-bg, var(--clr-blue-pale));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--card-color, var(--clr-navy));
    transition: transform var(--transition);
    position: relative;
}

.miniapp-card__icon i {
    font-size: 2.25rem;
}

.miniapp-card__icon::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 22px;
    background: var(--clr-navy);
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 50% 70%, 0 0);
}

.miniapp-card__body {
    background: var(--clr-navy);
    color: #fff;
    padding: 18px 20px 20px;
    flex: 1;
    position: relative;
}

.miniapp-card__title {
    font-family: var(--ff-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 0 0 6px;
    color: #fff;
}

.miniapp-card__desc {
    font-size: .78rem;
    color: rgba(255, 255, 255, .55);
    line-height: 1.45;
    margin: 0;
}

.miniapp-card:hover .miniapp-card__icon {
    transform: scale(1.04);
}

/* ════════ FOOTER Odontolia ════════ */
.miniapp-footer {
    background: var(--clr-navy);
    color: rgba(255, 255, 255, .7);
    margin-top: auto;
    position: relative;
}

.miniapp-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--clr-teal), var(--clr-pink), var(--clr-orange), transparent 80%);
}

.miniapp-footer__inner {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr 1fr 1fr;
    gap: 32px;
    padding: 36px 32px 28px;
    align-items: start;
}

.miniapp-footer__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.miniapp-footer__brand-name {
    font-family: var(--ff-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: #fff;
}

.miniapp-footer__legal {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.miniapp-footer__legal a {
    font-size: .78rem;
    color: rgba(255, 255, 255, .4);
    text-decoration: none;
    transition: color var(--transition);
}

.miniapp-footer__legal a:hover {
    color: var(--clr-teal-light);
}

.miniapp-footer__col--social {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

.miniapp-footer__social-link {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .4);
    text-decoration: none;
    transition: all var(--transition);
}

.miniapp-footer__social-link:hover {
    border-color: var(--clr-pink);
    color: var(--clr-pink);
    background: rgba(232, 67, 147, .08);
}

.miniapp-footer__col--contact {
    font-size: .84rem;
    line-height: 1.7;
    padding-top: 4px;
}

.miniapp-footer__col--contact p {
    margin: 0;
    color: rgba(255, 255, 255, .6);
}

.miniapp-footer__email {
    color: var(--clr-teal-light) !important;
    margin-top: 6px !important;
    display: block;
    text-decoration: none;
}

.miniapp-footer__col--cta {
    font-size: .82rem;
    padding-top: 4px;
    color: rgba(255, 255, 255, .5);
}

.miniapp-footer__copy {
    display: block;
    margin-top: 12px;
    font-size: .72rem;
    color: rgba(255, 255, 255, .25);
}

/* ════════ Bootstrap alerts — accent OD ════════ */
.alert-warning {
    background: var(--clr-orange-pale);
    border-color: var(--clr-orange);
    color: var(--clr-text);
}

.alert-info {
    background: var(--clr-blue-pale);
    border-left: 3px solid var(--clr-blue-mid);
    border-radius: 0;
    color: var(--clr-navy);
}

/* ════════ Dropdowns ════════ */
.dropdown-menu {
    border-color: var(--clr-border);
    box-shadow: var(--shadow-md);
    font-family: var(--ff-body);
}

.dropdown-item:hover {
    background: var(--clr-blue-pale);
    color: var(--clr-blue-mid);
}

.dropdown-item.active {
    background: var(--clr-blue-pale);
    color: var(--clr-navy);
    font-weight: 700;
}

code {
    font-family: 'Courier New', monospace;
    background: rgba(46, 109, 170, .08);
    color: var(--clr-blue-mid);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: .85em;
}

/* ════════ CRUD list — table dense avec thead sombre ════════ */

/* Le card englobant : fond blanc explicite (notre theme override le
   --bs-card-bg par var(--clr-bg) gris pâle) + overflow hidden pour clipper
   les coins. Retrait de la bordure Bootstrap par défaut (`rgba(0,0,0,.176)`)
   au profit d'une box-shadow plus douce — pas de cadre visible mais une
   délimitation visuelle légère. NB : `.table-responsive` (overflow-x: auto)
   à l'intérieur casse le clipping du card, c'est pour ça qu'on pose aussi
   le radius directement sur le premier/dernier `th` du thead — voir plus bas. */
.miniapp-content .card {
    background-color: #fff;
    border: 0;
    /* Pas d'overflow:hidden : sinon les popovers des pills cliquables
       sont clippés en bas du tableau. Les coins arrondis du thead sont
       préservés via les `border-top-{left,right}-radius` directs sur
       les `<th>` de coin (cf. règles ci-dessous). */
    overflow: visible;
    border-radius: 6px;
}

/* Workaround pour table-responsive qui casse le clipping du card englobant :
   on arrondit explicitement les coins supérieurs des cellules `th` de coin
   du thead. Cela donne un thead visuellement clipé même quand le card ne
   peut plus clipper son contenu. */
.miniapp-content .card > .card-body > .table-responsive > .table > thead > tr > th:first-child {
    border-top-left-radius: 6px;
}

.miniapp-content .card > .card-body > .table-responsive > .table > thead > tr > th:last-child {
    border-top-right-radius: 6px;
}

/* Cibler la table CRUD via la card englobante évite d'impacter d'éventuelles
   tables Bootstrap utilisées ailleurs (e.g. dashboard ou formulaires). */
.miniapp-content .card > .card-body > .table-responsive > .table {
    margin-bottom: 0;
}

/* `.table-responsive` Bootstrap pose `overflow: auto` qui clip les
   popovers des pills cliquables et déclenche des scrollbars verticaux
   quand le popover dépasse le bas du tableau. On force `visible` ici
   car les listes CRUD ont des colonnes compactes (pas de besoin de
   scroll horizontal). Les mini-apps avec table très large peuvent
   surcharger localement. */
/* `overflow-x: auto` (vs `visible` historique) : on accepte que les pill
   popovers (cf. preview clinics dans dentists) soient clippés horizontalement
   sur écrans étroits — en échange, les tables larges (ex. `_audit_logs` avec
   8 colonnes) ne forcent plus l'élargissement du document entier.
   `overflow-y: visible` préserve quand même la possibilité de débordement
   vertical (pour les popovers above/below qui restent utiles). */
.miniapp-content .card > .card-body > .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
}

/* Pas de séparateur visible entre filter bar et thead — la transition
   du blanc vers le navy du thead est suffisamment marquée. */

.miniapp-content .card > .card-body > .table-responsive > .table > thead > tr > th {
    background: var(--clr-navy);
    color: #fff;
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 10px 12px;
    border-bottom: 0;
    white-space: nowrap;
}

.miniapp-content .card > .card-body > .table-responsive > .table > thead > tr > th a {
    color: #fff !important;
}

.miniapp-content .card > .card-body > .table-responsive > .table > tbody > tr > td {
    padding: 8px 12px;
    vertical-align: middle;
    font-size: .9rem;
    border-color: var(--clr-border-light);
}

/* ════════ Résultats du search global (Mode B) ════════ */

.miniapp-search-result {
    padding: 8px 12px;
    white-space: normal;
    line-height: 1.3;
}

.miniapp-search-result__key {
    font-weight: 600;
    color: var(--clr-navy);
    font-size: .85rem;
}

.miniapp-search-result__label {
    font-size: .78rem;
    color: var(--clr-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

/* ════════ Filtres list (input-group inline) ════════ */

/* Label uppercase compact au préfixe des selects de filtres (« STATUT »). */
.miniapp-filters__label {
    background: #fff;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .72rem;
    font-weight: 600;
    color: var(--clr-text-2);
}

/* ════════ Pills (cellules badges réutilisables) ════════ */

/* Émise par `formatListRow()` des mini-apps (ex. DentistsMiniapp pour
   `inami` et `clinics`). Style commun pour rester cohérent à travers le bundle. */
.miniapp-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--clr-blue-pale);
    color: var(--clr-navy);
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.4;
}

.miniapp-pill + .miniapp-pill {
    margin-left: 4px;
}

.miniapp-pill--mono {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    letter-spacing: .02em;
}

/* Pill cliquable (avec data-miniapp-preview) : cursor + hover marqué.
   Z-index élevé seulement quand le popover est ouvert pour passer
   au-dessus des pills voisines (chaque pill crée son propre stacking
   context via position:relative, donc le z-index du popover seul ne
   suffit pas). */
.miniapp-pill--clickable {
    cursor: pointer;
    position: relative;
    transition: filter var(--transition);
}

.miniapp-pill--clickable.miniapp-pill--open {
    z-index: 1080;
}

.miniapp-pill--clickable:hover {
    filter: brightness(.92);
}

.miniapp-pill--clickable:focus-visible {
    outline: 2px solid var(--clr-blue-mid);
    outline-offset: 2px;
}

/* Popover affiché au hover/click d'une pill cliquable. Position absolue
   par rapport à la pill (qui est `position: relative`). Alpine pilote la
   visibilité via `x-show` (display none/block). */
.miniapp-pill-preview {
    display: block;
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    max-width: 320px;
    background: #fff;
    color: var(--clr-text);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(27, 42, 74, .15);
    padding: 0;
    z-index: 1080;
    text-align: left;
    font-weight: 400;
    font-size: .85rem;
    line-height: 1.5;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    cursor: default;
}

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

.miniapp-pill-preview__loading,
.miniapp-pill-preview__error {
    padding: 12px 16px;
    color: var(--clr-text-3);
    text-align: center;
}

.miniapp-pill-preview__error {
    color: var(--clr-danger);
}

/* Contenu de la card preview (rendu par `crud/preview.html.twig`). */
.miniapp-preview-card {
    overflow: hidden;
}

.miniapp-preview-card--inactive {
    opacity: .9;
}

.miniapp-preview-card__header {
    padding: 10px 14px;
    background: var(--clr-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.miniapp-preview-card__header strong {
    font-weight: 600;
    font-size: .9rem;
}

.miniapp-preview-card__badge {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    font-weight: 600;
}

.miniapp-preview-card__fields {
    margin: 0;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
}

/* Variantes <dt>/<dd> (template Twig serveur) OU <span>/<span> avec
   classes explicites (renderStaticPopover PHP). Les deux supportés. */
.miniapp-preview-card__fields dt,
.miniapp-preview-card__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--clr-text-3);
    font-weight: 600;
    margin: 0;
}

.miniapp-preview-card__fields dd,
.miniapp-preview-card__value {
    margin: 0;
    color: var(--clr-text);
    font-size: .85rem;
}

.miniapp-preview-card__footer {
    padding: 8px 14px;
    border-top: 1px solid var(--clr-border-light);
    background: var(--clr-surface-alt);
}

.miniapp-preview-card__link {
    color: var(--clr-blue-mid);
    font-weight: 500;
    font-size: .82rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.miniapp-preview-card__link:hover {
    color: var(--clr-navy);
}

.miniapp-pill--teal {
    background: var(--clr-teal-pale);
    color: var(--clr-teal);
}

/* Row dépubliée / désactivée : texte barré et grisé pour signaler l'état.
   Le strikethrough s'applique à TOUTES les cellules visibles sauf celle
   des actions (`.text-end`) — sinon le line-through traverse les
   whitespaces entre les boutons d'action et crée un trait disgracieux.
   La pill INAMI (mono) hérite bien du barré pour la cohérence. */
.miniapp-content .card > .card-body > .table-responsive > .table > tbody > tr.miniapp-row-inactive > td:not(.text-end) {
    text-decoration: line-through;
    color: var(--clr-text-3);
}

.miniapp-content .card > .card-body > .table-responsive > .table > tbody > tr.miniapp-row-inactive > td .btn-link {
    text-decoration: none;
}

/* Les pills (display: inline-block) créent un nouveau formatting context :
   le `text-decoration: line-through` du parent <td> ne se propage pas.
   On le pose explicitement pour barrer aussi le tag INAMI mono et les
   pills cliniques. */
.miniapp-content .card > .card-body > .table-responsive > .table > tbody > tr.miniapp-row-inactive > td .miniapp-pill {
    text-decoration: line-through;
}

/* #59 : extension aux sub_listings (DOM légèrement différent — pas de
   `.card-body` intermédiaire). Mêmes règles que la liste principale pour
   les rows archived/inactive. */
.miniapp-content .miniapp-sub-listing > .table-responsive > .table > tbody > tr.miniapp-row-inactive > td:not(.text-end) {
    text-decoration: line-through;
    color: var(--clr-text-3);
}

.miniapp-content .miniapp-sub-listing > .table-responsive > .table > tbody > tr.miniapp-row-inactive > td .btn-link {
    text-decoration: none;
}

.miniapp-content .miniapp-sub-listing > .table-responsive > .table > tbody > tr.miniapp-row-inactive > td .miniapp-pill {
    text-decoration: line-through;
}

/* #61 : rows cliquables → ouvrent l'élément en mode view. Le JS
   `row-clickable.js` gère la délégation et préserve les actions internes.
   Hover discret + cursor pour signaler l'interactivité. Le focus ring
   reste visible pour l'accessibilité clavier (Enter ouvre aussi). */
.miniapp-row-clickable {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.miniapp-row-clickable:hover {
    background-color: var(--clr-blue-pale, #eef3fb);
}

.miniapp-row-clickable:focus {
    outline: 2px solid var(--clr-navy);
    outline-offset: -2px;
}

/* ════════ État inactif sur les pages view/edit ════════ */

/* Le titre h1 reçoit un petit badge texte « INACTIF » à droite. */
.miniapp-entity-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(212, 64, 64, .12);
    color: var(--clr-danger);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
}

/* Bandeau prominent affiché au-dessus du form/view pour rendre l'état
   inactif impossible à manquer. Plus visible qu'un simple badge dans le titre. */
.miniapp-inactive-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(212, 64, 64, .08);
    border: 1px solid rgba(212, 64, 64, .25);
    border-left: 4px solid var(--clr-danger);
    border-radius: 6px;
    color: var(--clr-text);
    margin-bottom: 24px;
}

.miniapp-inactive-banner__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--clr-danger);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.miniapp-inactive-banner__title {
    font-weight: 600;
    color: var(--clr-danger);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .8rem;
}

.miniapp-inactive-banner__text {
    font-size: .9rem;
    color: var(--clr-text-2);
    margin-top: 2px;
}

/* ════════ Actions row (icônes cerclées colorées) ════════ */

.miniapp-content .card > .card-body > .table-responsive > .table > tbody > tr > td .btn-link {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-teal-pale);
    color: var(--clr-teal);
    margin-left: 4px;
    transition: filter var(--transition, .15s);
}

.miniapp-content .card > .card-body > .table-responsive > .table > tbody > tr > td .btn-link:hover {
    filter: brightness(.92);
    text-decoration: none;
}

.miniapp-content .card > .card-body > .table-responsive > .table > tbody > tr > td .btn-link.text-danger {
    background: var(--clr-pink-pale);
    color: var(--clr-pink) !important;
}

/* ════════ Responsive ════════ */
@media (max-width: 900px) {
    .miniapp-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

/* Bandeau supérieur du drawer mobile (`__topbar`) — réserve l'espace pour le
   bouton de fermeture, séparé du brand block pour ne pas amputer le texte
   « OD Connect ». Pattern Bootstrap offcanvas-header. */
.miniapp-sidebar__topbar {
    display: none;
}

.miniapp-sidebar__close {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background var(--transition);
}

.miniapp-sidebar__close:hover {
    background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
    .miniapp-sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition);
    }

    .miniapp-sidebar--open {
        transform: translateX(0);
    }

    /* Le bandeau de fermeture apparaît AU-DESSUS du brand block en mode
       drawer ouvert. Justify-end pour pousser le X à droite. Padding aligné
       sur le brand block pour cohérence visuelle. */
    .miniapp-sidebar--open .miniapp-sidebar__topbar {
        display: flex;
        justify-content: flex-end;
        padding: 12px 14px 0;
    }

    .miniapp-layout__main {
        margin-left: 0;
    }

    .miniapp-topbar {
        padding: 0 16px;
    }

    .miniapp-topbar__username {
        display: none;
    }

    .miniapp-content {
        padding: 24px 18px;
    }
}

/* ════════ Mini-app _fields — cards de classes Pimcore ════════ */
.miniapp-fields-card {
    transition: all var(--transition);
    color: var(--clr-text);
}

.miniapp-fields-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--clr-text);
}

.miniapp-fields-card__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--clr-blue-pale);
    color: var(--clr-blue-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* ════════ Sidebar collapsed (desktop icons-only) ════════ */
/* La sidebar passe à 64px : icônes seules, labels masqués, tooltips natifs
   via l'attribut `title=`. Le main content compense margin-left. Transitions
   smooth pour ne pas surprendre l'utilisateur. */
.miniapp-sidebar,
.miniapp-layout__main {
    transition: width var(--transition), margin-left var(--transition);
}

@media (min-width: 769px) {
    .miniapp-layout--sidebar-collapsed .miniapp-sidebar {
        width: 64px;
    }

    .miniapp-layout--sidebar-collapsed .miniapp-layout__main {
        margin-left: 64px;
    }

    .miniapp-layout--sidebar-collapsed .miniapp-sidebar__brand-text,
    .miniapp-layout--sidebar-collapsed .miniapp-sidebar__section-title,
    .miniapp-layout--sidebar-collapsed .miniapp-sidebar__link-label {
        display: none;
    }

    .miniapp-layout--sidebar-collapsed .miniapp-sidebar__brand {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .miniapp-layout--sidebar-collapsed .miniapp-sidebar__link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .miniapp-layout--sidebar-collapsed .miniapp-sidebar__link i {
        margin: 0;
    }
}

@media (max-width: 600px) {
    .miniapp-footer__inner {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 28px 20px 24px;
    }

    .miniapp-footer__col--social {
        flex-direction: row;
    }
}

/* ----------------------------------------------------------------------------
   Audit diff table (_audit_logs/<id>/view).
   3 statuts visuels par-clé : changed (jaune), added (vert), removed (rouge),
   unchanged (gris pâle, peu intrusif).
   ---------------------------------------------------------------------------- */
.audit-diff__row--changed {
    background-color: #fff3cd; /* Bootstrap warning bg-subtle */
}
.audit-diff__row--added {
    background-color: #d1e7dd; /* Bootstrap success bg-subtle */
}
.audit-diff__row--removed {
    background-color: #f8d7da; /* Bootstrap danger bg-subtle */
}
.audit-diff__row--unchanged {
    color: #6c757d; /* text-muted */
}
.audit-diff__row--unchanged .audit-diff__value {
    opacity: 0.75;
}
.audit-diff__key {
    vertical-align: middle;
    white-space: nowrap;
}
.audit-diff__value {
    vertical-align: top;
    /* `overflow-wrap: anywhere` casse seulement quand un mot dépasse la cellule
       (pas de wrap char-par-char en utilisation normale). Combiné avec
       `table-layout: fixed` + largeurs explicites côté template, on garantit
       que la table tient dans son container sans débordement horizontal. */
    overflow-wrap: anywhere;
    word-break: normal;
}

/* ----------------------------------------------------------------------------
   Liste CRUD responsive : transformation table → cards sur mobile (<768px).
   Le markup reste `<table>` côté desktop ; sur mobile chaque `<tr>` devient
   une card et chaque `<td>` devient un couple label-valeur. Le `data-label`
   posé sur les `<td>` dans `list.html.twig` est consommé par le pseudo-élément
   `::before` ci-dessous — pas de duplication de markup nécessaire.
   ---------------------------------------------------------------------------- */
/* Breakpoint `lg` au lieu de `md` parce que la sidebar fixe (260px) bouffe
   beaucoup de largeur : à viewport 800px, le contenu n'a que ~540px → la
   table est déjà illisible. On bascule en cards dès que viewport <= 991px
   pour avoir un rendu acceptable sur tablette portrait + redimensionnement
   navigateur. */
@media (max-width: 991.98px) {
    .miniapp-content .card > .card-body > .table-responsive {
        overflow: visible;
        border: 0;
    }
    .miniapp-content .card > .card-body > .table-responsive > .table {
        background: transparent;
    }
    .miniapp-content .card > .card-body > .table-responsive > .table > thead {
        display: none; /* les labels remontent en `::before` sur chaque cell */
    }
    .miniapp-content .card > .card-body > .table-responsive > .table > tbody > tr {
        display: block;
        margin: 0 0 12px;
        padding: 12px;
        background: #fff;
        border: 1px solid var(--clr-border, #dee2e6);
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .miniapp-content .card > .card-body > .table-responsive > .table > tbody > tr > td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 4px 0;
        border: 0;
        text-align: left !important;
    }
    .miniapp-content .card > .card-body > .table-responsive > .table > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 35%;
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--clr-text-3, #6c757d);
        text-align: left;
    }
    /* Actions : alignées à droite mais pas de label « ACTIONS » sur sa propre
       ligne (le contexte des boutons rend l'intitulé redondant). */
    .miniapp-content .card > .card-body > .table-responsive > .table > tbody > tr > td.text-end {
        justify-content: flex-end;
        padding-top: 8px;
        border-top: 1px solid var(--clr-border-light, #eef2f6);
        margin-top: 8px;
    }
    .miniapp-content .card > .card-body > .table-responsive > .table > tbody > tr > td.text-end::before {
        display: none;
    }
    /* Pagination : pas de wrap horizontal forcé sur mobile. */
    .miniapp-content .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* #60 : même transformation table → cards pour les sub_listings.
       Le DOM diffère légèrement (pas de `.card-body` intermédiaire dans
       .miniapp-sub-listing), donc on duplique les règles avec le bon
       sélecteur racine. `data-label` est posé sur les `<td>` du template
       `_sub_listing.html.twig`. */
    .miniapp-content .miniapp-sub-listing > .table-responsive {
        overflow: visible;
        border: 0;
    }
    .miniapp-content .miniapp-sub-listing > .table-responsive > .table {
        background: transparent;
    }
    .miniapp-content .miniapp-sub-listing > .table-responsive > .table > thead {
        display: none;
    }
    .miniapp-content .miniapp-sub-listing > .table-responsive > .table > tbody > tr {
        display: block;
        margin: 0 0 12px;
        padding: 12px;
        background: #fff;
        border: 1px solid var(--clr-border, #dee2e6);
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .miniapp-content .miniapp-sub-listing > .table-responsive > .table > tbody > tr > td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 4px 0;
        border: 0;
        text-align: left !important;
    }
    .miniapp-content .miniapp-sub-listing > .table-responsive > .table > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 35%;
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--clr-text-3, #6c757d);
        text-align: left;
    }
    .miniapp-content .miniapp-sub-listing > .table-responsive > .table > tbody > tr > td.text-end {
        justify-content: flex-end;
        padding-top: 8px;
        border-top: 1px solid var(--clr-border-light, #eef2f6);
        margin-top: 8px;
    }
    .miniapp-content .miniapp-sub-listing > .table-responsive > .table > tbody > tr > td.text-end::before {
        display: none;
    }
}

/* ----------------------------------------------------------------------------
   Pagination — couleurs du thème (Bootstrap 5 expose des variables dédiées
   `--bs-pagination-*` qui n'héritent pas auto de `--bs-primary`, d'où ces
   overrides explicites pour aligner la page active sur le navy Odontolia).
   ---------------------------------------------------------------------------- */
.miniapp-content .pagination {
    --bs-pagination-color:               var(--clr-navy);
    --bs-pagination-hover-color:         var(--clr-navy-deep);
    --bs-pagination-hover-bg:            var(--clr-blue-pale);
    --bs-pagination-hover-border-color:  var(--clr-border);
    --bs-pagination-focus-color:         var(--clr-navy-deep);
    --bs-pagination-focus-bg:            var(--clr-blue-pale);
    --bs-pagination-focus-box-shadow:    0 0 0 .2rem rgba(27, 42, 74, .25);
    --bs-pagination-active-color:        #fff;
    --bs-pagination-active-bg:           var(--clr-navy);
    --bs-pagination-active-border-color: var(--clr-navy);
}

/* ----------------------------------------------------------------------------
   Grille filtres : auto-fit + minmax = chaque filtre prend au moins 200px et
   s'étire pour combler l'espace disponible. Pas de calcul JS, pas de breakpoint
   à maintenir — le navigateur ajuste le nombre de colonnes selon la largeur.
   Le `date_range` (qui contient 2 inputs) demande plus d'espace : on lui
   double sa largeur via `span 2` (au pire 2 colonnes), ou via min-width custom.
   ---------------------------------------------------------------------------- */
/* Barre unique : la grille des filtres dimensionnés + le groupe de toggles
   restent à gauche, les actions (export/reset) sont poussées à droite. Wrap
   propre sur écran étroit. */
.miniapp-filters__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
}
.miniapp-filters__bar > .miniapp-filters__grid {
    /* `display: contents` : la grille s'efface, ses filtres deviennent des
       items flex directs de la barre → chacun se dimensionne à son contenu
       (min 200px) et se place à côté des toggles, au lieu d'être étiré sur
       toute la largeur par le `1fr` de la grille auto-fit. */
    display: contents;
}
.miniapp-filters__bar > .miniapp-filters__grid > * {
    /* Largeur cible bornée (le select n'a pas de largeur intrinsèque → sans
       borne il s'étire sur toute la ligne et rejette les toggles au wrap). */
    flex: 0 1 240px;
    min-width: 200px;
}
/* Toggles binaires groupés, compacts (taille du contenu, pas de cellule ≥200px). */
.miniapp-filters__toggles {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}
/* Actions (export/reset) alignées à droite de la barre. */
.miniapp-filters__actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.miniapp-filters__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
    align-items: end;
}
/* Le date_range a 3 enfants (label + 2 dates) — il a besoin de ~2× la largeur
   d'un filtre simple pour rester confortable. On le force à occuper au minimum
   deux unités de la grille tant qu'il y a la place (sinon il se contente
   d'une cellule comme les autres). */
.miniapp-filters__grid > .input-group:has(input[type="date"] ~ input[type="date"]) {
    grid-column: span 2;
    min-width: 320px;
}

/* ----------------------------------------------------------------------------
   Multi-select dropdown — `<details>` natif HTML5, zero JS pour le toggle.
   Le `<summary>` agit comme bouton, le panneau d'options se révèle au click.
   ---------------------------------------------------------------------------- */
.miniapp-filters__multi {
    position: relative;
    display: flex;          /* permet au summary de prendre toute la largeur de la cellule grid */
    flex-direction: column;
}
.miniapp-filters__multi > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 16px 12px;
    padding-right: 2rem;
}
.miniapp-filters__multi > summary::-webkit-details-marker {
    display: none;  /* Safari : retire la flèche native pour rester cohérent */
}
.miniapp-filters__multi[open] > summary {
    border-color: var(--clr-blue-mid);
    box-shadow: 0 0 0 0.25rem rgba(46, 109, 170, 0.15);
}
.miniapp-filters__multi-label {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--clr-text-2);
    margin-right: 0.5rem;
}
.miniapp-filters__multi-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 10;
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 0.5rem 0;
    max-height: 280px;
    overflow-y: auto;
}
.miniapp-filters__multi[data-active="1"] > summary {
    border-color: var(--clr-teal);
    background-color: var(--clr-teal-pale);
}

/* ----------------------------------------------------------------------------
   Pages d'authentification (login, reset password, register).
   Carte centrée, sans sidebar. Utilisée via :
     {% extends '@WfMiniapp/base.html.twig' %}
     {% block sidebar %}{% endblock %}  ← pas de chrome appli pour les pré-auth
   ---------------------------------------------------------------------------- */
.auth-page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--clr-bg);
}
.auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 36px 32px;
    border-top: 3px solid;
    border-image: linear-gradient(90deg, var(--clr-teal), var(--clr-pink), var(--clr-orange)) 1;
}
.auth-card__title {
    font-family: var(--ff-display);
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--clr-navy);
    text-align: center;
    margin-bottom: 6px;
}
.auth-card__subtitle {
    font-size: .88rem;
    color: var(--clr-text-2);
    text-align: center;
    margin-bottom: 24px;
}
.auth-card__divider {
    height: 1px;
    background: var(--clr-border-light);
    margin: 18px 0 22px;
}
.auth-form__group { margin-bottom: 14px; }
.auth-form__label {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    color: var(--clr-text-2);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}
.auth-form__input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    font-family: var(--ff-body);
    font-size: .92rem;
    color: var(--clr-text);
    background: var(--clr-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.auth-form__input:focus {
    outline: none;
    border-color: var(--clr-blue-mid);
    box-shadow: 0 0 0 3px rgba(46,109,170,.12);
}
.auth-form__input-wrap { position: relative; }
.auth-form__toggle {
    position: absolute;
    top: 50%; right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--clr-text-3);
    background: none; border: none; padding: 4px;
    display: flex; align-items: center;
}
.auth-form__toggle:hover { color: var(--clr-blue-mid); }
.auth-form__forgot {
    display: inline-block;
    margin-top: 4px;
    font-size: .78rem;
    color: var(--clr-blue-mid);
    font-weight: 600;
    text-decoration: none;
}
.auth-form__forgot:hover { text-decoration: underline; }
.auth-form__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, var(--clr-navy), var(--clr-blue-mid));
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-family: var(--ff-display);
    font-size: .9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    transition: filter var(--transition), transform var(--transition);
    margin-top: 8px;
}
.auth-form__btn:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.auth-alert {
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--clr-pink-pale);
    color: var(--clr-pink);
    border-left: 3px solid var(--clr-pink);
    font-size: .85rem;
    margin-bottom: 18px;
}

/* ----------------------------------------------------------------------------
   Page « Mon compte » (`/{_locale}/account`). Grid 2 colonnes (profil à
   gauche, infos à droite), responsive en colonne unique < 800px. Le
   topbar/sidebar/footer sont fournis par le shell mini-app v2.
   ---------------------------------------------------------------------------- */
.account-grid {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 24px;
}
@media (max-width: 800px) { .account-grid { grid-template-columns: 1fr; } }

.account-card {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    box-shadow: var(--shadow-sm);
    border-top: 3px solid;
    border-image: linear-gradient(90deg, var(--clr-teal), var(--clr-pink)) 1;
}
.account-card__title {
    font-family: var(--ff-display);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--clr-navy);
    margin-bottom: 16px;
}
.account-info { display: grid; gap: 10px; }
.account-info__row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--clr-border-light);
    font-size: .88rem;
}
.account-info__row:last-child { border-bottom: none; }
.account-info__label { color: var(--clr-text-3); font-weight: 600; }
.account-info__value { color: var(--clr-text); font-weight: 500; word-break: break-word; }

/* Avatar circulaire utilisé sur la carte profil (déclinable en grand format
   via inline style `width/height/font-size`). Même rendu que celui du
   `_topbar.html.twig` (gradient navy diagonal). */
.account-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-navy), var(--clr-blue-mid));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 800; flex-shrink: 0;
}

/* Searchable-select (Tom Select) : largeur fixe du contrôle pour qu'il ne
   change pas de largeur entre la valeur courante (ex. « 01_LIGNY ») et le
   placeholder « Rechercher une clinique… » affiché à l'ouverture. Ciblé sur
   le wrapper généré par NOTRE composant uniquement (frère adjacent du <select
   data-searchable-select> masqué). */
select[data-searchable-select] + .ts-wrapper {
    width: 18rem;
    max-width: 100%;
}