:root {
  --bg: #e0e1dd;
  --panel: #f7f8f9;
  --border: #c8cfd8;
  --text: #0d1b2a;
  --text-muted: #415a77;
  --primary: #1b263b;
  --primary-hover: #0d1b2a;
  --primary-light: #dde4ec;
  --green: #71875a;
  --green-bg: #e9eee0;
  --amber: #b5822e;
  --amber-bg: #f5ead2;
  --danger: #a85a3f;
  --danger-bg: #f3e2d9;
  --danger-hover: #ecd2c5;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(13, 27, 42, 0.07), 0 8px 24px rgba(13, 27, 42, 0.05);
  --font-titel: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-data: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --topbar-bg: #0d1b2a;
  --topbar-text: #e0e1dd;
  --topbar-muted: #778da9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-data);
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3,
.stat-label, .label, .badge, .timeline-type,
.klant-form label, .modal h2, .btn {
  font-family: var(--font-titel);
}

.app { display: flex; flex-direction: column; height: 100vh; }
#app[hidden] { display: none; }

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding: 16px 28px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-bg);
  position: relative;
}
.topbar h1 { font-size: 17px; margin: 0 0 2px; font-weight: 700; color: var(--topbar-text); flex-shrink: 0; }
.topbar-brand { width: auto; flex-shrink: 0; display: flex; align-items: flex-start; gap: 14px; align-self: flex-start; margin-top: -16px; }
.topbar-title-group { display: flex; flex-direction: column; flex: 1; }
.topbar-fisem-date { color: #EEEEEE; font-size: 12px; margin: 0 0 20px; }
.fisem-date-value { font-size: calc(1em + 1px); font-weight: 700; }
.logo-wrap { display: flex; align-items: flex-start; flex-shrink: 0; }
.logo { height: 115px; width: auto; object-fit: contain; display: block; }

.topbar-credit {
  margin: 0 0 -14px;
  font-family: var(--font-data);
  font-size: 11.5px;
  color: var(--topbar-muted);
  white-space: nowrap;
}
.topbar-credit a { color: var(--topbar-muted); text-decoration: underline; }
.topbar-credit a:hover { color: var(--topbar-text); }

.user-info {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-data);
  font-size: 11.5px;
  white-space: nowrap;
}
.user-info-label { color: var(--topbar-muted); font-weight: 400; }
.user-info-value { color: #ffffff; font-weight: 300; }

.stats { display: flex; gap: 22px; margin-top: auto; padding-bottom: 10px; }
.stat { display: flex; flex-direction: column; }
.stat-value { font-size: 16px; font-weight: 700; color: var(--topbar-text); }
.stat-label { font-size: 12px; color: var(--topbar-muted); }
.stat-value.ok { color: #a9d18e; }
.stat-value.bad { color: #e29a7d; }

.btn {
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg); }
.topbar-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; flex-shrink: 0; }
.topbar-buttons { display: flex; gap: 10px; padding-bottom: 10px; margin-top: auto; }
.btn-hamburger { display: none; }
.mobile-account-menu { display: none; }
.btn-topbar-secondary { background: rgba(255, 255, 255, 0.1); color: var(--topbar-text); }
.btn-topbar-secondary:hover { background: rgba(255, 255, 255, 0.18); }
.btn-topbar-blue { background: #3a6ea5; color: #ffffff; }
.btn-topbar-blue:hover { background: #4a80ba; }
.btn-danger { background: var(--danger-bg); color: var(--danger); }
.btn-danger:hover { background: var(--danger-hover); }
.btn-small { padding: 6px 10px; font-size: 12.5px; }

/* ---------- Reserve fund warning ---------- */
.reserve-warning {
  background: var(--danger-bg);
  color: var(--danger);
  padding: 10px 28px;
  font-size: 13px;
  font-weight: 600;
}

/* ---------- Tabbar ---------- */
.tabbar {
  display: flex;
  gap: 4px;
  padding: 10px 28px 0;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.tab-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-titel);
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.actief { color: var(--primary); border-bottom-color: var(--primary); }

/* ---------- Layout ---------- */
.main { flex: 1; display: flex; overflow: hidden; }
.content { flex: 1; overflow-y: auto; padding: 24px 28px; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.kpi-card .kpi-label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; font-family: var(--font-titel); }
.kpi-card .kpi-value { font-size: 22px; font-weight: 700; margin-top: 6px; }
.kpi-card .kpi-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.kpi-card.ok .kpi-value { color: var(--green); }
.kpi-card.bad .kpi-value { color: var(--danger); }

.section-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; gap: 12px; flex-wrap: wrap; }
.section-toolbar h2 { margin: 0; font-size: 18px; }
.section-toolbar .spacer { flex: 1; }
.section-toolbar select {
  height: 34px;
  font-family: var(--font-data);
  font-size: 12.5px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  outline: none;
  color: var(--text);
  background: var(--panel);
  max-width: 260px;
}
.section-toolbar select:focus { border-color: var(--primary); }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.card h3 { margin: 0 0 12px 0; font-size: 14px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }

/* ---------- Data table ---------- */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left;
  font-family: var(--font-titel);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--text-muted);
  padding: 7px 5px 6px 5px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--text); }
.data-table td {
  padding: 6px 5px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table tbody tr:hover td { background: var(--bg); }
.data-table tbody tr:hover + .row-detail td { background: var(--bg); }
.data-table tbody tr:has(+ .row-detail:hover) td { background: var(--bg); }
.data-table tbody tr.row-clickable { cursor: pointer; }
.data-table tr:last-child td { border-bottom: none; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.center, .data-table th.center { text-align: center; }
.data-table td.fit, .data-table th.fit { width: 1%; white-space: nowrap; padding-left: 20px; }
.data-table td.actions { text-align: right; white-space: nowrap; }
.data-table .over-budget { color: var(--danger); font-weight: 700; }
.data-table .under-budget { color: var(--green); }
.row-detail td { padding: 6px 5px 9px 5px; color: var(--amber); font-size: 12px; font-weight: 600; border-top: 1px dotted var(--border); border-bottom: 1px solid var(--border); }
.row-detail .note-icon { margin-right: 6px; vertical-align: -2px; flex-shrink: 0; }
tr:has(+ .row-detail) td { border-bottom: none; }
.empty-row td { color: var(--text-muted); text-align: center; padding: 24px 0; }
.totals-row td {
  font-weight: 700;
  background: none;
  border-top: 2px solid var(--border);
  border-bottom: none;
  padding: 6px 5px;
}
.data-table tbody tr.totals-row:hover td { background: none; }
.data-table tr.row-negative td { color: #de0000; }
.data-table tr.row-negative:hover td { background: var(--danger-bg); }
.group-title-row td {
  font-weight: 700;
  padding: 15px 5px 6px;
  border-bottom: 1px solid var(--border);
}
.water-table .group-title-row td {
  font-size: 15.5px;
  font-family: var(--font-titel);
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  background: #EEEEEE;
}
.water-table .totals-row td {
  padding-bottom: 25px;
}
.water-table tbody tr.group-title-row:hover td { background: #EEEEEE; }

/* Water Consumption and Water Meter Readings each split into one table per
   meter (separate <table> elements stacked in separate cards), so
   table-layout:auto would size each independently from its own content and
   the tables could drift out of alignment with each other. Fixed widths,
   shared via these classes, keep every meter's table lined up the same way. */
.water-table { table-layout: fixed; }
.water-table th:nth-child(1), .water-table td:nth-child(1) { width: 85px; }
.water-table th:nth-child(2), .water-table td:nth-child(2) { width: 100px; }
.water-table th:nth-child(3), .water-table td:nth-child(3) { width: 85px; }
.water-table th:nth-child(4), .water-table td:nth-child(4) { width: 95px; }
.water-table th:nth-child(5), .water-table td:nth-child(5) { width: 145px; }
.water-table th:nth-child(6), .water-table td:nth-child(6) { width: 145px; }
.water-table th:nth-child(7), .water-table td:nth-child(7) { width: 55px; }
.water-table th:nth-child(8), .water-table td:nth-child(8) { width: 190px; }
.water-table th:nth-child(9), .water-table td:nth-child(9) { width: 100px; }
.water-table th:nth-child(10), .water-table td:nth-child(10) { width: 85px; }
.water-table th:nth-child(11), .water-table td:nth-child(11) { width: 80px; }
.water-table th:nth-child(12), .water-table td:nth-child(12) { width: 55px; }
.water-table th:nth-child(13), .water-table td:nth-child(13) { width: 55px; }

.meter-readings-table { table-layout: fixed; }
.meter-readings-table th:nth-child(1), .meter-readings-table td:nth-child(1) { width: 56px; }
.meter-readings-table th:nth-child(2), .meter-readings-table td:nth-child(2) { width: 90px; }
.meter-readings-table th:nth-child(3), .meter-readings-table td:nth-child(3) { width: 90px; }
.meter-readings-table th:nth-child(4), .meter-readings-table td:nth-child(4) { width: 100px; }
.meter-readings-table th:nth-child(5), .meter-readings-table td:nth-child(5) { width: 100px; }
.meter-readings-table th:nth-child(6), .meter-readings-table td:nth-child(6) { width: 190px; }
.meter-readings-table th:nth-child(7), .meter-readings-table td:nth-child(7) { width: 110px; }
.meter-readings-table th:nth-child(8), .meter-readings-table td:nth-child(8) { width: 80px; }
.meter-readings-table th:nth-child(9), .meter-readings-table td:nth-child(9) { width: 60px; }

.card:has(.water-table), .card:has(.meter-readings-table) { overflow-x: auto; }
.owners-table th, .owners-table td { white-space: nowrap; }
.owners-table .group-title-row td {
  font-family: var(--font-titel);
  font-weight: 600;
  font-size: 13.5px;
}
.invoices-table .group-title-row td { padding-top: 35px; }

/* ---------- Sub-tabs (e.g. within Budget) ---------- */
.subtab-bar { display: flex; gap: 6px; margin-bottom: 16px; }
.subtab-btn {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-muted);
  font-family: var(--font-titel);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.subtab-btn:hover { background: var(--bg); }
.subtab-btn.actief { background: var(--primary); color: white; border-color: var(--primary); }

.progress-bar { width: 90px; height: 6px; border-radius: 4px; background: var(--bg); overflow: hidden; flex-shrink: 0; }
.progress-bar-fill { display: block; height: 100%; background: var(--green); }
.progress-bar-fill.warn { background: #FFA500; }
.progress-bar-fill.over { background: var(--danger); }
.progress-bar-fill.cost-over { background: #de0000; }
/* The value right-aligns within the remaining space (so numbers line up
   normally) while the bar keeps a fixed width, so its left edge lines up
   across every row regardless of how wide the preceding number is. */
.pct-cell { display: flex; align-items: center; gap: 8px; }
.pct-value { flex: 1; text-align: right; font-variant-numeric: tabular-nums; }

.icon-btn {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-size: 13px; padding: 3px 6px; border-radius: 6px;
}
.icon-btn:hover { background: var(--bg); color: var(--text); }
.icon-btn svg { display: block; }
.card-toolbar-icons { display: flex; gap: 4px; align-items: center; }

/* ---------- Info grid (o.a. detail) ---------- */
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 20px; }
.info-item .label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.info-item .value { font-size: 12px; margin-top: 2px; word-break: break-word; }
.info-item .value:empty::before { content: "—"; color: var(--border); }

.badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .3px;
  flex-shrink: 0;
  display: inline-block;
}
.badge-ok { background: var(--green-bg); color: var(--green); }
.badge-bad { background: var(--danger-bg); color: var(--danger); }
.badge-admin { background: var(--primary-light); color: var(--primary); }
.badge-owner { background: var(--bg); color: var(--text-muted); }

/* ---------- Dropzone (PDF import) ---------- */
.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--primary); background: var(--primary-light); }
.dropzone .dropzone-title { font-family: var(--font-titel); font-weight: 700; color: var(--text); margin-bottom: 4px; }
.dropzone .dropzone-hint { font-size: 12px; }
.dropzone input[type="file"] { display: none; }
.dropzone-disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
  filter: grayscale(1);
}
.meter-thumb { height: 40px; width: auto; border-radius: 4px; display: block; }

.parse-review { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 16px; }
.parse-review label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; color: var(--text-muted); font-weight: 600;
}
.parse-review input {
  height: 34px;
  font-family: var(--font-data);
  font-size: 12px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  outline: none;
  color: var(--text);
}
.parse-review input.uncertain { border-color: var(--amber); background: var(--amber-bg); }
.parse-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 14px; }

/* ---------- Modal ---------- */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(13, 27, 42, 0.35);
  align-items: center; justify-content: center;
  z-index: 50;
}
.modal-overlay.open { display: flex; }
/* The generic single-entity form modal can be opened from within another
   already-open modal (e.g. editing an owner from the Owners Directory) — it
   needs to stack above, regardless of DOM order. */
#form-modal-overlay { z-index: 60; }
.modal {
  background: var(--panel);
  border-radius: 14px;
  padding: 26px 28px;
  width: 640px;
  max-width: 92vw;
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(61,51,39,0.22);
}
.modal-small { width: 440px; }
.modal-large { width: 820px; }
.modal-xl { width: 900px; }
.modal-fullwidth { width: 96vw; max-width: 96vw; }
.modal h2 { margin: 0 0 16px 0; font-size: 18px; }

.modal-opvolging { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.expense-invoices-summary { margin-bottom: 14px; font-family: var(--font-data); color: var(--text); font-size: 14px; }
.expense-invoices-summary p { margin: 0 0 2px; font-weight: 400; font-size: inherit; }
.expense-invoices-summary strong { font-weight: 600; font-size: inherit; }
.modal-opvolging .modal-actions {
  flex-shrink: 0;
  margin-top: 0;
  padding: 16px 28px;
  border-top: 1px solid var(--border);
}
.modal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 22px 28px;
  border-bottom: 1px solid var(--border);
}
.modal-header-row h2 { margin: 0; }
.modal-subtitle { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }
.modal-scroll { overflow-y: auto; padding: 20px 28px 20px; }
.modal-scroll > .card { background: none; border: none; box-shadow: none; padding: 0; margin: 0; }

.opvolging-table { width: 100%; border-collapse: collapse; }
.opvolging-table th {
  text-align: left;
  font-family: var(--font-titel);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--text-muted);
  padding: 16px 10px 8px 0;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
}
.opvolging-table td {
  padding: 9px 10px 9px 0;
  font-family: var(--font-data);
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.opvolging-table tbody tr:hover td { background: var(--bg); }
.opvolging-table tr:last-child td { border-bottom: none; }
.opvolging-table th.sortable { cursor: pointer; user-select: none; }
.opvolging-table th.sortable:hover { color: var(--text); }

/* ---------- Access logs ---------- */
.logs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.logs-toolbar #logs-search {
  height: 34px;
  width: 260px;
  max-width: 100%;
  font-family: var(--font-data);
  font-size: 12.5px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  outline: none;
  color: var(--text);
  background: var(--panel);
}
.logs-toolbar #logs-search:focus { border-color: var(--primary); }
.logs-total { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.logs-ua { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logs-pagination { justify-content: space-between; align-items: center; }
.logs-pagination #logs-page-info { font-size: 12px; color: var(--text-muted); }
.logs-pagination-buttons { display: flex; gap: 8px; }

.gebruiker-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 18px 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.gebruiker-form label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; color: var(--text-muted); font-weight: 600;
  font-family: var(--font-titel);
}
.gebruiker-form input, .gebruiker-form select {
  height: 34px;
  font-family: var(--font-data);
  font-size: 12px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  outline: none;
  color: var(--text);
}
.gebruiker-form input:focus, .gebruiker-form select:focus { border-color: var(--primary); }
.gebruiker-form input[name="email"] { width: 200px; }

.klant-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.klant-form label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; color: var(--text-muted); font-weight: 600;
}
.klant-form label.full { grid-column: 1 / -1; }
.klant-form input, .klant-form select, .klant-form textarea {
  font-family: var(--font-data);
  font-size: 12px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  outline: none;
  color: var(--text);
}
.klant-form input, .klant-form select { height: 34px; }
.klant-form textarea { padding: 8px 10px; }
.klant-form input:focus, .klant-form select:focus, .klant-form textarea:focus { border-color: var(--primary); }

.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #0d1b2a;
  color: #e0e1dd;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Login-scherm ---------- */
.login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #29314c;
  z-index: 200;
}
.login-card {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  padding: 36px 34px;
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-logo-wrap {
  display: flex;
  justify-content: center;
  margin: -36px -34px 18px;
  padding: 22px 0 26px;
  background: var(--topbar-bg);
  border-radius: var(--radius) var(--radius) 0 0;
}
.login-logo { height: 77px; width: auto; object-fit: contain; }
.login-card h1 {
  margin: 0;
  font-size: 21px;
  text-align: center;
  color: var(--text);
}
.login-subtitle {
  margin: -6px 0 8px;
  font-size: 16px;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-titel);
  font-weight: 600;
}
.login-card label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; color: var(--text-muted); font-weight: 400;
  text-align: center;
}
.login-card input {
  height: 34px;
  font-family: var(--font-data);
  font-size: 13px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  outline: none;
  color: var(--text);
}
.login-card input:focus { border-color: var(--primary); }
.login-submit { width: 100%; margin-top: -6px; }
.login-error { color: var(--danger); font-size: 12.5px; min-height: 6px; text-align: center; }
.login-disclaimer { font-size: 12.5px; color: #de0000; font-weight: 400; text-align: center; margin: 0; }

/* ---------- Meter consumption chart (modal) ---------- */
.chart-wrap { position: relative; }
.meter-chart-svg { width: 100%; height: auto; display: block; }
.chart-gridline { stroke: var(--border); stroke-width: 1; }
.chart-axis-label { font-family: var(--font-data); font-size: 11px; fill: var(--text-muted); }
.chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-marker-ring { fill: var(--panel); }
.chart-crosshair { stroke: var(--text-muted); stroke-width: 1; pointer-events: none; }
.chart-legend { display: flex; gap: 18px; justify-content: center; margin-top: 10px; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text); }
.chart-legend-key { width: 16px; height: 2px; border-radius: 1px; display: inline-block; }
.chart-legend-key-bar { height: 10px; border-radius: 2px; }
.chart-year-label { font-weight: 700; fill: var(--text); }
.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--topbar-bg);
  color: var(--topbar-text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  box-shadow: var(--shadow);
  min-width: 150px;
  z-index: 5;
}
.chart-tooltip-date { font-weight: 700; margin-bottom: 4px; }
.chart-tooltip-row { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.chart-tooltip-key { width: 12px; height: 2px; border-radius: 1px; display: inline-block; flex-shrink: 0; }
.chart-tooltip-label { color: var(--topbar-muted); flex: 1; }
.chart-tooltip-value { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  /* iOS Safari auto-zooms the whole page in when a focused input/select/
     textarea has a computed font-size under 16px. Every form field in this
     app is styled smaller than that for desktop density, so force 16px here
     to stop the page from zooming in on tap — without disabling the user's
     own pinch-zoom (no maximum-scale in the viewport meta tag). */
  input, select, textarea { font-size: 16px !important; }

  /* Table-related filter dropdowns (Invoices account filter, Access Logs
     user filter) read 1px smaller than the general 16px anti-zoom baseline. */
  .section-toolbar select,
  .logs-toolbar #logs-search { font-size: 14px !important; }

  /* Non-admins only ever see these upload cards grayed out and disabled
     (see applyDropzoneAccess in app.js) — on the cramped mobile layout,
     hide them entirely instead rather than showing dead UI. Admins never
     get the .dropzone-disabled class, so theirs stay visible as normal. */
  .dropzone-disabled { display: none; }

  .login-card { width: 92vw; max-width: 360px; padding: 28px 22px; }

  /* Grid instead of flex-wrap here: the logo's rendered width changes
     whenever its height is tuned, and a flex layout has no way to keep
     user-info's left edge locked to the title/subtitle column when that
     width shifts. Grid puts brand in its own column (spanning both rows)
     and title-group/actions in a shared second column, so they always
     line up regardless of logo size. */
  .topbar {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 4px;
    padding: 10px 14px;
  }
  .topbar-brand { width: auto; margin-top: -10px; grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .logo { height: 99px; }
  .topbar h1 { font-size: 14px; margin: 0; }
  .topbar-fisem-date { font-size: 12px; margin: 2px 0 0; }
  .topbar-title-group { grid-column: 2; grid-row: 1; min-width: 0; padding-right: 44px; }
  .stats { display: none; }
  .topbar-actions { grid-column: 2; grid-row: 2; gap: 6px; align-items: flex-start; }
  .topbar-credit { display: none; }
  .user-info { font-size: 10.5px; margin-top: 6px; }

  /* Accordion menu: tabs + account buttons collapse behind a hamburger toggle,
     pinned to the top-right corner so it doesn't push the user-info line
     around — user-info then naturally falls on its own row below the title. */
  .btn-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 14px;
  }
  .btn-hamburger span { display: block; width: 19px; height: 2.4px; background: var(--topbar-text); border-radius: 1px; }
  body.mobile-nav-open .btn-hamburger span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
  body.mobile-nav-open .btn-hamburger span:nth-child(2) { opacity: 0; }
  body.mobile-nav-open .btn-hamburger span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }

  .topbar-buttons { display: none; }

  .tabbar { display: none; }
  body.mobile-nav-open .tabbar {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 0 0;
    width: 80%;
    box-shadow: 4px 0 16px rgba(13, 27, 42, 0.2);
  }
  body.mobile-nav-open .mobile-account-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 8px;
    background: var(--panel);
    border-top: 2px solid var(--border);
    width: 80%;
    box-shadow: 4px 0 16px rgba(13, 27, 42, 0.2);
  }
  body.mobile-nav-open .tab-btn {
    width: 100%;
    text-align: left;
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
  }
  body.mobile-nav-open .tab-btn.actief { border-left-color: var(--primary); background: var(--primary-light); }

  /* Darken the rest of the app while the accordion drawer is open, so it
     reads as a menu overlaying the page rather than just pushing it down. */
  body.mobile-nav-open .reserve-warning,
  body.mobile-nav-open .main {
    position: relative;
    pointer-events: none;
  }
  body.mobile-nav-open .reserve-warning::after,
  body.mobile-nav-open .main::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(13, 27, 42, 0.5);
    z-index: 10;
  }

  .content { padding: 14px; }

  .kpi-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
  .kpi-card { padding: 12px 14px; }
  .kpi-card .kpi-value { font-size: 19px; }

  .section-toolbar { margin-bottom: 16px; }
  .section-toolbar h2 { font-size: 15px; }

  .card { padding: 12px; overflow-x: auto; }
  .card h3 { font-size: 12.5px; }
  .data-table { min-width: max-content; }
  .data-table th { font-size: 9.5px; padding: 5px 3px 4px; white-space: nowrap; }
  .data-table td { font-size: 10.5px; padding: 4px 3px; }

  .info-grid { grid-template-columns: 1fr 1fr; gap: 10px 14px; }

  .modal { padding: 18px 16px; }
  .modal-header-row, .modal-scroll { padding-left: 16px; padding-right: 16px; }
  .modal-opvolging .modal-actions { padding: 14px 16px; }
  .klant-form, .parse-review { grid-template-columns: 1fr; }
  .gebruiker-form input[name="email"] { width: 100%; }

  .modal-scroll { overflow-x: auto; }
  .opvolging-table th { font-size: 10px; padding: 12px 8px 6px 0; }
  .opvolging-table td { font-size: 10.5px; padding: 7px 8px 7px 0; }
  .logs-toolbar { flex-wrap: wrap; }
  .logs-toolbar #logs-search { width: 100%; }
  .logs-ua { max-width: 160px; }
  .logs-pagination { flex-wrap: wrap; gap: 10px; }
}