/* css/style-onair.css */
/* Feuille de Style Unifiée pour Ibiza1OnAir
   Le produit d'animation radio automatisée (voicetracks, animateurs virtuels,
   plans éditoriaux, intégration Zetta/GSelector).
   Version: 1.0
*/

/* ==========================================================================
   1. VARIABLES DE MARQUE
   ========================================================================== */

:root {
    /* Palette de couleurs de base (Socle - identique aux autres produits) */
    --color-primary: #0d6efd;
    --color-secondary: #6c757d;
    --color-success: #198754;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-info: #0dcaf0;
    --color-dark: #212529;
    --color-light: #f8f9fa;
    --color-white: #ffffff;
    --color-text: #212529;
    --color-text-muted: #6c757d;
    --color-border: #dee2e6;

    /* Couleurs Spécifiques Ibiza1OnAir (Thème Magenta) */
    --onair-primary: #A52298;       /* Magenta / violet vif (couleur de marque) */
    --onair-hover: #861E7D;         /* Magenta plus sombre (états hover) */
    --onair-bg-light: #fdf3fb;      /* Magenta très clair (fonds doux) */
    --onair-text-soft: #d68fcb;     /* Magenta pâle (icônes décoratives) */

    /* Typographie & UI (héritées du socle commun) */
    --font-family-base: 'Poppins', sans-serif;
    --border-radius-base: 0.75rem;
    --border-radius-sm: 0.5rem;
    --box-shadow-base: 0 4px 15px rgba(0, 0, 0, 0.07);
}

/* ==========================================================================
   2. STYLES GÉNÉRAUX (similaire aux autres produits)
   ========================================================================== */

body {
    font-family: var(--font-family-base);
    background-color: var(--color-light);
    color: var(--color-text);
}

main.p-4 {
    background-color: var(--color-light);
}

/* ==========================================================================
   3. SIDEBAR Ibiza1OnAir
   ========================================================================== */

/* Lien actif dans la sidebar OnAir */
.nav-link.active-onair {
    background-color: rgba(165, 34, 152, 0.35); /* Magenta translucide */
    color: #fff !important;
    border-left: 4px solid var(--onair-primary);
    font-weight: 600;
}
.nav-link.active-onair i {
    color: var(--onair-text-soft);
}

/* Item à venir (grisé) — pour les modules pas encore implémentés */
.nav-link.onair-coming-soon {
    color: rgba(255, 255, 255, 0.4) !important;
    pointer-events: none;
    font-style: italic;
}
.nav-link.onair-coming-soon::after {
    content: " (bientôt)";
    font-size: 0.75rem;
    color: var(--onair-text-soft);
    font-style: normal;
}
.nav-link.onair-coming-soon i {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Header / titre Ibiza1OnAir */
.header-onair {
    background-color: var(--onair-primary);
    color: var(--color-white);
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-base);
    margin-bottom: 1.5rem;
}
.header-onair h5 {
    display: flex;
    align-items: baseline;
    margin: 0;
}
.logo-text-biza {
    font-weight: 400;
    font-size: 1.5em;
}
.logo-text-onair {
    font-weight: 700;
    letter-spacing: 1px;
    margin-left: 2px;
    color: white;
    font-size: 1.5rem;
    text-transform: uppercase;
}
.logo-text-tagline {
    font-weight: 400;
    font-size: 1.05rem;
    margin-left: 0.5rem;
    font-style: italic;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ==========================================================================
   4. LIENS ÉCOSYSTÈME (cross-product)
   ========================================================================== */

/* Lien vers les autres produits, AFFICHÉ depuis une page Ibiza1OnAir */
.sidebar .nav-link.nav-link-aibiza-return {
    background-color: #EFFF01;
    color: #212529 !important;
    font-weight: 600;
    margin-top: 0.5rem;
}
.sidebar .nav-link.nav-link-aibiza-return i { color: #212529 !important; }
.sidebar .nav-link.nav-link-aibiza-return:hover {
    background-color: #dbe600;
    filter: brightness(110%);
}

.sidebar .nav-link.nav-link-connect-return {
    background-color: #F65002;
    color: white !important;
    font-weight: 600;
}
.sidebar .nav-link.nav-link-connect-return:hover {
    background-color: #d44502;
    filter: brightness(110%);
}

.sidebar .nav-link.nav-link-analytics-return {
    background-color: #C80000;
    color: white !important;
    font-weight: 600;
}
.sidebar .nav-link.nav-link-analytics-return:hover {
    background-color: #a00000;
    filter: brightness(110%);
}

/* Lien vers Ibiza1OnAir, AFFICHÉ depuis les sidebars Connect / AI.biza
   (convention "-return") */
.sidebar .nav-link.nav-link-onair-return {
    background-color: var(--onair-primary);
    color: white !important;
    font-weight: 600;
}
.sidebar .nav-link.nav-link-onair-return:hover {
    background-color: var(--onair-hover);
    filter: brightness(110%);
}

/* Lien vers Ibiza1OnAir, AFFICHÉ depuis la sidebar Analytics
   (convention sans suffixe — Analytics utilise nav-link-connect / nav-link-aibiza) */
.sidebar .nav-link.nav-link-onair {
    background-color: var(--onair-primary);
    color: white !important;
    font-weight: 600;
    margin-top: 0.25rem;
}
.sidebar .nav-link.nav-link-onair:hover {
    background-color: var(--onair-hover);
    filter: brightness(110%);
}

/* ==========================================================================
   5. CARDS & COMPOSANTS COLORÉS Ibiza1OnAir
   ========================================================================== */

.card {
    border: none;
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-base);
    background-color: var(--color-white);
}

/* Boutons et accents Ibiza1OnAir */
.btn-onair {
    background-color: var(--onair-primary);
    border-color: var(--onair-primary);
    color: white;
}
.btn-onair:hover {
    background-color: var(--onair-hover);
    border-color: var(--onair-hover);
    color: white;
}

.btn-outline-onair {
    color: var(--onair-primary);
    border-color: var(--onair-primary);
    background-color: transparent;
}
.btn-outline-onair:hover {
    background-color: var(--onair-primary);
    color: white;
}

.text-onair { color: var(--onair-primary) !important; }
.bg-onair { background-color: var(--onair-primary) !important; color: white; }
.border-onair { border-color: var(--onair-primary) !important; }

/* Badge magenta */
.badge.bg-onair {
    background-color: var(--onair-primary) !important;
    color: white;
}

/* Card avec accent magenta (utilisé pour cards de presets, animateurs, plans) */
.card-onair-accent {
    border-top: 4px solid var(--onair-primary);
}
.card-onair-accent .card-title {
    color: var(--onair-primary);
}

/* Section avec fond magenta très clair */
.section-onair-soft {
    background-color: var(--onair-bg-light);
    border-radius: var(--border-radius-base);
    padding: 1.5rem;
}

/* ==========================================================================
   6. DARK THEME — Overrides pour les composants spécifiques Ibiza1OnAir
   ==========================================================================
   Le bloc Bootstrap standard est traité par style-connect.css (chargé avant).
   Ici, on ne couvre que les classes propres à OnAir (voice-card, animator-card,
   template-card, kpi-card, dist-bar, traits-bar, settings-section, etc.)
   et les composants spécifiques injectés en <style> dans les pages OnAir.
   ========================================================================== */

[data-bs-theme="dark"] {
    /* Surcharge des variables OnAir : on garde la teinte magenta vive
       (couleur de marque) mais on assombrit le fond clair pour qu'il
       reste lisible sur dark sans flasher le blanc. */
    --onair-bg-light: rgba(165, 34, 152, 0.12);
}

/* --- Cards génériques OnAir (voice-card, animator-card, template-card, kpi-card, plan-card, settings-section) --- */
[data-bs-theme="dark"] .voice-card,
[data-bs-theme="dark"] .animator-card,
[data-bs-theme="dark"] .template-card,
[data-bs-theme="dark"] .kpi-card,
[data-bs-theme="dark"] .plan-card,
[data-bs-theme="dark"] .settings-section {
    background-color: #1e1e1e !important;
    color: #e0e0e0;
    border-color: #333;
}

/* --- Cards de création (dashed) — fond très légèrement teinté --- */
[data-bs-theme="dark"] .voice-card-create,
[data-bs-theme="dark"] .animator-card-create,
[data-bs-theme="dark"] .plan-card-create {
    background-color: rgba(165, 34, 152, 0.08);
    color: var(--onair-text-soft);
}
[data-bs-theme="dark"] .voice-card-create:hover,
[data-bs-theme="dark"] .animator-card-create:hover,
[data-bs-theme="dark"] .plan-card-create:hover {
    background-color: rgba(165, 34, 152, 0.18);
}

/* --- Barres de distribution / traits — fond sombre au lieu de #eee --- */
[data-bs-theme="dark"] .dist-bar,
[data-bs-theme="dark"] .traits-bar,
[data-bs-theme="dark"] .distribution-bar {
    background-color: #2a2a2a;
}

/* --- Topic-row (éditeur de plan) — fond sombre au lieu de #fafafa --- */
[data-bs-theme="dark"] .topic-row {
    background-color: #252525;
    border-color: #3a3a3a;
}

/* --- Empty state (Show Templates) --- */
[data-bs-theme="dark"] .empty-state {
    color: #888;
}
[data-bs-theme="dark"] .empty-state h6 {
    color: #ccc;
}

/* --- Section pré-écoute Voice Library : fond magenta très clair en dark --- */
[data-bs-theme="dark"] .preview-section,
[data-bs-theme="dark"] .section-onair-soft {
    background-color: rgba(165, 34, 152, 0.10);
}

/* --- Pills (tags, keywords, day-pill) : fond teinté magenta en dark --- */
[data-bs-theme="dark"] .tag-pill,
[data-bs-theme="dark"] .keyword-pill,
[data-bs-theme="dark"] .day-pill,
[data-bs-theme="dark"] .catchphrase-pill {
    background-color: rgba(165, 34, 152, 0.18);
    color: var(--onair-text-soft);
}

/* --- Outcome pills (Voicetrack Analytics) : versions sombres lisibles --- */
[data-bs-theme="dark"] .outcome-sent_to_zetta { background: rgba(25, 135, 84, 0.25); color: #75d6a4; }
[data-bs-theme="dark"] .outcome-blocked_by_judge { background: rgba(255, 193, 7, 0.20); color: #ffdb70; }
[data-bs-theme="dark"] .outcome-blocked_by_skip { background: rgba(108, 117, 125, 0.30); color: #c4c8cc; }
[data-bs-theme="dark"] .outcome-failed { background: rgba(220, 53, 69, 0.25); color: #f0828f; }
[data-bs-theme="dark"] .outcome-saved_local { background: rgba(13, 202, 240, 0.20); color: #6cdef3; }
[data-bs-theme="dark"] .outcome-pending_human_review { background: rgba(255, 142, 0, 0.20); color: #ffba6e; }

/* --- Role badges (Animator Manager) en dark --- */
[data-bs-theme="dark"] .role-animateur   { background: rgba(25, 135, 84, 0.25); color: #75d6a4; }
[data-bs-theme="dark"] .role-journaliste { background: rgba(13, 202, 240, 0.20); color: #6cdef3; }
[data-bs-theme="dark"] .role-chroniqueur { background: rgba(255, 193, 7, 0.20); color: #ffdb70; }
[data-bs-theme="dark"] .role-autre       { background: rgba(108, 117, 125, 0.30); color: #c4c8cc; }

/* --- Model pills (Voice Library) en dark --- */
[data-bs-theme="dark"] .model-pill-v3    { background: rgba(25, 135, 84, 0.25); color: #75d6a4; }
[data-bs-theme="dark"] .model-pill-v2    { background: rgba(13, 202, 240, 0.20); color: #6cdef3; }
[data-bs-theme="dark"] .model-pill-turbo { background: rgba(255, 193, 7, 0.20); color: #ffdb70; }

/* --- Active link OnAir en dark : un peu plus clair pour bien ressortir --- */
[data-bs-theme="dark"] .nav-link.active-onair {
    background-color: rgba(165, 34, 152, 0.45);
}

/* --- Liens cross-produit "écosystème" : leur couleur de marque reste (jaune/orange/rouge),
       on ajuste juste la lisibilité du texte si besoin --- */
[data-bs-theme="dark"] .sidebar .nav-link.nav-link-aibiza-return,
[data-bs-theme="dark"] .sidebar .nav-link.nav-link-connect-return,
[data-bs-theme="dark"] .sidebar .nav-link.nav-link-analytics-return,
[data-bs-theme="dark"] .sidebar .nav-link.nav-link-onair-return {
    /* couleurs déjà OK car backgrounds vifs + text white/dark — pas de changement nécessaire */
}

/* --- Modal body en dark sur le portail OnAir (cards info, alerts) --- */
[data-bs-theme="dark"] .modal-body .card.bg-light {
    background-color: #2a2a2a !important;
    color: #e0e0e0;
    border-color: #444;
}

/* --- Card title text en dark : forcer le magenta clair pour les titres OnAir --- */
[data-bs-theme="dark"] .text-onair {
    color: var(--onair-text-soft) !important;
}

/* --- Titres de section (Global Settings) en dark : magenta clair pour lisibilité --- */
[data-bs-theme="dark"] .settings-section h5,
[data-bs-theme="dark"] .settings-section h6 {
    color: var(--onair-text-soft);
}

/* --- Bootstrap bg-light dans une page OnAir : surcharge en dark --- */
/* Couvre les "card bg-light" d'aperçu (Show Templates), les éventuels
   badges bg-light text-dark qui auraient été laissés, etc. */
[data-bs-theme="dark"] .card.bg-light,
[data-bs-theme="dark"] .bg-light {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #3a3a3a !important;
}
[data-bs-theme="dark"] .badge.bg-light.text-dark {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
}

/* --- Form-range (sliders natifs) en dark : track plus visible --- */
[data-bs-theme="dark"] .form-range::-webkit-slider-runnable-track {
    background-color: #3a3a3a;
}
[data-bs-theme="dark"] .form-range::-moz-range-track {
    background-color: #3a3a3a;
}

/* --- form-text et form-help en dark : déjà dark-aware via var(--color-text-muted),
       mais on force un gris correct pour les .form-help qui n'utilisent pas la var --- */
[data-bs-theme="dark"] .form-help {
    color: #999;
}

/* --- Alert info Bootstrap dans modales OnAir : adapter au dark --- */
[data-bs-theme="dark"] .alert-info {
    background-color: rgba(13, 202, 240, 0.12);
    border-color: rgba(13, 202, 240, 0.35);
    color: #9be0f4;
}