@import "ui-variables";
@import "syntax-variables";

// Role-based color palette — five buckets driven by sample-name content
// + group routing + orbit-number convention (see lib/role-classifier.js).
// Scanning becomes "what is it doing?" not "which orbit number?".
@role-rhythm: hsl(  0, 70%, 60%);  // warm red — pulse / energy
@role-bass:   hsl(265, 55%, 55%);  // deep purple — depth
@role-lead:   hsl( 48, 80%, 58%);  // bright yellow — melodic foreground
@role-pad:    hsl(180, 45%, 55%);  // soft teal — atmospheric
@role-riser:  hsl(325, 70%, 62%);  // magenta — transition / special
@role-none:   hsl(  0,  0%, 50%);  // gray — unclassified

// Legacy per-orbit hues retained as fallback only — used when an orbit
// has no role (sound unknown AND no convention default). Most renders
// use role classes; orbit hues kick in only for orphans / d13+.
@orbit-color-1:  hsl(  0, 70%, 60%);
@orbit-color-2:  hsl( 30, 75%, 60%);
@orbit-color-3:  hsl( 55, 70%, 55%);
@orbit-color-4:  hsl(155, 50%, 50%);
@orbit-color-5:  hsl(195, 65%, 55%);
@orbit-color-6:  hsl(220, 70%, 65%);
@orbit-color-7:  hsl(275, 55%, 60%);
@orbit-color-8:  hsl(330, 70%, 60%);
@orbit-color-9:  hsl( 85, 55%, 50%);
@orbit-color-10: hsl(175, 40%, 50%);
@orbit-color-11: hsl( 15, 40%, 55%);
@orbit-color-12: hsl(255, 40%, 60%);

.parvagues-hud {
  padding: 4px 8px 6px 8px;
  background: lighten(@base-background-color, 2%);
  border-bottom: 1px solid @base-border-color;
  font-family: @font-family;
  font-size: 10.5px;
  line-height: 1.25;
  color: @text-color;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

// 8-lane × 6-row CSS grid (A B C D E F). Every orbit label is embedded
// in its convention cell — no separate header bands. D row is the tallest
// because that's where the faders + d1..d8 labels live.
.pv-grid {
  display: grid;
  grid-template-columns: 18px repeat(8, minmax(0, 1fr));
  grid-template-rows: 18px 18px 18px 26px 16px 16px;
  gap: 1px;
  background: @base-border-color;
  border: 1px solid @base-border-color;
  border-radius: 3px;
  overflow: hidden;
}

// Tint the three control zones to mirror the physical device layout:
//   knob-block (A/B/C) — neutral
//   fader-block (D)    — slightly brighter, taller cells, vertical bar accent
//   button-block (E/F) — slightly darker
//
// Targeting via :nth-child since the grid is flat — header is first 9 cells,
// then 9 cells per row × 6 rows.
//   header:    children 1..9
//   row A:     10..18
//   row B:     19..27
//   row C:     28..36
//   row D:     37..45  ← FADER ROW
//   row E:     46..54
//   row F:     55..63
.pv-grid > .pv-row-label-A,
.pv-grid > .pv-row-label-B,
.pv-grid > .pv-row-label-C {
  background: lighten(@base-background-color, 3%);
}
.pv-grid > .pv-row-label-D {
  background: lighten(@base-background-color, 6%);
  color: @text-color-highlight;
  border-top: 1px solid fade(@text-color-subtle, 30%);
  border-bottom: 1px solid fade(@text-color-subtle, 30%);
}
.pv-grid > .pv-row-label-E,
.pv-grid > .pv-row-label-F {
  background: darken(@base-background-color, 2%);
}

// Cells in the fader row: brighter background + a fader-bar visual hint.
.pv-grid > .pv-cell[data-row="D"] {
  background: lighten(@base-background-color, 5%);
  border-top: 1px solid fade(@text-color-subtle, 25%);
  border-bottom: 1px solid fade(@text-color-subtle, 25%);
  position: relative;
}
// Bound faders get a vertical accent bar on the left — mimics the 60mm strip.
.pv-grid > .pv-cell[data-row="D"]:not(.pv-cell-empty)::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.45;
}
.pv-grid > .pv-cell[data-row="D"]:not(.pv-cell-empty) {
  padding-left: 9px;
}

// Cells in the button rows: darker background.
.pv-grid > .pv-cell[data-row="E"],
.pv-grid > .pv-cell[data-row="F"] {
  background: darken(@base-background-color, 1%);
}

// Row labels (left column: blank header, then A/B/C/D/E/F)
.pv-row-label {
  display: flex;
  align-items: center;
  justify-content: center;
  background: lighten(@base-background-color, 3%);
  color: @text-color-subtle;
  font-weight: 700;
  font-size: 10px;
}
// Per-orbit chip used only in the orphans footer (and as a fallback shape).
.pv-orbit-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 4px;
  border-radius: 2px;
  background: fade(@text-color, 8%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}
.pv-orbit-chip .pv-orbit-n {
  color: @text-color-highlight;
  font-weight: 700;
  font-size: 10px;
}

// Master placeholder in the D1 cell (Ardour master volume — not a Tidal orbit)
.pv-cell-master {
  background: fade(@text-color-subtle, 12%);
}
.pv-master-label {
  color: @text-color-subtle;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

// Inline orbit chip — embedded directly in a body cell (e.g. d6 at B3).
// Distinct from binding pills: shows orbit number + (truncated) sound.
.pv-inline-orbit {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  border-radius: 2px;
  background: fade(@text-color, 10%);
  font-size: 10px;
  font-weight: 600;
  margin-right: 3px;
}
.pv-inline-orbit .pv-orbit-n {
  color: @text-color-highlight;
  font-weight: 700;
}
.pv-inline-orbit .pv-orbit-sound {
  color: @text-color-success;
  font-weight: 500;
  font-style: italic;
}

.pv-orbit-name {
  color: @text-color-info;
  font-style: italic;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pv-orbit-sound {
  color: @text-color-success;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

// Each cell in the grid body
.pv-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1px 4px;
  gap: 3px;
  background: lighten(@base-background-color, 4%);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.pv-cell-empty .pv-cell-dot {
  color: fade(@text-color-subtle, 40%);
}

.pv-effect {
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
  font-size: 10px;
  background: fade(@text-color, 8%);
  color: @text-color;
  cursor: help;
  max-width: 100%;
  overflow: hidden;
  min-width: 0;
}
.pv-effect-badge {
  padding: 0 4px;
  font-weight: 700;
  background: fade(@text-color, 14%);
  white-space: nowrap;
  flex-shrink: 0;
}
.pv-effect-content {
  padding: 0 4px;
  color: @text-color-subtle;
  font-weight: 500;
  font-family: @font-family;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pv-effect.pv-from-group {
  background: fade(@text-color-subtle, 18%);
  color: @text-color-subtle;
  font-style: italic;
}

.pv-effect.pv-off-lane {
  opacity: 0.75;
  font-style: italic;
}

// Convention placement (orbit has no explicit "^NN" — placed by default rule)
.pv-effect.pv-from-convention {
  opacity: 0.55;
  font-style: italic;
  font-weight: 500;
  background: transparent;
  border: 1px dashed fade(@text-color-subtle, 60%);
}

// Apply per-orbit color tint to header bands, inline chips, and binding pills.
// Generated by mixin so all 12 orbits get the same treatment.
.orbit-tint(@n, @color) {
  // Top header (row-A orbits) — orbit color as bottom accent
  .pv-col-head-top.pv-col-owned-d@{n} {
    border-top: 2px solid @color;
  }
  // Bottom header (row-D orbits) — orbit color as top accent
  .pv-col-head-bot.pv-col-owned-d@{n} {
    border-bottom: 2px solid @color;
  }
  // Orbit chip inside a header
  .pv-orbit-chip.pv-orbit-d@{n} {
    border-left: 3px solid @color;
  }
  // Inline chip (e.g. d6 at B3)
  .pv-inline-orbit.pv-orbit-d@{n} {
    border-left: 3px solid @color;
  }
  // Binding pill colored by which orbit it belongs to
  .pv-effect.pv-orbit-d@{n} {
    background: fade(@text-color, 12%);
    border-left: 2px solid @color;
  }
  .pv-orphan-chip.pv-orbit-d@{n} {
    border-left: 3px solid @color;
  }
}
.orbit-tint(1,  @orbit-color-1);
.orbit-tint(2,  @orbit-color-2);
.orbit-tint(3,  @orbit-color-3);
.orbit-tint(4,  @orbit-color-4);
.orbit-tint(5,  @orbit-color-5);
.orbit-tint(6,  @orbit-color-6);
.orbit-tint(7,  @orbit-color-7);
.orbit-tint(8,  @orbit-color-8);
.orbit-tint(9,  @orbit-color-9);
.orbit-tint(10, @orbit-color-10);
.orbit-tint(11, @orbit-color-11);
.orbit-tint(12, @orbit-color-12);

// Role tint — takes precedence over per-orbit hue. Applied to inline
// chips, binding pills, mini digits, and orphan chips. Higher CSS
// specificity than .orbit-tint via the .pv-role-X class.
.role-tint(@role, @color) {
  .pv-orbit-chip.pv-role-@{role},
  .pv-inline-orbit.pv-role-@{role},
  .pv-orphan-chip.pv-role-@{role} {
    border-left: 3px solid @color;
  }
  .pv-effect.pv-role-@{role} {
    background: fade(@color, 18%);
    border-left: 2px solid @color;
  }
  // Single-digit number inside the compact group-affect list ("d 2 3 8")
  .pv-orbit-digit.pv-role-@{role} {
    color: @color;
  }
}
.role-tint(rhythm, @role-rhythm);
.role-tint(bass,   @role-bass);
.role-tint(lead,   @role-lead);
.role-tint(pad,    @role-pad);
.role-tint(riser,  @role-riser);

// Compact group-affect list: `d 2 3 8` where `d` is gray and each digit
// is role-tinted. Replaces the older per-digit mini-chips (less ink,
// faster to scan).
.pv-group-users {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding-left: 2px;
}
.pv-orbit-list-d {
  color: @text-color-subtle;
  font-weight: 500;
  font-size: 9px;
  margin-right: 1px;
}
.pv-orbit-digit {
  font-weight: 700;
  font-size: 10px;
  color: @text-color-highlight;
  padding: 0 1px;
}
.pv-orbit-list-sep {
  color: @text-color-subtle;
  font-size: 9px;
  opacity: 0.6;
}

// Orphans (orbits with no LCXL CCs) — small footer line
.pv-orphans-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 10px;
}

.pv-section-label {
  color: @text-color-subtle;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 9px;
}

.pv-orphan-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  background: lighten(@base-background-color, 4%);
  border-radius: 2px;
}
.pv-orphan-chip .pv-orbit-n {
  color: @text-color-highlight;
  font-weight: 700;
}

.pv-dim {
  color: @text-color-subtle;
  font-style: italic;
}

.pv-error-badge {
  align-self: flex-end;
  padding: 1px 6px;
  border-radius: 2px;
  background: fade(@background-color-warning, 30%);
  color: @text-color-warning;
  font-size: 10px;
  cursor: help;
}
