/* Page Historique : toute la fenêtre, menu des rapports, arbre des courbes, graphiques et tableaux. */
.hx {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 48px - 24px);
    min-height: 520px;
    background: var(--mud-palette-background);
}

    .hx:fullscreen {
        height: 100vh;
        padding: 10px;
    }

.hx-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-bottom: 8px;
}

.hx-title {
    display: flex;
    flex-direction: column;
    min-width: 260px;
    margin-right: auto;
}

.hx-h { font-size: 1.25rem; font-weight: 500; }
.hx-period { font-size: .85rem; color: var(--mud-palette-primary); font-weight: 500; }
.hx-presets { display: flex; flex-wrap: wrap; gap: 3px; }

.hx-chip {
    border: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    border-radius: 5px;
    padding: 3px 9px;
    font-size: .85rem;
    cursor: pointer;
    color: inherit;
}

    .hx-chip:hover { background: var(--mud-palette-action-default-hover); }
    .hx-chip.on { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); color: #fff; }

.hx-chip-rel { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; cursor: default; }
    .hx-chip-rel button { border: 0; background: transparent; color: inherit; font: inherit; padding: 2px 0; cursor: pointer; }
    .hx-chip-rel input { width: 3.2em; border: 1px solid var(--mud-palette-lines-inputs); border-radius: 4px; padding: 1px 3px;
        font: inherit; text-align: right; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); }

.hx-dates { display: flex; align-items: center; }
.hx-date { width: 160px; }
.hx-date .mud-input-control { margin: 0; }
.hx-actions { display: flex; align-items: center; gap: 2px; }

.hx-body { flex: 1; min-height: 0; display: flex; gap: 8px; }

/* Menu des rapports en ligne. */
.hx-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-bottom: 8px; padding: 3px 4px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; background: var(--mud-palette-surface); }
.hx-tab-group { font-size: .66rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mud-palette-primary); margin: 0 2px 0 10px; }
.hx-tab { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 5px; border: 0; background: transparent;
    color: inherit; text-decoration: none; font-size: .84rem; cursor: pointer; white-space: nowrap; }
.hx-tab:hover { background: var(--mud-palette-action-default-hover); }
.hx-tab.on { background: var(--mud-palette-primary); color: #fff; }
.hx-tab-toggle { border: 1px solid var(--mud-palette-lines-default); margin-right: 4px; }
.hx-tab-toggle.on { background: var(--tuga-pale); color: var(--tuga-title-2); }

.hx-side {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    overflow: auto;
}

.hx-side { width: 250px; flex: none; padding: 8px; display: flex; flex-direction: column; }
.hx-side > .mud-input-control { flex: none; }
.hx-tree { flex: 1; overflow: auto; font-size: .85rem; min-height: 120px; }
.hx-node-head { display: flex; align-items: center; gap: 2px; cursor: pointer; padding: 2px 0; font-weight: 500; }
.hx-node.minor > .hx-node-head, .hx-leaf.minor { color: var(--mud-palette-text-secondary); font-weight: 400; }
.hx-children { margin-left: 14px; }
.hx-leaf { display: flex; align-items: center; gap: 6px; padding: 1px 0 1px 18px; cursor: pointer; }
.hx-leaf input { accent-color: var(--mud-palette-primary); }
.hx-count { margin-left: 4px; background: var(--mud-palette-primary); color: #fff; border-radius: 8px; padding: 0 6px; font-size: .7rem; }
.hx-caption { font-size: .78rem; color: var(--mud-palette-text-secondary); }
.hx-side-title { font-size: .9rem; color: var(--mud-palette-primary); }
.hx-chart-item { display: flex; align-items: center; gap: 6px; padding: 3px 6px 3px 14px; border-radius: 6px; cursor: pointer; font-size: .84rem; }
.hx-chart-item:hover { background: var(--mud-palette-action-default-hover); }
.hx-chart-item.on { background: var(--tuga-pale, #F1F7E6); color: var(--mud-palette-primary); font-weight: 600; }
.hx-config { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
.hx-config-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.hx-config .hx-table { flex: 1; }
.hx-config tr.hx-off td { color: var(--mud-palette-text-disabled); }
.hx-color { width: 38px; height: 24px; padding: 0; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; background: none; cursor: pointer; }
.hx-native { font: inherit; font-size: .82rem; padding: 2px 4px; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); }
.hx-native:disabled { opacity: .45; }
.hx-num { width: 76px; text-align: right; }
.hx-row-actions { white-space: nowrap; }
.hx-add .mud-dialog-content { padding: 0; }
.hx-add-body { display: flex; height: min(68vh, 640px); border-top: 1px solid var(--mud-palette-lines-default); }
.hx-add-types { width: 260px; flex: none; overflow: auto; border-right: 1px solid var(--mud-palette-lines-default); padding: 6px; }
.hx-add-cat { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--mud-palette-primary); margin: 8px 4px 2px; }
.hx-add-type { display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: 6px; text-align: left; border: 0; background: none; padding: 4px 8px; border-radius: 6px; cursor: pointer; font: inherit; font-size: .85rem; color: var(--mud-palette-text-primary); }
.hx-add-type:hover { background: var(--mud-palette-action-default-hover); }
.hx-add-type.on { background: var(--tuga-pale, #F1F7E6); color: var(--mud-palette-primary); font-weight: 600; }
.hx-add-type .hx-count { margin-left: auto; }
.hx-add-vars { flex: 1; min-width: 0; overflow: auto; padding: 10px 14px; }
.hx-add-entity { font-weight: 600; font-size: .85rem; margin: 10px 0 2px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.hx-add-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); font-size: .84rem; }
.hx-add-fields .hx-leaf { padding-left: 4px; }
.hx-leaf.done { color: var(--mud-palette-text-disabled); }
@media (max-width: 700px) {
    .hx-add-body { flex-direction: column; height: auto; }
    .hx-add-types { width: auto; max-height: 30vh; border-right: 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
}
.hx-views { border-top: 1px solid var(--mud-palette-lines-default); margin-top: 6px; padding-top: 6px; max-height: 38%; overflow: auto; }
.hx-view { display: flex; align-items: center; font-size: .82rem; }
.hx-view a { cursor: pointer; flex: 1; color: var(--mud-palette-primary); }
.hx-view .mud-icon-button { padding: 2px; }

.hx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hx-options { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 6px; min-height: 40px; }
.hx-options .mud-input-control { margin: 0; flex: none; width: auto; }
.hx-sel { min-width: 150px; }
.hx-kpi { font-size: .85rem; color: var(--mud-palette-text-secondary); margin-left: auto; }
.hx-content { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }

.hx-busy {
    position: absolute; z-index: 10; left: 50%; top: 40%; transform: translate(-50%, -50%);
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 8px;
    padding: 16px 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

.hx-graph { flex: 1; min-height: 240px; position: relative; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; background: var(--tuga-chart-bg); }
.hx-charts { position: absolute; inset: 4px; overflow: auto; scrollbar-gutter: stable; }
.hx-charts .uplot { position: relative; }
/* Légende avec les valeurs sous le curseur, au-dessus du graphique (coin supérieur gauche). */
.hx-charts .u-legend {
    position: absolute; top: 2px; left: 66px; z-index: 4; font-size: .75rem; text-align: left; pointer-events: none;
    background: color-mix(in srgb, var(--tuga-chart-bg) 85%, transparent); border-radius: 4px; padding: 0 4px; max-width: calc(100% - 140px);
}
.hx-charts .u-legend tr { display: inline-block; margin-right: 6px; }
.hx-charts .u-legend .u-marker { width: 10px; height: 10px; }
.hx-charts .u-legend .u-series th { font-weight: 400; }
.hx-hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--mud-palette-text-secondary); gap: 6px; pointer-events: none; }
.hx-stats { flex: none; max-height: 30%; display: flex; flex-direction: column; margin-top: 6px; }

.hx-table { overflow: auto; flex: 1; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; background: var(--mud-palette-surface); }
.hx-table table { border-collapse: separate; border-spacing: 0; font-size: .82rem; width: max-content; min-width: 100%; }
.hx-table th, .hx-table td { padding: 3px 8px; border-bottom: 1px solid var(--mud-palette-lines-default); white-space: nowrap; }
.hx-table th { position: sticky; top: 0; z-index: 2; background: var(--mud-palette-background-gray); font-weight: 500; text-align: left; vertical-align: bottom; }
.hx-table td:first-child { position: sticky; left: 0; background: inherit; z-index: 1; }
.hx-table th:first-child { left: 0; z-index: 3; }
.hx-table tr { background: var(--mud-palette-surface); }
.hx-table .r { text-align: right; }
.hx-table tr:hover td { background: var(--mud-palette-action-default-hover); }
.hx-table tr.k-Total { background: var(--tuga-total); font-weight: 600; }
.hx-table tr.k-GrandTotal { background: var(--tuga-grand); font-weight: 700; }
.hx-table tr.k-Alert td { color: #c42b1c; }
.hx-table tr.k-Minor td { color: var(--mud-palette-text-disabled); }
.hx-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }

.hx-gantt { flex: 1; position: relative; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; background: var(--tuga-chart-bg); overflow: hidden; min-height: 300px; }

.hx-tip {
    display: none; position: absolute; z-index: 5; pointer-events: none; white-space: pre; font-size: .8rem;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border: 1px solid var(--mud-palette-lines-default); border-radius: 5px; padding: 6px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.hx-split { flex: 1; min-height: 0; display: flex; gap: 8px; }
.hx-fill { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hx-top { width: 300px; flex: none; overflow: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: 10px; background: var(--mud-palette-surface); font-size: .85rem; }
.hx-bar { height: 6px; background: var(--mud-palette-lines-default); border-radius: 3px; margin: 2px 0; }
.hx-bar div { height: 6px; background: #c42b1c; border-radius: 3px; }

.hx-heat { flex: 1; overflow: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; background: var(--mud-palette-surface); padding: 8px; }
.hx-heat table { border-collapse: separate; border-spacing: 1px; font-size: .75rem; }
.hx-heat th { position: sticky; top: 0; background: var(--mud-palette-surface); font-weight: 500; z-index: 1; }
.hx-heat td { min-width: 28px; height: 18px; border-radius: 2px; }
.hx-heat td.d { padding-right: 8px; white-space: nowrap; }
.hx-heat td.r, .hx-heat th.r { text-align: right; padding-left: 8px; }
.hx-heat-legend { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: .85rem; }
.hx-heat-scale { display: inline-block; width: 220px; height: 12px; border-radius: 3px; }

.hx-ov { flex: 1; overflow: auto; }
.hx-ov-day { font-size: 1.05rem; font-weight: 500; margin-bottom: 10px; }
.hx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.hx-card { border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; background: var(--mud-palette-surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.hx-card.alert { border-color: #c42b1c; box-shadow: inset 4px 0 0 #c42b1c; }
.hx-card-title { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--mud-palette-text-secondary); }
.hx-card-big { font-size: 2rem; font-weight: 500; line-height: 1.2; }
.hx-card-big small { font-size: 1rem; color: var(--mud-palette-text-secondary); }
.hx-card-line { font-size: .82rem; color: var(--mud-palette-text-secondary); }
.hx-spark { height: 46px; margin-top: 6px; }
.hx-card-link { margin-top: auto; padding-top: 6px; font-size: .82rem; color: var(--mud-palette-primary); text-decoration: none; }

/* Écrans étroits : la liste des courbes passe par-dessus le contenu, les blocs s'empilent. */
@media (max-width: 900px) {
    .hx { height: auto; min-height: 0; }
    .hx-body { position: relative; flex-direction: column; }
    .hx-side { position: absolute; z-index: 20; left: 0; top: 0; bottom: 0; width: min(300px, 85vw); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
    .hx-graph { min-height: 420px; }
    .hx-tab span { display: none; }
    .hx-tab-toggle span, .hx-tab.on span { display: inline; }
    .hx-tab-group { display: none; }
    .hx-split { flex-direction: column; }
    .hx-top { width: auto; }
    .hx-kpi { margin-left: 0; }
}
.hx-tab-chart { cursor: default; color: var(--mud-palette-primary); font-weight: 600; border: 1px solid var(--mud-palette-lines-default); }

/* Vues d'un graphique personnalisé : Graphique / Statistique / Configuration. */
.hx-seg { display: inline-flex; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; overflow: hidden; background: var(--mud-palette-surface); }
.hx-seg button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border: 0; background: transparent; color: var(--mud-palette-text-primary);
    font: inherit; font-size: .82rem; cursor: pointer; }
.hx-seg button + button { border-left: 1px solid var(--mud-palette-lines-default); }
.hx-seg button:hover:not(:disabled) { background: var(--mud-palette-action-default-hover); }
.hx-seg button.on { background: var(--mud-palette-primary); color: #fff; }
.hx-seg button:disabled { opacity: .5; cursor: default; }

/* Liste « Mes graphiques ». */
.hx-tree { flex: none; width: 230px; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px; background: var(--mud-palette-surface); }
.hx-tree-head { display: flex; align-items: center; padding: 6px 4px 2px 10px; font-size: .85rem; }
.hx-tree-new { display: flex; align-items: center; gap: 6px; margin: 2px 8px 6px; padding: 6px 8px; border-radius: 6px; font-size: .82rem; text-decoration: none;
    color: var(--mud-palette-primary); border: 1px dashed var(--mud-palette-primary); }
.hx-tree-new:hover { background: var(--mud-palette-action-default-hover); }
.hx-tree-list { flex: 1; overflow: auto; padding: 0 4px 8px; }
.hx-tree-folder, .hx-tree-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 6px; border: 0; border-radius: 5px; background: transparent;
    font: inherit; font-size: .82rem; color: var(--mud-palette-text-primary); text-align: left; text-decoration: none; cursor: pointer; }
.hx-tree-folder { font-weight: 600; margin-top: 4px; color: var(--mud-palette-text-secondary); }
.hx-tree-item { padding-left: 22px; }
.hx-tree-folder span, .hx-tree-item span { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.hx-tree-folder em, .hx-tree-item em { font-style: normal; font-size: .72rem; color: var(--mud-palette-text-secondary); }
.hx-tree-folder:hover, .hx-tree-item:hover { background: var(--mud-palette-action-default-hover); }
.hx-tree-item.on { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); color: var(--mud-palette-primary); font-weight: 600; }

/* Statistique jour / nuit. */
.hx-dn { height: 100%; overflow: auto; }
.hx-dn-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.hx-dn-card { border: 1px solid var(--mud-palette-lines-default); border-left: 4px solid var(--dn-color); border-radius: 8px; background: var(--mud-palette-surface); overflow-x: auto; flex: 1 1 max-content; max-width: 100%; }
.hx-dn-card header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: .86rem;
    background: color-mix(in srgb, var(--dn-color) 10%, transparent); }
.hx-dn-card header b { flex: 1; }
.hx-dn-card table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.hx-dn-card th { font-weight: 600; color: var(--mud-palette-text-secondary); padding: 4px 10px; text-align: left; white-space: nowrap; }
.hx-dn-card th .mud-icon-root { vertical-align: -4px; font-size: 1rem; }
.hx-dn-card td { padding: 3px 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hx-dn-card .r { text-align: right; }
.hx-dn-card tr.dn-first td { border-top: 1px solid var(--mud-palette-lines-default); }
.hx-dn-card td.dn-day { vertical-align: top; color: var(--mud-palette-text-secondary); }
.hx-dn-card .dn-min { color: #1565c0; }
.hx-dn-card .dn-max { color: #c62828; }
.hx-dn-card .dn-avg { color: #2e7d32; font-weight: 600; }
@media (max-width: 900px) { .hx-tree { width: auto; max-height: 40vh; } }

/* Lignes de la liste avec actions au survol (renommer, icône, menu ⋮). */
.hx-tree-row { display: flex; align-items: center; border-radius: 5px; }
.hx-tree-row > .hx-tree-folder, .hx-tree-row > .hx-tree-item { flex: 1; min-width: 0; }
.hx-tree-row .hx-tree-act { flex: none; opacity: 0; transition: opacity .15s; }
.hx-tree-row:hover .hx-tree-act, .hx-tree-row:focus-within .hx-tree-act { opacity: 1; }
.hx-tree-row .hx-tree-act .mud-icon-button { padding: 3px; }
.hx-tree-empty { padding: 2px 8px 6px 28px; font-size: .74rem; color: var(--mud-palette-text-secondary); }
@media (hover: none) { .hx-tree-row .hx-tree-act { opacity: 1; } }

/* Choix d'une icône. */
.hx-icons { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 4px; max-height: 52vh; overflow: auto; }
.hx-icons button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); cursor: pointer; }
.hx-icons button:hover { background: var(--mud-palette-action-default-hover); }
.hx-icons button.on { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary); color: #fff; }

/* ===== Barre unique des historiques ===== */
.hx-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; position: relative; z-index: 31; }
.hx-grow { flex: 1; }
.hx-scrim { position: fixed; inset: 0; z-index: 30; }
.hx-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font: inherit; font-size: .88rem; cursor: pointer; white-space: nowrap; }
.hx-pill:hover { background: var(--mud-palette-action-default-hover); }
.hx-pill-main { font-weight: 600; color: var(--mud-palette-primary); }
.hx-pill-text { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.hx-pill-sel { padding-right: 4px; }
.hx-pill-sel select { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; max-width: 240px; }
.hx-topbar .hx-seg button { height: 32px; }
.hx-seg-period button { padding: 5px 10px; }
.hx-dates2 { display: inline-flex; align-items: center; }
.hx-dd { position: relative; }
.hx-dd-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 220px; max-height: 75vh; overflow: auto;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; }
.hx-dd-right { left: auto; right: 0; }
.hx-dd-group { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mud-palette-primary); margin: 8px 8px 2px; }
.hx-dd-item { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent;
    color: var(--mud-palette-text-primary); font: inherit; font-size: .88rem; text-decoration: none; cursor: pointer; text-align: left; white-space: nowrap; }
.hx-dd-item:hover { background: var(--mud-palette-action-default-hover); }
.hx-dd-item.on { background: var(--mud-palette-primary); color: #fff; }
.hx-dd-tree { width: 320px; padding: 0; }
.hx-dd-tree .hx-tree { width: auto; border: 0; max-height: 70vh; }
.hx-dd-dates { left: auto; right: 0; width: 420px; padding: 10px; }
.hx-dd-display { width: 280px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.hx-dd-display .mud-input-control { margin: 0; }

/* ===== Cartes des valeurs au-dessus du graphique ===== */
.hx-vcards { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 4px; flex: none; }
.hx-vcard { flex: 0 0 auto; min-width: 150px; max-width: 240px; padding: 7px 10px 6px; border-radius: 10px; background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-top: 4px solid var(--c); }
.hx-vcard-name { font-size: .74rem; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-vcard-main { display: flex; align-items: baseline; gap: 4px; }
.hx-vcard-main b { font-size: 1.45rem; font-weight: 600; color: var(--c); font-variant-numeric: tabular-nums; line-height: 1.2; }
.hx-vcard-main span { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.hx-vcard-main em { margin-left: auto; font-style: normal; font-size: .7rem; color: var(--mud-palette-text-secondary); }
.hx-vcard-mm { display: flex; gap: 10px; font-size: .74rem; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.hx-vcard-mm .mn { color: #1565c0; }
.hx-vcard-mm .mx { color: #c62828; }
.hx-details-toggle { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 4px; border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: .82rem; color: var(--mud-palette-text-secondary); flex: none; }
.hx-details-toggle em { font-style: normal; margin-left: 8px; opacity: .8; }
.hx-details-toggle:hover { color: var(--mud-palette-primary); }
@media (max-width: 900px) {
    .hx-seg span { display: none; }
    .hx-pill-text { max-width: 160px; }
    .hx-dd-dates { width: min(420px, 92vw); }
}
.hx-icons-group { grid-column: 1 / -1; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mud-palette-primary); margin: 6px 0 0; }

/* Choix de période commun (PeriodBar). */
.tuga-period { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Bulle des valeurs du graphique (près du curseur). */
.hx-ctip { white-space: nowrap; font-size: .78rem; line-height: 1.45; padding: 5px 9px; }
.hx-ctip-time { color: var(--mud-palette-text-secondary); margin-bottom: 2px; }
.hx-ctip-row { display: flex; align-items: center; gap: 6px; }
.hx-ctip-row i { width: 10px; height: 3px; border-radius: 2px; flex: none; }
.hx-ctip-row i.dash { height: 2px; opacity: .7; }
.hx-ctip-row span { flex: 1; }
.hx-ctip-row b { font-weight: 600; margin-left: 12px; font-variant-numeric: tabular-nums; }

.hx-vcards-hide { align-self: flex-start; flex: none; border: 0; background: transparent; color: var(--mud-palette-text-secondary); cursor: pointer; padding: 2px; border-radius: 50%; opacity: .55; }
.hx-vcards-hide:hover { opacity: 1; background: var(--mud-palette-action-default-hover); }
/* Valeurs sous le curseur et choix de la bulle, dans le tableau des courbes. */
.hx-stats td.hx-cur-t, .hx-stats td.hx-cur-v { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hx-stats td.hx-cur-v { font-weight: 600; }
.hx-stats .hx-cur-tip { text-align: center; }

.hx-back { text-decoration: none; color: var(--mud-palette-primary); font-weight: 600; }

.hx-icon-on { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important; }
.hx-nocursor .u-cursor-x, .hx-nocursor .u-cursor-y, .hx-nocursor .u-cursor-pt { display: none !important; }
.hx-nocursor .hx-ctip { display: none !important; }

/* Cases dans le graphique (cartes, mire et bulle) : discrètes, plus nettes au survol. */
.hx-overlay { position: absolute; top: 6px; right: 14px; z-index: 6; display: flex; gap: 10px; padding: 3px 8px; border-radius: 6px; font-size: .74rem;
    background: color-mix(in srgb, var(--tuga-chart-bg) 70%, transparent); color: var(--mud-palette-text-secondary); opacity: .55; transition: opacity .2s; }
.hx-overlay:hover { opacity: 1; }
.hx-overlay label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
.hx-overlay input { margin: 0; accent-color: var(--mud-palette-primary); cursor: pointer; }

/* Records de la carte de chaleur (jour, mois, heure, extrêmes). */
.hx-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-bottom: 10px; }
.hx-rec { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 8px; border-left: 4px solid; background: var(--mud-palette-surface); border-top: 1px solid var(--mud-palette-lines-default); border-right: 1px solid var(--mud-palette-lines-default); border-bottom: 1px solid var(--mud-palette-lines-default); }
.hx-rec.lo { border-left-color: #2c7bb6; } .hx-rec.hi { border-left-color: #d7191c; }
.hx-rec span { font-size: .72rem; color: var(--mud-palette-text-secondary); }
.hx-rec b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.hx-rec.lo b { color: #2c7bb6; } .hx-rec.hi b { color: #d7191c; }
.hx-rec em { font-style: normal; font-size: .74rem; color: var(--mud-palette-text-secondary); }