/* ===== Reset & Base ===== */
*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 400 var(--fs-14)/1.45 var(--font-sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ margin:0 0 var(--sp-12); font-weight:700; }
h1{ font-size: clamp(20px, 2vw, var(--fs-24)); }
.page-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--sp-16); }

/* ===== Layout ===== */
.layout{ display:grid; grid-template-columns: 260px 1fr; gap: var(--sp-16); padding: var(--sp-16); }
.layout-aside{ position:sticky; top:0; align-self:start; height:100%; }
.layout-main{ min-width:0; }

.card{
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding: var(--sp-16);
}
.card + .card{ margin-top: var(--sp-16); }

.page-actions .btn + .btn{ margin-left: var(--sp-8); }

/* ===== Sidebar (parcial) ===== */
.sidebar{ background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding: var(--sp-16); }
.sidebar .brand{ font-size: var(--fs-16); }
.sidebar-menu a{
  display:block; padding:10px 12px; border-radius: var(--radius-md); color: var(--text);
  background: transparent; transition: background .2s, transform .05s;
}
.sidebar-menu a:hover{ background: var(--surface-2); text-decoration:none; }
.sidebar-menu a.active{ background: rgba(43,110,246,.12); color: var(--brand-700); font-weight:600; }

/* ===== Filtros ===== */
.card-filters .filters-grid{
  display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--sp-12); align-items:end;
}
@media (max-width: 1100px){
  .layout{ grid-template-columns: 1fr; }
  .card-filters .filters-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ===== Tabela ===== */
.table-responsive{ overflow:auto; }
.table{ width:100%; border-collapse:separate; border-spacing:0 8px; }
.table thead th{
  text-align:left; font-weight:600; color:var(--muted); font-size: var(--fs-12); padding: 0 var(--sp-12) var(--sp-6);
}
.table tbody tr{
  background:var(--surface); box-shadow: var(--shadow-sm);
}
.table tbody td{
  padding: 10px 12px; background:var(--surface);
  border-top: 1px solid var(--surface-2);
  border-bottom: 1px solid var(--surface-2);
}
.table tbody tr td:first-child{
  border-left: 1px solid var(--surface-2); border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md);
}
.table tbody tr td:last-child{
  border-right: 1px solid var(--surface-2); border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md);
}

/* ===== Form ===== */
.label, label{ font-size: var(--fs-12); color: var(--muted); display:block; margin-bottom: var(--sp-6); }
.input, select, textarea{
  width:100%; border:1px solid var(--surface-2); background:#fff; color:var(--text);
  padding: 10px 12px; border-radius: var(--radius-md); outline:none; transition:border .15s, box-shadow .15s;
}
.input:focus, select:focus, textarea:focus{
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(43,110,246,.15);
}

/* ===== Botões ===== */
.btn{
  --btn-bg: var(--surface-2); --btn-tx: var(--text); --btn-bd: transparent;
  appearance:none; border:1px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-tx);
  padding: 10px 14px; border-radius: var(--radius-md);
  font-weight:600; cursor:pointer; transition: transform .04s ease, filter .15s, background .2s, color .2s;
}
.btn:hover{ filter: brightness(0.98); }
.btn:active{ transform: translateY(1px); }
.btn-primary{ --btn-bg: var(--brand); --btn-tx: #fff; }
.btn-ghost{ --btn-bg: transparent; --btn-bd: var(--surface-2); }
.btn-small{ padding: 6px 10px; font-size: var(--fs-12); }

/* ===== Badges (status) ===== */
.badge{ padding: 2px 8px; border-radius: 999px; font-size: var(--fs-12); font-weight:600; white-space:nowrap; }
.badge-aguardando-ack{ background: var(--badge-ack-bg); color: var(--badge-ack-tx); }
.badge-aguardando-recebimento{ background: var(--badge-rec-bg); color: var(--badge-rec-tx); }
.badge-recebido{ background: var(--badge-done-bg); color: var(--badge-done-tx); }

/* ===== Modais ===== */
.modal-backdrop{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.35); padding: var(--sp-16); z-index:999; }
.modal-backdrop.open{ display:flex; animation: fadeIn .15s ease-out; }
.modal{
  width:100%; max-width: 680px; background: var(--surface);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow:hidden;
  transform: translateY(8px); animation: pop .18s ease-out forwards;
}
.modal-header,.modal-footer{ padding: var(--sp-12) var(--sp-16); background: var(--surface-2); display:flex; align-items:center; justify-content:space-between; }
.modal-body{ padding: var(--sp-16); }
.icon-btn{ background:transparent; border:0; font-size: 22px; line-height:1; cursor:pointer; color: var(--muted); }
.icon-btn:hover{ color: var(--text); }
.grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-12); }
.grid .span-2{ grid-column: span 2; }

@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes pop{ to{ transform: translateY(0) } }

/* ===== Toasts ===== */
.toast{
  position: fixed; top: var(--sp-16); right: var(--sp-16);
  padding: 10px 14px; border-radius: var(--radius-md); color:#fff; z-index: 1000;
  opacity: 0; transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  transition: opacity .25s, transform .25s;
}
.toast-ok{ background: var(--brand); }
.toast-err{ background: var(--danger); }
.toast.show{ opacity:1; transform: translateY(0); }

/* ===== Loading Overlay ===== */
body.loading::after{
  content:""; position:fixed; inset:0; background: rgba(255,255,255,.4); backdrop-filter: blur(1px); z-index: 998;
}

/* ===== Footer/header placeholders (seus parciais) ===== */
[data-partial="header"] .header{
  background:var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--sp-12) var(--sp-16); margin: var(--sp-16);
}
[data-partial="footer"] .footer{
  opacity:.8; font-size: var(--fs-12); text-align:center; padding: var(--sp-16);
}

/* ===== Pequenas utilidades ===== */
.text-muted{ color: var(--muted); }
.mt-8{ margin-top: var(--sp-8); }
.mt-12{ margin-top: var(--sp-12); }
.mt-16{ margin-top: var(--sp-16); }
.w-100{ width:100%; }
.hidden{ display:none !important; }