/*
 * ============================================================
 *  rzero-shared.css
 *  Shared design tokens, layout, sidebar, and animation styles
 *  used across ALL R-Zero dashboard widgets:
 *
 *    1. IAQ Monitor       (rzero-iaq.html)
 *    2. Energy Savings    (rzero-energy.html)
 *    3. Occupancy         (rzero-occupancy.html)
 *    4. Portfolio         (rzero-portfolio.html)
 *
 *  Load this file once. Each widget file only contains its
 *  own unique component styles on top of this base.
 * ============================================================
 */


/* ─────────────────────────────────────────────────────────────
   SECTION 1: DESIGN TOKENS
   Single source of truth for all colors, sizes, and spacing.
   Every widget references these variables.
───────────────────────────────────────────────────────────── */
:root {
  /* Layout */
  --rz-sidebar-w:    220px;
  --rz-header-h:     52px;

  /* Backgrounds */
  --rz-bg:           #f7f8fa;

  /* Text */
  --rz-text:         #1a1a2e;
  --rz-text-muted:   #6b7280;

  /* Borders */
  --rz-border:       #e5e7eb;

  /* Brand colors */
  --rz-blue-alt:     #1A6BF0;    /* used in IAQ multi-device charts */
  --rz-blue-light:   #a8d4ff;
  --rz-teal-light:   #7de8e4;
  --rz-accent-light: #e8f0fe;

  /* Chart device colors (IAQ multi-device) */
  --rz-device-blue:   #1A6BF0;
  --rz-device-orange: #F59E0B;
  --rz-device-pink:   #EF4466;
  --rz-device-cyan:   #06B6D4;

  /* Semantic */
  --rz-green:  #10B981;
  --rz-red:    #EF4444;
  --rz-amber:  #F59E0B;
  --rz-purple: #8B5CF6;
}


/* ─────────────────────────────────────────────────────────────
   SECTION 2: FONT
   Poppins loaded once here. All widgets inherit from body.
───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body,
.rz-dashboard-font {
  font-family: 'Poppins', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--rz-text);
}


/* ─────────────────────────────────────────────────────────────
   SECTION 3: DASHBOARD WRAPPER
   The outermost container for every widget — the rounded
   bordered box with sidebar + main area side by side.
   Used by: IAQ, Occupancy, Portfolio
   NOT used by: Energy (it's a standalone card, no sidebar)
───────────────────────────────────────────────────────────── */
.rz-wrapper {
  width: 100%;
  max-width: 1200px;
  height: 720px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  display: flex;
  background: var(--rz-white);
  border: 1px solid var(--rz-border);
}


/* ─────────────────────────────────────────────────────────────
   SECTION 4: SIDEBAR
   Shared sidebar chrome: logo, nav sections, items, dividers,
   logout row. All four dashboard pages use the same sidebar
   structure — only the active item differs per page.
───────────────────────────────────────────────────────────── */
.rz-sidebar {
  width: var(--rz-sidebar-w);
  min-width: var(--rz-sidebar-w);
  background: var(--rz-white);
  border-right: 1px solid var(--rz-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rz-sidebar-logo {
  padding: 24px 24px 32px;
  display: flex;
  align-items: center;
}

.rz-sidebar-logo img {
  height: 22px;
  width: auto;
}

.rz-sidebar-section {
  padding: 0 16px;
  margin-bottom: 8px;
}

.rz-sidebar-section-label {
  font-size: 12px;
  font-weight: 500;
  color: #8b97a8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 0 12px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rz-sidebar-section-label svg {
  width: 18px;
  height: 18px;
  color: #8b97a8;
}

.rz-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 400;
  color: #999;
  border-radius: 8px;
  cursor: default;
  text-decoration: none;
  margin: 1px 0;
  transition: background 0.15s;
}

.rz-sidebar-item{color: #999 !important;}
.rz-sidebar-item.active {
  color: var(--rz-navy) !important;
  background: #edf2f9;
  font-weight: 500;
}

/* NEW badge (used in IAQ sidebar) */
.rz-new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 8px;
  background: #3b82f6;
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-left: 4px;
}

.rz-sidebar-divider {
  height: 1px;
  background: var(--rz-border);
  margin: 8px 24px 12px;
}

.rz-sidebar-spacer { flex: 1; }

.rz-sidebar-logout {
  padding: 18px 28px;
  border-top: 1px solid var(--rz-border);
  font-size: 14px;
  font-weight: 400;
  color: #4a5568;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: default;
}

.rz-sidebar-logout svg {
  width: 18px;
  height: 18px;
  color: #8b97a8;
}


/* ─────────────────────────────────────────────────────────────
   SECTION 5: MAIN AREA & SCROLL CONTAINER
   The right-hand panel that holds all page content.
   Used by: IAQ, Occupancy, Portfolio
───────────────────────────────────────────────────────────── */
.rz-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--rz-bg);
}

.rz-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 24px 40px;
  scroll-behavior: smooth;
}

.rz-scroll::-webkit-scrollbar { width: 6px; }
.rz-scroll::-webkit-scrollbar-track { background: transparent; }
.rz-scroll::-webkit-scrollbar-thumb { background: #c4c8d0; border-radius: 3px; }


/* ─────────────────────────────────────────────────────────────
   SECTION 6: HEADER BAR
   Top bar inside .rz-main — used by IAQ (device pills).
   Occupancy/Portfolio use a simpler inline h1 header instead.
───────────────────────────────────────────────────────────── */
.rz-header-bar {
  height: var(--rz-header-h);
  min-height: var(--rz-header-h);
  background: var(--rz-white);
  border-bottom: 1px solid var(--rz-border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
}

/* Device pills (IAQ only) */
.rz-device-count {
  font-size: 13px;
  color: var(--rz-text-muted);
  font-weight: 500;
}

.rz-device-pills { display: flex; gap: 8px; }

.rz-device-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--rz-border);
  font-size: 13px;
  font-weight: 500;
  color: var(--rz-text);
  background: var(--rz-white);
  cursor: default;
}

.rz-device-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Inline page header (Occupancy, Portfolio) */
.rz-page-header { margin-bottom: 20px; }
.rz-page-header h1 {
  font-size: 22px;
  font-weight: 600;
  color: var(--rz-navy);
  letter-spacing: -0.3px;
}
.rz-page-header .rz-tz {
  font-size: 12px;
  color: var(--rz-text-muted);
  margin-top: 2px;
}


/* ─────────────────────────────────────────────────────────────
   SECTION 7: SHARED CARD SHELL
   Generic white rounded card used as the base for chart panels
   in IAQ, Occupancy, and Portfolio.
   Energy uses its own card variants (rz-energy-*).
───────────────────────────────────────────────────────────── */
.rz-card {
  background: var(--rz-white);
  border-radius: 12px;
  border: 1px solid var(--rz-border);
  padding: 18px 20px 12px;
  margin-bottom: 14px;
}

.rz-card h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--rz-text);
  margin-bottom: 2px;
}

.rz-card-sub {
  font-size: 11px;
  color: var(--rz-text-muted);
  margin-bottom: 12px;
}

.rz-chart-wrap {
  position: relative;
  width: 100%;
}

.rz-chart-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Section label (used in Occupancy above each stats group) */
.rz-section-label {
  font-size: 12px;
  color: var(--rz-text-muted);
  border-bottom: 1px solid var(--rz-border);
  padding-bottom: 6px;
  margin-bottom: 10px;
  margin-top: 12px;
}


/* ─────────────────────────────────────────────────────────────
   SECTION 8: SHARED SVG CHART PRIMITIVES
   Grid lines, axis labels, line paths, area fills, bar rects.
   Referenced by class name in all SVG chart output.
───────────────────────────────────────────────────────────── */

/* Grid lines */
.rz-gl { stroke: #eef0f4; stroke-width: 1; }

/* Axis labels */
.rz-al {
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  fill: #9ca3af;
}

/* Line paths (generic) */
.rz-cl {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Colored line variants */
.rz-lt { stroke: var(--rz-teal); }
.rz-ln { stroke: var(--rz-blue); }

/* Area fill */
.rz-area-teal { fill: var(--rz-teal); opacity: 0.08; }
.rz-area-blue { fill: var(--rz-blue); opacity: 0.06; }

/* Bar fill colors */
.rz-bt { fill: var(--rz-blue); }          /* solid blue bar */
.rz-bl { fill: #e2e8f0; }                 /* grey background bar */
.rz-br { fill: var(--rz-blue); }          /* progress bar foreground */

/* Occupancy stacked bar group colors (Portfolio / Occupancy) */
.rz-s1{fill:#B3DBFF} .rz-s2{fill:#7DC0FF} .rz-s3{fill:#4DA6FF} .rz-s4{fill:#1794FF}
.rz-s5{fill:#0d7ae0} .rz-s6{fill:#0a60b8} .rz-s7{fill:#084990} .rz-s8{fill:#063368}
.rz-su{fill:#e2e8f0}

/* IAQ multi-device line colors */
.rz-line-blue   { stroke: var(--rz-device-blue); }
.rz-line-orange { stroke: var(--rz-device-orange); }
.rz-line-pink   { stroke: var(--rz-device-pink); }
.rz-line-cyan   { stroke: var(--rz-device-cyan); }

/* Energy dashboard SVG (rze- prefix preserved for backwards compat) */
.rze-gl { stroke: #eef0f4; stroke-width: 1; }
.rze-al { font-family: 'Poppins', sans-serif; font-size: 9px; fill: #9ca3af; }
.rze-line { fill: none; stroke: var(--rz-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rze-area { fill: var(--rz-blue); opacity: 0.06; }
.rze-bar  { fill: var(--rz-blue); }


/* ─────────────────────────────────────────────────────────────
   SECTION 9: SHARED ANIMATIONS
   Draw-in for SVG lines, grow-in for bars.
   Applied by JS adding .rz-anim-in to elements with
   pre-calculated stroke-dasharray set via --rz-len.
───────────────────────────────────────────────────────────── */

/* Line draw-in (all line charts) */
.rz-cl {
  stroke-dasharray: var(--rz-len);
  stroke-dashoffset: var(--rz-len);
}

.rz-cl.rz-anim-in {
  animation: rz-draw-line 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.rz-cl.rz-delay-1 { animation-delay: 0.15s; }
.rz-cl.rz-delay-2 { animation-delay: 0.30s; }
.rz-cl.rz-delay-3 { animation-delay: 0.45s; }

@keyframes rz-draw-line {
  to { stroke-dashoffset: 0; }
}

/* Energy dashboard line (separate keyframe name for compat) */
.rze-line {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}

.rze-line.rze-drawn {
  animation: rze-draw 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes rze-draw { to { stroke-dashoffset: 0; } }

/* Bar grow-in — horizontal (scaleX) */
.rz-bg {
  transform-origin: left;
  transform: scaleX(0);
}

.rz-bg.rz-anim-in {
  animation: rz-grow-x 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes rz-grow-x { to { transform: scaleX(1); } }

/* Bar grow-in — vertical (scaleY), used in Occupancy by-day chart */
.rz-bgv {
  transform-origin: bottom;
  transform: scaleY(0);
}

.rz-bgv.rz-anim-in {
  animation: rz-grow-y 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes rz-grow-y { to { transform: scaleY(1); } }

/* Energy bar grow (separate for compat) */
.rze-bar {
  transform-origin: bottom;
  transform: scaleY(0);
}

.rze-bar.rze-grown {
  animation: rze-grow 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes rze-grow { to { transform: scaleY(1); } }

/* Card fade-up on scroll into view */
/*.rz-card,
.rz-stat-card,
.rz-port-summary-card,
.rz-port-row {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.rz-card.rz-vis,
.rz-stat-card.rz-vis,
.rz-port-summary-card.rz-vis,
.rz-port-row.rz-vis {
  opacity: 1;
  transform: translateY(0);
}*/
/* Card fade-up on scroll into view — only when JS marks as below-fold */
.rz-card.rz-will-animate,
.rz-stat-card.rz-will-animate,
.rz-port-summary-card.rz-will-animate,
.rz-port-row.rz-will-animate {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.rz-card.rz-will-animate.rz-vis,
.rz-stat-card.rz-will-animate.rz-vis,
.rz-port-summary-card.rz-will-animate.rz-vis,
.rz-port-row.rz-will-animate.rz-vis {
  opacity: 1;
  transform: translateY(0);
}




/* IAQ chart card variant (larger padding, uses .chart-card class) */
.rz-iaq-card {
  background: var(--rz-white);
  border-radius: 12px;
  border: 1px solid var(--rz-border);
  padding: 24px 28px 16px;
  margin-bottom: 16px;
/*  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;*/
}
.rz-iaq-card.rz-will-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.rz-iaq-card.rz-will-animate.rz-vis {
  opacity: 1;
  transform: translateY(0);
}

.rz-iaq-card.rz-vis {
  opacity: 1;
  transform: translateY(0);
}

.rz-iaq-card h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--rz-text);
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}

.rz-iaq-card .rz-iaq-subtitle {
  font-size: 13px;
  color: var(--rz-text-muted);
  margin-bottom: 16px;
  line-height: 1.4;
}

.rz-iaq-chart-container {
  position: relative;
  width: 100%;
  height: 220px;
}

.rz-iaq-chart-container svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* ─────────────────────────────────────────────────────────────
   SECTION 10: STAT CARDS
   Small summary metric cards (Occupancy, Energy, stat cards).
───────────────────────────────────────────────────────────── */
.rz-stat-row {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.rz-stat-card {
  flex: 1;
  background: var(--rz-white);
  border-radius: 10px;
  border: 1px solid var(--rz-border);
  padding: 14px 16px;
}

.rz-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--rz-text-muted);
  margin-bottom: 2px;
}

.rz-stat-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--rz-navy);
  line-height: 1.15;
}

.rz-stat-sub {
  font-size: 11px;
  color: var(--rz-blue);
  margin-top: 2px;
  font-weight: 500;
}


/* ─────────────────────────────────────────────────────────────
   SECTION 11: LEGEND ROW
   Small dot/line legend used in Occupancy charts.
───────────────────────────────────────────────────────────── */
.rz-legend {
  display: flex;
  gap: 14px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.rz-leg {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--rz-text-muted);
}

.rz-ld { width: 8px;  height: 8px; border-radius: 50%; }  /* dot */
.rz-ll { width: 14px; height: 2px; border-radius: 1px; }  /* line */


/* ─────────────────────────────────────────────────────────────
   SECTION 12: MOBILE SIDEBAR TOGGLE
   Hamburger button and overlay — used by IAQ widget.
   Occupancy and Portfolio hide the sidebar on mobile instead.
───────────────────────────────────────────────────────────── */
.rz-mobile-header {
  display: none;
  height: var(--rz-header-h);
  min-height: var(--rz-header-h);
  background: var(--rz-white);
  border-bottom: 1px solid var(--rz-border);
  align-items: center;
  padding: 0 16px;
  gap: 12px;
}

.rz-hamburger {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
}

.rz-hamburger:hover { background: #f0f1f3; }
.rz-hamburger svg { width: 20px; height: 20px; color: var(--rz-text); }

.rz-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 99;
}

.rz-sidebar-overlay.active { display: block; }


/* ─────────────────────────────────────────────────────────────
   SECTION 13: RESPONSIVE BREAKPOINTS
   Shared layout shifts at tablet and mobile widths.
───────────────────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 900px) {
  :root { --rz-sidebar-w: 190px; }
  .rz-stat-row  { flex-wrap: wrap; }
  .rz-stat-card { min-width: calc(50% - 6px); }
}

/* Mobile */
@media (max-width: 768px) {
  .rz-wrapper {
    height: 600px;
    border-radius: 12px;
    flex-direction: column;
  }

  /* Hide sidebar on mobile — IAQ uses hamburger instead */
  .rz-sidebar { display: none; }
  .rz-mobile-header { display: flex; }

  /* IAQ sidebar slide-in when .open */
  .rz-sidebar.rz-sidebar-open {
    display: flex;
    position: fixed;
    top: 0; left: 0;
    width: 260px;
    height: 100vh;
    z-index: 100;
    box-shadow: 4px 0 24px rgba(0,0,0,0.12);
    transform: translateX(0);
  }

  .rz-scroll { padding: 16px 12px 28px; }
  .rz-stat-value { font-size: 24px; }
  .rz-header-bar { padding: 8px 12px; flex-wrap: wrap; height: auto; }
  .rz-device-pill { padding: 3px 8px; font-size: 11px; }
  .rz-device-dot  { width: 8px; height: 8px; }
  .rz-iaq-card { padding: 16px 14px 12px; }
  .rz-iaq-card h2 { font-size: 16px; }
  .rz-iaq-chart-container { height: 180px; }
}

/* Small mobile */
@media (max-width: 480px) {
  .rz-wrapper { height: 520px; border-radius: 10px; }
  .rz-iaq-chart-container { height: 150px; }
  .rz-device-count { display: none; }
}