/* AI-NOTE: This file contains all styles for the Metronome Pro application. */
/* Comments are added to delineate sections for easier parsing. */

/* SECTION: Root Variables and Color Themes */
:root {
  --bg:#0e1116; --bg2:#151a22; --rim:#0d1219; --ink:#eaf3ff; --muted:#9fb0c4;
  --accent:#15a6ff; --accent-hi:#7fd1ff; --ok:#27d17c; --danger:#ff4d4d;
  --pad-top:#242e3d; --pad-bot:#11161e; --pip:#cfd9e6;
  --menu-bg:#203149; --menu-bg-2:#132034; --menu-fg:#eaf3ff; --menu-ring:#3d8bff;
  --prev-outline:#caa342;
}

body.theme-dark { /* already defined by default */ }
body.theme-slate { --bg:#2d3a4b; --bg2:#364558; --rim:#242e3c; --ink:#f4f6f9; --muted:#aeb5be; --accent:#4c85bd; --accent-hi:#8cb8e0; --ok:#5cb86b; --danger:#dd6a6a; --pad-top:#41536b; --pad-bot:#2f3d51; --pip:#d5dae0; --menu-bg:#3f546c; --menu-bg-2:#314256; --menu-fg:#f0f3f6; --menu-ring:#5fa3eb;}
body.theme-silver { --bg:#d5dbe4; --bg2:#e6ebf0; --rim:#b8c3d1; --ink:#11161d; --muted:#6c7684; --accent:#0062a8; --accent-hi:#1c84d6; --ok:#1c943f; --danger:#d63a3a; --pad-top:#f0f4f9; --pad-bot:#c7d0de; --pip:#38414e; --menu-bg:#c7d7e7; --menu-bg-2:#b9c8d8; --menu-fg:#141b23; --menu-ring:#4591d1;}

/* SECTION: General Layout and Typography */
html,body { height:100%; }
body {
  margin:0;
  background:
    radial-gradient(1400px 700px at 85% -10%, #1c2430 0%, transparent 70%),
    radial-gradient(900px 450px at -10% 100%, #19212c 0%, transparent 65%),
    var(--bg);
  color:var(--ink);
  font:16px/1.4 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.container { max-width:1200px; margin:20px auto 40px; padding:0 12px; }
@media (min-width:1200px){ .container{max-width:1400px;} }
h1 { margin:6px 4px 16px; font-size:22px; font-weight:800; display:flex; align-items:center; gap:10px }
#helpBtn { margin-left:auto }
.card { background:linear-gradient(to bottom,var(--bg2),var(--bg)); border:1px solid var(--rim); border-radius:18px; padding:16px; box-shadow:0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05) }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.spacer { flex:1 }
.section { margin-top:14px }
.divider { height:1px; margin:14px 0; background:linear-gradient(to right,transparent,#ffffff22 20%,#ffffff14 80%,transparent) }
/* AI-FIX: Added rule to ensure disclosure arrows in details/summary are visible in all themes. */
details summary { color: var(--ink); }

/* SECTION: Buttons and Input Fields */
.btn { position:relative; appearance:none; border:none; cursor:pointer; color:#f2f6ff; font-weight:800; padding:10px 16px; border-radius:12px; min-width:96px; background:linear-gradient(to bottom,#2b3544,#121720); box-shadow:0 6px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.5); transition:transform .06s,filter .06s,box-shadow .06s }
.btn::before { content:""; position:absolute; inset:0; border-radius:12px; background:linear-gradient(180deg,#ffffff22,transparent 40% 60%,#00000022); pointer-events:none }
.btn:hover { filter:brightness(1.06) }
.btn:active { transform:translateY(1px); box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 2px 0 rgba(0,0,0,.55) }
.btn.primary { background:linear-gradient(to bottom,var(--accent),#1268c7) }
.btn.good { background:linear-gradient(to bottom,#35e38f,#149e60) }
.btn.warn { background:linear-gradient(to bottom,#ffb14d,#c76a12) }
.btn.danger { background:linear-gradient(to bottom,#ff6868,#b82424) }
.btn.small { min-width:0; padding:8px 12px; border-radius:10px }
.btn.tapelarge { font-size:18px; padding:12px 18px; min-width:140px; border-radius:14px }
input[type="number"], input[type="text"] {
  color:var(--ink); background:linear-gradient(to bottom,#1d2634,#111724);
  border:1px solid var(--rim); border-radius:10px; padding:8px 10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.45), 0 6px 12px rgba(0,0,0,.25)
}
label.tog { display:inline-flex; align-items:center; gap:8px; color:var(--muted); user-select:none }

/* SECTION: Custom Dropdown Menu (.csel) */
.csel { position:relative; display:inline-block }
.csel-btn {
  display:inline-flex; align-items:center; gap:8px; background:linear-gradient(180deg,var(--menu-bg),var(--menu-bg-2));
  color:var(--menu-fg); border:1px solid #0e141c; border-radius:10px; padding:8px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.5), 0 6px 12px rgba(0,0,0,.25);
  cursor:pointer; min-width:160px;
}
.csel-btn:focus { outline:2px solid var(--menu-ring); outline-offset:2px }
.csel-menu {
  position:absolute; z-index:50; margin-top:6px; min-width:100%;
  background:linear-gradient(180deg,var(--menu-bg), var(--menu-bg-2));
  border:1px solid var(--rim); border-radius:12px; padding:6px;
  box-shadow:0 16px 36px rgba(0,0,0,.55); display:none;
}
.csel.open .csel-menu { display:block }
.csel-item { color:var(--menu-fg); padding:8px 10px; border-radius:8px; cursor:pointer; }
.csel-item[aria-selected="true"] { background:linear-gradient(180deg,#2a3d62,#162741) }
.csel-item:hover { background:linear-gradient(180deg,#36527d,#1d3457) }

/* SECTION: BPM Display & Sliders */
.bpm-block { display:flex; align-items:center; gap:10px; flex-wrap:nowrap }
#bpmInput {
  width:140px; text-align:center; font-size:38px; font-weight:900; color:var(--ink);
  background:linear-gradient(to bottom,#293447,#10151e); border-radius:12px; padding:.25rem .6rem; border:1px solid var(--rim);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.45), 0 8px 16px rgba(0,0,0,.45)
}
.slider-wrap { display:flex; align-items:center; gap:10px }

/* AI-NOTE: The following styles unify all sliders (BPM, Swing, Intensity). */
#bpmSlider, #swing, .vslider {
  -webkit-appearance: none; appearance: none;
  background: linear-gradient(180deg, #3a485f, #11161e);
  border: 1px solid var(--rim);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6), 0 8px 16px rgba(0, 0, 0, .35);
  border-radius: 14px;
  margin: 0;
  padding: 0;
}
#bpmSlider::-webkit-slider-runnable-track, #swing::-webkit-slider-runnable-track, .vslider::-webkit-slider-runnable-track {
  background: transparent; /* Track color is on the slider body itself now */
}
#bpmSlider::-webkit-slider-thumb, #swing::-webkit-slider-thumb, .vslider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  background: radial-gradient(circle at 30% 30%, #ffffffaa, transparent 40%), radial-gradient(circle at 70% 70%, #00000066, transparent 55%), linear-gradient(180deg, #e6edf7, #93b5db 45%, #5f7897 46%, #2e3c50);
  border: 1px solid var(--rim);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .15), inset 0 -2px 0 rgba(0, 0, 0, .4);
  border-radius: 50%;
}
/* Horizontal Sliders */
#bpmSlider, #swing { width: 360px; height: 20px; }
#bpmSlider::-webkit-slider-thumb, #swing::-webkit-slider-thumb {
  width: 36px; height: 36px;
  margin-top: -8px;
}
/* Vertical Slider */
.vslider {
  width: 22px; height: 120px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.vslider::-webkit-slider-thumb {
  width: 22px; height: 22px;
}


/* SECTION: Beat Visual Indicators (Pips and Ring) */
.beat-visual { display:flex; gap:10px; align-items:center; flex-wrap:wrap; min-height:48px }
.pip { width:30px; height:30px; border-radius:50%; border:2px solid var(--pip); background:radial-gradient(circle at 30% 30%,#ffffff33,transparent 45%),#0e1218; color:#a8b5c7; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.35); transition:transform .05s, border-color .05s, color .05s }
.pip.downbeat { border-color:#eaeef5 }
.pip.on { transform:scale(1.08); box-shadow:0 0 12px #15a6ff55, 0 6px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.45) }
.pip.accent { border-color:var(--ok) }
.pip.off { border-color:var(--danger) }
.ring { width:68px; height:68px; position:relative }
.ring svg { transform:rotate(-90deg) }
.ring .label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:12px; color:var(--muted) }

/* SECTION: Visual Flash Overlay */
.flash { position:fixed; inset:0; pointer-events:none; background:#b8e2ff; opacity:0; transition:opacity .08s ease; mix-blend-mode:screen }
.flash.show { opacity:var(--flash-op,0.24) }

/* SECTION: Vertical Slider Wrapper */
.vwrap { display:flex; align-items:center; gap:10px }
.vcol { display:flex; flex-direction:column; align-items:center; gap:4px }

/* SECTION: BPM Preset Grid */
.grid { display:grid; grid-template-columns:repeat(8,1fr); gap:10px; margin-top:10px }
.cell { position:relative; text-align:center; border-radius:12px; cursor:pointer; user-select:none; font-variant-numeric:tabular-nums; padding:12px 0; color:var(--ink); font-weight:800; background:linear-gradient(to bottom,var(--pad-top),var(--pad-bot)); border:1px solid var(--rim); box-shadow:0 6px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.5); transition:transform .05s, filter .12s, box-shadow .12s }
.cell:hover { filter:brightness(1.08) }
.cell:active { transform:translateY(1px) }
.cell.used { background:linear-gradient(to bottom,#5a4a10,#2f2406); color:#ffe7a5; border-color:#47350a }
.cell.previous { background:linear-gradient(to bottom,#664d1a,#34260a); color:#ffebbb; border-color:#4a360e }
.cell.previous::after { content:""; position:absolute; top:6px; right:6px; width:9px; height:9px; border-radius:50%; background:#e2b34d; box-shadow:0 0 0 2px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.12) inset }
.cell.current { background:linear-gradient(to bottom,#1f5a2a,#0f2f16); color:#dcffe2; border-color:#0c2813; box-shadow:0 8px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.6) }
.grid.prev-outline .cell { box-shadow:0 0 0 1px var(--prev-outline) }
.grid.prev-outline .cell.current,.grid.prev-outline .cell.previous { box-shadow:inset 0 0 0 2px currentColor }

/* SECTION: Tooltip */
.tooltip {
  position:fixed; z-index:9999; pointer-events:none;
  background:#0b0f16; color:#eaf3ff; border:1px solid #0e141c; border-radius:10px; padding:8px 10px; max-width:320px;
  box-shadow:0 10px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  font-size:13px; line-height:1.3; opacity:0; transition:opacity .08s ease;
}
.tooltip.show { opacity:1 }

/* SECTION: Modal Dialog (Help) */
.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(6,8,12,.6); z-index:9998 }
.modal.open { display:flex }
.modal-card { width:min(900px,96vw); max-height:85vh; overflow:auto; background:linear-gradient(to bottom,#1a2130,#0d121b); color:#eaf3ff; border:1px solid var(--rim); border-radius:16px; padding:16px; box-shadow:0 18px 48px rgba(0,0,0,.6) }
.modal-card h2 { margin:0 0 8px }
.modal-card h3 { margin:18px 0 6px; font-size:16px }
.modal-card p,.modal-card li { color:#cfe0ff }
.modal-card .close { position:sticky; top:0; display:block; margin-left:auto }

/* SECTION: Stage Mode and Responsive Design */
.stage body, .stage .container { max-width:none }
.stage .card { padding:24px }
.stage #bpmInput { font-size:64px; width:200px }
.stage #bpmSlider { width:min(60vw,800px); height:26px }
.stage .pip { width:40px; height:40px; font-size:14px }
@media (max-width:980px){ #bpmSlider, #swing {width:100%} }
@media (max-width:840px){ .bpm-block{flex-wrap:wrap} .grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:520px){ .grid{grid-template-columns:repeat(3,1fr)} .btn{min-width:0} }

/* AI-FIX: Specific overrides for the Silver theme to ensure readability. */
.theme-silver .btn,
.theme-silver .btn.tapelarge {
    color: #FFFFFF; /* White text for all main buttons */
    background: linear-gradient(to bottom, #586575, #293444); /* Darker background for contrast */
}
.theme-silver .btn:active {
    box-shadow: 0 3px 8px rgba(0,0,0,.5),inset 0 2px 0 rgba(0,0,0,.55), inset 0 0 0 1px #fff3;
}
.theme-silver #bpmInput {
    color: #FFFFFF; /* White text for BPM number */
    background: linear-gradient(to bottom, #4f5a68, #1f2733); /* Dark background for BPM display */
}
.theme-silver input[type="number"],
.theme-silver input[type="text"] {
    color: #FFFFFF; /* White text for number inputs */
    background: linear-gradient(to bottom, #4f5a68, #1f2733);
}
.theme-silver .csel-btn {
    color: #FFFFFF; /* White text for dropdown buttons */
    background: linear-gradient(180deg, #4f5a68, #1f2733);
}
.theme-silver .csel-menu {
    background: linear-gradient(180deg, #3c4655, #1f2733);
}
.theme-silver .csel-item {
    color: #FFFFFF; /* White text for dropdown items */
}
.theme-silver .csel-item[aria-selected="true"] {
    background: linear-gradient(180deg, #0062a8, #004b82); /* Use accent color for selection */
}
.theme-silver .csel-item:hover {
    background: linear-gradient(180deg, #1c84d6, #005aa0);
}
/* AI-FIX: Fix for beat indicator "pips" in the Silver theme. */
.theme-silver .pip {
    background: radial-gradient(circle at 30% 30%, #ffffff33, transparent 45%), #B0B8C4; /* Grey fill instead of black */
    color: #4a5462; /* Darker grey number for readability */
}
.theme-silver .ring .label {
    color: #4a5462; /* Darker grey number for the main ring label */
}