/* =====================================================================
   Temas do painel + layout (menu recolhível / menu no topo)
   Carregado DEPOIS do style.css. O tema fica em <html data-theme="...">
   (neon = padrão, que já está nas variáveis do style.css).
   ===================================================================== */

/* ---------- Tema: Âmbar (rádio / estúdio) ---------- */
html[data-theme="ambar"]{
  --bg:#0d0b09; --bg-soft:#121010; --surface:#18150f; --surface-2:#211c14;
  --border:#2e2719; --border-strong:#463a22;
  --text:#f3ece0; --text-dim:#b3a68f; --text-faint:#7d725f;
  --accent:#ffa726; --accent-2:#ff5e3a;
  --accent-grad:linear-gradient(135deg,#ffb020,#ff5e3a);
  --accent-rgb:255,167,38; --accent2-rgb:255,94,58;
  --on-accent:#1a0f00; --topbar-bg:rgba(13,11,9,.85);
  --success:#7ddc6a; --warning:#ffd24d; --danger:#ff5252;
  --badge-accent-text:#ffcf8a; --badge-user-text:#ffa08a;
  --flash-error-text:#ffb3b3; --flash-success-text:#b5f0a8;
}

/* ---------- Tema: Claro ---------- */
html[data-theme="claro"]{
  color-scheme:light;
  --bg:#f4f6fb; --bg-soft:#ffffff; --surface:#ffffff; --surface-2:#f1f4fa;
  --border:#e3e8f2; --border-strong:#c9d2e4;
  --text:#141a2b; --text-dim:#5a6580; --text-faint:#8a94ab;
  --accent:#3b6cff; --accent-2:#12b8a6;
  --accent-grad:linear-gradient(135deg,#3b6cff,#12b8a6);
  --accent-rgb:59,108,255; --accent2-rgb:18,184,166;
  --on-accent:#ffffff; --topbar-bg:rgba(244,246,251,.88);
  --success:#12a36b; --warning:#c77700; --danger:#e5385a;
  --shadow:0 6px 20px rgba(30,45,90,.08);
  --row-hover:rgba(20,26,43,.035);
  --badge-accent-text:#2447c9; --badge-user-text:#0c8a7c;
  --flash-error-text:#b4233f; --flash-success-text:#0b7a50;
}
html[data-theme="claro"] body{
  background:
    radial-gradient(1000px 420px at 100% -10%, rgba(59,108,255,.10), transparent 60%),
    radial-gradient(800px 420px at -10% 10%, rgba(18,184,166,.07), transparent 55%),
    var(--bg);
}
html[data-theme="claro"] .card{box-shadow:var(--shadow);}
html[data-theme="claro"] .btn-ghost{background:#fff;}
html[data-theme="claro"] ::-webkit-scrollbar-thumb{background:#cdd5e5;}
html[data-theme="claro"] .modal-backdrop,
html[data-theme="claro"] .sidebar-backdrop{background:rgba(20,26,43,.35);}

/* ---------- Tema: Console (verde-limão, menu no topo) ---------- */
html[data-theme="console"]{
  --bg:#07090a; --bg-soft:#0b0e0f; --surface:#0f1416; --surface-2:#151c1e;
  --border:#1f292c; --border-strong:#2d3b3f;
  --text:#e8f1ee; --text-dim:#8fa39d; --text-faint:#5d706a;
  --accent:#b6ff3c; --accent-2:#19e0a0;
  --accent-grad:linear-gradient(135deg,#b6ff3c,#19e0a0);
  --accent-rgb:182,255,60; --accent2-rgb:25,224,160;
  --on-accent:#06120a; --topbar-bg:rgba(7,9,10,.85);
  --success:#35e08a; --warning:#ffc83d; --danger:#ff4d5e;
  --badge-accent-text:#d4ff8a; --badge-user-text:#8dffd0;
  --flash-error-text:#ffb3bb; --flash-success-text:#a7f5cb;
}

/* ---------- Refinos comuns a todos os temas ---------- */
.content{max-width:1360px;}
.card{border-radius:16px;}
.nav .section-label{padding:12px 10px 4px;}
.nav-group:first-child .section-label{padding-top:2px;}
.nav-group + .nav-group{margin-top:4px;}
.nav a{transition:background .15s,color .15s;}
.nav a.active{
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.20),rgba(var(--accent-rgb),.04));
  box-shadow:inset 2px 0 0 var(--accent);
}
.nav a.active svg{color:var(--accent);opacity:1;}
.sidebar{transition:width .2s ease;}
.brand .mark{color:var(--on-accent);}
.brand .mark svg{stroke:currentColor;}

.collapse-btn{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  background:none;border:0;cursor:pointer;font:inherit;font-size:12px;
  color:var(--text-faint);padding:8px 10px;border-radius:9px;margin-top:6px;
}
.collapse-btn:hover{background:var(--surface);color:var(--text);}
.collapse-btn svg{width:15px;height:15px;}

/* ---------- Seletor de tema (barra do topo) ---------- */
.topbar h1{flex:1;min-width:0;}
.theme-switch{position:relative;flex-shrink:0;}
.theme-btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--surface);color:var(--text-dim);font:inherit;font-size:13px;font-weight:600;
  border:1px solid var(--border);border-radius:10px;padding:8px 13px;
}
.theme-btn:hover{color:var(--text);border-color:var(--border-strong);}
.theme-btn svg{width:16px;height:16px;}
.theme-menu{
  display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:40;
  width:250px;padding:8px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);
}
.theme-menu.open{display:block;}
.theme-menu-title{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);padding:6px 8px 8px;}
.theme-opt{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;color:var(--text-dim);font:inherit;font-size:13px;font-weight:500;
  padding:8px;border-radius:10px;
}
.theme-opt:hover{background:var(--surface);color:var(--text);}
.theme-opt > span:nth-child(2){flex:1;}
.theme-opt > svg{width:15px;height:15px;color:var(--accent);opacity:0;}
.theme-opt.on{color:var(--text);background:rgba(var(--accent-rgb),.10);}
.theme-opt.on > svg{opacity:1;}
.theme-swatch{width:26px;height:26px;border-radius:8px;flex-shrink:0;border:1px solid rgba(128,128,128,.35);}
.sw-neon{background:linear-gradient(135deg,#7c5cff,#22d3c9);}
.sw-ambar{background:linear-gradient(135deg,#ffb020,#ff5e3a);}
.sw-claro{background:linear-gradient(135deg,#ffffff 0%,#dfe6f5 45%,#3b6cff 100%);}
.sw-console{background:linear-gradient(135deg,#0b0e0f 0%,#0b0e0f 40%,#b6ff3c 100%);}

/* ---------- Menu recolhido (só ícones) — desktop ---------- */
@media (min-width:801px){
  :is(html[data-collapsed="1"], html[data-theme="ambar"]:not([data-collapsed="0"])):not([data-theme="console"]) .sidebar{
    width:76px;padding:16px 10px;align-items:stretch;
  }
  :is(html[data-collapsed="1"], html[data-theme="ambar"]:not([data-collapsed="0"])):not([data-theme="console"]) .sidebar :is(.brand-text,.lbl,.side-user .who){display:none;}
  :is(html[data-collapsed="1"], html[data-theme="ambar"]:not([data-collapsed="0"])):not([data-theme="console"]) .sidebar .brand{justify-content:center;padding:0 0 14px;}
  :is(html[data-collapsed="1"], html[data-theme="ambar"]:not([data-collapsed="0"])):not([data-theme="console"]) .sidebar .nav a{justify-content:center;padding:11px 0;}
  :is(html[data-collapsed="1"], html[data-theme="ambar"]:not([data-collapsed="0"])):not([data-theme="console"]) .sidebar .nav a svg{width:18px;height:18px;}
  :is(html[data-collapsed="1"], html[data-theme="ambar"]:not([data-collapsed="0"])):not([data-theme="console"]) .sidebar .section-label{
    display:block;font-size:0;height:1px;background:var(--border);padding:0 !important;margin:10px 8px;
  }
  :is(html[data-collapsed="1"], html[data-theme="ambar"]:not([data-collapsed="0"])):not([data-theme="console"]) .sidebar .nav-group:first-child .section-label{display:none;}
  :is(html[data-collapsed="1"], html[data-theme="ambar"]:not([data-collapsed="0"])):not([data-theme="console"]) .sidebar .collapse-btn{justify-content:center;}
  :is(html[data-collapsed="1"], html[data-theme="ambar"]:not([data-collapsed="0"])):not([data-theme="console"]) .sidebar .collapse-btn svg{transform:rotate(180deg);}
  :is(html[data-collapsed="1"], html[data-theme="ambar"]:not([data-collapsed="0"])):not([data-theme="console"]) .sidebar .side-user{flex-direction:column;gap:8px;}
}

/* ---------- Tema Console: menu no topo — desktop ---------- */
@media (min-width:801px){
  html[data-theme="console"] .shell{flex-direction:column;}
  html[data-theme="console"] .sidebar{
    position:sticky;top:0;z-index:30;width:100%;height:64px;flex-direction:row;align-items:center;gap:18px;
    padding:0 24px;overflow:visible;border-right:0;border-bottom:1px solid var(--border);
  }
  html[data-theme="console"] .brand{padding:0;}
  html[data-theme="console"] .brand-text span{display:none;}
  html[data-theme="console"] .nav{flex-direction:row;align-items:stretch;align-self:stretch;gap:2px;flex:1;}
  html[data-theme="console"] .nav-group{position:relative;display:flex;align-items:center;margin:0;}
  html[data-theme="console"] .nav .section-label{
    display:flex;align-items:center;gap:7px;padding:9px 13px !important;border-radius:9px;
    font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-dim);cursor:default;
  }
  html[data-theme="console"] .nav .section-label::after{
    content:"";width:5px;height:5px;border:solid currentColor;border-width:0 1.6px 1.6px 0;
    transform:rotate(45deg) translateY(-2px);opacity:.7;
  }
  html[data-theme="console"] .nav-group:hover .section-label,
  html[data-theme="console"] .nav-group:focus-within .section-label{background:var(--surface);color:var(--text);}
  html[data-theme="console"] .nav-group:has(a.active) .section-label{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent);border-radius:9px 9px 0 0;}
  html[data-theme="console"] .nav-links{
    display:none;position:absolute;top:calc(100% - 8px);left:0;min-width:250px;flex-direction:column;gap:1px;
    padding:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);
  }
  html[data-theme="console"] .nav-group:hover .nav-links,
  html[data-theme="console"] .nav-group:focus-within .nav-links{display:flex;}
  /* grupo sem título (perfil chamador): link direto na barra */
  html[data-theme="console"] .nav-group:not(:has(.section-label)) .nav-links{
    display:flex;position:static;flex-direction:row;background:none;border:0;box-shadow:none;padding:0;min-width:0;
  }
  html[data-theme="console"] .nav a.active{box-shadow:inset 2px 0 0 var(--accent);}
  html[data-theme="console"] .collapse-btn{display:none;}
  html[data-theme="console"] .side-user{border-top:0;padding:0;margin:0;}
  html[data-theme="console"] .side-user .who span{display:none;}
  html[data-theme="console"] .side-user .who{flex:0 1 auto;max-width:140px;}
  html[data-theme="console"] .topbar{top:64px;}
}

/* ---------- Celular: sempre menu deslizante, em qualquer tema ---------- */
@media (max-width:800px){
  .collapse-btn{display:none;}
  .theme-btn-label{display:none;}
  .theme-btn{padding:8px 10px;}
  .theme-menu{right:0;}
  .sidebar{width:260px;}
}