/* ── Album feature styles ────────────────────────────────────────────────── */

/* ── Admin: albums list + setup ──────────────────────────────────────────── */
.album-status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.status-selection    { background: #2a2520; color: #e8927a; }
.status-designing    { background: #1e2d20; color: #6ec97a; }
.status-client_review{ background: #1e2535; color: #6aa8e8; }
.status-approved     { background: #251e35; color: #a86ae8; }
.status-frozen       { background: #2a2a2a; color: #aaa; }

.album-setup-form .field { margin-bottom: 18px; }
.album-setup-form .field label { display: block; font-size: .82rem; color: #9a9287; margin-bottom: 4px; }
.album-setup-form .field input[type=number],
.album-setup-form .field input[type=text] {
  background: #1a1612; border: 1px solid #3a3530; color: #e8e1d8;
  border-radius: 6px; padding: 8px 12px; width: 100%; font-size: .9rem;
}
.album-setup-form .field input:focus { outline: none; border-color: #e8927a; }
.album-dims-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.album-setup-form .section-label {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: #e8927a; margin: 20px 0 10px;
}

/* ── Editor wrapper ──────────────────────────────────────────────────────── */
.album-editor-page {
  display: flex; flex-direction: column; height: calc(100vh - 56px);
  background: #111; width: 100%; overflow: hidden;
}

.album-editor-toolbar {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  background: #1a1612; border-bottom: 1px solid #2a2520; flex-shrink: 0;
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* hide scrollbar visually but keep functionality */
}
.album-editor-toolbar::-webkit-scrollbar { display: none; }
.album-editor-toolbar .page-indicator {
  font-size: .82rem; color: #9a9287; white-space: nowrap;
}
.album-editor-toolbar .spacer { flex: 1; }

/* Navigation and action buttons in editor */
.btn-editor {
  background: #2a2520; color: #e8e1d8; border: 1px solid #3a3530;
  padding: 5px 14px; border-radius: 5px; font-size: .8rem; cursor: pointer;
  transition: background .15s;
}
.btn-editor:hover { background: #3a3530; }
.btn-editor:disabled { opacity: .4; cursor: default; }
.btn-editor-accent {
  background: #e8927a; color: #fff; border: none;
  padding: 5px 14px; border-radius: 5px; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.btn-editor-accent:hover { background: #d47a63; }
.btn-editor-danger {
  background: transparent; color: #e87a7a; border: 1px solid #6a2a2a;
  padding: 5px 14px; border-radius: 5px; font-size: .8rem; cursor: pointer;
}
.btn-editor-danger:hover { background: #3a1a1a; }
.btn-editor-green {
  background: #2d4a30; color: #8de89a; border: 1px solid #3a6040;
  padding: 5px 14px; border-radius: 5px; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.btn-editor-green:hover { background: #3a6040; }

/* ── Canvas area ─────────────────────────────────────────────────────────── */
.album-canvas-area {
  flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: #111;
}

.album-canvas-wrap {
  position: relative; background: #fff;
  box-shadow: 0 4px 40px rgba(0,0,0,.8);
  max-height: 100%; max-width: 100%;
}
/* Aspect ratio driven by inline style from JS */

#albumCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  user-select: none;
}

/* Padding / gutter guide overlays */
.album-guide {
  position: absolute; pointer-events: none;
  border: 1px dashed rgba(232,146,122,.35);
}
.album-guide-gutter {
  position: absolute; pointer-events: none; top: 0; bottom: 0;
  border-left: 1px dashed rgba(232,146,122,.5);
}

/* ── Image slots ─────────────────────────────────────────────────────────── */
.album-slot {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  cursor: default;
  outline: 1px solid rgba(255,255,255,.12);
  transition: outline-color .1s, box-shadow .15s;
}

/* Empty slot — fixed placeholder shape, fillable via drag/auto-fill.
   Framed clearly so the photographer can read its size/orientation
   against the white canvas and use it as a composition guide. */
.album-slot.empty {
  cursor: default;
  background: rgba(60,48,36,.03);
  outline: 1px dashed rgba(120,100,80,.4);
}
.slot-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 8px;
}
.slot-placeholder-label {
  font-size: .68rem; line-height: 1.4; color: #6a6260;
  letter-spacing: .02em;
}
#albumCanvas.pool-drag-over .album-slot.empty {
  outline: 2px dashed #e8927a;
  background: rgba(232,146,122,.08);
}

/* Corner brackets — viewfinder-style frame marking the slot's exact
   rectangle, so its size and orientation read clearly at a glance */
.slot-frame-corner {
  position: absolute; width: 16px; height: 16px;
  border: 0 solid rgba(180,142,92,.6);
  pointer-events: none;
}
.slot-frame-corner.tl { top: 7px;    left: 7px;   border-top-width: 2px;    border-left-width: 2px; }
.slot-frame-corner.tr { top: 7px;    right: 7px;  border-top-width: 2px;    border-right-width: 2px; }
.slot-frame-corner.bl { bottom: 7px; left: 7px;   border-bottom-width: 2px; border-left-width: 2px; }
.slot-frame-corner.br { bottom: 7px; right: 7px;  border-bottom-width: 2px; border-right-width: 2px; }

/* Orientation badge — small proportioned swatch + label (landscape /
   portrait / square) so the photographer can match images to slots fast */
.slot-orientation-badge {
  position: absolute; top: 8px; left: 9px;
  display: flex; align-items: center; gap: 6px;
  font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(106,92,78,.7);
  pointer-events: none;
}
.slot-orientation-swatch {
  display: inline-block; flex: none;
  border: 1.4px solid rgba(180,142,92,.6);
  border-radius: 1px;
  background: rgba(180,142,92,.08);
}

/* Image sits in a clipping wrapper that fills the slot */
.slot-img-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.slot-img-wrap img {
  position: absolute;
  display: block;
  pointer-events: none;
  max-width: none; /* JS controls size */
  user-select: none;
}

.album-slot:hover  { outline: 2px solid #e8927a; z-index: 10; }

/* Client-replaced photo indicator — slot photo differs from the original design snapshot. */
.album-slot.slot-client-replaced::after {
  content: '★ Changed';
  position: absolute; top: 4px; left: 4px; z-index: 20;
  background: rgba(232,122,122,.9); color: #fff;
  font-size: .6rem; font-weight: 700; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 3px; pointer-events: none;
}

/* Crop mode — double-click a slot to enter */
.album-slot.crop-mode {
  outline: 2px solid #6aa8e8;
  z-index: 50;
  cursor: crosshair;
}
.album-slot.crop-mode .slot-img-wrap img {
  pointer-events: auto;
  cursor: grab;
}
.album-slot.crop-mode .slot-img-wrap img:active { cursor: grabbing; }

/* Crop hint label — shown on hover, hidden in crop mode */
.slot-crop-hint {
  position: absolute; bottom: 4px; left: 4px;
  background: rgba(0,0,0,.55); color: #e8927a;
  font-size: .6rem; font-weight: 700; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 3px; pointer-events: none;
  opacity: 0; transition: opacity .15s;
}
.album-slot:hover .slot-crop-hint { opacity: 1; }
.album-slot.crop-mode .slot-crop-hint { opacity: 0; }

/* Clear-photo button — shown on hover, hidden in crop mode */
.slot-clear-btn {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  width: 22px; height: 22px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); color: #e8a0a0; border: none; border-radius: 3px;
  font-size: .68rem; cursor: pointer;
  opacity: 0; transition: opacity .15s, background .15s;
}
.slot-clear-btn:hover { background: rgba(110,30,30,.85); color: #fff; }
.album-slot:hover .slot-clear-btn { opacity: 1; }
.album-slot.crop-mode .slot-clear-btn { opacity: 0; pointer-events: none; }

/* ── Image pool (bottom tray) ────────────────────────────────────────────── */
.album-pool-wrap {
  flex-shrink: 0; height: 130px; background: #1a1612;
  border-top: 1px solid #2a2520; display: flex; flex-direction: column;
  width: 100%; overflow: hidden;
}
.pool-scroll-btn {
  background: #2a2520; color: #c9c2b8; border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px; width: 24px; height: 24px; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .12s, color .12s;
}
.pool-scroll-btn:hover { background: #e8927a; color: #fff; border-color: #e8927a; }
.album-pool-header {
  display: flex; align-items: center; gap: 10px; padding: 4px 14px 0;
  font-size: .75rem; color: #9a9287; flex-shrink: 0;
}
.album-pool-count { color: #e8927a; font-weight: 700; }
.album-pool {
  flex: 1; display: flex; align-items: center; gap: 6px;
  overflow-x: auto; overflow-y: hidden; padding: 6px 14px;
  scrollbar-width: thin; scrollbar-color: #3a3530 transparent;
}
.pool-item {
  flex-shrink: 0; height: 90px; position: relative;
  cursor: grab; border-radius: 3px; overflow: hidden;
  outline: 1px solid rgba(255,255,255,.08);
  transition: outline-color .1s;
}
.pool-item:hover { outline: 2px solid #e8927a; }
.pool-item.dragging-pool { opacity: .45; outline: 2px dashed #e8927a; }
.pool-item img {
  height: 100%; width: auto; display: block;
  pointer-events: none;
}

/* Drop target overlay on canvas when dragging from pool */
#albumCanvas.pool-drag-over { outline: 3px dashed #e8927a; }

/* Floating thumbnail that follows the pointer while dragging from the pool */
.pool-drag-ghost {
  position: fixed; z-index: 500; pointer-events: none;
  transform: translate(-50%, -50%);
  background-size: cover; background-position: center;
  border: 2px solid #e8927a; border-radius: 4px;
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
  opacity: .88;
}

/* ── Client review page ──────────────────────────────────────────────────── */
.album-review-page {
  min-height: 100vh; background: #0e0c0a; padding-bottom: 60px;
}
.album-review-header {
  background: #1a1612; border-bottom: 1px solid #2a2520;
  padding: 18px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.album-review-header h1 { font-size: 1.2rem; color: #e8e1d8; margin: 0; }
.album-review-header .album-review-status { font-size: .8rem; color: #9a9287; }

.album-review-toolbar {
  display: flex; align-items: center; gap: 12px; padding: 10px 24px;
  background: #1a1612; border-bottom: 1px solid #2a2520; flex-wrap: wrap;
}
.album-review-toolbar .spacer { flex: 1; }

/* Client view reuses the same slot classes — fixed positions, read-only */
.album-review-page .album-slot { cursor: default; }

.album-approved-banner {
  background: #2d4a30; border: 1px solid #3a6040;
  color: #8de89a; border-radius: 8px; padding: 14px 20px;
  margin: 20px 24px; font-size: .9rem;
}

/* ── Status action bar (admin editor) ───────────────────────────────────── */
.album-status-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: #161210; border-top: 1px solid #2a2520; flex-shrink: 0; flex-wrap: wrap;
}
.album-status-bar .current-status {
  font-size: .78rem; color: #9a9287;
}
.album-status-bar .status-value { color: #e8927a; font-weight: 700; }
.status-select-inline {
  background: #2a2520; border: 1px solid #3a3530; color: #e8e1d8;
  border-radius: 4px; padding: 2px 6px; font-size: .78rem; cursor: pointer;
}
.status-select-inline:focus { outline: none; border-color: #e8927a; }

/* ── Gallery: album photo badge — hover-only unless selected ─────────────── */
.album-badge-btn {
  position: absolute; top: 6px; right: 6px; z-index: 10;
  background: rgba(0,0,0,.35); color: rgba(255,255,255,.45);
  border: 1.5px solid rgba(255,255,255,.2); border-radius: 50%;
  font-size: 1.05rem; font-weight: 400;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: background .15s, color .15s, border-color .15s, transform .12s, opacity .15s;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  line-height: 1;
}
.gallery-item:hover .album-badge-btn { opacity: 1; }
.album-badge-btn:hover {
  background: rgba(232,146,122,.2); color: rgba(255,255,255,.75);
  border-color: rgba(232,146,122,.6); transform: scale(1.12);
}
/* Active (selected) state — always visible, coral filled */
.gallery-item.album-selected .album-badge-btn {
  opacity: 1;
  background: #e8927a; color: #fff; border-color: #e8927a;
  box-shadow: 0 0 0 2px rgba(232,146,122,.35);
}

/* Fixed album status bar — always visible at the bottom while photos are selected */
.album-sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
  background: rgba(18,14,10,.96); border-top: 2px solid #e8927a;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 12px 18px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -6px 28px rgba(0,0,0,.45);
}

/* Album count chip */
.album-toolbar-count {
  background: rgba(232,146,122,.28); color: #fff;
  border: 1px solid rgba(232,146,122,.55); border-radius: 20px;
  padding: 5px 14px; font-size: .85rem; font-weight: 700; white-space: nowrap;
}
/* "Share album selection" button */
#albumCompleteBtn {
  background: linear-gradient(135deg, #e8927a, #f0a898);
  color: #fff; border: none; border-radius: 20px;
  padding: 7px 20px; font-size: .85rem; font-weight: 800;
  cursor: pointer; white-space: nowrap; transition: opacity .15s, transform .12s;
  box-shadow: 0 2px 10px rgba(232,146,122,.4);
}
#albumCompleteBtn:hover { opacity: .9; transform: translateY(-1px); }
#albumCompleteBtn:disabled { opacity: .5; cursor: default; transform: none; }


/* ── Unsaved changes indicator ──────────────────────────────────────────── */
.dirty-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #e8927a;
  display: inline-block; margin-left: 6px; vertical-align: middle;
  animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; }
  50%      { opacity: .3; }
}

/* ── Mini buttons (spread manager rows etc.) ────────────────────────────── */
.btn-editor-mini {
  background: #2a2520; color: #e8e1d8; border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px; font-size: .72rem; line-height: 1; padding: 5px 8px;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.btn-editor-mini:hover { background: #3a3530; border-color: #e8927a; }
.btn-editor-mini.btn-editor-danger { color: #e8a7a7; }
.btn-editor-mini.btn-editor-danger:hover { background: #3a1a1a; border-color: #6a2a2a; }
.btn-editor-mini.is-disabled { opacity: .35; pointer-events: none; }

/* ── Spread manager panel ───────────────────────────────────────────────── */
.spread-panel {
  position: fixed; top: 56px; right: 16px; width: 300px; max-height: calc(100vh - 200px);
  background: #1a1612; border: 1px solid #2a2520; border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); z-index: 200;
  display: flex; flex-direction: column; overflow: hidden;
}
.spread-panel[hidden] { display: none; }
.spread-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #2a2520;
  color: #e8e1d8; font-size: .85rem;
}
.spread-list {
  overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.spread-row {
  display: flex; align-items: center; gap: 8px;
  background: #221d18; border: 1px solid rgba(255,255,255,.06); border-radius: 6px;
  padding: 8px 10px; font-size: .76rem; color: #c9c2b8;
}
.spread-row.active { border-color: #e8927a; background: #2a2218; }
.spread-row-label { font-weight: 700; color: #e8e1d8; }
.spread-row-fill { color: #9a9287; font-variant-numeric: tabular-nums; }
.spread-row-actions { margin-left: auto; display: flex; gap: 4px; }
.spread-row-empty { padding: 18px 10px; text-align: center; color: #6a6260; font-size: .78rem; }

/* ── Template picker modal ──────────────────────────────────────────────── */
.template-picker-modal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10,8,6,.72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.template-picker-modal[hidden] { display: none; }
.template-picker-dialog {
  width: min(900px, 100%); max-height: 86vh; overflow: hidden;
  background: #1a1612; border: 1px solid #2a2520; border-radius: 10px;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.template-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #2a2520;
  color: #e8e1d8; font-size: .9rem;
}
.template-picker-grid {
  overflow-y: auto; padding: 16px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
}
.template-card {
  background: #221d18; border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
  padding: 10px; cursor: pointer; transition: border-color .12s, transform .12s;
}
.template-card:hover { border-color: #e8927a; transform: translateY(-2px); }
.template-card-preview {
  position: relative; width: 100%; background: #0e0c0a;
  border: 1px solid rgba(255,255,255,.08); border-radius: 4px; overflow: hidden;
}
.template-card-slot {
  position: absolute; background: rgba(201,169,110,.35);
  border: 1px solid rgba(201,169,110,.75); border-radius: 1px;
}
.template-card-name {
  margin-top: 8px; font-size: .72rem; line-height: 1.4; color: #c9c2b8;
}