/* Panda Portal — house style (Panda blue #185FBF) */
:root {
  --panda-blue: #185FBF;
  --panda-blue-dark: #12498f;
  --panda-blue-soft: #eaf1f9;
}

body { background: #f6f8fb; }

.navbar-panda {
  background: var(--panda-blue);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.navbar-panda .navbar-brand,
.navbar-panda .nav-link { color: #fff; }
.navbar-panda .nav-link:hover { color: #dce8f7; }
.navbar-panda .nav-link.active { font-weight: 600; text-decoration: underline; }
.navbar-panda .crm-subtitle {
  color: #dce8f7; font-size: 0.95rem; font-weight: 500;
}

.card-panda { border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }

.partner-head { font-size: 1.15rem; font-weight: 700; color: var(--panda-blue-dark); }
.customer-head { font-weight: 600; color: #1f2937; }
.site-head { font-weight: 600; color: #374151; }

.meter-pill {
  display: inline-block; background: var(--panda-blue-soft);
  border: 1px solid #c2deff; border-radius: 6px; padding: 2px 8px;
  font-size: 0.8rem; color: var(--panda-blue-dark);
}

.btn-panda { background: var(--panda-blue); color: #fff; border: none; }
.btn-panda:hover { background: var(--panda-blue-dark); color: #fff; }

/* ── Date + graphic time-of-day picker (same pattern as the Logged Data app) ── */
.dt-pick { display: inline-flex; align-items: flex-end; gap: 8px; }
.dt-pick .dt-date { width: 130px; }
.dt-pick .dt-time {
  width: 74px; font-variant-numeric: tabular-nums; font-weight: 700; color: #1f3b57;
}
.time-dial { display: inline-flex; flex-direction: column; align-items: stretch; width: 220px; gap: 1px; }
.time-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 4px; background: #d3dae4; outline: none; margin: 3px 0 0; cursor: pointer;
}
.time-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--panda-blue); border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35); cursor: grab;
}
.time-range::-webkit-slider-thumb:active { cursor: grabbing; background: var(--panda-blue-dark); }
.time-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--panda-blue); border: 2px solid white; cursor: grab;
}
.time-scale { display: flex; justify-content: space-between; font-size: 0.62rem; color: #9aa6b2; padding: 0 1px; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; }
.tbl-tight td, .tbl-tight th { padding: 0.3rem 0.5rem; font-size: 0.82rem; }
.muted { color: #6b7280; }

/* Keep the sticky navbar a known height so the sticky table header tucks under it. */
.navbar-panda { min-height: 54px; }

/* Frozen table controls + column headings while scrolling a long day/week/month
   page: the period/Prev-Next bar sticks under the navbar, and the column header
   sticks right under that. Offsets are set in JS (--nav-h / --sticky-head-top) so
   they stay correct if the navbar or nav bar wraps. */
.table-topnav {
  position: sticky;
  top: var(--nav-h, 54px);
  z-index: 4;
  background: #fff;
}
.table-sticky-head thead th {
  position: sticky;
  top: var(--sticky-head-top, 54px);
  background: #fff;
  z-index: 3;
  box-shadow: inset 0 -1px 0 #dee2e6;  /* preserve the header's bottom border */
}

/* Pick a row to set the date that Day/Week/Month will open around.
   NB: Bootstrap paints the background on each <td> (not the <tr>), so a row
   highlight MUST target the cells (with !important to beat Bootstrap's cell bg). */
#data-table-card tbody tr { cursor: pointer; }
#data-table-card tbody tr:hover td { background-color: #eef3fb !important; }
#data-table-card tbody tr.row-selected td { background-color: var(--panda-blue-soft) !important; }
#data-table-card tbody tr.row-selected td:first-child { box-shadow: inset 4px 0 0 var(--panda-blue); }