@import url("colors.css");
  .nav-icon { height: 40px; width: 40px; margin-right: 5px; vertical-align: middle; }
  .nav-home { color: var(--color-h2) !important; }
  .nav-h2pp { color: var(--color-h2pp) !important; }
  .nav-storage { color: var(--color-storage) !important; }
  .nav-transport { color: var(--color-transport) !important; }
  .nav-applications { color: var(--color-applications) !important; }
  .nav-settings { color: var(--color-settings) !important; }
  .container-section { margin-top: 30px; }

  /* Botones modernos */
  .btn-custom {
    color: var(--color-button);
    background-color: transparent; /* asegura fondo inicial */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px;
    font-size: 1.2rem;
    border-radius: 10px;
    margin: 10px 0;
    transition: background-color 0.3s, transform 0.3s, color 0.3s;
  }

  .btn-custom img {
    width: 40px;
    margin-right: 10px;
  }

  /* Aquí se aplica el hover al botón directamente */
  .btn-custom:hover {
    background-color: var(--color-applications) !important;
    color: var(--btn-custom-hover-text);
    transform: scale(1.05);
  }
  .btn-custom.btn-power:hover {
    background-color: var(--color-power) !important;
    color: var(--btn-custom-hover-text) !important;
    transform: scale(1.05);
  }
  .btn-custom.btn-uses:hover {
    background-color: var(--color-uses) !important;
    color: var(--btn-custom-hover-text) !important;
    transform: scale(1.05);
  }
  .btn-custom.btn-transport:hover {
    background-color: var(--color-transport) !important;
    color: var(--btn-custom-hover-text) !important;
    transform: scale(1.05);
  }
  .btn-custom.btn-h2:hover {
    background-color: var(--color-h2) !important;
    color: var(--btn-custom-hover-text) !important;
    transform: scale(1.05);
  }
  /* Asegura que los labels e íconos también se vean blancos */
  .btn-custom:hover label{
    color:var(--btn-custom-hover-text) !important;
  }


  .btn-custom2 {
    color: var(--color-button2);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px;
    font-size: 1.2rem;
    border-radius: 10px;
    margin: 10px 0;
    transition: background-color 0.3s, transform 0.3s;
  }
  .btn-custom2 img {
    width: 40px;
    margin-right: 10px;
  }
  .btn-custom2:hover {
    background-color: var(--color-button2);
    color: var(--btn-custom-hover-text);
    transform: scale(1.05);
  }

  /* Estilo de la imagen */
  .image-container img {
    width: 100%;
    max-width: 400px;
    height: auto;
  }
  .card-header {
    background-color: var(--card-header-bg);
    color: var(--color-applications);
    font-size: 1rem;
    text-align: center;
    padding: 10px;
  }
/* Encabezado pantallas*/
h1 {
  font-size: 3rem;
}
/* Encabezados de las diferentes columnas */
h2 {
  font-size: 1.8rem;
}
.btn-customer-fleet {
  border: 2px solid var(--color-uses);
  border-radius: 10px;
  color: var(--color-uses);
  cursor: pointer;
  padding: 15px;
  display: block;
  text-align: center;
  transition: all 0.2s ease;
  user-select: none;
}
 
.btn-customer-fleet input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
 
.btn-customer-fleet img {
  max-width: 100%;
}
 
.btn-customer-fleet.active {
  border-color: var(--color-uses);
  box-shadow: 0 0 10px 2px var(--color-uses);
  transform: scale(1.03);
}
.col-h2 {
  color: var(--color-h2);
}
.col-power {
  color: var(--color-power);
}
.col-h2pp {
  color: var(--color-h2pp);
}
.col-storage {
  color: var(--color-storage);
}
.col-transport {
  color: var(--color-transport);
}
.col-applications {
  color: var(--color-applications);
}
.col-uses {
  color: var(--color-uses);
}
.col-financial {
  color: var(--color-financial);
}
.col-settings {
  color: var(--color-settings);
}

.formBlock {
  margin: 2% auto
}
.profi_item {
  display: flex;
  flex-direction: row;

}

.row1 {
  display: flex;
}

.column1 {
  flex: 50%;
  margin-left: 5px;
}
img{
  max-width: 100%;
  max-height: 100%;
        
}
.tab {
  overflow: hidden;
  border: 1px solid var(--tab-border);
  background-color: var(--tab-bg);
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: var(--tab-hover-bg);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: var(--tab-active-bg);
}
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid var(--tab-border);
  border-top: none;
}
.box_res{
   border: 1px solid var(--box-res-border);
}
.result-section{
  background-color: var(--result-section-bg);
  border: 2px solid var(--result-section-border);
  border-radius: 10px;
  padding: 15px;
}


/* Buttons for hotels*/
.type-selector img {
  width: 60px;
  height: 60px;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.type-selector img.selected {
  border-color: var(--color-financial); /* color azul de Bootstrap */
  box-shadow: 0 0 5px var(--color-financial);
}

.star-selector img {
    width: 35px;
    height: 35px;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.star-selector img:hover {
    transform: scale(1.1);
}

/* Button for new customers */
.btn-customer {
  color: var(--color-power);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px;
  font-size: 1.2rem;
  border-radius: 10px;
  margin: 10px 0;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  background-color: var(--btn-customer-bg);
}
.btn-customer img {
  width: 40px;
  margin-right: 10px;
}
.btn-customer:hover {
  background-color: var(--color-power);
  color: var(--btn-customer-hover-text) !important;
  transform: scale(1.20);
}
.btn-customer:focus {
  box-shadow: 0 0 10px var(--color-uses);
}
.btn-customer.active {
  box-shadow: 0 0 10px 2px var(--color-uses);
  border-color: var(--color-uses);
}


/* Title of page*/
.title-row {
  display: flex;
  justify-content: center; /* centra horizontalmente */
  align-items: center;
  gap: 10px; /* espacio entre el título y el botón */
  margin-bottom: 10px;
}
.title-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.title-button img {
  width: 24px; /* ajusta el tamaño según necesites */
  height: 24px;
}
.title-button:hover{
  transform: scale(1.10);
}

/* Discreet link to an FHA project catalogue (basic/_fha_projects_link.html) */
.fha-projects-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 3px;
  border: 1px solid var(--fha-link-border);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--fha-link-text);
  text-decoration: none;
  background: transparent;
  transition: border-color .15s, color .15s;
}
.fha-projects-link img { width: 18px; height: 18px; border-radius: 50%; opacity: .85; }
.fha-projects-link:hover { border-color: var(--fha-link-hover-border); color: var(--fha-link-hover-text); }
.fha-projects-link:hover img { opacity: 1; }

/* Modal base */
.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--modal-backdrop);
}

/* Modal content */
.modal-content {
  background-color: var(--modal-bg);
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 400px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; /* centra horizontalmente todo el contenido */
}
.modal-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}
/* Wide modal for embedded tools (Energy Profile Builder, etc.) */
.modal-content-xl {
  width: 95%;
  max-width: 1400px;
  max-height: 90vh;
  overflow-y: auto;
  text-align: left;
  align-items: stretch;
  margin: 2% auto;
  padding: 24px 28px;
}
/* Wide modal-content override for Bootstrap-driven modals (.modal.fade > .modal-dialog),
   which already handle their own centering/flex layout — unlike .modal-content-xl above,
   this must not set margin/align-items and fight Bootstrap's own modal-content defaults. */
.modal-content-bs-xl {
  width: 100%;
  max-width: none;
}
/* Close button */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}

/* Buttons for Home screen */
.btn-icon {
  background: none;
  border: none;
  padding: 10px;
  transition: transform 0.3s ease;
}
.btn-icon img {
  width: 64px; /* ajusta tamaño base */
  transition: transform 0.3s ease;
}
.btn-icon:hover img {
  transform: scale(1.45); /* agranda solo el icono */
  cursor: pointer;
}

.rounded-label {
  white-space: nowrap;
  color: var(--rounded-label-text);
  padding: 6px 12px;
  border-radius: 50px;
  display: flex;
  font-weight: bold;
  font-size: clamp(10px, 1.2vw, 16px);
  text-align: center;
  min-width: 80px;
  align-items: center;
  justify-content: center;
}


/* User profile button */
.btn-user {
  background-color: var(--btn-user-bg);
  color: var(--btn-user-text);
  opacity: 1;
  border-radius: 10px;
  border: None;
  width: 100%;
}
.btn-user:hover {
  background-color: var(--btn-user-bg);
  /*color: white;*/
  transform: scale(1.15);
}

/* Input field */
.form-control{
  text-align: center;
}
.form-control.imp{
  border: 1px solid var(--color-h2);
}
.form-control.std{
  background-color: var(--color-light-grey);
}

/* Tab settings */
.nav-link.active{
  font-weight: bold;
}

/* Icon button */
.icon-button {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}


.table-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.plants-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.plants-table thead th {
  padding: 0.6rem 1rem;
  background: var(--color-h2);
  color: var(--plants-table-head-text);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 33.33%;
  text-align: left;
}

.plants-table tbody td {
  padding: 0.75rem 1rem;
  vertical-align: top;
  border-right: 1px solid color-mix(in srgb, var(--color-h2) 20%, transparent);
}

.plants-table tbody td:last-child {
  border-right: none;
}

.plants-table-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.2rem 0;
  font-size: 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}

.plants-table-row:last-child {
  border-bottom: none;
}

.plants-table-row span {
  color: var(--color-text-muted);
}

.plants-table-row strong {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.plants-table-row--total {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 2px solid color-mix(in srgb, var(--color-h2) 40%, transparent) !important;
}

.plants-table-row--total strong {
  color: var(--color-h2);
}

.plants-table-footer td {
  background: color-mix(in srgb, var(--color-h2) 8%, transparent);
  padding: 0.6rem 1rem;
}

.plants-table-row--balance strong {
  color: var(--color-h2);
  font-size: 1rem;
}
/*blur*/
.h2prod-results-shell {
  position: relative;
  min-height: 280px;
}

.h2prod-results-content {
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.h2prod-results-shell.is-busy .h2prod-results-content {
  filter: blur(3px);
  opacity: 0.45;
  transform: scale(0.995);
  pointer-events: none;
  user-select: none;
}

.h2prod-results-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  border-radius: 12px;
  background: var(--h2prod-overlay-bg);
  backdrop-filter: blur(2px);
  z-index: 5;
}

.h2prod-results-shell.is-busy .h2prod-results-overlay {
  display: flex;
}

.h2prod-overlay-card {
  min-width: 220px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--h2prod-overlay-card-bg);
  box-shadow: 0 8px 24px var(--h2prod-overlay-card-shadow);
  text-align: center;
  color: var(--h2prod-overlay-text);
  font-weight: 600;
}

.h2prod-overlay-gif {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.h2prod-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--h2prod-chip-bg);
  color: var(--h2prod-chip-text);
  font-size: 13px;
}
.h2prod-status-slot {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
.nav-process-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.nav-process-indicator {
  display: inline-flex;
  align-items: center;
  min-width: 18px;
  min-height: 18px;
}

.nav-process-indicator img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.h2prod-sim-btn {
  min-width: 180px;
  transition: 0.2s ease;
}

.h2prod-sim-btn-active {
  background-color: var(--color-h2);
  border-color: var(--color-h2);
  color: var(--sim-btn-active-text);
}

.h2prod-sim-btn-disabled {
  background-color: var(--sim-btn-disabled-bg) !important;
  border-color: var(--sim-btn-disabled-bg) !important;
  color: var(--sim-btn-disabled-text) !important;
  cursor: not-allowed !important;
  pointer-events: none;
  opacity: 1;
}

.h2prod-status-slot {
  display: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.h2prod-status-slot.is-active {
  display: block;
}

.h2prod-sim-btn-active {
  background: var(--color-h2pp);
  border-color: var(--color-h2pp);
  color: var(--sim-btn-active-text);
}

.h2prod-sim-btn-disabled {
  background: var(--sim-btn-disabled-strong-bg);
  border-color: var(--sim-btn-disabled-strong-bg);
  color: var(--sim-btn-disabled-strong-text);
  cursor: not-allowed;
  opacity: 1;
}

#simulate-btn[disabled],
#simulate-btn:disabled {
  background-color: var(--simulate-btn-disabled-bg) !important;
  border-color: var(--simulate-btn-disabled-bg) !important;
  color: var(--simulate-btn-disabled-text) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.password-group .password-toggle-btn {
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  }

.password-group .password-toggle-btn:hover {
    background-color: var(--password-toggle-hover-bg);
  }

.password-group .password-toggle-btn:active {
    transform: scale(0.92);
  }

.password-group .password-toggle-btn.is-active {
    background-color: var(--password-toggle-active-bg);
    box-shadow: inset 0 0 0 1px var(--password-toggle-active-ring);
  }

.password-group .admin-password-input:focus + .password-toggle-btn {
    background-color: var(--password-toggle-focus-bg);
  }


.modal-simulation-modal-content {
    max-width: 440px;
    min-height: 430px;
    padding: 30px 34px;
    border-radius: 16px;
    text-align: center;
}

.modal-simulation-header {
    margin-bottom: 18px;
}

.modal-simulation-main-icon {
    width: 90px;
    margin-bottom: 12px;
}

.modal-simulation-title {
    color: var(--color-applications);
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 6px;
}

.modal-simulation-subtitle {
    color: var(--modal-sim-subtitle);
    font-size: 14px;
    margin-bottom: 0;
}

.modal-simulation-message {
    font-size: 16px;
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 16px;
}

.modal-simulation-details {
    margin-top: 12px;
    text-align: left;
    font-size: 14px;
    color: var(--modal-sim-details-text);
    background: var(--modal-sim-details-bg);
    border-radius: 10px;
    padding: 14px 18px;
}

.modal-simulation-progress-wrapper {
    width: 100%;
    background: var(--modal-sim-progress-bg);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 18px;
    height: 20px;
}

.modal-simulation-progress-bar {
    width: 0%;
    height: 100%;
    background: var(--color-applications);
    transition: width 0.3s ease;
}

.modal-simulation-progress-text {
    margin-top: 8px;
    font-weight: 700;
    color: var(--color-applications);
}

.modal-simulation-actions {
    margin-top: 22px;
}
#hrsSimulationCancelBtn:disabled,
#hrsSimulationCancelBtn.disabled {
    background-color: var(--cancel-btn-disabled-bg);
    border-color: var(--cancel-btn-disabled-bg);
    color: var(--cancel-btn-disabled-text);
    opacity: 1;
    cursor: not-allowed;
}

#h2prodSimulationCancelBtn:disabled,
#h2prodSimulationCancelBtn.disabled {
    background-color: var(--cancel-btn-disabled-bg);
    border-color: var(--cancel-btn-disabled-bg);
    color: var(--cancel-btn-disabled-text);
    opacity: 1;
    cursor: not-allowed;
}



.controls{
    text-align:center;
    margin-bottom:25px;
}
.controls .btn{
    padding:5px 20px;
    font-size:16px;
    color: var(--controls-btn-text);
}
.controls .btn.h2{
    background-color: var(--color-h2);
}
.controls .btn.power{
    background-color: var(--color-power);
}

input{
    padding:6px;
    font-size:15px;
}

.active-scenario-bar {
  background: var(--color-bg-h2);
  border-bottom: 1px solid var(--color-border-h2);
}

.active-scenario-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 6px 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--scenario-bar-text);
  font-size: 0.92rem;
}

.active-scenario-label {
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-h2);
}

.active-scenario-name {
  font-weight: 700;
  color: var(--scenario-name-text);
  padding: 3px 10px;
  border-radius: 8px;
  background: var(--scenario-name-bg);
  border: 1px solid var(--color-border-h2);
}

.active-scenario-description {
  color: var(--scenario-desc-text);
}

.active-scenario-link {
  color: var(--color-h2);
  font-weight: 700;
  text-decoration: none;
}

.active-scenario-link:hover {
  text-decoration: underline;
}

/* Summary map pins: white badge ringed in the module colour; clusters show the count */
.summary-pin { background: none; border: 0; }
.summary-pin .pin-ring {
  width: 100%; height: 100%;
  background: var(--color-surface);
  border: 3px solid var(--pin-c, var(--color-h2));
  border-radius: 50%;
  box-shadow: 0 1px 5px var(--shadow-25);
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
.summary-pin img { width: 20px; height: 20px; object-fit: contain; display: block; }
.summary-cluster {
  background: var(--color-h2);
  color: var(--color-text-on-color);
  border: 3px solid var(--color-surface);
  border-radius: 50%;
  box-shadow: 0 1px 6px var(--shadow-25);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem;
  box-sizing: border-box;
}
.summary-map-popup {
  min-width: 220px;
  display: grid;
  gap: 6px;
  color: var(--map-popup-text);
}

.summary-map-title {
  font-weight: 800;
  color: var(--color-h2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--map-title-border);
}

.summary-map-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  font-size: 0.86rem;
}

.summary-map-row span {
  color: var(--map-row-label);
}

.summary-map-row strong {
  color: var(--map-row-value);
  text-align: right;
}

.results-pending {
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}


/* ═══════════════════════════════════════════════════════
   SIDEBAR – Module Library
═══════════════════════════════════════════════════════ */

/* ── Toggle tab (always on-screen) ── */
.sidebar-toggle-tab {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1040;
    background: linear-gradient(180deg, var(--color-h2pp) 0%, var(--color-h2) 100%);
    color: var(--sidebar-tab-text);
    border: none;
    border-radius: 0 12px 12px 0;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 2px 10px var(--sidebar-tab-shadow);
    transition: padding 0.18s, opacity 0.2s;
}
.sidebar-toggle-tab:hover { padding-left: 11px; }
.sidebar-toggle-tab--hidden { opacity: 0; pointer-events: none; }
.sidebar-toggle-label {
    writing-mode: vertical-rl;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ── Overlay ── (below Bootstrap modal backdrop 1050 / modal 1055) */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: var(--sidebar-overlay);
    z-index: 1043;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.sidebar-overlay--visible {
    opacity: 1;
    pointer-events: all;
}

/* ── Panel ── */
.sidebar-panel {
    position: fixed;
    top: 0;
    left: -300px;
    width: 280px;
    height: 100vh;
    background: var(--sidebar-bg);
    z-index: 1045;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 20px var(--sidebar-shadow);
    transition: left 0.3s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.sidebar-panel--open { left: 0; }

/* ── Header ── */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background-image: linear-gradient(180deg, var(--navbar-gradient-top) 0%, var(--navbar-bg) 100%);
    box-shadow: 0 2px 10px var(--sidebar-header-shadow);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.sidebar-logo-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.sidebar-logo { width: 40px; height: 40px; object-fit: contain; }
.sidebar-logo-text {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--sidebar-ink);
    letter-spacing: 0.01em;
}
.sidebar-close-btn {
    background: none;
    border: none;
    color: var(--sidebar-ink);
    cursor: pointer;
    padding: 6px;
    border-radius: 999px;
    line-height: 1;
    opacity: 0.75;
    transition: background-color 0.18s, opacity 0.18s;
}
.sidebar-close-btn:hover { opacity: 1; background: var(--sidebar-close-hover-bg); }

/* ── Body (scrollable) ── */
.sidebar-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 8px;
}
.sidebar-loading {
    padding: 24px 16px;
    display: flex;
    align-items: center;
}

/* ── Scenario block (mirrors .active-scenario-bar) ── */
.sidebar-scenario-block {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--color-border-h2);
    background: var(--color-bg-h2);
}
.sidebar-scenario-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-h2);
    margin-bottom: 5px;
}
.sidebar-scenario-block .form-select {
    font-weight: 700;
    color: var(--sidebar-ink);
    border-color: var(--color-border-h2);
    border-radius: 8px;
    cursor: pointer;
}
.sidebar-scenario-block .form-select:focus {
    border-color: var(--color-h2);
    box-shadow: 0 0 0 0.2rem var(--sidebar-select-focus-ring);
}
.sidebar-scenario-desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Category (collapsible details/summary) — a white card with its module colour on
   top, like the simulation cards; title in the module colour, like the navbar ── */
.sidebar-category {
    margin: 10px 10px 0;
    border: 1px solid var(--color-border-light);
    border-top: 4px solid var(--cat-color);
    border-radius: 10px;
    overflow: hidden;
    background: var(--sidebar-category-bg);
}
.sidebar-category > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    color: var(--cat-color);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s;
}
.sidebar-category > summary:hover { background: color-mix(in srgb, var(--cat-color) 7%, var(--color-tint-base)); }
.sidebar-category[open] > summary { border-bottom: 1px solid var(--color-border-light); }
.sidebar-category > summary::-webkit-details-marker { display: none; }
.sidebar-category > summary::marker { display: none; }
.sidebar-cat-icon {
    width: 30px; height: 30px; padding: 4px;
    background: var(--sidebar-chip-bg); border-radius: 50%;
    box-shadow: 0 1px 4px var(--sidebar-chip-shadow);
    object-fit: contain; flex-shrink: 0;
}
.sidebar-chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    opacity: 0.85;
}
.sidebar-category:not([open]) .sidebar-chevron { transform: rotate(-90deg); }

/* ── Module item ── */
.sidebar-cat-body { padding: 4px; }
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.85rem;
    transition: background-color 0.15s;
}
.sidebar-item:hover { background: color-mix(in srgb, var(--cat-color) 9%, var(--color-tint-base)); color: var(--sidebar-item-hover-text); }
.sidebar-item--has-data { font-weight: 600; }
/* Module of the current page (same role as .nav-item.active in the navbar) */
.sidebar-item--current {
    background: color-mix(in srgb, var(--cat-color) 13%, var(--color-tint-base));
    color: var(--sidebar-item-hover-text);
    font-weight: 700;
}
.sidebar-item--current:hover { background: color-mix(in srgb, var(--cat-color) 18%, var(--color-tint-base)); }
.sidebar-item-icon { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.sidebar-item-name { flex: 1; }

/* ── Status dots ── */
.sidebar-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.sidebar-dot--ok    { background: var(--color-power); box-shadow: 0 0 4px color-mix(in srgb, var(--color-power) 55%, transparent); }
.sidebar-dot--data  { background: var(--color-financial); }
.sidebar-dot--empty { background: var(--color-disabled); }

/* ── Legend ── */
.sidebar-legend {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px;
    margin: 10px 10px 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border-light);
}
.sidebar-legend span { display: flex; align-items: center; gap: 7px; }

/* ── Footer ── */
.sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--color-border-light);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sidebar-footer-link {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    font-size: 0.82rem;
    color: var(--color-dark-grey);
    text-decoration: none;
    text-align: left;
    padding: 5px 6px;
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    transition: background 0.15s;
}
.sidebar-footer-link:hover { background: var(--color-light-grey); color: var(--sidebar-item-hover-text); }
.sidebar-footer-icon { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-footer-icon--refresh { color: var(--color-power); }

/* ═══════════════════════════════════════════════════════
   NAVBAR (templates/basic/navbar.html)
   Light-blue gradient bar; every item is a rounded pill: the module icon on a white
   round chip + its label in a darkened tone of the module colour (readable on the
   blue, contrast >= 4.5:1). The current section is a white pill underlined in its colour.
   Bootstrap's CSS loads after this file, so rules that override it carry .navbar.htp-navbar.
═══════════════════════════════════════════════════════ */
.navbar.htp-navbar {
  --nav-ink: var(--navbar-ink);
  background-color: var(--navbar-bg);
  background-image: linear-gradient(180deg, var(--navbar-gradient-top) 0%, var(--navbar-bg) 100%);
  box-shadow: 0 2px 10px var(--navbar-shadow);
  padding: 4px 14px;
  position: relative;
}
.htp-navbar .navbar-toggler { border-color: var(--navbar-toggler-border); }
.htp-navbar .navbar-nav { gap: 4px; align-items: center; }
.htp-navbar .nav-item { display: flex; align-items: center; }

.htp-navbar .nav-link {
  --nav-c: var(--nav-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--nav-c) 56%, var(--navbar-label-shade)) !important;
  transition: background-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.htp-navbar .nav-link:hover { background-color: var(--navbar-item-hover-bg); transform: translateY(-1px); }
.htp-navbar .nav-item.active > .nav-link {
  background-color: var(--navbar-item-active-bg);
  box-shadow: 0 2px 6px var(--navbar-item-active-shadow), inset 0 -3px 0 var(--nav-c);
}
.htp-navbar .nav-home         { --nav-c: var(--color-h2); }
.htp-navbar .nav-h2pp         { --nav-c: var(--color-h2pp); }
.htp-navbar .nav-storage      { --nav-c: var(--color-storage); }
.htp-navbar .nav-transport    { --nav-c: var(--color-transport); }
.htp-navbar .nav-applications { --nav-c: var(--color-applications); }
.htp-navbar .nav-settings     { --nav-c: var(--color-settings); }
.htp-navbar .nav-learning     { --nav-c: var(--color-learning); }
.htp-navbar .nav-land         { --nav-c: var(--color-land); }
.htp-navbar .nav-social       { --nav-c: var(--color-social); }
.htp-navbar .nav-financial    { --nav-c: var(--color-financial); }
.htp-navbar .nav-co2          { --nav-c: var(--color-co2); }
.htp-navbar .nav-standards    { --nav-c: var(--color-standards); }
.htp-navbar .nav-safety       { --nav-c: var(--navbar-safety-color); }

/* Icons on a white round chip so the coloured module icons stay legible on the blue */
.htp-navbar .nav-icon {
  height: 36px; width: 36px; margin: 0; padding: 5px;
  background: var(--navbar-chip-bg); border-radius: 50%;
  box-shadow: 0 1px 4px var(--navbar-chip-shadow);
  object-fit: contain;
  flex-shrink: 0;
}
.htp-navbar .nav-label { font-size: 0.92rem; white-space: nowrap; }
.htp-navbar .nav-process-inline { gap: 6px; }
.htp-navbar .nav-process-indicator:not(:has(*)) { display: none; }   /* no empty gap when idle */

/* Logo */
.htp-navbar .nav-logo { padding: 2px !important; margin-right: 6px; }
.htp-navbar .nav-logo:hover { background: none; transform: none; }
.htp-navbar .nav-logo-img { height: 54px; width: auto; display: block; }

/* Settings / Summary / Learning / Safety / Standards: a separated group */
.htp-navbar .nav-item--group-start { margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--navbar-divider); }

/* Public menu */
.htp-navbar .dropdown-toggle { padding-left: 12px; }
.htp-navbar .dropdown-menu {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 8px 24px var(--navbar-dropdown-shadow);
  padding: 6px;
}
.htp-navbar .dropdown-item { border-radius: 8px; font-weight: 500; }

/* Simulations dropdown: all-simulations page + each module's page */
.htp-navbar .nav-sims > .dropdown-toggle { padding-left: 4px; }
.htp-navbar .nav-sims-menu { min-width: 230px; }
.htp-navbar .nav-sims-menu .dropdown-item {
  --nav-c: var(--color-h2);
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  color: color-mix(in srgb, var(--nav-c) 70%, var(--color-text)) !important; font-weight: 600;
}
.htp-navbar .nav-sims-menu .dropdown-item:hover { background: color-mix(in srgb, var(--nav-c) 10%, transparent); }
.htp-navbar .nav-sims-menu .dropdown-item.active {
  background: color-mix(in srgb, var(--nav-c) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--nav-c);
}
.htp-navbar .nav-sims-icon { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.htp-navbar .nav-sims-menu .nav-process-indicator { margin-left: auto; }
/* a calculation running in a module inside the closed menu: dot on the toggle */
.htp-navbar .nav-sims-busy { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-uses); animation: nav-sims-pulse 1.2s ease-in-out infinite; }
.htp-navbar .nav-sims:has(.nav-sims-menu .nav-process-indicator *) .nav-sims-busy { display: inline-block; }
@keyframes nav-sims-pulse { 50% { opacity: 0.3; } }

/* ── Right side: admin, account, log out / request access, log in ── */
.htp-navbar .nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.htp-navbar .nav-admin { --nav-c: var(--color-admin); padding: 4px; position: relative; }
.htp-navbar .nav-admin.is-active { background-color: var(--navbar-admin-active-bg); }
.nav-admin-badge { position: absolute; top: 0; right: -2px; font-size: 0.6rem; }
.nav-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--navbar-user-border);
  background: var(--navbar-user-bg);
  color: var(--navbar-user-text) !important;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 4px var(--navbar-user-shadow);
  transition: background-color 0.15s, box-shadow 0.15s;
}
.nav-user-btn:hover { background: var(--navbar-user-hover-bg); }
.nav-user-btn.is-active { background: var(--navbar-user-hover-bg); box-shadow: 0 2px 6px var(--navbar-user-active-shadow), inset 0 -3px 0 var(--color-h2); }
.nav-user-expiry {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--navbar-expiry-bg);
  color: var(--navbar-expiry-text);
}
.htp-navbar .nav-logout-btn {
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  box-shadow: 0 1px 4px var(--navbar-logout-shadow);
}
.htp-navbar .nav-request-btn { border-radius: 999px; padding: 4px 14px; font-weight: 600; box-shadow: 0 1px 4px var(--navbar-request-shadow); }
.nav-login-link {
  color: var(--navbar-login-text); font-weight: 600; text-decoration: none;
  padding: 4px 12px; border-radius: 999px; transition: background-color 0.15s;
}
.nav-login-link:hover { background: var(--navbar-login-hover-bg); color: var(--navbar-login-text); }

/* Laptop widths: the secondary group goes icon-only so the bar stays on one line */
@media (min-width: 992px) and (max-width: 1499.98px) {
  .htp-navbar .nav-item--secondary .nav-label { display: none; }
  .htp-navbar .nav-item--secondary .nav-link { padding: 4px; }
}
/* Small laptops / tablets in landscape: every item icon-only (the title attribute keeps the name) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .htp-navbar .nav-label { display: none; }
  .htp-navbar .nav-link { padding: 4px; }
}

/* Collapsed menu (phones/tablets): items flow in rows, as many as fit, instead of
   Bootstrap's one-per-line stack; the account area goes on its own row below. */
@media (max-width: 991.98px) {
  .htp-navbar .navbar-nav { flex-direction: row; flex-wrap: wrap; padding: 6px 0; }
  .htp-navbar .nav-item { flex: 0 0 auto; }
  .htp-navbar .nav-item--group-start { margin-left: 0; padding-left: 0; border-left: 0; }
  .htp-navbar .nav-icon { height: 32px; width: 32px; padding: 4px; }
  .htp-navbar .nav-logo-img { height: 44px; }
  .htp-navbar .nav-right { flex-wrap: wrap; padding: 8px 0 6px; border-top: 1px solid var(--navbar-mobile-divider); }
}

/* ═══════════════════════════════════════════════════════
   FOOTER (templates/basic/footer.html)
   Dark navy (the navbar's text ink) so white text, the white FHA logo and the light-blue
   links all read well (contrast >= 7:1); a light-blue top edge ties it to the navbar.
   body.htp-page keeps it at the bottom of the window on short pages.
═══════════════════════════════════════════════════════ */
body.htp-page { min-height: 100vh; display: flex; flex-direction: column; }
body.htp-page > .htp-main { flex: 1 0 auto; width: 100%; }

.htp-footer {
  flex-shrink: 0;
  margin-top: 3rem;
  background: var(--footer-bg);
  border-top: 4px solid var(--footer-accent);
  color: var(--footer-text);
  font-size: 0.9rem;
}
.htp-footer a { color: var(--footer-link); text-decoration: none; }
.htp-footer a:hover { color: var(--footer-link-hover); text-decoration: underline; }
.htp-footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 28px 0 20px;
}
.htp-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.htp-footer-heading {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--footer-accent);
  margin-bottom: 4px;
}
.htp-footer .htp-footer-logo-link:hover { text-decoration: none; opacity: 0.85; }
.htp-footer-logo { height: 52px; width: auto; display: block; }
.htp-footer-bottom {
  border-top: 1px solid var(--footer-divider);
  padding: 12px 0 16px;
  font-size: 0.8rem;
  color: var(--footer-bottom-text);
  text-align: center;
}
.htp-footer-bottom p { margin: 2px 0; }
@media (max-width: 767.98px) {
  .htp-footer-grid { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .htp-footer-col { align-items: center; }
}

/* Cookie notice */
.htp-cookie-notice {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1080;
  max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  background: var(--cookie-bg);
  border: 1px solid var(--color-border-h2);
  border-radius: 12px;
  box-shadow: 0 6px 24px var(--cookie-shadow);
  padding: 12px 14px;
  font-size: 0.88rem;
  color: var(--color-text);
}
.htp-cookie-notice a { color: var(--color-h2); font-weight: 600; }
.htp-cookie-notice .htp-cookie-ok {
  background: var(--color-h2); border-color: var(--color-h2); color: var(--cookie-btn-text);
  border-radius: 999px; padding: 4px 16px; font-weight: 600;
}
.htp-cookie-notice .htp-cookie-ok:hover { background: var(--cookie-btn-hover-bg); border-color: var(--cookie-btn-hover-bg); }

/* ═══════════════════════════════════════════════════════
   NEW-SIMULATION PICKER (templates/simulation_summary/_new_simulation.html)
   One "+ New" button and one modal of option tiles, shared by H2 Production,
   Transport, End-use applications and All simulations.
   ═══════════════════════════════════════════════════════ */
.nsim-open-btn {
  --nsim-c: var(--color-applications);
  background-color: var(--nsim-c); border-color: var(--nsim-c); color: var(--color-text-on-color); font-weight: 600;
}
.nsim-open-btn:hover, .nsim-open-btn:focus-visible {
  background-color: color-mix(in srgb, var(--nsim-c) 85%, var(--color-shade-base)); border-color: color-mix(in srgb, var(--nsim-c) 85%, var(--color-shade-base)); color: var(--color-text-on-color);
}
.nsim-modal { border: 0; border-radius: 16px; overflow: hidden; }
.nsim-header { align-items: flex-start; border-bottom: 3px solid var(--nsim-c); }
.nsim-header .modal-title { font-weight: 700; color: var(--nsim-c); }
.nsim-sub { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 2px; }
.nsim-footer { border-top: 1px solid var(--color-divider-subtle); }
.nsim-group + .nsim-group { margin-top: 20px; }
.nsim-group-title {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--nsim-c); border-bottom: 2px solid var(--nsim-c); padding-bottom: 4px; margin-bottom: 12px;
}
.nsim-tile {
  --nsim-c: var(--color-applications);
  display: flex; align-items: center; gap: 14px; width: 100%; height: 100%;
  padding: 14px 16px; text-align: left; text-decoration: none; color: inherit; cursor: pointer;
  background: var(--color-surface); border: 2px solid var(--color-border-light); border-radius: 12px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.nsim-tile:hover, .nsim-tile:focus-visible {
  border-color: var(--nsim-c); color: inherit; outline: none; transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--nsim-c) 22%, transparent);
}
.nsim-tile:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--nsim-c) 35%, transparent); }
.nsim-tile-icon {
  flex: 0 0 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--nsim-c) 12%, var(--color-tint-base));
}
.nsim-tile-icon img { object-fit: contain; }
.nsim-tile-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nsim-tile-title { font-weight: 700; font-size: 1rem; color: var(--nsim-c); }
.nsim-tile-desc { font-size: 0.8rem; line-height: 1.3; color: var(--color-text-muted); }
.nsim-tile-area { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nsim-c); opacity: 0.8; margin-top: 2px; }
.nsim-tile-go { flex: 0 0 auto; color: var(--nsim-c); opacity: 0; transform: translateX(-4px); transition: opacity 0.15s, transform 0.15s; }
.nsim-tile:hover .nsim-tile-go, .nsim-tile:focus-visible .nsim-tile-go { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .nsim-tile, .nsim-tile-go { transition: none; } .nsim-tile:hover { transform: none; } }

/* wide picker: roomier body, tiles keep a readable minimum */
.nsim-modal .modal-body { padding: 20px 24px 24px; }
.nsim-modal .modal-header, .nsim-modal .modal-footer { padding-left: 24px; padding-right: 24px; }
.nsim-tile { min-height: 96px; }
.nsim-tile-title { overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .nsim-modal .modal-body { padding: 14px; } }

.row > div > .nsim-group + .nsim-group { margin-top: 0; }

/* ═══════════════════════════════════════════════════════
   SIMULATION ROWS (templates/simulation_summary/_sim_rows.html)
   One full-width row per simulation on each module's own page: identity on the
   left, the full breakdown with icons in the middle, actions on the right.
   ═══════════════════════════════════════════════════════ */
.sim-rows-section { margin-bottom: 28px; }
.sim-rows-heading {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--sec-c); border-bottom: 2px solid var(--sec-c); padding-bottom: 5px; margin-bottom: 14px;
}
.sim-rows { display: flex; flex-direction: column; gap: 12px; }
.sim-row {
  --row-c: var(--color-applications);
  display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) auto; align-items: center; gap: 12px 24px;
  padding: 14px 18px; background: var(--color-surface); border: 1px solid var(--color-border-light); border-left: 5px solid var(--row-c); border-radius: 10px;
  transition: box-shadow 0.15s;
}
.sim-row:hover { box-shadow: 0 4px 16px color-mix(in srgb, var(--row-c) 20%, transparent); }
.sim-row.is-draft { background: var(--color-light-grey); }
.sim-row.is-draft .sim-row-details { opacity: 0.7; }

.sim-row-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sim-row-icon {
  flex: 0 0 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--row-c) 12%, var(--color-tint-base));
}
.sim-row-icon img { object-fit: contain; }
.sim-row-title { flex: 1 1 auto; min-width: 0; }
.sim-row-name, .sim-row-name-static {
  display: block; width: 100%; margin: 0; padding: 1px 4px; margin-left: -4px;
  font-size: 1.05rem; font-weight: 700; color: var(--row-c); background: transparent;
  border: 1px solid transparent; border-radius: 6px; text-overflow: ellipsis;
}
.sim-row-name:hover { border-color: var(--color-border-strong); }
.sim-row-name:focus { outline: none; border-color: var(--row-c); background: var(--color-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--row-c) 20%, transparent); }
.sim-row-name.is-saved { border-color: var(--color-success); }
.sim-row-sub { font-size: 0.75rem; color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: 0 6px; }
.sim-row-status {
  flex: 0 0 auto; align-self: flex-start; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor;
}
.sim-row-status.is-done { color: var(--color-success); }
.sim-row-status.is-draft { color: var(--color-text-muted); }

.sim-row-details { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; min-width: 0; }
.sim-row-detail { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sim-row-detail-icon {
  flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
  background: color-mix(in srgb, var(--row-c) 10%, var(--color-tint-base));
}
.sim-row-detail-icon img { object-fit: contain; }
.sim-row-detail-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sim-row-detail-value { font-weight: 700; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-row-detail-label { font-size: 0.68rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }

.sim-row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 1199.98px) {
  .sim-row { grid-template-columns: minmax(0, 1fr) auto; }
  .sim-row-details { grid-column: 1 / -1; order: 3; }
  .sim-row-actions { order: 2; }
}
@media (max-width: 575.98px) {
  .sim-row { grid-template-columns: minmax(0, 1fr); }
  .sim-row-actions { justify-content: flex-start; }
}

/* Summary: hydrogen balance waterfall */
.h2-wf-title { font-weight: 700; font-size: 0.95rem; color: #24465f; margin: 18px 0 4px; }
.h2-wf-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; font-size: 0.78rem; color: #6c757d; margin-bottom: 14px; }
.h2-wf-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* Summary: state of the valley (verdict + one diagnosis per stage) */
.h2-verdict {
  --v-bg: #f1f3f5; --v-bd: #adb5bd; --v-tx: #495057;
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 14px;
  border-radius: 10px; background: var(--v-bg); border: 2px solid var(--v-bd); color: var(--v-tx);
}
.h2-verdict--ok   { --v-bg: var(--balance-ok-bg); --v-bd: var(--color-power); --v-tx: var(--balance-ok-text); }
.h2-verdict--warn { --v-bg: var(--balance-surplus-strong-bg); --v-bd: var(--balance-surplus-border); --v-tx: var(--balance-surplus-text); }
.h2-verdict--bad  { --v-bg: var(--balance-bad-strong-bg); --v-bd: var(--balance-bad-border); --v-tx: var(--balance-bad-text); }
.h2-verdict-icon {
  flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: var(--v-bd); color: #fff; font-size: 1.1rem; font-weight: 800;
}
.h2-verdict-title { font-size: 1.15rem; font-weight: 800; }
.h2-verdict-text { font-size: 0.9rem; }

.h2-stages {
  display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr); align-items: stretch; gap: 8px;
  margin-bottom: 18px;
}
.h2-stage-arrow { display: flex; align-items: center; justify-content: center; color: var(--color-transport); font-size: 1.8rem; font-weight: 800; }
.h2-stage {
  --s-bd: #ced4da; --s-bg: #fff; --s-chip: #6c757d;
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 10px;
  background: var(--s-bg); border: 2px solid var(--s-bd);
}
.h2-stage--ok   { --s-bd: var(--color-power); --s-bg: var(--balance-ok-bg); --s-chip: var(--balance-ok-text); }
.h2-stage--warn { --s-bd: var(--balance-surplus-border); --s-bg: var(--balance-surplus-bg); --s-chip: var(--balance-surplus-text); }
.h2-stage--bad  { --s-bd: var(--balance-bad-border); --s-bg: var(--balance-bad-bg); --s-chip: var(--balance-bad-text); }
.h2-stage--idle { --s-bg: #f8f9fa; }
.h2-stage-head { display: flex; align-items: center; gap: 8px; }
.h2-stage-head img { width: 28px; height: 28px; object-fit: contain; }
.h2-stage-title { font-weight: 700; color: #24465f; }
.h2-stage-chip {
  margin-left: auto; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 9px; border-radius: 999px; background: var(--s-chip); color: #fff; white-space: nowrap;
}
.h2-stage-value { font-size: 1.25rem; font-weight: 800; color: #24465f; }
.h2-stage-detail { font-size: 0.84rem; color: #495057; line-height: 1.35; }
.h2-stage-action { margin-top: auto; font-size: 0.82rem; font-weight: 700; color: var(--s-chip); text-decoration: none; }
.h2-stage-action:hover { text-decoration: underline; }
@media (max-width: 991.98px) {
  .h2-stages { grid-template-columns: 1fr; }
  .h2-stage-arrow { transform: rotate(90deg); min-height: 24px; }
}

/* Summary: main costs of each simulation and where they come from */
.cost-totals { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.cost-total { padding: 10px 14px; border-radius: 10px; background: #f8fafc; border: 1px solid #dee2e6; display: flex; flex-direction: column; }
.cost-total > span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6c757d; font-weight: 700; }
.cost-total > strong { font-size: 1.35rem; color: #24465f; }
.cost-total--wide { grid-column: 1 / -1; }
.cost-total ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; font-size: 0.85rem; }
.cost-total li img { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; margin-right: 4px; }
.cost-total li em { font-style: normal; color: #6c757d; margin-left: 4px; }
.cost-list { display: flex; flex-direction: column; gap: 12px; }
.cost-card { --c: var(--color-financial); padding: 14px 18px; background: #fff; border: 1px solid #dee2e6; border-left: 5px solid var(--c); border-radius: 10px; }
.cost-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cost-card-head h4 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--c); flex: 1 1 auto; }
.cost-pill { font-size: 0.8rem; color: #495057; background: #f1f3f5; border-radius: 999px; padding: 3px 12px; }
.cost-pill strong { color: #24465f; }
.cost-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.cost-col-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6c757d; margin-bottom: 6px; }
.cost-col-title span { text-transform: none; letter-spacing: 0; font-weight: 600; color: #24465f; margin-left: 6px; }
.cost-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #e9ecef; margin-bottom: 8px; }
.cost-bar i { display: block; height: 100%; }
.cost-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 0.82rem; }
.cost-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) 42px auto; align-items: center; gap: 8px; }
.cost-legend li i { width: 11px; height: 11px; border-radius: 3px; display: block; }
.cost-legend li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost-legend li strong { text-align: right; color: #24465f; }
.cost-legend li em { font-style: normal; color: #6c757d; min-width: 62px; text-align: right; }
.cost-none { font-size: 0.82rem; color: #868e96; }
@media (max-width: 767.98px) { .cost-cols, .cost-totals { grid-template-columns: 1fr; } }

/* Summary: cost structure of the whole valley */
.cost-valley { padding: 14px 18px; margin-bottom: 16px; border: 2px solid var(--color-financial); border-radius: 10px; background: #fff; }
.cost-valley-title { font-weight: 800; color: #24465f; margin-bottom: 10px; }
.cost-valley-title span { font-weight: 500; font-size: 0.8rem; color: #6c757d; margin-left: 8px; }
.cost-bar--lg { height: 22px; border-radius: 11px; }


/* ═══════════════════════════════════════════════════════
   RESULTS OVERVIEW (templates/summary/summary_home.html)
   ═══════════════════════════════════════════════════════ */
.ov-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ov-header h1 { margin: 0; font-size: 1.7rem; font-weight: 800; color: var(--color-ink); line-height: 1.1; }
.ov-header p { margin: 2px 0 0; color: var(--color-text-muted); font-size: 0.95rem; }
.ov-header-action { margin-left: auto; }
.ov-note {
  background: var(--color-bg-h2); border-left: 4px solid var(--color-h2); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 28px; font-size: 0.85rem; color: var(--color-text);
}
.ov-section { margin-bottom: 34px; }
.ov-section-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.ov-section-head h2 { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--color-ink); }
.ov-hint { font-size: 0.82rem; color: var(--color-text-muted); max-width: 780px; }

.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.ov-card {
  --c: var(--color-h2);
  display: flex; flex-direction: column; gap: 12px; padding: 16px 18px;
  background: var(--color-surface); border: 1px solid var(--color-border-light); border-top: 4px solid var(--c);
  border-radius: 14px; box-shadow: 0 1px 4px var(--shadow-15); text-decoration: none; color: inherit;
  transition: box-shadow .15s, transform .15s;
}
.ov-card:hover { box-shadow: 0 6px 18px var(--shadow-22); transform: translateY(-2px); color: inherit; }
.ov-card-head { display: flex; align-items: center; gap: 12px; }
.ov-chip {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 13%, var(--color-tint-base));
}
.ov-chip img { width: 26px; height: 26px; object-fit: contain; }
.ov-card-head h3 { margin: 0; flex: 1 1 auto; font-size: 1.05rem; font-weight: 700; color: var(--c); }
.ov-go { font-size: 1.2rem; color: var(--c); transition: transform .15s; }
.ov-card:hover .ov-go { transform: translateX(3px); }
.ov-status { align-self: flex-start; padding: 3px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; }
.ov-status--ok   { background: var(--balance-ok-bg);             color: var(--balance-ok-text); }
.ov-status--warn { background: var(--balance-surplus-strong-bg); color: var(--balance-surplus-text); }
.ov-status--bad  { background: var(--balance-bad-strong-bg);     color: var(--balance-bad-text); }
.ov-status--idle { background: var(--color-light-grey);          color: var(--color-text-muted); }
.ov-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 10px 14px; }
.ov-metric .v { font-size: 1.3rem; font-weight: 700; line-height: 1.15; color: var(--color-text); }
.ov-metric .l { font-size: 0.7rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }
.ov-card-note { font-size: 0.82rem; color: var(--color-text-muted); }
.ov-card--empty { border-style: dashed; border-top-style: solid; background: var(--color-light-grey); box-shadow: none; }
.ov-card--empty .ov-chip { background: var(--color-border-light); }
.ov-card--empty .ov-chip img { opacity: .6; }

.ov-panel { border: 1px solid var(--color-border-light); border-radius: 14px; padding: 8px; overflow-x: auto; }
.ov-panel--flow { background: var(--color-light-grey); }
.ov-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; font-size: 0.8rem; color: var(--color-text-muted); }
.ov-legend-line { display: inline-block; width: 24px; border-top: 3px solid; vertical-align: middle; margin-right: 4px; }
.ov-legend-line--power { border-color: var(--color-power); }
.ov-legend-line--h2 { border-color: var(--color-h2pp); }
.ov-filters { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 10px; font-size: 0.88rem; }
.ov-map { width: 100%; height: 460px; border-radius: 14px; border: 1px solid var(--color-border-light); box-shadow: 0 1px 4px var(--shadow-15); }
@media (max-width: 768px) { .ov-header-action { margin-left: 0; } .ov-map { height: 360px; } }

/* Import / export file icons (/svgc/ImportFile.svg, ExportFile.svg, ExportExcel.svg) */
.btn-icon { width: 1.25em; height: 1.25em; margin-right: 6px; vertical-align: -0.25em; object-fit: contain; }
.import-icon { display: block; width: 36px; height: 36px; margin: 0 auto 4px; object-fit: contain; }