/* ============================================
   Admin Controls — only visible to admins
   ============================================ */

/* Hide admin elements by default */
.admin-edit-btn,
.admin-add-controls {
  display: none;
}

/* ============================================
   Header Admin Controls (config link)
   ============================================ */
.config-link {
  font-size: var(--text-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.5;
  text-decoration: none;
  color: var(--fg);
  transition: opacity 0.2s;
  white-space: nowrap;
}
.config-link:hover { opacity: 1; }

/* preview-toggle styles moved to style.css (header component, not admin-only) */
@media (max-width: 768px) {
  .header-user-row { gap: 6px; }
  .config-link { font-size: 10px; }
}

/* Admin config page — always show admin controls regardless of preview mode */
.admin-config-page .admin-edit-btn,
.admin-config-page .admin-add-controls {
  display: block !important;
  visibility: visible !important;
}

/* ============================================
   Universal Admin Button
   ============================================ */
.btn-sm,
.btn-remove-item,
.btn-move-up,
.btn-move-down,
body.is-admin .admin-edit-btn {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--fg);
  color: var(--fg);

  font-size: var(--text-meta);
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.2vw 0.6vw;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}

.btn-move-up:hover,
.btn-move-down:hover {
  background: var(--fg);
  color: var(--bg);
}

body.is-admin .admin-edit-btn {
  margin-top: 0.5vw;
  opacity: 0.5;
  transition: opacity 0.2s;
}

body.is-admin .admin-edit-btn:hover {
  opacity: 1;
}

/* Red variants — color only, same size */
.btn-remove-item,
.admin-page-delete,
.admin-delete-btn {
  background: transparent !important;
  border-color: #ff4444 !important;
  color: #ff4444 !important;
}

/* ============================================
   Admin Add Controls
   ============================================ */
body.is-admin .admin-add-controls {
  display: block;
  margin-top: 0.3vw;
  padding-top: 0.3vw;
  border-top: none;
  opacity: 0.6;
}

body.is-admin .admin-add-controls:hover {
  opacity: 1;
}

.admin-add-controls h3 {
  font-size: var(--text-nav);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1vw;
}

.admin-add-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5vw;
}

/* ============================================
   Editor Overlay
   ============================================ */

.admin-editor-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-editor {
  background: var(--bg);
  border: 2px solid var(--fg);
  width: 60vw;
  max-height: 80vh;
  overflow-y: auto;
  padding: 2vw;
}

.admin-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5vw;
}

.admin-editor-header h3 {
  font-size: var(--text-body);
  font-weight: 700;
  text-transform: uppercase;
}

.admin-editor-close {
  background: none;
  border: none;
  color: var(--fg);
  font-size: var(--text-body);
  cursor: pointer;
}

.admin-editor label {
  display: block;
  font-size: var(--text-meta);
  font-weight: 700;
  text-transform: uppercase;
  margin: 1.5vw 0 0.3vw;
}

.admin-editor input[type="text"],
.admin-editor textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--fg);
  color: var(--fg);

  font-size: var(--text-ui);
  padding: 0.5vw;
  outline: none;
}

.admin-editor textarea {
  resize: vertical;
}

.admin-editor select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--fg);
  color: var(--fg);

  font-size: var(--text-ui);
  padding: 0.5vw;
  outline: none;
}

/* Image picker */
.image-picker {
  display: flex;
  gap: 0.5vw;
  margin: 0.5vw 0;
  flex-wrap: wrap;
}

.image-picker-thumb {
  width: 8vw;
  height: 5vw;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.5;
  transition: opacity 0.2s, border-color 0.2s;
}

.image-picker-thumb:hover {
  opacity: 0.8;
}

.image-picker-thumb.selected {
  border-color: var(--fg);
  opacity: 1;
}

.image-picker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview {
  margin: 0.5vw 0;
  max-height: 12vw;
  overflow: hidden;
}

.image-preview img {
  max-width: 100%;
  max-height: 12vw;
  object-fit: contain;
}

.admin-editor-actions {
  display: flex;
  gap: 1vw;
  margin-top: 1.5vw;
}

/* FAQ / Testimonial edit items */
.faq-edit-item,
.testimonial-edit-item {
  border: 1px solid var(--fg);
  padding: 1vw;
  margin-bottom: 0.5vw;
  position: relative;
}

.btn-remove-item {
  margin-top: 0.5vw;
}

/* Page Manager */
.admin-page-list {
  margin: 1.5vw 0;
}

.admin-page-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--fg);
  padding: 0.8vw 0;
}

.admin-page-info strong {
  font-size: var(--text-card);
}

.admin-page-meta {
  display: block;
  font-size: var(--text-meta);
  opacity: 0.5;
  margin-top: 0.2vw;
}

.admin-page-actions {
  display: flex;
  gap: 0.5vw;
}

/* FAQ editor header with reorder controls */
.faq-edit-header {
  display: flex;
  align-items: center;
  gap: 0.4vw;
  margin-bottom: 0.5vw;
}

.faq-edit-header .btn-remove-item {
  margin-left: auto;
}

.faq-num {
  font-size: var(--text-ui);
  font-weight: 700;
  min-width: 2vw;
}

/* Upload row */
.image-upload-row {
  display: flex;
  align-items: center;
  margin: 0.5vw 0;
}

/* Image rows in editor */
.edit-image-row {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  margin-bottom: 0.5vw;
}

.edit-image-row .img-src {
  flex: 1;
}

.img-thumb-preview {
  width: 4vw;
  height: 2.5vw;
  object-fit: cover;
  border: 1px solid var(--fg);
}

/* ============================================
   Tablet admin
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .admin-editor {
    width: 75vw;
  }

  .admin-editor label,
  .admin-editor input,
  .admin-editor select,
  .admin-editor textarea {
    font-size: 1.4vw;
  }
}

/* ============================================
   Mobile admin
   ============================================ */
@media (max-width: 768px) {
  .admin-editor {
    width: 90vw;
    padding: 16px;
  }

  .admin-editor-header h3 {
    font-size: 24px;
  }

  .admin-editor {
    position: relative;
    margin-top: 30px;
  }

  .admin-editor-close {
    position: absolute;
    top: -14px;
    right: -6px;
    font-size: 32px;
    padding: 4px 8px;
    z-index: 1;
  }

  .admin-editor label {
    font-size: 16px;
    margin: 20px 0 6px;
  }

  .admin-editor input[type="text"],
  .admin-editor textarea {
    font-size: 18px;
    padding: 10px;
  }

  .admin-editor select {
    font-size: 18px;
    padding: 10px;
  }

  .admin-editor-actions {
    gap: 10px;
    margin-top: 16px;
  }

  /* Universal mobile admin button size */
  .btn-sm,
  .btn-remove-item,
  .btn-move-up,
  .btn-move-down,
  .admin-editor .btn,
  body.is-admin .admin-edit-btn {
    font-size: 13px;
    padding: 6px 10px;
  }

  body.is-admin .admin-edit-btn {
    margin-top: 24px;
  }

  .admin-add-controls h3 {
    font-size: 20px;
  }

  /* Page Manager */
  .admin-page-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 0;
  }

  .admin-page-info strong {
    font-size: 18px;
  }

  .admin-page-meta {
    font-size: 13px;
  }

  .admin-page-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .admin-add-buttons {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* FAQ/Testimonial edit items */
  .faq-edit-item,
  .testimonial-edit-item {
    padding: 12px;
  }

  .faq-edit-header {
    flex-wrap: wrap;
    gap: 6px;
  }

  .faq-num {
    font-size: 16px;
  }

  /* Image thumbnails grid: 4 per row */
  #edit-images-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .edit-image-row {
    flex-direction: column;
    gap: 4px;
  }

  .edit-image-row .img-src {
    display: none;
  }

  .img-thumb-preview {
    width: 100%;
    height: auto;
  }

  /* Remove + Upload on same line */
  .image-upload-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
  }

  /* ============================================
     Site Config Admin — Mobile Overrides
     ============================================ */

  /* Stats grid: 2 columns on mobile */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .stats-grid .box-card {
    padding: 10px !important;
  }

  /* Stats expanded panel */
  .stats-expanded {
    max-height: 50vh !important;
    padding: 12px !important;
  }

  /* Activity items in config */
  .activity-item {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ============================================
   Admin Config UI Utility Classes
   Replaces repeated inline style.cssText in JS
   ============================================ */

/* Flex row with centered items and gap */
.cfg-row {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.8vw, 16px);
}

/* Grid row for form fields */
.cfg-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: clamp(8px, 0.8vw, 16px);
  margin-bottom: clamp(6px, 0.5vw, 12px);
  align-items: center;
}

/* Section label (h2-level headings in config) */
.cfg-section-label {
  font-size: var(--text-xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.06em;
  line-height: 0.83;
  margin-top: clamp(32px, 4vw, 80px);
  margin-bottom: clamp(10px, 1vw, 20px);
}

/* Field group spacing */
.cfg-field-group {
  margin-bottom: clamp(12px, 1.5vw, 30px);
}

/* Meta text (counts, hints, slugs) */
.cfg-meta {
  font-size: var(--text-meta);
  opacity: 0.6;
}

/* Card with border */
.cfg-card {
  border: 1px solid var(--fg);
  padding: clamp(6px, 0.8vw, 16px);
}

/* Auto-fill grid for cards/swatches */
.cfg-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 18vw, 350px), 1fr));
  gap: clamp(12px, 1.5vw, 30px);
}

/* Divider line */
.cfg-divider {
  border: none;
  border-top: 2px solid var(--fg);
  margin: clamp(10px, 1vw, 20px) 0;
}

/* Delete button color */
.cfg-danger {
  color: #ff4444;
}

/* Flex wrap row with gap */
.cfg-wrap-row {
  display: flex;
  gap: clamp(6px, 0.8vw, 16px);
  flex-wrap: wrap;
  align-items: center;
}