/* Widgets & Panels — nutzt Design-Tokens aus style.css */

.sp-panel-body {
    margin: 0;
    padding: 10px;
    background: var(--sp-page-gradient);
    font-family: var(--font);
    font-size: 13px;
    color: var(--sp-widget-text);
    line-height: 1.5;
}

.sp-widget {
    line-height: 1.45;
    background: var(--sp-widget-bg);
    border: 1px solid var(--sp-widget-border);
    border-radius: var(--sp-radius-lg);
    padding: 14px 16px;
    box-shadow: var(--sp-shadow-card);
    color: var(--sp-widget-text);
}

.sp-widget-heading {
    margin: 0 0 .75rem;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sp-widget-muted);
}

.sp-widget-onair-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.sp-widget-avatar {
    text-align: center;
    flex-shrink: 0;
    width: 108px;
}

.sp-widget-avatar img {
    width: 108px;
    height: 108px;
    max-width: 108px;
    max-height: 108px;
    border-radius: var(--sp-radius-md);
    display: block;
    margin: 0 auto;
    object-fit: cover;
    background: var(--sp-surface-muted);
    border: 2px solid var(--sp-widget-bg);
    box-shadow: var(--sp-shadow-soft);
}

.sp-widget-dj {
    display: block;
    margin-top: 6px;
    font-weight: 600;
    font-size: 12px;
    color: var(--sp-accent-text, var(--primary));
}

.sp-widget-onair-info {
    flex: 1;
    min-width: 0;
}

.sp-widget-onair-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sp-widget-muted);
    margin-bottom: 2px;
}

.sp-widget-time-badge,
.sp-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-accent-text, var(--primary));
    background: var(--sp-accent-soft);
    border-radius: var(--sp-radius-pill);
    padding: 2px 8px;
    margin-bottom: 6px;
}

.sp-widget-show-title {
    margin: .25rem 0 .5rem;
    font-size: 16px;
    line-height: 1.35;
    color: var(--sp-widget-text);
}

.sp-widget-show-title strong {
    font-weight: 700;
}

.sp-widget-next {
    margin-top: .85rem;
    padding-top: .65rem;
    border-top: 1px dashed var(--sp-widget-border);
    font-size: 12px;
}

.sp-widget-next strong {
    color: var(--sp-widget-text);
}

.sp-widget-empty {
    color: var(--sp-widget-muted);
    font-style: italic;
    text-align: center;
    padding: .5rem 0;
}

.sp-today-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sp-today-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .2rem .65rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--sp-widget-border);
    align-items: center;
}

.sp-today-item:last-child {
    border-bottom: none;
}

.sp-today-avatar {
    grid-row: span 2;
    border-radius: var(--sp-radius-sm);
    border: 1px solid var(--sp-widget-border);
    box-shadow: var(--sp-shadow-soft);
}

.sp-today-time {
    font-weight: 700;
    font-size: 11px;
    color: var(--sp-accent-text, var(--primary));
    letter-spacing: .02em;
}

.sp-today-title {
    font-weight: 600;
    color: var(--sp-widget-text);
}

.sp-today-dj {
    grid-column: 2;
    font-size: 11px;
    color: var(--sp-widget-muted);
}

.sp-widget-stream {
    padding-top: 12px;
}

.sp-stream-onair {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sp-widget-border);
}

.sp-stream-onair .sp-widget {
    border: none;
    box-shadow: none;
    padding: 0;
    background: transparent;
}

.sp-stream-meta {
    margin: 0;
    text-align: center;
    padding: 10px 12px;
    background: var(--sp-meta-gradient);
    border-radius: var(--sp-radius-md);
    border: 1px solid var(--sp-widget-border);
}

.sp-stream-meta-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sp-widget-muted);
    margin-bottom: 4px;
}

.sp-stream-title-wrap {
    overflow: hidden;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

.sp-stream-title-wrap.is-marquee-active {
    text-align: left;
    mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}

.sp-stream-title {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.45;
    min-height: 1.45em;
    color: var(--sp-stream-title-color, var(--sp-widget-text));
}

.sp-stream-title-scroll {
    display: block;
    overflow: hidden;
    width: 100%;
    transition: opacity .25s ease;
}

.sp-stream-title-scroll.is-changing {
    opacity: 0.55;
}

.sp-stream-title-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
}

.sp-stream-title-chunk {
    flex: 0 0 auto;
    padding-right: 2.5rem;
}

.sp-stream-title-scroll.is-marquee .sp-stream-title-track {
    animation: sp-title-marquee var(--marquee-duration, 18s) linear infinite;
}

.sp-stream-title-scroll.is-marquee .sp-stream-title-track:hover {
    animation-play-state: paused;
}

@keyframes sp-title-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.sp-stream-title em {
    color: var(--sp-widget-muted);
    font-weight: 500;
    font-style: normal;
}

.sp-stream-listeners {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
    background: rgba(34, 197, 94, 0.12);
    border-radius: var(--sp-radius-pill);
    padding: 3px 10px;
    margin-top: 8px;
}

.sp-stream-listeners::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, .25);
    animation: sp-pulse-dot 2s ease-in-out infinite;
}

.sp-widget-stream.is-offline .sp-stream-listeners {
    display: none;
}

.sp-stream-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 3px 9px;
    border-radius: var(--sp-radius-pill);
    margin-bottom: 8px;
}

.sp-stream-status-pill.is-online {
    color: #15803d;
    background: rgba(34, 197, 94, 0.15);
}

.sp-stream-status-pill.is-offline {
    color: #b45309;
    background: rgba(245, 158, 11, 0.15);
}

.sp-stream-status-pill .sp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.sp-stream-status-pill.is-online .sp-dot {
    animation: sp-pulse-dot 2s ease-in-out infinite;
}

@keyframes sp-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(.85); }
}

.sp-player-links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    min-height: 30px;
}

.sp-player-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--sp-radius-sm);
    border: 1px solid var(--sp-widget-border);
    background: linear-gradient(180deg, var(--sp-widget-bg) 0%, var(--sp-surface-muted) 100%);
    color: var(--sp-widget-text);
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
    box-shadow: var(--sp-shadow-soft);
}

.sp-player-icon svg {
    width: 15px;
    height: 15px;
    display: block;
}

.sp-player-icon:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--sp-shadow-card);
    text-decoration: none;
}

.sp-player-icon-winamp { color: #c45c00; }
.sp-player-icon-mediaplayer { color: #0066b3; }
.sp-player-icon-stream { color: #2d7a3a; }
.sp-player-icon-lautfm { color: #e85d04; font-size: 11px; font-weight: 800; letter-spacing: -.02em; }

.sp-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;
}

.sp-studiobox-btn {
    display: inline-block;
    margin-top: .4rem;
    font-size: 12px !important;
    border-radius: var(--sp-radius-sm) !important;
}

.sp-nsv-icon {
    font-size: 14px;
    vertical-align: middle;
    margin-left: 4px;
}

.sp-slot-continuation td {
    background: var(--sp-accent-soft);
}

/* Admin: Widget-Vorschau in Karten */
.admin-body .sp-widget {
    max-width: 100%;
}

.admin-body .schedule-scroll {
    border-radius: var(--sp-radius-lg);
    box-shadow: var(--sp-shadow-card);
}

/* Panel body themes (iframe / embed) */
.sp-panel-body.theme-dark {
    --sp-widget-bg: #1a2332;
    --sp-widget-border: #2d3a4f;
    --sp-widget-text: #e7ecf3;
    --sp-widget-muted: #8b9cb3;
    --sp-surface-muted: #243044;
    --sp-accent-soft: rgba(59, 130, 246, 0.14);
    --sp-accent-text: #60a5fa;
    --sp-stream-title-color: #f8fafc;
    --sp-meta-gradient: linear-gradient(180deg, #243044 0%, #1a2332 100%);
    --sp-page-gradient: linear-gradient(160deg, #0f1419 0%, #1a2744 100%);
    background: var(--sp-page-gradient);
    color: var(--sp-widget-text);
}

.sp-panel-body.theme-light {
    --sp-widget-bg: #ffffff;
    --sp-widget-border: #dde3ec;
    --sp-widget-text: #1a2332;
    --sp-widget-muted: #64748b;
    --sp-surface-muted: #f8fafc;
    --sp-accent-soft: #eff6ff;
    --sp-accent-text: #2563eb;
    --sp-stream-title-color: #0f172a;
    --sp-meta-gradient: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    --sp-page-gradient: linear-gradient(145deg, #f4f6f9 0%, #e8ecf2 100%);
    background: var(--sp-page-gradient);
    color: var(--sp-widget-text);
}

@media (prefers-color-scheme: dark) {
    .sp-panel-body.theme-auto {
        --sp-widget-bg: #1a2332;
        --sp-widget-border: #2d3a4f;
        --sp-widget-text: #e7ecf3;
        --sp-widget-muted: #8b9cb3;
        --sp-surface-muted: #243044;
        --sp-accent-soft: rgba(59, 130, 246, 0.14);
        --sp-accent-text: #60a5fa;
        --sp-stream-title-color: #f8fafc;
        --sp-meta-gradient: linear-gradient(180deg, #243044 0%, #1e293b 100%);
        --sp-page-gradient: linear-gradient(160deg, #0f1419 0%, #1a2744 100%);
        background: var(--sp-page-gradient);
        color: var(--sp-widget-text);
    }
}

@media (prefers-color-scheme: light) {
    .sp-panel-body.theme-auto {
        --sp-widget-bg: #ffffff;
        --sp-widget-border: #dde3ec;
        --sp-widget-text: #1a2332;
        --sp-widget-muted: #64748b;
        --sp-surface-muted: #f8fafc;
        --sp-accent-soft: #eff6ff;
        --sp-accent-text: #2563eb;
        --sp-stream-title-color: #0f172a;
        --sp-meta-gradient: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
        --sp-page-gradient: linear-gradient(145deg, #f4f6f9 0%, #e8ecf2 100%);
        background: var(--sp-page-gradient);
        color: var(--sp-widget-text);
    }
}