/* =============================================
   WORSHIP APP - RESPONSIVE & UX FIXES v1.0
   =============================================
   Comprehensive fixes for mobile/tablet UX issues
   ============================================= */

/* =============================================================================
   1. NAVBAR MOBILE - Icon sizes and logo centering
   ============================================================================= */
@media (max-width: 820px) {
    /* Larger icons when sidebar collapsed */
    .app.sidebar-collapsed .sidebar-nav-item svg,
    .mobile-nav-item svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* Center logo in collapsed sidebar */
    .app.sidebar-collapsed .sidebar-header {
        justify-content: center;
        padding: var(--space-4);
    }

    .app.sidebar-collapsed .sidebar-logo {
        margin: 0 auto;
    }

    /* Mobile nav icons */
    .mobile-nav-item i,
    .mobile-nav-item svg {
        font-size: 22px;
        width: 24px;
        height: 24px;
    }
}

/* =============================================================================
   2. SONG VIEW MOBILE - Horizontal scrollable panel
   ============================================================================= */
@media (max-width: 820px) {
    /* Controls bar - full width horizontal scroll */
    .song-controls-minimal,
    .song-controls-bar {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2);
    }

    .song-controls-minimal::-webkit-scrollbar,
    .song-controls-bar::-webkit-scrollbar {
        display: none;
    }

    /* Keep pills compact and inline */
    .song-control-pill {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Song meta row - mobile adjustments handled in section 56 */

    .song-meta-badges {
        flex-wrap: nowrap;
        flex-shrink: 0;
    }

    /* Columns fix - DISABLED, see section 54 */
    .song-lyrics-modern.columns-2 {
        /* column-count: 1 !important; */
    }

    /* BPM inline display */
    .song-bpm-inline {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        font-weight: 600;
    }

    /* Transpose control compact layout */
    .transpose-control {
        flex-wrap: nowrap;
        gap: var(--space-1);
    }

    .transpose-display {
        min-width: 50px;
        font-size: var(--font-size-base);
    }
}

/* =============================================================================
   3. CHORD EDITOR - Touch improvements
   ============================================================================= */

/* Prevent chord overlap with spacing */
.ce-chord-row .ce-chord {
    margin-right: 4px;
    position: relative;
    z-index: 1;
}

.ce-chord:last-child {
    margin-right: 0;
}

/* Touch-friendly chord dragging */
@media (pointer: coarse) {
    .ce-chord {
        touch-action: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ce-chord.dragging {
        opacity: 0.8;
        transform: scale(1.05);
        z-index: 100;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
}

/* Fix transparent popup background */
.ce-chord-popup {
    background: var(--bg-card) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .ce-chord-popup {
    background: var(--bg-card) !important;
}

/* =============================================================================
   4. PIANO VIRTUAL - Touch slide without sound
   ============================================================================= */
.piano-keyboard-wrapper {
    touch-action: pan-x pan-y;
    overflow-x: auto;
}

.piano-keyboard {
    touch-action: none;
}

/* Keys should only trigger on explicit tap, not slide */
.piano-key {
    touch-action: manipulation;
}

/* Indicator for touch-slide mode */
.piano-scroll-hint {
    display: none;
    text-align: center;
    padding: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

@media (pointer: coarse) {
    .piano-scroll-hint {
        display: block;
    }
}

/* =============================================================================
   5. STEM SEPARATOR - Mixer layout and export
   ============================================================================= */
@media (max-width: 820px) {
    /* Stack mixer vertically on mobile */
    .stem-mixer-layout {
        flex-direction: column;
        gap: var(--space-4);
    }

    .stem-mixer-panel {
        width: 100%;
    }

    .stem-actions-panel {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2);
    }

    .stem-action-btn {
        flex: 1;
        min-width: 120px;
        max-width: 180px;
    }

    /* Results grid mobile */
    .stem-results-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .stem-result-card {
        padding: var(--space-3);
    }

    .stem-result-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .stem-results-container {
        grid-template-columns: 1fr;
    }

    .stem-action-btn {
        max-width: none;
        width: 100%;
    }
}

/* Export to VoiceStack button styling */
.stem-export-voicestack {
    background: linear-gradient(135deg, #4ecdc4, #44a08d) !important;
    border-color: transparent !important;
    color: #000 !important;
}

.stem-export-voicestack:hover {
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);
}

/* =============================================================================
   6. VOICESTACK - Welcome modal, light mode contrast, zoom gestures
   ============================================================================= */

/* Welcome modal mobile layout */
@media (max-width: 480px) {
    .vs-welcome-popup {
        width: 95%;
        max-height: 85vh;
        margin: var(--space-4);
    }

    .vs-welcome-header {
        padding: 16px;
    }

    .vs-welcome-header h2 {
        font-size: 16px;
    }

    .vs-welcome-body {
        padding: 16px;
    }

    .vs-welcome-section h3 {
        font-size: 12px;
    }

    .vs-welcome-tips ul {
        font-size: 11px;
        padding-left: 14px;
    }

    .vs-latency-actions {
        flex-direction: column;
    }

    .vs-welcome-footer {
        flex-direction: column;
        gap: var(--space-3);
        padding: 12px 16px;
    }

    .vs-btn-continue {
        width: 100%;
        order: -1;
    }
}

/* Light mode contrast fixes for VoiceStack */
[data-theme="light"] .vs-panel,
:root:not([data-theme="dark"]) .vs-panel {
    --vs-bg-panel: #ffffff;
    --vs-bg-dark: #f1f5f9;
    --vs-bg-hover: #e2e8f0;
    --vs-border: #cbd5e1;
    --vs-text: #1e293b;
    --vs-text-dim: #64748b;
}

[data-theme="light"] .vs-track,
:root:not([data-theme="dark"]) .vs-track {
    background: #f8fafc;
    border-color: #e2e8f0;
}

[data-theme="light"] .vs-track-waveform,
:root:not([data-theme="dark"]) .vs-track-waveform {
    background: #f1f5f9;
}

[data-theme="light"] .vs-btn,
:root:not([data-theme="dark"]) .vs-btn {
    background: #e2e8f0;
    color: #1e293b;
    border-color: #cbd5e1;
}

[data-theme="light"] .vs-btn:hover,
:root:not([data-theme="dark"]) .vs-btn:hover {
    background: #cbd5e1;
}

/* Zoom gestures - pinch to zoom container */
.vs-timeline-container {
    touch-action: pinch-zoom pan-x;
}

.vs-zoom-box {
    touch-action: manipulation;
}

/* =============================================================================
   7. SONG EDIT PANEL - Responsive header and toolbar
   ============================================================================= */
@media (max-width: 820px) {
    .song-editor-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .song-editor-header .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .song-editor-header .btn {
        flex: 1;
        min-width: 100px;
        justify-content: center;
    }

    .song-editor-toolbar {
        overflow-x: auto;
        padding-bottom: var(--space-2);
    }

    .song-editor-toolbar::-webkit-scrollbar {
        height: 4px;
    }

    .song-editor-tabs {
        flex-wrap: nowrap;
    }

    .song-editor-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* =============================================================================
   8. TAB EDITOR - Numeric keyboard and spacing
   ============================================================================= */
.tab-input,
.tab-fret-input {
    /* Force numeric keyboard on mobile */
    inputmode: numeric;
    pattern: "[0-9]*";
}

.tab-string-row {
    gap: 2px;
}

.tab-fret {
    min-width: 24px;
    text-align: center;
    font-family: var(--font-mono);
    letter-spacing: 0;
}

@media (max-width: 820px) {
    .tab-editor-container {
        overflow-x: auto;
    }

    .tab-fret {
        min-width: 20px;
        font-size: var(--font-size-sm);
    }
}

/* =============================================================================
/* =============================================================================
   9. SETLIST & MINISTERS - Filters, icons, color picker
   ============================================================================= */
@media (max-width: 820px) {
    /* =========================================================================
       FILTERS - Single row with horizontal scroll (matching desktop colors)
       ========================================================================= */
    .songs-filters {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: var(--space-2) !important;
        overflow-x: auto !important;
        padding-bottom: var(--space-2);
        scrollbar-width: thin;
        align-items: center;
    }
    
    .songs-filters::-webkit-scrollbar {
        height: 4px;
    }
    
    .songs-filters::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 2px;
    }

    /* Search input - maintain desktop appearance */
    .songs-filters .search-input {
        flex: 0 0 auto;
        min-width: 180px;
        max-width: 220px;
        width: auto;
        background-color: var(--bg-input);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
        font-size: var(--font-size-sm);
        border-radius: var(--border-radius-md);
    }

    /* Dropdown selects - maintain desktop appearance */
    .songs-filters select,
    .songs-filters .form-select {
        flex: 0 0 auto;
        min-width: 110px;
        max-width: 140px;
        width: auto;
        background-color: var(--bg-input);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
        font-size: var(--font-size-sm);
        border-radius: var(--border-radius-md);
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 8px center;
        background-repeat: no-repeat;
        background-size: 16px;
    }

    .songs-filters .filter-group {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--space-2);
        flex-shrink: 0;
    }

    /* Minister cards grid */
    .minister-list {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .minister-card {
        padding: var(--space-3);
    }

    .minister-avatar {
        width: 48px;
        height: 48px;
        font-size: var(--font-size-lg);
    }

    /* Setlist song rows */
    .setlist-song-row {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .setlist-song-row .song-minister-cell,
    .setlist-song-row .song-key-cell {
        width: 100%;
    }
}

/* Minister icons visibility */
.minister-instrument-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Color picker improvements */
.color-picker-input input[type="color"]:not(.minimal-color-picker) {
    width: 44px;
    height: 44px;
    cursor: pointer;
}

.color-picker-input input[type="color"]::-webkit-color-swatch {
    border-radius: var(--border-radius-md);
}

   10. SETTINGS APPEARANCE - Theme options layout
   ============================================================================= */
@media (max-width: 820px) {
    .theme-toggle {
        flex-wrap: wrap;
        justify-content: center;
    }

    .theme-preview {
        flex-direction: column;
    }

    .color-presets {
        justify-content: center;
    }

    .font-size-control {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .font-size-slider {
        width: 100%;
    }
}

/* =============================================================================
   11. PITCH ANALYZER - Mobile performance
   ============================================================================= */
@media (max-width: 820px) {
    /* Reduce canvas size for better performance */
    .pitch-visualizer canvas {
        max-height: 150px;
    }

    /* Simpler animations */
    .pitch-indicator {
        transition: transform 50ms linear;
    }

    .pitch-note-display {
        font-size: var(--font-size-3xl);
    }
}

/* Reduce animation complexity on low-end devices */
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
    .pitch-indicator,
    .pitch-needle {
        transition: none;
    }
}

/* =============================================================================
   12. REPETITION MARKER - Extend to x6
   ============================================================================= */
.section-repeat-selector {
    display: flex;
    gap: var(--space-1);
}

.section-repeat-selector option[value="6"] {
    display: block;
}

/* Repeat indicator styling */
.section-repeat-indicator {
    font-weight: 600;
}

.section-repeat-indicator.x2 { --repeat-color: #10b981; }
.section-repeat-indicator.x3 { --repeat-color: #3b82f6; }
.section-repeat-indicator.x4 { --repeat-color: #8b5cf6; }
.section-repeat-indicator.x5 { --repeat-color: #ec4899; }
.section-repeat-indicator.x6 { --repeat-color: #f59e0b; }

/* =============================================================================
   13. FULLSCREEN MODE - Proper fullscreen support
   ============================================================================= */
.song-view-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: var(--z-modal) !important;
    background: var(--bg-body);
    overflow: auto;
    padding: var(--space-6);
}

.song-view-fullscreen .song-lyrics-modern {
    max-width: 100%;
    height: auto;
    min-height: calc(100vh - 120px);
    min-height: calc(100dvh - 120px);
}

/* Hide sidebar and header in fullscreen */
.fullscreen-mode .sidebar,
.fullscreen-mode .header,
.fullscreen-mode .mobile-nav {
    display: none !important;
}

.fullscreen-mode .app-content {
    margin-left: 0 !important;
    padding-bottom: 0 !important;
}

/* =============================================================================
   14. LIGHT MODE CONTRAST IMPROVEMENTS
   ============================================================================= */
[data-theme="light"],
:root:not([data-theme="dark"]) {
    /* Ensure sufficient contrast */
    --text-secondary: #475569;
    --text-muted: #64748b;

    /* Better button contrast */
    --btn-secondary-bg: #e2e8f0;
    --btn-secondary-text: #1e293b;
    --btn-secondary-border: #cbd5e1;
}

/* Cards and panels in light mode */
[data-theme="light"] .card,
:root:not([data-theme="dark"]) .card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Input fields light mode */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
:root:not([data-theme="dark"]) input,
:root:not([data-theme="dark"]) select,
:root:not([data-theme="dark"]) textarea {
    background: #ffffff;
    border-color: #d1d5db;
    color: #1e293b;
}

/* Badges contrast */
[data-theme="light"] .badge,
:root:not([data-theme="dark"]) .badge {
    font-weight: 600;
}

/* Stem separator light mode */
[data-theme="light"] .stem-mixer-panel,
:root:not([data-theme="dark"]) .stem-mixer-panel {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: #e2e8f0;
}

[data-theme="light"] .stem-model-card,
:root:not([data-theme="dark"]) .stem-model-card {
    background: #ffffff;
    border-color: #e2e8f0;
}

[data-theme="light"] .stem-model-card h3,
:root:not([data-theme="dark"]) .stem-model-card h3 {
    color: #1e293b;
}

[data-theme="light"] .stem-model-card p,
:root:not([data-theme="dark"]) .stem-model-card p {
    color: #64748b;
}

/* =============================================================================
   15. GENERAL TOUCH IMPROVEMENTS
   ============================================================================= */
@media (pointer: coarse) {
    /* Larger touch targets */
    .btn {
        min-height: 44px;
        min-width: 44px;
    }

    .btn-icon {
        width: 44px;
        height: 44px;
    }

    /* Prevent accidental text selection during touch */
    .draggable,
    .slider-track,
    .piano-key {
        -webkit-user-select: none;
        user-select: none;
    }

    /* Smooth scrolling */
    .scrollable {
        scroll-behavior: smooth;
    }
}

/* =============================================================================
   16. PRINT STYLES (for song sheets)
   ============================================================================= */
@media print {
    .sidebar,
    .header,
    .mobile-nav,
    .song-controls-minimal,
    .song-controls-bar,
    .no-print {
        display: none !important;
    }

    .song-lyrics-modern {
        font-size: 12pt;
        line-height: 1.4;
        column-count: 2;
    }

    .chord-line {
        color: #000 !important;
        font-weight: bold;
    }
}



/* =============================================================================
   18. SELECT/DROPDOWN - Dark mode text visibility fix
   ============================================================================= */

/* Fix selectors in dark mode - ensure text is visible */
[data-theme="dark"] select,
[data-theme="dark"] .form-select {
    background-color: var(--bg-input, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155);
}

[data-theme="dark"] select option,
[data-theme="dark"] .form-select option {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* Fix dropdown menus in dark mode */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .select-dropdown {
    background-color: #1e293b !important;
    border-color: #334155;
}

[data-theme="dark"] .dropdown-item,
[data-theme="dark"] .select-option {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .select-option:hover {
    background-color: #334155 !important;
}

/* Fix for native select elements */
select {
    color-scheme: dark light;
}

[data-theme="dark"] select:focus {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* =============================================================================
   20. COLOR PICKER - Proper square display (not line)
   ============================================================================= */

/* Fix color input to show as square, not line */
input[type="color"]:not(.minimal-color-picker) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 2px solid var(--border-color) !important;
    border-radius: var(--border-radius-md) !important;
    cursor: pointer;
    background: transparent;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: calc(var(--border-radius-md) - 2px);
}

input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: calc(var(--border-radius-md) - 2px);
}

/* Color picker in forms */
.form-color-picker,
.color-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.form-color-picker input[type="color"],
.color-input-wrapper input[type="color"]:not(.minimal-color-picker) {
    flex-shrink: 0;
}

/* =============================================================================
   21. MINISTER EDIT BUTTON - Icon instead of text
   ============================================================================= */

/* Hide text, show icon for edit buttons in minister cards */
.minister-card .btn-edit-text,
.minister-edit-text {
    display: none;
}

.minister-card .btn-edit-icon,
.minister-edit-icon {
    display: inline-flex !important;
}

/* Ensure edit button is icon-only style */
.minister-card .btn-edit,
.minister-actions .btn-edit {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
}

.minister-card .btn-edit i,
.minister-actions .btn-edit i {
    font-size: 14px;
}




/* =============================================================================
   24. STICKY TOOLBAR - Chord Editor Modal Only
   Solo aplica cuando el editor está dentro de un modal
   ============================================================================= */

/* El modal-body que contiene el editor usa flex layout */
.modal-body:has(#chord-editor-container) {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

/* El contenedor del editor ocupa el espacio disponible */
.modal-body:has(#chord-editor-container) #chord-editor-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* El minimal-editor es el scroll container */
.modal-body:has(#chord-editor-container) .minimal-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* Toolbar sticky dentro del scroll */
.modal-body:has(#chord-editor-container) .minimal-toolbar-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-card, #1e293b);
    flex-shrink: 0;
}

/* Chord bar sticky debajo del toolbar */
.modal-body:has(#chord-editor-container) .minimal-chord-bar {
    position: sticky;
    top: 44px;
    z-index: 99;
    background: var(--bg-card, #1e293b);
    flex-shrink: 0;
}

/* Section bar sticky */
.modal-body:has(#chord-editor-container) .minimal-section-bar {
    position: sticky;
    top: 88px;
    z-index: 98;
    background: var(--bg-card, #1e293b);
    flex-shrink: 0;
}

/* El contenido crece para llenar espacio */
.modal-body:has(#chord-editor-container) .minimal-editor-content {
    flex: 1;
    overflow: visible;
    min-height: 200px;
}

/* Fallback para navegadores sin :has() - clase añadida por JS */
.modal-body.has-chord-editor {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.modal-body.has-chord-editor #chord-editor-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.modal-body.has-chord-editor .minimal-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.modal-body.has-chord-editor .minimal-toolbar-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-card, #1e293b);
    flex-shrink: 0;
}

.modal-body.has-chord-editor .minimal-chord-bar {
    position: sticky;
    top: 44px;
    z-index: 99;
    background: var(--bg-card, #1e293b);
    flex-shrink: 0;
}

.modal-body.has-chord-editor .minimal-section-bar {
    position: sticky;
    top: 88px;
    z-index: 98;
    background: var(--bg-card, #1e293b);
    flex-shrink: 0;
}

.modal-body.has-chord-editor .minimal-editor-content {
    flex: 1;
    overflow: visible;
    min-height: 200px;
}

/* =============================================================================
   25. FIX: Chord Bar - Prevent overflow pushing buttons off screen
   ============================================================================= */

/* La barra de acordes debe tener un ancho máximo y no empujar otros elementos */
.minimal-chord-bar {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* La lista de acordes debe scrollear horizontalmente, no crecer */
.minimal-chord-bar .minimal-chord-list {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
}

/* Los botones de acordes no deben crecer */
.minimal-chord-btn {
    flex-shrink: 0;
}

/* El search input tampoco debe crecer demasiado */
.minimal-chord-search {
    flex-shrink: 0;
    max-width: 150px;
}

/* Asegurar que el toolbar sticky no se expanda más allá del contenedor */
.minimal-toolbar-sticky {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* El toolbar principal también */
.minimal-toolbar {
    max-width: 100%;
    box-sizing: border-box;
}

/* Evitar que el contenido empuje los botones fuera */
.minimal-editor {
    max-width: 100%;
    overflow-x: hidden;
}

/* =============================================================================
   26. Chord Bar - Solo mostrar acordes que quepan (sin scroll)
   ============================================================================= */

/* Ocultar scroll y recortar acordes que no quepan */
.minimal-chord-bar .minimal-chord-list {
    overflow: hidden !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
}

.minimal-chord-bar .minimal-chord-list::-webkit-scrollbar {
    display: none !important;
}

/* =============================================================================
   27. Revertir overflow-x en minimal-editor
   ============================================================================= */
.minimal-editor {
    overflow-x: visible !important;
}

/* =============================================================================
   28. Quitar margin-top de song-editor-page
   ============================================================================= */
.song-editor-page {
    margin-top: 0 !important;
}

/* =============================================================================
   29. Fix: Dropdowns/popups del toolbar visibles por encima del contenido
   ============================================================================= */

/* El toolbar sticky necesita z-index alto */
.minimal-toolbar-sticky {
    
    position: relative;
}

/* Los dropdowns y popups del toolbar deben estar por encima de todo */
.minimal-toolbar .dropdown,
.minimal-toolbar .popup,
.minimal-toolbar .color-palette,
.minimal-toolbar .export-menu,
.minimal-toolbar-group .dropdown,
.minimal-color-palette,
.export-dropdown,
.minimal-dropdown {
    z-index: 1100 !important;
    position: absolute;
}

/* El contenedor del color picker */
.minimal-color-picker-wrapper {
    position: relative;
    z-index: 1050;
}

/* Paleta de colores */
.minimal-color-palette,

/* =============================================================================
   29. Fix: Dropdowns del toolbar visibles - aumentar z-index
   ============================================================================= */

/* Los dropdowns necesitan z-index mayor que el contenido */
.color-palette-dropdown,
.minimal-dropdown-menu {
    z-index: var(--z-popover) !important;
}

/* El contenedor padre de los dropdowns necesita position relative */
.minimal-color-picker-wrapper,
.minimal-dropdown {
    position: relative;
}

/* Asegurar que minimal-editor-content no cree stacking context que tape */
.minimal-editor-content {
    position: relative;
    z-index: auto;
}

/* =============================================================================
   30. Fix: Quitar top: 60px del toolbar sticky
   ============================================================================= */

.minimal-toolbar-sticky {
    top: 0 !important;
}

/* =============================================================================
   31. Fix: Dropdowns visibles sobre el contenido scrollable
   ============================================================================= */

/* El toolbar NO debe estar dentro del contexto de overflow */
.minimal-toolbar-sticky {
    overflow: visible !important;
    
}

/* Los dropdowns - keep default positioning, just ensure z-index */
.color-palette-dropdown,
.minimal-dropdown-menu {
    z-index: var(--z-popover) !important;
}

/* Color picker wrapper needs relative for absolute dropdown positioning */
.minimal-color-picker-wrapper {
    position: relative !important;
}

.minimal-dropdown {
    position: relative !important;
}

/* =============================================================================
   32. Chord Editor & Song View - Responsive Styles
   ============================================================================= */

/* ---- MOBILE (max-width: 820px) ---- */
@media (max-width: 820px) {
    /* Chord Editor - Mobile adjustments */
    .ce-chord {
        padding: 1px 6px;
        font-size: 0.8em;
        border-radius: 3px;
    }
    
    .ce-chord-row {
        height: 22px;
    }
    
    .ce-lyric-row {
        font-size: 14px;
        padding: 2px 2px;
    }
    
    .ce-line-number {
        font-size: 10px;
        min-width: 20px;
    }
    
    /* Song View - Mobile chord styling */
    .song-lyrics-modern .song-chord {
        padding: 1px 5px;
        font-size: 0.75em;
        border-radius: 3px;
    }
    
    .song-lyrics-modern .chord-line {
        height: 20px;
    }
    
    .song-lyrics-modern .lyric-line {
        font-size: 14px;
    }
    
    /* Reduce font size for monospace measurement accuracy */
    .song-lyrics-modern .lyric-content {
        font-size: 14px;
    }
}

/* ---- TABLET (max-width: 1024px) ---- */
@media (max-width: 1024px) and (min-width: 821px) {
    /* Chord Editor - Tablet adjustments */
    .ce-chord {
        padding: 2px 7px;
        font-size: 0.82em;
    }
    
    .ce-lyric-row {
        font-size: 14px;
    }
    
    /* Song View - Tablet chord styling */
    .song-lyrics-modern .song-chord {
        padding: 2px 6px;
        font-size: 0.8em;
    }
    
    .song-lyrics-modern .lyric-line {
        font-size: 15px;
    }
}

/* ---- Ensure chord positions recalculate on resize ---- */
/* This is handled in JS but we ensure the containers are ready */
.song-lyrics-modern .lyric-line-wrapper {
    position: relative;
}

.song-lyrics-modern .lyric-content {
    position: relative;
    display: inline-block;
}

/* ---- Text alignment support for chords ---- */
.song-lyrics-modern.text-center {
    text-align: center;
}

.song-lyrics-modern.text-right {
    text-align: right;
}

.song-lyrics-modern.text-left {
    text-align: left;
}

/* The lyric-content stays left-aligned internally */
.song-lyrics-modern .lyric-content {
    text-align: left;
}




/* =============================================================================
   33. FIX: Metronome dial beat-pulse for mobile (smaller dial)
   ============================================================================= */
@media (max-width: 820px) {
    /* Fix dial knob position during beat pulse on mobile (dial is 140px, not 240px) */
    .sb-dial.beat-pulse .sb-dial-knob {
        /* Use same translateY as the normal mobile dial knob (-60px instead of -102px) */
        transform: rotate(calc(var(--progress, 0) * 360deg - 90deg)) translateY(-60px) scale(1.1);
    }
    
    /* Reduce glow intensity for mobile */
    .sb-dial.beat-pulse .sb-dial-fill {
        filter: brightness(1.3) drop-shadow(0 0 10px rgba(78, 205, 196, 0.6));
    }
}

/* =============================================================================
   34. FIX: Hide hamburger menu on mobile, only show bottom nav
   ============================================================================= */
@media (max-width: 820px) {
    /* Hide the hamburger menu button in header */
    #mobile-menu-btn {
        display: none !important;
    }
    
    /* Also hide the sidebar overlay since sidebar wont open */
    .sidebar-overlay {
        display: none !important;
    }
}

/* =============================================================================
   35. FIX: More menu - 6 columns on iPad, section title margins
   ============================================================================= */

/* Section titles need margin on left and top */
.more-section-title {
    margin-left: var(--space-4) !important;
    margin-top: var(--space-4) !important;
    padding: 0 !important;
}

/* First section needs less top margin */
.more-section:first-child .more-section-title {
    margin-top: var(--space-2) !important;
}

/* iPad (between 480px and 820px) - use 6 columns */
@media (min-width: 481px) and (max-width: 820px) {
    .more-grid {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: var(--space-1);
        padding: var(--space-2);
    }
    
    .more-grid-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .more-grid-item span {
        font-size: 10px;
    }
}

/* Mobile (under 480px) - keep 4 columns */
@media (max-width: 480px) {
    .more-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* =============================================================================
   36. FIX: Input backgrounds in dark mode (search, date, BPM)
   ============================================================================= */

/* Force dark mode styles for ALL input types */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] .search-input,
[data-theme="dark"] .form-input,
[data-theme="dark"] .songs-filters input,
[data-theme="dark"] .filter-input {
    background-color: var(--bg-input, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
    /* Remove any inner shadows or backgrounds */
    box-shadow: none !important;
}

/* Fix webkit autofill background */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input, #1e293b) inset !important;
    -webkit-text-fill-color: var(--text-primary, #f1f5f9) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Metronome modifier settings inputs */
[data-theme="dark"] .sb-modifier-settings input,
[data-theme="dark"] .sb-modifier-settings select {
    background-color: var(--bg-input, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border: 1px solid var(--border-color, #334155) !important;
    border-radius: var(--border-radius-md);
    padding: var(--space-2);
}

/* Date picker specific fix */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
}

/* Stats filter date inputs */
[data-theme="dark"] .stats-filters input[type="date"],
[data-theme="dark"] .filter-date,
[data-theme="dark"] .date-input {
    background-color: var(--bg-input, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border: 1px solid var(--border-color, #334155) !important;
}

/* Search input wrapper - ensure no white background */
[data-theme="dark"] .search-wrapper,
[data-theme="dark"] .search-input-wrapper,
[data-theme="dark"] .input-wrapper {
    background-color: transparent !important;
}

/* Also fix the inner input inside wrappers */
[data-theme="dark"] .search-wrapper input,
[data-theme="dark"] .search-input-wrapper input {
    background-color: var(--bg-input, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}


/* Fix search-input-compact wrapper in dark mode */
[data-theme="dark"] .search-input-compact {
    background-color: var(--bg-input, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
}

[data-theme="dark"] .search-input-compact input {
    background-color: transparent !important;
    color: var(--text-primary, #f1f5f9) !important;
}

/* Filter select compact */
[data-theme="dark"] .filter-select-compact {
    background-color: var(--bg-input, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
    color: var(--text-primary, #f1f5f9) !important;
}

/* =============================================================================
   37. BPM PILL - Smooth subtle glow animation on metronome beat
   ============================================================================= */
.bpm-pill.beat-pulse {
    animation: bpmPillGlow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes bpmPillGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(78, 205, 196, 0);
        background: var(--bg-secondary);
    }
    30% {
        box-shadow: 0 0 8px 2px rgba(78, 205, 196, 0.4);
        background: rgba(78, 205, 196, 0.15);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(78, 205, 196, 0);
        background: var(--bg-secondary);
    }
}

/* Playing state indicator for bpm-play-btn */
.bpm-play-btn.playing {
    background: var(--color-success, #10b981) !important;
}

/* =============================================================================
   38. ZOOM - Affect entire song content including lyrics and chords
   ============================================================================= */
.song-lyrics-modern {
    transition: font-size 0.2s ease;
}

.song-lyrics-modern .chord-line,
.song-lyrics-modern .lyric-text,
.song-lyrics-modern .chord-span,
.song-lyrics-modern .section-header,
.song-lyrics-modern .section-title,
.song-lyrics-modern .lyric-line,
.song-lyrics-modern .lyric-line-wrapper {
    font-size: inherit;
}

/* =============================================================================
   39. FIX: Chord editor squares too large in responsive (touch) mode
   ============================================================================= */
@media (pointer: coarse) {
    .ce-chord {
        min-width: auto !important;
        min-height: auto !important;
        padding: 6px 10px !important;
        font-size: 0.85em !important;
        line-height: 1.2 !important;
    }
    
    .ce-chord::before {
        content: "";
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
    }
}
/* =============================================================================
   40. FIX: Song editor page layout - margins, inputs, dark mode
   ============================================================================= */
.song-editor-page {
    padding: var(--space-4) !important;
    max-width: 100% !important;
}

[data-theme="dark"] .song-editor-compact-header input,
[data-theme="dark"] .song-editor-compact-header select,
[data-theme="dark"] .song-field-title,
[data-theme="dark"] .song-field-author,
[data-theme="dark"] .song-field-key,
[data-theme="dark"] .song-field-bpm,
[data-theme="dark"] .song-field-compas,
[data-theme="dark"] .song-field-status {
    background-color: var(--bg-input, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}

.song-editor-compact-header {
    padding: var(--space-3) var(--space-4) !important;
    margin-bottom: var(--space-3) !important;
    border-radius: var(--border-radius-lg) !important;
    background: var(--bg-card) !important;
}

/* =============================================================================
   41. FIX: Center second row of song edit fields in mobile
   ============================================================================= */
@media (max-width: 820px) {
    .song-editor-fields {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: var(--space-2) !important;
        justify-content: center !important;
        align-items: flex-end !important;
    }
    
    .song-field-group {
        flex: 1 1 auto !important;
        min-width: 80px !important;
    }
    
    .song-field-group:first-child {
        flex: 1 1 100% !important;
    }
    
    .song-field-group:nth-child(2) {
        flex: 1 1 45% !important;
    }
    
    .song-field-group.song-field-small {
        flex: 0 1 auto !important;
        min-width: 70px !important;
    }
}
/* =============================================================================
   42. FIX: Toolbar buttons visibility and font selector
   ============================================================================= */
[data-theme="dark"] .minimal-toolbar .minimal-btn,
[data-theme="dark"] .minimal-toolbar button:not(.color-preset) {
    background-color: var(--bg-card, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
    color: var(--text-primary, #f1f5f9) !important;
}

[data-theme="dark"] .minimal-toolbar .minimal-btn:hover,
[data-theme="dark"] .minimal-toolbar button:not(.color-preset):hover {
    background-color: var(--bg-card-hover, #334155) !important;
}

[data-theme="dark"] .minimal-toolbar select,
[data-theme="dark"] .minimal-font-select,
[data-theme="dark"] .font-size-select,
[data-theme="dark"] #font-size-select {
    background-color: var(--bg-input, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}

/* =============================================================================
   43. FIX: Hide fullscreen button on mobile/tablet
   ============================================================================= */
@media (max-width: 820px) {
    #btn-fullscreen {
        display: none !important;
    }
}

/* =============================================================================
   44. FIX: Metronome dial knob movement on beat
   ============================================================================= */
@media (max-width: 820px) {
    .sb-dial.beat-pulse .sb-dial-knob {
        transform: rotate(calc(var(--progress, 0) * 360deg - 90deg)) translateY(-60px) !important;
        animation: none !important;
    }
}
/* =============================================================================
   45. FIX: Section title margins in More menu
   ============================================================================= */
.more-page .more-section-title {
    margin-left: var(--space-4) !important;
    margin-top: var(--space-4) !important;
    padding-left: 0 !important;
}

.more-page .more-section:first-child .more-section-title {
    margin-top: var(--space-2) !important;
}

/* =============================================================================
   46. FIX: White search inputs - comprehensive dark mode fix
   ============================================================================= */
[data-theme="dark"] #song-search,
[data-theme="dark"] .song-search,
[data-theme="dark"] [id*="search"],
[data-theme="dark"] [class*="search-input"] {
    background-color: var(--bg-input, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}

[data-theme="dark"] .search-input-compact,
[data-theme="dark"] .songs-filters > *:first-child,
[data-theme="dark"] .filter-search-wrapper {
    background-color: var(--bg-input, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
}

[data-theme="dark"] .song-list .song-badge-bpm {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #a5b4fc !important;
}

/* =============================================================================
   48. Mobile filter popup button for small screens
   ============================================================================= */
@media (max-width: 480px) {
    .songs-filters {
        flex-wrap: wrap !important;
    }
    
    .songs-filters .search-input {
        flex: 1 1 100% !important;
        max-width: none !important;
        margin-bottom: var(--space-2);
    }
    
    .songs-filters select {
        flex: 1 !important;
        min-width: 0 !important;
    }
}

/* =============================================================================
   38b. ZOOM FIX - Override fixed font-sizes to use inherit for proper scaling
   ============================================================================= */
#song-lyrics.song-lyrics-modern .lyric-line {
    font-size: inherit !important;
}

#song-lyrics.song-lyrics-modern .chord-line {
    font-size: inherit !important;
}

#song-lyrics.song-lyrics-modern .section-header {
    font-size: 1em !important;
}

#song-lyrics.song-lyrics-modern .song-chord {
    font-size: inherit !important;
}

#song-lyrics.song-lyrics-modern .tab-line {
    font-size: inherit !important;
}

/* =============================================================================
   49. FIX: Comprehensive dial knob fix for tablet and mobile
   ============================================================================= */
/* iPad and tablets - ensure dial knob doesn't jump */
@media (max-width: 1024px) and (min-width: 481px) {
    .sb-dial.beat-pulse .sb-dial-knob {
        transform: rotate(calc(var(--progress, 0) * 360deg - 90deg)) translateY(-60px) scale(1.1) !important;
        transition: none !important;
    }
}

/* Mobile phones */
@media (max-width: 480px) {
    .sb-dial.beat-pulse .sb-dial-knob {
        transform: rotate(calc(var(--progress, 0) * 360deg - 90deg)) translateY(-55px) scale(1.05) !important;
        transition: none !important;
    }
}

/* Prevent knob from jumping during beat pulse on any device */
@media (pointer: coarse) {
    .sb-dial.beat-pulse .sb-dial-knob {
        transform: rotate(calc(var(--progress, 0) * 360deg - 90deg)) translateY(-60px) scale(1.1) !important;
    }
}

/* =============================================================================
   50. FIX: Enhanced section title margins in More menu for mobile
   ============================================================================= */
@media (max-width: 820px) {
    .more-page .more-section-title {
        margin-left: 16px !important;
        margin-top: 24px !important;
        margin-bottom: 12px !important;
        padding-left: 0 !important;
        font-size: 0.9rem !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    .more-page .more-section:first-child .more-section-title {
        margin-top: 16px !important;
    }
    
    /* Also add margin to the grid items container */
    .more-page .more-section .more-grid {
        padding: 0 8px !important;
    }
}

/* =============================================================================
   51. FIX: Comprehensive dark mode fix for ALL inputs and selects
   ============================================================================= */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input:not([type]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--bg-input, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}

[data-theme="dark"] input::placeholder {
    color: var(--text-muted, #64748b) !important;
}

/* Specific overrides for known problem areas */
[data-theme="dark"] .songs-page input,
[data-theme="dark"] .songs-page select,
[data-theme="dark"] .setlist-page input,
[data-theme="dark"] .setlist-page select,
[data-theme="dark"] .ministers-page input,
[data-theme="dark"] .ministers-page select,
[data-theme="dark"] .stats-page input,
[data-theme="dark"] .stats-page select {
    background-color: var(--bg-input, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}

/* Filter bars specifically */
[data-theme="dark"] .songs-filters input,
[data-theme="dark"] .songs-filters select,
[data-theme="dark"] .filter-bar input,
[data-theme="dark"] .filter-bar select {
    background-color: var(--bg-input, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}

/* =============================================================================
   52. Mobile filter popup button
   ============================================================================= */
@media (max-width: 480px) {
    /* Mobile filter toggle button */
    .mobile-filter-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-md);
        color: var(--text-secondary);
        cursor: pointer;
    }
    
    .mobile-filter-toggle.active {
        background: var(--color-primary);
        color: white;
        border-color: var(--color-primary);
    }
    
    /* Filter dropdown panel */
    .mobile-filter-panel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-lg);
        padding: var(--space-3);
        box-shadow: var(--shadow-lg);
        z-index: 100;
        display: none;
    }
    
    .mobile-filter-panel.open {
        display: block;
    }
    
    .mobile-filter-panel select {
        width: 100%;
        margin-bottom: var(--space-2);
    }
}

/* Desktop: hide filter toggle */
@media (min-width: 481px) {
    .mobile-filter-toggle {
        display: none !important;
    }
}

/* =============================================================================
   53. FIX: BPM badge colors - consistent across all views and themes
   ============================================================================= */
/* Base BPM badge - using warm orange/coral color for tempo indicator */
.song-badge-bpm,
.song-bpm-badge,
.meta-badge-bpm {
    background: rgba(251, 146, 60, 0.15) !important;
    color: #fb923c !important;
    font-weight: 600;
}

/* Dark mode - brighter to stand out */
[data-theme="dark"] .song-badge-bpm,
[data-theme="dark"] .song-bpm-badge,
[data-theme="dark"] .meta-badge-bpm {
    background: rgba(251, 146, 60, 0.2) !important;
    color: #fdba74 !important;
}

/* Mobile cards - ensure visibility */
@media (max-width: 820px) {
    .song-badge-bpm,
    .song-bpm-badge {
        padding: 4px 10px !important;
        font-size: 0.75rem !important;
        border-radius: 12px !important;
    }
}

/* Song list table BPM column */
.song-list .song-bpm,
.song-table .song-bpm {
    color: #fb923c !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .song-list .song-bpm,
[data-theme="dark"] .song-table .song-bpm {
    color: #fdba74 !important;
}

/* =============================================================================
   54. FIX: Double column view for tablets, single for mobile
   ============================================================================= */
/* Tablet (481px - 820px): Keep 2 columns when enabled */
@media (min-width: 481px) and (max-width: 820px) {
    .song-lyrics-modern.columns-2 {
        column-count: 2 !important;
        column-gap: 2rem !important;
    }
    
    /* Show column toggle button on tablet */
    #btn-toggle-columns {
        display: inline-flex !important;
    }
}

/* Mobile (≤480px): Force single column, hide toggle button */
@media (max-width: 480px) {
    .song-lyrics-modern.columns-1,
    .song-lyrics-modern.columns-2 {
        /* column-count: 1 !important; */
    }
    
    /* Hide column toggle button on mobile */
    #btn-toggle-columns {
        display: none !important;
    }
}

/* =============================================================================
   55. ZOOM FIX - Comprehensive font-size inheritance for all song content
   ============================================================================= */
/* Force all song content to inherit font-size from #song-lyrics */
#song-lyrics .lyric-line,
#song-lyrics .chord-line,
#song-lyrics .song-chord,
#song-lyrics .section-header,
#song-lyrics .tab-line,
#song-lyrics .lyric-line-wrapper,
#song-lyrics .lyric-content,
.song-lyrics-modern .lyric-line,
.song-lyrics-modern .chord-line,
.song-lyrics-modern .song-chord,
.song-lyrics-modern .section-header,
.song-lyrics-modern .tab-line {
    font-size: inherit !important;
}

/* Ensure chord line maintains relative sizing */
#song-lyrics .chord-line,
.song-lyrics-modern .chord-line {
    font-size: 1em !important;
}

/* Section headers - inherit size for better visibility */
#song-lyrics .section-header,
.song-lyrics-modern .section-header {
    font-size: 1em !important;
}

/* Tab lines smaller */
#song-lyrics .tab-line,

    .chord-editor .ce-chord,
    .ce-editor .ce-chord,
    .ce-chord {
        min-width: unset !important;
        min-height: unset !important;
        width: auto !important;
        height: auto !important;
        padding: 2px 8px !important;
        font-size: 0.85em !important;
        line-height: 1.2 !important;
        display: inline-block !important;
    }
    
    /* Touch area using pseudo-element - expands hit area without visual change */
    .chord-editor .ce-chord::before,
    .ce-editor .ce-chord::before,
    .ce-chord::before {
        content: ;
        position: absolute;
        top: -12px;
        left: -8px;
        right: -8px;
        bottom: -12px;
        /* No background - invisible but touchable */
    }
}

/* Tablet specific - slightly larger padding for better touch */
@media (min-width: 481px) and (max-width: 820px) and (pointer: coarse) {
    .ce-chord {
        padding: 3px 10px !important;
    }
}

/* Mobile - keep compact like desktop */
@media (max-width: 480px) {
    .ce-chord {
        padding: 2px 6px !important;
        font-size: 0.8em !important;
    }
}

/* =============================================================================
   57. User action buttons - icon buttons with hover effects
   ============================================================================= */
.btn-danger-hover:hover {
    color: var(--color-danger, #ef4444) !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

.btn-group {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.btn-icon {
    padding: 6px !important;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon i {
    font-size: 14px;
}

/* =============================================================================
   58. Settings appearance tab - responsive layout
   ============================================================================= */
@media (max-width: 480px) {
    /* Theme options - stack vertically on mobile */
    [data-tab="appearance"] .card-body .flex.gap-4 {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    /* Radio labels - full width */
    [data-tab="appearance"] label.flex {
        padding: 12px 16px;
        background: var(--bg-secondary);
        border-radius: var(--border-radius-md);
        border: 1px solid var(--border-color);
    }
    
    [data-tab="appearance"] label.flex input[type="radio"]:checked + span {
        color: var(--color-primary);
        font-weight: 600;
    }
    
    /* Color picker layout */
    [data-tab="appearance"] .input-group .flex.items-center {
        flex-direction: row;
        justify-content: flex-start;
    }
}

/* General settings card improvements for mobile */
@media (max-width: 820px) {
    .settings-page .card {
        margin-bottom: var(--space-3);
    }
    
    .settings-page .card-body {
        padding: var(--space-3);
    }
    
    .settings-page .input-group {
        margin-bottom: var(--space-3);
    }
    
    .settings-page .input-group label {
        margin-bottom: var(--space-2);
        display: block;
    }
}

/* =============================================================================
   59. Minister selector - dark mode fix and positioning
   ============================================================================= */
/* Dark mode for control selects */
[data-theme="dark"] .control-select,
[data-theme="dark"] #minister-select,
[data-theme="dark"] #version-select,
[data-theme="dark"] .control-select-group select {
    background-color: var(--bg-card, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}

[data-theme="dark"] .control-select option,
[data-theme="dark"] #minister-select option,
[data-theme="dark"] #version-select option {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* Control select group styling */
.control-select-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.control-select-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.control-select {
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 12px;
    min-width: 80px;
}

/* Mobile: Move minister select after BPM in center */
@media (max-width: 820px) {
    /* Hide label on mobile to save space */
    .control-select-label {
        display: none;
    }
    
    .control-select {
        padding: 6px 10px;
        font-size: 13px;
    }
    
    .control-select-group {
        flex-shrink: 0;
    }
}

/* =============================================================================
   60. Toast notifications - appear from top on mobile
   ============================================================================= */
@media (max-width: 820px) {
    .toast-container {
        top: var(--space-4) !important;
        bottom: auto !important;
        right: var(--space-4) !important;
        left: var(--space-4) !important;
        max-width: none !important;
    }
    
    .toast {
        transform: translateY(-100%) !important;
    }
    
    .toast.toast-enter {
        transform: translateY(0) !important;
    }
    
    .toast.toast-exit {
        transform: translateY(-100%) !important;
    }
}

/* Modal also from top */
@media (max-width: 820px) {
    .modal-content,
    .modal {
        animation: modalSlideFromTop 0.25s ease-out !important;
    }
    
    @keyframes modalSlideFromTop {
        from {
            opacity: 0;
            transform: translateY(-30px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}

/* =============================================================================
   61. COMPREHENSIVE DARK MODE INPUT FIX
   All inputs, selects, textareas must have dark background in dark mode
   ============================================================================= */

/* Base input styling for dark mode - MAXIMUM SPECIFICITY */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="tel"] {
    background-color: var(--bg-input, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}

/* Placeholder text */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted, #64748b) !important;
    opacity: 1;
}

/* Select options */
[data-theme="dark"] select option,
[data-theme="dark"] datalist option {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* Focus states */
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--color-primary, #818cf8) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}

/* Specific page overrides */
/* Songs page */
[data-theme="dark"] .songs-page input,
[data-theme="dark"] .songs-page select,
[data-theme="dark"] .songs-filters input,
[data-theme="dark"] .songs-filters select {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* Song editor page */
[data-theme="dark"] .song-editor-page input,
[data-theme="dark"] .song-editor-page select,
[data-theme="dark"] .song-editor-page textarea,
[data-theme="dark"] .song-editor-compact-header input,
[data-theme="dark"] .song-editor-compact-header select {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* Setlist page */
[data-theme="dark"] .setlist-page input,
[data-theme="dark"] .setlist-page select {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* Ministers page */
[data-theme="dark"] .ministers-page input,
[data-theme="dark"] .ministers-page select {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* Settings page */
[data-theme="dark"] .settings-page input,
[data-theme="dark"] .settings-page select,
[data-theme="dark"] .settings-page textarea {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* Stats page */
[data-theme="dark"] .stats-page input,
[data-theme="dark"] .stats-page select {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* Modal inputs */
[data-theme="dark"] .modal input,
[data-theme="dark"] .modal select,
[data-theme="dark"] .modal textarea,
[data-theme="dark"] .modal-body input,
[data-theme="dark"] .modal-body select,
[data-theme="dark"] .modal-body textarea {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* Card inputs */
[data-theme="dark"] .card input,
[data-theme="dark"] .card select,
[data-theme="dark"] .card textarea {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* Input group */
[data-theme="dark"] .input-group input,
[data-theme="dark"] .input-group select,
[data-theme="dark"] .input-group textarea {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* Filter bar */
[data-theme="dark"] .filter-bar input,
[data-theme="dark"] .filter-bar select {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* Search inputs anywhere */
[data-theme="dark"] [class*="search"] input,
[data-theme="dark"] input[class*="search"],
[data-theme="dark"] input[id*="search"] {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* =============================================================================
   62. DEFINITIVE FIX: Metronome dial knob - prevent movement on ALL touch devices
   ============================================================================= */
/* For any touch device - prevent the dial knob from jumping */
@media (pointer: coarse), (max-width: 1024px) {
    /* Override the beat-pulse transform to use smaller translateY */
    .sb-dial.beat-pulse .sb-dial-knob {
        transform: rotate(calc(var(--progress, 0) * 360deg - 90deg)) translateY(-60px) scale(1.1) !important;
        animation: none !important;
        transition: none !important;
    }
    
    /* Also fix the base dial knob position */
    .sb-dial-knob {
        transform: rotate(calc(var(--progress, 0) * 360deg - 90deg)) translateY(-60px) !important;
    }
}

/* Specifically for iPad portrait and landscape */
@media (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {
    .sb-dial.beat-pulse .sb-dial-knob {
        transform: rotate(calc(var(--progress, 0) * 360deg - 90deg)) translateY(-60px) scale(1.1) !important;
    }
    
    .sb-dial-knob {
        transform: rotate(calc(var(--progress, 0) * 360deg - 90deg)) translateY(-60px) !important;
    }
}

/* =============================================================================
   63. FIX: Metronome BPM input - ensure dark background in all themes
   ============================================================================= */
/* The tempo input must be transparent to show the dark dial behind it */
.sb-tempo-input {
    background: transparent !important;
    color: white !important;
    border: none !important;
    caret-color: #4ecdc4;
}

.sb-tempo-input:focus {
    background: transparent !important;
    border-bottom: 2px solid #4ecdc4 !important;
    outline: none !important;
}

/* Dial center background */
.sb-dial-center {
    background: #2d3748 !important;
    color: #a0aec0 !important;
}

/* Dial track */
.sb-dial-track {
    border-color: #3d4a5c !important;
}

/* Dial buttons */
.sb-dial-btn {
    background: #2d3748 !important;
    color: #a0aec0 !important;
}

.sb-dial-btn:hover {
    background: #4a5568 !important;
    color: #4ecdc4 !important;
}

/* Mobile specific - ensure no white backgrounds */
@media (max-width: 820px) {
    .sb-tempo-input {
        background: transparent !important;
        -webkit-appearance: none;
        -moz-appearance: textfield;
    }
    
    .sb-tempo-input::-webkit-outer-spin-button,
    .sb-tempo-input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0;
    }
    
    /* Metronome popup background */
    .metronome-popup {
        background: var(--bg-card, #1e293b) !important;
    }
    
    .metronome-popup-header {
        background: var(--bg-card, #1e293b) !important;
        border-bottom-color: var(--border-color, #334155) !important;
    }
}

/* Ensure metronome module always has dark theme colors */
.metronome-module,
#song-metronome,
.metronome-popup {
    --metronome-bg: #1a202c;
    --metronome-surface: #2d3748;
    --metronome-accent: #4ecdc4;
}

/* =============================================================================
   64. METRONOME REDESIGN FOR TABLET (iPad) - Matching reference design
   ============================================================================= */
@media (min-width: 481px) and (max-width: 1024px) {
    /* Main container - dark centered layout */
    .sb-container {
        min-height: auto !important;
        padding: 24px !important;
        background: #1a1d2e !important;
        border-radius: 24px !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        position: relative !important;
    }
    
    /* Hide timer display on tablet */
    .sb-timer-display {
        display: none !important;
    }
    
    /* Beat indicators - vertical bars style */
    .sb-beats {
        display: flex !important;
        gap: 16px !important;
        margin-bottom: 20px !important;
        padding: 0 !important;
        background: transparent !important;
        justify-content: center !important;
    }
    
    .sb-beat {
        padding: 8px !important;
        background: transparent !important;
    }
    
    .sb-beat-bars {
        width: 48px !important;
        gap: 4px !important;
    }
    
    .sb-bar {
        height: 16px !important;
        background: #2d3748 !important;
        border-radius: 4px !important;
    }
    
    .sb-bar.active {
        background: #4ecdc4 !important;
    }
    
    /* Compass counter - new element */
    .sb-compass-counter {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: rgba(78, 205, 196, 0.15);
        color: #4ecdc4;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 20px;
    }
    
    /* Control buttons row - 4 buttons in a row */
    .sb-controls-row {
        display: flex !important;
        gap: 12px !important;
        margin-bottom: 24px !important;
        justify-content: center !important;
    }
    
    .sb-ctrl-btn {
        width: 56px !important;
        height: 56px !important;
        border-radius: 16px !important;
        background: #2d3748 !important;
        border: none !important;
        color: #a0aec0 !important;
        font-size: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
    }
    
    .sb-ctrl-btn.active,
    .sb-ctrl-btn:hover {
        background: #4ecdc4 !important;
        color: #1a1d2e !important;
    }
    
    /* Tempo section */
    .sb-tempo-section {
        text-align: center !important;
        margin-bottom: 20px !important;
    }
    
    .sb-tempo-name {
        font-size: 14px !important;
        color: #718096 !important;
        margin-bottom: 4px !important;
    }
    
    .sb-tempo-display {
        justify-content: center !important;
    }
    
    .sb-tempo-input {
        font-size: 64px !important;
        width: 140px !important;
        color: white !important;
        background: transparent !important;
    }
    
    .sb-tempo-unit {
        font-size: 16px !important;
        color: #718096 !important;
        margin-left: -8px !important;
    }
    
    /* Dial container with +/- buttons */
    .sb-dial-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 24px !important;
        margin-bottom: 24px !important;
    }
    
    .sb-dial {
        width: 180px !important;
        height: 180px !important;
    }
    
    .sb-dial-btn {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        background: #2d3748 !important;
        border: 2px solid #3d4a5c !important;
        color: #a0aec0 !important;
        font-size: 20px !important;
    }
    
    .sb-dial-btn:hover {
        background: #3d4a5c !important;
        color: #4ecdc4 !important;
    }
    
    .sb-dial-center {
        width: 50px !important;
        height: 50px !important;
        background: #2d3748 !important;
    }
    
    .sb-dial-knob {
        width: 16px !important;
        height: 16px !important;
        transform: rotate(calc(var(--progress, 0) * 360deg - 90deg)) translateY(-75px) !important;
    }
    
    /* Bottom row - Play left, TAP right */
    .sb-bottom-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        width: 100% !important;
        padding: 0 16px !important;
        margin-top: auto !important;
    }
    
    .sb-play-btn {
        width: 72px !important;
        height: 72px !important;
        border-radius: 20px !important;
        background: #4ecdc4 !important;
        border: none !important;
        color: #1a1d2e !important;
        font-size: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .sb-play-btn.playing {
        background: #ff6b6b !important;
    }
    
    .sb-tap-btn {
        width: 64px !important;
        height: 64px !important;
        border-radius: 16px !important;
        background: #2d3748 !important;
        border: none !important;
        color: #a0aec0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        gap: 4px !important;
    }
    
    .sb-tap-btn i {
        font-size: 20px !important;
    }
    
    .sb-tap-btn:hover {
        background: #3d4a5c !important;
        color: #4ecdc4 !important;
    }
    
    /* Hide volume bar - will be in settings popup */
    .sb-volume {
        display: none !important;
    }
    
    /* Settings popup with volume */
    .sb-settings-popup {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #2d3748;
        border-radius: 16px;
        padding: 20px;
        min-width: 280px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        z-index: 100;
        display: none;
    }
    
    .sb-settings-popup.open {
        display: block;
    }
    
    .sb-settings-popup h4 {
        color: #a0aec0;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 12px;
    }
    
    .sb-settings-volume {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .sb-settings-volume i {
        color: #4ecdc4;
        font-size: 18px;
    }

    flex-direction: column;

    width: 32px;

        margin: 0 auto;
        position: relative;
    }

    /* Beat indicators - larger for desktop */
    .sb-beats {
        display: flex;
        gap: 20px;
        margin-bottom: 24px;
        padding: 0;
        background: transparent;
        justify-content: center;
    }

    .sb-beat {
        width: 56px;



   TAMAÑOS POR BREAKPOINT




/* =============================================================================
   FIX: Export Dropdown in Song Editor
   ============================================================================= */

.export-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.export-dropdown-wrapper .btn {
    display: flex;
    align-items: center;
    gap: 4px;
}

.export-dropdown-wrapper .dropdown-arrow {
    opacity: 0.6;
}

.export-dropdown-menu {
    position: fixed;
    background: var(--bg-card, #1e293b);
    border: 1px solid var(--border-color, #334155);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    min-width: 160px;
    z-index: var(--z-popover);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.15s ease;
    overflow: hidden;
}

.export-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.export-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary, #f1f5f9);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.export-dropdown-item:hover {
    background: var(--color-primary-light, rgba(99, 102, 241, 0.1));
}

.export-dropdown-item svg {
    color: var(--text-secondary, #94a3b8);
    flex-shrink: 0;
}

.export-dropdown-item:hover svg {
    color: var(--color-primary, #6366f1);
}





/* =============================================================================
   FIX: Contenedor .main - permitir overflow para sticky y dropdowns
   El overflow: hidden en .main rompe position: sticky y oculta dropdowns
   ============================================================================= */

/* Cuando hay un editor de canciones, permitir overflow visible */
.main:has(.song-editor-page) {
    overflow: visible;
}

/* Asegurar que el song-editor-page use todo el alto disponible */
.song-editor-page {
    overflow: visible;
}

/* El header sticky necesita z-index para estar sobre el contenido */
.song-editor-compact-header {
    z-index: 100;
}

/* El dropdown debe tener z-index mayor que el header */
/* =============================================================================
   SONG EDITOR INFO GRID - Columnas iguales
   ============================================================================= */

/* Resetear estilos específicos dentro del grid para que sean uniformes */
.song-editor-info-grid .song-editor-media,
.song-editor-info-grid .song-editor-tags,
.song-editor-info-grid .song-editor-minister-keys {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 12px;
    margin: 0;
    min-height: 120px;
}

/* Asegurar que el grid tenga columnas iguales */
.song-editor-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-top: var(--space-6); /* Margen entre editor y columnas */
    padding-bottom: 50vh; /* Permitir scroll adicional para ver hasta mitad de pantalla */
}

/* Headers uniformes */
.song-editor-info-grid .info-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.song-editor-info-grid .info-section-header h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

/* Contenido uniforme */
.song-editor-info-grid .info-section-content {
    max-height: 150px;
    overflow-y: auto;
}

/* ===== TAGS EDITOR IN SONG-EDITOR-INFO-GRID ===== */
.song-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    min-height: 24px;
}

.song-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.song-tag-chip .tag-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.song-tag-chip .remove-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    margin-left: var(--space-1);
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: all 0.2s ease;
}

.song-tag-chip .remove-tag:hover {
    background: var(--bg-danger-subtle);
    color: var(--color-danger);
}

/* Add Tag Dropdown */
.add-tag-dropdown {
    position: relative;
}

.add-tag-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-tag-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--bg-primary-subtle);
}

.tag-dropdown-menu {
    position: fixed;
    min-width: 180px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: var(--z-popover);
    display: none;
}

.tag-dropdown-menu.show {
    display: block;
}

.tag-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    text-align: left;
    font-size: var(--font-size-sm);
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s ease;
}

.tag-dropdown-item:hover {
    background: var(--bg-secondary);
}

.tag-dropdown-item .tag-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.empty-tags-msg {
    padding: var(--space-3);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin: 0;
}

/* =============================================================================
   INSTRUMENT SELECTOR - Song Editor Header
   ============================================================================= */

.song-field-instrument {
    min-width: 100px;
}

.song-field-instrument-select {
    width: 100px;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.song-field-instrument-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Highlighted when instrument is active (not Original) */
.song-field-instrument-select.instrument-active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    font-weight: 500;
}

/* Badge indicator for instrument mode */
.instrument-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--color-primary);
    color: white;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}

.instrument-mode-badge svg {
    width: 12px;
    height: 12px;
}

/* Warning button style for reset */
.btn-warning {
    background: #f59e0b;
    color: white;
    border: 1px solid #f59e0b;
}

.btn-warning:hover {
    background: #d97706;
    border-color: #d97706;
}

.btn-warning:active {
    background: #b45309;
    border-color: #b45309;
}



/* ===== VOCAL MONITOR LIGHT MODE ===== */
[data-theme="light"] .vocal-monitor-container,
[data-theme="light"] .pitch-monitor {
    background: var(--bg-card);
}

[data-theme="light"] .pitch-key {
    background: #e2e8f0;
    color: #4a5568;
}

[data-theme="light"] .pitch-key.sharp {
    background: #4a5568;
    color: white;
}

[data-theme="light"] .pitch-grid-line {
    border-color: #e2e8f0;
}

[data-theme="light"] .pitch-display-panel {
    background: white;
    border: 1px solid var(--border-color);
}

/* ===== VOICE STACK LIGHT MODE ===== */
[data-theme="light"] .vs-container {
    background: var(--bg-secondary);
}

[data-theme="light"] .vs-toolbar {
    background: white;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .vs-timeline {
    background: #f7fafc;
}

[data-theme="light"] .vs-sidebar {
    background: white;
    border-right: 1px solid var(--border-color);
}

/* ===== AUDIO ANALYZER LIGHT MODE ===== */
[data-theme="light"] .yt-page {
    background: var(--bg-secondary);
}

[data-theme="light"] .yt-source-tabs {
    background: #e2e8f0;
}

[data-theme="light"] .yt-source-tab {
    color: #4a5568;
}

[data-theme="light"] .yt-source-tab:hover {
    color: #2d3748;
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .yt-input-wrapper {
    background: white;
    border: 1px solid var(--border-color);
}

[data-theme="light"] .yt-input-wrapper input {
    color: #1a202c;
}

[data-theme="light"] .yt-info-box {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0369a1;
}

[data-theme="light"] .yt-warning-box {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #b45309;
}

/* ===== STEM SEPARATOR LIGHT MODE ===== */
[data-theme="light"] .stem-page {
    background: var(--bg-secondary);
}

[data-theme="light"] .stem-section {
    background: white;
    border: 1px solid var(--border-color);
}

[data-theme="light"] .stem-section-title {
    color: #1a202c;
}

[data-theme="light"] .stem-step {
    background: #e2e8f0;
    color: white;
}

[data-theme="light"] .stem-source-tabs {
    background: #e2e8f0;
}

[data-theme="light"] .stem-source-tab {
    color: #4a5568;
}

[data-theme="light"] .stem-source-tab:hover {
    color: #2d3748;
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .stem-url-input-wrapper {
    background: white;
    border: 1px solid var(--border-color);
}

[data-theme="light"] .stem-url-input {
    color: #1a202c;
}

[data-theme="light"] .stem-info-box {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0369a1;
}

[data-theme="light"] .stem-warning-box {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #b45309;
}


/* ===== AUDIO ANALYZER - ENHANCED LIGHT MODE ===== */
[data-theme="light"] .yt-upload-dropzone {
    background: #f7fafc;
    border-color: #cbd5e0;
}

[data-theme="light"] .yt-upload-dropzone:hover,
[data-theme="light"] .yt-upload-dropzone.drag-over {
    background: #e0f2fe;
    border-color: #4ecdc4;
}

[data-theme="light"] .yt-upload-dropzone p {
    color: #2d3748;
}

[data-theme="light"] .yt-upload-dropzone span {
    color: #718096;
}

[data-theme="light"] .yt-upload-progress {
    background: white;
    border: 1px solid var(--border-color);
}

[data-theme="light"] .yt-upload-file-info {
    color: #2d3748;
}

[data-theme="light"] .yt-url-input-wrapper {
    background: white;
    border-color: #e2e8f0;
}

[data-theme="light"] .yt-url-input-wrapper:focus-within {
    border-color: #ff0000;
}

[data-theme="light"] .yt-url-input {
    color: #1a202c;
}

[data-theme="light"] .yt-url-input::placeholder {
    color: #a0aec0;
}

/* ===== STEM SEPARATOR - ENHANCED LIGHT MODE ===== */
[data-theme="light"] .stem-section-title {
    color: #1a202c;
}

[data-theme="light"] .stem-url-input-wrapper {
    background: white;
    border-color: #e2e8f0;
}

[data-theme="light"] .stem-url-input-wrapper:focus-within {
    border-color: #667eea;
}

[data-theme="light"] .stem-url-input {
    color: #1a202c;
}

[data-theme="light"] .stem-url-input::placeholder {
    color: #a0aec0;
}

[data-theme="light"] .stem-upload-dropzone {
    background: #f7fafc;
    border-color: #cbd5e0;
}

[data-theme="light"] .stem-upload-dropzone:hover {
    background: #eef2ff;
    border-color: #667eea;
}

[data-theme="light"] .stem-upload-dropzone.drag-over {
    background: #e0f2fe;
    border-color: #4ecdc4;
}

[data-theme="light"] .stem-upload-dropzone p {
    color: #2d3748;
}

[data-theme="light"] .stem-upload-dropzone span {
    color: #718096;
}

[data-theme="light"] .stem-source-card {
    background: white;
    border-color: #e2e8f0;
}

[data-theme="light"] .stem-source-card:hover {
    border-color: #667eea;
}

[data-theme="light"] .stem-source-card h3 {
    color: #1a202c;
}

[data-theme="light"] .stem-source-card p {
    color: #718096;
}

[data-theme="light"] .stem-history-section.stem-history-initial {
    background: linear-gradient(180deg, rgba(78, 205, 196, 0.08) 0%, rgba(255, 255, 255, 0.5) 100%);
    border-color: rgba(78, 205, 196, 0.3);
}

[data-theme="light"] .stem-history-thumb {
    background: #e2e8f0;
}

/* Model Cards - Light Mode */
[data-theme="light"] .stem-model-card {
    background: white;
    border-color: #e2e8f0;
}

[data-theme="light"] .stem-model-card:hover {
    border-color: #667eea;
}

[data-theme="light"] .stem-model-card.selected {
    border-color: #667eea;
    background: #eef2ff;
}

[data-theme="light"] .stem-tag {
    background: #e2e8f0;
    color: #4a5568;
}

[data-theme="light"] .stem-tag.primary {
    background: #e0f2fe;
    color: #0284c7;
}

/* ===== INFO CARDS LIGHT MODE ===== */
[data-theme="light"] .yt-info-card {
    background: #f0f9ff;
    border-color: #bae6fd;
}

[data-theme="light"] .yt-info-card h4 {
    color: #0369a1;
}

[data-theme="light"] .yt-info-card li {
    color: #475569;
}

[data-theme="light"] .yt-info-card li::before {
    color: #0ea5e9;
}

[data-theme="light"] .stem-info-card {
    background: #f0f9ff;
    border-color: #bae6fd;
}

[data-theme="light"] .stem-info-card h4 {
    color: #0369a1;
}

[data-theme="light"] .stem-info-card p {
    color: #475569;
}

[data-theme="light"] .stem-info-card li {
    color: #475569;
}

[data-theme="light"] .stem-info-card li::before {
    color: #667eea;
}

[data-theme="light"] .stem-info-card.warning {
    background: #fffbeb;
    border-color: #fde68a;
}

[data-theme="light"] .stem-info-card.warning h4 {
    color: #b45309;
}

[data-theme="light"] .stem-info-card code {
    background: #e2e8f0;
    color: #0d9488;
}

/* =============================================================================
   LIGHT MODE FIXES v2 - Better Contrast
   ============================================================================= */

/* ===== METRONOME - STRONGER CONTRAST ===== */
[data-theme="light"] .sb-container {
    background: #f1f5f9;
}

[data-theme="light"] .sb-beats {
    background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .sb-beat {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

[data-theme="light"] .sb-beat:hover {
    background: #f0fdf4;
    border-color: #4ecdc4;
}

[data-theme="light"] .sb-bar {
    background: #cbd5e1;
}

[data-theme="light"] .sb-ctrl-btn {
    background: white;
    color: #334155;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

[data-theme="light"] .sb-ctrl-btn:hover {
    background: #f8fafc;
    border-color: #4ecdc4;
    color: #4ecdc4;
}

[data-theme="light"] .sb-tempo-name {
    color: #64748b;
    font-weight: 600;
}

[data-theme="light"] .sb-tempo-input {
    color: #0f172a;
    font-weight: 700;
}

[data-theme="light"] .sb-tempo-unit {
    color: #64748b;
    font-weight: 600;
}

[data-theme="light"] .sb-dial {
    background: white;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

[data-theme="light"] .sb-dial::before {
    background: #f8fafc;
}

[data-theme="light"] .sb-dial-track {
    border-color: #e2e8f0;
}

[data-theme="light"] .sb-dial-center {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

[data-theme="light"] .sb-dial-btn {
    background: white;
    color: #475569;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

[data-theme="light"] .sb-dial-btn:hover {
    background: #f0fdf4;
    border-color: #4ecdc4;
    color: #4ecdc4;
}

[data-theme="light"] .sb-play-btn {
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);
}

[data-theme="light"] .sb-tap-btn {
    background: white;
    color: #475569;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

[data-theme="light"] .sb-tap-btn:hover {
    background: #f8fafc;
    border-color: #4ecdc4;
    color: #4ecdc4;
}

[data-theme="light"] .sb-vol-btn {
    background: white;
    color: #475569;
    border: 1px solid #e2e8f0;
}

[data-theme="light"] .sb-vol-btn:hover {
    border-color: #4ecdc4;
    color: #4ecdc4;
}

[data-theme="light"] .sb-vol-bar-container {
    background: #e2e8f0;
}

/* REMOVED - sb-panel moved to metronome-panel.css */

[data-theme="light"] .sb-panel-title {
    color: #64748b;
}

/* ===== VOCAL MONITOR - LIGHT MODE ===== */
[data-theme="light"] .pitch-monitor-page,
[data-theme="light"] .pitch-monitor-container {
    background: #f1f5f9 !important;
}

[data-theme="light"] .pitch-piano-roll {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0;
}

[data-theme="light"] .pitch-key {
    background: white !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .pitch-key.sharp {
    background: #334155 !important;
    color: white !important;
}

[data-theme="light"] .pitch-key.c-key {
    background: #dbeafe !important;
    color: #1e40af !important;
}

[data-theme="light"] .pitch-grid-row {
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .pitch-grid-row.sharp-row {
    background: #f1f5f9 !important;
}

[data-theme="light"] .pitch-display-panel {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

[data-theme="light"] .pitch-controls {
    background: white !important;
    border-top: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .pitch-controls button {
    background: white !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .pitch-controls button:hover {
    background: #f0fdf4 !important;
    border-color: #4ecdc4 !important;
}

[data-theme="light"] .pitch-zoom-controls {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
}

/* ===== VOICE STACK - LIGHT MODE ===== */
[data-theme="light"] .vs-container {
    background: #f1f5f9 !important;
}

[data-theme="light"] .vs-toolbar {
    background: white !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .vs-toolbar button,
[data-theme="light"] .vs-toolbar .vs-btn {
    background: white !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .vs-toolbar button:hover,
[data-theme="light"] .vs-toolbar .vs-btn:hover {
    background: #f8fafc !important;
    border-color: #4ecdc4 !important;
}

[data-theme="light"] .vs-toolbar button.active,
[data-theme="light"] .vs-toolbar .vs-btn.active {
    background: #4ecdc4 !important;
    color: white !important;
}

[data-theme="light"] .vs-timeline {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .vs-sidebar {
    background: white !important;
    border-right: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .vs-track {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .vs-track-header {
    background: white !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

[data-theme="light"] .vs-waveform-container {
    background: white !important;
}

[data-theme="light"] .vs-transport input {
    background: white !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
}

/* ===== STEM SEPARATOR - LAYOUT FIX ===== */
[data-theme="light"] .stem-section-title {
    color: #0f172a !important;
}

[data-theme="light"] .stem-step {
    color: white !important;
}

[data-theme="light"] .stem-model-card {
    background: white !important;
    border: 2px solid #e2e8f0 !important;
}

[data-theme="light"] .stem-model-card:hover {
    border-color: #a78bfa !important;
}

[data-theme="light"] .stem-model-card.selected {
    border-color: #667eea !important;
    background: #f5f3ff !important;
}

[data-theme="light"] .stem-model-card h3 {
    color: #0f172a !important;
}

[data-theme="light"] .stem-model-card p {
    color: #64748b !important;
}

[data-theme="light"] .stem-tag {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

/* ===== STEM SEPARATOR - COMPLETE LIGHT MODE FIX ===== */
[data-theme="light"] .stem-page {
    background: #f1f5f9 !important;
}

[data-theme="light"] .stem-section {
    background: transparent !important;
}

[data-theme="light"] .stem-model-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

[data-theme="light"] .stem-info-section {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

[data-theme="light"] .stem-info-card {
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    border-radius: var(--border-radius-lg);
    padding: var(--space-4);
}

[data-theme="light"] .stem-info-card.warning {
    background: #fffbeb !important;
    border-color: #fde68a !important;
}

[data-theme="light"] .stem-info-card h4 {
    color: #0369a1 !important;
}

[data-theme="light"] .stem-info-card.warning h4 {
    color: #b45309 !important;
}

[data-theme="light"] .stem-info-card p,
[data-theme="light"] .stem-info-card li {
    color: #475569 !important;
}

[data-theme="light"] .stem-info-card code {
    background: #e2e8f0 !important;
    color: #0d9488 !important;
}

@media (max-width: 768px) {
    [data-theme="light"] .stem-model-grid {
        grid-template-columns: 1fr;
    }
    
    [data-theme="light"] .stem-info-section {
        grid-template-columns: 1fr;
    }
}





/* =============================================================================
   FIX: Tag Dropdown y Export Dropdown - Stacking Context y Overflow
   ============================================================================= */

/* Fix 1: Permitir que el dropdown de tags se muestre fuera del contenedor */
.song-editor-tags .info-section-content {
    overflow: visible;
}

/* El tag dropdown necesita position fixed para escapar del overflow */
.song-editor-tags .tag-dropdown-menu {
    position: fixed;
    top: auto;
    left: auto;
    transform: none;
    z-index: var(--z-popover);
}

/* Fix 2: Export dropdown - asegurar que se muestre sobre la toolbar del editor */
.song-editor-compact-header {
    position: sticky;
    top: 0;
    z-index: 200;
    overflow: visible !important;
}

.song-editor-compact-header .export-dropdown-wrapper {
    position: relative;
    z-index: 201;
}

.song-editor-compact-header .export-dropdown-menu {
    z-index: var(--z-popover);
}

/* El body del editor debe tener z-index menor que el header */
.song-editor-body {
    position: relative;
    z-index: 1;
}

/* La toolbar sticky del editor no debe interferir con dropdowns del header */
.minimal-toolbar-sticky {
    z-index: 50;
}

/* Asegurar que btn-group no cree stacking context problemático */
.song-editor-actions .btn-group {
    position: relative;
    z-index: auto;
}