/* Admin dashboard — layered on top of the site's css/style.css variables */

.admin-shell {
  min-height: 100vh;
  padding-bottom: 80px;
}

.admin-header {
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 40px;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.admin-tabs {
  display: flex;
  gap: 8px;
  flex: 1;
}

.admin-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

#logoutBtn { cursor: pointer; font-family: inherit; background: transparent; }

/* css/style.css hides .btn-client under 480px — that's meant for the public
   site's nav, where it's redundant with the mobile drawer. "View Site" and
   "Log Out" reuse the same pill styling but aren't redundant with anything
   here, so keep them visible (higher specificity wins over that rule). */
.admin-header-actions .btn-client {
  display: inline-block;
}

.admin-main { padding-top: 50px; }

.admin-panel { display: none; }
.admin-panel.active { display: block; }

.admin-section-head { margin-bottom: 36px; }
.admin-section-head h2 { font-size: clamp(28px, 4vw, 42px); margin-top: 10px; }
.admin-section-head .desc { color: var(--text-muted); margin-top: 12px; max-width: 640px; }

.admin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 30px;
  margin-bottom: 28px;
}
.admin-card h3 {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.admin-card .desc { color: var(--text-muted); font-size: 14px; margin: -8px 0 18px; }

.dropzone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  margin-bottom: 20px;
  color: var(--text-muted);
  font-size: 14px;
}
.dropzone strong { color: var(--text); }
.dropzone:hover, .dropzone.dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.admin-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-form-row label {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.admin-form-row select,
.admin-form-row input[type="text"],
.admin-form-row input[type="file"] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 11px 14px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
}
.admin-form-row input[type="text"] { flex: 1; min-width: 180px; }
.admin-form-row input[type="file"] { max-width: 100%; min-width: 0; }

.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.admin-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 8px;
}

.admin-media-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.admin-media-item .thumb {
  aspect-ratio: 4/3;
  background: var(--bg-alt);
  overflow: hidden;
  position: relative;
}
.admin-media-item .thumb img,
.admin-media-item .thumb video {
  width: 100%; height: 100%; object-fit: cover;
}
.admin-media-item .thumb .kind-badge {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}
.admin-media-item .body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.admin-media-item input[type="text"],
.admin-media-item select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 13px;
  font-family: var(--sans);
}
.admin-media-item .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-media-item .featured-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted);
}
.admin-media-item .btn-delete,
.album-item .btn-delete,
.album-media-item .btn-delete {
  background: transparent;
  border: 1px solid var(--border);
  color: #e5484d;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
.admin-media-item .btn-delete:hover,
.album-item .btn-delete:hover,
.album-media-item .btn-delete:hover {
  background: #e5484d;
  color: #fff;
  border-color: #e5484d;
}

.empty-note { color: var(--text-muted); font-size: 14px; padding: 20px 0; }

/* Albums */
.album-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  background: var(--bg);
}
.album-item .info { flex: 1; min-width: 200px; }
.album-item .info .name { font-family: var(--display); font-size: 18px; letter-spacing: 0.5px; }
.album-item .info .meta { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
.album-code {
  font-family: monospace;
  font-size: 16px;
  letter-spacing: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 14px;
  color: var(--accent-ink);
  font-weight: 700;
}
.album-item .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-sm {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-sm:hover { border-color: var(--accent); color: var(--accent-ink); }

/* Album detail overlay */
/* The [hidden] attribute and our own `display: flex` rule below have equal
   CSS specificity, so without this the later rule wins and the element stays
   visible even while `hidden` is true. Same fix applied to .login-shell,
   which this page toggles hidden/shown via JS after checking the session. */
.admin-overlay[hidden],
.login-shell[hidden] {
  display: none;
}

.admin-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 60px 20px;
}
.admin-overlay-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 900px;
  width: 100%;
  padding: 40px;
  position: relative;
}
.admin-overlay-close {
  position: absolute;
  top: 16px; right: 20px;
  background: none;
  border: none;
  font-size: 28px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}
.admin-overlay-close:hover { color: var(--text); }

.album-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.album-media-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.album-media-item .thumb { aspect-ratio: 1; overflow: hidden; }
.album-media-item .thumb img, .album-media-item .thumb video { width:100%; height:100%; object-fit:cover; }
.album-media-item .body { padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.album-media-item .name { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.album-media-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.album-media-actions .btn-sm { padding: 6px 10px; }

.share-link-row {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.share-link-row code { color: var(--accent-ink); font-size: 13px; word-break: break-all; }

/* Portfolio Sets picker grids */
.admin-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.admin-picker-item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid var(--border);
  cursor: pointer;
  background: var(--bg-alt);
}
.admin-picker-item img,
.admin-picker-item video { width: 100%; height: 100%; object-fit: cover; }
.admin-picker-item .picker-check {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.admin-picker-item.selected {
  border-color: var(--accent);
}
.admin-picker-item.selected .picker-check {
  opacity: 1;
  background: var(--accent);
  color: var(--bg);
}

/* Contacts table */
.admin-table-wrap { overflow-x: auto; margin-top: 8px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.admin-table td:nth-child(5) { white-space: normal; min-width: 220px; }
.admin-table th {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .admin-header-inner { padding: 16px 22px; gap: 16px; }
  .admin-tabs { order: 3; flex: 1 1 100%; overflow-x: auto; }
  .admin-main { padding-top: 30px; }
  .wrap { padding: 0 22px; }
}