pfilter button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.officetop{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.progwrap{width:100%}
.progtrack{height:6px;border-radius:999px;background:var(--bg);overflow:hidden;margin-top:6px}
.progfill{height:100%;border-radius:999px;background:var(--good)}

.officegrid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:start}
.roomgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:16px}
.roomcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
.roomcard.pending{opacity:.72}
.roomthumb{height:64px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--accent) 10%, var(--bg));color:var(--accent)}
.roomcard.pending .roomthumb{background:var(--bg);color:var(--muted)}
.roombody{padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.roomname{font-weight:600;font-size:13px}
.roomstatus{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;width:fit-content}
.roomstatus .dot{width:6px;height:6px;border-radius:50%}
.roomstatus.occ{background:var(--good-bg);color:var(--good)}
.roomstatus.occ .dot{background:var(--good)}
.roomstatus.empty{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.roomstatus.empty .dot{background:var(--muted)}
.roomstatus.pend{background:var(--warn-bg);color:var(--warn)}
.roomstatus.pend .dot{background:var(--warn)}
.roommeta{font-size:11.5px;color:var(--muted)}
.roomdevices{display:flex;gap:7px;color:var(--muted)}
.roomdevices svg{width:13px;height:13px}
.roomdevices svg.on{color:var(--accent)}

.sidepanel{display:flex;flex-direction:column;gap:16px}
.rolloutrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.rolloutrow:last-child{border-bottom:none}
.rolloutrow .stage{color:var(--muted);font-size:11.5px}

.threecol{display:grid;grid-template-columns:1.1fr 1fr 0.9fr;gap:18px;align-items:start}
.alertlist{display:flex;flex-direction:column}
.alertrow{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.alertrow:last-child{border-bottom:none}
.alertrow .dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none}
.alertrow .when{font-size:11px;color:var(--muted);white-space:nowrap}
.alertrow .what{font-size:12.5px}
.alertrow .where{font-size:11px;color:var(--muted)}

@media (max-width: 980px){
  .officegrid{grid-template-columns:1fr}
  .threecol{grid-template-columns:1fr}
  .officetop{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 480px){
  .officetop{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 640px){
  .skpis{grid-template-columns:repeat(2,1fr)}
  .srow-head{grid-template-columns:36px 1fr 18px}
  .smetrics{display:none}
  .scost{display:none}
  .ubar{grid-template-columns:76px 1fr 54px}
}

.legend{display:flex;gap:14px;align-items:center;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.legend .sw{width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:4px;vertical-align:-2px}

@media (max-width: 760px){
  .app{grid-template-columns:1fr}
  .rail{display:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
  header.bar{padding:12px 16px}
  main{padding:16px 16px 40px}
  .mobilenav{display:flex!important}
}
.mobilenav{display:none;gap:4px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface);overflow-x:auto}
.mobilenav button{flex:none;font-size:12.5px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.mobilenav button.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
@media (prefers-reduced-motion: no-preference){
  .navbtn, .themebtn{transition:background .12s ease}
}
.livebadge{position:fixed;bottom:14px;right:16px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;z-index:50;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.livebadge .dot{width:7px;height:7px;border-radius:50%;background:var(--good)}
.livebadge.stale .dot{background:var(--warn)}
</style>
</head>
<body>
<div class="app">
  <aside class="rail">
    <div class="brand">
      <div class="org">VJ IT — Facilities</div>
      <div class="sub">Room &amp; cabin control room</div>
    </div>
    <nav class="sections">
      <button class="navbtn active" data-tab="overview"><span class="dot" style="background:var(--accent)"></span>Overview</button>
      <button class="navbtn" data-tab="analytics"><span class="dot" style="background:var(--accent)"></span>Room Analytics</button>
      <button class="navbtn" data-tab="usage"><span class="dot" style="background:var(--accent)"></span>Usage &amp; Consumption</button>
    </nav>
    <div>
      <div class="sec-label">Rooms</div>
      <div class="roomlist">
        <div class="roomrow live"><span class="dot" style="background:var(--good)"></span>Meeting Room 2</div>
        <div class="roomrow"><span class="dot" style="background:var(--muted)"></span>Meeting Room 1 — pending</div>
        <div class="roomrow"><span class="dot" style="background:var(--muted)"></span>HOD Cabin, MD — pending</div>
        <div class="roomrow"><span class="dot" style="background:var(--muted)"></span>HOD Cabin, Director — pending</div>
      </div>
    </div>
  </aside>

  <div class="main">
    <div class="mobilenav" id="mobilenav">
      <button class="active" data-tab="overview">Overview</button>
      <button data-tab="analytics">Analytics</button>
      <button data-tab="usage">Usage</button>
    </div>
    <header class="bar">
      <div class="hours">
        Office hours 09:00 AM – 09:00 PM IST
        <span class="pill" id="hourspill">OPEN NOW</span>
      </div>
      <div class="filterpills topfilterpills" id="topfilterpills" data-target="sessionlist" hidden>
        <button class="fpill active" data-room="all">All cabins</button>
        <button class="fpill" data-room="mr2">Meeting Room 2</button>
      </div>
      <button class="daterange" id="daterange" hidden>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>
        29 Sep – 05 Oct 2026
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><path d="M6 9l6 6 6-6"/></svg>
      </button>
      <div style="display:flex;align-items:center;gap:14px;margin-left:auto">
        <span class="clock" id="clock">05-10-2026 · 14:52 IST</span>
        <div class="segtoggle" id="themeseg" role="group" aria-label="Color theme">
          <button type="button" data-theme-choice="light" class="active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M2 12h2M20 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>Light</button>
          <button type="button" data-theme-choice="dark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><path d="M21 12.5A9 9 0 1 1 11.5 3 7 7 0 0 0 21 12.5Z"/></svg>Dark</button>
        </div>
      </div>
    </header>

    <main>
      <!-- OFFICE OVERVIEW -->
      <section class="panel active" id="panel-overview">
        <div>
          <h2 style="font-family:var(--display);font-size:22px;margin:0 0 4px">Office Overview</h2>
          <div class="sub" style="margin-bottom:0">Live status, space utilization and session activity for all 4 rooms.</div>
        </div>

        <div class="skpis officetop">
          <div class="skpi" style="align-items:flex-start;text-align:left">
            <div class="icon" style="background:var(--good-bg);color:var(--good)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M3 20c0-3 2.7-5 6-5s6 2 6 5M14 20c0-2.2 1.8-4 4.5-4s4.5 1.8 4.5 4"/></svg></div>
            <div class="value" id="kpi-occ-now">0 / 4</div><div class="label">Rooms occupied now</div>
            <div class="progwrap"><div class="progtrack"><div class="progfill" id="kpi-occ-bar" style="width:0%"></div></div></div>
          </div>
          <div class="skpi"><div class="icon" style="background:var(--bg);color:var(--ink)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M8 2v4M16 2v4"/></svg></div><div class="value">4</div><div class="label">Total rooms</div></div>
          <div class="skpi"><div class="icon" style="background:var(--good-bg);color:var(--good)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="3.2"/><path d="M5 20c0-3.5 3-6 7-6s7 2.5 7 6"/></svg></div><div class="value" id="kpi-sessions-today">4</div><div class="label">Total sessions today</div></div>
          <div class="skpi"><div class="icon" style="background:var(--bg);color:var(--accent)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></div><div class="value" id="kpi-occupied-today">44m</div><div class="label">Total occupied time</div></div>
          <div class="skpi"><div class="icon" style="background:var(--good-bg);color:var(--good)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></div><div class="value">11:00 AM</div><div class="label">Busiest hour</div></div>
          <div class="skpi"><div class="icon" style="background:var(--bg);color:var(--ink)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18M8 2v4M16 2v4"/></svg></div><div class="value">Saturday</div><div class="label">Quietest day</div></div>
        </div>

        <div class="officegrid">
          <div class="card" style="min-width:0">
            <div class="cardrow">
              <h2 style="margin:0">Room Status (4 rooms)</h2>
            </div>
            <div class="chipfilter" style="margin-top:12px">
              <button class="active" data-filter="all">All 4</button>
              <button data-filter="occupied">Occupied <span id="chip-occ-count">0</span></button>
              <button data-filter="empty">Empty <span id="chip-empty-count">1</span></button>
              <button data-filter="pending">Pending 3</button>
            </div>

            <div class="roomgrid" id="roomgrid">
              <div class="roomcard" data-status="empty" id="roomcard-mr2">
                <div class="roomthumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" width="22" height="22"><rect x="3" y="7" width="14" height="11" rx="1.5"/><path d="M17 11l4-2.5v9L17 15"/></svg></div>
                <div class="roombody">
                  <div class="roomname">Meeting Room 2</div>
                  <span class="roomstatus empty" id="mr2-status"><span class="dot"></span><span id="mr2-status-text">Empty</span></span>
                  <div class="roommeta" id="mr2-meta">22.3°C · last session 12:31 PM</div>
                  <div class="roomdevices" id="mr2-devices" title="AC off, TV off, sensor online">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M4.5 7l15 10M19.5 7l-15 10"/></svg>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8"/></svg>
                    <svg class="on" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M8 12l2.5 2.5L16 9"/></svg>
                  </div>
                </div>
              </div>

              <div class="roomcard pending" data-status="pending">
                <div class="roomthumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" width="20" height="20"><circle cx="12" cy="12" r="9"/><path d="M12 8v4l2.5 2.5"/></svg></div>
                <div class="roombody">
                  <div class="roomname">Meeting Room 1</div>
                  <span class="roomstatus pend"><span class="dot"></span>Pending install</span>
                  <div class="roommeta">Sensor ordered, hub not paired</div>
                  <div class="roomdevices" style="opacity:.5">—</div>
                </div>
              </div>

              <div class="roomcard pending" data-status="pending">
                <div class="roomthumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" width="20" height="20"><circle cx="12" cy="12" r="9"/><path d="M12 8v4l2.5 2.5"/></svg></div>
                <div class="roombody">
                  <div class="roomname">HOD Cabin, MD</div>
                  <span class="roomstatus pend"><span class="dot"></span>Pending install</span>
                  <div class="roommeta">Site survey scheduled</div>
                  <div class="roomdevices" style="opacity:.5">—</div>
                </div>
              </div>

              <div class="roomcard pending" data-status="pending">
                <div class="roomthumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" width="20" height="20"><circle cx="12" cy="12" r="9"/><path d="M12 8v4l2.5 2.5"/></svg></div>
                <div class="roombody">
                  <div class="roomname">HOD Cabin, Director</div>
                  <span class="roomstatus pend"><span class="dot"></span>Pending install</span>
                  <div class="roommeta">Site survey scheduled</div>
                  <div class="roomdevices" style="opacity:.5">—</div>
                </div>
              </div>
            </div>
          </div>

          <div class="sidepanel">
            <div class="card">
              <h2 style="margin:0 0 2px">Live Occupancy</h2>
              <div class="sub" style="margin:0 0 10px" id="liveocc-sub">0 / 4 rooms in use right now</div>
              <div class="progtrack" style="height:10px"><div class="progfill" id="liveocc-bar" style="width:0%"></div></div>
              <div style="font-size:11.5px;color:var(--muted);margin-top:8px" id="liveocc-note">0% currently in use</div>
            </div>
            <div class="card">
              <h2 style="margin:0 0 2px">Rollout Status</h2>
              <div class="sub" style="margin:0 0 4px">Sensor + IR build-out, by cabin</div>
              <div class="rolloutrow"><span>Meeting Room 2</span><span class="chip good">Live</span></div>
              <div class="rolloutrow"><div><div>Meeting Room 1</div><div class="stage">Hub not paired</div></div><span class="chip warn">Ordered</span></div>
              <div class="rolloutrow"><div><div>HOD Cabin, MD</div><div class="stage">Site survey</div></div><span class="chip neutral">Scheduled</span></div>
              <div class="rolloutrow"><div><div>HOD Cabin, Director</div><div class="stage">Site survey</div></div><span class="chip neutral">Scheduled</span></div>
            </div>
          </div>
        </div>

        <div class="threecol">
          <div class="card" style="min-width:0">
            <div class="cardrow" style="margin-bottom:2px">
              <h2 style="margin:0">Occupancy Heatmap — Meeting Room 2</h2>
              <div class="viewtoggle" id="viewtoggle2">
                <button class="active" data-view="pct">Occupancy %</button>
                <button data-view="count">People Count</button>
              </div>
            </div>
            <div class="heatwrap">
              <table class="heat" id="heatmap2"></table>
            </div>
            <div class="legend" id="heatlegend2" style="margin-top:12px"></div>
          </div>

          <div class="card" style="min-width:0">
            <div class="cardrow" style="margin-bottom:2px">
              <h2 style="margin:0">Today's Timeline — Meeting Room 2</h2>
              <div class="legend" style="margin:0">
                <span><span class="sw" style="background:var(--accent)"></span>Occupancy %</span>
                <span><span class="sw" style="background:color-mix(in srgb, var(--accent) 40%, var(--good-bg))"></span>People count</span>
              </div>
            </div>
            <div class="sub" style="margin:2px 0 12px">Occupancy and people count by hour, today.</div>
            <svg viewBox="0 0 460 220" width="100%" height="220" role="img" aria-label="Occupancy percent and people count by hour, today" style="overflow:visible" id="timeline-svg">
              <line x1="50" y1="24" x2="440" y2="24" stroke="var(--line)" stroke-width="1"/>
              <line x1="50" y1="60.5" x2="440" y2="60.5" stroke="var(--line)" stroke-width="1"/>
              <line x1="50" y1="97" x2="440" y2="97" stroke="var(--line)" stroke-width="1"/>
              <line x1="50" y1="133.5" x2="440" y2="133.5" stroke="var(--line)" stroke-width="1"/>
              <line x1="50" y1="170" x2="440" y2="170" stroke="var(--line)" stroke-width="1"/>
              <g font-family="var(--mono)" font-size="9.5" fill="var(--muted)">
                <text x="46" y="27" text-anchor="end">100%</text>
                <text x="46" y="63.5" text-anchor="end">75%</text>
                <text x="46" y="100" text-anchor="end">50%</text>
                <text x="46" y="136.5" text-anchor="end">25%</text>
                <text x="46" y="173" text-anchor="end">0%</text>
                <text x="444" y="27" text-anchor="start" id="tl-rmax">6</text>
                <text x="444" y="173" text-anchor="start">0</text>
              </g>

              <line id="tl-guide" x1="128" y1="24" x2="128" y2="170" stroke="var(--accent)" stroke-width="1" stroke-dasharray="2,3"/>

              <path id="tl-area" d="M50,170 L50,126.2 L89,89.7 L128,63.4 L167,75.1 L206,111.6 L245,155.4 L284,140.8 L323,104.3 L362,82.4 L401,89.7 L440,118.9 L440,170 Z" fill="color-mix(in srgb, var(--accent) 14%, transparent)" stroke="none"/>

              <polyline id="tl-line-pct" points="50,126.2 89,89.7 128,63.4 167,75.1 206,111.6 245,155.4 284,140.8 323,104.3 362,82.4 401,89.7 440,118.9" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>
              <polyline id="tl-line-ppl" points="50,128.3 89,86.6 128,65.7 167,86.6 206,107.4 245,149.1 284,149.1 323,107.4 362,86.6 401,86.6 440,128.3" fill="none" stroke="color-mix(in srgb, var(--accent) 40%, var(--good-bg))" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>

              <g id="tl-dots-pct" fill="var(--accent)">
                <circle cx="50" cy="126.2" r="2.6"/><circle cx="89" cy="89.7" r="2.6"/><circle cx="128" cy="63.4" r="4.2"/><circle cx="167" cy="75.1" r="2.6"/><circle cx="206" cy="111.6" r="2.6"/><circle cx="245" cy="155.4" r="2.6"/><circle cx="284" cy="140.8" r="2.6"/><circle cx="323" cy="104.3" r="2.6"/><circle cx="362" cy="82.4" r="2.6"/><circle cx="401" cy="89.7" r="2.6"/><circle cx="440" cy="118.9" r="2.6"/>
              </g>
              <g id="tl-dots-ppl" fill="color-mix(in srgb, var(--accent) 40%, var(--good-bg))">
                <circle cx="50" cy="128.3" r="2.6"/><circle cx="89" cy="86.6" r="2.6"/><circle cx="128" cy="65.7" r="4.2"/><circle cx="167" cy="86.6" r="2.6"/><circle cx="206" cy="107.4" r="2.6"/><circle cx="245" cy="149.1" r="2.6"/><circle cx="284" cy="149.1" r="2.6"/><circle cx="323" cy="107.4" r="2.6"/><circle cx="362" cy="86.6" r="2.6"/><circle cx="401" cy="86.6" r="2.6"/><circle cx="440" cy="128.3" r="2.6"/>
              </g>

              <g font-family="var(--body)" font-size="10.5" fill="var(--muted)">
                <text x="50" y="192" text-anchor="middle">9 AM</text>
                <text x="128" y="192" text-anchor="middle">11 AM</text>
                <text x="206" y="192" text-anchor="middle">1 PM</text>
                <text x="284" y="192" text-anchor="middle">3 PM</text>
                <text x="362" y="192" text-anchor="middle">5 PM</text>
                <text x="440" y="192" text-anchor="middle">7 PM</text>
              </g>

              <foreignObject id="tl-tooltip" x="70" y="-6" width="140" height="68">
                <div xmlns="http://www.w3.org/1999/xhtml" style="font-family:var(--body);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 11px;box-shadow:0 4px 14px rgba(0,0,0,.12);font-size:11.5px;color:var(--ink);line-height:1.5">
                  <div style="font-weight:700;margin-bottom:3px" id="tl-tip-hour">11:00 AM</div>
                  <div style="display:flex;align-items:center;gap:6px"><span style="width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none"></span><span id="tl-tip-pct">73% occupied</span></div>
                  <div style="display:flex;align-items:center;gap:6px"><span style="width:7px;height:7px;border-radius:50%;background:color-mix(in srgb, var(--accent) 40%, var(--good-bg));flex:none"></span><span id="tl-tip-ppl">5 people avg</span></div>
                </div>
              </foreignObject>
            </svg>
          </div>

          <div class="card" style="min-width:0">
            <div class="cardrow" style="margin-bottom:2px">
              <h2 style="margin:0">Recent Alerts</h2>
              <a href="#analytics" style="font-size:12px;color:var(--accent);font-weight:600;text-decoration:none">View all</a>
            </div>
            <div class="alertlist" id="alertlist">
              <div class="alertrow">
                <span class="dot" style="background:var(--critical)"></span>
                <div style="flex:1;min-width:0">
                  <div class="what">AC auto-off, room confirmed empty</div>
                  <div class="where">Meeting Room 2</div>
                </div>
                <span class="when">12:31 PM</span>
              </div>
              <div class="alertrow">
                <span class="dot" style="background:var(--warn)"></span>
                <div style="flex:1;min-width:0">
                  <div class="what">TV ping-sync loop fixed</div>
                  <div class="where">Meeting Room 2</div>
                </div>
                <span class="when">Yesterday</span>
              </div>
              <div class="alertrow">
                <span class="dot" style="background:var(--warn)"></span>
                <div style="flex:1;min-width:0">
                  <div class="what">Sensor offline, 47 min</div>
                  <div class="where">Meeting Room 2</div>
                </div>
                <span class="when">Sat, 03 Oct</span>
              </div>
              <div class="alertrow">
                <span class="dot" style="background:var(--muted)"></span>
                <div style="flex:1;min-width:0">
                  <div class="what">Site survey scheduled</div>
                  <div class="where">HOD Cabin, Director</div>
                </div>
                <span class="when">2 days ago</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="panel" id="panel-analytics">
        <div>
          <h2 style="font-family:var(--display);font-size:22px;margin:0 0 4px">Room Analytics</h2>
          <div class="sub" style="margin-bottom:0">Space utilization, occupancy patterns and detailed room sessions in one view.</div>
        </div>

        <div class="skpis skpis9">
          <div class="skpi"><div class="icon" style="background:var(--good-bg);color:var(--good)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M3 20c0-3 2.7-5 6-5s6 2 6 5M14 20c0-2.2 1.8-4 4.5-4s4.5 1.8 4.5 4"/></svg></div><div class="value">41%</div><div class="label">Occupancy (office hours)</div><div class="delta up">↑ 8% vs previous 7 days</div></div>
          <div class="skpi"><div class="icon" style="background:var(--good-bg);color:var(--good)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></div><div class="value">11:00 AM</div><div class="label">Busiest hour</div><div class="delta">73% occupancy</div></div>
          <div class="skpi"><div class="icon" style="background:var(--bg);color:var(--ink)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18M8 2v4M16 2v4"/></svg></div><div class="value">Saturday</div><div class="label">Quietest day</div><div class="delta">14% occupancy</div></div>
          <div class="skpi"><div class="icon" style="background:var(--bg);color:var(--ink)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="3.2"/><path d="M5 20c0-3.5 3-6 7-6s7 2.5 7 6"/></svg></div><div class="value" id="an-sessions">4</div><div class="label">Total sessions</div><div class="delta">Today</div></div>
          <div class="skpi"><div class="icon" style="background:var(--good-bg);color:var(--good)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></div><div class="value" id="an-occupied">44m</div><div class="label">Total occupied</div><div class="delta">Today</div></div>
          <div class="skpi"><div class="icon" style="background:var(--critical-bg);color:var(--critical)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M4.5 7l15 10M19.5 7l-15 10"/></svg></div><div class="value" id="an-ac">44m</div><div class="label">AC runtime</div><div class="delta">Today</div></div>
          <div class="skpi"><div class="icon" style="background:#efe6fb;color:#7e3fc9"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8"/></svg></div><div class="value" id="an-tv">42m</div><div class="label">TV runtime</div><div class="delta">Today</div></div>
          <div class="skpi"><div class="icon" style="background:var(--bg);color:var(--accent)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2 4 14h6l-1 8 9-12h-6z"/></svg></div><div class="value" id="an-boost">0m</div><div class="label">Extra chill used</div><div class="delta">Today</div></div>
          <div class="skpi"><div class="icon" style="background:var(--warn-bg);color:var(--warn)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v2M12 20v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M2 12h2M20 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/><circle cx="12" cy="12" r="4"/></svg></div><div class="value" id="an-cost">₹14.62</div><div class="label">Total cost</div><div class="delta">Today</div></div>
        </div>

        <div class="twocol">
        <div class="card" style="min-width:0">
          <div class="cardrow" style="margin-bottom:2px">
            <div>
              <h2 style="margin:0">Space Utilization</h2>
              <div class="sub" style="margin:2px 0 0">Occupancy against the 09:00 AM–09:00 PM office hours, by day and hour.</div>
            </div>
            <div class="viewtoggle" id="viewtoggle">
              <button class="active" data-view="pct">% View</button>
              <button data-view="count">Count View</button>
            </div>
          </div>

          <div class="metricrow">
            <label for="metricselect" style="font-size:12.5px;color:var(--muted)">Metric</label>
            <select id="metricselect" class="metricselect">
              <option>People Count (Avg)</option>
            </select>
            <div class="tipnote">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><circle cx="12" cy="12" r="9"/><path d="M12 16v-5M12 8h.01"/></svg>
              Shows the average number of people detected per hour, over the selected period.
            </div>
          </div>

          <div class="heatwrap">
            <table class="heat" id="heatmap"></table>
          </div>
          <div class="legend" id="heatlegend" style="margin-top:12px"></div>

          <div class="keyinsights">
            <div class="kititle"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.45 1 1.17 1 1.95V16h5.2v-.25c0-.78.4-1.5 1-1.95A6 6 0 0 0 12 3Z"/></svg>Key insights</div>
            <div class="kigrid">
              <div class="kiitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19V5M4 19h16M8 15l3-4 3 3 4-6"/></svg><div><strong>11:00 AM</strong><span>Busiest hour, avg 3.6 people</span></div></div>
              <div class="kiitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18M8 2v4M16 2v4"/></svg><div><strong>Saturday</strong><span>Quietest day, 14% occupancy</span></div></div>
              <div class="kiitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><div><strong>23 minutes</strong><span>Longest idle period, today</span></div></div>
              <div class="kiitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 15l6-6 4 4 6-8M20 9v-4h-4"/></svg><div><strong>16 minutes</strong><span>Avg session length, ↑ 12% vs previous 7 days</span></div></div>
            </div>
          </div>

          <div class="pendingnote">3 cabins queued for the same sensor build-out — Meeting Room 1, HOD Cabin (MD), HOD Cabin (Director).</div>
        </div>

        <div class="card" style="min-width:0">
          <div class="cardrow">
            <div>
              <h2 style="margin:0">Room Sessions</h2>
              <div class="sub" style="margin:2px 0 0">Every occupancy session with device runtime, cost and a camera snapshot.</div>
            </div>
            <button class="exportbtn">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M12 3v12M7 10l5 5 5-5M4 20h16"/></svg>
              Export
            </button>
          </div>
          <div class="sessionsmeta">
            <span>Today · <span id="sessions-date">05 Oct 2026</span></span>
            <span id="sessions-summary">4 sessions · 44m occupied</span>
          </div>

          <div class="sessionlist" id="sessionlist"></div>
        </div>
        </div>
      </section>

      <!-- USAGE & CONSUMPTION -->
      <section class="panel" id="panel-usage">
        <div>
          <h2 style="font-family:var(--display);font-size:19px;margin:0 0 4px">Usage &amp; Consumption Reports</h2>
          <div class="sub" style="margin-bottom:0">Monthly device runtime and estimated electricity cost per cabin, closed out once a month.</div>
        </div>

        <div class="filterpills" role="tablist" aria-label="Filter by cabin">
          <button class="fpill active" data-room="all">All cabins</button>
          <button class="fpill" data-room="mr2">Meeting Room 2</button>
        </div>

        <div class="skpis">
          <div class="skpi"><div class="icon" style="background:var(--bg);color:var(--ink)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2 4 14h6l-1 8 9-12h-6z"/></svg></div><div class="value" id="um-kwh">59.7</div><div class="label">kWh, this month</div></div>
          <div class="skpi"><div class="icon" style="background:var(--warn-bg);color:var(--warn)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v2M12 20v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M2 12h2M20 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/><circle cx="12" cy="12" r="4"/></svg></div><div class="value" id="um-cost">₹1,316.07</div><div class="label">Cost, this month</div></div>
          <div class="skpi"><div class="icon" style="background:var(--critical-bg);color:var(--critical)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M4.5 7l15 10M19.5 7l-15 10"/></svg></div><div class="value">84%</div><div class="label">Cost share, AC</div></div>
          <div class="skpi"><div class="icon" style="background:var(--good-bg);color:var(--good)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 15l6-6 4 4 6-8M20 9v-4h-4"/></svg></div><div class="value">+7.5%</div><div class="label">vs prior month</div></div>
          <div class="skpi"><div class="icon" style="background:var(--bg);color:var(--ink)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M8 2v4M16 2v4"/></svg></div><div class="value">1 / 4</div><div class="label">Cabins billed</div></div>
          <div class="skpi"><div class="icon" style="background:var(--bg);color:var(--accent)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></div><div class="value" id="um-daily">₹43.87</div><div class="label">Avg daily cost</div></div>
        </div>
        <div class="costnote">Cost = <code>(AC × 0.762kW + TV × 0.113kW + Center × 0.036kW + Filler × 0.072kW + Extra Chill × 0.762kW) × ₹22.03/kWh</code> — closed monthly, so a rate change only affects months billed after it.</div>

        <div class="sessionlist" id="usagelist"></div>

        <div class="card">
          <h2>AC runtime by day, last 2 weeks</h2>
          <div class="sub">Meeting Room 2. Bars scaled to a 9h office-hours ceiling.</div>
          <svg viewBox="0 0 640 170" width="100%" height="170" role="img" aria-label="AC runtime per day, last 14 days" style="overflow:visible">
            <line x1="40" y1="130" x2="620" y2="130" stroke="var(--line)" stroke-width="1"/>
            <text x="34" y="20" text-anchor="end" font-size="10" fill="var(--muted)" font-family="var(--mono)">9h</text>
            <line x1="40" y1="20" x2="620" y2="20" stroke="var(--line)" stroke-width="1" stroke-dasharray="2,3"/>
            <text x="34" y="133" text-anchor="end" font-size="10" fill="var(--muted)" font-family="var(--mono)">0h</text>
            <g font-family="var(--body)" font-size="10" fill="var(--muted)">
              <g id="acbars"></g>
            </g>
          </svg>
        </div>
      </section>
    </main>
  </div>
</div>
<div class="livebadge" id="livebadge"><span class="dot"></span><span id="livebadge-text">Connecting to Home Assistant…</span></div>

<script src="app.js"></script>
</body>
</html>