/* === Theme variables === */
:root {
  --bg: #ffffff;
  --text: #111111;
  --panel: #f6f6f6;
  --panel-strong: #ffffff;
  --border: #dddddd;
  --button-bg: #f0f0f0;
  --button-active-bg: #ffffff;
  --accent: #007bff;
}

body[data-theme="dark"] {
  --bg: #2b2b2b;          /* grey, not pure black */
  --text: #e6e6e6;
  --panel: #333333;       /* slightly darker panel */
  --panel-strong: #3a3a3a;
  --border: #444444;
  --button-bg: #3a3a3a;
  --button-active-bg: #2f2f2f;
  --accent: #66a3ff;
}

/* Apply theme vars */
body {
  background-color: var(--bg);
  color: var(--text);
}

#left-panel, #right-panel {
  background-color: var(--panel-strong);
  color: var(--text);
}

#left-panel {
  border-right: 1px solid var(--border);
}

#tab-nav {
  border-bottom: 1px solid var(--border);
}

#tab-nav button {
  background-color: var(--button-bg);
}

#tab-nav button.active {
  background-color: var(--button-active-bg);
  border-bottom-color: var(--accent);
}

/* Theme toggle small row */
#theme-toggle-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: var(--text);
}
#theme-toggle-wrap input[type="checkbox"] {
  margin-right: 6px;
}

/* === Right panel should be full height and scene fills it === */
#right-panel {
  width: 70%;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;            /* avoid double scrollbars */
  display: flex;
  flex-direction: column;
}

#right-panel .tab-content {
  display: none;
  flex: 1 1 auto;
  min-height: 0;               /* allow children to shrink properly */
  overflow: hidden;
}

#right-panel .tab-content.active {
  display: flex;
  flex-direction: column;
}

/* Ensure headings don't eat the height */
#right-panel .tab-content > h3 {
  margin-top: 0;
  margin-bottom: 8px;
  flex: 0 0 auto;
}

/* Scene / plots should expand */
#device-scene, #plot-3d, #torque-sphere {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;     /* override any inline height */
  width: 100%;
}

/* Lead labels overlay should fill device-scene */
#lead-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Basic styling for the NEGF web app */
body {
  margin: 0;
  font-family: sans-serif;
  background-color: var(--bg);
}

#container {
  display: flex;
  height: 100vh;
}

#left-panel {
  width: 30%;
  padding: 16px;
  box-sizing: border-box;
  border-right: 1px solid var(--border);
  overflow: hidden;
  background-color: var(--panel-strong);
}

#right-panel {
  width: 70%;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
}

#left-panel h2,
label {
  margin-right: 4px;
}

/* numeric inputs same width as NEGF */
input[type="number"] {
  width: 60px;
  margin-right: 8px;
}

input[type="text"],
select {
  padding: 2px 4px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background-color: var(--panel-strong);
  color: var(--text);
  font-size: 0.9rem;
}

button {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background-color: var(--button-bg);
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
}

button:hover {
  filter: brightness(1.05);
}

button:active {
  transform: translateY(1px);
}

#run-button {
  margin-top: 12px;
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#run-button:hover {
  background-color: #0056b3;
}

/* Left panel tab navigation */
#left-tab-nav {
  display: flex;
  border-bottom: 1px solid #ddd;
  margin-bottom: 8px;
}
#left-tab-nav button {
  padding: 6px 10px;
  border: none;
  border-bottom: 3px solid transparent;
  background-color: #f5f5f5;
  cursor: pointer;
  margin-right: 4px;
  font-size: 0.9rem;
}
#left-tab-nav button.active {
  border-bottom-color: #007bff;
  background-color: var(--panel-strong);
  font-weight: bold;
}
.left-tab-content {
  display: none;
}
.left-tab-content.active {
  display: block;
}

/* Styles for tab navigation and content in the right panel */
#tab-nav {
  display: flex;
  border-bottom: 1px solid #ccc;
  margin-bottom: 8px;
}

#tab-nav button {
  padding: 8px 12px;
  border: none;
  border-bottom: 3px solid transparent;
  background-color: #f0f0f0;
  cursor: pointer;
  margin-right: 4px;
  font-size: 0.9rem;
}

#tab-nav button.active {
  border-bottom-color: #007bff;
  background-color: var(--panel-strong);
  font-weight: bold;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Device scene and lead labels overlay */
#device-scene {
  position: relative;
}

#lead-labels {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

#lead-labels .lead-label {
  position: absolute;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 4px;
  border-radius: 3px;
  border: 1px solid #ccc;
  white-space: nowrap;
}

#status {
  margin-top: 8px;
  min-height: 1em;
  color: #d33;
}

/* Hide advanced lead controls by default; JS will reveal them on double-click */
label[for="leadwidth-x"], #leadwidth-x,
label[for="leadwidth-y"], #leadwidth-y,
label[for="leadwidth-z"], #leadwidth-z,
label[for="leadpos-x"],   #leadpos-x,
label[for="leadpos-y"],   #leadpos-y,
label[for="leadpos-z"],   #leadpos-z,
label[for="lead-length"], #lead-length {
  display: none;
}

/* NEGF multi-subplot layout */
.grid-plots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}
.grid-plots .subplot {
  height: 280px;
  width: 100%;
}

/* Make the entire left panel scroll within the viewport */
#left-panel{
  position: sticky;     /* keeps it pinned as the page scrolls */
  top: 0;
  max-height: 100vh;    /* bound the height so overflow can scroll */
  overflow-y: auto;     /* vertical scroll only */
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;   /* keep content clear of scrollbar */
}

/* If #left-panel sits inside a flex or grid container, allow it to shrink */
#left-panel { min-height: 0; }

/* (Common culprit) make the main layout give children a bounded height */
.main-layout, .app-root, .page, body, html {
  height: 100%;
  min-height: 0;
}

/* If your main column is a flex row, ensure children can scroll */
.main-layout { display: flex; min-height: 0; }

/* --- Collapsible subpanels --- */
.subpanel {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 10px 0;
  padding: 6px 10px 10px;
}
.subpanel > legend {
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  padding: 0 4px;
  margin-left: 2px;
}
.subpanel > legend::before {
  content: "▾";
  display: inline-block;
  width: 1em;
  margin-right: 2px;
  transform: translateY(-1px);
}
.subpanel.collapsed > legend::before {
  content: "▸";
}
.subpanel .subpanel-body {
  margin-top: 6px;
}
.subpanel.collapsed .subpanel-body {
  display: none;           /* hide the body when collapsed */
}

/* Plot toolbar (Hold/Clear) on the right panel tab strip */
#plot-toolbar {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
#plot-toolbar button {
  padding: 4px 8px;
  border: 1px solid var(--border);
  background: var(--button-bg);
  border-radius: 6px;
  cursor: pointer;
}
#plot-toolbar label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}

/* ===== Lighter 3D subpanels (override) ===== */

:root{
  --sp-bg-top:        #3e4650;
  --sp-bg-bottom:     #f6f9fc;   /* barely blue-tinted to read as "panel" */
  --sp-border:        #e6edf5;
  --sp-highlight:     rgba(255,255,255,.95);
  --sp-shadow:        rgba(17,24,39,.06);

  /* gentle per-panel variants (all very light) */
  --spA-top:#ffffff; --spA-bot:#f7fafc; --spA-border:#e5edf6; /* Hamiltonian */
  --spB-top:#ffffff; --spB-bot:#f8fbff; --spB-border:#e4ecf5; /* Device */
  --spC-top:#ffffff; --spC-bot:#f7faff; --spC-border:#e6eef7; /* External */
  --spD-top:#ffffff; --spD-bot:#f7fafc; --spD-border:#e6eef7; /* Compute */
}

@media (prefers-color-scheme: dark){
  .subpanel,
  .subpanel > legend{
    background: #e6edf5 !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.96) inset,
                0 1px 2px rgba(0,0,0,.04) !important;
    color: #111827 !important;
  }
}

/* Panel base (lighter gradient + softer shadow) */
.subpanel{
  background: #e6edf5 !important;          /* no gradient */
  border: 1px solid #e5e7eb !important;    /* hairline */
  box-shadow: 0 1px 0 rgba(255,255,255,.96) inset,
              0 1px 2px rgba(0,0,0,.03) !important; /* very subtle depth */
}

.subpanel--hamiltonian{ border-color:#e6eaf0 !important; }
.subpanel--device     { border-color:#e7ebf2 !important; }
.subpanel--external   { border-color:#e8edf4 !important; }
.subpanel--compute    { border-color:#e6ebf2 !important; }

.subpanel > legend{
  background: #e6edf5 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 0 rgba(255,255,255,.96) inset,
              0 4px 2px rgba(0,0,0,.03) !important;
  color: #111827; /* very dark gray text */
}

.subpanel > legend::before{
  content: "▾";
  display: inline-block;
  width: 1em;
  margin-right: 4px;
  margin-top: -4px;
  transform: translateY(-1px);
}
.subpanel.collapsed > legend::before{ content:"▸"; }

/* Body area */
.subpanel .subpanel-body{ margin-top: 6px; }
.subpanel.collapsed .subpanel-body{ display:none; }

/* Small hover/active affordances */
.subpanel > legend:hover{ filter: brightness(1.5); }
.subpanel > legend:active{ transform: translateY(1px); }

/* ============================
   Linear-response (bulk) tab
   additions – 3×3 σ grids etc.
   ============================ */

/* Subtabs inside the LR tab (σ(ω), σ(E; ω*), σ(k; μ, ω*)) */
#lr-subtab-nav {
  display: flex;
  border-bottom: 1px solid #ccc;
  margin: 4px 0 6px;
}

#lr-subtab-nav button {
  padding: 6px 10px;
  border: none;
  border-bottom: 3px solid transparent;
  background-color: #f0f0f0;
  cursor: pointer;
  margin-right: 4px;
  font-size: 0.85rem;
}

#lr-subtab-nav button.active {
  border-bottom-color: #007bff;
  background-color: var(--panel-strong);
  font-weight: bold;
}

/* LR subtab content (visibility toggled from JS) */
.lr-subtab-content {
  /* display: flex / none is set inline or via JS */
}

/* σ tensor 3×3 grid: match NEGF multi-subplot feel */
.tensor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(160px, 1fr));
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}

.tensor-cell {
  border: 1px solid var(--border);
  border-radius: 4px;
  background-color: var(--panel);
  min-height: 160px;
}

/* Let the LR tab flex nicely with controls + grids */
#tab-lr-optical {
  min-height: 0;
}
/* Legend for 3×3 tensor grids (single legend per grid) */
.tensor-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 0.8rem;
}

.tensor-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid transparent;
}

.tensor-legend-item:hover {
  border-color: var(--border);
}

.tensor-legend-swatch {
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background-color: currentColor;
}

/* Make each plot area look like a boxed figure */
.tensor-cell {
  border: 1px solid var(--border);
  border-radius: 4px;
  background-color: var(--panel);
  min-height: 160px;
  padding: 2px;
}
button:disabled,
button[disabled] {
  cursor: default;
  opacity: 0.6;
}

/* =========================================================
   Soft, consistent light theme + contrast fixes
   (append at the END of style.css)
   ========================================================= */

/* Default / light theme: match main MultiMaterialLab look */
body:not([data-theme]),
body[data-theme="light"] {
  /* page background similar to main site */
  background: #ececec;
  color: #111827;
  --bg: #ececec;
  --text: #111827;
  --panel: #f6f6f6;
  --panel-strong: #ffffff;
  --border: #d1d5db;
  --button-bg: #f3f4f6;
  --button-active-bg: #ffffff;
  --accent: #2563eb;
}

/* Main container: subtle card, not glowing */
body:not([data-theme]) #container,
body[data-theme="light"] #container {
  background: #f9fafb;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  border-radius: 12px;
}

/* Left / right panels: light neutral, slight border */
body:not([data-theme]) #left-panel,
body[data-theme="light"] #left-panel,
body:not([data-theme]) #right-panel,
body[data-theme="light"] #right-panel {
  background: #f9fafb;
  color: #111827;
  border-color: #d1d5db;
}

/* Tabs on left (Setup / Jobs) */
body:not([data-theme]) #left-tab-nav button,
body[data-theme="light"] #left-tab-nav button {
  background: #e5e7eb;
  color: #111827;
  box-shadow: none;
}

body:not([data-theme]) #left-tab-nav button.active,
body[data-theme="light"] #left-tab-nav button.active {
  background: #ffffff;
  border-bottom-color: #2563eb;
  color: #111827;
  box-shadow: inset 0 -2px 0 #2563eb;
}

/* Tabs on right (Device / Transmission / …) */
body:not([data-theme]) #tab-nav button,
body[data-theme="light"] #tab-nav button {
  background: #e5e7eb;
  color: #111827;
  box-shadow: none;
}

body:not([data-theme]) #tab-nav button.active,
body[data-theme="light"] #tab-nav button.active {
  background: #ffffff;
  border-bottom-color: #2563eb;
  color: #111827;
  box-shadow: inset 0 -2px 0 #2563eb;
}

/* === Subpanels (Hamiltonian / Device / External / Compute) === */
/* Base panel: light, minimal, readable */
body:not([data-theme]) .subpanel,
body[data-theme="light"] .subpanel {
  background: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  box-shadow: none !important;
  color: #111827 !important;
}

/* Subpanel legend (header) */
body:not([data-theme]) .subpanel > legend,
body[data-theme="light"] .subpanel > legend {
  background: transparent !important;
  color: #111827 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 4px;
}

/* Chevron stays, just darker text */
body:not([data-theme]) .subpanel > legend::before,
body[data-theme="light"] .subpanel > legend::before {
  color: #6b7280;
}

/* Subpanel body text is dark and readable */
body:not([data-theme]) .subpanel .subpanel-body,
body[data-theme="light"] .subpanel .subpanel-body {
  color: #111827;
}

/* Labels and form controls inside light panels */
body:not([data-theme]) label,
body[data-theme="light"] label {
  color: #111827;
}

body:not([data-theme]) input[type="text"],
body:not([data-theme]) input[type="number"],
body:not([data-theme]) input[type="password"],
body:not([data-theme]) select,
body[data-theme="light"] input[type="text"],
body[data-theme="light"] input[type="number"],
body[data-theme="light"] input[type="password"],
body[data-theme="light"] select {
  background: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

/* Primary buttons: subtle blue accent, no neon */
body:not([data-theme]) #run-button,
body:not([data-theme]) #btn-calc-layers,
body:not([data-theme]) #submit-job-button,
body:not([data-theme]) #export-geom,
body:not([data-theme]) #import-geom,
body[data-theme="light"] #run-button,
body[data-theme="light"] #btn-calc-layers,
body[data-theme="light"] #submit-job-button,
body[data-theme="light"] #export-geom,
body[data-theme="light"] #import-geom {
  background: #2563eb;
  color: #ffffff;
  border-radius: 999px;
  border: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
}

body:not([data-theme]) #run-button:hover,
body:not([data-theme]) #btn-calc-layers:hover,
body:not([data-theme]) #submit-job-button:hover,
body:not([data-theme]) #export-geom:hover,
body:not([data-theme]) #import-geom:hover,
body[data-theme="light"] #run-button:hover,
body[data-theme="light"] #btn-calc-layers:hover,
body[data-theme="light"] #submit-job-button:hover,
body[data-theme="light"] #export-geom:hover,
body[data-theme="light"] #import-geom:hover {
  background: #1d4ed8;
}

/* Plot toolbar buttons */
body:not([data-theme]) #plot-toolbar button,
body[data-theme="light"] #plot-toolbar button {
  background: #e5e7eb;
  color: #111827;
  border: 1px solid #d1d5db;
}
body:not([data-theme]) #plot-toolbar button:hover,
body[data-theme="light"] #plot-toolbar button:hover {
  background: #d1d5db;
}