/* ===========================================================
STUDIO DASHBOARD 2.0 STYLES
=============================================================*/
.cs-scroll-row{
display:flex;
gap:1rem;
overflow-x:auto;
padding-bottom:10px;
}

.cs-beat-card{
min-width:200px;
background:#1b1333;
padding:1rem;
border-radius:15px;
transition:.3s;
}

.cs-beat-card:hover{
transform:scale(1.05);
box-shadow:0 0 20px rgba(157,77,255,.7);
}

/*=============================
FLOAT PANEL
==============================*/
.cs-float-panel{
position:fixed;
bottom:20px;
right:20px;
display:flex;
flex-direction:column;
gap:10px;
z-index:999;
}

.cs-float-panel button{
background:linear-gradient(90deg,#f5b301,#ff8c42);
border:none;
padding:10px 15px;
border-radius:30px;
color:#120a1f;
cursor:pointer;
}

/* ==============================
ENERGY BAR
================================*/
.cs-energy-bar{
height:10px;
background:#1b1333;
border-radius:10px;
overflow:hidden;
}

.cs-energy-fill{
height:100%;
background:linear-gradient(90deg,#f5b301,#ff8c42);
box-shadow:0 0 10px rgba(245,179,1,.6);
}

/* ================================
STUDIO DASH RESPONSIVE
==================================*/
/* ===============================
BASE LAYOUT
=============================== */
.cs-studio-dashboard{
  display:flex;
  min-height:100vh;
  background:linear-gradient(135deg,#120a1f,#1b1333);
  color:#fff;
}

/* ===============================
SIDEBAR
=============================== */
.cs-studio-sidebar{
  width:260px;
  background:#0f0a1a;
  padding:2rem;
  display:flex;
  flex-direction:column;
  gap:2rem;
  border-right:1px solid rgba(245,179,1,0.1);
}

.cs-studio-sidebar img{
  max-width:160px;
}

.cs-studio-sidebar nav a{
  display:block;
  padding:12px;
  border-radius:10px;
  color:#bbb;
  transition:.3s;
  text-decoration:none;
}

.cs-studio-sidebar nav a:hover,
.cs-studio-sidebar nav a.active{
  background:rgba(245,179,1,0.1);
  color:#f5b301;
}

/* ===============================
MAIN
=============================== */
.cs-studio-main{
  flex:1;
  padding:2rem;
}

/* ===============================
HERO
=============================== */
.cs-studio-hero{
  background:linear-gradient(135deg,#120a1f,#1b1333);
  padding:2rem;
  border-radius:20px;
  margin-bottom:2rem;
}

.cs-studio-hero h1{
  font-size:2.2rem;
  color:#f5b301;
}

.cs-studio-actions{ /* kdro added to separate hero buttons*/
  margin-top:1rem;    /*this may be too intense for buttons on mobile */
  margin-top:1rem;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* ===============================
BUTTONS
=============================== */
.btn{
  padding:10px 16px;
  border-radius:25px;
  border:none;
  cursor:pointer;
  font-weight:600;
}

.btn-primary{
  background:linear-gradient(90deg,#f5b301,#ff8c42);
  color:#120a1f;
}

.btn-outline{
  border:1px solid #f5b301;
  color:#f5b301;
  background:transparent;
}

/* ===============================
PLAYER
=============================== */
.cs-player-box{
  background:#1b1333;
  padding:1.5rem;
  border-radius:16px;
}

#waveform{
  height:70px;
  background:linear-gradient(90deg,#9d4dff,#00e6d7);
  opacity:.4;
  border-radius:8px;
}

/* ===============================
METRICS
=============================== */
.cs-metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1rem;
  margin:2rem 0;
}

.cs-metric-card{
  background:#120a1f;
  padding:1.2rem;
  border-radius:16px;
  transition:.3s;
}

.cs-metric-card:hover{
  transform:translateY(-5px);
  box-shadow:0 0 20px rgba(157,77,255,.5);
}

/* ===============================
SESSION
=============================== */
.cs-session-player{
  background:#1b1333;
  padding:1.5rem;
  border-radius:16px;
}

/* ===============================
PROJECTS
=============================== */
.cs-project-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
}

.cs-project-card{
  background:#120a1f;
  padding:1.5rem;
  border-radius:16px;
  transition:.3s;
  cursor:pointer;
}

.cs-project-card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 20px rgba(157,77,255,.6);
}

/* ===============================
TABLET
=============================== */
@media (max-width:1024px){

  .cs-studio-sidebar{
    width:200px;
    padding:1.5rem;
  }

  .cs-studio-main{
    padding:1.5rem;
  }

}

/* ===============================
MOBILE (CRITICAL FIX)
=============================== */
@media (max-width:768px){

  .cs-studio-dashboard{
    flex-direction:column;
  }

  /* SIDEBAR → TOP NAV */
  .cs-studio-sidebar{
    width:100%;
    flex-direction:row;
    align-items:center;
    overflow-x:auto;
    padding:1rem;
    gap:1rem;
  }

  .cs-studio-sidebar nav{
    display:flex;
    gap:8px;
  }

  .cs-studio-sidebar nav a{
    white-space:nowrap;
    font-size:14px;
    padding:8px 12px;
  }

  /* MAIN */
  .cs-studio-main{
    padding:1rem;
  }

  /* HERO */
  .cs-studio-hero h1{
    font-size:1.6rem;
  }

  /* BUTTON STACK */
  .cs-studio-actions{
    flex-direction:column;
  }

  .btn{
    width:100%;
  }

}

/* ===============================
SMALL MOBILE
=============================== */
@media (max-width:480px){

  .cs-metrics{
    grid-template-columns:1fr;
  }

}
/*==================================
STUDIO DASHBOARD MOBILE NAV SYLE
=================================*/
@media (max-width:768px){

.cs-mobile-nav{
display:flex;
}

/* push content below header */
.cs-studio-main{
padding-top:90px;
}

/* SIDEBAR MOBILE MODE */
.cs-studio-sidebar{
position:fixed;
top:0;
right:-100%;
width:260px;
height:100vh;
z-index:999;

transition:.4s ease;
}

/* ACTIVE STATE */
.cs-studio-sidebar.active{
right:0;
}

/* OPTIONAL: soften */
.cs-studio-sidebar{
box-shadow:-10px 0 30px rgba(0,0,0,.6);
}

}

/*---------------------------------------------
GLOBAL SONG UPLOAD STATUS STYLE
----------------------------------------------*/
.cs-upload-status{
  margin-top:10px;
  font-size:14px;
  color:#bbb;
}

.cs-upload-status.success{
  color:#4caf50;
}

.cs-upload-status.error{
  color:#ff4d4d;
}