/* ═══════════════════════════════════════════════════
   AURALYA — Styles principaux
   Dashboard bloc opératoire — Implantologie dentaire
   Powered by Samir Tak-Tak — 2026
   ═══════════════════════════════════════════════════

   TABLE DES MATIÈRES (repères approximatifs, dérivent legerement
   au fil des editions — chercher le texte du commentaire cite si
   le numero de ligne ne correspond plus exactement) :

     L1     Layout general / topbar / variables (:root)
     L496   Colonne video (dashboard) : controles, preview, infos
     L784   Sliders "ctrl-pill" (base) : volume, canal
     L914   Panneau "Mixage & Ambiance" : scheduler + Main/Micro/Source
     L1652  Dashboard Ambiance — variante compacte (diffusion)
     L2424  Auto-complétion / fiche patient / CRM (modales, formulaires)
     L3198  Bibliothèque vidéo : liste de fichiers, file d'attente
     L3474  Diffusion TV : liste des téléviseurs, HLS, Tizen
     L4608  Page pleine diffusion (remplace le modal lecteur)
     L4794  IPTV : grille de chaînes, modal lecteur
     L5124  Paramètres > IPTV : comptes, favoris

   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    /* UI scale (par poste, via localStorage + JS). */
    --ui-scale: 1;
    /* Marges fluides (fonction de la largeur de fenêtre). */
    --page-gutter: clamp(10px, 2.8vw, 26px);
    --panel-gap: clamp(12px, 2vw, 22px);
    --bg-primary: #0a0e1a;
    --bg-secondary: #111827;
    --bg-card: #1a2035;
    --bg-card-hover: #1e2642;
    --bg-input: #0d1425;
    --border: #2a3555;
    --border-focus: #3b82f6;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --success: #10b981;
    --success-bg: #064e3b;
    --warning: #f59e0b;
    --warning-bg: #78350f;
    --danger: #ef4444;
    --danger-bg: #7f1d1d;
    --info: #06b6d4;
    --recording: #ef4444;
    --streaming: #8b5cf6;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
    --transition: all 0.2s ease;
    --font: 'Plus Jakarta Sans', -apple-system, sans-serif;
    --footer-height: 28px;
    --footer-bottom: 16px;
    --footer-gap: 24px;
    --footer-reserved-space: calc(var(--footer-height) + var(--footer-bottom));
    --footer-layout-space: calc(var(--footer-reserved-space) + var(--footer-gap));
    /* Réf. poste bloc op. : écran 1360×768, fenêtre ~1031×616 (DPR 1) — media queries ci-dessous */
    --auralya-ref-screen-w: 1360;
    --auralya-ref-screen-h: 768;
    --auralya-ref-viewport-w: 1031;
    --auralya-ref-viewport-h: 616;
}

html {
    font-size: calc(16px * var(--ui-scale, 1));
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font);
    background: var(--bg-primary);
    color: var(--text-primary);
    /* --vh = 1% hauteur visible (voir static/js/viewport_vh.js, visualViewport). */
    height: calc(var(--vh, 1vh) * 100);
    max-height: calc(var(--vh, 1vh) * 100);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    /* La topbar est fixed : éviter le contenu dessous sur toutes les pages. */
    padding-top: var(--topbar-height, 56px);
}

body > #root {
    flex: 1;
    min-height: 0;
    height: calc(100% - var(--footer-reserved-space));
    overflow: hidden;
}

/* ─── TOPBAR ─────────────────────────────── */

:root {
    --topbar-height: 56px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px var(--page-gutter);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    z-index: 2000;
    flex-shrink: 0;
    top: 0;
    width: 100%;
    height: var(--topbar-height);
    position: fixed;
    left: 0;
    box-shadow: 0 6px 22px rgba(0,0,0,0.35);
}

.topbar-left { display: flex; align-items: center; gap: 16px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }

/* (padding géré sur body) */

/* Ancien bandeau patient (retiré du template) — masqué si le navigateur sert un HTML en cache */
#topbar-patient,
.topbar-patient {
    display: none !important;
}

.logo, .logo-link {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.logo-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-primary);
}

/* Logo image (rond) — remplace l’ancien picto « A » SVG */
.logo-mark .logo-img-wrap {
    display: block;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    background: var(--bg-input);
}
.logo-mark .logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.logo-mark span {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.pin-logo {
    justify-content: center;
    margin-bottom: 12px;
}

.pin-logo .logo-img-wrap { width: 48px; height: 48px; }
.pin-logo span { font-size: 2rem; }

.subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 400;
}

.topbar-server-ip {
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fbbf24;
    white-space: nowrap;
}

/* ─── BADGES ─────────────────────────────── */

.badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-idle { background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border); }
.badge-recording { background: var(--danger-bg); color: var(--danger); animation: pulse-rec 1.5s infinite; }
.badge-paused { background: var(--warning-bg); color: var(--warning); }
/* Ancien style violet — conservé si une classe legacy ; flux live = On Air */
.badge-streaming { background: rgba(139, 92, 246, 0.15); color: var(--streaming); }

.topbar-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: auto auto auto auto;
    align-items: center;
    column-gap: 14px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
.topbar-whatsapp-label {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
    line-height: 1;
    transform: translateY(1px);
}
.topbar-whatsapp-sep {
    display: none;
}
.topbar-whatsapp-state {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted, #94a3b8);
    line-height: 1;
    pointer-events: auto;
}
.topbar-whatsapp-state-on {
    color: var(--success, #10b981);
}
.topbar-whatsapp-state-off {
    color: var(--danger, #ef4444);
}
.topbar-agent-state {
    display: inline-flex;
    align-items: center;
    color: var(--success, #10b981);
    line-height: 1;
    pointer-events: auto;
}

/* Diffusion en direct (remplace l’ancien libellé « STREAMING ») */
.badge-on-air {
    background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
    color: #fff;
    border: 1px solid #f87171;
    text-transform: none;
    letter-spacing: 0.06em;
    font-weight: 800;
    animation: on-air-blink 1.1s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55);
}

@keyframes on-air-blink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5);
    }
    50% {
        opacity: 0.72;
        box-shadow: 0 0 14px 3px rgba(248, 113, 113, 0.65);
    }
}

@keyframes pulse-rec {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ─── BUTTONS ────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(107, 114, 128, 0.12);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.05s;
    white-space: nowrap;
    user-select: none;
}

.btn:hover { border-color: var(--border-focus); background: rgba(59, 130, 246, 0.10); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(40%); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-disabled-look { opacity: 0.55; cursor: help; filter: grayscale(40%); }

.btn-sm { padding: 6px 10px; font-size: 0.82rem; border-radius: 10px; }
.btn-lg { padding: 10px 14px; font-size: 1rem; border-radius: 10px; line-height: 1.15; }

/* Boutons ON/OFF compacts, sans toucher aux libellés (le texte reste dans le DOM).
   Affiche uniquement l'état via data-state. */
.btn.btn-onoff {
    position: relative;
    min-width: 54px;
    padding-left: 12px;
    padding-right: 12px;
}
.btn.btn-onoff[data-state] {
    color: transparent;            /* masque le libellé sans le modifier */
    text-shadow: none;
}
.btn.btn-onoff[data-state]::after {
    content: attr(data-state);
    color: var(--text-primary);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.2px;
}

/* Petits boutons icône (ex: 🔍 dans la bibliothèque) */
.btn-iconbox {
    box-sizing: border-box;
    height: 36px;                 /* même hauteur visuelle que .input-filter */
    width: 36px;                  /* carré */
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
}
.btn-iconbox:hover {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.btn-iconbox:active {
    transform: translateY(1px);
}
.btn-iconbox:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.btn-iconbox .emoji-loupe {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: 18px;
    line-height: 1;
    display: block;
}

/* Retour dashboard — bouton rond, libellé uniquement au survol */
a.btn-topbar-back,
a.btn-topbar-back:visited,
a.btn-topbar-back:hover,
a.btn-topbar-back:active {
    text-decoration: none;
    color: var(--text-primary);
}

#topbar-back-dashboard {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
}

.topbar-right #topbar-btn-quit.topbar-quit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    font-family: "Segoe UI Symbol", "Segoe UI", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 40px;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.45);
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#topbar-back-dashboard,
.topbar-right #topbar-btn-quit.topbar-quit-icon {
    place-items: center;
    text-align: center;
}

.topbar-right #topbar-btn-quit.topbar-quit-icon:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.65);
}

/* Variantes couleur — même logique que .ctrl-pill-* (translucide + bord coloré) */
.btn-primary { background: rgba(59, 130, 246, 0.14); border-color: rgba(59, 130, 246, 0.45); color: var(--text-primary); }
.btn-primary:hover { background: rgba(59, 130, 246, 0.20); border-color: rgba(59, 130, 246, 0.60); }

.btn-success { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.45); color: var(--text-primary); }
.btn-success:hover { background: rgba(16, 185, 129, 0.20); border-color: rgba(16, 185, 129, 0.60); }

.btn-warning { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.45); color: var(--text-primary); }
.btn-warning:hover { background: rgba(245, 158, 11, 0.20); border-color: rgba(245, 158, 11, 0.60); }

.btn-danger { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.45); color: var(--text-primary); }
.btn-danger:hover { background: rgba(239, 68, 68, 0.20); border-color: rgba(239, 68, 68, 0.60); }

.btn-info { background: rgba(14, 165, 233, 0.14); border-color: rgba(14, 165, 233, 0.45); color: var(--text-primary); }
.btn-info:hover { background: rgba(14, 165, 233, 0.20); border-color: rgba(14, 165, 233, 0.60); }

/* Alias : quelques templates utilisent btn-secondary */
.btn-secondary { background: rgba(107, 114, 128, 0.12); border-color: var(--border); color: var(--text-primary); }
.btn-secondary:hover { border-color: var(--border-focus); background: rgba(59, 130, 246, 0.10); }

.btn-icon {
    width: 40px; height: 40px;
    padding: 0;
    border-radius: 50%;
    font-size: 1.1rem;
    text-decoration: none;
}

/* Topbar : mêmes pastilles pour boutons et liens (les <a> visités n'étaient pas ternes) + léger relief */
.topbar-right a.btn-icon,
.topbar-right a.btn-icon:visited,
.topbar-right a.btn-icon:active {
    color: var(--text-primary);
    text-decoration: none;
}

.topbar-right .btn-icon {
    background: linear-gradient(180deg, #232a45 0%, var(--bg-card) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.topbar-right .btn-icon:hover {
    background: linear-gradient(180deg, #2a3150 0%, var(--bg-card-hover) 100%);
    border-color: var(--accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

/* Topbar: autoriser les ctrl-pill (même style que "DÉMARRER") */
.topbar-right .ctrl-pill {
    padding: 8px 12px;
    font-size: 0.85rem;
    border-radius: 10px;
    line-height: 1;
}

/* Icône « client » (remplace l’émoji 👥, souvent illisible sur fond sombre) */
.topbar-right .topbar-icon-svg {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
    color: var(--text-primary);
    opacity: 0.98;
    filter: drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.25));
}
.topbar-right .topbar-icon-svg-wrap:hover .topbar-icon-svg {
    color: #f1f5f9;
    opacity: 1;
    filter: drop-shadow(0 0 1px rgba(59, 130, 246, 0.45));
}

/* ─── DASHBOARD LAYOUT ───────────────────── */

.dashboard {
    --dashboard-video-strip-h: 38px;
    --dashboard-panel-gap: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
    grid-template-rows: 1fr;      /* ligne unique = hauteur disponible → panels bornés */
    column-gap: 8px;
    row-gap: var(--panel-gap);
    padding: var(--page-gutter) var(--page-gutter) var(--footer-reserved-space);
    flex: 1;
    min-height: 0;
    overflow: hidden;
    /* Pas de max-width : fenêtre maximisée = grille sur toute la largeur (comme une appli bureau). */
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1200px) {
    .dashboard { grid-template-columns: 1fr; }
}

/* Fenêtre type 1031×616 : largeur < 1200px mais assez large pour 2 colonnes — évite une vidéo 16:9 trop haute */
@media (max-width: 1240px) and (min-width: 980px) and (max-height: 740px) {
    .dashboard {
        grid-template-columns: minmax(0, 1fr) minmax(390px, 460px);
        gap: 10px;
    }
}

/* ─── PANELS & CARDS ─────────────────────── */

.panel {
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-panel-gap);
    min-height: 0;
    overflow: hidden;   /* contient les enfants dans la cellule de grille */
}

/* Colonne vidéo : contrôles en haut, preview extensible, infos en bas. */
.panel-video {
    overflow-x: hidden;
    overflow-y: hidden;
    min-height: 0;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h2 { font-size: 1.1rem; font-weight: 700; }

/*
 * Bande unique : titre (icône), sélecteur vidéo, routage audio, VU-mètre.
 */
.video-control-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 7px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    min-height: var(--dashboard-video-strip-h);
}

.strip-heading {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.video-control-strip .source-selector {
    flex-shrink: 0;
}

.video-control-strip .source-selector select {
    min-width: min(140px, 26vw);
    max-width: min(260px, 42vw);
}

.flux-audio-inline {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    flex: 1 1 0%;
    justify-content: flex-start;
    min-width: 0;
    overflow: hidden;
}

.flux-audio-vo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.flux-audio-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.voiceover-device-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    max-width: min(220px, 38vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

.voiceover-device-hint:empty {
    display: none;
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.video-control-strip .source-selector,
.session-info {
    --dashboard-compact-h: 22px;
    --dashboard-compact-font: 0.7rem;
    --dashboard-compact-radius: 3px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 7px 12px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    min-height: 38px;
}

.video-control-strip .source-selector select,
.video-control-strip .source-selector .btn,
.video-control-strip .source-selector .ctrl-pill,
.session-info .stream-toggle {
    box-sizing: border-box;
    height: var(--dashboard-compact-h);
    min-height: var(--dashboard-compact-h);
    border-radius: var(--dashboard-compact-radius);
    padding: 0 7px;
    font-size: var(--dashboard-compact-font);
    font-weight: 600;
    line-height: 1.2;
}

.video-control-strip .source-selector .btn,
.video-control-strip .source-selector .ctrl-pill,
.session-info .stream-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border, #2a3150);
    background: rgba(107, 114, 128, 0.12);
    color: var(--text, #e5e7eb);
    box-shadow: none;
}

.video-control-strip .source-selector select {
    background: rgba(15, 20, 32, 0.75);
    border: 1px solid var(--border, #2a3150);
    color: var(--text, #e5e7eb);
}

.video-control-strip .source-selector .btn:hover:not(:disabled),
.video-control-strip .source-selector .ctrl-pill:hover:not(:disabled),
.session-info .stream-toggle:hover:not(:disabled) {
    border-color: var(--border-focus);
    background: rgba(59, 130, 246, 0.10);
}

.video-control-strip .source-selector .ctrl-pill-start,
.video-control-strip .source-selector .ctrl-pill-preview:not(.preview-off) {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.45);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.card-header h3 { font-size: 1rem; font-weight: 700; }
.card-body { padding: 16px 20px; }

/* ─── VIDEO CONTAINER ────────────────────── */

.video-container {
    position: relative;
    /* Rectangle *exact* de l’image affichée (rempli par app.js) : .video-surface s’y aligne. */
    --vimg-ox: 0px;
    --vimg-oy: 0px;
    --vimg-w: 100%;
    --vimg-h: 100%;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

/* Calque = l’image réelle (pas toute la zone noire) : le point REC est dessus cette surface. */
.video-surface {
    position: absolute;
    z-index: 2;
    left: var(--vimg-ox, 0px);
    top: var(--vimg-oy, 0px);
    width: var(--vimg-w, 100%);
    height: var(--vimg-h, 100%);
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
}

/* Image en arrière-plan du calque (ne recouvre jamais les pastilles). */
.video-surface .live-feed {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Couche unique au-dessus de l’image (point enregistrement). */
.video-surface-ui {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    direction: ltr;
}

/* Point rouge : coin haut *droit* de l’image (surface), pas ailleurs. */
.video-surface-ui .video-recording-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    bottom: auto;
    z-index: 1;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ef4444;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    animation: recording-dot-blink 0.9s ease-in-out infinite;
}

.video-recording-dot {
    display: none;
}

.video-recording-dot.is-visible {
    display: block;
}

@keyframes recording-dot-blink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5), 0 0 10px 2px rgba(252, 165, 165, 0.45);
        transform: scale(1);
    }
    50% {
        opacity: 0.25;
        box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.35);
        transform: scale(0.88);
    }
}

.live-feed {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.video-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 4;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    pointer-events: none;
}

.video-overlay span {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

/* ─── VU-MÈTRE (dans .video-control-strip) ─── */

.vu-meter-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Sliders fins style "ctrl-pill" (piste fine + thumb compact). */
/* Appliqué dans le dashboard ET dans la page diffusion (volume diffusion). */
.vu-meter-inline input[type="range"].mixer-slider,
#filestream-volume.mixer-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 64px;
    height: 4px;
    margin: 0 4px;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 999px;
    background: rgba(107, 114, 128, 0.18);
    border: 1px solid rgba(107, 114, 128, 0.35);
}

.vu-meter-inline input[type="range"].mixer-slider:focus-visible,
#filestream-volume.mixer-slider:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.vu-meter-inline input[type="range"].mixer-slider::-webkit-slider-thumb,
#filestream-volume.mixer-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--accent);
    border: 2px solid var(--bg-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.vu-meter-inline input[type="range"].mixer-slider::-moz-range-thumb,
#filestream-volume.mixer-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--accent);
    border: 2px solid var(--bg-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.vu-meter-inline input[type="range"].mixer-slider::-moz-range-track,
#filestream-volume.mixer-slider::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(107, 114, 128, 0.18);
    border: 1px solid rgba(107, 114, 128, 0.35);
}

/* Slider diffusion page Bibliothèque : plus lisible que le mini 64px du bandeau VU */
.filestream-lib-col #filestream-volume.mixer-slider.filestream-volume-slider {
    width: min(168px, 46vw);
    min-width: 72px;
    max-width: 220px;
}

/* Canal: accent neutre pour distinguer du volume */
.vu-meter-inline input[type="range"].mixer-slider-channel::-webkit-slider-thumb {
    background: #94a3b8; /* text-secondary */
}
.vu-meter-inline input[type="range"].mixer-slider-channel::-moz-range-thumb {
    background: #94a3b8;
}

/* ─── Mini mixage sous "Bibliothèque vidéo" (vertical) ─────────────── */

.dashboard-audio-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 12px 0;
    min-height: 38px;
    box-sizing: border-box;
}

.dashboard-audio-tab[data-audio-tab="ambiance"]:only-child {
    grid-column: 1 / -1;
}

.dashboard-audio-tab {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.52);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    padding: 8px 10px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dashboard-audio-tab.active {
    color: #dbeafe;
    border-color: rgba(59, 130, 246, 0.54);
    background: rgba(59, 130, 246, 0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.dashboard-audio-panel {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.dashboard-audio-panel[hidden] {
    display: none !important;
}

.library-mixer {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 6px 14px 6px;
    align-items: end;
    width: 100%;
    box-sizing: border-box;
}

/* Refonte v2 : 3 colonnes (Volume général | Micro | Source), avec VU dedans */
.library-mixer.library-mixer-v2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
}

/* ==========================================================================
   Panneau "Mixage & Ambiance" — scheduler + curseurs Main/Micro/Source
   ==========================================================================
   Structure DOM :
     .ambient-scheduler-row (flex, wrap)
       .ambient-schedule-layout   grille Lun-Dim + selecteur Coran, encadre
       .library-mixer-stack       Main / Micro / Source empiles, encadre
   Main/Micro/Source sont 3 conteneurs independants (.library-mixer-XXX-solo)
   plutot qu'une grille a 3 colonnes classique, pour pouvoir les reordonner
   et les positionner librement. La regle generale .library-mixer.library-mixer-v2
   { display:contents } (plus bas dans ce fichier) neutralise son propre
   systeme de grille pour laisser place a ce layout custom — d'ou les
   selecteurs `.dashboard-ambient-panel .library-mixer.library-mixer-v2.XXX`
   qu'on voit revenir : specificite necessaire pour battre a la fois cette
   regle generale et une poignee d'autres regles historiques (min-height
   fixe, margin-top:auto, VU-metre) qui ne s'appliquent pas a ce layout. */

.ambient-scheduler-row {
    display: flex;
    flex-direction: row;
    /* Si la grille et la pile Main/Micro/Source ne tiennent pas cote a cote
       (ecran etroit), la pile passe sous la grille au lieu de la chevaucher —
       seule garantie anti-chevauchement fiable quelle que soit la largeur
       reelle du panneau. */
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
}

.ambient-scheduler-row .ambient-schedule-layout {
    flex: 1 1 300px;
    min-width: 260px;
    /* flow-root isole ce conteneur des marges internes de .ambient-schedule-block
       (evite qu'une marge negative n'echappe visuellement de la boite). */
    display: flow-root;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.08);
    padding: 8px 10px;
}
.ambient-schedule-layout .ambient-schedule-block {
    width: 100%;
}

/* Ligne interne du bloc scheduler, 2 colonnes :
   gauche = grille Lun-Dim (jours), droite = selecteur Coran + cadre
   Main/Micro/Source juste en dessous (5px). */
.ambient-schedule-mixer-row {
    display: flex;
    flex-direction: row;
    /* stretch (au lieu de flex-start) : la colonne droite (selecteur + mixer)
       s'etire pour egaler la hauteur de la grille Lun-Dim a gauche. */
    align-items: stretch;
    flex-wrap: wrap;
    gap: 12px;
}
.ambient-schedule-mixer-row .ambient-weekly-schedule {
    /* flex-basis 0 (et non 200px) : la grille prend l'espace RESTANT apres la
       colonne droite au lieu de reclamer 200px a priori.
       min-width 180px = plancher de lisibilite d'une ligne de jour : en dessous
       la ligne passe en wrap (empilement) plutot que d'ecraser la grille.
       Ce plancher est une constante, pas une taille de contenu : le seuil de
       wrap vaut donc toujours 180 + 12 + 230 = 422px, quel que soit le nom de
       la piste Coran selectionnee. */
    flex: 1 1 0;
    min-width: 180px;
}
/* LARGEUR FIGEE — ne pas remplacer par un simple flex-basis.
   Le navigateur decide du passage a la ligne (wrap) a partir de la taille
   *hypothetique* de l'element = flex-basis borne par min-width/max-width.
   Sans bornes, min-width vaut "auto" = largeur min du CONTENU : un nom de
   piste Coran long ("003 SOURATE AL KAHF Ismail Annuri.m4a +3" = 278px)
   gonflait cette colonne au-dela de 230px, la ligne ne tenait plus dans le
   panneau (472px) et la colonne basculait sous la grille des jours.
   Le layout dependait donc de la piste selectionnee — d'ou l'impression d'une
   difference dev / version installee. min-width = max-width = flex-basis
   rendent la largeur independante du contenu. */
.ambient-coran-mixer-col {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 0 0 230px;
    width: 230px;
    min-width: 230px;
    max-width: 230px;
}
/* Corollaire : les enfants ne doivent jamais pousser la colonne. Ils se
   laissent compresser et tronquent (ellipsis) au lieu de deborder. */
.ambient-coran-mixer-col > * {
    min-width: 0;
    max-width: 100%;
}
/* Le cadre mixer occupe tout l'espace vertical restant sous le selecteur
   Coran, pour que la colonne droite atteigne exactement la meme hauteur
   que la grille Lun-Dim. flex:0 0 230px (regle de base, plus bas) reutilisait
   par erreur la LARGEUR comme flex-basis vertical dans ce contexte colonne —
   override necessaire. */
.ambient-coran-mixer-col .library-mixer-stack {
    flex: 1 1 auto;
    height: auto;
    margin-left: 0;
}

.library-mixer-stack {
    display: flex;
    flex-direction: column;
    flex: 0 0 230px;
    width: 230px;
    min-width: 230px;
    margin-left: auto;   /* colle le cadre au bord droit du panneau */
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.08);
    padding: 8px 10px;
}

/* Curseurs retrecis pour tenir dans les 230px du cadre (sinon ils debordent
   a gauche, le conteneur etant justify-content:flex-end). Les selecteurs
   #mix-master/#mix-voiceover/#mix-channel.mixer-slider (ID, tres specifiques,
   definis plus bas) fixent max-width:140px — repris ici avec la meme
   specificite pour etre certains de gagner. */
.library-mixer-stack .mixer-slider,
.library-mixer-stack #mix-master.mixer-slider,
.library-mixer-stack #mix-voiceover.mixer-slider,
.library-mixer-stack #mix-channel.mixer-slider {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 90px;
}
.library-mixer-stack .library-mixer-col {
    gap: 6px;
    min-width: 0;
    width: 100%;
}
.library-mixer-stack .mixer-fader-wrap {
    gap: 6px;
}

/* display:block annule le display:contents de la regle generale plus bas
   (sinon ces 3 conteneurs sont invisibles au layout) et neutralise le
   margin-top:auto qui les enverrait tout en bas du panneau flex-column. */
.dashboard-ambient-panel .library-mixer.library-mixer-v2.library-mixer-main-solo,
.dashboard-ambient-panel .library-mixer.library-mixer-v2.library-mixer-micro-solo,
.dashboard-ambient-panel .library-mixer.library-mixer-v2.library-mixer-rest {
    display: block;
    width: 100%;
    margin-top: 0;
    margin-bottom: 8px;
}

/* Colonnes en hauteur auto (au lieu du 206/218px fixe de la regle generale) :
   sinon le centrage vertical dans une boite trop haute fausse la mesure
   d'espacement entre curseurs et decale leur bord droit. */
.dashboard-ambient-panel .library-mixer.library-mixer-v2.library-mixer-main-solo .library-mixer-col,
.dashboard-ambient-panel .library-mixer.library-mixer-v2.library-mixer-micro-solo .library-mixer-col,
.dashboard-ambient-panel .library-mixer.library-mixer-v2.library-mixer-rest .library-mixer-col {
    height: auto;
    min-height: 0;
    padding: 0;
}

/* Libelle + curseur + bouton mute sur une seule ligne (flex-direction:row
   au lieu de column), justifies a droite. right:-12px compense le padding
   interne pour toucher exactement le meme bord que .library-mixer-stack. */
.library-mixer-main-solo .library-mixer-col,
.library-mixer-rest .library-mixer-col,
.library-mixer-micro-solo .library-mixer-col {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
    position: relative;
    right: -12px;
}

/* Centre verticalement le libelle et le bloc curseur dans la ligne (au lieu
   du centrage/alignement herite de la regle generale). */
.library-mixer-main-solo .library-mixer-title,
.library-mixer-main-solo .mixer-col-body-no-vu,
.library-mixer-rest .library-mixer-title,
.library-mixer-rest .mixer-col-body,
.library-mixer-rest .mixer-col-body-no-vu,
.library-mixer-micro-solo .library-mixer-title,
.library-mixer-micro-solo .mixer-col-body,
.library-mixer-micro-solo .mixer-col-body-no-vu {
    align-self: center;
}

/* Le wrapper interne (mixer-col-body / mixer-col-body-no-vu) a sa propre
   regle min-height:112/168px dans la section "Refonte v2" plus bas — neutralisee
   ici pour ne pas laisser de vide au-dessus du curseur. */
.dashboard-ambient-panel .library-mixer-main-solo .mixer-col-body-no-vu,
.dashboard-ambient-panel .library-mixer.library-mixer-v2.library-mixer-rest .mixer-col-with-vu .mixer-col-body,
.dashboard-ambient-panel .library-mixer.library-mixer-v2.library-mixer-rest .mixer-col-body-no-vu,
.dashboard-ambient-panel .library-mixer.library-mixer-v2.library-mixer-micro-solo .mixer-col-with-vu .mixer-col-body,
.dashboard-ambient-panel .library-mixer.library-mixer-v2.library-mixer-micro-solo .mixer-col-body-no-vu {
    min-height: 0;
    align-items: center;
    width: auto;
    flex: 0 0 auto;
}

/* VU-metre du micro masque : pas de place dans la ligne compacte. */
.dashboard-ambient-panel .library-mixer-rest .vu-meter.vu-meter-vertical,
.dashboard-ambient-panel .library-mixer-micro-solo .vu-meter.vu-meter-vertical {
    display: none;
}

/* Layout compact du mixeur : les colonnes sont rendues par le conteneur parent,
   sans modifier le HTML ni les selecteurs descendants. */
.library-mixer.library-mixer-v2 {
    display: contents;
}
.library-mixer.library-mixer-v2 .library-mixer-col {
    height: auto;
    min-height: 218px;
    padding: 8px 6px;
}
.mixer-col-with-vu .mixer-col-body {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    width: 100%;
    flex: 1 1 auto;
    min-height: 168px;
}
.mixer-col-body-no-vu {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    flex: 1 1 auto;
    min-height: 168px;
}
.mixer-fader-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.library-mixer.library-mixer-v2 .vu-meter.vu-meter-vertical {
    width: 8px;
    min-height: 144px;
    height: 144px;
}

.library-mixer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 5px 5px;
    height: 206px;              /* +~1/3 : faders plus hauts */
    background: none;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
    min-width: 0;              /* permet de rester dans le cadre */
}

.library-mixer-title {
    font-size: 0.64rem;
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 1.2;
    min-height: 26px;           /* toutes les tuiles alignées (1 ou 2 lignes) */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Valeur live sous le titre du fader (ex: "87%") */
.fader-live-val {
    display: block;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent, #3b82f6);
    letter-spacing: 0.03em;
    line-height: 1.4;
    min-height: 16px;
    transition: color 0.15s;
}

/* Slider vertical (WebKit + Firefox). */
input[type="range"].mixer-slider-vertical {
    width: 18px;     /* laisse respirer la poignée */
    height: 108px;   /* plus court pour ne pas tronquer les boutons */
    margin: 0;
    writing-mode: bt-lr; /* FF */
    -webkit-appearance: slider-vertical; /* Chromium */
    appearance: slider-vertical;
}

/* Look "console" (rail noir + graduations + poignée rectangulaire striée) */
input[type="range"].mixer-slider-vertical::-webkit-slider-runnable-track {
    width: 4px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.18)),
        #0b1020;
    border: 1px solid rgba(148, 163, 184, 0.20);
}

input[type="range"].mixer-slider-vertical::-moz-range-track {
    background: #0b1020;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 999px;
}

input[type="range"].mixer-slider-vertical::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 20px;
    border-radius: 4px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.18) 0px,
            rgba(255,255,255,0.18) 1px,
            rgba(0,0,0,0.18) 1px,
            rgba(0,0,0,0.18) 3px
        ),
        linear-gradient(180deg, #cbd5e1, #94a3b8);
    border: 1px solid rgba(2,6,23,0.75);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

input[type="range"].mixer-slider-vertical::-moz-range-thumb {
    width: 14px;
    height: 20px;
    border-radius: 4px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.18) 0px,
            rgba(255,255,255,0.18) 1px,
            rgba(0,0,0,0.18) 1px,
            rgba(0,0,0,0.18) 3px
        ),
        linear-gradient(180deg, #cbd5e1, #94a3b8);
    border: 1px solid rgba(2,6,23,0.75);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

/* VU-mètre vertical (dans la colonne "VU") */
.library-mixer .vu-meter.vu-meter-vertical {
    flex: 0 0 auto;
    width: 14px;                /* plus fin */
    height: 144px;              /* +33% (108 -> 144) */
    background: #0b1020;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.20);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.library-mixer .vu-meter.vu-meter-vertical .vu-level {
    width: 100%;
    height: 0%;
    background:
        linear-gradient(
            180deg,
            #ef4444 0%,
            #f59e0b 18%,
            #22c55e 52%,
            #22c55e 100%
        );
    border-radius: 999px;
    transition: height 0.1s ease;
}

/* ─── Console faders (custom) ───────────────────────────────────────── */

.library-mixer .console-fader {
    position: relative;
    width: 38px;          /* zone plus fine */
    height: 144px;        /* +33% (108 -> 144) */
    display: grid;
    grid-template-columns: 8px 1fr;
    align-items: stretch;
    gap: 5px;
    user-select: none;
    touch-action: none;
}

.library-mixer .console-fader-scale {
    border-radius: 6px;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(148,163,184,0.55) 0px,
            rgba(148,163,184,0.55) 1px,
            transparent 1px,
            transparent 8px
        );
    opacity: 0.55;
}

.library-mixer .console-fader-rail {
    position: relative;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.25)), #0b1020;
    border: 1px solid rgba(148, 163, 184, 0.20);
    overflow: hidden;
}

.library-mixer .console-fader-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0%;
    background: linear-gradient(180deg, rgba(34,197,94,0.95), rgba(34,197,94,0.2));
    opacity: 0.9;
}

.library-mixer .console-fader-handle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 20px;
    border-radius: 4px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.18) 0px,
            rgba(255,255,255,0.18) 1px,
            rgba(0,0,0,0.18) 1px,
            rgba(0,0,0,0.18) 3px
        ),
        linear-gradient(180deg, #cbd5e1, #94a3b8);
    border: 1px solid rgba(2,6,23,0.75);
    box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}

.library-mixer .console-fader-handle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Couleurs par canal (rail fill subtil) */
.library-mixer #mix-master .console-fader-fill { background: linear-gradient(180deg, rgba(59,130,246,0.95), rgba(59,130,246,0.22)); }
.library-mixer #mix-channel .console-fader-fill { background: linear-gradient(180deg, rgba(168,85,247,0.95), rgba(168,85,247,0.22)); }
.library-mixer #mix-voiceover .console-fader-fill { background: linear-gradient(180deg, rgba(16,185,129,0.95), rgba(16,185,129,0.22)); }
.library-mixer #volume-slider .console-fader-fill { background: linear-gradient(180deg, rgba(245,158,11,0.95), rgba(245,158,11,0.22)); }


/* Icône dans la tuile "Casque" */
.library-mixer #volume-icon {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.library-mixer .mixer-mute-btn.btn {
    width: 34px;
    height: 28px;
    padding: 0;
    font-size: 0.82rem;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(226,232,240,0.22), rgba(148,163,184,0.14));
    border: 1px solid rgba(148, 163, 184, 0.32);
    line-height: 1.2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.library-mixer .mixer-mute-btn.btn:hover {
    border-color: var(--border-focus);
    background: rgba(59, 130, 246, 0.10);
}

.dashboard-ambient-panel {
    display: flex;
    flex-direction: column;
    padding: 10px 12px 6px;
    --ambient-compact-h: 22px;
    --ambient-compact-font: 0.7rem;
    --ambient-compact-radius: 3px;
    overflow-y: hidden;
}

.ambient-row,
.ambient-controls,
.ambient-volume-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.ambient-row-status {
    justify-content: space-between;
    margin-bottom: 8px;
}

.ambient-status {
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ambient-status.ambient-status-error {
    color: #f87171;
}

.ambient-track-select {
    width: 100%;
    min-width: 0;
    margin-bottom: 16px;
    font-size: 0.82rem;
}

.ambient-track-select.ambient-native-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
}

.ambient-track-select.ambient-track-current {
    border-color: rgba(34, 197, 94, 0.78);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.14), var(--bg-input, rgba(15, 23, 42, 0.92)) 42%);
    color: var(--text-primary);
    font-weight: 700;
}

.ambient-track-select option.ambient-current-option {
    background: #14532d;
    color: #f0fdf4;
    font-weight: 700;
}

.ambient-controls {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 8px;
}

.ambient-controls .ctrl-pill {
    width: 100%;
    min-height: 32px;
    padding: 6px 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    min-width: 0;
    justify-content: center;
}

.ambient-controls #ambient-play {
    width: 100%;
    min-width: 0;
    white-space: nowrap;
}

.ambient-loop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

/* Ligne dediee aux bascules Aleatoire / Boucle (sous les boutons de lecture) */
.ambient-toggles {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
    margin-bottom: 8px;
}

.ambient-volume-row input[type="range"] {
    flex: 1 1 auto;
    min-width: 90px;
    transform: translateY(1px);
}

#ambient-volume.mixer-slider {
    -webkit-appearance: none;
    appearance: none;
    align-self: center;
    height: 2px;
    max-height: 2px;
    border-radius: 999px;
    cursor: pointer;
    background: linear-gradient(rgba(107, 114, 128, 0.24), rgba(107, 114, 128, 0.24)) center / 100% 2px no-repeat;
    border: 0;
}

#ambient-volume.mixer-slider:hover,
#ambient-volume.mixer-slider:focus,
#ambient-volume.mixer-slider:active {
    height: 2px;
    max-height: 2px;
}

#ambient-volume.mixer-slider::-webkit-slider-runnable-track {
    height: 2px;
    max-height: 2px;
    border-radius: 999px;
    background: transparent;
    border: 0;
}

#ambient-volume.mixer-slider:hover::-webkit-slider-runnable-track,
#ambient-volume.mixer-slider:focus::-webkit-slider-runnable-track,
#ambient-volume.mixer-slider:active::-webkit-slider-runnable-track {
    height: 2px;
    max-height: 2px;
}

#ambient-volume.mixer-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 9px;
    height: 9px;
    margin-top: -3.5px;
    border-radius: 999px;
    background: var(--accent);
    border: 1px solid var(--bg-primary);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.28);
}

/* Sliders horizontaux du mixeur, meme famille visuelle que #ambient-volume. */
#mix-master.mixer-slider,
#mix-voiceover.mixer-slider,
#mix-channel.mixer-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 140px;
    height: 2px;
    max-height: 2px;
    margin: 0;
    cursor: pointer;
    background: linear-gradient(rgba(107, 114, 128, 0.24), rgba(107, 114, 128, 0.24)) center / 100% 2px no-repeat;
    border-radius: 999px;
    border: 0;
}

#mix-master.mixer-slider::-webkit-slider-runnable-track,
#mix-voiceover.mixer-slider::-webkit-slider-runnable-track,
#mix-channel.mixer-slider::-webkit-slider-runnable-track {
    height: 2px;
    max-height: 2px;
    background: transparent;
    border: 0;
    border-radius: 999px;
}

#mix-master.mixer-slider::-webkit-slider-thumb,
#mix-voiceover.mixer-slider::-webkit-slider-thumb,
#mix-channel.mixer-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 9px;
    height: 9px;
    margin-top: -3.5px;
    border-radius: 999px;
    background: var(--accent);
    border: 1px solid var(--bg-primary);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.28);
}

#ambient-volume.mixer-slider::-moz-range-track {
    height: 2px;
    max-height: 2px;
    border-radius: 999px;
    background: transparent;
    border: 0;
}

#ambient-volume.mixer-slider::-moz-range-progress {
    height: 2px;
    max-height: 2px;
    border-radius: 999px;
    background: transparent;
    border: 0;
}

#ambient-volume.mixer-slider:hover::-moz-range-track,
#ambient-volume.mixer-slider:focus::-moz-range-track,
#ambient-volume.mixer-slider:active::-moz-range-track,
#ambient-volume.mixer-slider:hover::-moz-range-progress,
#ambient-volume.mixer-slider:focus::-moz-range-progress,
#ambient-volume.mixer-slider:active::-moz-range-progress {
    height: 2px;
    max-height: 2px;
}

#ambient-volume.mixer-slider::-moz-range-thumb {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--accent);
    border: 1px solid var(--bg-primary);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.28);
}

.ambient-scheduler {
    display: grid;
    gap: 5px;
}

.ambient-schedule-block {
    display: grid;
    gap: 5px;
}

.ambient-separator-line {
    border-top: 1px solid var(--border);
    margin-top: 2px;
}

.ambient-scheduler-head {
    display: grid;
    grid-template-columns: 116px minmax(240px, 1fr);
    align-items: center;
    gap: 6px;
}

.ambient-weekly-row input[type="time"] {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.78rem;
    padding: 4px 6px;
}

.ambient-weekly-schedule {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    position: relative;
}

.ambient-weekly-row {
    display: grid;
    grid-template-columns: 48px 78px 78px;
    align-items: center;
    gap: 6px;
    min-width: 0;
    position: relative;
}

.ambient-day-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    min-height: 30px;
}

.ambient-schedule-status {
    min-height: 16px;
    font-size: 0.74rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dashboard Ambiance : commandes au format compact valide (diffusion). */

.ambient-combo {
    position: relative;
    margin-bottom: 16px;
}

.ambient-combo-trigger {
    box-sizing: border-box;
    width: 100%;
    min-height: 30px;
    padding: 0 9px;
    border-radius: var(--ambient-compact-radius);
    border: 1px solid rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.14);
    color: var(--text-primary);
    font-size: var(--ambient-compact-font);
    font-weight: 700;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}

.ambient-combo-trigger:hover:not(:disabled) {
    border-color: rgba(16, 185, 129, 0.65);
    background: rgba(16, 185, 129, 0.22);
}

.ambient-combo-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ambient-combo-panel {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--border, #2a3150);
    border-radius: var(--ambient-compact-radius);
    background: var(--bg-card, #1f2438);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.ambient-combo-row {
    display: flex;
    align-items: stretch;
    gap: 2px;
}

.ambient-combo-option {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--ambient-compact-radius);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--ambient-compact-font);
    font-weight: 600;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.ambient-combo-option:hover,
.ambient-combo-option[aria-selected="true"] {
    background: rgba(59, 130, 246, 0.18);
}

.ambient-combo-favorite,
.ambient-combo-delete {
    flex: 0 0 auto;
    width: 26px;
    min-height: 24px;
    border: 0;
    border-radius: var(--ambient-compact-radius);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--ambient-compact-font);
    cursor: pointer;
    line-height: 1;
}

.ambient-combo-favorite {
    color: #94a3b8;
    font-size: 0.9rem;
}

.ambient-combo-favorite:hover,
.ambient-combo-favorite[aria-pressed="true"] {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

.ambient-combo-delete:hover {
    background: rgba(239, 68, 68, 0.22);
    color: #f87171;
}

.ambient-extra-panel {
    flex: 1 1 auto;
    min-height: 140px;
    margin-top: 14px;
    padding: 10px 6px;
    border: 1px dashed rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.08);
    overflow-y: auto;
    overflow-x: hidden;
    --ambient-tv-name-col: minmax(90px, 1fr);
    --ambient-tv-dot-count: 9;
    --ambient-tv-dot-col: 27px;
    --ambient-tv-volume-col: 76px;
}

.ambient-tv-list-title {
    font-size: 7px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.ambient-tv-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ambient-tv-row {
    display: grid;
    grid-template-columns: var(--ambient-tv-name-col) calc(var(--ambient-tv-dot-col) * var(--ambient-tv-dot-count)) var(--ambient-tv-volume-col);
    align-items: center;
    column-gap: 4px;
    min-width: 0;
    min-height: 26px;
}

.ambient-tv-name-wrap {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    grid-column: 1;
}

.ambient-tv-name {
    font-weight: 600;
    font-size: var(--ambient-compact-font);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ambient-tv-ip {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    flex: 0 0 auto;
}

.ambient-tv-name.ambient-tv-list-title {
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
}

.ambient-tv-name.ambient-tv-on {
    color: #4ade80;
}

.ambient-tv-name.ambient-tv-off {
    color: #f87171;
}

.ambient-tv-dots {
    display: grid;
    grid-template-columns: repeat(var(--ambient-tv-dot-count), var(--ambient-tv-dot-col));
    align-items: center;
    justify-content: start;
    justify-items: center;
    grid-column: 2;
    min-width: 0;
}

.ambient-dot-col {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ambient-tv-dot-col);
    min-width: 0;
}

.ambient-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f87171;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
    flex: 0 0 auto;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ambient-dot.ambient-dot-on {
    background: #4ade80;
    animation: ambient-dot-beat 1.4s ease-in-out infinite;
}

.ambient-dot:hover {
    transform: scale(1.35);
}

.ambient-dot.ambient-dot-locked {
    cursor: not-allowed;
    opacity: 0.45;
}

.ambient-dot.ambient-dot-locked:hover {
    transform: none;
}

.ambient-dot.ambient-dot-busy {
    transform: scale(1.65);
    animation: ambient-dot-switch 0.65s ease-in-out infinite;
    opacity: 1;
    pointer-events: none;
}

@keyframes ambient-dot-beat {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.15) inset; }
    50% { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0), 0 0 0 1px rgba(0, 0, 0, 0.15) inset; }
}

@keyframes ambient-dot-switch {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
    }
    50% {
        opacity: 0.45;
        box-shadow: 0 0 0 4px rgba(251, 191, 36, 0), 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-dot.ambient-dot-on,
    .ambient-dot.ambient-dot-busy {
        animation: none;
    }
}

.ambient-tv-volume {
    display: grid;
    grid-template-columns: repeat(3, 22px);
    align-items: center;
    justify-content: end;
    gap: 3px;
    grid-column: 3;
    width: var(--ambient-tv-volume-col);
    min-width: var(--ambient-tv-volume-col);
    margin-right: 6px;
}

.ambient-vol-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 20px;
    padding: 0;
    font-size: 0.72rem;
    line-height: 1;
    border: 1px solid var(--border, #2a3150);
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.ambient-vol-btn:hover {
    background: rgba(148, 163, 184, 0.12);
}

.ambient-vol-mute.ambient-vol-mute-active {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.5);
    background: rgba(248, 113, 113, 0.12);
}

.ambient-tv-row-header {
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.ambient-dot-label {
    display: block;
    width: 100%;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    line-height: 1.2;
}

.ambient-tv-list-empty {
    font-size: var(--ambient-compact-font);
    padding: 4px 2px;
}

.dashboard-ambient-panel .ctrl-pill,
.dashboard-ambient-panel .btn.btn-sm,
.dashboard-ambient-panel input[type="time"] {
    box-sizing: border-box;
    height: var(--ambient-compact-h);
    min-height: var(--ambient-compact-h);
    padding: 0 7px;
    border-radius: var(--ambient-compact-radius);
    font-size: var(--ambient-compact-font);
    font-weight: 600;
    line-height: 1.2;
}

.dashboard-ambient-panel .btn.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border, #2a3150);
    background: rgba(107, 114, 128, 0.12);
    color: var(--text, #e5e7eb);
    box-shadow: none;
}

.dashboard-ambient-panel .btn.btn-sm:hover:not(:disabled),
.dashboard-ambient-panel .ctrl-pill:hover:not(:disabled) {
    border-color: var(--border-focus);
    background: rgba(59, 130, 246, 0.10);
}

.dashboard-ambient-panel .ambient-controls {
    gap: 6px;
    margin-bottom: 14px;
}

.dashboard-ambient-panel .ambient-controls #ambient-play {
    width: 100%;
    min-width: 0;
}

.dashboard-ambient-panel .ambient-loop,
.dashboard-ambient-panel .ambient-volume-row,
.dashboard-ambient-panel .ambient-day-label {
    font-size: var(--ambient-compact-font);
}

.dashboard-ambient-panel .ambient-volume-row {
    padding-top: 8px;
    border-top: 1px solid var(--border);
    margin-bottom: 8px;
    position: relative;
    top: -3px;
}

.dashboard-ambient-panel .ambient-toggles {
    gap: 6px;
    margin-bottom: 8px;
}

.dashboard-ambient-panel .ambient-toggles .btn.btn-sm {
    box-sizing: border-box;
    width: 100%;
    height: var(--ambient-compact-h);
    min-height: var(--ambient-compact-h);
    padding: 0 4px;
    justify-content: center;
    border-radius: var(--ambient-compact-radius);
    font-size: var(--ambient-compact-font);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.dashboard-ambient-panel .ambient-toggle-btn[aria-pressed="true"] {
    border-color: rgba(16, 185, 129, 0.55);
    background: rgba(16, 185, 129, 0.22);
    color: #d1fae5;
}

.dashboard-ambient-panel .ambient-scheduler {
    position: relative;
    gap: 5px;
    margin-top: 15px;
    padding-top: 0;
    padding-bottom: 8px;
}

.dashboard-ambient-panel .ambient-scheduler-head .btn.btn-sm {
    width: auto;
    min-width: 86px;
}

.dashboard-ambient-panel #ambient-schedule-enabled {
    min-width: 116px;
}

.dashboard-ambient-panel #ambient-schedule-save {
    min-width: 94px;
}

.dashboard-ambient-panel .ambient-coran {
    min-width: 0;
    align-self: center;
}

.dashboard-ambient-panel .ambient-coran-fields {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
    color: var(--text, #e5e7eb);
    font-size: var(--ambient-compact-font);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.dashboard-ambient-panel .ambient-coran-fields label:first-child {
    margin-left: auto;
}

.dashboard-ambient-panel .ambient-coran-fields label:nth-child(2) {
    margin-left: 11px;
}

.dashboard-ambient-panel .ambient-coran-fields label:last-child {
    margin-left: 11px;
}

.dashboard-ambient-panel .ambient-coran-fields label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.dashboard-ambient-panel .ambient-coran-fields input {
    height: 22px;
    box-sizing: border-box;
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.86);
    color: var(--text, #e5e7eb);
    font: inherit;
    font-size: var(--ambient-compact-font);
    font-weight: 700;
    padding: 0 6px;
}

.dashboard-ambient-panel .ambient-coran-fields input[type="time"] {
    width: 74px;
    padding: 0 2px 0 6px;
}

.dashboard-ambient-panel .ambient-coran-fields input[type="text"] {
    width: 62px;
    text-align: center;
}

.dashboard-ambient-panel .ambient-coran-combo {
    position: relative;
    min-width: 0;
    width: 100%;
    z-index: 30;
}

.dashboard-ambient-panel .ambient-coran-combo-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    /* Un <button> conserve la largeur min de son texte meme quand le libelle
       interne est en ellipsis : sans ces deux lignes il continue de reclamer
       la largeur du nom de piste complet et repousse la colonne. */
    min-width: 0;
    overflow: hidden;
    height: 22px;
    min-height: 22px;
    box-sizing: border-box;
    border: 1px solid rgba(20, 184, 166, 0.7);
    border-radius: 3px;
    background: rgba(6, 78, 59, 0.72);
    color: #f8fafc;
    font-size: var(--ambient-compact-font);
    font-weight: 700;
    padding: 0 8px;
    cursor: pointer;
}

.dashboard-ambient-panel .ambient-coran-combo-trigger span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-ambient-panel .ambient-coran-combo-caret {
    color: #bfdbfe;
    flex: 0 0 auto;
}

.dashboard-ambient-panel .ambient-coran-track-selector {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 3px);
    display: grid;
    gap: 3px;
    max-height: 148px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid rgba(20, 184, 166, 0.6);
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.98);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.dashboard-ambient-panel .ambient-coran-track-selector[hidden] {
    display: none;
}

.dashboard-ambient-panel .ambient-coran-track-row {
    display: grid;
    grid-template-columns: 18px 24px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    min-height: var(--ambient-compact-h);
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: var(--ambient-compact-radius);
    background: rgba(15, 23, 42, 0.72);
    color: var(--text, #e5e7eb);
    font-size: var(--ambient-compact-font);
    font-weight: 600;
    padding: 0 5px;
}

.dashboard-ambient-panel .ambient-coran-track-row input {
    width: 13px;
    height: 13px;
    margin: 0;
}

.dashboard-ambient-panel .ambient-coran-track-order {
    color: #93c5fd;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.dashboard-ambient-panel .ambient-coran-track-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-ambient-panel .ambient-coran-track-duration {
    color: var(--text-secondary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dashboard-ambient-panel .ambient-coran-track-empty {
    color: var(--text-secondary);
    font-size: var(--ambient-compact-font);
}

.dashboard-ambient-panel .ambient-weekly-schedule {
    gap: 3px;
}

.dashboard-ambient-panel .ambient-day-label {
    min-height: var(--ambient-compact-h);
}

.dashboard-ambient-panel .library-mixer.library-mixer-v2 {
    gap: 8px;
    padding: 6px 0 0;
    margin-top: auto;
}

.dashboard-ambient-panel .library-mixer.library-mixer-v2 .library-mixer-col {
    min-height: 156px;
    padding: 6px 5px;
}

.dashboard-ambient-panel .mixer-col-with-vu .mixer-col-body,
.dashboard-ambient-panel .mixer-col-body-no-vu {
    min-height: 112px;
}

.dashboard-ambient-panel .library-mixer.library-mixer-v2 .vu-meter.vu-meter-vertical,
.dashboard-ambient-panel .library-mixer .console-fader {
    height: 104px;
    min-height: 104px;
}

/* Couleurs par fader (comme console) */
#mix-master.mixer-slider-vertical::-webkit-slider-runnable-track { border-color: rgba(59,130,246,0.35); }
#mix-master.mixer-slider-vertical::-moz-range-track { border-color: rgba(59,130,246,0.35); }

#mix-channel.mixer-slider-vertical::-webkit-slider-runnable-track { border-color: rgba(168,85,247,0.35); }
#mix-channel.mixer-slider-vertical::-moz-range-track { border-color: rgba(168,85,247,0.35); }

#mix-voiceover.mixer-slider-vertical::-webkit-slider-runnable-track { border-color: rgba(16,185,129,0.35); }
#mix-voiceover.mixer-slider-vertical::-moz-range-track { border-color: rgba(16,185,129,0.35); }

#volume-slider.mixer-slider-vertical::-webkit-slider-runnable-track { border-color: rgba(245,158,11,0.35); }
#volume-slider.mixer-slider-vertical::-moz-range-track { border-color: rgba(245,158,11,0.35); }

.vu-meter-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.vu-meter {
    flex: 0 1 120px;
    width: 120px;
    max-width: 140px;
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
}

.vu-level {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--success), var(--warning), var(--danger));
    border-radius: 4px;
    transition: width 0.1s ease;
}

/* ─── SESSION INFO ────────────────────────── */

.info-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    height: var(--dashboard-compact-h, 22px);
    min-height: var(--dashboard-compact-h, 22px);
    padding: 0 7px;
    border-radius: var(--dashboard-compact-radius, 3px);
    border: 1px solid var(--border, #2a3150);
    background: rgba(107, 114, 128, 0.12);
    white-space: nowrap;
    line-height: 1.2;
}

.session-info .info-row-timer {
    width: auto;
}
.session-info .info-row-segment {
    min-width: 86px;
}
.session-info .info-row-segment .info-value {
    min-width: 3ch;
    text-align: right;
}
.session-info .info-row-freeze {
    min-width: 92px;
}
.session-info .info-row-freeze .info-value {
    min-width: 46px;
    text-align: left;
}

.info-label {
    font-size: var(--dashboard-compact-font, 0.7rem);
    color: var(--text-muted);
}
.info-value {
    font-size: var(--dashboard-compact-font, 0.7rem);
    font-weight: 600;
}
.timer {
    font-family: 'Courier New', monospace;
    font-size: var(--dashboard-compact-font, 0.7rem);
    color: var(--accent);
}

.session-info .dashboard-stream-toggle {
    margin-left: auto;
}

.ctrl-pill {
    appearance: none;
    border: 1px solid var(--border);
    background: rgba(107, 114, 128, 0.12);
    color: var(--text-primary);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.05s;
    user-select: none;
}
.ctrl-pill:hover {
    border-color: var(--border-focus);
    background: rgba(59, 130, 246, 0.10);
}
.ctrl-pill:active { transform: translateY(1px); }
.ctrl-pill:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(40%);
}
.ctrl-pill:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Variantes couleur (même logique visuelle que le toggle streaming) */
.ctrl-pill-start {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.45);
}
.ctrl-pill-start:hover {
    background: rgba(16, 185, 129, 0.20);
    border-color: rgba(16, 185, 129, 0.60);
}
.ctrl-pill-pause {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.45);
}
.ctrl-pill-pause:hover {
    background: rgba(245, 158, 11, 0.20);
    border-color: rgba(245, 158, 11, 0.60);
}
.ctrl-pill-resume {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.45);
}
.ctrl-pill-resume:hover {
    background: rgba(59, 130, 246, 0.20);
    border-color: rgba(59, 130, 246, 0.60);
}
.ctrl-pill-secondary {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.36);
}
.ctrl-pill-secondary:hover {
    background: rgba(148, 163, 184, 0.18);
    border-color: rgba(148, 163, 184, 0.52);
}
.ctrl-pill-stop {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.45);
}
.ctrl-pill-stop:hover {
    background: rgba(239, 68, 68, 0.20);
    border-color: rgba(239, 68, 68, 0.60);
}
/* Preview toggle : actif = vert, inactif = gris discret */
.ctrl-pill-preview {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.40);
    font-size: 0.82rem;
    padding: 8px 12px;
}
.ctrl-pill-preview:hover {
    background: rgba(16, 185, 129, 0.20);
    border-color: rgba(16, 185, 129, 0.60);
}
.ctrl-pill-preview.preview-off {
    background: rgba(107, 114, 128, 0.10);
    border-color: rgba(107, 114, 128, 0.35);
    color: var(--text-muted, #6b7280);
}
.ctrl-pill-preview.preview-off:hover {
    background: rgba(107, 114, 128, 0.18);
    border-color: rgba(107, 114, 128, 0.55);
}

.stream-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #991b1b;
    color: #ffffff;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.stream-toggle.stream-on {
    background: #047857;
    border-color: rgba(52, 211, 153, 0.85);
    color: #ffffff;
}

.stream-toggle.stream-off {
    background: #991b1b;
    border-color: rgba(248, 113, 113, 0.85);
    color: #ffffff;
}

.stream-toggle.stream-on:hover:not(:disabled) {
    background: #059669;
    border-color: rgba(52, 211, 153, 0.8);
}

.stream-toggle.stream-off:hover:not(:disabled) {
    background: #b91c1c;
    border-color: rgba(248, 113, 113, 0.85);
}

.dashboard-stream-toggle {
    box-sizing: border-box;
    justify-content: center;
    min-width: 112px;
    color: var(--text, #e5e7eb);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}
.dashboard-stream-toggle:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    user-select: none;
}

/* On masque la checkbox native, mais sans casser le focus clavier. */
.toggle-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    pointer-events: none;
}

/* Slider OFF (gris clair, bien visible sur fond sombre) */
.toggle-slider,
.toggle-switch {
    flex-shrink: 0;                  /* jamais compresse par le texte */
    display: inline-block;
    width: 44px;
    height: 24px;
    background: #6b7280;             /* gris OFF (slate-500) */
    border-radius: 12px;
    position: relative;
    border: 1px solid #4b5563;
    transition: background 0.2s, border-color 0.2s;
    vertical-align: middle;
}

/* Boule blanche */
.toggle-slider::after,
.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
    transition: transform 0.2s;
}

/* ON : bleu accent */
.toggle-label input[type="checkbox"]:checked ~ .toggle-slider,
.toggle-label input[type="checkbox"]:checked ~ .toggle-switch,
input[type="checkbox"]:checked + .toggle-slider,
input[type="checkbox"]:checked + .toggle-switch {
    background: var(--accent);
    border-color: var(--accent);
}
.toggle-label input[type="checkbox"]:checked ~ .toggle-slider::after,
.toggle-label input[type="checkbox"]:checked ~ .toggle-switch::after,
input[type="checkbox"]:checked + .toggle-slider::after,
input[type="checkbox"]:checked + .toggle-switch::after {
    transform: translateX(20px);
}

/* Focus clavier visible */
.toggle-label input[type="checkbox"]:focus-visible ~ .toggle-slider,
.toggle-label input[type="checkbox"]:focus-visible ~ .toggle-switch {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Desactive */
.toggle-label input[type="checkbox"]:disabled ~ .toggle-slider,
.toggle-label input[type="checkbox"]:disabled ~ .toggle-switch {
    opacity: 0.5;
    cursor: not-allowed;
}

.stream-url {
    font-size: 0.75rem;
    color: #93c5fd;
    font-family: monospace;
}

/* ─── FORMULAIRES ────────────────────────── */

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

input[type="text"],
input[type="date"],
input[type="number"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 0.9rem;
    transition: var(--transition);
}

/* ─── DATE PICKER NATIF SOMBRE ───────────────
   color-scheme: dark  →  le popup calendrier
   du navigateur utilise lui aussi le thème sombre.
   L'icône 📅 est inversée pour être visible sur
   le fond dark de l'input.
   ─────────────────────────────────────────── */
input[type="date"] {
    color-scheme: dark;
    cursor: pointer;
    padding-right: 10px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1); /* force icône blanche quelle que soit la version Chrome */
    cursor: pointer;
    opacity: 0.8;
    padding: 3px;
    transition: opacity 0.15s ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

textarea { resize: vertical; min-height: 80px; }

.input-search {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 0.9rem;
    width: 100%;
}

/* Auto-complétion style "select" (bibliothèque) */
.ac-input-wrap { position: relative; width: 100%; }
.ac-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    max-height: 240px;
    overflow: auto;
    padding: 6px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}
.ac-item {
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid transparent;
}
.ac-item:hover,
.ac-item.is-active {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.35);
}
.ac-empty {
    padding: 8px 10px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Auto-complétion dans la modale fiche patient : au-dessus du contenu */
#modal-patient .ac-list {
    z-index: 1200;
}

.input-filter {
    padding: 8px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 0.85rem;
    min-width: 0;
}

.input-filter.is-placeholder {
    color: var(--text-muted);
}

/* Date input : largeur suffisante pour afficher jj/mm/aaaa
   sans que l'annee soit tronquee (sinon Chrome affiche "aa" ou "aaa"). */
.input-filter-date {
    min-width: 140px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.library-filters .input-filter-date,
.library-filters .input-dob-fr {
    flex: 0 0 140px;          /* plus compact : laisse de la place au docteur */
}

/* Dossier patient — chemin cliquable */
.folder-path {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 8px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 4px;
    font-family: var(--font-mono, Consolas, monospace);
    font-size: 0.72rem;
    color: #93c5fd;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-path:hover {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.5);
    color: #bfdbfe;
}

.folder-path::before {
    content: "🗂";
    font-size: 0.85rem;
}

/* ─── LIBRARY ────────────────────────────── */

.library-filters {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Bibliothèque vidéo : garder Docteur + Date sur une seule ligne */
.library-filters .filter-row {
    flex-wrap: nowrap;
}

.input-filter-medecin {
    flex: 1 1 260px;          /* occupe la fin de ligne (aligné au champ du dessus) */
    width: 100%;
    min-width: 0;
    max-width: none;
}


/* ─── CARD BIBLIOTHÈQUE : prend tout l'espace restant du panel ── */

.card-library {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* overflow: hidden hérité de .card → borde-radius préservé,
       scrollbar confinée au video-grid intérieur */
}

/* Dashboard : mixage/ambiance seul dans la colonne, il descend jusqu'en bas. */
.dashboard-audio-mixer {
    margin-top: 0;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

.card-library .card-header   { flex-shrink: 0; }
.card-library .library-filters { flex-shrink: 0; }

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    padding: 12px 16px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.video-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
}

.video-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.video-card .thumb {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background: #000;
}

.video-card .video-info {
    padding: 8px 10px;
}

.video-card .patient-name {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-card .video-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ─── BIBLIOTHÈQUE — VUE DOSSIERS PATIENTS ── */

.video-grid.folder-view {
    display: flex;
    flex-direction: column;
    gap: 6px;
    grid-template-columns: unset;
}

.patient-folder {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: var(--transition);
}

.patient-folder.open {
    border-color: var(--accent);
}

.patient-folder-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
}

.patient-folder-header:hover {
    background: var(--bg-card-hover);
}

.folder-icon { font-size: 1.25rem; flex-shrink: 0; }

.folder-info { flex: 1; min-width: 0; }

.folder-name {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.folder-chevron {
    font-size: 0.7rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: var(--transition);
}

.patient-folder-content {
    display: none;
    border-top: 1px solid var(--border);
    padding: 12px;
}

.patient-folder-content.open { display: block; }

.session-group { margin-bottom: 14px; }
.session-group:last-child { margin-bottom: 0; }

.session-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

/* Bouton WhatsApp par session */
.btn-wa-session {
    margin-left: auto;
    flex-shrink: 0;
    background: rgba(37,211,102,0.12);
    border: 1px solid rgba(37,211,102,0.3);
    color: #25d366;
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1.4;
}

.btn-wa-session:hover {
    background: rgba(37,211,102,0.22);
}

.segment-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}

.video-card-sm .video-info { padding: 5px 7px; }

/* ─── MODAL ──────────────────────────────── */

.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 90%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

/* Fiche patient : taille fixe + layout stable (et dropdowns d'auto-complétion non coupés) */
#modal-patient .modal-content {
    /* Taille homogène (fixe) */
    height: 600px;
    max-height: 600px;
    overflow: hidden;             /* rien ne déborde hors de la fenêtre */
    display: flex;
    flex-direction: column;
}

/* Fiche patient : revenir au centrage standard */
#modal-patient.modal {
    /* Détail uniquement : garder le centrage normal, mais éviter de toucher la topbar */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Espace sous la topbar (sinon la modale "touche") */
    padding-top: calc(var(--topbar-height, 64px) + 16px);
    padding-bottom: 24px;
    box-sizing: border-box;
}
#modal-patient .modal-body {
    flex: 1;
    overflow: hidden;             /* layout figé : rien ne pousse/scroll dans la modale */
    display: flex;
    flex-direction: column;
}

/* Observations : plus grand, pas de resize (layout fixe) */
#modal-patient #patient-observation {
    height: 250px;                /* réduit : laisse apparaître "Panoramique..." */
    min-height: 250px;
    max-height: 250px;
    resize: none;
}

/* Compacter légèrement la fiche patient pour tenir en hauteur fixe sans scroll */
#modal-patient .form-group { margin-bottom: 12px; }
#modal-patient .form-group label { margin-bottom: 4px; }
#modal-patient .text-muted { margin-top: 4px; }

/* Panneaux suggestions CRM : rester contenus dans la modale (scroll interne si besoin) */
#modal-patient .patient-dup-wrap {
    max-height: 120px;            /* ne doit pas pousser le DICOM hors fenêtre */
    overflow: auto;
}

/* FICHES CRM PROCHES : affichage en overlay (ne modifie jamais le layout) */
#modal-patient #patient-dup-wrap {
    position: fixed;              /* hors du flux + non rogné par overflow */
    z-index: 1300;
    display: none;                /* activé par JS */
    margin: 0 !important;
    width: auto;                  /* fixé dynamiquement par JS */
    left: 0;
    top: 0;
}
#modal-patient .patient-dup-list {
    max-height: 104px;
    overflow: auto;
}

/* Auto-complétion dans la modale : liste contenue */
#modal-patient .ac-input-wrap { position: relative; }
#modal-patient .ac-list {
    max-height: 180px;
    overflow: auto;
}

/* Descendre Import DICOM : juste au-dessus du footer */
#modal-patient .dicom-section {
    margin-top: auto;
    padding-top: 6px;
    margin-bottom: 0;
    transform: translateY(-18px); /* remonte visuellement sans changer les dimensions */
}

/* Fiche patient : bouton "Sélect. fichiers" au style pill (sans toucher au reste) */
#modal-patient #dicom-files::file-selector-button {
    border: 1px solid var(--border);
    background: rgba(107, 114, 128, 0.12);
    color: var(--text-primary);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.05s;
    margin-right: 10px;
}
#modal-patient #dicom-files::file-selector-button:hover {
    border-color: var(--border-focus);
    background: rgba(59, 130, 246, 0.10);
}
#modal-patient #dicom-files::file-selector-button:active {
    transform: translateY(1px);
}

.modal-large { max-width: 900px; }

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.modal-header h2 { font-size: 1.1rem; }

.modal-close {
    width: 36px; height: 36px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 50%;
    transition: var(--transition);
}

.modal-close:hover { background: var(--bg-input); color: var(--text-primary); }

/* Fiche patient : bouton close style pill (cohérent avec le projet) */
#modal-patient .modal-close-pill {
    border: 1px solid var(--border);
    background: rgba(107, 114, 128, 0.12);
    color: #fecaca;
    border-radius: 10px;
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#modal-patient .modal-close-pill:hover {
    border-color: rgba(239, 68, 68, 0.55);
    background: rgba(239, 68, 68, 0.14);
    color: #fff;
}
#modal-patient .modal-close-pill:active { transform: translateY(1px); }
#modal-patient .modal-close-pill:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.modal-body { padding: 20px 24px; }
.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

/* Fiche patient : moins d’espace en bas (évite le léger scroll sur la modale entière) */
#modal-patient .modal-header {
    padding: 16px 22px;
}
#modal-patient .modal-body {
    padding: 16px 22px 14px;
}
#modal-patient .modal-footer {
    padding: 8px 20px 9px;
    min-height: 0;
}

/* ─── Feedback inline fiche patient (serveur) ──────────────────────── */
/* Positionné entre .modal-body et .modal-footer (hors overflow:hidden du body). */
.patient-form-feedback {
    margin: 0;
    padding: 9px 20px;
    border-radius: 0;
    font-size: 0.88rem;
    display: none;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}
.patient-form-feedback.pfb-error {
    display: block;
    background: var(--danger-bg, rgba(239,68,68,.12));
    color: var(--danger, #ef4444);
    border: 1px solid var(--danger, #ef4444);
}
.patient-form-feedback.pfb-warning {
    display: block;
    background: var(--warning-bg, rgba(234,179,8,.12));
    color: var(--warning, #eab308);
    border: 1px solid var(--warning, #eab308);
}
.patient-form-feedback.pfb-success {
    display: block;
    background: var(--success-bg, rgba(34,197,94,.12));
    color: var(--success, #22c55e);
    border: 1px solid var(--success, #22c55e);
}

#modal-patient .form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 560px) {
    #modal-patient .form-row-2 {
        grid-template-columns: 1fr;
    }
}

/* Anti-doublons CRM — suggestions sous le champ Nom */
.patient-dup-wrap {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-input);
    max-height: 200px;
    overflow: auto;
}
.patient-dup-hint {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.patient-dup-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.patient-dup-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}
.patient-dup-item:hover,
.patient-dup-item:focus-visible {
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.04);
}
.patient-dup-item.active {
    border-color: var(--accent);
    background: rgba(74, 222, 128, 0.08);
}
.patient-dup-line {
    font-size: 0.78rem;
    font-weight: 600;
}
.patient-dup-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ─── VIDEO PLAYER ────────────────────────── */

.video-player {
    width: 100%;
    max-height: 60vh;
    background: #000;
    border-radius: var(--radius-sm);
}

.player-segments {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.player-segments .segment-btn {
    padding: 6px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition);
}

.player-segments .segment-btn:hover,
.player-segments .segment-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ─── DICOM ──────────────────────────────── */

.dicom-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.dicom-preview img {
    width: 80px; height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

/* ─── UTILITIES ──────────────────────────── */

.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.text-error { color: var(--danger); font-size: 0.85rem; }

small.text-muted { display: block; margin-top: 4px; font-size: 0.75rem; }

.source-selector {
    display: flex;
    gap: 6px;
    align-items: center;
}

.source-selector select {
    width: auto;
    min-width: 200px;
}

/* Bouton ON/OFF caméra : même gabarit que le select */
.source-selector #btn-video-toggle.ctrl-pill {
    min-width: 54px;
}

/* ─── FOOTER ─────────────────────────────── */

.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--footer-bottom);
    height: var(--footer-height);
    padding: 5px 8px;
    font-size: 0.7rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
    z-index: 20;
    pointer-events: none;
}
.footer-version {
    position: absolute;
    right: 12px;
    color: var(--text-muted);
    opacity: 0.75;
}

/* ─── MODAL DIFFUSION ANNONCE (file streamer) ─── */

#modal-filestream.modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
#modal-filestream .modal-content {
    background: var(--bg-secondary, #161b2e);
    border: 1px solid var(--border, #2a3150);
    border-radius: 10px;
    width: min(700px, 92vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#modal-filestream .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, #2a3150);
}
#modal-filestream .modal-header h2 { margin: 0; font-size: 1.1rem; }
#modal-filestream .modal-close {
    background: transparent; color: var(--text, #e5e7eb);
    border: none; font-size: 1.4rem; cursor: pointer;
}
#modal-filestream .modal-body { padding: 14px 18px; overflow-y: auto; }

.video-picker-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0 12px; font-size: 0.9rem;
    color: var(--text-muted, #9ca3af);
    border-bottom: 1px solid var(--border, #2a3150);
    margin-bottom: 10px;
}
.video-picker-breadcrumb:empty {
    display: none;
}
.video-picker-breadcrumb .crumb-link {
    cursor: pointer; color: var(--accent, #3b82f6); text-decoration: none;
}
.video-picker-breadcrumb button.crumb-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    color: var(--accent, #3b82f6);
    text-decoration: none;
}
.video-picker-breadcrumb button.crumb-link:hover { text-decoration: underline; }
.video-picker-breadcrumb .crumb-link:hover { text-decoration: underline; }
.video-picker-breadcrumb .crumb-active { color: var(--text, #e5e7eb); font-weight: 500; }
.video-picker-breadcrumb .crumb-sep    { opacity: 0.5; }

.media-folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px; padding: 4px 0;
}
.media-folder-card {
    background: var(--bg-card, #1a2035);
    border: 1px solid var(--border, #2a3150);
    border-radius: 10px;
    padding: 20px 12px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.15s, background 0.15s;
}
.media-folder-card:hover {
    border-color: var(--accent, #3b82f6);
    transform: translateY(-2px);
}
.media-folder-icon  { font-size: 2.4rem; line-height: 1; margin-bottom: 8px; }
.media-folder-label { font-size: 0.88rem; font-weight: 600; }
.media-folder-count { font-size: 0.75rem; color: var(--text-muted, #9ca3af); margin-top: 4px; }

.media-file-list { display: flex; flex-direction: column; gap: 2px; }
.media-file-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px; border-radius: 6px;
    cursor: pointer; transition: background 0.1s, border-color 0.15s;
    border: 1px solid transparent;
}
.media-file-row:hover { background: var(--bg-card, #1a2035); }
/* Fichier en cours de lecture : surbrillance verte */
.media-file-row.fs-file-playing {
    background: linear-gradient(90deg, rgba(34,197,94,0.14), rgba(34,197,94,0.04));
    border-color: rgba(34,197,94,0.45);
}
/* Fichier muté dans la sélection */
.media-file-row.fs-file-muted { opacity: 0.65; }
.media-file-icon { font-size: 1.05rem; flex-shrink: 0; }
.media-file-name { flex: 1; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-file-size { font-size: 0.72rem; color: var(--text-muted, #9ca3af); white-space: nowrap; }

/* ─── Bibliothèque diffusion : grille miniatures ─────────────────── */
.media-file-browser {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.media-file-toolbar {
    flex-shrink: 0;
    padding-bottom: 8px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--border, #2a3150);
}
.media-file-toolbar .media-file-select-all {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
    opacity: 0.92;
}
.media-file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
    gap: 12px;
}
.media-file-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    border: 1px solid var(--border, #2a3150);
    background: var(--bg-secondary, #111827);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.media-file-card:hover {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.media-file-card.fs-file-playing {
    border-color: rgba(34, 197, 94, 0.55);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25);
}
.media-file-card.fs-file-muted { opacity: 0.68; }
.media-file-card-hit {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    cursor: pointer;
    margin: 0;
}
.media-file-card-hit input[type="checkbox"] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--accent, #3b82f6);
}
.media-file-card-thumb-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0a0e1a;
    overflow: hidden;
}
.media-file-card-thumb-wrap.thumb-error .media-file-card-thumb {
    visibility: hidden;
}
.media-file-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.media-file-card-thumb-fallback {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: linear-gradient(145deg, #1e293b, #0f172a);
    pointer-events: none;
}
.media-file-card-thumb-wrap.thumb-error .media-file-card-thumb-fallback {
    display: flex;
}
.media-file-card-playing-badge {
    display: none;
    position: absolute;
    top: 7px;
    right: 7px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.92);
    color: #fff;
    font-size: 0.72rem;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 3;
}
.media-file-card.fs-file-playing .media-file-card-playing-badge {
    display: flex;
}
/* Chrono "timelapse" sur la carte de la vidéo en cours de diffusion */
.media-file-card-timer {
    display: none;
    position: absolute;
    bottom: 7px;
    left: 7px;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.78);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    z-index: 2;
}
.media-file-card-body {
    padding: 8px 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.media-file-card-name {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.media-file-card-meta {
    font-size: 0.66rem;
    color: var(--text-muted, #9ca3af);
    line-height: 1.25;
}
.media-file-card-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0 8px 8px;
}
.media-file-card-actions .fs-mute-btn,
.media-file-card-actions .fs-rename-btn {
    min-width: 2.25rem;
}
/* Badge mute dans la queue du bas */
.fs-queue-mute-badge { font-size: 0.8rem; flex-shrink: 0; }

.filestream-current {
    background: linear-gradient(90deg, rgba(34,197,94,0.15), rgba(34,197,94,0.05));
    border: 1px solid rgba(34,197,94,0.4);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
}
.filestream-live {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 0.88rem;
}
.filestream-selected {
    margin-top: 14px; padding: 12px;
    background: var(--bg-card, #1a2035);
    border: 1px solid var(--border, #2a3150);
    border-radius: 8px;
    display: flex; flex-direction: column; gap: 8px;
}
.filestream-selected-top {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.filestream-selected-info { flex: 1; font-size: 0.88rem; }
.filestream-loop-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.85rem; cursor: pointer; white-space: nowrap;
}

/* ─── File queue list ─────────────────────────────────────────── */
.filestream-queue-list {
    display: flex; flex-direction: column; gap: 3px;
    max-height: 200px; overflow-y: auto;
    padding-right: 4px;
}
.fs-queue-empty {
    display: block; text-align: center;
    padding: 6px; font-size: 0.82rem;
}
.fs-queue-item {
    display: flex; align-items: center; gap: 7px;
    padding: 5px 8px; border-radius: 5px;
    background: var(--bg-primary, #0f1420);
    border: 1px solid var(--border, #2a3150);
    font-size: 0.84rem; min-width: 0;
    transition: border-color 0.15s, background 0.15s;
}
.fs-queue-item.fs-queue-active {
    background: linear-gradient(90deg, rgba(34,197,94,0.15), rgba(34,197,94,0.04));
    border-color: rgba(34,197,94,0.5);
}
.fs-queue-item.fs-queue-muted { opacity: 0.6; }
.fs-queue-num {
    color: var(--text-muted, #9ca3af); font-size: 0.72rem;
    min-width: 16px; text-align: right; flex-shrink: 0;
}
.fs-queue-icon { font-size: 0.92rem; flex-shrink: 0; }
.fs-queue-name {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text, #e5e7eb);
}
.fs-mute-btn, .fs-remove-btn {
    flex-shrink: 0;
    padding: 1px 5px !important;
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
    min-width: 26px !important;
    height: auto !important;
    text-align: center;
}
/* Bouton mute désactivé (fichier non sélectionné) : invisible mais conserve l'espace */
.fs-mute-btn:disabled {
    opacity: 0.18;
    cursor: default;
}
.fs-mute-btn.active { opacity: 0.5; }
.filestream-help {
    flex-basis: 100%;
    margin: 0;
    padding: 8px 10px;
    background: rgba(99, 102, 241, 0.08);
    border-left: 3px solid rgba(99, 102, 241, 0.55);
    border-radius: 4px;
    color: var(--text-secondary, #cbd5e1);
    font-size: 0.78rem;
    line-height: 1.4;
}
.filestream-help strong { color: #c7d2fe; }
.crm-empty { text-align: center; color: var(--text-muted, #9ca3af); padding: 16px; }

/* ─── MULTI-TV (diffusion fichier) ────────────────────────────── */

.filestream-tv-section { margin-bottom: 16px; }

/* En-tête colonnes diffusion : titre fixe + rangée d’outils compacte */
.filestream-tv-header,
.filestream-lib-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    margin-bottom: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border, #2a3150);
    background: var(--bg-card, #1a2035);
    position: relative;
    z-index: 1;
}

/* Zone défilante sous l’en-tête (≈12 cartes TV + formulaire ajout) */
.filestream-tv-scroll {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 10px;
    margin-right: -4px;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.filestream-tv-scroll::-webkit-scrollbar {
    width: 8px;
}
.filestream-tv-scroll::-webkit-scrollbar-thumb {
    background: rgba(107, 114, 128, 0.35);
    border-radius: 999px;
}
.filestream-tv-scroll::-webkit-scrollbar-track {
    background: rgba(15, 20, 32, 0.35);
    border-radius: 999px;
}
.filestream-tv-title-row,
.filestream-lib-title-row {
    min-height: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
}
.filestream-tv-title-row .tv-scan-summary {
    max-width: none;
    min-height: auto;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    gap: 5px;
    position: relative;
    top: 3px;
}
.filestream-lib-tabs {
    display: flex;
    gap: 4px;
    margin-left: 0;
    flex: 0 0 auto;
}
.filestream-tv-heading,
.filestream-lib-heading {
    margin: 0;
    font-family: var(--font, inherit);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--text, #e5e7eb);
}
.filestream-tv-toolbar,
.filestream-lib-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.filestream-tv-row,
.filestream-lib-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-height: 22px;
}
.filestream-tv-row--tizen {
    flex-wrap: wrap;
    row-gap: 6px;
}
.filestream-tv-stop-all {
    width: 22px;
    min-width: 22px;
    padding: 0 !important;
}
/* Toggle streaming aligné avec les boutons (sans margin-left:auto du header) */
.filestream-stream-toggle.stream-toggle {
    box-sizing: border-box;
    flex: 0 0 112px;
    width: 112px;
    min-width: 112px;
    height: 22px;
    min-height: 22px;
    margin-left: 0;
    padding: 0 7px;
    gap: 6px;
    justify-content: center;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text, #e5e7eb);
    cursor: pointer;
    white-space: nowrap;
}
.filestream-stream-toggle.stream-on {
    color: #ffffff;
}
.filestream-stream-toggle.stream-off {
    color: #ffffff;
}
.filestream-stream-toggle:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Diffusion: toolbar TV (boutons + champs) plus fins, style dashboard */
.filestream-tv-toolbar .btn.btn-sm,
.filestream-tv-toolbar label.btn.btn-sm,
.filestream-lib-toolbar .btn.btn-sm,
.filestream-lib-toolbar label.btn.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    padding: 0 7px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    height: 22px;
    min-height: 22px;
    box-sizing: border-box;
}
.filestream-tv-toolbar .btn.btn-sm,
.filestream-lib-toolbar .btn.btn-sm {
    background: rgba(107, 114, 128, 0.12);
    border: 1px solid var(--border, #2a3150);
    color: var(--text, #e5e7eb);
    box-shadow: none;
}
.filestream-tv-toolbar .btn.btn-sm.btn-danger,
.filestream-lib-toolbar .btn.btn-sm.btn-danger {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fff;
}
.filestream-tv-toolbar .btn.btn-sm.btn-danger:hover:not(:disabled),
.filestream-lib-toolbar .btn.btn-sm.btn-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.20);
    border-color: rgba(239, 68, 68, 0.60);
}
.filestream-tv-toolbar .btn.btn-sm:active,
.filestream-lib-toolbar .btn.btn-sm:active {
    transform: translateY(1px);
}
.filestream-tv-toolbar .btn.btn-sm:hover:not(:disabled),
.filestream-tv-toolbar label.btn.btn-sm:hover:not(:disabled),
.filestream-lib-toolbar .btn.btn-sm:hover:not(:disabled),
.filestream-lib-toolbar label.btn.btn-sm:hover:not(:disabled) {
    border-color: var(--border-focus);
    background: rgba(59, 130, 246, 0.10);
}

.filestream-tv-toolbar .btn.btn-tizen {
    background: rgba(168, 85, 247, 0.14);
    border-color: rgba(168, 85, 247, 0.55);
    border-radius: 3px;
    color: #f5f3ff;
    box-shadow: none;
}
.filestream-tv-toolbar .btn.btn-tizen:hover:not(:disabled) {
    background: rgba(168, 85, 247, 0.20);
    border-color: rgba(168, 85, 247, 0.70);
    box-shadow: none;
}

.filestream-tv-toolbar label.btn.btn-sm {
    gap: 6px;
    cursor: default;
}
.filestream-tv-field-label {
    white-space: nowrap;
    font-weight: 600;
}
.filestream-tv-toolbar label.btn.btn-sm #tizen-retries,
.filestream-tv-toolbar label.btn.btn-sm #tizen-hb-timeout {
    height: 18px;
    padding: 0 5px;
    border-radius: 3px;
    border: 1px solid var(--border, #2a3150);
    background: rgba(15, 20, 32, 0.75);
    color: var(--text, #e5e7eb);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    outline: none;
    width: 34px;
    text-align: left;
}
.filestream-tv-toolbar label.btn.btn-sm #tizen-retries:focus-visible,
.filestream-tv-toolbar label.btn.btn-sm #tizen-hb-timeout:focus-visible {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.filestream-sep {
    border: none;
    border-top: 1px solid var(--border, #2a3150);
    margin: 18px 0 14px;
}

.filestream-flash {
    margin: 8px 0 10px;
    padding: 8px 12px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.45);
    color: #93c5fd;
    border-radius: 6px;
    font-size: 0.85rem;
    animation: fs-flash-in 0.3s ease;
}
@keyframes fs-flash-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.tv-scan-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 220px;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid rgba(59, 130, 246, 0.42);
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.10);
    color: #bfdbfe;
    font-size: 0.82rem;
    line-height: 1.2;
    overflow: hidden;
}
.tv-scan-summary[hidden] {
    display: none;
}
.tv-scan-summary--ok {
    border-color: rgba(34, 197, 94, 0.55);
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}
.tv-scan-summary--warn {
    border-color: rgba(245, 158, 11, 0.48);
    background: rgba(245, 158, 11, 0.10);
    color: #fde68a;
}
.tv-scan-summary--error {
    border-color: rgba(248, 113, 113, 0.52);
    background: rgba(248, 113, 113, 0.10);
    color: #fecaca;
}
.tv-scan-summary-main,
.tv-scan-summary-detail {
    white-space: nowrap;
    color: var(--text-muted, #94a3b8);
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tv-scan-summary-main {
    overflow: hidden;
    text-overflow: ellipsis;
}
.tv-scan-pills {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 120px;
    overflow: hidden;
}
.tv-scan-pill,
.tv-scan-more {
    display: inline-flex;
    align-items: center;
    max-width: 170px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.55);
    color: #c4b5fd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tv-add-form {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 10px; padding: 10px;
    background: var(--bg-card, #1a2035);
    border: 1px solid var(--border, #2a3150);
    border-radius: 6px;
}
.tv-add-form input[type="text"] {
    flex: 1 1 140px; min-width: 120px;
    padding: 6px 10px;
    background: var(--bg-primary, #0f1420);
    border: 1px solid var(--border, #2a3150);
    border-radius: 4px;
    color: var(--text, #e5e7eb);
    font-size: 0.85rem;
}

.tv-list {
    display: flex; flex-direction: column; gap: 8px;
    max-height: 280px; overflow-y: auto; padding-right: 4px;
}
.tv-row {
    display: flex; flex-direction: column; gap: 5px;
    padding: 8px 12px 0;
    background: var(--bg-card, #1a2035);
    border: 1px solid var(--border, #2a3150);
    border-left-width: 3px;
    border-left-color: transparent;
    border-radius: 8px;
    transition: border-color 0.2s;
}
.tv-row-live {
    border-color: rgba(34, 197, 94, 0.55);
    background: linear-gradient(90deg, rgba(34,197,94,0.08), rgba(34,197,94,0.02));
}
.tv-row-scan-hit {
    border-color: rgba(34, 197, 94, 0.65);
    box-shadow: inset 3px 0 0 rgba(34, 197, 94, 0.85);
}
.tv-row-off { opacity: 0.5; }

/* Ligne 1 : une seule hauteur (alignée au nom « Roches Bobois »), trois groupes justifiés */
.tv-row-top {
    position: relative;
    display: grid;
    grid-template-columns: max-content minmax(280px, 1fr) 170px;
    column-gap: 6px;
    align-items: center;
    justify-content: stretch;
    width: 100%;
    min-width: 0;
    min-height: 22px;
    line-height: 1.2;
    overflow: hidden;
}
.tv-row-cluster {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.tv-row-cluster-left {
    flex: 0 0 auto;
    min-width: 0;
}
.tv-row-cluster-mid {
    display: grid;
    grid-template-columns: 54px 54px minmax(156px, 1fr);
    column-gap: 6px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}
.tv-row-cluster-right {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: grid;
    grid-template-columns: 72px 58px 28px;
    column-gap: 6px;
    width: 170px;
    align-items: center;
    justify-content: end;
    background: var(--bg-card, #1a2035);
    z-index: 1;
}
.tv-row-top .tv-ip {
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    display: inline-block;
    min-width: 91px;
    width: 91px;
    max-width: 91px;
    text-align: left;
    flex-shrink: 0;
    margin-left: 0;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}
.tv-actions .btn.btn-sm:not(.btn-icon) {
    padding: 3px 8px;
    font-size: 0.74rem;
    line-height: 1.2;
    min-height: 0;
}
.tv-chrono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 72px;
    max-width: 72px;
    font-family: monospace;
    font-size: 0.74rem;
    letter-spacing: 0.03em;
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.28);
    border-radius: 4px;
    padding: 0 6px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
}
.tv-row-cluster-right .tv-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 4px;
    width: 58px;
    min-width: 58px;
    overflow: visible;
}
.tv-chrono-slot {
    display: inline-flex;
    width: 72px;
    min-width: 72px;
    max-width: 72px;
}
.tv-chrono-idle {
    opacity: 0.55;
}
.tv-name {
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    display: inline-block;
    min-width: 96px;
    width: 96px;
    max-width: 96px;
    line-height: 1.2;
}
.tv-name-ip-gap {
    white-space: pre;
    flex: 0 0 auto;
}
/* Nom + constructeur/modèle sur la même ligne, hauteur = une ligne de titre */
.tv-name-block {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 27ch;
}
.tv-name-sep {
    flex-shrink: 0;
    color: var(--text-muted, #9ca3af);
    opacity: 0.45;
    font-weight: 300;
}
.tv-mfg-inline {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-muted, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
/* Ancien bloc deux lignes (compat si du vieux markup subsiste quelque part) */
.tv-mfg-small { font-size: 0.72rem; color: var(--text-muted, #9ca3af); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-row-spacer {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
}

/* Ligne 2 : controles + HLS */
.tv-row-bottom {
    display: grid;
    grid-template-rows: 30px;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    min-height: 30px;
    padding-left: 34px; /* aligne sous le nom */
}
.tv-hls-row-wrap {
    width: 100%;
    min-width: 0;
}
.tv-hls-row-wrap .tv-hls-row {
    margin-top: 0;
}
.tv-hls-row-spacer {
    min-height: 28px;
    flex: 0 0 28px;
}
/* URL + Flux caméra : pas de colonne « vide » au milieu — toute la largeur pour la barre HLS */
.tv-url-flux-row.tv-row-top {
    justify-content: flex-start;
    gap: 10px;
}
.tv-url-flux-row {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.tv-url-flux-row-left {
    min-width: 0;
    flex: 1 1 auto !important;
    max-width: none;
}
.tv-url-flux-row-left .tv-hls-row {
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
}
.tv-url-flux-row-mid {
    display: none;
}
.tv-url-flux-right {
    flex: 0 0 auto;
    flex-shrink: 0;
}
.tv-preselect-label {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.7rem; color: var(--text-muted, #9ca3af);
    white-space: nowrap; cursor: pointer;
    padding: 1px 6px;
    line-height: 1.2;
    border: 1px solid var(--border, #2a3150);
    border-radius: 5px;
    flex: 0 0 auto;
}
.tv-preselect-label input { margin: 0; accent-color: var(--primary, #6366f1); }
.tv-live-preselect-label .tv-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 8px;
    background: #ef4444;
    border: 1px solid rgba(248, 113, 113, 0.85);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.12);
}
.tv-live-preselect-label.is-selected .tv-live-dot {
    background: #34d399;
    border-color: rgba(110, 231, 183, 0.9);
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.14);
}
.tv-iptv-label .tv-iptv-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 8px;
    background: #ef4444;
    border: 1px solid rgba(248, 113, 113, 0.85);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.12);
}
.tv-iptv-label.is-selected .tv-iptv-dot {
    background: #34d399;
    border-color: rgba(110, 231, 183, 0.9);
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.14);
}
.tv-live-preselect-label.is-live-active {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.08);
}
.tv-live-preselect-label.is-live-active .tv-live-dot {
    background: #ef4444;
    border-color: rgba(248, 113, 113, 0.95);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
    animation: tv-live-dot-blink 1.1s ease-in-out infinite;
}
@keyframes tv-live-dot-blink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
    }
    50% {
        opacity: 0.35;
        box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.08);
    }
}
.tv-control-slot {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
.tv-control-slot-live,
.tv-control-slot-iptv {
    justify-content: stretch;
}
.tv-control-slot-live .tv-preselect-label,
.tv-control-slot-iptv .tv-preselect-label {
    width: 100%;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
.tv-control-slot-channel {
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
}

/* Contrôles per-TV IPTV */
.tv-iptv-ch-badge {
    display: inline-flex; align-items: center;
    font-size: 0.7rem; color: var(--color-accent, #22c55e);
    white-space: nowrap; max-width: 100%;
    flex: 1 1 auto;
    overflow: hidden; text-overflow: ellipsis;
}
.tv-iptv-ch-action {
    appearance: none;
    min-width: 0;
    width: 100%;
    padding: 1px 6px;
    border: 1px solid rgba(34, 197, 94, 0.32);
    border-radius: 5px;
    background: rgba(34, 197, 94, 0.08);
    cursor: pointer;
    font-family: var(--font);
    font-weight: 700;
    text-align: left;
    justify-content: flex-start;
}
.tv-iptv-ch-action:hover {
    border-color: rgba(34, 197, 94, 0.58);
    background: rgba(34, 197, 94, 0.14);
}
.tv-iptv-ch-action:disabled,
.tv-iptv-ch-action.tv-iptv-ch-locked {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(35%);
}
.tv-iptv-ch-action:disabled:hover,
.tv-iptv-ch-action.tv-iptv-ch-locked:hover {
    border-color: rgba(34, 197, 94, 0.32);
    background: rgba(34, 197, 94, 0.08);
}
.tv-iptv-ch-empty {
    color: var(--text-muted, #9ca3af);
    border-color: var(--border, #2a3150);
    background: rgba(148, 163, 184, 0.08);
}
.tv-row.tv-iptv-target {
    outline: 2px solid var(--color-accent, #1e6fb5);
    border-radius: 8px;
}

.tv-file-name {
    max-width: 260px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: inline-block; vertical-align: middle;
}

/* Legacy — gardé pour compat */
.tv-info { flex: 1; min-width: 0; }
.tv-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 3px; flex-wrap: wrap;
}
.tv-meta {
    display: flex; gap: 8px; flex-wrap: wrap;
    font-size: 0.78rem; color: var(--text-muted, #9ca3af);
}
.tv-meta > span {
    padding: 1px 6px;
    background: rgba(148, 163, 184, 0.1);
    border-radius: 3px;
}
.tv-loc { color: #a5b4fc !important; }
.tv-ip  { font-family: inherit; color: #fcd34d !important; }
.tv-dlna    { color: #86efac !important; }
.tv-dlna-no { color: #fca5a5 !important; }

.tv-live-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(34, 197, 94, 0.25);
    color: #86efac;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    animation: tv-pulse 1.6s infinite;
}
@keyframes tv-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);  }
}
.tv-live-info {
    margin-top: 4px;
    font-size: 0.82rem;
    color: #bbf7d0;
}

/* ─── Badge de mode (LIVE / FICHIER / OFF) — affiche dans le head TV ─── */
.tv-mode-badge {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 4px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.35px;
    line-height: 1.25;
}
.tv-mode-badge.tv-mode-live {
    background: rgba(239, 68, 68, 0.22);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.45);
    animation: tv-pulse-red 1.6s infinite;
}

/* Flux LIVE : meme colonne flex que badge ON AIR (tv-row-cluster-right) */
.tv-flux-on-url-line {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    color: #bbf7d0;
    white-space: nowrap;
    text-align: right;
}
.tv-flux-on-url-line .text-muted {
    font-weight: 500;
}
.tv-flux-on-url-line-pending {
    color: var(--text-muted, #9ca3af);
    font-weight: 500;
}
.tv-mode-badge.tv-mode-file {
    background: rgba(34, 197, 94, 0.22);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.45);
}
.tv-mode-badge.tv-mode-off {
    background: rgba(148, 163, 184, 0.12);
    color: #9ca3af;
    border: 1px solid rgba(148, 163, 184, 0.25);
}
@keyframes tv-pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);   }
}

/* Surlignage subtil de la ligne TV selon le mode actif */
.tv-row.tv-row-mode-live {
    border-left-color: rgba(239, 68, 68, 0.7);
}
.tv-row.tv-row-mode-file {
    border-left-color: rgba(34, 197, 94, 0.7);
}

/* Bouton LIVE (rouge) — utilise dans le header TV (broadcast all) ET
   dans chaque carte TV (live individuel) */
.btn.btn-live {
    background: linear-gradient(180deg, #ef4444, #b91c1c);
    color: #fff;
    border: 1px solid rgba(239, 68, 68, 0.6);
    font-weight: 600;
}
.btn.btn-live:hover:not(:disabled) {
    background: linear-gradient(180deg, #f87171, #dc2626);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}
.btn.btn-live:active:not(:disabled) {
    transform: translateY(1px);
}
.btn.btn-live:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.tv-actions { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }

/* Bouton Builder .wgt (header TV) — violet, rappelle le bloc Tizen */
.btn.btn-tizen {
    background: linear-gradient(180deg, #a855f7, #7e22ce);
    color: #fff;
    border: 1px solid rgba(168, 85, 247, 0.55);
    font-weight: 600;
}
.btn.btn-tizen:hover:not(:disabled) {
    background: linear-gradient(180deg, #c084fc, #9333ea);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}
.btn.btn-tizen:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── Statut Tizen compact affiche sur la ligne HLS ─── */
.tizen-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 600;
}
.tizen-badge.tizen-checking      { background: rgba(148, 163, 184, 0.2); color: #94a3b8; }
.tizen-badge.tizen-unavailable   { background: rgba(148, 163, 184, 0.2); color: #94a3b8; }
.tizen-badge.tizen-offline       { background: rgba(245, 158, 11, 0.20); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.4); }
.tizen-badge.tizen-not-installed { background: rgba(239, 68, 68, 0.18);  color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.35); }
.tizen-badge.tizen-installed     { background: rgba(34, 197, 94, 0.20);  color: #86efac; border: 1px solid rgba(34, 197, 94, 0.45); }
.tizen-heartbeat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 22px;
    padding: 0 7px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
}
.tizen-heartbeat-ok {
    background: rgba(34, 197, 94, 0.16);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.35);
}
.tizen-heartbeat-stale {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.35);
}
/* Forcer la taille des btn-xs dans la ligne HLS */
.tv-hls-row .btn {
    padding: 0 7px !important;
    font-size: 0.7rem !important;
    min-width: auto !important;
    height: 22px !important;
    min-height: 22px !important;
    line-height: 1.2 !important;
}
.btn-xs {
    padding: 2px 7px;
    font-size: 0.72rem;
    border-radius: 3px;
}
.tizen-mac-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 28px !important;
    min-width: 28px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    line-height: 1 !important;
}
/* Petits boutons icon DANS la liste TV uniquement (sinon ecrase les 📺👥⚙️ de la topbar) */
.tv-actions .btn-icon {
    width: auto !important;
    height: auto !important;
    padding: 2px 6px !important;
    min-width: auto !important;
    border-radius: 4px !important;
    font-size: 0.74rem !important;
    line-height: 1.2 !important;
}

.tv-disabled-label {
    font-size: 0.78rem;
    color: var(--text-muted, #9ca3af);
    font-style: italic;
    padding: 0 8px;
}

/* Badge ID (utilise comme path dans l'URL HLS Tizen) — cliquable : copie l'ID */
.tv-id-badge {
    display: inline-block;
    padding: 1px 7px;
    margin-left: 8px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #93c5fd;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}
.tv-id-badge:hover {
    background: rgba(59, 130, 246, 0.30);
}
.tv-id-badge:active {
    background: rgba(59, 130, 246, 0.45);
}

/* Bloc URL HLS (a coder en dur dans l'app Tizen) */
.tv-hls-row {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    margin-top: 0;
    padding: 3px 6px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 4px;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: visible;
}
.tv-hls-row-compact {
    min-height: 28px;
}
.tv-hls-main {
    display: flex;
    align-items: center;
    gap: 0;
    box-sizing: border-box;
    flex: 0 0 74px;
    width: 74px;
    min-width: 74px;
    height: 22px;
    margin-left: 0;
    padding-left: 6px;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 3px;
    overflow: visible;
}
.tv-hls-label {
    color: #c7d2fe;
    font-weight: 600;
    font-size: 0.7rem;
    line-height: 1.2;
    flex-shrink: 0;
}
.tv-hls-main .tv-hls-label {
    flex-shrink: 0;
}
.tv-hls-url {
    flex: 1;
    min-width: 0;                /* indispensable pour permettre l'ellipsis dans un flex */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #a5b4fc;
    font-family: monospace;
    font-size: 0.75rem;
    padding: 0;
    background: transparent;
    cursor: pointer;             /* l'URL elle-meme devient cliquable pour copier */
}
.tv-hls-main .tv-hls-url {
    flex: 1 1 auto;
    min-width: 0;
}
.tv-hls-url:hover { color: #c7d2fe; }
/* Ligne 2 : actions, puis HLS juste avant Heartbeat fixe */
.tizen-heartbeat--on-hls {
    display: inline-flex;
    align-items: center;
    flex: 0 0 138px;
    justify-content: center;
    margin-left: 0;
}
.tv-hls-main .btn-xs {
    flex-shrink: 0;
}
.tv-hls-copy-btn {
    width: 26px;
    min-width: 26px;
    height: 20px !important;
    min-height: 20px !important;
    margin-left: auto;
    padding: 0 !important;
}
.tv-hls-action {
    display: inline-flex;
    align-items: center;
    justify-content: stretch;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
}
.tv-hls-right-pack {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 0;
    overflow: visible;
}
.tv-hls-tizen-action {
    display: inline-flex;
    align-items: center;
    flex: 0 0 112px;
    min-width: 112px;
    overflow: visible;
}
.tv-hls-tizen-strip {
    display: grid;
    grid-template-columns: 64px 44px;
    align-items: center;
    gap: 4px;
    width: 112px;
    min-width: 112px;
}
.tv-hls-action-strip {
    display: grid;
    grid-template-columns: 76px 76px minmax(122px, 1fr);
    align-items: center;
    gap: 4px;
    min-width: 0;
    width: 100%;
}
.tv-hls-action .btn,
.tv-hls-tizen-action .btn,
.tv-hls-action .tv-mode-badge {
    width: 100%;
    justify-content: center;
    height: 22px;
    min-height: 22px;
    padding: 0 7px;
    font-size: 0.7rem;
    line-height: 1.2;
}
.tv-hls-tizen-badge-slot {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    overflow: hidden;
}
.tv-hls-tizen-badge-slot .tizen-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 22px;
    padding: 0 7px;
    font-size: 0.7rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tv-hls-heartbeat-slot {
    display: block;
    min-width: 0;
    flex: 0 0 138px;
    margin-left: 0;
}
.tv-hls-row .btn-xs {
    padding: 2px 6px;
    font-size: 0.7rem;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 3px;
    cursor: pointer;
    color: #c7d2fe;
    flex-shrink: 0;
}
.tv-hls-row .btn-xs:hover { background: rgba(99, 102, 241, 0.35); }
.tv-hls-main .tv-hls-copy-btn {
    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid rgba(99, 102, 241, 0.38) !important;
    border-radius: 0 2px 2px 0 !important;
    color: #c7d2fe;
}
.tv-hls-main .tv-hls-copy-btn:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.28) !important;
}

/* Toggle switch (enabled/disabled) */
.tv-enable-toggle {
    position: relative; display: inline-block;
    width: 34px; height: 18px; flex-shrink: 0;
    cursor: pointer;
}
.tv-enable-toggle input { opacity: 0; width: 0; height: 0; }
.tv-enable-toggle span {
    position: absolute; inset: 0;
    background: #374151;
    border-radius: 18px;
    transition: background 0.2s;
}
.tv-enable-toggle span::before {
    content: "";
    position: absolute;
    left: 2px; top: 2px;
    width: 14px; height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.tv-enable-toggle input:checked + span {
    background: #22c55e;
}
.tv-enable-toggle input:checked + span::before {
    transform: translateX(16px);
}

/* ─── PAGE PLEINE DIFFUSION (remplace le modal) ───────────────── */

/* Conteneur principal de la page diffusion. Affichee a la place du
   dashboard quand l'utilisateur clique 📺 dans la topbar. */
.filestream-page {
    display: none;                     /* affichee par JS via display:flex */
    flex-direction: column;
    padding: var(--page-gutter) var(--page-gutter) var(--footer-layout-space);
    gap: 14px;
    flex: 1;
    min-height: 0;
    height: calc(100% - var(--footer-layout-space));
    overflow: hidden;
    box-sizing: border-box;
}

.filestream-page-header {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border, #2a3150);
}
.filestream-page-title {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text, #e5e7eb);
}

/* Grille 2 colonnes : TVs (gauche) | Bibliotheque (droite) */
.filestream-page-grid {
    display: grid;
    grid-template-columns: minmax(420px, 1.05fr) minmax(380px, 1fr);
    gap: 18px;
    flex: 1;
    min-height: 0;          /* permet aux enfants de scroller */
    height: 100%;
    max-height: 100%;
}
@media (max-width: 1100px) {
    .filestream-page-grid {
        grid-template-columns: 1fr;   /* tablette / portrait : 1 colonne */
    }
}

/* Même largeur ~1031px : si la fenêtre est basse, deux colonnes étroites tiennent encore */
@media (max-width: 1140px) and (min-width: 960px) and (max-height: 740px) {
    .filestream-page-grid {
        grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr);
        gap: 10px;
    }
}

/* Colonnes (cartes) */
.filestream-tv-col,
.filestream-lib-col {
    display: flex;
    flex-direction: column;
    background: var(--bg-card, #1a2035);
    border: 1px solid var(--border, #2a3150);
    border-radius: 8px;
    padding: 14px 16px;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Liste des TVs : contenu porté par .filestream-tv-scroll (une seule barre de défilement) */
.filestream-tv-list-fullpage {
    flex: 0 0 auto;
    min-height: 120px;
    max-height: none !important;
    overflow: visible;
    padding-right: 2px;
    contain: content;
}
.filestream-tv-list-fullpage .tv-row {
    box-sizing: border-box;
    height: 68px;
    min-height: 68px;
    max-height: 68px;
    overflow: hidden;
}
.filestream-tv-list-fullpage .tv-row-bottom {
    flex: 0 0 auto;
    min-height: 30px;
    overflow: visible;
}
.filestream-tv-list-fullpage .tv-hls-row {
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    overflow: visible;
}
.filestream-tv-list-fullpage .tv-actions {
    flex-wrap: nowrap;
}
/* Colonne TV : remplit la grille ; défilement interne pour la liste */
.filestream-tv-col {
    min-height: 0;
}

/* En-tête bibliothèque : même structure que Téléviseurs */
.filestream-lib-col > .filestream-lib-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0;
}
/* Onglets Médiathèque / IPTV */
.lib-tab-btn {
    opacity: .72;
    border: 1px solid var(--border, #2a3150);
    transition: opacity .15s, border-color .15s, background .15s;
}
.lib-tab-btn:hover  { opacity: .9; }
.lib-tab-btn.lib-tab-active {
    opacity: 1;
    border-color: rgba(99,102,241,.6);
    background: rgba(99,102,241,.18);
}
.filestream-lib-toolbar .iptv-ctrl-btn,
.filestream-lib-toolbar .iptv-ctrl-select {
    height: 22px;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    box-sizing: border-box;
}
.filestream-lib-toolbar #iptv-search-input {
    min-width: 120px;
    flex: 1 1 auto;
}
/* ── IPTV layout plat ────────────────────────────────────────────── */

/* Barre de recherche dans les contrôles */
/* ── Barre de contrôles IPTV — éléments unifiés ─────────────────────────── */
.iptv-ctrl-select,
.iptv-search-input {
    height: 28px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid rgba(45,212,191,.3);
    background: #0c1f1f;
    color: #e2e8f0;
    font-size: .82rem;
    font-weight: 500;
    outline: none;
    color-scheme: dark;
    width: 160px;
    cursor: text;
    flex-shrink: 1;
}
.iptv-ctrl-select option { background: #0c1f1f; color: #e2e8f0; }
.iptv-ctrl-select:focus,
.iptv-search-input:focus  { border-color: #2dd4bf; }
.iptv-search-input::placeholder { color: rgba(226,232,240,.4); }
.iptv-ctrl-btn {
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    color: #e2e8f0;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s;
}
.iptv-ctrl-btn:hover { background: rgba(255,255,255,.14); }
.iptv-ctrl-status {
    font-size: .8rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.iptv-ctrl-sep { flex: 1; min-width: 4px; }

/* Conteneur principal */
.iptv-flat-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0;
    min-height: 0;
}

/* Sélecteur de bouquet — hérité de .iptv-ctrl-select, juste la largeur fixée inline */
.iptv-bouquet-row { display: none; }
/* Bouquet actif : surbrillance teal */
#iptv-bq-select.bq-active {
    border-color: #2dd4bf;
    background: rgba(45,212,191,.12);
    color: #2dd4bf;
    font-weight: 700;
}

/* Grille de chaînes */
.iptv-ch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    align-content: start;
    gap: 8px;
    padding: 10px 2px 10px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
}

.iptv-ch-card {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    text-align: center;
    transition: background .13s, border-color .13s, transform .1s;
    position: relative;
    align-self: start;
}
.iptv-ch-card:hover {
    background: rgba(13,148,136,.18);
    border-color: rgba(13,148,136,.45);
    transform: translateY(-2px);
}
.iptv-ch-card.iptv-playing {
    border-color: #14b8a6;
    background: rgba(13,148,136,.28);
    box-shadow: 0 0 0 1px rgba(13,148,136,.4);
}

/* Logo de la chaîne */
.iptv-ch-logo {
    width: 72px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.iptv-ch-logo img {
    max-width: 72px;
    max-height: 50px;
    object-fit: contain;
    border-radius: 5px;
}
.iptv-ch-icon { font-size: 1.9rem; line-height: 1; }

.iptv-ch-name {
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--text-secondary, #cbd5e1);
    word-break: break-word;
}

/* Badge "en cours" */
.iptv-ch-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: .6rem;
    background: #14b8a6;
    color: #fff;
    border-radius: 6px;
    padding: 1px 5px;
    font-weight: 700;
}
/* Bouton favori ⭐ sur la carte */
.iptv-ch-fav-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: rgba(0,0,0,.35);
    border-radius: 50%;
    font-size: .85rem;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    opacity: .75;
    transition: opacity .15s, transform .1s, background .15s;
    z-index: 2;
}
.iptv-ch-fav-btn:hover  { opacity: 1; background: rgba(0,0,0,.6); transform: scale(1.15); }
.iptv-ch-fav-btn.is-fav { opacity: 1; background: rgba(13,148,136,.5); }
/* Bouton PiP ⧉ sur la carte — positionné à gauche du bouton favori */
.iptv-ch-pip-btn {
    position: absolute;
    bottom: 5px;
    right: 33px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: rgba(0,0,0,.35);
    border-radius: 50%;
    font-size: .85rem;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, transform .1s, background .15s;
    z-index: 2;
}
.iptv-ch-card:hover .iptv-ch-pip-btn { opacity: .75; }
.iptv-ch-pip-btn:hover  { opacity: 1 !important; background: rgba(0,0,0,.6); transform: scale(1.15); }
.iptv-ch-pip-btn.is-pip { opacity: 1; background: rgba(139,92,246,.6); }
.iptv-ch-badge-pip { background: #7c3aed; top: 22px; }
/* ── Modal preview IPTV ──────────────────────────────────────────── */
#iptv-preview-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    align-items: center;
    justify-content: center;
}
.iptvm-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.iptvm-box {
    position: relative;
    background: #0f172a;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 20px 20px 22px;
    width: min(680px, 95vw);
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,.7);
    transform: scale(.93);
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
}
.iptvm-box.iptvm-in { transform: scale(1); opacity: 1; }

.iptvm-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: rgba(255,255,255,.08);
    border: none;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 9px;
    border-radius: 8px;
    z-index: 1;
    transition: background .15s;
}
.iptvm-close:hover { background: rgba(255,255,255,.18); }

.iptvm-footer-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: center;
}
.iptvm-icon-btn {
    background: rgba(255,255,255,.08);
    border: none;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 5px 9px;
    border-radius: 8px;
    transition: background .15s;
}
.iptvm-icon-btn:hover { background: rgba(255,255,255,.2); }

.iptvm-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 40px;
}
.iptvm-logo-wrap {
    width: 56px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.iptvm-logo-wrap img {
    max-width: 56px;
    max-height: 38px;
    object-fit: contain;
    border-radius: 5px;
}
.iptvm-icon { font-size: 1.8rem; }
.iptvm-name {
    font-size: 1rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.3;
}

/* Zone player */
.iptvm-player-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}
/* Quand la vidéo est en PiP : afficher un placeholder dans le modal */
.iptvm-player-wrap.iptvm-in-pip::after {
    content: '⊞  Lecture en cours dans la fenêtre PiP';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: .95rem;
    background: #0f172a;
}
.iptvm-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}

/* Spinner de chargement */
.iptvm-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(0,0,0,.75);
    color: #94a3b8;
    font-size: .85rem;
}
.iptvm-spin-ring {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(255,255,255,.15);
    border-top-color: #14b8a6;
    border-radius: 50%;
    animation: iptvm-spin .8s linear infinite;
}
@keyframes iptvm-spin { to { transform: rotate(360deg); } }

/* Footer du modal : bouton enregistrement */
.iptvm-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}
.iptvm-btn-rec {
    flex-shrink: 0;
    padding: 8px 18px;
    border-radius: 9px;
    border: none;
    background: rgba(239,68,68,.18);
    color: #fca5a5;
    font-size: .83rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.iptvm-btn-rec:hover { background: rgba(239,68,68,.32); color: #fff; }
.iptvm-btn-rec:disabled { opacity: .5; cursor: default; }
.iptvm-btn-rec-stop {
    background: rgba(239,68,68,.55) !important;
    color: #fff !important;
}
.iptvm-rec-status {
    font-size: .75rem;
    color: #fca5a5;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* .iptv-account-select → hérité de .iptv-ctrl-select */

/* Lignes de compte dans Paramètres > IPTV */
.iptv-account-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.iptv-account-row .iptv-acc-name,
.iptv-account-row .iptv-acc-url {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border, rgba(255,255,255,.12));
    background: var(--input-bg, rgba(255,255,255,.06));
    color: var(--text, #e2e8f0);
    font-size: .85rem;
}
.iptv-account-row .iptv-acc-url { flex: 1; }
.btn-danger-soft {
    background: rgba(239,68,68,.15);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,.3);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: .8rem;
}
.btn-danger-soft:hover { background: rgba(239,68,68,.3); color: #fff; }

/* ── Barre stream IPTV (ligne 2, visible pendant diffusion) ─────────────── */
#lib-iptv-stream-bar {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.iptv-now-playing {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 600;
    color: var(--teal, #2dd4bf);
}
/* Bouton favori (☆/⭐) */
.iptv-bar-fav {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid rgba(250,204,21,.25);
    background: transparent;
    color: #a0aec0;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.iptv-bar-fav:hover       { background: rgba(250,204,21,.15); color: #fbbf24; }
.iptv-bar-fav.is-fav      { color: #fbbf24; border-color: rgba(250,204,21,.5); }
/* Bouton enregistrer */
.iptv-bar-rec {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 12px;
    border-radius: 6px;
    border: none;
    background: rgba(239,68,68,.18);
    color: #fca5a5;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.iptv-bar-rec:hover   { background: rgba(239,68,68,.32); color: #fff; }
.iptv-bar-rec:disabled { opacity: .5; cursor: default; }
.iptv-bar-rec-stop    { background: rgba(239,68,68,.55) !important; color: #fff !important; }
.iptv-bar-rec-status  {
    flex: 0 0 auto;
    font-size: .78rem;
    color: #fca5a5;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Regroupement Boucle | Volume : toujours rangée horizontale */
.filestream-lib-col .filestream-lib-media-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
    max-width: 100%;
}
.filestream-loop-label input {
    width: 12px;
    height: 12px;
    margin: 0;
}
.filestream-lib-col .filestream-volume-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px;
    height: 22px;
    font-size: 0.7rem;
    font-weight: 600;
}
.filestream-volume-label {
    min-width: 44px;
    white-space: nowrap;
}
.filestream-volume-val {
    min-width: 34px;
    text-align: right;
    font-size: 0.7rem;
}

@media (max-width: 520px) {
    .filestream-lib-row {
        align-items: flex-start;
        flex-direction: column;
    }
    .filestream-lib-col .filestream-lib-media-row {
        justify-content: flex-start;
        margin-left: 0;
    }
}

/* Volume diffusion : slider horizontal .mixer-slider (dashboard). */

/* Bloc chirurgie : liste des dossiers patients au-dessus des fichiers */
.filestream-subfolder-section {
    margin-bottom: 18px;
}
.filestream-section-hint {
    margin: 0 0 8px 0;
    font-size: 0.78rem;
    color: var(--text-muted, #9ca3af);
}

/* Bibliotheque : zone de fichiers scrollable */
.filestream-results-fullpage {
    flex: 1;
    min-height: 120px;
    max-height: none !important;
    overflow-y: auto;
    margin: 6px 0;
    padding-right: 6px;
}

/* Badge "x / 8" a cote du titre Televiseurs */
.tv-count-badge {
    margin-left: 8px;
    padding: 2px 8px;
    background: rgba(99, 102, 241, 0.18);
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: #c7d2fe;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 500;
    vertical-align: middle;
}
.tv-count-badge.tv-count-full {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.45);
    color: #fcd34d;
}

/* Page diffusion : meme footer que les autres modules, avec espace reserve. */
body.filestream-active .filestream-page {
    padding-bottom: var(--footer-layout-space);
}

/* ═══ Densité compacte — réf. 1360×768, viewport ~1031×616 ═══ */
@media (max-height: 740px) and (min-width: 900px) and (max-width: 1320px) {
    :root {
        --topbar-height: 48px;
        --page-gutter: clamp(8px, 1.5vw, 18px);
        --panel-gap: clamp(8px, 1.3vw, 14px);
    }

    .topbar {
        padding: 6px var(--page-gutter);
    }

    .logo, .logo-link {
        font-size: 1.28rem;
    }

    .dashboard {
        padding: var(--page-gutter) var(--page-gutter) var(--footer-reserved-space);
        gap: var(--panel-gap);
    }

    .video-control-strip {
        padding: 6px 10px;
        min-height: 40px;
        gap: 6px 8px;
    }

    .strip-heading {
        font-size: 1.05rem;
    }

    .panel-header h2 {
        font-size: 1rem;
    }

    .card-header {
        padding: 12px 14px;
    }

    .card-body {
        padding: 12px 14px;
    }

    .filestream-page-grid {
        gap: 10px;
    }

    .filestream-tv-col,
    .filestream-lib-col {
        padding: 10px 12px;
    }
}

/* ─── SCROLLBAR ──────────────────────────── */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }