:root {
  --accent-pink:      #e88697;
  --accent-turquoise: #00b4ce;
  --surface:          #ffffff;
  --surface-muted:    #f8f9fa;
  --ink:              #212529;
  --ink-muted:        #6c757d;
  --key-white:        #fff;
  --key-black:        #111;
  --key-border:       #333;

  /* Bootstrap theme hooks */
  --bs-primary: var(--accent-turquoise);
  --bs-danger:  var(--accent-pink);
}

/* Header tool groups can wrap on narrow screens */
.card-header > .d-flex { flex-wrap: wrap; row-gap: .25rem; }

/* Keep small form controls tidy */
.form-select.form-select-sm,
.input-group-sm .form-control { max-width: 200px; }

body { background:#f8f9fa; }
.kbd { user-select:none; }
.kbd .row-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.kbd .board { position:relative; height:180px; display:inline-block; }

/* Absolute layout for precise key alignment */
.kbd .white {
  position:absolute;
  width:42px; height:180px;
  background:var(--key-white);
  border:1px solid var(--key-border);
  border-radius:4px;
  z-index:1;
}
.kbd .white.active { background:var(--play-yellow); }

.kbd .black {
  position:absolute;
  width:28px; height:110px;
  background:var(--key-black);
  border:1px solid #222;
  border-radius:4px;
  top:0; z-index:2;
}
.kbd .black.active { background:#666; }

.kbd .key-label {
  position:absolute; bottom:6px; left:0; right:0;
  font-size:.8rem; text-align:center; color:#000;
}
.kbd .black .key-label { color:#fff; bottom:8px; font-size:.7rem; }

.panel-title { font-weight:600; }
.mono {
  font-variant-numeric:tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Metronome lamps */
.lamp { width:14px; height:14px; border-radius:50%; background:#ced4da; display:inline-block; margin-left:.35rem; vertical-align:middle; }
.lamp.on { background:var(--accent-pink); }

/* Drone table */
#droneTable th, #droneTable td { vertical-align:middle; }

/* Sticky tools bar under navbar */
.toolsbar {
  position:sticky; top:56px; z-index:1030;
  background: color-mix(in srgb, #ffffff 90%, var(--accent-turquoise) 10%);
  backdrop-filter:blur(6px);
  border-bottom:1px solid #e9ecef;
}
@media (min-width: 992px){ .toolsbar { top:64px; } }

/* Root marker (kept hidden by default) */
#rootMarker{
  position:absolute;
  width:14px; height:14px;
  border-radius:50%;
  background:#ffd166;
  border: 2px solid var(--accent-pink);
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  top:8px; z-index:5; cursor:grab; display:none;
}
#rootMarker.dragging{ cursor:grabbing; }
@media (pointer: coarse) { #rootMarker { width:18px; height:18px; top:6px; } }
#rootMarker.visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-pink) 25%, transparent), 0 1px 3px rgba(0,0,0,.25);
}

/* Accent-aligned buttons */
.btn-success {
  background-color: var(--accent-turquoise) !important;
  border-color:     var(--accent-turquoise) !important;
  color:#fff !important;
}
.btn-success:hover { background-color: #00a4bc !important; }

.btn-outline-primary {
  color: var(--accent-turquoise) !important;
  border-color: var(--accent-turquoise) !important;
}
.btn-outline-primary:hover {
  background-color: var(--accent-turquoise) !important;
  color:#fff !important;
}

.btn-outline-danger {
  color: var(--accent-pink) !important;
  border-color: var(--accent-pink) !important;
}
.btn-outline-danger:hover {
  background-color: var(--accent-pink) !important;
  color:#fff !important;
}

.btn-secondary {
  background-color: var(--accent-pink) !important;
  border-color:     var(--accent-pink) !important;
  color:#fff !important;
}
.btn-secondary:hover { background-color: #d37686 !important; }

/* Active key inset ring to match accent */
.kbd .white.active, .kbd .black.active {
  box-shadow: inset 0 0 0 2px var(--accent-pink) !important;
}

/* Card header tint */
.card > .card-header {
  background: color-mix(in srgb, var(--accent-turquoise) 50%, #fff);
  border-bottom: 1px solid #e9ecef;
}
.panel-title { color: var(--ink); }

/* Hold toggle (existing custom style) */
.toggle {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
  box-sizing:border-box;
}
.toggle input[type="checkbox"] {
  position: absolute; left:0; top:0; z-index:10; width:100%; height:100%;
  cursor: pointer; opacity:0;
}
.toggle label { position: relative; display:flex; height:100%; align-items:center; box-sizing:border-box; }
.toggle label:before, .toggle label:after {
  font-size: 18px; font-weight: bold; font-family: arial; line-height: 36px; transition: .2s ease-in; box-sizing:border-box;
}
.toggle label:before {
  content: 'Hold';
  background: #e88697; color: #0002; height:36px; width:140px;
  display:inline-flex; align-items:center; padding:0 10px; border-radius:10px;
}
.toggle label:after {
  content: 'Release'; position:absolute; left:65px; top:-2px; color:#fff;
}
.toggle input[type="checkbox"]:checked + label:before { background:#00b4ce; color:#fff; }
.toggle input[type="checkbox"]:checked + label:after { color:#0002; }

/* Volume + hold controls bar */
.controls-bar {
  display:flex; justify-content:center; align-items:center;
  gap:20px; margin-bottom:20px;
}
.controls-bar input[type="range"] { accent-color: var(--accent-turquoise); }
.controls-bar .toggle { margin:0; }

/* Theme all sliders, checkboxes, radios */
input[type="range"], input[type="checkbox"], input[type="radio"] {
  accent-color: var(--accent-turquoise);
}

/* Selects (including Equal / Pure where used as select) */
select, .form-select {
  background-color: var(--surface);
  border: 1px solid var(--accent-turquoise);
  color: var(--ink);
}
select:hover, select:focus,
.form-select:focus {
  border-color: var(--accent-pink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-pink) 25%, transparent);
}

/* Btn-group active/checked states */
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary:active,
.show > .btn-outline-primary.dropdown-toggle {
  color:#fff !important;
  background-color: var(--accent-turquoise) !important;
  border-color: var(--accent-turquoise) !important;
}
.btn-outline-primary:focus,
.btn-outline-primary:active:focus {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent-turquoise) 35%, transparent) !important;
  border-color: var(--accent-turquoise) !important;
}

/* Sliders: Bootstrap custom props + vendor tweaks */
.form-range {
  --bs-form-range-thumb-bg:   var(--accent-turquoise);
  --bs-form-range-track-bg:   #dee2e6;
  --bs-form-range-thumb-active-bg: var(--accent-pink);
}
input[type="range"].form-range::-webkit-slider-thumb { background-color: var(--accent-turquoise); border:none; }
input[type="range"].form-range:active::-webkit-slider-thumb { background-color: var(--accent-pink); }
input[type="range"].form-range::-webkit-slider-runnable-track { background-color: var(--surface-muted); }
input[type="range"].form-range::-moz-range-thumb { background-color: var(--accent-turquoise); border:none; }
input[type="range"].form-range:active::-moz-range-thumb { background-color: var(--accent-pink); }

/* Drones header: wrap nicely on small screens */
.card-header .d-flex.flex-wrap-drone { flex-wrap: wrap; gap: .5rem; }
@media (max-width: 767.98px){
  .card-header .d-flex.flex-wrap-drone > * { margin-right: 0 !important; }
}

/* Drones: Add + Master full width on phones */
@media (max-width: 767.98px){
  #droneNote { min-width: 0; }
  #droneNote, #addDrone { width: 100%; }
  #addDrone { margin-top: .25rem; }
}

/* Chord label style */
#droneQuality { letter-spacing: .06em; opacity: .85; }

/* Responsive drone table -> stacked cards on phones */
@media (max-width: 767.98px){
  #droneTable thead { display: none; }
  #droneTable tbody, #droneTable tr, #droneTable td { display: block; width: 100%; }
  #droneTable tr {
    background: var(--surface);
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: .5rem .75rem;
    margin-bottom: .75rem;
  }
  #droneTable td { border:0; padding:.25rem 0; }
  #droneTable td::before{
    content: attr(data-label);
    display:inline-block; min-width:9.5rem; margin-right:.5rem;
    color: var(--ink-muted); font-size:.85rem;
  }
  #droneTable td[data-label="Solo"],
  #droneTable td[data-label="Mute"]{
    display:inline-flex; align-items:center; gap:.5rem; margin-right:1rem;
  }
  #droneTable td[data-label=""]{ margin-top:.25rem; text-align:right; }
}

/* Top tools bar: right cluster layout */
.toolsbar .toolbar-right{
  display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:end;
  gap:.5rem .75rem;
}
.toolsbar .toolbar-ctl{ display:flex; align-items:center; gap:.5rem; }

/* Match input group height to buttons */
.toolsbar .toolbar-ctl .input-group{
  width: 220px;          /* desktop/tablet */
  min-width: 200px;
}
.toolsbar .btn,
.toolsbar .form-control,
.toolsbar .input-group .btn,
.toolsbar .input-group-text{
  height:38px; padding:.375rem .75rem; font-size:1rem; line-height:1.5;
}
.toolsbar .toolbar-ctl > .form-label.small{ margin-bottom:0; }

/* MOBILE: keep Stop All + Transpose on one row */
@media (max-width: 575.98px){
  .toolsbar .toolbar-right{ flex-wrap:nowrap; align-items:center; gap:.5rem; }
  #allStopTop{ flex:0 0 auto; }
  .toolsbar .toolbar-right .toolbar-ctl{ flex:1 1 auto; min-width:0; }
  .toolsbar .toolbar-right .toolbar-ctl .input-group{ width:auto; min-width:0; }
  .toolsbar .toolbar-right .btn,
  .toolsbar .toolbar-right .input-group .btn,
  .toolsbar .toolbar-right .input-group-text,
  .toolsbar .toolbar-right .form-control{
    padding-left:.5rem; padding-right:.5rem;
  }
}
/* Gray + inert look for keys that would sound beyond C2..C7 after transpose */
.key-disabled {
  filter: grayscale(0.6) brightness(0.9);
  opacity: 0.55;
  cursor: not-allowed !important;
}