@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600;700&display=swap');

:root {
    --t-bg: #0a0a0a;
    --t-bg-surface: #0d0d0d;
    --t-bg-card: #111;
    --t-bg-input: #0c0c0c;
    --t-green: #00ff41;
    --t-green-dim: #00cc33;
    --t-green-dark: #009926;
    --t-green-muted: #006618;
    --t-amber: #ffb000;
    --t-red: #ff3333;
    --t-red-dim: #cc2929;
    --t-cyan: #00e5ff;
    --t-border: #1a3a1a;
    --t-text: #00ff41;
    --t-text-dim: #00aa2a;
    --t-text-muted: #006618;
    --t-glow: 0 0 4px rgba(0,255,65,0.3);
    --t-glow-strong: 0 0 8px rgba(0,255,65,0.5), 0 0 20px rgba(0,255,65,0.15);
    --t-font: 'Source Code Pro', 'Courier New', 'Lucida Console', monospace;
}

/* --- Page Base --- */
body.terminal-page {
    background: var(--t-bg) !important;
    color: var(--t-text);
    font-family: var(--t-font);
    margin: 0;
    padding: 0;
}

/* Scanline */
body.terminal-page::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px
    );
    pointer-events: none;
    z-index: 9999;
}

/* Vignette */
body.terminal-page::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.35) 100%);
    pointer-events: none;
    z-index: 9998;
}

/* --- Sidebar --- */
body.terminal-page .sidebar {
    background: #050505 !important;
    border-right: 1px solid var(--t-border) !important;
}
body.terminal-page .sidebar-logo {
    border-bottom-color: var(--t-border) !important;
}
body.terminal-page .sidebar-logo a {
    color: var(--t-green) !important;
    text-shadow: var(--t-glow);
    font-family: var(--t-font);
}
body.terminal-page .sidebar-nav a {
    color: var(--t-text-dim) !important;
    font-family: var(--t-font);
    font-size: 12px;
    border-left: 3px solid transparent;
}
body.terminal-page .sidebar-nav a:hover {
    background: #0d0d0d !important;
    color: var(--t-green) !important;
}
body.terminal-page .sidebar-nav a.active {
    background: var(--t-bg-card) !important;
    color: var(--t-green) !important;
    text-shadow: var(--t-glow);
    border-left-color: var(--t-green);
    font-weight: 600;
}
body.terminal-page .nav-icon {
    color: var(--t-green-muted) !important;
}
body.terminal-page .sidebar-nav a.active .nav-icon {
    color: var(--t-green) !important;
    text-shadow: var(--t-glow);
}

/* --- Main --- */
body.terminal-page .main {
    background: var(--t-bg);
    min-height: 100vh;
}

/* --- Home Page --- */
.term-home {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 600px;
}

.term-banner {
    border: 1px solid var(--t-border);
    background: var(--t-bg-card);
    padding: 20px 24px;
}
.term-banner pre {
    color: var(--t-green);
    text-shadow: var(--t-glow);
    font-family: var(--t-font);
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
}
.term-banner .term-version {
    color: var(--t-text-muted);
    font-size: 11px;
    margin-top: 8px;
}

.term-nav {
    border: 1px solid var(--t-border);
    background: var(--t-bg-card);
}
.term-nav-header {
    background: var(--t-bg-surface);
    padding: 8px 16px;
    border-bottom: 1px solid var(--t-border);
    color: var(--t-green);
    text-shadow: var(--t-glow);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.term-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.term-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #111;
    text-decoration: none;
    color: var(--t-text-dim);
    font-size: 13px;
    transition: all 0.1s;
}
.term-nav-item:last-child { border-bottom: none; }
.term-nav-item:hover {
    background: rgba(0,255,65,0.05);
    color: var(--t-green);
}
.term-nav-item .term-prefix {
    color: var(--t-green-muted);
    font-size: 12px;
}
.term-nav-item .term-arrow {
    color: var(--t-green-dim);
    font-size: 11px;
}
.term-nav-item .term-desc {
    color: var(--t-text-muted);
    font-size: 11px;
    margin-left: auto;
}

.term-status {
    border: 1px solid var(--t-border);
    background: var(--t-bg-card);
    padding: 12px 16px;
    font-size: 12px;
    color: var(--t-text-dim);
    display: flex;
    align-items: center;
    gap: 8px;
}
.term-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--t-green);
    box-shadow: var(--t-glow);
    animation: blink 2s infinite;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.term-cursor {
    display: inline-block;
    width: 8px;
    height: 14px;
    background: var(--t-green);
    animation: cursor-blink 1s step-end infinite;
    vertical-align: middle;
    margin-left: 4px;
}
@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@media (max-width: 768px) {
    body.terminal-page .sidebar { width: 48px !important; }
    body.terminal-page .main { margin-left: 48px !important; }
}

/* ============================================
   Program Page - Terminal Overrides
   ============================================ */

/* Upload area */
body.terminal-page .upload-area {
    background: var(--t-bg-card);
    border: 1px dashed var(--t-green-dark);
    box-shadow: none;
    font-family: var(--t-font);
}
body.terminal-page .upload-area:hover,
body.terminal-page .upload-area.dragover {
    border-color: var(--t-green);
    background: var(--t-bg-surface);
}
body.terminal-page .drop-hint {
    color: var(--t-text-dim);
    font-family: var(--t-font);
}
body.terminal-page .drop-icon {
    color: var(--t-green-dim);
}
body.terminal-page .upload-progress {
    font-family: var(--t-font);
}
body.terminal-page .progress-bar {
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
}
body.terminal-page .progress-bar-inner {
    background: var(--t-green-dim);
    box-shadow: var(--t-glow);
}
body.terminal-page #progressText {
    color: var(--t-text-dim);
}
body.terminal-page .upload-msg.error { color: var(--t-red); }
body.terminal-page .upload-msg.success { color: var(--t-green); }
body.terminal-page .upload-msg { color: var(--t-text-dim); font-family: var(--t-font); }

/* Gear button */
body.terminal-page .btn-config {
    background: transparent;
    color: var(--t-text-dim);
    border: 1px solid var(--t-border);
    border-radius: 0;
    font-family: var(--t-font);
}
body.terminal-page .btn-config:hover {
    background: var(--t-bg-surface);
    color: var(--t-green);
    border-color: var(--t-green-dark);
}

/* Table */
body.terminal-page .program-table {
    background: var(--t-bg-card);
    box-shadow: none;
    font-family: var(--t-font);
    border: 1px solid var(--t-border);
}
body.terminal-page .program-table th {
    background: var(--t-bg-surface);
    color: var(--t-text-dim);
    border-bottom: 2px solid var(--t-green-dark);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
}
body.terminal-page .program-table td {
    border-bottom: 1px solid #111;
    color: var(--t-text);
    font-size: 12px;
}
body.terminal-page .program-table tr:hover {
    background: rgba(0,255,65,0.05);
}
body.terminal-page .program-table .file-name {
    color: var(--t-cyan);
    text-decoration: none;
}
body.terminal-page .program-table .file-name:hover {
    color: var(--t-green);
    text-shadow: var(--t-glow);
}

/* Buttons in table */
body.terminal-page .program-table .btn {
    font-family: var(--t-font);
    border-radius: 0;
    font-size: 11px;
    letter-spacing: 0.5px;
}
body.terminal-page .program-table .btn-primary,
body.terminal-page .btn-push,
body.terminal-page .btn-asr {
    background: transparent;
    color: var(--t-cyan);
    border: 1px solid var(--t-border);
}
body.terminal-page .program-table .btn-push:hover,
body.terminal-page .program-table .btn-asr:hover {
    background: var(--t-cyan);
    color: var(--t-bg);
    border-color: var(--t-cyan);
}
body.terminal-page .program-table .btn-danger {
    background: transparent;
    color: var(--t-red);
    border: 1px solid var(--t-red-dim);
}
body.terminal-page .program-table .btn-asr-del {
    background: transparent;
    color: var(--t-red);
    border: 1px solid var(--t-red-dim);
}
body.terminal-page .program-table .btn-asr-del:hover {
    background: var(--t-red-dim);
    color: var(--t-bg);
}
body.terminal-page .program-table .btn-danger:hover {
    background: var(--t-red-dim);
    color: var(--t-bg);
}

/* Status badges */
body.terminal-page .status-badge {
    font-family: var(--t-font);
    border-radius: 0;
    font-size: 11px;
    border: 1px solid;
}
body.terminal-page .status-badge.done {
    background: transparent;
    color: var(--t-green);
    border-color: var(--t-green-dark);
}
body.terminal-page .status-badge.error {
    background: transparent;
    color: var(--t-red);
    border-color: var(--t-red-dim);
}

/* Transcode progress */
body.terminal-page .transcode-progress {
    font-family: var(--t-font);
}
body.terminal-page .transcode-bar {
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: 0;
}
body.terminal-page .transcode-bar-inner {
    background: var(--t-green-dim);
    border-radius: 0;
    box-shadow: var(--t-glow);
}
body.terminal-page .transcode-pct {
    color: var(--t-green);
    font-family: var(--t-font);
}
body.terminal-page .transcode-queued {
    color: var(--t-amber);
    font-family: var(--t-font);
}

/* Empty state */
body.terminal-page .empty-tip {
    color: var(--t-text-muted);
    font-family: var(--t-font);
}

/* Video modal */
body.terminal-page .video-modal-overlay {
    background: rgba(0,0,0,0.85);
}
body.terminal-page .video-modal {
    border: 1px solid var(--t-green-dim);
    box-shadow: var(--t-glow-strong);
}
body.terminal-page .video-modal .close-btn {
    color: var(--t-text-dim);
    font-family: var(--t-font);
}
body.terminal-page .video-modal .close-btn:hover {
    color: var(--t-green);
}

/* Config modal */
body.terminal-page .config-modal-overlay {
    background: rgba(0,0,0,0.85);
}
body.terminal-page .config-modal {
    background: var(--t-bg-card);
    border: 1px solid var(--t-green-dim);
    box-shadow: var(--t-glow-strong);
}
body.terminal-page .config-modal-header {
    background: var(--t-bg-surface);
    border-bottom: 1px solid var(--t-border);
    color: var(--t-green);
    font-family: var(--t-font);
    text-shadow: var(--t-glow);
}
body.terminal-page .config-modal-header .close-btn {
    color: var(--t-text-dim);
}
body.terminal-page .config-modal-header .close-btn:hover {
    color: var(--t-green);
}
body.terminal-page .config-modal-body {
    background: var(--t-bg-card);
}
body.terminal-page .config-modal-body h4 {
    color: var(--t-green-muted);
    font-family: var(--t-font);
    text-transform: uppercase;
    letter-spacing: 1px;
}
body.terminal-page .config-field label {
    color: var(--t-text-dim);
    font-family: var(--t-font);
}
body.terminal-page .config-field input,
body.terminal-page .config-field select {
    background: var(--t-bg-input);
    color: var(--t-green);
    border: 1px solid var(--t-border);
    font-family: var(--t-font);
    caret-color: var(--t-green);
}
body.terminal-page .config-field input:focus,
body.terminal-page .config-field select:focus {
    border-color: var(--t-green);
    box-shadow: 0 0 4px rgba(0,255,65,0.2);
}
body.terminal-page .config-modal-footer {
    border-top: 1px solid var(--t-border);
}
body.terminal-page .config-modal-footer .btn {
    font-family: var(--t-font);
    border-radius: 0;
}
body.terminal-page .config-modal-footer .btn-secondary {
    background: transparent;
    color: var(--t-text-dim);
    border: 1px solid var(--t-border);
}
body.terminal-page .config-modal-footer .btn-secondary:hover {
    color: var(--t-green);
    border-color: var(--t-green-dark);
}
body.terminal-page .config-modal-footer .btn-primary {
    background: transparent;
    color: var(--t-green);
    border: 1px solid var(--t-green-dim);
}
body.terminal-page .config-modal-footer .btn-primary:hover {
    background: var(--t-green-dim);
    color: var(--t-bg);
}