/* DevCom BSA Platform — v1 stylesheet
 * Brand colours (navy 0F2044, green 4EA72E) match the existing HTML reports.
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: #eef1f7;
  color: #222;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Topbar ──────────────────────────────────────────────────────────── */
.topbar {
  background: #0F2044;
  color: #fff;
  padding: 16px 0;
  border-bottom: 4px solid #4EA72E;
}
.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.brand {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.brand-dev { color: #fff; }
.brand-com { color: #4EA72E; }
.brand-strap {
  display: inline-block;
  margin-left: 12px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.75;
  vertical-align: middle;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
}
.topnav a {
  color: #fff;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 4px;
}
.topnav a:hover { background: rgba(255,255,255,0.1); }
.user-chip {
  background: rgba(255,255,255,0.1);
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 12px;
}
.user-chip .role { opacity: 0.7; font-size: 11px; }
.btn-ghost {
  border: 1px solid rgba(255,255,255,0.3) !important;
}

/* ── Layout ──────────────────────────────────────────────────────────── */
.wrap {
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 30px;
  flex: 1;
  width: 100%;
}

/* ── AI status dot (Copilot) ─────────────────────────────────────────── */
.ai-status {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 12px; padding: 3px 10px 3px 9px;
  font-size: 11.5px; font-weight: 700;
  color: #2E7D14; background: #EAF4E3; border: 1px solid #C5E3B3;
  border-radius: 999px; text-transform: none; letter-spacing: .2px;
  vertical-align: middle;
}
.ai-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #4EA72E; box-shadow: 0 0 0 0 rgba(78,167,46,0.6);
}
/* Idle: gentle "breathing" so it reads as live. */
.ai-status-dot { animation: ai-breathe 2.8s ease-in-out infinite; }
@keyframes ai-breathe { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
/* Busy: stronger pulse + ring while an AI call is in flight. */
.ai-status.ai-busy .ai-status-dot {
  animation: ai-pulse 0.9s ease-out infinite;
}
.ai-status.ai-busy { color: #2E7D14; }
.ai-status.ai-busy .ai-status-label::after { content: " · working…"; }
@keyframes ai-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(78,167,46,0.55); transform: scale(1); }
  70%  { box-shadow: 0 0 0 7px rgba(78,167,46,0);  transform: scale(1.15); }
  100% { box-shadow: 0 0 0 0 rgba(78,167,46,0);    transform: scale(1); }
}

/* ── Copilot chat ────────────────────────────────────────────────────── */
#copilot-log {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
.chat-row { display: flex; margin: 8px 0; }
.chat-row.chat-user { justify-content: flex-end; }
.chat-row.chat-ai   { justify-content: flex-start; align-items: flex-start; gap: 7px; }
.chat-avatar {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: #EAF4E3; color: #2E7D14; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 2px;
}
.chat-bubble {
  display: inline-block; max-width: 82%; font-size: 13.5px; line-height: 1.5;
  padding: 9px 13px; border-radius: 14px; word-wrap: break-word;
}
.chat-bubble-user {
  background: #0F2044; color: #fff; border-bottom-right-radius: 4px; text-align: left;
}
.chat-bubble-ai {
  background: #F4F8F0; color: #262626; border: 1px solid #DCEacd;
  border-bottom-left-radius: 4px;
}
.chat-bubble-ai strong { color: #1f3a12; }
.chat-bubble-ai ul { margin: 4px 0 4px 18px; padding: 0; }
.chat-bubble-ai li { margin: 2px 0; }
.chat-bubble-ai p:last-child { margin-bottom: 0; }
.chat-bubble-actions { display: block; margin-top: 6px; }
.chat-sc-btn {
  border: 1px solid #C9C9C9; background: #fff; color: #0F2044;
  font-size: 11.5px; padding: 3px 9px; border-radius: 12px; cursor: pointer;
}
.chat-sc-btn:hover { background: #F2F7EE; border-color: #4EA72E; }
.chat-sc-btn:disabled { opacity: .6; cursor: default; }

/* ════════════════════════════════════════════════════════════════════════
   PD CoPilot — prominent, branded hub panel
   A self-contained redesign of the dashboard CoPilot. Makes it the visual
   centrepiece: a navy→green gradient header, a hero intro, three clear action
   tiles, and a larger, more polished chat console. DevCom palette throughout.
   ════════════════════════════════════════════════════════════════════════ */
#copilot-panel.copilot {
  padding: 0;
  overflow: hidden;
  border: 1px solid #D8E6CF;
  border-radius: 16px;
  box-shadow: 0 10px 30px -12px rgba(15, 32, 68, 0.28),
              0 2px 6px rgba(15, 32, 68, 0.06);
  background: #fff;
}

/* ── Dockable CoPilot: floating launcher + slide-in drawer ──────────────────
   The CoPilot is the single front door for filing documents/emails and is
   reachable from every tab. A green launcher pill sits bottom-right; clicking it
   slides the CoPilot in from the right. */
.copilot-fab {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 1200;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #0F2044 0%, #4EA72E 120%);
  border: none; border-radius: 999px; cursor: pointer;
  box-shadow: 0 8px 22px -6px rgba(15, 32, 68, 0.45);
  transition: transform .12s ease, box-shadow .12s ease, opacity .15s ease;
}
.copilot-fab:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -6px rgba(15, 32, 68, 0.5); }
.copilot-fab.hidden { opacity: 0; pointer-events: none; }
.copilot-fab span { font-size: 17px; }

.copilot-dock {
  position: fixed;
  top: 0; right: 0; height: 100vh;
  width: min(460px, 94vw);
  z-index: 1210;
  background: #F4F6F2;
  box-shadow: -14px 0 40px -18px rgba(15, 32, 68, 0.45);
  transform: translateX(102%);
  transition: transform .22s ease;
  overflow-y: auto;
  padding: 16px 16px 40px;
  -webkit-overflow-scrolling: touch;
}
.copilot-dock.open { transform: translateX(0); }
.copilot-dock #copilot-panel.copilot { border-radius: 14px; }
/* Make room for the dock close button in the header. */
.copilot-dock .copilot-header { padding-right: 64px; }
.copilot-dock .copilot-header .ai-status { display: none; }

.copilot-dock-close {
  position: absolute; top: 24px; right: 26px;
  z-index: 5;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; color: #fff;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 8px; cursor: pointer;
}
.copilot-dock-close:hover { background: rgba(255,255,255,0.32); }

@media (max-width: 640px) {
  .copilot-dock { width: 100vw; }
  .copilot-fab { right: 14px; bottom: 14px; }
}

/* ── Header band ─────────────────────────────────────────────────────── */
.copilot-header {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  padding: 20px 26px;
  background:
    radial-gradient(120% 160% at 0% 0%, #16315e 0%, #0F2044 42%, #102a2a 100%);
  color: #fff;
  border-bottom: 3px solid #4EA72E;
}
.copilot-header::after {
  /* subtle green sheen on the right */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 140% at 100% 0%, rgba(78,167,46,0.30), transparent 60%);
  pointer-events: none;
}
.copilot-mark {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: linear-gradient(160deg, #4EA72E, #2E7D14);
  box-shadow: 0 4px 14px rgba(46, 125, 20, 0.45),
              inset 0 1px 0 rgba(255,255,255,0.35);
}
.copilot-headings { flex: 1 1 auto; min-width: 0; z-index: 1; }
.copilot-title {
  margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.2px;
  line-height: 1.1; color: #fff; text-transform: none;
}
.copilot-title .brand-com { color: #8FE36A; }
.copilot-tagline {
  margin: 3px 0 0; font-size: 12.5px; line-height: 1.45;
  color: #C7D6EC; max-width: 60ch;
}
/* Status pill recoloured to read on the dark header. */
.copilot-header .ai-status {
  z-index: 1; margin-left: auto; align-self: flex-start;
  color: #DFF5D2; background: rgba(78,167,46,0.20);
  border: 1px solid rgba(143,227,106,0.55);
}
.copilot-header .ai-status.ai-busy { color: #EAFBE0; }

/* ── Body ────────────────────────────────────────────────────────────── */
.copilot-body { padding: 18px 22px 22px; }

/* ── Action tiles row ────────────────────────────────────────────────── */
.copilot-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 16px;
}
.copilot-tile {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; border-radius: 12px;
  background: #F8FBF5; border: 1px solid #DCEACD;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.copilot-tile:hover {
  border-color: #4EA72E;
  box-shadow: 0 6px 16px -8px rgba(46,125,20,0.45);
}
.copilot-tile-title {
  font-size: 13.5px; font-weight: 700; color: #0F2044;
  display: flex; align-items: center; gap: 7px;
}
.copilot-tile-desc { font-size: 11.5px; color: #5B6B57; line-height: 1.45; margin: 0; }
.copilot-tile .btn-cop {
  align-self: flex-start; margin-top: 2px;
}

/* Buttons used inside the CoPilot (consistent pill style). */
.btn-cop {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 999px;
  background: #fff; color: #2E7D14; border: 1.5px solid #4EA72E;
  transition: background .15s, color .15s, box-shadow .15s;
}
.btn-cop:hover { background: #4EA72E; color: #fff; box-shadow: 0 3px 10px -3px rgba(46,125,20,0.6); }
.btn-cop-solid { background: #4EA72E; color: #fff; }
.btn-cop-solid:hover { background: #3A7D22; }

/* ── Intake dropzone (full-width hero tile) ──────────────────────────── */
.copilot-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; cursor: pointer;
  padding: 22px 18px; margin-bottom: 6px;
  border: 2px dashed #4EA72E; border-radius: 14px;
  background:
    linear-gradient(180deg, #F4F8F0 0%, #ECF5E4 100%);
  color: #2E7D14; transition: background .15s, border-color .15s, transform .12s;
}
.copilot-dropzone:hover { background: #E7F2DC; }
.copilot-dropzone.drag-over { background: #DDEFCE; border-color: #2E7D14; transform: scale(1.005); }
.copilot-dz-icon {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
  background: linear-gradient(160deg, #4EA72E, #2E7D14);
  box-shadow: 0 4px 12px rgba(46,125,20,0.4);
}
.copilot-dz-head { font-weight: 700; font-size: 14px; color: #1f3a12; }
.copilot-dz-sub { font-size: 11.5px; color: #4d6a3c; max-width: 52ch; line-height: 1.4; }
.copilot-dz-name { font-size: 12px; color: #0F2044; font-weight: 600; min-height: 1em; }

/* Result slots */
.copilot-slot { margin: 10px 0 0; }

/* ── Chat console ────────────────────────────────────────────────────── */
.copilot-chat {
  margin-top: 16px;
  border: 1px solid #D8E0EC; border-radius: 14px; overflow: hidden;
  box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(15,32,68,0.05);
}
.copilot-chat-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; font-size: 11.5px; font-weight: 700;
  color: #0F2044; background: #F4F7FB; border-bottom: 1px solid #E3E9F2;
  letter-spacing: .2px;
}
.copilot-chat-head .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #4EA72E;
}
#copilot-log {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  padding: 14px 16px; max-height: 380px; min-height: 150px;
  overflow-y: auto;
  background:
    linear-gradient(180deg, #FCFDFB 0%, #F7FAF4 100%);
}
.copilot-chat form {
  display: flex; gap: 8px; padding: 10px;
  border-top: 1px solid #E3E9F2; background: #fff;
}
.copilot-input {
  flex: 1; font-size: 13.5px; padding: 11px 14px;
  border: 1.5px solid #D1D5DB; border-radius: 999px;
  transition: border-color .15s, box-shadow .15s;
}
.copilot-input:focus {
  outline: none; border-color: #4EA72E;
  box-shadow: 0 0 0 3px rgba(78,167,46,0.18);
}
.copilot-send {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 700; cursor: pointer;
  padding: 10px 20px; border-radius: 999px; border: none;
  color: #fff; background: linear-gradient(160deg, #4EA72E, #2E7D14);
  box-shadow: 0 3px 10px -3px rgba(46,125,20,0.6);
  transition: filter .15s, transform .05s;
}
.copilot-send:hover { filter: brightness(1.06); }
.copilot-send:active { transform: translateY(1px); }
.copilot-foot {
  margin: 10px 2px 0; font-size: 11px; color: #6B7B66; line-height: 1.5;
}

/* Bigger, friendlier chat bubbles inside the redesigned console. */
#copilot-panel .chat-bubble { font-size: 13.5px; }
#copilot-panel .chat-avatar { width: 26px; height: 26px; font-size: 13px; }

@media (max-width: 720px) {
  .copilot-actions { grid-template-columns: 1fr; }
  .copilot-header { flex-wrap: wrap; }
  .copilot-header .ai-status { margin-left: 0; }
}

/* ── Project page tabs ───────────────────────────────────────────────── */
.proj-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 18px;
  border-bottom: 2px solid #E5E7EB;
  position: sticky;
  top: 0;
  background: #F4F6FA;
  z-index: 30;
  padding-top: 6px;
}
.proj-tab {
  appearance: none;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
}
.proj-tab:hover { color: #0F2044; }
.proj-tab.active {
  color: #0F2044;
  border-bottom-color: #4EA72E;
}
/* Panels hidden unless their tab is active. JS adds .tab-active to <body>'s
   chosen group by toggling a data attribute; we drive visibility from the
   active tab name set on the tab container. */
#proj-tabs ~ section[data-tab] { display: none; }
#proj-tabs ~ section[data-tab].tab-visible { display: block; }

.panel {
  background: #fff;
  border-radius: 10px;
  padding: 24px 30px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(15,32,68,0.08);
  /* A wide table inside a panel must scroll WITHIN the panel, never push the
     panel (and the page) off to the right. min-width:0 lets the panel shrink
     to its container; overflow-x clips any child that still exceeds it. */
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}
/* Inner scroll wrapper for over-wide tables (e.g. Information Issued).
   display:block + width:100% gives the wrapper a concrete width to measure
   against; the table inside may scroll but can never push the panel wider. */
.table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* A table inside .table-scroll must NOT auto-size to its content past the
   wrapper. Fixed layout makes column widths share the available width and
   wrap long cell text instead of forcing the whole table (and panel) wider. */
.table-scroll > table {
  table-layout: fixed;
  width: 100%;
}
.table-scroll > table td,
.table-scroll > table th {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.panel-narrow { max-width: 440px; margin-left: auto; margin-right: auto; }

.panel-title {
  font-size: 16px;
  font-weight: 700;
  color: #0F2044;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  border-bottom: 3px solid #4EA72E;
  padding-bottom: 10px;
  margin-bottom: 18px;
}

/* "Project Homepage" eyebrow shown above the project name on the
   project detail page (distinguishes it from the dashboard). */
.page-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: #4EA72E;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* ── Commissioning Certificates — compact summary + drill-down (v2) ── */
/* Site-wide cert status badges. Distinct from BC OUTSTANDING (amber)
   because for certs OUTSTANDING means "no plots received" → red. */
.b-cert-outstanding    { background: #FEE2E2; color: #DC2626; }
.b-cert-partial        { background: #FEF3C7; color: #D97706; }
.b-cert-received       { background: #DCFCE7; color: #16A34A; font-weight: 700; }
.b-cert-not-applicable { background: #F3F4F6; color: #6B7280; }

.cert-table { border-collapse: collapse; }
.cert-block { border-bottom: 1px solid #e5e7eb; }
.cert-count-cell { white-space: nowrap; }
.cert-count-cell b { font-size: 1.05em; color: #0F2044; }
.cert-actions {
  white-space: nowrap;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;     /* keep buttons inside the cell */
  flex-wrap: nowrap;
  width: auto;
  /* Keep the actions cell visually above the adjacent status cell so its
     hover outline + badge can't bleed under the Manage / delete buttons. */
  position: relative;
  z-index: 2;
  background: #fff;
}
.cert-actions .btn-icon { flex: 0 0 auto; position: relative; z-index: 3; }
.cert-actions .btn-secondary { flex: 0 0 auto; position: relative; z-index: 3; }

/* Manage panel — drops down under the summary row */
.cert-manage-row { background: #f9fafb; }
.cert-manage-cell { padding: 0; border-top: 2px solid #4EA72E; }
.cert-manage-panel { padding: 16px 18px 18px; }
.cert-manage-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.cert-manage-title {
  font-weight: 700; color: #0F2044; font-size: 13px;
  text-transform: uppercase; letter-spacing: 1px;
}

.cert-manage-bulk {
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  align-items: center; padding: 10px 14px; margin-bottom: 14px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 6px;
}
.bulk-range-form {
  display: flex; align-items: center; gap: 6px; margin: 0;
}
.bulk-range-form input[type=number] {
  width: 70px; padding: 4px 6px; font-size: 13px;
  border: 1px solid #cbd5e1; border-radius: 4px;
}
.bulk-label { font-size: 13px; color: #475569; }
.bulk-buttons { display: flex; gap: 8px; margin-left: auto; }

/* Per-plot tick grid — 10 per row, scales to 250+ plots cleanly */
.cert-plot-grid-large {
  display: grid;
  grid-template-columns: repeat(10, minmax(40px, 1fr));
  gap: 4px;
  margin-bottom: 10px;
}
.plot-tick {
  display: flex; align-items: center; justify-content: center;
  height: 28px;
  font-size: 12px; font-weight: 600;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.1s;
  user-select: none;
}
.plot-tick:hover {
  border-color: #4EA72E;
  background: #ecfdf5;
  color: #0F2044;
}
.plot-tick-on {
  background: #4EA72E;
  border-color: #3A7D22;
  color: #fff;
}
.plot-tick-on:hover {
  background: #3A7D22;
  color: #fff;
}
.cert-manage-hint {
  font-size: 12px; color: #64748b; margin-top: 8px;
}

/* Compact at narrow widths — 5 per row instead of 10 */
@media (max-width: 700px) {
  .cert-plot-grid-large { grid-template-columns: repeat(5, minmax(40px, 1fr)); }
  .cert-manage-bulk { flex-direction: column; align-items: flex-start; }
  .bulk-buttons { margin-left: 0; }
}

.breadcrumb { font-size: 13px; margin-bottom: 10px; }
.breadcrumb a { color: #0F2044; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ── Forms ───────────────────────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #0F2044; }
.stack input {
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
.stack input:focus {
  outline: none;
  border-color: #4EA72E;
  box-shadow: 0 0 0 3px rgba(78,167,46,0.15);
}

.btn-primary {
  background: #4EA72E;
  color: #fff;
  border: none;
  padding: 11px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:hover { background: #3A7D22; }

/* ── Tables ──────────────────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 6px;
}
.data-table th {
  background: #4EA72E;
  color: #fff;
  padding: 10px 12px;
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.data-table th.num, .data-table td.num { text-align: right; }
.data-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}
.data-table tr:nth-child(even) td { background: #f9fafb; }
.data-table a { color: #0F2044; font-weight: 600; text-decoration: none; }
.data-table a:hover { text-decoration: underline; }

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Status badges — match the Excel tracker's CF palette */
.b-status-confirmed, .b-status-closed, .b-status-discharged, .b-status-received
  { background: #DCFCE7; color: #16A34A; }
.b-status-in-progress, .b-status-outstanding, .b-status-pending,
.b-status-pending-submission
  { background: #FEF3C7; color: #D97706; }
.b-status-open { background: #EFF6FF; color: #1D4ED8; }
.b-status-at-risk, .b-status-overdue { background: #FEE2E2; color: #DC2626; }
.b-status-n-a, .b-status-not-applicable { background: #F3F4F6; color: #6B7280; }
.b-status-conditional-approval { background: #F3E8FF; color: #7C3AED; }
.b-status-escalated, .b-status-on-hold { background: #FDF4FF; color: #7E22CE; }

/* Priority */
.b-pri-high { background: #FEE2E2; color: #DC2626; }
.b-pri-medium { background: #FEF3C7; color: #D97706; }
.b-pri-low { background: #DCFCE7; color: #16A34A; }

/* Risk R/A/G */
.b-rag-r { background: #FEE2E2; color: #DC2626; }
.b-rag-a { background: #FEF3C7; color: #D97706; }
.b-rag-g { background: #DCFCE7; color: #16A34A; }

/* Project status */
.b-active { background: #EFF6FF; color: #1D4ED8; }
.b-on-hold { background: #FEF3C7; color: #D97706; }
.b-closed-out { background: #DCFCE7; color: #16A34A; }
.b-archived { background: #F3F4F6; color: #6B7280; }

/* ── Callouts ────────────────────────────────────────────────────────── */
.callout {
  border-radius: 6px;
  padding: 12px 16px;
  margin: 14px 0;
  font-size: 13.5px;
}
.c-info { background: #EFF6FF; border-left: 4px solid #1D4ED8; }
.c-note { background: #F9FAFB; border-left: 4px solid #6B7280; }
.c-warn { background: #FEF3C7; border-left: 4px solid #D97706; }
.c-ok   { background: #DCFCE7; border-left: 4px solid #16A34A; }

/* ── KV pairs ────────────────────────────────────────────────────────── */
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 20px; margin: 12px 0; }
.kv > div { display: flex; flex-direction: column; padding: 8px 12px; background: #f9fafb; border-radius: 4px; border-left: 2px solid #4EA72E; }
.kv .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: #6B7280; font-weight: 600; }
.kv .v { font-size: 13.5px; color: #0F2044; margin-top: 2px; }

/* ── Misc ────────────────────────────────────────────────────────────── */
.muted { color: #6B7280; font-weight: 400; }
.hint  { font-size: 12.5px; color: #6B7280; margin-top: 14px; }
code {
  background: #f3f4f6;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: Menlo, Consolas, monospace;
  font-size: 12px;
  color: #0F2044;
}

.footer {
  text-align: center;
  color: #6B7280;
  font-size: 11px;
  padding: 18px 20px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}

/* ── Panel head with title + actions ─────────────────────────────────── */
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.panel-head .panel-title { margin-bottom: 12px; flex: 1; }
.panel-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-bottom: 10px;
}

.btn-secondary {
  background: #fff;
  color: #0F2044;
  border: 1px solid #0F2044;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-secondary:hover { background: #0F2044; color: #fff; }

.btn-add {
  background: #4EA72E;
  color: #fff;
  border: none;
  padding: 7px 13px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.btn-add:hover { background: #3A7D22; }

.btn-icon {
  background: transparent;
  border: 1px solid #d1d5db;
  color: #6B7280;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.btn-icon:hover { background: #FEE2E2; color: #DC2626; border-color: #DC2626; }
.btn-delete:hover { background: #FEE2E2; color: #DC2626; }

/* ── KPI grid (8 tiles) ──────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 6px;
}
.kpi {
  padding: 16px 18px;
  border-radius: 8px;
  border-left: 4px solid #6B7280;
  background: #f9fafb;
}
.kpi-num {
  font-size: 28px;
  font-weight: 700;
  color: #0F2044;
  line-height: 1;
}
.kpi-title {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #0F2044;
  margin-top: 6px;
}
.kpi-sub { font-size: 11.5px; color: #6B7280; margin-top: 3px; }

.kpi-green  { border-left-color: #16A34A; background: #F0FDF4; }
.kpi-amber  { border-left-color: #D97706; background: #FFFBEB; }
.kpi-red    { border-left-color: #DC2626; background: #FEF2F2; }
.kpi-blue   { border-left-color: #1D4ED8; background: #EFF6FF; }

/* Dashboard num cells tinted when non-zero */
.data-table td.num-warn { color: #D97706; font-weight: 700; }
.data-table td.num-danger { color: #DC2626; font-weight: 700; }

/* ── HRB pill badge ──────────────────────────────────────────────────── */
.pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.6px;
  margin-left: 6px;
  vertical-align: middle;
}
.pill-hrb { background: #FEE2E2; color: #DC2626; }

/* ── HTMX editable cells ─────────────────────────────────────────────── */
.cell { position: relative; }
.cell-display { cursor: pointer; }
.cell-display:hover {
  background: #F0FDF4 !important;
  outline: 1px solid #4EA72E;
  outline-offset: -1px;
}
.cell-text { display: inline-block; min-width: 30px; }
.cell-editing { padding: 4px 6px !important; background: #FFFBEB !important; }
.cell-form { display: flex; width: 100%; }
.cell-form input, .cell-form textarea, .cell-form select {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid #4EA72E;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
}
.cell-form textarea { min-height: 48px; resize: vertical; }
.cell-form select { cursor: pointer; }
.cell-hint {
  font-size: 10.5px;
  color: #6B7280;
  margin-top: 3px;
}
.cell-actions { width: 40px; text-align: center; }
.cell-static { font-variant-numeric: tabular-nums; }

/* HTMX request-in-flight indicator */
.htmx-request, .htmx-request * {
  cursor: progress !important;
}
tr.htmx-request td { opacity: 0.5; }

/* AI / request progress indicators.
   .htmx-indicator is hidden by default and shown only while its associated
   request is in flight. Defining the rules explicitly (rather than relying
   on HTMX's injected styles) guarantees the "Interacting with AI…" labels
   appear ONLY during the call, not permanently. */
.htmx-indicator { display: none; opacity: 0; transition: opacity 150ms ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; opacity: 1; }
@keyframes devcom-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.htmx-request .htmx-indicator { animation: devcom-pulse 1s ease-in-out infinite; }

/* ── Significant Change row colouring ────────────────────────────────── */
.sc-row td { border-bottom: 1px solid #e5e7eb; }
.sc-row.sc-high td    { background: #FEF2F2 !important; }
.sc-row.sc-high td:first-child   { border-left: 4px solid #DC2626; }
.sc-row.sc-medium td  { background: #FFFBEB !important; }
.sc-row.sc-medium td:first-child { border-left: 4px solid #D97706; }
.sc-row.sc-low td     { background: #F0FDF4 !important; }
.sc-row.sc-low td:first-child    { border-left: 4px solid #16A34A; }
.sc-row.sc-closed td  { background: #F3F4F6 !important; color: #6B7280; }
.sc-row.sc-closed td:first-child { border-left: 4px solid #9CA3AF; }

.sc-legend {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  margin-right: 6px;
}
.sc-legend.sc-high   { background: #FEE2E2; color: #DC2626; }
.sc-legend.sc-medium { background: #FEF3C7; color: #D97706; }
.sc-legend.sc-low    { background: #DCFCE7; color: #16A34A; }
.sc-legend.sc-closed { background: #F3F4F6; color: #6B7280; }

/* ── Audit log browser ───────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  background: #f9fafb;
  padding: 12px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.filter-bar label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.filter-bar input, .filter-bar select {
  margin-top: 3px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
}
.audit-op {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
}
.audit-op-insert { background: #DCFCE7; color: #16A34A; }
.audit-op-update { background: #EFF6FF; color: #1D4ED8; }
.audit-op-delete { background: #FEE2E2; color: #DC2626; }
.audit-diff {
  font-family: Menlo, Consolas, monospace;
  font-size: 11px;
  white-space: pre-wrap;
  background: #f9fafb;
  padding: 6px 8px;
  border-radius: 4px;
  max-height: 140px;
  overflow: auto;
}

/* ── Document uploads ────────────────────────────────────────────────── */
.hidden { display: none !important; }

.doc-upload {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}

.dropzone {
  display: block;
  border: 2px dashed #9CA3AF;
  border-radius: 10px;
  background: #f9fafb;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.dropzone:hover, .dropzone.drag-over {
  border-color: #4EA72E;
  background: #F0FDF4;
}
.doc-file-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.dropzone-icon {
  font-size: 26px;
  color: #4EA72E;
  margin-bottom: 4px;
}
.dropzone-headline {
  font-size: 14px;
  font-weight: 700;
  color: #0F2044;
}
.dropzone-hint {
  font-size: 12px;
  color: #6B7280;
  margin-top: 4px;
}
.dropzone-picked {
  font-size: 12px;
  color: #16A34A;
  font-weight: 600;
  margin-top: 8px;
  word-break: break-all;
}

.doc-provenance {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 16px;
}
.doc-provenance label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.doc-provenance .k {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6B7280;
  font-weight: 700;
}
.doc-provenance input,
.doc-provenance select {
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}
.doc-provenance .doc-desc { grid-column: 1 / -1; }

.doc-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.doc-table .doc-file a {
  color: #0F2044;
  font-weight: 600;
  text-decoration: none;
}
.doc-table .doc-file a:hover { text-decoration: underline; }
.doc-desc-cell {
  max-width: 260px;
  white-space: normal;
  word-break: break-word;
}
.b-doc-type {
  background: #EFF6FF;
  color: #1D4ED8;
}

.doc-edit-row td { background: #FFFBEB !important; padding: 14px 18px; }
.doc-edit-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 16px;
  align-items: end;
}
.doc-edit-form .k {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6B7280;
  font-weight: 700;
}
.doc-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.doc-edit-form input,
.doc-edit-form select {
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}
.doc-edit-form .doc-desc { grid-column: 1 / -1; }
.doc-edit-form .doc-actions { grid-column: 1 / -1; }

/* ── Appointment tracking table ──────────────────────────────────────── */
/* Group header row */
.data-table th.th-group {
  background: #3d8a22;
  text-align: center;
  border-left: 2px solid #4EA72E;
  border-right: 2px solid #4EA72E;
}
/* Sub-header row */
.data-table thead tr:nth-child(2) th {
  background: #5cb832;
  font-size: 10px;
  padding: 4px 8px;
}
/* Left border to visually separate appt / comp groups */
.data-table td:nth-child(6),
.data-table thead tr:nth-child(2) th:nth-child(4) { border-left: 2px solid #d1d5db; }

/* Appointment status badges */
.b-status-issued   { background: #EFF6FF; color: #1D4ED8; }
.b-status-sent     { background: #FEF3C7; color: #D97706; }
.b-status-returned { background: #F0FDF4; color: #16A34A; }
.b-status-signed   { background: #DCFCE7; color: #16A34A; font-weight: 700; }
.b-status-not-issued    { background: #FEE2E2; color: #DC2626; }
.b-status-not-requested { background: #F3F4F6; color: #6B7280; }
.b-status-requested     { background: #EFF6FF; color: #1D4ED8; }
.b-status-verified      { background: #DCFCE7; color: #16A34A; font-weight: 700; }

/* ── Appointment DH picker ───────────────────────────────────────────── */
.appt-picker {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.appt-picker-label {
  font-size: 13px;
  font-weight: 600;
  color: #15803d;
  white-space: nowrap;
}
.appt-picker-select {
  padding: 5px 8px;
  border: 1px solid #86efac;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  min-width: 220px;
}
.appt-picker-empty {
  font-size: 13px;
  color: #6B7280;
  margin: 0;
}
.btn-sm { padding: 5px 12px; font-size: 12px; }


/* Session 27 — CoPilot card collapse-to-title. Children 1-2 are the \25be/\2715
   buttons, child 3 is the card's title line; everything after collapses. */
.cop-card.cop-collapsed > :nth-child(n+4) { display: none !important; }
.cop-card.cop-collapsed { padding-bottom: 8px; }