/**
 * Musical Grid CSS - Shared styles for 2D musical grid visualization
 *
 * Usage:
 *   import '../../libs/musical-grid/musical-grid.css';
 *
 * CSS Custom Properties Available:
 *   Grid structure:
 *   --line-color: Color for grid lines (default: #666)
 *   --soundline-width: Width of vertical soundline (default: 3px)
 *   --timeline-height: Height of horizontal timeline (default: 2px)
 *   --cell-highlight-color: Highlight color for cells (default: --select-color)
 *   --pulse-marker-height: Height of pulse markers (default: 15px)
 *   --note-highlight-color: Highlight color for notes (default: --select-color)
 *   --interval-bar-height: Height of horizontal interval bars (default: 6px)
 *   --interval-bar-width: Width of vertical interval bars (default: 6px)
 *
 *   Cell labels (NEW):
 *   --cell-label-font-size: Adaptive label size (default: clamp(0.65rem, 1.5vw, 1rem))
 *   --cell-label-font-weight: Label font weight (default: 600)
 *   --cell-label-color: Label text color (default: rgba(255, 255, 255, 0.95))
 *   --cell-label-color-dark: Dark theme label color (default: #FFFFFF)
 *   --cell-label-interval-color: Interval-mode label color (default: var(--interval-color, #4A9EFF))
 *   --cell-label-shadow: Label text shadow (default: 0 1px 2px rgba(0, 0, 0, 0.5))
 *   --cell-label-shadow-dark: Dark theme shadow (default: 0 1px 2px rgba(0, 0, 0, 0.8))
 *   --fade-out-duration: Fade animation duration (default: 1s)
 *
 *   Grid numbers (NEW):
 *   --grid-number-color: Unified color for pulse/soundline numbers (default: var(--text-color, #333))
 *   --grid-number-color-dark: Dark theme number color (default: var(--text-dark, #e0e0e0))
 *
 *   Theme colors:
 *   --select-color: Global selection color (default: #E4570C)
 *   --text-color: Main text color (default: #333)
 *   --text-dark: Dark theme text color (default: #e0e0e0)
 *   --text-light: Light text color (default: #666)
 *
 *   Z-index levels:
 *   --z-base, --z-content, --z-interactive, --z-active, --z-overlay
 *
 * Dependencies:
 *   - None (standalone)
 */

/* ========== CSS VARIABLES ========== */
:root {
  /* Existing variables */
  --pulse-marker-height: 15px;
  --interval-bar-height: 4px;
  --interval-bar-width: 6px;

  /* ⭐ NEW: Cell label system */
  --cell-label-font-size: clamp(0.65rem, 1.5vw, 1rem);
  --cell-label-font-weight: 600;
  /* Light mode: dark text for contrast on orange/yellow background */
  --cell-label-color: rgba(0, 0, 0, 0.85);
  --cell-label-color-dark: #FFFFFF;
  --cell-label-interval-color: var(--interval-color, #4A9EFF);
  /* Light mode: light shadow for depth on dark text */
  --cell-label-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
  --cell-label-shadow-dark: 0 1px 2px rgba(0, 0, 0, 0.8);
  --fade-out-duration: 1s;

  /* ⭐ NEW: Grid numbers unified colors */
  --grid-number-color: var(--text-color, #333);
  --grid-number-color-dark: var(--text-dark, #e0e0e0);
}

/* Dark theme variable overrides */
[data-theme="dark"] {
  --cell-label-color: #FFFFFF;
  --cell-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ========== GRID CONTAINER ========== */
.grid-container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 1200px; /* Expanded from 900px to utilize space from removed third column */
  height: 52.5vh; /* Reduced 25% from 70vh */
  max-height: 525px; /* Reduced 25% from 700px */
  display: grid;
  grid-template-columns: 115px 1fr;
  grid-template-rows: 1fr 80px;
  gap: 20px;
  margin: 0 auto;
}

/* ========== SOUNDLINE WRAPPER (LEFT) ========== */
.soundline-wrapper {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;  /* Allow elements to extend beyond edges */
  box-sizing: border-box;
}

/* Hide scrollbar in soundline wrapper when scroll is enabled */
.soundline-wrapper::-webkit-scrollbar {
  display: none;
}

/* Inner expandible container for scroll support */
.soundline-inner {
  position: relative;
  width: 100%;
  overflow: visible;  /* Inherit overflow visible */
}

/* Vertical soundline */
.soundline {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;  /* Inherit overflow visible */
}

/* Línea vertical principal */
.soundline::before {
  content: '';
  position: absolute;
  left: 100px;
  top: -30px;  /* Extend to top padding */
  bottom: -5px; /* Extend to bottom padding */
  width: var(--soundline-width, 3px);
  background: var(--line-color, #666);
  pointer-events: none;
  z-index: var(--z-base, 1);
}

/* Divisiones horizontales (note markers) */
.soundline-division {
  position: absolute;
  width: 33px;  /* Increased from 30px to match visual alignment */
  height: 2px;
  background: var(--line-color, #666);
  left: 70px;
  pointer-events: none;
  z-index: var(--z-base, 1);
}

/* Números de notas (0-11) */
.soundline-number {
  position: absolute;
  font-size: 1.1rem;
  font-weight: 400;
  /* ⭐ UPDATED: Unified color system */
  color: var(--grid-number-color, var(--text-color, #333));
  user-select: none;
  z-index: var(--z-content, 5);
  opacity: 0.85;
  transition: color 0.3s ease;
  left: 5px;
  text-align: right;
  width: 55px;
}

[data-theme="dark"] .soundline-number {
  /* ⭐ UPDATED: Unified color system */
  color: var(--grid-number-color-dark, var(--text-dark, #e0e0e0));
}

/* ========== MATRIX CONTAINER (CENTER) ========== */
.matrix-container {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  overflow: hidden;  /* Clip notes that straddle top/bottom edges */
}

[data-theme="dark"] .matrix-container {
  background: rgba(255, 255, 255, 0.02);
}

/* Inner expandible container for scroll support */
.matrix-inner {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}

/* ========== MATRIX CELLS ========== */
.musical-cell {
  /* Position and size set dynamically by musical-grid.js */
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(255, 255, 255, 0.3);
  z-index: var(--z-content, 5);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

[data-theme="dark"] .musical-cell {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

/* Disable pointer cursor in interval mode (no !important to allow drag override) */
.interval-mode .musical-cell {
  cursor: default;
}

.grid-container:not(.interval-mode) .musical-cell:hover {
  box-shadow: none;
  z-index: var(--z-interactive, 10);
}

.grid-container:not(.interval-mode) .musical-cell:hover::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -50%;
  height: 100%;
  background: var(--cell-highlight-color, var(--select-color, #E4570C));
  opacity: 0.4;
  border-radius: 2px;
  z-index: 1;
  pointer-events: none;
}

/* N-P dot at intersection point of ALL cells (now a real DOM element) */
.np-dot {
  position: absolute;
  bottom: -6px;  /* Clickable area centered on intersection */
  left: -6px;
  width: 12px;
  height: 12px;
  z-index: 30;
  pointer-events: none;  /* Default: not clickable */
}

.np-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid rgba(102, 102, 102, 0.3);  /* Same opacity as grid lines */
  background: transparent;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease;
  z-index: 1;
}

[data-theme="dark"] .np-dot::after {
  border-color: rgba(153, 153, 153, 0.3);  /* Lighter for dark theme with same low opacity */
}

/* N-P dot when interval lines are enabled (clickable) */
.np-dot.np-dot-clickable {
  pointer-events: auto !important;
  cursor: var(--np-dot-cursor, pointer);  /* Variable allows apps to override (no !important to allow drag override) */
  z-index: 25 !important;  /* Above interval lines */
}

/* Hover effect for clickable N-P dots */
.np-dot.np-dot-clickable:hover::after {
  background: rgba(255, 139, 77, 0.4);  /* Orange glow on hover */
  border-color: var(--select-color, #E4570C);
  border-width: 2px;
  box-shadow: 0 0 8px var(--select-color, #E4570C);
  transform: translate(-50%, -50%) scale(1.3);
}

/* Active cell (selected) - visual note centered ON the soundline division (bottom edge) */
.musical-cell.active {
  box-shadow: none;
  z-index: var(--z-interactive, 10);
}

/* Visual note rectangle: straddles the bottom division line via ::before */
.musical-cell.active::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -50%;
  height: 100%;
  background: color-mix(in srgb, var(--cell-highlight-color, var(--select-color, #FFBB33)) 40%, transparent);
  border: 1px solid color-mix(in srgb, var(--cell-highlight-color, var(--select-color, #FFBB33)) 40%, transparent);
  border-radius: 2px;
  z-index: 1;
  pointer-events: none;
}

/* Dark theme: stronger ::before for better visibility */
[data-theme="dark"] .musical-cell.active {
  /* Inherits dark theme base background */
}

[data-theme="dark"] .musical-cell.active::before {
  background: color-mix(in srgb, var(--cell-highlight-color, var(--select-color, #FFBB33)) 60%, transparent);
  border-color: color-mix(in srgb, var(--cell-highlight-color, var(--select-color, #FFBB33)) 60%, transparent);
}

/* N-P dot FILLED with selection color when cell is active */
.musical-cell.active .np-dot::after {
  background: var(--cell-highlight-color, var(--select-color, #FFBB33));  /* Selection color fill */
  border-color: var(--cell-highlight-color, var(--select-color, #FFBB33));  /* Solid border when active */
  border-width: 2px;
  opacity: 1;  /* Full opacity when active */
  /* Exaggerated glow effect */
  box-shadow:
    0 0 8px var(--cell-highlight-color, var(--select-color, #FFBB33)),
    0 0 16px var(--cell-highlight-color, var(--select-color, #FFBB33)),
    0 0 24px color-mix(in srgb, var(--cell-highlight-color, var(--select-color, #FFBB33)) 60%, transparent);
  /* Much larger size when active */
  width: 10px;
  height: 10px;
}

/* ========== INTERVAL PATH BORDERS (intervals-cell-lines) ========== */
/* These classes are dynamically added to cells to show paths between consecutive N-P pairs */

/* Horizontal path - illuminates bottom border from current pulse to next note's pulse */
.interval-path-horizontal {
  border-bottom: 4px solid var(--interval-color, #4A9EFF) !important;
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  z-index: var(--z-content, 5) !important;  /* Below overlays (mixer=12) */
}

/* Vertical path - illuminates left border from current note to next note */
.interval-path-vertical {
  border-left: 4px solid var(--interval-color, #4A9EFF) !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  z-index: var(--z-content, 5) !important;  /* Below overlays (mixer=12) */
}

/* Corner cell - both horizontal and vertical borders (transition point) */
.interval-path-corner {
  border-bottom: 4px solid var(--interval-color, #4A9EFF) !important;
  border-left: 4px solid var(--interval-color, #4A9EFF) !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  z-index: var(--z-content, 5) !important;  /* Below overlays (mixer=12) */
}

/* Playing animation */
.musical-cell.playing {
  animation: cellFlash 0.3s ease-in-out;
  z-index: var(--z-active, 15);
}

@keyframes cellFlash {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.5; transform: scale(1.05); }
}

/* ========== CELL LABELS (COORDINATES) ========== */
.cell-label {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  display: none;

  /* ⭐ UPDATED: Adaptive font sizing */
  font-size: var(--cell-label-font-size, clamp(0.65rem, 1.5vw, 1rem));
  font-weight: var(--cell-label-font-weight, 600);

  color: #43433B;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
  z-index: var(--z-active, 20);
  pointer-events: none;

  /* ⭐ NEW: Always single line */
  white-space: nowrap;
}

.musical-cell.active .cell-label,
.grid-cell.selected .cell-label {
  display: block;
}

.interval-mode .cell-label {
  color: var(--cell-label-interval-color, var(--interval-color, #4A9EFF));
}

/* ⭐ NEW: Elegant fade-out animation */
.musical-cell.active.fading-out {
  transition: opacity var(--fade-out-duration, 1s) ease-out;
  opacity: 0;
}

.musical-cell.active.fading-out .cell-label {
  transition: opacity var(--fade-out-duration, 1s) ease-out;
  opacity: 0;
}

[data-theme="dark"] .cell-label {
  color: #EEE8D8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ========== TIMELINE CONTAINER (BOTTOM) ========== */
.timeline-wrapper {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
}

/* Hide scrollbar in timeline wrapper when scroll is enabled */
.timeline-wrapper::-webkit-scrollbar {
  display: none;
}

/* Inner expandible container for scroll support */
.timeline-inner {
  position: relative;
  min-width: 100%;
  height: 100%;
}

/* Línea horizontal */
.timeline-line {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: var(--timeline-height, 2px);
  background: var(--line-color, #666);
  pointer-events: none;
  z-index: var(--z-base, 1);
}

/* Pulse markers (short vertical lines with numbers below) */
.pulse-marker {
  position: absolute;
  top: 14px;
  width: 2px;
  height: var(--pulse-marker-height, 15px);
  background: var(--line-color, #666);  /* Use same visible color as other grid lines */
  transform: translateX(-50%); /* Center the marker line on its position */
  pointer-events: none;
  z-index: var(--z-base, 1);
  font-size: 1.4rem;
  font-weight: 400;
  /* ⭐ UPDATED: Unified color system */
  color: var(--grid-number-color, var(--text-color, #333));
  user-select: none;
  opacity: 0.85;  /* Applies to entire element for consistency */

  /* Number positioning: centered below the line */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5px; /* Space between line and number */
  line-height: 3;
}

[data-theme="dark"] .pulse-marker {
  /* ⭐ UPDATED: Unified color system */
  color: var(--grid-number-color-dark, var(--text-dark, #e0e0e0));
}

/* ========== SOUNDLINE HIGHLIGHT ========== */
.soundline-highlight {
  position: absolute;
  left: 40px;
  width: 60px;
  background: var(--note-highlight-color, var(--select-color, #FFBB33));
  opacity: 0.6;
  border-radius: 4px;
  pointer-events: none;
  z-index: var(--z-interactive, 10);
  box-shadow: 0 0 14px var(--note-highlight-color, var(--select-color, #FFBB33));
  transform: translateY(50%);  /* Center on the division line (bottom edge of cell) */
}

/* ========== PULSE HIGHLIGHT (during playback) ========== */
.pulse-marker.highlighted {
  background: var(--select-color, #FFBB33);
  opacity: 1;
  transform: translateX(-50%) scaleY(1.5);
  transition: all 0.1s ease;
  box-shadow: 0 0 10px var(--select-color, #FFBB33);
  z-index: var(--z-active, 15);
}

.musical-cell.pulse-highlight {
  border-color: transparent;
  box-shadow: none;
  opacity: 0.7;
}

.musical-cell.pulse-highlight::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -50%;
  height: 100%;
  border: 1px solid var(--select-color, #FFBB33);
  box-shadow: 0 0 12px var(--select-color, #FFBB33);
  border-radius: 2px;
  z-index: 1;
  pointer-events: none;
}

.musical-cell.active.pulse-highlight {
  opacity: 1;
  z-index: var(--z-active, 15);
}

.musical-cell.active.pulse-highlight::before {
  transform: scale(1.08);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  .grid-container {
    height: 65vh;
    grid-template-columns: 120px 1fr;
    grid-template-rows: 1fr 70px;
    gap: 15px;
  }

  .soundline-number,
  .pulse-marker {
    font-size: 1rem;
  }

  .cell-label {
    font-size: 1.1rem;
  }

  .musical-cell:hover {
    opacity: 0.5;
  }
}

@media (max-width: 900px) {
  .grid-container {
    height: 60vh;
    grid-template-columns: 100px 1fr;
    grid-template-rows: 1fr 60px;
    gap: 10px;
  }

  .soundline-number,
  .pulse-marker {
    font-size: 0.9rem;
  }

  .soundline::before {
    left: 70px;
  }

  .soundline-division {
    left: 60px;
    width: 20px;
  }

  .soundline-number {
    left: 20px;
    width: 30px;
  }

  .soundline-highlight {
    left: 20px;
    width: 80px;
  }

  .cell-label {
    font-size: 1rem;
  }

  /* Reduce interval bars size */
  :root {
    --interval-bar-height: 5px;
    --interval-bar-width: 5px;
  }
}

@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: 80px 1fr;
    grid-template-rows: 1fr 50px;
    gap: 8px;
  }

  .soundline-number,
  .pulse-marker {
    font-size: 0.9rem;
  }

  /* ⭐ UPDATED: Reduce label size on mobile */
  .cell-label {
    font-size: 0.7rem;
  }

  .musical-cell {
    border-width: 0.5px;
  }

  /* Further reduce interval bars size */
  :root {
    --interval-bar-height: 4px;
    --interval-bar-width: 4px;
  }
}

/* ⭐ NEW: Hide labels on mobile landscape */
@media (max-width: 480px) and (orientation: landscape) {
  .cell-label {
    display: none !important;
  }
}

/* ========== GRID CONTAINER RESPONSIVE POSITIONING ========== */
/* Note: left/top offsets removed - apps can customize via CSS if needed */

/* ========== INTERVAL BARS AND NUMBERS ========== */
/* Interval system integrated into musical-grid - plug&play */

/* Horizontal interval numbers (timeline) */
.timeline-wrapper .interval-number,
.timeline-inner .interval-number {
  position: absolute;
  font-size: 1rem;
  font-weight: 400;
  color: var(--interval-color, #4A9EFF);
  user-select: none;
  z-index: var(--z-interactive, 10);  /* Below overlays (mixer=12) */
  opacity: 0.85;
  transform: translateX(-50%);
  pointer-events: none;
  top: -10px; /* Below pulse markers */
}

/* Vertical interval numbers (soundline) */
.soundline-wrapper .interval-number.vertical,
.soundline-inner .interval-number.vertical {
  position: absolute;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--interval-color, #4A9EFF);
  user-select: none;
  z-index: var(--z-interactive, 10);  /* Below overlays (mixer=12) */
  opacity: 0.85;
  pointer-events: none;
  left: 10px; /* To the left of soundline numbers */
  text-align: right;
  width: 30px;
}

/* Horizontal interval bars (timeline) */
.timeline-wrapper .interval-bar.horizontal,
.timeline-inner .interval-bar.horizontal {
  position: absolute;
  top: 17px; /* On Top the timeline-line (top: 17px) */
  height: var(--interval-bar-height, 6px);
  background: var(--interval-color, #4A9EFF);
  opacity: 0.3;
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
  transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

/* Vertical interval bars (soundline) */
.soundline-wrapper .interval-bar.vertical,
.soundline-inner .interval-bar.vertical {
  position: absolute;
  left: 100px; /* Aligned with soundline vertical line */
  width: var(--interval-bar-width, 6px);
  background: var(--interval-color, #4A9EFF);
  opacity: 0.3;
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
  transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

/* Active state during playback (highlighting) */
.timeline-wrapper .interval-bar.horizontal.active,
.timeline-inner .interval-bar.horizontal.active,
.soundline-wrapper .interval-bar.vertical.active,
.soundline-inner .interval-bar.vertical.active {
  background: var(--interval-color, #4A9EFF);
  opacity: 0.8;
  box-shadow: 0 0 8px var(--interval-color, #4A9EFF);
}

/* Dark theme adjustments */
[data-theme="dark"] .timeline-wrapper .interval-bar.horizontal,
[data-theme="dark"] .timeline-inner .interval-bar.horizontal,
[data-theme="dark"] .soundline-wrapper .interval-bar.vertical,
[data-theme="dark"] .soundline-inner .interval-bar.vertical {
  opacity: 0.4;
}

[data-theme="dark"] .timeline-wrapper .interval-bar.horizontal.active,
[data-theme="dark"] .timeline-inner .interval-bar.horizontal.active,
[data-theme="dark"] .soundline-wrapper .interval-bar.vertical.active,
[data-theme="dark"] .soundline-inner .interval-bar.vertical.active {
  opacity: 0.9;
  box-shadow: 0 0 10px var(--interval-color, #4A9EFF);
}

/* ========== INTERVAL LINES CONTAINER (outside cell stacking context) ========== */
.interval-lines-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 30; /* Above active cells (z-index: 10) */
}

/* ========== INTERVAL VERTICAL LINES ========== */
.interval-line-vertical {
  position: absolute;
  width: 4px;
  background: var(--interval-color, #4A9EFF);
  pointer-events: none;
}

/* ========== INTERVAL LABELS (iS values on vertical lines) ========== */
.interval-label {
  position: absolute;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--interval-color, #4A9EFF);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .interval-label {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ========== iS=0 SEPARATOR LINE (same note repetition) ========== */
.interval-label-zero {
  text-align: center;
}

/* ========== REST/SILENCE CELLS ========== */
/* Silence visualization: thin dotted line on the note row (~1/4 height of active notes) */
.musical-cell.rest {
  z-index: var(--z-content, 5);
}

.musical-cell.rest::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12.5%;
  height: 25%;
  background: repeating-linear-gradient(
    90deg,
    var(--rest-color, var(--interval-color, #4A9EFF)) 0px,
    var(--rest-color, var(--interval-color, #4A9EFF)) 4px,
    transparent 4px,
    transparent 10px
  );
  opacity: 0.5;
  border-radius: 1px;
  z-index: 1;
  pointer-events: none;
}

[data-theme="dark"] .musical-cell.rest::before {
  opacity: 0.6;
}

/* Hide the np-dot on rest cells */
.musical-cell.rest .np-dot::after {
  display: none;
}

/* ========== DISABLED CELLS (scale-based apps) ========== */
/* Cells for notes outside the current scale */
.musical-cell.disabled {
  opacity: 0.25;
  pointer-events: none;
  background: transparent !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="dark"] .musical-cell.disabled {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Disabled cells show small dot instead of full cell */
.musical-cell.disabled .np-dot::after {
  width: 4px;
  height: 4px;
  background: var(--line-color, #666);
  border: none;
  opacity: 0.5;
}

/* ========== SOUNDLINE SCALE/CHROMATIC NOTES ========== */
/* Scale notes: full line display */
.soundline-number.scale-note {
  font-weight: 600;
  opacity: 1;
}

/* Chromatic notes: smaller, dimmer appearance */
.soundline-number.chromatic-note {
  font-size: 0.85rem;
  opacity: 0.4;
  font-weight: 300;
}