/*
   Main Stylesheet - MediaLive Nexus
   Imports all component stylesheets and contains global styles

   NOTE: @import statements MUST be at the top of the file (CSS requirement)
*/

/* ========================================
   Component Imports (must be first)
   ======================================== */

/* Sidebar Navigation */
@import url('./components/sidebar.css');

/* Channel Tiles and Grid */
@import url('./components/tiles.css');

/* Modal Dialogs */
@import url('./components/modals.css');

/* Graphics Management */
@import url('./components/graphics.css');

/* Buttons */
@import url('./components/buttons.css');

/* Tabs and Content Areas */
@import url('./components/tabs.css');

/* Forms and Input Elements */
@import url('./components/forms.css');

/* Login Page */
@import url('./components/login.css');

/* User Management */
@import url('./components/users.css');

/* Settings and Configuration */
@import url('./components/settings.css');

/* Multiview Editor */
@import url('./components/multiview.css');

/* Channel Flow Diagram */
@import url('./components/channelflow.css');

/* FAST Scheduler */
@import url('./components/scheduler.css');

/* ========================================
   Global Styles and Variables
   ======================================== */

/* MediaLive Nexus Brand Colors */
:root {
    /* Primary Colors */
    --deep-space-blue: #0A0E1A;
    --electric-cyan: #00D9FF;
    --neon-purple: #8B5CF6;

    /* Functional Colors */
    --live-red: #FF3B5C;
    --ready-green: #10B981;
    --warning-amber: #F59E0B;
    --off-white: #E5E7EB;
    --slate-gray: #64748B;

    /* Surface Colors */
    --card-background: #1A1F2E;
    --border-divider: #2D3748;
    --hover-state: #252B3B;

    /* Legacy Support (gradual migration) */
    --background: var(--deep-space-blue);
    --primary-text: var(--off-white);
    --secondary-text: var(--slate-gray);
    --accent-primary: var(--electric-cyan);
    --accent-secondary: var(--neon-purple);
}

/* Global Box Sizing Reset - Prevents width overflow with padding */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Global Element Styles */
html {
    scroll-behavior: smooth;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--deep-space-blue);
    color: var(--off-white);
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
    /* Touch-friendly: disable text selection for drag scrolling */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Re-enable text selection for inputs and editable content */
input, textarea, select, [contenteditable="true"],
.logs-content, .changelog-content, pre, code {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* ========================================
   Footer Navigation Bar
   ======================================== */

.sc-footer-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: var(--card-background, #1A1F2E);
    border-top: 1px solid var(--border-divider, #2D3748);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 100;
    font-size: 0.8rem;
    font-family: inherit;
}

.sc-footer-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sc-footer-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sc-footer-nav a {
    color: var(--slate-gray, #64748B);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s ease, background 0.15s ease;
    padding: 6px 14px;
    border-radius: 6px;
    white-space: nowrap;
}

.sc-footer-nav a svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sc-footer-nav a:hover {
    color: var(--off-white, #E5E7EB);
    background: var(--hover-state, #252B3B);
}

.sc-footer-nav a.active {
    color: var(--electric-cyan, #00D9FF);
}

.sc-footer-sep {
    width: 1px;
    height: 18px;
    background: var(--border-divider, #2D3748);
    margin: 0 4px;
}