/* ==========================================================
   NIXA MUSIC — MASTER THEME (Albums + Songs + Controls)
   Glassmorphism • Crisp Hierarchy • Poppins • Responsive
   Works with your PHP/JS structure & classes 1:1
   ----------------------------------------------------------
   JS hooks covered:
   - Container: .nixa-albumlist
   - View: .list-view / .grid-view
   - Columns: .one-col / .two-col / .three-col / .four-col
   - Controls: #nixa-search #nixa-filter-status #nixa-sort-date
               #nixa-toggle-view #nixa-download-btn
   - Column toggles: .toggle-col[data-columns]
   - Status (card): .nixa-status-{approved|pending|rejected|live}
   - Badge: .nixa-status-badge--{approved|pending|rejected|live}
   - Issues button: .nixa-issues-btn
   - Song rows: .nixa-song-row .nixa-play-btn .nixa-waveform
                .nixa-metadata-btn .nixa-song-metadata
   - Issue popup: .nixa-issue-popup .nixa-close-popup
   ========================================================== */

/* Font (Poppins) – safe to keep even if already loaded */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/* ---------- THEME TOKENS ---------- */
:root{
  --bg: rgba(0,20,31,0.65);
  --bg-solid: #00141F;
  --glass: rgba(255,255,255,0.06);
  --glass-2: rgba(255,255,255,0.08);
  --stroke: rgba(255,255,255,0.12);
  --stroke-2: rgba(255,255,255,0.18);
  --muted: rgba(255,255,255,0.68);
  --muted-2: rgba(255,255,255,0.5);
  --accent: #1db954;
  --accent-2: rgba(29,185,84,0.16);
  --radius: 16px;
  --radius-lg: 20px;
  --shadow-1: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-2: 0 14px 40px rgba(0,0,0,0.45);
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --ok: #28a745;
  --warn: #ffc107;
  --bad: #dc3545;
  --info: #007bff;
}

/* ---------- PAGE BASE ---------- */
body{
  font-family: var(--font);
  background:
    radial-gradient(900px 400px at 5% 0%, rgba(0,194,255,0.05), transparent 40%),
    radial-gradient(1000px 500px at 110% 100%, rgba(103,255,209,0.05), transparent 40%),
    var(--bg-solid);
  color: #fff;
  margin:0;
}

/* Optional outer wrapper if you use one */
.nixa-console{
  max-width: 1280px;
  margin: 24px auto;
  padding: 0 20px;
}

/* ==========================================================
   CONTROLS BAR (search, filter, sort, view, download)
   ========================================================== */
#nixa-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 16px;
  padding:14px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(800px 240px at -10% 0%, rgba(103,255,209,0.05), transparent 30%),
    radial-gradient(800px 240px at 110% 120%, rgba(0,194,255,0.05), transparent 30%),
    var(--glass);
  border:1px solid var(--stroke);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--shadow-1);
  margin: 12px 0 18px;
}

#nixa-controls .nixa-control-group{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 220px;
  min-width: 220px;
}

#nixa-search,
#nixa-filter-status,
#nixa-sort,
#nixa-sort-date,
#nixa-toggle-view,
#nixa-download-btn,
#nixa-sort-btn{
  width:100%;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid var(--stroke);
  background: var(--glass-2);
  color:#fff;
  font: 500 14px/1 var(--font);
  outline:none;
  transition: border-color .2s ease, background .2s ease, transform .06s ease;
}

#nixa-search::placeholder{ color: var(--muted-2); }
#nixa-search:focus,
#nixa-filter-status:focus,
#nixa-sort:focus,
#nixa-sort-date:focus{
  border-color: var(--accent);
}

#nixa-toggle-view,
#nixa-download-btn,
#nixa-sort-btn{
  cursor:pointer;
  font-weight:600;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
}
#nixa-toggle-view:hover,
#nixa-download-btn:hover,
#nixa-sort-btn:hover{
  background: var(--accent-2);
  border-color: rgba(29,185,84,0.5);
  color: var(--accent);
  transform: translateY(-1px);
}

/* COLUMN TOGGLE ICONS */
.column-toggle-wrapper{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.toggle-col{
  width:36px; height:36px;
  display:flex; justify-content:center; align-items:center;
  border-radius: 10px;
  background: var(--glass);
  border:1px solid var(--stroke);
  cursor:pointer; transition:.2s ease;
}
.toggle-col svg{
  width:18px; height:18px; fill: rgba(255,255,255,0.78);
  pointer-events:none; transition:.2s ease;
}
.toggle-col:hover{ transform: scale(1.06); border-color: var(--stroke-2); }
.toggle-col.active{ background: var(--accent-2); border-color: rgba(29,185,84,0.5); }
.toggle-col.active svg{ fill: var(--accent); }

@media (max-width: 640px){
  #nixa-controls{ padding:12px; gap:10px; }
  #nixa-controls .nixa-control-group{ min-width: 160px; flex:1 1 160px; }
  .toggle-col{ width:30px; height:30px; }
  .toggle-col svg{ width:14px; height:14px; }
}

/* ==========================================================
   ALBUM LIST LAYOUT (grid/list + columns)
   ========================================================== */
.nixa-albumlist{
  display:grid;
  gap: 20px;
}

/* Column presets driven by JS: one/two/three/four */
.nixa-albumlist.one-col{   grid-template-columns: 1fr; }
.nixa-albumlist.two-col{   grid-template-columns: repeat(2, 1fr); }
.nixa-albumlist.three-col{ grid-template-columns: repeat(3, 1fr); }
.nixa-albumlist.four-col{  grid-template-columns: repeat(4, 1fr); }

/* Responsive fallbacks */
@media (max-width: 1024px){
  .nixa-albumlist.four-col,
  .nixa-albumlist.three-col{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .nixa-albumlist.four-col,
  .nixa-albumlist.three-col,
  .nixa-albumlist.two-col{ grid-template-columns: 1fr; }
}

/* View modes (JS toggles .list-view / .grid-view on container) */
.nixa-albumlist.list-view{ grid-template-columns: 1fr !important; }

/* ==========================================================
   ALBUM CARD
   ========================================================== */
.nixa-album-card{
  position:relative;
  background:
    radial-gradient(700px 220px at -10% -10%, rgba(103,255,209,0.04), transparent 30%),
    radial-gradient(700px 220px at 120% 120%, rgba(0,194,255,0.04), transparent 30%),
    var(--bg);
  border:1px solid var(--stroke);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px) saturate(170%);
  overflow:hidden;
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.nixa-album-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-2); }

/* Header row (art + title + status + actions) */
.nixa-album-header{
  display:flex; align-items:center; gap:16px;
  padding:16px;
}

/* Grid view: stack meta under artwork (art on top) */
.nixa-albumlist.grid-view .nixa-album-header,
.nixa-albumlist.two-col .nixa-album-header,
.nixa-albumlist.three-col .nixa-album-header,
.nixa-albumlist.four-col .nixa-album-header{
  flex-direction: column;
  align-items:center; text-align:center;
}

/* List view: classic row (art left, text right) */
.nixa-albumlist.list-view .nixa-album-header{
  flex-direction: row;
  align-items:center; text-align:left;
}

/* Artwork */
.nixa-artwork{
  width: 84px; height: 84px; border-radius: 14px; overflow:hidden;
  background: rgba(255,255,255,0.06); flex-shrink:0;
  box-shadow: inset 0 0 0 1px var(--stroke);
  transition: transform .25s ease;
}
.nixa-artwork img{ width:100%; height:100%; object-fit: cover; display:block; }
.nixa-artwork--placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color: var(--muted); font-size:12px;
}
.nixa-album-card:hover .nixa-artwork{ transform: scale(1.02); }

/* Larger art in multi-column grid */
.nixa-albumlist.two-col  .nixa-artwork{ width: 140px; height:140px; border-radius: 16px; }
.nixa-albumlist.three-col.nixa-albumlist.grid-view .nixa-artwork,
.nixa-albumlist.three-col  .nixa-artwork{ width: 120px; height:120px; }
.nixa-albumlist.four-col  .nixa-artwork{ width: 110px; height:110px; }

/* Meta (title + mid badge) */
.nixa-album-meta{ flex:1; }
.nixa-title{
  font-weight: 700; margin: 0 0 6px;
  font-size: 1.15rem; letter-spacing:.2px;
}
.nixa-albumlist.three-col .nixa-title{ font-size: 1.05rem; }
.nixa-albumlist.four-col  .nixa-title{ font-size: 0.98rem; }

.nixa-mid-badge{ margin-top: 2px; }

/* Status badge tokens */
.nixa-status-badge{
  display:inline-block; padding:6px 12px; border-radius: 999px;
  font: 600 11.5px/1 var(--font); letter-spacing:.4px; text-transform: uppercase;
  border:1px solid transparent;
}
.nixa-status-badge--approved{ background: rgba(40,167,69,0.18); color: #c9f7d5; border-color: rgba(40,167,69,0.35); }
.nixa-status-badge--pending { background: rgba(255,193,7,0.18); color: #fff3cd; border-color: rgba(255,193,7,0.35); }
.nixa-status-badge--rejected{ background: rgba(220,53,69,0.18); color: #f8d7da; border-color: rgba(220,53,69,0.35); }
.nixa-status-badge--live    { background: rgba(0,123,255,0.18); color: #cfe2ff; border-color: rgba(0,123,255,0.35); }

/* Actions (Issues + Toggle) */
.nixa-actions{ display:flex; gap:10px; margin-left:auto; }
.nixa-issues-btn,
.nixa-toggle-btn{
  padding:8px 12px; border-radius: 12px; border:1px solid var(--stroke);
  background: var(--glass-2); color:#fff; cursor:pointer;
  font: 600 12px/1 var(--font);
  transition: background .2s, border-color .2s, color .2s, transform .06s;
}
.nixa-issues-btn:hover,
.nixa-toggle-btn:hover{
  background: var(--accent-2); border-color: rgba(29,185,84,0.5); color: var(--accent);
  transform: translateY(-1px);
}

/* Expandable body */
.nixa-album-body{
  display:none; padding:16px; border-top:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
}
.nixa-album-card.expanded .nixa-album-body{ display:block; }

/* Info row (Release/Label) */
.nixa-album-info{
  display:flex; flex-wrap:wrap; gap:16px; margin-bottom: 14px;
}
.nixa-info-left,
.nixa-info-center{
  flex:1 1 240px; color: var(--muted); font: 500 13.5px/1.5 var(--font);
}
.nixa-info-left strong,
.nixa-info-center strong{
  color:#fff; font-weight:600; display:inline-block; margin-left: 6px;
}

/* ==========================================================
   SONG LIST + PLAYER ROWS
   ========================================================== */
.nixa-song-list{ display:flex; flex-direction:column; gap:12px; }
.nixa-no-songs{ color: var(--muted-2); font-size: 14px; }

.nixa-song-row{
  display:grid; grid-template-columns: 36px 1fr minmax(120px, 40%) auto;
  align-items:center; gap:10px; padding:10px 12px;
  border-radius: 12px; border:1px solid var(--stroke);
  background: var(--glass); transition: background .2s ease, border-color .2s ease;
}
.nixa-song-row:hover{ background: var(--glass-2); border-color: var(--stroke-2); }

/* Play button */
.nixa-play-btn{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius: 50%; border:none; cursor:pointer; color:#fff;
  background: var(--accent);
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.nixa-play-btn:hover{ transform: scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,0.45); }
.nixa-play-btn.is-playing{ animation: nixaPulse 1.2s infinite; }
@keyframes nixaPulse{
  0%{ box-shadow: 0 0 6px rgba(29,185,84,0.28); transform: scale(1); }
  50%{ box-shadow: 0 0 18px rgba(29,185,84,0.5); transform: scale(1.08); }
  100%{ box-shadow: 0 0 6px rgba(29,185,84,0.28); transform: scale(1); }
}

/* Title + waveform */
.nixa-song-title{ font: 600 14.5px/1.3 var(--font); color:#fff; }
.nixa-waveform{
  height:44px; border-radius: 8px; overflow:hidden; background: rgba(0,0,0,0.28);
}

/* Metadata toggle button */
.nixa-metadata-btn{
  padding:8px 10px; border-radius: 10px; border:1px solid var(--stroke);
  background: var(--glass); color:#fff; cursor:pointer; white-space: nowrap;
  font: 600 12px/1 var(--font); transition: .2s ease;
}
.nixa-metadata-btn:hover{ background: rgba(255,255,255,0.1); border-color: var(--stroke-2); color: var(--accent); }

/* Metadata panel */
.nixa-song-metadata{
  margin-top:10px; padding:12px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  display:none;
}
.nixa-song-metadata ul{ margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.nixa-song-metadata li{ font-size: 13.5px; color: var(--muted); }
.nixa-song-metadata li strong{ color:#fff; font-weight:600; margin-right:6px; }

/* Responsive song row */
@media (max-width: 860px){
  .nixa-song-row{ grid-template-columns: 36px 1fr; grid-auto-rows: auto; }
  .nixa-waveform{ grid-column: 1 / -1; }
  .nixa-metadata-btn{ grid-column: 2 / -1; justify-self: start; }
}

/* ==========================================================
   STATUS ACCENTS ON CARD (subtle border glow by status)
   ========================================================== */
.nixa-album-card.nixa-status-approved{ box-shadow: inset 0 0 0 1px rgba(40,167,69,0.25), var(--shadow-1); }
.nixa-album-card.nixa-status-pending { box-shadow: inset 0 0 0 1px rgba(255,193,7,0.25), var(--shadow-1); }
.nixa-album-card.nixa-status-rejected{ box-shadow: inset 0 0 0 1px rgba(220,53,69,0.25), var(--shadow-1); }
.nixa-album-card.nixa-status-live    { box-shadow: inset 0 0 0 1px rgba(0,123,255,0.25), var(--shadow-1); }

/* ==========================================================
   ISSUE POPUP (created in JS if not exists)
   ========================================================== */
.nixa-issue-popup{
  position: fixed; inset:0; display:none; place-items:center; z-index: 9999;
  background: rgba(0,0,0,0.55);
}
.nixa-issue-popup.show{ display:grid; }
.nixa-issue-popup .nixa-issue-content{
  max-width: 700px; width: min(92vw, 700px);
  background: var(--bg);
  border:1px solid var(--stroke);
  border-radius: 18px;
  backdrop-filter: blur(14px) saturate(160%);
  padding: 18px;
  box-shadow: var(--shadow-2);
  color:#fff; font: 500 14.5px/1.6 var(--font);
}
.nixa-issue-popup .nixa-close-popup{
  position:absolute; top:18px; right:18px;
  width:36px; height:36px; display:grid; place-items:center;
  border-radius: 10px; border:1px solid var(--stroke);
  background: var(--glass-2); color:#fff; cursor:pointer;
  font-size:20px; line-height:1; transition:.2s ease;
}
.nixa-issue-popup .nixa-close-popup:hover{
  background: var(--accent-2); border-color: rgba(29,185,84,0.5); color: var(--accent);
}

/* ==========================================================
   ACCESSIBILITY & MICRO UX
   ========================================================== */
.nixa-album-card:focus-within{ outline: 2px solid rgba(255,255,255,0.16); outline-offset: 2px; }
.nixa-metadata-btn:focus,
.nixa-issues-btn:focus,
.nixa-toggle-btn:focus,
#nixa-search:focus,
#nixa-filter-status:focus,
#nixa-sort-date:focus,
#nixa-toggle-view:focus,
#nixa-download-btn:focus{ box-shadow: 0 0 0 3px rgba(29,185,84,0.28); }

/* ==========================================================
   LIST vs GRID TYPOGRAPHY TUNING
   ========================================================== */
/* List view (denser info, bigger title) */
.nixa-albumlist.list-view .nixa-title{ font-size: 1.22rem; }
.nixa-albumlist.list-view .nixa-artwork{ width: 120px; height: 120px; }

/* Grid view (compact) */
.nixa-albumlist.grid-view .nixa-title{ font-size: 1.08rem; }
.nixa-albumlist.grid-view.four-col .nixa-title{ font-size: 1rem; }

/* ==========================================================
   UTILS (hide/show)
   ========================================================== */
.hidden{ display:none !important; }
.block{ display:block !important; }
.flex{ display:flex !important; }

/* ==========================================================
   OPTIONAL: SCROLL STYLING
   ========================================================== */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.06));
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.1);
}
::-webkit-scrollbar-track{ background: rgba(255,255,255,0.04); }