/* ===========================================================================
   ADMIN — tema ESCURO + denso (desktop), no design system do APP (dark scheme).
   Menu lateral + abas/sub-abas. Verde #0d3322 · laranja #c5681f · Fraunces+Manrope.
   Escopo: .admin-shell (painel) + #modal-root (modais). Não toca student/login.
   =========================================================================== */
:root {
  --ad-bg: #0c1611;
  --ad-surface: #14241b;
  --ad-alt: #182c20;
  --ad-sunken: #0f1d16;
  --ad-elev: #1b2f23;
  --ad-border: #243a2c;
  --ad-border-soft: #1c2e23;
  --ad-text: #e8efe9;
  --ad-muted: #9bb0a2;
  --ad-subtle: #6f8576;
  --ad-primary: #6ab088;
  --ad-accent: #e0832f;
  --ad-accent-strong: #f0954a;
  --ad-success: #5fc187;
  --ad-warning: #e0a94a;
  --ad-danger: #e0654f;
  --ad-info: #5aa9cf;
  --ad-display: "Fraunces", Georgia, serif;
  --ad-body: "Manrope", system-ui, -apple-system, sans-serif;
}

/* ---------- shell: sidebar + main ---------- */
.admin-shell {
  display: grid; grid-template-columns: 236px 1fr; min-height: 100vh;
  background: var(--ad-bg); color: var(--ad-text); font-family: var(--ad-body);
}
.admin-side {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
  background: var(--ad-sunken); border-right: 1px solid var(--ad-border);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 6px;
}
.admin-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 18px; }
.admin-brand img { width: 26px; height: 32px; object-fit: contain; }
.admin-brand b { display: block; font-family: var(--ad-display); font-weight: 700; font-size: 15px; letter-spacing: -.2px; color: #fff; line-height: 1.1; }
.admin-brand span { font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ad-accent); }
.admin-nav { display: flex; flex-direction: column; gap: 4px; }
.admin-nav button {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 13px; border: 0; border-radius: 13px; background: transparent;
  color: var(--ad-muted); font: 600 13.5px var(--ad-body); cursor: pointer; transition: background .15s, color .15s;
}
.admin-nav button:hover { background: var(--ad-surface); color: var(--ad-text); }
.admin-nav button.active { background: linear-gradient(120deg, #16442e, #123a27); color: #fff; box-shadow: inset 0 0 0 1px #2c5a3f; }
.admin-nav .ic { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
.admin-nav .ic svg { width: 19px; height: 19px; }
.admin-nav button.active .ic { color: var(--ad-accent-strong); }
.admin-side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ad-border); display: flex; flex-direction: column; gap: 8px; }
.admin-who b { display: block; font-size: 11.5px; color: var(--ad-muted); word-break: break-all; }
.admin-main { min-width: 0; padding: 28px clamp(18px, 3vw, 40px) 90px; }

/* ---------- títulos / textos ---------- */
.admin-shell .head { margin-bottom: 20px; }
.admin-shell .head h2, .admin-shell h2, .admin-shell .panel h3 { font-family: var(--ad-display); font-weight: 700; color: #fff; letter-spacing: -.6px; }
.admin-shell .head h2 { font-size: 30px; line-height: 1.05; }
.admin-shell .head p, .admin-shell .muted, .admin-shell .panel .muted { color: var(--ad-muted); }
.admin-shell .overline, .admin-shell .mini-label { color: var(--ad-subtle); font-weight: 700; }
.admin-shell .divider { background: var(--ad-border); }

/* ---------- sub-abas (estilo app: Resumo / Pagamentos…) ---------- */
.subtabs { display: inline-flex; gap: 4px; background: var(--ad-sunken); border: 1px solid var(--ad-border); border-radius: 13px; padding: 4px; margin-bottom: 18px; }
.subtabs button { border: 0; background: transparent; color: var(--ad-muted); font: 600 12.5px var(--ad-body); padding: 8px 15px; border-radius: 9px; cursor: pointer; }
.subtabs button.on { background: var(--ad-elev); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* ---------- cards ---------- */
.admin-shell .panel { background: var(--ad-surface); background-image: none; color: var(--ad-text); border: 1px solid var(--ad-border); border-radius: 18px; box-shadow: 0 10px 26px rgba(0,0,0,.28); padding: 20px; }
.admin-shell .split { grid-template-columns: 360px 1fr; gap: 18px; }

/* ---------- KPIs → StatCard ---------- */
.admin-shell .kpis { gap: 14px; }
.admin-shell .kpi { position: relative; overflow: hidden; background: var(--ad-surface); border: 1px solid var(--ad-border); border-radius: 16px; box-shadow: 0 8px 20px rgba(0,0,0,.24); padding: 15px 16px 13px; }
.admin-shell .kpi::before { content: ""; position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 10px; background: rgba(224,131,47,.16); }
.admin-shell .kpi.warn::before { background: rgba(224,169,74,.18); }
.admin-shell .kpi.off::before { background: rgba(224,101,79,.18); }
.admin-shell .kpi span { color: var(--ad-subtle); }
.admin-shell .kpi b { font-family: var(--ad-display); font-weight: 700; font-size: 25px; letter-spacing: -.6px; color: var(--ad-success); }
.admin-shell .kpi.warn b { color: var(--ad-warning); }
.admin-shell .kpi.off b { color: var(--ad-danger); }
.admin-shell .kpi:nth-child(4) b { color: #fff; }
.admin-shell .kpi i { color: var(--ad-subtle); }

/* ---------- tabela densa ---------- */
.dtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.dtable th { padding: 11px 14px; text-align: left; color: var(--ad-subtle); font-weight: 700; font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; border-bottom: 1px solid var(--ad-border); }
.dtable td { padding: 11px 14px; border-bottom: 1px solid var(--ad-border-soft); color: var(--ad-text); vertical-align: middle; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable tbody tr { transition: background .12s; }
.dtable tbody tr:hover { background: var(--ad-alt); }
.dtable .num { font-family: var(--ad-display); font-weight: 600; }
.dtable .who { display: flex; align-items: center; gap: 10px; }
.dtable .av { width: 32px; height: 32px; border-radius: 10px; background: rgba(106,176,136,.16); color: var(--ad-primary); display: grid; place-items: center; font: 600 13px var(--ad-display); flex: none; }
.dtable .who b { display: block; color: #fff; font-size: 13.5px; font-weight: 600; }
.dtable .who span { font-size: 11.5px; color: var(--ad-subtle); }
.dtable .acts { text-align: right; white-space: nowrap; }

/* ---------- master-detail (Cadastro) ---------- */
.md { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }
.md-list { background: var(--ad-surface); border: 1px solid var(--ad-border); border-radius: 18px; box-shadow: 0 10px 26px rgba(0,0,0,.28); overflow: hidden; }
.md-tools { padding: 14px; border-bottom: 1px solid var(--ad-border); display: flex; flex-direction: column; gap: 10px; }
.md-rows { max-height: 70vh; overflow-y: auto; }
.md-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--ad-border-soft); background: transparent; color: var(--ad-text); cursor: pointer; transition: background .12s; }
.md-row:hover { background: var(--ad-alt); }
.md-row.sel { background: linear-gradient(120deg, #16442e, #123a27); }
.md-row .av { width: 36px; height: 36px; border-radius: 11px; background: rgba(106,176,136,.16); color: var(--ad-primary); display: grid; place-items: center; font: 600 14px var(--ad-display); flex: none; }
.md-row.sel .av { background: rgba(255,255,255,.14); color: #fff; }
.md-row .info { flex: 1; min-width: 0; }
.md-row .info b { display: block; font-size: 14px; color: #fff; }
.md-row .info span { font-size: 11.5px; color: var(--ad-muted); }
.md-detail { background: var(--ad-surface); border: 1px solid var(--ad-border); border-radius: 18px; box-shadow: 0 10px 26px rgba(0,0,0,.28); padding: 22px; min-height: 60vh; }
.md-empty { display: grid; place-items: center; min-height: 60vh; color: var(--ad-subtle); text-align: center; }
.detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.detail-head .av { width: 54px; height: 54px; border-radius: 15px; background: rgba(106,176,136,.16); color: var(--ad-primary); display: grid; place-items: center; font: 700 22px var(--ad-display); flex: none; }
.detail-head h2 { margin: 0; font-size: 24px; }
.detail-sec { margin-top: 18px; }
.detail-sec > .mini-label { margin: 0 0 10px; }
@media (max-width: 980px) { .md { grid-template-columns: 1fr; } .md-rows { max-height: 320px; } }

/* ---------- detalhes (dl) ---------- */
.admin-shell .dl-grid, #modal-root .dl-grid { gap: 14px 18px; }
.admin-shell .dl span, #modal-root .dl span { color: var(--ad-subtle); }
.admin-shell .dl b, #modal-root .dl b { color: var(--ad-text); }
.admin-shell .agenda-mini, #modal-root .agenda-mini { color: var(--ad-text); }
.admin-shell .login-box, #modal-root .login-box { background: var(--ad-sunken); border: 1px solid var(--ad-border); border-radius: 14px; }
.admin-shell .login-box-head b, #modal-root .login-box-head b { color: #fff; }

/* ---------- badges ---------- */
.admin-shell .badge, #modal-root .badge { border-radius: 999px; font-family: var(--ad-body); font-weight: 700; font-size: 11px; letter-spacing: .2px; padding: 4px 10px; }
.badge-ok { background: rgba(95,193,135,.15); color: #7fd3a3; }
.badge-warn { background: rgba(224,169,74,.16); color: #e0b266; }
.badge-off { background: rgba(224,101,79,.16); color: #eb8a78; }
.badge-info { background: rgba(90,169,207,.16); color: #87c2de; }

/* ---------- botões ---------- */
.admin-shell .btn, #modal-root .btn { border-radius: 13px; font-family: var(--ad-body); font-weight: 700; letter-spacing: .2px; text-transform: none; transition: transform .14s, background .2s, border-color .2s, box-shadow .2s; }
.admin-shell .btn:active, #modal-root .btn:active { transform: scale(.97); }
.btn-orange { background: var(--ad-accent); color: #16100a; }
.btn-orange:hover { background: var(--ad-accent-strong); }
.admin-shell .btn-ghost, #modal-root .btn-ghost { border: 1px solid var(--ad-border); color: var(--ad-text); background: transparent; }
.admin-shell .btn-ghost.on-light, #modal-root .btn-ghost.on-light { border: 1px solid var(--ad-border); color: var(--ad-text); background: var(--ad-elev); }
.admin-shell .btn-ghost:hover, #modal-root .btn-ghost:hover, .admin-shell .btn-ghost.on-light:hover, #modal-root .btn-ghost.on-light:hover { border-color: var(--ad-accent); color: var(--ad-accent-strong); }
.admin-shell .linklike, #modal-root .linklike { color: var(--ad-accent-strong); }
.admin-shell .icon-btn, #modal-root .icon-btn { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--ad-border); background: var(--ad-elev); color: var(--ad-muted); }
.admin-shell .icon-btn:hover, #modal-root .icon-btn:hover { border-color: var(--ad-accent); color: var(--ad-accent-strong); }
.admin-shell .icon-btn.danger:hover, #modal-root .icon-btn.danger:hover { border-color: var(--ad-danger); color: var(--ad-danger); }
.admin-shell .icon-btn.go:hover, #modal-root .icon-btn.go:hover { border-color: var(--ad-primary); color: var(--ad-primary); }

/* ---------- campos ---------- */
.admin-shell .field input, .admin-shell .field select, .admin-shell .field textarea, .admin-shell .ead-search,
#modal-root .field input, #modal-root .field select, #modal-root .field textarea {
  border-radius: 13px; border: 1px solid var(--ad-border); background: var(--ad-sunken); color: var(--ad-text); font-family: var(--ad-body);
}
.admin-shell .field input:focus, .admin-shell .field select:focus, .admin-shell .field textarea:focus,
#modal-root .field input:focus, #modal-root .field select:focus, #modal-root .field textarea:focus {
  border-color: var(--ad-accent); box-shadow: 0 0 0 3px rgba(224,131,47,.16); background: var(--ad-alt); outline: 0;
}
.admin-shell .field span, #modal-root .field span { color: var(--ad-subtle); }
.admin-shell .field input::placeholder, #modal-root .field input::placeholder { color: var(--ad-subtle); }

/* ---------- listas simples ---------- */
.admin-shell .list-row { border-top: 1px solid var(--ad-border-soft); }
.admin-shell .list-row .info b, #modal-root .list-row .info b { color: #fff; }
.admin-shell .list-row .info span, #modal-root .list-row .info span { color: var(--ad-muted); }
.admin-shell .avatar, #modal-root .avatar { border-radius: 12px; background: rgba(106,176,136,.16); color: var(--ad-primary); font-family: var(--ad-display); }
.admin-shell .empty, #modal-root .empty { color: var(--ad-subtle); }
.admin-shell .loading-mini, #modal-root .loading-mini { color: var(--ad-muted); padding: 36px; text-align: center; }
.admin-shell .month-nav b { font-family: var(--ad-display); color: #fff; letter-spacing: -.4px; }

/* ---------- modais (não-EAD) → cartão escuro ---------- */
#modal-root .modal:not(.ead-modal) { background: var(--ad-surface); color: var(--ad-text); font-family: var(--ad-body); border: 1px solid var(--ad-border); border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
#modal-root .modal:not(.ead-modal) h2, #modal-root .modal:not(.ead-modal) h3 { font-family: var(--ad-display); color: #fff; }
#modal-root .modal:not(.ead-modal) .overline, #modal-root .modal:not(.ead-modal) .mini-label { color: var(--ad-subtle); }
#modal-root .modal .close { background: var(--ad-elev); color: var(--ad-text); border: 1px solid var(--ad-border); }

@media (max-width: 760px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--ad-border); }
  .admin-brand { display: none; }
  .admin-nav { flex-direction: row; }
  .admin-nav button { white-space: nowrap; }
  .admin-side-foot { display: none; }
  .admin-main { padding: 18px; }
  .admin-shell .kpis { grid-template-columns: 1fr 1fr; }
}

/* ---------- filtros pequenos (cadastro) ---------- */
.subtabs.subtabs-sm { margin: 0; padding: 3px; border-radius: 11px; }
.subtabs.subtabs-sm button { padding: 6px 11px; font-size: 11.5px; }

/* ---------- Financeiro: animação de troca de mês ---------- */
@keyframes finSlideL { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes finSlideR { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes finFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fin-slide-l { animation: finSlideL .32s cubic-bezier(.22,.61,.36,1); }
.fin-slide-r { animation: finSlideR .32s cubic-bezier(.22,.61,.36,1); }
.fin-fade { animation: finFade .3s ease; }

/* ---------- Financeiro: Resumo (igual app) ---------- */
.fin-hero { position: relative; overflow: hidden; background: linear-gradient(125deg, #16442e, #0d3322 60%, #0a2417); border-radius: 20px; padding: 20px 22px; margin-bottom: 14px; }
.fin-hero::after { content: ""; position: absolute; left: -25%; right: -25%; bottom: 8px; height: 50px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 13px); transform: rotate(-6deg) scaleX(1.4); pointer-events: none; }
.fin-hero > * { position: relative; z-index: 1; }
.fin-hero-top { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; }
.fin-hero-top b { font-family: var(--ad-display); font-weight: 700; font-size: 34px; color: #f7f4ec; letter-spacing: -1px; }
.fin-tag { display: inline-flex; align-items: center; gap: 4px; font: 700 12px var(--ad-body); padding: 3px 9px; border-radius: 999px; }
.fin-tag.up { background: rgba(95,193,135,.22); color: #bfeccf; }
.fin-tag.down { background: rgba(224,101,79,.24); color: #f4b8ab; }
.fin-hero-stats { display: flex; margin: 16px 0 14px; }
.fin-hero-stats > div { flex: 1; padding-right: 12px; }
.fin-hero-stats > div + div { border-left: 1px solid rgba(255,255,255,.12); padding-left: 14px; }
.fin-hero-stats .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.fin-hero-stats small { color: rgba(255,255,255,.6); font-size: 11px; }
.fin-hero-stats b { display: block; font-family: var(--ad-display); font-weight: 600; font-size: 16px; color: #eef5ef; margin-top: 3px; }
.fin-progress { height: 8px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; }
.fin-progress i { display: block; height: 100%; background: #7fd6a2; transition: width .5s ease; }
.fin-progress-meta { color: rgba(255,255,255,.7); font-size: 12px; margin: 8px 0 0; display: flex; justify-content: space-between; gap: 10px; }
.fin-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.fin-pill { display: flex; align-items: center; gap: 11px; background: var(--ad-surface); border: 1px solid var(--ad-border); border-radius: 16px; padding: 13px 15px; box-shadow: 0 8px 20px rgba(0,0,0,.24); }
.fin-pill-dot { width: 34px; height: 34px; border-radius: 11px; flex: none; }
.fin-pill-dot.warn { background: rgba(224,169,74,.18); } .fin-pill-dot.off { background: rgba(224,101,79,.18); }
.fin-pill-dot.pri { background: rgba(106,176,136,.18); } .fin-pill-dot.acc { background: rgba(224,131,47,.18); }
.fin-pill .overline { color: var(--ad-subtle); }
.fin-pill b { display: block; font-family: var(--ad-display); font-weight: 700; font-size: 18px; color: #fff; letter-spacing: -.4px; }
.fin-pill small { color: var(--ad-subtle); font-size: 11px; }
.fin-comp { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--ad-sunken); margin: 6px 0 12px; }
.fin-comp i { display: block; height: 100%; }
.fin-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.fin-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ad-muted); }
.fin-legend i { width: 9px; height: 9px; border-radius: 3px; }

/* ---------- pagamento (modal detalhe) ---------- */
.pay-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ad-sunken); border: 1px solid var(--ad-border); border-radius: 16px; padding: 16px 18px; }
.pay-hero .overline { color: var(--ad-subtle); }
.pay-hero > div:first-child b { display: block; font-family: var(--ad-display); font-weight: 700; font-size: 26px; color: #fff; letter-spacing: -.6px; margin-top: 3px; }
.pay-hero-meta { text-align: right; }
.pay-hero-meta small { display: block; color: var(--ad-subtle); font-size: 11.5px; margin-top: 6px; }
.pay-hero.pay-paid { border-color: rgba(95,193,135,.32); }
.pay-hero.pay-overdue { border-color: rgba(224,101,79,.32); }
.fin-actions .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }

/* ---------- Agenda ---------- */
.agenda-grid { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 12px; }
.agenda-col { background: var(--ad-surface); border: 1px solid var(--ad-border); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.agenda-col-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--ad-border); background: var(--ad-sunken); }
.agenda-col-head b { font-family: var(--ad-display); font-weight: 700; color: #fff; font-size: 14px; }
.agenda-col-head span { font-size: 11px; color: var(--ad-subtle); background: var(--ad-elev); border-radius: 999px; padding: 2px 8px; }
.agenda-col-body { padding: 8px; display: flex; flex-direction: column; gap: 7px; min-height: 60px; }
.agenda-empty { text-align: center; color: var(--ad-subtle); font-size: 11.5px; font-style: italic; padding: 16px 0; }
.agenda-slot { display: flex; gap: 10px; align-items: flex-start; background: var(--ad-alt); border-radius: 11px; padding: 9px 11px; }
.agenda-slot > b { font-family: var(--ad-display); font-weight: 700; color: var(--ad-accent-strong); font-size: 13px; min-width: 42px; }
.ag-who span { display: block; color: #fff; font-size: 13px; font-weight: 600; }
.ag-who small { color: var(--ad-muted); font-size: 11px; }
@media (max-width: 860px) { .agenda-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(160px, 1fr); overflow-x: auto; } .fin-pills { grid-template-columns: 1fr 1fr; } .fin-hero-top b { font-size: 28px; } }

/* ===== Admin mobile (refinado) ===== */
@media (max-width:760px) {
  .admin-side { padding:8px 10px; gap:10px; }
  .admin-nav { gap:6px; }
  .admin-nav button { padding:9px 12px; font-size:12.5px; }
  .admin-main { padding:16px 12px 80px; }
  .admin-shell .head h2 { font-size:24px; }
  .fin-hero { padding:16px; border-radius:16px; }
  .fin-hero-top b { font-size:26px; }
  .fin-hero-stats { flex-wrap:wrap; gap:10px 0; }
  .fin-pills { grid-template-columns:1fr 1fr; gap:9px; }
  .fin-pill { padding:11px 12px; }
  .fin-pill b { font-size:15px; }
  .dtable { min-width:560px; }
  .month-nav b { min-width:0; font-size:15px; }
  .subtabs { max-width:100%; overflow-x:auto; }
  .md-rows { max-height:300px; }
  .md-detail { padding:16px; min-height:0; }
  .detail-head h2 { font-size:20px; }
  #modal-root .modal { width:calc(100vw - 20px) !important; }
}
