/* ==============================================
   DIS — Design System
   Academic • Professional • Modern
   ============================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    --bg-primary: #0B1426;
    --bg-secondary: #101D35;
    --bg-tertiary: #162040;
    --bg-panel: #1A2545;
    --bg-hover: #1E2D52;
    --bg-active: #243560;
    --bg-input: #0D1830;
    --border-color: #2A3A5C;
    --border-light: #1E2D52;
    --text-primary: #E8ECF4;
    --text-secondary: #9AA5BD;
    --text-muted: #6B7A99;
    --accent-gold: #C9A84C;
    --accent-gold-dim: rgba(201,168,76,0.15);
    --accent-teal: #2EC4B6;
    --accent-teal-dim: rgba(46,196,182,0.12);
    --accent-blue: #4A90D9;
    --accent-red: #E74C5E;
    --accent-green: #34C77B;
    --accent-purple: #9B6DFF;
    --accent-orange: #F5A623;
    --font-sans: 'IBM Plex Sans', -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Fira Code', monospace;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
    --transition: 0.2s ease;
    --sidebar-w: 220px;
    --toolbar-h: 48px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; }
body { font-family:var(--font-sans); background:var(--bg-primary); color:var(--text-primary); line-height:1.5; overflow:hidden; height:100vh; -webkit-font-smoothing:antialiased; }
a { color:var(--accent-teal); text-decoration:none; }
a:hover { text-decoration:underline; }
button { cursor:pointer; border:none; background:none; font-family:inherit; color:inherit; }
input,select,textarea { font-family:inherit; font-size:inherit; color:var(--text-primary); background:var(--bg-input); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:6px 10px; outline:none; transition:border var(--transition); }
input:focus,select:focus,textarea:focus { border-color:var(--accent-teal); }
/* Dark-themed native dropdown options */
select option { background:#1A2545; color:#E8ECF4; padding:6px 10px; }
select option:checked { background:#2EC4B6; color:#fff; }
select option:hover { background:#1E2D52; }
select optgroup { background:#101D35; color:#C9A84C; font-weight:600; font-style:normal; padding:4px 0; }
select { cursor:pointer; }
/* Checkbox labels used in indicator panels */
.checkbox-label { display:flex; align-items:center; gap:6px; cursor:pointer; color:var(--text-secondary); font-size:0.78rem; padding:3px 0; }
.checkbox-label input[type="checkbox"] { accent-color:var(--accent-teal); width:14px; height:14px; cursor:pointer; }
.checkbox-label:hover { color:var(--text-primary); }
/* Control labels and groups */
.control-label { display:block; font-size:0.78rem; font-weight:600; color:var(--text-secondary); margin-bottom:6px; }
.control-group { margin-bottom:12px; }
/* VarMgr select dropdown fix */
.varmgr-select { background:var(--bg-input); color:var(--text-primary); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:4px 8px; font-size:0.78rem; min-width:120px; }
.varmgr-select option { background:#1A2340; color:#E4E8F0; padding:6px 10px; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg-secondary); }
::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

/* ── LANDING PAGE ── */
.landing-page { height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(160deg, #060D1A 0%, #0B1426 40%, #12203E 100%); position:relative; overflow:hidden; }
.landing-page::before { content:''; position:absolute; width:600px; height:600px; background:radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%); top:-200px; right:-100px; }
.landing-page::after { content:''; position:absolute; width:500px; height:500px; background:radial-gradient(circle, rgba(46,196,182,0.05) 0%, transparent 70%); bottom:-150px; left:-100px; }
.landing-logo { font-family:var(--font-sans); font-size:4rem; font-weight:700; letter-spacing:0.15em; color:var(--text-primary); margin-bottom:0.5rem; position:relative; z-index:1; }
.landing-logo span { color:var(--accent-gold); }
.landing-subtitle { font-size:1rem; color:var(--text-muted); letter-spacing:0.3em; text-transform:uppercase; margin-bottom:3rem; position:relative; z-index:1; }
.landing-actions { display:flex; gap:1rem; position:relative; z-index:1; }
.btn-primary { background:linear-gradient(135deg, var(--accent-gold) 0%, #D4B65A 100%); color:#0B1426; padding:10px 32px; border-radius:var(--radius-md); font-weight:600; font-size:0.95rem; transition:all var(--transition); box-shadow:0 2px 12px rgba(201,168,76,0.3); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 4px 20px rgba(201,168,76,0.45); }
.btn-secondary { background:transparent; color:var(--text-secondary); padding:10px 32px; border-radius:var(--radius-md); font-weight:500; font-size:0.95rem; border:1px solid var(--border-color); transition:all var(--transition); }
.btn-secondary:hover { border-color:var(--accent-teal); color:var(--accent-teal); }
.btn-sm { padding:5px 14px; font-size:0.8rem; }
.btn-icon { display:inline-flex; align-items:center; gap:6px; }
.btn-danger { background:rgba(231,76,94,0.15); color:var(--accent-red); border:1px solid rgba(231,76,94,0.3); }
.btn-danger:hover { background:rgba(231,76,94,0.25); }
.btn-success { background:rgba(52,199,123,0.15); color:var(--accent-green); border:1px solid rgba(52,199,123,0.3); }
.btn-success:hover { background:rgba(52,199,123,0.25); }

/* Landing unlock modal */
.unlock-overlay { position:fixed; inset:0; background:rgba(6,13,26,0.85); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:100; }
.unlock-card { background:var(--bg-panel); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:2.5rem; width:380px; text-align:center; box-shadow:var(--shadow-lg); }
.unlock-card h2 { font-size:1.5rem; margin-bottom:0.5rem; }
.unlock-card p { color:var(--text-muted); font-size:0.85rem; margin-bottom:1.5rem; }
.unlock-card input { width:100%; padding:10px 14px; margin-bottom:1rem; text-align:center; font-size:1rem; letter-spacing:0.1em; }
.unlock-card .btn-primary { width:100%; }
.unlock-error { color:var(--accent-red); font-size:0.8rem; margin-bottom:0.75rem; }

/* Landing features grid */
.landing-features { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; max-width:800px; margin-top:3rem; position:relative; z-index:1; }
.landing-feature { text-align:center; padding:1.5rem 1rem; }
.landing-feature .feat-icon { font-size:1.5rem; margin-bottom:0.5rem; }
.landing-feature h4 { font-size:0.85rem; color:var(--text-primary); margin-bottom:0.3rem; }
.landing-feature p { font-size:0.75rem; color:var(--text-muted); }

/* ── WORKSPACE LAYOUT ── */
.workspace { display:grid; grid-template-columns:var(--sidebar-w) 1fr; grid-template-rows:var(--toolbar-h) 1fr; height:100vh; width:100vw; }

/* Toolbar */
.toolbar { grid-column:1/-1; background:var(--bg-secondary); border-bottom:1px solid var(--border-color); display:flex; align-items:center; padding:0 16px; gap:8px; z-index:10; }
.toolbar-brand { font-weight:700; font-size:1.1rem; margin-right:auto; display:flex; align-items:center; color:#fff; }
.toolbar-brand span { color:var(--accent-gold); }
.toolbar-group { display:flex; align-items:center; gap:4px; padding:0 8px; border-left:1px solid var(--border-color); height:60%; }
.toolbar-btn { padding:5px 10px; border-radius:var(--radius-sm); font-size:0.8rem; color:var(--text-secondary); transition:all var(--transition); display:flex; align-items:center; gap:5px; }
.toolbar-btn:hover { background:var(--bg-hover); color:var(--text-primary); }
.toolbar-btn.active { background:var(--accent-teal-dim); color:var(--accent-teal); }
.lang-toggle { padding:3px 8px; border-radius:var(--radius-sm); font-size:0.75rem; font-weight:600; border:1px solid var(--border-color); cursor:pointer; transition:all var(--transition); }
.lang-toggle:hover { border-color:var(--accent-gold); color:var(--accent-gold); }

/* Sidebar */
.sidebar { background:var(--bg-secondary); border-right:1px solid var(--border-color); overflow-y:auto; padding:8px 0; }
.sidebar-section { padding:4px 0; }
.sidebar-label { padding:6px 16px; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.15em; color:var(--text-muted); font-weight:600; }
.sidebar-item { display:flex; align-items:center; gap:8px; padding:8px 16px; font-size:0.85rem; color:var(--text-secondary); cursor:pointer; transition:all var(--transition); border-left:2px solid transparent; }
.sidebar-item:hover { background:var(--bg-hover); color:var(--text-primary); }
.sidebar-item.active { background:var(--bg-active); color:var(--accent-teal); border-left-color:var(--accent-teal); }
.sidebar-item .si-icon { font-size:1rem; width:20px; text-align:center; }
.sidebar-item .si-badge { margin-left:auto; font-size:0.65rem; background:var(--accent-gold-dim); color:var(--accent-gold); padding:1px 6px; border-radius:8px; font-weight:600; }
.sidebar-divider { height:1px; background:var(--border-color); margin:6px 16px; }

/* Main content area */
.main-area { display:flex; flex-direction:column; overflow:hidden; background:var(--bg-primary); }
.main-content { flex:1; overflow:auto; padding:16px; min-height:0; }
.main-console { height:180px; min-height:80px; border-top:1px solid var(--border-color); background:var(--bg-secondary); display:flex; flex-direction:column; }

/* Output Panel — now inline */
.inline-results { background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:var(--radius-md); margin-top:20px; overflow:hidden; border-top:2px solid var(--accent-gold); }
.inline-results-header { background:var(--bg-tertiary); border-bottom:1px solid var(--border-color); }
.output-tabs { display:flex; flex-shrink:0; }
.output-tab { padding:8px 16px; font-size:0.8rem; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; transition:all var(--transition); }
.output-tab:hover { color:var(--text-secondary); }
.output-tab.active { color:var(--accent-gold); border-bottom-color:var(--accent-gold); }
.output-content { padding:12px; }
.output-section { display:none; }
.output-section.active { display:block; }

/* ── DATA GRID ── */
.data-grid-wrapper { width:100%; height:100%; overflow:auto; }
.data-grid { width:100%; border-collapse:collapse; font-size:0.8rem; font-family:var(--font-mono); }
.data-grid th { position:sticky; top:0; background:var(--bg-tertiary); color:var(--accent-gold); font-weight:500; padding:6px 12px; text-align:left; border-bottom:2px solid var(--border-color); white-space:nowrap; z-index:2; cursor:pointer; }
.data-grid th:hover { background:var(--bg-hover); }
.data-grid th .col-type { font-size:0.65rem; color:var(--text-muted); font-weight:400; display:block; }
.data-grid td { padding:4px 12px; border-bottom:1px solid var(--border-light); white-space:nowrap; max-width:200px; overflow:hidden; text-overflow:ellipsis; }
.data-grid tr:hover td { background:var(--bg-hover); }
.data-grid .row-num { color:var(--text-muted); text-align:right; padding-right:16px; width:50px; border-right:1px solid var(--border-color); position:sticky; left:0; background:var(--bg-secondary); }
.data-grid td.numeric { color:var(--accent-teal); text-align:right; }
.data-grid td.missing { color:var(--accent-red); font-style:italic; }

/* ── CONSOLE ── */
.console-header { display:flex; align-items:center; padding:4px 12px; background:var(--bg-tertiary); border-bottom:1px solid var(--border-light); flex-shrink:0; }
.console-header span { font-size:0.75rem; color:var(--text-muted); font-weight:500; }
.console-body { flex:1; overflow-y:auto; padding:8px 12px; font-family:var(--font-mono); font-size:0.8rem; }
.console-line { padding:2px 0; display:flex; gap:8px; }
.console-line .prompt { color:var(--accent-gold); flex-shrink:0; }
.console-line .cmd { color:var(--accent-teal); }
.console-line .result { color:var(--text-secondary); }
.console-line .error { color:var(--accent-red); }
.console-input-row { display:flex; align-items:center; padding:4px 12px; background:var(--bg-tertiary); border-top:1px solid var(--border-light); flex-shrink:0; gap:8px; }
.console-input-row .prompt { color:var(--accent-gold); font-family:var(--font-mono); font-size:0.8rem; }
.console-input-row input { flex:1; background:transparent; border:none; font-family:var(--font-mono); font-size:0.8rem; color:var(--text-primary); outline:none; }

/* ── MODULE PANELS ── */
.module-panel { display:none; }
.module-panel.active { display:flex; flex-direction:column; min-height:0; height:100%; }
.module-header { padding:12px 16px; border-bottom:1px solid var(--border-color); flex-shrink:0; }
.module-header h3 { font-size:1rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.module-header p { font-size:0.8rem; color:var(--text-muted); margin-top:4px; }
.module-body { flex:1; overflow:auto; padding:16px; min-height:0; }

/* ── IMPORT PANEL ── */
.import-zone { border:2px dashed var(--border-color); border-radius:var(--radius-lg); padding:3rem 2rem; text-align:center; transition:all var(--transition); cursor:pointer; margin-bottom:1rem; }
.import-zone:hover, .import-zone.dragover { border-color:var(--accent-teal); background:var(--accent-teal-dim); }
.import-zone .iz-icon { font-size:2.5rem; margin-bottom:0.75rem; }
.import-zone h4 { font-size:1rem; margin-bottom:0.3rem; }
.import-zone p { font-size:0.8rem; color:var(--text-muted); }
.demo-data-section { margin-top:1.5rem; }
.demo-data-section h4 { font-size:0.85rem; color:var(--text-secondary); margin-bottom:0.75rem; display:flex; align-items:center; gap:6px; }
.demo-card { background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:12px 16px; cursor:pointer; transition:all var(--transition); margin-bottom:0.5rem; }
.demo-card:hover { border-color:var(--accent-gold); background:var(--bg-hover); }
.demo-card h5 { font-size:0.85rem; color:var(--text-primary); margin-bottom:2px; }
.demo-card p { font-size:0.75rem; color:var(--text-muted); }

/* ── CONTROLS / FORMS ── */
.control-group { margin-bottom:1rem; }
.control-label { display:block; font-size:0.75rem; color:var(--text-secondary); margin-bottom:4px; font-weight:500; text-transform:uppercase; letter-spacing:0.05em; }
.control-row { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.control-row .control-group { margin-bottom:0; flex:1; min-width:120px; }
.control-row select, .control-row input { width:100%; }
.control-actions { display:flex; gap:8px; margin-top:1rem; flex-wrap:wrap; }
.checkbox-label { display:flex; align-items:center; gap:6px; font-size:0.8rem; color:var(--text-secondary); cursor:pointer; }
.checkbox-label input[type="checkbox"] { width:auto; accent-color:var(--accent-teal); }
.multi-select { display:flex; flex-wrap:wrap; gap:4px; max-height:150px; overflow:auto; padding:8px; background:var(--bg-input); border:1px solid var(--border-color); border-radius:var(--radius-sm); }
.multi-select .ms-chip { padding:3px 10px; font-size:0.75rem; border-radius:12px; cursor:pointer; transition:all var(--transition); border:1px solid var(--border-color); color:var(--text-secondary); }
.multi-select .ms-chip:hover { border-color:var(--accent-teal); color:var(--accent-teal); }
.multi-select .ms-chip.selected { background:var(--accent-teal-dim); border-color:var(--accent-teal); color:var(--accent-teal); }

/* ── RESULTS TABLES ── */
.results-table { width:100%; border-collapse:collapse; font-size:0.8rem; margin-bottom:1rem; }
.results-table th { background:var(--bg-tertiary); color:var(--accent-gold); font-weight:500; padding:8px 12px; text-align:left; border-bottom:2px solid var(--border-color); }
.results-table td { padding:6px 12px; border-bottom:1px solid var(--border-light); }
.results-table tr:hover td { background:var(--bg-hover); }
.results-table .val { font-family:var(--font-mono); color:var(--accent-teal); text-align:right; }
.results-table .interp { color:var(--text-secondary); font-size:0.78rem; line-height:1.4; max-width:350px; }

.interp-card { background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:10px 14px; margin-bottom:8px; border-left:3px solid var(--accent-gold); }
.interp-card h5 { font-size:0.8rem; color:var(--accent-gold); margin-bottom:4px; }
.interp-card p { font-size:0.78rem; color:var(--text-secondary); line-height:1.5; }

/* Correlation heatmap */
.corr-matrix-wrapper { overflow:auto; }
.corr-matrix { border-collapse:collapse; font-family:var(--font-mono); font-size:0.75rem; }
.corr-matrix th { padding:6px 10px; background:var(--bg-tertiary); color:var(--accent-gold); font-weight:500; white-space:nowrap; }
.corr-matrix td { padding:6px 10px; text-align:center; font-weight:500; border:1px solid var(--bg-primary); min-width:60px; transition:transform var(--transition); }
.corr-matrix td:hover { transform:scale(1.1); z-index:1; position:relative; }

/* Category badges */
.cat-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:0.7rem; font-weight:600; }
.cat-badge.very-strong-pos { background:rgba(52,199,123,0.2); color:#34C77B; }
.cat-badge.strong-pos { background:rgba(52,199,123,0.12); color:#5DD99A; }
.cat-badge.moderate-pos { background:rgba(245,166,35,0.12); color:#F5A623; }
.cat-badge.weak { background:rgba(107,122,153,0.15); color:#9AA5BD; }
.cat-badge.moderate-neg { background:rgba(245,166,35,0.12); color:#F5A623; }
.cat-badge.strong-neg { background:rgba(231,76,94,0.12); color:#E74C5E; }
.cat-badge.very-strong-neg { background:rgba(231,76,94,0.2); color:#E74C5E; }

/* ── CHART AREA ── */
.chart-container { position:relative; background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:16px; margin-bottom:1rem; }
.chart-container canvas { width:100% !important; max-height:400px; }
.chart-toolbar { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }

/* ── TOAST ── */
.toast-container { position:fixed; bottom:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast { padding:10px 20px; border-radius:var(--radius-md); font-size:0.85rem; color:#fff; box-shadow:var(--shadow-md); animation:toastIn 0.3s ease; display:flex; align-items:center; gap:8px; }
.toast.success { background:linear-gradient(135deg, #1a5c3a, #237a4d); }
.toast.error { background:linear-gradient(135deg, #5c1a24, #7a2333); }
.toast.info { background:linear-gradient(135deg, #1a3a5c, #234d7a); }
@keyframes toastIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* ── EMPTY STATE ── */
.empty-state { text-align:center; padding:3rem 2rem; color:var(--text-muted); }
.empty-state .es-icon { font-size:3rem; margin-bottom:1rem; opacity:0.4; }
.empty-state h4 { color:var(--text-secondary); margin-bottom:0.5rem; }
.empty-state p { font-size:0.85rem; }

/* ── LOADING ── */
.loading-spinner { display:inline-block; width:20px; height:20px; border:2px solid var(--border-color); border-top-color:var(--accent-teal); border-radius:50%; animation:spin 0.6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── RESPONSIVE ── */
@media (max-width:1200px) {
    :root { --output-w:340px; }
}
@media (max-width:1024px) {
    .workspace { grid-template-columns:var(--sidebar-w) 1fr; }
}
@media (max-width:768px) {
    .workspace { grid-template-columns:1fr; }
    .sidebar { display:none; }
    .sidebar.mobile-open { display:block; position:fixed; left:0; top:var(--toolbar-h); bottom:0; width:260px; z-index:20; box-shadow:var(--shadow-lg); }
    .landing-features { grid-template-columns:1fr; max-width:300px; }
}