/* =========================================================
   UIkit v3 – Quantum IDE + HUD + Live System
   Complete Override CSS
   ========================================================= */

/* ---------------------------------------------------------
   Base Tokens (Light Mode Default)
   --------------------------------------------------------- */
:root {
    /* Backgrounds */
    --uk-background-default: #f5f7fb;
    --uk-background-muted: #edf1f7;

    /* Surfaces */
    --uk-card-default-background: #ffffff;
    --uk-navbar-background: #ffffff;
    --uk-modal-background: #ffffff;

    /* Text */
    --uk-text-primary: #0f172a;
    --uk-text-secondary: #334155;
    --uk-text-muted: #64748b;
    --uk-text-emphasis: #020617;

    /* Brand / Accents */
    --uk-primary: #38bdf8;
    --uk-secondary: #a78bfa;
    --uk-success: #4ade80;
    --uk-warning: #facc15;
    --uk-danger: #fb7185;

    /* Borders */
    --uk-border: #d1d7e5;
    --uk-border-width: 1px;

    /* Buttons */
    --uk-button-border-radius: 6px;
    --uk-button-default-background: var(--uk-card-default-background);
    --uk-button-default-color: var(--uk-text-primary);

    --uk-button-primary-background: linear-gradient(135deg, #38bdf8, #6366f1);
    --uk-button-primary-color: #ffffff;
    --uk-button-primary-hover-background: #38bdf8;

    /* Forms */
    --uk-form-background: var(--uk-card-default-background);
    --uk-form-border: var(--uk-border);
    --uk-form-focus-border: var(--uk-primary);

    /* Cards */
    --uk-card-border-radius: 14px;
    --uk-card-border: var(--uk-border);

    /* Tables */
    --uk-table-header-background: var(--uk-background-muted);
    --uk-table-divider-border: var(--uk-border);

    /* Alerts */
    --uk-alert-background: var(--uk-background-muted);

    /* Shadows */
    --uk-box-shadow-small: 0 1px 3px rgba(15, 23, 42, 0.06);
    --uk-box-shadow-medium: 0 16px 48px rgba(15, 23, 42, 0.12);

    /* UIkit required globals */
    --uk-global-background: var(--uk-background-default);
    --uk-global-muted-background: var(--uk-background-muted);
    --uk-global-color: var(--uk-text-primary);
    --uk-global-muted-color: var(--uk-text-muted);
    --uk-global-emphasis-color: var(--uk-text-emphasis);
    --uk-global-border: var(--uk-border);
}

/* ---------------------------------------------------------
   Dark Mode Tokens
   --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        --uk-background-default: #020617;
        --uk-background-muted: #020617;

        --uk-card-default-background: #020617;
        --uk-navbar-background: #020617;
        --uk-modal-background: #020617;

        --uk-text-primary: #e5e7eb;
        --uk-text-secondary: #cbd5f5;
        --uk-text-muted: #94a3b8;
        --uk-text-emphasis: #ffffff;

        --uk-border: #1e293b;

        --uk-box-shadow-small: 0 1px 2px rgba(0,0,0,0.4);
        --uk-box-shadow-medium: 0 24px 72px rgba(0,0,0,0.8);
    }
}

/* ---------------------------------------------------------
   Body
   --------------------------------------------------------- */
body {
   
    color: var(--uk-text-primary);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: 0.01em;
}

/* ---------------------------------------------------------
   Micro Grid (HTML)
   --------------------------------------------------------- */
html {
    background-image:
        linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px);
    background-size: 32px 32px;
}

@media (prefers-color-scheme: dark) {
    html {
        background-image:
            linear-gradient(rgba(148,163,184,0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(148,163,184,0.05) 1px, transparent 1px);
    }
}

@media (max-width: 640px) {
    html {
        background-image: none;
    }
}

/* ---------------------------------------------------------
   HUD Scanlines
   --------------------------------------------------------- */
.uk-card,
.uk-modal-dialog,
.uk-table {
    position: relative;
}

.uk-card::after,
.uk-modal-dialog::after,
.uk-table::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 100% 4px;
    opacity: 0.25;
}

@media (prefers-color-scheme: dark) {
    .uk-card::after,
    .uk-modal-dialog::after,
    .uk-table::after {
        opacity: 0.4;
    }
}

/* ---------------------------------------------------------
   HUD Divider Lines
   --------------------------------------------------------- */
.uk-navbar-container::after {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56,189,248,0.6), transparent);
}

.uk-card-header,
.uk-card-footer {
    position: relative;
}

.uk-card-header::after,
.uk-card-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.35), transparent);
}

.uk-card-header::after { bottom: 0; }
.uk-card-footer::before { top: 0; }

/* ---------------------------------------------------------
   Keyboard Navigation Focus
   --------------------------------------------------------- */
.uk-button:focus-visible,
.uk-input:focus-visible,
.uk-select:focus-visible,
.uk-textarea:focus-visible,
.uk-navbar-nav > li > a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1px rgba(56,189,248,0.9),
                0 0 0 4px rgba(56,189,248,0.35),
                0 0 18px rgba(56,189,248,0.45);
}

/* ---------------------------------------------------------
   Data Emphasis Lines (Tables)
   --------------------------------------------------------- */
.uk-table tr:hover td {
    background-image: linear-gradient(90deg, rgba(56,189,248,0.08), transparent);
}

/* ---------------------------------------------------------
   Status Accent Bars (Alerts & Cards)
   --------------------------------------------------------- */
.uk-alert,
.uk-card-default {
    overflow: hidden;
    position: relative;
}

.uk-alert::before,
.uk-card-default::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(56,189,248,0.8), rgba(99,102,241,0.8));
    opacity: 0.6;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.uk-button {
    border-radius: var(--uk-button-border-radius);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.uk-button:hover { transform: translateY(-1px); }

.uk-button-default {
    background-color: var(--uk-button-default-background);
    color: var(--uk-button-default-color);
    border: 1px solid var(--uk-border);
}

.uk-button-primary {
    background: var(--uk-button-primary-background);
    color: var(--uk-button-primary-color);
}

.uk-button-primary:hover {
    box-shadow: 0 0 0 1px rgba(56,189,248,0.5),
                0 12px 36px rgba(56,189,248,0.35);
}

/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */
.uk-card {
    background-color: var(--uk-card-default-background);
    border-radius: var(--uk-card-border-radius);
    border: 1px solid var(--uk-card-border);
    box-shadow: var(--uk-box-shadow-small);
}

/* ---------------------------------------------------------
   Navbar
   --------------------------------------------------------- */
.uk-navbar-container {
    background-color: var(--uk-navbar-background);
    border-bottom: 1px solid var(--uk-border);
    box-shadow: var(--uk-box-shadow-small);
}

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */
.uk-input,
.uk-select,
.uk-textarea {
    background-color: var(--uk-form-background);
    border: 1px solid var(--uk-form-border);
    border-radius: 6px;
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
    border-color: var(--uk-form-focus-border);
    box-shadow: 0 0 0 1px rgba(56,189,248,0.7),
                0 0 0 4px rgba(56,189,248,0.25);
}

/* ---------------------------------------------------------
   Tables
   --------------------------------------------------------- */
.uk-table {
    background-color: var(--uk-card-default-background);
    border-radius: 12px;
    overflow: hidden;
}

.uk-table th {
    background-color: var(--uk-table-header-background);
    color: var(--uk-text-secondary);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.uk-table td { border-top: 1px solid var(--uk-table-divider-border); }

/* ---------------------------------------------------------
   Alerts
   --------------------------------------------------------- */
.uk-alert {
    border-radius: 12px;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(148,163,184,0.2);
}

.uk-alert-primary { background-color: rgba(56,189,248,0.15); color: var(--uk-primary); }
.uk-alert-success { background-color: rgba(74,222,128,0.15); }
.uk-alert-warning { background-color: rgba(250,204,21,0.15); }
.uk-alert-danger { background-color: rgba(251,113,133,0.15); }

/* ---------------------------------------------------------
   Modal
   --------------------------------------------------------- */
.uk-modal-dialog {
    background-color: var(--uk-card-default-background);
    border-radius: 16px;
    border: 1px solid var(--uk-border);
    box-shadow: var(--uk-box-shadow-medium);
}

.uk-modal-header,
.uk-modal-footer { background-color: var(--uk-background-muted); }

/* ---------------------------------------------------------
   Muted Utilities
   --------------------------------------------------------- */
.uk-text-muted { color: var(--uk-text-muted); }
.uk-background-muted { background-color: var(--uk-background-muted); }

/* ---------------------------------------------------------
   Live System Ambient Motion
   --------------------------------------------------------- */
@keyframes system-drift {
    0%   { background-position: 0% 0%, 100% 100%; }
    50%  { background-position: 4% 2%, 96% 98%; }
    100% { background-position: 0% 0%, 100% 100%; }
}

html {
    animation: system-drift 120s linear infinite;
     background-color: var(--uk-background-default);
}