/* BOT Grid Flow — the Dashboard cards and the /gridflow full page (assets/bot_gridflow.js builds the DOM).
   The app's colours: every --gf-* below is an alias of a bot_theme token (--bot-*) with the classic value as fallback, so the cards follow the
   theme chosen at the top right of the app (classic / dark / light); the renderer reads the same aliases for the canvases. 2026-11-03. */
.gf-root,.gf-part,.gf-modal{
  --gf-bg:var(--bot-surface-card-bg,#ffffff);--gf-card:var(--bot-surface-card-bg-elevated,var(--bot-surface-card-bg,#ffffff));--gf-alt:var(--bot-surface-table-row-alt,#f4f0e6);
  --gf-line:var(--bot-border-subtle,#eee9dd);--gf-axis:var(--bot-border-strong,#c9c0ab);--gf-border:var(--bot-border-default,#e6e0d4);
  --gf-text:var(--bot-text-primary,#1F2733);--gf-muted:var(--bot-text-muted,#5C564F);--gf-navy:var(--bot-brand-navy,#1b2a4a);--gf-gold:var(--bot-brand-gold,#b8860b);--gf-lit:var(--bot-brand-gold-light,#d5a636);
  --gf-on-navy:var(--bot-text-on-navy,#ffffff);--gf-thead:var(--bot-surface-table-header-bg,var(--bot-brand-navy,#1b2a4a));--gf-thead-ink:var(--bot-text-on-navy,#ffffff);
  --gf-ok:var(--bot-status-success,#28a745);--gf-okink:var(--bot-tint-success-ink,#166534);--gf-okbg:var(--bot-tint-success-bg,#dcfce7);--gf-okbd:var(--bot-tint-success-border,#bbf7d0);
  --gf-warn:var(--bot-status-warning,#b45309);--gf-warnink:var(--bot-tint-warning-ink,#92400e);--gf-warnbg:var(--bot-tint-warning-bg,#fef3c7);--gf-warnbd:var(--bot-tint-warning-border,#fcd34d);
  --gf-bad:var(--bot-status-danger,#dc3545);--gf-badink:var(--bot-tint-danger-ink,#991b1b);--gf-badbg:var(--bot-tint-danger-bg,#fee2e2);--gf-badbd:var(--bot-tint-danger-border,#fca5a5);
  --gf-info:var(--bot-status-info,#0e7c7b);--gf-infoink:var(--bot-tint-info-ink,#1e40af);--gf-infobg:var(--bot-tint-info-bg,#dbeafe);--gf-infobd:var(--bot-tint-info-border,#93c5fd);
  --gf-gray:var(--bot-status-idle,#8a94a6);--gf-neubg:var(--bot-tint-neutral-bg,#f1f5f9);--gf-neuink:var(--bot-tint-neutral-ink,#334155);--gf-neubd:var(--bot-tint-neutral-border,#cbd5e1);
  --gf-pal-grid:var(--bot-brand-navy,#1b2a4a);--gf-pal-electrons:var(--bot-brand-gold-light,#ffd27a);--gf-pal-actual:var(--bot-chart-semantic-actual,var(--bot-brand-navy,#1b2a4a));
  --gf-pal-model:var(--bot-chart-semantic-baseline,var(--bot-brand-gold,#b8860b));--gf-pal-savings:var(--bot-chart-semantic-savings,#28a745);--gf-pal-over:var(--bot-status-danger,#dc3545);
  --gf-pal-peak:var(--bot-chart-semantic-peak,#c2185b);--gf-pal-unmetered:var(--bot-status-idle,#8a94a6);
  --gf-cat-0:var(--bot-data-boundary-b0,#4e79a7);--gf-cat-1:var(--bot-data-boundary-b1,#59a14f);--gf-cat-2:var(--bot-data-boundary-b2,#e15759);--gf-cat-3:var(--bot-data-boundary-b3,#f28e2b);
  --gf-cat-4:var(--bot-data-boundary-b4,#76b7b2);--gf-cat-5:var(--bot-data-boundary-b5,#edc948);--gf-cat-6:var(--bot-data-boundary-b6,#b07aa1);--gf-cat-7:var(--bot-data-boundary-b7,#9c755f);
  font-family:var(--bot-font-family,Arial,Helvetica,sans-serif)}
.gf-root{background:var(--gf-bg);color:var(--gf-text);position:relative;min-height:380px}
.gf-root *{box-sizing:border-box}
.gf-part{position:relative}
.gf-wrap{display:flex;flex-direction:column;gap:8px;padding:6px 4px 2px}
.gf-root[data-mode="full"] .gf-wrap{height:100vh;padding:14px 18px;gap:10px}
.gf-hdr{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.78rem;color:var(--gf-muted)}
.gf-hdr .gf-title{font-family:Georgia,"Times New Roman",serif;font-weight:600;font-size:1.05rem;color:var(--gf-navy);letter-spacing:.2px}
.gf-root[data-mode="panel"] .gf-hdr .gf-title{display:none}
.gf-root[data-mode="full"] .gf-hdr .gf-title{font-size:1.5rem}
.gf-hdr .gf-meter{font-family:Consolas,"JetBrains Mono",ui-monospace,monospace;color:var(--gf-gold);font-weight:600}
.gf-badge{display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem}
.gf-dot{width:9px;height:9px;border-radius:50%;background:var(--gf-ok);box-shadow:0 0 0 0 rgba(40,167,69,.6);animation:gfpulse 1.6s infinite}
.gf-dot.gray{background:var(--gf-gray);animation:none}.gf-dot.red{background:var(--gf-bad);animation:none}.gf-dot.replay{background:var(--gf-info);animation:none}
@keyframes gfpulse{0%{box-shadow:0 0 0 0 rgba(40,167,69,.5)}70%{box-shadow:0 0 0 9px rgba(40,167,69,0)}100%{box-shadow:0 0 0 0 rgba(40,167,69,0)}}
.gf-spacer{flex:1}.gf-clock{font-variant-numeric:tabular-nums;color:var(--gf-text)}
.gf-sim{background:var(--gf-warnbg);color:var(--gf-warnink);border:1px solid var(--gf-warnbd);border-radius:4px;padding:1px 8px;font-size:.7rem;letter-spacing:.12em}
.gf-ctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.75rem;color:var(--gf-muted)}
.gf-btn{background:var(--gf-card);border:1px solid var(--gf-border);color:var(--gf-navy);border-radius:5px;padding:3px 9px;font-size:.74rem;cursor:pointer;line-height:1.3}
.gf-btn:hover{border-color:var(--gf-gold);color:var(--gf-navy)}
.gf-seg{display:inline-flex}.gf-seg .gf-btn{border-radius:0;margin-left:-1px}.gf-seg .gf-btn:first-child{border-radius:5px 0 0 5px}.gf-seg .gf-btn:last-child{border-radius:0 5px 5px 0}
.gf-btn.on{color:var(--gf-on-navy);background:var(--gf-navy);border-color:var(--gf-navy);font-weight:600}
.gf-scrub{display:inline-flex;align-items:center;gap:8px;flex:1;min-width:240px}
.gf-scrub input[type=range]{flex:1;accent-color:var(--gf-gold);min-width:160px}
.gf-scrub .gf-time{font-family:Consolas,ui-monospace,monospace;font-variant-numeric:tabular-nums;min-width:48px;color:var(--gf-text)}
.gf-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:6px}
@media (max-width:1400px){.gf-root[data-mode="panel"] .gf-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gf-kpi{background:var(--gf-card);border:1px solid var(--gf-border);border-left:3px solid var(--gf-navy);border-radius:6px;padding:6px 9px;min-height:62px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.06)}
.gf-kpi .l{font-size:.62rem;color:var(--gf-muted);text-transform:uppercase;letter-spacing:.09em;white-space:nowrap}
.gf-kpi .v{font-size:1.3rem;font-weight:700;color:var(--gf-navy);font-variant-numeric:tabular-nums;line-height:1.15;margin-top:2px;font-family:Consolas,"JetBrains Mono",ui-monospace,monospace;white-space:nowrap}
.gf-root[data-mode="full"] .gf-kpi .v{font-size:1.9rem}
.gf-kpi .u{font-size:.68rem;color:var(--gf-muted);margin-left:3px;font-weight:400}
.gf-kpi .s{font-size:.66rem;color:var(--gf-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gf-kpi.gold{border-left-color:var(--gf-gold)}.gf-kpi.warn{border-left-color:var(--gf-warn)}.gf-kpi.bad{border-left-color:var(--gf-bad)}.gf-kpi.good{border-left-color:var(--gf-ok)}
.gf-kpi.good .v{color:var(--gf-okink)}.gf-kpi.bad .v{color:var(--gf-badink)}
.gf-stagewrap{overflow-x:auto;overflow-y:hidden;border:1px solid var(--gf-border);border-radius:6px;background:var(--gf-bg)}
.gf-stage{position:relative;height:520px;min-width:960px}
.gf-root[data-mode="full"] .gf-stagewrap{flex:1;min-height:0}.gf-root[data-mode="full"] .gf-stage{height:100%}
.gf-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the five columns (2026-11-03): on a narrow screen the picture scrolls sideways inside the card (never the page); a sticky copy of the GRID block
   stays in view at the left while the floors, panels, equipment and the inside of the units scroll under it */
.gf-sticky{position:sticky;left:0;top:0;width:126px;height:100%;display:none;pointer-events:none;z-index:2}
.gf-sticky.on{display:block}
.gf-stage .gf-sticky canvas{position:static;inset:auto;width:126px;height:100%;display:block}
@media (max-width:600px){.gf-root[data-mode="panel"] .gf-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.gf-ctrl .gf-scrub{min-width:160px}}
.gf-tip{position:absolute;pointer-events:none;background:var(--gf-card);border:1px solid var(--gf-border);border-radius:6px;padding:8px 10px;font-size:.76rem;line-height:1.35;max-width:320px;display:none;z-index:5;color:var(--gf-navy);box-shadow:0 4px 12px rgba(16,24,40,.14)}
.gf-tip b{color:var(--gf-navy);font-family:Georgia,serif}.gf-tip .m{font-family:Consolas,ui-monospace,monospace;font-variant-numeric:tabular-nums}.gf-tip .k{color:var(--gf-muted)}
.gf-tip .sav{color:var(--gf-okink);font-weight:700}.gf-tip .ovr{color:var(--gf-badink);font-weight:700}
.gf-row2{display:grid;grid-template-columns:3fr 2fr;gap:8px}
@media (max-width:1000px){.gf-row2{grid-template-columns:1fr}}
.gf-card{background:var(--gf-card);border:1px solid var(--gf-border);border-radius:6px;padding:8px 10px;min-height:200px}
.gf-card h4{margin:0 0 6px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gf-muted);font-weight:600;border:0;padding:0;font-family:inherit}
/* the trend card: the savings strip, the canvas, the legend */
.gf-partwrap{display:flex;flex-direction:column;gap:4px}
.gf-tsum{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:2px 4px 4px;line-height:1.2}
.gf-tsum .lbl{font-size:.72rem;color:var(--gf-muted);text-transform:uppercase;letter-spacing:.08em}
.gf-tsum .big{font-size:1.35rem;font-weight:700;font-family:Consolas,"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--gf-navy)}
.gf-tsum .mid{font-size:.95rem;font-weight:600;font-family:Consolas,ui-monospace,monospace;color:var(--gf-navy)}
.gf-tsum.saved .big,.gf-tsum.saved .mid{color:var(--gf-okink)}.gf-tsum.over .big,.gf-tsum.over .mid{color:var(--gf-badink)}
.gf-tsum .sub{font-size:.7rem;color:var(--gf-muted);flex-basis:100%}
.gf-trend{position:relative;height:240px}.gf-trend canvas{width:100%;height:100%;display:block}
.gf-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.68rem;color:var(--gf-muted);padding:2px 4px 0}
.gf-legend .sw{display:inline-block;width:18px;height:9px;border-radius:2px;vertical-align:middle;margin-right:5px}
.gf-legend .sw.ln{height:0;border-top:2px solid;background:none;border-radius:0}.gf-legend .sw.ds{border-top-style:dashed}
.gf-alerts{list-style:none;margin:0;padding:0;font-size:.78rem;max-height:300px;overflow:auto}
.gf-alerts li{display:flex;gap:8px;padding:5px 0;border-bottom:1px solid var(--gf-line)}
.gf-alerts li:last-child{border-bottom:0}
.gf-alerts .lv{flex:0 0 68px;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;padding-top:2px;font-weight:700}
.gf-alerts .critical .lv{color:var(--gf-badink)}.gf-alerts .warning .lv{color:var(--gf-warn)}.gf-alerts .info .lv{color:var(--gf-info)}
.gf-alerts .t{font-weight:600;color:var(--gf-navy)}.gf-alerts .d{color:var(--gf-muted);font-size:.72rem}
.gf-alerts .none{color:var(--gf-okink)}
.gf-tablewrap{overflow:auto;max-height:560px}
.gf-table{width:100%;border-collapse:collapse;font-size:.76rem;font-variant-numeric:tabular-nums}
.gf-table th{position:sticky;top:0;text-align:left;background:var(--gf-thead);color:var(--gf-thead-ink);font-weight:600;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 7px;white-space:nowrap}
.gf-table th.n{text-align:right}
.gf-table td{padding:3px 7px;border-bottom:1px solid var(--gf-line);white-space:nowrap;color:var(--gf-text)}
.gf-table td.n{text-align:right;font-family:Consolas,ui-monospace,monospace}
.gf-table tr.floor td{background:var(--gf-alt);font-weight:700;color:var(--gf-navy);border-top:1px solid var(--gf-border)}
.gf-table tr.floor td:first-child .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.gf-table tr.dev td:first-child{color:var(--gf-muted)}
.gf-table tr.nested td:nth-child(2){padding-left:26px;color:var(--gf-muted)}
.gf-table tr.nested2 td:nth-child(2){padding-left:46px}
.gf-table tr.total td{border-top:2px solid var(--gf-gold);font-weight:700;color:var(--gf-navy)}
.gf-bar{display:inline-block;height:8px;background:var(--gf-gold);border-radius:2px;vertical-align:middle;margin-right:6px}
.gf-chip{display:inline-block;border-radius:10px;padding:0 7px;font-size:.66rem;font-weight:700;letter-spacing:.04em;border:1px solid transparent}
.gf-chip.run{background:var(--gf-okbg);color:var(--gf-okink);border-color:var(--gf-okbd)}.gf-chip.off{background:var(--gf-neubg);color:var(--gf-neuink);border-color:var(--gf-neubd)}.gf-chip.check{background:var(--gf-warnbg);color:var(--gf-warnink);border-color:var(--gf-warnbd)}
.gf-chip.fault{background:var(--gf-badbg);color:var(--gf-badink);border-color:var(--gf-badbd)}.gf-chip.est{background:var(--gf-infobg);color:var(--gf-infoink);border-color:var(--gf-infobd)}.gf-chip.stale{background:var(--gf-neubg);color:var(--gf-muted);border:1px dashed var(--gf-gray)}
/* v2 statuses: fan only (blue), staging (amber), bypass (gray, hatched), partial (hatched tail), no data (gray, dashed), meter pending (gray, dotted) */
.gf-chip.fan_only{background:var(--gf-infobg);color:var(--gf-infoink);border-color:var(--gf-infobd)}.gf-chip.staging{background:var(--gf-warnbg);color:var(--gf-warnink);border-color:var(--gf-warnbd)}
.gf-chip.bypass{background:repeating-linear-gradient(135deg,var(--gf-neubg) 0 4px,var(--gf-neubd) 4px 8px);color:var(--gf-neuink);border-color:var(--gf-neubd)}
.gf-chip.partial{background:linear-gradient(90deg,var(--gf-card) 0 55%,transparent 55%),repeating-linear-gradient(135deg,var(--gf-neubg) 0 4px,var(--gf-neubd) 4px 8px);color:var(--gf-muted);border-color:var(--gf-neubd)}
.gf-chip.nodata{background:var(--gf-card);color:var(--gf-muted);border:1px dashed var(--gf-gray)}
.gf-chip.pending{background:var(--gf-card);color:var(--gf-muted);border:1px dotted var(--gf-gray)}
.gf-chip.nometer{background:var(--gf-card);color:var(--gf-muted);border:1px dashed var(--gf-gray)}
.gf-chip.unassigned{background:var(--gf-card);color:var(--gf-muted);border:1px dotted var(--gf-warn)}
.gf-note{display:block;font-size:.68rem;font-weight:400;color:var(--gf-muted);line-height:1.25;margin-top:1px;white-space:normal;max-width:34em}
.gf-foot{font-size:.68rem;color:var(--gf-muted);display:flex;flex-wrap:wrap;gap:14px;padding:2px 2px 0}
.gf-foot a{color:var(--gf-gold);text-decoration:none;font-weight:600}
.gf-err{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--gf-muted);font-size:.9rem;text-align:center;padding:20px}
/* the BOT logo behind a DOM card (the canvases draw their own) */
.gf-wm{position:relative}
.gf-wm::before{content:"";position:absolute;inset:0;background:url(/assets/Logo.png) center/35% no-repeat;opacity:.07;pointer-events:none;z-index:0}
.gf-wm > *{position:relative;z-index:1}
/* a card on the whole screen (⤢): the house fullscreen modal, built by the renderer with Bootstrap's own classes */
.gf-modal{z-index:1056}
.gf-modal .modal-content{background:var(--gf-card);border-radius:0}
.gf-modal .modal-header{background:var(--gf-card);border-bottom:2px solid var(--gf-gold, #b8860b)}
.gf-modal .modal-title{font-family:Georgia,"Times New Roman",serif;color:var(--gf-navy);font-weight:600;font-size:1rem}
.gf-modal .gf-modalbody{overflow:auto}
.gf-modal .gf-x-flow .gf-stage{height:calc(100vh - 250px)!important;min-height:420px}
.gf-modal .gf-x-trend .gf-trend{height:calc(100vh - 200px);min-height:300px}
.gf-modal .gf-x-alerts .gf-alerts{max-height:none;font-size:.9rem}
.gf-modal .gf-x-table .gf-tablewrap{max-height:none}.gf-modal .gf-x-table .gf-table{font-size:.86rem}
.gf-modal .gf-x-table,.gf-modal .gf-x-alerts{position:relative}
.gf-modal .gf-x-table::before,.gf-modal .gf-x-alerts::before{content:"";position:absolute;inset:0;background:url(/assets/Logo.png) center/30% no-repeat;opacity:.06;pointer-events:none}
.gf-backdrop{z-index:1055}
/* the colour editor */
.gf-colors{font-size:.8rem;color:var(--gf-text, #1F2733)}
.gf-colors h6{font-family:Georgia,serif;color:var(--gf-navy);font-size:.8rem;margin:8px 0 4px;letter-spacing:.04em}
.gf-colors .row-c{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
.gf-colors label{display:flex;align-items:center;gap:8px;margin:0;padding:2px 0;cursor:pointer}
.gf-colors input[type=color]{width:36px;height:24px;border:1px solid var(--gf-border);border-radius:4px;padding:0;background:var(--gf-card);cursor:pointer}
.gf-colors .hex{font-family:Consolas,ui-monospace,monospace;color:var(--gf-muted);font-size:.7rem;margin-left:auto}
.gf-colors .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.gf-colors .msg{color:var(--gf-badink);font-size:.74rem;margin-right:auto;align-self:center}