/* =====================================================
   app/static/css/app.css — layout + dashboard (responsivo)
   ===================================================== */

/* ---------- Variáveis e reset simples ---------- */
:root{
  --sidebar-bg:#111; --sidebar-fg:#ddd; --sidebar-accent:#f1c40f;
  --panel-bg:#fff; --border:#e5e7eb; --ink:#111; --muted:#666;
}
*{box-sizing:border-box}
html,body{height:100%}
body.sa-body{margin:0; font-family:system-ui,Arial,sans-serif; color:var(--ink); background:#f6f7f9}
img{max-width:100%; height:auto; display:block}
a{color:#2563eb; text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Topbar ---------- */
.sa-topbar{display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:#fff; border-bottom:1px solid var(--border)}
.sa-brand{font-weight:700}
.sa-top-actions a{margin-left:14px}

/* ---------- Shell (sidebar + conteúdo) ---------- */
.sa-shell{display:flex; min-height:calc(100vh - 48px)}
.sa-sidebar{width:240px; background:var(--sidebar-bg); color:var(--sidebar-fg); padding:12px 0}
.sa-menu-title{font-weight:700; padding:10px 16px}
.sa-menu-group{margin-top:6px}
.sa-menu-group > .title{color:var(--sidebar-accent); font-weight:600; padding:8px 16px}
.sa-menu a{display:block; color:var(--sidebar-fg); padding:8px 16px; border-left:3px solid transparent}
.sa-menu a:hover{background:#1f2937}
.sa-menu a.active{background:#374151; color:#fff; border-left-color:var(--sidebar-accent)}

.sa-content{flex:1; padding:16px}

/* ---------- Componentes base ---------- */
.sa-panel{background:var(--panel-bg); border:1px solid var(--border); border-radius:10px; padding:14px; margin-bottom:20px}
.sa-panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.sa-panel-title{margin:0; font-size:18px}
.sa-panel-note{opacity:.75}
.sa-panel-empty{min-height:180px; display:flex; align-items:center; justify-content:center; color:#888; font-style:italic}

.sa-alert{border:1px solid; border-radius:8px; padding:10px 12px; margin-bottom:12px}
.sa-alert--ok{background:#ecfdf5; border-color:#10b981}
.sa-alert--err{background:#fef2f2; border-color:#ef4444}

.btn{display:inline-block; padding:8px 12px; border-radius:8px; text-decoration:none; border:1px solid var(--border); background:#111; color:#fff}
.btn--muted{background:#f8fafc; color:#111}

/* Tabela base + wrapper seguro para telas estreitas */
.sa-table-wrap{overflow:auto}
.sa-table{width:100%; border-collapse:collapse}
.sa-table th,.sa-table td{border-bottom:1px solid var(--border); padding:8px 10px; text-align:left}
.sa-table th{background:#fafafa; font-weight:600}
.ta-right{text-align:right}

/* ---------- Utilidades de Dashboard ---------- */
.sa-page-title{margin:0 0 16px}
.sa-page-subtitle{color:#666; margin:0 0 20px}
.sa-muted{color:#888}

/* KPIs: de 1 a 5 colunas (responsivo) */
.sa-kpis{display:grid; grid-template-columns:repeat(5,minmax(120px,1fr)); gap:12px; margin-bottom:20px}
.sa-kpi{background:#fff; border:1px solid var(--border); border-radius:8px; padding:12px}
.sa-kpi .label{font-size:12px; color:#6b7280}
.sa-kpi .value{font-size:22px; font-weight:600; margin-top:4px}

/* Grid 2 colunas que vira 1 no mobile */
.sa-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}

/* Cartão do gráfico – o canvas ocupa 100% do cartão */
.sa-chart-card{border:1px dashed var(--border); border-radius:10px; padding:12px; min-height:clamp(220px,30vh,380px); display:flex; align-items:stretch; justify-content:stretch}
.sa-chart-card canvas{width:100% !important; height:100% !important; display:block}

/* ---------- Responsividade ---------- */
@media (max-width: 1024px){ .sa-kpis{grid-template-columns:repeat(4,minmax(120px,1fr))} }
@media (max-width: 900px){ .sa-kpis{grid-template-columns:repeat(3,minmax(120px,1fr))} .sa-grid-2{grid-template-columns:1fr} }
@media (max-width: 640px){ .sa-kpis{grid-template-columns:repeat(2,minmax(120px,1fr))} .sa-sidebar{width:210px} }