/* --- START OF FILE public/css/style.css --- */

/* --- Foundational Styles (DEFAULT DARK THEME for the App/Tool) --- */
body { 
    font-family: Inter, system-ui, sans-serif; 
    background-color: #111827; /* Dark BG is now the default */
    color: #f3f4f6;
}
.form-input, .form-select, .form-textarea { background: #2f2f2f; border: 1px solid #4b5563; border-radius: 6px; padding: 0.5rem 1rem; color: white; width: 100%; resize: none; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: #3b82f6; ring: 1; ring-color: #3b82f6; }
.live-preview { background-color: #1e1e1e; border: 1px solid #4a4a4a; font-family: 'Courier New', Courier, monospace; line-height: 1.6; white-space: pre; padding: 1rem; border-radius: 6px;}
.song-block { background-color: #1f2937; border: 1px solid #374151; border-radius: 8px; margin-bottom: 1rem; }
.block-header { background-color: #334155; padding: 0.5rem 1rem; display: flex; justify-content: space-between; align-items: center; cursor: grab; border-top-left-radius: 7px; border-top-right-radius: 7px; }
.modal-content { background: #1f2937; padding: 2rem; border-radius: 8px; width: 90%; max-width: 800px; max-height: 90vh; overflow-y: auto;}

/* --- "Bright & Bold" Theme OVERRIDES for Marketing Pages --- */
body.marketing { 
    background-color: #f9fafb; /* gray-50 (Off-white) */
    color: #111827; /* gray-900 (Dark Text) */
}
.marketing .text-white { color: #111827; }
.marketing .text-gray-300 { color: #4b5563; }
.marketing .text-gray-400 { color: #6b7280; }
.marketing .bg-gray-900 { background-color: #ffffff; border-top: 1px solid #e5e7eb; }
.marketing .feature-icon { background-color: #e0e7ff; color: #4f46e5; }
.marketing #auth-modal .text-white { color: #ffffff; } /* Keep modal text white */
.marketing .form-input { color: #111827; background-color: #ffffff; } /* Light mode form inputs */

/* --- FIX: Add specific overrides for the pricing cards on the marketing theme --- */
.marketing .bg-gray-800 {
    color: #f3f4f6; /* Set text to a light gray for readability on dark card */
}
.marketing .bg-gray-800 .text-gray-400 {
    color: #9ca3af; /* A slightly dimmer gray for subtitles */
}
.marketing .bg-gray-800 .text-gray-300 {
    color: #d1d5db; /* A bright gray for feature text */
}
.marketing .bg-gray-800 .font-bold {
    color: #ffffff; /* Make bold text (like titles and prices) pure white */
}

/* --- UNIFIED BUTTON STYLES (Work on both themes) --- */
.btn { border: 1px solid transparent; padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; cursor: pointer; transition: background-color 0.25s; border-radius: 8px; }
.btn:disabled { background-color: #4b5563; opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 0.3em 0.8em; font-size: 0.9em; }
.form-input-sm { padding: 0.3em 0.8em; font-size: 0.9em; }
.btn-primary { background-color: #dc2626; color: white; } /* red-600 */
.btn-primary:hover:not(:disabled) { background-color: #b91c1c; } /* red-700 */
.btn-secondary { background-color: #3b82f6; color: white; } /* blue-500 */
.btn-secondary:hover:not(:disabled) { background-color: #2563eb; } /* blue-600 */
.btn-danger { background-color: #ef4444; color: white; } /* red-500 */
.btn-danger:hover:not(:disabled) { background-color: #dc2626; } /* red-600 */

/* --- UNIFIED COMPONENT STYLES --- */
.headline-gradient {
    background-image: linear-gradient(to right, #dc2626, #3b82f6); /* Red to Blue */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hidden { display: none; }
.live-preview-chords { color: #facc15; }
.tab-preview { color: #93c5fd; }
.queue-pill.next { background-color: #dc2626; }
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 50; }
.tab-button.active { border-bottom-color: #dc2626; }

/* --- NEW: Interactive Drum Tab Editor Styles --- */
.drum-editor-container {
    overflow-x: auto;
    padding: 0.5rem;
    background-color: #111827;
    border-radius: 4px;
}
.drum-editor-table {
    border-collapse: collapse;
    font-family: 'Courier New', Courier, monospace;
    width: 100%;
}
.drum-instrument {
    background-color: #374151;
    color: #d1d5db;
    padding: 0.25rem 0.75rem;
    text-align: left;
    font-weight: bold;
    border-right: 2px solid #4b5563;
    position: relative;
    white-space: nowrap;
}
.drum-instrument-name {
    margin-right: 20px; /* Space for the remove button */
}
.drum-instrument-controls {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.2s;
}
.drum-instrument:hover .drum-instrument-controls {
    opacity: 1;
}
.drum-remove-btn {
    background: none;
    border: none;
    color: #fca5a5;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 4px;
}
.drum-remove-btn:hover {
    color: #ef4444;
}
.drum-cell {
    width: 25px;
    height: 30px;
    text-align: center;
    border: 1px solid #374151;
    cursor: pointer;
    transition: background-color 0.15s;
    color: #9ca3af;
}
.drum-cell:hover {
    background-color: #4b5563;
    color: #ffffff;
}
.drum-add-form {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.drum-add-input {
    flex-grow: 1;
}
.drum-add-form button {
    flex-shrink: 0;
}

/* --- Fretboard and component styles --- */
.block-header:active { cursor: grabbing; }
.block-content { padding: 1rem; position: relative; padding-bottom: 1.5rem; }
.fretboard-wrapper { overflow-x: auto; border: 1px solid #555; border-radius: 6px; }
.fretboard-string { stroke: #9ca3af; stroke-width: 2px; }
.fretboard-note { fill: #facc15; cursor: grab; transition: fill 0.2s; }
.fretboard-note:active { cursor: grabbing; }
.fretboard-note.selected { fill: #ef4444; stroke: white; stroke-width: 2px; }
.fretboard-note-text { fill: #111827; font-weight: bold; pointer-events: none; text-anchor: middle; alignment-baseline: central; }
.queue-pill { background-color: #374151; padding: 2px 8px; border-radius: 12px; font-size: 0.9em; }
.form-textarea.placement-mode { cursor: crosshair; }
.resize-handle { position: absolute; bottom: 0; left: 0; right: 0; height: 10px; cursor: ns-resize; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; background-color: rgba(74, 85, 104, 0.5); }
.resize-handle:hover { background-color: rgba(99, 110, 129, 0.7); }
.btn-edit-mode { background-color: #2563eb; } .btn-edit-mode:hover { background-color: #1d4ed8; }
.sortable-ghost { opacity: 0.4; background: #4a5568; }
.sounding-key-box {
    display: inline-block;
    background-color: #1f2937;
    border: 1px solid #4b5563;
    border-radius: 6px;
    padding: 0.5rem 1.5rem;
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
    color: #a5b4fc; /* indigo-300 */
    min-width: 80px;
    text-align: center;
}
aside#sidebar > div {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
aside#sidebar > div::-webkit-scrollbar {
    display: none;
}