/* Suivi des habitudes de vie — styles. Lifted verbatim from the maquette so the live app is
   pixel-identical, plus a few classes for the customer picker and async load state.

   SAFE TO DROP INTO A PAGE THAT HAS ITS OWN CSS. Nothing here styles a bare element outside the
   dashboard: every rule is anchored to `#tlk-dash` (the wrapper index.php emits) or to `.ctt`
   (the tooltip, which Chart.js needs attached to <body>, so it cannot live inside the wrapper).
   That is the whole reason the integration no longer needs an iframe — see INTEGRATION.md §3.

   If you move or rename the wrapper, the four rules below are the ones to follow. */
#tlk-dash, .ctt{
  /* On the wrapper, not on :root — custom properties inherit, so descendants still see them, but
     an extranet that defines its own --border or --radius can no longer collide with ours (nor we
     with theirs). `.ctt` repeats them because the tooltip is appended to <body>, outside #tlk-dash. */
  --turq:#3BA9C0; --turq-d:#2C7A8C; --turq-l:#7FC2D1; --orange:#E8722E;
  --bg-soft:#EAF4F6; --ink:#1B3A4B; --ink2:#3a5a66; --muted:#7a939c;
  --border:#d9e6ea; --border2:#c4d6db; --green:#639922;
  --radius:12px; --radius-sm:8px;
}
#tlk-dash, #tlk-dash *, .ctt, .ctt *{box-sizing:border-box;}
/* Typography lives on the wrapper and inherits down. It used to sit on `body`, which restyled the
   WHOLE host page the moment this file was loaded next to an extranet's own stylesheet.

   `.ctt` IS LISTED HERE TOO, AND MUST BE. The tooltip is appended to <body> by Chart.js, so it is
   NOT inside the wrapper and inherits nothing from it. Left off, it fell back to the browser's
   default serif at 11.5px on a dark ground, which is what "the popup font is hard to read" was. */
#tlk-dash, .ctt{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
#tlk-dash{color:var(--ink2);}
/* Standalone only. index.php adds this class to <body> when there is no extranet session, so the
   development page keeps its background; copied into the extranet, the class is never emitted and
   the host page's own background is left alone. */
body.tlk-standalone{margin:0;background:#eef4f6;}
#tlk-dash.page{max-width:1180px;margin:24px auto;padding:0 16px;}
.card-root{background:#fff;border-radius:var(--radius);overflow:hidden;border:0.5px solid var(--border);margin-bottom:26px;}
.topbar{height:4px;background:var(--orange);}
.crumb{background:var(--turq-l);padding:10px 20px;font-size:13px;color:#0e3a47;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.crumb b{color:#fff;font-weight:400;}
.crumb-right{display:flex;align-items:center;gap:8px;}
.crumb-link{color:#0e3a47;text-decoration:none;font-size:12px;border:0.5px solid #9ccad6;border-radius:6px;padding:4px 9px;background:#fff;}
.cu-pick{display:flex;align-items:center;gap:6px;font-size:12px;color:#0e3a47;}
.cu-pick select{height:28px;max-width:230px;}
.inner{padding:18px 20px 22px;background:#fff;}
.sec-title{font-family:Georgia,'Times New Roman',serif;font-size:20px;color:var(--ink);border-bottom:0.5px solid #e0e0e0;padding-bottom:8px;margin-bottom:6px;}
.sec-sub{font-size:12px;color:var(--muted);margin-bottom:16px;}
.tabs{display:flex;gap:6px;margin:14px 0 16px;}
.tab{border:0.5px solid var(--border2);background:#fff;color:var(--ink2);padding:7px 18px;border-radius:var(--radius-sm);font-size:14px;cursor:pointer;}
.tab.on{border-color:var(--turq-d);background:var(--turq-d);color:#fff;}
.controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px;}
.nav-grp{display:flex;align-items:center;gap:8px;}
.iconbtn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:0.5px solid var(--border2);background:#fff;border-radius:var(--radius-sm);padding:0;cursor:pointer;font-size:16px;color:var(--ink2);line-height:1;}
.iconbtn:disabled{opacity:0.4;cursor:default;}
.datebox{display:flex;align-items:center;gap:7px;border:0.5px solid var(--border2);border-radius:var(--radius-sm);padding:0 10px;height:32px;}
.datebox input{border:none;background:transparent;height:30px;font-size:13px;padding:0;color:var(--ink2);font-family:inherit;}
.readout{font-size:12px;color:#5a7a66;margin-left:4px;}
.range-box{display:flex;align-items:center;gap:6px;}
.range-box input[type=date]{height:30px;font-size:12.5px;border:0.5px solid var(--border2);border-radius:6px;padding:0 8px;color:var(--ink2);font-family:inherit;background:#fff;}
.search-arrow{color:var(--muted);font-size:13px;}
.readout-row{display:flex;align-items:center;gap:10px;margin:-6px 0 16px;font-size:12.5px;color:var(--ink2);}
.readout-label{color:var(--muted);}
.btn-reset-mini{background:#fff;color:var(--ink2);border:0.5px solid var(--border2);border-radius:6px;padding:5px 12px;font-size:12px;cursor:pointer;font-family:inherit;}
.search-error{font-size:12px;color:#A32D2D;margin:-10px 0 14px;}
.controls.search-active .period-grp,.controls.search-active .gran-grp,.controls.search-active .nav-grp .iconbtn{opacity:0.4;pointer-events:none;}
.right-grp{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.period-grp{display:inline-flex;border:0.5px solid var(--border2);border-radius:var(--radius-sm);overflow:hidden;}
.period{border:none;border-right:0.5px solid #dce8ec;background:#fff;padding:6px 13px;font-size:13px;color:var(--ink2);cursor:pointer;}
.period:last-child{border-right:none;}
.period.on{background:var(--turq);color:#fff;}
.gran-grp{display:flex;align-items:center;gap:6px;}
.gran-grp i{font-size:17px;color:var(--muted);}
#tlk-dash select{height:32px;font-size:13px;border:0.5px solid var(--border2);border-radius:6px;color:var(--ink2);font-family:inherit;padding:0 6px;background:#fff;}
.ti{font-style:normal;display:inline-block;}
.gcard{border:0.5px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:16px;}
.ghead{background:var(--bg-soft);border-bottom:0.5px solid var(--border);padding:9px 16px;display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;cursor:pointer;}
.ghead-l{display:flex;align-items:center;gap:9px;border-left:3px solid var(--turq);padding-left:9px;}
.chev{font-size:16px;color:var(--turq);transition:transform .2s;}
.gtitle{font-family:Georgia,serif;font-size:15px;color:var(--ink);}
.info-btn{width:18px;height:18px;border-radius:50%;border:1px solid var(--turq);background:#fff;color:var(--turq);font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-style:italic;font-family:Georgia,serif;}
.info-panel{display:none;background:#fbfdfe;border-bottom:0.5px solid #e7f0f3;padding:12px 16px;font-size:12px;line-height:1.6;color:var(--ink2);}
.gbody{padding:14px 16px;background:#fff;}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:8px;font-size:12px;align-items:center;}
.lg{display:flex;align-items:center;gap:5px;border:none;background:transparent;cursor:pointer;font-size:12px;color:var(--ink2);padding:2px 0;font-family:inherit;}
/* The mirror of the tooltip's ring: the legend sits on a white card, so a PALE series colour needs
   a faint dark edge for the square to exist at all. Same reasoning, opposite side. */
.sw{width:11px;height:11px;border-radius:2px;box-shadow:0 0 0 1px rgba(27,58,75,0.22);}
.ln{width:18px;height:0;}
.note{font-size:12px;color:var(--muted);margin-bottom:8px;}
/* A card with no reading is REMOVED entirely (F5), so there is no per-card "empty" note any more.
   `.none-note` is the one message a bloc shows when NOTHING in it has data — an unexplained blank
   panel would be worse than the placeholder it replaces. */
.none-note{font-size:13px;color:var(--muted);padding:26px 4px;text-align:center;font-style:italic;
  border:0.5px dashed var(--border2);border-radius:var(--radius);background:#fcfdfe;}
.kpis{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.kpi{background:var(--bg-soft);border-radius:var(--radius-sm);padding:8px 12px;}
.kpi .k-l{font-size:11px;color:#5a7a86;}
.kpi .k-v{font-size:18px;font-weight:500;color:var(--ink);}
.viewsel{display:inline-flex;border:0.5px solid var(--border2);border-radius:var(--radius-sm);overflow:hidden;}
.vbtn{border:none;border-right:0.5px solid #dce8ec;background:#fff;color:var(--ink2);padding:4px 10px;font-size:12px;cursor:pointer;}
.vbtn:last-child{border-right:none;}
.vbtn.on{background:var(--turq);color:#fff;}
/* No horizontal scrollbar, ever: the heatmap sizes its own columns to the available width
   (see maxCellW / renderEvents), so there is nothing to scroll to. */
.hm-wrap{overflow:hidden;max-width:100%;}
/* flex-wrap: the events heatmap can now show up to five colour ramps (one per family in use), which
   no longer fits on one line at narrow widths. */
.hm-legend{display:flex;align-items:center;flex-wrap:wrap;gap:8px;row-gap:6px;margin-top:12px;font-size:11px;color:var(--muted);}
.room-toggle{flex-shrink:0;text-align:left;border:none;background:transparent;cursor:pointer;padding:0;font-family:inherit;width:88px;}

/* ---- Évènements heatmap ----------------------------------------------------------------
   table-layout:fixed so EVERY data column is the same width: a header label ("Fév") used to
   stretch its own column and produce one giant square in the middle of the grid. The month
   markers overflow their cell instead of widening it. */
table.hm{border-collapse:separate;border-spacing:2px;font-size:11px;table-layout:fixed;}
table.hm td{padding:0;}
table.hm td.hm-cell{border-radius:2px;text-align:center;font-size:10px;overflow:hidden;}
table.hm td.hm-cell.hl{outline:1.5px solid var(--ink);outline-offset:-1px;}
table.hm td.hm-x{font-size:9px;color:#9aa;text-align:left;overflow:visible;white-space:nowrap;position:relative;height:14px;}
table.hm td.hm-x span{position:absolute;left:0;top:0;}
table.hm td.hm-row-label{font-size:12px;color:var(--ink2);text-align:right;padding-right:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Family sub-header: UPPERCASE + bold, in that family's own vivid colour (set inline, since it
   varies per family). Matches the maquette's treatment. */
table.hm td.hm-fam{padding-top:9px;padding-bottom:1px;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;}

/* ---- shared hover tooltip ---------------------------------------------------------------
   Rendered in <body>, not inside the canvas, so it is never clipped by the chart frame or the
   card, and it appears instantly (no native title-attribute delay). */
/* Light text on a dark ground reads THINNER than the same weight dark-on-light, so this is sized
   and smoothed for that: 13px rather than 11.5, a slightly opaquer ground for contrast, and
   antialiasing so the strokes do not break up. `tabular-nums` keeps the figures in a column when
   several rows sit above each other. */
.ctt{position:fixed;z-index:9999;pointer-events:none;display:none;background:rgba(23,38,45,0.97);
     color:#fff;border-radius:6px;padding:9px 12px;font-size:13px;line-height:1.55;
     font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
     -moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
     box-shadow:0 4px 14px rgba(0,0,0,0.28);max-width:340px;}
.ctt .ctt-t{font-weight:600;font-size:13.5px;margin-bottom:5px;white-space:nowrap;
            letter-spacing:0.01em;}
.ctt .ctt-r{display:flex;align-items:center;gap:6px;white-space:nowrap;}
/* A RING, BECAUSE THE BUBBLE IS DARK. Several series are dark navy (#184242, #1B3A4B), and a dark
   square on a dark ground reads as a rendering fault rather than as a colour key: the label looks
   like it has lost its swatch. The ring is drawn OUTSIDE the box (box-shadow, not border), so every
   swatch keeps the same 10px colour area whatever its colour, and nothing moves. */
.ctt .ctt-s{width:10px;height:10px;border-radius:2px;flex:0 0 auto;
            box-shadow:0 0 0 1px rgba(255,255,255,0.65);}
/* The ignored-period note is a sentence, not a value, so it is the one row allowed to wrap —
   `nowrap` on it would stretch the bubble past the width of the card. Same row, same swatch size,
   same colours as every other line; only the wrapping differs. */
/* The note wraps, so its swatch aligns with the FIRST line rather than floating against the middle
   of the paragraph, which is where `align-items:center` on .ctt-r would otherwise put it. */
.ctt .ctt-r-note{white-space:normal;max-width:262px;line-height:1.45;align-items:flex-start;}
.ctt .ctt-r-note .ctt-s{margin-top:4px;}
.ctt .ctt-f{margin-top:4px;padding-top:4px;border-top:1px solid rgba(255,255,255,0.25);white-space:nowrap;}
/* caret: points down at the hovered column (default), or up when flipped below it */
.ctt::after{content:"";position:absolute;left:var(--caret,50%);margin-left:-5px;border:5px solid transparent;}
.ctt.ctt-above::after{top:100%;border-top-color:rgba(23,38,45,0.95);}
.ctt.ctt-below::after{bottom:100%;border-bottom-color:rgba(23,38,45,0.95);}
.hide{display:none;}
.load-state{font-size:13px;color:var(--muted);padding:10px 2px;}
.load-state.err{color:#A32D2D;}

/* ---- « Voir plus » : reveals the tab's other graphs (F7) ---------------------------------
   A tab shows its FIRST graph only; this expands to the rest. Centred under the cards, matching
   the maquette. On a preview it is LOCKED rather than hidden — a teaser has to show that there
   is more behind it, otherwise there is nothing to convert. */
/* overflow-anchor:none — stop Chrome choosing the button as its scroll anchor. Cards are inserted
   just above it, and holding the BUTTON still scrolls the page past everything just added.
   toggleExpansion anchors the first card by hand instead. */
.more-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;margin:4px 0 18px;overflow-anchor:none;}
.more-btn{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--ink2);
  border:0.5px solid var(--border2);border-radius:var(--radius-sm);padding:9px 22px;font-size:13px;
  cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s;}
.more-btn:hover{background:var(--bg-soft);border-color:var(--turq);}
.more-btn .caret{color:var(--turq);font-size:11px;line-height:1;position:relative;top:1px;}
.more-btn.locked{cursor:not-allowed;color:var(--muted);background:#f7f9fa;border-style:dashed;}
.more-btn.locked:hover{background:#f7f9fa;border-color:var(--border2);}
.more-btn .lock{font-size:12px;filter:grayscale(1);}
.more-note{font-size:11.5px;color:var(--muted);font-style:italic;}

/* Plan badge in the section sub-title, so nobody wonders why half the dashboard is missing. */
.plan-badge{display:inline-block;background:var(--orange);color:#fff;border-radius:4px;
  padding:1px 7px;font-size:11px;letter-spacing:.3px;vertical-align:1px;}
.locked-note .lock{filter:grayscale(1);margin-right:4px;}
/* A preview reaches only the tab it teases; the other is locked, not hidden. */
.tab.locked{cursor:not-allowed;color:var(--muted);background:#f7f9fa;border-style:dashed;}
.tab.locked .lock{font-size:11px;filter:grayscale(1);}


/* ---------------------------------------------------------------------------
   Ignored days (DaysToIgnore / DaysToIgnoreBedData)
   ---------------------------------------------------------------------------
   A day on one of those lists was MEASURED and then deliberately discarded. Gating its values
   alone renders it as a gap, which is indistinguishable from a sensor outage or a day before the
   customer was equipped — so the hatch, this swatch and the heatmap overlay exist to say which of
   those it actually is. The diagonal pattern matches the legacy Plotly dashboard's
   "Données d'actimétrie ignorées" trace, so the two agree on screen. */
.sw-ign {
  background-image: repeating-linear-gradient(45deg,
    rgba(150, 150, 150, 0.55) 0, rgba(150, 150, 150, 0.55) 1.5px,
    transparent 1.5px, transparent 4px);
  background-color: #fafaf8;
  border: 0.5px solid #d8d8d4;
}
/* The hatch chip is a <span>, not the <button.lg> the toggles use, and it had NO rule — so its
   swatch stayed an inline <i> and the 11x11 box in `.sw` was ignored outright. It rendered as a
   bare line next to the text. Same box model as `.lg`, minus the button affordances, so it sits on
   the same baseline at the same height as every other legend entry. */
.leg { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
       color: var(--ink2); padding: 2px 0; }
.leg .sw { flex: 0 0 auto; }         /* never let the square be squeezed by the label beside it */
.leg-ign { cursor: help; }           /* not a toggle: there is nothing to switch off */

/* The events heatmap is an HTML table, not a canvas, so its ignored columns are marked with the
   same pattern in CSS rather than by the Chart.js plugin. */
.hm-cell.hm-ign {
  background-image: repeating-linear-gradient(45deg,
    rgba(150, 150, 150, 0.38) 0, rgba(150, 150, 150, 0.38) 1.5px,
    transparent 1.5px, transparent 5px) !important;
}