/**
 * ChordPro Lyrics Styles
 * 
 * Styles for displaying guitar chords above lyrics
 * Uses monospace font for proper alignment
 * Responsive and print-friendly
 */

.chordpro-lyrics {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.8;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    overflow-x: auto;
    white-space: pre-wrap;
}

.chordpro-line {
    margin-bottom: 4px;
}

.chordpro-line.empty {
    margin-bottom: 12px;
}

.chordpro-line.no-chords {
    padding: 4px 0;
}

/* Section header lines: [Intro], [Verse 1], [Bridge], [Solo], etc. */
.chordpro-line.section-header {
    margin-top: 12px;
    margin-bottom: 4px;
    padding: 2px 0;
}

.section-label {
    color: #6b7280;      /* muted gray — visually distinct from chords */
    font-style: italic;
    font-weight: 600;
}

/* Chord-only lines (instrumental / intro / solo sections):
   each chord is already wrapped in <span class="chord">;
   we just make sure there is visible whitespace between them. */
.chordpro-line.chord-only-line {
    margin-bottom: 8px;
}

.chordpro-line.chord-only-line .chord-line {
    letter-spacing: 0.05em;  /* a little extra breathing room between span edges */
    white-space: pre-wrap;   /* honour any deliberate extra spaces */
}

.chord-line {
    color: #0066cc;
    font-weight: bold;
    font-size: 13px;
    white-space: pre;
    min-height: 18px;
    line-height: 18px;
}

.chord {
    color: #0066cc;
    font-weight: bold;
}

.lyrics-line {
    color: #212529;
    white-space: pre;
    line-height: 20px;
}

.chordpro-line .lyrics {
    color: #212529;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .chordpro-lyrics {
        font-size: 12px;
        padding: 15px;
    }
    
    .chord-line {
        font-size: 11px;
    }
}

/* Dark mode support (future) */
@media (prefers-color-scheme: dark) {
    .chordpro-lyrics {
        background-color: #2d3748;
        border-color: #4a5568;
    }
    
    .chord-line,
    .chord {
        color: #63b3ed;
    }
    
    .lyrics-line,
    .chordpro-line .lyrics {
        color: #e2e8f0;
    }
}

/* Print styles */
@media print {
    .chordpro-lyrics {
        background-color: white;
        border: 1px solid #000;
        page-break-inside: avoid;
    }
    
    .chord-line,
    .chord {
        color: #000;
    }
    
    .lyrics-line,
    .chordpro-line .lyrics {
        color: #000;
    }
}

/* Future-ready: Toggle buttons container */
.chordpro-controls {
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.chordpro-controls button {
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.chordpro-controls button:hover {
    background-color: #0056b3;
}

.chordpro-controls button:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}