/* =========================================================
   ClimaHub — tema visual
   Azul escuro (confiança) · Verde (sustentabilidade)
   Laranja/vermelho (alertas) · Cinza claro (áreas administrativas)
   ========================================================= */
:root {
    --ch-navy: #0d3b66;      /* azul escuro */
    --ch-navy-dark: #082a4d;
    --ch-green: #2a9d8f;     /* verde sustentável */
    --ch-orange: #e76f51;    /* alerta */
    --ch-red: #d62828;
    --ch-gray: #f2f4f7;      /* cinza claro admin */
    --ch-border: #e2e6ec;
    --ch-text: #1f2d3d;
    --ch-sidebar-w: 250px;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--ch-gray);
    color: var(--ch-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------------- Layout ---------------- */
.ch-layout { display: flex; min-height: 100vh; }

.ch-sidebar {
    width: var(--ch-sidebar-w);
    background: linear-gradient(180deg, var(--ch-navy) 0%, var(--ch-navy-dark) 100%);
    color: #cfe0f1;
    position: fixed; top: 0; left: 0; bottom: 0;
    display: flex; flex-direction: column;
    z-index: 1030;
    transition: transform .25s ease;
}
.ch-main {
    flex: 1;
    margin-left: var(--ch-sidebar-w);
    display: flex; flex-direction: column;
    min-width: 0;
}

/* ---------------- Marca ---------------- */
.ch-brand {
    display: flex; align-items: center; gap: .6rem;
    padding: 1.1rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.ch-brand i { font-size: 1.8rem; color: var(--ch-green); }
.ch-brand-name { display: block; font-weight: 700; font-size: 1.25rem; color: #fff; line-height: 1; }
.ch-brand-slogan { color: #8fb3d6; font-size: .72rem; }

/* ---------------- Navegação ---------------- */
.ch-nav { padding: .6rem; overflow-y: auto; flex: 1; }
.ch-nav-item {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .8rem; margin-bottom: .15rem;
    color: #cfe0f1; text-decoration: none;
    border-radius: .5rem; font-size: .93rem;
    transition: background .15s, color .15s;
}
.ch-nav-item i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.ch-nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.ch-nav-item.active { background: var(--ch-green); color: #fff; font-weight: 600; }
.ch-nav-sep {
    text-transform: uppercase; font-size: .68rem; letter-spacing: .08em;
    color: #6f97c0; padding: .9rem .8rem .3rem;
}

/* ---------------- Topbar ---------------- */
.ch-topbar {
    background: #fff; border-bottom: 1px solid var(--ch-border);
    padding: .6rem 1.2rem; display: flex; align-items: center; gap: 1rem;
    position: sticky; top: 0; z-index: 1020;
}
.ch-page-title { font-size: 1.15rem; font-weight: 600; margin: 0; color: var(--ch-navy); }
.ch-user { margin-left: auto; }
.ch-user-btn { background: var(--ch-gray); border: 1px solid var(--ch-border); display: flex; align-items: center; gap: .4rem; }
.ch-role-badge { background: var(--ch-green); font-weight: 500; font-size: .68rem; }
.ch-toggle { display: none; background: var(--ch-gray); border: 1px solid var(--ch-border); }

/* ---------------- Conteúdo ---------------- */
.ch-content { padding: 1.3rem; flex: 1; }
.ch-footer { padding: .8rem 1.3rem; color: #8a97a6; font-size: .8rem; border-top: 1px solid var(--ch-border); background:#fff; }

/* ---------------- Cards de métrica ---------------- */
.ch-stat {
    background: #fff; border: 1px solid var(--ch-border); border-radius: .75rem;
    padding: 1rem 1.1rem; height: 100%;
    display: flex; align-items: center; gap: .9rem;
}
.ch-stat-icon {
    width: 48px; height: 48px; border-radius: .6rem; flex-shrink: 0;
    display: grid; place-items: center; font-size: 1.4rem; color: #fff;
}
.ch-stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--ch-navy); }
.ch-stat-label { color: #6b7885; font-size: .82rem; }
.bg-navy { background: var(--ch-navy) !important; }
.bg-greenx { background: var(--ch-green) !important; }
.bg-orangex { background: var(--ch-orange) !important; }
.text-navy { color: var(--ch-navy) !important; }

/* ---------------- Cards genéricos ---------------- */
.card { border: 1px solid var(--ch-border); border-radius: .75rem; }
.card-header { background: #fff; border-bottom: 1px solid var(--ch-border); font-weight: 600; color: var(--ch-navy); }
.ch-map { height: 420px; border-radius: .6rem; z-index: 1; }
.ch-map-sm { height: 300px; }

.table > :not(caption) > * > * { vertical-align: middle; }
.btn-navy { background: var(--ch-navy); color:#fff; }
.btn-navy:hover { background: var(--ch-navy-dark); color:#fff; }

/* ---------------- Responsivo ---------------- */
@media (max-width: 992px) {
    .ch-sidebar { transform: translateX(-100%); }
    .ch-sidebar.open { transform: translateX(0); }
    .ch-main { margin-left: 0; }
    .ch-toggle { display: inline-flex; }
}

/* ---------------- Login ---------------- */
.ch-login-wrap {
    min-height: 100vh; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--ch-navy) 0%, var(--ch-navy-dark) 100%);
    padding: 1rem;
}
.ch-login-card { background:#fff; border-radius: 1rem; width: 100%; max-width: 410px; padding: 2rem; box-shadow: 0 15px 40px rgba(0,0,0,.25); }
.ch-login-brand { text-align:center; margin-bottom: 1.4rem; }
.ch-login-brand i { font-size: 2.6rem; color: var(--ch-green); }
.ch-login-brand h1 { font-size: 1.6rem; font-weight: 700; color: var(--ch-navy); margin: .3rem 0 0; }
.ch-login-brand p { color:#6b7885; font-size:.85rem; margin:0; }

/* ---------------- Painel público ---------------- */
.ch-public-header {
    background: linear-gradient(135deg, var(--ch-navy), var(--ch-green));
    color:#fff; padding: 1.4rem 0;
}
.ch-alert-card { border-left: 5px solid var(--ch-orange); }

/* ---------------- Clima / Tempo ---------------- */
.ch-weather-banner {
    border: 1px solid var(--ch-border);
    border-left: 5px solid var(--ch-navy);
    background: linear-gradient(135deg, #ffffff 0%, #eef4fb 100%);
}
.ch-weather-metric {
    background: var(--ch-gray);
    border: 1px solid var(--ch-border);
    border-radius: .6rem;
    padding: .5rem .2rem;
}
.ch-weather-metric i { font-size: 1.2rem; }
.ch-forecast-day {
    background: var(--ch-gray);
    border: 1px solid var(--ch-border);
    border-radius: .6rem;
    padding: .5rem .25rem;
}
@media (min-width: 768px) {
    .border-end-md { border-right: 1px solid var(--ch-border); }
}