/* =========================
   Gold World Music Digital – Style (FINAL)
   Drop-in replacement for your style.css snippet
   ========================= */

/* ---- Theme ---- */
:root{
  --bg:#0a0b0f; --card:#14151c; --card-2:#10131a;
  --text:#eaeef2; --muted:#aab1b8; --gold:#f4c430;

  /* navbar height if present (fallback 0) */
  --nav-h:58px;
}

/* ---- Page ---- */
html,body{height:100%; overflow-x:hidden;}
body{
  margin:0; padding:0; color:var(--text); font-family:Arial, sans-serif; line-height:1.6;
  background:
    linear-gradient(rgba(10,11,15,.9), rgba(10,11,15,.95)),
    url("../uploads/hero-bg.jpg") center/cover no-repeat fixed;
}

/* ---- Dashboard layout ---- */
.dashboard-container{
  display:flex; flex-direction:row; min-height:100vh;
}

/* ---- Sidebar ---- */
.sidebar{
  height:100%;
  width:250px;
  position:fixed;
  top:var(--nav-h, 0px);
  left:-260px;                    /* hidden by default */
  background:#12151d;
  border-right:1px solid rgba(255,255,255,.08);
  overflow-y:auto; overflow-x:hidden;
  transition:left .3s ease-in-out;
  padding-top:16px;
  z-index:1000;
  box-shadow:9px 0 24px rgba(0,0,0,.35);
}
.sidebar.show{ left:0; }

.sidebar a{
  display:block; padding:12px 16px;
  color:var(--text); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sidebar a:hover{ background:#1f2430; }
.sidebar .closebtn{
  position:sticky; top:0; display:block; text-align:right;
  padding:10px 16px; font-size:22px; color:#fff; cursor:pointer;
}

/* Sidebar Toggle Button */
.sidebar-toggle{
  display:none;
  position:fixed; top:calc(var(--nav-h, 0px) + 10px); left:12px; z-index:1100;
  font-size:20px;
  background:#171a22; color:#fff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:8px 10px; cursor:pointer;
}

/* ---- Main content ---- */
.main-content{
  flex:1; padding:24px 16px; max-width:1100px; margin:0 auto;
  transition:margin-left .3s ease-in-out;
}

/* ---- Music list card ---- */
.music-card{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  padding:16px; border-radius:10px; margin-bottom:12px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.music-card .btn{
  background:linear-gradient(90deg,#2fd27f,#1fb36b);
  color:#fff; border:none; padding:10px 14px; border-radius:8px;
  cursor:pointer; font-weight:800;
  transition:transform .15s ease, filter .15s ease;
}
.music-card .btn:hover{ transform:translateY(-2px); filter:brightness(1.06); }

/* ---- Upload form ---- */
.upload-music-form{
  max-width:600px; margin:40px auto;
  background:var(--card-2); padding:20px; border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.upload-music-form h1{
  margin:0 0 12px; text-align:center; font-size:2rem; color:var(--gold);
}
.upload-music-form input,
.upload-music-form select,
.upload-music-form textarea{
  width:100%; padding:10px; margin-bottom:14px; border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:#1a1d24; color:var(--text);
}
.upload-music-form button{
  width:100%; padding:12px; border:none; border-radius:10px; cursor:pointer;
  background:linear-gradient(90deg,#2fd27f,#1fb36b); color:#fff; font-weight:800;
  transition:transform .15s ease, filter .15s ease;
}
.upload-music-form button:hover{ transform:translateY(-2px); filter:brightness(1.06); }

/* ---- Pagination ---- */
.pagination{ text-align:center; margin-top:20px; }
.pagination a{
  display:inline-block; padding:10px 15px; margin:5px; text-decoration:none;
  color:#111; background:linear-gradient(90deg,#f4c430,#ffb547);
  border-radius:8px; font-weight:800; box-shadow:0 8px 18px rgba(0,0,0,.35);
  transition:transform .15s ease, filter .15s ease;
}
.pagination a:hover{ transform:translateY(-2px); filter:brightness(1.05); }

/* ---- Responsive ---- */
@media (max-width:768px){
  .dashboard-container{ flex-direction:column; }
  .sidebar{ width:100%; left:-100%; top:var(--nav-h, 0px); }
  .sidebar.show{ left:0; }
  .sidebar-toggle{ display:block; }

  .main-content{ padding:18px 12px; }
  .music-card{ flex-direction:column; align-items:flex-start; }
  .upload-music-form{ width:92%; }
  .pagination a{ display:block; width:80%; margin:10px auto; }
}