:root {
    --brand-primary: #135e96;
    --brand-secondary: #0a8894;
    --sidebar-width: 270px;
}

.app-shell {
    min-height: 100vh;
    background: #f5f7fb;
}

.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(180deg, var(--brand-primary), #0d355a);
    color: #fff;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    padding: 1.35rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.sidebar-brand small {
    display: block;
    color: rgba(255, 255, 255, .7);
    font-size: .75rem;
}

.brand-mark {
    height: 40px;
    width: 40px;
    background: transparent; /* logos e brasões são PNG com transparência: sem quadro branco atrás */
    color: var(--brand-primary);
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    overflow: hidden;
}

.brand-mark img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sidebar .nav-link {
    color: rgba(255, 255, 255, .76);
    padding: .75rem .9rem;
    border-radius: .55rem;
}

.sidebar .nav-link i {
    width: 1.4rem;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .15);
}

.sidebar-footer {
    padding: 1rem 1.35rem;
    margin-top: auto;
    color: rgba(255, 255, 255, .62);
    font-size: .8rem;
}

.content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
}

.topbar {
    height: 74px;
    background: #fff;
    padding: 0 2rem;
    border-bottom: 1px solid #e8edf4;
    gap: .75rem;
}

/* Nome da instituição: ocupa o espaço que sobra e corta em 2 linhas (nome completo no title). */
.topbar-title {
    flex: 1 1 auto;
    min-width: 0;
}

.topbar-title span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.topbar-user-name {
    display: inline-block;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.card {
    border: 0;
    box-shadow: 0 3px 14px rgba(29, 47, 70, .06);
    border-radius: .8rem;
}

.metric-card .icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(19, 94, 150, .12);
    color: var(--brand-primary);
    font-size: 1.35rem;
}

.chart-wrap {
    position: relative;
    width: 100%;
}

.chart-wrap--fixed {
    height: 280px;
}

.chart-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
    .chart-wrap--fixed {
        height: 220px;
    }
}

.page-title {
    font-weight: 700;
    color: #17324d;
}

.form-label {
    font-weight: 600;
    font-size: .88rem;
}

.btn-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-primary:hover {
    background: var(--brand-secondary);
    border-color: var(--brand-secondary);
}

.table > thead th {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c7c8c;
    background: #f7f9fc;
}

.badge-soft {
    background: #e8f3fb;
    color: #135e96;
}

.detail-label {
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #748190;
}

.auth-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.auth-card {
    width: min(440px, 100%);
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .18);
}

.offcanvas-lg.sidebar {
    width: var(--sidebar-width) !important;
}

@media (max-width: 991.98px) {
    .sidebar {
        /* Keep the Bootstrap offcanvas out of the page flow while closed. */
        max-height: 100dvh;
        overflow-y: auto;
        /* Acima da sombra do offcanvas (backdrop = 1040): com o 1040 do desktop, a sombra criada depois
           no DOM ficava por cima do menu e bloqueava todos os cliques no celular. */
        z-index: var(--bs-offcanvas-zindex, 1045);
    }

    .content {
        margin-left: 0;
    }

    .topbar {
        padding: 0 1rem;
    }
}

/* ---------------------------------------------------------------------------
 * Módulo de Territórios (docs/Requisitos Territorios.md)
 * ------------------------------------------------------------------------- */

/* RNF-04: alvos de toque de pelo menos 44 px nas telas do ACS (tablet 8" em retrato). */
.touch-target {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

/* RNF-06: foco visível. */
a:focus-visible,
button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 3px solid #f0b429;
    outline-offset: 2px;
}

.min-w-0 { min-width: 0; }

.app-breadcrumb {
    font-size: .85rem;
    flex-wrap: wrap;
}

.app-breadcrumb a { text-decoration: none; }

.app-footer { border-top: 1px solid #e8edf4; padding-top: 1rem; }

/* Menu lateral: submenu de territórios (RF-TER-03). O .nav do Bootstrap tem flex-wrap: wrap; numa coluna
   de altura limitada (muitos territórios abertos) os itens que não cabiam iam para uma 2ª coluna e o menu
   rolava para o lado. Uma coluna só, rolando na vertical. */
.sidebar-nav { flex: 1 1 auto; min-height: 0; flex-wrap: nowrap; overflow-y: auto; overflow-x: hidden; }
.sidebar-nav .nav { flex-wrap: nowrap; }
.sidebar-nav .nav-link { overflow-wrap: anywhere; }

/* Barra de rolagem do menu: fina e translúcida, na cor do menu (a padrão do navegador era branca e
   larga). Fica mais visível só com o mouse sobre o menu. Firefox usa scrollbar-*, os demais ::-webkit-. */
.sidebar-nav, .sidebar { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.sidebar-nav:hover, .sidebar:hover { scrollbar-color: rgba(255, 255, 255, .38) transparent; }
.sidebar-nav::-webkit-scrollbar, .sidebar::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 999px; }
.sidebar-nav:hover::-webkit-scrollbar-thumb, .sidebar:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .38); }
.sidebar-nav::-webkit-scrollbar-button, .sidebar::-webkit-scrollbar-button { display: none; }

.sidebar .nav-toggle {
    color: rgba(255, 255, 255, .76);
    min-width: 44px;
    min-height: 44px;
}

.sidebar .nav-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.sidebar-subnav {
    margin-left: 1.35rem;
    padding-left: .6rem;
    border-left: 1px solid rgba(255, 255, 255, .22);
    list-style: none;
}

.sidebar-subnav .nav-link {
    padding: .45rem .7rem;
    font-size: .88rem;
}

.sidebar-subnav--level3 {
    margin-left: .9rem;
}

.subnav-dot {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    margin-right: .45rem;
}

/* Árvore Território › Logradouros (RF-TER-01/02). */
.territory-node {
    border-left: 5px solid var(--territory-color, var(--brand-primary));
}

.territory-node--inactive { opacity: .7; }

.territory-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .9rem;
}

.tree-toggle {
    border: 0;
    background: transparent;
    border-radius: .5rem;
    color: #45607a;
}

.tree-toggle:hover { background: #eef3f8; }

.tree-toggle i { transition: transform .15s ease; }

.territory-node[aria-expanded="true"] .tree-toggle i { transform: rotate(90deg); }

.territory-code {
    cursor: pointer;
    font-weight: 700;
    font-size: .85rem;
    color: #fff;
    background: var(--territory-color, var(--brand-primary));
    border-radius: .45rem;
    padding: .3rem .55rem;
}

/* Logradouros visualmente aninhados: recuo + linha vertical de conexão. */
.street-list {
    list-style: none;
    margin: 0 0 .75rem 2.4rem;
    padding: 0 .9rem 0 1.1rem;
    border-left: 2px solid #d5dee8;
}

.street-node {
    position: relative;
}

.street-node::before {
    content: "";
    position: absolute;
    left: -1.1rem;
    top: 50%;
    width: .9rem;
    border-top: 2px solid #d5dee8;
}

.street-link {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    min-height: 44px;
    padding: .35rem .6rem;
    border-radius: .5rem;
    text-decoration: none;
    color: #17324d;
}

.street-link:hover { background: #f1f5fa; }

.street-crumb {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #748190;
}

.street-name { font-weight: 600; }

.street-code {
    font-size: .75rem;
    color: #45607a;
    background: #eef3f8;
    border-radius: .35rem;
    padding: .05rem .4rem;
}

.street-node--add .street-link { color: var(--brand-primary); font-weight: 600; }

.street-node--empty { padding: .5rem .6rem; }

@media (max-width: 575.98px) {
    .territory-row { flex-wrap: wrap; }
    .territory-stats { width: 100%; padding-left: 3.2rem; }
    .street-list { margin-left: 1.2rem; }
}

.text-pre-wrap { white-space: pre-wrap; }

/* Cadastro individual em 7 etapas (docs/Requisitos Territorios.md, 5.3) */
.wizard-progress { height: 6px; }

.wizard-steps {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    min-height: 44px;
    padding: .4rem .6rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: #17324d;
    text-align: left;
}

.wizard-step:hover:not(:disabled) { background: #f1f5fa; }
.wizard-step:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; }
.wizard-step.active { background: #e7f0f9; font-weight: 600; }
.wizard-step:disabled { opacity: .55; }

.wizard-step-number {
    display: inline-flex;
    flex: 0 0 1.9rem;
    align-items: center;
    justify-content: center;
    height: 1.9rem;
    border-radius: 50%;
    background: #eef3f8;
    font-size: .85rem;
    font-weight: 600;
}

.wizard-step.active .wizard-step-number { background: var(--brand-primary); color: #fff; }

.yesno {
    padding-bottom: .75rem;
    border-bottom: 1px solid #eef1f5;
}

.yesno .btn-group .btn { min-width: 4.5rem; }

.registration-summary .accordion-button { gap: .5rem; }

/* Tablet em retrato (RNF-04): as etapas viram uma faixa rolável acima do formulário. */
@media (max-width: 991.98px) {
    .wizard-steps { flex-direction: row; overflow-x: auto; padding-bottom: .25rem; }
    .wizard-step { width: auto; white-space: nowrap; }
    .wizard-step-title small { display: none !important; }
}

/* ---------------------------------------------------------------------------
 * "Minimizar aba" (docs/Requisitos Territorios.md, seção 7 — PENDÊNCIA P-01)
 * ------------------------------------------------------------------------- */

/* RF-MIN-01: menu lateral recolhido para uma coluna só de ícones (só em telas largas; no
   celular/tablet o menu já é gaveta). O texto continua acessível a leitores de tela. */
@media (min-width: 992px) {
    body.sidebar-collapsed { --sidebar-width: 76px; }
    body.sidebar-collapsed .sidebar .nav-label,
    body.sidebar-collapsed .sidebar-brand-text {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    body.sidebar-collapsed .sidebar .nav-toggle,
    body.sidebar-collapsed .sidebar #sidebar-territories { display: none !important; }
    body.sidebar-collapsed .sidebar .nav-link { text-align: center; padding: .75rem .5rem; }
    body.sidebar-collapsed .sidebar .nav-link i { width: auto; font-size: 1.15rem; }
    body.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 1.35rem .5rem; }
    body.sidebar-collapsed .sidebar-nav { padding-left: .5rem !important; padding-right: .5rem !important; }
}
.sidebar, .content { transition: width .15s ease, margin-left .15s ease; }
@media (prefers-reduced-motion: reduce) { .sidebar, .content { transition: none; } }

/* RF-MIN-02: cadastro em andamento minimizado numa barra no rodapé. */
.minimized-draft-bar {
    position: fixed; bottom: 0; right: 0; left: var(--sidebar-width); z-index: 1030;
    background: #fff; border-top: 2px solid var(--brand-primary); box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
    padding: .5rem 1rem;
}
@media (max-width: 991.98px) { .minimized-draft-bar { left: 0; } }
body.has-draft-bar .content { padding-bottom: 72px; }

/* RF-MIN-03: seções da ficha do cidadão recolhíveis. */
.section-toggle {
    background: none; border: 0; padding: 0; color: inherit; font: inherit; display: inline-flex; align-items: center; gap: .5rem; text-align: left;
}
.section-toggle i { transition: transform .15s ease; font-size: .9em; }
.section-toggle[aria-expanded="false"] i { transform: rotate(-90deg); }
.collapsible-section.is-collapsed h2 { margin-bottom: 0 !important; }

/* Bloqueio de agenda (feriado, férias) na grade da agenda. */
.agenda-blocked { background: #f8f1e5; border: 1px dashed #d9a441; color: #7a5a14; border-radius: .5rem; padding: .5rem .75rem; font-size: .875rem; }

/* Agenda interativa (FullCalendar) — appointments/agenda.blade.php */
.agenda-calendar-wrap { position: relative; }
.agenda-loading { position: absolute; top: .75rem; right: 1rem; z-index: 5; font-size: .875rem; color: #6c757d; background: #fff; padding: 0 .25rem; }
.agenda-professionals { max-height: 320px; overflow-y: auto; }
.agenda-swatch { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; margin-right: .4rem; vertical-align: -1px; }
.agenda-legend div { margin-bottom: .2rem; }
.agenda-legend-free { display: inline-block; border: 1px dashed var(--brand-secondary); color: var(--brand-secondary); border-radius: .25rem; padding: 0 .35rem; font-size: .75rem; }
.agenda-legend-block { display: inline-block; width: 1.4rem; height: .8rem; background: #f8f1e5; border: 1px dashed #d9a441; vertical-align: -1px; }
#agenda-calendar .fc-toolbar-title { font-size: 1.15rem; font-weight: 700; }
#agenda-calendar .fc-toolbar-title::first-letter { text-transform: uppercase; }
#agenda-calendar a.fc-col-header-cell-cushion, #agenda-calendar a.fc-daygrid-day-number, #agenda-calendar .fc-list-day a { text-decoration: none; color: inherit; }
#agenda-calendar .fc-col-header-cell-cushion { text-transform: capitalize; font-weight: 600; }
#agenda-calendar .fc-button-primary { background: var(--brand-primary); border-color: var(--brand-primary); }
#agenda-calendar .fc-button-primary:not(:disabled).fc-button-active, #agenda-calendar .fc-button-primary:not(:disabled):active { background: #0e4a77; border-color: #0e4a77; }
#agenda-calendar .fc-timegrid-slot { height: 1.6rem; }
.agenda-ev { font-size: .78rem; }
.agenda-ev-clickable { cursor: pointer; }
.agenda-ev-locked { cursor: default; }
.agenda-ev-inner { overflow: hidden; padding: 0 .2rem; line-height: 1.2; }
.agenda-ev-time { font-weight: 600; }
.agenda-ev-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.agenda-list-free { border: 1px dashed var(--brand-secondary); color: var(--brand-secondary); border-radius: .25rem; padding: 0 .35rem; font-size: .75rem; }
.agenda-ev-free { border-style: dashed !important; border-width: 1px !important; font-weight: 500; }
.agenda-ev-free:hover { background: rgba(10, 136, 148, .08) !important; }
.agenda-ev-free.agenda-ev-locked { opacity: .55; }
.agenda-status-attended { opacity: .7; }
.agenda-status-present { box-shadow: 0 0 0 2px #ffc107; }
.agenda-ev-block { background: #f8f1e5 !important; opacity: .8; }
.agenda-ev-block-label { background: #f8f1e5 !important; border: 1px dashed #d9a441 !important; color: #7a5a14 !important; }
.agenda-ev-block-label .fc-event-title, .agenda-ev-block-label .fc-event-main { color: #7a5a14 !important; }
.agenda-ev-summary { cursor: pointer; border-radius: .35rem; padding: 0 .25rem; }
.agenda-ev-summary-busy { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; }
.agenda-ev-summary-busy .fc-event-title { color: #fff; }
.agenda-ev-summary-free { background: transparent !important; border: 1px dashed var(--brand-secondary) !important; }
.agenda-ev-summary-free .fc-event-title { color: var(--brand-secondary); }
.booking-results { max-height: 240px; overflow-y: auto; }
@media (max-width: 767.98px) {
    #agenda-calendar .fc-header-toolbar { flex-direction: column; gap: .5rem; }
    #agenda-calendar .fc-button { padding: .45rem .6rem; }
}
.agenda-placeholder { position: absolute; inset: 0; z-index: 4; background: rgba(255, 255, 255, .82); display: flex; align-items: flex-start; justify-content: center; padding: 5rem 1rem 1rem; border-radius: inherit; }
.agenda-placeholder-card { background: #fff; border: 1px solid #dee2e6; border-radius: .75rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08); padding: 1.5rem; max-width: 460px; text-align: center; }

/* Relatórios: cartões do menu e bandeja "Meus relatórios" (partials/report-tray). */
.report-card:hover { border-color: var(--brand-primary); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06); }
.report-card-icon { flex: 0 0 2.75rem; height: 2.75rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; background: rgba(19, 94, 150, .1); color: var(--brand-primary); font-size: 1.3rem; }
/* Botão na barra superior, painel abrindo para baixo (antes era fixo no rodapé e cobria o "Salvar"). */
.report-tray { position: relative; }
.report-tray-panel { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 1080; width: min(360px, calc(100vw - 2rem)); max-height: 60vh; overflow-y: auto; }
@media (max-width: 575.98px) { .report-tray-panel { position: fixed; left: 1rem; right: 1rem; top: 84px; width: auto; } }
.report-tray-toasts { z-index: 1090; margin-top: 4.5rem; }

/* Balões de pendências no menu (App\Services\PendingItemsService) e sino do topo. */
.sidebar .nav-link { position: relative; }
.nav-badge { float: right; margin-top: .15rem; font-size: .7rem; }
body.sidebar-collapsed .nav-badge { position: absolute; top: .3rem; left: 2.1rem; float: none; margin: 0; padding: .2em .45em; font-size: .6rem; }
.pending-menu { width: min(340px, calc(100vw - 2rem)); }
.pending-bell-count { font-size: .65rem; }

/* Dashboard por blocos (dashboard/index + dashboard/widgets). */
.dashboard-tabs .nav-link { font-weight: 600; color: var(--bs-secondary-color); }
.dashboard-tabs .nav-link.active { color: var(--brand-primary); }
.dashboard-mini { background: #f5f8fb; border-radius: .6rem; padding: .6rem .5rem; }
.dashboard-list li { padding: .35rem 0; border-bottom: 1px solid #eef2f6; font-size: .875rem; }
.dashboard-list li:last-child { border-bottom: 0; }
.dashboard-widget [data-dashboard-hide] { opacity: .45; }
.dashboard-widget:hover [data-dashboard-hide] { opacity: 1; }

/* Campo de senha com botão "olho" (partials/password-toggle). */
.password-field {
    position: relative;
}

.password-field .form-control {
    padding-right: 2.9rem;
}

.password-field .form-control.is-invalid {
    padding-right: 4.6rem;
    background-position: right 2.9rem center;
}

.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    min-height: 38px;
    width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #6c757d;
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}

.password-toggle:hover {
    color: #212529;
}