/* ============================================================================
   RIFTJAW — dashboard layout (dashboard.css)
   Alleen app-specifieke opmaak. Kleuren/maten komen uit brand.css (tokens).
   ============================================================================ */

.kd {
  display: grid;
  grid-template-columns: 244px 1fr;
  min-height: 100vh;
  background: var(--k-bg-soft);
}

/* --- Sidebar --------------------------------------------------------------- */
.kd__side {
  background: var(--k-ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: var(--k-sp-4);
  gap: var(--k-sp-4);
  position: sticky; top: 0; height: 100vh;
}
.kd__brand { display: flex; align-items: center; gap: 10px; padding: var(--k-sp-2) var(--k-sp-2) var(--k-sp-4); }
.kd__mark { width: 34px; height: 34px; border-radius: 9px; background: var(--k-obsidian); border: 1px solid #2c1519; display:grid; place-items:center; overflow:hidden; box-shadow: var(--k-shadow-brand); }
.kd__mark svg { width: 26px; height: 26px; display: block; }
.kd__brandword { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; text-transform: uppercase; color: var(--k-ink); }
.kd__brandaccent { color: var(--k-brand); font-weight: 700; }

.kd__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.kd__navitem {
  text-align: left;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.72);
  font: inherit;
  font-size: var(--k-fs-sm);
  font-weight: var(--k-fw-medium);
  padding: 10px 12px;
  border-radius: var(--k-r-md);
  cursor: pointer;
  transition: background var(--k-transition), color var(--k-transition);
}
.kd__navitem:hover { background: rgba(255,255,255,0.08); color: #fff; }
.kd__navitem.is-active { background: var(--k-brand); color: #fff; }

.kd__user { display: flex; align-items: center; justify-content: space-between; gap: var(--k-sp-2); border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--k-sp-3); }
.kd__user .k-muted { color: rgba(255,255,255,0.7); font-size: var(--k-fs-sm); }
.kd__user .k-btn--ghost { color: rgba(255,255,255,0.8); }
.kd__user .k-btn--ghost:hover { background: rgba(255,255,255,0.1); }

/* --- Main ------------------------------------------------------------------ */
.kd__main { padding: var(--k-sp-6) var(--k-sp-7); max-width: 1120px; }
.kd__panel { display: none; }
.kd__panel.is-active { display: block; animation: kd-fade 200ms ease; }
@keyframes kd-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.kd__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--k-sp-4); margin-bottom: var(--k-sp-6); flex-wrap: wrap; }

/* --- Stats ----------------------------------------------------------------- */
.kd__stats { margin-bottom: var(--k-sp-5); }
.kd__stats .k-card { display: flex; flex-direction: column; gap: 6px; }
.kd__stat { font-size: var(--k-fs-3xl); font-weight: var(--k-fw-bold); color: var(--k-ink); line-height: 1; }

/* --- Empty states ---------------------------------------------------------- */
.kd__empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--k-sp-3); padding: var(--k-sp-8) var(--k-sp-5); }
.kd__empty-ic { font-size: 2.4rem; }
.kd__tableempty { text-align: center; color: var(--k-text-soft); padding: var(--k-sp-7) !important; }
.kd__tableempty a, .kd__empty a[data-goto] { color: var(--k-brand); text-decoration: none; font-weight: var(--k-fw-semi); }

/* --- Database: filters, tabel-acties, pagination --------------------------- */
.kd__filters { margin-bottom: var(--k-sp-4); flex-wrap: wrap; gap: var(--k-sp-3); }
.kd__filter { width: auto; min-width: 170px; }
.kd__count { margin-left: auto; white-space: nowrap; }
.kd__cellink { color: var(--k-brand); text-decoration: none; font-size: var(--k-fs-xs); }
.kd__cellink:hover { text-decoration: underline; }
.kd__rowact { text-align: right; width: 48px; }
.kd__del { background: transparent; border: none; color: var(--k-text-soft); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 4px 9px; border-radius: var(--k-r-sm); transition: background var(--k-transition), color var(--k-transition); }
.kd__del:hover { background: var(--k-danger-soft); color: var(--k-danger); }
.kd__pager { display: flex; align-items: center; justify-content: center; gap: var(--k-sp-4); margin-top: var(--k-sp-5); }
.k-btn:disabled, .k-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.k-btn:disabled:hover, .k-btn[disabled]:hover { transform: none; }

/* --- Import ---------------------------------------------------------------- */
.kd__drop { border: 2px dashed var(--k-line); border-radius: var(--k-r-lg); padding: var(--k-sp-6); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--k-sp-2); background: var(--k-bg-soft); cursor: pointer; transition: border-color var(--k-transition), background var(--k-transition); }
.kd__drop:hover { border-color: var(--k-brand); }
.kd__drop.is-drag { border-color: var(--k-brand); background: var(--k-brand-soft); }
.kd__drop-ic { font-size: 2rem; }
.kd__fname { font-weight: var(--k-fw-semi); color: var(--k-ink); font-size: var(--k-fs-sm); }
.kd__search { width: 260px; max-width: 100%; }

/* --- Import: preview + kolom-mapping --------------------------------------- */
.kd__preview { margin-top: var(--k-sp-5); }
.kd__maprid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--k-sp-3) var(--k-sp-4); }
.kd__maprow .k-label { margin-bottom: 4px; }
.kd__sample { overflow-x: auto; border: 1px solid var(--k-line); border-radius: var(--k-r-md); }
.kd__sample .k-table { font-size: var(--k-fs-xs); white-space: nowrap; }
.kd__sample .k-table td { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* --- Kaart ------------------------------------------------------------------ */
.kd__maptools { justify-content: space-between; margin-bottom: var(--k-sp-4); flex-wrap: wrap; gap: var(--k-sp-3); }
.kd__mapwrap { overflow: hidden; padding: 0; }
#kd-map { height: 560px; width: 100%; background: var(--k-bg-mute); }
.kd__mapfail { display: grid; place-items: center; height: 100%; min-height: 560px; color: var(--k-text-soft); text-align: center; padding: var(--k-sp-5); }
.kd__maplegend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-sp-4); margin-top: var(--k-sp-3); }
.kd__leg { display: inline-flex; align-items: center; gap: 6px; font-size: var(--k-fs-xs); color: var(--k-text-soft); }
.kd__legdot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--k-line); }
.kd__legdot--nieuw    { background: #64748B; }
.kd__legdot--benaderd { background: #E0121B; }
.kd__legdot--reactie  { background: #F59E0B; }
.kd__legdot--klant    { background: #16A34A; }
.kd__leghint { margin-left: auto; }
.kd__mappopup { font-size: var(--k-fs-sm); line-height: 1.5; }
.kd__mappopup b { color: var(--k-ink); }
.kd__mappopup a { color: var(--k-brand); }

/* --- Campagnes --------------------------------------------------------------- */
.kd__cgrid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--k-sp-5); align-items: start; }
.kd__cfilters { align-items: flex-end; }
.kd__cfilter { flex: 1; min-width: 0; }
.kd__ccount { font-size: var(--k-fs-sm); margin: 0; }
.kd__chint { font-size: var(--k-fs-xs); margin: 6px 0 0; }
.kd__chint code { background: var(--k-bg-mute); border-radius: 4px; padding: 1px 5px; }
#kd-c-body { min-height: 160px; }
.kd__rowact--c { display: flex; align-items: center; gap: var(--k-sp-2); justify-content: flex-end; }
.kd__copen { color: var(--k-ink); text-decoration: none; }
.kd__copen:hover b { color: var(--k-brand); }
.kd__cdetail { padding: var(--k-sp-5); }
.kd__cdetailhead { flex-wrap: wrap; gap: var(--k-sp-3); }
.kd__cbody { background: var(--k-bg-soft); border: 1px solid var(--k-line-soft); border-radius: var(--k-r-md); padding: var(--k-sp-4); font-size: var(--k-fs-sm); line-height: 1.6; white-space: normal; }

/* --- Toast ----------------------------------------------------------------- */
.kd__toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--k-ink); color: #fff; padding: 12px 20px; border-radius: var(--k-r-md); box-shadow: var(--k-shadow-lg); font-size: var(--k-fs-sm); font-weight: var(--k-fw-medium); opacity: 0; transition: opacity var(--k-transition), transform var(--k-transition); z-index: 9999; max-width: calc(100vw - 32px); }
.kd__toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 820px) {
  .kd { grid-template-columns: 1fr; }
  .kd__side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .kd__nav { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; order: 3; }
  .kd__brand { padding: 0; }
  .kd__main { padding: var(--k-sp-5) var(--k-sp-4); }
}

@media (max-width: 900px) {
  .kd__cgrid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .kd__maprid { grid-template-columns: 1fr; }
  .kd__count { margin-left: 0; }
  .kd__filter { min-width: 0; flex: 1; }
  #kd-map, .kd__mapfail { height: 420px; min-height: 420px; }
  .kd__leghint { margin-left: 0; flex-basis: 100%; }
}