/* ==========================================================================
   Pulse Admin (portfolio demo) — dashboard chrome
   Product UI: clarity and density over flourish. Reuses the site's brand
   tokens (fonts, --accent) from css/styles.css but its own layout rules.
   No login screen and no publish bar here — see js/session-store.js for why.
   ========================================================================== */

.admin-body { background: var(--paper-raised); min-height: 100vh; }

.demo-banner {
  max-width: 56rem; margin: 1.25rem auto 0; padding: 0 1.5rem 0;
  font-size: 0.88rem; color: var(--muted); line-height: 1.6;
}
.demo-banner a { color: var(--accent); }

.admin-form { display: flex; flex-direction: column; gap: 1.1rem; }
.admin-field { display: flex; flex-direction: column; gap: 0.4rem; }
.admin-field label { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; }
.admin-field input[type="text"],
.admin-field input[type="email"],
.admin-field input[type="password"],
.admin-field input[type="url"],
.admin-field textarea {
  padding: 0.7rem 0.85rem; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--paper);
  color: var(--ink); font-family: var(--font-body); font-size: 0.95rem;
}
.admin-field textarea { min-height: 5.5rem; resize: vertical; }
.admin-field input:focus, .admin-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- Dashboard shell ---- */
.admin-topbar {
  position: sticky; top: 0; z-index: 20;
  background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;
  padding: 1rem 1.5rem;
}
.admin-topbar__actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/* Form column + sticky live preview column */
.editor-layout {
  max-width: 84rem; margin: 1.5rem auto 4rem; padding-inline: 1.5rem;
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
}
@media (min-width: 1000px) {
  .editor-layout { grid-template-columns: 1fr 26rem; align-items: start; }
}

.admin-shell { display: flex; flex-direction: column; gap: 1.5rem; }

.admin-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; }
.admin-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.admin-panel__head h2 { font-size: 1.05rem; }

.toggle-switch { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.85rem; font-weight: 600; min-height: 44px; padding-block: 0.5rem; }
.toggle-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-switch__track {
  width: 40px; height: 22px; border-radius: 999px; background: var(--line-strong);
  position: relative; transition: background 0.2s var(--ease); flex-shrink: 0;
}
.toggle-switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform 0.2s var(--ease);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-switch__track { background: var(--accent); }
.toggle-switch input:checked + .toggle-switch__track::after { transform: translateX(18px); }
.toggle-switch input:focus-visible + .toggle-switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }

.service-editor { display: flex; flex-direction: column; gap: 1.25rem; }
.service-editor__item { border: 1px solid var(--line); border-radius: 8px; padding: 1rem; }
.service-editor__item .admin-field + .admin-field { margin-top: 0.85rem; }

.image-field { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.image-field__preview {
  width: 90px; height: 90px; border-radius: 8px; object-fit: cover;
  background: var(--paper-raised); border: 1px solid var(--line);
}
.image-field__controls { display: flex; flex-direction: column; gap: 0.5rem; }
.image-field input[type="file"] { font-size: 0.82rem; }
.image-field__hint { font-size: 0.78rem; color: var(--muted); }

.color-picker-field { display: flex; align-items: center; gap: 0.85rem; }
.color-picker-field input[type="color"] {
  width: 52px; height: 52px; padding: 0; border: 1px solid var(--line-strong); border-radius: 10px;
  cursor: pointer; background: none;
}
.color-picker-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.color-picker-field input[type="color"]::-webkit-color-swatch { border-radius: 6px; border: none; }
.color-picker-field__hex {
  width: 8rem; padding: 0.7rem 0.85rem; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--paper);
  color: var(--ink); font-family: var(--font-mono); font-size: 0.9rem; text-transform: uppercase;
}
.color-picker-field__hex:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.admin-hint { font-size: 0.82rem; color: var(--error); margin-top: 0.85rem; }

.btn-danger-ghost { background: transparent; color: #C1573A; border: 1px solid var(--line-strong); }
.btn-danger-ghost:hover { border-color: #C1573A; }

/* ---- Live preview pane ---- */
.preview-pane {
  position: static;
  border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden;
  background: var(--paper-raised);
}
@media (min-width: 1000px) { .preview-pane { position: sticky; top: 1.5rem; } }
.preview-pane__bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.85rem; background: #fff; border-bottom: 1px solid var(--line);
}
.preview-pane__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.preview-pane__label {
  margin-left: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.preview-pane iframe {
  display: block; width: 100%; height: 32rem; border: 0;
}
@media (min-width: 1000px) { .preview-pane iframe { height: 42rem; } }

@media (max-width: 600px) {
  .admin-topbar { flex-direction: column; align-items: stretch; }
}