/* ==========================================================================
   App shell — design system "dashboard" (sidebar + topbar)
   Reaproveita os tokens do base.html (:root --primary-base #b21e4b, etc.)
   ========================================================================== */
:root{
  --sidebar-w: 256px;
  --topbar-h: 60px;
  --r-lg: 18px;
  --r-md: 13px;
  --r-sm: 10px;
}

/* o body do base.html é flex-column; o shell ocupa tudo */
body{ background: var(--bg-body); }

.app-shell{ display:flex; min-height:100vh; }

/* ---------------- Sidebar ---------------- */
.app-sidebar{
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--bg-card);
  border-right: 1px solid var(--border-light);
  display:flex; flex-direction:column;
  position: sticky; top:0; height:100vh;
  padding: 18px 14px; gap: 6px; z-index: 1040;
}
.app-brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:1.15rem; letter-spacing:-.02em;
  color: var(--text-primary); text-decoration:none; padding: 6px 10px 14px;
}
.app-brand .dot{ width:11px; height:11px; border-radius:50%; background:var(--primary-base); box-shadow:0 0 0 4px var(--primary-light-bg); }
.app-brand .muted{ color: var(--text-secondary); font-weight:600; }

.app-nav{ display:flex; flex-direction:column; gap:3px; }
.app-nav-sep{ font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-secondary); font-weight:700; padding:14px 12px 6px; }
.app-nav-item{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:var(--r-md);
  color: var(--text-secondary); text-decoration:none;
  font-weight:600; font-size:.9rem; transition: background .14s, color .14s;
}
.app-nav-item .ic{ font-size:1.05rem; width:22px; text-align:center; }
.app-nav-item:hover{ background: var(--separator-color); color: var(--text-primary); }
.app-nav-item.is-active{ background: var(--primary-light-bg); color: var(--primary-base); }
.app-nav-item.is-active .ic{ filter:none; }
.app-nav-bottom{ margin-top:auto; display:flex; flex-direction:column; gap:3px; padding-top:10px; border-top:1px solid var(--separator-color); }

/* ---------------- Main column ---------------- */
.app-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

.app-topbar{
  height: var(--topbar-h); position: sticky; top:0; z-index:1030;
  display:flex; align-items:center; gap:14px;
  padding: 0 28px;
  background: var(--bg-nav);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border-light);
}
.app-burger{ display:none; background:none; border:none; font-size:1.4rem; color:var(--text-primary); cursor:pointer; padding:4px 6px; border-radius:8px; }
.app-burger:hover{ background:var(--separator-color); }
.app-brand-mobile{ display:none; font-weight:700; color:var(--text-primary); text-decoration:none; }
.app-page-title{ font-weight:700; font-size:1.02rem; letter-spacing:-.01em; color:var(--text-primary); }
.app-topbar-right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.app-user{ font-size:.85rem; color:var(--text-secondary); font-weight:600; }
.app-avatar{ width:34px; height:34px; border-radius:50%; background:var(--primary-base); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.85rem; }

.app-content{ padding: 28px; max-width: 1240px; width:100%; margin:0 auto; }

/* ---------------- Mobile ---------------- */
.app-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1035; }
@media (max-width: 992px){
  .app-sidebar{
    position:fixed; left:0; top:0; transform:translateX(-100%);
    transition: transform .25s ease; box-shadow: var(--shadow-float);
  }
  .app-shell.nav-open .app-sidebar{ transform:translateX(0); }
  .app-shell.nav-open .app-overlay{ display:block; }
  .app-burger, .app-brand-mobile{ display:inline-flex; align-items:center; }
  .app-content{ padding:18px; }
}

/* ==========================================================================
   Componentes (dashboard) — usam os tokens, combinam com Bootstrap
   ========================================================================== */
.page-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.page-title{ font-weight:700; letter-spacing:-.025em; font-size:1.5rem; margin:0; display:flex; align-items:center; gap:10px; }
.page-lead{ color:var(--text-secondary); font-size:.92rem; margin:-8px 0 22px; }

.surface{ background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--r-lg); box-shadow:var(--shadow-card); }
.surface-h{ padding:16px 20px; border-bottom:1px solid var(--separator-color); font-weight:700; font-size:1rem; }
.surface-b{ padding:18px 20px; }
.surface + .surface{ margin-top:20px; }

.dash-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.stat-card{ background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:18px 20px; text-decoration:none; color:var(--text-primary); display:block; transition:transform .12s, box-shadow .15s, border-color .15s; }
.stat-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-float); border-color:var(--primary-light-hover); color:var(--text-primary); }
.stat-card .ic{ width:42px; height:42px; border-radius:12px; background:var(--primary-light-bg); color:var(--primary-base); display:grid; place-items:center; font-size:1.3rem; margin-bottom:12px; }
.stat-card .t{ font-weight:700; font-size:1rem; letter-spacing:-.01em; }
.stat-card .d{ color:var(--text-secondary); font-size:.84rem; margin-top:3px; }

/* ---- Overrides Bootstrap p/ as telas dos módulos ---- */
.card{ border:1px solid var(--border-light)!important; border-radius:var(--r-lg)!important; box-shadow:var(--shadow-card)!important; }
.badge{ font-weight:600; border-radius:999px; padding:.4em .75em; }
.table{ --bs-table-bg:transparent; }
.table > :not(caption) > * > *{ padding:.8rem .9rem; }
.table thead th{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); border-bottom:1px solid var(--separator-color); }
.table td, .table th{ border-color:var(--separator-color); }
.list-group-item{ border-color:var(--border-light); }
.modal-content{ border-radius:var(--r-lg); border:none; box-shadow:var(--shadow-float); }
hr{ border-color:var(--separator-color); opacity:1; }

/* mensagens (reaproveita .alert-custom do base, com leve ajuste) */
.alert-custom{ border-radius:var(--r-md); }

/* ---- Ícones SVG (substituem emojis) ---- */
.app-nav-item svg, .app-nav-bottom svg{ width:19px; height:19px; flex:none; stroke-width:2; }
.stat-card .ic svg{ width:22px; height:22px; stroke-width:2; }
.ico{ width:18px; height:18px; vertical-align:-3px; stroke-width:2; }

/* ---- Pills de status reaproveitáveis ---- */
.pill{ display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:700; padding:4px 11px; border-radius:999px; white-space:nowrap; }
.pill-ok{ background:rgba(52,199,89,.13); color:#1f9d4d; }
.pill-err{ background:rgba(239,68,68,.12); color:#dc2626; }
.pill-warn{ background:rgba(245,158,11,.15); color:#b45309; }
.pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ---- Chip (app instalada, etc.) ---- */
.app-chip{ display:inline-flex; align-items:center; gap:9px; padding:7px 11px; border:1px solid var(--border-light); border-radius:11px; background:#fff; font-size:.86rem; margin:0 8px 8px 0; }
.app-chip .nm{ font-weight:600; color:var(--text-primary); }

/* ==========================================================================
   Unificação de TODAS as tabelas (Bootstrap bordered/striped + .table-modern)
   ========================================================================== */
/* Anula o reset agressivo do project.css: `table, th, td { border:1px solid #000 }`
   — era a causa das bordas pretas/verticais em todas as tabelas. */
table, th, td{ border:0 !important; }
table{ border-collapse:collapse !important; }

.table-bordered, .table-striped, .table-modern, table.table{
  width:100%; border-collapse:collapse !important; margin:0; background:transparent;
  --bs-table-bg:transparent;
}
/* remove bordas pesadas do Bootstrap */
.table-bordered > :not(caption) > * > *,
.table-bordered, .table-striped td, .table-striped th{ border-width:0 !important; box-shadow:none !important; }
.table-striped > tbody > tr:nth-of-type(odd) > *{ --bs-table-accent-bg:transparent; background:transparent; }

.table-bordered thead th, .table-striped thead th, .table-modern thead th, table.table thead th{
  background:#f9fafb; color:var(--text-secondary); font-weight:700; text-transform:uppercase;
  font-size:.72rem; letter-spacing:.045em; padding:.85rem 1.15rem;
  border-bottom:1px solid var(--separator-color) !important; text-align:left; white-space:nowrap;
}
.table-bordered tbody td, .table-striped tbody td, .table-modern tbody td,
.table-bordered tbody th, .table-striped tbody th, .table-modern tbody th,
table.table tbody td, table.table tbody th{
  padding:.95rem 1.15rem; border-bottom:1px solid var(--separator-color) !important;
  font-size:.92rem; color:var(--text-primary); vertical-align:middle;
}
.table-bordered tbody tr:hover, .table-striped tbody tr:hover,
.table-modern tbody tr:hover, table.table tbody tr:hover{ background:var(--primary-light-bg); }
.table-bordered tbody tr:last-child td, .table-striped tbody tr:last-child td,
.table-modern tbody tr:last-child td{ border-bottom:0 !important; }

/* contêiner em card para qualquer tabela */
.table-wrap, .table-modern-container{
  background:var(--bg-card); border:1px solid var(--border-light);
  border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden; margin-bottom:24px;
}

/* ==========================================================================
   MOTION + refinamento (camada dominante p/ uniformizar e dar vida)
   ========================================================================== */

/* --- Tabelas como cartão flutuante, claramente modernas --- */
.table-wrap, .table-modern-container{
  box-shadow: 0 14px 40px -18px rgba(17,24,39,.18) !important;
  border-radius: 18px !important;
}
.table-modern thead th, table.table thead th{
  background: linear-gradient(180deg,#fbfafc,#f6f6f9) !important;
}
.table-modern tbody tr, table.table tbody tr,
.table-bordered tbody tr, .table-striped tbody tr{
  transition: background .18s ease, box-shadow .18s ease;
}
.table-modern tbody tr:hover, table.table tbody tr:hover{
  background: var(--primary-light-bg) !important;
  box-shadow: inset 3px 0 0 var(--primary-base);
}

/* --- Transições uniformes nos componentes --- */
.surface, .table-wrap, .stat-card, .bf-card, .card{
  transition: box-shadow .22s ease, transform .16s ease, border-color .2s ease;
}
.surface:hover{ box-shadow: 0 18px 44px -20px rgba(17,24,39,.16); }
.btn{ transition: transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s, color .15s; }
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0) scale(.99); }
.pill{ transition: transform .15s ease; }
tr:hover .pill{ transform: scale(1.04); }

/* --- Sidebar: barra ativa + leve deslize --- */
.app-nav-item{ position:relative; transition: background .15s, color .15s, transform .12s; }
.app-nav-item:hover{ transform: translateX(2px); }
.app-nav-item.is-active::before{
  content:""; position:absolute; left:2px; top:9px; bottom:9px; width:3px;
  border-radius:3px; background:var(--primary-base);
}
.app-nav-item svg{ transition: transform .15s ease; }
.app-nav-item:hover svg{ transform: scale(1.12); }

/* --- Avatar e topbar --- */
.app-avatar{ transition: transform .15s ease; }
.app-avatar:hover{ transform: scale(1.06); }

/* --- Entradas animadas (entrance) --- */
@media (prefers-reduced-motion: no-preference){
  @keyframes appRise{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
  @keyframes appFade{ from{opacity:0} to{opacity:1} }

  .app-content > *{ animation: appRise .5s cubic-bezier(.2,.8,.2,1) both; }
  .app-content > *:nth-child(1){ animation-delay:.02s }
  .app-content > *:nth-child(2){ animation-delay:.07s }
  .app-content > *:nth-child(3){ animation-delay:.12s }
  .app-content > *:nth-child(4){ animation-delay:.17s }
  .app-content > *:nth-child(5){ animation-delay:.22s }
  .app-content > *:nth-child(n+6){ animation-delay:.26s }

  .dash-grid .stat-card{ animation: appRise .55s cubic-bezier(.2,.8,.2,1) both; }
  .dash-grid .stat-card:nth-child(2){ animation-delay:.06s }
  .dash-grid .stat-card:nth-child(3){ animation-delay:.12s }
  .dash-grid .stat-card:nth-child(4){ animation-delay:.18s }
  .dash-grid .stat-card:nth-child(5){ animation-delay:.24s }
  .dash-grid .stat-card:nth-child(6){ animation-delay:.30s }

  /* linhas da tabela surgem suavemente (até ~12, leve) */
  .table-modern tbody tr, table.table tbody tr{ animation: appFade .4s ease both; }
  .table-modern tbody tr:nth-child(-n+12){ animation: appRise .42s cubic-bezier(.2,.8,.2,1) both; }
  .table-modern tbody tr:nth-child(2){ animation-delay:.03s }
  .table-modern tbody tr:nth-child(3){ animation-delay:.06s }
  .table-modern tbody tr:nth-child(4){ animation-delay:.09s }
  .table-modern tbody tr:nth-child(5){ animation-delay:.12s }
  .table-modern tbody tr:nth-child(6){ animation-delay:.15s }
  .table-modern tbody tr:nth-child(7){ animation-delay:.18s }
  .table-modern tbody tr:nth-child(8){ animation-delay:.21s }

  /* sidebar surge da esquerda */
  .app-sidebar{ animation: appFade .4s ease both; }
}

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* --- Foco acessível e uniforme --- */
.btn:focus-visible, .form-control:focus, .form-select:focus, .bf-input:focus{
  outline: none; box-shadow: 0 0 0 4px var(--primary-light-bg);
}

/* ---- Botão compacto (ações em tabela) ---- */
.btn.btn-xs{ padding:5px 11px !important; font-size:.78rem !important; border-radius:9px !important; box-shadow:none !important; font-weight:600; }
.btn.btn-xs:hover{ transform:none; }
.actions-row{ display:inline-flex; gap:6px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }

/* ---- Tabela compacta (menos altura) ---- */
.table-compact tbody td, .table-compact thead th{ padding:.7rem .9rem !important; }
.table-compact tbody td{ font-size:.88rem; }

/* ---- Variantes de botão complementares (uniformes) ---- */
.btn-ghost{ background:transparent !important; color:var(--text-secondary) !important; border:1px solid var(--border-light) !important; box-shadow:none !important; }
.btn-ghost:hover{ background:var(--separator-color) !important; color:var(--text-primary) !important; }
.btn-soft{ background:var(--primary-light-bg) !important; color:var(--primary-base) !important; box-shadow:none !important; }
.btn-soft:hover{ background:var(--primary-light-hover) !important; color:var(--primary-hover) !important; }
.btn-soft-danger{ background:rgba(239,68,68,.1) !important; color:#dc2626 !important; box-shadow:none !important; }
.btn-soft-danger:hover{ background:rgba(239,68,68,.16) !important; color:#b91c1c !important; }

/* ---- Formulário em duas colunas (input + botão) ---- */
.field-inline{ display:flex; gap:10px; align-items:stretch; }
.field-inline .form-control, .field-inline input{ flex:1; }
.empty-state{ text-align:center; padding:42px 20px; color:var(--text-secondary); }
.empty-state svg{ width:40px; height:40px; opacity:.5; margin-bottom:10px; }