:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --border: #dfe2e6;
  --text: #1f2430;
  --muted: #6b7280;
  --accent: #14453b;
  --accent-soft: #e4efe9;
  --ok: #16a34a;
  --ok-soft: #eafaf0;
  --warn: #d97706;
  --warn-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fef2f2;

  /* Bredere paletvariatie voor de gebouw-detailpagina: donkergroen/creme/wit, in lijn met
     de AMSTAM-huisstijl (donkergroen + crème), i.p.v. overal hetzelfde grijs-wit. Bewust
     alleen daar gebruikt (coverfoto, kpi-tegels) -- de rest van de app blijft het neutrale
     grijs-wit voor leesbaarheid van cijfers/tabellen. */
  --cream: #f7f2e8;
  --cream-deep: #efe6d2;
  --green-deep: #0f3d34;
  --green-mid: #1b6b52;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

/* ---------- Topbar / navigatie ---------- */
.app-topbar { position: sticky; top: 0; z-index: 30; }
header {
  background: var(--green-deep);
  border-bottom: 1px solid var(--green-deep);
  color: #fff;
}
/* Header- en navinhoud geboxt op dezelfde breedte als de content eronder (main),
   i.p.v. edge-to-edge -- de achtergrondkleur/rand van header/nav blijft wel vol breed. */
.header-inner {
  max-width: 1450px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
header h1 { font-size: 15px; margin: 0; color: #fff; }
header h1 .payoff { font-style: italic; font-weight: 400; color: var(--cream); font-size: 12px; margin-left: 6px; }
.header-right { display: flex; align-items: center; gap: 14px; }
.header-right-actions { display: flex; align-items: center; gap: 8px; }
/* Op de donkergroene header worden "muted" tekst en secundaire knoppen lichter/lichtgroen
   i.p.v. de grijze varianten die elders op witte panelen gebruikt worden. */
header .muted { color: rgba(255,255,255,.78); }
header .btn.secondary { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
header .btn.secondary:hover { background: #d5e6dc; }

nav.tabs { background: var(--panel); border-bottom: 1px solid var(--border); }
.nav-inner { max-width: 1450px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: center; align-items: center; gap: 4px; flex-wrap: wrap; }
nav.tabs a, nav.tabs button { border: none; background: transparent; padding: 10px 16px; font-size: 13px; line-height: 1.8; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; text-decoration: none; display: inline-block; }
nav.tabs a.active, nav.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.nav-last-update { margin-left: auto; font-size: 12px; color: var(--muted); padding: 0 4px; white-space: nowrap; }

/* ---------- Beheer: titel binnen de tabbar zelf ---------- */
.nav-section-title { font-size: 13px; font-weight: 700; color: var(--text); padding: 10px 16px 10px 0; margin-right: 6px; border-right: 1px solid var(--border); }
/* Beheer-tabbar: titel + tabs links uitgelijnd i.p.v. gecentreerd (anders dan de
   gedeelde topbar-nav), verder dezelfde 1450px-breedte als de rest van de app. */
.admin-nav-inner { padding: 0 18px; justify-content: flex-start; flex-wrap: nowrap; }

/* ---------- Gebouwen-lijst in de gecentreerde nav ---------- */
.nav-buildings-label { font-size: 13px; line-height: 1.8; color: var(--muted); padding: 10px 8px 10px 0; margin-top: -2px; display: inline-block; }
.nav-building-link { padding: 10px 12px; }
.building-swatch-sm { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #fff; flex-shrink: 0; }

main { padding: 20px 24px 64px; max-width: 1450px; margin: 0 auto; }
main.wide { max-width: 1450px; }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.page-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.page-title-row h2 { margin: 0; font-size: 20px; }
.page-subline { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; text-decoration: none; margin-bottom: 12px; }
.back-link:hover { color: var(--accent); }

/* ---------- Buttons / badges ---------- */
.btn { border: none; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn.secondary { background: #fff; color: var(--text); border: 1px solid var(--border); }
.btn.danger { background: #fff; color: var(--danger); border: 1px solid #f3cccc; }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn:hover { filter: brightness(0.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.neutral { background: #eceef1; color: #6b7280; }
.badge.beige { background: var(--cream); color: #6b5636; }
/* Changelog-badges (Beheer > Changelog) -- zelfde kleurcode als AMbase, achtergrond via de
   8-cijferige hex+alpha-truc (kleur + "22") zodat er geen aparte -soft variabele per kleur nodig is. */
.badge.changelog-major { background: #dc262622; color: #dc2626; }
.badge.changelog-minor { background: #2563eb22; color: #2563eb; }
.badge.changelog-nieuw { background: #16a34a22; color: #16a34a; }
.badge.changelog-aanpassing { background: #2563eb22; color: #2563eb; }
.badge.changelog-bugfix { background: #ea580c22; color: #ea580c; }
.changelog-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #dc2626; margin-left: 5px; vertical-align: middle; }

/* Nieuws-status: draft=grijs, scheduled=geel, published=groen. */
.status-badge-draft { background: #eceef1; color: #6b7280; }
.status-badge-scheduled { background: var(--warn-soft); color: var(--warn); }
.status-badge-published { background: var(--ok-soft); color: var(--ok); }
.muted { color: var(--muted); }

/* ---------- Building cards (overzicht "Mijn gebouwen") ---------- */
.building-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.building-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px;
  cursor: pointer; text-decoration: none; color: inherit; display: block;
  transition: border-color .15s, box-shadow .15s;
}
.building-card:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(15,61,52,.10); }
.building-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.building-swatch { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
.building-card-name { font-size: 15px; font-weight: 600; margin: 0; }
.building-card-address { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.building-card-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; }
.building-card-kpi-value { font-size: 17px; font-weight: 700; }
.building-card-kpi-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; margin-top: 1px; }

/* ---------- KPI tegels (gebouw-dashboard) ---------- */
.kpi-tile-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.kpi-tile { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
.kpi-tile-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.kpi-tile-value { font-size: 28px; font-weight: 700; color: var(--text); line-height: 1; }
.kpi-tile-trend { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.kpi-tile-trend.up { color: var(--ok); background: var(--ok-soft); }
.kpi-tile-trend.down { color: var(--danger); background: var(--danger-soft); }
.kpi-tile-trend.flat { color: var(--muted); background: #f0f1f4; }

/* ---------- Gebouw-detailpagina: coverfoto, tabs, koptekst, blokken ---------- */
/* Statische placeholder-coverfoto (blauw-verloop) -- nog geen echte upload, puur om de
   ruimte/het idee te laten zien tijdens de UX-ronde. */
/* Statische placeholder-coverfoto i.p.v. kleurgradient -- nog geen echte upload-
   functionaliteit (zie project-README/UX-fase). Eén vaste foto voor alle gebouwen voorlopig. */
.building-cover {
  position: relative; height: 200px; border-radius: 12px; margin-bottom: 16px; overflow: hidden;
  background: linear-gradient(0deg, rgba(15,61,52,.35) 0%, rgba(15,61,52,.05) 100%),
              url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat;
}
.building-cover-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 22px;
  background: linear-gradient(0deg, rgba(10,20,40,.55) 0%, rgba(10,20,40,0) 100%);
  display: flex; align-items: center; gap: 14px;
}
.building-cover-overlay .building-swatch { border: 2px solid rgba(255,255,255,.6); }
.building-cover-name { color: #fff; font-size: 22px; font-weight: 700; margin: 0; text-shadow: 0 1px 4px rgba(0,0,0,.25); }
.building-cover-address { color: rgba(255,255,255,.85); font-size: 13px; margin: 2px 0 0; }

.detail-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.detail-tab-btn { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--muted); font-size: 13px; cursor: pointer; }
.detail-tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.building-header-row { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.building-header-meta { display: flex; gap: 16px; margin-top: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.building-header-meta b { color: var(--text); }

/* KPI-tegels op de gebouwpagina krijgen een cremekleurige achtergrond i.p.v. wit -- onderdeel
   van het bredere blauw/creme/wit-palet, houdt ze visueel gescheiden van de gewone panelen. */
#kpiRow .kpi-tile { background: var(--cream); border-color: var(--cream-deep); }

/* Nieuws: geen omringend panel meer (los boven de huurdersblok), titel erboven en de
   berichten in 2 kolommen naast elkaar. */
.news-block { margin-bottom: 20px; }
/* Combined selector (.news-list.news-grid-2col) i.p.v. los .news-grid-2col -- die had
   dezelfde specificity als .news-list (display:flex, verderop in dit bestand) en verloor
   het dus altijd op bronvolgorde, waardoor het nooit echt een grid werd. */
.news-list.news-grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 800px) {
  .news-list.news-grid-2col { grid-template-columns: 1fr; }
}

/* Tekst en "Lees verder"-knop naast elkaar i.p.v. gestapeld -- voorkomt een witregel
   onder korte teksten. 2 divs die float:left/float:right, clearfix op de rij eromheen. */
.news-card-row { overflow: hidden; }
.news-text-col { float: left; width: calc(100% - 108px); }
.news-action-col { float: right; padding-top: 2px; }
@media (max-width: 480px) {
  .news-text-col, .news-action-col { float: none; width: auto; }
  .news-action-col { margin-top: 10px; text-align: right; }
}

.block-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0 0 12px; }
.block-row { display: flex; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.block-row .panel { flex: 1; min-width: 0; margin-bottom: 0; }

.kv-list { display: flex; flex-direction: column; }
.kv-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.kv-row:last-child { border-bottom: none; }
.kv-label { color: var(--muted); }
.kv-value { font-weight: 600; text-align: right; }

.simple-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.simple-list li { font-size: 13px; padding: 8px 10px; background: #f7f8fa; border-radius: 6px; }

/* ---------- Nieuws ---------- */
.news-list { display: flex; flex-direction: column; gap: 10px; }
.news-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.news-date { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.news-title { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.news-text { font-size: 13px; color: var(--text); line-height: 1.5; margin: 0; }
.empty { color: var(--muted); font-size: 13px; padding: 24px; text-align: center; }

/* ---------- Beheer: tabellen ---------- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
tbody tr:hover td { background: #f7f8fa; }
.actions-cell { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.clickable-row { cursor: pointer; }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; }

/* ---------- Chips (gebouw-toegang koppelen) ---------- */
.building-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.building-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 600; border: 1.5px solid var(--border); background: #fff; color: var(--muted);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.building-chip.selected { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- Modal (eenvoudig, voor beheer add/edit) ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,18,24,.45); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: var(--panel); border-radius: 12px; width: 480px; max-width: 92vw; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.modal h3 { margin: 0 0 16px; font-size: 16px; }
.modal-row { margin-bottom: 14px; }
.modal-row label { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px; }
.modal-row input, .modal-row select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 16px; font-weight: 600; }
.chat-close { border: none; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 2px; }
.chat-close:hover { color: var(--text); }

/* ---------- Sneltoetsenoverzicht ("?") ---------- */
.shortcuts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.shortcuts-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; }
kbd { background: #f1f2f4; border: 1px solid var(--border); border-radius: 4px; padding: 3px 7px; font-size: 12px; font-family: inherit; color: var(--text); }

/* ---------- Login ---------- */
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: 340px; }
.login-box h1 { font-size: 16px; margin: 0 0 4px; }
.login-box p.login-sub { color: var(--muted); font-size: 12px; margin: 0 0 20px; }
.login-box label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.login-box .field { margin-bottom: 14px; }
.login-box input { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.login-box .btn { width: 100%; margin-top: 4px; padding: 10px; }
.login-error { color: var(--danger); font-size: 12px; margin: 0 0 12px; display: none; }
.login-hint { font-size: 11px; color: var(--muted); margin-top: 16px; text-align: center; }

@media (max-width: 900px) {
  .kpi-tile-row { grid-template-columns: repeat(2, 1fr); }
  .building-grid { grid-template-columns: 1fr; }
}