/* ==========================================================================
   KINN Dashboard — v1.5.0
   Complete stylesheet for the fixed full-viewport dashboard shell.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  --kd-dark:       #0f4146;
  --kd-teal:       #00897B;
  --kd-teal-hover: #007066;
  --kd-teal-pale:  #f0faf8;
  --kd-teal-light: #e0f5f2;
  --kd-mint:       #afffb9;
  --kd-bg:         #f4f7f6;
  --kd-white:      #ffffff;
  --kd-border:     #e4edeb;
  --kd-text:       #1a3c3f;
  --kd-muted:      #6b8f8b;
  --kd-ok:         #10b981;
  --kd-ok-pale:    #d1fae5;
  --kd-ok-text:    #065f46;
  --kd-warn:       #f59e0b;
  --kd-warn-pale:  #fef3c7;
  --kd-warn-text:  #92400e;
  --kd-err:        #ef4444;
  --kd-err-pale:   #fee2e2;
  --kd-grey-3:     #9ca3af;
  --kd-grey-pale:  #f3f4f6;
  --kd-sidebar-w:  208px;
  --kd-topbar-h:   56px;
  --kd-radius:     8px;
  --kd-shadow:     0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --kd-shadow-md:  0 4px 12px rgba(0,0,0,.08);
}

/* ── Shell ─────────────────────────────────────────────────────────────── */
body:has(#kd-shell) { overflow: hidden !important; }

#kd-shell {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: grid !important;
  grid-template-columns: var(--kd-sidebar-w) 1fr !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  color: var(--kd-text) !important;
  -webkit-font-smoothing: antialiased;
}
#kd-shell *, #kd-shell *::before, #kd-shell *::after { box-sizing: border-box; }

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.kd-sidebar {
  background: var(--kd-dark);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
}
.kd-sidebar::-webkit-scrollbar { display: none; }

.kd-brand {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 16px 10px;
}
.kd-brand-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.kd-brand-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
}
.kd-brand-url {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .06em;
  color: rgba(255,255,255,.3);
  margin-top: 3px;
  text-transform: uppercase;
}
.kd-brand-badge {
  margin: 4px 12px 14px;
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--kd-mint);
  background: rgba(175,255,185,.08);
  border: 1px solid rgba(175,255,185,.2);
  border-radius: 100px;
  padding: 3px 10px;
}

.kd-nav { flex: 1; padding: 4px 0 12px; }
.kd-nav-section { margin-bottom: 2px; }
.kd-nav-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  padding: 10px 16px 4px;
}
.kd-nav-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  font-size: 13px;
  color: rgba(255,255,255,.6) !important;
  text-decoration: none !important;
  transition: background .12s, color .12s;
  width: 100%;
}
.kd-nav-item:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.9) !important; text-decoration: none !important; }
.kd-nav-item.is-active { background: rgba(255,255,255,.1); color: #fff !important; font-weight: 500; }
.kd-nav-icon { font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; }
.kd-nav-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,.15);
  color: #fff;
  border-radius: 100px;
  padding: 1px 7px;
}
.kd-nav-badge--amber { background: var(--kd-warn); }

.kd-nav-sub { padding: 2px 0 4px 42px; }
.kd-nav-sub-item {
  display: block !important;
  padding: 5px 8px;
  font-size: 12.5px;
  color: rgba(255,255,255,.45) !important;
  text-decoration: none !important;
  border-radius: 4px;
  transition: color .12s, background .12s;
}
.kd-nav-sub-item:hover { color: rgba(255,255,255,.85) !important; background: rgba(255,255,255,.05); text-decoration: none !important; }
.kd-nav-sub-item.is-active { color: #fff !important; font-weight: 500; }

.kd-sidebar-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: auto;
}
.kd-user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--kd-teal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kd-user-info { flex: 1; min-width: 0; }
.kd-user-name { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-user-role { font-size: 10.5px; color: rgba(255,255,255,.35); }
.kd-sign-out {
  color: rgba(255,255,255,.3) !important;
  font-size: 15px;
  text-decoration: none !important;
  padding: 4px;
  border-radius: 4px;
  transition: color .12s;
  flex-shrink: 0;
}
.kd-sign-out:hover { color: rgba(255,255,255,.75) !important; }

/* ── Body ──────────────────────────────────────────────────────────────── */
.kd-body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--kd-bg);
}

.kd-topbar {
  height: var(--kd-topbar-h);
  background: var(--kd-white);
  border-bottom: 1px solid var(--kd-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
}
.kd-topbar-left { display: flex; align-items: center; gap: 12px; }
.kd-topbar-right { display: flex; align-items: center; gap: 10px; }
.kd-breadcrumb { font-size: 13px; color: var(--kd-muted); }
.kd-breadcrumb-link { color: var(--kd-muted) !important; text-decoration: none !important; }
.kd-breadcrumb-link:hover { color: var(--kd-teal) !important; }
.kd-breadcrumb-current { color: var(--kd-text); font-weight: 500; }
.kd-breadcrumb-sep { color: var(--kd-border); margin: 0 4px; }
.kd-topbar-icon {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 6px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: background .12s;
}
.kd-topbar-icon:hover { background: var(--kd-grey-pale); }
.kd-topbar-dot {
  position: absolute;
  top: 5px; right: 5px;
  width: 7px; height: 7px;
  background: var(--kd-warn);
  border-radius: 50%;
  border: 1.5px solid #fff;
}

.kd-content {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
}
.kd-content::-webkit-scrollbar { width: 6px; }
.kd-content::-webkit-scrollbar-thumb { background: var(--kd-border); border-radius: 3px; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.kd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none !important;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.kd-btn--primary { background: var(--kd-teal); color: #fff !important; border-color: var(--kd-teal); }
.kd-btn--primary:hover { background: var(--kd-teal-hover); border-color: var(--kd-teal-hover); color: #fff !important; }
.kd-btn--ghost { background: var(--kd-white); color: var(--kd-text) !important; border-color: var(--kd-border); }
.kd-btn--ghost:hover { background: var(--kd-grey-pale); color: var(--kd-text) !important; }
.kd-btn--danger { background: var(--kd-white); color: var(--kd-err) !important; border-color: var(--kd-err); }
.kd-btn--danger:hover { background: var(--kd-err-pale); }
.kd-btn--sm { padding: 6px 14px; font-size: 13px; }
.kd-btn--xs { padding: 4px 10px; font-size: 12px; }

/* ── Page header (inside .kd-content) ─────────────────────────────────── */
.kd-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}
.kd-page-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.kd-page-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--kd-dark) !important;
  margin: 0 0 4px !important;
  line-height: 1.2 !important;
}
.kd-page-subtitle { font-size: 13px; color: var(--kd-muted); }

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.kd-tabs {
  display: flex;
  background: var(--kd-white);
  border: 1px solid var(--kd-border);
  border-bottom: none;
  border-radius: var(--kd-radius) var(--kd-radius) 0 0;
  padding: 0 16px;
}
.kd-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--kd-muted) !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
  white-space: nowrap;
}
.kd-tab:hover { color: var(--kd-text) !important; }
.kd-tab.is-active { color: var(--kd-teal) !important; border-bottom-color: var(--kd-teal); }
.kd-tab.is-pending.is-active { color: var(--kd-warn) !important; border-bottom-color: var(--kd-warn); }
.kd-tab-count {
  font-size: 11px;
  font-weight: 600;
  background: var(--kd-grey-pale);
  color: var(--kd-muted);
  border-radius: 100px;
  padding: 1px 7px;
}
.kd-tab.is-active .kd-tab-count { background: var(--kd-teal-light); color: var(--kd-teal); }
.kd-tab.is-pending.is-active .kd-tab-count { background: var(--kd-warn-pale); color: var(--kd-warn-text); }

/* ── Filter bar ────────────────────────────────────────────────────────── */
.kd-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--kd-white);
  border: 1px solid var(--kd-border);
  border-top: none;
  border-bottom: none;
  flex-wrap: wrap;
}
.kd-search-wrap { position: relative; flex: 1; min-width: 160px; max-width: 340px; }
.kd-search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--kd-grey-3);
  font-size: 13px;
  pointer-events: none;
}
.kd-search-input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 32px;
  border: 1px solid var(--kd-border);
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--kd-text);
  background: var(--kd-white);
  outline: none;
  transition: border-color .12s;
}
.kd-search-input:focus { border-color: var(--kd-teal); box-shadow: 0 0 0 2px rgba(0,137,123,.1); }
.kd-search-input::placeholder { color: var(--kd-grey-3); }
.kd-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--kd-border);
  border-radius: 6px;
  background: var(--kd-white);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--kd-text);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.kd-filter-btn:hover { background: var(--kd-grey-pale); }
.kd-filter-btn.is-active { border-color: var(--kd-teal); color: var(--kd-teal); }

/* ── Date range filter ──────────────────────────────────────────────────── */
.kd-date-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--kd-border);
  border-radius: 6px;
  background: var(--kd-white);
  transition: border-color .12s;
}
.kd-date-range.is-active { border-color: var(--kd-teal); }
.kd-date-range-label { font-size: 13px; line-height: 1; }
.kd-date-range-sep { font-size: 12px; color: var(--kd-muted); }
.kd-date-input {
  border: none;
  outline: none;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--kd-text);
  cursor: pointer;
  width: 118px;
  padding: 0;
}
.kd-date-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; }
.kd-date-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ── Badges ────────────────────────────────────────────────────────────── */
.kd-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 100px;
  padding: 2px 9px;
  white-space: nowrap;
}
.kd-badge--green { background: var(--kd-ok-pale);   color: var(--kd-ok-text); }
.kd-badge--amber { background: var(--kd-warn-pale);  color: var(--kd-warn-text); }
.kd-badge--grey  { background: var(--kd-grey-pale);  color: var(--kd-muted); }
.kd-badge--red   { background: var(--kd-err-pale);   color: var(--kd-err); }
.kd-badge--teal  { background: var(--kd-teal-light); color: var(--kd-teal); }
.kd-badge--gold  { background: #fff8e1; color: #b8860b; }
.kd-badge--green::before { content: '✓ '; }
.kd-badge--amber::before { content: '⏳ '; }
.kd-badge--teal::before  { content: '🌿 '; font-size: 10px; }

/* ── Data table ────────────────────────────────────────────────────────── */
.kd-table-card {
  background: var(--kd-white);
  border: 1px solid var(--kd-border);
  border-radius: 0 0 var(--kd-radius) var(--kd-radius);
  overflow: hidden;
  margin-bottom: 20px;
}
/* When no tabs above, show full radius */
.kd-table-card--standalone {
  border-radius: var(--kd-radius);
  box-shadow: var(--kd-shadow);
}

.kd-data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.kd-data-table thead tr { background: #f8fafb; border-bottom: 1px solid var(--kd-border); }
.kd-data-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--kd-muted);
  white-space: nowrap;
}
.kd-data-table thead th:first-child { width: 40px; padding-left: 16px; }
.kd-data-table tbody tr { border-bottom: 1px solid var(--kd-border); transition: background .1s; }
.kd-data-table tbody tr:last-child { border-bottom: none; }
.kd-data-table tbody tr:hover { background: var(--kd-teal-pale); }
.kd-data-table td { padding: 13px 14px; vertical-align: middle; color: var(--kd-text); }
.kd-data-table td:first-child { padding-left: 16px; }
.kd-data-table td:last-child  { padding-right: 16px; }

.kd-checkbox { width: 15px; height: 15px; accent-color: var(--kd-teal); cursor: pointer; }
.kd-cell-title { font-weight: 500; color: var(--kd-dark); margin-bottom: 2px; }
.kd-cell-sub   { font-size: 12px; color: var(--kd-muted); margin-top: 2px; }
.kd-cell-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }

.kd-row-actions { display: flex; gap: 6px; opacity: 0; transition: opacity .12s; }
tr:hover .kd-row-actions { opacity: 1; }

/* Table footer */
.kd-table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-top: 1px solid var(--kd-border);
  background: var(--kd-white);
  font-size: 12.5px;
  color: var(--kd-muted);
}
.kd-pagination { display: flex; align-items: center; gap: 4px; }
.kd-page-btn {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kd-border);
  border-radius: 5px;
  background: var(--kd-white);
  color: var(--kd-text) !important;
  font-size: 13px;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .12s;
}
.kd-page-btn:hover { background: var(--kd-grey-pale); }
.kd-page-btn.is-active { background: var(--kd-teal); color: #fff !important; border-color: var(--kd-teal); }
.kd-page-btn--arrow { color: var(--kd-grey-3) !important; font-size: 11px; }

/* ── Dashboard home ────────────────────────────────────────────────────── */
.kd-welcome {
  background: linear-gradient(135deg, var(--kd-dark) 0%, #1a5c63 100%);
  border-radius: var(--kd-radius);
  padding: 26px 28px;
  margin-bottom: 22px;
  color: #fff;
}
.kd-welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--kd-mint);
  background: rgba(175,255,185,.08);
  border: 1px solid rgba(175,255,185,.2);
  border-radius: 100px;
  padding: 3px 12px;
  margin-bottom: 12px;
}
.kd-welcome h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 6px !important;
}
.kd-welcome p { color: rgba(255,255,255,.6); font-size: 13.5px; margin: 0; }
.kd-welcome-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.kd-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.kd-stat {
  background: var(--kd-white);
  border: 1px solid var(--kd-border);
  border-radius: var(--kd-radius);
  padding: 16px 18px;
  box-shadow: var(--kd-shadow);
  text-decoration: none !important;
  transition: box-shadow .12s;
  display: block;
  color: inherit !important;
}
.kd-stat:hover { box-shadow: var(--kd-shadow-md); }
.kd-stat-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 17px; margin-bottom: 12px; }
.kd-stat-value { font-size: 26px; font-weight: 700; color: var(--kd-dark); line-height: 1; margin-bottom: 4px; }
.kd-stat-label { font-size: 12.5px; color: var(--kd-muted); font-weight: 500; }
.kd-stat-note { font-size: 11.5px; color: var(--kd-muted); margin-top: 6px; }
.kd-stat-note--warn { color: var(--kd-warn); }
.kd-stat-note--ok   { color: var(--kd-ok); }

.kd-two-col {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 14px;
  margin-bottom: 22px;
}
.kd-card {
  background: var(--kd-white);
  border: 1px solid var(--kd-border);
  border-radius: var(--kd-radius);
  box-shadow: var(--kd-shadow);
  overflow: hidden;
}
.kd-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-bottom: 1px solid var(--kd-border);
  background: #f8fafb;
}
.kd-card-head h3 { font-size: 13.5px !important; font-weight: 600 !important; color: var(--kd-dark) !important; margin: 0 !important; }

.kd-activity-item {
  display: flex !important;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--kd-border);
  text-decoration: none !important;
  color: var(--kd-text) !important;
  transition: background .1s;
}
.kd-activity-item:last-child { border-bottom: none; }
.kd-activity-item:hover { background: var(--kd-teal-pale); }
.kd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.kd-dot--ok   { background: var(--kd-ok); }
.kd-dot--warn { background: var(--kd-warn); }
.kd-dot--grey { background: var(--kd-grey-3); }
.kd-activity-title { font-size: 13px; font-weight: 500; color: var(--kd-dark); }
.kd-activity-meta  { font-size: 11.5px; color: var(--kd-muted); margin-top: 2px; }

.kd-quick-list { padding: 4px 0; }
.kd-quick-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  text-decoration: none !important;
  color: var(--kd-text) !important;
  font-size: 13.5px;
  border-bottom: 1px solid var(--kd-border);
  transition: background .1s;
}
.kd-quick-item:last-child { border-bottom: none; }
.kd-quick-item:hover { background: var(--kd-teal-pale); color: var(--kd-teal) !important; }
.kd-quick-item-icon { font-size: 15px; width: 22px; text-align: center; flex-shrink: 0; }
.kd-quick-item-arrow { margin-left: auto; color: var(--kd-grey-3); }

/* ── Form layout ───────────────────────────────────────────────────────── */
.kd-form-layout { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.kd-form-card { background: var(--kd-white); border: 1px solid var(--kd-border); border-radius: var(--kd-radius); box-shadow: var(--kd-shadow); overflow: hidden; margin-bottom: 14px; }
.kd-form-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  background: #f8fafb;
  border-bottom: 1px solid var(--kd-border);
}
.kd-form-card-head h3 { font-size: 11.5px !important; font-weight: 700 !important; color: var(--kd-dark) !important; margin: 0 !important; text-transform: uppercase; letter-spacing: .05em; }
.kd-form-card-icon { font-size: 14px; }
.kd-form-body { padding: 16px; }
.kd-form-submit { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--kd-border); background: #f8fafb; }

.kd-meta-card { background: var(--kd-white); border: 1px solid var(--kd-border); border-radius: var(--kd-radius); box-shadow: var(--kd-shadow); overflow: hidden; margin-bottom: 14px; }
.kd-meta-head { padding: 11px 14px; border-bottom: 1px solid var(--kd-border); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--kd-muted); background: #f8fafb; }
.kd-meta-body { padding: 14px; }

/* Image drop */
.kd-image-drop { border: 2px dashed var(--kd-border); border-radius: 8px; padding: 24px 12px; text-align: center; cursor: pointer; background: var(--kd-grey-pale); color: var(--kd-muted); font-size: 13px; transition: border-color .12s, background .12s; user-select: none; }
.kd-image-drop:hover { border-color: var(--kd-teal); background: var(--kd-teal-pale); color: var(--kd-teal); }
.kd-image-drop-icon { font-size: 22px; margin-bottom: 6px; }
.kd-image-drop p { margin: 0; font-size: 12px; }
.kd-img-preview { position: relative; border-radius: 8px; overflow: hidden; background: var(--kd-grey-pale); }
.kd-img-preview img { display: block; width: 100%; height: auto; }
.kd-img-preview-actions { display: flex; gap: 6px; padding: 8px; background: rgba(15,65,70,.72); position: absolute; bottom: 0; left: 0; right: 0; opacity: 0; transition: opacity .18s; }
.kd-img-preview:hover .kd-img-preview-actions { opacity: 1; }

/* ACF fields */
.kd-acf-form .acf-field { margin-bottom: 14px; }
.kd-acf-form .acf-label label { font-size: 12px; font-weight: 700; color: var(--kd-dark); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; display: block; }
.kd-acf-form .acf-label p.description { font-size: 11.5px; color: var(--kd-muted); margin: 3px 0 0; line-height: 1.45; }
.kd-acf-form .acf-input input[type=text],
.kd-acf-form .acf-input input[type=url],
.kd-acf-form .acf-input input[type=email],
.kd-acf-form .acf-input input[type=number],
.kd-acf-form .acf-input input[type=date],
.kd-acf-form .acf-input input[type=time],
.kd-acf-form .acf-input textarea,
.kd-acf-form .acf-input select {
  width: 100%; padding: 8px 12px; border: 1px solid var(--kd-border); border-radius: 6px;
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; color: var(--kd-text); background: var(--kd-white); outline: none; transition: border-color .12s, box-shadow .12s;
}
.kd-acf-form .acf-input input:focus,
.kd-acf-form .acf-input textarea:focus,
.kd-acf-form .acf-input select:focus { border-color: var(--kd-teal); box-shadow: 0 0 0 3px rgba(0,137,123,.1); }

/* Optional 2-column ACF field grid for long detail sections.
   Add class "kd-acf-2col" to the .kd-form-body to activate.
   Textareas, repeaters, and image fields remain full-width. */
.kd-form-body.kd-acf-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}
.kd-form-body.kd-acf-2col .acf-field[data-type="textarea"],
.kd-form-body.kd-acf-2col .acf-field[data-type="image"],
.kd-form-body.kd-acf-2col .acf-field[data-type="repeater"],
.kd-form-body.kd-acf-2col .acf-field[data-type="flexible_content"],
.kd-form-body.kd-acf-2col .acf-field[data-type="wysiwyg"],
.kd-form-body.kd-acf-2col .acf-field[data-type="file"] {
  grid-column: 1 / -1; /* span full width */
}

/* Helper for pairing two native form fields side by side */
.kd-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.kd-form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 600px) {
  .kd-form-row,
  .kd-form-row--3,
  .kd-form-body.kd-acf-2col { grid-template-columns: 1fr; }
}

/* Checkboxes */
.kd-checkbox-list { display: flex; flex-direction: column; gap: 6px; }
.kd-checkbox-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--kd-text); cursor: pointer; }
.kd-checkbox-item input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--kd-teal); cursor: pointer; flex-shrink: 0; }

/* Toggles */
.kd-toggle-wrap { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--kd-border); }
.kd-toggle-wrap:last-child { border-bottom: none; }
.kd-toggle-label { font-size: 13px; font-weight: 500; color: var(--kd-text); }
.kd-toggle-sub   { font-size: 11.5px; color: var(--kd-muted); margin-top: 2px; }
.kd-toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.kd-toggle input { opacity: 0; width: 0; height: 0; }
.kd-toggle-track { position: absolute; inset: 0; background: var(--kd-border); border-radius: 100px; cursor: pointer; transition: background .18s; }
.kd-toggle input:checked ~ .kd-toggle-track { background: var(--kd-teal); }
.kd-toggle-track::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: left .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.kd-toggle input:checked ~ .kd-toggle-track::after { left: 18px; }

/* ── Form fields ────────────────────────────────────────────────────────── */
/* Core field wrapper */
.kd-field           { margin-bottom: 16px; }
.kd-field:last-child{ margin-bottom: 0; }

/* Field label */
.kd-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--kd-dark);
  margin-bottom: 5px;
}

/* Required asterisk */
.req { color: var(--kd-err); font-weight: 700; margin-left: 2px; }

/* Base input — full-width, consistently styled across all form pages */
.kd-input {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--kd-border);
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  color: var(--kd-text);
  background: var(--kd-white);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
  -webkit-appearance: none;
}
.kd-input:focus {
  border-color: var(--kd-teal);
  box-shadow: 0 0 0 3px rgba(0,137,123,.1);
}
.kd-input::placeholder { color: var(--kd-grey-3); }
textarea.kd-input  { resize: vertical; min-height: 96px; line-height: 1.5; }
select.kd-input {
  cursor: pointer;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b8f8b'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}
.kd-input--full { width: 100%; }

/* Hint text below fields */
.kd-field-hint {
  margin: 5px 0 0;
  font-size: 11.5px;
  color: var(--kd-muted);
  line-height: 1.45;
}

/* Grid column helpers — prevent overflow in form two-column layout */
.kd-form-main-col,
.kd-form-side-col { min-width: 0; }

/* Icon used in .kd-form-card-head */
.kd-section-icon { font-size: 15px; flex-shrink: 0; }

/* Status pills */
.kd-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
.kd-pill--published { background: var(--kd-ok-pale);  color: var(--kd-ok-text); }
.kd-pill--draft     { background: var(--kd-grey-pale); color: var(--kd-muted);  }

/* Button size variants */
.kd-btn--lg   { padding: 10px 22px; font-size: 14.5px; }
.kd-btn--full { width: 100%; justify-content: center; }

/* Form action bar (Cancel / Save) */
.kd-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Checkbox multi-column grid (event categories = 3-col, resource categories = 2-col) */
.kd-checkbox-list--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 20px;
}
.kd-checkbox-list--2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 20px;
}

/* Compact input variant — for short values like a 4-digit year number */
.kd-input--compact { width: auto; max-width: 130px; }

/* Secondary button — teal outline (used for non-destructive secondary actions) */
.kd-btn--secondary { background: var(--kd-white); color: var(--kd-teal) !important; border-color: var(--kd-teal); }
.kd-btn--secondary:hover { background: var(--kd-teal-pale); }

/* Horizontal rule divider inside cards */
.kd-divider { border: none; border-top: 1px solid var(--kd-border); margin: 18px 0; }

/* Simple inline toggle label (native checkbox + descriptive text) */
.kd-toggle-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--kd-text);
  line-height: 1.45;
}
.kd-toggle-label input[type=checkbox] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--kd-teal);
  cursor: pointer;
}
.kd-toggle-text { flex: 1; }

/* NPW date list */
.kd-dates-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.kd-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--kd-teal-pale);
  border: 1px solid var(--kd-teal-light);
  border-radius: 6px;
  font-size: 13px;
}
.kd-date-row__label { flex: 1; font-weight: 500; color: var(--kd-dark); }
.kd-date-row__raw   { font-size: 11.5px; color: var(--kd-muted); font-family: monospace; }

/* Add-date row: date input + button side-by-side */
.kd-add-date-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.kd-add-date-row .kd-input { flex: 1; min-width: 160px; max-width: 220px; }

/* ── Page header used inside form pages ─────────────────────────────────── */
.kd-page-header        { margin-bottom: 20px; }
.kd-page-header h1     { font-size: 26px !important; font-weight: 700 !important; color: var(--kd-dark) !important; margin: 0 0 4px !important; line-height: 1.2 !important; }
.kd-page-header p      { font-size: 13.5px; color: var(--kd-muted); margin: 0; }
.kd-breadcrumb a       { color: var(--kd-muted) !important; text-decoration: none !important; }
.kd-breadcrumb a:hover { color: var(--kd-teal) !important; }

/* Notice success alias (mirrors --ok) */
.kd-notice--success { background: var(--kd-ok-pale); border-color: var(--kd-ok); color: var(--kd-ok-text); }

/* ── Taxonomy manager ───────────────────────────────────────────────────── */
.kd-list-page__header { margin-bottom: 20px; }
.kd-help-text { font-size: 13.5px; color: var(--kd-muted); margin: 0 0 20px; line-height: 1.55; }

/* Two-column layout: sticky add/edit panel + scrollable term list */
.kd-taxonomy-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}
.kd-taxonomy-form-panel {
  background: var(--kd-white);
  border: 1px solid var(--kd-border);
  border-radius: var(--kd-radius);
  box-shadow: var(--kd-shadow);
  padding: 18px 20px 20px;
  position: sticky;
  top: 16px;
}
.kd-taxonomy-list-panel { min-width: 0; }

.kd-panel-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--kd-dark) !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--kd-border);
}

/* Field groups inside taxonomy add/edit panel */
.kd-field-group         { margin-bottom: 14px; }
.kd-field-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--kd-dark);
  margin-bottom: 5px;
}
.kd-field-group .acf-required { color: var(--kd-err); margin-left: 1px; }

/* Taxonomy term table — uses .kd-table/.kd-table-wrap (distinct from .kd-data-table) */
.kd-table-wrap { overflow-x: auto; }
.kd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--kd-white);
  border: 1px solid var(--kd-border);
  border-radius: var(--kd-radius);
  overflow: hidden;
}
.kd-table thead tr    { background: #f8fafb; border-bottom: 2px solid var(--kd-border); }
.kd-table thead th    { padding: 10px 14px; text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--kd-muted); white-space: nowrap; }
.kd-table thead th:first-child { padding-left: 18px; }
.kd-table__th--actions { text-align: right; padding-right: 18px !important; }
.kd-table tbody tr    { border-bottom: 1px solid var(--kd-border); transition: background .1s; }
.kd-table tbody tr:last-child { border-bottom: none; }
.kd-table tbody tr:hover { background: var(--kd-teal-pale); }
.kd-table td          { padding: 12px 14px; vertical-align: middle; color: var(--kd-text); }
.kd-table td:first-child { padding-left: 18px; }
.kd-table__actions    { display: flex; gap: 6px; justify-content: flex-end; padding-right: 6px; }

/* ── Misc ──────────────────────────────────────────────────────────────── */
.kd-empty { padding: 40px 24px; text-align: center; color: var(--kd-muted); font-size: 14px; }
.kd-empty a { color: var(--kd-teal); }
.kd-notice { padding: 12px 16px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; border-left: 3px solid; }
.kd-notice--ok    { background: var(--kd-ok-pale);   border-color: var(--kd-ok);   color: var(--kd-ok-text); }
.kd-notice--warn  { background: var(--kd-warn-pale);  border-color: var(--kd-warn); color: var(--kd-warn-text); }
.kd-notice--error { background: var(--kd-err-pale);   border-color: var(--kd-err);  color: var(--kd-err); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .kd-stats { grid-template-columns: repeat(2, 1fr); }
  .kd-two-col { grid-template-columns: 1fr; }
  .kd-form-layout { grid-template-columns: 1fr; }
  .kd-taxonomy-layout { grid-template-columns: 1fr; }
  .kd-taxonomy-form-panel { position: static; }
}
@media (max-width: 640px) {
  .kd-checkbox-list--grid { grid-template-columns: repeat(2, 1fr); }
  .kd-checkbox-list--2col { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --kd-sidebar-w: 0px; }
  .kd-sidebar { display: none; }
  .kd-content { padding: 16px; }
}

/* ==========================================================================
   Thickbox z-index override (kept as fallback)
   ========================================================================== */
#TB_overlay { z-index: 1000000 !important; }
#TB_window  { z-index: 1000001 !important; }

/* ==========================================================================
   KD Custom Media Modal  (v1.5.21)
   A REST-API-powered grid picker — works on any page builder.
   ========================================================================== */
#kd-media-modal {
  position: fixed;
  inset: 0;
  z-index: 1000002;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kd-mm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
}
.kd-mm-window {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 6px;
  width: min(960px, 96vw);
  height: min(700px, 90vh);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
  overflow: hidden;
}

/* ── Header ── */
.kd-mm-head {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid #e2e2e2;
  flex-shrink: 0;
  background: #fff;
}
.kd-mm-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  color: #1a1a1a;
}
.kd-mm-x {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #888;
  padding: 0 4px;
}
.kd-mm-x:hover { color: #111; }

/* ── Toolbar ── */
.kd-mm-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid #e2e2e2;
  background: #f7f7f7;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.kd-mm-tabs { display: flex; gap: 2px; }
.kd-mm-tab {
  background: none;
  border: 1px solid transparent;
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #555;
}
.kd-mm-tab.kd-mm-tab--active {
  background: #fff;
  border-color: #d0d0d0;
  color: #111;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
/* Filter type dropdown */
.kd-mm-filter {
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 13px;
  background: #fff;
  color: #333;
  cursor: pointer;
  outline: none;
  height: 30px;
}
.kd-mm-filter:focus { border-color: #3b82f6; }

.kd-mm-search-wrap { margin-left: auto; }
#kd-mm-search {
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 13px;
  width: 200px;
  outline: none;
  background: #fff;
}
#kd-mm-search:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.2); }

/* ── Body ── */
.kd-mm-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Grid ── */
.kd-mm-grid {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 8px;
  align-content: start;
}
.kd-mm-item {
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: #f0f0f0;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color .15s;
}
.kd-mm-item:hover { border-color: #93c5fd; }
.kd-mm-item.kd-mm-item--sel { border-color: #2563eb; }
.kd-mm-item.kd-mm-item--sel::after {
  content: '✓';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  background: #2563eb;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.kd-mm-item img {
  width: 100%;
  flex: 1;
  object-fit: cover;
  display: block;
  min-height: 0;
}
.kd-mm-file-icon {
  font-size: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  background: #e8eaed;
}
.kd-mm-item-name {
  font-size: 10px;
  padding: 3px 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: rgba(0,0,0,.04);
  color: #444;
  flex-shrink: 0;
}
.kd-mm-status {
  grid-column: 1/-1;
  padding: 48px 20px;
  text-align: center;
  color: #888;
  font-size: 14px;
}
.kd-mm-load-more {
  grid-column: 1/-1;
  display: block;
  width: calc(100% - 24px);
  margin: 4px 12px 12px;
  padding: 9px 16px;
  background: #f0f0f0;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  color: #444;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.kd-mm-load-more:hover {
  background: #e4e4e4;
  border-color: #b8b8b8;
}

/* ── Detail sidebar ── */
.kd-mm-detail {
  width: 256px;
  flex-shrink: 0;
  border-left: 1px solid #e2e2e2;
  padding: 16px;
  overflow-y: auto;
  background: #fafafa;
}
.kd-mm-detail-thumb {
  margin-bottom: 12px;
  text-align: center;
}
.kd-mm-detail-thumb img {
  max-width: 100%;
  max-height: 160px;
  border-radius: 4px;
  object-fit: contain;
}
.kd-mm-detail-thumb .kd-mm-file-icon { font-size: 56px; }
.kd-mm-detail-info p { margin: 4px 0; font-size: 13px; color: #444; word-break: break-word; }
.kd-mm-detail-info strong { color: #111; }
.kd-mm-detail-info .kd-mm-di-url { font-size: 11px; color: #888; }
/* Empty-state placeholder */
.kd-mm-no-sel {
  font-size: 13px;
  color: #aaa;
  text-align: center;
  margin-top: 24px;
  line-height: 1.5;
}
/* Definition list for item details */
.kd-mm-dl {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.6;
}
.kd-mm-dl dt {
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .04em;
  margin-top: 10px;
}
.kd-mm-dl dd {
  margin: 0;
  color: #222;
  word-break: break-word;
}
.kd-mm-dl-wrap {
  word-break: break-all;
  overflow-wrap: anywhere;
}
/* "View file" link in detail sidebar */
.kd-mm-view-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 12px;
  color: #3b82f6;
  text-decoration: none;
}
.kd-mm-view-link:hover { text-decoration: underline; }

/* ── Upload tab ── */
.kd-mm-upload {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.kd-mm-dropzone {
  border: 2px dashed #c8c8c8;
  border-radius: 8px;
  padding: 56px 40px;
  text-align: center;
  cursor: pointer;
  width: 100%;
  max-width: 420px;
  transition: border-color .2s, background .2s;
}
.kd-mm-dropzone:hover,
.kd-mm-dropzone.kd-mm-dz--over {
  border-color: #3b82f6;
  background: #eff6ff;
}
.kd-mm-dropzone-icon { font-size: 48px; margin-bottom: 10px; }
.kd-mm-dropzone p { margin: 5px 0; font-size: 14px; color: #555; }
.kd-mm-uploading { font-size: 14px; color: #555; text-align: center; }

/* ── Footer ── */
.kd-mm-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid #e2e2e2;
  background: #f7f7f7;
  flex-shrink: 0;
}
.kd-mm-info { font-size: 13px; color: #888; flex: 1; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .kd-mm-window { height: 98vh; width: 100vw; border-radius: 0; }
  .kd-mm-detail { display: none; }
  .kd-mm-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  #kd-mm-search { width: 140px; }
}

/* ==========================================================================
   wp.media z-index fix (v1.5.44)
   The KINN shell sits at z-index 999999. WordPress's native media modal uses
   z-index 159900–160000, which puts it below the shell. Bump everything up.
   ========================================================================== */
/* Backdrop sits above the shell but below the modal */
.media-modal-backdrop,
#TB_overlay {
  z-index: 1000000 !important;
}
/* Modal frame must be strictly above the backdrop.
   NOTE: do NOT include .wp-core-ui.media-frame here — it is a child of
   .media-modal and setting it to the same z-index causes it to sit above
   the close button (z-index:1000) inside the modal's stacking context,
   blocking click events on the X button. Only the outermost modal wrapper
   needs elevation. */
.media-modal,
#TB_window {
  z-index: 1000001 !important;
}

/* ==========================================================================
   TinyMCE (Classic Editor) float-panel z-index fix (v1.5.57)
   The KINN shell sits at z-index 999999. TinyMCE 4's floating panels
   (.mce-floatpanel) default to z-index 65535, so the format dropdown,
   link dialog, colour picker, etc. render invisibly behind the shell.
   Set them above the shell (1000000) but below the media modal (1000001)
   so wp.media still overlays them correctly when opened from the editor.
   ========================================================================== */
.mce-floatpanel {
  z-index: 1000000 !important;
}

/* TinyMCE modal dialogs (e.g. insert/edit link via the full dialog path)  */
.mce-overlay {
  z-index: 1000000 !important;
}
.mce-window {
  z-index: 1000001 !important;
}

/* WordPress link picker popup (#wp-link-wrap)
   This is a separate WP element — not part of TinyMCE — rendered when the
   toolbar link button is clicked. Default z-index (~100100) sits below the
   KINN shell (999999), making the popup invisible.                          */
#wp-link-wrap {
  z-index: 1000002 !important;
}

/* ==========================================================================
   Media picker overlay (v1.5.44)
   Fallback iframe modal — shown when wp.media templates are absent.
   ========================================================================== */

#kd-media-overlay {
  position: fixed;
  inset: 0;
  z-index: 160001; /* above #kd-shell (999999) when shell is present */
  display: flex;
  align-items: center;
  justify-content: center;
}
#kd-media-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}
#kd-media-overlay-wrap {
  position: relative;
  z-index: 1;
  width: 90vw;
  max-width: 980px;
  height: 82vh;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
#kd-media-overlay-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: #1d2327;
  color: #fff;
  flex-shrink: 0;
}
#kd-media-overlay-title {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
#kd-media-overlay-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  padding: 4px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.6;
  transition: background 0.15s;
}
#kd-media-overlay-close:hover {
  background: rgba(255, 255, 255, 0.12);
}
#kd-media-overlay-iframe {
  flex: 1;
  width: 100%;
  border: none;
  display: block;
}

/* Prevent body scroll behind the overlay */
body.kd-media-open {
  overflow: hidden !important;
}

@media (max-width: 640px) {
  #kd-media-overlay-wrap {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    max-width: none;
  }
}