/**
 * Harmony Visualizer Styles
 * Custom theme and keyboard styling for Bootstrap 5.3 dark mode
 */

/* ============================================
   CSS Custom Properties (Theme Colors)
   ============================================ */
:root {
    --hv-accent: #e94560;
    --hv-accent-rgb: 233, 69, 96;
    --hv-dorian: #f39c12;
    --hv-dorian-rgb: 243, 156, 18;
    --hv-harmonic: #9b59b6;
    --hv-harmonic-rgb: 155, 89, 182;
    --hv-tension: #e74c3c;
    --hv-blue-note: #3498db;
    --hv-brightness: #2ecc71;
    --hv-avoid: #555;

    /* Keyboard dimensions */
    --key-white-width: 45px;
    --key-white-height: 150px;
    --key-black-width: 30px;
    --key-black-height: 95px;

    /* Mobile keyboard dimensions */
    --key-white-width-mobile: 36px;
    --key-white-height-mobile: 120px;
    --key-black-width-mobile: 24px;
    --key-black-height-mobile: 75px;
}

/* Override Bootstrap primary color */
[data-bs-theme="dark"] {
    --bs-primary: var(--hv-accent);
    --bs-primary-rgb: var(--hv-accent-rgb);
}

/* ============================================
   Body & Layout
   ============================================ */
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* ============================================
   Navbar Customization
   ============================================ */
.navbar-brand {
    font-family: 'SF Mono', 'Fira Code', monospace;
}

/* ============================================
   Piano Keyboard
   ============================================ */
.keyboard-container {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.keyboard-container::-webkit-scrollbar {
    height: 8px;
}

.keyboard-container::-webkit-scrollbar-track {
    background: var(--bs-body-bg);
    border-radius: 4px;
}

.keyboard-container::-webkit-scrollbar-thumb {
    background: var(--bs-secondary-bg);
    border-radius: 4px;
}

.keyboard {
    display: flex;
    position: relative;
    height: var(--key-white-height);
    user-select: none;
}

/* White keys */
.white-key {
    width: var(--key-white-width);
    height: var(--key-white-height);
    background: linear-gradient(to bottom, #fafafa 0%, #e8e8e8 100%);
    border: 1px solid #bbb;
    border-radius: 0 0 6px 6px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 8px;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.white-key:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);
}

.white-key:active,
.white-key.active {
    background: linear-gradient(to bottom, #d6d6d6 0%, var(--hv-accent) 100%);
    transform: translateY(2px);
    box-shadow: 0 0 12px rgba(var(--hv-accent-rgb), 0.6);
}

/* White key scale highlighting */
.white-key.in-scale {
    background: linear-gradient(to bottom, #ffffff 55%, rgba(var(--hv-accent-rgb), 0.4));
    box-shadow: inset 0 -6px 0 rgba(var(--hv-accent-rgb), 0.35);
}

.white-key.root {
    background: linear-gradient(to bottom, #ffffff 35%, rgba(var(--hv-accent-rgb), 0.7));
    box-shadow: inset 0 -8px 0 rgba(var(--hv-accent-rgb), 0.5),
                0 0 10px rgba(var(--hv-accent-rgb), 0.35);
}

.white-key.dorian {
    background: linear-gradient(to bottom, #ffffff 35%, rgba(var(--hv-dorian-rgb), 0.7));
    box-shadow: inset 0 -8px 0 rgba(var(--hv-dorian-rgb), 0.45);
}

.white-key.harmonic {
    background: linear-gradient(to bottom, #ffffff 35%, rgba(var(--hv-harmonic-rgb), 0.7));
    box-shadow: inset 0 -8px 0 rgba(var(--hv-harmonic-rgb), 0.45);
}

/* Black keys */
.black-key {
    width: var(--key-black-width);
    height: var(--key-black-height);
    background: linear-gradient(to bottom, #3a3a3a 0%, #1a1a1a 100%);
    border-radius: 0 0 4px 4px;
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 6px;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
}

.black-key:hover {
    background: linear-gradient(to bottom, #4a4a4a 0%, #2a2a2a 100%);
}

.black-key:active,
.black-key.active {
    background: linear-gradient(to bottom, #222 0%, var(--hv-accent) 100%);
    transform: translateY(2px);
    box-shadow: 0 0 10px rgba(var(--hv-accent-rgb), 0.6);
}

/* Black key scale highlighting */
.black-key.in-scale {
    background: linear-gradient(to bottom, #1b1b1b 45%, rgba(var(--hv-accent-rgb), 0.55));
    box-shadow: inset 0 -5px 0 rgba(var(--hv-accent-rgb), 0.45);
}

.black-key.root {
    background: linear-gradient(to bottom, #1b1b1b 30%, rgba(var(--hv-accent-rgb), 0.7));
    box-shadow: inset 0 -6px 0 rgba(var(--hv-accent-rgb), 0.5),
                0 0 8px rgba(var(--hv-accent-rgb), 0.4);
}

.black-key.dorian {
    background: linear-gradient(to bottom, #1b1b1b 30%, rgba(var(--hv-dorian-rgb), 0.7));
    box-shadow: inset 0 -6px 0 rgba(var(--hv-dorian-rgb), 0.5);
}

.black-key.harmonic {
    background: linear-gradient(to bottom, #1b1b1b 30%, rgba(var(--hv-harmonic-rgb), 0.7));
    box-shadow: inset 0 -6px 0 rgba(var(--hv-harmonic-rgb), 0.5);
}

/* Key labels */
.key-label {
    font-size: 10px;
    color: #666;
    line-height: 1;
}

.black-key .key-label {
    color: #aaa;
    font-size: 9px;
}

.key-degree {
    font-size: 13px;
    font-weight: bold;
    color: var(--hv-accent);
    line-height: 1.2;
}

.black-key .key-degree {
    font-size: 11px;
}

/* ============================================
   Scale Display (Circle notes)
   ============================================ */
.scale-display .scale-note {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.scale-display .scale-note:hover {
    transform: scale(1.1);
}

.scale-note.in-scale { background: var(--hv-accent); }
.scale-note.root {
    background: var(--hv-accent);
    box-shadow: 0 0 15px var(--hv-accent);
}
.scale-note.dorian { background: var(--hv-dorian); }
.scale-note.harmonic { background: var(--hv-harmonic); }
.scale-note.out { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }

.scale-note .note-name {
    font-size: 14px;
}

.scale-note .note-degree {
    font-size: 10px;
    opacity: 0.8;
}

/* ============================================
   Note Palette (Functions tab)
   ============================================ */
.note-palette {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(65px, 1fr));
    gap: 10px;
}

.palette-note {
    aspect-ratio: 1;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s;
    font-weight: bold;
    position: relative;
}

.palette-note:hover {
    transform: scale(1.1);
    z-index: 10;
}

.palette-note:active {
    transform: scale(0.95);
}

.palette-note .note-name {
    font-size: 18px;
}

.palette-note .note-degree {
    font-size: 11px;
    opacity: 0.8;
}

.palette-note .note-tip {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 100;
}

.palette-note:hover .note-tip {
    opacity: 1;
}

/* Note palette colors */
.palette-note.root { background: var(--hv-accent); }
.palette-note.scale { background: rgba(var(--hv-accent-rgb), 0.6); }
.palette-note.dorian { background: var(--hv-dorian); }
.palette-note.harmonic { background: var(--hv-harmonic); }
.palette-note.tension { background: var(--hv-tension); }
.palette-note.blue { background: var(--hv-blue-note); }
.palette-note.brightness { background: var(--hv-brightness); }
.palette-note.avoid { background: var(--hv-avoid); color: var(--bs-secondary-color); }
.palette-note.out { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }

/* ============================================
   Progression Cards
   ============================================ */
.prog-card {
    background: var(--bs-body-bg);
    border-radius: 10px;
    padding: 15px;
    border-left: 4px solid var(--hv-accent);
}

.prog-card.epic { border-left-color: var(--hv-harmonic); }
.prog-card.jazzy { border-left-color: var(--hv-dorian); }
.prog-card.dark { border-left-color: var(--hv-tension); }

.prog-name {
    font-weight: bold;
    color: var(--hv-accent);
}

.prog-vibe {
    font-size: 11px;
    background: var(--bs-secondary-bg);
    padding: 2px 8px;
    border-radius: 10px;
}

.prog-chords {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0;
}

.prog-chord {
    background: var(--bs-secondary-bg);
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s;
}

.prog-chord:hover {
    background: var(--hv-accent);
}

/* ============================================
   Pattern Display
   ============================================ */
.run-display {
    background: var(--bs-body-bg);
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
}

.run-notes {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}

.run-note {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background: var(--bs-secondary-bg);
    cursor: pointer;
    transition: transform 0.1s;
}

.run-note:hover {
    transform: scale(1.15);
}

.run-note.root { background: var(--hv-accent); }
.run-note.fifth { background: rgba(var(--hv-accent-rgb), 0.5); }

.run-arrow {
    color: var(--bs-secondary-color);
    font-size: 12px;
}

.run-label {
    font-size: 12px;
    color: var(--bs-secondary-color);
    margin-top: 8px;
}

/* ============================================
   Tab/Tablature Display
   ============================================ */
.tab-display {
    background: var(--bs-body-bg);
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    white-space: pre;
    font-size: 13px;
    line-height: 1.4;
}

.tab-line { color: var(--bs-secondary-color); }
.tab-note { color: var(--hv-accent); font-weight: bold; }
.tab-dorian { color: var(--hv-dorian); font-weight: bold; }
.tab-harmonic { color: var(--hv-harmonic); font-weight: bold; }

/* ============================================
   Timeline (Song Analysis)
   ============================================ */
.timeline {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.timeline-section {
    flex: 1;
    min-width: 150px;
    background: var(--bs-body-bg);
    border-radius: 8px;
    padding: 12px;
    border-left: 4px solid var(--hv-accent);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.timeline-section:hover {
    background: var(--bs-secondary-bg);
}

.timeline-section.active {
    border-left-color: var(--hv-dorian);
    background: rgba(var(--hv-dorian-rgb), 0.1);
}

.timeline-time {
    font-size: 11px;
    color: var(--bs-secondary-color);
}

.timeline-chord {
    font-weight: bold;
    font-size: 18px;
}

.timeline-mode {
    font-size: 12px;
    color: var(--hv-dorian);
}

/* ============================================
   Legend
   ============================================ */
.legend {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.legend-color.scale { background: var(--hv-accent); }
.legend-color.dorian { background: var(--hv-dorian); }
.legend-color.harmonic { background: var(--hv-harmonic); }
.legend-color.root { background: var(--hv-accent); box-shadow: 0 0 6px var(--hv-accent); }

/* ============================================
   Mobile Responsive Adjustments
   ============================================ */
@media (max-width: 768px) {
    .keyboard {
        height: var(--key-white-height-mobile);
    }

    .white-key {
        width: var(--key-white-width-mobile);
        height: var(--key-white-height-mobile);
        padding-bottom: 5px;
    }

    .black-key {
        width: var(--key-black-width-mobile);
        height: var(--key-black-height-mobile);
        padding-bottom: 4px;
    }

    .key-label {
        font-size: 8px;
    }

    .key-degree {
        font-size: 10px;
    }

    .black-key .key-label {
        font-size: 7px;
    }

    .black-key .key-degree {
        font-size: 9px;
    }

    .scale-display .scale-note {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .scale-note .note-name {
        font-size: 12px;
    }

    .scale-note .note-degree {
        font-size: 9px;
    }
}

/* ============================================
   Utility Classes
   ============================================ */
.bg-purple {
    background-color: var(--hv-harmonic) !important;
}

.text-dorian {
    color: var(--hv-dorian) !important;
}

.text-harmonic {
    color: var(--hv-harmonic) !important;
}

/* Smooth transitions for theme elements */
.card,
.btn,
.nav-link,
.form-control,
.form-select {
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

/* Focus styles for accessibility */
.white-key:focus,
.black-key:focus,
.palette-note:focus,
.prog-chord:focus,
.run-note:focus {
    outline: 2px solid var(--hv-accent);
    outline-offset: 2px;
}