/* ON-AIR Shared UI — Russian operator theme */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: #12121c;
    color: #e0e0e0;
    -webkit-font-smoothing: antialiased;
    height: 100%;
}
a { color: #00d4aa; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Header ── */
.onair-header {
    background: #161b2e;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid #252a3d;
    padding: 0 20px;
    flex-shrink: 0;
}
.onair-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 24px;
}
.onair-logo {
    font-size: 18px;
    font-weight: 800;
    color: #00d4aa;
    letter-spacing: 1px;
    user-select: none;
}
.onair-logo:hover { text-decoration: none; }

.onair-nav {
    display: flex;
    gap: 0;
    height: 100%;
}
.onair-nav-item {
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 500;
    color: #8b92a8;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, background .15s;
}
.onair-nav-item:hover {
    color: #e0e0e0;
    background: rgba(255,255,255,0.03);
    text-decoration: none;
}
.onair-nav-item.active {
    color: #00d4aa;
    border-bottom-color: #00d4aa;
    background: rgba(0,212,170,0.05);
}
.onair-nav-item.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.onair-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.onair-header-right select {
    background: #0d1020;
    border: 1px solid #2a3045;
    color: #e0e0e0;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
}
.onair-user-link {
    color: #8b92a8;
    border: 1px solid #2a3045;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    white-space: nowrap;
}
.onair-user-link:hover {
    color: #00d4aa;
    border-color: #00d4aa;
    text-decoration: none;
}

/* ── Readiness bar ── */
.onair-readiness {
    background: #0d1020;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #1a1f33;
    padding: 0 20px;
    font-size: 12px;
}
.onair-readiness-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ecc71;
    flex-shrink: 0;
}
.onair-readiness-dot.warning { background: #e6a817; }
.onair-readiness-dot.critical { background: #ff6b5f; }
.onair-readiness-label {
    font-weight: 600;
    color: #e0e0e0;
    white-space: nowrap;
}
.onair-readiness-counters {
    color: #7a8199;
    margin-left: auto;
    display: flex;
    gap: 16px;
}
.onair-readiness-counters span { white-space: nowrap; }
.onair-diagnostics-details {
    background: #0a0f1a;
    border-bottom: 1px solid #1a1f33;
    color: #c5cadd;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 20px;
    font-size: 12px;
}
.onair-diagnostics-title {
    color: #7a8199;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 22px;
    white-space: nowrap;
}
.onair-diagnostics-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 160px;
}
.onair-diagnostics-reason {
    border: 1px solid #2a3045;
    border-radius: 999px;
    background: #10172a;
    color: #c5cadd;
    padding: 3px 9px;
    line-height: 14px;
}
.onair-diagnostics-reason.warning {
    border-color: #5d4914;
    background: #211b0d;
    color: #e6a817;
}
.onair-diagnostics-reason.critical {
    border-color: #5c2424;
    background: #241111;
    color: #ff6b5f;
}

/* ── Buttons ── */
.onair-btn {
    background: #1e2540;
    border: 1px solid #2a3045;
    color: #c5cadd;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background .15s, border-color .15s, transform .05s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.onair-btn:hover {
    background: #252d4d;
    border-color: #3a4160;
}
.onair-btn:active { transform: translateY(1px); }
.onair-btn.primary {
    background: #00d4aa;
    border-color: #00d4aa;
    color: #000;
    font-weight: 600;
}
.onair-btn.primary:hover { background: #00f0bf; }
.onair-btn.danger {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
}
.onair-btn.danger:hover { background: #e74c3c; }
.onair-btn.small {
    padding: 3px 10px;
    font-size: 11px;
}

/* ── Badges ── */
.diag-badge {
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #123026;
    color: #2ecc71;
    max-width: 280px;
}
.diag-badge.warning { background: #2f260d; color: #e6a817; }
.diag-badge.critical { background: #351515; color: #ff6b5f; }
.listeners-badge {
    background: #0f3460;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    color: #888;
}

/* ── Shared Modals ── */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.modal-overlay.show {
    display: flex;
}
.modal-box {
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 8px;
    padding: 16px;
    width: 350px;
    max-height: 500px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.modal-box h4 {
    margin-bottom: 10px;
    color: #00d4aa;
    font-size: 14px;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* ── Station tabs ── */
.station-picker {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.station-picker.compact { gap: 4px; }
.station-picker-label {
    color: #7a8199;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}
.station-picker-empty {
    color: #7a8199;
    font-size: 12px;
}
.station-picker-select {
    min-width: 180px;
    max-width: 280px;
    background: #0d1020;
    border: 1px solid #2a3045;
    color: #e0e0e0;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
}
.station-picker.compact .station-picker-select {
    min-width: 140px;
    padding: 3px 8px;
    font-size: 11px;
}
.station-tabs {
    display: flex;
    gap: 4px;
}
.station-tab {
    padding: 4px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    background: #1e2540;
    color: #7a8199;
    transition: background .15s, color .15s;
}
.station-tab:hover { background: #252d4d; color: #c5cadd; }
.station-tab.active {
    background: var(--station-color, #00d4aa);
    color: #000;
}

/* ── Operator console (player bar) ── */
.operator-console {
    background: #0d1020;
    border-top: 1px solid #1a1f33;
    flex-shrink: 0;
}
.console-main {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid #1a1f33;
}
.console-current {
    min-width: 220px;
    max-width: 340px;
}
.console-label {
    font-size: 10px;
    color: #7a8199;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}
.console-track {
    font-size: 14px;
    font-weight: 600;
    color: #e0e0e0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.console-time {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: 700;
    color: #00d4aa;
}
.console-progress-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.console-progress-bg {
    height: 6px;
    background: #1e2540;
    border-radius: 3px;
    overflow: hidden;
}
.console-progress-fill {
    height: 100%;
    background: #00d4aa;
    border-radius: 3px;
    transition: width .5s linear;
}
.console-next {
    min-width: 160px;
    max-width: 260px;
}
.console-next .console-track {
    font-size: 12px;
    color: #e6a817;
}
.console-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    flex-wrap: wrap;
}
.transport-btns {
    display: flex;
    gap: 6px;
}
.mode-btns {
    display: flex;
    gap: 2px;
}
.mode-btn {
    padding: 5px 14px;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    background: #1e2540;
    color: #7a8199;
    transition: background .15s, color .15s;
}
.mode-btn:first-child { border-radius: 4px 0 0 4px; }
.mode-btn:last-child { border-radius: 0 4px 4px 0; }
.mode-btn:hover { background: #252d4d; color: #c5cadd; }
.mode-btn.active {
    background: #00d4aa;
    color: #000;
}
.console-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.status-text {
    font-size: 12px;
    font-weight: 600;
}
.status-onair { color: #e74c3c; animation: blink-air 1.2s infinite; }
.status-stop { color: #7a8199; }
.status-paused { color: #e6a817; }
@keyframes blink-air { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── Compact player status (rotator) ── */
.compact-player-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: #0d1020;
    border-bottom: 1px solid #1a1f33;
    font-size: 12px;
    flex-shrink: 0;
}
.compact-player-status .label { color: #7a8199; }
.compact-player-status .track { color: #e0e0e0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-player-status .state { font-size: 10px; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.state-playing { background: #123026; color: #2ecc71; }
.state-stopped { background: #1e1e1e; color: #7a8199; }

/* ── Tabs ── */
.onair-tabs {
    background: #0d1020;
    display: flex;
    border-bottom: 1px solid #1a1f33;
    padding: 0 16px;
    height: 40px;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}
.onair-tab {
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: #7a8199;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    user-select: none;
    transition: color .15s;
}
.onair-tab:hover { color: #e0e0e0; }
.onair-tab.active { color: #00d4aa; border-bottom-color: #00d4aa; }

/* ── Utilities ── */
.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.ml-auto { margin-left: auto; }
.text-muted { color: #7a8199; }
.text-small { font-size: 11px; }

/* ── Shared Toast ── */
.onair-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    pointer-events: none;
}
.onair-toast {
    background: #16213e;
    border: 1px solid #0f3460;
    color: #e0e0e0;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    max-width: 360px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
    word-break: break-word;
}
.onair-toast.visible {
    opacity: 1;
    transform: translateY(0);
}
.onair-toast.success { border-color: #2ecc71; color: #2ecc71; }
.onair-toast.error   { border-color: #e74c3c; color: #ff6b5f; }
.onair-toast.info    { border-color: #3498db; color: #3498db; }

/* ── Persistent background-job indicator ── */
.onair-job-indicator {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 9000;
    width: min(340px, calc(100vw - 40px));
    padding: 10px 12px;
    border: 1px solid #0f6d62;
    border-radius: 7px;
    background: #111c30;
    color: #dfe6ee;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .48);
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.onair-job-indicator[hidden] { display: none; }
.onair-job-indicator:hover { border-color: #00d4aa; }
.onair-job-indicator:focus-visible { outline: 2px solid #8ad7ff; outline-offset: 2px; }
.onair-job-indicator.done { border-color: #2ecc71; }
.onair-job-indicator.failed { border-color: #e74c3c; }
.onair-job-title { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 700; }
.onair-job-title span:last-child { color: #00d4aa; font-variant-numeric: tabular-nums; }
.onair-job-indicator.done .onair-job-title span:last-child { color: #2ecc71; }
.onair-job-indicator.failed .onair-job-title span:last-child { color: #ff6b5f; }
.onair-job-phase { margin-top: 4px; color: #9ab0c8; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onair-job-track { height: 5px; margin-top: 7px; overflow: hidden; border: 1px solid #203451; border-radius: 3px; background: #0c1424; }
.onair-job-fill { height: 100%; width: 0; border-radius: 2px; background: #00d4aa; transition: width .25s ease; }
.onair-job-track.is-indeterminate .onair-job-fill {
    width: 34% !important;
    animation: onair-job-indeterminate 1.15s ease-in-out infinite;
    transition: none;
}
@keyframes onair-job-indeterminate {
    0% { transform: translateX(-115%); }
    100% { transform: translateX(315%); }
}
.onair-job-indicator.done .onair-job-fill { background: #2ecc71; }
.onair-job-indicator.failed .onair-job-fill { background: #e74c3c; }
.onair-job-hint { margin-top: 5px; color: #6f829a; font-size: 10px; }
.onair-job-dismiss {
    position: absolute;
    top: 4px;
    right: 7px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    border-radius: 4px;
    color: #8ea3bd;
    font-size: 15px;
    font-weight: 700;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.onair-job-dismiss[hidden] { display: none; }
.onair-job-dismiss:hover { color: #ff6b5f; background: rgba(255, 107, 95, .12); }
.schedule-range-job-indicator { left: auto; right: 20px; }
.schedule-teardown-job-indicator { bottom: 116px; }
@media (max-width: 600px) {
    .onair-job-indicator { left: 12px; right: 12px; bottom: 12px; width: auto; }
    .schedule-range-job-indicator { bottom: 112px; }
    .schedule-teardown-job-indicator { bottom: 212px; }
}

/* ── Login ── */
.login-page {
    min-height: 100%;
    background:
        radial-gradient(circle at 15% 20%, rgba(0, 212, 170, 0.16), transparent 28%),
        linear-gradient(135deg, #10131f 0%, #161b2e 48%, #0d1020 100%);
}
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.login-panel {
    width: min(420px, 100%);
    background: #161b2e;
    border: 1px solid #2a3045;
    border-radius: 8px;
    padding: 28px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.login-brand {
    color: #00d4aa;
    font-weight: 800;
    font-size: 22px;
    margin-bottom: 18px;
}
.login-panel h1 {
    font-size: 20px;
    margin-bottom: 18px;
}
.login-form {
    display: grid;
    gap: 10px;
}
.login-form label {
    color: #8b92a8;
    font-size: 12px;
}
.login-form input {
    background: #0d1020;
    border: 1px solid #2a3045;
    border-radius: 6px;
    color: #fff;
    padding: 10px 12px;
    font-size: 15px;
}
.login-submit {
    margin-top: 8px;
    justify-content: center;
}
.login-error {
    background: #351515;
    border: 1px solid #6a2a2a;
    color: #ff8177;
    border-radius: 6px;
    padding: 9px 10px;
    font-size: 13px;
}

/* ── Source badges (shared: library table + track card) ── */
.source-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    line-height: 1.4;
}
.source-onair-local {
    background: rgba(0, 212, 170, 0.14);
    color: #00d4aa;
    border: 1px solid rgba(0, 212, 170, 0.32);
}
.source-partner-agent,
.source-partner-http {
    background: rgba(155, 89, 182, 0.14);
    color: #bb8fce;
    border: 1px solid rgba(155, 89, 182, 0.32);
}
.source-object-storage {
    background: rgba(230, 126, 34, 0.14);
    color: #f0b27f;
    border: 1px solid rgba(230, 126, 34, 0.32);
}
.source-missing,
.source-warn {
    background: rgba(231, 76, 60, 0.10);
    color: #ff6b5f;
    border: 1px solid rgba(231, 76, 60, 0.30);
}
.source-loading {
    background: transparent;
    color: #444;
    border: 1px solid transparent;
}
.source-status-layout {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.source-status-line {
    display: flex;
    gap: 8px;
    align-items: center;
}
.source-status-state {
    font-size: 12px;
    color: #00d4aa;
}
.source-status-state.warn {
    color: #ff6b5f;
}
.source-status-name {
    font-size: 12px;
    color: #888;
}
.source-status-local {
    font-size: 11px;
    color: #555;
}