:root{
  --bg:#0f1420;
  --surface:#121826;
  --surface-2:#0f1724;
  --text:#e9eefc;
  --muted:#aab4d4;
  --primary:#5b8cff;
  --primary-2:#7a6cff;
  --danger:#ff6b6b;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#0f1420 0%,#0b1020 100%);
  color:var(--text);
  font:400 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 16px;
  background:linear-gradient(90deg,#0f1526 0%, #1a2450 50%, #3e2d82 100%);
  box-shadow:var(--shadow);
}
.icon-btn{
  width:44px;height:44px;border:0;border-radius:12px;background:#1a2140;
  color:#cfe3ff;display:inline-grid;place-items:center;cursor:pointer;
}
.icon-btn:focus-visible{outline:2px solid #6f8dff;outline-offset:2px}
.i-burger, .i-chev{display:inline-block;position:relative}
.i-burger::before, .i-burger::after{
  content:"";display:block;width:18px;height:2px;background:#cfe3ff;border-radius:2px;
}
.i-burger::after{margin-top:6px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand-logo{width:28px;height:28px}
.brand-title{font-weight:700;letter-spacing:.3px}

/* Perfil */
.profile{position:relative;display:flex;align-items:center;gap:8px}
.profile-btn{
  display:flex;align-items:center;gap:8px;border:0;background:#1a2140;color:var(--text);
  padding:6px 12px;border-radius:999px;cursor:pointer;
}
.avatar{width:26px;height:26px;border-radius:50%;background:#2a355e}
.profile-name{max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.i-chev::before{content:"▾";font-size:12px;opacity:.8}
.profile-menu{
  position:absolute;right:0;top:calc(100% + 6px);
  background:#0f1420;border:1px solid #223;border-radius:12px;min-width:180px;
  box-shadow:var(--shadow);padding:6px;
}
.profile-item{
  display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--text);
}
.profile-item:hover{background:#151c33}
.profile-item.danger{color:#ffb3b3}
.profile-menu[hidden]{display:none !important}

/* PWA bar */
.pwa-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;background:#2444ba;color:#fff;
}
.pwa-text small{display:block;opacity:.9}
.btn{border:0;border-radius:12px;padding:10px 14px;cursor:pointer}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff}
.btn-dark{background:#0b1130;color:#cfe3ff}

/* Sidebar */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:280px;background:#0d1323;
  border-right:1px solid #1c2545;
  transform:translateX(-100%);
  transition:transform .25s ease;
  z-index:120;
  display:flex;flex-direction:column;max-width:85vw;
}
.sidebar.open{transform:translateX(0)}
.sb-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid #1c2545;
}
.sb-title{font-weight:700}
.sb-nav{display:flex;flex-direction:column;padding:10px}
.sb-link{
  color:#cfe3ff;text-decoration:none;padding:10px 12px;border-radius:10px;
  margin-bottom:4px;display:block;
}
.sb-link:hover{background:#131a34}
.sb-link.active{background:#1b2550}
.sb-link.danger{color:#ffb3b3}
.sb-sep{height:1px;background:#1c2545;margin:10px 0}
.sb-sec{color:#8fa7ff;font-size:.85rem;margin:6px 0}

/* Backdrop */
.sb-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:110;
}
.sb-backdrop[hidden]{display:none !important}

/* Bloquear scroll */
.no-scroll{overflow:hidden}

/* Conteúdo */
.container{max-width:980px;margin:16px auto;padding:0 16px}
.card{
  background:radial-gradient(1200px 600px at 10% -20%, rgba(124,118,255,.06), transparent 60%),
             linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 60%),
             var(--surface);
  border:1px solid #1c2545;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px;
}
.card h1,.card h2,.card h3{margin:0 0 12px}

/* Form padrão */
label{display:block;margin:10px 0 6px;color:var(--muted)}
.input,
input[type="text"],
input[type="number"],
input[type="date"],
textarea,
select{
  width:100%;background:#0f172a;border:1px solid #1e2a4d;color:var(--text);
  border-radius:12px;padding:12px 14px;outline:0;
}
.input:focus,
input:focus,
textarea:focus,
select:focus{
  border-color:#2b55ff;
  box-shadow:0 0 0 3px rgba(65,105,225,.25);
}
.btn-grad{
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  color:#fff;border:0;border-radius:14px;padding:12px 16px;font-weight:600;cursor:pointer;
}
.mt-3{margin-top:12px}
.mt-4{margin-top:16px}

/* Títulos */
.page-title{
  display:flex;align-items:center;gap:10px;
  font-size:clamp(22px,5vw,36px);
  font-weight:800;margin:18px 0 14px;
}
.page-title .emoji{font-size:1.2em}

/* ==== LISTA MAIS VISÍVEL ==== */
.section-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.section-head h2{margin:0}
.kpis{display:flex;gap:8px;flex-wrap:wrap}
.kpi{font-size:.85rem;opacity:.8;background:#0f172a;border:1px solid #1e2a4d;padding:6px 10px;border-radius:999px}

/* Tabela responsiva e sem quebra */
.table-wrap{overflow:auto;border-radius:12px;border:1px solid #1c2545;background:#0f172a}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{
  position:sticky;top:0;background:#111a33;z-index:1;
  text-align:left;font-weight:700;color:#cfe3ff;border-bottom:1px solid #1c2545;
  padding:12px 14px;
}
.table tbody td{
  padding:12px 14px;border-bottom:1px solid #182246;
  white-space:nowrap;           /* NÃO QUEBRAR */
  overflow:hidden;text-overflow:ellipsis;
}
.table tbody tr:last-child td{border-bottom:0}

/* colunas com largura controlada p/ não “explodir” no mobile */
.col-data{width:120px}
.col-valor{width:120px;text-align:right}
.col-fonte{min-width:160px;max-width:260px}
.col-obs{min-width:180px;max-width:360px}

/* Layout: primeiro a lista, depois o formulário; lado a lado no desktop */
.grid-page{display:grid;gap:16px}
@media (min-width: 900px){
  .grid-page{grid-template-columns: 1fr 1fr}
  .card--list{order:1}
  .card--form{order:2; position:sticky; top:82px}
}
@media (max-width: 899px){
  .card--list{order:1}
  .card--form{order:2}
}

/* Mobile finos */
@media (max-width: 420px){
  .btn-grad{width:100%}
  .table thead th, .table tbody td{padding:10px 12px;font-size:14px}
}
/* ============================
   CARDS 100% RESPONSIVOS
   — cole no FIM do app.css —
   ============================ */

/* base: card ocupa 100% da largura útil */
.card{
  width:100%;
  max-width:100%;
  display:block;
  border-radius:16px;
  padding:18px;
  overflow:hidden;              /* garante que nada “vaze” das bordas */
}

/* grid que recebe os cards (lista + form) */
.grid-page{
  display:grid;
  grid-template-columns:1fr;    /* mobile: empilhado */
  gap:16px;
}

/* header/body/footer opcionais dentro do card */
.card__header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card__body{min-width:0}        /* permite ellipsis dentro do card */
.card__footer{display:flex;gap:10px;flex-wrap:wrap}

/* elementos comuns dentro dos cards */
.kpis{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.kpi{white-space:nowrap}

/* Tabelas e wrappers dentro do card nunca “explodem” */
.table-wrap{width:100%;max-width:100%;overflow:auto;border-radius:12px}
.table{width:100%;max-width:100%;border-collapse:separate;border-spacing:0}
.table thead th,.table tbody td{padding:12px 14px}

/* formulário dentro do card: inputs 100% */
.card input[type="text"],
.card input[type="number"],
.card input[type="date"],
.card textarea,
.card select{width:100%}

/* ====== breakpoints ====== */

/* tablets/entre 600–899px: 2 colunas balanceadas */
@media (min-width:600px){
  .grid-page{grid-template-columns:1fr}
  .container{padding:0 16px}
  .card{padding:18px}
}
@media (min-width:900px){
  .grid-page{grid-template-columns:1fr 1fr}
  .card--list{order:1}
  .card--form{order:2; position:sticky; top:86px} /* form cola sob a topbar */
}

/* celulares (≤ 540px): reduz padding/raio/sombra */
@media (max-width:540px){
  .container{padding:0 12px}
  .card{padding:14px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.28)}
  .card__header{gap:8px}
  .table thead th,.table tbody td{padding:10px 12px}
}

/* celulares estreitos (≤ 420px): esconde colunas largas e reforça layout */
@media (max-width:420px){
  /* se você usa .col-obs na tabela, oculta no mobile */
  .table thead th.col-obs,
  .table tbody td.col-obs{display:none}
  .kpi{font-size:.82rem;padding:4px 8px}
}

/* bem estreito (≤ 360px) */
@media (max-width:360px){
  .card{padding:12px}
  .table thead th,.table tbody td{padding:8px 10px}
}