/* ============================================================
   Stijl: Harvest (Refero "Getharvest — golden hour workbench")
   Kleuren blijven Drechtsteden: oranje #ff7700, donkerblauw #18364a.
   Structuur verandert: menubalk bovenaan (desktop), Inter + Fraunces,
   crème canvas, witte zwevende kaarten, overzicht als startscherm.
   Laadt als laatste stylesheet.
   ============================================================ */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-var.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/fraunces-var.woff2') format('woff2'); }

:root {
  --paper: #fff8f1;
  --paper-2: #fbeee0;
  --card: #ffffff;
  --ink: #18364a;
  --ink-soft: #5b6670;
  --ink-faint: #8b8f94;
  --line: rgba(24, 54, 74, 0.13);
  --line-soft: rgba(24, 54, 74, 0.07);
  --radius: 14px;
  --radius-card: 22px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --shadow: 0 1px 2px rgba(120, 72, 20, 0.05), 0 10px 30px -12px rgba(160, 96, 30, 0.22);
  --shadow-hover: 0 2px 4px rgba(120, 72, 20, 0.07), 0 20px 40px -14px rgba(200, 110, 20, 0.34);
  --shadow-btn: 0 1px 2px rgba(24, 54, 74, 0.10);
}

html { background: var(--paper); }
body { background: var(--paper); font-family: var(--sans); font-size: 15px; font-feature-settings: "cv11", "ss01"; letter-spacing: -0.005em; color: var(--ink); }

/* ---------- Typografie ---------- */
.page-title { font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 1.08; letter-spacing: -0.02em; font-variation-settings: "opsz" 96; }
.page-title::before { content: "Drechtsteden Taxaties"; display: block; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.page-sub { font-size: 16px; color: var(--ink-soft); margin-top: 8px; }
.page-head { margin-bottom: 30px; }
.box-title { font-family: var(--sans); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.editor-section > h2, .section-subheading h2 { font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: -0.015em; }
.dossier-vehicle { font-family: var(--serif) !important; font-weight: 500 !important; letter-spacing: -0.02em; }
.kpi-value, .wt-kpi-waarde { font-family: var(--serif) !important; font-weight: 500 !important; letter-spacing: -0.02em; }
.modal-title { font-family: var(--serif); font-weight: 500; font-size: 28px; letter-spacing: -0.015em; }
.tbl .num { font-family: var(--sans); font-variant-numeric: tabular-nums; }

/* ============================================================
   DESKTOP (≥1100px): menubalk bovenaan in plaats van zijbalk
   ============================================================ */
@media (min-width: 1100px) {
  .app { display: block; }
  .sidebar {
    position: sticky; top: 0; z-index: 50; height: 72px;
    display: flex; flex-direction: row; align-items: center; gap: 28px;
    padding: 0 max(24px, calc((100vw - 1320px) / 2));
    background: rgba(255, 248, 241, 0.9); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border: 0; box-shadow: 0 1px 0 rgba(160, 96, 30, 0.14);
  }
  .brand { display: flex; align-items: center; gap: 12px; padding: 0; flex: 0 0 auto; }
  .brand-logo { width: 150px; }
  .brand-tag { display: none; }
  .nav { flex-direction: row; gap: 2px; flex: 1 1 auto; justify-content: center; }
  .nav-item { padding: 0 14px; height: 44px; border: 0; border-radius: 999px; font-weight: 500; font-size: 14.5px; color: var(--ink-soft); gap: 0; }
  .nav-item .nav-ico { display: none; }
  .nav-item:hover { background: rgba(24, 54, 74, 0.05); color: var(--ink); border: 0; }
  .nav-item.active { background: var(--ink); color: #fff; box-shadow: none; border: 0; }
  .sidebar-foot { margin: 0; flex-direction: row; align-items: center; gap: 10px; flex: 0 0 auto; }
  button.notif-pill, .notif-pill { position: relative; width: 44px; flex: 0 0 44px; height: 44px; padding: 0; justify-content: center; border: 0; border-radius: 999px; background: var(--card); box-shadow: var(--shadow-btn); font-size: 0; }
  .notif-pill .dot, #melding-pill-tekst { display: none; }
  .notif-pill::before { content: ""; width: 18px; height: 18px; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / contain no-repeat; }
  .notif-pill .wk-teller { position: absolute; top: -4px; right: -4px; margin: 0; font-size: 11px; }
  .user-chip { max-width: 220px; }
  .user-meta { min-width: 0; overflow: hidden; }
  .user-meta strong, .user-meta em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .user-chip { height: 44px; padding: 4px 14px 4px 4px; border: 0; border-radius: 999px; background: var(--card); box-shadow: var(--shadow-btn); }
  .user-avatar { width: 36px; height: 36px; }
  .user-meta strong { font-size: 13px; font-weight: 600; }
  .user-meta em { font-size: 11.5px; }
  .main { padding: 44px max(24px, calc((100vw - 1320px) / 2)) 80px; }
  .view { max-width: 1320px; }
}
@media (min-width: 1100px) and (max-width: 1500px) {
  .user-meta { display: none; }
  .user-chip { padding: 4px; }
  .nav-item { padding: 0 11px; font-size: 14px; }
  .sidebar { gap: 16px; }
  .brand-logo { width: 128px; }
}

/* Tablet (761–1099): zijbalk blijft, maar rustiger */
@media (min-width: 761px) and (max-width: 1099px) {
  .sidebar { background: var(--paper-2); border-right: 0; box-shadow: inset -1px 0 0 rgba(160, 96, 30, 0.12); }
  .nav-item { border: 0; border-radius: 14px; }
  .nav-item.active { background: var(--ink); color: #fff; border: 0; box-shadow: none; }
  .nav-item.active .nav-ico { color: var(--accent); }
  .notif-pill, .user-chip { border: 0; border-radius: 14px; box-shadow: var(--shadow-btn); }
}

/* ---------- Kaarten ---------- */
.box { border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 26px; }
.box .box { box-shadow: none; border: 1px solid var(--line-soft); }
.grid { gap: 22px; }
a.kpi-link:hover { border: 0; box-shadow: var(--shadow-hover); }

/* ---------- Knoppen ---------- */
.btn { min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-btn); font-weight: 600; letter-spacing: -0.005em; transition: background .15s, box-shadow .15s, transform .08s, border-color .15s; }
.btn:hover { background: #fff; border-color: rgba(24, 54, 74, 0.3); box-shadow: 0 6px 16px -8px rgba(24, 54, 74, 0.35); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(120, 50, 0, 0.25), 0 10px 22px -10px rgba(255, 119, 0, 0.85); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: rgba(255, 119, 0, 0.08); border-color: transparent; box-shadow: none; color: var(--accent-dark); }
.btn-sm { min-height: 36px; padding: 6px 14px; }

/* ---------- Invoer ---------- */
.field label { font-family: var(--sans); color: var(--ink-soft); letter-spacing: 0.04em; font-weight: 600; font-size: 11.5px; }
.field input, .field select, .field textarea, .report-search, .wd-land, .wd-besch, .wd-vrij, .wd-check-rij select, .wd-check-opm, .wd-foto-rij select {
  border: 1px solid #ddd5ca; border-radius: 12px; background: #fff; font-family: var(--sans); transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus, .report-search:focus, .wd-besch:focus, .wd-vrij:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 119, 0, 0.14); }
.report-search { min-height: 50px; border-radius: 999px; padding: 12px 18px 12px 46px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%238b97a0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E") no-repeat 18px center; box-shadow: var(--shadow-btn); }
.report-search-label { color: var(--accent); letter-spacing: 0.1em; font-weight: 600; }

/* ---------- Tabellen ---------- */
table.tbl { font-size: 14px; }
.tbl th { font-family: var(--sans); color: var(--ink-faint); font-weight: 600; font-size: 11.5px; letter-spacing: 0.06em; border-bottom: 1px solid var(--line); padding: 10px 14px; }
.tbl td { padding: 16px 14px; border-bottom: 1px solid var(--line-soft); }
.tbl tr:hover td { background: #fff8f0; }
.tbl .row-link { font-weight: 600; }

/* ---------- Labels ---------- */
.badge { border-radius: 999px; padding: 3px 10px; font-weight: 600; font-size: 12px; }
.wd-chip, .wt-chip { border-radius: 999px; border-color: transparent; background: var(--card); box-shadow: var(--shadow-btn); }
.wd-chip.actief, .wt-chip.wt-actief { background: var(--ink); color: #fff; }

/* ---------- Rapport bewerken ---------- */
.section-nav { border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); box-shadow: var(--shadow); padding: 6px; top: 80px; }
.section-nav button { border-radius: 999px; padding: 0 16px; min-height: 40px; font-weight: 500; color: var(--ink-soft); }
.section-nav button:hover { background: rgba(255, 119, 0, 0.1); color: var(--accent-dark); }
.editor-section { border-bottom: 0; scroll-margin-top: 150px; }
.dossier-head-box.report-editor-head { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 28px; position: relative; overflow: hidden; }
.dossier-head-box.report-editor-head::after { content: ""; position: absolute; right: -90px; top: -130px; width: 380px; height: 300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 119, 0, 0.18), rgba(254, 227, 181, 0.22) 60%, transparent); pointer-events: none; }
.dossier-head-box.report-editor-head > * { position: relative; z-index: 1; }
.dossier-head-box.report-editor-head .dossier-vehicle { font-size: 40px; }
.wd-balk { border: 0; border-radius: 999px; box-shadow: var(--shadow-hover); padding-left: 22px; }
.wd-foto { border: 0; border-radius: 18px; box-shadow: var(--shadow); }
.wd-dropzone { border-radius: 18px; border-color: rgba(255, 119, 0, 0.35); background: #fffaf4; }
.wd-scanbox { background: linear-gradient(115deg, #ffffff 40%, #fff0de); }

/* ---------- Modals en meldingen ---------- */
.modal-backdrop { background: rgba(24, 30, 36, 0.4); backdrop-filter: blur(4px); }
.modal { border: 0; border-radius: 26px; box-shadow: 0 34px 80px -20px rgba(24, 54, 74, 0.5); }
.modal-head { padding: 24px 28px 0; }
.modal-body { padding: 18px 28px 28px; }
.modal-close { width: 44px; height: 44px; border-radius: 999px; }
.modal-close:hover { background: var(--paper-2); }
.melding-pop { border: 0; border-left: 0; border-radius: 20px; box-shadow: 0 22px 48px -14px rgba(24, 54, 74, 0.4); }
.welkom-banner, .toast { border-radius: 999px; }
.welkom-banner { padding-left: 8px; }
.toast { border: 0; box-shadow: 0 18px 40px -12px rgba(24, 54, 74, 0.45); }

/* ============================================================
   OVERZICHT
   ============================================================ */
.ov { display: flex; flex-direction: column; gap: 26px; }
.ov-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; align-items: center; padding: 40px 42px; border-radius: 28px; background: #fff; box-shadow: var(--shadow); overflow: hidden; isolation: isolate; }
.ov-hero::before { content: ""; position: absolute; z-index: -1; right: -12%; top: -40%; width: 70%; height: 180%; background: radial-gradient(closest-side, rgba(255, 119, 0, 0.26), rgba(254, 227, 181, 0.45) 55%, transparent 80%); filter: blur(10px); animation: ovGloed 14s ease-in-out infinite alternate; }
@keyframes ovGloed { to { transform: translate(-6%, 8%) scale(1.08); } }
.ov-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.ov-titel { font-family: var(--serif); font-weight: 500; font-size: 58px; line-height: 1.02; letter-spacing: -0.03em; margin: 12px 0 14px; font-variation-settings: "opsz" 144; }
.ov-sub { font-size: 17px; color: var(--ink-soft); max-width: 460px; }
.ov-sub b { color: var(--ink); font-weight: 600; }
.ov-acties { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.ov-hero-kaart { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(6px); border-radius: 22px; padding: 22px 24px 18px; box-shadow: 0 0 0 1px rgba(24, 54, 74, 0.06), 0 24px 44px -20px rgba(160, 96, 30, 0.45); transform: rotate(-1.2deg); }
.ov-hk-kop { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.ov-groei { font-size: 12px; padding: 3px 9px; border-radius: 999px; }
.ov-groei.op { background: var(--green-bg); color: #1d7a41; }
.ov-groei.neer { background: #fde7e4; color: var(--red); }
.ov-hk-bedrag { font-family: var(--serif); font-size: 44px; font-weight: 500; letter-spacing: -0.02em; margin: 6px 0 16px; white-space: nowrap; }
.ov-hk-bedrag .unit { font-family: var(--sans); font-size: 22px; color: var(--ink-faint); }
.ov-staven { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; align-items: end; height: 130px; }
.ov-staaf { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.ov-staaf i { display: block; width: 100%; height: var(--h); min-height: 4px; border-radius: 8px 8px 4px 4px; background: #f1e3d2; transform-origin: bottom; animation: ovStaaf .7s cubic-bezier(.2, .9, .3, 1.1) both; }
.ov-staaf:nth-child(n) i { animation-delay: calc(var(--i, 0) * 1ms); }
.ov-staaf.nu i { background: linear-gradient(180deg, #ff9a3d, var(--accent)); box-shadow: 0 8px 18px -8px rgba(255, 119, 0, 0.9); }
.ov-staaf span { font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; }
@keyframes ovStaaf { from { transform: scaleY(0); } }

.ov-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ov-kpi { background: #fff; border-radius: 22px; box-shadow: var(--shadow); padding: 20px 22px; display: flex; flex-direction: column; gap: 2px; }
.ov-kpi-label { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.ov-kpi-waarde { font-family: var(--serif); font-size: 36px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; white-space: nowrap; }
.ov-kpi-waarde .unit { font-family: var(--sans); font-size: 18px; color: var(--ink-faint); }
.ov-kpi-sub { font-size: 12.5px; color: var(--ink-faint); }
.ov-kpi.accent { background: var(--ink); color: #fff; }
.ov-kpi.accent .ov-kpi-label, .ov-kpi.accent .ov-kpi-sub, .ov-kpi.accent .unit { color: rgba(255, 255, 255, 0.7); }
.ov-kpi.accent .ov-kpi-waarde { color: #ffb36b; }

.ov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.ov-kaart { display: flex; flex-direction: column; min-width: 0; }
.ov-kaart-kop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; gap: 12px; }
.ov-kaart-kop h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: -0.015em; }
.ov-kaart-kop a, .ov-link { color: var(--accent-dark); font-weight: 600; font-size: 13.5px; text-decoration: none; background: none; border: 0; cursor: pointer; font-family: var(--sans); min-height: 44px; display: inline-flex; align-items: center; }
.ov-kaart-kop a:hover, .ov-link:hover { text-decoration: underline; }
.ov-leeg { color: var(--ink-faint); padding: 18px 0; }
.ov-tijdlijn, .ov-lijst { list-style: none; margin: 0; padding: 0; }
.ov-tijdlijn li { display: grid; grid-template-columns: 50px 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.ov-tijdlijn li:first-child { border-top: 0; }
.ov-tijdlijn time { font-weight: 600; font-variant-numeric: tabular-nums; }
.ov-tl-punt { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(24, 54, 74, 0.06); }
.ov-tijdlijn div, .ov-lijst div { display: flex; flex-direction: column; min-width: 0; }
.ov-tijdlijn span, .ov-lijst span { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-tijdlijn em { font-style: normal; font-size: 12px; color: var(--ink-faint); }
.ov-lijst li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.ov-lijst li:first-child { border-top: 0; }
.ov-r { align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.ov-meldingen li { justify-content: flex-start; align-items: flex-start; }
.ov-meldingen li.nieuw strong::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: middle; }
.ov-meldingen span { white-space: normal; }
.ov-meldingen em { font-style: normal; font-size: 12px; color: var(--ink-faint); }
.ov-meldingen .mp-avatar { flex: 0 0 34px; width: 34px; height: 34px; font-size: 12px; }

@media (max-width: 1099px) {
  .ov-hero { grid-template-columns: minmax(0, 1fr); padding: 30px; }
  .ov-hero-kaart { transform: none; }
  .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ov-grid { grid-template-columns: minmax(0, 1fr); }
  .ov-hero { padding: 24px 20px; border-radius: 22px; }
  .ov-titel { font-size: 40px; }
  .ov-sub { font-size: 15px; }
  .ov-kpis { gap: 12px; }
  .ov-kpi { padding: 16px; border-radius: 18px; }
  .ov-kpi-waarde { font-size: 26px; }
  .ov-kpi-waarde .unit { font-size: 14px; }
  .ov-hk-bedrag { font-size: 34px; }
  .ov-staven { height: 100px; gap: 5px; }
  .ov-staaf span { display: none; }
  .ov-tijdlijn li { grid-template-columns: 44px 10px minmax(0, 1fr); }
  .ov-tijdlijn li .btn { grid-column: 3; justify-self: start; }
}

/* ---------- Mobiel ---------- */
@media (max-width: 760px) {
  .main { padding: 20px 16px calc(120px + env(safe-area-inset-bottom)); }
  .page-title { font-size: 32px; }
  .page-title::before { font-size: 11px; margin-bottom: 6px; }
  .sidebar { background: rgba(255, 248, 241, 0.92); backdrop-filter: blur(12px); border-bottom: 0; box-shadow: 0 1px 0 rgba(160, 96, 30, 0.14); }
  .box { padding: 18px; border-radius: 20px; }
  .tbl tr { border: 0; border-radius: 18px; box-shadow: var(--shadow); padding: 10px 4px; }
  .box .tbl tr { box-shadow: none; border: 1px solid var(--line-soft); }
  .bottom-nav { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border-top: 0; box-shadow: 0 -10px 28px -14px rgba(160, 96, 30, 0.4); }
  .bn-item { font-family: var(--sans); font-weight: 500; }
  .bn-item.active { color: var(--ink); background: rgba(255, 119, 0, 0.12); }
  .bn-item.active .bn-ico { color: var(--accent); }
  .meer-menu { border: 0; border-radius: 22px; box-shadow: var(--shadow-hover); }
  .section-nav { border-radius: 18px; top: 64px; }
  .dossier-head-box.report-editor-head { padding: 20px; }
  .dossier-head-box.report-editor-head .dossier-vehicle { font-size: 30px; }
  .editor-section > h2 { font-size: 26px; }
  .btn { border-radius: 14px; }
}
@media (max-width: 1180px) {
  .btn-sm, .section-nav button, .wd-chip, .wt-chip { min-height: 44px; }
}

@media print {
  html, body { background: #fff; }
  .page-title::before { content: none; }
}