/* ===================================================
   RESET
=================================================== */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

/* ===================================================
   VARIÁVEIS PADRÃO (FALLBACK DE SEGURANÇA)
   evita layout quebrado se o tema atrasar
=================================================== */
:root{
  --bg:#0b1220;
  --panel:#0f1b33;
  --card:#111f3d;
  --border:rgba(255,255,255,.08);
  --text:#e9eefc;
  --muted:rgba(233,238,252,.72);
  --primary:#4f8cff;
  --primary2:#2563eb;
  --green:#22c55e;
  --red:#ef4444;
  --yellow:#f59e0b;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
}

/* ===================================================
   BASE
=================================================== */
body{
  min-height:100vh;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* ===================================================
   TEMA ESCURO
=================================================== */
body.tema-escuro{
  background: radial-gradient(
    1200px 800px at 10% 0%,
    #152a57 0%,
    var(--bg) 60%
  );
}

/* ===================================================
   TEMA CLARO
=================================================== */
body.tema-claro{
  --bg:#f4f6fb;
  --panel:#ffffff;
  --card:#ffffff;
  --border:rgba(0,0,0,.08);
  --text:#0f172a;
  --muted:rgba(15,23,42,.65);
  --primary:#2563eb;
  --primary2:#1d4ed8;
  --green:#16a34a;
  --red:#dc2626;
  --yellow:#ca8a04;
  --shadow:0 10px 30px rgba(0,0,0,.12);
  --radius:14px;

  background: linear-gradient(180deg,#eef2ff,#f8fafc);
}

/* ===================================================
   ELEMENTOS GERAIS
=================================================== */
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width:1200px;
  margin:0 auto;
  padding:24px;
}

.small{
  color:var(--muted);
  font-size:13px;
}

/* ===================================================
   TOPBAR
=================================================== */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.logo{ height:36px; }

/* ===================================================
   BOTÕES
=================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  font-weight:600;
  transition:.2s;
}

.btn:hover{
  transform:translateY(-1px);
  background:rgba(0,0,0,.05);
}

body.tema-escuro .btn:hover{
  background:rgba(255,255,255,.06);
}

.btn.primary{
  background:linear-gradient(180deg,var(--primary),var(--primary2));
  color:#fff;
  border:none;
}

.btn.danger{
  background:linear-gradient(180deg,var(--red),#b91c1c);
  color:#fff;
  border:none;
}

.btn.ghost{ background:transparent; }

/* ===================================================
   CARDS / GRID
=================================================== */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
  margin-top:16px;
}

.card{
  grid-column:span 12;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.card .hd{
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
}

.card .bd{ padding:16px; }

/* ===================================================
   FORMULÁRIOS
=================================================== */
.input, select, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
}

/* ===================================================
   TABELAS
=================================================== */
.table-wrap{
  overflow:auto;
  border-radius:12px;
  border:1px solid var(--border);
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:880px;
  background:var(--panel);
}

th,td{
  padding:12px;
  border-bottom:1px solid var(--border);
}

th{
  font-size:12px;
  text-transform:uppercase;
  color:var(--muted);
}