/* =====================================================
   MODERN FLIP CLOCK – SETTINGS PANEL CSS
   ===================================================== */

/* ---- Offcanvas ---- */
.settings-offcanvas {
    width: min(420px, 95vw) !important;
    background: rgba(10, 10, 20, 0.96) !important;
    backdrop-filter: blur(24px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
    border-left: 1px solid var(--clr-border) !important;
    color: var(--clr-text-primary) !important;
}

[data-theme="light"] .settings-offcanvas {
    background: rgba(240, 242, 255, 0.97) !important;
}

.settings-header {
    border-bottom: 1px solid var(--clr-border) !important;
    padding: 1rem 1.25rem !important;
}

.settings-header .offcanvas-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--clr-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-header .bi {
    color: var(--clr-accent);
}

.settings-body {
    padding: 0 !important;
    overflow-y: auto;
}

.settings-body::-webkit-scrollbar {
    width: 4px;
}

.settings-body::-webkit-scrollbar-thumb {
    background: var(--clr-accent);
    border-radius: 2px;
}

/* ---- Settings Accordion ---- */
.settings-accordion {
    padding: 0;
}

.settings-accordion .accordion-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--clr-border) !important;
}

.settings-accordion .accordion-header {
    padding: 0;
}

.settings-accordion .accordion-button {
    background: transparent !important;
    color: var(--clr-text-primary) !important;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.9rem 1.25rem !important;
    border: none !important;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: none !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.settings-accordion .accordion-button:not(.collapsed) {
    color: var(--clr-accent) !important;
}

.settings-accordion .accordion-button::after {
    filter: invert(1) opacity(0.5);
    transition: transform var(--trans-med);
}

.settings-accordion .accordion-button:not(.collapsed)::after {
    filter: invert(1) opacity(1) sepia(1) saturate(3) hue-rotate(210deg);
}

.settings-accordion .accordion-body {
    padding: 0.25rem 1.25rem 1.25rem !important;
}

.settings-accordion .accordion-button .bi {
    color: var(--clr-accent);
    font-size: 1rem;
}

/* ---- Settings Group ---- */
.settings-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.settings-row-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.settings-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--clr-text-secondary);
    letter-spacing: 0.03em;
}

.settings-value-hint {
    font-size: 0.75rem;
    color: var(--clr-accent);
    font-weight: 700;
    min-width: 2rem;
    text-align: right;
}

/* ---- Color Palette Grid ---- */
.palette-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.palette-btn {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 0.6rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--trans-fast);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.palette-btn::after {
    content: '✓';
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    opacity: 0;
    transition: opacity var(--trans-fast);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.palette-btn.active {
    border-color: #fff;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.3);
}

.palette-btn.active::after {
    opacity: 1;
}

.palette-btn:hover {
    transform: scale(1.08);
}

/* Palette colors */
.pal-purple {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.pal-blue {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.pal-cyan {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.pal-green {
    background: linear-gradient(135deg, #10b981, #059669);
}

.pal-gold {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.pal-red {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.pal-pink {
    background: linear-gradient(135deg, #ec4899, #be185d);
}

.pal-neon {
    background: linear-gradient(135deg, #00fff5, #7fff00);
}

/* ---- Clock Themes Grid ---- */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.theme-btn {
    padding: 0.55rem 0.7rem;
    border-radius: 0.6rem;
    border: 1px solid var(--clr-border);
    background: var(--clr-bg-glass);
    color: var(--clr-text-secondary);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    transition: all var(--trans-fast);
    font-family: var(--font-ui);
}

.theme-btn:hover {
    border-color: var(--clr-accent);
    color: var(--clr-accent);
}

.theme-btn.active {
    background: var(--clr-accent);
    border-color: var(--clr-accent);
    color: #fff;
}

/* ---- Background Themes ---- */
.bg-theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.bg-theme-btn {
    aspect-ratio: 16/9;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--trans-fast);
    overflow: hidden;
    position: relative;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0.3rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.bg-theme-btn.active {
    border-color: var(--clr-accent);
    box-shadow: 0 0 10px var(--clr-glow);
}

.bg-theme-btn:hover {
    transform: scale(1.04);
}

.bg-dark-solid {
    background: #0d0d14;
}

.bg-midnight {
    background: linear-gradient(135deg, #0a0015, #1a0030);
}

.bg-ocean {
    background: linear-gradient(135deg, #001a2e, #00354f, #004d70);
}

.bg-forest {
    background: linear-gradient(135deg, #002010, #003820, #005830);
}

.bg-sunset {
    background: linear-gradient(135deg, #1a0020, #3d0030, #6b0050, #ff4500);
}

.bg-aurora {
    background: linear-gradient(135deg, #000a1a, #001a2e, #002d40, #00bcd4, #4caf50);
    background-size: 300% 300%;
    animation: auroraShift 8s ease infinite alternate;
}

.bg-cyberpunk {
    background: linear-gradient(135deg, #0d0020, #200040, #ff00ff40, #00ffff30);
}

.bg-lava {
    background: linear-gradient(135deg, #1a0000, #3d0000, #ff2200);
}

.bg-space {
    background: radial-gradient(ellipse at center, #0d0020 0%, #000 100%);
}

@keyframes auroraShift {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

/* ---- Upload BG ---- */
.upload-bg-area {
    border: 2px dashed var(--clr-border);
    border-radius: 0.7rem;
    padding: 1.2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--trans-fast);
}

.upload-bg-area:hover {
    border-color: var(--clr-accent);
}

.upload-bg-area.dragover {
    border-color: var(--clr-accent);
    background: rgba(99, 102, 241, 0.08);
}

.upload-bg-area p {
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    margin: 0;
}

.upload-bg-area i {
    font-size: 1.5rem;
    color: var(--clr-accent);
    display: block;
    margin-bottom: 0.4rem;
}

/* ---- Digit Color Input ---- */
.color-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.color-picker-wrap {
    width: 36px;
    height: 36px;
    border-radius: 0.4rem;
    overflow: hidden;
    border: 2px solid var(--clr-border);
    position: relative;
    cursor: pointer;
}

.color-picker-wrap input[type="color"] {
    position: absolute;
    inset: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    border: none;
    cursor: pointer;
    opacity: 0;
}

.color-preview {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--clr-accent);
    pointer-events: none;
}

/* ---- Reset Button ---- */
.reset-btn {
    width: 100%;
    padding: 0.65rem;
    border: 1px solid var(--clr-danger);
    color: var(--clr-danger);
    background: transparent;
    border-radius: 0.6rem;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all var(--trans-fast);
    font-family: var(--font-ui);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.reset-btn:hover {
    background: var(--clr-danger);
    color: #fff;
}

/* ---- Slideshow toggle ---- */
.slideshow-preview {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.slideshow-thumb {
    width: 56px;
    height: 40px;
    border-radius: 0.3rem;
    object-fit: cover;
    border: 1px solid var(--clr-border);
    opacity: 0.7;
    transition: opacity var(--trans-fast);
}

.slideshow-thumb.active {
    opacity: 1;
    border-color: var(--clr-accent);
}

/* =====================================================
   GLASS CARD (used in music section)
   ===================================================== */
.glass-card {
    background: var(--clr-bg-card) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: 1.25rem !important;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    color: var(--clr-text-primary) !important;
}

/* Music section - force all text to respect theme tokens */
.music-section h3,
.music-section h4,
.music-section h5,
.music-section p,
.music-section span,
.music-section small,
.music-section label,
.music-section .section-title {
    color: var(--clr-text-primary) !important;
}

.music-section .text-muted,
.music-section small.text-muted,
.music-section p.text-muted {
    color: var(--clr-text-muted) !important;
}

/* Bootstrap .form-select override for dark mode */
.music-section .form-select,
.music-section select {
    background-color: var(--clr-bg-glass) !important;
    color: var(--clr-text-primary) !important;
    border-color: var(--clr-border) !important;
}

.music-section .form-select option,
.music-section select option {
    background-color: var(--clr-bg-card) !important;
    color: var(--clr-text-primary) !important;
}

/* Bootstrap .progress background */
.music-section .progress {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* btn-link text color in music player */
.music-section .btn-link.text-light,
.music-section .btn-link.text-muted {
    color: var(--clr-text-secondary) !important;
}

.music-section .btn-link.text-light:hover,
.music-section .btn-link.text-muted:hover {
    color: var(--clr-accent) !important;
}

/* Light mode: slightly darken glass-card so it looks distinct */
[data-theme="light"] .glass-card {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(99, 102, 241, 0.18) !important;
    color: var(--clr-text-primary) !important;
}

[data-theme="light"] .music-section .form-select,
[data-theme="light"] .music-section select {
    background-color: rgba(99, 102, 241, 0.07) !important;
    color: var(--clr-text-primary) !important;
}