/* RTSP Restreamer Web UI - Modern Modern Design */
/*
 This material is based upon work supported by the United States Air Force under contract number FA8750-24-S-B079 (Prime Contractor Smart Information Flow Technologies (SIFT)).  Any opinions, findings and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of the United States Air Force.
 Copyright (c) 2026 RTX BBN Technologies. Licensed to US Government with unlimited rights.

 This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
 This is distributed in the hope that it will be useful, but without any warranty, without even the implied warranty of merchantability or fitness for a particular purpose.  See the GNU General Public License for more details. https://www.gnu.org/licenses/
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* ── UMT shared tokens ────────────────────────────────────────────────
       The visual language comes from umt-shared.css (vendored from
       umt-plugin/tak-ui-shared). This block maps this app's original token
       names onto it, so every existing var() reference in this file and in
       the page markup picks up the UMT palette without being rewritten.

       Prefer the UMT names (--bg, --surface, --ink, --line, --accent) in new
       code. The --primary-bg / --text-primary style names below are kept
       only so the older rules keep resolving.
       ───────────────────────────────────────────────────────────────────── */

    /* Two upstream bugs in umt-shared.css, patched here so the vendored copy
       stays byte-identical to upstream and therefore diffable. See
       umt-shared.README.md. */
    --mono: 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;

    /* Fourth surface level. UMT defines three (--bg / --surface /
       --surface-strong); this app nests one level deeper in places
       (thumbnails, inset wells), so this sits just above --surface-strong. */
    --surface-lift: #1b2630;

    /* Cyan accent. Not a token in tak-ui-shared, but its .scoreboard-card
       uses this exact value as the default rail colour, so it is part of the
       language rather than an invention. */
    --cyan: #65c9e8;

    /* ── Legacy aliases ── */
    --primary-bg: var(--bg);
    --secondary-bg: var(--surface);
    --card-bg: var(--surface-strong);
    --surface-bg: var(--surface-lift);
    --accent-primary: var(--accent);
    --accent-secondary: var(--cyan);
    --accent-success: var(--good);
    --accent-warning: var(--warn);
    --accent-danger: var(--danger);
    --text-primary: var(--ink);

    /* UMT runs two text levels (--ink / --muted) where this app ran three.
       Secondary collapses onto --muted to match; the third level drops to a
       dimmer value that UMT itself uses for de-emphasised captions. */
    --text-secondary: var(--muted);
    --text-muted: #6f7e89;

    --border-color: var(--line);

    /* UMT ships a single, heavy --shadow (0 18px 40px) intended for panels and
       modals. Applying it to every list row would be far too much, so the
       small step stays subtle and the larger steps resolve to the real token. */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.25);
    --shadow-md: var(--shadow);
    --shadow-lg: var(--shadow);
    --shadow-xl: var(--shadow);

    /* Typography — matches umt-shared.css */
    --font-sans: 'Segoe UI', Inter, Arial, sans-serif;
    --font-mono: var(--mono);

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Radius. UMT is flatter than this app was: 8px is its workhorse, 6px for
       small controls, 999px for pills. Nothing in UMT is as round as the 16px
       this app used for cards. */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 8px;
    --radius-pill: 999px;

    /* Status washes, derived from the UMT palette rather than the old one.
       (The previous sheet tinted with #10b981 / #ef4444, which are not UMT
       colours, so the washes drifted away from the chips they sat next to.) */
    --tint-accent:   rgba(59, 130, 246, 0.12);
    --tint-accent-2: rgba(59, 130, 246, 0.22);
    --tint-good:     rgba(101, 225, 160, 0.12);
    --tint-warn:     rgba(244, 184, 91, 0.12);
    --tint-danger:   rgba(239, 107, 104, 0.12);
    --tint-cyan:     rgba(101, 201, 232, 0.12);

    /* Solid status-chip backgrounds. These are umt-shared.css's own
       .pill--good / --warn / --danger values. */
    --chip-good:   #0d2e1e;
    --chip-warn:   #3a2f17;
    --chip-danger: #2e1215;
    --chip-accent: #15253c;
}

body {
    font-family: var(--font-sans);
    font-size: 15px;
    background: var(--primary-bg);
    min-height: 100vh;
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

header {
    background: var(--secondary-bg);
    border-radius: var(--radius-lg);
    padding: 0 var(--spacing-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.header-title {
    display: flex;
    align-items: center;
}

header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}



.header-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    align-items: center;
}

.header-logo {
    height: 100px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Header Navigation */
.header-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    min-height: 42px;
}

@media (max-width: 768px) {
    .header-content {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    
    .header-nav {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}

.header-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    text-decoration: none;
    color: var(--text-primary);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.3rem var(--spacing-sm);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.90rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.nav-link.active {
    color: var(--ink);
    background: var(--tint-accent-2);
    border-color: transparent;
    box-shadow: inset 0 -2px 0 var(--accent);
}

/* Card Components */
.card {
    background: var(--secondary-bg);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.card h2 {
    color: var(--ink);
    padding: 0 0 var(--spacing-md) 0;
    margin: 0 0 var(--spacing-lg) 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Layout Components */
.main-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

/* Remove sidebar - single column layout */
.content-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* Card Components */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

.card-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-secondary);
}

.empty-state.small {
    padding: var(--spacing-lg);
}



.empty-state h3 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
}

.empty-state p {
    margin-bottom: var(--spacing-lg);
    line-height: 1.5;
}

/* Connection Components */
.connection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

@media (max-width: 640px) {
    .connection-grid {
        grid-template-columns: 1fr;
    }
}

.connection-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--surface-strong);
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
}

.connection-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.connection-value {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text-primary);
    flex: 1;
    margin: 0 var(--spacing-sm);
}

.btn-copy {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

/* Stream Items */
.stream-item {
    background: var(--primary-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
    color: var(--text-secondary);
}

.stream-item * {
    color: inherit;
}


.stream-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.stream-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--accent-secondary) !important;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    user-select: text;
}

/* Force stream name visibility */
.stream-item .stream-name,
.stream-item .stream-header .stream-name {
    color: var(--cyan) !important;
}

.stream-name::selection {
    background: var(--accent-primary) !important;
    color: var(--text-primary) !important;
}

.stream-name::-moz-selection {
    background: var(--accent-primary) !important;
    color: var(--text-primary) !important;
}

.stream-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
}

.stream-status.live {
    color: var(--accent-success);
}

.stream-status.offline {
    color: var(--text-muted);
}

.stream-status.reconnecting {
    color: var(--warn);
    animation: reconnectingPulse 1.5s ease-in-out infinite;
}

@keyframes reconnectingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.stream-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.stream-detail {
    text-align: center;
}

.stream-detail-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stream-detail-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.stream-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.viewers-count-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    font-weight: 600;
    color: var(--accent-primary);
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
.viewers-count-btn:hover {
    color: var(--text-primary);
}

/* Recording Items */
.recording-item {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.recording-info {
    margin-bottom: var(--spacing-sm);
}

.recording-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-xs);
}

.recording-details {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.recording-actions {
    display: flex;
    gap: var(--spacing-xs);
    justify-content: flex-end;
}

/* Full Recording Items (for recordings page) */
.recording-item-full {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.recording-content {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.recording-checkbox {
    display: flex;
    align-items: flex-start;
    padding-top: 0.5rem;
}

.recording-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.recording-thumbnail {
    flex-shrink: 0;
    width: 160px;
    height: 120px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

.thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.thumbnail-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--surface-bg);
    color: var(--text-muted);
    font-size: 2rem;
    gap: var(--spacing-sm);
}

.generate-thumb-btn {
    font-size: 0.75rem;
    padding: 4px 8px;
}

.recording-info {
    flex: 1;
    min-width: 0;
}

.recording-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.recording-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.recording-stream {
    font-size: 0.875rem;
    color: var(--text-secondary);
    background: var(--card-bg);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.recording-details-full {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.recording-detail {
    text-align: center;
}

.recording-detail-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.recording-detail-value {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Keywords editing */
.recording-keywords {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.keywords-edit-wrapper {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    margin-top: var(--spacing-xs);
}

.keywords-input {
    flex: 1;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: var(--surface-bg);
    color: var(--text-primary);
    transition: border-color 0.2s ease;
}

.keywords-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--tint-accent);
}

.keywords-input::placeholder {
    color: var(--text-secondary);
}

.recording-actions-full {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}

/* Enhancement Items */
.enhancement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.enhancement-item {
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all 0.2s ease;
}

.enhancement-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.enhancement-header h3 {
    color: var(--text-primary);
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.status-badge {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge.enabled {
    background: var(--tint-good);
    color: var(--accent-success);
    border: 1px solid rgba(101, 225, 160, 0.25);
}

.status-badge.disabled {
    background: var(--tint-danger);
    color: var(--accent-danger);
    border: 1px solid rgba(239, 107, 104, 0.25);
}

.badge.uas-enabled {
    background: var(--tint-accent);
    color: var(--accent-primary);
    border: 1px solid rgba(59, 130, 246, 0.25);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: var(--spacing-sm);
}

.enhancement-item p {
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--spacing-md);
}

.enhancement-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Loading States */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);
}

.loading::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: var(--spacing-sm);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Special States */
.rec-label {
    color: var(--accent-danger);
    font-weight: 700;
    font-size: 0.8rem;
    margin-right: 2px;
}

.btn-stop-recording {
    background: var(--surface) !important;
    color: var(--danger) !important;
    border-color: var(--line) !important;
}
.btn-stop-recording:hover {
    background: var(--chip-danger) !important;
}

/* Protocol badges */
.protocol-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-left: 6px;
    vertical-align: middle;
}

.protocol-srt {
    background: var(--chip-accent);
    color: var(--accent);
    border: 1px solid transparent;
}

.protocol-rtsp {
    background: var(--chip-good);
    color: var(--good);
    border: 1px solid transparent;
}

.protocol-rtmp {
    background: var(--chip-warn);
    color: var(--warn);
    border: 1px solid transparent;
}

.protocol-webrtc {
    background: rgba(101, 201, 232, 0.14);
    color: var(--cyan);
    border: 1px solid transparent;
}

.protocol-default {
    background: var(--surface-strong);
    color: var(--muted);
    border: 1px solid var(--line);
}



/* Interactive Elements */
.btn:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.stream-item:focus-within,
.recording-item:focus-within {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: var(--radius-lg);
}

/* Smooth Transitions */
* {
    scroll-behavior: smooth;
}

.card,
.btn,
.stream-item,
.recording-item,
.enhancement-item,
.stat {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Compact Stats for Recordings Page */
.stat-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--tint-accent);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-md);
    min-width: 80px;
}

.stat-compact-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-primary);
    line-height: 1.2;
}

.stat-compact-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* Dark Theme Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--primary-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-sm);
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: var(--spacing-md);
        gap: var(--spacing-lg);
    }
    
    .header-content {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }
    
    .header-actions {
        justify-content: center;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .enhancement-grid {
        grid-template-columns: 1fr;
    }
    
    .stream-actions,
    .card-actions {
        flex-wrap: wrap;
    }
    
    .connection-item {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-xs);
    }
    
    .stream-details {
        grid-template-columns: repeat(2, 1fr);
    }
    

}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-lg);
}

.stat {
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.stat-label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

/* Button System */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
    user-select: none;
    font-family: var(--font-sans);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

.btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}

.btn-danger {
    background: transparent;
    color: var(--danger);
    border-color: var(--danger);
}

.btn-danger:hover {
    background: var(--chip-danger);
}

.btn-warning {
    background: var(--surface);
    color: var(--warn);
    border-color: var(--line);
}

.btn-warning:hover {
    background: var(--chip-warn);
    border-color: var(--warn);
}

.btn-small {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.75rem;
}

.btn-small.btn-primary {
    background: var(--accent);
}

/* Stream details modal URL list + inline player */
#stream-details-modal .modal-content { max-width: 680px; }
.url-section { margin-bottom: 16px; }
.url-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; }
.url-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.url-label { font-size: 12px; font-weight: 600; color: var(--text-muted); min-width: 72px; }
.url-code { flex: 1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--surface-strong); padding: 3px 7px; border-radius: 4px; border: 1px solid var(--border-color); }
.btn-tiny { padding: 2px 8px !important; font-size: 11px !important; white-space: nowrap; }
/* ABR toggle button states */
.btn-abr-active {
    background: var(--good);
    color: #06210f;
    border-color: var(--good);
}

.btn-abr-inactive {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}


.btn-success {
    background: var(--good);
    border-color: var(--good);
    color: #06210f;
}

.btn-success:hover,
.btn-abr-active:hover {
    background: #4fd28c;
}

/* Stream Controls */
.stream-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* Connection Info */
.connection-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.connection-info h3 {
    margin: 20px 0 10px 0;
    padding: 8px 12px;
    background: var(--surface-strong);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent);
    font-size: 1rem;
    color: var(--ink);
}

.connection-info h3:first-child {
    margin-top: 0;
}

/* Recording Controls */
.recording-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(8, 15, 23, 0.6);
    animation: fadeIn 0.3s ease;
}

.modal-content {
    background-color: var(--surface);
    margin: 5% auto;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    box-shadow: 0 30px 80px rgba(8, 15, 23, 0.32);
    animation: slideIn 0.3s ease;
}

.modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    color: var(--text-primary);
    font-size: 1.3rem;
}

.close {
    color: var(--text-secondary);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}

.modal-body {
    padding: 25px;
}

/* Form Styles */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--text-primary);
}

.form-group small {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    background-color: var(--card-bg);
    color: var(--text-primary);
    transition: border-color 0.2s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--tint-accent);
}

.form-group small {
    display: block;
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.form-group input[type="checkbox"],
.setting-checkbox {
    margin-right: 8px;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 25px;
}

/* Placeholder messages */
.no-streams,
.no-data,
.no-recordings {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: 40px 20px;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { 
        opacity: 0;
        transform: translateY(-50px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stream-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .stream-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .info-item label {
        min-width: auto;
    }
    
    .modal-content {
        width: 95%;
        margin: 10% auto;
    }
}

/* Test Page Specific Styles */
.test-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.test-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.test-card h3 {
    color: var(--accent-success);
    margin-top: 0;
    font-size: 1.2em;
    font-weight: 600;
}

.test-card p {
    color: var(--text-secondary);
    line-height: 1.5;
}

.test-card label {
    display: block;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    font-weight: bold;
}

.test-card label:first-of-type {
    margin-top: 0;
}

.test-button {
    background: var(--accent-primary);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin: var(--spacing-xs);
    transition: background-color 0.3s ease;
    font-weight: 500;
}

.test-button:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

.test-status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: var(--spacing-xs);
}

.test-status-ok { background: var(--accent-success); }
.test-status-error { background: var(--accent-danger); }
.test-status-warning { background: var(--accent-warning); }
.test-status-unknown { background: var(--text-muted); }

.log-output {
    background: var(--primary-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    font-family: var(--font-mono);
    font-size: 12px;
    max-height: 200px;
    overflow-y: auto;
    color: var(--text-secondary);
}

.test-url {
    background: var(--primary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    width: 100%;
    font-family: var(--font-mono);
    margin-bottom: var(--spacing-md);
}

.protocol-tabs {
    display: flex;
    margin-bottom: var(--spacing-lg);
}

.protocol-tab {
    background: var(--card-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: var(--spacing-sm) var(--spacing-lg);
    cursor: pointer;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    margin-right: 2px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.protocol-tab.active {
    background: var(--accent);
    color: #ffffff;
}

.protocol-content {
    display: none;
}

.protocol-content.active {
    display: block;
}

.pattern-preview {
    width: 200px;
    height: 120px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin: var(--spacing-sm) 0;
    background: linear-gradient(
        to right,
        #ffffff 0%, #ffffff 14.28%,
        #ffff00 14.28%, #ffff00 28.56%,
        #00ffff 28.56%, #00ffff 42.84%,
        #00ff00 42.84%, #00ff00 57.12%,
        #ff00ff 57.12%, #ff00ff 71.4%,
        #ff0000 71.4%, #ff0000 85.68%,
        #0000ff 85.68%, #0000ff 100%
    );
}

/* Test Page Specific Styles */
.test-container {
    max-width: 1400px;
    margin: 0 auto;
}

.test-container .card {
    text-align: left;
}

.test-container .card h2,
.test-container .card p {
    text-align: left;
}

.protocol-selector {
    display: flex;
    gap: 30px;
    align-items: center;
}

.protocol-selector label {
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
    color: var(--text-primary);
}

.protocol-selector input[type="radio"] {
    margin-right: 5px;
    vertical-align: middle;
}

/* Override form-group for test page dark theme */
.test-container .form-group label {
    color: var(--ink);
    text-align: left;
}

.test-container .form-group input,
.test-container .form-group select {
    background: var(--surface-strong);
    color: var(--ink);
    border: 1px solid var(--line);
    font-size: 14px;
    padding: 10px;
}

.test-container .form-group input[type="number"] {
    font-size: 14px;
}

.test-container .form-group input::placeholder {
    color: var(--text-muted);
}

/* Status boxes for test page */
.test-container .status-box {
    margin-top: 20px;
    padding: 15px;
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    color: var(--ink);
}

.test-container .status-box.success {
    background: var(--chip-good);
    border: 1px solid rgba(101, 225, 160, 0.25);
    color: var(--good);
}

.test-container .status-box.error {
    background: var(--chip-danger);
    border: 1px solid rgba(239, 107, 104, 0.25);
    color: var(--danger);
}

.test-container .status-box.info {
    background: var(--chip-accent);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: var(--accent);
}

/* Log box for test page */
.log-box {
    margin-top: 20px;
    padding: 15px;
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    font-family: var(--font-mono);
    font-size: 12px;
    max-height: 400px;
    overflow-y: auto;
}

/* Info box for test page */
.test-container .info-box {
    background: var(--surface-strong);
    border-left: 3px solid var(--accent);
    padding: 15px;
    margin: 20px 0;
    border-radius: 4px;
    color: var(--ink);
}

.test-container .info-box strong {
    color: var(--accent);
}

/* Utils Page Specific Styles */
.utils-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.option-info {
    background: var(--card-bg);
    padding: 0.75rem;
    border-radius: var(--radius-md);
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.option-info.recommended {
    border-left: 3px solid var(--accent-success);
    background: var(--tint-good);
}

.status-section {
    margin-top: 2rem;
}

.job-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1rem;
}

.job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.job-title {
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
}

.job-status {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.job-status.running {
    background: var(--accent-primary);
    color: white;
}

.job-status.completed {
    background: var(--accent-success);
    color: white;
}

.job-status.failed {
    background: var(--accent-danger);
    color: white;
}

.job-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    font-size: 0.875rem;
}

.job-detail {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
}

.job-detail-label {
    color: var(--text-muted);
}

.job-detail-value {
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--primary-bg);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: 0.75rem 0;
}

.progress-fill {
    height: 100%;
    background: var(--good);
    transition: width 0.3s ease;
}

.error-message {
    background: var(--tint-danger);
    border: 1px solid var(--accent-danger);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    margin-top: 0.75rem;
    color: var(--danger);
    font-size: 0.875rem;
    font-family: 'Courier New', monospace;
    max-height: 100px;
    overflow-y: auto;
}

.output-file {
    background: var(--tint-good);
    border: 1px solid var(--accent-success);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-family: 'Courier New', monospace;
    color: var(--text-primary);
}

.recordings-list {
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--primary-bg);
}

.recordings-list .recording-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s;
    background: var(--card-bg);
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    align-items: center;
}

.recordings-list .recording-item:last-child {
    border-bottom: none;
}

.recordings-list .recording-item.selected {
    background: var(--tint-accent);
    border-left: 4px solid var(--accent-primary);
    padding-left: calc(1rem - 4px);
}

.recordings-list .recording-item .recording-name {
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    font-weight: 500;
}

.recording-meta {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.tab-buttons {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
}

.tab-button {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.tab-button.active {
    color: var(--accent-success);
    border-bottom-color: var(--accent-success);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Utils Page - Enhanced Scrollbar */
.recordings-list {
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--primary-bg);
}

.recordings-list::-webkit-scrollbar {
    width: 12px;
}

.recordings-list::-webkit-scrollbar-track {
    background: var(--primary-bg);
}

.recordings-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-sm);
    border: 2px solid var(--primary-bg);
}

.recordings-list::-webkit-scrollbar-button {
    display: block;
    height: 16px;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
}

.recordings-list::-webkit-scrollbar-button:vertical:decrement {
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.recordings-list::-webkit-scrollbar-button:vertical:increment {
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.recordings-list::-webkit-scrollbar-button::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    margin: 4px auto;
}

.recordings-list::-webkit-scrollbar-button:vertical:decrement::before {
    border-bottom-color: var(--text-secondary);
    border-top-width: 0;
}

.recordings-list::-webkit-scrollbar-button:vertical:increment::before {
    border-top-color: var(--text-secondary);
    border-bottom-width: 0;
}

/* Utils - Recording List Header */
.recordings-list-header {
    background: var(--card-bg);
    padding: 0.5rem 1rem;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* =====================
   Video Wall
   ===================== */
.videowall-grid {
    flex: 1;
    display: grid;
    gap: 2px;
    background: #000;
    height: 500px;
    overflow: auto;
}

.vw-layout-btns {
    display: flex;
    gap: 4px;
    align-items: center;
}

.vw-layout-btn {
    background: var(--surface);
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
    line-height: 1.5;
    transition: all 0.15s ease;
}

.vw-layout-btn:hover {
    border-color: var(--muted);
    color: var(--ink);
}

.vw-layout-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--ink);
}

.vw-cell {
    position: relative;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 300px;
}

.vw-cell.expanded {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #000;
}

.vw-video-area {
    cursor: pointer;
}

.vw-cell-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    background: rgba(0, 0, 0, 0.75);
    flex-shrink: 0;
    z-index: 2;
}

.vw-cell-bar select {
    flex: 1;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 11px;
    min-width: 0;
}

.vw-cell-bar select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.vw-video-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

.vw-video-area video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
}

.vw-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-muted);
    pointer-events: none;
    text-align: center;
    padding: 8px;
}

.vw-overlay.active { color: var(--muted); }
.vw-overlay.error  { color: var(--danger); }

.vw-status {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--warn);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    display: none;
    z-index: 3;
}

/* Footer Styles */
.footer {
    background: var(--secondary-bg);
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    margin-top: 4rem;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.footer-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.footer-logo {
    width: auto;
    object-fit: contain;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}


.footer-logo-bbn {
    height: 75px;
}

.footer-logo-sift {
    height: 55px;
}

.footer-logo-afrl {
    height: 50px;
}

.footer-logo:hover {
    opacity: 1;
}

.footer-license {
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-align: center;
}

@media (max-width: 768px) {
    .footer-logos {
        gap: 2rem;
    }
    
    .footer {
        padding: 1.5rem 0;
        margin-top: 2rem;
    }
}

/* ==========================================================================
   Stream validation banner (/api/stream/validate)
   Surfaces KLV + TAK-client compatibility problems on the stream card.
   Declared last so it wins over `.stream-item * { color: inherit }` on
   equal specificity.
   ========================================================================== */

.stream-validation {
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-left: 3px solid var(--border-color);
    background: var(--secondary-bg);
    font-size: 0.875rem;
}

.stream-validation.ok {
    border-left-color: var(--accent-success);
    color: var(--accent-success);
}

.stream-validation.warn {
    border-left-color: var(--accent-warning);
}

.stream-validation.fail {
    border-left-color: var(--accent-danger);
}

.stream-validation-title {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.stream-validation.warn .stream-validation-title {
    color: var(--accent-warning);
}

.stream-validation.fail .stream-validation-title {
    color: var(--accent-danger);
}

.stream-validation-list {
    margin: 0;
    padding-left: var(--spacing-lg);
    list-style: disc;
}

.stream-validation-list li {
    margin-bottom: var(--spacing-xs);
    color: var(--text-secondary);
}

.stream-validation-list li.validation-fail strong {
    color: var(--accent-danger);
}

.stream-validation-list li.validation-warn strong {
    color: var(--accent-warning);
}

.stream-validation .validation-hint {
    color: var(--text-muted);
    font-size: 0.8125rem;
    margin-top: 2px;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UMT alignment
   ───────────────────────────────────────────────────────────────────────────
   Everything above keeps this app's own class names and layout. This section
   brings the pieces whose *shape* differed onto umt-shared.css's metrics, and
   patches the upstream and local bugs noted in umt-shared.README.md.

   Load order matters: umt-shared.css first, then this file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Upstream fix: .pill.success was pale-green text on a pale-green ground.
      The newer .pill--good modifier is the correct one; this realigns the
      legacy variant with it rather than leaving it unreadable. ── */
.pill.success {
    background: var(--chip-good);
    color: var(--good);
}

/* Note: two focus rules above referenced --primary-color, a token that has
   never been defined in this app, so the focus border never actually changed.
   They now use --accent. Same story for --bg-secondary in the test page. */

/* ── Controls on UMT metrics ──
   umt-shared.css: buttons 38px tall, 8px radius, 14px/600; inputs 40px tall. */
.btn {
    min-height: 38px;
    border-radius: var(--radius-lg);
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--line);
}


.btn-primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

/* Small/tiny variants keep their compact footprint — UMT's .row-action is the
   same idea — but pick up the shared radius so they sit with everything else. */
.btn-small,
.btn-tiny {
    min-height: 0;
    border-radius: var(--radius-md);
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    min-height: 40px;
    border-radius: var(--radius-lg);
    background-color: var(--surface-strong);
}

.form-group label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

/* ── Panels ──
   UMT's .panel is a flat surface with a hairline border and one shadow. The
   16px-rounded, heavily shadowed card this app used has no UMT counterpart. */
.card,
.test-card,
.job-card,
.stream-item,
.recording-item,
.recording-item-full {
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}

.card {
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 18px;
}

/* ── Status chips take .pill's shape ── */
.status-badge,
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

/* ── Stat tiles read as UMT .metric-card ── */
.stat {
    text-align: left;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 16px;
}

.stat-label {
    color: var(--muted);
}

.stat-value {
    font-size: 1.65rem;
    font-weight: 600;
}

/* ── Section headings ── */
.card-header {
    gap: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   App chrome — REMOVE WHEN THIS BECOMES A UMT MODULE
   ───────────────────────────────────────────────────────────────────────────
   UMT sub-apps render inside an iframe under the shell's ribbon, and supply
   only <div class="app-shell"><main class="content"><header class="topbar">.
   They carry no masthead, no nav and no footer — the ribbon is the nav.

   This app is standalone, so it keeps its own. Everything from here to the end
   of this block is exactly what would be dropped to run under the shell; the
   rules above it are already in the sub-app idiom. See the same marker in the
   page markup.
   ═══════════════════════════════════════════════════════════════════════════ */

header {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: none;
}

/* Nav links borrow the ribbon's tab treatment: no outline, an underline rail
   on the active one. */
.nav-link {
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-weight: 500;
    opacity: 0.88;
}

.nav-link:hover {
    color: #93c5fd;
    background: transparent;
    opacity: 1;
}

.nav-link.active {
    opacity: 1;
}

.footer {
    border-top: 1px solid var(--line);
}

/* ── Checkboxes and radios ────────────────────────────────────────────────
   umt-shared.css styles bare `select, input, textarea` (its line 114), so its
   40px min-height, 12px padding, border, background and 8px radius land on
   every input — checkboxes and radios included. A checkbox then occupies a
   40px-tall inline box and the label text sits on that box's baseline, which
   reads as the text having dropped to the next line.

   UMT's own apps never hit this because they use custom widgets (.um-checkbox,
   .toggle-field) rather than native controls. This app uses native ones, so
   they have to be reset back out of that rule.

   Deliberately not scoped to .form-group: the rule being undone is unscoped,
   so anything narrower would leave checkboxes broken elsewhere. ── */
input[type="checkbox"],
input[type="radio"] {
    min-height: 0;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    accent-color: var(--accent);
    cursor: pointer;
    vertical-align: middle;
    flex: 0 0 auto;
}

/* Keeps the larger hit target on the recordings list's select-all boxes. */
.recording-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* A label that wraps its own checkbox is a row, not a field caption: the text
   is the setting's name, so it takes --ink rather than the muted treatment
   that suits a caption sitting above an input.

   :has() carries the label styling; the sizing reset above stands on its own,
   so a browser without :has() still gets correctly aligned controls. */
.form-group label:has(> input[type="checkbox"]),
.form-group label:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 600;
}

/* The 8px above is the gap now, so the old right margin would double it. */
.form-group label > input[type="checkbox"],
.form-group label > input[type="radio"],
.form-group label > .setting-checkbox {
    margin-right: 0;
}

/* Help text hangs under the control it explains, lined up with the label text
   rather than the checkbox. */
.form-group label:has(> input[type="checkbox"]) + small,
.form-group label:has(> input[type="radio"]) + small {
    margin-left: 24px;
}

/* File inputs inherit the shared 40px min-height with no vertical padding, so
   the native "Choose file" button sits flush against the top edge instead of
   centring. Flex centres it without overriding the platform widget. */
input[type="file"] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 10px;
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    min-height: 26px;
    margin-right: 10px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
    border-color: var(--muted);
}