:root {

--flow-bg-primary: #0f172a;

--flow-bg-secondary: #111827;

--flow-bg-panel: #1f2937;

--flow-border: #374151;

--flow-accent: #3b82f6;

--flow-success: #22c55e;

--flow-warning: #f59e0b;

--flow-danger: #ef4444;

--flow-text-primary: #e5e7eb;

--flow-text-secondary: #9ca3af;

}


/* GLOBAL BASE */

body {

margin: 0;

font-family:

system-ui,

-apple-system,

Segoe UI,

Roboto,

sans-serif;

background:

var(--flow-bg-primary);

color:

var(--flow-text-primary);

}


/* MAIN GRID */

.flow-layout {

display: grid;

grid-template-columns: 240px 1fr 320px;

grid-template-rows: 60px 1fr;

grid-template-areas:

"sidebar topbar drawer"

"sidebar main drawer";

height: 100vh;

}


/* SIDEBAR */

#sidebar {

grid-area: sidebar;

background:

var(--flow-bg-secondary);

border-right:

1px solid var(--flow-border);

transition:

width 0.25s ease;

overflow: hidden;

}


.sidebar-collapsed {

width: 72px !important;

}


/* TOP BAR */

#topbar {

grid-area: topbar;

background:

var(--flow-bg-secondary);

border-bottom:

1px solid var(--flow-border);

display: flex;

align-items: center;

padding: 0 16px;

}


/* MAIN CONTENT */

#main-content {

grid-area: main;

overflow-y: auto;

padding: 20px;

}


/* CONTEXT DRAWER */

#context-drawer {

grid-area: drawer;

background:

var(--flow-bg-panel);

border-left:

1px solid var(--flow-border);

transform:

translateX(100%);

transition:

transform 0.3s ease;

}


.drawer-open {

transform:

translateX(0) !important;

}


/* EVENT STREAM CONSOLE */

#event-stream-console {

position: fixed;

bottom: 0;

left: 0;

right: 0;

height: 0;

background:

#020617;

border-top:

1px solid var(--flow-border);

overflow: hidden;

transition:

height 0.25s ease;

}


.event-console-open {

height: 220px;

}


/* MOBILE LAYOUT */

body[data-layout="mobile"] .flow-layout {

display: flex;

flex-direction: column;

height: 100vh;

}


body[data-layout="mobile"] #sidebar {

display: none !important;

}


body[data-layout="mobile"] #main-content {

padding-top: 60px;

padding-bottom: 70px;

overflow-y: auto;

}


body[data-layout="mobile"] #context-drawer {

position: fixed;

top: 60px;

right: 0;

width: 92%;

height: calc(100% - 60px);

z-index: 9998;

}


/* MOBILE NAVBAR */

#mobile-nav {

grid-area: mobile-nav;

background:

var(--flow-bg-secondary);

border-top:

1px solid var(--flow-border);

display: flex;

justify-content: space-around;

align-items: center;

}


/* PANELS */

.flow-panel {

background:

var(--flow-bg-panel);

border:

1px solid var(--flow-border);

border-radius: 12px;

padding: 16px;

margin-bottom: 16px;

}


/* GRID PANELS */

.flow-panel-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

gap: 16px;

}


/* BUTTONS */

.flow-btn {

background:

var(--flow-accent);

border: none;

padding:

10px 14px;

border-radius: 8px;

color: white;

cursor: pointer;

}


.flow-btn:hover {

opacity: 0.85;

}


/* STATUS COLORS */

.status-success {

color:

var(--flow-success);

}


.status-warning {

color:

var(--flow-warning);

}


.status-danger {

color:

var(--flow-danger);

}


/* TRANSITIONS */

* {

transition:

background 0.2s ease,

color 0.2s ease,

border 0.2s ease;

}


/* APPENDED MOBILE CONSOLIDATION BLOCK */

body[data-layout="mobile"] .flow-layout {display: flex;flex-direction: column;height: 100vh;}

body[data-layout="mobile"] #sidebar {display: none !important;}

body[data-layout="mobile"] #main-content {padding-top: 60px;padding-bottom: 70px;overflow-y: auto;}

body[data-layout="mobile"] #context-drawer {position: fixed;top: 60px;right: 0;width: 92%;height: calc(100% - 60px);}


/* ===============================
MOBILE OWNER CONSOLE FIX
=============================== */

@media (max-width: 768px) {

.flow-layout {

display: block !important;

height: auto !important;

}

#sidebar {

display: none !important;

}

#context-drawer {

position: fixed !important;

top: 60px !important;

right: 0 !important;

width: 95% !important;

height: calc(100% - 60px) !important;

transform: translateX(100%);

}

.drawer-open {

transform: translateX(0) !important;

}

#main-content {

width: 100% !important;

margin: 0 !important;

padding: 70px 12px 80px 12px !important;

}

#pipeline-container {

width: 100% !important;

overflow-x: auto !important;

}

.flow-panel-grid {

display: flex !important;

flex-direction: column !important;

gap: 12px !important;

}

}


/* SIDEBAR PANEL FIX */

.flow-sidebar-panel {

display:flex;

flex-direction:column;

gap:14px;

padding:18px;

}

.sidebar-title {

margin-bottom:6px;

font-size:16px;

font-weight:600;

}

.sidebar-btn {

width:100%;

text-align:left;

}