/* ===========================================================
   Kenis NV — portaal huisstijl (redesign)
   Bedoeld om ná bootstrap.css geladen te worden.
   Alles hangt aan de tokens onderaan :root — pas daar aan.
   =========================================================== */

:root {
  /* kleur */
  --k-navy:        #234380;  /* primaire actie, actieve nav */
  --k-navy-dark:   #16294d;  /* sidebar */
  --k-navy-line:   #24406f;
  --k-navy-soft:   #2f4a7a;

  --k-bg:          #f6f5f2;  /* pagina-achtergrond */
  --k-surface:     #ffffff;  /* kaarten, tabellen */
  --k-surface-alt: #faf9f7;  /* tabelkop, inputs */
  --k-border:      #e4e2dc;
  --k-border-soft: #f1efea;  /* rijscheiding */

  --k-text:        #15171a;
  --k-text-2:      #3f434a;
  --k-muted:       #7a7f87;
  --k-muted-2:     #8a8f97;

  /* status */
  --k-ok-bg:    #e4f0e6;  --k-ok-fg:    #2f6b3f;
  --k-warn-bg:  #f7ecd8;  --k-warn-fg:  #8a6416;
  --k-info-bg:  #e6eaf3;  --k-info-fg:  #2f4a7a;
  --k-stop-bg:  #f6e3e3;  --k-stop-fg:  #9d3b3b;
  --k-neutral-bg: #efedea; --k-neutral-fg: #6b6f76;

  /* vorm */
  --k-r-sm: 6px; --k-r: 9px; --k-r-md: 12px; --k-r-pill: 20px;
  --k-sidebar-w: 236px;

  /* type */
  --k-font: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --k-font-head: 'Barlow Semi Condensed', 'Barlow', Helvetica, Arial, sans-serif;
}

/* ---------- basis ---------- */
body.k-app {
  margin: 0;
  background: var(--k-bg);
  color: var(--k-text);
  font-family: var(--k-font);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
.k-app *, .k-app *::before, .k-app *::after { box-sizing: border-box; }
/* nodig: verschillende k-klassen zetten display, wat de browserregel
   voor [hidden] overschrijft. Zonder dit blijven verborgen elementen zichtbaar. */
.k-app [hidden] { display: none !important; }
/* let op: uitgesloten van componenten die hun eigen kleur zetten (knoppen, sidebar/tabbalk-links, chips, rijen) -
   anders wint deze regel qua CSS-specificiteit (element+klasse) altijd van hun eigen ".k-btn"-achtige klasse
   (alleen klasse), en werd bijvoorbeeld sidebar-tekst navy-op-navy (dus onleesbaar) */
.k-app a:not([class*="k-btn"]):not(.k-nav-item):not(.k-tab):not(.k-chip):not(.k-row):not(.k-mcard) { color: var(--k-navy); text-decoration: none; }
.k-app a:not([class*="k-btn"]):not(.k-nav-item):not(.k-tab):not(.k-chip):not(.k-row):not(.k-mcard):hover { color: var(--k-navy-dark); }
.k-num { font-variant-numeric: tabular-nums; }
.k-trunc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- shell ---------- */
.k-shell { display: flex; min-height: 100vh; }
.k-body  { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.k-main  { flex: 1; padding: 22px 26px 40px; }

/* ---------- sidebar ---------- */
/* sticky + eigen hoogte/scroll: anders rekt de sidebar mee met lange paginas (bv. een grote tabel)
   en verdwijnt het onderste blok (gebruiker/uitloggen) ver onder de zichtbare pagina */
.k-sidebar {
  width: var(--k-sidebar-w); flex: none;
  background: var(--k-navy-dark);
  display: flex; flex-direction: column;
  padding: 22px 14px 16px;
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; overflow-y: auto;
}
.k-brand { display: flex; align-items: center; gap: 12px; padding: 4px 10px 22px; }
.k-brand-mark {
  width: 38px; height: 38px; border-radius: 50%; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 17px;
}
img.k-brand-mark { object-fit: contain; padding: 6px; }
img.k-topbar-mark { object-fit: contain; padding: 6px; background: var(--k-navy-dark); border-radius: 50%; }
.k-brand-name { color: #fff; font-weight: 600; font-size: 15px; line-height: 1.1; }
.k-brand-sub  { color: #8ba0c6; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }

.k-nav { display: flex; flex-direction: column; gap: 2px; }
.k-nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  text-align: left; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 15.5px; color: #b9c6de;
  padding: 11px 12px; border-radius: var(--k-r-sm);
}
.k-nav-item::before {
  content: ""; width: 6px; height: 6px; border-radius: 2px;
  flex: none; background: var(--k-navy-soft);
}
.k-nav-item:hover { background: #1d3560; color: #dbe3f1; }
.k-nav-item.is-active { background: var(--k-navy); color: #fff; font-weight: 600; }
.k-nav-item.is-active::before { background: #fff; }

.k-sidebar-foot {
  margin-top: auto; border-top: 1px solid var(--k-navy-line);
  padding-top: 14px; display: flex; align-items: center; gap: 10px;
}
.k-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: #2d4c80;
  color: #cddaf0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
.k-user-name { color: #e6ecf7; font-size: 13px; font-weight: 500; }
.k-user-role { color: #7f95bd; font-size: 11px; }

/* ---------- topbar ---------- */
.k-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 26px; background: var(--k-surface);
  border-bottom: 1px solid var(--k-border);
}
.k-topbar-mark {
  display: none; width: 32px; height: 32px; flex: none; border-radius: 50%;
  border: 2px solid var(--k-navy-dark); color: var(--k-navy-dark);
  align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.k-title { font-family: var(--k-font-head); font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.k-subtitle { font-size: 12.5px; color: var(--k-muted); margin-top: 2px; }
.k-spacer { flex: 1; }

/* ---------- knoppen ---------- */
.k-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--k-border); background: var(--k-surface);
  color: var(--k-text-2); font: inherit; font-size: 14px; font-weight: 500;
  padding: 10px 16px; border-radius: var(--k-r); cursor: pointer;
}
.k-btn:hover { background: var(--k-surface-alt); }
.k-btn--primary { background: var(--k-navy); border-color: var(--k-navy); color: #fff; font-weight: 600; }
.k-btn--primary:hover { background: var(--k-navy-dark); }
.k-btn--danger { color: var(--k-stop-fg); border-color: #e8d3d3; }
.k-btn--sm { padding: 6px 12px; font-size: 13px; }
.k-btn--link { border: 0; background: transparent; color: var(--k-navy); font-weight: 600; font-size: 13px; padding: 0; }

.k-input {
  font: inherit; font-size: 13.5px; padding: 9px 13px;
  border: 1px solid #dedbd4; border-radius: var(--k-r);
  background: var(--k-surface-alt); color: var(--k-text); outline: none;
}
.k-input:focus { border-color: var(--k-navy); background: #fff; }
.k-input--search { width: 280px; }
.k-input--block { width: 100%; font-size: 15px; padding: 11px 14px; background: #fff; }
/* zelfde uiterlijk als .k-input--block, maar altijd zichtbaar (niet alleen op mobiel) -
   gebruikt voor de zoekvelden binnen een lijst-kaart, ongeacht schermbreedte */
.k-input--full { width: 100%; font-size: 15px; padding: 11px 14px; background: #fff; }

/* ---------- filterchips ---------- */
.k-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.k-chip {
  flex: none; border: 1px solid #dedbd4; background: #fff; color: var(--k-text-2);
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--k-r-pill); cursor: pointer; white-space: nowrap;
}
.k-chip.is-active { background: var(--k-navy-dark); border-color: var(--k-navy-dark); color: #fff; }

/* ---------- filterchips (checkbox-groep gestyled als chips, bv. boven een lijst) ---------- */
.k-filterchips { display: flex; flex-wrap: wrap; gap: 8px; }
.k-filterchips input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.k-filterchips label {
  display: inline-flex; align-items: center; cursor: pointer; user-select: none;
  border: 1px solid #dedbd4; background: #fff; color: var(--k-text-2);
  font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--k-r-pill); white-space: nowrap;
}
.k-filterchips input[type="checkbox"]:checked + label { background: var(--k-navy-dark); border-color: var(--k-navy-dark); color: #fff; }
.k-filterchips input[type="checkbox"]:focus-visible + label { outline: 2px solid var(--k-navy); outline-offset: 1px; }
/* de rest van de app tekent via template.css een eigen vinkje vóór elk checkbox-label (:before) -
   dat moet hier uit, anders staat dat vinkje bovenop de chip-styling.
   !important nodig: template.css's regel (input[type=checkbox] + label:before) heeft evenveel
   klasses (1) maar wél meer elementen (3 t.o.v. 2), dus die wint anders alsnog op specificiteit */
.k-filterchips label:before { content: none !important; }

/* ---------- kaart ---------- */
.k-card { background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-r-md); overflow: hidden; }
.k-card__head {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px; border-bottom: 1px solid var(--k-border-soft);
  font-weight: 600; font-size: 15px;
}
.k-card__body { padding: 16px 18px; }
.k-card--invite { border-style: dashed; border-color: #d9d6cf; text-align: center; padding: 44px 24px; }

/* ---------- kengetallen ---------- */
.k-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.k-kpi { background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-r-md); padding: 16px; }
.k-kpi__label { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; color: var(--k-muted-2); }
.k-kpi__value { font-family: var(--k-font-head); font-size: 32px; font-weight: 700; line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; }
.k-kpi__delta { font-size: 12.5px; color: var(--k-muted); }
.k-kpi__delta--ok   { color: var(--k-ok-fg); }
.k-kpi__delta--warn { color: var(--k-warn-fg); }

/* ---------- tabel (compact) ---------- */
/* overflow-x: auto — bij smalle vensters/containers blijven de laatste
   kolommen (vraagprijs, locatie) bereikbaar i.p.v. weggesneden */
.k-table-wrap {
  background: var(--k-surface); border: 1px solid var(--k-border);
  border-radius: var(--k-r-md); overflow-x: auto; overflow-y: hidden;
}
.k-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 14px; }
.k-table thead th {
  background: var(--k-surface-alt); color: var(--k-muted);
  text-align: left; font-weight: 600; font-size: 11.5px;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 8px 14px; border-bottom: 1px solid #e9e6e0; white-space: nowrap;
}
.k-table tbody td { padding: 7px 14px; border-bottom: 1px solid var(--k-border-soft); color: var(--k-text-2); }
.k-table tbody tr:last-child td { border-bottom: 0; }
.k-table tbody tr.is-clickable { cursor: pointer; }
.k-table tbody tr:hover { background: var(--k-surface-alt); }
.k-table .k-cell-strong { font-weight: 600; color: var(--k-text); white-space: nowrap; }
.k-table .k-cell-strong span { font-weight: 400; color: var(--k-text-2); }
.k-table .k-right { text-align: right; font-weight: 600; color: var(--k-text); }

/* ---------- lijstrijen (klanten, compact) ---------- */
.k-rows { }
.k-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; border-bottom: 1px solid var(--k-border-soft);
}
.k-row:last-child { border-bottom: 0; }
.k-row:hover { background: var(--k-surface-alt); }
a.k-row { color: inherit; text-decoration: none; }
.k-row__main { flex: 1; min-width: 0; }
.k-row__title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.k-row__meta  { font-size: 12px; color: var(--k-muted); line-height: 1.3; }
.k-row__aside { flex: none; text-align: right; font-size: 12.5px; color: var(--k-muted); }
.k-pager { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 12.5px; color: var(--k-muted); }

/* ---------- statuspill ---------- */
.k-pill {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: var(--k-r-pill);
  background: var(--k-neutral-bg); color: var(--k-neutral-fg); white-space: nowrap;
}
.k-pill--ok   { background: var(--k-ok-bg);   color: var(--k-ok-fg); }
.k-pill--warn { background: var(--k-warn-bg); color: var(--k-warn-fg); }
.k-pill--info { background: var(--k-info-bg); color: var(--k-info-fg); }
.k-pill--stop { background: var(--k-stop-bg); color: var(--k-stop-fg); }

/* ---------- detail: specificatielijst ---------- */
.k-specs { }
.k-spec { display: flex; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--k-border-soft); }
.k-spec:last-child { border-bottom: 0; }
.k-spec__label { width: 150px; flex: none; font-size: 13.5px; color: var(--k-muted); }
.k-spec__value { flex: 1; font-size: 14px; font-weight: 500; }
.k-price { font-family: var(--k-font-head); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.k-label-inline { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; color: var(--k-muted-2); }

/* ---------- media / placeholders ---------- */
.k-photo {
  border-radius: var(--k-r-md); border: 1px solid #e2dfd8; aspect-ratio: 4/3;
  background: repeating-linear-gradient(135deg, #e9e7e1 0 8px, #f4f2ee 8px 16px);
  display: flex; align-items: center; justify-content: center;
}
.k-photo__hint {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  color: var(--k-muted-2); background: #fff; padding: 6px 10px;
  border-radius: var(--k-r-sm); border: 1px solid #e2dfd8;
}
.k-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.k-thumb {
  position: relative;
  width: 76px; height: 58px; border-radius: 8px; border: 1px solid #e2dfd8;
  background: repeating-linear-gradient(135deg, #e9e7e1 0 6px, #f4f2ee 6px 12px);
}
.k-thumb.is-active { border: 2px solid var(--k-navy); }
.k-thumb--add {
  border: 1px dashed #cfccc4; display: flex; align-items: center; justify-content: center;
  color: var(--k-muted-2); font-size: 20px; background: none; cursor: pointer; padding: 0;
}
.k-thumb--xs { width: 46px; height: 38px; border-radius: 6px; }
.k-thumb--photo { background-size: cover; background-position: center; background-repeat: no-repeat; border-style: solid; }
.k-thumb__remove {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--k-navy-dark); color: #fff; border: 2px solid #fff;
  font-size: 12px; line-height: 16px; text-align: center; cursor: pointer; padding: 0;
}
.k-thumb--uploading { opacity: .5; }

/* ---------- formulieren: varianten ---------- */
.k-grid-2--gelijk { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; }
.k-form--breed { max-width: none; }
/* -- veld met een schakelaar ernaast (bv. bestaand merk kiezen of "Nieuw") -- */
.k-keuze { display: flex; align-items: center; gap: 10px; }
.k-keuze__veld { flex: 1; min-width: 0; }
.k-keuze__nieuw { gap: 6px; align-items: center; }
.k-keuze__nieuw .k-input { flex: 1; min-width: 0; }
.k-keuze__schakel { flex: none; white-space: nowrap; font-size: 13px; color: var(--k-text-2); cursor: pointer; }
@media (max-width: 760px){
  .k-grid-2--gelijk { grid-template-columns: minmax(0,1fr); gap: 16px; }
}

/* ---------- filterbalk boven een lijst ---------- */
.k-filters { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.k-filters .k-field { min-width: 170px; }
.k-filters .k-btn { align-self: flex-end; }

/* ---------- uploadzone + afbeeldingen (oude upload-component in nieuwe stijl) ---------- */
.k-upload .image_vak { padding: 0; margin: 0 0 12px; background: none; gap: 10px; }
.k-upload .image_vak:empty { display: none; }
.k-upload .image_vak .imageHolder { width: 132px; height: 100px; border: 1px solid var(--k-border); border-radius: var(--k-r-md); overflow: hidden; cursor: grab; }
.k-upload .image_vak .imageHolder .removeImage { line-height: 100px; }
.k-upload div.upload_file {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; box-sizing: border-box;
  border: 1px dashed #cfccc4; border-radius: var(--k-r-md); background: var(--k-surface-alt);
}
.k-upload .button_file {
  position: static; margin: 0 !important; line-height: 32px; padding: 0 4px;
  background: var(--k-surface); color: var(--k-text); border: 1px solid var(--k-border); border-radius: var(--k-r-sm, 6px);
  font-weight: 600; letter-spacing: 0;
}
.k-upload .button_file:hover { background: var(--k-surface-alt); color: var(--k-text); }
.k-upload .upload_file_name { font-size: 12.5px; color: var(--k-muted); }

/* ---------- standaarduitrusting (offerte) ---------- */
.k-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.k-spec-blok {
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  border: 1px solid var(--k-border); border-radius: var(--k-r-md); background: var(--k-surface);
}
.k-spec-blok__head { display: flex; align-items: center; gap: 8px; }
.k-spec-blok__head .spec_categorie { flex: 1; min-width: 0; font-weight: 600; }
.k-spec-blok .spec_regels { width: 100%; box-sizing: border-box; resize: vertical; min-height: 96px; font-family: inherit; line-height: 1.45; }
.k-spec-blok__remove {
  flex: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  color: var(--k-muted); border: 1px solid var(--k-border); background: #fff;
}
.k-spec-blok__remove:hover { color: var(--k-stop-fg); border-color: var(--k-stop-fg); background: var(--k-stop-bg); }

/* ---------- logo-upload (merken) ---------- */
.k-logo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.k-logo__preview {
  position: relative; flex: none;
  width: 200px; height: 100px; padding: 12px; box-sizing: border-box;
  border: 1px solid var(--k-border); border-radius: var(--k-r-md); background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.k-logo__preview img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.k-logo__empty { display: none; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--k-muted-2); }
.k-logo__empty i { font-size: 22px; }
.k-logo__preview.is-empty { border-style: dashed; background: var(--k-surface-alt); }
.k-logo__preview.is-empty img,
.k-logo__preview.is-empty .k-logo__remove { display: none; }
.k-logo__preview.is-empty .k-logo__empty { display: flex; }
.k-logo__remove {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--k-muted); border: 1px solid var(--k-border);
  box-shadow: 0 1px 3px rgba(0,0,0,.08); font-size: 12px; cursor: pointer;
}
.k-logo__remove:hover { color: var(--k-stop-fg); border-color: var(--k-stop-fg); background: var(--k-stop-bg); }
.k-logo__side { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; flex: 1 1 200px; }
.k-logo__status:empty { display: none; }

/* ---------- bewerkformulier ---------- */
.k-form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.k-field { display: flex; flex-direction: column; gap: 6px; }
.k-field__label { font-size: 12.5px; font-weight: 600; color: var(--k-text-2); }
.k-field textarea.k-input { resize: vertical; min-height: 90px; font-family: inherit; }
.k-field-check { display: flex; align-items: center; gap: 8px; }
.k-field-check input[type="checkbox"] { display: initial; width: auto; }

/* ---------- grids ---------- */
.k-stack { display: flex; flex-direction: column; gap: 14px; }
.k-stack--lg { gap: 22px; }
.k-grid-2  { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 14px; align-items: start; }
.k-grid-detail { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 16px; align-items: start; }
.k-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- taken / opvolging ---------- */
.k-task { display: flex; align-items: flex-start; gap: 10px; }
.k-task + .k-task { margin-top: 10px; }
.k-task__dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--k-muted-2); }
.k-task__dot--urgent { background: var(--k-stop-fg); }
.k-task__dot--soon   { background: var(--k-warn-fg); }
.k-task__dot--ok     { background: var(--k-ok-fg); }

/* ---------- donkere actiekaart ---------- */
.k-panel-dark { background: var(--k-navy-dark); border-radius: var(--k-r-md); padding: 16px 18px; color: #dbe3f1; }
.k-panel-dark .k-label-inline { color: #8ba0c6; }
.k-panel-dark .k-btn { background: #fff; border-color: #fff; color: var(--k-navy-dark); font-weight: 600; justify-content: flex-start; }
.k-panel-dark .k-btn--ghost { background: transparent; border-color: #35507f; color: #dbe3f1; font-weight: 500; }

/* ---------- mobiele kaartlijst (i.p.v. tabel) ---------- */
.k-cards { display: none; flex-direction: column; gap: 10px; }
.k-mcard {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--k-border); border-radius: 10px;
  padding: 8px 10px; font: inherit; cursor: pointer;
}
.k-mcard__main { flex: 1; min-width: 0; }
.k-mcard__title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.k-mcard__meta  { font-size: 12px; color: var(--k-muted); line-height: 1.3; }
.k-mcard__aside { flex: none; text-align: right; }
.k-mcard__price { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }

/* ---------- bottom nav (mobiel) ---------- */
.k-bottom-nav {
  display: none; grid-auto-flow: column; grid-auto-columns: minmax(64px,1fr); gap: 2px;
  overflow-x: auto;
  position: sticky; bottom: 0; background: #fff;
  border-top: 1px solid var(--k-border); padding: 8px 6px 12px;
}
.k-tab {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 11.5px; font-weight: 500; color: var(--k-muted-2);
  padding: 8px 2px; border-radius: 8px; min-height: 48px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  white-space: nowrap;
}
.k-tab::before { content: ""; width: 18px; height: 4px; border-radius: 3px; background: transparent; }
.k-tab.is-active { color: var(--k-navy); font-weight: 600; }
.k-tab.is-active::before { background: var(--k-navy); }

/* ===========================================================
   MOBIEL  (< 900px)
   sidebar weg, bottom nav aan, tabellen worden kaarten
   =========================================================== */
@media (max-width: 1100px) {
  .k-sidebar { display: none; }
  .k-topbar { padding: 14px 16px; }
  .k-topbar-mark { display: flex; }
  /* -- zoekbalk op een eigen regel over de volle breedte, Toevoegen als compacte knop naast de titel -- */
  .k-topbar { flex-wrap: wrap; row-gap: 12px; }
  .k-topbar .k-input--search { order: 10; flex: 1 1 100%; width: auto; height: 44px; font-size: 16px; }
  .k-topbar .k-btn--primary { padding: 10px 14px; }
  .k-title { font-size: 20px; }
  .k-main { padding: 16px 16px 22px; }

  .k-kpis { grid-template-columns: repeat(2, 1fr); }
  .k-kpi__value { font-size: 28px; }
  .k-grid-2, .k-grid-detail { grid-template-columns: 1fr; }

  .k-table-wrap { display: none; }
  .k-cards { display: flex; }
  .k-bottom-nav { display: grid; }

  .k-spec__label { width: 120px; }
  .k-btn { padding: 12px 16px; }        /* min. 44px raakvlak */
  .k-actions .k-btn { flex: 1 1 auto; justify-content: center; }
}

@media (min-width: 1101px) {
  .k-input--block { display: none; }     /* mobiel zoekveld */
}

/* ==========================================================================
   Inlogscherm
   ========================================================================== */
.k-login {
  position: fixed; inset: 0; z-index: 50; overflow: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 480px);
  font-family: 'Barlow', system-ui, sans-serif; background: var(--k-navy-dark);
}
.k-login__foto {
  position: fixed; inset: 0; z-index: 0;
  background: url('../images/login_foto.jpg') 38% center / cover no-repeat;
}
.k-login__foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10, 30, 80, .88) 0%, rgba(13, 45, 110, .62) 38%, rgba(13, 45, 110, .18) 70%, rgba(13, 45, 110, .05) 100%);
}
.k-login__intro {
  position: relative; z-index: 1; align-self: end;
  padding: 0 56px 64px; color: #fff; max-width: 620px;
}
.k-login__intro-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; opacity: .75; }
.k-login__intro-titel { font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif; font-size: 44px; line-height: 1.05; font-weight: 700; margin: 10px 0 12px; }
.k-login__intro-tekst { font-size: 16px; opacity: .85; max-width: 440px; }

.k-login__paneel {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 32px; background: #fff;
  box-shadow: -20px 0 60px rgba(0,0,0,.18);
}
.k-login__kaart { width: 100%; max-width: 340px; }
.k-login__logo { display: block; width: 210px; max-width: 80%; height: auto; margin: 0 0 30px; mix-blend-mode: multiply; }
.k-login__titel { font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif; font-size: 28px !important; font-weight: 700; color: var(--k-text); margin: 0 0 4px !important; padding: 0 !important; text-align: left !important; letter-spacing: 0 !important; }
.k-login__sub { font-size: 14px; color: var(--k-muted); margin: 0 0 24px !important; text-align: left !important; }
.k-login__form { display: flex; flex-direction: column; gap: 12px; }
.k-login__form .messageBox:empty { display: none; }
.k-login__veld { position: relative; display: block; margin: 0; font-weight: 400; }
.k-login__veld i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--k-muted-2); font-size: 14px; pointer-events: none; }
.k-login__veld .k-input { padding-left: 40px; height: 46px; font-size: 15px; margin: 0; border-width: 1px; }
.k-login__veld .k-input.wrong { border-color: var(--k-stop-fg); background: var(--k-stop-bg); }
.k-login__veld .k-input.validated { border-color: var(--k-ok-fg); }
.k-login__knop { justify-content: center; height: 46px; font-size: 15px; margin-top: 6px; gap: 8px; width: 100%; box-sizing: border-box; }
.k-login__link { font-size: 13.5px; color: var(--k-muted); text-align: center; margin-top: 4px; text-decoration: none !important; }
.k-login__link:hover { color: var(--k-text); }
.k-login__voet { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--k-muted-2); }

@media (max-width: 860px){
  .k-login { grid-template-columns: minmax(0, 1fr); padding: 16px; box-sizing: border-box; align-content: center; }
  .k-login__intro { display: none; }
  .k-login__foto::after { background: linear-gradient(180deg, rgba(10, 30, 80, .55), rgba(10, 30, 80, .85)); }
  .k-login__paneel { width: 100%; box-sizing: border-box; padding: 32px 24px 56px; border-radius: 16px; min-height: 0; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
  .k-login__voet { bottom: 16px; }
}

/* -- zijbalk: losse items onderaan (Instellingen), boven de gebruiker -- */
.k-nav--onder { margin-top: auto; padding-top: 12px; margin-bottom: 12px; border-top: 1px solid var(--k-navy-line); }
.k-nav--onder + .k-sidebar-foot { margin-top: 0; }


/* -- menu-iconen (zijbalk + mobiele onderbalk) i.p.v. bolletjes -- */
.k-nav-item::before { display: none; }
.k-nav-item i { width: 18px; flex: none; text-align: center; font-size: 14px; color: #7f95bd; }
.k-nav-item:hover i { color: #dbe3f1; }
.k-nav-item.is-active i { color: #fff; }
.k-tab::before { display: none; }
.k-tab i { font-size: 17px; line-height: 1; }
.k-tab.is-active { background: #eef2f9; }
.k-center { text-align: center; }
.k-rechten input[type="checkbox"] { display: inline-block; width: 18px; height: 18px; cursor: pointer; }

/* -- oude template.css geeft .maincontent op mobiel 60px marge, opvulling en een eigen scrollvak: in de nieuwe shell niet nodig -- */
.k-app .k-main .maincontent { margin-top: 0 !important; padding: 0 !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
/* -- op mobiel staat de paginatitel al in de bovenbalk: dubbele kop + exportknop verbergen -- */
@media (max-width: 1100px){
  .k-hide-mobile { display: none !important; }
}

/* -- telefoon: niet onder de statusbalk (klok/batterij) of de home-streep doorlopen.
      env(safe-area-inset-*) is 0 in een gewone browser, dus daar verandert niets -- */
.k-topbar { padding-top: calc(16px + env(safe-area-inset-top)); }
.k-sidebar { padding-top: calc(22px + env(safe-area-inset-top)); }
.k-bottom-nav { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
@media (max-width: 1100px){
  .k-topbar { padding-top: calc(14px + env(safe-area-inset-top)); padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); }
}
@media (max-width: 860px){
  .k-login { padding-top: calc(16px + env(safe-area-inset-top)); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* -- foto verwijderen in het occasionformulier: altijd zichtbare knop (ook op aanraakschermen), 2e tik bevestigt -- */
.k-upload .image_vak .imageHolder .removeImage {
  position: absolute; top: 6px; right: 6px; left: auto; bottom: auto;
  width: auto; height: 30px; min-width: 30px; padding: 0 8px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  line-height: 1; font-size: 13px; color: var(--k-text-2); background: rgba(255,255,255,.94);
  border: 1px solid var(--k-border); border-radius: 15px; box-shadow: 0 1px 4px rgba(0,0,0,.18); cursor: pointer;
}
.k-upload .image_vak .imageHolder:hover .removeImage { background: #fff; color: var(--k-stop-fg); filter: none; }
.k-upload .image_vak .imageHolder .removeImage b { display: none; font-weight: 600; font-size: 12px; }
.k-upload .image_vak .imageHolder .removeImage.bevestig { background: var(--k-stop-fg); border-color: var(--k-stop-fg); color: #fff; }
.k-upload .image_vak .imageHolder .removeImage.bevestig b { display: inline; }
.k-upload .image_vak .imageHolder .removeImage.bezig { opacity: .5; pointer-events: none; }