/* Styles/Main.css */

:root{
  --background:#050712;
  --foreground:#f5f7ff;
  --muted:#9aa0cf;
  --border-soft:#26293f;
  --accent:#6ee7ff;
  --accent-soft:#6ee7ff33;

  --track-border:#30334f;
  --grid-border:#26293d;
  --playhead:#ffffff22;

  --cell-size:26px;
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  height:100%;
}

body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(circle at 15% 0%, #17224a 0, transparent 60%),
    radial-gradient(circle at 85% 0%, #27415f 0, transparent 60%),
    radial-gradient(circle at 50% 100%, #07101e 0, #050712 60%);
  color:var(--foreground);
  display:flex;
  align-items:center;
  justify-content:center;
}

#appRoot{
  width:100%;
  /* Removed arbitrary max-width to avoid layout hacks */
  padding:12px;
}

/* Buttons */

button{
  appearance:none;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  color:var(--foreground);
  padding:8px 16px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .08s ease, box-shadow .1s ease, transform .05s ease;
}

button:hover{
  background:rgba(255,255,255,.13);
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
}

button:active{
  transform:scale(.97);
}

button[disabled]{
  opacity:0.5;
  cursor:default;
  box-shadow:none;
}

.primaryButton{
  border-color:var(--accent);
  background:var(--accent-soft);
}

/* App header */

.appHeader{
  margin-bottom:12px;
}

.appTitle{
  margin:0;
  font-size:20px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.appSubtitle{
  margin:4px 0 0 0;
  font-size:13px;
  color:var(--muted);
}

/* Theme picker */

.themeList{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:10px;
  margin-top:8px;
}

.themeCard{
  border-radius:16px;
  border:1px solid var(--border-soft);
  background:rgba(3,6,22,.92);
  padding:10px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:border-color .1s ease, box-shadow .1s ease, transform .05s ease;
}

.themeCard:hover{
  border-color:var(--accent-soft);
  box-shadow:0 14px 26px rgba(0,0,0,.45);
  transform:translateY(-1px);
}

.themeCardTitle{
  font-size:15px;
  font-weight:600;
  margin:0 0 4px 0;
}

.themeCardDescription{
  font-size:12px;
  color:var(--muted);
  margin:0 0 6px 0;
}

.themeCardTagline{
  font-size:11px;
  color:var(--accent);
}

/* Composition top bar */

.topBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.topBarLeft{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.themeIndicator{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.2);
  display:flex;
  flex-direction:column;
  min-width:120px;
}

.themeIndicatorLabel{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
}

.themeIndicatorName{
  font-size:13px;
  font-weight:600;
}

.transportControls{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Speed control */

.speedControl{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:180px;
}

.speedControl label{
  font-size:11px;
  color:var(--muted);
}

.speedRow{
  display:flex;
  align-items:center;
  gap:6px;
}

.speedRow span{
  font-size:10px;
  color:var(--muted);
}

input[type=range]{
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  border-radius:999px;
  background:#15192b;
  outline:none;
}

input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:999px;
  background:var(--accent);
  border:1px solid #ffffffcc;
  margin-top:-5px;
  box-shadow:0 0 7px #6ee7ff80;
}

input[type=range]::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:999px;
  background:var(--accent);
  border:1px solid #ffffffcc;
  box-shadow:0 0 7px #6ee7ff80;
}

/* Grid */

.gridWrapper{
  border-radius:16px;
  border:1px solid var(--grid-border);
  background:rgba(4,8,18,.96);
  overflow:auto;
  /* key: width driven by content, but never wider than viewport */
  width:max-content;
  max-width:100%;
  margin:0 auto;
}

/* Grid header is no longer used; hide it entirely */
.gridHeader{
  display:none;
}

.gridHeaderInner{
  display:grid;
}

.gridHeaderLabel{
  font-size:11px;
  color:var(--muted);
  padding:4px 8px;
  border-right:1px solid #181c30;
  display:flex;
  align-items:center;
}

.gridHeaderStep{
  font-size:10px;
  color:var(--muted);
  padding:3px 4px;
  text-align:center;
  border-right:1px solid #141727;
}

.gridBody{
  display:flex;
  flex-direction:column;
}

.trackRow{
  display:grid;
  /* label | cells | settings; both right columns sized by their content */
  grid-template-columns:120px max-content max-content;
  border-top:1px solid #15182a;
}

.trackRow.groupLeading{
  border-top:2px solid var(--track-border);
}

.trackLabelCell{
  font-size:11px;
  color:var(--muted);
  padding:4px 8px;
  border-right:1px solid #15182a;
  background:#070915;
  position:relative;
  display:flex;
  align-items:center;
}

.trackLabelText{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Group badge removed from UI, CSS kept commented out for now
.trackGroupBadge{
  position:absolute;
  right:8px;
  padding:2px 6px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.55);
  color:var(--muted);
}
*/

.cellRow{
  display:grid;
}

/* Cells */

.gridCell{
  height:var(--cell-size);
  border-right:1px solid #101426;
  border-left:1px solid #050713;
  background:rgba(10,11,24,.98);
  position:relative;
  cursor:pointer;
}

.gridCell:nth-child(odd){
  background:rgba(7,8,19,.98);
}

/* Bar boundaries: thicker vertical lines at measure edges */
.gridCell.barStartCell{
  border-left:2px solid #343855;
}

.gridCell.barEndCell{
  border-right:2px solid #343855;
}

.gridCell::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:7px;
  transition:background .12s ease, transform .12s ease, box-shadow .12s ease;
}

/* Base note style when active */

.gridCell.noteOn::before{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,.6);
}

/* Playhead highlight */

.gridCell.playhead{
  background:linear-gradient(to top, var(--playhead), transparent);
}

/* Role-based color hints */

.trackRow[data-track-role="lead"] .gridCell.noteOn::before,
.trackRow[data-track-role="melody"] .gridCell.noteOn::before,
.trackRow[data-track-role="topline"] .gridCell.noteOn::before{
  background:radial-gradient(circle at 30% 20%, #fff6c0, #ffd966);
}

.trackRow[data-track-role="chord"] .gridCell.noteOn::before,
.trackRow[data-track-role="pad"] .gridCell.noteOn::before{
  background:radial-gradient(circle at 30% 20%, #f0f8ff, #8ecbff);
}

.trackRow[data-track-role="bass"] .gridCell.noteOn::before{
  background:radial-gradient(circle at 30% 20%, #e3ffe8, #73e3a2);
}

.trackRow[data-track-role="drums"] .gridCell.noteOn::before,
.trackRow[data-track-role="perc"] .gridCell.noteOn::before{
  background:radial-gradient(circle at 30% 20%, #ffe6ea, #ff8fa4);
}

.trackRow[data-track-role="sparkle"] .gridCell.noteOn::before{
  background:radial-gradient(circle at 30% 20%, #ffffff, #f0f7ff);
}

.trackRow[data-track-role="drone"] .gridCell.noteOn::before{
  background:radial-gradient(circle at 30% 20%, #ecfff7, #88e6c3);
}

/* Muted tracks: markers appear at 25% opacity */
.trackRow.trackMuted .gridCell.noteOn::before{
  opacity:0.25;
}

/* Track settings column (rightmost) */

.trackSettingsCell{
  border-left:1px solid #15182a;
  background:#070915;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  white-space:nowrap;
}

.trackSettingsSelect{
  font-size:11px;
  background:rgba(10,12,24,.95);
  color:var(--muted);
  border-radius:999px;
  border:1px solid #24273c;
  padding:2px 10px;
  outline:none;
  cursor:pointer;
}

.trackSettingsSelect option,
.trackSettingsSelect optgroup{
  background:#050712;
  color:var(--foreground);
}

/* Hint text (no longer used in markup, kept for completeness) */

.hintText{
  margin-top:6px;
  font-size:11px;
  color:var(--muted);
}