/* ******************************************************************************
LAST EDIT September 18, 2026 (HVAC Lens: drop [style*=] overlay, token diagnostic panels)
stylesdark.css — Dark mode overlay for HVAC Lens

Load AFTER styles.css:
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="stylesdark.css">

Activate by adding class "dark" to <html>:
  <html lang="en" class="dark">

Optional auto mode (respects OS preference when no manual choice stored):
  <html lang="en" class="dark-auto">

Toggle example:
  document.documentElement.classList.toggle('dark');
*********************************************************************************** */

/* ==========================================================================
   1. Dark palette — CSS custom properties
   ========================================================================== */
html.dark {
  --primary-blue: #60a5fa;
  --header-bg: #1e3a6e;
  --header-grad-end: #1d4ed8;
  --accent-gold: #e9b24c;
  --dark-blue: #0d1520;
  --light-bg: #0f1419;
  --text: #e8edf4;
  --text-light: #9aa8bc;
  --surface: #1a2332;
  --white: var(--surface);
  --surface-raised: #243044;
  --surface-hover: #2a3a50;
  --border: #2d3f56;
  --border-strong: #3a5070;
  --input-bg: #141c28;
  --success: #3dd68c;
  --success-bg: #052e1a;
  --success-border: #3dd68c;
  --success-text: #6ee7b7;
  --danger: #f87171;
  --danger-bg: #3f1515;
  --warning-bg: #2a2416;
  --warning-border: #b8860b;
  --warning-text: #f0d78c;
  --info-bg: #152238;
  --info-border: #3a5a8a;
  --shadow: rgba(0, 0, 0, 0.45);
  --cta-free: #2dd4bf;
  --cta-free-hover: #5eead4;
  --cta-free-focus: #99f6e4;
  --card-shadow: none;
  --focus-ring: #93c5fd;
  color-scheme: dark;
}

/* Auto dark when OS prefers dark and dark-auto is set (no manual override) */
@media (prefers-color-scheme: dark) {
  html.dark-auto:not(.dark):not(.light) {
    --primary-blue: #60a5fa;
    --header-bg: #1e3a6e;
    --header-grad-end: #1d4ed8;
    --accent-gold: #e9b24c;
    --dark-blue: #0d1520;
    --light-bg: #0f1419;
    --text: #e8edf4;
    --text-light: #9aa8bc;
    --surface: #1a2332;
    --white: var(--surface);
    --surface-raised: #243044;
    --surface-hover: #2a3a50;
    --border: #2d3f56;
    --border-strong: #3a5070;
    --input-bg: #141c28;
    --success: #3dd68c;
    --success-bg: #052e1a;
    --success-border: #3dd68c;
    --success-text: #6ee7b7;
    --danger: #f87171;
    --danger-bg: #3f1515;
    --warning-bg: #2a2416;
    --warning-border: #b8860b;
    --warning-text: #f0d78c;
    --info-bg: #152238;
    --info-border: #3a5a8a;
    --shadow: rgba(0, 0, 0, 0.45);
    --cta-free: #2dd4bf;
    --cta-free-hover: #5eead4;
    --cta-free-focus: #99f6e4;
    --card-shadow: none;
    --focus-ring: #93c5fd;
    color-scheme: dark;
  }

  html.dark-auto:not(.dark):not(.light) .lp-btn,
  html.dark-auto:not(.dark):not(.light) .pwa-get-btn,
  html.dark-auto:not(.dark):not(.light) .acquire-btn-free {
    background: linear-gradient(165deg, #60a5fa 0%, #1d4ed8 48%, #1e3a6e 100%);
    color: #f8fbff;
    border: 1px solid #93c5fd;
    box-shadow: 0 8px 18px rgba(13, 21, 32, 0.45);
  }

  html.dark-auto:not(.dark):not(.light) .lp-btn:hover,
  html.dark-auto:not(.dark):not(.light) .pwa-get-btn:hover,
  html.dark-auto:not(.dark):not(.light) .acquire-btn-free:hover:not(:disabled) {
    background: linear-gradient(165deg, #93c5fd 0%, #3b82f6 46%, #1d4ed8 100%);
    color: #0d1520;
    box-shadow: 0 10px 22px rgba(29, 78, 216, 0.4);
  }

  html.dark-auto:not(.dark):not(.light) .lp-btn-outline {
    background: transparent;
    border-color: #60a5fa;
    color: #93c5fd;
  }

  html.dark-auto:not(.dark):not(.light) .lp-btn-outline:hover {
    background: #1e3a6e;
    border-color: #93c5fd;
    color: #f8fbff;
  }
}

html.dark body {
  background-color: var(--light-bg);
  color: var(--text);
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark p {
  color: var(--text);
}

html.dark p.label,
html.dark p.labelbk,
html.dark small,
html.dark .subtitle,
html.dark .last-updated,
html.dark .note,
html.dark .unit-helper {
  color: var(--text-light);
}

html.dark p.labelbk {
  color: var(--text);
}

/* ==========================================================================
   3. Header & navigation
   ========================================================================== */
html.dark header {
  background: linear-gradient(135deg, var(--header-bg), var(--header-grad-end));
  box-shadow: 0 2px 12px var(--shadow);
}

html.dark .tagline {
  color: #b8cff5;
}

html.dark .nav-menu {
  background-color: var(--header-bg);
}

html.dark .nav-menu a:hover {
  background-color: #2a4a7a;
}

@media (min-width: 768px) {
  html.dark .nav-menu a:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
}

html.dark .version-line,
html.dark .bug-link {
  color: #8ab4f8 !important;
}

/* ==========================================================================
   4. Cards, grids, outputs
   ========================================================================== */
html.dark .output {
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: 0 6px 20px var(--shadow);
}

html.dark .content-box,
html.dark .login-box,
html.dark .cta-section {
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: 0 6px 20px var(--shadow);
}

html.dark .content-box h1,
html.dark .login-box h1 {
  color: var(--primary-blue);
}

/* ==========================================================================
   5. Forms & inputs
   ========================================================================== */
html.dark .form-group label,
html.dark .form-group .label {
  color: var(--text);
}

html.dark .form-group input,
html.dark .form-group textarea,
html.dark .form-group select,
html.dark input,
html.dark textarea,
html.dark select {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}

html.dark .form-group input:focus,
html.dark .form-group textarea:focus,
html.dark .form-group select:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(107, 154, 240, 0.2);
}

html.dark .checkbox-group label {
  color: var(--text);
}

html.dark .checkbox-group a,
html.dark .forgot-link,
html.dark .back-link a {
  color: var(--primary-blue);
}

html.dark .forgot-link:hover,
html.dark .back-link a:hover {
  color: #8ab4f8;
}

html.dark .message.error {
  color: var(--danger);
}

html.dark .message.success {
  color: var(--success);
}

/* ==========================================================================
   6. Unit toggle & buttons
   ========================================================================== */
html.dark .unit-toggle-push {
  background: var(--surface-raised);
  border-color: var(--border-strong);
}

html.dark .unit-btn {
  color: var(--text);
}

html.dark .unit-btn.active {
  background: linear-gradient(135deg, var(--header-bg), var(--header-grad-end));
  color: var(--text);
  box-shadow: 0 3px 10px var(--shadow);
}

html.dark .big-cta-btn,
html.dark .btn {
  background: linear-gradient(135deg, var(--header-bg), var(--header-grad-end));
  border: 1px solid var(--border-strong);
  color: var(--text);
  box-shadow: 0 5px 16px var(--shadow);
}

/* Teal call-to-action buttons. Dark mode uses its own blue gradient, not the header gradient. */
html.dark .lp-btn,
html.dark .pwa-get-btn,
html.dark .acquire-btn-free {
  background: linear-gradient(165deg, #60a5fa 0%, #1d4ed8 48%, #1e3a6e 100%);
  color: #f8fbff;
  border: 1px solid #93c5fd;
  box-shadow: 0 8px 18px rgba(13, 21, 32, 0.45);
}

html.dark .lp-btn:hover,
html.dark .pwa-get-btn:hover,
html.dark .acquire-btn-free:hover:not(:disabled) {
  background: linear-gradient(165deg, #93c5fd 0%, #3b82f6 46%, #1d4ed8 100%);
  color: #0d1520;
  box-shadow: 0 10px 22px rgba(29, 78, 216, 0.4);
}

html.dark .lp-btn-outline {
  background: transparent;
  border-color: #60a5fa;
  color: #93c5fd;
}

html.dark .lp-btn-outline:hover {
  background: #1e3a6e;
  border-color: #93c5fd;
  color: #f8fbff;
}

html.dark .big-cta-btn:hover,
html.dark .btn:hover {
  background: linear-gradient(135deg, var(--header-grad-end), var(--header-bg));
  box-shadow: 0 8px 22px var(--shadow);
}

/* Secondary / white buttons inside pages */
html.dark .heat-gain-page .stepper-nav button,
html.dark .heat-gain-calc-icon-btn,
html.dark .heat-gain-calc-btn {
  background: var(--surface-raised);
  color: var(--primary-blue);
  border-color: var(--border-strong);
}

html.dark .heat-gain-page .stepper-nav button:disabled {
  background: #2a3444;
  color: #5c6b7f;
  border-color: #3d4f63;
  cursor: not-allowed;
  opacity: 1;
}

html.dark .heat-gain-calc-btn.op {
  background: var(--info-bg);
}

html.dark .heat-gain-calc-btn.eq {
  background: var(--primary-blue);
  color: #fff;
}

/* ==========================================================================
   7. Footer
   ========================================================================== */
html.dark footer {
  background: linear-gradient(to right, var(--dark-blue), var(--header-bg));
}

html.dark .whitelink {
  color: #b8cff5;
}

/* ==========================================================================
   8. Disclaimer & warnings
   ========================================================================== */
html.dark .disclaimer-warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
}

html.dark .disclaimer-warning strong {
  color: var(--warning-text);
}

/* ==========================================================================
   9. Heat gain calculator
   ========================================================================== */
html.dark .heat-gain-page .calc-switcher,
html.dark .heat-gain-page .calc-card {
  background: var(--surface);
  border-color: var(--border-strong);
}

html.dark .heat-gain-page .section-dropdown,
html.dark .heat-gain-page .calc-section input:not([type="checkbox"]),
html.dark .heat-gain-page .calc-section select {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}

html.dark .heat-gain-hint,
html.dark .heat-gain-results-meta,
html.dark .heat-gain-note,
html.dark .heat-gain-calc-note {
  color: var(--text-light);
}

html.dark .heat-gain-results-table th {
  border-bottom-color: var(--primary-blue);
}

html.dark .heat-gain-results-table .total-row {
  background: var(--info-bg);
}

html.dark .heat-gain-recommended {
  background: var(--info-bg);
  border-color: var(--primary-blue);
}

html.dark .heat-gain-warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

html.dark .heat-gain-disclaimer {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

html.dark .heat-gain-disclaimer a {
  color: var(--accent-gold);
}

html.dark .heat-gain-error-box {
  background: #2a1518;
  border-color: var(--danger);
  color: var(--danger);
}

html.dark .heat-gain-calc-modal {
  background: rgba(0, 0, 0, 0.7);
}

html.dark .heat-gain-calc-panel {
  background: var(--surface);
  border-color: var(--primary-blue);
}

html.dark .heat-gain-calc-header {
  background: var(--info-bg);
  border-bottom-color: var(--primary-blue);
}

html.dark .heat-gain-calc-display {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}

/* ==========================================================================
   10. Diagnostic / refrigerant tool patterns
   ========================================================================== */
html.dark .diagnostic-table-wrapper {
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: 0 4px 14px var(--shadow);
}

html.dark .diagnostic-table {
  color: var(--text);
}

html.dark .diagnostic-table tr {
  border-bottom-color: var(--border);
}

html.dark .diagnostic-table .label-cell {
  color: var(--text-light);
}

html.dark .diagnostic-table .input-cell input,
html.dark .diagnostic-table .input-cell select,
html.dark .diagnostic-table input,
html.dark .diagnostic-table select {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}

html.dark .diagnostic-table td {
  color: var(--text);
}

html.dark .diag-status-good {
  box-shadow: 0 4px 16px var(--shadow);
}

html.dark .elec-disclaimer-panel {
  background: #422006;
  color: #fde68a;
  border: 1px solid #b45309;
}

html.dark .elec-disclaimer-panel h2 {
  color: #fde68a;
}

html.dark .elec-disclaimer-panel .elec-disclaimer-ok {
  background: #9a3412;
  color: #fff;
}

html.dark .elec-disclaimer-panel .elec-disclaimer-ok:hover {
  background: #7c2d12;
  color: #fff;
}

html.dark .diag-history-table th,
html.dark .diag-history-table td {
  color: var(--text);
  border-bottom-color: var(--border);
}

html.dark #output a {
  color: var(--primary-blue);
}

html.dark .output.warning-box,
html.dark .warning-box {
  background: #000000 !important;
  border-color: #8b6914 !important;
  border-left-color: #b8860b !important;
  color: #e8e8e8 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}

html.dark .output.warning-box h3,
html.dark .warning-box h3 {
  color: #f5f5f5 !important;
}

html.dark .output.warning-box li,
html.dark .warning-box li {
  color: #e8e8e8 !important;
}

html.dark .output.warning-box a,
html.dark .warning-box a {
  color: #8ab4f8 !important;
}

html.dark .output.warning-box a:hover,
html.dark .warning-box a:hover {
  color: #a5c8ff !important;
}

/* Loading / status banners */
html.dark [id$="-loading"] {
  background: var(--warning-bg) !important;
  border-color: var(--warning-border) !important;
  color: var(--warning-text) !important;
}

/* Modals (refrigerant PT charts, isentropic, etc.) */
html.dark .modal {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

html.dark .modal-content {
  background-color: var(--surface) !important;
  color: var(--text);
  box-shadow: 0 10px 40px var(--shadow);
}

html.dark .modal-close {
  color: var(--text-light) !important;
}

html.dark .modal-close:hover {
  color: var(--text) !important;
}

html.dark #pt-chart-modal h2 {
  color: var(--text);
}

html.dark #pt-chart-modal #modal-unit-toggle,
html.dark #pt-chart-modal #modal-quick-jump,
html.dark #pt-chart-modal .control-select {
  background: var(--input-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Standard dark PT table header — popup + standalone PT chart pages */
html.dark .refrigerant-header,
html.dark .refrigerant-header th,
html.dark thead.refrigerant-header,
html.dark thead.refrigerant-header th {
  background: var(--surface-hover) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Tooltip popup */
html.dark #tooltip-popup {
  background: var(--surface-raised) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: 0 10px 25px var(--shadow);
}

html.dark .tooltip-abbr {
  color: var(--text) !important;
}

html.dark .text-cool {
  color: var(--primary-blue) !important;
}

html.dark .diag-review-panel {
  background: var(--surface-raised) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html.dark .diag-review-panel span {
  color: var(--text-light) !important;
}

html.dark .ref-calc-page .duct-validation-panel.is-error {
  color: #fecaca !important;
  background: #450a0a !important;
  border-color: #ef4444 !important;
}

html.dark .ref-calc-page .duct-validation-panel.is-warning {
  color: #fef08a !important;
  background: #422006 !important;
  border-color: #ca8a04 !important;
}

html.dark .ref-calc-page input.duct-field-error {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.25) !important;
}

html.dark .ref-calc-page #sec-airflow p.label.coil-label-next,
html.dark .ref-calc-page #sec-airflow p.label.coil-label-next label,
html.dark .ref-calc-page #sec-duct-input p.label.duct-label-next,
html.dark .ref-calc-page #sec-duct-input p.label.duct-label-next label {
  color: #fff;
  font-weight: 700;
}

html.dark .ref-calc-page .ref-calc-coil-divider {
  border-top-color: #fff;
}

html.dark .ref-calc-page .ref-calc-compact-btn,
html.dark .ref-calc-page #action-buttons .ref-calc-compact-btn {
  background: linear-gradient(135deg, #1a3568, #0f2347) !important;
  color: #e8eef8 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

html.dark .ref-calc-page .ref-calc-compact-btn:hover:not(:disabled),
html.dark .ref-calc-page #action-buttons .ref-calc-compact-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0f2347, #1a3568) !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.45);
}

html.dark .airflow-calc-page #air-primary-actions #clear-step-btn,
html.dark .airflow-calc-page #air-primary-actions #clear-all-btn,
html.dark .airflow-calc-page #air-primary-actions #clear-step-btn:hover,
html.dark .airflow-calc-page #air-primary-actions #clear-all-btn:hover {
  background: linear-gradient(180deg, var(--surface-raised, var(--surface)) 0%, var(--surface) 100%) !important;
  color: var(--text) !important;
  border-color: var(--border);
  box-shadow:
    0 3px 0 color-mix(in srgb, var(--text) 32%, var(--border)),
    0 5px 8px rgba(0, 0, 0, 0.35) !important;
}

html.dark .airflow-calc-page #air-primary-actions #clear-step-btn:active,
html.dark .airflow-calc-page #air-primary-actions #clear-all-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 32%, var(--border)) !important;
}

html.dark .airflow-calc-page #action-buttons #save-log-btn:disabled {
  background: var(--border) !important;
  color: var(--text-light) !important;
  box-shadow: none !important;
  opacity: 1;
  cursor: not-allowed;
}

html.dark .heat-gain-page .results-placeholder {
  color: var(--text-light) !important;
}

html.dark #key-metrics-output a,
html.dark #refrigerant-output a,
html.dark #air-oil-output a,
html.dark #enthalpy-output a,
html.dark #vapor-perf-output a {
  color: var(--primary-blue) !important;
}

html.dark .diag-modal-link {
  color: var(--text);
}

html.dark .diag-modal-link:hover {
  color: var(--primary-blue);
}

html.dark .heat-gain-page .calc-section .sign-input input:not([type="checkbox"]) {
  flex: 1 1 0%;
  width: 0 !important;
  min-width: 0;
}

html.dark .sign-btn {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

html.dark .sign-btn:active {
  background: var(--surface-hover);
}

html.dark #history-output h3 {
  color: var(--primary-blue);
}

/* ==========================================================================
   11. Bug summary pages (inline styles in summaries)
   ========================================================================== */
html.dark .summary-container h1 {
  color: var(--primary-blue) !important;
}

html.dark .fix-section h2 {
  color: var(--primary-blue) !important;
  border-bottom-color: var(--border) !important;
}

html.dark .fix-item {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

html.dark .fix-item strong {
  color: #8ab4f8 !important;
}

html.dark .file-link {
  color: var(--primary-blue) !important;
}

html.dark .status-fixed,
html.dark .status-fix {
  background: #152a20;
  color: #a7f3d0;
}

html.dark .status-restored {
  background: #1a2040;
  color: #a5b4fc;
}

html.dark .status-new,
html.dark .status-standardized {
  background: var(--info-bg);
  color: #8ab4f8;
}

html.dark .status-improved {
  background: var(--warning-bg);
  color: var(--warning-text);
}

/* ==========================================================================
   13. Dark mode toggle button
   ========================================================================== */
.dark-mode-toggle {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #e8edf4;
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  font-size: 0.85rem;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.2s ease;
}

.dark-mode-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}

html.dark .dark-mode-toggle {
  background: rgba(255, 255, 255, 0.08);
}

html.dark h3.home-tools-heading {
  text-align: center;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Live field roles (Air Flow, Pressure, Ohm's Law, BTU↔W) */
html.dark .air-field-cell[data-air-role="dynamic"] .air-role-badge,
html.dark .ohms-field-cell[data-ohms-role="dynamic"] .ohms-role-badge,
html.dark .ohms-field-cell[data-btuw-role="dynamic"] .ohms-role-badge,
html.dark .power-field-cell[data-power-role="dynamic"] .ohms-role-badge {
  background: #fbbf24;
  color: #1c1917;
}

html.dark .air-field-cell[data-air-role="dynamic"] input,
html.dark .ohms-field-cell[data-ohms-role="dynamic"] input,
html.dark .ohms-field-cell[data-btuw-role="dynamic"] input,
html.dark .power-field-cell[data-power-role="dynamic"] input {
  background: #422006;
  border-color: #fbbf24;
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.45);
  color: #fef3c7;
  font-weight: 600;
}

html.dark .power-safety-msg {
  color: #fca5a5;
}

html.dark .power-field-cell.is-unsafe input,
html.dark .power-field-cell.is-unsafe output,
html.dark .ohms-field-cell.is-unsafe input,
html.dark .ohms-field-cell.is-unsafe output,
html.dark input.is-unsafe,
html.dark output.is-unsafe {
  text-decoration: line-through;
}

/* Electrical / Air Flow calculated results */
html.dark .electrical-calc-page output.elec-out,
html.dark .electrical-calc-page input.elec-out,
html.dark .airflow-calc-page output.elec-out {
  color: #e2e8f0;
  background: transparent;
  border: none;
}

/* Air Flow / Pressure page */
html.dark .airflow-calc-page .press-calc-block {
  border-top-color: #334155;
}

html.dark .airflow-calc-page .press-calc-title {
  color: #93c5fd;
}

html.dark .airflow-calc-page .air-formula-hint {
  color: #94a3b8;
}

html.dark .log-actions {
  background: var(--surface-raised);
  border-color: var(--border);
}

html.dark .log-actions-title {
  color: var(--text);
}

html.dark .log-actions-hint,
html.dark .log-page-intro {
  color: var(--text-light);
}

html.dark .log-title-label {
  color: var(--text);
}

html.dark .log-title-input {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

html.dark .log-page-empty {
  background: var(--surface-raised);
  border-color: var(--border);
  color: var(--text-light);
}

html.dark .control-select,
html.dark #quick-jump,
html.dark #increment-select,
html.dark #quick-load-select,
html.dark #modal-quick-jump {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}