/* ============================================================
   SHARED STAFF ADMIN UI
   Used by the Media admin (media.html) and the Events admin
   (events.html). Page-specific bits (gallery, lightbox, event
   cards, calendar) live in media-page.css / events.css.
   ============================================================ */

/* ===== Staff hub (admin.html) ===== */
.admin-hub {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}

.hub-login {
  max-width: 420px;
  margin: 0 auto;
}

.hub-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.hub-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  /* <a> rows default to content-box and <button> rows to border-box; force
     border-box so every menu row is exactly the same width. */
  box-sizing: border-box;
  text-align: left;
  border: 1px solid rgba(0,0,0,0.1);
  background: #fafafa;
  padding: 1rem 1.25rem;
  margin: 0.6rem 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font-family: 'Arial Narrow', Arial, sans-serif;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.hub-item:hover {
  border-color: #00b36b;
  background: #f2fbf6;
  box-shadow: 0 3px 14px rgba(0,0,0,0.06);
}

.hub-num {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #00b36b;
  color: #fff;
  font-family: Garamond, Georgia, serif;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hub-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.hub-text strong { font-size: 1.1rem; color: #222; }
.hub-text span { font-size: 0.9rem; color: #777; }

.hub-arrow {
  color: #00b36b;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.hub-rating-form,
.hub-review-form {
  border: 1px solid rgba(0,0,0,0.1);
  background: #fafafa;
  padding: 1rem 1.25rem 1.25rem;
  margin: -0.2rem 0 0.6rem;
}

.hub-review-form .admin-field { margin-bottom: 0.6rem; }

/* Landing-page list rows (thumbnail + shareable link) */
.admin-list-item.lp-row { gap: 0.6rem; align-items: center; }
.lp-row .lp-thumb { width: 56px; height: 40px; object-fit: cover; border-radius: 3px; flex-shrink: 0; background: #eee; }
.lp-row .admin-list-caption a { color: #0a7a4a; word-break: break-all; }

/* Reviews admin: sub-sections + bulk paste importer */
.rev-subsection { border-top: 1px dashed #d8d8d8; margin-top: 1rem; padding-top: 0.8rem; }
.rev-subhead {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #00734d;
  margin: 0 0 0.4rem;
}

/* The Site Map panel widens beyond the 720px hub so its map editor can render
   at the same size as the public page (up to 1000px). Stays centered on the
   page and never wider than the viewport, so no horizontal scrolling. */
#hubSitesForm {
  width: min(1040px, calc(100vw - 2rem));
  margin-left: 50%;
  transform: translateX(-50%);
}

.klb-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.55rem 0;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.95rem;
  color: #444;
}
.klb-toggle input[type="checkbox"] { width: auto; }
.klb-toggle input[type="number"] { padding: 0.2rem 0.4rem; }

/* Site map editor — sized to exactly match the public map (.sitemap-wrap) so
   pin placement is WYSIWYG (same max-width: 1000px, same width:100% image). */
.sm-edit-wrap {
  position: relative;
  max-width: 1000px;
  margin: 0 auto 0.8rem;
  background: #f3f5f6;
  line-height: 0;
}
.sm-edit-wrap img { width: 100%; display: block; cursor: crosshair; }
/* Pins are locked by default — show the normal cursor until "move pins" is on */
.sm-edit-wrap.locked img { cursor: default; }

/* Read-only standard features + pad details shown above the Notes field */
.sm-standard {
  background: #f3f7f5;
  border: 1px solid #dbe6e0;
  border-left: 3px solid #00b36b;
  border-radius: 4px;
  padding: 0.7rem 0.9rem;
  margin: 0 0 0.8rem;
  font-family: 'Arial Narrow', Arial, sans-serif;
}
.sm-standard-head {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2c6b54;
}
.sm-standard-text { margin: 0; font-size: 0.95rem; color: #444; line-height: 1.5; }
.sm-standard-details { margin: 0.2rem 0 0; padding-left: 1.3rem; font-size: 0.95rem; color: #444; line-height: 1.6; }
.sm-edit-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: #999;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
}
.sm-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #00b36b;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  font: bold 0.72rem 'Arial Narrow', Arial, sans-serif;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.sm-pin.active { background: #f39c12; z-index: 3; }
.sm-pin.placing { background: #c0392b; z-index: 4; }
/* Read-only "Type (set automatically)" field */
input[readonly]#smType { background: #eef1f2; color: #555; cursor: not-allowed; }
.hub-review-form h3 {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #333;
}

/* Admin toggle bar */
.admin-toggle-bar {
  text-align: center;
  padding: 1.5rem;
  border-top: 1px solid rgba(0,0,0,0.07);
  margin-top: 2rem;
}

.admin-toggle-btn {
  background: none;
  border: 2px solid rgba(0,0,0,0.15);
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: bold;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  color: #888;
  transition: all 0.2s;
}

.admin-toggle-btn:hover {
  border-color: #00b36b;
  color: #00b36b;
}

/* Admin overlay & panel */
.admin-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 999;
  align-items: center;
  justify-content: center;
}

.admin-overlay.open {
  display: flex;
}

.admin-panel {
  background: white;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 2rem;
  position: relative;
  border-top: 6px solid #00b36b;
}

/* Wider panel where the form sits beside a live preview */
#adminPanel,
#evtAdminPanel {
  max-width: 780px;
}

.admin-panel h2 {
  font-family: Garamond, Georgia, serif;
  font-size: 2rem;
  border-bottom: 3px double black;
  margin: 0 0 0.5rem 0;
}

.admin-panel h3 {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 1.5rem 0 0.75rem;
  color: #333;
}

.admin-panel p {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 1rem;
  color: #666;
  margin: 0 0 1rem;
}

.admin-close {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #888;
  transition: color 0.2s;
}

.admin-close:hover { color: #00b36b; }

/* Confirmation popup (reuses the .admin-overlay / .admin-panel look of items 1 & 2) */
.confirm-panel { max-width: 440px; text-align: center; }
.confirm-panel h2 { border-bottom: 3px double #00b36b; }
.confirm-actions { display: flex; gap: 0.6rem; justify-content: center; margin-top: 1.3rem; }

.admin-mgmt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.admin-mgmt-header .admin-close {
  position: static;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #888;
}

.admin-section {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 0.5rem;
}

/* ---- Form ---- */
.admin-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

.admin-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.admin-field label {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #555;
}

.admin-field input,
.admin-field select,
.admin-field textarea {
  border: 1px solid rgba(0,0,0,0.2);
  padding: 0.5rem 0.75rem;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
}

.admin-field textarea {
  resize: vertical;
}

.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
  border-color: #00b36b;
}

.admin-field input[type="file"] {
  background: #fafafa;
  font-size: 0.9rem;
  cursor: pointer;
}

.field-hint {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.78rem;
  color: #999;
}

/* ---- Category chip picker ---- */
.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 2px solid rgba(0,0,0,0.15);
  background: white;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  color: #555;
  transition: all 0.15s;
}

.cat-chip:hover {
  border-color: var(--chip-color);
  color: var(--chip-color);
}

.cat-chip.active {
  background: var(--chip-color);
  border-color: var(--chip-color);
  color: white;
}

.cat-chip-icon {
  font-size: 0.95rem;
  line-height: 1;
}

/* ---- Live preview pane ---- */
.evt-preview-pane {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.evt-preview-label {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #555;
}

.evt-preview {
  background: #f7f7f7;
  border: 1px dashed rgba(0,0,0,0.18);
  padding: 0.85rem;
}

.evt-preview-hint {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.8rem;
  color: #999;
  margin: 0;
}

/* ---- Action buttons ---- */
.admin-form-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1rem;
}

.admin-submit {
  background: #00b36b;
  color: white;
  border: none;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.65rem 1.5rem;
  cursor: pointer;
  transition: background 0.2s;
  align-self: flex-start;
  margin-top: 0.25rem;
}

.admin-submit:hover { background: #009959; }

.admin-cancel {
  background: none;
  border: 2px solid rgba(0,0,0,0.18);
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.55rem 1.3rem;
  cursor: pointer;
  color: #777;
  transition: all 0.2s;
}

.admin-cancel:hover {
  border-color: #c0392b;
  color: #c0392b;
}

.admin-error {
  color: #c0392b;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.9rem;
  margin: 0;
  min-height: 1.2rem;
}

.admin-success {
  color: #00b36b;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.9rem;
  margin: 0;
  min-height: 1.2rem;
}

/* ---- Manage list ---- */
.admin-item-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.admin-list-group-label {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #00b36b;
  margin: 0.85rem 0 0.35rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.admin-list-group-label:first-child {
  margin-top: 0;
}

.admin-list-group-label.past-label {
  color: #999;
}

.admin-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 0.5rem;
  background: #fafafa;
}

.admin-list-item.past {
  opacity: 0.6;
}

/* Thumbnail (media list) */
.admin-list-thumb {
  width: 56px;
  height: 42px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  position: relative;
}

.admin-video-badge {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background: #00b36b;
  color: white;
  font-size: 0.55rem;
  font-weight: bold;
  padding: 1px 3px;
  letter-spacing: 0.05em;
}

/* Date badge (events list) */
.admin-evt-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 36px;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.7rem;
  color: #00b36b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-evt-date strong {
  font-family: Garamond, Georgia, serif;
  font-size: 1.4rem;
  color: #222;
  line-height: 1;
}

.admin-list-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.admin-list-cat {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #00b36b;
}

.admin-list-caption {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.9rem;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-item-actions {
  display: flex;
  gap: 0.15rem;
  flex-shrink: 0;
}

.admin-edit-btn {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: #bbb;
  transition: color 0.2s;
}

.admin-edit-btn:hover {
  color: #00b36b;
}

.admin-delete-btn {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: #ccc;
  transition: color 0.2s;
  flex-shrink: 0;
}

.admin-delete-btn:hover { color: #c0392b; }

/* ---- Responsive ---- */
@media (min-width: 720px) {
  .admin-form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 700px) {
  .admin-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .admin-panel {
    padding: 1.5rem 1rem;
    max-height: 92vh;
  }
}