/* ===========================================================================
   MR7 — Ponte SKIN 2 (oficial) sobre os módulos da Base de Conhecimento.
   Carregada por ÚLTIMO. Aplica o design system Skin 2 preservando toda a lógica
   (telemetria, gráficos, conexões, câmera, microfone, Setimus, Reorganizer…).
   =========================================================================== */

/* Fundo e tipografia oficiais do Skin 2 */
html,body{ background:
  radial-gradient(1100px 640px at 72% -8%, rgba(37,99,255,.14), transparent 60%),
  radial-gradient(820px 620px at 108% 40%, rgba(124,58,237,.14), transparent 55%),
  var(--mr7-bg-main) !important;
  color:var(--mr7-text-primary); font-family:var(--mr7-font); overflow-x:hidden; }
body::before,body::after{ display:none !important; }

/* Shell de 3 áreas (reafirma o grid do Skin 2 sobre o .app antigo) */
.app{ display:grid !important; grid-template-columns:var(--sidebar-w) 1fr var(--ctx-w) !important;
  min-height:100vh; max-width:none !important; margin:0 !important; padding:0 !important; position:static !important; z-index:auto !important; }
@media(max-width:1000px){ .app{ grid-template-columns:var(--sidebar-w-collapsed) 1fr !important; } }
@media(max-width:720px){ .app{ grid-template-columns:1fr !important; } }

/* Header (topbar antiga vira header do Skin 2) */
.topbar.header{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 20px !important; border-bottom:1px solid var(--mr7-border) !important; border-radius:0 !important;
  background:var(--mr7-bg-glass) !important; backdrop-filter:blur(8px); position:sticky; top:0; z-index:20; box-shadow:none !important; }
.topbar.header h1{ font-size:var(--fs-xl); font-weight:var(--fw-bold); letter-spacing:.02em; }
.header__left{ display:flex; align-items:center; gap:12px; }
.controls.header__right{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:flex-end; }

/* Botões no padrão Skin 2 */
.controls .btn, #v6bar .v6chip{ background:linear-gradient(160deg,#16204a,#0e1730) !important; border:1px solid var(--mr7-border) !important;
  color:var(--mr7-text-primary) !important; border-radius:var(--r-md) !important; padding:9px 13px !important; font-weight:var(--fw-med); box-shadow:none !important; }
.controls .btn:hover, #v6bar .v6chip:hover{ border-color:var(--mr7-purple) !important; box-shadow:var(--glow-violet) !important; transform:none !important; }
.controls .btn.btn--primary{ background:linear-gradient(90deg,var(--mr7-blue),var(--mr7-purple)) !important; border:none !important; }
.controls .btn.btn--ghost, #clientSel{ background:transparent !important; }
.controls .btn.on{ border-color:var(--status-green) !important; color:#bff4df !important; }

/* Barra de ações V6 dentro da central */
#v6bar{ margin:0 !important; padding:10px 20px !important; border-bottom:1px solid var(--mr7-border); background:rgba(15,20,36,.5); }

/* Conteúdo rolável do Skin 2 */
.content{ padding:20px !important; display:flex; flex-direction:column; gap:var(--gap); overflow:auto; }
.content .layout{ display:grid; grid-template-columns:minmax(300px,340px) minmax(420px,1fr) minmax(320px,380px);
  gap:var(--gap) !important; margin:0 !important; align-items:start; }
@media(min-width:1101px){ body.p7-agent-open .content .layout{ margin-right:0 !important; } }
@media(max-width:1100px){ .content .layout{ grid-template-columns:1fr !important; } }

/* Painéis viram CARDS do Skin 2 */
.panel{ background:linear-gradient(160deg,var(--mr7-bg-card),var(--mr7-bg-surface)) !important;
  border:1px solid var(--mr7-border) !important; border-radius:var(--r-lg) !important; box-shadow:var(--sh-2) !important;
  backdrop-filter:blur(var(--fx-blur)); overflow:hidden; }
.panel-h{ padding:12px 15px !important; border-bottom:1px solid var(--mr7-border) !important; }
.panel-h h2{ color:var(--mr7-lilac) !important; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:1px; font-weight:var(--fw-bold); }
.panel-h span{ color:var(--mr7-text-muted) !important; font-size:var(--fs-xs); }

/* Cards internos (agentes, sistemas, fontes, telemetria, discos) no tom Skin 2 */
.agent,.system,.input-card,.tcard,.dgcard,.step,.mini,.kv,.tvbox,.diskcard{
  background:linear-gradient(160deg,var(--mr7-bg-card),var(--mr7-bg-surface)) !important; border-color:var(--mr7-border) !important; }
.agent:hover,.system:hover,.input-card:hover{ border-color:var(--mr7-purple) !important; }
.badge{ border-color:var(--mr7-border) !important; color:var(--mr7-text-muted) !important; background:#0d1226 !important; }

/* Núcleo (hero) preservado, moldado como card Skin 2 */
.hero{ border:1px solid var(--mr7-border) !important; border-radius:var(--r-lg) !important; }

/* Rodapé antigo escondido — a telemetria agora é o painel de cards com gráficos */
.footer{ display:none !important; }

/* Sidebar/ctx (Skin 2) — garante contraste do logo */
.sidebar__logo img{ height:30px; }

/* Agente lateral (Setimus) e modal continuam por cima do shell */
#setimus,.modal{ z-index:9000; }
.icon-btn.nav-toggle{ display:none; }
@media(max-width:720px){ .icon-btn.nav-toggle{ display:grid; place-items:center; } .app .sidebar{ position:fixed; left:0; top:0; height:100vh; width:250px; transform:translateX(-100%); transition:transform .24s; z-index:63; } .app.nav-open .sidebar{ transform:none; } }