/* ==========================================================================
   MyelMusic — Site-wide Modern Override (FINAL, merged)
   Combines: myelmusic-player-modern.css + myelmusic-modern.css
   Load this ONE file after aiplay.css — retire the other two.
   <link rel='stylesheet' href='/css/myelmusic-final.css' />
   ========================================================================== */

:root{
  --mm-bg:#0d0d0d;
  --mm-elevated:#181818;
  --mm-elevated-2:#212121;
  --mm-border:#2a2a2a;
  --mm-text-muted:#a3a3a3;
  --mm-accent:#8657e6;
  --mm-accent-soft:rgba(134,87,230,.18);
  --mm-live:#22c55e;
}

/* ---------- global surface ---------- */
body.bg-black{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(134,87,230,.10), transparent 60%),
    var(--mm-bg);
}

/* ---------- navbar ---------- */
.main-menu.navbar-black{
  background:rgba(13,13,13,.85)!important;
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--mm-border);
  position:sticky;top:0;z-index:1000;
}
.main-menu .navbar-brand .navbar-caption-wrap{font-weight:700;letter-spacing:.2px;}
.main-menu .nav-link{color:var(--mm-text-muted)!important;font-weight:500;transition:color .15s;}
.main-menu .nav-link:hover{color:#fff!important;}

/* ---------- hero ---------- */
#hero.hero-wrap{padding-top:2rem!important;padding-bottom:2rem!important;}
.hero_plain_wrap .breadcrumb.bcs{
  display:inline-flex;background:var(--mm-elevated);border:1px solid var(--mm-border);
  border-radius:999px;padding:.35rem .9rem;margin:0 auto 1rem;
}
.hero_plain_wrap .breadcrumb.bcs .breadcrumb-item a{color:var(--mm-text-muted);text-decoration:none;font-size:.82rem;}
.hero_plain_wrap .breadcrumb.bcs .breadcrumb-item a:hover{color:#fff;}

.hero_indi_wrap .display-4{
  font-weight:700;
  background:linear-gradient(90deg,#fff,#cbb8f5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero_indi_wrap .bg-warning{
  background:var(--mm-elevated)!important;border:1px solid var(--mm-border);border-radius:1rem;
}
.hero_indi_wrap .btn-outline-light{
  border-color:var(--mm-border);border-radius:999px;transition:transform .15s,border-color .15s;
}
.hero_indi_wrap .btn-outline-light:hover{transform:translateY(-2px);border-color:var(--mm-accent);}

/* filter buttons: Genre / Mood / Tempo / Use (hero-col-description) */
.hero-col-description p{color:var(--mm-text-muted);}
.hero-col-description .btn-outline-dark{
  background:var(--mm-elevated);border-color:var(--mm-border);color:#fff;
  border-radius:999px;font-weight:600;padding:.55rem 1.3rem;transition:all .15s;
}
.hero-col-description .btn-outline-dark:hover{
  background:var(--mm-accent);border-color:var(--mm-accent);color:#fff;transform:translateY(-2px);
}

/* ---------- unlock / paywall card (single-track pages) ---------- */
.post-header{
  background:linear-gradient(160deg,var(--mm-elevated),var(--mm-bg))!important;
  border:1px solid var(--mm-border)!important;border-radius:1.25rem!important;
  box-shadow:0 20px 50px -20px rgba(134,87,230,.25);
}
.post-header .post-header-text{font-weight:700;}
.post-header .post-header-text i.fa-lock{color:var(--mm-accent);display:block;margin-bottom:.5rem;font-size:1.4rem;}
.post-header .btn-outline-light{
  background:var(--mm-accent);border-color:var(--mm-accent);color:#fff;border-radius:999px;
  font-weight:600;padding:.6rem 1.6rem;
}
.post-header .btn-outline-light:hover{background:#9a70f2;border-color:#9a70f2;}
.post-header a:not(.btn){color:var(--mm-accent);}

/* ---------- post / lyrics content ---------- */
.post.post-summary h2{font-weight:700;margin-bottom:1rem;}
.post.post-summary strong{color:#fff;}
.post.post-summary ul li,.post.post-summary ol > li{color:#d9d9d9;line-height:1.65;margin-bottom:.35rem;}
.post.post-summary p{color:#d9d9d9;line-height:1.7;}
.post.post-summary .btn-outline-dark{
  background:var(--mm-elevated);border-color:var(--mm-border);color:#fff;border-radius:999px;
}
.post.post-summary .btn-outline-dark:hover{background:var(--mm-accent);border-color:var(--mm-accent);}

/* ---------- item-card (GLOBAL — browse grid AND sidebar widgets) ---------- */
.item-card{
  background:var(--mm-elevated)!important;
  border:1px solid var(--mm-border)!important;
  border-radius:.85rem!important;
  overflow:hidden;
  transition:border-color .18s, transform .18s;
  width:100%;
}
.item-card:hover{border-color:var(--mm-accent)!important;transform:translateY(-3px);}
a.text-decoration-none{display:block;}

.item-cover.card-img-wrap{position:relative;overflow:hidden;aspect-ratio:16/9;}
.item-cover.card-img-wrap img.img-zoom{
  width:100%;height:100%;object-fit:cover;transition:transform .35s ease;
}
.item-card:hover .item-cover img.img-zoom{transform:scale(1.06);}

/* status pills already in markup — just style them */
.status-pill{
  position:absolute;top:.5rem;left:.5rem;
  background:rgba(0,0,0,.65);backdrop-filter:blur(4px);border-radius:999px;
  padding:.2rem .6rem;font-size:.68rem;font-weight:700;letter-spacing:.03em;
  display:inline-flex;align-items:center;gap:.35rem;color:var(--mm-accent);
}
.status-pill.live{background:var(--mm-live);color:#fff;}
.status-pill.live .dot{background:#fff!important;}
.status-pill.upcoming{color:var(--mm-text-muted);}
.duration-pill{
  position:absolute;top:.5rem;right:.5rem;background:rgba(0,0,0,.65);border-radius:999px;
  padding:.2rem .55rem;font-size:.68rem;color:#fff;font-weight:600;
}

.item-body.card-body{padding:.9rem;}
.item-title{font-size:.95rem;font-weight:600;color:#fff;line-height:1.3;}
/* optional badge next to item-title — only renders if you add the <span class="badge-genre"> markup */
.item-title .badge-genre{
  display:inline-block;margin-top:.35rem;margin-left:.4rem;
  background:var(--mm-accent-soft);color:var(--mm-accent);
  font-size:.68rem;font-weight:600;border-radius:999px;padding:.15rem .55rem;
}

.host-row{display:flex;align-items:center;gap:.4rem;margin:.4rem 0;}
.host-row img{width:20px;height:20px;border-radius:50%;object-fit:cover;
  background:var(--mm-accent-soft);opacity:.9;}
.host-row span{font-size:.78rem;color:var(--mm-text-muted);}

.date-row{display:flex;align-items:flex-start;gap:.4rem;font-size:.78rem;color:var(--mm-text-muted);margin-bottom:.3rem;}
.date-row.card-text{
  font-size:.82rem;color:#c9c9c9;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

.item-stats.card-footer{background:transparent!important;border-top:1px solid var(--mm-border)!important;}
.item-stats .mini-stat{color:var(--mm-text-muted);font-size:.78rem;}

/* optional play-icon overlay — only renders if you add the <div class="play-overlay"> markup */
.item-cover .play-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55));
  opacity:0;transition:opacity .2s;
}
.item-card:hover .play-overlay{opacity:1;}
.play-overlay .play-btn{
  width:42px;height:42px;border-radius:50%;
  background:var(--mm-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;box-shadow:0 6px 18px rgba(134,87,230,.5);
}

/* related "post-list-item" widget cards */
.post-list-item{background:var(--mm-elevated)!important;border:1px solid var(--mm-border)!important;border-radius:.85rem!important;}
.post-list-item .card-title.post-list-title a{color:#fff;text-decoration:none;font-weight:600;}
.post-list-item .card-title.post-list-title a:hover{color:var(--mm-accent);}
.post-list-item .card-text.meta{color:var(--mm-text-muted);font-size:.8rem;}
.post-list-item .card-text.meta a.card-link{color:var(--mm-accent);text-decoration:none;}

/* ---------- footer ---------- */
footer.footer{border-top:1px solid var(--mm-border);}
footer.footer a.text-white-50{text-decoration:none;transition:color .15s;}
footer.footer a.text-white-50:hover{color:var(--mm-accent)!important;}
footer .footer-link .btn-outline-primary{border-radius:999px;}

/* ---------- music library (admin) ---------- */
.mlib-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;padding:1rem 0}
.mlib-card{background:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:.5rem;padding:1.25rem;display:flex;flex-direction:column;gap:10px}
.mlib-card-header{display:flex;align-items:center;gap:10px}
.mlib-card-icon{width:36px;height:36px;border-radius:.375rem;background:var(--bs-secondary-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mlib-card-icon i{font-size:16px;color:var(--bs-secondary-color)}
.mlib-card h3{font-size:14px;font-weight:500;margin:0}
.mlib-card p{font-size:13px;color:var(--bs-secondary-color);margin:0;line-height:1.5}
.mlib-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.mlib-btns a{font-size:12px;padding:4px 10px;border:1px solid var(--bs-border-color);border-radius:.375rem;color:var(--bs-body-color);text-decoration:none}
.mlib-btns a:hover{background:var(--bs-secondary-bg)}