/* Shared design system loaded via shared.css */

:root {
    /* Dark Theme Palette */
    --bg-main: #121212;
    --bg-panel: #1e1e1e;
    --bg-card: #2d2d2d;
    --text-main: #e0e0e0;
    --text-muted: #9e9e9e;
    --border: #333333;
    
    --primary: #bb86fc;
    --primary-hover: #9965f4;
    --secondary: #03dac6;
    
    /* Pipeline Stages Colors */
    --if: #1e3a8a; /* Deep Blue */
    --id: #14532d; /* Deep Green */
    --ex: #7f1d1d; /* Deep Red */
    --mem: #581c87; /* Deep Purple */
    --wb: #7c2d12; /* Deep Orange */
    --stall: #4a4a4a; /* Gray for Bubble */
}

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

header {
    text-align: center;
    padding: 20px;
    background-color: var(--bg-panel);
    border-bottom: 1px solid var(--border);
}

header h1 {
    margin: 0;
    color: var(--primary);
}

header p {
    margin: 5px 0 0 0;
    color: var(--text-muted);
}

.container {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 20px;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.panel {
    background-color: var(--bg-panel);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

h2 {
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--secondary);
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

/* Controls & Inputs */
textarea {
    width: 100%;
    background-color: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border);
    padding: 10px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
}

select {
    width: 100%;
    padding: 8px;
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 10px;
}

.hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 5px;
}

.settings-group {
    margin: 15px 0;
}

.button-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

button {
    flex: 1;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary { background-color: var(--primary); color: #000; }
.btn-primary:hover { background-color: var(--primary-hover); }
.btn-step { background-color: var(--bg-card); color: var(--text-main); border: 1px solid var(--border); }
.btn-step:hover { background-color: #3d3d3d; }
.btn-auto { background-color: var(--secondary); color: #000; }

/* Stats Panel */
.stats-panel {
    background-color: var(--bg-card);
    padding: 15px;
    border-radius: 6px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

/* Horizontal Hardware Pipeline */
.hardware-pipeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    background-color: var(--bg-card);
    padding: 20px;
    border-radius: 8px;
}

.stage-block {
    flex: 1;
    background-color: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 6px;
    text-align: center;
    padding: 10px;
    position: relative;
    cursor: help;
    transition: transform 0.2s;
}

.stage-block:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

.stage-name {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.stage-block:nth-child(1) .stage-name { color: #60a5fa; } /* IF */
.stage-block:nth-child(3) .stage-name { color: #4ade80; } /* ID */
.stage-block:nth-child(5) .stage-name { color: #f87171; } /* EX */
.stage-block:nth-child(7) .stage-name { color: #c084fc; } /* MEM */
.stage-block:nth-child(9) .stage-name { color: #fb923c; } /* WB */

.stage-content {
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--text-main);
    min-height: 20px;
}

.arrow {
    color: var(--text-muted);
    font-size: 1.5rem;
    margin: 0 5px;
}

/* Space-Time Table */
.table-wrapper {
    overflow-x: auto;
    margin-bottom: 30px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    border: 1px solid var(--border);
    text-align: center;
    min-width: 40px;
}

th { background-color: var(--bg-card); }
td.inst-col { text-align: left; font-family: monospace; font-weight: bold; white-space: nowrap; }

.stage-IF { background-color: var(--if); color: #fff; }
.stage-ID { background-color: var(--id); color: #fff; }
.stage-EX { background-color: var(--ex); color: #fff; }
.stage-MEM { background-color: var(--mem); color: #fff; }
.stage-WB { background-color: var(--wb); color: #fff; }
.stage-STALL { background-color: var(--stall); color: #aaa; font-style: italic; }

.active-cycle { border: 2px solid var(--primary); }

/* Register File */
.register-file {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}

.register-box {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-align: center;
    padding: 10px;
    transition: background-color 0.3s;
}

.register-box.updated { background-color: var(--primary); color: #000; }
.register-box.read { border-color: var(--secondary); }

.reg-name { font-size: 0.8rem; color: var(--text-muted); }
.reg-val { font-family: monospace; font-size: 1.2rem; font-weight: bold; margin-top: 5px; }

/* Responsive */
@media (max-width: 900px) {
    .container { grid-template-columns: 1fr; }
}




/* Ensure the body allows absolute positioning */



/* ================================================================
   DESIGN SYSTEM OVERRIDE — Applied via shared.css variables
   These overrides unify all pages to the shared dark-lab aesthetic
   ================================================================ */

/* Reset old colors to use CSS variables from shared.css */
body {
  font-family: var(--font-sans) !important;
  background-color: var(--bg) !important;
  color: var(--text-primary) !important;
  padding-top: 72px !important;
}

h1, h2, h3 {
  font-family: var(--font-mono) !important;
}

h1 { color: var(--text-primary) !important; }
h2 { color: var(--cyan) !important; }

/* Panel backgrounds */
.controls-panel, .panel, .dashboard > *, .grid-container > *,
.info-panel, .visualizer-panel, aside, section.panel {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-panel) !important;
  color: var(--text-primary) !important;
}

.panel-header, header.panel-header {
  background: var(--panel-2) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px !important;
}

/* Inputs */
input[type="text"], input[type="number"], select, textarea {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-2) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-mono) !important;
  border-radius: var(--radius-sm) !important;
}

label {
  color: var(--text-secondary) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* Buttons */
button {
  font-family: var(--font-mono) !important;
  border-radius: var(--radius-sm) !important;
}

/* Canvas containers */
.canvas-container, .canvas-wrapper {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}

/* Metrics / data boxes */
.metrics-box, .data-box, .explanation-panel,
.instruction-box, .dynamic-explanation {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-secondary) !important;
  font-size: 0.85rem !important;
}

/* Highlights */
.highlight, .highlight-k { color: var(--amber) !important; }
span[style*="color: #89b4fa"], .text-blue { color: var(--cyan) !important; }

/* Subtitles */
.subtitle, .page-subtitle, p.subtitle {
  color: var(--text-secondary) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.82rem !important;
}

/* Fix dashboard flex → still works but adds top padding spacing */
.dashboard {
  padding-top: 8px;
}

/* ── SCROLL & HOME-BTN FIX ── */
body {
  padding-top: 72px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  font-family: var(--font-sans) !important;
  background: var(--bg) !important;
  color: var(--text-primary) !important;
}
.container {
  grid-template-columns: 320px 1fr !important;
  padding: 16px 20px !important;
}
h1 { color: var(--cyan) !important; font-family: var(--font-mono) !important; }
h2 { color: var(--cyan) !important; font-family: var(--font-mono) !important; }
.panel {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
}
header {
  background: var(--panel-2) !important;
  border-bottom: 1px solid var(--border) !important;
}
@media (max-width: 900px) {
  .container { grid-template-columns: 1fr !important; }
}