/*
 * ri-common.css — Research Institute theme for simulation module pages
 *
 * Load this AFTER all module-specific CSS files so it can override
 * visual styles while still providing CSS variable definitions.
 *
 * Supports light (default) and dark themes via body[data-theme="dark"].
 */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@400;500;600;700&display=swap');

/* ════════════════════════════════════════════
   DESIGN TOKENS — Light (default)
   ════════════════════════════════════════════ */
:root {
  /* RI palette */
  --bg:         #fafaf8;
  --white:      #ffffff;
  --surface:    #f2f0ed;
  --border:     #ddd8d0;
  --text:       #1e293b;
  --muted:      #64748b;
  --dim:        #94a3b8;
  --acc:        #1d4ed8;
  --acc-l:      #3b82f6;
  --acc-dk:     #1e3a8a;
  --acc-2:      #b91c1c;
  --acc-3:      #0d9488;
  --acc-4:      #b45309;

  /* Typography */
  --serif:      'Lora', Georgia, serif;
  --sans:       'Inter', sans-serif;

  /* Shape */
  --radius:     3px;
  --radius-sm:  2px;

  /* Dimensions */
  --topbar-h:   34px;
  --nav-h:      52px;

  /* ── Compatibility aliases (used by existing module CSS) ── */
  --bg-primary:    var(--bg);
  --bg-secondary:  var(--surface);
  --bg-slide:      var(--white);
  --bg-card:       var(--surface);
  --accent-1:      var(--acc);
  --accent-2:      var(--acc-2);
  --accent-3:      var(--acc-3);
  --accent-4:      var(--acc-4);
  --text-primary:  var(--text);
  --text-secondary:var(--muted);
  --text-muted:    var(--dim);
}

/* ════════════════════════════════════════════
   DESIGN TOKENS — Dark theme
   ════════════════════════════════════════════ */
body[data-theme="dark"] {
  --bg:         #0f172a;
  --white:      #1e293b;
  --surface:    #162032;
  --border:     rgba(148,163,184,.15);
  --text:       #e2e8f0;
  --muted:      #94a3b8;
  --dim:        #64748b;
  --acc:        #3b82f6;
  --acc-l:      #60a5fa;
  --acc-2:      #f87171;
  --acc-3:      #2dd4bf;
  --acc-4:      #fbbf24;
}

/* ════════════════════════════════════════════
   BASE RESET
   ════════════════════════════════════════════ */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
html { scroll-behavior: smooth; font-size: 16px; }
html, body {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
}

/* ════════════════════════════════════════════
   HIDE OLD NAV
   ════════════════════════════════════════════ */
.nav-bar { display: none !important; }

/* ════════════════════════════════════════════
   RI TOPBAR  (dark navy institutional band)
   ════════════════════════════════════════════ */
.ri-topbar {
  background: var(--acc-dk);
  height: var(--topbar-h);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .7rem;
  color: rgba(255,255,255,.6);
  flex-shrink: 0;
}
.ri-topbar a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
  transition: color .15s;
}
.ri-topbar a:hover { color: #fff; }
.ri-tb-right { display: flex; gap: 16px; }

/* ════════════════════════════════════════════
   RI MAIN NAV
   ════════════════════════════════════════════ */
.ri-nav {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  height: var(--nav-h);
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  z-index: 200;
}

.ri-logo {
  font-family: var(--serif);
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.ri-logo:hover { color: var(--acc); }

.ri-breadcrumb {
  flex: 1;
  font-size: .78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.ri-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.ri-breadcrumb a:hover { color: var(--acc); }
.ri-bc-sep { color: var(--dim); }
.ri-bc-cur { color: var(--text); font-weight: 500; }

/* Theme toggle */
.ri-theme-btn {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.ri-theme-btn:hover {
  border-color: var(--acc);
  color: var(--acc);
  background: var(--bg);
}

/* ════════════════════════════════════════════
   VIEW MODE BAR  (diffraction module tabs)
   ════════════════════════════════════════════ */
.view-mode-bar {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
}
.view-tab {
  color: var(--muted) !important;
  background: none !important;
  border-radius: var(--radius) !important;
}
.view-tab:hover {
  color: var(--text) !important;
  background: var(--surface) !important;
}
.view-tab.active {
  color: var(--acc) !important;
  background: var(--surface) !important;
}

/* ════════════════════════════════════════════
   SUB-NAV BAR  (orientation / EM-waves group)
   ════════════════════════════════════════════ */
.sub-nav-bar {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
}
.sub-nav-item {
  color: var(--muted) !important;
  border-bottom: 2px solid transparent !important;
  transition: color .15s, border-color .15s;
}
.sub-nav-item:hover { color: var(--text) !important; }
.sub-nav-item.active {
  color: var(--acc) !important;
  border-bottom-color: var(--acc) !important;
}
.sub-nav-icon path,
.sub-nav-icon line,
.sub-nav-icon circle,
.sub-nav-icon polyline { stroke: currentColor !important; }

/* ════════════════════════════════════════════
   APP LAYOUT  (flex: control-panel + display-panel)
   ════════════════════════════════════════════ */
.app { background: var(--bg) !important; }

/* ── Display panel ── */
.display-panel {
  background: var(--bg) !important;
}
/* Remove the old purple radial gradient blob */
.display-panel::before { display: none !important; }

/* Display title (the h1 inside display-panel) */
.display-panel h1,
#displayTitle {
  font-family: var(--serif) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--text) !important;
  background-clip: initial !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  text-align: left !important;
  margin-bottom: 0 !important;
}

/* ── Canvas wrap ── */
.canvas-wrap {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
body[data-theme="dark"] .canvas-wrap {
  box-shadow: 0 2px 12px rgba(0,0,0,.3) !important;
}

/* ── Colorbar area ── */
.colorbar-wrap {
  background: var(--white) !important;
  border-top: 1px solid var(--border) !important;
}
.colorbar-label { color: var(--muted) !important; }
.canvas-label {
  color: var(--dim) !important;
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
}

/* ── Status bar ── */
.status-bar {
  background: var(--surface) !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--border) !important;
  font-family: var(--sans) !important;
  font-size: .69rem !important;
}

/* ── HKL labels ── */
.hkl-labels { color: var(--acc-4) !important; }
.hkl-top-labels { color: var(--dim) !important; }

/* ── Rules badge ── */
.rules-badge {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
.rules-tooltip {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
}
.rules-tooltip strong { color: var(--acc-3) !important; }

/* ── Control panel ── */
.control-panel {
  background: var(--white) !important;
  border-left: 1px solid var(--border) !important;
  border-right: none !important;
}
.control-panel::-webkit-scrollbar { width: 5px; }
.control-panel::-webkit-scrollbar-track { background: transparent; }
.control-panel::-webkit-scrollbar-thumb {
  background: var(--border) !important;
  border-radius: 3px;
}

/* ── Panel title ── */
.panel-title {
  font-family: var(--serif) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--white) !important;
  text-align: left !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  /* Remove gradient underline from old theme */
  border-top: none !important;
}

/* ── Sections ── */
.section {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
  background: transparent !important;
  gap: 0 !important;
  margin: 0 !important;
}
.section h3 {
  font-family: var(--sans) !important;
  font-size: .67rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--acc) !important;
  margin-bottom: 10px !important;
}

/* ── Slider groups ── */
.slider-group { margin-bottom: 9px !important; }
.slider-group:last-child { margin-bottom: 0 !important; }
.slider-group label {
  color: var(--muted) !important;
  font-size: .74rem !important;
}
.slider-group label .param-name { color: var(--text) !important; }
.slider-group label .val {
  color: var(--acc) !important;
  font-weight: 600 !important;
  font-size: .72rem !important;
}
.slider-group input[type="range"] { accent-color: var(--acc) !important; }

/* ── Select groups ── */
.select-group { margin-bottom: 9px !important; }
.select-group label {
  font-size: .72rem !important;
  color: var(--muted) !important;
}
.select-group select,
select.cmap-select {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  font-family: var(--sans) !important;
  font-size: .77rem !important;
}
.select-group select:focus,
select.cmap-select:focus {
  outline: none !important;
  border-color: var(--acc) !important;
}

/* ── Toggle group (checkboxes) ── */
.toggle-group {
  color: var(--muted) !important;
  font-size: .76rem !important;
}
.toggle-group input[type="checkbox"] { accent-color: var(--acc) !important; }
.toggle-group label { color: var(--muted) !important; cursor: pointer; }

/* ── Update button ── */
.update-btn {
  background: var(--acc) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius) !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: .8rem !important;
  letter-spacing: 0 !important;
  padding: 9px 18px !important;
  cursor: pointer !important;
  margin: 12px 16px 4px !important;
  width: calc(100% - 32px) !important;
  transition: background .15s !important;
}
.update-btn:hover { background: var(--acc-l) !important; }

/* ── Info page button ── */
.info-page-btn {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--muted) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color .15s, color .15s !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
.info-page-btn:hover { border-color: var(--acc) !important; color: var(--acc) !important; }

/* ── Info page overlay ── */
.info-page-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 300000 !important;
  display: none !important;
  overflow-y: auto !important;
  background: rgba(250,250,248,.97) !important;
  backdrop-filter: blur(3px) !important;
}
body[data-theme="dark"] .info-page-overlay {
  background: rgba(15,23,42,.97) !important;
}
.info-page-overlay.visible {
  display: block !important;
}
.info-page-content {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 64px 48px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--sans) !important;
  color: var(--text) !important;
  line-height: 1.75 !important;
}
.info-page-content h1 {
  font-family: var(--serif) !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--text) !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 0 16px !important;
  margin-bottom: 32px !important;
  text-align: left !important;
}
.info-page-content h2 { font-family: var(--serif) !important; font-size: 1.1rem !important; font-weight: 700 !important; color: var(--text) !important; margin: 32px 0 12px !important; }
.info-page-content h3 { font-size: .95rem !important; font-weight: 600 !important; color: var(--text) !important; margin: 20px 0 8px !important; }
.info-page-content p { font-size: .9rem !important; color: var(--muted) !important; line-height: 1.75 !important; margin-bottom: 14px !important; }
.info-page-content ul,.info-page-content ol { font-size: .88rem !important; color: var(--muted) !important; padding-left: 24px !important; margin-bottom: 14px !important; }
.info-page-content code { background: var(--surface) !important; border: 1px solid var(--border) !important; padding: 1px 5px !important; border-radius: 2px !important; font-size: .82rem !important; }
.info-page-content .math-block,
.info-page-content .eq { background: var(--surface) !important; border: 1px solid var(--border) !important; border-left: 3px solid var(--acc) !important; padding: 12px 18px !important; margin: 16px 0 !important; font-size: .88rem !important; display: block !important; color: var(--text) !important; }
.info-page-content a { color: var(--acc) !important; }
.info-page-close {
  position: fixed !important;
  top: 16px !important;
  right: 20px !important;
  z-index: 300001 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border) !important;
  background: var(--white) !important;
  color: var(--muted) !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.info-page-close:hover { color: var(--text) !important; background: var(--surface) !important; }

/* ── Loading screen ── */
.loading {
  background: var(--bg) !important;
  color: var(--muted) !important;
  font-family: var(--sans) !important;
  font-size: .88rem !important;
  letter-spacing: .04em !important;
}

/* ── Fullscreen button (overlaid on canvas) ── */
.fullscreen-btn {
  background: rgba(250,250,248,.9) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  border-radius: var(--radius) !important;
  font-family: var(--sans) !important;
  font-size: .66rem !important;
  backdrop-filter: blur(4px) !important;
}
body[data-theme="dark"] .fullscreen-btn {
  background: rgba(30,41,59,.9) !important;
}
.fullscreen-btn:hover {
  border-color: var(--acc) !important;
  color: var(--acc) !important;
}

/* Fullscreen exit and theme buttons */
.fs-exit-btn,
.fs-theme-btn {
  border: 1px solid var(--border) !important;
  font-family: var(--sans) !important;
  font-size: .74rem !important;
  border-radius: var(--radius) !important;
  backdrop-filter: blur(4px) !important;
}
.fs-exit-btn {
  background: rgba(250,250,248,.9) !important;
  color: var(--text) !important;
}
.fs-theme-btn {
  background: rgba(250,250,248,.9) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .fs-exit-btn,
body[data-theme="dark"] .fs-theme-btn {
  background: rgba(30,41,59,.9) !important;
}
.fs-exit-btn:hover { background: var(--acc-2) !important; color: #fff !important; border-color: transparent !important; }
.fs-theme-btn:hover { background: var(--acc) !important; color: #fff !important; border-color: transparent !important; }

/* Fullscreen overlay */
.fs-overlay { background: rgba(15,23,42,.92) !important; }
.fs-hint { color: rgba(255,255,255,.45) !important; }

/* True fullscreen elements */
#threeContainer:fullscreen,
.pf-canvas:fullscreen,
#detectorWrap:fullscreen {
  background: var(--bg) !important;
}

/* ════════════════════════════════════════════
   ORIENTATION-SPECIFIC OVERRIDES
   ════════════════════════════════════════════ */
.rod-display, .rod-axis-display {
  color: var(--muted) !important;
  font-size: .72rem !important;
}
#rotMatrixDisplay {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--muted) !important;
  font-size: .65rem !important;
}

/* ════════════════════════════════════════════
   MISC SHARED ELEMENTS
   ════════════════════════════════════════════ */
/* Input fields */
input[type="number"],
input[type="text"] {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  font-family: var(--sans) !important;
  font-size: .77rem !important;
}
input[type="number"]:focus,
input[type="text"]:focus {
  outline: none !important;
  border-color: var(--acc) !important;
}

/* Generic buttons inside control panel */
.control-panel button:not(.info-page-btn):not(.update-btn):not(.ri-theme-btn) {
  font-family: var(--sans) !important;
}