/* ── Info button on layer tiles ─────────────────────────────────────────── */

.fw-info-btn {
    opacity: 0.6;
    transition: opacity 0.15s, transform 0.1s;
}
.fw-info-btn:hover {
    opacity: 1 !important;
    transform: scale(1.2);
}

/* ── Timeframe radio buttons — active highlight ──────────────────────────── */
/* Dash 4.1 doesn't support labelCheckedStyle, so we use CSS instead.        */
/* Dash renders: <label><input type=radio> 1D</label> (input INSIDE label)   */

#chart-timeframe label:has(input[type=radio]:checked) {
    background-color: #26a69a !important;
    color: #fff !important;
    border-color: #26a69a !important;
}

/* ── Auth form inputs — teal focus ring ─────────────────────────────────── */
input[id^="login-"],
input[id^="reg-"],
input[id^="forgot-"],
input[id^="reset-"] {
    transition: border-color 0.15s;
}
input[id^="login-"]:focus,
input[id^="reg-"]:focus,
input[id^="forgot-"]:focus,
input[id^="reset-"]:focus {
    border-color: #26a69a !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(38, 166, 154, 0.18);
}

/* ── Auth buttons — hover / active states ───────────────────────────────── */
button[id^="login-btn"],
button[id^="reg-btn"],
button[id^="forgot-btn"],
button[id^="reset-btn"] {
    transition: opacity 0.15s, transform 0.1s;
}
button[id^="login-btn"]:hover,
button[id^="reg-btn"]:hover,
button[id^="forgot-btn"]:hover,
button[id^="reset-btn"]:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}
button[id^="login-btn"]:active,
button[id^="reg-btn"]:active,
button[id^="forgot-btn"]:active,
button[id^="reset-btn"]:active {
    transform: translateY(0);
    opacity: 0.75;
}

/* ── Landing page — gradient headline animation ─────────────────────────── */
/* The React inline style handles the gradient; this adds a subtle shimmer  */
@keyframes shimmer {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

/* ── Dash link (dcc.Link) — remove default underline ────────────────────── */
a {
    text-decoration: none;
}
a:hover {
    opacity: 0.85;
}