:root{
  --bg:#0b0b0b;
  --card:#151515;
  --text:#ffffff;
  --muted:#9a9a9a;
  --primary:#ff6a00;
  --border:#2a2a2a;

  /* extras para layout profissional */
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --radius: 16px;
  --radius-sm: 12px;
  --focus: rgba(255,106,0,.45);
}

body.light{
  --bg:#f4f4f4;
  --card:#ffffff;
  --text:#111;
  --muted:#555;
  --border:#dddddd;

  --shadow: 0 14px 40px rgba(0,0,0,.10);
  --focus: rgba(255,106,0,.45);
}

*{box-sizing:border-box}

body{
  background:var(--bg);
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px; /* base 12px */
  margin:0;
}

/* =========
   LAYOUT BASE
   ========= */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:18px;
}

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

/* =========
   HEADER / TOPBAR ÚNICO (substitui duplicados antigos)
   ========= */
.header{
  position:sticky;
  top:0;
  z-index:50;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;

  padding:14px 18px;

  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(18,18,20,.92), rgba(10,10,12,.80));
  backdrop-filter: blur(10px);
}

body.light .header{
  border-bottom:1px solid rgba(0,0,0,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,245,245,.86));
}

.header-left,
.header-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.header-left{
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width:220px;
  line-height:1.1;
}

.header-title{
  font-size:16px;
  font-weight:800;
  letter-spacing:.2px;
}

.header-sub{
  font-size:12px;
  color:var(--muted);
}

/* =========
   BOTÕES (compatível com seu .btn atual + melhorias)
   ========= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:34px;
  padding:0 14px;
  border-radius:12px;

  background:linear-gradient(180deg, var(--primary), #d45f00);
  border:1px solid rgba(0,0,0,.18);

  color:#111;
  font-weight:800;
  cursor:pointer;
  font-size:12px;
  text-decoration:none;
  user-select:none;

  transition:transform .05s ease, opacity .15s ease, background .15s ease, border-color .15s ease;
}

.btn:hover{opacity:.95}
.btn:active{transform:translateY(1px)}

.btn.secondary{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.16);
  color:var(--text);
}

body.light .btn.secondary{
  background:rgba(0,0,0,.02);
  border:1px solid rgba(0,0,0,.14);
}

.btn.danger{
  background:#ff3b30;
  border:0;
  color:#111;
}

.btn:disabled,
.btn.is-disabled{
  opacity:.45;
  pointer-events:none;
}

/* Compatibilidade com antigas páginas que usam .navbtn */
.navbtn{margin-left:8px}

/* =========
   "NAV-BTN" antigo (mantido, mas alinhado ao novo visual)
   ========= */
.nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:34px;
  padding:0 14px;
  border-radius:12px;

  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.03);
  color:var(--text);

  font-size:12px;
  font-weight:800;
  text-decoration:none;

  transition:transform .05s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
  user-select:none;
}

.nav-btn:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.20)}
.nav-btn:active{transform:translateY(1px)}

.nav-btn.active{
  background:rgba(255,106,0,.18);
  border-color:rgba(255,106,0,.40);
  color:#fff;
}

.nav-btn.logout{
  background:transparent;
  border-color:rgba(255,255,255,.14);
  color:var(--muted);
}
.nav-btn.logout:hover{
  border-color:rgba(255,59,48,.55);
  color:#ff3b30;
}

.nav-btn.theme{
  background:transparent;
  border-color:rgba(255,255,255,.18);
}

/* =========
   CARDS
   ========= */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  padding:14px;
  margin:0;               /* importante: card dentro do .wrap controla espaçamento */
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

body.light .card{
  background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
  border:1px solid rgba(0,0,0,.10);
}

h2{margin:0 0 10px;font-size:16px}
h3{margin:12px 0 8px;font-size:13px}
p{margin:6px 0;color:var(--muted);line-height:1.35}

/* =========
   FORM CONTROLS
   ========= */
input, select, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.02);
  color:var(--text);
  font-size:12px;
  outline:none;
}

body.light input, body.light select, body.light textarea{
  border:1px solid rgba(0,0,0,.14);
  background:rgba(0,0,0,.015);
  color:var(--text);
}

input::placeholder, textarea::placeholder{color:#777}
body.light input::placeholder, body.light textarea::placeholder{color:#888}

input:focus, select:focus, textarea:focus{
  border-color:var(--focus);
}

textarea{min-height:70px;resize:vertical}

/* =========
   ALERTS
   ========= */
.alert-ok{
  background:#0f2a14;
  border:1px solid #1d5b2a;
  padding:10px 12px;
  border-radius:12px;
  margin:16px 0;
}

.alert-err{
  background:#2a0f0f;
  border:1px solid #5b1d1d;
  padding:10px 12px;
  border-radius:12px;
  margin:16px 0;
}

/* =========
   TABELAS (ERP style)
   ========= */
.table-wrap{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.01);
}

body.light .table-wrap{
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
}

table{width:100%;border-collapse:collapse}

th, td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-align:left;
  font-size:12px;
  vertical-align:top;
}

thead th{
  background:rgba(255,255,255,.03);
  font-weight:900;
  letter-spacing:.2px;
}

tbody tr:hover{background:rgba(255,255,255,.02)}

body.light th, body.light td{
  border-bottom:1px solid rgba(0,0,0,.08);
}

hr{
  border:0;
  border-top:1px solid rgba(255,255,255,.08);
  margin:18px 0;
}
body.light hr{border-top:1px solid rgba(0,0,0,.10)}

/* =========
   TOOLTIP "!" (profissional)
   ========= */
.ui-help{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.92);
  font-size:12px;
  font-weight:900;
  cursor:help;
  position:relative;
  vertical-align:middle;
  margin-left:6px;
}

body.light .ui-help{
  border:1px solid rgba(0,0,0,.18);
  background:rgba(0,0,0,.03);
  color:rgba(0,0,0,.78);
}

.ui-help[data-tip]::after{
  content: attr(data-tip);
  position:absolute;
  left:50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  background:rgba(20,20,22,.98);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  white-space:pre-wrap;
  width: 280px;
  font-weight:700;
  line-height:1.25;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
}

.ui-help[data-tip]::before{
  content:"";
  position:absolute;
  left:50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border:6px solid transparent;
  border-top-color: rgba(20,20,22,.98);
  opacity:0;
  transition:opacity .12s ease;
}

.ui-help:hover::after,
.ui-help:hover::before{
  opacity:1;
}

/* =========
   BADGE (usado pra “Somente leitura” etc.)
   ========= */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  font-size:11px;
  font-weight:900;
  color:var(--text);
}

body.light .badge{
  border:1px solid rgba(0,0,0,.14);
  background:rgba(0,0,0,.02);
}

/* =========
   LINKS
   ========= */
a{color:inherit}
a:hover{opacity:.95}