/* ========================
   FONTES LOCAIS (TTF)
   ======================== */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/ibm-plex-sans/IBMPlexSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/ibm-plex-sans/IBMPlexSans-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/ibm-plex-sans/IBMPlexSans-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ========================
   VARIÁVEIS
   ======================== */
:root{
  --bg:#0f172a;             /* slate-900 */
  --bg-2:#0b1222;           /* mais escuro */
  --card:#111827;           /* gray-900 */
  --muted:#9ca3af;          /* gray-400 */
  --txt:#e5e7eb;            /* gray-200 */
  --pri:#22c55e;            /* green-500 */
  --pri-600:#16a34a;
  --pri-700:#15803d;
  --danger:#ef4444;
  --radius:14px;
  --shadow:0 8px 28px rgba(0,0,0,.35);
  --ring:#2563eb;
  --trans: all .18s ease;
}

/* ========================
   RESET + BASE
   ======================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{
  background: radial-gradient(1200px 800px at 10% -10%, #0b1324 0%, var(--bg) 40%) fixed;
  color:var(--txt); line-height:1.45;
  font-family:'IBM Plex Sans',sans-serif; font-weight:400;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
a{color:#93c5fd;text-decoration:none;transition:var(--trans)}
a:hover{color:#bfdbfe}

/* ========================
   TIPOGRAFIA
   ======================== */
h1,h2,h3,h4,h5,h6{font-weight:700;margin-bottom:.5em;letter-spacing:.2px}
label,.btn,.topbar .brand,.table th{font-weight:500}

/* ========================
   TOPBAR (glass)
   ======================== */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid #1f2937cc;
  background:linear-gradient(180deg, rgba(17,24,39,.55), rgba(11,18,34,.45));
  backdrop-filter: blur(10px);
}
.topbar .brand{font-size:18px;margin:0}
.topbar a{color:var(--muted);margin-left:12px}
.topbar a:hover{color:#fff}

/* ========================
   CONTAINERS & CARDS (glass)
   ======================== */
.container{max-width:980px;margin:28px auto;padding:0 16px}
.card{
  background: linear-gradient(180deg, rgba(17,24,39,.86), rgba(14,20,35,.86));
  border:1px solid rgba(51,65,85,.55);
  border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
  backdrop-filter: blur(8px);
  transition: var(--trans);
}
.card.elevate:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.45)}

/* ========================
   FORMULÁRIOS
   ======================== */
form .row{display:flex;gap:12px;flex-wrap:wrap}
label{display:block;margin:6px 0 4px;color:var(--muted);font-size:14px}

input,select,textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid #334155; background:var(--bg-2); color:#fff; outline:none;
  transition: var(--trans);
}
input::placeholder,textarea::placeholder{color:#94a3b8}
input:hover,select:hover,textarea:hover{border-color:#3b82f6aa}
input:focus,select:focus,textarea:focus{
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(37,99,235,.18), inset 0 0 0 1px rgba(37,99,235,.15);
  background:#0c1426;
}
.form-help{font-size:12px;color:#94a3b8;margin-top:6px}

/* campo com ícone opcional */
.input-wrap{position:relative}
.input-wrap .icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.7;
}
.input-wrap input{padding-left:40px}

/* ========================
   BOTÕES
   ======================== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:0; border-radius:12px; padding:10px 16px;
  background:linear-gradient(180deg, var(--pri), var(--pri-600));
  color:#052e16; cursor:pointer; transition:var(--trans); will-change:transform;
  box-shadow: 0 6px 18px rgba(34,197,94,.25);
}
.btn:hover{background:linear-gradient(180deg, var(--pri-600), var(--pri-700)); color:#eafff1; transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.99)}
.btn[disabled]{opacity:.5; cursor:not-allowed; box-shadow:none}

.btn.secondary{
  background:linear-gradient(180deg, #1f2937, #111827);
  color:#e5e7eb; box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.btn.secondary:hover{background:linear-gradient(180deg,#273449,#172033)}

.btn.outline{
  background:transparent; color:#e5e7eb;
  border:1px solid #334155;
}
.btn.outline:hover{background:#0b1222}

.btn.ghost{
  background:transparent; color:#a3e635;
}
.btn.ghost:hover{background:#0b1222; color:#d9f99d}

/* ========================
   TABELAS
   ======================== */
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th{color:var(--muted);text-align:left;font-size:13px;padding:6px 10px}
.table tbody tr{transition:var(--trans)}
.table td{
  background:rgba(11,18,34,.9);
  border:1px solid #1f2937; padding:12px 14px; transition:var(--trans)
}
.table tr:hover td{background:#0e172a; border-color:#2a3a52}

/* Ações */
.actions a{margin-right:10px}
.actions a:hover{filter:brightness(1.15)}

/* ========================
   FEEDBACKS
   ======================== */
.alert{
  background:linear-gradient(180deg,#7f1d1d,#5b1212);
  color:#fecaca; border:1px solid #b91c1c; padding:12px 14px;
  border-radius:12px; margin:10px 0; box-shadow:0 8px 24px rgba(185,28,28,.15)
}
.notice{
  background:linear-gradient(180deg,#1e293b,#0f172a);
  color:#c7d2fe; border:1px solid #334155; padding:12px 14px;
  border-radius:12px; margin:10px 0
}

/* ========================
   FOOTER
   ======================== */
.footer{opacity:.6;text-align:center;padding:24px 0}

/* ========================
   LOGIN
   ======================== */
.login{max-width:420px;margin:12vh auto}
.login h2{margin:0 0 18px; text-shadow:0 2px 12px rgba(0,0,0,.35)}
.login .card{padding:24px}
.login .hint{font-size:13px;color:var(--muted)}

/* ========================
   UTILITÁRIOS
   ======================== */
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:768px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}

.badge{
  display:inline-block; padding:4px 8px; border-radius:999px;
  background:#0b1222; border:1px solid #334155; color:#cbd5e1; font-size:12px
}