/* =============================================================
 * SynthRadio — Components (Buttons, Cards, Badges, Tables, etc.)
 * ============================================================= */

/* ============ GLASS CARD ============ */
.glass-card {
    position: relative;
    background: linear-gradient(145deg,
        rgba(21, 30, 44, 0.85),
        rgba(16, 23, 34, 0.75) 60%,
        rgba(11, 15, 21, 0.85));
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius-lg);
    box-shadow: var(--sr-shadow-panel);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    overflow: hidden;
    transition:
        border-color var(--sr-transition),
        box-shadow var(--sr-transition),
        transform var(--sr-transition);
}

.glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(0, 172, 255, 0.35),
        transparent 40%,
        transparent 60%,
        rgba(199, 21, 133, 0.25));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
}

.glass-card:hover {
    border-color: var(--sr-border-strong);
    box-shadow: var(--sr-shadow-panel), var(--sr-glow-blue);
    transform: translateY(-1px);
}

.glass-card-xl { padding: var(--sr-space-8); }
.glass-card-lg { padding: var(--sr-space-6); }
.glass-card-md { padding: var(--sr-space-5); }
.glass-card-sm { padding: var(--sr-space-4); }

/* ============ BUTTONS ============ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sr-space-2);
    padding: var(--sr-space-3) var(--sr-space-5);
    font-weight: 700;
    font-size: var(--sr-fs-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--sr-radius);
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform var(--sr-transition),
        box-shadow var(--sr-transition),
        background var(--sr-transition),
        border-color var(--sr-transition),
        color var(--sr-transition);
    position: relative;
    overflow: hidden;
    user-select: none;
    line-height: 1;
}

.btn:active { transform: translateY(1px); }
.btn-sm { padding: var(--sr-space-2) var(--sr-space-4); font-size: var(--sr-fs-xs); border-radius: var(--sr-radius-sm); }
.btn-lg { padding: var(--sr-space-4) var(--sr-space-6); font-size: var(--sr-fs-base); }
.btn-xl { padding: var(--sr-space-5) var(--sr-space-8); font-size: var(--sr-fs-md); }
.btn-block { width: 100%; }
.btn-icon { font-size: 1em; line-height: 1; display: inline-flex; align-items: center; }
.btn-label { display: inline-block; }

/* Primary — blue gradient with glow */
.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--sr-blue), var(--sr-electric) 60%, var(--sr-cyan));
    background-size: 200% 200%;
    background-position: 0% 50%;
    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
    border: 1px solid rgba(0, 172, 255, 0.55);
}

.btn-primary:hover {
    background-position: 100% 50%;
    box-shadow: 0 8px 36px rgba(0, 172, 255, 0.55), inset 0 0 0 1px rgba(255,255,255,0.14);
    color: #fff;
}

/* Ghost button */
.btn-ghost {
    color: var(--sr-text);
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--sr-border-strong);
}
.btn-ghost:hover {
    color: var(--sr-cyan);
    border-color: var(--sr-electric);
    background: rgba(0, 172, 255, 0.05);
    box-shadow: var(--sr-glow-blue);
}

/* Danger */
.btn-danger {
    color: #fff;
    background: linear-gradient(135deg, #B3203D, var(--sr-danger));
    border: 1px solid rgba(255,77,109,0.55);
    box-shadow: 0 4px 20px rgba(255, 77, 109, 0.35);
}
.btn-danger:hover { box-shadow: 0 8px 36px rgba(255, 77, 109, 0.5); color: #fff; }

/* Success */
.btn-success {
    color: #fff;
    background: linear-gradient(135deg, #1f9553, var(--sr-success));
    border: 1px solid rgba(46,204,113,0.55);
    box-shadow: 0 4px 20px rgba(46, 204, 113, 0.3);
}
.btn-success:hover { box-shadow: 0 8px 36px rgba(46, 204, 113, 0.5); color: #fff; }

/* Live button (red pulse) */
.btn-live {
    color: #fff;
    background: linear-gradient(135deg, #A90C3E, var(--sr-crimson));
    border: 1px solid rgba(255, 90, 160, 0.55);
    box-shadow: 0 0 0 0 rgba(199, 21, 133, 0.55);
    animation: live-pulse 2.2s ease-out infinite;
}
.btn-live:hover { color: #fff; box-shadow: 0 8px 36px rgba(199, 21, 133, 0.6); }
.btn-live-icon {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px #fff;
}

@keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(199, 21, 133, 0.55); }
    70%  { box-shadow: 0 0 0 18px rgba(199, 21, 133, 0); }
    100% { box-shadow: 0 0 0 0 rgba(199, 21, 133, 0); }
}

/* ============ BADGES ============ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: var(--sr-fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--sr-radius-round);
    border: 1px solid transparent;
    line-height: 1.4;
}

.badge-muted {
    color: var(--sr-muted);
    background: rgba(139, 154, 175, 0.1);
    border-color: rgba(139, 154, 175, 0.3);
}
.badge-info {
    color: var(--sr-electric);
    background: rgba(0, 172, 255, 0.1);
    border-color: rgba(0, 172, 255, 0.35);
}
.badge-success {
    color: var(--sr-success);
    background: rgba(46, 204, 113, 0.12);
    border-color: rgba(46, 204, 113, 0.4);
}
.badge-warning {
    color: var(--sr-warning);
    background: rgba(255, 181, 71, 0.12);
    border-color: rgba(255, 181, 71, 0.4);
}
.badge-danger {
    color: var(--sr-danger);
    background: rgba(255, 77, 109, 0.12);
    border-color: rgba(255, 77, 109, 0.4);
}
.badge-crimson {
    color: #F9A8D4;
    background: rgba(199, 21, 133, 0.15);
    border-color: rgba(199, 21, 133, 0.5);
}

/* Song status badges match Section 14 list */
.badge-status-draft       { @extend .badge-muted; }
.badge-status-submitted   { color: var(--sr-electric); background: rgba(0,172,255,0.1); border-color: rgba(0,172,255,0.3); }
.badge-status-under_review{ color: var(--sr-warning); background: rgba(255,181,71,0.1); border-color: rgba(255,181,71,0.3); }
.badge-status-approved    { color: var(--sr-success); background: rgba(46,204,113,0.1); border-color: rgba(46,204,113,0.35); }
.badge-status-rejected    { color: var(--sr-danger); background: rgba(255,77,109,0.1); border-color: rgba(255,77,109,0.35); }
.badge-status-requires_changes { color: #FDE68A; background: rgba(253,224,71,0.08); border-color: rgba(253,224,71,0.3); }
.badge-status-eligible    { color: var(--sr-cyan); background: rgba(0,212,255,0.1); border-color: rgba(0,212,255,0.4); }
.badge-status-in_rotation { color: #fff; background: linear-gradient(135deg, var(--sr-blue), var(--sr-crimson)); border-color: rgba(255,255,255,0.2); }
.badge-status-removed     { color: var(--sr-text-dim); background: rgba(0,0,0,0.3); border-color: rgba(139,154,175,0.2); }

/* ============ LIVE DOT / INDICATOR ============ */
.live-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--sr-danger);
    box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.55);
    animation: live-dot-pulse 1.6s ease-out infinite;
}

@keyframes live-dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 77, 109, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0); }
}

.live-label {
    font-weight: 800;
    letter-spacing: 0.2em;
    font-size: var(--sr-fs-xs);
    color: var(--sr-danger);
}

/* ============ TABLES ============ */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--sr-fs-sm);
}

.table thead th {
    text-align: left;
    font-weight: 700;
    font-size: var(--sr-fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sr-muted);
    padding: var(--sr-space-3) var(--sr-space-4);
    border-bottom: 1px solid var(--sr-border);
    background: rgba(0,172,255,0.03);
}

.table tbody td {
    padding: var(--sr-space-4);
    border-bottom: 1px solid var(--sr-border);
    color: var(--sr-text);
    vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }

.table tbody tr {
    transition: background var(--sr-transition);
}

.table tbody tr:hover {
    background: rgba(0, 172, 255, 0.04);
}

.table-row-action { text-align: right; white-space: nowrap; }

/* ============ PAGINATION ============ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sr-space-2);
    margin-top: var(--sr-space-6);
    list-style: none;
}
.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--sr-space-3);
    font-size: var(--sr-fs-sm);
    font-weight: 600;
    border-radius: var(--sr-radius-sm);
    border: 1px solid var(--sr-border);
    color: var(--sr-muted);
    transition: all var(--sr-transition);
}
.pagination a:hover { border-color: var(--sr-border-strong); color: var(--sr-cyan); }
.pagination .is-current {
    color: #fff;
    background: linear-gradient(135deg, var(--sr-blue), var(--sr-electric));
    border-color: rgba(0,172,255,0.5);
    box-shadow: var(--sr-glow-blue);
}
.pagination .is-disabled { opacity: 0.35; pointer-events: none; }

/* ============ MODAL ============ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5,7,10,0.78);
    backdrop-filter: blur(6px);
    z-index: var(--sr-z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--sr-space-4);
}
.modal-backdrop.is-open { display: flex; }

.modal {
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--sr-panel);
    border: 1px solid var(--sr-border-strong);
    border-radius: var(--sr-radius-lg);
    box-shadow: var(--sr-shadow-panel), var(--sr-glow-blue);
    padding: var(--sr-space-6);
    position: relative;
}

.modal-close {
    position: absolute;
    top: var(--sr-space-3);
    right: var(--sr-space-3);
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--sr-radius-sm);
    color: var(--sr-muted);
    font-size: 18px;
    transition: all var(--sr-transition);
}
.modal-close:hover { color: var(--sr-danger); background: rgba(255,77,109,0.08); }

/* ============ MISC: ALERTS, CHIPS, THUMBS ============ */
.alert {
    padding: var(--sr-space-4) var(--sr-space-5);
    border-radius: var(--sr-radius);
    font-size: var(--sr-fs-sm);
    font-weight: 500;
    border: 1px solid transparent;
    margin-bottom: var(--sr-space-4);
}
.alert-info    { background: rgba(0,172,255,0.08); border-color: rgba(0,172,255,0.3); color: var(--sr-electric); }
.alert-success { background: rgba(46,204,113,0.08); border-color: rgba(46,204,113,0.3); color: var(--sr-success); }
.alert-warning { background: rgba(255,181,71,0.08); border-color: rgba(255,181,71,0.3); color: var(--sr-warning); }
.alert-danger  { background: rgba(255,77,109,0.08); border-color: rgba(255,77,109,0.3); color: var(--sr-danger); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sr-space-2);
    padding: 4px 12px;
    border-radius: var(--sr-radius-round);
    background: var(--sr-panel-2);
    border: 1px solid var(--sr-border);
    color: var(--sr-muted);
    font-size: var(--sr-fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.thumb-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 30%, rgba(0,172,255,0.25), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(199,21,133,0.25), transparent 60%),
        var(--sr-panel-2);
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius);
    color: var(--sr-muted);
    font-weight: 700;
    letter-spacing: 0.1em;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

/* ============ STATS / METRIC CARDS ============ */
.stats-grid {
    display: grid;
    gap: var(--sr-space-4);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.stat-card {
    padding: var(--sr-space-5);
    border-radius: var(--sr-radius);
    border: 1px solid var(--sr-border);
    background: linear-gradient(145deg, var(--sr-panel), var(--sr-panel-2));
    position: relative;
    overflow: hidden;
}
.stat-card::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(0,172,255,0.12), transparent 70%);
    transform: translate(30%, -30%);
    pointer-events: none;
}
.stat-card .stat-value {
    font-size: var(--sr-fs-2xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    background: linear-gradient(90deg, var(--sr-cyan), var(--sr-electric));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-card .stat-label {
    margin-top: var(--sr-space-2);
    font-size: var(--sr-fs-xs);
    color: var(--sr-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
}