/* KD Studio 3D — admin CMS chrome. Loaded on every page, inert unless the owner unlocks it. */
#kd-admin-root, #kd-admin-root * { box-sizing: border-box; }
#kd-admin-root {
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 14px;
  color: #1c1c1e;
}

.kd-hidden { display: none !important; }

/* The plain HTML `hidden` attribute only wins over an element's own
   `display: flex`/`grid`/etc. utility class by luck of stylesheet order --
   Tailwind's generated rules are an author stylesheet with the same
   specificity as the browser's built-in `[hidden]{display:none}`, so
   whichever was declared later wins, and Tailwind (loaded after this file)
   was winning, leaving `hidden` elements (the gallery popup, its detail
   view, etc.) visible on page load instead of actually hidden. This
   guarantees `hidden` always means hidden regardless of what other display
   utility classes sit next to it. */
[hidden] { display: none !important; }

/* Anti-flash veil: content.json (saved text/image edits) is fetched and
   applied by content-loader.js AFTER the static PHP markup has already
   painted, so without this every page briefly flashes its hardcoded
   default image/text before the real saved one swaps in. Every page's
   opening <html> tag carries kd-content-loading; content-loader.js removes
   it once content.json has been applied (or after a 2.5s safety timeout,
   in case the fetch fails, so the page is never stuck blank). This rule
   lives here rather than per-page since admin.css is a render-blocking
   stylesheet already loaded in <head> on every page. */
html.kd-content-loading { visibility: hidden; }

/* Launcher + admin bar */
#kd-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99998;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #1f2023;
  color: #e8d3b9;
  border: 1px solid rgba(232,211,185,0.4);
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
}
#kd-launcher:hover { transform: scale(1.06); }

#kd-admin-bar {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99998;
  background: #17181a;
  border: 1px solid rgba(232,211,185,0.25);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
  color: #f1efe9;
}
#kd-admin-bar .kd-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #cbb994; }
.kd-switch { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #3a3b3e; cursor: pointer; border: none; padding: 0; flex-shrink: 0; }
.kd-switch.on { background: #d8c3aa; }
.kd-switch .kd-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s ease; }
.kd-switch.on .kd-knob { left: 20px; }
.kd-icon-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15);
  background: transparent; color: #f1efe9; cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.kd-icon-btn:hover { background: rgba(255,255,255,0.08); }

/* Hover / editing outlines on live page content */
body.kd-edit-mode .kd-hover-target {
  outline: 2px dashed #d4af37 !important;
  outline-offset: 2px;
  cursor: text;
  background-color: rgba(212,175,55,0.06);
}
body.kd-edit-mode .kd-hover-media {
  cursor: pointer !important;
  outline: 2px dashed #6bb1ff !important;
  outline-offset: 2px;
}
/* Card/section visibility toggle (data-kd-toggle-id elements) */
#kd-toggle-badge {
  position: fixed;
  z-index: 99996;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #1f2023;
  border: 1px solid rgba(232,211,185,0.4);
  color: #e8d3b9;
  align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  display: none;
}
#kd-toggle-badge:hover { background: #292a2c; border-color: #d4af37; }
#kd-toggle-badge.show { display: flex; }
#kd-toggle-badge.is-hidden { color: #ff9d9d; border-color: rgba(255,157,157,0.5); }

/* A hidden block previewed for the admin in Edit Mode -- visitors never
   see this (content-loader.js sets display:none for them instead). */
.kd-hidden-preview {
  outline: 2px dashed #d4af37 !important;
  outline-offset: 3px;
  opacity: 0.4;
  position: relative;
}

/* Decorative background-image layers (e.g. the hero backdrop) are
   pointer-events:none for visitors so clicks pass through to the content
   above them. In edit mode that also stops them from ever being hovered
   or clicked for editing, so re-enable pointer events on them here --
   visitor-facing behavior is untouched since this only applies inside
   body.kd-edit-mode. */
body.kd-edit-mode [data-alt].pointer-events-none {
  pointer-events: auto !important;
}

/* Dedicated trigger for background layers that sit behind other full-width
   content (like the hero backdrop) -- hovering/clicking through to them
   directly isn't reliable since the content wrapper on top of them covers
   nearly the whole section even though it's only "relative" positioned.
   Hidden for visitors; shown only once edit mode is on. */
.kd-hero-bg-edit-btn {
  display: none;
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 40;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(23,24,26,0.85);
  color: #f1efe9;
  border: 1px solid rgba(232,211,185,0.35);
  font-size: 11px;
  font-family: 'Space Grotesk', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.kd-hero-bg-edit-btn:hover {
  border-color: #d4af37;
  color: #d4af37;
}
body.kd-edit-mode .kd-hero-bg-edit-btn {
  display: flex;
}

/* Portfolio page: per-card discipline checkboxes (in-flow, at the bottom of
   each card, so they never overlap the card's own image badges/CTA -- see
   initDisciplineEditors() in admin.js) and the "+ Add Project Card" tile
   appended at the end of the grid. Both hidden for visitors, shown only
   once edit mode is on. */
.kd-discipline-editor {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 16px;
  /* Self-contained dark strip (own background, not just a border) rather
     than transparent-over-card -- .project-card's own background flips to
     near-white in light theme (see html.light-theme .project-card in
     portfolio.php), which this admin-only chrome doesn't otherwise track,
     so pale text would go near-invisible without its own backdrop. */
  background: rgba(23,24,26,0.9);
  font-family: 'Space Grotesk', Arial, sans-serif;
}
body.kd-edit-mode .kd-discipline-editor {
  display: flex;
}
.kd-discipline-editor-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(241,239,234,0.55);
  margin-right: 2px;
}
.kd-discipline-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(232,211,185,0.3);
  color: #f1efe9;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.kd-discipline-chip input {
  margin: 0;
  cursor: pointer;
}
.kd-discipline-chip:has(input:checked),
.kd-discipline-chip.is-checked {
  border-color: #d4af37;
  color: #d4af37;
  background: rgba(212,175,55,0.1);
}

.kd-add-card-tile {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 260px;
  width: 100%;
  border: 2px dashed rgba(232,211,185,0.3);
  border-radius: 12px;
  /* Own dark background for the same reason as .kd-discipline-editor above
     -- this tile sits in the grid's own background, which flips light in
     light theme. */
  background: rgba(23,24,26,0.35);
  color: rgba(241,239,234,0.65);
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
}
.kd-add-card-tile:hover {
  border-color: #d4af37;
  color: #d4af37;
}
body.kd-edit-mode .kd-add-card-tile {
  display: flex;
}

.kd-editing {
  outline: 2px solid #d4af37 !important;
  outline-offset: 2px;
  background-color: rgba(212,175,55,0.1);
}

/* Modal overlay shared by PIN + media modals */
.kd-modal-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(10,10,12,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.kd-modal {
  background: #17181a;
  color: #f1efe9;
  border: 1px solid rgba(232,211,185,0.2);
  border-radius: 16px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.kd-modal h3 { margin: 0 0 4px; font-family: 'Syne', sans-serif; font-size: 20px; }
.kd-modal p.kd-hint { font-size: 12px; color: #b8b2a5; margin: 6px 0 0; }
.kd-modal-close {
  position: absolute; top: 14px; right: 18px; background: none; border: none;
  color: #cbb994; font-size: 22px; cursor: pointer; line-height: 1;
}
.kd-modal-row { position: relative; margin-bottom: 16px; }

/* PIN pad */
#kd-pin-input {
  width: 100%; padding: 12px 14px; font-size: 20px; letter-spacing: 6px; text-align: center;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); background: #0f1012; color: #fff;
  margin: 14px 0;
}
.kd-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.kd-keypad button {
  padding: 14px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12);
  background: #201f22; color: #fff; font-size: 17px; cursor: pointer;
}
.kd-keypad button:hover { background: #2a292c; }
.kd-btn-primary {
  width: 100%; padding: 12px; border-radius: 10px; border: none; cursor: pointer;
  background: #e8d3b9; color: #1f2023; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 13px;
}
.kd-btn-primary:hover { background: #d8c3aa; }
.kd-error-text { color: #ff8b8b; font-size: 12px; margin-top: -6px; margin-bottom: 10px; min-height: 14px; }

/* Media modal */
.kd-tabs { display: flex; gap: 6px; margin: 14px 0; }
.kd-tab {
  flex: 1; padding: 9px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12);
  background: transparent; color: #cbc6bb; cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
}
.kd-tab.active { background: #e8d3b9; color: #1f2023; border-color: transparent; font-weight: 700; }
.kd-tab-panel { margin-bottom: 14px; }
.kd-tab-panel input[type="text"], .kd-tab-panel input[type="file"] {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15);
  background: #0f1012; color: #fff; font-size: 13px;
}
.kd-tab-panel button { margin-top: 8px; }

.kd-preview-box {
  position: relative; width: 100%; height: 220px; border-radius: 10px; overflow: hidden;
  background: #0b0c0d repeating-conic-gradient(#141516 0% 25%, #0b0c0d 0% 50%) 50% / 20px 20px;
  cursor: grab; border: 1px solid rgba(255,255,255,0.12);
}
.kd-preview-box.dragging { cursor: grabbing; }
.kd-preview-box img, .kd-preview-box video {
  position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none;
}
.kd-fit-controls { display: flex; gap: 8px; margin: 12px 0; }
.kd-fit-controls button {
  flex: 1; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15);
  background: transparent; color: #e3ded2; font-size: 12px; cursor: pointer;
}
.kd-fit-controls button.active { background: #3a3b3e; border-color: #e8d3b9; color: #fff; }
.kd-modal-actions { display: flex; gap: 8px; margin-top: 8px; }
.kd-modal-actions button:first-child {
  flex: 1; padding: 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15);
  background: transparent; color: #cbb994; cursor: pointer; font-size: 12px; text-transform: uppercase;
}
.kd-modal-actions .kd-btn-primary { flex: 1.4; }

/* Text formatting toolbar */
#kd-text-toolbar {
  position: fixed; z-index: 99999;
  display: flex; align-items: center; gap: 6px;
  background: #17181a; border: 1px solid rgba(232,211,185,0.3); border-radius: 10px;
  padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
#kd-text-toolbar select, #kd-text-toolbar input[type="number"] {
  background: #0f1012; color: #fff; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
  padding: 5px 6px; font-size: 12px;
}
#kd-text-toolbar input[type="number"] { width: 56px; }
#kd-text-toolbar input[type="color"] {
  width: 30px; height: 28px; padding: 0; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; background: none; cursor: pointer;
}
#kd-text-toolbar button {
  border: 1px solid rgba(255,255,255,0.15); background: #201f22; color: #fff; border-radius: 6px;
  padding: 5px 9px; font-size: 12px; cursor: pointer;
}
#kd-text-toolbar .kd-btn-primary { padding: 6px 12px; }

/* Media hover pencil badge on hovered image/bg elements */
.kd-media-hint {
  position: fixed; z-index: 99997; pointer-events: none;
  background: #1f2023; color: #d4af37; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(212,175,55,0.4);
}

/* Toast */
#kd-toast {
  position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 12px);
  background: #1f2023; color: #f1efe9; border: 1px solid rgba(232,211,185,0.3);
  padding: 10px 18px; border-radius: 999px; font-size: 13px; z-index: 99999;
  opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
#kd-toast.show { opacity: 1; transform: translate(-50%, 0); }