/* =========================
   ISA Broadcast UI FIX
   ========================= */

:root{
    --sidebar-bg:#0a5661;
    --sidebar-bg-dark:#084b55;
    --sidebar-border:rgba(255,255,255,.08);
    --menu-text:#d5ece9;
    --menu-text-soft:#9dc7c2;
    --menu-active:#0d6d78;
    --menu-active-text:#ffffff;
    --menu-hover:#0c6470;
    --content-bg:#edf3f1;
}

/* Global */
body{
    background:var(--content-bg) !important;
}

/* ===== Sidebar ===== */
.sidebar{
    background:linear-gradient(180deg,var(--sidebar-bg),var(--sidebar-bg-dark)) !important;
    color:#fff !important;
}

/* Bloc logo */
.sidebar-brand{
    min-height:110px !important;
    padding:16px 18px !important;
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    border-bottom:1px solid var(--sidebar-border) !important;
}

.sidebar-brand .logo-box,
.sidebar-brand .logo-img-wrap{
    width:64px !important;
    height:64px !important;
    min-width:64px !important;
    min-height:64px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    overflow:visible !important;
    padding:0 !important;
}

.sidebar-brand .logo-box::after{
    display:none !important;
}

.sidebar-brand .logo-img,
.sidebar-brand img{
    width:64px !important;
    height:64px !important;
    max-width:64px !important;
    max-height:64px !important;
    object-fit:contain !important;
    background:transparent !important;
    padding:0 !important;
    border:none !important;
    box-shadow:none !important;
    display:block !important;
}

/* Titre marque */
.sidebar-brand .brand-title{
    color:#ffffff !important;
    font-size:16px !important;
    font-weight:800 !important;
    line-height:1.15 !important;
    margin:0 !important;
}

.sidebar-brand .brand-role{
    color:#f1c96f !important;
    font-size:13px !important;
    font-weight:700 !important;
    margin-top:4px !important;
}

/* Sections du menu */
.nav-section-title,
.menu-section-title,
.sidebar .section-title{
    color:rgba(255,255,255,.50) !important;
    font-size:11px !important;
    font-weight:700 !important;
    letter-spacing:2px !important;
    text-transform:uppercase !important;
    margin:18px 18px 10px !important;
}

/* Liens menu */
.sidebar a,
.sidebar .nav-link,
.sidebar .menu-link{
    color:var(--menu-text) !important;
    font-size:14px !important;
    font-weight:600 !important;
    text-decoration:none !important;
    min-height:44px !important;
    border-radius:0 !important;
    padding:12px 18px !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    border-left:3px solid transparent !important;
    background:transparent !important;
    transition:all .18s ease !important;
}

/* Hover */
.sidebar a:hover,
.sidebar .nav-link:hover,
.sidebar .menu-link:hover{
    background:var(--menu-hover) !important;
    color:#ffffff !important;
    border-left-color:#7fd5cb !important;
}

/* Lien actif */
.sidebar a.active,
.sidebar .nav-link.active,
.sidebar .menu-link.active,
.sidebar .active > a{
    background:var(--menu-active) !important;
    color:var(--menu-active-text) !important;
    border-left:3px solid #8fe1d7 !important;
    font-weight:700 !important;
}

/* Icônes menu */
.sidebar a i,
.sidebar .nav-link i,
.sidebar .menu-link i,
.sidebar a svg,
.sidebar .nav-link svg,
.sidebar .menu-link svg{
    width:18px !important;
    min-width:18px !important;
    height:18px !important;
    opacity:.95 !important;
}

/* Séparateurs visuels */
.sidebar .nav-group,
.sidebar .menu-group{
    margin-bottom:8px !important;
}

/* Contenu */
.content{
    max-width:1680px !important;
    margin:0 auto !important;
}

/* Cartes */
.card, .pro-card{
    border-radius:22px !important;
}

/* Inputs */
input, select, textarea{
    border-radius:14px !important;
    border:1px solid #cfe1de !important;
    min-height:46px !important;
    font-size:14px !important;
}

textarea{
    min-height:120px !important;
}

/* Bouton micro flottant */
.quick-voice-fab{
    z-index:2147483647 !important;
}

@media (max-width: 768px){
    .sidebar-brand{
        padding:14px !important;
    }

    .sidebar-brand .logo-img,
    .sidebar-brand img{
        width:54px !important;
        height:54px !important;
    }
}

/* PATCH 12A — Studio Broadcast Pro */

.broadcast-device-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
    gap: 18px !important;
}

.broadcast-device-card {
    background: linear-gradient(180deg, #ffffff, #f8fcfb) !important;
    border: 1px solid #dce8e6 !important;
    border-radius: 28px !important;
    padding: 18px !important;
    box-shadow: 0 18px 40px rgba(15,23,42,.07) !important;
    position: relative !important;
    overflow: hidden !important;
}

.broadcast-device-card:before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 6px !important;
    background: #94a3b8 !important;
}

.broadcast-device-card.is-online:before {
    background: #16a34a !important;
}

.broadcast-device-card.is-offline:before {
    background: #dc2626 !important;
}

.device-card-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

.device-subtitle {
    color: #64748b !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    margin-top: 4px !important;
}

.device-edit-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.device-edit-grid .full {
    grid-column: 1 / -1 !important;
}

.device-edit-grid textarea {
    min-height: 76px !important;
}

.studio-grid {
    display: grid !important;
    grid-template-columns: minmax(360px, 440px) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
}

.studio-panel {
    background: #ffffff !important;
    border: 1px solid #dce8e6 !important;
    border-radius: 28px !important;
    padding: 18px !important;
    box-shadow: 0 18px 40px rgba(15,23,42,.06) !important;
}

.studio-screen-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 14px !important;
}

.studio-screen-card {
    background: linear-gradient(180deg, #062f36, #051f25) !important;
    color: #ffffff !important;
    border-radius: 26px !important;
    padding: 16px !important;
    box-shadow: 0 18px 42px rgba(0, 63, 70, .22) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    position: relative !important;
    overflow: hidden !important;
}

.studio-screen-card:after {
    content: "" !important;
    position: absolute !important;
    right: -30px !important;
    top: -30px !important;
    width: 120px !important;
    height: 120px !important;
    background: rgba(255,255,255,.07) !important;
    border-radius: 999px !important;
}

.studio-screen-name {
    font-size: 18px !important;
    font-weight: 950 !important;
    position: relative !important;
    z-index: 2 !important;
}

.studio-screen-meta {
    color: rgba(255,255,255,.72) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    margin-top: 4px !important;
    position: relative !important;
    z-index: 2 !important;
}

.studio-state-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 12px !important;
    position: relative !important;
    z-index: 2 !important;
}

.studio-chip {
    border-radius: 999px !important;
    padding: 6px 10px !important;
    background: rgba(255,255,255,.12) !important;
    color: white !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.studio-chip.green { background: rgba(22,163,74,.22) !important; }
.studio-chip.red { background: rgba(220,38,38,.22) !important; }
.studio-chip.gold { background: rgba(245,158,11,.24) !important; }

.studio-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 14px !important;
    position: relative !important;
    z-index: 2 !important;
}

.studio-actions .btn {
    padding: 10px 12px !important;
    font-size: 12px !important;
}

.command-pad {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 10px !important;
}

@media (max-width: 1100px) {
    .studio-grid {
        grid-template-columns: 1fr !important;
    }
}

/* WebRTC status helpers */
.monitor-meta.is-error {
    color: #dc2626 !important;
    font-weight: 900 !important;
}
.monitor-meta.is-ok {
    color: #15803d !important;
    font-weight: 900 !important;
}