/* Konsekvent Leadboard v2.0.0 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Bricolage Grotesque', sans-serif;
  background: #1a1f2e;
  color: #e2e8f0;
  font-size: 14px;
}

#klead-app { min-height: 100vh; }

/* ── Login ─────────────────────────────────────────────────────────────────── */
.kl-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1f2e;
  padding: 20px;
}
.kl-login-box {
  background: #1e2436;
  border: 1px solid #3a4460;
  border-radius: 16px;
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 24px 48px rgba(0,0,0,.4);
}
.kl-login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.kl-login-logo img { height: 28px; width: auto; }
.kl-login-logo-divider { width: 1px; height: 22px; background: #3a4460; }
.kl-login-logo-label { font-size: 12px; font-weight: 700; color: #64748b; letter-spacing: .1em; text-transform: uppercase; }
.kl-login-box h2 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 24px; }
.kl-login-field { margin-bottom: 14px; }
.kl-login-field label { display: block; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.kl-login-field input {
  width: 100%; background: #252b3b; border: 1px solid #3a4460; border-radius: 8px;
  padding: 10px 14px; font-size: 14px; color: #fff; font-family: inherit; outline: none;
}
.kl-login-field input:focus { border-color: #fa0035; }
.kl-login-btn {
  width: 100%; margin-top: 8px; background: #fa0035; border: none; border-radius: 8px;
  padding: 12px; font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; font-family: inherit;
}
.kl-login-btn:hover { background: #d4002d; }
.kl-login-error { background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }

/* ── App shell ─────────────────────────────────────────────────────────────── */
.kl-app { min-height: 100vh; background: #1a1f2e; }

/* ── Header ────────────────────────────────────────────────────────────────── */
.kl-topbar { height: 3px; background: linear-gradient(to right, #fa0035, #5900a5); }
.kl-header { background: #1e2436; border-bottom: 1px solid #3a4460; }
.kl-header-top { padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.kl-header-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kl-brand { display: flex; align-items: center; gap: 10px; margin-right: 6px; }
.kl-brand img { height: 26px; width: auto; }
.kl-brand-divider { width: 1px; height: 18px; background: #3a4460; }
.kl-brand-label { font-size: 11px; font-weight: 700; color: #64748b; letter-spacing: .1em; text-transform: uppercase; }
.kl-stat {
  display: flex; align-items: center; gap: 6px;
  background: #252b3b; border: 1px solid #3a4460; border-radius: 8px;
  padding: 6px 12px; font-size: 13px; color: #e2e8f0; white-space: nowrap;
}
.kl-stat-val { font-weight: 700; }
.kl-stat-val.green  { color: #4ade80; }
.kl-stat-val.blue   { color: #60a5fa; }
.kl-stat-val.purple { color: #c084fc; }
.kl-stat-val.yellow { color: #facc15; }
.kl-stat-val.red    { color: #f87171; }
.kl-header-right { display: flex; align-items: center; gap: 8px; }
.kl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #252b3b; border: 1px solid #3a4460; border-radius: 8px;
  padding: 7px 12px; font-size: 13px; color: #e2e8f0; cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.kl-btn:disabled { opacity: .4; cursor: default; }
.kl-btn:hover { background: #2a3147; }
.kl-btn-primary { background: #fa0035; border-color: #fa0035; color: #fff; font-weight: 700; }
.kl-btn-primary:hover { background: #d4002d; border-color: #d4002d; }
.kl-btn-bell { position: relative; }
.kl-btn-badge {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.kl-btn-badge.yellow { background: #facc15; color: #1a1f2e; }
.kl-btn-badge.red    { background: #ef4444; color: #fff; }
.kl-header-bottom { padding: 0 20px 10px; display: flex; align-items: center; gap: 8px; }
.kl-count { font-size: 12px; color: #64748b; white-space: nowrap; }
.kl-search-wrap { position: relative; max-width: 280px; width: 100%; }
.kl-search-wrap input {
  width: 100%; background: #252b3b; border: 1px solid #3a4460; border-radius: 8px;
  padding: 7px 30px 7px 30px; font-size: 13px; color: #cbd5e1;
  font-family: inherit; outline: none; transition: border-color .15s;
}
.kl-search-wrap input:focus { border-color: #fa0035; }
.kl-search-wrap input::placeholder { color: #64748b; }
.kl-search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: #64748b; pointer-events: none; }
.kl-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #64748b; cursor: pointer; background: none; border: none; padding: 2px; display: flex; }
.kl-search-clear:hover { color: #fff; }

/* ── Table ─────────────────────────────────────────────────────────────────── */
.kl-table-outer { overflow-x: auto; }
.kl-table {
  width: 100%; border-collapse: collapse; min-width: 1440px;
}
.kl-table thead tr { background: #1e2436; border-bottom: 1px solid #3a4460; }
.kl-table th {
  text-align: left; padding: 10px 10px; font-size: 11px; font-weight: 700;
  color: #64748b; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.kl-table th.sticky { position: sticky; left: 0; background: #1e2436; z-index: 2; }
.kl-table tbody tr { border-bottom: 1px solid #252d42; transition: background .1s; }
.kl-table tbody tr:nth-child(odd)  { background: #1a1f2e; }
.kl-table tbody tr:nth-child(even) { background: #1e2436; }
.kl-table tbody tr:hover { background: #252d42; }
.kl-table td { padding: 6px 8px; vertical-align: middle; }
.kl-table td.sticky {
  position: sticky; left: 0; z-index: 1; border-right: 1px solid #2e3650;
  background: inherit;
}
.kl-table tbody tr:nth-child(odd)  td.sticky { background: #1a1f2e; }
.kl-table tbody tr:nth-child(even) td.sticky { background: #1e2436; }
.kl-table tbody tr:hover td.sticky { background: #252d42; }

/* ── Sort button ───────────────────────────────────────────────────────────── */
.kl-sort-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; color: #64748b; font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  cursor: pointer; font-family: inherit; padding: 0;
}
.kl-sort-btn:hover { color: #fff; }
.kl-sort-icon { color: #fa0035; }

/* ── Editable cell ─────────────────────────────────────────────────────────── */
.kl-cell-view {
  display: block; min-height: 26px; padding: 4px 8px; border-radius: 5px;
  cursor: text; color: #f1f5f9; font-size: 13px; transition: background .1s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kl-cell-view.empty { color: #475569; }
.kl-cell-view:hover { background: #252b3b; }
.kl-cell-input {
  width: 100%; background: #252b3b; border: 1px solid #4f77ff; border-radius: 5px;
  padding: 4px 8px; font-size: 13px; color: #fff; font-family: inherit; outline: none;
}
.kl-cell-textarea {
  width: 100%; background: #252b3b; border: 1px solid #4f77ff; border-radius: 5px;
  padding: 4px 8px; font-size: 13px; color: #fff; font-family: inherit; outline: none;
  resize: none; min-height: 32px;
}
.kl-cell-view.multiline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
tr.kl-row-active .kl-cell-view.multiline { white-space: pre-wrap; overflow: visible; text-overflow: unset; }

/* ── Status badge ──────────────────────────────────────────────────────────── */
.kl-status-empty {
  display: inline-flex; align-items: center; gap: 4px;
  border: 2px dashed #3a4460; border-radius: 6px; padding: 3px 10px;
  font-size: 12px; color: #475569; cursor: pointer; transition: border-color .15s, color .15s;
}
.kl-status-empty:hover { border-color: #fa0035; color: #cbd5e1; }
.kl-status-badge {
  display: inline-block; padding: 3px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 700; cursor: pointer; transition: opacity .15s;
}
.kl-status-badge:hover { opacity: .8; }

/* ── Lead avatar ───────────────────────────────────────────────────────────── */
.kl-avatar-btn {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  border: 2px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, opacity .15s; background: none;
}
.kl-avatar-btn:hover { border-color: #fa0035; opacity: .85; }
.kl-avatar-empty {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px dashed #3a4460; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .15s;
}
.kl-avatar-empty:hover { border-color: #fa0035; }
.kl-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.kl-avatar-initials {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; cursor: pointer; flex-shrink: 0;
}

/* ── Follow-up cell ────────────────────────────────────────────────────────── */
.kl-opf-wrap { display: flex; align-items: center; gap: 4px; }
.kl-opf-badge {
  font-size: 12px; padding: 3px 8px; border-radius: 6px; font-weight: 600; cursor: pointer;
  transition: opacity .15s; white-space: nowrap;
}
.kl-opf-badge:hover { opacity: .8; }
.kl-opf-badge.normal  { background: #252b3b; color: #cbd5e1; }
.kl-opf-badge.overdue { background: rgba(127,29,29,.6); color: #fca5a5; border: 1px solid rgba(153,27,27,.6); }
.kl-opf-badge.today   { background: rgba(113,63,18,.6); color: #fde68a; border: 1px solid rgba(133,77,14,.6); }
.kl-opf-add  { font-size: 12px; color: #475569; cursor: pointer; padding: 4px 8px; border-radius: 5px; border: none; background: none; font-family: inherit; }
.kl-opf-add:hover { color: #cbd5e1; background: #252b3b; }
.kl-opf-clear { color: #475569; cursor: pointer; padding: 2px; background: none; border: none; display: flex; transition: color .15s; }
.kl-opf-clear:hover { color: #f87171; }

/* ── Seneste kontakt cell ──────────────────────────────────────────────────── */
.kl-kontakt-wrap { display: flex; align-items: center; gap: 6px; min-width: 130px; }
.kl-kontakt-btn { flex: 1; text-align: left; font-size: 12px; padding: 4px 8px; border-radius: 5px; border: none; background: none; font-family: inherit; color: #475569; cursor: pointer; }
.kl-kontakt-btn:hover { background: #252b3b; color: #cbd5e1; }
.kl-kontakt-btn.has-value { color: #cbd5e1; }
.kl-kontakt-icon { width: 30px; height: 30px; background: #252b3b; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Actions cell ──────────────────────────────────────────────────────────── */
.kl-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.kl-table tbody tr:hover .kl-actions { opacity: 1; }
.kl-action-btn { background: none; border: none; color: #475569; cursor: pointer; padding: 4px; border-radius: 4px; display: flex; transition: color .15s; }
.kl-action-btn:hover.log  { color: #4f77ff; }
.kl-action-btn:hover.del  { color: #f87171; }
.kl-action-btn.log:hover  { color: #4f77ff; }
.kl-action-btn.del:hover  { color: #f87171; }

/* ── Empty state ───────────────────────────────────────────────────────────── */
.kl-empty { text-align: center; padding: 80px 20px; color: #475569; }
.kl-empty-title { font-size: 18px; color: #94a3b8; margin-bottom: 8px; }
.kl-empty-sub   { font-size: 14px; margin-bottom: 28px; }
.kl-empty-btns  { display: flex; gap: 12px; justify-content: center; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.kl-footer { border-top: 1px solid #3a4460; padding: 12px 16px; }

/* ── Floating menus / portals ──────────────────────────────────────────────── */
.kl-menu {
  position: fixed; z-index: 9999;
  background: #1e2436; border: 1px solid #3a4460; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5); min-width: 170px; padding: 4px 0; overflow: hidden;
}
.kl-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer; transition: background .1s; width: 100%; border: none; background: none; font-family: inherit; text-align: left;
}
.kl-menu-item:hover { background: #252b3b; }
.kl-menu-item-label { flex: 1; }
.kl-menu-check { color: #4ade80; flex-shrink: 0; }
.kl-menu-edit-btn { opacity: 0; color: #475569; transition: opacity .1s, color .1s; background: none; border: none; cursor: pointer; padding: 4px 8px; }
.kl-menu-row:hover .kl-menu-edit-btn { opacity: 1; }
.kl-menu-edit-btn:hover { color: #fff; }
.kl-menu-row { display: flex; align-items: center; }
.kl-menu-sep { border: none; border-top: 1px solid #3a4460; margin: 4px 0; }
.kl-menu-add { display: flex; align-items: center; gap: 6px; padding: 8px 12px; cursor: pointer; color: #64748b; font-size: 12px; width: 100%; border: none; background: none; font-family: inherit; }
.kl-menu-add:hover { background: #252b3b; color: #cbd5e1; }

/* ── Date picker ───────────────────────────────────────────────────────────── */
.kl-datepicker {
  position: fixed; z-index: 9999;
  background: #f0fde3; border-radius: 16px; width: 288px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5); overflow: hidden; user-select: none;
}
.kl-dp-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #c8e8a8; }
.kl-dp-nav-btn { background: none; border: none; color: #5900a5; cursor: pointer; padding: 4px; border-radius: 6px; display: flex; }
.kl-dp-nav-btn:hover { background: #e4f9cc; color: #fa0035; }
.kl-dp-month-label { font-size: 14px; font-weight: 700; color: #1a1f2e; }
.kl-dp-days-header { display: grid; grid-template-columns: repeat(7,1fr); padding: 10px 10px 4px; }
.kl-dp-days-header span { text-align: center; font-size: 11px; font-weight: 700; color: #1a1f2e; }
.kl-dp-grid { display: grid; grid-template-columns: repeat(7,1fr); padding: 0 10px; }
.kl-dp-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; border-radius: 8px; cursor: pointer; border: none;
  background: transparent; transition: background .1s; color: #1a1f2e;
}
.kl-dp-day:hover    { background: #e4f9cc; }
.kl-dp-day.weekend  { background: #dff5c4; color: #4a6a2a; }
.kl-dp-day.weekend:hover { background: #cfedb0; }
.kl-dp-day.holiday  { background: #fde68a; color: #92400e; }
.kl-dp-day.holiday:hover { background: #fcd34d; }
.kl-dp-day.selected { background: #fa0035 !important; color: #fff !important; }
.kl-dp-day.today-ring { box-shadow: 0 0 0 2px #4a6a2a; position: relative; z-index: 1; }
.kl-dp-day.other-month { opacity: .25; }
.kl-dp-holiday-label { height: 22px; padding: 0 16px; display: flex; align-items: center; font-size: 11px; color: #92400e; font-weight: 600; }
.kl-dp-footer { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid #c8e8a8; }
.kl-dp-time-label { font-size: 12px; font-weight: 700; color: #4a6a2a; }
.kl-dp-time-box { display: flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #c8e8a8; border-radius: 8px; padding: 6px 10px; }
.kl-dp-time-box input { width: 26px; background: transparent; border: none; text-align: center; font-size: 13px; font-weight: 700; color: #1a1f2e; font-family: inherit; outline: none; }
.kl-dp-time-sep { color: #4a6a2a; font-weight: 700; }
.kl-dp-spacer { flex: 1; }
.kl-dp-clear { background: none; border: none; font-size: 12px; color: #4a6a2a; font-weight: 700; cursor: pointer; padding: 6px 10px; border-radius: 6px; font-family: inherit; }
.kl-dp-clear:hover { background: #e4f9cc; color: #fa0035; }
.kl-dp-confirm { background: #fa0035; color: #fff; border: none; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.kl-dp-confirm:hover { background: #d4002d; }

/* ── Overlay ───────────────────────────────────────────────────────────────── */
.kl-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1000; }

/* ── Modal base ────────────────────────────────────────────────────────────── */
.kl-modal-wrap { position: fixed; inset: 0; z-index: 1001; display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px 16px; }
.kl-modal {
  background: #1e2436; border: 1px solid #3a4460; border-radius: 14px;
  width: 100%; max-width: 500px; max-height: 85vh; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.kl-modal.wide { max-width: 620px; }
.kl-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #3a4460; flex-shrink: 0; }
.kl-modal-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #fff; }
.kl-modal-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.kl-modal-badge.yellow { background: #facc15; color: #1a1f2e; }
.kl-modal-badge.red    { background: #ef4444; color: #fff; }
.kl-modal-close { background: none; border: none; color: #64748b; cursor: pointer; padding: 4px; display: flex; }
.kl-modal-close:hover { color: #fff; }
.kl-modal-body { overflow-y: auto; flex: 1; padding: 16px 20px; }
.kl-modal-footer { padding: 14px 20px; border-top: 1px solid #3a4460; display: flex; gap: 8px; flex-shrink: 0; }

/* ── Follow-up / overdue list items ───────────────────────────────────────── */
.kl-popup-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; margin-bottom: 8px; }
.kl-popup-item.normal { background: #252b3b; border: 1px solid #3a4460; }
.kl-popup-item.danger { background: rgba(127,29,29,.3); border: 1px solid rgba(153,27,27,.4); }
.kl-popup-item-name  { font-size: 13px; font-weight: 700; color: #fff; }
.kl-goto-lead { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.kl-goto-lead:hover { color: #fa0035; }
.kl-popup-item-sub   { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.kl-popup-item-sub.red { color: #f87171; }
.kl-section-label { font-size: 11px; font-weight: 700; color: #f87171; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }

/* ── History table ─────────────────────────────────────────────────────────── */
.kl-history-table { width: 100%; border-collapse: collapse; }
.kl-history-table th { text-align: left; padding: 10px 20px; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid #3a4460; }
.kl-history-table th:not(:first-child) { text-align: right; }
.kl-history-table td { padding: 10px 20px; font-size: 13px; border-bottom: 1px solid #252d42; }
.kl-history-table td:not(:first-child) { text-align: right; }
.kl-history-table tr.current-week { background: #252b3b; }
.kl-history-count-green  { color: #4ade80; font-weight: 700; }
.kl-history-count-zero   { color: #475569; font-weight: 700; }
.kl-history-meeting-btn  { color: #c084fc; font-weight: 700; text-decoration: underline; text-decoration-style: dotted; background: none; border: none; cursor: pointer; font-size: 13px; font-family: inherit; }
.kl-history-meeting-btn:hover { color: #e879f9; }
.kl-history-detail td { background: #1a1f30; padding: 12px 20px; }
.kl-meeting-item { background: #252b3b; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.kl-meeting-person { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.kl-week-badge { font-size: 11px; color: #4f77ff; font-weight: 700; margin-left: 6px; }
.kl-week-badge.next { color: #64748b; }

/* ── Status / Lead edit modal ──────────────────────────────────────────────── */
.kl-modal-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; display: block; }
.kl-modal-input {
  width: 100%; background: #252b3b; border: 1px solid #3a4460; border-radius: 8px;
  padding: 9px 12px; font-size: 13px; color: #fff; font-family: inherit; outline: none; margin-bottom: 14px;
}
.kl-modal-input:focus { border-color: #4f77ff; }
.kl-color-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; margin-bottom: 14px; }
.kl-color-swatch { width: 28px; height: 28px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; transition: transform .1s; }
.kl-color-swatch:hover { transform: scale(1.15); }
.kl-color-swatch.selected { border-color: #fff; }
.kl-preview-badge { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 13px; font-weight: 700; margin-bottom: 14px; }

/* ── Photo upload ──────────────────────────────────────────────────────────── */
.kl-photo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.kl-photo-circle {
  width: 60px; height: 60px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  border: 2px solid #3a4460; cursor: pointer; transition: border-color .15s; position: relative;
}
.kl-photo-circle:hover { border-color: #fa0035; }
.kl-photo-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s; font-size: 11px; font-weight: 700; color: #fff;
}
.kl-photo-circle:hover .kl-photo-overlay { opacity: 1; }
.kl-photo-label { font-size: 12px; color: #64748b; margin-bottom: 4px; }
.kl-photo-link { font-size: 12px; color: #4f77ff; cursor: pointer; background: none; border: none; font-family: inherit; }
.kl-photo-link:hover { color: #7b9fff; }
.kl-photo-link.remove { color: #f87171; margin-left: 10px; }

/* ── Activity log ──────────────────────────────────────────────────────────── */
.kl-timeline { position: relative; padding-left: 20px; }
.kl-timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: #3a4460; }
.kl-tl-item { position: relative; margin-bottom: 16px; }
.kl-tl-dot { position: absolute; left: -17px; top: 3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #1e2436; }
.kl-tl-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.kl-tl-date { font-size: 11px; color: #64748b; margin-left: 8px; }
.kl-tl-desc { font-size: 13px; color: #cbd5e1; margin-top: 2px; }

/* ── Import modal ──────────────────────────────────────────────────────────── */
.kl-import-dropzone {
  border: 2px dashed #3a4460; border-radius: 10px; padding: 36px 20px; text-align: center;
  cursor: pointer; transition: border-color .15s;
}
.kl-import-dropzone:hover, .kl-import-dropzone.drag { border-color: #4f77ff; }
.kl-import-dropzone p { font-size: 13px; color: #94a3b8; margin: 8px 0 0; }
.kl-import-dropzone small { font-size: 11px; color: #475569; }
.kl-import-map-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kl-import-map-label { width: 130px; flex-shrink: 0; font-size: 13px; color: #cbd5e1; }
.kl-import-map-req { color: #f87171; font-size: 11px; margin-left: 2px; }
.kl-import-select {
  flex: 1; background: #252b3b; border: 1px solid #3a4460; border-radius: 7px;
  padding: 7px 10px; font-size: 13px; color: #fff; font-family: inherit; outline: none;
}
.kl-import-select:focus { border-color: #4f77ff; }
.kl-import-preview { background: #252b3b; border-radius: 8px; padding: 10px 12px; max-height: 120px; overflow-y: auto; margin-bottom: 4px; }
.kl-import-preview-row { font-size: 12px; color: #94a3b8; margin-bottom: 4px; }
.kl-import-preview-row strong { color: #fff; }
.kl-import-template-bar { display: flex; align-items: center; justify-content: space-between; background: #252b3b; border: 1px solid #3a4460; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.kl-import-template-bar p   { font-size: 13px; font-weight: 600; color: #fff; }
.kl-import-template-bar small { font-size: 12px; color: #64748b; }

/* ── Delete confirm ────────────────────────────────────────────────────────── */
.kl-confirm-modal { max-width: 360px; }
.kl-confirm-text { font-size: 13px; color: #94a3b8; margin-bottom: 20px; }

/* ── Btn variants ──────────────────────────────────────────────────────────── */
.kl-btn-red { background: #dc2626; border-color: #dc2626; color: #fff; font-weight: 700; }
.kl-btn-red:hover { background: #b91c1c; border-color: #b91c1c; }
.kl-btn-ghost { background: #252b3b; border-color: #3a4460; color: #94a3b8; }
.kl-btn-ghost:hover { background: #2a3147; color: #fff; }
.kl-btn-icon-only { padding: 7px 8px; }


/* ── Pagination ─────────────────────────────────────────────────────────────── */
.kl-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #131722;
  border-top: 1px solid #1e2535;
  position: sticky;
  bottom: 0;
  z-index: 5;
  gap: 12px;
}
.kl-page-info { color: #64748b; font-size: 12px; flex-shrink: 0; }
.kl-page-nav  { display: flex; align-items: center; gap: 10px; }
.kl-page-num  { color: #94a3b8; font-size: 13px; white-space: nowrap; }
.kl-page-btn {
  background: #1a2035;
  border: 1px solid #2a3550;
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  transition: background .15s, color .15s;
}
.kl-page-btn:hover:not(:disabled) { background: #252d45; color: #fff; }
.kl-page-btn:disabled { opacity: .35; cursor: default; }
.kl-page-size-sel {
  background: #1a2035;
  border: 1px solid #2a3550;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  flex-shrink: 0;
}
.kl-page-size-sel:focus { border-color: #fa0035; }

/* ── Scrollbars ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a4460; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4f6080; }