/* Invoices-PV — Panda-branded styling. Shared conventions match the other
   Panda Flask apps (Panda blue navbar, white background, 3px bottom border). */

:root {
  --panda-blue: #2F5496;
  --panda-blue-soft: #eef2fa;
  --panda-amber: #B45309;     /* app-specific accent (matches icon colour) */
  --grey-text: #595959;
  --grey-heading: #262626;
  --grey-line: #d9d9d9;
}

body {
  font-family: -apple-system, system-ui, "Segoe UI", Calibri, Arial, sans-serif;
  color: var(--grey-text);
  background: #fafafa;
  font-size: 0.92rem;
}

h1, h2, h3, h4, h5 {
  color: var(--grey-heading);
}

a { color: var(--panda-blue); }
a:hover { color: #1f3864; }

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.navbar-panda {
  background: #fff;
  border-bottom: 3px solid var(--panda-blue);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  flex-wrap: wrap !important;
}
.navbar-panda .navbar-nav { flex-wrap: wrap !important; row-gap: 4px; }

.navbar-panda .brand-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--panda-blue);
  letter-spacing: 0.01em;
}
.navbar-panda .brand-subtitle {
  font-size: 0.62rem;
  color: #888;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-left: 2px;
}
.navbar-panda .nav-link {
  color: #444 !important;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.navbar-panda .nav-link:hover {
  color: var(--panda-blue) !important;
  background: var(--panda-blue-soft);
}
.navbar-panda .nav-link.active {
  color: var(--panda-blue) !important;
  font-weight: 600;
}

/* ── Panda hover-note bubbles (data-panda-note, established 2026-05-16) ─────
   Workspace-wide pattern: any element with data-panda-note="..." gets a
   2-second-delay hover bubble explaining the figure/field. Implementation
   uses Bootstrap Popover under the hood; this CSS styles it as a panda-blue
   accented bubble that's distinct from the native browser `title=` tooltips. */
.popover.panda-note {
  max-width: 340px;
  border: 1px solid #c2deff;
  border-top: 3px solid var(--panda-blue);
  box-shadow: 0 4px 14px rgba(47, 84, 150, 0.18);
  border-radius: 6px;
}
.popover.panda-note .popover-header {
  background: #f0f4fa;
  color: var(--panda-blue);
  font-weight: 600;
  font-size: 0.78rem;
  border-bottom: 1px solid #d8e3f0;
  padding: 6px 10px;
}
.popover.panda-note .popover-body {
  padding: 8px 10px;
  font-size: 0.78rem;
  color: #444;
  line-height: 1.4;
}
.popover.panda-note .popover-body p { margin-bottom: 6px; }
.popover.panda-note .popover-body p:last-child { margin-bottom: 0; }
.popover.panda-note .popover-body code {
  background: #f3f5f8;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.72rem;
}
.popover.panda-note .popover-arrow::after { border-top-color: #fff; }
/* A subtle dotted underline on the trigger element so the user knows
   there's a note available without it being noisy. Apply by adding the
   `panda-note-trigger` class alongside `data-panda-note`, OR rely on the
   JS auto-applying it (we do that in base.html). */
.panda-note-trigger {
  text-decoration: underline dotted #95bdec;
  text-underline-offset: 3px;
  cursor: help;
}
.panda-note-trigger:hover { text-decoration-color: var(--panda-blue); }

/* ── Panda breadcrumb trail (Phase NavUX, 2026-05-16) ───────────────────────
   Renders under the navbar on deep pages. Shows the hierarchy with each
   ancestor clickable. Pattern documented in global memory; matches the
   "return button" so the user always has TWO ways to navigate back. */
.panda-breadcrumbs {
  background: #f8fafc;
  border-bottom: 1px solid #e6ecf3;
  padding: 5px 16px;
  font-size: 0.82rem;
  color: #555;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}
.panda-breadcrumbs a {
  color: var(--panda-blue);
  text-decoration: none;
}
.panda-breadcrumbs a:hover { text-decoration: underline; }
.panda-breadcrumbs .sep { color: #aaa; padding: 0 4px; user-select: none; }
.panda-breadcrumbs .current { color: #444; font-weight: 600; }
.panda-breadcrumbs .icon { color: #aaa; margin-right: 4px; }

/* Return button (in navbar — already styled inline; this is an extra hover state) */
#panda-return-btn:hover {
  background: #d5e3f5 !important;
  color: #1c3d6d !important;
  border-color: #95bdec !important;
}

/* ── Headings inside main content ───────────────────────────────────────── */
.page-title {
  color: var(--panda-blue);
  font-weight: 600;
  font-size: 1.4rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.section-title {
  color: var(--grey-heading);
  font-weight: 600;
  font-size: 1.05rem;
  margin-top: 1.6rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--grey-line);
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table-panda {
  width: 100%;
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.88rem;
}
.table-panda thead th {
  background: var(--panda-blue);
  color: #fff;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 8px 12px;
  border-bottom: 1px solid var(--grey-line);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.table-panda tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  line-height: 1.3;
  vertical-align: middle;
}
.table-panda tbody tr:hover { background: #f7fafd; }
.table-panda tbody tr:last-child td { border-bottom: 0; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.panda-card {
  background: #fff;
  border: 1px solid var(--grey-line);
  border-left: 4px solid var(--panda-blue);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.panda-card h3, .panda-card h4 { margin-top: 0; font-size: 0.98rem; font-weight: 600; }
.panda-card .panda-card-row {
  display: flex; gap: 12px; padding: 3px 0; font-size: 0.88rem;
}
.panda-card .panda-card-label {
  flex: 0 0 170px; color: #888; font-size: 0.82rem; padding-top: 1px;
}
.panda-card .panda-card-value { flex: 1; color: var(--grey-text); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-section {
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.form-section .section-title {
  margin-top: 0;
  font-size: 0.95rem;
  color: var(--panda-blue);
  border-bottom-color: #e7ecf3;
}
.form-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: #555;
  margin-bottom: 2px;
}
.form-control, .form-select {
  font-size: 0.9rem;
  padding: 0.32rem 0.55rem;
  border-color: #d4d4d4;
}
.form-control:focus, .form-select:focus {
  border-color: var(--panda-blue);
  box-shadow: 0 0 0 0.2rem rgba(47, 84, 150, 0.18);
}
.form-help {
  color: #888;
  font-size: 0.76rem;
  margin-top: 2px;
}

/* ── Status pills ───────────────────────────────────────────────────────── */
.pill {
  display: inline-block; font-size: 0.72rem; font-weight: 500;
  padding: 2px 9px; border-radius: 10px;
  letter-spacing: 0.02em;
}
.pill-ok      { background: #d8efdb; color: #1c6028; }
.pill-warn    { background: #fff3cd; color: #6f4d00; }
.pill-missing { background: #f7d9d9; color: #842029; }
.pill-grey    { background: #ececec; color: #555; }

/* ── Repeater (Add Client wizard) ───────────────────────────────────────── */
.property-repeater-row {
  background: #fbfbfb;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 12px;
  position: relative;
}
.property-repeater-row .remove-row-btn {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; color: #b71c1c;
  font-size: 1.05rem; cursor: pointer; padding: 4px 8px;
}
.property-repeater-row h4 {
  font-size: 0.92rem; color: var(--panda-blue); margin-bottom: 12px;
}

/* ── Drag-drop zone ─────────────────────────────────────────────────────── */
.dropzone {
  border: 2px dashed #c4cdd6;
  border-radius: 8px;
  padding: 26px 18px;
  text-align: center;
  background: #fafcff;
  color: #6a7280;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dropzone:hover { background: #f3f7fc; border-color: var(--panda-blue); color: var(--panda-blue); }
.dropzone.dragging { background: var(--panda-blue-soft); border-color: var(--panda-blue); color: var(--panda-blue); }

/* ── Panda dialog (replaces native confirm/alert) ───────────────────────── */
#panda-dialog-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1080;
}
#panda-dialog {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1090;
  background: #fff; border-radius: 10px;
  box-shadow: 0 14px 48px rgba(0,0,0,0.3);
  min-width: 360px; max-width: 540px;
}
#panda-dialog .panda-dialog-body { padding: 22px 26px 18px 26px; }
#panda-dialog .panda-dialog-title {
  font-size: 1.0rem; font-weight: 600; color: var(--grey-heading);
  margin-bottom: 6px;
}
#panda-dialog .panda-dialog-message {
  font-size: 0.9rem; color: #444; white-space: pre-line;
  margin-bottom: 16px;
}
#panda-dialog .panda-dialog-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ── Compact cards (client detail + property detail) ────────────────────── */
.compact-card {
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
}
.compact-card-head {
  background: #f7f9fc;
  border-bottom: 1px solid var(--grey-line);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.compact-card-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--panda-blue);
  letter-spacing: 0.02em;
}
.compact-edit-btn {
  background: none;
  border: 1px solid #cdd6e1;
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 0.74rem;
  color: var(--panda-blue);
  cursor: pointer;
}
.compact-edit-btn:hover { background: var(--panda-blue-soft); }
.compact-card-body { padding: 8px 12px; }

/* Read-only KV pairs inside compact cards */
.kv {
  display: inline-flex; align-items: baseline; gap: 6px;
  margin-right: 22px; font-size: 0.86rem; line-height: 1.6;
}
.kv .k { color: #888; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; }
.kv .v { color: var(--grey-heading); font-weight: 500; }

/* Sections inside the property detail's combined view card */
.compact-section { padding: 4px 0 6px 0; border-bottom: 1px dotted #eee; }
.compact-section:last-child { border-bottom: none; }
.compact-section-title {
  font-size: 0.74rem; font-weight: 600; color: var(--panda-blue);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 4px;
}

/* Flat sections (no card chrome — used on client detail since the page title
   already identifies the client). Tiny uppercase label + tight list below. */
.flat-section { margin-bottom: 14px; }
/* Extra breathing room above + below a section (Graeme 2026-08-21: Contacts + Properties). */
.flat-section.roomy { margin-top: 30px; margin-bottom: 30px; }
.flat-section-label {
  font-size: 0.72rem; font-weight: 600; color: #888;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid #ececec;
}

/* Inline icon button (used for the ✎ next to the page title — much subtler
   than a full Edit button) */
.icon-btn-inline {
  background: none; border: none; padding: 2px 6px;
  font-size: 0.86rem; color: #aaa; cursor: pointer;
  border-radius: 3px; line-height: 1;
}
.icon-btn-inline:hover { background: var(--panda-blue-soft); color: var(--panda-blue); }

/* Compact form inside compact cards */
.compact-form .compact-label,
.compact-label {
  font-size: 0.74rem; color: #777; margin-bottom: 1px; display: block;
}
.compact-card .form-control,
.compact-card .form-select { font-size: 0.84rem; padding: 0.22rem 0.5rem; }

/* Contact rows */
.contact-row { padding: 4px 0; border-bottom: 1px dotted #eee; }
.contact-row:last-of-type { border-bottom: none; }
.contact-row-view {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 0.86rem;
}
.contact-row-view .contact-name { font-weight: 500; color: var(--grey-heading); }
.contact-row-view .contact-role { color: #888; font-size: 0.78rem; }
.contact-row-view .contact-sep  { color: #ccc; }
.contact-row-view .contact-tel,
.contact-row-view .contact-email { font-size: 0.82rem; }
/* Icons sit right next to the contact's details (Graeme 2026-08-21), not far right. */
.contact-row-view .row-actions { margin-left: 6px; }
/* Compact "+" add button next to a section heading (e.g. Contacts). */
.icon-btn-add {
  background: var(--panda-blue-soft); border: 1px solid var(--panda-blue);
  color: var(--panda-blue); border-radius: 6px; cursor: pointer;
  min-width: 26px; height: 24px; line-height: 1; font-size: 1.15rem; font-weight: 700;
  padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn-add:hover { background: var(--panda-blue); color: #fff; }

/* Star (primary) */
.star-btn {
  background: none; border: none; padding: 0 4px 0 0; cursor: pointer;
  font-size: 1.0rem; line-height: 1; color: #d4af37;
}
.star-btn:hover { color: #b8941f; }

/* Note rows */
.note-row { padding: 3px 0; border-bottom: 1px dotted #eee; font-size: 0.84rem; }
.note-row:last-of-type { border-bottom: none; }
.note-row-view {
  display: flex; align-items: baseline; gap: 8px;
}
.note-row-view .note-date {
  flex-shrink: 0; width: 90px; color: #888; font-size: 0.78rem;
  font-family: ui-monospace, monospace;
}
.note-row-view .note-body {
  flex: 1; color: var(--grey-text); line-height: 1.4;
  word-break: break-word;
}
.note-row-view .row-actions { margin-left: auto; flex-shrink: 0; }

/* Small icon buttons (edit pencil, delete X) */
.icon-btn {
  background: none; border: none; padding: 1px 6px;
  font-size: 0.82rem; color: #999; cursor: pointer;
  border-radius: 3px;
}
.icon-btn:hover { background: #eef2f7; color: var(--panda-blue); }
.icon-btn-danger:hover { color: #b71c1c; }

/* ── Invoices summary strip (above the toolbar) ─────────────────────────── */
.invoices-summary {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.invoices-summary .summary-stat {
  flex: 1 1 0;
  min-width: 140px;
  background: #fff;
  border: 1px solid var(--grey-line);
  border-left: 3px solid var(--panda-blue);
  border-radius: 5px;
  padding: 6px 12px;
  display: flex; flex-direction: column;
}
.invoices-summary .summary-label {
  font-size: 0.68rem; color: #888; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.invoices-summary .summary-value {
  font-size: 0.98rem; color: var(--grey-heading); font-weight: 600;
  margin-top: 2px;
}
.invoices-summary .summary-sub {
  display: block; font-size: 0.7rem; color: #888; font-weight: 400;
  margin-top: 1px; font-family: ui-monospace, monospace;
}
/* Two-line stat (avg / max) inside one summary card */
.invoices-summary .summary-value .stat-line {
  display: block; font-size: 0.84rem; line-height: 1.25; font-weight: 400;
  color: #777;
}
.invoices-summary .summary-value .stat-line strong {
  color: var(--grey-heading); font-weight: 600;
}

/* Sizing outputs (Phase 3B) — two-card layout with headline value at top
   of each block and the calculation breakdown listed below. */
.sizing-block {
  background: #fff;
  border: 1px solid var(--grey-line);
  border-left: 4px solid var(--panda-blue);
  border-radius: 5px;
  padding: 10px 12px;
}
.sizing-headline {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
  padding-bottom: 4px; border-bottom: 1px solid #ececec;
}
.sizing-headline-label {
  font-size: 0.74rem; color: #888; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.sizing-headline-value {
  font-size: 1.2rem; color: var(--panda-blue); font-weight: 600;
}
.sizing-headline-value small {
  font-size: 0.78rem; color: #777; font-weight: 500;
}
.sizing-calc-table {
  width: 100%; font-size: 0.78rem;
}
.sizing-calc-table td {
  padding: 3px 0;
  color: var(--grey-text);
  vertical-align: top;
}
.sizing-calc-table td:nth-child(2) {
  color: #888; font-style: italic; padding-left: 8px;
}
.sizing-calc-table td:last-child {
  white-space: nowrap;
}
.sizing-calc-table tr.sizing-final td {
  padding-top: 6px;
  border-top: 1px solid #e0e0e0;
  color: var(--grey-heading);
}

/* Reconciliation line below the operational-demand table */
.kwh-reconciliation {
  font-size: 0.82rem;
  color: var(--grey-text);
  padding: 6px 10px;
  background: #f3f6fb;
  border-left: 3px solid var(--panda-blue);
  border-radius: 4px;
}
.kwh-reconciliation strong { color: var(--grey-heading); }

/* ── Invoices toolbar (above the table) ─────────────────────────────────── */
.invoices-toolbar {
  display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
  background: #fafbfd;
  border: 1px solid var(--grey-line); border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
.invoices-toolbar .toolbar-group { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.invoices-toolbar .toolbar-label {
  font-size: 0.74rem; color: #666; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.invoices-toolbar .toolbar-check {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.82rem; color: var(--grey-heading);
  margin: 0; cursor: pointer;
}
.invoices-toolbar .toolbar-check input { margin: 0; }
.invoices-toolbar code {
  font-size: 0.74rem; background: #eef2f7; padding: 1px 4px; border-radius: 3px;
}
.invoices-toolbar .toolbar-order-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; padding: 2px 10px;
  background: #fff; border: 1px solid var(--panda-blue); border-radius: 4px;
  color: var(--panda-blue); text-decoration: none; font-weight: 500;
  transition: background 0.15s;
}
.invoices-toolbar .toolbar-order-btn:hover { background: var(--panda-blue-soft); }
.invoices-toolbar .toolbar-order-arrow { font-size: 0.72rem; color: #888; }
.invoices-toolbar .toolbar-status {
  font-size: 0.74rem; color: #777; margin-left: 4px;
}

/* Section-visibility toggles. Adding `.hide-sec-<key>` to <html> makes every
   td/th tagged with the matching sec-* class display:none. The dynamic
   fixed-charge columns share `sec-extra`, so they hide as a group with
   "Other charges". */
html.hide-sec-cons    .sec-cons   { display: none !important; }
html.hide-sec-peak    .sec-peak   { display: none !important; }
html.hide-sec-nmd     .sec-nmd    { display: none !important; }
html.hide-sec-extra   .sec-extra  { display: none !important; }
html.hide-sec-totals  .sec-totals { display: none !important; }

/* ── Invoices table (property detail) ───────────────────────────────────── */
/* Wider-than-screen table with a sticky first column (invoice date) and
   per-section column shading. Mirrors the Panda Excel template conventions. */
.invoices-scroll {
  overflow-x: auto;
  /* max-height makes this a vertical scroll region so the sticky thead below
     actually freezes (a sticky header only sticks inside a scrolling box). The
     rows scroll under a frozen header instead of the header riding up the page. */
  max-height: 78vh;
  overflow-y: auto;
  border: 1px solid var(--grey-line);
  border-radius: 6px;
  background: #fff;
}
.invoices-table {
  border-collapse: separate;       /* required for position:sticky to work */
  border-spacing: 0;
  width: max-content;              /* allow horizontal overflow */
  font-size: 0.80rem;
}
.invoices-table th,
.invoices-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #eee;
  white-space: nowrap;             /* never wrap — Graeme's request */
  vertical-align: middle;
}
.invoices-table thead th {
  font-weight: 600;
  color: var(--grey-heading);
  background: #f7f9fc;
  border-bottom: 2px solid var(--grey-line);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  position: sticky;
  top: 0;                          /* keep headers visible if vertical scroll */
  z-index: 1;
}
.invoices-table thead .hint {
  text-transform: none;
  font-weight: 400;
  font-size: 0.70rem;
  color: #888;
  letter-spacing: 0;
}
.invoices-table thead tr.invoices-group-row th {
  text-align: center;
  font-size: 0.78rem;
  border-bottom: 1px solid #ddd;
  top: 0;                          /* group row freezes at the very top */
  z-index: 2;
}
/* Column-name row freezes just BELOW the group row (≈ its height) so the two
   sticky header rows stack instead of overlapping as the body scrolls under. */
.invoices-table thead tr:not(.invoices-group-row) th {
  top: 28px;
}
.invoices-table tbody tr:hover td { background: #fbfdff; }
.invoices-table tbody tr:last-child td { border-bottom: 0; }
.invoices-table .text-end { text-align: right; }
.invoices-table .hint { font-weight: 400; }

/* Sticky first column (invoice date). Must have opaque background so the
   scrolling columns behind don't show through. z-index keeps it above the
   tbody but the group-row header above it stays in front by its z-index:2 */
.invoices-table .sticky-col {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
  font-weight: 600;
  color: var(--panda-blue);
  font-size: 0.82rem;
  box-shadow: 4px 0 6px -3px rgba(0, 0, 0, 0.08);   /* subtle right edge */
  min-width: 110px;
}
.invoices-table thead .sticky-col {
  background: #f7f9fc;              /* match thead background */
  z-index: 3;                       /* in front of group-row headers */
}
.invoices-table thead tr.invoices-group-row .sticky-col {
  background: #f7f9fc;
  z-index: 3;
}

/* Section colours — based on the Panda Excel template (BDD7EE / FFF2CC /
   E2EFDA / FCE4D6 / soft-grey for period+meter). Subtle enough not to
   compete with the data; group-row headers are slightly more saturated. */
.invoices-table .sec-period { background: #f1f3f7; }
.invoices-table .sec-meter  { background: #f7f3ec; }
.invoices-table .sec-cons   { background: #e7f0fb; }   /* light blue */
.invoices-table .sec-peak   { background: #fdecd9; }   /* light orange */
.invoices-table .sec-nmd    { background: #fff5c8; }   /* light yellow */
.invoices-table .sec-extra  { background: #f9e4ea; }   /* light pink */
.invoices-table .sec-totals { background: #e2efda; }   /* light green */

.invoices-table thead tr.invoices-group-row .sec-period { background: #d9dee8; }
.invoices-table thead tr.invoices-group-row .sec-meter  { background: #ebe3d2; }
.invoices-table thead tr.invoices-group-row .sec-cons   { background: #bfd7f3; }
.invoices-table thead tr.invoices-group-row .sec-peak   { background: #fbcfa3; }
.invoices-table thead tr.invoices-group-row .sec-nmd    { background: #fde98a; }
.invoices-table thead tr.invoices-group-row .sec-extra  { background: #f3cdd6; }
.invoices-table thead tr.invoices-group-row .sec-totals { background: #c9e3ba; }

/* Mismatch highlight — for the calculated check columns (days, R/kVA) when
   the calc value disagrees with the extracted value */
.invoices-table td.mismatch {
  background: #f8d7da !important;
  color: #842029;
  font-weight: 600;
}

/* Failed-extraction row */
.invoices-table tr.invoices-err-row td { background: #fff0f0; }

/* ── Buttons (Panda flavour) ────────────────────────────────────────────── */
.btn-panda {
  background: var(--panda-blue); color: #fff;
  border: 1px solid var(--panda-blue);
}
.btn-panda:hover { background: #1f3864; color: #fff; border-color: #1f3864; }
.btn-outline-panda {
  background: #fff; color: var(--panda-blue);
  border: 1px solid var(--panda-blue);
}
.btn-outline-panda:hover { background: var(--panda-blue-soft); color: var(--panda-blue); }

/* Clickable invoice cells — open the source PDF. Used on the property
   detail page's invoices table (the Invoice-date cell) and the
   operational-demand page's invoice-contribution cells. !important beats
   any table-cell cursor rule. */
.js-open-invoice { cursor: pointer !important; }
.js-open-invoice:hover {
  background: #d8e8c8 !important;
  text-decoration: underline;
}

/* Checkboxes + radios (ALL of them) were near-invisible — Bootstrap's default
   border is rgba(0,0,0,.25). Darker, slightly thicker border so the unchecked
   state is clearly visible everywhere (Graeme 2026-07-31). */
.form-check-input {
  border: 1.6px solid #5a6570 !important;
  background-color: #fff;
}
.form-check-input:checked {
  background-color: #185FBF !important;   /* Panda blue when ticked */
  border-color: #185FBF !important;
}
.form-check-input:focus {
  border-color: #185FBF !important;
  box-shadow: 0 0 0 0.2rem rgba(24, 95, 191, 0.25) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ARCADIA RE-SHELL (2026-08-20) — left icon rail + page-head + tabs + stats.
   Ported from Panda Power Pro (System health/UI-ROLLOUT.md → "THE PPP RE-SHELL").
   Pattern, never the skin: brand blue #185FBF + Inter, never Arcadia's green.
   Rail width is a custom property (62 / 208) so the two offsets stay in step.
   ════════════════════════════════════════════════════════════════════════ */
:root { --rail-w: 62px; --rail-w-open: 208px; --panda-brand-blue: #185FBF; }

body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* ── the rail ── (no overflow:hidden — it would clip the hover labels) */
.panda-rail {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w); 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; position: relative; }
.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-brand-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 'Inter', -apple-system, 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-item:hover::after,
.panda-rail .rail-item:focus-visible::after,
.panda-rail .rail-logo:hover::after { opacity: 1; }

/* everything else lives to the right of the rail */
.panda-shell, .panda-shell-banner { margin-left: var(--rail-w); }

/* the rail EXPANDS to show its labels (choice remembered in localStorage) */
.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; }
.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: var(--rail-w-open); 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: 6px 12px; height: auto; min-height: 42px; align-items: center; }
  :root.rail-open .panda-rail .rail-item > .bi { flex: 0 0 auto; }
  :root.rail-open .panda-rail .rail-text {
    display: inline-block; flex: 1 1 auto; min-width: 0;
    font: 600 .84rem/1.2 'Inter', -apple-system, sans-serif;
    white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  }
  :root.rail-open .rail-chev { transform: rotate(180deg); }
  :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: var(--rail-w-open); }
}
.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 'Inter', -apple-system, 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: the rail lies down across the top */
@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; }
  .rail-toggle { 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 ── */
.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; }
/* ✎ edit pencil sitting inline right next to the title (Graeme 2026-08-21). */
.page-title-row { display: flex; align-items: center; gap: 10px; }
/* Collapsible card head (Graeme 2026-08-22) — click to expand/collapse the body.
   Chevron is LARGE per the standing UI rule for disclosure triangles. */
.panda-collapse-head { display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none; }
.panda-collapse-chev { font-size: 1.6rem; line-height: 1; color: #185FBF;
  transition: transform .15s ease; flex: none; }
.panda-collapse-head[aria-expanded="true"] .panda-collapse-chev { transform: rotate(90deg); }
.page-title-edit { font-size: 1rem; padding: 2px 6px; }
.page-head-sub { font-size: 0.84rem; color: #7a8394; margin-top: 4px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 7px; }
.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; flex-wrap: wrap; }
.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-brand-blue); }
.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; }

/* inline row edit/delete icons (Properties list, 2026-08-20) */
.row-acts { margin-left: 8px; white-space: nowrap; display: inline-flex; gap: 2px; vertical-align: middle; }
.row-act { display: inline-flex; align-items: center; padding: 1px 5px; color: #b3bcc9;
  text-decoration: none; background: none; border: 0; cursor: pointer; font-size: 0.92rem; line-height: 1; }
.row-act:hover { color: var(--panda-brand-blue, #185FBF); }
.row-act.row-act-del:hover { color: #C0392B; }
/* shared breadcrumb (crumbs macro) — one definition, every page */
.panda-crumbs { font-size: 0.82rem; color: #6b7280; margin: 0.1rem 0 0.85rem; line-height: 1.4; }
.panda-crumbs a { color: var(--panda-brand-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; }