/* =========================================================
   VIDEO / ATEM OPERATIONS
   ========================================================= */

.video-atem-page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 80px;
}

.back-link {

    display: inline-block;

    margin-bottom: 14px;

    color:
        var(--theme-text-muted);

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;
}


.back-link:hover {

    color:
        var(--theme-primary);
}


/* =========================================================
   SECTION TITLES
   ========================================================= */

.section-title {
    margin: 20px 0 8px;

    color: var(--theme-text);

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.08em;
}


/* =========================================================
   PANELS
   ========================================================= */

.iron-panel {
    padding: 12px;

    border: 1px solid var(--theme-border);

    border-radius:
        var(--theme-card-radius);

    background:
        var(--theme-gradient-panel);

    box-shadow:
        var(--theme-shadow-card),
        var(--theme-highlight-inset);
}


/* =========================================================
   FEED BUTTONS
   ========================================================= */

.feed-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}


.feed-buttons a {
    flex: 1;

    display: block;

    padding: 12px 15px;

    border:
        1px solid var(--theme-border);

    border-radius:
        var(--theme-button-radius);

    background:
        var(--theme-gradient-button);

    color:
        var(--theme-text-secondary);

    box-shadow:
        var(--theme-shadow-button);

    text-align: center;
    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}


.feed-buttons a:hover {
    background:
        var(--theme-gradient-button-hover);

    border-color:
        var(--theme-primary);

    color:
        var(--theme-primary);

    box-shadow:
        var(--theme-accent-glow);
}


.feed-buttons a.feed-active {
    background:
        var(--theme-gradient-primary);

    border-color:
        var(--theme-primary);

    color:
        var(--theme-primary);

    box-shadow:
        var(--theme-accent-glow);
}


/* =========================================================
   VIDEO
   ========================================================= */

.video-frame {
    width: 100%;

    border-radius:
        var(--theme-card-radius);

    overflow: hidden;
}


#tv12 {
    width: 100%;
}


/* =========================================================
   OME STREAM STATUS
   ========================================================= */

.ome-status-panel {
    margin-top: 24px;

    padding: 0;

    overflow: hidden;
}


.ome-panel-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 20px 22px;

    border-bottom:
        1px solid var(--theme-border);
}


.ome-panel-header h2 {
    margin: 0 0 4px;
}


.ome-panel-header p {
    margin: 0;

    opacity: 0.7;

    font-size: 0.9rem;
}


.ome-refresh {
    display: flex;

    align-items: center;

    gap: 8px;

    white-space: nowrap;

    font-size: 0.8rem;

    opacity: 0.65;
}


#ome-refresh-indicator {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: currentColor;
}


#ome-refresh-indicator.refreshing {
    animation:
        ome-pulse 0.8s ease-in-out infinite;
}


@keyframes ome-pulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }

}


/* =========================================================
   OME TABLE
   ========================================================= */

.ome-table-wrapper {
    width: 100%;

    overflow-x: auto;
}


.ome-table {
    width: 100%;

    min-width: 1050px;

    border-collapse: collapse;
}


.ome-table th {
    padding: 12px 14px;

    text-align: left;

    font-size: 0.72rem;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    opacity: 0.65;

    border-bottom:
        1px solid var(--theme-border);

    white-space: nowrap;
}


.ome-table td {
    padding: 14px;

    border-bottom:
        1px solid var(--theme-border);

    vertical-align: middle;

    font-size: 0.88rem;
}


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


.ome-table tbody tr:hover {
    background:
        rgba(255, 255, 255, 0.025);
}


/* =========================================================
   OME STATUS
   ========================================================= */

.ome-status {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-size: 0.8rem;
    font-weight: 600;

    white-space: nowrap;
}


.ome-status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;
}


.ome-status.active .ome-status-dot {
    background: #55c878;

    box-shadow:
        0 0 8px rgba(85, 200, 120, 0.5);
}


.ome-status.inactive .ome-status-dot {
    background: #777;
}


.ome-status.active {
    color: #8be0a2;
}


.ome-status.inactive {
    color: #999;
}


/* =========================================================
   OME STREAM INFORMATION
   ========================================================= */

.ome-stream-name {
    font-weight: 600;
}


.ome-stream-app {
    margin-top: 3px;

    font-size: 0.72rem;

    opacity: 0.5;
}


.ome-source {
    max-width: 220px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-family: monospace;

    font-size: 0.78rem;

    opacity: 0.75;
}


.ome-detail-main {
    font-weight: 500;
}


.ome-detail-sub {
    margin-top: 3px;

    font-size: 0.74rem;

    opacity: 0.55;
}


.ome-bitrate {
    font-family: monospace;

    white-space: nowrap;
}


.ome-uptime {
    font-family: monospace;

    white-space: nowrap;

    font-size: 0.8rem;
}


.ome-viewers {
    font-weight: 600;

    text-align: center;
}


/* =========================================================
   OME PLAY BUTTON
   ========================================================= */

.ome-play-button {
    border:
        1px solid var(--theme-border);

    border-radius: 6px;

    padding: 7px 12px;

    background:
        rgba(255, 255, 255, 0.04);

    color: inherit;

    cursor: pointer;

    font-size: 0.78rem;
    font-weight: 600;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}


.ome-play-button:hover {
    background:
        rgba(255, 255, 255, 0.09);

    border-color:
        rgba(255, 255, 255, 0.25);
}


.ome-play-button.playing {
    background:
        var(--theme-gradient-primary);

    border-color:
        var(--theme-primary);

    color:
        var(--theme-primary);

    box-shadow:
        var(--theme-accent-glow);
}


.ome-play-button:disabled {
    opacity: 0.35;

    cursor: default;
}


/* =========================================================
   OME LOADING / ERRORS
   ========================================================= */

.ome-loading,
.ome-empty,
.ome-error {
    padding: 35px !important;

    text-align: center;

    opacity: 0.65;
}


.ome-error {
    color: #e58b8b;
}


/* =========================================================
   ATEM CONTROL
   ========================================================= */

.control-container {
    width: 100%;

    display: flex;

    justify-content: center;

    text-align: center;
}


.control-frame {
    display: block;

    width: 700px;

    max-width: 100%;

    border:
        1px solid var(--theme-border);

    border-radius: 8px;

    background: #05080a;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.45);

    overflow: hidden;
}


/* =========================================================
   PLAYER CARDS
   ========================================================= */

.player-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}


.player-card {

    display: block;

    padding: 18px;

    border:
        1px solid var(--theme-border);

    border-radius:
        var(--theme-card-radius);

    background:
        var(--theme-gradient-panel);

    box-shadow:
        var(--theme-shadow-card),
        var(--theme-highlight-inset);

    color:
        var(--theme-text);

    text-decoration: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}


.player-card:hover {

    border-color:
        var(--theme-primary);

    box-shadow:
        var(--theme-shadow-card),
        var(--theme-accent-glow);

    transform:
        translateY(-1px);
}


.player-card-top {

    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 18px;
}


.player-icon {

    color:
        var(--theme-primary);

    font-size: 17px;
}


.player-status {

    color:
        var(--theme-text-muted);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.12em;
}


.player-card-title {

    font-size: 16px;
    font-weight: 800;

    letter-spacing: 0.03em;
}


.player-card-description {

    margin-top: 5px;

    color:
        var(--theme-text-secondary);

    font-size: 13px;
}


.player-card-action {

    margin-top: 20px;

    color:
        var(--theme-primary);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.08em;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .video-atem-page {
        width: 100%;
    }


    .iron-panel {
        padding: 8px;
    }


    .feed-buttons {
        gap: 6px;
    }


    .feed-buttons a {
        padding: 11px 5px;

        font-size: 12px;
    }


    .ome-panel-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

        padding: 16px;
    }


    .ome-table {
        min-width: 950px;
    }


    .control-frame {
        width: 700px;

        max-width: 100%;
    }

}

/* ============================================================
   OME PLAYER
   ============================================================ */

.live-video-hidden {
    display: none;
}

.live-video-visible {
    display: block;
}

.ome-playing-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: #ccc;
}

.ome-playing-info strong {
    color: #888;
    font-size: 0.85em;
}

#ome-playing-stream {
    font-weight: 600;
}



/* =========================================================
   ATEM CONTROLS + PLAYER CONTROLLER
   Side by side on wide screens, stacked on narrow screens
   ========================================================= */

.controller-row {
    display: flex;
    align-items: stretch;
    gap: 20px;
    width: 100%;
}

.controller-row > .controller-column {
    flex: 1 1 0;
    min-width: 0;
}

.controller-column .control-frame {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
}

/* Stack the controllers on smaller screens */
@media (max-width: 900px) {
    .controller-row {
        flex-direction: column;
    }

    .controller-row > .controller-column {
        width: 100%;
    }
}

/* =========================================================
   INCOMING STREAM MANAGER
   ========================================================= */

.incoming-stream-panel {
    margin-top: 12px;
    overflow: hidden;
}

.incoming-stream-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.incoming-stream-header h2,
.incoming-stream-form h3 {
    margin: 0 0 6px;
    color: var(--theme-text);
}

.incoming-stream-header p,
.incoming-stream-help {
    margin: 0;
    color: var(--theme-text-muted);
    font-size: 0.88rem;
}

.incoming-stream-form {
    padding: 16px;
    margin-bottom: 18px;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-card-radius);
    background: var(--theme-gradient-panel);
}

.incoming-stream-form h3 {
    margin-bottom: 14px;
    font-size: 1rem;
}

.incoming-stream-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.incoming-stream-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    color: var(--theme-text);
    font-size: 0.85rem;
    font-weight: 600;
}

.incoming-stream-form-grid input,
.incoming-stream-form-grid select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-button-radius);
    background: var(--theme-panel, transparent);
    color: var(--theme-text);
    font: inherit;
}

.incoming-stream-form-grid input:focus,
.incoming-stream-form-grid select:focus {
    outline: 2px solid var(--theme-primary);
    outline-offset: 1px;
}

.incoming-stream-url-field {
    grid-column: 1 / -1;
}

.incoming-stream-help {
    margin-top: 12px;
    line-height: 1.5;
}

.incoming-stream-form-actions,
.incoming-stream-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.incoming-stream-form-actions {
    margin-top: 14px;
}

.incoming-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-button-radius);
    background: transparent;
    color: var(--theme-text);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.incoming-action:hover {
    border-color: var(--theme-primary);
}

.incoming-action:disabled {
    opacity: 0.55;
    cursor: wait;
}

.incoming-action-start {
    border-color: var(--theme-primary);
}

.incoming-action-delete {
    color: #d65b5b;
}

.incoming-stream-message {
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-button-radius);
    overflow-wrap: anywhere;
    font-size: 0.88rem;
}

.incoming-stream-message[data-kind="error"] {
    border-color: #c94d4d;
    color: var(--theme-text);
}

.incoming-stream-message[data-kind="success"] {
    border-color: #419c72;
    color: var(--theme-text);
}

.incoming-stream-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.incoming-stream-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.incoming-stream-table th,
.incoming-stream-table td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--theme-border);
    text-align: left;
    vertical-align: middle;
}

.incoming-stream-table th {
    color: var(--theme-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    white-space: nowrap;
}

.incoming-stream-table td code {
    overflow-wrap: anywhere;
    color: var(--theme-text);
}

.incoming-stream-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.incoming-stream-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #888;
}

.incoming-stream-status.is-running .incoming-stream-status-dot {
    background: #36ae76;
}

.incoming-stream-status.is-stopped .incoming-stream-status-dot {
    background: #929292;
}

.incoming-stream-error {
    max-width: 260px;
    margin-top: 5px;
    overflow: hidden;
    color: #d65b5b;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.incoming-streams-empty {
    padding: 22px !important;
    color: var(--theme-text-muted);
    text-align: center !important;
}

.incoming-stream-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 14px;
    color: var(--theme-text-muted);
    font-size: 0.78rem;
}

@media (max-width: 700px) {
    .incoming-stream-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .incoming-stream-url-field {
        grid-column: auto;
    }

    .incoming-stream-table {
        min-width: 760px;
    }
}


/* Incoming streams collapsible heading */

.incoming-stream-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.incoming-stream-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.incoming-streams-chevron {
    flex-shrink: 0;
    font-size: 16px;
    letter-spacing: normal;
}

#incoming-streams-content[hidden] {
    display: none !important;
}

/* =========================================================
   TSG SUITE TOPBAR LINK
   ========================================================= */

.tsg-suite-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 34px;
    padding: 7px 13px;

    border: 1px solid var(--theme-primary);
    border-radius: var(--theme-button-radius);

    background: transparent;
    color: var(--theme-primary);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;

    text-decoration: none;
    white-space: nowrap;

    box-shadow: 0 0 8px color-mix(in srgb, var(--theme-primary) 18%, transparent);

    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.tsg-suite-link:hover {
    background: color-mix(in srgb, var(--theme-primary) 12%, transparent);
    color: var(--theme-primary);
    box-shadow: 0 0 12px color-mix(in srgb, var(--theme-primary) 35%, transparent);
    transform: translateY(-1px);
}

.tsg-suite-link .tsg-icon {
    font-size: 15px;
}

/* =========================================================
   SRS PLAYER CONTROL
   ========================================================= */

.srs-player-panel {
    margin-top: 24px;
    padding: 0;
    overflow: hidden;
}

.srs-player-table {
    min-width: 650px;
}

.srs-player-start-button {
    min-width: 145px;
    font-weight: 700;
}

.srs-player-start-button:not(:disabled):hover {
    border-color: var(--theme-primary);
    box-shadow: var(--theme-accent-glow);
}

.srs-player-message {
    margin: 16px 22px;
    padding: 12px 16px;
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    background: rgba(85, 200, 120, 0.08);
    color: #8be0a2;
    font-size: 0.9rem;
}

.srs-player-message-error {
    background: rgba(220, 70, 70, 0.08);
    color: #ff9999;
    border-color: rgba(220, 70, 70, 0.4);
}

.srs-player-start-button:disabled {
    opacity: 0.5;
    cursor: wait;
}