:root {
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --bg: #f5f6f8;
  --card-bg: #ffffff;
  --border: #e2e5ea;
  --text: #1f2430;
  --text-muted: #6b7280;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: var(--bg); }
body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--card-bg); border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 8px; }
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-mark { font-weight: 700; font-size: 18px; color: var(--brand-dark); }
.brand-sub { font-size: 14px; color: var(--text-muted); }
.tabs { display: flex; gap: 4px; }
.tab-btn { border: none; background: transparent; padding: 8px 14px; border-radius: 8px; font-size: 14px; cursor: pointer; color: var(--text-muted); }
.tab-btn.active { background: var(--brand); color: white; }

main { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.tab-panel { display: none; flex: 1; min-height: 0; flex-direction: column; overflow: auto; padding: 12px 16px; }
.tab-panel.active { display: flex; }
#tab-kaart.active { padding: 0; overflow: hidden; }

.filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 10px 16px; background: var(--card-bg); border-bottom: 1px solid var(--border); }
.filter-group { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); position: relative; }
.filter-group label { font-weight: 600; }
.filter-group select, .filter-group input[type="text"] { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; min-width: 160px; }
.search-group { flex: 1; min-width: 200px; }
.address-results { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid var(--border); border-radius: 8px; max-height: 220px; overflow: auto; z-index: 1000; display: none; }
.address-results.visible { display: block; }
.address-result-item { padding: 8px 10px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--border); }
.address-result-item:hover { background: #f0f4ff; }

.btn { border: none; border-radius: 8px; padding: 9px 16px; font-size: 14px; cursor: pointer; font-weight: 600; }
.btn-primary { background: var(--brand); color: white; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn-danger { background: #dc2626; color: white; }

.map-wrap { position: relative; flex: 1; min-height: 0; }
#map { position: absolute; inset: 0; }

.draw-toolbar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1000; background: white; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); padding: 10px 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; max-width: 92vw; max-height: 46vh; overflow-y: auto; flex-wrap: wrap; }
.rotate-hint { display: none; align-items: center; gap: 8px; background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; border-radius: 8px; padding: 6px 10px; font-size: 12px; width: 100%; order: -1; }
.draw-toolbar.hidden { display: none; }
.draw-distance { font-weight: 700; color: var(--brand-dark); }

.locate-control a { font-size: 16px; display: flex; align-items: center; justify-content: center; text-decoration: none; }

.legend { position: absolute; bottom: 16px; left: 16px; background: white; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.12); padding: 10px 12px; font-size: 12px; z-index: 900; max-width: 220px; }
.legend-item { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.legend-swatch { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.card h3 { margin: 0 0 12px 0; font-size: 15px; }

.summary-numbers { display: flex; gap: 24px; flex-wrap: wrap; }
.summary-numbers .stat { display: flex; flex-direction: column; }
.summary-numbers .stat-value { font-size: 26px; font-weight: 700; color: var(--brand-dark); }
.summary-numbers .stat-label { font-size: 12px; color: var(--text-muted); }

.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 70px; align-items: center; gap: 8px; font-size: 13px; }
.bar-row .bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: #eef1f5; border-radius: 6px; height: 12px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; }
.bar-value { text-align: right; color: var(--text-muted); }
.bar-chart-horizontal-scroll { max-height: 260px; overflow-y: auto; }

.matrix-table-wrap { overflow-x: auto; }
.matrix-table { border-collapse: collapse; width: 100%; font-size: 13px; white-space: nowrap; }
.matrix-table th, .matrix-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: right; }
.matrix-table th:first-child, .matrix-table td:first-child { text-align: left; position: sticky; left: 0; background: var(--card-bg); }
.matrix-table thead th { color: var(--text-muted); font-weight: 600; font-size: 12px; border-bottom: 2px solid var(--border); }
.matrix-table thead th .type-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.matrix-table tbody tr:hover { background: #f8f9fb; }
.matrix-table td.total-col, .matrix-table th.total-col { font-weight: 700; }

.inactive-badge { color: #b45309; font-weight: 600; }

.admin-add-row { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.admin-add-row input[type="text"] { flex: 1; min-width: 140px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.admin-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.admin-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.admin-list .inactive { opacity: 0.5; }
.admin-list .row-actions { display: flex; gap: 6px; }
.admin-list .row-actions button { font-size: 12px; padding: 4px 8px; }
.pin-cell { font-family: "SFMono-Regular", Consolas, monospace; background: #eef1f5; padding: 2px 8px; border-radius: 6px; font-size: 12px; letter-spacing: 1px; }

.session-box { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.session-info { color: var(--text-muted); }
.session-info strong { color: var(--text); }
.hidden { display: none !important; }

.coworkers-list { display: flex; flex-direction: column; gap: 6px; max-height: 150px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.coworkers-list .cw-row { flex-direction: row !important; align-items: center; gap: 8px; font-weight: 400 !important; font-size: 14px !important; color: var(--text) !important; }
.coworkers-list .cw-row input { width: auto; }
.readonly-field { padding: 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: #f8f9fb; color: var(--text-muted); }
.form-hint { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.admin-pin-row { display: flex; align-items: center; gap: 6px; }
.admin-pin-row input[type="text"] { width: 70px; padding: 4px 6px; font-size: 12px; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 16px; }
.modal-overlay.hidden { display: none; }
.modal { background: white; border-radius: 12px; padding: 20px; width: 100%; max-width: 420px; max-height: 90vh; overflow: auto; }
.modal h3 { margin-top: 0; }
.modal form, .modal .modal-form { display: flex; flex-direction: column; gap: 12px; }
.modal label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.modal select, .modal input, .modal textarea { padding: 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; }

.leaflet-popup-content { font-size: 13px; min-width: 180px; }
.popup-title { font-weight: 700; margin-bottom: 4px; }
.popup-row { color: var(--text-muted); margin: 2px 0; }
.popup-actions { margin-top: 8px; display: flex; gap: 6px; }
.popup-actions button { font-size: 12px; padding: 4px 8px; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #1f2430; color: white; padding: 10px 18px; border-radius: 8px; font-size: 13px; z-index: 3000; }
.toast.hidden { display: none; }
.toast.error { background: #dc2626; }

/* Op brede schermen doet filter-fields niets (display:contents): de filter-groups
   gedragen zich gewoon als rechtstreekse flex-items van .filter-bar, zoals voorheen.
   Enkel op smalle schermen (zie media query) wordt dit een inklapbaar blok, zodat een
   groeiende lijst filters (team, medewerker, type, periode, maand, adres) niet
   telkens meer kaartruimte opeet op een telefoon. */
.filter-fields { display: contents; }
.filter-toggle { display: none; }

@media (max-width: 720px) {
  .filter-bar { flex-wrap: wrap; align-items: stretch; }
  .filter-toggle { display: inline-flex; align-items: center; gap: 6px; order: 1; }
  #btnNewAction { order: 2; }
  .filter-fields { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 8px; }
  .filter-fields.expanded { display: flex; }
  .filter-group select, .filter-group input[type="text"] { min-width: 0; width: 100%; }
  .brand-sub { display: none; }
  .draw-toolbar { left: 8px; right: 8px; transform: none; top: 8px; }
}

/* Smartphones: we richten ons vooral op liggende stand (zie hieronder). In portretstand
   blijft raadplegen/statistieken prima werken, maar geven we een hint om te draaien
   zodra iemand een straat wil intekenen, en verbergen we de filterbalk tijdens het
   tekenen zodat er toch zoveel mogelijk kaart overblijft. */
@media (max-width: 600px) {
  body.is-drawing .filter-bar { display: none; }
}
@media (max-width: 600px) and (orientation: portrait) {
  body.is-drawing .rotate-hint { display: flex; }
}

/* Smartphones in liggende stand: laag scherm, dus alles compacter maken zodat de
   kaart zoveel mogelijk hoogte overhoudt om op te tekenen. */
@media (max-height: 480px) {
  .topbar { padding: 6px 12px; }
  .filter-bar { padding: 6px 12px; gap: 8px; }
  .filter-group select, .filter-group input[type="text"] { padding: 4px 6px; font-size: 13px; min-width: 120px; }
  .draw-toolbar { max-height: 38vh; padding: 8px 10px; gap: 6px; font-size: 12px; }
  .legend { max-width: 150px; padding: 6px 8px; font-size: 11px; bottom: 8px; left: 8px; }
  .legend-item { margin: 1px 0; }
}