/* ─────────────────────────────────────────────────────────────
   theme.css — Variáveis globais, reset e scrollbar
   Incluir em TODAS as páginas do sistema.
   ───────────────────────────────────────────────────────────── */

/* ─── Tema escuro (padrão) ─── */
:root {
  --primary:        #00ff88;
  --primary-hover:  #00e67a;
  --bg-dark:        #0f172a;
  --card-bg:        rgba(30, 41, 59, 0.7);
  --header-bg:      rgba(15, 23, 42, 0.9);
  --text-main:      #f8fafc;
  --text-muted:     #94a3b8;
  --border:         rgba(255, 255, 255, 0.1);
  --input-bg:       rgba(15, 23, 42, 0.6);
  --shadow:         rgba(0, 0, 0, 0.3);
  --shadow-primary: rgba(0, 255, 136, 0.15);
  --scrollbar-thumb:       rgba(255, 255, 255, 0.1);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
  --error:          #ef4444;
  --success:        #00ff88;
  --warning:        #f59e0b;
  --btn-bg:         rgba(255, 255, 255, 0.05);
  --btn-hover-bg:   rgba(255, 255, 255, 0.1);
  --table-head-bg:  rgba(15, 23, 42, 0.4);
  --table-hover:    rgba(255, 255, 255, 0.02);
  --kpi-bg:         rgba(15, 23, 42, 0.4);
  --panel-bg:       rgba(15, 23, 42, 0.4);
  --modal-bg:       rgba(15, 23, 42, 0.95);
  --dialog-bg:      #1e293b;

  /* ─── Página index (ao vivo) ─── */
  --status-bg:          rgba(15, 23, 42, 0.7);
  --placeholder-start:  #1e293b;
  --placeholder-end:    #0f172a;
  --footer-bg:          rgba(15, 23, 42, 0.3);

  /* ─── Histórico (modal de imagens, breadcrumb) ─── */
  --breadcrumb-bg:  rgba(15, 23, 42, 0.4);
  --modal-nav-bg:   rgba(255, 255, 255, 0.05);
  --modal-shadow:   rgba(0, 0, 0, 0.5);

  /* ─── Configurações (modal de PC, fechar, detalhe) ─── */
  --modal-overlay-bg: rgba(15, 23, 42, 0.85);
  --modal-card-bg:    rgba(30, 41, 59, 0.98);
  --close-hover-bg:   rgba(255, 255, 255, 0.1);
  --detail-bg:        rgba(15, 23, 42, 0.4);
  --empty-bg:         rgba(30, 41, 59, 0.4);

  /* ─── PCs (logs ao vivo, dialog nativo, listas) ─── */
  --log-hover-bg:    rgba(255, 255, 255, 0.03);
  --dialog-shadow:   rgba(0, 0, 0, 0.5);
  --dialog-backdrop: rgba(0, 0, 0, 0.6);
  --list-bg:         rgba(15, 23, 42, 0.4);

  /* ─── Detalhes (sidebar, itens de lista, campos) ─── */
  --sidebar-bg: rgba(15, 23, 42, 0.4);
  --item-bg:    rgba(255, 255, 255, 0.03);
  --item-hover: rgba(255, 255, 255, 0.06);
  --field-bg:   rgba(15, 23, 42, 0.6);

  /* ─── Pills genéricos ─── */
  --pill-bg:           rgba(255, 255, 255, 0.08);
  --unknown-pill-text: #cbd5e1;

  /* ─── USB / alertas: avisos e botões de perigo ─── */
  --warning-bg:              rgba(245, 158, 11, 0.08);
  --warning-border:          rgba(245, 158, 11, 0.25);
  --warning-text:            #fde68a;
  --danger-btn-bg:           rgba(239, 68, 68, 0.12);
  --danger-btn-text:         #fecaca;
  --danger-btn-border:       rgba(239, 68, 68, 0.25);
  --danger-btn-hover-bg:     rgba(239, 68, 68, 0.2);
  --danger-btn-hover-border: rgba(239, 68, 68, 0.4);

  color-scheme: dark;
}

/* ─── Tema claro ─── */
body[data-theme="light"] {
  --primary:        #00a86b;
  --primary-hover:  #008f5b;
  --bg-dark:        #f4f7fb;
  --card-bg:        rgba(255, 255, 255, 0.9);
  --header-bg:      rgba(255, 255, 255, 0.95);
  --text-main:      #0f172a;
  --text-muted:     #64748b;
  --border:         rgba(15, 23, 42, 0.12);
  --input-bg:       rgba(255, 255, 255, 0.85);
  --shadow:         rgba(15, 23, 42, 0.12);
  --shadow-primary: rgba(0, 168, 107, 0.16);
  --scrollbar-thumb:       rgba(15, 23, 42, 0.18);
  --scrollbar-thumb-hover: rgba(15, 23, 42, 0.28);
  --error:          #dc2626;
  --success:        #008f5b;
  --warning:        #b45309;
  --btn-bg:         rgba(15, 23, 42, 0.04);
  --btn-hover-bg:   rgba(15, 23, 42, 0.08);
  --table-head-bg:  rgba(15, 23, 42, 0.055);
  --table-hover:    rgba(15, 23, 42, 0.035);
  --kpi-bg:         rgba(15, 23, 42, 0.035);
  --panel-bg:       rgba(255, 255, 255, 0.82);
  --modal-bg:       rgba(248, 250, 252, 0.95);
  --dialog-bg:      #ffffff;

  --status-bg:          rgba(255, 255, 255, 0.85);
  --placeholder-start:  #e2e8f0;
  --placeholder-end:    #f1f5f9;
  --footer-bg:          rgba(15, 23, 42, 0.04);
  --breadcrumb-bg:      rgba(255, 255, 255, 0.8);
  --modal-nav-bg:       rgba(15, 23, 42, 0.06);
  --modal-shadow:       rgba(15, 23, 42, 0.2);
  --modal-overlay-bg:   rgba(15, 23, 42, 0.4);
  --modal-card-bg:      rgba(255, 255, 255, 0.98);
  --close-hover-bg:     rgba(15, 23, 42, 0.08);
  --detail-bg:          rgba(15, 23, 42, 0.04);
  --empty-bg:           rgba(15, 23, 42, 0.03);
  --log-hover-bg:       rgba(15, 23, 42, 0.03);
  --dialog-shadow:      rgba(15, 23, 42, 0.2);
  --dialog-backdrop:    rgba(15, 23, 42, 0.4);
  --list-bg:            rgba(15, 23, 42, 0.03);
  --sidebar-bg:         rgba(255, 255, 255, 0.6);
  --item-bg:            rgba(15, 23, 42, 0.02);
  --item-hover:         rgba(15, 23, 42, 0.04);
  --field-bg:           rgba(255, 255, 255, 0.85);
  --pill-bg:            rgba(15, 23, 42, 0.08);
  --unknown-pill-text:  #64748b;
  --warning-bg:         rgba(245, 158, 11, 0.06);
  --warning-border:     rgba(180, 83, 9, 0.25);
  --warning-text:       #92400e;
  --danger-btn-bg:           rgba(220, 38, 38, 0.08);
  --danger-btn-text:         #dc2626;
  --danger-btn-border:       rgba(220, 38, 38, 0.2);
  --danger-btn-hover-bg:     rgba(220, 38, 38, 0.15);
  --danger-btn-hover-border: rgba(220, 38, 38, 0.4);

  color-scheme: light;
}

/* ─── Reset ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

/* ─── Body base (background + cor + transição — layout fica em cada página) ─── */
body {
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(at 0% 0%, rgba(0, 255, 136, 0.07) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(0, 255, 136, 0.06) 0px, transparent 50%);
  color: var(--text-main);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ─── Scrollbars ─── */
::-webkit-scrollbar               { width: 8px; height: 8px; }
::-webkit-scrollbar-track         { background: transparent; }
::-webkit-scrollbar-thumb         { background: var(--scrollbar-thumb); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover   { background: var(--scrollbar-thumb-hover); }