/* css/styles.css — FUBC Band Shared Styles v3 (Light + Dark mode safe) */

/* ============================================================
   CSS VARIABLES — light defaults, .dark overrides
   ============================================================ */
:root {
    --color-brass: 180 83 9;
    --color-brass-light: 217 119 6;
    --color-brass-gold: 245 158 11;

    /* Light mode defaults — warm ivory */
    --page-bg:      #f0e8d8;
    --surface:      #faf6ee;
    --surface-mid:  #ddd3be;
    --border-color: rgba(140, 90, 20, 0.12);
    --text-main:    #1a1209;
    --text-muted:   #5c4a2a;
    --glass-bg:           rgba(255, 252, 244, 0.92);
    --glass-border:       rgba(150, 100, 30, 0.16);
    --glass-dark-bg:      rgba(250, 246, 238, 0.90);
    --glass-dark-border:  rgba(140, 90, 20, 0.12);
    --scrollbar-track:    #ddd3be;
    --scrollbar-thumb:    rgba(180, 83, 9, 0.45);
    --noise-opacity:      0.18;
}

.dark {
    /* Dark mode overrides */
    --page-bg:      #0a0e1a;
    --surface:      #111827;
    --surface-mid:  #1e2535;
    --border-color: rgba(255, 255, 255, 0.08);
    --text-main:    #f1f5f9;
    --text-muted:   #94a3b8;
    --glass-bg:           rgba(255, 255, 255, 0.04);
    --glass-border:       rgba(255, 255, 255, 0.08);
    --glass-dark-bg:      rgba(10, 14, 26, 0.70);
    --glass-dark-border:  rgba(255, 255, 255, 0.06);
    --scrollbar-track:    #111827;
    --scrollbar-thumb:    rgba(180, 83, 9, 0.50);
    --noise-opacity:      0.40;
}

/* ============================================================
   GLOBAL
   ============================================================ */
[x-cloak] { display: none !important; }

/* ============================================================
   ABCJS / Sheet Music — Audio Player
   ============================================================ */
.abcjs-container svg { max-width: 100%; height: auto; border-radius: 0.5rem; }

/* Audio player — light mode (default) */
.abcjs-inline-audio {
    background: linear-gradient(145deg, #f5f0e8, #ede8df) !important;
    border-radius: 16px !important;
    padding: 12px 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    margin: 0 auto !important;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(180, 83, 9, 0.12) !important;
}

/* Audio player — dark mode */
.dark .abcjs-inline-audio {
    background: linear-gradient(145deg, #0f172a, #1e293b) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Buttons — light mode */
.abcjs-btn {
    color: #374151 !important;
    fill: #374151 !important;
    background-color: rgba(0, 0, 0, 0.06) !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}
/* Explicitly target SVG paths so inline fill attributes don't win */
.abcjs-btn svg, .abcjs-btn svg path, .abcjs-btn svg rect,
.abcjs-btn svg polygon, .abcjs-btn svg circle {
    fill: #374151 !important;
}

/* Buttons — dark mode */
.dark .abcjs-btn {
    color: white !important;
    fill: white !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}
.dark .abcjs-btn svg, .dark .abcjs-btn svg path, .dark .abcjs-btn svg rect,
.dark .abcjs-btn svg polygon, .dark .abcjs-btn svg circle {
    fill: white !important;
}

.abcjs-btn:hover {
    background-color: rgb(var(--color-brass)) !important;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(180, 83, 9, 0.5);
    color: white !important;
    fill: white !important;
}

/* Time display — light mode */
.abcjs-time-display {
    color: #374151 !important;
    font-family: ui-monospace, monospace !important;
    font-weight: bold !important;
    font-size: 14px !important;
}
.dark .abcjs-time-display { color: #f8fafc !important; }

/* Progress bar */
.abcjs-midi-progress-background {
    background-color: #9ca3af !important;  /* was #d1cac0 — too low contrast on light bg */
    border: none !important;
    height: 4px !important;
    border-radius: 2px !important;
}
.dark .abcjs-midi-progress-background { background-color: #1e2535 !important; }

.abcjs-midi-progress-indicator {
    background: linear-gradient(90deg, rgb(var(--color-brass-light)), rgb(var(--color-brass-gold))) !important;
    height: 4px !important;
    border-radius: 2px !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

/* ============================================================
   ABCJS — SVG NOTE FILLS
   CRITICAL: scope to .dark so notes remain visible in light mode
   ============================================================ */

/* Light mode: dark notes on light background (let ABCJS default render, or enforce dark) */
[id^="abc-"] svg,
#abc-sight-reading svg,
#abc-sight-reading-full svg {
    filter: none !important;
}
[id^="abc-"] svg path,
[id^="abc-"] svg text,
[id^="abc-"] svg tspan,
[id^="abc-"] svg rect,
#abc-sight-reading svg path,
#abc-sight-reading-full svg path {
    fill: #1e293b !important;
}

/* Dark mode: light notes on dark background */
.dark [id^="abc-"] svg path,
.dark [id^="abc-"] svg text,
.dark [id^="abc-"] svg tspan,
.dark [id^="abc-"] svg rect,
.dark #abc-sight-reading svg path,
.dark #abc-sight-reading-full svg path {
    fill: #e2e8f0 !important;
}

/* ============================================================
   RANGE SLIDERS
   ============================================================ */
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #b45309, #d97706);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: transparent;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f59e0b;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4), 0 0 0 2px rgba(245, 158, 11, 0.15);
    transition: box-shadow 0.2s, transform 0.1s;
    margin-top: -7px;
}
input[type=range]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.7), 0 0 0 4px rgba(245, 158, 11, 0.15);
    transform: scale(1.15);
}
input[type=range]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f59e0b;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}
input[type=range]::-moz-range-track {
    height: 3px;
    background: linear-gradient(to right, #b45309, #d97706);
    border-radius: 2px;
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal-hidden {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-hidden.stagger-1 { transition-delay: 0.1s; }
.reveal-hidden.stagger-2 { transition-delay: 0.2s; }
.reveal-hidden.stagger-3 { transition-delay: 0.3s; }

/* ============================================================
   CUSTOM SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 9999px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 9999px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(217, 119, 6, 0.7); }

/* ============================================================
   TOUCH TARGETS (mobile accessibility)
   ============================================================ */
@media (max-width: 768px) {
    .touch-target { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ============================================================
   RIPPLE BUTTON
   ============================================================ */
.ripple-btn { position: relative; overflow: hidden; }
.ripple-btn::after {
    content: '';
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(245, 158, 11, 0.3) 10%, transparent 10%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .5s, opacity 1s;
}
.ripple-btn:active::after { transform: scale(0, 0); opacity: 0.4; transition: 0s; }

/* ============================================================
   HOVER STATES + LIGHT MODE CARD DEPTH
   ============================================================ */
.glass-gold:hover { border-color: rgba(180, 83, 9, 0.4); }

/* Give glass cards visible depth in light mode */
:root:not(.dark) .glass {
    box-shadow: 0 2px 16px rgba(100, 65, 10, 0.10), 0 1px 4px rgba(100, 65, 10, 0.06);
}
:root:not(.dark) .glass-gold {
    box-shadow: 0 2px 20px rgba(180, 83, 9, 0.12), 0 1px 6px rgba(180, 83, 9, 0.07);
}
:root:not(.dark) .glass-dark {
    box-shadow: 0 4px 24px rgba(100, 65, 10, 0.12), 0 1px 6px rgba(100, 65, 10, 0.07);
}

/* ============================================================
   FOCUS RING
   ============================================================ */
*:focus-visible {
    outline: 2px solid rgba(217, 119, 6, 0.6);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================================
   TEXT SELECTION
   ============================================================ */
::selection      { background: rgba(180, 83, 9, 0.25); color: inherit; }
::-moz-selection { background: rgba(180, 83, 9, 0.25); color: inherit; }

/* ============================================================
   SELECT ELEMENT
   ============================================================ */
select {
    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 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
}

.dark select option { background-color: #1e2535; color: #f1f5f9; }
select option:disabled { color: #4b5563; }

/* ============================================================
   PRINT
   ============================================================ */
#print-staves { display: none; }
@media print {
    nav, footer, .back-to-top, .fixed, button, #tools,
    section[class*="bg-"] { display: none !important; }
    body { background: white !important; color: black !important; }
    body > *:not(#print-staves) { display: none !important; }
    #print-staves { display: block !important; background: white; width: 100%; }
    .stave { border-bottom: 1px solid black; margin-bottom: 8px; height: 1px; width: 100%; }
    .stave-group { margin-bottom: 40px; }
    @page { margin: 0.5in; }
}

/* ============================================================
   SMOOTH x-show TRANSITIONS
   ============================================================ */
[x-show] { transition: opacity 0.2s ease; }

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-12px); }
}

@keyframes glow {
    from { box-shadow: 0 0 20px rgba(180,83,9,0.3), 0 0 40px rgba(180,83,9,0.1); }
    to   { box-shadow: 0 0 30px rgba(180,83,9,0.6), 0 0 60px rgba(180,83,9,0.2); }
}

@keyframes marquee {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@keyframes floatNote {
    0%   { opacity: 0; transform: translateY(60px) rotate(0deg) scale(0.8); }
    10%  { opacity: 0.7; }
    85%  { opacity: 0.15; }
    100% { opacity: 0; transform: translateY(-500px) rotate(200deg) scale(1.4); }
}

@keyframes floatOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(30px, -40px) scale(1.05); }
    66%      { transform: translate(-20px, 20px) scale(0.95); }
}

@keyframes scanBeam {
    0%   { transform: translateX(-100%); opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { transform: translateX(100vw); opacity: 0; }
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%       { opacity: 0.8; transform: scale(1.08); }
}

@keyframes borderRotate {
    from { --angle: 0deg; }
    to   { --angle: 360deg; }
}

@keyframes slideUpWord {
    from { opacity: 0; transform: translateY(40px); clip-path: inset(0 0 100% 0); }
    to   { opacity: 1; transform: translateY(0);   clip-path: inset(0 0 0% 0); }
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes subtlePan {
    0%, 100% { background-position: 50% 40%; }
    50%       { background-position: 50% 60%; }
}

/* ============================================================
   APP THEMES — Accent color variable overrides
   Applied as a class on <body>; overrides :root defaults.
   ============================================================ */

/* NEON SYNTH — Retrowave aesthetic */
body.theme-neon {
    --color-brass:       236 72 153;   /* #ec4899 hot-pink  */
    --color-brass-light: 168 85 247;   /* #a855f7 purple    */
    --color-brass-gold:  6 182 212;    /* #06b6d4 cyan      */
    --scrollbar-thumb:   rgba(236, 72, 153, 0.50);
}

/* DEEP OCEAN — Calming aesthetic */
body.theme-ocean {
    --color-brass:       14 116 144;   /* #0e7490 deep teal */
    --color-brass-light: 6 182 212;    /* #06b6d4 cyan      */
    --color-brass-gold:  34 211 238;   /* #22d3ee aqua      */
    --scrollbar-thumb:   rgba(14, 116, 144, 0.50);
}

/* GOLD VIP — Premium aesthetic */
body.theme-gold {
    --color-brass:       202 138 4;    /* #ca8a04 rich gold */
    --color-brass-light: 234 179 8;    /* #eab308 bright gold */
    --color-brass-gold:  253 224 71;   /* #fde047 pale gold */
    --scrollbar-thumb:   rgba(202, 138, 4, 0.50);
}