/* ============================================
   ÄKTA — Admin Mode Stylesheet
   ============================================ */

/* Admin Bar */
#admin-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1100;
  background: #111;
  display: flex; align-items: center;
  gap: 0; height: 48px;
  transform: translateY(-100%);
  transition: transform 0.4s ease;
}

#admin-bar.visible { transform: translateY(0); }

#admin-bar .ab-logo {
  padding: 0 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem; letter-spacing: 0.04em;
  font-weight: 700;
  color: #fff; border-right: 1px solid rgba(255,255,255,0.1);
}

#admin-bar .ab-actions {
  display: flex; align-items: center; gap: 0;
  margin-left: auto;
}

#admin-bar .ab-btn {
  padding: 0 20px; height: 48px;
  display: flex; align-items: center; gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem; letter-spacing: 0.18em;
  font-weight: 500;
  text-transform: uppercase; color: rgba(255,255,255,0.65);
  border-left: 1px solid rgba(255,255,255,0.1);
  transition: color 0.3s, background 0.3s;
  cursor: pointer;
}

#admin-bar .ab-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
#admin-bar .ab-btn.primary { color: rgba(255,255,255,0.9); }
#admin-bar .ab-btn.primary:hover { color: #fff; }
#admin-bar .ab-btn.danger { color: #e74c3c; }
#admin-bar .ab-btn.danger:hover { background: #e74c3c; color: #fff; }

.ab-unsaved {
  width: 6px; height: 6px; background: #f39c12;
  border-radius: 50%; display: none;
}
.ab-unsaved.show { display: block; }

/* Admin mode body padding */
body.admin-mode { padding-top: 48px; }
body.admin-mode nav { top: 48px; }
body.admin-mode nav.scrolled { height: 76px; }

/* Editable elements */
body.admin-mode [data-editable]:hover {
  outline: 2px dashed rgba(0,0,0,0.25);
  outline-offset: 3px;
  cursor: text;
}

body.admin-mode [data-editable].editing {
  outline: 2px solid rgba(0,0,0,0.6);
  background: rgba(0,0,0,0.03);
}

/* Image swap button */
.swap-image-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.75);
  color: #fff; border: 1px solid rgba(255,255,255,0.4);
  padding: 10px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem; letter-spacing: 0.18em;
  font-weight: 500;
  text-transform: uppercase;
  opacity: 0; transition: opacity 0.3s;
  z-index: 10; white-space: nowrap;
  cursor: pointer;
}

body.admin-mode .img-placeholder:hover .swap-image-btn,
body.admin-mode .mosaic-tile:hover .swap-image-btn,
body.admin-mode .artwork-card:hover .swap-image-btn,
body.admin-mode .artist-card:hover .swap-image-btn,
body.admin-mode .story-card:hover .swap-image-btn,
body.admin-mode .work-card:hover .swap-image-btn { opacity: 1; }

/* In admin mode: show a faint edit ring on all image placeholders
   so the user knows every placeholder is clickable */
body.admin-mode .img-placeholder {
  outline: 1px dashed rgba(0,0,0,0.15);
  outline-offset: -1px;
}
body.admin-mode .img-placeholder:hover {
  outline-color: rgba(0,0,0,0.4);
}

/* Keep mosaic overlay from blocking swap button clicks */
body.admin-mode .mosaic-tile .mosaic-overlay {
  pointer-events: none;
}

/* Swap btn always faintly visible in admin on mosaic tiles
   (so user can find them in small bottom tiles) */
body.admin-mode .mosaic-tile .swap-image-btn {
  opacity: 0.35;
  font-size: 0.55rem;
  padding: 7px 14px;
}
body.admin-mode .mosaic-tile:hover .swap-image-btn {
  opacity: 1;
}

/* Catalogue item controls */
.admin-card-controls {
  position: absolute; top: 8px; left: 8px;
  display: none; gap: 6px; z-index: 10;
}

body.admin-mode .admin-card-controls { display: flex; }

.admin-card-controls button {
  padding: 5px 10px;
  font-size: 0.6rem; letter-spacing: 0.12em;
  font-weight: 500;
  text-transform: uppercase;
  background: rgba(0,0,0,0.8); color: #fff;
  border: none; cursor: pointer;
  transition: background 0.3s;
}

.admin-card-controls .edit-ctrl:hover { background: #333; }
.admin-card-controls .delete-ctrl:hover { background: #e74c3c; }

/* Add item button */
#add-item-fab {
  position: fixed; bottom: 80px; right: 28px;
  z-index: 900;
  background: #000; color: #fff;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 200;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

body.admin-mode #add-item-fab { display: flex; }
#add-item-fab:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(0,0,0,0.35); }

/* Admin Login Modal */
#admin-login-modal {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,0.7);
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
}

#admin-login-modal.open { display: flex; }

#admin-login-modal .login-box {
  background: #111;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 52px 50px;
  max-width: 380px; width: 90%;
  text-align: center; position: relative;
}

#admin-login-modal h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem; font-weight: 600;
  letter-spacing: 0.28em; color: #fff;
  margin-bottom: 8px;
}

#admin-login-modal p {
  font-size: 0.68rem; letter-spacing: 0.1em; font-weight: 300;
  color: rgba(255,255,255,0.35); margin-bottom: 36px;
}

#admin-password {
  width: 100%; padding: 12px 0;
  background: none; border: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-family: 'DM Sans', sans-serif;
  font-size: 1rem; text-align: center;
  letter-spacing: 0.2em; outline: none;
  transition: border-color 0.3s; margin-bottom: 32px;
}

#admin-password:focus { border-bottom-color: rgba(255,255,255,0.6); }

#login-submit {
  width: 100%; padding: 14px;
  background: #111; color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem; letter-spacing: 0.28em; font-weight: 500;
  text-transform: uppercase; cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
#login-submit:hover { background: #222; border-color: rgba(255,255,255,0.4); }

#login-error {
  font-size: 0.72rem; color: #e74c3c;
  margin-top: 16px; min-height: 20px;
  letter-spacing: 0.06em;
}

#login-close {
  position: absolute; top: 18px; right: 22px;
  font-size: 1.3rem; color: rgba(255,255,255,0.4);
  cursor: pointer; transition: color 0.3s;
}
#login-close:hover { color: #fff; }

/* Toast notifications */
#toast-container {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  pointer-events: none;
}

.toast {
  padding: 12px 28px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem; letter-spacing: 0.12em; font-weight: 500;
  color: #fff;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.4s, transform 0.4s;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: #27ae60; }
.toast.error   { background: #e74c3c; }

/* Edit Item Modal */
#edit-modal {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(0,0,0,0.6);
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
#edit-modal.open { display: flex; }

.edit-modal-box {
  background: #fff;
  padding: 48px;
  max-width: 560px; width: 92%;
  max-height: 90vh; overflow-y: auto;
}

.edit-modal-box h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.3rem; font-weight: 400;
  letter-spacing: 0.04em; margin-bottom: 30px;
}

.edit-field { margin-bottom: 22px; }
.edit-field label {
  display: block; font-size: 0.6rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500;
  color: #888; margin-bottom: 6px;
}
.edit-field input,
.edit-field textarea {
  width: 100%; padding: 10px 0;
  border: none; border-bottom: 1px solid #dfdfdf;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.86rem; font-weight: 300; outline: none;
  transition: border-color 0.3s;
}
.edit-field input:focus,
.edit-field textarea:focus { border-bottom-color: #000; }
.edit-field textarea { resize: none; height: 80px; }

.edit-modal-actions {
  display: flex; gap: 12px; margin-top: 30px;
}

.edit-modal-actions button {
  flex: 1; padding: 13px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem; letter-spacing: 0.2em; font-weight: 500;
  text-transform: uppercase; cursor: pointer;
  border: 1px solid #111; transition: all 0.3s;
}
.edit-modal-actions .save-btn {
  background: #111; color: #fff;
}
.edit-modal-actions .save-btn:hover { background: #333; border-color: #333; }
.edit-modal-actions .cancel-btn { background: none; color: #111; }
.edit-modal-actions .cancel-btn:hover { background: #f5f5f5; }