/* styles/media.css */

/* ---------- shared inputs/buttons for media pages ---------- */
.media-form { display:flex; flex-direction:column; gap:12px; position:relative; }
.media-grid { grid-template-columns:1.2fr 1fr 0.6fr 0.6fr auto; gap:12px; align-items:center; display:grid; }
.media-grid input, .media-grid select, .media-notes {
  height:44px; padding:0 14px; border-radius:12px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:#e8eefc;
}
.media-notes { height:auto; padding:12px 14px; resize:vertical; }

.media-list { list-style:none; margin-top:16px; padding:0; position:relative; }
.media-item { display:grid; grid-template-columns:1fr auto auto; gap:12px; padding:14px; border-bottom:1px solid rgba(255,255,255,0.08); }
.media-title { font-weight:700; color:#f0f5ff; }
.media-meta { color:#aabbd8; font-size:.95rem; margin-top:4px; }
.media-actions { display:flex; gap:8px; align-items:center; }
.media-actions .tiny { white-space:nowrap; }

/* ---------- album/books toolbar (buttons aligned to right) ---------- */
.book-toolbar,
.album-toolbar {
  display:flex;
  justify-content:space-between; /* pushes right-controls to the right edge */
  align-items:center;
  gap:1rem;
}

.book-toolbar .left-controls,
.album-toolbar .left-controls {
  display:flex;
  align-items:center;
  gap:0.75rem;
  flex:1; /* left section grows; right sticks to edge */
}

.book-toolbar .right-controls,
.album-toolbar .right-controls {
  display:flex;
  gap:0.5rem;
}

.book-toolbar select,
.album-toolbar select,
.book-toolbar input,
.album-toolbar input {
  height:40px;
  padding:0 12px;
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:#e8eefc;
}

/* ---------- Albums / songs (keep for visual consistency if used later) ---------- */
.album-card { padding:14px; border:1px solid rgba(255,255,255,0.12); border-radius:12px; margin-bottom:14px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)); }
.album-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.album-title { font-weight:800; color:#fff; }
.album-meta { color:#aabbd8; font-size:.95rem; }
.album-controls { display:flex; gap:8px; align-items:center; }
.song-form { display:grid; grid-template-columns:1.6fr 0.6fr auto; gap:10px; margin-top:10px; }
.song-form input, .song-form select { height:40px; }
.song-list { list-style:none; margin:10px 0 0; padding:0; }
.song-item { display:grid; grid-template-columns:1fr auto auto auto; gap:8px; padding:10px 0; border-bottom:1px dashed rgba(255,255,255,0.08); }
.song-title { color:#eaf1ff; font-weight:600; }
.song-meta { color:#aabbd8; }
.rank-btns { display:flex; gap:6px; }
.rank-btns .tiny { padding:6px 10px; }

/* ---------- responsive tweaks ---------- */
@media (max-width:980px){
  .media-grid { grid-template-columns:1fr; }
  .song-form { grid-template-columns:1fr 1fr; }
  .song-item { grid-template-columns:1fr auto auto; }
  .book-toolbar, .album-toolbar { flex-direction:column; align-items:stretch; }
  .book-toolbar .right-controls, .album-toolbar .right-controls { justify-content:flex-end; }
}

/* ---------- Safety: ensure Visual page remains interactive ---------- */
#page-visual, #page-visual * { pointer-events:auto; }
#page-visual .card,
#page-visual .media-form,
#page-visual .media-list,
#page-visual .media-grid input,
#page-visual .media-grid select,
#page-visual .media-grid textarea,
#page-visual .media-actions button,
#page-visual .media-actions select {
  position:relative;
  z-index:1;
  pointer-events:auto;
  -webkit-tap-highlight-color: transparent;
}