/* ===== Admin UI — Meio do Mundo (2025) ===== */
:root{
  --bg:#f7f7f8;
  --surface:#ffffff;
  --surface-2:#fafafa;
  --text:#0f172a;
  --muted:#6b7280;
  --border:#e5e7eb;
  --ring:#bfdbfe;
  --primary:#2563eb;  /* azul */
  --primary-2:#1d4ed8;
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:18px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1020;
    --surface:#0f162e;
    --surface-2:#0c1330;
    --text:#e5e7eb;
    --muted:#9ca3af;
    --border:#1f2a44;
    --ring:#284a9a;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.55);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
}

/* ===== Layout ===== */
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:16px}
.card.head{padding:14px 16px;font-weight:600}

/* ===== Topbar (já usada no admin_ui) ===== */
.topbar{position:sticky;top:0;z-index:50;background:#0d1117;color:#e5e7eb;border-bottom:1px solid rgba(255,255,255,.08)}
.topbar .wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.topbar .row{display:flex;align-items:center;justify-content:space-between;height:58px}
.topbar .brand{font-weight:700;letter-spacing:.2px}
.nav{display:flex;gap:8px;align-items:center}
.nav a{display:inline-block;padding:8px 12px;border-radius:10px;color:#e5e7eb;text-decoration:none;border:1px solid transparent}
.nav a:hover{background:#0f172a;border-color:#0b1220}
.nav a.active{background:var(--primary);border-color:var(--primary-2)}

/* ===== Form ===== */
.form{display:grid;gap:14px}
.field{width:100%;padding:.6rem .75rem;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:12px;outline:0}
.field:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
label .hint{color:var(--muted);font-size:.86rem}
textarea.field{min-height:160px;resize:vertical}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);text-decoration:none;cursor:pointer;transition:.15s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--primary);border-color:var(--primary-2);color:#fff}
.btn-primary:hover{filter:brightness(1.05)}
.btn-danger{border-color:var(--danger);color:var(--danger);background:transparent}
.btn-outline{background:transparent}
.btn-sm{padding:.35rem .6rem;border-radius:10px;font-size:.92rem}

/* ===== Table ===== */
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--radius)}
.table{width:100%;border-collapse:collapse;min-width:820px;background:var(--surface)}
.table th,.table td{padding:.75rem .75rem;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.table thead th{background:var(--surface-2);font-weight:600}
.table tbody tr:hover{background:rgba(2, 132, 199, .06)} /* leve highlight */

/* Badges */
.badge{display:inline-block;padding:.2rem .5rem;border-radius:999px;background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;font-size:.78rem}
.badge.green{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.badge.amber{background:#fffbeb;color:#92400e;border-color:#fde68a}

/* ===== Toolbar & Filters ===== */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:.8rem 0}
.toolbar .grow{flex:1}
.input-group{display:flex;gap:8px;align-items:center}
.input-group .field{min-width:240px}

/* ===== Pagination ===== */
.pagination{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:1rem}
.pagination a,.pagination span{
  padding:.45rem .7rem;border:1px solid var(--border);
  border-radius:10px;text-decoration:none;color:var(--text);background:var(--surface)
}
.pagination a:hover{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.pagination .active{
  background:var(--primary);border-color:var(--primary-2);color:#fff
}

/* ===== Alerts ===== */
.alert{padding:.75rem .9rem;border-radius:12px;border:1px solid}
.alert.error{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}
.alert.ok{background:#f0fdf4;border-color:#bbf7d0;color:#14532d}
.alert.info{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a}

/* ===== Login page ===== */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login-card{width:100%;max-width:460px}
.login-head{padding:18px 18px 0}
.login-title{margin:0 0 6px 0;font-weight:800;font-size:1.6rem}
.login-sub{margin:0;color:var(--muted)}
.login-body{padding:18px}
.login-actions{display:flex;justify-content:space-between;align-items:center;margin-top:8px}