/* ═══════════════════════════════════════════════════════════════════════════
   Sapphire Admin — Theme Manager Redesign (Path A)

   Re-skins the admin overlay to match the Theme Manager visual language
   WITHOUT touching any markup, IDs, classes, save buttons, or autosave hooks.
   100% reversible: remove the <link> tag in index.html and the original
   admin styles take over.

   Scope: every selector is anchored under #admin-overlay so the public site,
   masterplan, agent portal etc. are untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

#admin-overlay {
  /* ── Design tokens ──────────────────────────────────────────────────── */
  --tm-ink:           #1c1f24;
  --tm-ink-soft:      #2a2e36;
  --tm-muted:         #6b6f78;
  --tm-muted-2:       #8a8e98;

  --tm-bg:            #faf8f3;     /* page bg (warm cream) */
  --tm-bg-sidebar:    #f5f1e8;     /* sidebar a touch deeper */
  --tm-bg-card:       #fdfcf9;     /* cards */
  --tm-bg-input:      #ffffff;     /* form inputs */
  --tm-bg-divider:    #f0eada;     /* hairline section dividers */

  --tm-line:          #e8e3d8;
  --tm-line-strong:   #d6cfbe;

  --tm-primary:       #1a3a52;     /* deep ink-blue */
  --tm-primary-fg:    #ffffff;
  --tm-accent:        #c4a97a;     /* sapphire gold */
  --tm-accent-soft:   rgba(196,169,122,.14);
  --tm-success:       #22c55e;
  --tm-danger:        #c0392b;

  --tm-r-sm:          6px;
  --tm-r-md:          10px;
  --tm-r-lg:          14px;
  --tm-r-xl:          18px;

  --tm-sh-sm:         0 1px 2px rgba(28,31,36,.04);
  --tm-sh-md:         0 6px 24px rgba(28,31,36,.06);
  --tm-sh-lg:         0 18px 48px rgba(28,31,36,.10);

  --tm-ff-h:          'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --tm-ff-b:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Re-skin the overlay container */
  background: var(--tm-bg) !important;
  color: var(--tm-ink);
  font-family: var(--tm-ff-b);
}

/* ── Top header ─────────────────────────────────────────────────────── */
#admin-overlay .adm-hdr {
  background: #fdfcf9 !important;
  border-bottom: 1px solid var(--tm-line);
  padding: 14px 28px !important;
  box-shadow: var(--tm-sh-sm);
  min-height: 64px;
}
#admin-overlay .adm-hdr-left,
#admin-overlay .adm-hdr-right {
  display: flex; align-items: center; gap: 14px;
}
#admin-overlay .adm-hdr-badge {
  font-family: var(--tm-ff-b);
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tm-accent);
  background: var(--tm-accent-soft);
  padding: 5px 11px; border-radius: 100px;
  border: 1px solid rgba(196,169,122,.25);
}
#admin-overlay .adm-user {
  font-size: 13px; font-weight: 500; color: var(--tm-ink-soft);
}
#admin-overlay .adm-save {
  background: var(--tm-bg-card) !important;
  color: var(--tm-ink) !important;
  border: 1px solid var(--tm-line) !important;
  border-radius: var(--tm-r-sm) !important;
  font-size: 11.5px !important; font-weight: 500 !important;
  padding: 8px 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: all .12s ease;
}
#admin-overlay .adm-save:hover {
  border-color: var(--tm-line-strong) !important;
  background: #fff !important;
}
#admin-overlay .adm-close {
  width: 32px; height: 32px;
  background: transparent !important; border: 1px solid var(--tm-line) !important;
  color: var(--tm-muted) !important;
  border-radius: var(--tm-r-sm) !important;
  font-size: 14px !important;
}
#admin-overlay .adm-close:hover {
  border-color: var(--tm-danger) !important; color: var(--tm-danger) !important;
}

/* Auto-save pill */
#admin-overlay .adm-autosave-pill {
  background: rgba(34,197,94,.10) !important;
  color: #1f7a3d !important;
  border: 1px solid rgba(34,197,94,.25) !important;
  border-radius: 100px !important;
  padding: 5px 12px !important;
  font-size: 11px !important; font-weight: 500 !important;
}

/* ── Body shell ─────────────────────────────────────────────────────── */
#admin-overlay .adm-body {
  background: var(--tm-bg) !important;
}

/* ── Sidebar nav ───────────────────────────────────────────────────── */
#admin-overlay .adm-nav {
  background: var(--tm-bg-sidebar) !important;
  border-right: 1px solid var(--tm-line) !important;
  padding: 22px 14px !important;
  width: 248px !important;
  min-width: 248px !important;
}
#admin-overlay .adm-nav-group {
  font-family: var(--tm-ff-b) !important;
  font-size: 10.5px !important; font-weight: 600 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important;
  color: var(--tm-muted-2) !important;
  padding: 16px 12px 8px !important;
  margin-top: 4px !important;
  border-top: none !important;
}
#admin-overlay .adm-nav-group:first-child { margin-top: 0; padding-top: 0; }

#admin-overlay .adm-nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px !important;
  margin: 2px 0 !important;
  border-radius: var(--tm-r-sm) !important;
  font-size: 13.5px !important; font-weight: 500 !important;
  color: var(--tm-ink-soft) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  letter-spacing: 0 !important; text-transform: none !important;
  cursor: pointer;
  transition: all .12s ease;
}
#admin-overlay .adm-nav-item:hover {
  background: rgba(255,255,255,.55) !important;
  color: var(--tm-ink) !important;
}
#admin-overlay .adm-nav-item.active {
  background: var(--tm-primary) !important;
  color: var(--tm-primary-fg) !important;
  border-color: var(--tm-primary) !important;
  font-weight: 500 !important;
  box-shadow: var(--tm-sh-sm);
}
#admin-overlay .adm-nav-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px !important;
  opacity: .85;
}
#admin-overlay .adm-nav-item.active .adm-nav-icon { opacity: 1; }

/* ── Main content column ───────────────────────────────────────────── */
#admin-overlay .adm-content {
  background: var(--tm-bg) !important;
  padding: 36px 44px 80px !important;
}

#admin-overlay .adm-sec {
  /* the wrapper for each section page — keep transparent so cards float */
  max-width: 1080px;
  margin: 0 auto;
}

/* ── Card ───────────────────────────────────────────────────────────── */
#admin-overlay .adm-card {
  background: var(--tm-bg-card) !important;
  border: 1px solid var(--tm-line) !important;
  border-radius: var(--tm-r-lg) !important;
  box-shadow: var(--tm-sh-md);
  margin-bottom: 24px !important;
  overflow: hidden;
}
#admin-overlay .adm-card-hdr {
  padding: 22px 28px 16px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--tm-line) !important;
  display: flex !important; align-items: flex-start !important;
  justify-content: space-between !important; gap: 18px !important;
}
#admin-overlay .adm-card-title {
  font-family: var(--tm-ff-h) !important;
  font-size: 22px !important; font-weight: 500 !important;
  letter-spacing: -.01em !important;
  color: var(--tm-ink) !important;
  margin: 0 0 4px !important;
  line-height: 1.2 !important;
}
#admin-overlay .adm-card-sub {
  font-family: var(--tm-ff-b) !important;
  font-size: 13.5px !important; font-weight: 400 !important;
  color: var(--tm-muted) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
}
#admin-overlay .adm-card-body {
  padding: 24px 28px 8px !important;
}

/* ── Section divider inside card ───────────────────────────────────── */
#admin-overlay .adm-divider {
  font-family: var(--tm-ff-b) !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important;
  color: var(--tm-muted) !important;
  margin: 24px 0 14px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid var(--tm-bg-divider) !important;
  background: transparent !important;
}
#admin-overlay .adm-divider:first-child { margin-top: 4px; }

/* ── Form grid + fields ─────────────────────────────────────────────── */
#admin-overlay .adm-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px 20px !important;
  margin-bottom: 16px !important;
}
#admin-overlay .afield {
  display: flex !important; flex-direction: column !important;
  gap: 6px !important;
}
#admin-overlay .afield.full { grid-column: 1 / -1; }
#admin-overlay .afield label {
  font-family: var(--tm-ff-b) !important;
  font-size: 12px !important; font-weight: 500 !important;
  color: var(--tm-ink-soft) !important;
  letter-spacing: 0 !important; text-transform: none !important;
  margin-bottom: 0 !important;
}
#admin-overlay .afield input[type="text"],
#admin-overlay .afield input[type="email"],
#admin-overlay .afield input[type="number"],
#admin-overlay .afield input[type="url"],
#admin-overlay .afield input[type="tel"],
#admin-overlay .afield input[type="password"],
#admin-overlay .afield input:not([type]),
#admin-overlay .afield select,
#admin-overlay .afield textarea,
#admin-overlay .adm-grid input[type="text"],
#admin-overlay .adm-grid input[type="email"],
#admin-overlay .adm-grid input[type="number"],
#admin-overlay .adm-grid input[type="url"],
#admin-overlay .adm-grid input:not([type]),
#admin-overlay .adm-grid select,
#admin-overlay .adm-grid textarea {
  background: var(--tm-bg-input) !important;
  border: 1px solid var(--tm-line) !important;
  border-radius: var(--tm-r-sm) !important;
  padding: 10px 12px !important;
  font-family: var(--tm-ff-b) !important;
  font-size: 13.5px !important;
  color: var(--tm-ink) !important;
  transition: border-color .12s ease, box-shadow .12s ease;
  letter-spacing: 0 !important;
}
#admin-overlay .afield input:focus,
#admin-overlay .afield select:focus,
#admin-overlay .afield textarea:focus,
#admin-overlay .adm-grid input:focus,
#admin-overlay .adm-grid select:focus,
#admin-overlay .adm-grid textarea:focus {
  outline: none !important;
  border-color: var(--tm-accent) !important;
  box-shadow: 0 0 0 3px var(--tm-accent-soft) !important;
}
#admin-overlay .afield input[type="color"] {
  width: 44px !important; height: 32px !important;
  padding: 2px !important;
  cursor: pointer;
}

/* ── Toggle rows ───────────────────────────────────────────────────── */
#admin-overlay .toggle-row {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 16px !important;
  background: var(--tm-bg-card) !important;
  border: 1px solid var(--tm-line) !important;
  border-radius: var(--tm-r-sm) !important;
  margin-bottom: 8px !important;
}
#admin-overlay .tgl-label {
  font-family: var(--tm-ff-b) !important;
  font-size: 14px !important; font-weight: 500 !important;
  color: var(--tm-ink) !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
#admin-overlay .tgl-sub {
  font-size: 12px !important; color: var(--tm-muted) !important;
  margin-top: 2px;
}
#admin-overlay .tgl-switch {
  position: relative; display: inline-block;
  width: 40px; height: 22px;
  flex-shrink: 0;
}
#admin-overlay .tgl-switch input { opacity: 0; width: 0; height: 0; }
#admin-overlay .tgl-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #d6cfbe !important;
  border-radius: 22px !important;
  transition: background .15s ease;
}
#admin-overlay .tgl-slider::before {
  content: ""; position: absolute;
  height: 16px; width: 16px; left: 3px; bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
#admin-overlay .tgl-switch input:checked + .tgl-slider {
  background: var(--tm-primary) !important;
}
#admin-overlay .tgl-switch input:checked + .tgl-slider::before {
  transform: translateX(18px);
}

/* ── Save bar at the bottom of each section ───────────────────────── */
#admin-overlay .sec-save-bar {
  display: flex !important; align-items: center !important;
  gap: 14px !important;
  padding: 18px 0 4px !important;
  margin: 24px -28px -8px !important;
  padding-left: 28px !important; padding-right: 28px !important;
  border-top: 1px solid var(--tm-bg-divider) !important;
  background: linear-gradient(180deg, rgba(196,169,122,.04), transparent) !important;
}
#admin-overlay .sec-save-btn {
  background: var(--tm-primary) !important;
  color: var(--tm-primary-fg) !important;
  border: none !important;
  border-radius: var(--tm-r-sm) !important;
  padding: 11px 24px !important;
  font-family: var(--tm-ff-b) !important;
  font-size: 13.5px !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(13,32,74,.3), 0 4px 10px rgba(26,58,82,.18);
  transition: transform .08s ease, box-shadow .12s ease, background .15s ease;
}
#admin-overlay .sec-save-btn:hover {
  background: #0d2436 !important;
  box-shadow: 0 2px 0 rgba(13,32,74,.3), 0 6px 14px rgba(26,58,82,.22);
}
#admin-overlay .sec-save-btn:active { transform: translateY(1px); }
#admin-overlay .sec-saved-lbl {
  font-size: 12.5px !important;
  color: var(--tm-success) !important;
  font-weight: 500 !important;
}

/* ── Helpers — checkboxes, file inputs, range sliders ─────────────── */
#admin-overlay input[type="checkbox"]:not(.tgl-switch input) {
  accent-color: var(--tm-primary);
  width: 16px; height: 16px;
  cursor: pointer;
}
#admin-overlay input[type="range"] {
  accent-color: var(--tm-accent);
  height: 4px;
}

/* ── Special: Hero section gets a subtle "page intro" ──────────────── */
#admin-overlay #asec-hero > .adm-card:first-of-type > .adm-card-hdr {
  padding-top: 32px !important;
  padding-bottom: 22px !important;
  background: linear-gradient(135deg, rgba(196,169,122,.05), transparent) !important;
}

/* Cleaner inline-style buttons baked into the HTML — soften them */
#admin-overlay button[onclick]:not(.sec-save-btn):not(.adm-save):not(.adm-close):not(.adm-nav-item) {
  font-family: var(--tm-ff-b);
}

/* Reduce visual clutter for inline "add row" buttons */
#admin-overlay .adm-card-body button[onclick*="Add"],
#admin-overlay .adm-card-body button[onclick*="Insert"],
#admin-overlay .adm-card-body button[onclick*="Apply"] {
  border-radius: var(--tm-r-sm) !important;
}

/* ── Scrollbar style match ─────────────────────────────────────────── */
#admin-overlay .adm-nav::-webkit-scrollbar,
#admin-overlay .adm-content::-webkit-scrollbar { width: 10px; height: 10px; }
#admin-overlay .adm-nav::-webkit-scrollbar-thumb,
#admin-overlay .adm-content::-webkit-scrollbar-thumb {
  background: rgba(28,31,36,.12);
  border-radius: 10px;
  border: 2px solid var(--tm-bg);
}
#admin-overlay .adm-nav::-webkit-scrollbar-thumb:hover,
#admin-overlay .adm-content::-webkit-scrollbar-thumb:hover {
  background: rgba(28,31,36,.22);
}

/* ── Responsive: collapse sidebar only on tiny phones ──────────────── */
@media (max-width: 640px) {
  #admin-overlay .adm-nav {
    width: 60px !important; min-width: 60px !important;
    padding: 16px 8px !important;
  }
  #admin-overlay .adm-nav-group { display: none; }
  #admin-overlay .adm-nav-item {
    justify-content: center;
    padding: 11px 6px !important;
    font-size: 0 !important;
  }
  #admin-overlay .adm-nav-icon { font-size: 16px !important; }
  #admin-overlay .adm-content { padding: 24px 18px 80px !important; }
}