:root {
    --bg: #0B0A14;
    --bg-card: #151326;
    --bg-sidebar: #0F0E1C;
    --accent: #6C5CE7;
    --accent-glow: rgba(108,92,231,0.35);
    --accent-soft: rgba(108,92,231,0.12);
    --green: #00D68F;
    --text-primary: #F0EFF4;
    --text-muted: #7B7A8E;
    --border: #1F1D35;
    --border-hover: #36345A;
    --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: #8B7FFF; text-decoration: none; }

code, pre {
    font-family: var(--mono);
    font-size: 13px;
    background: #0A0918;
    border-radius: 6px;
    padding: 2px 6px;
    color: #E0DDF2;
}

pre { padding: 16px; overflow-x: auto; }

/* ═══════════════════════════════════════════════════════
   SHARED DEMO LAYOUT — used by all demo pages
   ═══════════════════════════════════════════════════════ */
.demo-layout { display: flex; min-height: calc(100vh - 64px); }
.demo-body { flex: 1; display: flex; flex-direction: column; }
.demo-header {
    padding: 40px 36px 20px;
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.demo-header::before {
    content: '';
    position: absolute;
    top: -60px; right: -40px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    opacity: 0.3;
    pointer-events: none;
}
.demo-header h2 {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.5px;
    position: relative;
}
.demo-sub {
    margin: 0;
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.6;
    position: relative;
}
.demo-content { flex: 1; padding: 28px 36px; }

/* ═══════════════════════════════════════════════════════
   SHARED TABLE PAPER — dark card for FlexTable wrapper
   ═══════════════════════════════════════════════════════ */
.table-paper {
    background: #151326 !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(108,92,231,0.05) !important;
}
.table-paper .flex-table th { color: rgba(255,255,255,.65) !important; border-bottom-color: rgba(255,255,255,.08) !important; font-weight: 600 !important; }
.table-paper .flex-table th span { color: rgba(255,255,255,.65) !important; }
.table-paper .flex-table td { color: var(--text-primary) !important; border-bottom-color: rgba(255,255,255,.04) !important; }
.table-paper .flex-table tbody tr:nth-child(even) { background-color: rgba(255,255,255,.02) !important; }
.table-paper .flex-table tbody tr:hover { background-color: rgba(108,92,231,0.06) !important; }

/* ═══════════════════════════════════════════════════════
   STATUS BADGES — reusable across demos
   ═══════════════════════════════════════════════════════ */
.status-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; }
.status-badge.new { background: rgba(108,92,231,0.15); color: #B2CCFF; }
.status-badge.pending { background: rgba(255,177,66,0.12); color: #FFD9B2; }
.status-badge.inprogress { background: rgba(59,130,246,0.12); color: #93C5FD; }
.status-badge.delivered { background: rgba(0,214,143,0.12); color: #86EFAC; }
.status-badge.cancelled { background: rgba(239,68,68,0.12); color: #FCA5A5; }

/* ═══════════════════════════════════════════════════════
   UTILITY ANIMATIONS
   ═══════════════════════════════════════════════════════ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-glow {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.7; }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* ═══════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2B283D; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3D3A5E; }

/* ═══════════════════════════════════════════════════════
   SELECTION
   ═══════════════════════════════════════════════════════ */
::selection { background: rgba(108,92,231,0.3); color: #fff; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1024px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* Navbar */
    .top-nav { padding: 0 20px !important; }

    .demo-header { padding: 28px 20px 16px; }
    .demo-header h2 { font-size: 24px; }
    .demo-content { padding: 20px; }
    .table-paper { border-radius: 10px !important; overflow-x: auto; }

    /* Hero */
    .hero { flex-direction: column !important; gap: 40px !important; padding: 48px 32px 40px !important; min-height: auto !important; }
    .hero-left { width: 100% !important; min-width: unset !important; }
    .hero-left h1 { font-size: 40px !important; }
    .features-strip { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Sidebar → horizontal nav strip */
    .demo-layout { flex-direction: column; }
    .demo-sidebar {
        width: 100% !important; min-width: unset !important;
        min-height: unset !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border);
        padding: 12px 0 !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 0 !important;
    }
    .sidebar-section-title { display: none; }
    .sidebar-parent { display: none; }
    .sidebar-footer { display: none; }
    .sidebar-item {
        height: 32px !important; padding: 0 12px !important;
        font-size: 12px !important; margin: 0 4px !important;
        border-radius: 6px !important;
    }
    .sidebar-sub { padding-left: 12px !important; }
    .sidebar-indicator { display: none !important; }

    /* Navbar — !important to override inline <style> from MainLayout.razor */
    .top-nav { padding: 0 16px !important; height: 52px !important; }
    .logo-mark { width: 28px !important; height: 28px !important; font-size: 14px !important; border-radius: 6px !important; }
    .logo-text { font-size: 16px !important; }
    .nav-links { display: none !important; }
    .btn-get-started { height: 32px !important; padding: 0 14px !important; font-size: 12px !important; }
    .btn-get-started svg { display: none !important; }

    /* Demo pages */
    .demo-header { padding: 20px 16px 14px; }
    .demo-header h2 { font-size: 20px; }
    .demo-header::before { display: none; }
    .demo-sub { font-size: 13px; }
    .demo-content { padding: 16px; }
    .table-paper {
        border-radius: 8px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-paper .flex-table { min-width: 600px; }

    /* Hero — !important to override inline <style> from Home.razor */
    .hero { padding: 32px 16px 28px !important; gap: 28px !important; min-height: auto !important; }
    .hero-left { width: 100% !important; min-width: unset !important; }
    .hero-left h1 { font-size: 28px !important; letter-spacing: -1px !important; line-height: 1.15 !important; }
    .hero-sub { font-size: 14px !important; max-width: 100% !important; }
    .hero-right { display: none !important; }
    .hero-badge { font-size: 11px !important; padding: 5px 12px !important; }
    .hero-btns { flex-direction: column !important; }
    .btn-hero-primary, .btn-hero-secondary {
        width: 100% !important; justify-content: center !important;
        height: 44px !important; font-size: 14px !important;
        box-sizing: border-box !important;
    }
    .hero-stats { gap: 16px !important; flex-wrap: wrap !important; }
    .stat-num { font-size: 20px !important; }
    .stat-label { font-size: 10px !important; }

    /* Features strip */
    .features-strip { grid-template-columns: 1fr !important; }
    .feature-item { padding: 16px 20px !important; }

    /* Getting Started */
    .gs-layout { flex-direction: column !important; }
    .gs-page {
        padding: 20px 16px 40px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .gs-hero { padding: 16px 0 28px !important; }
    .gs-hero h1 { font-size: 26px !important; letter-spacing: -0.5px !important; }
    .gs-hero p { font-size: 14px !important; max-width: 100% !important; }
    .gs-hero-badge { font-size: 11px !important; padding: 5px 12px !important; }

    /* Steps — compact timeline on mobile */
    .gs-step {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 0 0 32px !important;
        padding-left: 0 !important;
    }
    .gs-step:not(.gs-step--last)::before {
        display: none !important;
    }
    .gs-step-num {
        width: 28px !important; height: 28px !important;
        min-width: 28px !important;
        font-size: 12px !important;
        position: static !important;
    }
    .gs-step-body { gap: 10px !important; }
    .gs-step-body h2 { font-size: 17px !important; padding-top: 0 !important; }
    .gs-step-body p { font-size: 13px !important; }

    /* Code blocks */
    .gs-tab-group {
        border-radius: 8px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .gs-code {
        font-size: 11px !important;
        padding: 12px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }

    /* Service cards & callouts */
    .gs-service-card { flex-direction: column !important; gap: 4px !important; }
    .gs-service-name { min-width: unset !important; font-size: 12px !important; }
    .gs-service-desc { font-size: 12px !important; }
    .gs-callout { font-size: 12px !important; padding: 8px 12px !important; }

    /* CTA */
    .gs-cta-row { flex-direction: column !important; }
    .gs-btn-primary, .gs-btn-secondary {
        width: 100% !important; justify-content: center !important;
        height: 40px !important; font-size: 13px !important;
        box-sizing: border-box !important;
    }

    /* BasicEdit demo — stack vertically, hide order list */
    .split-demo { flex-direction: column !important; gap: 12px !important; }
    .order-list {
        width: 100% !important; min-width: unset !important;
        flex-direction: row !important; flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .order-row {
        flex: 1 1 auto !important; min-width: 140px !important;
        padding: 8px 12px !important;
    }
    .order-customer { display: none !important; }
    .order-name { font-size: 12px !important; }
    .edit-panel { border-radius: 10px !important; }
    .toolbar { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; padding: 10px 12px !important; }
    .toolbar-hint { font-size: 11px !important; }
    .fields-preview { padding: 8px 12px !important; }
    .field-chip { font-size: 10px !important; padding: 2px 8px !important; }

    /* MudBlazor form fields — force single column on mobile */
    .edit-panel .mud-grid { flex-direction: column !important; }
    .edit-panel .mud-grid .mud-item { max-width: 100% !important; flex-basis: 100% !important; }

    /* Code blocks */
    pre { font-size: 11px !important; padding: 12px !important; overflow-x: auto; }
}