:root{
  --bg:#0a0c10;
  --bg2:#11151b;
  --card:rgba(19,24,32,.88);
  --card2:rgba(25,31,42,.92);
  --line:rgba(255,255,255,.08);
  --text:#edf2f7;
  --muted:#94a3b8;
  --primary:#5b8cff;
  --primary2:#7c5cff;
  --success:#19c37d;
  --warning:#f5b942;
  --danger:#ff5d73;
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --radius:22px;
}

html,body{
  background:
    radial-gradient(circle at top left, rgba(91,140,255,.18), transparent 28%),
    radial-gradient(circle at top right, rgba(124,92,255,.15), transparent 24%),
    linear-gradient(180deg,#090b0f 0%,#0d1015 100%);
  color:var(--text);
  min-height:100%;
}

body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

a{ text-decoration:none; }

.app-shell{
  max-width:1180px;
  margin:0 auto;
  padding:20px 14px 40px;
}

.topbar{
  position:sticky;
  top:10px;
  z-index:1000;
  backdrop-filter:blur(14px);
  background:rgba(10,12,16,.7);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:14px 16px;
  margin-bottom:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-badge{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
  font-size:1.1rem;
  box-shadow:0 10px 30px rgba(91,140,255,.32);
}

.brand-title{
  margin:0;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.2px;
}

.brand-sub{
  margin:0;
  color:var(--muted);
  font-size:.82rem;
}

.glass-card{
  background:linear-gradient(180deg,rgba(24,29,38,.95),rgba(16,20,28,.92));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.soft-card{
  background:linear-gradient(180deg,rgba(23,28,37,.85),rgba(16,19,26,.85));
  border:1px solid var(--line);
  border-radius:20px;
}

.kpi-card{
  padding:18px;
  height:100%;
}

.kpi-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  color:#cfe0ff;
  font-size:1.2rem;
  margin-bottom:14px;
}

.kpi-label{
  color:var(--muted);
  font-size:.85rem;
  margin-bottom:6px;
}

.kpi-value{
  font-size:1.8rem;
  font-weight:800;
  line-height:1;
}

.hero-card{
  padding:22px;
}

.hero-title{
  font-size:1.35rem;
  font-weight:800;
  margin-bottom:8px;
}

.hero-text{
  color:var(--muted);
  margin:0;
}

.action-card{
  padding:18px;
  height:100%;
  transition:.2s ease;
}

.action-card:hover{
  transform:translateY(-2px);
  border-color:rgba(91,140,255,.28);
}

.action-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(91,140,255,.18),rgba(124,92,255,.18));
  color:#d9e6ff;
  font-size:1.25rem;
  margin-bottom:14px;
}

.action-title{
  font-weight:700;
  margin-bottom:6px;
}

.action-text{
  color:var(--muted);
  font-size:.92rem;
  margin-bottom:16px;
}

.btn-premium{
  border:none;
  border-radius:14px;
  padding:12px 16px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 12px 30px rgba(91,140,255,.24);
}

.btn-premium:hover{
  color:#fff;
  filter:brightness(1.05);
}

.btn-darksoft{
  border:1px solid var(--line);
  color:var(--text);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px 16px;
  font-weight:600;
}

.btn-darksoft:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
}

.page-title{
  font-size:1.3rem;
  font-weight:800;
  margin:0;
}

.page-subtitle{
  color:var(--muted);
  margin:4px 0 0;
  font-size:.92rem;
}

.form-control,
.form-select{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  border-radius:14px;
  padding:12px 14px;
}

.form-control:focus,
.form-select:focus{
  background:rgba(255,255,255,.05);
  color:var(--text);
  border-color:rgba(91,140,255,.45);
  box-shadow:0 0 0 .25rem rgba(91,140,255,.14);
}

.form-control::file-selector-button{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:10px 14px;
  margin-right:12px;
}

.dropzone-fake{
  border:1.5px dashed rgba(255,255,255,.14);
  border-radius:20px;
  padding:26px 18px;
  text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
}

.dropzone-icon{
  font-size:2rem;
  color:#b9ccff;
  margin-bottom:10px;
}

.table-dark-premium{
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: rgba(255,255,255,.08);
  margin:0;
}

.table-dark-premium thead th{
  color:#b9c4d5;
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-bottom-color:rgba(255,255,255,.08);
}

.table-dark-premium td{
  vertical-align:middle;
  border-color:rgba(255,255,255,.06);
}

.badge-status{
  border-radius:999px;
  padding:8px 10px;
  font-weight:700;
  font-size:.72rem;
}

.status-processed{ background:rgba(25,195,125,.14); color:#7ef0bc; }
.status-partial{ background:rgba(245,185,66,.14); color:#ffd57c; }
.status-error{ background:rgba(255,93,115,.14); color:#ff9baa; }
.status-pending{ background:rgba(91,140,255,.14); color:#b7ceff; }

.list-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  margin:0 8px 8px 0;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  color:#dde7f8;
  font-size:.88rem;
}

textarea.form-control{
  min-height:320px;
}

.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.login-card{
  width:100%;
  max-width:440px;
  padding:28px;
}

.login-logo{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:18px;
  margin:0 auto 18px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 18px 40px rgba(91,140,255,.28);
  font-size:1.4rem;
  color:#fff;
}

.muted{
  color:var(--muted)!important;
}

.section-gap{
  margin-top:18px;
}

/* barra de ações do topo — desktop: botões lado a lado */
.topbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
/* o botão hambúrguer não aparece no desktop */
.nav-toggle{ display:none; }

/* ============================================================
   MOBILE — celular (≤ 767.98px)
   Adicionado sem alterar o desktop acima.
   ============================================================ */
@media (max-width: 767.98px){
  .app-shell{ padding:12px 10px 28px; }

  /* ---- Topbar / hambúrguer ---- */
  .topbar{
    top:8px; border-radius:16px; padding:12px 14px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .brand-title{ font-size:.95rem; }
  .brand-sub{ font-size:.72rem; }
  .brand-badge{ width:38px; height:38px; font-size:1rem; }

  /* botão hambúrguer (aparece só no mobile) */
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:12px;
    background:rgba(255,255,255,.05); border:1px solid var(--line);
    color:var(--text); font-size:1.3rem; cursor:pointer; flex-shrink:0;
  }
  /* a barra de ações do topo vira menu dropdown */
  .topbar .topbar-actions{
    display:none;
    position:absolute; top:calc(100% + 8px); right:12px; left:12px;
    flex-direction:column; gap:8px;
    background:var(--card2); border:1px solid var(--line);
    border-radius:16px; padding:12px; box-shadow:var(--shadow); z-index:1001;
  }
  .topbar .topbar-actions.open{ display:flex; }
  .topbar .topbar-actions .btn{ width:100%; justify-content:center; padding:13px 16px; }

  /* ---- Botões: alvo de toque mínimo 46px ---- */
  .btn, .btn-premium, .btn-darksoft{ min-height:46px; padding:12px 16px; }
  .btn-sm{ min-height:42px; padding:9px 14px; font-size:.85rem; }

  /* ---- Formulários: 16px evita zoom automático no iOS ---- */
  .form-control, .form-select{ font-size:16px; padding:13px 14px; }
  textarea.form-control{ min-height:180px; }
  .login-card{ padding:22px 18px; }
  .login-wrap{ padding:14px; align-items:flex-start; padding-top:32px; }

  /* ---- Cards / hero ---- */
  .hero-card{ padding:18px; }
  .hero-title{ font-size:1.1rem; }
  .hero-text{ font-size:.9rem; }
  .kpi-card{ padding:15px; }
  .kpi-value{ font-size:1.5rem; }
  .kpi-icon{ width:40px; height:40px; font-size:1rem; margin-bottom:10px; }
  .action-card{ padding:16px; }
  .page-title{ font-size:1.15rem; }

  /* ---- TABELAS → viram cards no celular ----
     Cada <tr> vira um bloco; cada <td> ganha o rótulo da coluna
     via data-label. Some o <thead>. Aplica em qualquer .table-dark-premium
     marcada com .table-cards. */
  table.table-cards thead{ display:none; }
  table.table-cards, table.table-cards tbody,
  table.table-cards tr, table.table-cards td{ display:block; width:100%; }
  table.table-cards tr{
    background:var(--card2); border:1px solid var(--line);
    border-radius:16px; padding:12px 14px; margin-bottom:12px;
  }
  table.table-cards td{
    border:none; padding:6px 0;
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    text-align:right;
  }
  table.table-cards td::before{
    content:attr(data-label);
    color:var(--muted); font-size:.78rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.03em;
    text-align:left; flex-shrink:0;
  }
  /* célula de ações ocupa a linha toda, botões lado a lado */
  table.table-cards td.cell-actions{
    justify-content:flex-start; flex-wrap:wrap; padding-top:10px;
  }
  table.table-cards td.cell-actions::before{ display:none; }
  table.table-cards td.cell-actions .btn,
  table.table-cards td.cell-actions form{ flex:1; min-width:120px; }
  table.table-cards td.cell-actions form .btn{ width:100%; }

  /* scroll horizontal suave pra tabelas que preferimos manter em grade */
  .table-responsive{ -webkit-overflow-scrolling:touch; }

  /* estatística: 2 colunas no celular em vez de 4 apertadas */
  .stat-grid > [class*="col-"]{ }
}

/* telas bem estreitas */
@media (max-width: 380px){
  .brand-sub{ display:none; }
  .kpi-value{ font-size:1.35rem; }
}