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

body { background: #f6f8fb; }

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


/* ── LEFT RAIL (replaces the full-width top navbar, 2026-08-19) ──────────────
   Graeme wants the Arcadia product-dashboard shape: a narrow dark bar down the
   LEFT, not a blue band across the top. Icon-only — 62px of width instead of
   ~70px of height, on screens that are wider than they are tall.
   Each icon names itself on hover via data-label, so nothing has to be guessed.
   ⚠️ No overflow:hidden on .panda-rail — it would clip those labels. */
.panda-rail {
  position: fixed; top: 0; left: 0; bottom: 0; width: 62px; z-index: 1150;
  background: #16233d; display: flex; flex-direction: column; align-items: center;
  padding: 10px 0 12px; gap: 4px;
}
.panda-rail .rail-logo { display: block; margin-bottom: 14px; flex: none; padding: 2px 0; }
/* The Panda mark is a WORDMARK (236x47), not a square badge — squeezed into a
   34px box it was illegible, and its blue on the rail's near-black was almost
   invisible. Shown at the rail's own width and rendered white for contrast. */
.panda-rail .rail-logo img { width: 46px; height: auto; display: block;
  filter: brightness(0) invert(1); opacity: .92; }
.panda-rail .rail-logo:hover img { opacity: 1; }
.panda-rail .rail-items { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }
.panda-rail .rail-foot  { display: flex; flex-direction: column; gap: 4px; flex: none; }

.panda-rail .rail-item {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 10px;
  color: #9fb0cd; font-size: 1.15rem; text-decoration: none;
  transition: background .12s, color .12s;
}
.panda-rail .rail-item:hover { background: #22334f; color: #fff; }
.panda-rail .rail-item.on    { background: var(--panda-blue); color: #fff; }
.panda-rail .rail-item.quit:hover { background: #b02a37; color: #fff; }
.panda-rail .rail-item.static { cursor: default; color: #6f8098; }
.panda-rail .rail-item.static:hover { background: transparent; color: #9fb0cd; }

/* the name, revealed on hover — sits OUTSIDE the rail so it is never clipped */
.panda-rail .rail-item[data-label]::after,
.panda-rail .rail-logo[data-label]::after {
  content: attr(data-label);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: #16233d; color: #eef2fb; padding: 6px 11px; border-radius: 7px;
  font: 600 .78rem/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s;
  box-shadow: 0 3px 14px rgba(10,20,40,.34); z-index: 5;
}
.panda-rail .rail-logo { position: relative; }
.panda-rail .rail-item:hover::after,
.panda-rail .rail-item:focus-visible::after,
.panda-rail .rail-logo:hover::after { opacity: 1; }

/* a count that needs attention (onboarding / enquiries) */
.panda-rail .rail-badge {
  position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: #F2C200; color: #3a2e00;
  font: 800 .66rem/17px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-align: center; box-shadow: 0 0 0 2px #16233d;
}

/* everything else lives to the right of the rail */
.panda-shell, .panda-shell-banner { margin-left: 62px; }

/* ── The rail EXPANDS to show its labels (Graeme, 2026-08-20) ────────────────
   "this vertical bar of icons needs to be expandable so that a new user can see
   all the labels." A hover tooltip only helps someone who already knows which
   icon to hover over — which a new user, by definition, does not. The choice is
   remembered in localStorage and applied before first paint (see base.html).

   Scoped to wide windows on purpose: below 768px the rail already lies down
   across the top, where widening it would make no sense. */
.panda-rail .rail-text { display: none; }
.rail-toggle {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 42px; height: 34px; margin-bottom: 6px; flex: none; position: relative;
  background: transparent; border: 0; border-radius: 10px; cursor: pointer;
  color: #9fb0cd; padding: 0;
}
.rail-toggle:hover { background: #22334f; color: #fff; }
/* The standing rule: a collapse/expand triangle is 1.6rem, never a tiny one. */
.rail-chev { font-size: 1.6rem; line-height: 1; display: inline-block;
             transition: transform .15s ease; }

@media (min-width: 768px) {
  :root.rail-open .panda-rail { width: 208px; align-items: stretch; padding: 10px 10px 12px; }
  :root.rail-open .panda-rail .rail-logo { align-self: flex-start; padding-left: 6px; }
  :root.rail-open .panda-rail .rail-logo img { width: 104px; }
  :root.rail-open .panda-rail .rail-item,
  :root.rail-open .rail-toggle { width: 100%; justify-content: flex-start; gap: 12px; padding: 0 12px; }
  :root.rail-open .panda-rail .rail-text {
    display: inline; font: 600 .84rem/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    white-space: nowrap;
  }
  :root.rail-open .rail-chev { transform: rotate(180deg); }
  /* the badge moves to the end of the row instead of overlapping the label */
  :root.rail-open .panda-rail .rail-badge { position: static; margin-left: auto; box-shadow: none; }
  /* the hover tooltip is redundant once the label is on screen */
  :root.rail-open .panda-rail .rail-item[data-label]::after,
  :root.rail-open .panda-rail .rail-logo[data-label]::after,
  :root.rail-open .rail-toggle[data-label]::after { display: none; }
  :root.rail-open .panda-shell, :root.rail-open .panda-shell-banner { margin-left: 208px; }
}

/* the toggle names itself on hover while the rail is narrow, like the items do */
.rail-toggle[data-label]::after {
  content: attr(data-label);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: #16233d; color: #eef2fb; padding: 6px 11px; border-radius: 7px;
  font: 600 .78rem/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s;
  box-shadow: 0 3px 14px rgba(10,20,40,.34); z-index: 5;
}
.rail-toggle:hover::after, .rail-toggle:focus-visible::after { opacity: 1; }

/* Narrow windows: a rail that eats a quarter of a phone screen is worse than the
   bar it replaced, so below 768px it lies down across the top and scrolls. */
@media (max-width: 767.98px) {
  .panda-rail {
    position: sticky; top: 0; bottom: auto; width: 100%; height: 54px;
    flex-direction: row; padding: 0 10px; gap: 2px; overflow-x: auto;
  }
  .panda-rail .rail-logo { margin: 0 8px 0 0; }
  .panda-rail .rail-items { flex-direction: row; flex: 1 1 auto; }
  .panda-rail .rail-foot  { flex-direction: row; }
  .panda-rail .rail-item[data-label]::after,
  .panda-rail .rail-logo[data-label]::after { display: none; }   /* no room, and touch has no hover */
  .rail-toggle { display: none; }        /* the rail is horizontal here — nothing to expand */
  .panda-rail .rail-text { display: none; }
  .panda-shell, .panda-shell-banner { margin-left: 0; }
}

@media print { .panda-rail { display: none; } .panda-shell, .panda-shell-banner { margin-left: 0; } }


/* ── PAGE HEAD / TABS / STATS — the Arcadia shape, shared (2026-08-19) ───────
   Breadcrumb → title with its ACTIONS on the same line, far right → tabs for
   sub-views → a row of headline numbers → the data. See templates/_macros.html. */
.page-head {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.page-head-main { flex: 1 1 auto; min-width: 0; }
.page-title {
  font-size: 1.5rem; font-weight: 700; color: #1e3a6e; margin: 0; line-height: 1.2;
}
.page-head-sub {
  font-size: 0.84rem; color: #7a8394; margin-top: 4px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 7px;
}
.page-head-sub .none { color: #b9c0cc; font-style: italic; }
.page-head-sub .dot  { color: #c3c9d4; }
/* the actions sit on the title's own line — not scattered down the page */
.page-actions { flex: none; display: flex; align-items: center; gap: 8px; padding-top: 2px; }

.page-tabs { display: flex; gap: 2px; border-bottom: 1px solid #dfe4ee; margin: 0 0 16px; }
.page-tab {
  padding: 8px 14px; font-size: 0.86rem; font-weight: 600; color: #7a8394;
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.page-tab:hover { color: #1e3a6e; }
.page-tab.on { color: #1e3a6e; border-bottom-color: var(--panda-blue); }
.tab-panel[hidden] { display: none; }

/* Headline numbers. Fixed-width cards that wrap, so a row of four does not
   become four full-width bands on a narrow window. */
.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.stat {
  flex: 1 1 150px; min-width: 130px; background: #fff; border: 1px solid #e0e4ed;
  border-radius: 10px; padding: 11px 14px 12px; box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.stat-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #98a1b3; display: flex; align-items: center;
}
.stat-value {
  font-size: 1.45rem; font-weight: 700; color: #16233d; margin-top: 3px;
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
.stat-value.good { color: #1a7a3c; }
.stat-value.warn { color: #9a6a00; }
.stat-value.bad  { color: #b02a37; }
.stat-value.plain.zero, .stat-value.muted { color: #c3c9d4; }
.stat-foot { font-size: 0.74rem; color: #98a1b3; margin-top: 2px; }

/* Breadcrumb trail (shared across all modules via _macros.html `crumbs`). */
.panda-crumbs { font-size: 0.82rem; color: #6b7280; margin: 0.1rem 0 0.85rem; line-height: 1.4; }
.panda-crumbs a { color: var(--panda-blue); text-decoration: none; }
.panda-crumbs a:hover { text-decoration: underline; }
.panda-crumbs .sep { margin: 0 0.45rem; color: #aab2bd; }
.panda-crumbs .cur { color: #374151; font-weight: 600; }

.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. */

/* 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); }

/* A page's context line: a back-link and a few facts about what you are looking at
   (financial year, source filename, counts). Deliberately distinct from the grey
   explanatory prose Graeme removed on 2026-08-19 — explanations belong in a hover
   note (data-note="…"), never printed on the page. */
.page-context { font-size: 0.84rem; color: #7a8394; margin: -6px 0 14px; line-height: 1.5; }
.page-context a { color: var(--panda-blue); text-decoration: none; }
.page-context a:hover { text-decoration: underline; }

/* ── Disclosure triangles are LARGE, everywhere ──────────────────────────────
   Graeme, 2026-08-14: a collapse/expand triangle must never be tiny — "the
   umpteenth time I've asked… I'm tired of asking". The app's own chevrons
   (.card-chevron, .xr-secchev) are 1.6rem; the browser's built-in <summary>
   marker is about a third of that, so every <details> quietly broke the rule.

   Sizing the marker HERE, once, fixes every disclosure in the app and every one
   added later — a per-page fix would only hold until the next page is written.
   A <summary> that sets list-style:none has hidden the marker and supplies its
   own affordance (a button, a chevron), so it is untouched by this. */
summary::marker { font-size: 1.6rem; }
summary::-webkit-details-marker { font-size: 1.6rem; }   /* Safari / WKWebView */


/* ── The shared property/edit form (_property_edit_form.html) ────────────────
   These lived only inside client_detail.html. The moment the same form was
   included on a SECOND page (the property page, 2026-08-20) it rendered
   unstyled there — a shared component needs shared styles, or "shared" only
   means "shared until someone uses it". --blue/--blue-dark are set by the pages
   that define them; fall back so the form is never invisible on a page that
   does not. */
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.fgrid .full { grid-column: 1 / -1; }
.fld label { display: block; font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
             letter-spacing: 0.05em; color: #7a8394; margin-bottom: 5px; }
.fld input, .fld select, .fld textarea {
  width: 100%; padding: 8px 12px; border: 1px solid #cdd6e8; border-radius: 7px;
  font-size: 0.9rem; box-sizing: border-box; font-family: inherit;
}
.fld textarea { resize: vertical; }
.btn-blue {
  font-size: 0.85rem; font-weight: 700; padding: 9px 20px; border-radius: 7px;
  border: none; cursor: pointer; background: var(--blue, #2F5496); color: #fff; margin-top: 12px;
}
.btn-blue:hover { background: var(--blue-dark, #1e3a6e); }

@media (max-width: 640px) { .fgrid { grid-template-columns: 1fr; } }

/* ── Section headings: NO wide blue bars ─────────────────────────────────────
   Graeme, 2026-08-20: "I thought we had agreed that we will never be using these
   wide cards with long horizontal blue bars again. we will in future only use the
   Arcadia style tabls."

   Why it survived long enough for him to have to say it twice: `.card-header` was
   defined FIVE times — separately, by copy-paste, inside five page templates. There
   was no shared definition to change, so converting one page left the other four
   exactly as they were. It is defined ONCE here now and the five copies are gone,
   which is what makes "never again" true rather than aspirational.

   A section still needs a heading, and the collapsible ones still need their big
   chevron — so this is a PLAIN heading with a hairline under it, not a coloured
   slab across the page. Text goes dark because it is no longer on blue. */
.card-header {
  background: none;
  padding: 14px 20px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e8edf5;
}
.card-header h2 { color: #16233d; font-size: .95rem; font-weight: 700; margin: 0; }
.card-header p  { color: #6b7789; font-size: .82rem; margin: 4px 0 0; }
.card-header .hint,
.card-header .ch-note { color: #8a93a3; font-size: .72rem; }
.card-header .card-id { color: #9aa3b2; font-size: .74rem; font-family: monospace; }
/* The headline figure that rides on the right of a collapsed section's heading. */
.card-header .card-hl { color: #5a6a86; font-size: .78rem; font-weight: 600;
                        margin-left: auto; padding-left: 14px; white-space: nowrap; }
.card-header.card-collapsible { cursor: pointer; user-select: none; }
/* 1.6rem, per the standing rule — a collapse triangle is never tiny. */
.card-chevron { color: #5a6a86; font-size: 1.6rem; line-height: 1; margin-right: 10px;
                display: inline-block; transition: transform .15s ease; flex: 0 0 auto; }
.card.collapsed > .card-header .card-chevron { transform: rotate(-90deg); }
.card.collapsed > .card-body { display: none; }
/* A collapsed card announces what is behind it — a bare chevron beside an empty area
   reads as "there is nothing here" (Graeme, 2026-08-24, an hour lost to exactly that). */
.card-showlabel { display: none; }
.card.collapsed > .card-header .card-showlabel {
  display: inline-block; background: #ffc107; color: #173056; border: 1px solid #e0a800;
  border-radius: 6px; font-weight: 800; font-size: .82rem; padding: 3px 10px;
  cursor: pointer; margin-right: 10px; }