/* ==========================================================================
   Plataforma de Zeladoria Urbana — Protótipo (front-end)
   Tema visual sobre Bootstrap 5. Cores institucionais discretas.
   ========================================================================== */
:root{
  --zl-primary:#0f6e5c;      /* verde institucional */
  --zl-primary-dark:#0b5548;
  --zl-primary-light:#e6f2ef;
  --zl-accent:#f0a020;       /* âmbar (alertas/CTA secundário) */
  --zl-slate:#243746;
  --zl-slate-2:#3a4d5c;
  --zl-bg:#f4f6f8;
  --zl-border:#e2e8ee;
  --zl-muted:#6b7b8a;
  --zl-sidebar-w:250px;
}

/* ---- Base ---- */
body{background:var(--zl-bg);color:#22303c;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;}
a{color:var(--zl-primary);}
.text-primary{color:var(--zl-primary)!important;}
.bg-primary{background-color:var(--zl-primary)!important;}
.btn-primary{background-color:var(--zl-primary);border-color:var(--zl-primary);}
.btn-primary:hover,.btn-primary:focus{background-color:var(--zl-primary-dark);border-color:var(--zl-primary-dark);}
.btn-outline-primary{color:var(--zl-primary);border-color:var(--zl-primary);}
.btn-outline-primary:hover{background-color:var(--zl-primary);border-color:var(--zl-primary);}
.badge-soft{background:var(--zl-primary-light);color:var(--zl-primary-dark);font-weight:600;}
.link-plain{text-decoration:none;}

/* ---- Área pública / landing ---- */
.public-nav{background:#fff;border-bottom:1px solid var(--zl-border);}
.brand{font-weight:700;color:var(--zl-primary)!important;letter-spacing:.2px;}
.brand i{color:var(--zl-accent);}
.hero{background:linear-gradient(135deg,var(--zl-primary) 0%,var(--zl-slate) 100%);color:#fff;}
.hero .btn-light{color:var(--zl-primary-dark);font-weight:600;}
.feature-icon{width:52px;height:52px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--zl-primary-light);color:var(--zl-primary-dark);font-size:1.4rem;}
.section-title{font-weight:700;color:var(--zl-slate);}
footer.public{background:var(--zl-slate);color:#cbd6df;}
footer.public a{color:#e9eef2;text-decoration:none;}

/* ---- Auth cards ---- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;background:linear-gradient(135deg,#0f6e5c22,#24374611),var(--zl-bg);}
.auth-card{max-width:430px;width:100%;border:none;box-shadow:0 10px 30px rgba(20,40,50,.12);}
.auth-card .card-header{background:var(--zl-primary);color:#fff;border:none;text-align:center;padding:1.4rem;}
.demo-creds{background:var(--zl-primary-light);border:1px dashed var(--zl-primary);border-radius:8px;font-size:.85rem;}
.demo-creds code{cursor:pointer;}

/* ---- App shell ---- */
.app-topbar{height:58px;background:#fff;border-bottom:1px solid var(--zl-border);position:fixed;top:0;left:0;right:0;z-index:1030;display:flex;align-items:center;}
/* Layout com SCROLL ÚNICO: topbar fixa; menu + página compartilham o mesmo scroll da janela */
.app-body{display:flex;align-items:flex-start;margin-top:58px;}
.app-sidebar{position:sticky;top:58px;align-self:flex-start;flex:0 0 var(--zl-sidebar-w);width:var(--zl-sidebar-w);min-height:calc(100vh - 58px);background:var(--zl-slate);z-index:1029;padding-bottom:1rem;}
.app-sidebar .nav-link{color:#c7d3dc;border-radius:8px;margin:2px 10px;padding:.55rem .8rem;font-size:.92rem;display:flex;align-items:center;gap:.6rem;}
.app-sidebar .nav-link .bi{font-size:1.05rem;width:20px;text-align:center;}
.app-sidebar .nav-link:hover{background:var(--zl-slate-2);color:#fff;}
.app-sidebar .nav-link.active{background:var(--zl-primary);color:#fff;font-weight:600;}
.app-sidebar .nav-section{color:#7d92a3;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;padding:.9rem 1.3rem .3rem;}
.app-main{flex:1 1 auto;min-width:0;padding:1.3rem 1.5rem 3rem;}
.sidebar-backdrop{display:none;}
/* Colapso do menu no desktop (hambúrguer) */
body.sidebar-collapsed .app-sidebar{display:none;}
@media (max-width:991.98px){
  .app-body{display:block;}
  .app-sidebar{position:fixed;top:58px;bottom:0;left:0;height:auto;max-height:calc(100vh - 58px);min-height:0;overflow-y:auto;transform:translateX(-100%);transition:transform .25s ease;}
  body.sidebar-collapsed .app-sidebar{display:block;}
  body.sidebar-open .app-sidebar{transform:translateX(0);}
  body.sidebar-open .sidebar-backdrop{display:block;position:fixed;inset:58px 0 0 0;background:rgba(0,0,0,.4);z-index:1028;}
  .app-main{width:100%;}
}

/* ---- Cards / KPIs ---- */
.card{border:1px solid var(--zl-border);border-radius:12px;}
.kpi{border-radius:12px;}
.kpi .kpi-icon{width:46px;height:46px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:1.3rem;}
.kpi h3{font-weight:700;margin:0;}
.kpi small{color:var(--zl-muted);}
.stat-up{color:#1a8f5a;}
.stat-down{color:#c0392b;}

/* ---- Tabelas ---- */
.table thead th{background:#fbfcfd;color:var(--zl-slate);font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;border-bottom:2px solid var(--zl-border);cursor:default;white-space:nowrap;}
.table thead th.sortable{cursor:pointer;user-select:none;}
.table thead th.sortable:hover{color:var(--zl-primary);}
.table-hover tbody tr:hover{background:var(--zl-primary-light);}
.table td{vertical-align:middle;}
.row-action{cursor:pointer;}

/* ---- Status pills ---- */
.pill{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600;white-space:nowrap;}
.pill-grey{background:#eceff2;color:#5b6b78;}
.pill-blue{background:#e4effb;color:#1c6cdd;}
.pill-teal{background:#e6f2ef;color:#0b5548;}
.pill-amber{background:#fdf1dd;color:#9a6b12;}
.pill-green{background:#e3f5ea;color:#1a8f5a;}
.pill-red{background:#fbe6e6;color:#c0392b;}
.pill-purple{background:#efe8fb;color:#6b3fbf;}

/* ---- Timeline (histórico) ---- */
.timeline{list-style:none;padding-left:0;margin:0;}
.timeline li{position:relative;padding:0 0 1.1rem 1.6rem;border-left:2px solid var(--zl-border);}
.timeline li:last-child{border-left-color:transparent;}
.timeline li::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--zl-primary);}
.timeline .tl-time{font-size:.78rem;color:var(--zl-muted);}

/* ---- Wizard ---- */
.wizard-steps{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem;}
.wizard-steps .step{flex:1;min-width:120px;text-align:center;padding:.6rem;border-radius:8px;background:#fff;border:1px solid var(--zl-border);font-size:.85rem;color:var(--zl-muted);}
.wizard-steps .step.active{background:var(--zl-primary);color:#fff;border-color:var(--zl-primary);font-weight:600;}
.wizard-steps .step.done{background:var(--zl-primary-light);color:var(--zl-primary-dark);border-color:var(--zl-primary);}

/* ---- Evidências (fotos simuladas) ---- */
.evidence{height:120px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;text-align:center;position:relative;overflow:hidden;}
.evidence.before{background:#8a94a0;}
.evidence.during{background:#3a83c9;}
.evidence.after{background:#1a8f5a;}
.evidence .geo{position:absolute;bottom:4px;left:4px;right:4px;font-size:.62rem;background:rgba(0,0,0,.35);border-radius:4px;padding:1px 4px;}

/* ---- Misc ---- */
.empty-state{text-align:center;padding:3rem 1rem;color:var(--zl-muted);}
.empty-state .bi{font-size:2.6rem;opacity:.5;}
.breadcrumb{--bs-breadcrumb-divider:'›';font-size:.85rem;margin:0;}
.required::after{content:" *";color:#c0392b;}
.form-help{font-size:.78rem;color:var(--zl-muted);}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--zl-primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem;}
.cursor-pointer{cursor:pointer;}
@media print{.app-sidebar,.app-topbar,.no-print{display:none!important;}.app-main{margin:0;}}