@import url('./responsive.css');

/**
 * Main Global Styles - Nexora OEM Player
 * Dark theme matching Flutter app visual style
 */

/* Roboto — legacy fallback (was the primary body font under the old Nexora
   skin). Kept bundled so --font's fallback chain still resolves offline. */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../lib/fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../lib/fonts/Roboto-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../lib/fonts/Roboto-Bold.ttf') format('truetype');
}

/* Inter — Nexora body font. webOS has no internet guarantee, so the static
   TTFs are bundled locally (no external URLs). */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../lib/fonts/Inter-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../lib/fonts/Inter-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../lib/fonts/Inter-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../lib/fonts/Inter-Bold.ttf') format('truetype');
}

/* Orbitron — Nexora brand/display font. Used sparingly: logo/wordmark, big
   headings, LIVE badges, clocks, splash/boot text. Never for body copy. */
@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../lib/fonts/Orbitron-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../lib/fonts/Orbitron-Bold.ttf') format('truetype');
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --brand-navy: #0D0A14;
    --brand-navy2: #171020;
    --brand-surface: #21182D;
    --brand-surface2: #2D203C;
    --brand-focus: #F7931E;
    --brand-accent-color: #7A3FF2;
    --brand-magenta: #7A3FF2;
    --brand-amber: #F7931E;
    --brand-live: #7FC34B;
    --brand-text: #FFF4DF;
    --brand-muted: #D6C9BA;
    --brand-muted2: #666666;
    --brand-danger: #FF4757;
    --brand-star: #FFA500;
    --brand-focus-soft: rgba(247,147,30,.18);
    --brand-focus-glow: rgba(247,147,30,.55);
    --brand-accent-soft: rgba(122,63,242,.20);
    --brand-live-glow: rgba(127,195,75,.55);
    --brand-color: #F7931E;
    --brand-accent: #7A3FF2;
    --brand-gradient: linear-gradient(135deg, #F7931E, #7A3FF2);
    --bg-dark: #0D0A14;
    --bg-medium: #171020;
    --bg-light: #21182D;
    --bg-hover: #2D203C;
    --bg-card: #21182D;
    --text-primary: #FFF4DF;
    --text-secondary: #D6C9BA;
    --text-muted: #666666;
    --focus-color: #F7931E;
    --success: #7FC34B;
    --error: #FF4757;
    --warning: #ffa500;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --transition: 0.2s ease;
    --font: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-brand: 'Orbitron', 'Inter', sans-serif;
    --z-page: 1;
    --z-overlay: 100;
    --z-modal: 1000;
    --z-toast: 2000;
    --z-loader: 3000;
    --tv-safe-x: 96px;
    --tv-safe-y: 54px;
    --tv-target-min: 72px;
    --tv-target-md: 108px;
    --tv-target-lg: 176px;
    --tv-gutter: 40px;
    --tv-btn-pad-x: 28px;
    --tv-btn-pad-y: 16px;
    --tv-font-title: 56px;
    --tv-font-subtitle: 36px;
    --tv-font-body: 30px;
    --tv-font-button: 32px;
    --tv-font-caption: 24px;
    --tv-focus-color: #F7931E;
    --tv-focus-border: 4px;
    --tv-focus-scale: 1.06;
    --tv-focus-glow: 0 0 32px rgba(247,147,30,.55);
}

/* The whole UI is authored on a fixed 1920x1080 canvas (body). On TVs whose
   web viewport is larger than 1080p (UHD panels rendering the web app at
   native resolution) the canvas is scaled up with CSS `zoom` by js/utils/
   viewport.js, so everything stays proportional and fills the screen. */
html {
    width: 100%; height: 100%;
    margin: 0; padding: 0;
    overflow: hidden;
    background: #000;
}
body {
    width: 1920px; height: 1080px;
    min-width: 1920px; min-height: 1080px;
    margin: 0; padding: 0;          /* kill the browser default 8px margin — it
                                       scales with zoom and insets the canvas,
                                       leaving a gap at the screen edges */
    overflow: hidden;
    font-family: var(--font);
    font-size: 16px;
    color: var(--text-primary);
    background: var(--bg-dark);
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

#app {
    width: 1920px; height: 1080px;
    position: relative; overflow: hidden;
}

/* Pages */
.page {
    width: 1920px; height: 1080px;
    position: absolute; top: 0; left: 0;
    opacity: 0; visibility: hidden;
    transition: opacity var(--transition);
    background: var(--bg-dark);
    overflow: hidden;
}
.page.active { opacity: 1; visibility: visible; z-index: var(--z-page); }

/* Loading screen */
#app-loader {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background: var(--bg-dark);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: var(--z-loader);
    transition: opacity 0.3s;
}
#app-loader .loader-icon {
    width: 80px; height: 80px;
    border: 4px solid var(--bg-light);
    border-top-color: var(--brand-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
#app-loader .loader-text {
    margin-top: 24px;
    font-family: var(--font-brand);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 3px;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Focus indicator */
.focused {
    box-shadow: 0 0 0 var(--tv-focus-border) var(--tv-focus-color), var(--tv-focus-glow) !important;
    transform: scale(var(--tv-focus-scale));
    z-index: 10;
    transition: all var(--transition);
}

/* Scrollbars */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-medium); }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 3px; }

/* Loading overlay */
.loading-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,0.75);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: var(--z-modal);
}
.loading-overlay.hidden { display: none !important; }
.loading-spinner {
    width: 60px; height: 60px;
    border: 4px solid var(--bg-light);
    border-top-color: var(--brand-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.loading-text { margin-top: 16px; font-size: 18px; color: var(--text-secondary); }

/* Loading/empty messages */
.loading-msg, .empty-msg {
    padding: 40px; text-align: center;
    color: var(--text-secondary); font-size: 18px;
}

/* Sidebar layout helper */
.sidebar-layout {
    display: flex; height: 100%;
}
.sidebar-left {
    width: 280px; min-width: 280px;
    background: var(--bg-medium);
    border-right: 1px solid var(--bg-light);
    overflow-y: auto; overflow-x: hidden;
}
.sidebar-right { flex: 1; overflow-y: auto; overflow-x: hidden; }

/* Section headers */
.section-header {
    padding: 12px 20px;
    font-family: var(--font-brand);
    font-size: 13px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--bg-light);
}

/* Keyboard keys */
.keyboard-row { display: flex; justify-content: center; gap: 4px; margin-bottom: 4px; }
.keyboard-key {
    min-width: var(--tv-target-min); height: var(--tv-target-min);
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-light); border: 1px solid #444;
    border-radius: var(--radius-sm);
    font-size: var(--tv-font-caption); font-weight: 600; color: var(--text-primary);
    cursor: pointer; transition: all var(--transition);
    padding: 0 8px;
}
.keyboard-key.focused {
    background: var(--focus-color);
    color: var(--bg-dark);
    box-shadow: none !important;
    transform: scale(1.1);
}
.keyboard-key:hover { background: var(--bg-hover); }

/* Utility */
.hidden { display: none !important; }

/* ── Watchdog overlays (global, above everything) ──────────────────────────── */
#watchdog-layer {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 4000;
    pointer-events: none;        /* fingerprint/marquee never steal focus/cursor */
}
/* Forensic fingerprint */
.wd-fp {
    position: absolute;
    max-width: 60%;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 22px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wd-pos-center       { top: 50%; left: 50%; transform: translate(-50%,-50%); }
.wd-pos-top          { top: 24px; left: 50%; transform: translateX(-50%); }
.wd-pos-bottom       { bottom: 24px; left: 50%; transform: translateX(-50%); }
.wd-pos-left         { top: 50%; left: 24px; transform: translateY(-50%); }
.wd-pos-right        { top: 50%; right: 24px; transform: translateY(-50%); }
.wd-pos-top-left     { top: 24px; left: 24px; }
.wd-pos-top-right    { top: 24px; right: 24px; }
.wd-pos-bottom-left  { bottom: 24px; left: 24px; }
.wd-pos-bottom-right { bottom: 24px; right: 24px; }

/* Marquee banner */
#watchdog-marquee {
    position: absolute; left: 0; right: 0;
    height: 44px; line-height: 44px;
    overflow: hidden;
    font-size: 24px;
    white-space: nowrap;
}
#watchdog-marquee .wd-mq-text {
    display: inline-block;
    padding-left: 100%;
    will-change: transform;
    animation: wd-mq-scroll 18s linear infinite;
}
@keyframes wd-mq-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* Forced message dialog (modal, captures the remote) */
.wd-msg-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 4500;
    pointer-events: auto;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
}
.wd-msg-card {
    background: var(--bg-card, #1c1c22);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 32px 36px;
    max-width: 60%;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.wd-msg-img     { max-width: 100%; max-height: 40vh; border-radius: 8px; margin-bottom: 12px; object-fit: contain; }
.wd-msg-title   { font-size: 30px; font-weight: 600; margin-bottom: 16px; }
.wd-msg-text    { font-size: 24px; line-height: 1.4; margin-bottom: 28px; white-space: pre-wrap; }
.wd-msg-buttons { display: flex; gap: 20px; justify-content: center; }
.wd-msg-btn {
    min-width: 180px;
    min-height: var(--tv-target-min);
    padding: var(--tv-btn-pad-y) var(--tv-btn-pad-x);
    border-radius: 8px;
    font-size: 24px;
    background: rgba(255,255,255,0.10);
    cursor: pointer;
}
.wd-msg-btn.focused { background: var(--brand-color, #7B2CFF); color: var(--brand-navy); }

/* Provider kill-switch — full-screen, non-dismissible operator-cutoff lock */
.wrong-provider-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 5000;
    background: rgba(0,0,0,0.92);
    display: flex; align-items: center; justify-content: center;
}
.wrong-provider-overlay .wp-card {
    max-width: 60%;
    text-align: center;
    padding: 40px 44px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    background: #1c1c22;
}
.wrong-provider-overlay .wp-title { font-size: 34px; font-weight: 600; margin-bottom: 18px; color: var(--error); }
.wrong-provider-overlay .wp-text  { font-size: 24px; line-height: 1.45; }

/* Chrome 79 flex-gap fallback. */
html.no-flex-gap .keyboard-row > * + * { margin-left: 4px; }
html.no-flex-gap .wd-msg-buttons > * + * { margin-left: 20px; }