/**
 * Toggle Track Skin — Clean Minimal
 *
 * Sharp edges, subtle shadows, monochrome palette with a single
 * accent color. No textures, no decoration. Just clean lines.
 *
 * @package ToggleTrack
 * @since   1.0.0
 */

/* ---------- Color Palette ---------- */

.tt-skin-clean-minimal {
    --tt-bg: #1a1a1a;
    --tt-text: #e0e0e0;
    --tt-active: #ffffff;
    --tt-controls: #2a2a2a;
    --tt-progress: #333333;
    --tt-accent: #ff4400;
}

/* ---------- Container ---------- */

.tt-skin-clean-minimal {
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* ---------- Track Buttons ---------- */

.tt-skin-clean-minimal .tt-track-btn {
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.tt-skin-clean-minimal .tt-track-btn:hover {
    background: #333333;
}

.tt-skin-clean-minimal .tt-track-btn.tt-active:hover {
    background: var(--tt-accent);
}

/* ---------- Play Button ---------- */

.tt-skin-clean-minimal .tt-play-btn {
    border-radius: 4px;
}

.tt-skin-clean-minimal .tt-play-btn:hover {
    background: #333333;
}

/* ---------- Progress Bar ---------- */

.tt-skin-clean-minimal .tt-progress-bar {
    border-radius: 4px;
    height: 6px;
}

.tt-skin-clean-minimal .tt-progress-fill {
    border-radius: 4px;
}

/* ---------- Control Buttons ---------- */

.tt-skin-clean-minimal .tt-loop-btn,
.tt-skin-clean-minimal .tt-loudness-btn,
.tt-skin-clean-minimal .tt-ab-btn {
    border-radius: 4px;
    font-weight: 500;
}

.tt-skin-clean-minimal .tt-loop-btn:hover,
.tt-skin-clean-minimal .tt-loudness-btn:hover,
.tt-skin-clean-minimal .tt-ab-btn:hover {
    background: #333333;
}

.tt-skin-clean-minimal .tt-loop-btn.tt-active:hover,
.tt-skin-clean-minimal .tt-loudness-btn.tt-active:hover,
.tt-skin-clean-minimal .tt-ab-btn.tt-active:hover {
    background: var(--tt-accent);
}

/* ---------- Loading Overlay ---------- */

.tt-skin-clean-minimal .tt-loading {
    border-radius: 4px;
}

.tt-skin-clean-minimal .tt-loading-bar {
    border-radius: 3px;
}