/* ==========================================================================
   Operating Point Calculator Modal Styles
   Based on Device Catalog modal styling
   ========================================================================== */

/* ==========================================================================
   RESULTS CAROUSEL
   ========================================================================== */

.opc-carousel-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px 12px;
  border-bottom: 1px solid var(--border-color, #e0e0e0);
  margin-bottom: 16px;
}

.opc-carousel-btn {
  background: none;
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--text-dark, #212121);
  transition: background 0.15s, opacity 0.15s;
  flex-shrink: 0;
}

.opc-carousel-btn:hover:not(:disabled) {
  background: var(--hover-bg, rgba(0,0,0,0.05));
}

.opc-carousel-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.opc-carousel-btn:focus {
  outline: 2px solid var(--primary-color, #4caf50);
  outline-offset: 1px;
}

.opc-carousel-title {
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--text-dark, #212121);
  flex: 1;
  text-align: center;
}

.opc-carousel-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.opc-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: var(--border-color, #ccc);
  transition: background 0.2s, transform 0.2s;
  cursor: pointer;
}

.opc-carousel-dot.active {
  background: var(--primary-color, #009688);
  transform: scale(1.25);
}

.opc-carousel-panel {
  display: none;
}

.opc-carousel-panel.active {
  display: block;
}

/* Operating Point Calculator Toggle Button in App Bar */
.operating-point-calc-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-round);
  transition: background-color 0.2s ease, transform 0.2s ease;
  color: #fff;
}

.operating-point-calc-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.operating-point-calc-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(var(--primary-color-rgb, 0, 150, 136), 0.3));
}

.operating-point-calc-toggle svg,
.operating-point-calc-toggle .material-icons {
  width: 24px;
  height: 24px;
  display: block;
  font-size: 24px;
  line-height: 1;
}

.app-bar .operating-point-calc-toggle {
  width: 40px;
  height: 40px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.dark-mode .operating-point-calc-toggle {
  color: #fff;
}

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

/* Modal Styles - matching Device Catalog */
.operating-point-modal {
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 1);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  /* Higher z-index to appear above device catalog modal */
  z-index: var(--z-popover) !important;
}

/* Overlay for operating point modal - above device catalog */
.operating-point-modal.open ~ .modal-overlay,
body:has(.operating-point-modal.open) > .modal-overlay:last-of-type {
  z-index: 5500 !important;
}

.operating-point-modal .modal-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(90vh - 24px);
}

/* Header - matching Device Catalog */
.operating-point-modal .device-catalog-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: visible;
  position: relative;
  z-index: 100;
  padding: 16px 28px 12px 28px;
  background: rgba(255, 255, 255, 1);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
}

.operating-point-modal .device-catalog-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-color, #263238);
  padding-left: 0;
  font-family: inherit;
}

.operating-point-modal .device-catalog-close-btn {
  border: none;
  background: transparent;
  color: var(--muted-text, #607d8b);
  font-size: 1.35rem;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  position: relative;
  top: auto;
  right: auto;
}

.operating-point-modal .device-catalog-close-btn:hover,
.operating-point-modal .device-catalog-close-btn:focus-visible {
  color: var(--primary-color);
}

/* White header style for operating point modal */


/* Body */
.operating-point-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Results container - uses device-info-op-columns structure from device card */
#opCalcResultsContent {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* OP Calculator: winter/summer columns share a subgrid so that
   corresponding section tiles (odzysk, wymiennik, wyniki) land on the
   same row in both seasons even when one season skips a section. */
#opCalcResultsContent .device-info-op-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* header + 5 section rows: input, recovery, mixing, exchanger, results */
  grid-template-rows: repeat(6, auto);
  column-gap: 24px;
  row-gap: 0;
}

#opCalcResultsContent .device-info-op-column {
  width: 100%;
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
}

/* Pin every section to a fixed subgrid row; an absent section just leaves
   its row empty in that column without shifting the rest. */
#opCalcResultsContent .device-info-op-column-header { grid-row: 1; }
#opCalcResultsContent .opc-section--input     { grid-row: 2; }
#opCalcResultsContent .opc-section--recovery  { grid-row: 3; }
#opCalcResultsContent .opc-section--mixing    { grid-row: 4; }
#opCalcResultsContent .opc-section--exchanger { grid-row: 5; }
#opCalcResultsContent .opc-section--results   { grid-row: 6; }

/* Spacing between stacked tiles lives on the tiles (row-gap is 0), so
   rows that are empty in both columns collapse to zero height. */
#opCalcResultsContent .device-info-spec-group {
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  /* Single column: drop the shared subgrid and stack seasons naturally. */
  #opCalcResultsContent .device-info-op-columns {
    display: flex;
    flex-direction: column;
    grid-template-rows: none;
  }
  #opCalcResultsContent .device-info-op-column {
    display: block;
    grid-row: auto;
    grid-template-rows: none;
  }
  #opCalcResultsContent .device-info-op-column-header,
  #opCalcResultsContent .opc-section--input,
  #opCalcResultsContent .opc-section--recovery,
  #opCalcResultsContent .opc-section--mixing,
  #opCalcResultsContent .opc-section--exchanger,
  #opCalcResultsContent .opc-section--results {
    grid-row: auto;
  }
}

/* Season headers - winter: col 1, summer: col 2 */
.result-season-header {
  display: block;
  font-size: var(--font-size-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary-color, #009688);
  margin-top: 0;
  margin-bottom: 16px;
  padding: 8px 0;
  border-bottom: 2px solid rgba(var(--primary-color-rgb, 0, 150, 136), 0.4);
  text-align: center;
}

.result-season-header.winter {
  grid-column: 1;
}

.result-season-header.summer {
  grid-column: 2;
}

/* Result section headers - span all 2 columns (full width) */
.result-section-header {
  grid-column: 1 / -1;
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-color, #009688);
  margin-top: 20px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--primary-color-rgb, 0, 150, 136), 0.25);
}

.result-section-header:first-of-type {
  margin-top: 0;
}

/* Result rows as cards - winter in col 1, summer in col 2 */
.result-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 0, 150, 136), 0.06) 0%, rgba(var(--primary-color-rgb, 0, 150, 136), 0.02) 100%);
  border: 1px solid rgba(var(--primary-color-rgb, 0, 150, 136), 0.15);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  min-height: 90px;
}

.result-row.winter {
  grid-column: 1;
}

.result-row.summer {
  grid-column: 2;
}

.result-row:hover {
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 0, 150, 136), 0.12) 0%, rgba(var(--primary-color-rgb, 0, 150, 136), 0.06) 100%);
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.25);
}

.result-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted-text, #607d8b);
}

.result-value {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-color, #263238);
}

.result-value.highlight {
  color: var(--primary-color, #009688);
  font-size: 1.7rem;
}

/* Sections */
.operating-point-section {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.operating-point-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.operating-point-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--primary-color, #009688);
}

.operating-point-section-title i {
  font-size: 20px;
  color: var(--primary-color, #009688);
}

/* Filter Row - horizontal layout like catalog controls */
.operating-point-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.operating-point-filter-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
  flex: 1;
}

.operating-point-filter-item-wide {
  flex: 2;
  min-width: 250px;
}

.operating-point-filter-item label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--bluegray-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.operating-point-filter-item select.browser-default,
.operating-point-filter-item input.browser-default {
  height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  background: #fff !important;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.operating-point-filter-item select.browser-default:focus,
.operating-point-filter-item input.browser-default:focus {
  border-color: var(--primary-color, #009688);
  box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 0, 150, 136), 0.15);
  outline: none;
}

.operating-point-filter-item input.browser-default::placeholder {
  color: var(--gray-500);
}

/* Search autocomplete dropdown */
.op-calc-search-container {
  position: relative;
}

.op-calc-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  background: white;
  border: 1px solid rgba(var(--primary-color-rgb, 0, 150, 136), 0.3);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-sticky);
}

.op-calc-search-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.15s ease;
}

.op-calc-search-item:hover {
  background: rgba(var(--primary-color-rgb, 0, 150, 136), 0.08);
}

.op-calc-search-item:last-child {
  border-bottom: none;
}

.op-calc-search-item-name {
  font-weight: 600;
  color: var(--primary-dark, #00796b);
  font-size: 0.9rem;
}

.op-calc-search-item-mfg {
  font-size: 0.8rem;
  color: var(--bluegray-400);
}

body.dark-mode .op-calc-search-dropdown {
  background: #2d2d2d;
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.4);
}

body.dark-mode .op-calc-search-item {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .op-calc-search-item:hover {
  background: rgba(var(--primary-color-rgb, 0, 150, 136), 0.15);
}

body.dark-mode .op-calc-search-item-name {
  color: var(--primary-light, #4db6ac);
}

body.dark-mode .op-calc-search-item-mfg {
  color: var(--bluegray-300);
}

/* Device Info Card */
.operating-point-device-info {
  margin-top: 16px;
}

.device-info-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 0, 150, 136), 0.08) 0%, rgba(var(--primary-color-rgb, 0, 150, 136), 0.04) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--primary-color-rgb, 0, 150, 136), 0.15);
}

.device-info-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  background: white;
  border-radius: var(--radius-md);
  padding: 4px;
}

.device-info-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.device-info-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.device-info-manufacturer {
  font-size: 0.9rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Actions */
.operating-point-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.operating-point-actions .btn {
  flex: 1;
  max-width: 250px;
}

.operating-point-actions .btn-flat {
  flex: none;
}

/* Results Section */
.operating-point-results {
  margin-top: 24px;
  padding: 20px;
  background: transparent;
  border-radius: var(--radius-lg);
  border: none;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.result-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.result-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--bluegray-500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.result-value {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: #2e7d32;
}

.result-value.highlight {
  color: var(--primary-color, #009688);
}

.results-actions {
  display: flex;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(76, 175, 80, 0.15);
}

/* Warnings Section */
.operating-point-warnings {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(255, 152, 0, 0.1);
  border: 1px solid rgba(255, 152, 0, 0.3);
  border-radius: var(--radius-md);
}

.warning-content {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ef6c00;
}

.warning-content i {
  font-size: 24px;
}

/* Dark mode */
body.dark-mode .operating-point-modal {
  background: rgba(38, 50, 56, 0.98);
}

body.dark-mode .operating-point-modal .device-catalog-header {
  background: linear-gradient(135deg, var(--primary-dark, #00796b) 0%, var(--primary-color, #004d40) 100%);
}

body.dark-mode .operating-point-header-white {
  background: var(--bluegray-900);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .operating-point-header-white .operating-point-title {
  color: var(--primary-light, #26a69a);
}

body.dark-mode .operating-point-close-btn {
  background: rgba(255, 255, 255, 0.08);
  color: var(--bluegray-300);
}

body.dark-mode .operating-point-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--bluegray-50);
}

body.dark-mode .operating-point-body {
  color: var(--bluegray-50);
}

body.dark-mode .operating-point-section {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .operating-point-filter-item label {
  color: var(--bluegray-300);
}

body.dark-mode .operating-point-filter-item select.browser-default,
body.dark-mode .operating-point-filter-item input.browser-default {
  background: var(--dark-surface) !important;
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--gray-300);
}

body.dark-mode .device-info-card {
  background: rgba(var(--primary-color-rgb, 0, 150, 136), 0.12);
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.25);
}

body.dark-mode .device-info-img {
  background: var(--bluegray-700);
}

body.dark-mode .device-info-name {
  color: var(--bluegray-50);
}

body.dark-mode .device-info-manufacturer {
  color: var(--bluegray-300);
}

body.dark-mode .operating-point-results {
  background: rgba(76, 175, 80, 0.12);
  border-color: rgba(76, 175, 80, 0.3);
}

body.dark-mode .result-row {
  background: var(--bluegray-800);
}

body.dark-mode .result-label {
  color: var(--bluegray-300);
}

body.dark-mode .result-value {
  color: #81c784;
}

/* Dark mode for section titles */
body.dark-mode .operating-point-section-title {
  color: var(--primary-light, #4db6ac);
}

body.dark-mode .operating-point-section-title i {
  color: var(--primary-light, #4db6ac);
}

/* Dark mode for warnings */
body.dark-mode .operating-point-warnings {
  background: rgba(255, 152, 0, 0.15);
  border-color: #ff9800;
}

body.dark-mode .operating-point-warnings .warning-content {
  color: #ffb74d;
}

body.dark-mode .operating-point-warnings .warning-content i {
  color: #ffc107;
}

/* Responsive */
@media (max-width: 768px) {
  .operating-point-filter-row {
    flex-direction: column;
  }
  
  .operating-point-filter-item,
  .operating-point-filter-item-wide {
    min-width: 100%;
    flex: none;
  }
  
  .results-grid {
    grid-template-columns: 1fr;
  }
  
  .operating-point-actions,
  .results-actions {
    flex-direction: column;
  }
  
  .operating-point-actions .btn {
    max-width: none;
  }
  
  .op-calc-process-steps {
    flex-direction: column;
    gap: 8px;
  }
  
  .op-calc-step-arrow {
    transform: rotate(90deg);
  }
}

/* ==========================================================================
   Mode Checkboxes Styling
   ========================================================================== */

.op-calc-mode-checkboxes {
  display: flex;
  gap: 24px;
  margin-top: 8px;
}

.op-calc-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  background: rgba(var(--primary-color-rgb, 0, 150, 136), 0.05);
  border: 1px solid rgba(var(--primary-color-rgb, 0, 150, 136), 0.15);
  transition: all 0.2s;
}

.op-calc-checkbox-label:hover {
  background: rgba(var(--primary-color-rgb, 0, 150, 136), 0.1);
}

.op-calc-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-color, #009688);
  cursor: pointer;
}

.op-calc-checkbox-label input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.op-calc-checkbox-label span {
  font-size: var(--font-size-md);
  font-weight: 500;
}

.op-calc-checkbox-label i {
  font-size: 20px;
  color: var(--primary-color, #009688);
}

/* ==========================================================================
   Slider Styling (Fan Speed & Recirculation)
   ========================================================================== */

.op-calc-slider-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.op-calc-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: linear-gradient(to right, #e0e0e0, var(--primary-color, #009688));
  border-radius: var(--radius-xs);
  outline: none;
  cursor: pointer;
}

.op-calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--primary-color, #009688);
  border-radius: var(--radius-round);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.2s;
}

.op-calc-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.op-calc-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--primary-color, #009688);
  border-radius: var(--radius-round);
  cursor: pointer;
  border: none;
  box-shadow: var(--shadow-md);
}

.op-calc-slider-value {
  min-width: 50px;
  padding: 6px 12px;
  background: var(--primary-color, #009688);
  color: white;
  border-radius: var(--radius-xs);
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
}

/* ==========================================================================
   Process Steps (Stage-by-Stage Results)
   ========================================================================== */

.op-calc-process-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
}

.op-calc-step {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 120px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.op-calc-step-final {
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 0, 150, 136), 0.1) 0%, rgba(var(--primary-color-rgb, 0, 150, 136), 0.05) 100%);
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.2);
}

.op-calc-step-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.op-calc-step-header i {
  font-size: 18px;
  color: var(--bluegray-500);
}

.op-calc-step-final .op-calc-step-header i {
  color: var(--primary-color, #009688);
}

.op-calc-step-header span {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--bluegray-600);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.op-calc-step-values {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.op-calc-param {
  font-size: var(--font-size-sm);
  color: var(--bluegray-700);
}

.op-calc-param strong {
  color: var(--bluegray-800);
}

.op-calc-step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bluegray-300);
}

.op-calc-step-arrow i {
  font-size: 24px;
}

/* ==========================================================================
   Water Sections (Heating/Cooling)
   ========================================================================== */

.operating-point-subsection {
  margin-top: 16px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.operating-point-subsection-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--bluegray-500);
}

.operating-point-subsection-title i {
  font-size: 18px;
}

#opCalcHeatingWaterSection .operating-point-subsection-title i {
  color: #ff5722;
}

#opCalcCoolingWaterSection .operating-point-subsection-title i {
  color: #2196f3;
}

#opCalcHeatRecoverySection {
  border-color: rgba(156, 39, 176, 0.2);
  background: rgba(156, 39, 176, 0.03);
}

#opCalcHeatRecoverySection .operating-point-subsection-title i {
  color: #9c27b0;
}

/* ==========================================================================
   Dark Mode Additions
   ========================================================================== */

body.dark-mode .op-calc-checkbox-label {
  background: rgba(var(--primary-color-rgb, 0, 150, 136), 0.1);
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.25);
  color: var(--bluegray-50);
}

body.dark-mode .op-calc-checkbox-label:hover {
  background: rgba(var(--primary-color-rgb, 0, 150, 136), 0.2);
}

body.dark-mode .op-calc-slider {
  background: linear-gradient(to right, #455a64, var(--primary-light, #26a69a));
}

body.dark-mode .op-calc-process-steps {
  background: rgba(0, 0, 0, 0.2);
}

body.dark-mode .op-calc-step {
  background: var(--bluegray-800);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .op-calc-step-final {
  background: rgba(var(--primary-color-rgb, 0, 150, 136), 0.15);
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.3);
}

body.dark-mode .op-calc-step-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .op-calc-step-header span {
  color: var(--bluegray-300);
}

body.dark-mode .op-calc-param {
  color: var(--bluegray-200);
}

body.dark-mode .op-calc-param strong {
  color: var(--bluegray-50);
}

body.dark-mode .operating-point-subsection {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .operating-point-subsection-title {
  color: var(--bluegray-300);
}

/* ==========================================================================
   Notes and Info boxes
   ========================================================================== */

.op-calc-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(33, 150, 243, 0.08);
  border-radius: var(--radius-md);
  border-left: 3px solid #2196f3;
  margin-top: 8px;
}

.op-calc-note i {
  font-size: 18px;
  color: #2196f3;
  flex-shrink: 0;
  margin-top: 2px;
}

.op-calc-note span {
  font-size: var(--font-size-sm);
  color: var(--bluegray-600);
  line-height: 1.4;
}

body.dark-mode .op-calc-note {
  background: rgba(33, 150, 243, 0.12);
}

body.dark-mode .op-calc-note span {
  color: var(--bluegray-200);
}

/* ==========================================================================
   NEW LAYOUT: Device Selection with Image on Right
   ========================================================================== */

.operating-point-device-selection-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.operating-point-device-selects {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.operating-point-device-selects .operating-point-filter-item {
  width: 100%;
  min-width: auto;
  flex: none;
}

.operating-point-device-image-large {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 0, 150, 136), 0.06) 0%, rgba(var(--primary-color-rgb, 0, 150, 136), 0.02) 100%);
  border-radius: var(--radius-xl);
  border: 2px dashed rgba(var(--primary-color-rgb, 0, 150, 136), 0.2);
  overflow: hidden;
  transition: all 0.3s ease;
}

.operating-point-device-image-large.has-image {
  border-style: solid;
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.3);
  background: white;
}

.operating-point-device-image-large img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 12px;
}

.operating-point-device-image-large .placeholder-text {
  font-size: var(--font-size-sm);
  color: var(--bluegray-300);
  text-align: center;
  padding: 16px;
}

/* ==========================================================================
   NEW LAYOUT: Air Parameters Two Columns (Heating | Cooling)
   ========================================================================== */

.op-calc-air-params-container,
.operating-point-air-params-layout {
  display: flex;
  gap: 24px;
}

.op-calc-air-column {
  flex: 1;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.op-calc-air-column-heating {
  background: white;
  border-color: rgba(0, 0, 0, 0.08);
}

.op-calc-air-column-cooling {
  background: white;
  border-color: rgba(0, 0, 0, 0.08);
}

.op-calc-air-column-title,
.op-calc-air-column-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.op-calc-air-column-heating .op-calc-air-column-title,
.op-calc-air-column-heating .op-calc-air-column-header {
  color: #e65100;
}

.op-calc-air-column-cooling .op-calc-air-column-title,
.op-calc-air-column-cooling .op-calc-air-column-header {
  color: #0277bd;
}

.op-calc-air-column-title i,
.op-calc-air-column-header i {
  font-size: 20px;
}

.op-calc-air-param-group {
  margin-bottom: 16px;
}

.op-calc-air-param-group:last-child {
  margin-bottom: 0;
}

.op-calc-air-param-group > label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--bluegray-600);
  margin-bottom: 8px;
}

.op-calc-inline-inputs {
  display: flex;
  gap: 12px;
}

.op-calc-inline-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.op-calc-inline-field label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--bluegray-400);
  text-transform: uppercase;
}

.op-calc-inline-field input.browser-default {
  width: 80px;
  height: 36px;
  padding: 4px 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  text-align: center;
  background: white !important;
}

.op-calc-inline-field input.browser-default:focus {
  border-color: var(--primary-color, #009688);
  box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 0, 150, 136), 0.15);
  outline: none;
}

.op-calc-air-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
}

.op-calc-air-row:last-child {
  margin-bottom: 0;
}

.op-calc-air-row-label {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--bluegray-600);
}

.op-calc-air-row-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.op-calc-air-row-inputs input.browser-default {
  width: 65px;
  height: 36px;
  padding: 4px 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  text-align: center;
  background: white !important;
}

.op-calc-air-row-inputs input.browser-default:focus {
  border-color: var(--primary-color, #009688);
  box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 0, 150, 136), 0.15);
  outline: none;
}

.op-calc-air-row-inputs span {
  font-size: var(--font-size-xs);
  color: var(--bluegray-400);
  min-width: 20px;
}

/* ==========================================================================
   NEW LAYOUT: Unified Slider with Value Badge
   ========================================================================== */

.op-calc-slider-with-value {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* When used as inline form element (air flow input) */
.operating-point-filter-item .op-calc-slider-with-value {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

.operating-point-filter-item .op-calc-slider-with-value .op-calc-number-input {
  flex: 1;
  max-width: 120px;
}

.op-calc-unit-label {
  font-size: var(--font-size-sm);
  color: var(--bluegray-400);
  font-weight: 500;
}

/* Full slider with header and value badge (gas heater style) */
.operating-point-filter-item.op-calc-slider-with-value {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.op-calc-slider-with-value .op-calc-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.op-calc-slider-with-value .op-calc-slider-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--bluegray-600);
}

.op-calc-slider-with-value .op-calc-slider-value-badge {
  min-width: 60px;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--primary-color, #009688) 0%, var(--primary-dark, #00796b) 100%);
  color: white;
  border-radius: var(--radius-2xl);
  text-align: center;
  font-weight: 600;
  font-size: var(--font-size-md);
  box-shadow: 0 2px 8px rgba(var(--primary-color-rgb, 0, 150, 136), 0.3);
}

.op-calc-slider-with-value .op-calc-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.op-calc-slider-with-value .op-calc-slider-row .slider-min,
.op-calc-slider-with-value .op-calc-slider-row .slider-max {
  font-size: var(--font-size-xs);
  color: var(--bluegray-300);
  min-width: 30px;
}

.op-calc-slider-with-value .op-calc-slider-row .slider-min {
  text-align: right;
}

.op-calc-slider-with-value .op-calc-slider-row .slider-max {
  text-align: left;
}

/* Efficiency display for heat recovery */
.op-calc-efficiency-display {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.12) 0%, rgba(103, 58, 183, 0.08) 100%);
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  font-weight: 600;
  color: #7b1fa2;
}

/* ==========================================================================
   NEW LAYOUT: Power Display next to Heater Controls
   ========================================================================== */

.op-calc-power-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.12) 0%, rgba(255, 87, 34, 0.08) 100%);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 152, 0, 0.25);
}

.op-calc-power-display i {
  font-size: 20px;
  color: #ff9800;
}

.op-calc-power-display .power-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--bluegray-600);
}

.op-calc-power-display .power-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e65100;
}

/* Gas heater power display variant */
.op-calc-power-display.gas {
  background: linear-gradient(135deg, rgba(103, 58, 183, 0.12) 0%, rgba(156, 39, 176, 0.08) 100%);
  border-color: rgba(103, 58, 183, 0.25);
}

.op-calc-power-display.gas i {
  color: #7e57c2;
}

.op-calc-power-display.gas .power-value {
  color: #5e35b1;
}

/* ==========================================================================
   Heat Recovery Simplified Display
   ========================================================================== */

.op-calc-hr-efficiency-display {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(156, 39, 176, 0.08);
  border-radius: var(--radius-md);
  margin-top: 8px;
}

.op-calc-hr-efficiency-display i {
  font-size: 24px;
  color: #9c27b0;
}

.op-calc-hr-efficiency-display .efficiency-label {
  font-size: var(--font-size-sm);
  color: var(--bluegray-600);
}

.op-calc-hr-efficiency-display .efficiency-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: #7b1fa2;
  margin-left: auto;
}

/* ==========================================================================
   Dark Mode for New Layout
   ========================================================================== */

body.dark-mode .operating-point-device-image-large {
  background: rgba(var(--primary-color-rgb, 0, 150, 136), 0.1);
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.3);
}

body.dark-mode .operating-point-device-image-large.has-image {
  background: var(--bluegray-800);
}

body.dark-mode .operating-point-device-image-large .placeholder-text {
  color: var(--bluegray-400);
}

body.dark-mode .op-calc-air-column {
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .op-calc-air-column-heating {
  background: linear-gradient(135deg, rgba(255, 87, 34, 0.1) 0%, rgba(255, 152, 0, 0.06) 100%);
}

body.dark-mode .op-calc-air-column-cooling {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(3, 169, 244, 0.06) 100%);
}

body.dark-mode .op-calc-air-row {
  background: rgba(0, 0, 0, 0.2);
}

body.dark-mode .op-calc-air-row-label {
  color: var(--bluegray-200);
}

body.dark-mode .op-calc-air-row-inputs input.browser-default {
  background: white !important;
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--bluegray-900);
}

body.dark-mode .op-calc-air-row-inputs span {
  color: var(--bluegray-300);
}

body.dark-mode .op-calc-slider-with-value {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .op-calc-slider-with-value .op-calc-slider-label {
  color: var(--bluegray-200);
}

body.dark-mode .op-calc-power-display {
  background: rgba(255, 152, 0, 0.15);
  border-color: rgba(255, 152, 0, 0.3);
}

body.dark-mode .op-calc-power-display .power-label {
  color: var(--bluegray-200);
}

body.dark-mode .op-calc-hr-efficiency-display {
  background: rgba(156, 39, 176, 0.12);
}

body.dark-mode .op-calc-hr-efficiency-display .efficiency-label {
  color: var(--bluegray-200);
}

/* ==========================================================================
   Responsive for New Layout
   ========================================================================== */

@media (max-width: 768px) {
  .operating-point-device-selection-layout {
    flex-direction: column;
  }
  
  .operating-point-device-image-large {
    width: 100%;
    height: 150px;
    order: -1;
  }
  
  .op-calc-air-params-container {
    flex-direction: column;
  }
  
  .op-calc-air-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .op-calc-air-row-inputs {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ==========================================================================
   Device Info Card Large (with image + description on right)
   ========================================================================== */

.operating-point-device-info-large {
  flex-shrink: 0;
  width: 280px;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-info-card-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 0, 150, 136), 0.08) 0%, rgba(var(--primary-color-rgb, 0, 150, 136), 0.03) 100%);
  border-radius: var(--radius-xl);
  border: 2px solid rgba(var(--primary-color-rgb, 0, 150, 136), 0.2);
  width: 100%;
  transition: all 0.3s ease;
}

.device-info-card-large:has(img[src=""]) {
  border-style: dashed;
  background: rgba(var(--primary-color-rgb, 0, 150, 136), 0.03);
}

.device-info-img-large {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: white;
  border-radius: var(--radius-lg);
  padding: 8px;
  box-shadow: var(--shadow-md);
}

.device-info-details-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.device-info-name-large {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: #333;
}

.device-info-manufacturer-large {
  font-size: var(--font-size-sm);
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.dark-mode .device-info-card-large {
  background: rgba(var(--primary-color-rgb, 0, 150, 136), 0.12);
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.3);
}

body.dark-mode .device-info-img-large {
  background: var(--bluegray-700);
}

body.dark-mode .device-info-name-large {
  color: var(--bluegray-50);
}

body.dark-mode .device-info-manufacturer-large {
  color: var(--bluegray-300);
}

/* ==========================================================================
   Mixing Chamber / Komora mieszania Layout with Airflow Boxes
   ========================================================================== */

.op-calc-mixing-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}

.op-calc-airflow-box {
  flex: 1;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(var(--primary-color-rgb, 0, 150, 136), 0.06);
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--primary-color-rgb, 0, 150, 136), 0.15);
}

.op-calc-airflow-box label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--bluegray-600);
  text-transform: uppercase;
}

.op-calc-airflow-value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-color, #009688);
}

.op-calc-airflow-value i {
  font-size: 20px;
  opacity: 0.7;
}

.op-calc-airflow-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.op-calc-airflow-display input.browser-default {
  flex: 1;
  max-width: 120px;
}

body.dark-mode .op-calc-airflow-box {
  background: rgba(var(--primary-color-rgb, 0, 150, 136), 0.1);
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.25);
}

body.dark-mode .op-calc-airflow-box label {
  color: var(--bluegray-300);
}

body.dark-mode .op-calc-airflow-value {
  color: var(--primary-light, #4db6ac);
}

/* ==========================================================================
   Heat Recovery in Results Section
   ========================================================================== */

.op-calc-heat-recovery-info {
  margin-bottom: 20px;
}

.op-calc-hr-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(103, 58, 183, 0.06) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(156, 39, 176, 0.2);
}

.op-calc-hr-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: #7b1fa2;
}

.op-calc-hr-header i {
  font-size: 24px;
}

.op-calc-hr-values {
  display: flex;
  gap: 24px;
}

.op-calc-hr-param {
  font-size: var(--font-size-md);
  color: var(--bluegray-600);
}

.op-calc-hr-param strong {
  color: #333;
  margin-right: 4px;
}

body.dark-mode .op-calc-hr-card {
  background: rgba(156, 39, 176, 0.15);
  border-color: rgba(156, 39, 176, 0.3);
}

body.dark-mode .op-calc-hr-header {
  color: #ce93d8;
}

body.dark-mode .op-calc-hr-param {
  color: var(--bluegray-200);
}

body.dark-mode .op-calc-hr-param strong {
  color: var(--bluegray-50);
}

/* ==========================================================================
   NEW Process Flow Diagram - Horizontal Layout with Dual Columns
   ========================================================================== */

.op-calc-process-diagram {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-xl);
  overflow-x: auto;
  margin-bottom: 20px;
}

/* Source boxes (left side - outdoor and indoor air) */
.op-calc-source-boxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 180px;
}

.op-calc-source-box {
  padding: 12px 14px;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

#opCalcSourceOutdoor {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.08) 0%, rgba(33, 150, 243, 0.02) 100%);
  border-color: rgba(33, 150, 243, 0.2);
}

#opCalcSourceIndoor {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(76, 175, 80, 0.02) 100%);
  border-color: rgba(76, 175, 80, 0.2);
}

.op-calc-source-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.op-calc-source-header i {
  font-size: 18px;
  color: var(--bluegray-500);
}

#opCalcSourceOutdoor .op-calc-source-header i {
  color: #1976d2;
}

#opCalcSourceIndoor .op-calc-source-header i {
  color: #388e3c;
}

.op-calc-source-header span {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--bluegray-600);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.op-calc-source-flow {
  font-size: 0.8rem;
  color: var(--primary-color, #009688);
  font-weight: 600;
  margin-bottom: 8px;
}

/* Dual columns for winter/summer */
.op-calc-dual-columns {
  display: flex;
  gap: 8px;
}

.op-calc-column-winter,
.op-calc-column-summer {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.op-calc-column-winter {
  background: rgba(33, 150, 243, 0.08);
  border: 1px solid rgba(33, 150, 243, 0.15);
}

.op-calc-column-summer {
  background: rgba(255, 152, 0, 0.08);
  border: 1px solid rgba(255, 152, 0, 0.15);
}

.op-calc-column-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.op-calc-column-winter .op-calc-column-label {
  color: #1565c0;
}

.op-calc-column-summer .op-calc-column-label {
  color: #ef6c00;
}

.op-calc-column-label i {
  font-size: 14px;
}

.op-calc-dual-columns .op-calc-param {
  font-size: var(--font-size-xs);
  color: var(--bluegray-700);
}

/* Arrows section */
.op-calc-arrows-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.op-calc-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bluegray-300);
}

.op-calc-flow-arrow i {
  font-size: 28px;
}

/* Process boxes (middle - recovery and mixing) */
.op-calc-process-boxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 180px;
}

.op-calc-process-box {
  padding: 12px 14px;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.op-calc-process-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.op-calc-process-header i {
  font-size: 18px;
  color: var(--bluegray-500);
}

.op-calc-process-header span {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--bluegray-600);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.op-calc-process-flow {
  font-size: 0.8rem;
  color: var(--primary-color, #009688);
  font-weight: 600;
  margin-bottom: 8px;
}

.op-calc-process-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bluegray-300);
}

.op-calc-process-arrow i {
  font-size: 24px;
}

/* Treatment boxes (heater/cooler) */
.op-calc-treatment-boxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 160px;
}

.op-calc-treatment-box {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.op-calc-heater-box {
  background: linear-gradient(135deg, rgba(255, 87, 34, 0.1) 0%, rgba(255, 152, 0, 0.05) 100%);
  border: 1px solid rgba(255, 87, 34, 0.2);
}

.op-calc-cooler-box {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(3, 169, 244, 0.05) 100%);
  border: 1px solid rgba(33, 150, 243, 0.2);
}

.op-calc-treatment-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.op-calc-heater-box .op-calc-treatment-header i {
  color: #e65100;
}

.op-calc-cooler-box .op-calc-treatment-header i {
  color: #0277bd;
}

.op-calc-treatment-header span {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--bluegray-600);
  text-transform: uppercase;
}

.op-calc-treatment-flow {
  font-size: 0.8rem;
  color: var(--primary-color, #009688);
  font-weight: 600;
  margin-bottom: 8px;
}

.op-calc-single-column {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}

.op-calc-single-column.op-calc-column-winter {
  background: rgba(255, 87, 34, 0.08);
  border-color: rgba(255, 87, 34, 0.15);
}

.op-calc-single-column.op-calc-column-summer {
  background: rgba(33, 150, 243, 0.08);
  border-color: rgba(33, 150, 243, 0.15);
}

.op-calc-param-power {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
  font-weight: 600;
}

.op-calc-param-power i {
  font-size: 14px;
  color: #ff9800;
}

/* Supply box (final) */
.op-calc-supply-box {
  display: flex;
  align-items: center;
  min-width: 180px;
}

.op-calc-supply-box .op-calc-process-box {
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 0, 150, 136), 0.12) 0%, rgba(var(--primary-color-rgb, 0, 150, 136), 0.06) 100%);
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.25);
}

.op-calc-supply-box .op-calc-process-header i {
  color: var(--primary-color, #009688);
}

.op-calc-supply-box .op-calc-process-header span {
  color: var(--primary-dark, #00796b);
}

/* Dark mode for new diagram */
body.dark-mode .op-calc-process-diagram {
  background: rgba(0, 0, 0, 0.2);
}

body.dark-mode .op-calc-source-box,
body.dark-mode .op-calc-process-box,
body.dark-mode .op-calc-treatment-box {
  background: var(--bluegray-800);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode #opCalcSourceOutdoor {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.15) 0%, rgba(33, 150, 243, 0.08) 100%);
  border-color: rgba(33, 150, 243, 0.3);
}

body.dark-mode #opCalcSourceIndoor {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.08) 100%);
  border-color: rgba(76, 175, 80, 0.3);
}

body.dark-mode .op-calc-source-header,
body.dark-mode .op-calc-process-header,
body.dark-mode .op-calc-treatment-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .op-calc-source-header span,
body.dark-mode .op-calc-process-header span,
body.dark-mode .op-calc-treatment-header span {
  color: var(--bluegray-300);
}

body.dark-mode .op-calc-column-winter {
  background: rgba(33, 150, 243, 0.12);
  border-color: rgba(33, 150, 243, 0.2);
}

body.dark-mode .op-calc-column-summer {
  background: rgba(255, 152, 0, 0.12);
  border-color: rgba(255, 152, 0, 0.2);
}

body.dark-mode .op-calc-dual-columns .op-calc-param,
body.dark-mode .op-calc-single-column .op-calc-param {
  color: var(--bluegray-200);
}

body.dark-mode .op-calc-supply-box .op-calc-process-box {
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 0, 150, 136), 0.2) 0%, rgba(var(--primary-color-rgb, 0, 150, 136), 0.1) 100%);
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.35);
}

/* Responsive for flow diagram */
@media (max-width: 900px) {
  .op-calc-process-diagram {
    flex-direction: column;
    align-items: center;
  }
  
  .op-calc-source-boxes,
  .op-calc-process-boxes,
  .op-calc-treatment-boxes {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    min-width: auto;
    width: 100%;
  }
  
  .op-calc-arrows-section {
    flex-direction: row;
    justify-content: center;
    width: 100%;
  }
  
  .op-calc-flow-arrow {
    transform: rotate(90deg);
  }
}

/* ==========================================================================
   LINEAR Process Flow Diagram - Simple Vertical Layout
   ========================================================================== */

.op-calc-process-flow-linear {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-xl);
  margin-bottom: 20px;
}

/* Flow rows */
.op-calc-flow-row {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.op-calc-sources-row {
  justify-content: space-around;
}

/* Box styling */
.op-calc-box {
  padding: 12px 16px;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0, 0, 0, 0.08);
  min-width: 200px;
  max-width: 280px;
}

.op-calc-box-header {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bluegray-800);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.op-calc-box-flow {
  font-size: var(--font-size-sm);
  color: var(--primary-color, #009688);
  font-weight: 600;
  margin-bottom: 4px;
}

.op-calc-box-efficiency {
  font-size: 0.8rem;
  color: var(--primary-dark, #00796b);
  font-weight: 600;
  margin-bottom: 8px;
  padding: 4px 8px;
  background: rgba(var(--primary-color-rgb, 0, 150, 136), 0.1);
  border-radius: var(--radius-xs);
  display: inline-block;
}

.op-calc-box-params {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.op-calc-param-row {
  display: flex;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--bluegray-600);
}

.op-calc-label {
  font-weight: 600;
  min-width: 45px;
}

.op-calc-power-row {
  margin-top: 6px;
  padding: 8px;
  border-top: 1px dashed rgba(var(--primary-color-rgb, 0, 150, 136), 0.2);
  font-weight: 600;
  color: var(--primary-dark, #00796b);
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 0, 150, 136), 0.08) 0%, rgba(var(--primary-color-rgb, 0, 150, 136), 0.03) 100%);
  border-radius: var(--radius-xs);
}

/* Source box colors - unified teal/green theme */
.op-calc-source-outdoor {
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 0, 150, 136), 0.08) 0%, white 100%);
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.25);
}

.op-calc-source-outdoor .op-calc-box-header {
  color: var(--primary-dark, #00796b);
}

.op-calc-source-indoor {
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 0, 150, 136), 0.08) 0%, white 100%);
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.25);
}

.op-calc-source-indoor .op-calc-box-header {
  color: var(--primary-dark, #00796b);
}

/* Process box colors - unified teal/green theme */
.op-calc-process-recovery {
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 0, 150, 136), 0.08) 0%, white 100%);
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.25);
}

.op-calc-process-recovery .op-calc-box-header {
  color: var(--primary-dark, #00796b);
}

.op-calc-process-mixing {
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 0, 150, 136), 0.08) 0%, white 100%);
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.25);
}

.op-calc-process-mixing .op-calc-box-header {
  color: var(--primary-dark, #00796b);
}

/* Treatment box colors - unified teal/green theme */
.op-calc-treatment-heater {
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 0, 150, 136), 0.08) 0%, white 100%);
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.25);
}

.op-calc-treatment-heater .op-calc-box-header {
  color: var(--primary-dark, #00796b);
}

.op-calc-treatment-cooler {
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 0, 150, 136), 0.08) 0%, white 100%);
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.25);
}

.op-calc-treatment-cooler .op-calc-box-header {
  color: var(--primary-dark, #00796b);
}

/* Supply box - unified teal/green theme */
.op-calc-supply {
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 0, 150, 136), 0.08) 0%, white 100%);
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.25);
  min-width: 280px;
}

.op-calc-supply .op-calc-box-header {
  color: var(--primary-dark, #00796b);
}

/* Treatment row with multiple boxes */
.op-calc-treatment-row {
  gap: 24px;
}

/* Arrows - vertical dashed connectors between flow rows (hidden) */
.op-calc-flow-arrow-down {
  display: none;
}

.op-calc-flow-arrow-down::after {
  display: none;
}

/* Arrow connections between boxes (hidden) */
.op-calc-flow-arrows {
  display: none;
}

.op-calc-arrow-line {
  display: none;
}

/* Vertical lines from source boxes down */
.op-calc-arrow-outdoor-to-recovery {
  left: 25%;
}

.op-calc-arrow-indoor-to-recovery {
  left: 50%;
}

.op-calc-arrow-indoor-to-mixing {
  right: 25%;
}

/* Dark mode for linear diagram */
body.dark-mode .op-calc-process-flow-linear {
  background: rgba(0, 0, 0, 0.3);
}

body.dark-mode .op-calc-box {
  background: var(--bluegray-800);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-md);
}

body.dark-mode .op-calc-box-header {
  color: var(--bluegray-200);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .op-calc-param-row {
  color: var(--bluegray-300);
}

body.dark-mode .op-calc-source-outdoor {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.15) 0%, #37474f 100%);
  border-color: rgba(33, 150, 243, 0.3);
}

body.dark-mode .op-calc-source-outdoor .op-calc-box-header {
  color: #64b5f6;
}

body.dark-mode .op-calc-source-indoor {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, #37474f 100%);
  border-color: rgba(76, 175, 80, 0.3);
}

body.dark-mode .op-calc-source-indoor .op-calc-box-header {
  color: #81c784;
}

body.dark-mode .op-calc-process-recovery {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.15) 0%, #37474f 100%);
  border-color: rgba(156, 39, 176, 0.3);
}

body.dark-mode .op-calc-process-recovery .op-calc-box-header {
  color: #ce93d8;
}

body.dark-mode .op-calc-process-mixing {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.15) 0%, #37474f 100%);
  border-color: rgba(255, 152, 0, 0.3);
}

body.dark-mode .op-calc-process-mixing .op-calc-box-header {
  color: #ffb74d;
}

body.dark-mode .op-calc-treatment-heater {
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.18) 0%, #37474f 100%);
  border-color: rgba(244, 67, 54, 0.35);
}

body.dark-mode .op-calc-treatment-heater .op-calc-box-header {
  color: #ef5350;
}

body.dark-mode .op-calc-treatment-cooler {
  background: linear-gradient(135deg, rgba(3, 169, 244, 0.18) 0%, #37474f 100%);
  border-color: rgba(3, 169, 244, 0.35);
}

body.dark-mode .op-calc-treatment-cooler .op-calc-box-header {
  color: #4fc3f7;
}

body.dark-mode .op-calc-supply {
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 0, 150, 136), 0.18) 0%, #37474f 100%);
  border-color: rgba(var(--primary-color-rgb, 0, 150, 136), 0.35);
}

body.dark-mode .op-calc-supply .op-calc-box-header {
  color: var(--primary-light, #4db6ac);
}

body.dark-mode .op-calc-flow-arrow-down::after {
  border-left-color: var(--bluegray-500);
}

body.dark-mode .op-calc-arrow-line {
  border-left-color: var(--bluegray-500);
}

/* ==========================================================================
   UNIFIED Control Row Styles - Consistent slider/input layout
   ========================================================================== */

.op-calc-unified-control-row {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding: 12px 0;
}

.op-calc-unified-control-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
}

.op-calc-unified-control-item.op-calc-slider-section {
  flex: 1;
  min-width: 280px;
}

.op-calc-unified-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--bluegray-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Slider container with badge */
.op-calc-unified-slider-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.op-calc-unified-slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, #009688 0%, #009688 var(--progress, 100%), #e0e0e0 var(--progress, 100%), #e0e0e0 100%);
  border-radius: var(--radius-xs);
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.op-calc-unified-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--primary-color, #009688);
  border-radius: var(--radius-round);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(var(--primary-color-rgb, 0, 150, 136), 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.op-calc-unified-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 10px rgba(var(--primary-color-rgb, 0, 150, 136), 0.4);
}

.op-calc-unified-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--primary-color, #009688);
  border: none;
  border-radius: var(--radius-round);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(var(--primary-color-rgb, 0, 150, 136), 0.3);
}

/* Stepped slider style (for 3-step controls) */
.op-calc-unified-slider.op-calc-stepped-slider {
  background: var(--gray-300);
  position: relative;
}

.op-calc-unified-slider.op-calc-stepped-slider::-webkit-slider-thumb {
  background: var(--primary-color, #009688);
}

/* Value badge */
.op-calc-unified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  padding: 6px 14px;
  background: var(--primary-color, #009688);
  color: white;
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: var(--radius-xl);
  white-space: nowrap;
}

/* Value container for editable inputs */
.op-calc-unified-value-container {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(var(--primary-color-rgb, 0, 150, 136), 0.06);
  border: 1px solid rgba(var(--primary-color-rgb, 0, 150, 136), 0.15);
  border-radius: var(--radius-md);
  padding: 8px 12px;
}

.op-calc-unified-input {
  border: none !important;
  background: transparent !important;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-color, #009688);
  width: 100px;
  text-align: right;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.op-calc-unified-input:focus {
  outline: none;
}

/* Power input: hide number spinners */
.op-calc-power-input::-webkit-outer-spin-button,
.op-calc-power-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.op-calc-power-input[type=number] {
  -moz-appearance: textfield;
}

.op-calc-unified-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-color, #009688);
}

.op-calc-unified-unit {
  font-size: 0.9rem;
  color: var(--bluegray-400);
  font-weight: 500;
}

/* Power highlight container */
.op-calc-unified-value-container.op-calc-power-highlight {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.08) 0%, rgba(156, 39, 176, 0.04) 100%);
  border-color: rgba(156, 39, 176, 0.2);
}

.op-calc-power-highlight .op-calc-unified-value {
  color: #7b1fa2;
}

/* Select styling */
.op-calc-unified-select {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 12px !important;
  font-size: 0.9rem;
  background: white !important;
}

/* Dark mode for unified controls */
body.dark-mode .op-calc-unified-label {
  color: var(--bluegray-300);
}

body.dark-mode .op-calc-unified-slider {
  background: linear-gradient(to right, var(--primary-light) 0%, var(--primary-light) var(--progress, 100%), #455a64 var(--progress, 100%), #455a64 100%);
}

body.dark-mode .op-calc-unified-slider::-webkit-slider-thumb {
  background: var(--primary-light, #26a69a);
}

body.dark-mode .op-calc-unified-badge {
  background: var(--primary-light, #26a69a);
}

body.dark-mode .op-calc-unified-value-container {
  background: rgba(var(--primary-color-rgb), 0.1);
  border-color: rgba(var(--primary-color-rgb), 0.25);
}

body.dark-mode .op-calc-unified-input {
  color: var(--primary-light, #4db6ac);
}

body.dark-mode .op-calc-unified-value {
  color: var(--primary-light, #4db6ac);
}

body.dark-mode .op-calc-unified-unit {
  color: var(--bluegray-400);
}

body.dark-mode .op-calc-unified-value-container.op-calc-power-highlight {
  background: rgba(206, 147, 216, 0.12);
  border-color: rgba(206, 147, 216, 0.3);
}

body.dark-mode .op-calc-power-highlight .op-calc-unified-value {
  color: #ce93d8;
}

body.dark-mode .op-calc-unified-select {
  background: white !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--bluegray-900);
}

/* Responsive */
@media (max-width: 768px) {
  .op-calc-unified-control-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .op-calc-unified-control-item,
  .op-calc-unified-control-item.op-calc-slider-section {
    min-width: auto;
    width: 100%;
  }
}
/* ==========================================================================
   Mollier Chart Styles
   ========================================================================== */

.mollier-chart-container {
  margin-top: 24px;
  padding: 20px;
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: relative;
}

.mollier-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.mollier-chart-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bluegray-800);
  display: flex;
  align-items: center;
  gap: 8px;
}

.mollier-chart-title::before {
  content: 'show_chart';
  font-family: 'Material Icons';
  font-size: 20px;
  color: var(--primary-color, #009688);
}

.mollier-chart-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mollier-nav-btn {
  background: transparent;
  border: 1px solid rgba(var(--primary-color-rgb, 0, 150, 136), 0.3);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--primary-color, #009688);
}

.mollier-nav-btn:hover {
  background: rgba(var(--primary-color-rgb, 0, 150, 136), 0.1);
  border-color: var(--primary-color, #009688);
}

.mollier-nav-btn .material-icons {
  font-size: 20px;
}

.mollier-mode-label {
  padding: 6px 16px;
  background: linear-gradient(135deg, var(--primary-color, #009688) 0%, var(--primary-dark, #00796b) 100%);
  color: white;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  font-weight: 500;
  min-width: 100px;
  text-align: center;
}

.mollier-fullscreen-btn {
  background: transparent;
  border: 1px solid rgba(var(--primary-color-rgb, 0, 150, 136), 0.3);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--primary-color, #009688);
  margin-left: 8px;
}

.mollier-fullscreen-btn:hover {
  background: rgba(var(--primary-color-rgb, 0, 150, 136), 0.1);
  border-color: var(--primary-color, #009688);
}

.mollier-fullscreen-btn .material-icons {
  font-size: 20px;
}

.mollier-close-fullscreen-btn {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: var(--radius-round);
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 10;
  box-shadow: var(--shadow-md);
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.mollier-close-fullscreen-btn:hover {
  background: #ffffff;
  transform: scale(1.1);
}

.mollier-close-fullscreen-btn .material-icons {
  font-size: 24px;
  color: var(--bluegray-800);
}

.mollier-chart-plotly {
  width: 100%;
  height: 480px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Fullscreen mode - displayed on body, above everything */
.mollier-chart-container.mollier-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 24px;
  border-radius: 0;
  z-index: var(--z-fixed);
  background: #ffffff;
  box-sizing: border-box;
  overflow: auto;
}

.mollier-chart-container.mollier-fullscreen .mollier-close-fullscreen-btn {
  display: flex;
}

.mollier-chart-container.mollier-fullscreen .mollier-fullscreen-btn {
  display: none;
}

.mollier-chart-container.mollier-fullscreen .mollier-chart-plotly {
  height: calc(100vh - 280px);
}

body.mollier-fullscreen-active {
  overflow: hidden;
}

/* Points Table */
.mollier-points-table-wrapper {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.mollier-table-title {
  margin: 0 0 12px 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--bluegray-600);
}

.mollier-points-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.mollier-points-table thead {
  background: var(--bluegray-50);
}

.mollier-points-table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--bluegray-700);
  border-bottom: 2px solid var(--bluegray-100);
  white-space: nowrap;
}

.mollier-points-table th:first-child {
  width: 40px;
  text-align: center;
}

.mollier-points-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--bluegray-50);
  vertical-align: middle;
}

.mollier-points-table tbody tr:hover {
  background: rgba(var(--primary-color-rgb, 0, 150, 136), 0.04);
}

.mollier-table-index {
  text-align: center;
  color: var(--bluegray-400);
  font-weight: 500;
}

.mollier-table-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--bluegray-800);
}

.mollier-point-color {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-round);
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.mollier-table-value {
  text-align: right;
  font-family: 'Roboto Mono', monospace;
  color: var(--bluegray-700);
}

.mollier-table-desc {
  color: var(--bluegray-400);
  font-size: 0.8rem;
  max-width: 200px;
}

/* Dark mode for Mollier Chart */
body.dark-mode .mollier-chart-container {
  background: var(--bluegray-900);
  box-shadow: var(--shadow-lg);
}

body.dark-mode .mollier-chart-title {
  color: var(--bluegray-50);
}

body.dark-mode .mollier-chart-title::before {
  color: var(--primary-light, #4db6ac);
}

body.dark-mode .mollier-nav-btn {
  border-color: rgba(var(--primary-color-rgb), 0.3);
  color: var(--primary-light, #4db6ac);
}

body.dark-mode .mollier-nav-btn:hover {
  background: rgba(var(--primary-color-rgb), 0.15);
  border-color: var(--primary-light, #4db6ac);
}

body.dark-mode .mollier-mode-label {
  background: linear-gradient(135deg, var(--primary-light, #26a69a) 0%, var(--primary-color, #00897b) 100%);
}

body.dark-mode .mollier-fullscreen-btn {
  border-color: rgba(var(--primary-color-rgb), 0.3);
  color: var(--primary-light, #4db6ac);
}

body.dark-mode .mollier-fullscreen-btn:hover {
  background: rgba(var(--primary-color-rgb), 0.15);
  border-color: var(--primary-light, #4db6ac);
}

body.dark-mode .mollier-close-fullscreen-btn {
  background: rgba(38, 50, 56, 0.95);
}

body.dark-mode .mollier-close-fullscreen-btn .material-icons {
  color: var(--bluegray-50);
}

body.dark-mode .mollier-chart-container.mollier-fullscreen {
  background: #1e272c;
}

body.dark-mode .mollier-points-table-wrapper {
  border-top-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .mollier-table-title {
  color: var(--bluegray-300);
}

body.dark-mode .mollier-points-table thead {
  background: var(--bluegray-800);
}

body.dark-mode .mollier-points-table th {
  color: var(--bluegray-200);
  border-bottom-color: var(--bluegray-700);
}

body.dark-mode .mollier-points-table td {
  border-bottom-color: var(--bluegray-800);
}

body.dark-mode .mollier-points-table tbody tr:hover {
  background: rgba(var(--primary-color-rgb), 0.08);
}

body.dark-mode .mollier-table-index {
  color: var(--bluegray-400);
}

body.dark-mode .mollier-table-name {
  color: var(--bluegray-50);
}

body.dark-mode .mollier-table-value {
  color: var(--bluegray-200);
}

body.dark-mode .mollier-table-desc {
  color: var(--bluegray-400);
}

/* Responsive for Mollier */
@media (max-width: 768px) {
  .mollier-chart-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .mollier-chart-controls {
    width: 100%;
    justify-content: center;
  }
  
  .mollier-chart-plotly {
    height: 350px;
  }
  
  .mollier-points-table {
    font-size: var(--font-size-xs);
  }
  
  .mollier-points-table th,
  .mollier-points-table td {
    padding: 8px 6px;
  }
  
  .mollier-table-desc {
    display: none;
  }
}

/* ==========================================================================
   Result Actions Section (Add to card, Add to compare)
   ========================================================================== */

.operating-point-result-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 0, 150, 136), 0.08) 0%, rgba(var(--primary-color-rgb, 0, 150, 136), 0.15) 100%);
  border-top: 1px solid rgba(var(--primary-color-rgb, 0, 150, 136), 0.2);
  margin-top: 16px;
  flex-wrap: wrap;
}

.operating-point-result-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  height: 40px;
  font-weight: 500;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.operating-point-result-actions .btn-flat {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: none;
}

.operating-point-result-actions .btn-flat:hover {
  background: rgba(255, 255, 255, 0.95);
}

body.dark-mode .operating-point-result-actions {
  background: linear-gradient(135deg, #1e3a5f 0%, #0d47a1 100%);
  border-top-color: rgba(100, 181, 246, 0.3);
}

body.dark-mode .operating-point-result-actions .btn-flat {
  background: rgba(38, 50, 56, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--bluegray-200);
}

body.dark-mode .operating-point-result-actions .btn-flat:hover {
  background: rgba(55, 71, 79, 0.9);
  color: var(--bluegray-50);
}

/* ==========================================================================
   Operating Point Section in Device Card (seasonal layout)
   ========================================================================== */

.device-info-section--operating-point {
  margin-top: 24px;
}

.device-info-section-card--operating-point {
  background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e9 50%, #e3f2fd 100%);
  border-left: 4px solid #4caf50;
  padding: 16px;
  border-radius: var(--radius-md);
}

/* Naglowek Punktu pracy korzysta z ujednoliconego stylu naglowkow karty
   urzadzenia (zob. .device-info-body .device-info-section-title w core/style.css) -
   bez wlasnego koloru/rozmiaru, by byl spojny z pozostalymi sekcjami. */

/* Operating Point Seasons Container */
.op-seasons-container {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.op-season-column {
  flex: 1;
  min-width: 280px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-md);
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.op-season-winter {
  border-left: 3px solid #2196f3;
}

.op-season-summer {
  border-left: 3px solid #ff9800;
}

.op-season-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.op-season-winter .op-season-header {
  color: #1565c0;
}

.op-season-summer .op-season-header {
  color: #ef6c00;
}

.op-season-header .material-icons {
  font-size: 18px;
}

.op-section {
  margin-bottom: 12px;
}

.op-section:last-child {
  margin-bottom: 0;
}

.op-section-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bluegray-600);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.op-section-results {
  background: rgba(76, 175, 80, 0.08);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-top: 8px;
}

.op-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: var(--font-size-sm);
}

.op-row-highlight {
  background: rgba(255, 193, 7, 0.15);
  margin: 4px -6px;
  padding: 8px 6px;
  border-radius: var(--radius-xs);
}

.op-label {
  color: var(--bluegray-700);
  flex-shrink: 0;
}

.op-value {
  font-weight: 500;
  color: var(--bluegray-900);
  text-align: right;
}

.op-value-primary {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2e7d32;
}

.op-timestamp {
  font-size: var(--font-size-xs);
  color: var(--bluegray-400);
  text-align: right;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.op-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff3e0;
  border: 1px solid #ffb74d;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  font-size: var(--font-size-sm);
  color: #e65100;
}

.op-warning .material-icons {
  color: #f57c00;
}

/* Operating Point Actions - styled like START section buttons */
.operating-point-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.operating-point-actions .btn-start-primary,
.operating-point-actions .btn-start-secondary {
  width: 100%;
  max-width: 350px;
}

/* Result Actions - NOT on green background */
.operating-point-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  padding: 24px;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.operating-point-result-actions .btn-start-secondary {
  flex: 0 1 auto;
  min-width: 240px;
}

/* Dark mode for result actions */
body.dark-mode .operating-point-result-actions {
  background: #1e2428;
  border-color: rgba(255, 255, 255, 0.08);
}

/* Dark mode for operating point actions */
body.dark-mode .operating-point-actions {
  border-top-color: rgba(255, 255, 255, 0.08);
}

@media (min-width: 768px) {
  .operating-point-actions {
    flex-direction: row;
    justify-content: center;
  }
  
  .operating-point-actions .btn-start-primary,
  .operating-point-actions .btn-start-secondary {
    width: auto;
  }
}

.operating-point-recalc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--primary-dark, #00796b);
  background: transparent;
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(0, 121, 107, 0.3);
  cursor: pointer;
  transition: all 0.2s;
}

.operating-point-recalc-btn:hover {
  background: rgba(0, 121, 107, 0.08);
  border-color: var(--primary-dark, #00796b);
}

.operating-point-recalc-btn .material-icons {
  font-size: 16px;
}

/* Dark mode for Operating Point Section */
body.dark-mode .device-info-section-card--operating-point {
  background: linear-gradient(135deg, #1b2e1b 0%, #1e3a2c 50%, #1a2f4a 100%);
  border-left-color: #66bb6a;
}

body.dark-mode .device-info-section--operating-point .device-info-section-title {
  color: #81c784;
}

body.dark-mode .op-season-column {
  background: rgba(30, 40, 50, 0.8);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .op-season-winter .op-season-header {
  color: #64b5f6;
}

body.dark-mode .op-season-summer .op-season-header {
  color: #ffb74d;
}

body.dark-mode .op-section-title {
  color: var(--bluegray-300);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .op-section-results {
  background: rgba(255, 255, 255, 0.04);
}

body.dark-mode .op-row-highlight {
  background: rgba(255, 193, 7, 0.1);
}

body.dark-mode .op-label {
  color: var(--bluegray-300);
}

body.dark-mode .op-value {
  color: var(--bluegray-50);
}

body.dark-mode .op-value-primary {
  color: #81c784;
}

body.dark-mode .op-timestamp {
  color: var(--bluegray-500);
  border-top-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .op-warning {
  background: rgba(255, 152, 0, 0.15);
  border-color: #ff9800;
  color: #ffb74d;
}

body.dark-mode .op-warning .material-icons {
  color: #ffc107;
}

body.dark-mode .operating-point-recalc-btn {
  color: var(--primary-light, #4db6ac);
  border-color: rgba(var(--primary-color-rgb), 0.3);
}

body.dark-mode .operating-point-recalc-btn:hover {
  background: rgba(var(--primary-color-rgb), 0.15);
  border-color: var(--primary-light, #4db6ac);
}

/* Responsive for Operating Point Section */
@media (max-width: 640px) {
  .op-seasons-container {
    flex-direction: column;
  }
  
  .op-season-column {
    min-width: 100%;
  }
  
  .op-row {
    font-size: 0.8rem;
  }
  
  .op-value-primary {
    font-size: var(--font-size-base);
  }
}

/* ==========================================================================
   Comparison View - Operating Point Enhancements
   ========================================================================== */

/* Recalculate all button in comparison header */
.device-compare-recalc-btn {
  color: var(--primary-strong);
  border: 1px solid rgba(0, 137, 123, 0.3);
  border-radius: var(--radius-xs);
  margin-right: 8px;
  padding: 0 12px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.device-compare-recalc-btn:hover {
  background: rgba(0, 137, 123, 0.1);
  border-color: var(--primary-strong);
}

.device-compare-recalc-btn .material-icons {
  font-size: 18px;
}

body.dark-mode .device-compare-recalc-btn {
  color: var(--primary-light, #4db6ac);
  border-color: rgba(var(--primary-color-rgb), 0.3);
}

body.dark-mode .device-compare-recalc-btn:hover {
  background: rgba(var(--primary-color-rgb), 0.15);
  border-color: var(--primary-light, #4db6ac);
}

/* Warning for different calculation conditions */
.device-compare-conditions-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.08), rgba(255, 193, 7, 0.08));
  border: 1px solid rgba(255, 152, 0, 0.3);
  border-radius: var(--radius-md);
  margin: 8px 0 16px 0;
  color: #e65100;
  font-size: 0.9rem;
}

.device-compare-conditions-warning .material-icons {
  font-size: 24px;
  color: #ff9800;
  flex-shrink: 0;
}

.device-compare-conditions-warning span {
  flex: 1;
}

.device-compare-conditions-warning .btn-small {
  flex-shrink: 0;
  background: #ff9800;
  height: 32px;
  line-height: 32px;
}

.device-compare-conditions-warning .btn-small:hover {
  background: #f57c00;
}

body.dark-mode .device-compare-conditions-warning {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.1), rgba(255, 193, 7, 0.1));
  border-color: rgba(255, 152, 0, 0.4);
  color: #ffb74d;
}

body.dark-mode .device-compare-conditions-warning .material-icons {
  color: #ffc107;
}

/* Shared Conditions Modal */
#sharedConditionsModal .modal-content {
  padding: 24px;
}

#sharedConditionsModal h5 {
  margin-top: 0;
  font-size: 1.3rem;
  color: var(--bluegray-900);
}

#sharedConditionsModal h6 {
  font-size: var(--font-size-base);
  color: var(--bluegray-600);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}

#sharedConditionsModal h6 label {
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
}

#sharedConditionsModal .divider {
  margin: 16px 0;
}

#sharedConditionsModal .input-field {
  margin-bottom: 8px;
}

#sharedConditionsModal .input-field label {
  font-size: var(--font-size-sm);
}

body.dark-mode #sharedConditionsModal h5 {
  color: var(--bluegray-50);
}

body.dark-mode #sharedConditionsModal h6 {
  color: var(--bluegray-300);
}

/* ==========================================================================
   Source Power Section (boilers, heat pumps, VRF, chillers)
   ========================================================================== */

.source-stage-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 12px;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 0.9rem;
}

.source-stage-label input[type="radio"] {
  margin: 0;
}

.source-stage-label:has(input:checked) {
  background: #e8f5e9;
  border-color: #4caf50;
}

body.dark-mode .source-stage-label {
  border-color: var(--bluegray-700);
  color: var(--bluegray-200);
}

body.dark-mode .source-stage-label:has(input:checked) {
  background: rgba(76, 175, 80, 0.15);
  border-color: #4caf50;
}