/* Freguesia Reporta — estilos base
   Paleta consistente com a especificação funcional: ocre queimado como cor de
   ação, verde-azulado como secundária, e uma escala de severidade separada
   (verde -> amarelo -> laranja -> vermelho) para prioridades e estados. */

:root{
  --ink:#1B2430;
  --ink-soft:#3A4452;
  --slate:#5C6673;
  --paper:#F3F4EF;
  --surface:#FFFFFF;
  --surface-2:#EBECE5;
  --line:#D9DBD1;
  --accent:#B85C16;
  --accent-ink:#8F450F;
  --accent-2:#2E6B5E;

  --sev-low:#3E7D6E;
  --sev-mid:#B08A1E;
  --sev-high:#C1662C;
  --sev-urgent:#A13D3D;

  --st-recebida:#5C6673;
  --st-em_analise:#B08A1E;
  --st-atribuida:#3D6FA6;
  --st-em_execucao:#C1662C;
  --st-resolvida:#2E6B5E;
  --st-rejeitada:#A13D3D;

  --radius:10px;
  --shadow:0 1px 2px rgba(27,36,48,0.06), 0 8px 20px -12px rgba(27,36,48,0.18);
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"Segoe UI", system-ui, -apple-system, sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
}
a{color:var(--accent-ink);}
h1,h2,h3{line-height:1.2;}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px;}

/* header */
.site-header{background:var(--surface);border-bottom:1px solid var(--line);}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:14px;padding-bottom:14px;}
.brand{font-weight:700;font-size:1.15rem;color:var(--ink);text-decoration:none;display:flex;flex-direction:column;gap:1px;line-height:1.25;}
.brand-sub{font-weight:400;font-size:11px;color:var(--slate);letter-spacing:.02em;}
.main-nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:14.5px;}
.main-nav a{color:var(--ink-soft);text-decoration:none;}
.main-nav a:hover{color:var(--accent-ink);}
.btn-nav{background:var(--accent);color:#fff !important;padding:7px 14px;border-radius:100px;}

/* botão de menu (hamburger) — só aparece em ecrãs pequenos, ver media query */
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:36px;height:36px;padding:0;margin-left:auto;border:none;background:none;cursor:pointer;flex-shrink:0;}
.nav-toggle-bar{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .18s ease, opacity .18s ease;}
.admin-header .nav-toggle-bar{background:#EDEEE7;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* menu com submenu (painel da junta) — abre ao passar o rato (desktop) OU
   ao tocar/clicar no toggle (telemóvel, ver assets/js/main.js: sem rato
   não há "hover", por isso o primeiro toque tem de abrir a lista em vez
   de navegar logo para o primeiro link). */
.nav-dropdown{position:relative;}
.nav-dropdown-toggle{display:inline-flex;align-items:center;gap:4px;}
.nav-dropdown-menu{display:none;flex-direction:column;position:absolute;top:100%;left:0;margin-top:0;padding-top:10px;min-width:190px;z-index:30;}
.nav-dropdown-menu-inner{background:var(--ink);border:1px solid rgba(255,255,255,0.12);border-radius:8px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;}
.nav-dropdown-menu a{padding:8px 10px;border-radius:6px;white-space:nowrap;}
.nav-dropdown-menu a:hover{background:rgba(255,255,255,0.08);}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu{display:flex;}

.page{padding-top:36px;padding-bottom:64px;}

/* buttons */
.btn{display:inline-block;padding:11px 20px;border-radius:8px;text-decoration:none;font-weight:600;font-size:14.5px;border:1px solid transparent;cursor:pointer;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-ink);}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line);}
.btn-secondary:hover{border-color:var(--accent);}
.btn-link{background:none;border:none;color:var(--accent-ink);cursor:pointer;text-decoration:underline;font-size:14px;}
.btn-link-danger{color:#B3261E;}

/* flash messages */
.flash{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:14.5px;}
.flash-success{background:#E4F0EC;color:#1E4B40;border:1px solid #BFDDD3;}
.flash-error{background:#F6E7E3;color:#7A2E1B;border:1px solid #E9C3B7;}

/* hero */
.hero{padding:40px 0 24px;}
.eyebrow{font-size:12.5px;text-transform:uppercase;letter-spacing:0.09em;color:var(--accent-ink);font-weight:700;margin:0 0 8px;}
.hero h1{font-size:clamp(1.8rem,4vw,2.6rem);max-width:18ch;margin:0 0 14px;}
.hero .lede{max-width:62ch;color:var(--ink-soft);font-size:1.05rem;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 14px;}
.hero-stat{color:var(--slate);font-size:14px;}

.how-it-works{padding:24px 0 8px;}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:16px;}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);color:var(--accent-ink);font-weight:700;font-size:13px;}
.step h3{margin:12px 0 6px;font-size:1.05rem;}
.step p{margin:0;color:var(--ink-soft);font-size:14px;}

/* forms */
.form-page{max-width:520px;margin:0 auto;}
.stacked-form{display:flex;flex-direction:column;gap:16px;margin:20px 0;}
.stacked-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink-soft);}
.stacked-form input, .stacked-form select, .stacked-form textarea{
  font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);
}
.stacked-form .hint{font-weight:400;color:var(--slate);font-size:12.5px;}
.stacked-form .checkbox-label{flex-direction:row;align-items:center;gap:8px;}
.stacked-form .checkbox-label-consent{align-items:flex-start;}
.stacked-form .checkbox-label-consent input[type=checkbox]{margin-top:3px;flex-shrink:0;}
.stacked-form .checkbox-label-consent span{font-weight:400;color:var(--ink);}
.stacked-form input[type=checkbox]{-webkit-appearance:auto;appearance:auto;width:16px;height:16px;min-width:16px;padding:0;border:1px solid var(--line);background:var(--surface);accent-color:var(--accent);}
.map-picker, .map-view, .map-full{height:340px;border-radius:var(--radius);border:1px solid var(--line);margin:6px 0 4px;}
.map-full{height:520px;}

/* lists / tables */
.list-page, .detail-page, .map-page{max-width:900px;margin:0 auto;}
.list-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px;}
.table-wrap{overflow-x:auto;}
.data-table{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.data-table th{text-align:left;background:var(--surface-2);padding:10px 14px;font-size:12px;text-transform:uppercase;letter-spacing:0.04em;color:var(--slate);}
.data-table td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:middle;}
.data-table input, .data-table select{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:6px;}
.data-table tr[data-href]{cursor:pointer;}
.data-table tr[data-href]:hover{background:var(--surface-2);}
.truncate{max-width:280px;}
.empty-state{color:var(--slate);padding:24px 0;}

/* tags: priority & status */
.tag-row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 20px;}
.sev{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;padding:4px 10px;border-radius:100px;background:var(--surface-2);}
.sev::before{content:"";width:8px;height:8px;border-radius:50%;}
.sev-baixa{color:var(--sev-low);} .sev-baixa::before{background:var(--sev-low);}
.sev-media{color:var(--sev-mid);} .sev-media::before{background:var(--sev-mid);}
.sev-alta{color:var(--sev-high);} .sev-alta::before{background:var(--sev-high);}
.sev-urgente{color:var(--sev-urgent);} .sev-urgente::before{background:var(--sev-urgent);}

.status{display:inline-block;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:100px;color:#fff;}
.status-recebida{background:var(--st-recebida);}
.status-em_analise{background:var(--st-em_analise);}
.status-atribuida{background:var(--st-atribuida);}
.status-em_execucao{background:var(--st-em_execucao);}
.status-resolvida{background:var(--st-resolvida);}
.status-rejeitada{background:var(--st-rejeitada);}

/* detail page */
.detail-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.detail-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin-bottom:20px;}
.detail-meta dt{font-size:11.5px;text-transform:uppercase;letter-spacing:0.05em;color:var(--slate);margin-bottom:3px;}
.detail-meta dd{margin:0;font-weight:600;}
.description-text{white-space:pre-line;}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:12px 0 20px;}
.photo-grid img{width:100%;height:120px;object-fit:cover;border-radius:8px;border:1px solid var(--line);}

.history-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.history-list li{border-left:3px solid var(--accent-2);padding:6px 0 6px 14px;}
.history-date{color:var(--slate);font-size:12.5px;margin-right:10px;}
.history-status{font-weight:700;}
.history-author{color:var(--slate);font-size:12.5px;margin-left:8px;}
.history-comment{margin:6px 0 0;color:var(--ink-soft);font-size:14px;}

/* admin */
.admin-header{background:var(--ink);}
.admin-header .brand, .admin-header .main-nav a{color:#EDEEE7;}
.admin-header a:hover{color:var(--accent);}
.admin-header .brand-sub{color:rgba(237,238,231,0.6);}
.admin-header .brand:hover .brand-sub{color:rgba(237,238,231,0.6);}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin:16px 0 28px;}
.dash-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-align:center;box-shadow:var(--shadow);display:block;color:inherit;text-decoration:none;cursor:pointer;transition:background .12s ease, border-color .12s ease;}
.dash-card:hover, .dash-card:focus-visible{background:var(--surface-2);border-color:var(--accent);}
.dash-num{display:block;font-size:2rem;font-weight:700;margin-bottom:6px;}
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px;}
.filter-bar select, .filter-bar input{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;}
.inline-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px;}
.inline-form input, .inline-form select{font:inherit;padding:9px 12px;border:1px solid var(--line);border-radius:8px;}
.admin-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:20px 0;}
.action-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:18px;margin:16px 0 28px;}
.stats-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);}
.stats-card h2{font-size:1rem;margin:0;}
.bar-chart{width:100%;}
.stats-card details{margin-top:10px;}
.stats-card summary{cursor:pointer;color:var(--ink-soft);font-size:13.5px;}
.action-card form{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.action-card select, .action-card textarea{font:inherit;padding:9px 10px;border:1px solid var(--line);border-radius:8px;}

/* tesouraria: estado de pagamento das faturas */
.pay-badge{display:inline-block;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:100px;color:#fff;}
.pay-badge-pendente{background:var(--sev-mid);}
.pay-badge-pago{background:var(--sev-low);}
.pay-checkbox-form{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:13.5px;color:var(--ink-soft);}

/* estado de autorização de acesso de contas (ex: munícipes) */
.status-badge{display:inline-block;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:100px;color:#fff;}
.status-badge-pending{background:var(--sev-mid);}
.status-badge-ok{background:var(--sev-low);}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:20px 0;color:var(--slate);font-size:13px;}

/* app instalável (PWA) — botão de instalação */
.pwa-install-btn{position:fixed;right:16px;bottom:16px;z-index:50;background:var(--accent);color:#fff;border:none;padding:12px 18px;border-radius:100px;font-weight:700;font-size:14px;box-shadow:var(--shadow);cursor:pointer;}
.pwa-install-btn:hover{background:var(--accent-ink);}

/* ecrãs pequenos (telemóvel) */
@media (max-width: 640px){
  .wrap{padding:0 14px;}
  .site-header .wrap{padding-top:10px;padding-bottom:10px;flex-wrap:nowrap;}
  .nav-toggle{display:flex;}
  .main-nav{display:none;width:100%;flex-basis:100%;order:3;flex-direction:column;align-items:stretch;gap:0;font-size:15px;margin-top:8px;padding-top:6px;border-top:1px solid var(--line);}
  .admin-header .main-nav{border-top-color:rgba(255,255,255,0.16);}
  .main-nav.is-open{display:flex;}
  .main-nav a, .main-nav .btn-nav{padding:11px 2px;}
  .main-nav a:not(.btn-nav):not(.nav-dropdown-toggle){border-bottom:1px solid var(--line);}
  .admin-header .main-nav a:not(.nav-dropdown-toggle){border-bottom-color:rgba(255,255,255,0.12);}
  .main-nav .btn-nav{text-align:center;margin-top:4px;}
  .nav-dropdown{width:100%;}
  .nav-dropdown-toggle{width:100%;padding:11px 2px;border-bottom:1px solid var(--line);justify-content:space-between;}
  .admin-header .nav-dropdown-toggle{border-bottom-color:rgba(255,255,255,0.12);}
  .nav-dropdown-menu{position:static;padding-top:0;min-width:0;}
  .nav-dropdown-menu-inner{background:var(--surface-2);border:none;box-shadow:none;padding:4px 0 4px 16px;}
  .admin-header .nav-dropdown-menu-inner{background:rgba(255,255,255,0.06);}
  .nav-dropdown-menu a{color:inherit;}
  .admin-header .nav-dropdown-menu a{color:#EDEEE7;}
  .page{padding-top:24px;padding-bottom:48px;}
  .hero{padding:20px 0 12px;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{text-align:center;}
  .map-picker, .map-view{height:260px;}
  .map-full{height:360px;}
  .detail-meta{grid-template-columns:1fr 1fr;padding:14px;gap:12px;}
  .dash-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid, .admin-actions{grid-template-columns:1fr;}
  .list-head{flex-direction:column;align-items:stretch;}
  .list-head .btn{text-align:center;}
  /* tabelas: em vez de obrigar a arrastar para o lado para ver as colunas
     da direita (o que em muitos telemóveis nem dá para perceber que é
     possível), cada linha passa a um "cartão" empilhado — cada valor no
     seu próprio bloco, com a etiqueta da coluna (data-label, quando
     definido no HTML) por cima. Isto aplica-se a todas as tabelas
     ".data-table" do site (ocorrências, faturas, munícipes, etc.). */
  .table-wrap{overflow-x:visible;}
  .data-table{font-size:14px;display:block;width:100%;border-radius:0;box-shadow:none;background:none;}
  .data-table tbody{display:block;width:100%;}
  .data-table tr:first-child{display:none;}
  .data-table tr{display:block;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:4px 14px;margin-bottom:12px;}
  .data-table td{display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:right;padding:9px 0;border-top:1px solid var(--line);}
  .data-table tr > td:first-child{border-top:none;}
  .data-table td:empty{display:none;}
  .data-table td[data-label]::before{content:attr(data-label);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);text-align:left;margin-right:auto;}
  .pwa-install-btn{right:12px;bottom:12px;padding:10px 16px;font-size:13px;}
}