/**
 * Sonos Station Manager – Glow-Up Layer
 * Version: 1.0 (SSM 4.32.0)
 *
 * Visuelles Redesign des Portal-Frontends. Diese Datei wird NACH
 * style.css geladen (Dependency: ssm-styles) und ueberschreibt
 * gezielt Alt-Regeln bei gleicher Spezifitaet.
 *
 * WARUM KEIN @layer:
 * Gelayerte Regeln verlieren in der Kaskade grundsaetzlich gegen
 * ungelayerte. style.css ist komplett ungelayert – ein @layer hier
 * wuerde also systematisch unterliegen. Stattdessen: gleiche
 * Spezifitaet + spaetere Quellreihenfolge, kein einziges !important.
 *
 * INHALT:
 *   1. Design-Tokens (Erweiterung)
 *   2. Dark Mode
 *   3. Station-Card – Cover-Kachel
 *   4. Filter-Bar + Genre-Chips
 *   5. Signature-Gradient (Buttons, Player)
 *   6. Theme-Toggle
 *   7. Alt-Regel-Korrekturen
 *   8. Responsive + Reduced Motion
 */

/* ==========================================================================
   1. DESIGN-TOKENS – ERWEITERUNG
   ========================================================================== */

:root {
    /* Signature-Gradient: Cyan -> Indigo */
    --ssm-gradient-primary: linear-gradient(135deg, #00B4D8 0%, #4F46E5 100%);
    --ssm-gradient-primary-hover: linear-gradient(135deg, #0096B7 0%, #4338CA 100%);

    /* Cover-Kachel */
    --ssm-cover-ratio: 4 / 3;
    --ssm-cover-max-height: 260px;
    --ssm-cover-logo-max-w: 68%;
    --ssm-cover-logo-max-h: 72%;
    --ssm-backdrop-blur: 28px;
    --ssm-backdrop-opacity: 0.55;
    --ssm-cover-scrim: linear-gradient(to top, rgba(15, 23, 42, 0.28) 0%, rgba(15, 23, 42, 0) 55%);
    --ssm-cover-plate: linear-gradient(145deg, #F8FAFC 0%, #EEF2F7 100%);

    /* Play-FAB */
    --ssm-fab-size: 52px;
    --ssm-fab-size-sm: 44px;

    /* Chips */
    --ssm-chip-bg: #FFFFFF;
    --ssm-chip-border: #E2E8F0;
    --ssm-chip-text: #334155;
    --ssm-chip-count: #94A3B8;

    /* Glas-Flaechen (Detailseite) */
    --ssm-glass-bg: rgba(255, 255, 255, 0.88);

    /* Radius + Easing */
    --ssm-card-radius: 16px;
    --ssm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* Alt-Token neutralisieren: Card-Hoehe ist jetzt inhaltsgesteuert */
    --ssm-card-min-height: 0px;
}

/* --------------------------------------------------------------------------
   2. DARK MODE

   Die Dark-Tokens stehen NICHT hier, sondern inline in
   ssm_print_theme_css() (sonos-station-manager.php). Grund: LiteSpeed
   UCSS entfernt Regeln, deren Selektoren nicht im HTML vorkommen, und
   [data-ssm-theme] erscheint erst nach dem Umschalten. Inline-<style>
   fasst LiteSpeed nicht an. Dort wird ausserdem die Blocksy-Palette
   mitgefaerbt, damit Header, Footer und Seitenhintergrund mitziehen.

   Werte gespiegelt aus soundnode_radio/lib/config/app_theme.dart.
   -------------------------------------------------------------------------- */


/* ==========================================================================
   3. STATION-CARD – COVER-KACHEL
   Ersetzt die 470px-Formularkachel durch eine inhaltsgesteuerte
   Cover-Kachel mit Blur-Backdrop und Play-FAB.
   ========================================================================== */

.ssm-stations-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 22px;
}

.ssm-station-card {
    position: relative;
    min-height: 0;
    border-radius: var(--ssm-card-radius);
    border: 1px solid var(--ssm-border-light);
    background: var(--ssm-background);
    box-shadow: var(--ssm-shadow-xs);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.3s var(--ssm-ease),
                box-shadow 0.3s var(--ssm-ease),
                border-color 0.3s var(--ssm-ease);
}

.ssm-station-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ssm-shadow-lg);
    border-color: var(--ssm-border);
}

/* Tastatur-Fokus auf der ganzen Kachel sichtbar machen */
.ssm-station-card:focus-within {
    border-color: var(--ssm-primary);
    box-shadow: var(--ssm-shadow-md), 0 0 0 3px var(--ssm-primary-light);
}

/* --------------------------------------------------------------------------
   3a. COVER
   -------------------------------------------------------------------------- */

.ssm-station-card .ssm-station-logo {
    position: relative;
    height: auto;
    min-height: 0;
    max-height: var(--ssm-cover-max-height);
    aspect-ratio: var(--ssm-cover-ratio);
    padding: 0;
    background: var(--ssm-cover-plate);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Unscharfer Logo-Backdrop – gibt jeder Kachel ihre eigene Farbigkeit */
.ssm-card-backdrop {
    position: absolute;
    inset: -14%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(var(--ssm-backdrop-blur)) saturate(1.5);
    opacity: var(--ssm-backdrop-opacity);
    transform: scale(1.12);
    z-index: 0;
    pointer-events: none;
}

/* Scrim – haelt Live-Dot und FAB auf hellen Covern lesbar */
.ssm-station-card .ssm-station-logo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ssm-cover-scrim);
    z-index: 1;
    pointer-events: none;
}

.ssm-station-card .ssm-card-image {
    position: relative;
    z-index: 2;
    width: auto;
    height: auto;
    max-width: var(--ssm-cover-logo-max-w);
    max-height: var(--ssm-cover-logo-max-h);
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(15, 23, 42, 0.28));
    transition: transform 0.45s var(--ssm-ease);
}

/* style.css nagelt das Logo per .ssm-station-logo img.ssm-card-image auf
   --ssm-card-logo-size (130px) fest – Spezifitaet 0,2,1, also hoeher als
   die Regel oben. Hier bewusst 0,3,1, damit das Logo mit dem Cover
   skaliert. Plate, Rahmen und Schatten entfallen: der unscharfe Backdrop
   uebernimmt die Flaeche, ein Drop-Shadow haelt das Logo davor lesbar. */
.ssm-station-card .ssm-station-logo img.ssm-card-image {
    width: auto;
    height: auto;
    max-width: var(--ssm-cover-logo-max-w);
    max-height: var(--ssm-cover-logo-max-h);
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    filter: drop-shadow(0 6px 18px rgba(15, 23, 42, 0.28));
}

.ssm-station-card:hover .ssm-card-image {
    transform: scale(1.06);
}

.ssm-station-card:hover .ssm-station-logo img.ssm-card-image {
    transform: scale(1.06);
    box-shadow: none;
}

/* Ohne Logo gibt es keinen Backdrop – die helle Cover-Plate waere dann
   eine leere Leuchtflaeche, besonders im Dark Mode. In dem Fall
   uebernimmt die Kartenfarbe. */
.ssm-station-card .ssm-station-logo:has(.ssm-no-logo) {
    background: linear-gradient(145deg, var(--ssm-background-alt) 0%, var(--ssm-background) 100%);
}

/* style.css rahmt den Platzhalter als 130px-Kaestchen mit Schatten ein
   (Spezifitaet 0,2,0) – im Cover soll er flach und ruhig sein. */
.ssm-station-card .ssm-station-logo .ssm-no-logo {
    position: relative;
    z-index: 2;
    width: auto;
    height: auto;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--ssm-text-muted);
    opacity: 0.55;
}

/* --------------------------------------------------------------------------
   3b. PLAY-FAB
   .ssm-btn-stream bleibt bewusst die Klasse – player.js haengt daran.
   -------------------------------------------------------------------------- */

.ssm-station-logo .ssm-btn-stream {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    width: var(--ssm-fab-size);
    height: var(--ssm-fab-size);
    min-width: 0;
    flex: none;
    padding: 0;
    gap: 0;
    border: none;
    border-radius: 50%;
    background: var(--ssm-gradient-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.30);
    opacity: 0;
    transform: translateY(10px) scale(0.92);
    transition: opacity 0.25s var(--ssm-ease),
                transform 0.25s var(--ssm-ease),
                box-shadow 0.25s var(--ssm-ease);
}

.ssm-station-card:hover .ssm-station-logo .ssm-btn-stream,
.ssm-station-card:focus-within .ssm-station-logo .ssm-btn-stream {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ssm-station-logo .ssm-btn-stream:hover {
    background: var(--ssm-gradient-primary-hover);
    transform: translateY(0) scale(1.08);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.38);
}

.ssm-station-logo .ssm-btn-stream .dashicons {
    font-size: 26px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    margin-left: 2px; /* optische Mitte des Play-Dreiecks */
}

/* Touch-Geraete: FAB dauerhaft sichtbar – es gibt keinen Hover */
@media (hover: none) {
    .ssm-station-logo .ssm-btn-stream {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Live-Dot ueber den Scrim heben. pointer-events aus, sonst schluckt der
   Punkt in seiner Ecke den Klick auf den Stretched Link. */
.ssm-station-card .ssm-live-dot {
    z-index: 4;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   3c. INHALT
   -------------------------------------------------------------------------- */

.ssm-station-card .ssm-card-content {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.ssm-station-card .ssm-station-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 650;
    line-height: 1.35;
    min-height: 0;
    max-height: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ssm-station-card .ssm-station-title a {
    color: var(--ssm-heading);
    text-decoration: none;
}

/* Stretched Link: die gesamte Kachel wird klickbar, ohne verschachteltes
   <a> und ohne JS. Der Play-FAB (z-index 5) bleibt darueber erreichbar. */
.ssm-card-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
}

.ssm-station-card .ssm-card-badges {
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 0;
    height: auto;
    min-height: 0;
}

/* Badge-Links muessen ueber dem Stretched Link liegen */
.ssm-station-card .ssm-badge-link,
.ssm-station-card .ssm-verified-info {
    position: relative;
    z-index: 5;
}

.ssm-station-card .ssm-station-excerpt {
    margin: 0;
    flex-grow: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--ssm-text-light);
    height: auto;
    min-height: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Der Weichzeichner-Verlauf am Excerpt-Ende ist mit line-clamp ueberfluessig
   (und war auf #fff festgenagelt – haette Dark Mode gebrochen). */
.ssm-station-card .ssm-station-excerpt::after {
    content: none;
}

/* Alte Action-Zeile: in der Cover-Kachel ersetzt der Stretched Link den
   Details-Button. Bleibt fuer Custom-Stream-Karten erhalten. */
.ssm-station-card .ssm-station-actions:empty {
    display: none;
}


/* ==========================================================================
   4. FILTER-BAR + GENRE-CHIPS
   Ersetzt den grauen Kasten mit nativen Dropdowns durch eine
   scrollbare Pill-Reihe plus schlanke Sekundaer-Controls.
   ========================================================================== */

/* Chevron fuer die Selects. Slate-500 funktioniert hell wie dunkel. */
:root {
    --ssm-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748B'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5z'/%3E%3C/svg%3E");
}

.ssm-filter-bar {
    padding: 0;
    background: none;
    border-radius: 0;
    margin-bottom: var(--ssm-spacing-xl);
}

.ssm-filter-bar .ssm-filter-controls {
    gap: var(--ssm-spacing-sm) var(--ssm-spacing-md);
    align-items: center;
}

/* --------------------------------------------------------------------------
   4a. CHIP-REIHE
   -------------------------------------------------------------------------- */

.ssm-chip-scroller {
    position: relative;
    margin-bottom: var(--ssm-spacing-md);
}

.ssm-chip-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.ssm-chip-row::-webkit-scrollbar {
    display: none;
}

/* Scroll-Pfeile. Reine Maus-Hilfe – per Tastatur laeuft man durch die
   Chips und der Browser scrollt mit.

   Die Sichtbarkeit haengt an .has-overflow-start/-end und wird von
   ssm-glowup.js gesetzt. Diese Zustandsregeln stehen inline im
   Critical-CSS-Block (sonos-station-manager.php), weil LiteSpeed UCSS
   Selektoren entfernt, die nicht im HTML vorkommen. */
.ssm-chip-nav {
    position: absolute;
    top: calc(50% - 5px);
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--ssm-chip-border);
    border-radius: 50%;
    background: var(--ssm-chip-bg);
    color: var(--ssm-text-light);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--ssm-shadow-sm);
    transition: opacity 0.2s var(--ssm-ease),
                color 0.2s var(--ssm-ease),
                border-color 0.2s var(--ssm-ease);
}

.ssm-chip-nav:hover {
    border-color: var(--ssm-primary);
    color: var(--ssm-primary);
}

.ssm-chip-nav svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.ssm-chip-nav-prev {
    left: 0;
}

.ssm-chip-nav-next {
    right: 0;
}

/* Beruehrungsgeraete scrollen mit dem Finger – da sind Pfeile nur im Weg. */
@media (hover: none) {
    .ssm-chip-nav {
        display: none;
    }
}

.ssm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 8px 14px;
    border: 1px solid var(--ssm-chip-border);
    border-radius: var(--ssm-radius-pill);
    background: var(--ssm-chip-bg);
    color: var(--ssm-chip-text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s var(--ssm-ease),
                border-color 0.2s var(--ssm-ease),
                color 0.2s var(--ssm-ease),
                transform 0.2s var(--ssm-ease);
}

.ssm-chip:hover {
    border-color: var(--ssm-primary);
    color: var(--ssm-primary-hover);
    transform: translateY(-1px);
}

.ssm-chip:focus-visible {
    outline: 2px solid var(--ssm-primary);
    outline-offset: 2px;
}

.ssm-chip.is-active {
    background: var(--ssm-gradient-primary);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 180, 216, 0.28);
}

.ssm-chip-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ssm-chip-count);
    font-variant-numeric: tabular-nums;
}

.ssm-chip.is-active .ssm-chip-count {
    color: rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   4b. SEKUNDAER-CONTROLS (Land, Sortierung, Reset, Theme)
   -------------------------------------------------------------------------- */

.ssm-filter-bar .ssm-filter-group {
    gap: 6px;
}

.ssm-filter-bar .ssm-filter-group label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ssm-text-muted);
}

.ssm-filter-bar .ssm-filter-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 9px 34px 9px 14px;
    border: 1px solid var(--ssm-border);
    border-radius: var(--ssm-radius-pill);
    background-color: var(--ssm-background);
    color: var(--ssm-text);
    font-size: 0.875rem;
    line-height: 1.3;
    min-height: 0;
    cursor: pointer;
    background-image: var(--ssm-select-arrow);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    transition: border-color 0.2s var(--ssm-ease), box-shadow 0.2s var(--ssm-ease);
}

.ssm-filter-bar .ssm-filter-select:hover {
    border-color: var(--ssm-primary);
}

.ssm-filter-bar .ssm-filter-select:focus-visible {
    outline: none;
    border-color: var(--ssm-primary);
    box-shadow: 0 0 0 3px var(--ssm-primary-light);
}

.ssm-filter-bar .ssm-btn-reset {
    min-height: 0;
    padding: 9px 16px;
    border-radius: var(--ssm-radius-pill);
    font-size: 0.875rem;
}

/* Genre-Dropdown wird von der Chip-Reihe gespiegelt und ausgeblendet.
   Das select-Element bleibt im DOM - frontend.js liest und schreibt es weiter. */
.ssm-filter-group-mirrored {
    display: none;
}

/* --------------------------------------------------------------------------
   4c. LADEZUSTAND
   -------------------------------------------------------------------------- */

.ssm-filter-loading {
    color: var(--ssm-text-light);
}


/* ==========================================================================
   5. SIGNATURE-GRADIENT
   Das Cyan war bisher nur in Mini-Badges sichtbar. Primaer-Aktionen
   bekommen jetzt den durchgehenden Cyan-Indigo-Verlauf.
   ========================================================================== */

.ssm-btn-primary,
.ssm-detail-play-btn,
.ssm-submission-form .acf-form-submit input[type="submit"] {
    background: var(--ssm-gradient-primary);
    border: none;
    color: #fff;
}

.ssm-btn-primary:hover,
.ssm-detail-play-btn:hover,
.ssm-submission-form .acf-form-submit input[type="submit"]:hover {
    background: var(--ssm-gradient-primary-hover);
}

.ssm-sticky-player .ssm-player-play {
    background: var(--ssm-gradient-primary);
}

.ssm-sticky-player .ssm-player-play:hover {
    background: var(--ssm-gradient-primary-hover);
}

/* Player bekommt eine feine Lichtkante nach oben */
.ssm-sticky-player {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* ==========================================================================
   6. THEME-TOGGLE
   ========================================================================== */

.ssm-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--ssm-border);
    border-radius: 50%;
    background: var(--ssm-background);
    color: var(--ssm-text-light);
    cursor: pointer;
    transition: border-color 0.2s var(--ssm-ease),
                color 0.2s var(--ssm-ease),
                transform 0.2s var(--ssm-ease);
}

.ssm-theme-toggle:hover {
    border-color: var(--ssm-primary);
    color: var(--ssm-primary);
    transform: rotate(-12deg);
}

.ssm-theme-toggle:focus-visible {
    outline: 2px solid var(--ssm-primary);
    outline-offset: 2px;
}

.ssm-theme-toggle svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Sonne/Mond-Umschaltung haengt an [data-ssm-theme] und wuerde von
   LiteSpeed UCSS entfernt (das Attribut steht erst nach dem Toggle im
   HTML). Die Regeln stehen deshalb inline in ssm_print_theme_css(). */


/* ==========================================================================
   7. ALT-REGEL-KORREKTUREN FUER DARK MODE
   Wenige Stellen in style.css sind auf Weiss festgenagelt.
   ========================================================================== */

/* Detailseite: Glaskarte ueber dem Blur-Backdrop */
.ssm-card {
    background: var(--ssm-glass-bg);
}

/* Modal- und Formularflaechen folgen den Tokens */
.ssm-modal-content,
.ssm-suggestion-form {
    background: var(--ssm-background);
    color: var(--ssm-text);
}

/* Screenreader-Text - style.css definiert die Klasse nicht selbst */
.ssm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
   8. RESPONSIVE + REDUCED MOTION
   ========================================================================== */

@media (max-width: 768px) {
    .ssm-stations-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 14px;
    }

    .ssm-station-card .ssm-card-content {
        padding: 12px 12px 14px;
        gap: 6px;
    }

    .ssm-station-card .ssm-station-title {
        font-size: 0.94rem;
    }

    .ssm-station-card .ssm-station-excerpt {
        display: none;
    }

    .ssm-station-logo .ssm-btn-stream {
        width: var(--ssm-fab-size-sm);
        height: var(--ssm-fab-size-sm);
        right: 8px;
        bottom: 8px;
    }

    .ssm-station-logo .ssm-btn-stream .dashicons {
        font-size: 22px;
        width: 22px;
        height: 22px;
        line-height: 22px;
    }
}

@media (max-width: 480px) {
    .ssm-stations-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ssm-station-card,
    .ssm-station-card .ssm-card-image,
    .ssm-station-logo .ssm-btn-stream,
    .ssm-chip,
    .ssm-theme-toggle {
        transition: none;
    }

    .ssm-station-card:hover {
        transform: none;
    }

    .ssm-station-card:hover .ssm-card-image {
        transform: none;
    }

    .ssm-theme-toggle:hover {
        transform: none;
    }

    .ssm-station-logo .ssm-btn-stream {
        opacity: 1;
        transform: none;
    }
}