/*
   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;
}

/* ========================================
   Kinetica Integration Styles
   ======================================== */

/* Sidebar section divider for Kinetica */
.sidebar-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-section-title {
    padding: 8px 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}