/* ==========================================================================
   admin.css — Styling for the Sonjuski editing layer (admin.js / editor.js).
   --------------------------------------------------------------------------
   Everything here is inert for visitors. The only thing ever shown to the
   public is the small, quiet footer dot. All editing chrome is created by
   admin.js only after login, and the inline-edit cues are gated behind
   body.admin-editing. Uses the site's existing pink design tokens.
   ========================================================================== */

/* ---- Discreet footer affordance (always present, very quiet) ---------- */
.admin-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line, #F0D6DF);
  opacity: 0.5;
  cursor: pointer;
  flex: none;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.admin-dot:hover, .admin-dot:focus-visible { opacity: 1; background: var(--pink-pale, #F4B6CC); }
.admin-dot:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 2px; }

/* ---- Shared admin button --------------------------------------------- */
.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid var(--line, #F0D6DF);
  border-radius: var(--r-pill, 999px);
  padding: 8px 16px;
  background: var(--surface, #fff);
  color: var(--pink-deep, #E0006E);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.14s ease, transform 0.12s ease, box-shadow 0.14s ease;
}
.admin-btn:hover { background: var(--pink-wash, #FCE7EE); transform: translateY(-1px); }
.admin-btn:active { transform: translateY(0); }
.admin-btn:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 2px; }
.admin-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.admin-btn-primary { background: var(--pink-deep, #E0006E); color: #fff; border-color: transparent; }
.admin-btn-primary:hover { background: var(--pink-ink, #B0185C); }
.admin-btn-danger { color: #b00020; border-color: #f1c4cc; }
.admin-btn-danger:hover { background: #fdecef; }
.admin-btn svg { width: 18px; height: 18px; }

/* ---- The fixed editor bar (only exists when logged in) ---------------- */
html.admin-active body { padding-bottom: 84px; }
.admin-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 400;
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--line, #F0D6DF);
  box-shadow: 0 -6px 24px rgba(176, 24, 92, 0.14);
  backdrop-filter: saturate(1.2) blur(4px);
}
.admin-bar-inner {
  max-width: var(--maxw, 1080px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--space-5, 24px);
  flex-wrap: wrap;
}
.admin-brand { font-weight: 700; color: var(--pink-deep); letter-spacing: 0.01em; }
.admin-spacer { flex: 1 1 auto; }
.admin-toggle.is-on { background: var(--pink-deep); color: #fff; border-color: transparent; }
.admin-status { font-size: 0.86rem; }
.admin-dirty { color: var(--pink-deep); font-weight: 700; }
.admin-clean { color: var(--ink-soft, #6B6B6B); }

/* ---- Inline-edit cues (only while editing) ---------------------------- */
body.admin-editing [data-edit-field] {
  outline: 1px dashed var(--pink-pale, #F4B6CC);
  outline-offset: 2px;
  border-radius: 4px;
  cursor: text;
  transition: outline-color 0.12s ease, background 0.12s ease;
}
body.admin-editing [data-edit-field]:hover {
  outline-color: var(--pink-deep);
  background: var(--pink-wash, #FCE7EE);
}
body.admin-editing [data-edit-field][data-edit-rich] { cursor: pointer; min-height: 1.5em; }
[data-edit-field].admin-inline {
  outline: 2px solid var(--pink-deep) !important;
  background: #fff;
  box-shadow: var(--shadow-focus);
}

/* ---- Per-card control overlay ---------------------------------------- */
.admin-card-wrap { position: relative; }
body.admin-editing .admin-card { position: relative; }
.admin-ctrls {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--line, #F0D6DF);
  border-radius: var(--r-pill, 999px);
  box-shadow: var(--shadow-md);
}
.admin-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--surface, #fff);
  color: var(--pink-deep, #E0006E);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.admin-ic:hover { background: var(--pink-wash, #FCE7EE); }
.admin-ic:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 1px; }
.admin-ic svg { width: 18px; height: 18px; fill: none; }
.admin-ic[data-admin-action="favorite"] svg { fill: none; }
.admin-ic[data-admin-action="favorite"].is-active { color: var(--pink-strong, #F01878); }
.admin-ic[data-admin-action="favorite"].is-active svg { fill: var(--pink-strong, #F01878); }
.admin-ic[data-admin-action="delete"]:hover { background: #fdecef; color: #b00020; }
.admin-grip { cursor: grab; color: var(--ink-soft, #6B6B6B); }
.admin-grip:active { cursor: grabbing; }
.admin-grip svg { width: 18px; height: 18px; }

/* Drag + drop affordances */
body.admin-editing .admin-card-wrap[draggable="true"] { cursor: grab; }
.admin-card-wrap.is-dragging { opacity: 0.5; }
.admin-card-wrap.is-drop { outline: 2px dashed var(--pink-deep); outline-offset: 4px; border-radius: var(--r-md); }

/* Grid / list / gallery context fixes for the wrapper */
.grid .admin-card-wrap { height: 100%; }
.grid .admin-card-wrap > .admin-card { height: 100%; }
.gallery .admin-card-wrap { break-inside: avoid; margin: 0 0 var(--space-4, 16px); display: block; width: 100%; }
.gallery .admin-card-wrap > .photo { margin: 0; width: 100%; }

/* ---- Section tools (Add / Shuffle) ----------------------------------- */
.admin-section-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-4, 16px);
  padding: 12px 14px;
  background: var(--pink-wash, #FCE7EE);
  border: 1px solid var(--line, #F0D6DF);
  border-radius: var(--r-md, 16px);
}
.admin-tip { font-size: 0.82rem; }
.admin-muted { color: var(--ink-soft, #6B6B6B); font-size: 0.86rem; }

/* ---- Modals (login, panel, publish, menu, help) ---------------------- */
.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5, 24px);
  background: rgba(43, 12, 24, 0.55);
}
.admin-modal-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow: auto;
  background: var(--surface, #fff);
  border-radius: var(--r-lg, 24px);
  box-shadow: var(--shadow-lg);
  padding: 28px;
}
.admin-panel-card, .admin-publish { max-width: 620px; }
.admin-modal-card h2 { font-size: 1.3rem; color: var(--pink-deep); margin: 0 0 12px; padding-right: 28px; }
.admin-x {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: transparent; color: var(--ink-soft, #6B6B6B);
  cursor: pointer;
}
.admin-x:hover { background: var(--pink-wash); color: var(--pink-deep); }
.admin-x:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 1px; }
.admin-x svg { width: 20px; height: 20px; }

.admin-modal-card label { display: block; font-weight: 600; margin: 14px 0 6px; }
.admin-modal-card input[type="text"],
.admin-modal-card input[type="password"],
.admin-modal-card textarea,
.admin-modal-card select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--line, #F0D6DF);
  border-radius: var(--r-sm, 10px);
  background: #fff;
  color: var(--ink, #2B2B2B);
}
.admin-modal-card textarea { resize: vertical; line-height: 1.5; }
.admin-modal-card input:focus,
.admin-modal-card textarea:focus,
.admin-modal-card select:focus { outline: 3px solid var(--pink-deep); outline-offset: 1px; border-color: transparent; }
.admin-login-msg { min-height: 1.2em; margin: 10px 0; font-size: 0.9rem; color: var(--ink-soft); }
.admin-login-msg.is-warn { color: var(--pink-deep); font-weight: 600; }
.admin-login-msg ~ .admin-btn-primary { margin-top: 8px; }

.admin-form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.admin-field { margin-bottom: 4px; }
.admin-menu-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 14px; }
.admin-menu-list .admin-btn { justify-content: center; }

.admin-img-field { display: flex; gap: 14px; align-items: flex-start; }
.admin-img-preview {
  width: 110px; height: 84px; object-fit: cover; flex: none;
  border-radius: var(--r-sm, 10px); border: 1px solid var(--line); background: var(--pink-wash);
}
.admin-rich-host { margin-top: 4px; }

/* Publish dialog extras */
.admin-changes { margin: 6px 0 12px; padding-left: 18px; color: var(--ink-soft); font-size: 0.9rem; }
.admin-changes li { list-style: disc; margin: 2px 0; }
.admin-meter { height: 8px; background: var(--pink-wash); border-radius: 999px; overflow: hidden; margin: 4px 0 12px; }
.admin-meter span { display: block; height: 100%; background: var(--pink-deep); }
.admin-warn { color: #b00020; font-weight: 600; font-size: 0.9rem; }
.admin-cmds {
  background: #2B2B2B; color: #FFE3EF; padding: 14px; border-radius: var(--r-sm, 10px);
  font-size: 0.82rem; white-space: pre-wrap; word-break: break-word; margin: 8px 0;
}
.admin-help ol { padding-left: 20px; }
.admin-help li { list-style: decimal; margin: 8px 0; }
.admin-help code, .admin-muted code, .admin-modal-card code {
  background: var(--pink-wash); padding: 1px 6px; border-radius: 6px; font-size: 0.85em;
}

/* ---- Rich text editor (editor.js) ------------------------------------ */
.admin-rte-box { margin: 8px 0; }
.admin-rte-actions { display: flex; gap: 8px; margin-top: 8px; }
.rte {
  border: 1px solid var(--line, #F0D6DF);
  border-radius: var(--r-sm, 10px);
  overflow: hidden;
  background: #fff;
}
.rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  background: var(--pink-wash, #FCE7EE);
  border-bottom: 1px solid var(--line, #F0D6DF);
}
.rte-btn {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  min-width: 32px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fff;
  color: var(--pink-deep, #E0006E);
  cursor: pointer;
}
.rte-btn:hover { background: var(--pink-pale, #F4B6CC); color: #fff; }
.rte-btn:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 1px; }
.rte-area {
  min-height: 140px;
  max-height: 50vh;
  overflow: auto;
  padding: 12px 14px;
  line-height: 1.6;
  color: var(--ink, #2B2B2B);
}
.rte-area:focus { outline: none; }
.rte-area p { margin: 0 0 0.7em; }
.rte-area h2 { font-size: 1.2rem; color: var(--pink-deep); margin: 0.4em 0; }
.rte-area h3 { font-size: 1.05rem; color: var(--pink-ink); margin: 0.4em 0; }
.rte-area ul, .rte-area ol { padding-left: 1.4em; margin: 0 0 0.7em; }
.rte-area ul li { list-style: disc; }
.rte-area ol li { list-style: decimal; }
.rte-area a { color: var(--pink-deep); text-decoration: underline; }

/* ---- Toast ----------------------------------------------------------- */
.admin-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translate(-50%, 16px);
  z-index: 1100;
  max-width: 90vw;
  padding: 10px 18px;
  background: var(--ink, #2B2B2B);
  color: #fff;
  border-radius: var(--r-pill, 999px);
  box-shadow: var(--shadow-lg);
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.admin-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 640px) {
  .admin-bar-inner { gap: 8px; padding: 8px 14px; }
  .admin-brand { width: 100%; }
  .admin-btn { padding: 8px 12px; font-size: 0.86rem; }
  .admin-modal-card { padding: 20px; }
  .admin-ctrls { gap: 3px; padding: 3px; }
  .admin-ic { width: 30px; height: 30px; }
  .admin-ic svg { width: 16px; height: 16px; }
  html.admin-active body { padding-bottom: 120px; }
}

/* ---- Respect reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .admin-btn, .admin-ic, .admin-toast, .admin-dot { transition: none; }
}