/* ============================================================
   Nexus AI Orchestrator – Shared Base Stylesheet
   Single source of truth for all GUI pages.
   Page-specific styles go in each page's own <style> block.
   ============================================================ */

/* === CSS Variables === */
:root {
    --primary: #14b8a6; --primary-dark: #0d9488; --primary-light: #2dd4bf;
    --primary-gradient: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    --secondary: #64748b; --accent: #06b6d4;
    --bg-primary: #0f172a; --bg-secondary: #1e293b;
    --bg-card: rgba(30, 41, 59, 0.8); --bg-hover: rgba(51, 65, 85, 0.5);
    --bg-light: rgba(20, 184, 166, 0.05);
    --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-muted: #64748b;
    --border: rgba(148, 163, 184, 0.1); --border-light: rgba(148, 163, 184, 0.2);
    --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6;
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-glow: 0 0 20px rgba(20,184,166,0.2);
    --sidebar-width: 280px; --main-padding: 1.5rem;
    --sidebar-bg: rgba(15, 23, 42, 0.97); --sidebar-border: rgba(148,163,184,0.08);
    --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
    --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
    --radius-sm:.375rem; --radius:.5rem; --radius-md:.75rem; --radius-lg:1rem;
    --radius-xl:1.25rem; --radius-2xl:1.5rem; --radius-full:9999px;
    --transition-fast:150ms ease-in-out; --transition:200ms ease-in-out; --transition-slow:300ms ease-in-out;
}

/* === Light Theme === */
[data-theme="light"] {
    --bg-primary:#f8fafc; --bg-secondary:#f1f5f9;
    --sidebar-bg:rgba(248,250,252,0.98); --sidebar-border:rgba(148,163,184,0.15);
    --bg-card:rgba(255,255,255,0.95); --bg-hover:rgba(226,232,240,0.8);
    --bg-light:rgba(99,102,241,0.05);
    --text-primary:#1e293b; --text-secondary:#64748b; --text-muted:#94a3b8;
    --border:rgba(148,163,184,0.2); --border-light:rgba(148,163,184,0.3);
}

/* === Reset === */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{font-size:16px;-webkit-text-size-adjust:100%;}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bg-primary);background-image:radial-gradient(ellipse at top left,rgba(20,184,166,0.07) 0%,transparent 50%),radial-gradient(ellipse at bottom right,rgba(6,182,212,0.05) 0%,transparent 50%);background-attachment:fixed;color:var(--text-primary);line-height:1.6;min-height:100vh;}
.app{display:flex;min-height:100vh;}

/* === Sidebar === */
.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;z-index:100;transition:transform var(--transition);backdrop-filter:blur(20px);}
@media(max-width:1024px){.sidebar{transform:translateX(-100%);}.sidebar.open{transform:translateX(0);}}
.sidebar-header{padding:var(--space-6);border-bottom:1px solid var(--border);flex-shrink:0;}
.brand{display:flex;align-items:center;gap:var(--space-4);text-decoration:none;color:inherit;}
.brand-icon{width:48px;height:48px;background:var(--primary-gradient);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:var(--shadow-glow);transition:var(--transition);flex-shrink:0;}
.brand:hover .brand-icon{transform:scale(1.05);}
.brand-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.brand-text h1,.brand-text p{margin:0;padding:0;text-align:left;}
.brand-text h1{font-size:1.25rem;font-weight:700;color:var(--text-primary);letter-spacing:-0.025em;line-height:1.2;}
.brand-text p{font-size:0.75rem;color:var(--text-secondary);font-weight:500;margin-top:0.125rem;line-height:1.2;}
.sidebar-nav{flex:1;padding:var(--space-4);overflow-y:auto;}
.nav-section{margin-bottom:var(--space-6);}
.nav-section-title{font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);padding:var(--space-2) var(--space-4);margin-bottom:var(--space-2);}
.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);color:var(--text-secondary);text-decoration:none;font-size:0.875rem;font-weight:500;transition:all var(--transition-fast);margin-bottom:var(--space-1);}
.nav-item:hover{background:var(--bg-hover);color:var(--text-primary);}
.nav-item.active{background:var(--primary-gradient);color:#fff;box-shadow:var(--shadow-sm);}
.nav-item-home{color:var(--primary-light) !important;}
.nav-item-home:hover{background:rgba(20,184,166,0.12) !important;}
.nav-item-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sidebar-footer{padding:var(--space-4);border-top:1px solid var(--border);}
.status-indicator{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);transition:var(--transition);}
.status-indicator:hover{border-color:var(--border-light);}
.status-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--error);position:relative;flex-shrink:0;}
.status-dot.connected{background:var(--success);}
.status-dot.connected::after{content:'';position:absolute;inset:-4px;border-radius:var(--radius-full);border:2px solid var(--success);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.5);opacity:0.5;}}
.status-text{font-size:0.875rem;font-weight:500;color:var(--text-secondary);}
/* === Sidebar Profile Widget === */
.sidebar-profile{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--bg-card);cursor:pointer;transition:all var(--transition-fast);user-select:none;}
.sidebar-profile:hover{border-color:var(--border-light);background:var(--bg-hover);}
.sidebar-profile.open{border-color:var(--primary);background:var(--bg-hover);}
.sidebar-profile-avatar{width:34px;height:34px;border-radius:var(--radius-full);background:var(--primary-gradient);display:flex;align-items:center;justify-content:center;font-size:0.8125rem;font-weight:700;color:#fff;flex-shrink:0;}
.sidebar-profile-info{flex:1;min-width:0;}
.sidebar-profile-name{font-size:0.875rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-profile-sub{font-size:0.6875rem;color:var(--text-muted);}
.sidebar-profile-chevron{width:14px;height:14px;color:var(--text-muted);flex-shrink:0;transition:transform var(--transition-fast);}
.sidebar-profile.open .sidebar-profile-chevron{transform:rotate(180deg);}
.sidebar-profile-menu{display:none;position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);z-index:200;overflow:hidden;padding:var(--space-2);}
.sidebar-profile-menu.open{display:block;}
.sidebar-profile-menu-item{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);font-size:0.875rem;font-weight:500;color:var(--text-secondary);text-decoration:none;background:none;border:none;cursor:pointer;transition:all var(--transition-fast);text-align:left;}
.sidebar-profile-menu-item:hover{background:var(--bg-hover);color:var(--text-primary);}
.sidebar-profile-menu-item--danger:hover{background:rgba(239,68,68,0.1);color:var(--error);}
.sidebar-profile-menu-divider{height:1px;background:var(--border);margin:var(--space-2) 0;}

/* === Main Content Area === */
.main{flex:1;margin-left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));padding:var(--main-padding);padding-right:calc(var(--main-padding) + 3rem);overflow-x:hidden;min-width:0;}
@media(max-width:1024px){.main{margin-left:0;width:100%;}}
@media(max-width:640px){.main{padding:var(--space-4);padding-right:var(--space-4);}}

/* === Header === */
.header{margin-bottom:var(--space-8);}
.header-content{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:var(--space-4);}
.header-title h2{font-size:1.875rem;font-weight:700;color:var(--text-primary);letter-spacing:-0.025em;margin-bottom:var(--space-1);}
.header-title p{color:var(--text-secondary);font-size:0.875rem;}
.header-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;}

/* === Buttons === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-lg);font-size:0.875rem;font-weight:600;border:none;cursor:pointer;transition:all var(--transition-fast);text-decoration:none;}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none !important;}
.btn-primary{background:var(--primary-gradient);color:#fff;box-shadow:var(--shadow);}
.btn-primary:hover{box-shadow:var(--shadow-md),var(--shadow-glow);}
.btn-secondary{background:var(--bg-hover);color:var(--text-secondary);border:1px solid var(--border);}
.btn-secondary:hover{background:rgba(20,184,166,0.1);color:var(--primary-light);border-color:var(--primary);}
.btn-danger{background:rgba(239,68,68,0.15);color:var(--error);border:1px solid rgba(239,68,68,0.2);}
.btn-danger:hover{background:rgba(239,68,68,0.25);}
.btn-sm{padding:var(--space-2) var(--space-3);font-size:0.8125rem;}
.btn-group{display:flex;gap:var(--space-3);flex-wrap:wrap;}

/* === Cards === */
.card{background:var(--bg-card);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-5);margin-bottom:var(--space-6);transition:all var(--transition);}
.card:hover{border-color:var(--primary);background:rgba(20,184,166,0.04);box-shadow:0 0 10px rgba(20,184,166,0.25),var(--shadow-md);}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-5);flex-wrap:wrap;gap:var(--space-3);}
.card-title{font-size:1.125rem;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:var(--space-2);}

/* === Badges === */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-full);font-size:0.75rem;font-weight:600;}
.badge-success{background:rgba(16,185,129,0.15);color:#34d399;border:1px solid rgba(16,185,129,0.2);}
.badge-warning{background:rgba(245,158,11,0.15);color:#fbbf24;border:1px solid rgba(245,158,11,0.2);}
.badge-error{background:rgba(239,68,68,0.15);color:#f87171;border:1px solid rgba(239,68,68,0.2);}
.badge-info{background:rgba(59,130,246,0.15);color:#60a5fa;border:1px solid rgba(59,130,246,0.2);}

/* === Form Elements === */
.form-group{margin-bottom:var(--space-5);}
.form-label{display:block;font-size:0.875rem;font-weight:500;color:var(--text-secondary);margin-bottom:var(--space-2);}
.form-input,.form-textarea,.form-select{width:100%;padding:var(--space-3) var(--space-4);background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-lg);font-size:0.9375rem;font-family:inherit;color:var(--text-primary);transition:all var(--transition-fast);}
.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(20,184,166,0.1);}
.form-textarea{resize:vertical;min-height:100px;}

/* === Menu / Theme Toggles === */
.menu-toggle{display:none;position:fixed;top:var(--space-4);left:var(--space-4);z-index:101;width:44px;height:44px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--text-primary);font-size:1.25rem;cursor:pointer;backdrop-filter:blur(10px);transition:var(--transition);}
.menu-toggle:hover{background:var(--bg-hover);border-color:var(--primary);}
@media(max-width:1024px){.menu-toggle{display:flex;align-items:center;justify-content:center;}}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:99;backdrop-filter:blur(4px);}
.overlay.active{display:block;}
.theme-toggle{position:fixed;top:1.5rem;right:1.5rem;z-index:1000;background:var(--bg-card);border:1px solid var(--border);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);backdrop-filter:blur(10px);font-size:1.25rem;}
.theme-toggle:hover{background:var(--bg-hover);border-color:var(--primary);transform:scale(1.1);}

/* === Scrollbar === */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:var(--bg-primary);border-radius:var(--radius-full);}
::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:var(--radius-full);}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted);}

/* === Animations === */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.animate-in{animation:fadeIn 0.35s ease forwards;}

/* === Action Tiles (index Quick Actions, platform tiles, etc.) === */
.action-tile{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);text-decoration:none;color:inherit;transition:all var(--transition-fast);cursor:pointer;}
.action-tile:hover{border-color:var(--primary);background:var(--bg-light);box-shadow:0 0 10px rgba(20,184,166,0.25),var(--shadow-md);}
.action-tile-icon{width:44px;height:44px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:var(--space-1);}
.action-tile-icon.teal{background:rgba(20,184,166,0.15);color:var(--primary-light);}
.action-tile-icon.blue{background:rgba(59,130,246,0.15);color:#60a5fa;}
.action-tile-icon.purple{background:rgba(139,92,246,0.15);color:#a78bfa;}
.action-tile-icon.green{background:rgba(16,185,129,0.15);color:#34d399;}
.action-tile-icon.amber{background:rgba(245,158,11,0.15);color:#fbbf24;}
.action-tile-icon.red{background:rgba(239,68,68,0.15);color:#f87171;}
.action-tile h3{font-size:0.9375rem;font-weight:600;color:var(--text-primary);margin:0;}
.action-tile p{font-size:0.8125rem;color:var(--text-secondary);margin:0;line-height:1.5;}

/* === Stat Cards (top-of-page stat tiles) === */
.stat-card{background:var(--bg-card);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-5);transition:all var(--transition);}
.stat-card:hover{border-color:var(--primary);background:rgba(20,184,166,0.04);box-shadow:0 0 10px rgba(20,184,166,0.25),var(--shadow-md);}
.stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3);}
.stat-icon{width:40px;height:40px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.125rem;}
.stat-icon.teal{background:rgba(20,184,166,0.15);color:var(--primary-light);}
.stat-icon.blue{background:rgba(59,130,246,0.15);color:#60a5fa;}
.stat-icon.green{background:rgba(16,185,129,0.15);color:#34d399;}
.stat-icon.amber{background:rgba(245,158,11,0.15);color:#fbbf24;}
.stat-icon.error{background:rgba(239,68,68,0.15);color:#f87171;}
.stat-label{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);}
.stat-value{font-size:1.875rem;font-weight:700;color:var(--text-primary);letter-spacing:-0.025em;margin-bottom:var(--space-1);}
.stat-sub{font-size:0.75rem;color:var(--text-muted);}

/* === Utility === */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);}
@media(max-width:900px){.two-col{grid-template-columns:1fr;}}
.empty{text-align:center;padding:var(--space-8) var(--space-4);color:var(--text-muted);font-size:0.875rem;}