/* Vue projet HVAC — layout « tableur » (maquette v2).
   Couleurs via les variables Mantine ; seules les densités sont fixées ici. */

:root {
  --hvac-cell-edit-bg: color-mix(in srgb, var(--mantine-color-orange-6) 11%, var(--mantine-color-body));
  --hvac-cell-edit-ring: color-mix(in srgb, var(--mantine-color-orange-6) 28%, var(--mantine-color-body));
  --hvac-row-key-bg: var(--mantine-color-blue-0);
  /* En-têtes, libellés et bande de valeurs : teinte dérivée du fond et du
     texte, pas de la palette grise du thème (gray-0 = #d6d8db, trop foncé
     en clair pour un fond de cellule). */
  --hvac-head-bg: color-mix(in srgb, var(--mantine-color-text) 5%, var(--mantine-color-body));
}
[data-mantine-color-scheme="dark"] {
  --hvac-head-bg: color-mix(in srgb, var(--mantine-color-text) 7%, var(--mantine-color-body));
  --hvac-row-key-bg: color-mix(in srgb, var(--mantine-color-blue-6) 18%, var(--mantine-color-body));
}

/* ---- racine : la page ne défile pas, seule la zone données (ou l'onglet
   Equipment) défile ; les onglets restent visibles et le Design prend toute
   la hauteur. 76 px = en-tête de l'AppShell + son padding haut, 16 px bas. */
.hvac-project-root {
  height: calc(100vh - 76px - 16px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.hvac-project-root > .hvac-tabs-row { flex: 0 0 auto; }
.hvac-project-root > #HVAC-equipment-container { flex: 1 1 auto; min-height: 0; overflow: auto; }
.hvac-project-root > .hvac-ep-split { flex: 1 1 auto; min-height: 0; }

/* ---- rangée d'onglets : Equipment · endpoints · + · Export ---- */
.hvac-tabs-row {
  border-bottom: 1px solid var(--mantine-color-default-border);
  gap: 4px;
}
.hvac-tabs-row .mantine-Tabs-list::before { border-bottom: none; }
/* Onglets au gabarit du reste de la feuille : 12 px, hauteur resserrée. */
.hvac-tabs-row .mantine-Tabs-tab { padding-block: 6px; font-size: 12px !important; }
.hvac-tabs-row .mantine-ActionIcon-root i.bi-plus-lg { font-size: 14px; }
.hvac-tab-name-input input { font-size: 13px; height: 26px; min-height: 26px; }

/* ---- split : données (params | calculs) | design ---- */
.hvac-ep-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(var(--hvac-design-w, 34%), 75%);
  gap: 12px;
  align-items: stretch;
  height: 100%;
}
.hvac-data-pane {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  padding: 0 4px 24px 0;
  /* Les paires paramètres | calculs s'empilent selon la largeur de CE volet,
     que la poignée data | design fait varier sans que la fenêtre change. */
  container-type: inline-size;
}
.hvac-design-pane {
  position: relative;
  min-height: 0;
  height: 100%;
  padding-top: 12px;
}
.hvac-design-pane > .mantine-Paper-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.hvac-ep-split.hvac-design-collapsed { grid-template-columns: minmax(0, 1fr) 0px; }
.hvac-ep-split.hvac-design-collapsed .hvac-design-pane > .mantine-Paper-root { display: none; }
.hvac-ep-split.hvac-data-collapsed { grid-template-columns: 0px minmax(0, 1fr); }
.hvac-ep-split.hvac-data-collapsed .hvac-data-pane { display: none; }
.hvac-ep-split.hvac-data-collapsed .hvac-design-pane { grid-column: 2; grid-row: 1; }

/* poignée data | design (injectée par hvac_split_resize.js) */
.hvac-split-resize-handle {
  position: absolute;
  left: -10px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  border-radius: 4px;
  touch-action: none;
}
.hvac-split-resize-handle:hover,
.hvac-split-resize-handle:active { background: var(--mantine-color-default-border); }
.hvac-ep-split.hvac-design-collapsed .hvac-split-resize-handle,
.hvac-ep-split.hvac-data-collapsed .hvac-split-resize-handle {
  width: 16px;
  left: -16px;
  background: var(--mantine-color-default);
  border: 1px solid var(--mantine-color-default-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mantine-color-dimmed);
  font-size: 13px;
  font-weight: 700;
}
.hvac-ep-split.hvac-design-collapsed .hvac-split-resize-handle::after { content: "‹"; }
.hvac-ep-split.hvac-data-collapsed .hvac-split-resize-handle::after { content: "›"; }

@media (max-width: 1100px) {
  .hvac-ep-split,
  .hvac-ep-split.hvac-design-collapsed,
  .hvac-ep-split.hvac-data-collapsed { grid-template-columns: 1fr; }
  .hvac-ep-split.hvac-design-collapsed .hvac-design-pane > .mantine-Paper-root { display: flex; }
  .hvac-ep-split.hvac-data-collapsed .hvac-data-pane { display: block; }
  .hvac-ep-split.hvac-data-collapsed .hvac-design-pane { grid-column: 1; grid-row: auto; }
  .hvac-project-root { height: auto; display: block; }
  .hvac-ep-split { height: auto; }
  .hvac-data-pane { height: auto; overflow: visible; }
  .hvac-design-pane { position: static; height: 520px; min-height: 0; }
  .hvac-split-resize-handle { display: none; }
}

/* ---- accordéons « cartes » ---- */
.hvac-card { margin-top: 12px; }
.hvac-card .mantine-Accordion-item {
  background: var(--mantine-color-body);
  border: 1px solid var(--mantine-color-default-border);
}
.hvac-card .mantine-Accordion-item + .mantine-Accordion-item { margin-top: 12px; }
.hvac-card .mantine-Accordion-control { padding: 8px 10px; }
.hvac-card .mantine-Accordion-label { padding: 0; }
.hvac-card .mantine-Accordion-content {
  padding: 10px 10px 12px;
  border-top: 1px solid var(--mantine-color-default-border);
  /* Les tableaux par bandes hors paires (bruit de fond, résultats) défilent
     dans leur carte plutôt que d'élargir tout le volet. */
  overflow-x: auto;
}
.hvac-card-header { width: 100%; }
.hvac-card-header .hvac-header-actions { margin-left: auto; }
/* Le ⋮ et les champs de l'en-tête ne doivent pas replier l'accordéon. */
.hvac-header-stop { display: inline-flex; }

/* ---- titres de bloc et paires ---- */
.hvac-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 22px;
}
.hvac-section-title-row { min-height: 22px; }
.hvac-info-bubble { display: inline-flex; color: var(--mantine-color-dimmed); cursor: help; }
.hvac-info-bubble i { font-size: 13px; line-height: 1; }
/* Titre de bloc dans un accordéon : plus discret que le titre d'accordéon
   (11 px, sans capitales). !important : le thème pose taille et poids en inline. */
.hvac-block-title {
  font-size: 11px !important;
  line-height: 22px;
}
/* Nom du réseau (champ éditable) au format des titres d'accordéon : le thème
   rend ces titres en 14 px / 400, d'où le !important sur le poids posé en inline. */
.hvac-accordion-title-input input {
  font-size: 14px;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Menus déroulants de la vue projet (rendus dans un portail, hors de la
   feuille) : textes à 11 px, icônes-fonte à 14 px (24 px par défaut).
   !important : le thème pose font-size en inline. */
.hvac-menu-dropdown .mantine-Menu-item,
.hvac-menu-dropdown .mantine-Menu-itemLabel,
.hvac-menu-dropdown .mantine-Menu-label { font-size: 11px !important; }
.hvac-menu-dropdown .mantine-Menu-itemSection i { font-size: 14px; }
/* Alertes de la feuille : titre et message à 11 px, titre en semi-gras pour
   qu'il se distingue du message. !important : le thème pose font-size en inline. */
.hvac-alert .mantine-Alert-title,
.hvac-alert .mantine-Alert-message { font-size: 11px !important; }
.hvac-alert .mantine-Alert-title { font-weight: 600 !important; }
/* Texte de corps de la feuille : taille des valeurs numériques (11 px).
   !important : le thème pose font-size en style inline sur Text. */
.hvac-body-text, .hvac-body-text .mantine-SegmentedControl-label { font-size: 11px !important; }
/* Groupes de boutons (Indoor/Outdoor et barre du panneau Design) : même
   gabarit, bordure fine sans fond gris, 11 px, 26 px de haut. */
.hvac-segmented.mantine-SegmentedControl-root {
  background: transparent;
  border: 1px solid var(--mantine-color-default-border);
  padding: 2px;
}
.hvac-segmented .mantine-SegmentedControl-label { padding: 2px 8px; line-height: 16px; }
.hvac-toolbar-group .mantine-Button-root { font-size: 11px !important; }
.hvac-pair-title { height: 22px; margin-bottom: 2px; }
.hvac-pair {
  display: grid;
  grid-template-columns: minmax(0, var(--hvac-params-fr, 1fr)) 8px minmax(0, 1fr);
  gap: 0 4px;
  align-items: start;
}
.hvac-pair-left, .hvac-pair-right { min-width: 0; }
/* Le spectre a une largeur incompressible : il défile sur lui-même. Pas la
   moitié gauche, dont les champs se rétrécissent : un débordement d'une
   fraction de pixel y affichait une barre de défilement vide. */
.hvac-pair-right { overflow-x: auto; }
.hvac-pair-handle {
  align-self: stretch;
  cursor: col-resize;
  border-radius: 4px;
  touch-action: none;
}
.hvac-pair-handle:hover, .hvac-pair-handle:active { background: var(--mantine-color-default-border); }
/* Le spectre (8 bandes + dB(A), libellés compris) demande ~465 px ; les deux
   moitiés étant égales par défaut, il en faut le double, plus marges et
   poignée : en dessous de 980 px de volet il était rogné. Paramètres au-dessus,
   calculs en dessous ; défilement interne pour les volets plus étroits que le
   tableau lui-même. */
@container (max-width: 980px) {
  .hvac-pair { grid-template-columns: minmax(0, 1fr); gap: 8px 0; }
  .hvac-pair-handle { display: none; }
}
.hvac-dashed { border-top: 1px dashed var(--mantine-color-default-border); margin: 10px 0; }

/* ---- tables compactes ---- */
.hvac-sheet {
  font-size: 11px;
  border-color: var(--mantine-color-default-border);
  --table-border-color: var(--mantine-color-default-border);
}
.hvac-sheet th, .hvac-sheet td {
  padding: 3px 6px;
  height: 24px;
  line-height: 1.2;
  border-color: var(--mantine-color-default-border);
  white-space: nowrap;
}
/* TOUS les th (en-tête et lignes de libellés des tableaux de paramètres) :
   jamais en gras, comme la maquette. */
.hvac-sheet th {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--mantine-color-dimmed);
  background: var(--hvac-head-bg);
}
.hvac-sheet td { font-weight: 400; }
.hvac-sheet .hvac-cell-num { text-align: right; font-family: monospace; font-variant-numeric: tabular-nums; }
.hvac-sheet .hvac-cell-edit { background: var(--hvac-cell-edit-bg); box-shadow: inset 0 0 0 1px var(--hvac-cell-edit-ring); padding: 0; }
.hvac-sheet .hvac-row-key { background: var(--hvac-row-key-bg); font-weight: 700; }
.hvac-sheet .hvac-cell-dim { color: var(--mantine-color-dimmed); }
.hvac-sheet .hvac-cell-ok { background: rgba(64, 192, 87, 0.15); }
.hvac-sheet .hvac-cell-bad { background: rgba(250, 82, 82, 0.18); font-weight: 700; }
.hvac-sheet td.hvac-cell-edit .hvac-cell-input,
.hvac-eq-table td.hvac-cell-edit .hvac-cell-input { width: 100%; }
.hvac-sheet .hvac-cell-input input,
.hvac-eq-table .hvac-cell-input input,
.hvac-sheet .hvac-cell-input .mantine-Select-input {
  height: 24px;
  min-height: 24px;
  font-size: 11px;
  padding: 0 6px;
  background: transparent;
}
/* Le thème Mantine pose fontSize 14 px en style INLINE sur les Select :
   seul !important passe devant. */
.hvac-sheet .hvac-cell-input input,
.hvac-eq-table .hvac-cell-input input,
.hvac-sheet .mantine-Select-input,
.hvac-eq-table .mantine-Select-input,
.hvac-eq-input input,
.hvac-eq-input .mantine-Select-input { font-size: 11px !important; }
.hvac-sheet .hvac-cell-num .hvac-cell-input input,
.hvac-eq-table .hvac-cell-num .hvac-cell-input input { text-align: right; font-family: monospace; }
/* Tableaux de paramètres : saisies numériques dans la police de l'app, comme
   les listes à côté (maquette : monospace réservé aux valeurs calculées et
   aux spectres). Chiffres tabulaires pour garder l'alignement. */
.hvac-sheet.hvac-fields .hvac-cell-num .hvac-cell-input input,
.hvac-eq-table .hvac-field-input input {
  font-family: var(--mantine-font-family);
  font-variant-numeric: tabular-nums;
}
.hvac-sheet .hvac-cell-input .mantine-Input-section,
.hvac-eq-table .hvac-cell-input .mantine-Input-section { width: 20px; }
.hvac-sheet .hvac-cell-input .mantine-Select-input,
.hvac-eq-table .hvac-cell-input .mantine-Select-input { padding-right: 20px; }

/* ---- icônes d'action : discrètes (maquette 13 px) ---- */
.hvac-data-pane .mantine-ActionIcon-root,
.hvac-tabs-row .mantine-ActionIcon-root:not(#HVAC-add-endpoint-btn),
.hvac-eq-table .mantine-ActionIcon-root {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
}
.hvac-data-pane .mantine-ActionIcon-root i,
.hvac-tabs-row .mantine-ActionIcon-root:not(#HVAC-add-endpoint-btn) i,
.hvac-eq-table .mantine-ActionIcon-root i { font-size: 12px; }
.hvac-sheet .hvac-cell-manual { color: var(--mantine-color-orange-7); font-weight: 700; }
.hvac-sheet .hvac-required { color: var(--mantine-color-error); }

/* ---- éléments ---- */
.hvac-el-card { padding: 6px 0 2px; }
.hvac-el-card + .hvac-el-card { margin-top: 6px; }
.hvac-el-index {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--mantine-color-gray-7);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}
.hvac-el-selected { box-shadow: 0 0 0 2px var(--mantine-color-orange-6); border-radius: var(--mantine-radius-sm); }
.hvac-value-strip {
  background: var(--hvac-head-bg);
  border-radius: 3px;
  padding: 3px 8px;
  margin-top: 4px;
}
/* !important : le thème pose font-size/font-weight en style inline sur Text */
.hvac-strip-label { font-size: 10px !important; text-transform: uppercase; color: var(--mantine-color-dimmed); letter-spacing: 0.03em; }
.hvac-strip-value { font-size: 11px !important; font-family: monospace; font-weight: 700 !important; }
.hvac-strip-warn { color: var(--mantine-color-orange-7); cursor: help; }
.hvac-alert-chip { text-transform: none; font-weight: 500; }
.hvac-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; }
/* !important : le thème pose font-size en inline sur Button. */
.hvac-sheet-btn { margin-top: 8px; font-size: 11px !important; }
/* icônes à l'échelle du texte (24 px par défaut, démesurées à 11 px) */
.hvac-sheet-btn i { font-size: 14px; }

/* ---- onglet Equipment ---- */
.hvac-eq-table { font-size: 12px; width: 100%; table-layout: fixed; }
.hvac-eq-table th, .hvac-eq-table td { padding: 5px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hvac-eq-table thead th { font-size: 10.5px; font-weight: 400; color: var(--mantine-color-dimmed); }
.hvac-eq-table td.hvac-cell-edit .hvac-cell-input input { min-width: 0; padding: 0 4px; }
.hvac-eq-table .hvac-cell-num { text-align: right; font-family: monospace; }
/* !important : le thème pose font-size en style inline sur Text ; tout le corps
   du tableau prend la taille des valeurs numériques (12 px) */
.hvac-eq-table td .mantine-Text-root { font-size: inherit !important; }
.hvac-eq-table td.hvac-cell-edit {
  background: var(--hvac-cell-edit-bg);
  box-shadow: inset 0 0 0 1px var(--hvac-cell-edit-ring);
  padding: 0 4px;
}
.hvac-eq-table .hvac-cell-dim { color: var(--mantine-color-dimmed); }
/* champs bordés du mode édition (maquette) : une ligne, police 11 px */
.hvac-eq-input input, .hvac-eq-input .mantine-Select-input {
  font-size: 11px;
  height: 26px;
  min-height: 26px;
}
.hvac-eq-table .mantine-ActionIcon-root[data-variant="filled"] { width: 26px; height: 26px; min-width: 26px; }
.hvac-eq-table .mantine-ActionIcon-root[data-variant="filled"] i { font-size: 14px; }
.hvac-detail-row { border-bottom: 1px solid var(--mantine-color-default-border); padding: 3px 0; }
.hvac-eq-table .hvac-eq-flow { border-top: 1px solid var(--mantine-color-default-border); }
.hvac-eq-table .hvac-eq-first td { border-top: none; }

/* Infobulle des textes tronqués (assets/hvac_ellipsis.js), au style Mantine. */
.hvac-ellipsis-tip {
  position: fixed;
  z-index: 1000;
  display: none;
  max-width: 360px;
  padding: 5px 10px;
  border-radius: var(--mantine-radius-sm);
  background: var(--mantine-color-gray-9);
  color: var(--mantine-color-white);
  font-family: var(--mantine-font-family);
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
  box-shadow: var(--mantine-shadow-sm);
}
[data-mantine-color-scheme="dark"] .hvac-ellipsis-tip { background: var(--mantine-color-dark-3); }
.hvac-ellipsis-tip.hvac-ellipsis-tip-open { display: block; }