/* PST Sport Hub */
:root {
  --primary:    #1A6B3C;
  --primary-dk: #145230;
  --primary-lt: #E8F5EE;
  --sage:       #4A6655;
  --light-grey: #F5FAF7;
  --border:     #D9E7DC;
  --border-strong: #BFD4C5;
  --text:       #0F1F18;
  --text-muted: #5C7265;
  --text-soft:  #8A9990;
  --white:      #FFFFFF;
  --soon-bg:    #F5FAF7;
  --soon-border:#D9E7DC;
  --gold:       #D4A843;

  /* Modern design tokens */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(15, 31, 24, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 31, 24, 0.06), 0 1px 2px rgba(15, 31, 24, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 31, 24, 0.07), 0 2px 4px rgba(15, 31, 24, 0.05);
  --shadow-lg: 0 12px 28px rgba(15, 31, 24, 0.10), 0 4px 8px rgba(15, 31, 24, 0.06);
  --ring-primary: 0 0 0 3px rgba(26, 107, 60, 0.18);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Status palette */
  --ok-bg:      #DCFCE7;
  --ok-text:    #166534;
  --ok-border:  #86EFAC;
  --warn-bg:    #FEF3C7;
  --warn-text:  #92400E;
  --warn-border:#FDE68A;
  --err-bg:     #FEE2E2;
  --err-text:   #991B1B;
  --err-border: #FCA5A5;
  --info-bg:    #DBEAFE;
  --info-text:  #1E40AF;
  --info-border:#BFDBFE;
}

* { box-sizing: border-box; }
*::selection { background: var(--primary-lt); color: var(--primary-dk); }

html, body {
  margin: 0;
  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--light-grey);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03";
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Inter via @font-face — use the variable font from rsms.me CDN.
   Falls back to system fonts if blocked. */
@import url('https://rsms.me/inter/inter.css');
@supports (font-variation-settings: normal) {
  html, body { font-family: "InterVariable", "Inter", -apple-system, "Segoe UI", sans-serif; }
}

/* ─── Topbar ──────────────────────────────────────────────────────── */
header.topbar {
  background: var(--primary-dk);
  color: var(--white);
  padding: 18px 40px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 4px solid var(--primary);
  flex-shrink: 0;
}
.topbar-logo { height: 40px; width: auto; object-fit: contain; }
.topbar-brand { display: flex; flex-direction: column; gap: 2px; }
.brand-name { font-family: Georgia, serif; font-weight: bold; font-size: 20px; letter-spacing: 1px; line-height: 1.2; }
.brand-tagline { font-size: 12px; opacity: 0.65; letter-spacing: 0.3px; }
.topbar-admin-link, .topbar-back-link {
  margin-left: auto;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.2);
  letter-spacing: 0.3px;
}
.topbar-admin-link:hover, .topbar-back-link:hover { background: rgba(255,255,255,0.1); color: var(--white); }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; }

/* ─── Main ────────────────────────────────────────────────────────── */
main {
  flex: 1;
  padding: 48px 40px 40px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.hub-intro { margin-bottom: 36px; }
.hub-intro h1 {
  font-family: Georgia, serif;
  font-size: 28px;
  color: var(--primary-dk);
  margin: 0 0 8px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--primary);
  display: inline-block;
}
.hub-intro p { color: var(--text-muted); margin: 10px 0 0; font-size: 14px; }

/* ─── Tools grid ──────────────────────────────────────────────────── */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.tool-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow 0.2s, transform 0.15s;
  border-top: 3px solid var(--primary);
}
.tool-card:hover:not(.tool-card--soon) { box-shadow: 0 4px 16px rgba(26,107,60,0.12); transform: translateY(-2px); }
.tool-card--soon { border-top-color: var(--border); opacity: 0.75; }
.tool-icon { width: 56px; height: 56px; background: var(--primary-lt); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--primary-dk); flex-shrink: 0; }
.tool-card--soon .tool-icon { background: var(--light-grey); color: var(--text-muted); }
.tool-content { flex: 1; }
.tool-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.tool-name { font-family: Georgia, serif; font-size: 18px; color: var(--primary-dk); margin: 0; font-weight: bold; }
.tool-card--soon .tool-name { color: var(--text-muted); }
.tool-desc { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.6; }

/* ─── Badges ──────────────────────────────────────────────────────── */
.badge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.badge--soon { background: #f0f0f0; color: var(--text-muted); border: 1px solid var(--border); }

/* ─── Buttons ─────────────────────────────────────────────────────── */
.tool-action { margin-top: 4px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 5px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background 0.15s;
  width: 100%;
}
.btn-open { background: var(--primary-dk); color: var(--white); }
.btn-open:hover { background: #0f3d24; }
.btn-soon { background: var(--light-grey); color: var(--text-muted); cursor: not-allowed; border: 1px solid var(--border); }

/* ─── Footer ──────────────────────────────────────────────────────── */
footer.site-footer {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 14px 40px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
.footer-sep { opacity: 0.4; }

/* ═══════════════════════════════════════════════════════════════════
   CRM — Secondary Nav
═══════════════════════════════════════════════════════════════════ */
.crm-nav {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 40px;
  flex-shrink: 0;
}
.crm-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 46px;
  gap: 4px;
}
.crm-nav-link {
  padding: 0 16px;
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  height: 46px;
  white-space: nowrap;
}
.crm-nav-link:hover { color: var(--text); }
.crm-nav-link.active { color: var(--primary-dk); border-bottom-color: var(--primary); font-weight: 600; }
.crm-nav-link.nav-new { margin-left: auto; background: var(--primary-dk); color: var(--white); border-radius: 5px; height: 32px; padding: 0 14px; font-size: 13px; font-weight: 600; border-bottom: none; }
.crm-nav-link.nav-new:hover { background: var(--primary); color: var(--white); }

/* ─── CRM Main ────────────────────────────────────────────────────── */
main.crm-main {
  flex: 1;
  padding: 36px 40px 40px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* ─── Page headers ────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.page-header h1 {
  font-family: Georgia, serif;
  font-size: 24px;
  color: var(--primary-dk);
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary);
}
.page-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ─── Stats grid ──────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 22px;
  border-top: 3px solid var(--primary);
}
.stat-card.urgent { border-top-color: #DC2626; }
.stat-card.ireland { border-top-color: #1A6B3C; }
.stat-card.uk { border-top-color: #1D4ED8; }
.stat-card-link { display:block; text-decoration:none; color:inherit; cursor:pointer; transition:box-shadow 0.15s, transform 0.1s; }
.stat-card-link:hover { box-shadow:0 4px 12px rgba(0,0,0,0.1); transform:translateY(-1px); }
.stat-value { font-size: 26px; font-weight: 700; color: var(--primary-dk); font-family: Georgia, serif; line-height: 1.1; }
.stat-value.urgent { color: #DC2626; }
.stat-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 5px; }

/* ─── Section cards ───────────────────────────────────────────────── */
.section-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 24px;
  overflow: hidden;
}
.section-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.section-card-header h2 {
  font-family: Georgia, serif;
  font-size: 16px;
  color: var(--primary-dk);
  margin: 0;
}
.section-card-body { padding: 20px; }
.section-card-body.no-pad { padding: 0; }

/* ─── Stage badges ────────────────────────────────────────────────── */
.stage-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
/* Tender Phase (Steps 1–7) */
.stage-enquiry        { background: #F3F4F6; color: #4B5563; }
.stage-desktop        { background: #DBEAFE; color: #1D4ED8; }
.stage-initialbudget  { background: #EFF6FF; color: #1E40AF; }
.stage-sitesurvey     { background: #EDE9FE; color: #6D28D9; }
.stage-livebudget     { background: #FEF3C7; color: #92400E; }
.stage-hoa            { background: #FEF9C3; color: #713F12; }
.stage-prestart       { background: #FFEDD5; color: #9A3412; }
/* Procurement (Steps 8–10) */
.stage-subcontractor  { background: #FEE2E2; color: #9B1C1C; }
.stage-orders         { background: #FEF3C7; color: #78350F; }
.stage-scheduling     { background: #FFF7ED; color: #C2410C; }
/* Design Development (Steps 11–13) */
.stage-drafting       { background: #E0F2FE; color: #075985; }
.stage-clientapproval { background: #DBEAFE; color: #1E3A8A; }
.stage-construction   { background: #EDE9FE; color: #4C1D95; }
/* Health & Safety (Steps 14–15) */
.stage-hsdoc          { background: #DCFCE7; color: #14532D; }
.stage-induction      { background: #D1FAE5; color: #065F46; }
/* On site / Outcomes */
.stage-onsite         { background: #BBF7D0; color: #14532D; }
.stage-complete       { background: #D1FAE5; color: #065F46; }
.stage-lost           { background: #FEE2E2; color: #991B1B; }

/* ─── Region badges ───────────────────────────────────────────────── */
.region-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.region-ireland { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
.region-uk      { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }

/* ─── CRM Table ───────────────────────────────────────────────────── */
.crm-table-wrap { background: var(--white); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.crm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.crm-table th {
  background: var(--light-grey);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sage);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.crm-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.crm-table tr:last-child td { border-bottom: none; }
.crm-table tbody tr:hover td { background: #F0FDF4; }
.crm-table .client-link { color: var(--primary-dk); text-decoration: none; font-weight: 600; }
.crm-table .client-link:hover { text-decoration: underline; }
.text-muted { color: var(--text-muted); font-size: 13px; }
.empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.empty-state p { font-size: 14px; margin: 8px 0 20px; }

/* ─── Deadline colors ─────────────────────────────────────────────── */
.deadline-urgent { color: #DC2626; font-weight: 600; }
.deadline-soon   { color: #D97706; font-weight: 600; }
.deadline-ok     { color: var(--text); }

/* ─── Filter bar ──────────────────────────────────────────────────── */
.filter-bar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.filter-group { display: flex; flex-direction: column; gap: 4px; }
.filter-group label { font-size: 11px; color: var(--sage); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.filter-group select,
.filter-group input[type=text] {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  background: var(--white);
  min-width: 140px;
}
.filter-group select:focus,
.filter-group input:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.filter-actions { display: flex; gap: 8px; align-items: flex-end; }
.btn-filter { padding: 8px 18px; background: var(--primary-dk); color: var(--white); border: none; border-radius: 5px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.btn-filter:hover { background: var(--primary); }
.btn-clear { padding: 8px 14px; background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 5px; font-size: 13px; cursor: pointer; font-family: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.btn-clear:hover { background: var(--light-grey); color: var(--text); }

/* ─── Pipeline stage bars ─────────────────────────────────────────── */
.pipeline-stages { display: flex; flex-direction: column; gap: 12px; }
.pipeline-stage-row { display: flex; align-items: center; gap: 12px; }
.pipeline-stage-name { width: 240px; font-size: 13px; flex-shrink: 0; }
.pipeline-bar-wrap { flex: 1; background: transparent; border: 1px solid var(--border); border-radius: 4px; height: 24px; overflow: hidden; }
.pipeline-bar { height: 100%; border-radius: 4px; display: flex; align-items: center; padding-left: 10px; font-size: 12px; font-weight: 600; color: var(--white); min-width: 32px; }
/* Tender Phase (Steps 1–7) */
.pipeline-bar.stage-enquiry        { background: #9CA3AF; }
.pipeline-bar.stage-desktop        { background: #3B82F6; }
.pipeline-bar.stage-initialbudget  { background: #60A5FA; }
.pipeline-bar.stage-sitesurvey     { background: #8B5CF6; }
.pipeline-bar.stage-livebudget     { background: #F59E0B; }
.pipeline-bar.stage-hoa            { background: #D97706; }
.pipeline-bar.stage-prestart       { background: #EA580C; }
/* Procurement (Steps 8–10) */
.pipeline-bar.stage-subcontractor  { background: #DC2626; }
.pipeline-bar.stage-orders         { background: #B45309; }
.pipeline-bar.stage-scheduling     { background: #C2410C; }
/* Design Development (Steps 11–13) */
.pipeline-bar.stage-drafting       { background: #0284C7; }
.pipeline-bar.stage-clientapproval { background: #1D4ED8; }
.pipeline-bar.stage-construction   { background: #6D28D9; }
/* Health & Safety (Steps 14–15) */
.pipeline-bar.stage-hsdoc          { background: #059669; }
.pipeline-bar.stage-induction      { background: #047857; }
/* On site */
.pipeline-bar.stage-onsite         { background: #16A34A; }
.pipeline-meta { width: 120px; font-size: 13px; color: var(--text-muted); text-align: right; flex-shrink: 0; }

/* ─── Opportunity detail page ─────────────────────────────────────── */
.opp-header {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--primary);
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 20px;
}
.opp-title { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.opp-title h1 { font-family: Georgia, serif; font-size: 26px; color: var(--primary-dk); margin: 0; }
.opp-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--text-muted); margin-top: 8px; }
.opp-meta-item { display: flex; align-items: center; gap: 5px; }
.opp-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

/* ─── Inline action buttons ───────────────────────────────────────── */
.btn-sm {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background 0.15s;
}
.btn-primary { background: var(--primary-dk); color: var(--white); }
.btn-primary:hover { background: var(--primary); }
.btn-secondary { background: var(--white); color: var(--primary-dk); border: 1px solid var(--primary); }
.btn-secondary:hover { background: var(--primary-lt); }
.btn-danger { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.btn-danger:hover { background: #FCA5A5; }
.btn-handover { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.btn-handover:hover { background: #A7F3D0; }

/* ─── Detail grid ─────────────────────────────────────────────────── */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.detail-box { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 20px 22px; }
.detail-box h3 { font-family: Georgia, serif; font-size: 14px; color: var(--sage); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.detail-row { display: flex; gap: 8px; margin-bottom: 12px; font-size: 14px; align-items: flex-start; }
.detail-row:last-child { margin-bottom: 0; }
.detail-label { width: 120px; color: var(--text-muted); font-size: 12px; flex-shrink: 0; padding-top: 1px; }
.detail-value { flex: 1; color: var(--text); }
.detail-notes { font-size: 14px; line-height: 1.7; color: var(--text); white-space: pre-wrap; }

/* ─── Activity log ────────────────────────────────────────────────── */
.activity-log { }
.activity-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: none; }
.activity-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  background: var(--primary-lt); color: var(--primary-dk);
}
.activity-dot.stage  { background: #EDE9FE; color: #6D28D9; }
.activity-dot.call   { background: #D1FAE5; color: #065F46; }
.activity-dot.email  { background: #DBEAFE; color: #1D4ED8; }
.activity-dot.note   { background: var(--primary-lt); color: var(--primary-dk); }
.activity-body { flex: 1; }
.activity-content { font-size: 14px; color: var(--text); line-height: 1.5; }
.activity-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* ─── Add activity form ───────────────────────────────────────────── */
.add-activity-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.add-activity-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.add-activity-row select {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 14px;
  font-family: inherit;
  background: var(--white);
  width: 140px;
  flex-shrink: 0;
}
.add-activity-row textarea {
  flex: 1;
  min-width: 200px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 38px;
  max-height: 120px;
}
.add-activity-row select:focus,
.add-activity-row textarea:focus { outline: 2px solid var(--primary); border-color: var(--primary); }

/* ─── CRM Form ────────────────────────────────────────────────────── */
.crm-form-card { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 28px 32px; max-width: 860px; }
.crm-form-section { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.crm-form-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.crm-form-section h3 { font-family: Georgia, serif; font-size: 14px; color: var(--sage); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 18px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid-1 { display: grid; grid-template-columns: 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label {
  font-size: 11px;
  color: var(--sage);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.form-group label .req { color: #DC2626; margin-left: 2px; }
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=tel],
.form-group input[type=number],
.form-group input[type=date],
.form-group select,
.form-group textarea {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 14px;
  font-family: inherit;
  background: var(--white);
  width: 100%;
}
.form-group textarea { resize: vertical; min-height: 90px; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.form-errors { background: #FEE2E2; border: 1px solid #FECACA; border-radius: 5px; padding: 12px 16px; margin-bottom: 20px; }
.form-errors p { margin: 0; font-size: 14px; color: #991B1B; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }

/* ─── Handover record ─────────────────────────────────────────────── */
.handover-box { background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 8px; padding: 20px 22px; margin-bottom: 20px; }
.handover-box h3 { font-family: Georgia, serif; font-size: 15px; color: #065F46; margin: 0 0 14px; }

/* ─── Invoice / Contract status badges ───────────────────────────── */
.inv-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.inv-draft   { background: #F3F4F6; color: #4B5563; }
.inv-issued  { background: #FEF3C7; color: #92400E; }
.inv-paid    { background: #D1FAE5; color: #065F46; }
.inv-green   { background: #D1FAE5; color: #065F46; }
.inv-amber   { background: #FEF3C7; color: #92400E; }
.inv-red     { background: #FEE2E2; color: #991B1B; }
.inv-grey    { background: #F3F4F6; color: #4B5563; }

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  header.topbar { padding: 16px 20px; }
  main, main.crm-main { padding: 24px 20px; }
  .crm-nav { padding: 0 20px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .form-grid-3, .form-grid-2 { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: 1fr; }
  .filter-bar { flex-direction: column; }
}
@media (max-width: 500px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* ─── Project Status Badges ─────────────────────────────────────────────────── */
.ps-badge { display:inline-block;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase; }
.ps-identified { background:#EFF6FF;color:#1D4ED8; }
.ps-booked     { background:#FEF3C7;color:#B45309; }
.ps-live       { background:#D1FAE5;color:#065F46; }
.ps-completed  { background:#E8F5EE;color:#145230; }
.ps-lost       { background:#FEE2E2;color:#991B1B; }

/* ─── Payment Milestone Badges ──────────────────────────────────────────────── */
.payment-status-badge { display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600; }
.pm-scheduled { background:#F3F4F6;color:#374151; }
.pm-invoiced  { background:#FEF3C7;color:#B45309; }
.pm-received  { background:#D1FAE5;color:#065F46; }
.pm-overdue   { background:#FEE2E2;color:#991B1B; }

/* ─── Sales & Margin Table ──────────────────────────────────────────────────── */
.margin-table { width:100%;border-collapse:collapse; }
.margin-table th { padding:8px 14px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);background:var(--light-grey);border-bottom:1px solid var(--border); }
.margin-table td { padding:12px 14px;border-bottom:1px solid var(--border);font-size:14px; }
.margin-table tr:last-child td { border-bottom:none; }
.margin-table .total-row td { font-weight:700;background:#FAFAFA; }
.margin-value { font-weight:700;color:var(--primary-dk); }
.margin-positive { color:#065F46;font-weight:700; }
.margin-pct { display:inline-block;padding:2px 8px;border-radius:10px;background:#D1FAE5;color:#065F46;font-size:12px;font-weight:700; }

/* ─── Cashflow ───────────────────────────────────────────────────────────────── */
.cashflow-quarterly { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px; }
.cashflow-quarter-card { background:var(--white);border:1px solid var(--border);border-radius:8px;padding:16px;text-align:center; }
.cashflow-quarter-title { font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;font-weight:600; }
.cashflow-quarter-irl { font-size:20px;font-weight:700;color:var(--primary-dk); }
.cashflow-quarter-uk  { font-size:14px;font-weight:600;color:#1D4ED8;margin-top:4px; }
.cashflow-quarter-received { font-size:11px;color:var(--text-muted);margin-top:6px; }

/* ─── Form: checkbox label ───────────────────────────────────────────────────── */
.checkbox-label { display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--text); }
.checkbox-label input[type="checkbox"] { width:16px;height:16px;cursor:pointer;accent-color:var(--primary); }

/* ─── Status Breakdown Grid ─────────────────────────────────────────────────── */
.status-breakdown-grid { display:flex;gap:10px;flex-wrap:wrap; }
.status-breakdown-item { background:var(--white);border:1px solid var(--border);border-radius:8px;padding:12px 16px;flex:1;min-width:120px;text-align:center; }
.status-breakdown-count { font-size:24px;font-weight:700;color:var(--primary-dk); }
.status-breakdown-label { font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.4px;margin-top:4px; }
.status-breakdown-value { font-size:12px;color:var(--sage);margin-top:2px; }

/* ─── Cashflow monthly table ─────────────────────────────────────────────────── */
.cashflow-month-table th, .cashflow-month-table td { padding:9px 14px;text-align:right; }
.cashflow-month-table th:first-child, .cashflow-month-table td:first-child { text-align:left; }
.overdue-row { background:#FEF2F2; }

@media (max-width: 768px) {
  .cashflow-quarterly { grid-template-columns:1fr 1fr; }
}

/* ─── Dashboard: stat card colour semantics ──────────────────────────────────── */
.stat-card-red  { border-top-color: #DC2626 !important; }
.stat-card-blue { border-top-color: #1D4ED8 !important; }
.stat-card-grey { border-top-color: #6B7280 !important; }
.stat-card-irl  { border-top-color: #1A6B3C !important; }

/* ─── Dashboard: bento grid ─────────────────────────────────────────────────── */
.dashboard-bento {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
  align-items: start;
}
.dashboard-bento > .section-card { margin-bottom: 0; }

/* ─── Dashboard: chart container ────────────────────────────────────────────── */
.cashflow-chart-wrap { padding: 16px 20px 20px; }
.cashflow-chart-wrap canvas { max-height: 220px; }

/* ─── Dashboard: collapsible forecast ───────────────────────────────────────── */
.forecast-details summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--primary-dk);
  font-weight: 600;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  list-style: none;
  user-select: none;
}
.forecast-details summary::-webkit-details-marker { display: none; }
.forecast-details summary::after { content: ' →'; }
.forecast-details[open] summary::after { content: ' ↑'; }

/* ─── Dashboard: enhanced alert banner ──────────────────────────────────────── */
.alert-banner-card .section-card-header {
  padding: 20px 24px;
}
.alert-banner-card .section-card-header h2 {
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ─── Dashboard: dense table ────────────────────────────────────────────────── */
.crm-table-dense th { padding: 8px 12px; font-size: 10px; }
.crm-table-dense td { padding: 8px 12px; font-size: 13px; }

/* ─── Dashboard: pulsing urgency dot ────────────────────────────────────────── */
@keyframes pulse-red {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}
.deadline-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #DC2626;
  animation: pulse-red 1.2s ease-in-out infinite;
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}
.deadline-urgent-cell { font-size: 14px; font-weight: 700; color: #DC2626; }

/* ─── Dashboard: empty cost hint ────────────────────────────────────────────── */
.empty-hint { font-size: 11px; color: #D1D5DB; font-style: italic; }

@media (max-width: 900px) {
  .dashboard-bento { grid-template-columns: 1fr; }
}

/* ─── Project Management Module ──────────────────────────────────────────────── */

/* Workspace layout: left rail + main content */
.pm-workspace {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
  align-items: flex-start;
}
.pm-rail {
  background: var(--white);
  border-right: 1px solid var(--border);
  padding: 24px 0 24px;
  position: sticky;
  top: 0;
  align-self: stretch;
  min-height: calc(100vh - 100px);
}
.pm-rail-header { padding: 0 20px 20px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.pm-rail-back {
  display:inline-block; font-size:12px; color:var(--text-muted);
  text-decoration:none; margin-bottom:10px;
}
.pm-rail-back:hover { color:var(--primary-dk); }
.pm-rail-title {
  font-family:Georgia,serif; font-size:18px; color:var(--primary-dk);
  font-weight:700; margin-bottom:12px;
}
.pm-rail-contacts {
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color:var(--primary-dk); text-decoration:none; padding:5px 10px; margin-bottom:12px;
  background:var(--primary-lt); border:1px solid var(--primary); border-radius:6px;
}
.pm-rail-contacts:hover { background:var(--primary); color:#fff; }
.pm-rail-pct { display:flex; flex-direction:column; gap:6px; font-size:11px; color:var(--text-muted); }
.pm-rail-pct-bar { background:var(--light-grey); height:6px; border-radius:3px; overflow:hidden; border:1px solid var(--border); }
.pm-rail-pct-fill { background:var(--primary); height:100%; transition:width 0.3s; }
.pm-rail-list { list-style:none; margin:0; padding:0; }
.pm-rail-item a {
  display:flex; align-items:center; gap:8px;
  padding:10px 20px; text-decoration:none; color:var(--text);
  font-size:13px; border-left:3px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.pm-rail-item a:hover { background:var(--light-grey); }
.pm-rail-item.active a {
  background:var(--primary-lt); border-left-color:var(--primary);
  color:var(--primary-dk); font-weight:600;
}
.pm-rail-num { color:var(--text-muted); font-size:11px; font-weight:600; min-width:22px; }
.pm-rail-label { flex:1; }
.pm-rail-meta { display:flex; gap:6px; align-items:center; }
.pm-rail-missing {
  background:#FEF2F2; color:#B91C1C; font-size:10px; font-weight:700;
  padding:1px 5px; border-radius:8px; min-width:18px; text-align:center;
}
.pm-rail-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dot-complete { background:#16A34A; }
.dot-progress { background:#D97706; }
.dot-notstarted { background:var(--border); }

/* Pinned financial summary card at the bottom of the project rail */
.pm-rail-finance {
  display: block;
  margin: 18px 14px 14px;
  padding: 12px 14px 10px;
  background: linear-gradient(180deg, #F4F8F5 0%, #ECF1ED 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.pm-rail-finance:hover {
  box-shadow: 0 3px 10px rgba(20, 82, 48, 0.12);
  transform: translateY(-1px);
}
.pm-rail-finance-head {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--primary-dk);
  font-weight: 700;
  margin-bottom: 8px;
}
.pm-rail-finance-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; padding: 2px 0;
}
.pm-rail-finance-label { color: var(--text-muted); }
.pm-rail-finance-val   { font-weight: 600; font-variant-numeric: tabular-nums; }
.pm-rail-finance-profit {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: 12.5px;
}
.pm-rail-finance-pct {
  margin-left: 6px; font-size: 11px; opacity: 0.8;
}

/* Virtual rail items (e.g. Financials) — different prefix tone */
.pm-rail-item-virtual .pm-rail-num {
  color: var(--primary-dk);
  font-weight: 700;
  font-size: 13px;
}

/* Dashboard → Financials jump card (replaces the inline financial block on
   Section 0 now that Financials is its own tab) */
.pm-finance-jump-card {
  display: block;
  margin-top: 24px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F8F5 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.pm-finance-jump-card:hover {
  box-shadow: 0 6px 18px rgba(20, 82, 48, 0.10);
  transform: translateY(-1px);
}
.pm-finance-jump-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.pm-finance-jump-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.7px;
  font-weight: 700; color: var(--primary-dk);
}
.pm-finance-jump-arrow {
  font-size: 18px; color: var(--primary-dk);
}
.pm-finance-jump-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.pm-finance-jump-grid > div {
  display: flex; flex-direction: column; gap: 4px;
}
.pm-finance-jump-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); font-weight: 600;
}
.pm-finance-jump-val {
  font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text);
}
.pm-finance-jump-pct {
  margin-left: 6px; font-size: 12px; opacity: 0.8;
}
@media (max-width: 700px) {
  .pm-finance-jump-grid { grid-template-columns: repeat(2, 1fr); }
}

/* PO matching: meta row holds expected-value form + tag dropdown side-by-side */
.pm-match-meta-row {
  display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.pm-match-tag-form {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 240px;
}
.pm-match-tag-form label {
  font-size: 11px; color: var(--text-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.pm-match-tag-form select {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--white); font-size: 13px; min-width: 240px;
}

/* Empty/dash state in finance table cells */
.pm-finance-empty { color: var(--text-muted); }
.pm-finance-warn td { background: #FFFBEB; }

/* Main content area */
.pm-main { padding: 24px 32px 40px; min-width: 0; }

.pm-section-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:16px; flex-wrap:wrap;
}
.pm-section-crumb {
  font-size:11px; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:0.6px; font-weight:600; margin-bottom:4px;
}
.pm-section-title {
  font-family:Georgia,serif; color:var(--primary-dk); margin:0;
  font-size:28px; line-height:1.2;
}
.pm-section-sub { color:var(--text-muted); font-size:13px; margin-top:6px; max-width:680px; }
.pm-section-actions { display:flex; gap:10px; align-items:center; }

/* KPI grid (dashboard) */
.pm-kpi-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:14px; margin-top:8px;
}
.pm-kpi {
  background:var(--white); border:1px solid var(--border); border-radius:8px;
  padding:16px 18px; border-top:3px solid var(--primary);
}
.pm-kpi-warn { border-top-color:#D97706; }
.pm-kpi-ok { border-top-color:#16A34A; }
.pm-kpi-label {
  font-size:11px; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:0.5px; font-weight:600; margin-bottom:8px;
}
.pm-kpi-value {
  font-size:28px; font-weight:700; color:var(--primary-dk); line-height:1;
}
.pm-kpi-warn .pm-kpi-value { color:#D97706; }
.pm-kpi-ok .pm-kpi-value { color:#16A34A; }
.pm-kpi-sub { font-size:12px; color:var(--text-muted); margin-top:6px; }

/* Section status grid */
.pm-section-grid { width:100%; border-collapse:collapse; font-size:14px; }
.pm-section-grid th {
  background:var(--light-grey); padding:10px 14px; text-align:left;
  font-size:11px; text-transform:uppercase; letter-spacing:0.5px;
  color:var(--text-muted); border-bottom:1px solid var(--border);
}
.pm-section-grid td {
  padding:10px 14px; border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.pm-section-grid tr:last-child td { border-bottom:none; }
.pm-section-grid .pm-grid-num { color:var(--text-muted); font-weight:600; width:40px; }
.pm-section-grid .pm-grid-name a { color:var(--primary-dk); text-decoration:none; font-weight:600; }
.pm-section-grid .pm-grid-name a:hover { text-decoration:underline; }
.pm-row-complete td:first-child { box-shadow:inset 3px 0 #16A34A; }
.pm-row-progress td:first-child { box-shadow:inset 3px 0 #D97706; }

/* Status pills */
.pm-status-pill {
  display:inline-block; padding:3px 10px; border-radius:12px;
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px;
  background:var(--light-grey); color:var(--text-muted); border:1px solid var(--border);
}
.pm-status-complete { background:#DCFCE7; color:#166534; border-color:#86EFAC; }
.pm-status-in-progress { background:#FEF3C7; color:#92400E; border-color:#FDE68A; }
.pm-status-not-started { background:var(--light-grey); color:var(--text-muted); }
.pm-status-active { background:var(--primary-lt); color:var(--primary-dk); border-color:var(--border); }
.pm-status-on-hold { background:#FEF3C7; color:#92400E; border-color:#FDE68A; }
.pm-status-cancelled { background:#FEE2E2; color:#991B1B; border-color:#FECACA; }

/* Missing-doc banner */
.pm-missing-banner {
  background:#FEF2F2; border:1px solid #FECACA; border-radius:8px;
  padding:14px 18px; margin-top:18px;
}
.pm-missing-banner.pm-missing-inline { margin-top:0; margin-bottom:18px; }
.pm-missing-head { font-weight:700; color:#B91C1C; margin-bottom:8px; font-size:14px; }
.pm-missing-banner ul { margin:0; padding-left:20px; font-size:13px; }
.pm-missing-banner li { margin-bottom:4px; }
.pm-missing-banner a { color:var(--primary-dk); text-decoration:none; font-weight:600; }
.pm-missing-banner a:hover { text-decoration:underline; }

/* Subsection card (slight indent / different header) */
.pm-subsection-card { margin-bottom:16px; }
.pm-subsection-card .section-card-header h2 {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:15px;
}
.pm-sub-meta { font-size:11px; color:var(--text-muted); font-weight:400; text-transform:none; letter-spacing:0; }
.pm-sub-status-ok { font-size:11px; color:#166534; background:#DCFCE7; padding:2px 8px; border-radius:10px; font-weight:600; }
.pm-sub-status-warn { font-size:11px; color:#92400E; background:#FEF3C7; padding:2px 8px; border-radius:10px; font-weight:600; }

/* Doc checklist */
.pm-checklist {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:6px 14px; padding:10px 0 16px; border-bottom:1px dashed var(--border); margin-bottom:14px;
}
.pm-checklist-item {
  display:flex; align-items:center; gap:8px; font-size:13px; padding:4px 0;
}
.pm-check-icon {
  width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0;
}
.pm-checklist-item.is-received .pm-check-icon { background:#DCFCE7; color:#166534; }
.pm-checklist-item.is-missing .pm-check-icon { background:#FEF2F2; color:#B91C1C; }
.pm-check-label { flex:1; }
.pm-checklist-item.is-missing .pm-check-label { color:var(--text); }
.pm-checklist-item.is-received .pm-check-label { color:var(--text-muted); text-decoration:line-through; }
.pm-check-status { font-size:10px; text-transform:uppercase; letter-spacing:0.4px; font-weight:600; color:var(--text-muted); }
.pm-checklist-item.is-received .pm-check-status { color:#166534; }
.pm-checklist-item.is-missing .pm-check-status { color:#B91C1C; }

/* Doc table */
.pm-doc-table { width:100%; border-collapse:collapse; font-size:13px; margin-top:6px; }
.pm-doc-table th {
  background:var(--light-grey); padding:8px 10px; text-align:left;
  font-size:10px; text-transform:uppercase; letter-spacing:0.5px;
  color:var(--text-muted); border-bottom:1px solid var(--border);
}
.pm-doc-table td { padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
.pm-doc-table tr:last-child td { border-bottom:none; }
.pm-doc-label { font-weight:600; color:var(--text); }
.pm-doc-notes { font-size:11px; color:var(--text-muted); margin-top:2px; }
.pm-doc-poref { font-size:11px; color:var(--primary-dk); font-weight:600; margin-top:2px; }
.pm-doc-link { color:var(--primary-dk); text-decoration:none; font-weight:600; font-size:12px; }
.pm-doc-link:hover { text-decoration:underline; }
.pm-doc-date { color:var(--text-muted); font-size:11px; }
.pm-doc-del {
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-size:18px; padding:2px 8px; border-radius:4px;
}
.pm-doc-del:hover { color:#B91C1C; background:#FEF2F2; }

.pm-doc-status-received { background:#F0FDF4; }
.pm-doc-status-pending { }
.pm-doc-status-not-applicable { opacity:0.55; }

.pm-empty {
  padding:18px; text-align:center; color:var(--text-muted); font-size:13px;
  font-style:italic; background:var(--light-grey); border-radius:6px; border:1px dashed var(--border);
}

/* Add-doc form */
.pm-add-doc-form {
  margin-top:16px; padding-top:14px; border-top:1px solid var(--border);
}
.pm-add-doc-formhead {
  font-size:13px; font-weight:700; color:var(--primary-dk); margin-bottom:10px;
}
.pm-add-doc-row {
  display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:8px;
}
.pm-add-doc-row:last-child { margin-bottom:0; }
.pm-field { display:flex; flex-direction:column; gap:4px; flex:1; min-width:140px; }
.pm-field-wide { flex:2; min-width:200px; }
.pm-field-narrow { flex:0 0 130px; min-width:120px; }
.pm-field-full { flex:1 0 100%; }
.pm-field label {
  font-size:10px; color:var(--sage); text-transform:uppercase;
  letter-spacing:0.5px; font-weight:600;
}
.pm-field input, .pm-field select, .pm-inline-form select {
  padding:7px 10px; border:1px solid var(--border); border-radius:5px;
  font-size:13px; font-family:inherit; background:var(--white);
}
.pm-field input:focus, .pm-field select:focus { outline:none; border-color:var(--primary); }

.pm-inline-form { display:inline; }
.pm-inline-form select { padding:4px 8px; font-size:12px; }

/* Section 0 — master quotation slot */
.pm-master-doc {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px; background:var(--primary-lt); border:1px solid var(--border);
  border-radius:6px;
}

/* "Coming in Phase 2" inline note */
.pm-coming-soon {
  margin-top:14px; padding:10px 14px; background:#FFFBEB;
  border:1px dashed #FDE68A; border-radius:6px; font-size:12px; color:#78350F;
}

/* Subcontractors autosuggest */
.pm-autosuggest-card { background:#FFFBEB; border-color:#FDE68A; }
.pm-autosuggest-list { display:flex; flex-direction:column; gap:6px; }
.pm-autosuggest-item {
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  background:var(--white); border:1px solid var(--border); border-radius:5px;
}
.pm-autosuggest-name { flex:1; font-weight:600; font-size:13px; }
.pm-autosuggest-source {
  font-size:10px; text-transform:uppercase; letter-spacing:0.5px; font-weight:700;
  background:var(--light-grey); color:var(--text-muted); padding:2px 8px; border-radius:10px;
}

/* Projects index */
.pm-status-tabs { display:flex; gap:4px; }
.pm-status-tab {
  padding:6px 14px; font-size:13px; text-decoration:none; color:var(--text-muted);
  border:1px solid transparent; border-radius:5px;
}
.pm-status-tab:hover { background:var(--light-grey); }
.pm-status-tab.active {
  background:var(--white); color:var(--primary-dk); font-weight:600;
  border-color:var(--border);
}

.pm-projects-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:16px;
}
.pm-project-card {
  background:var(--white); border:1px solid var(--border); border-radius:8px;
  padding:18px 18px 16px; text-decoration:none; color:var(--text);
  display:flex; flex-direction:column; gap:10px; border-top:3px solid var(--primary);
  transition: box-shadow 0.15s, transform 0.15s;
}
.pm-project-card:hover { box-shadow:0 4px 14px rgba(26,107,60,0.12); transform:translateY(-1px); }
.pm-project-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pm-project-name { font-family:Georgia,serif; font-weight:700; font-size:17px; color:var(--primary-dk); }
.pm-project-status {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;
  padding:3px 8px; border-radius:10px; flex-shrink:0;
}
.pm-project-meta { font-size:12px; color:var(--text-muted); }
.pm-progress-bar {
  background:var(--light-grey); height:6px; border-radius:3px; overflow:hidden;
  border:1px solid var(--border); margin-bottom:6px;
}
.pm-progress-fill { background:var(--primary); height:100%; transition:width 0.3s; }
.pm-progress-meta { font-size:11px; color:var(--text-muted); }
.pm-project-missing {
  font-size:12px; color:#B91C1C; font-weight:600;
  background:#FEF2F2; padding:6px 10px; border-radius:5px;
}
.pm-project-foot { font-size:11px; color:var(--text-muted); margin-top:auto; padding-top:8px; border-top:1px dashed var(--border); }

/* Responsive: stack on mobile */
@media (max-width: 900px) {
  .pm-workspace { grid-template-columns: 1fr; }
  .pm-rail {
    position:relative; min-height:auto; border-right:none;
    border-bottom:1px solid var(--border); padding:16px 0;
  }
  .pm-rail-list { display:flex; flex-wrap:wrap; gap:4px; padding:0 12px; }
  .pm-rail-item { flex:0 0 auto; }
  .pm-rail-item a { padding:6px 10px; border-left:none; border-radius:4px; }
  .pm-rail-item.active a { border-left:none; background:var(--primary); color:var(--white); }
  .pm-main { padding:16px; }
}

/* ─── Phase 2: Project Info, Financial Dashboard, Cost Ledger, PO matching ── */

/* Project Info form */
.pm-info-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:12px; margin-bottom:12px;
}
.pm-info-form textarea, .pm-report-form textarea {
  padding:8px 10px; border:1px solid var(--border); border-radius:5px;
  font-size:13px; font-family:inherit; background:var(--white); resize:vertical;
  width:100%; box-sizing:border-box;
}
.pm-info-form .pm-field-full, .pm-report-form .pm-field-full { margin-top:10px; }

/* Financial Dashboard tables */
.pm-financial-card { }
.pm-finance-table {
  width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums;
}
.pm-finance-table th {
  background:var(--light-grey); padding:8px 12px; text-align:left;
  font-size:10px; text-transform:uppercase; letter-spacing:0.5px;
  color:var(--text-muted); border-bottom:1px solid var(--border);
}
.pm-finance-table th.num, .pm-finance-table td.num { text-align:right; }
.pm-finance-table td {
  padding:6px 12px; border-bottom:1px solid var(--border); vertical-align:middle;
}
.pm-finance-table tr:hover td { background:#FAFCFA; }
.pm-finance-sub td { background:var(--light-grey); padding:9px 12px; font-size:13px; }
.pm-finance-grand td { background:var(--primary-dk); color:var(--white); padding:12px; font-size:14px; }
.pm-finance-grand .pm-pos { color:#86EFAC; }
.pm-finance-grand .pm-neg { color:#FCA5A5; }
.pm-finance-total { padding:0; }
.pm-row-loss td:first-child { box-shadow:inset 3px 0 #DC2626; }

.pm-pos { color:#16A34A; }
.pm-neg { color:#DC2626; }

.pm-finance-desc, .pm-finance-vo-label, .pm-txn-desc, .pm-txn-supplier {
  border:1px solid transparent; background:transparent; padding:4px 6px;
  border-radius:4px; font-size:13px; font-family:inherit; width:100%; box-sizing:border-box;
}
.pm-finance-desc:focus, .pm-finance-vo-label:focus, .pm-txn-desc:focus, .pm-txn-supplier:focus {
  border-color:var(--border); background:var(--white); outline:none;
}
.pm-finance-vo-row { display:flex; gap:6px; align-items:center; }
.pm-finance-vo-label { width:80px; flex-shrink:0; font-weight:600; }

.pm-finance-numform { display:flex; }
.pm-finance-num {
  border:1px solid transparent; background:transparent; padding:4px 6px;
  border-radius:4px; font-size:13px; font-family:inherit; text-align:right;
  width:100%; box-sizing:border-box; font-variant-numeric:tabular-nums;
}
.pm-finance-num:focus { border-color:var(--border); background:var(--white); outline:none; }
.pm-finance-readonly {
  font-style:italic; color:var(--primary-dk); cursor:help;
  border-bottom:1px dotted var(--text-muted);
}
.pm-finance-meta { font-size:11px; color:var(--text-muted); margin-top:2px; }
.pm-finance-meta a { color:var(--primary-dk); text-decoration:none; }

.pm-warning-line {
  background:#FFFBEB; border:1px solid #FDE68A; border-radius:6px;
  padding:10px 14px; font-size:12px; color:#78350F; margin-top:10px;
}
.pm-warning-line a { color:var(--primary-dk); font-weight:600; text-decoration:none; }

/* OneDrive root prompt + set state on dashboard */
.pm-onedrive-prompt {
  background:#FFFBEB; border:1px solid #FDE68A; border-radius:8px;
  padding:14px 18px; margin:14px 0;
}
.pm-onedrive-prompt-head { font-size:14px; color:#78350F; margin-bottom:4px; }
.pm-onedrive-prompt-body { font-size:12px; color:#92400E; margin-bottom:10px; }
.pm-onedrive-form { display:flex; gap:8px; align-items:center; }
.pm-onedrive-form input[type="url"] {
  flex:1; padding:8px 10px; border:1px solid var(--border); border-radius:5px;
  font-size:13px; font-family:inherit; background:var(--white);
}
.pm-onedrive-set {
  background:var(--primary-lt); border:1px solid var(--border); border-radius:6px;
  padding:8px 14px; margin:14px 0;
  display:flex; gap:10px; align-items:center; font-size:12px; flex-wrap:wrap;
}
.pm-onedrive-set-icon { font-size:14px; }
.pm-onedrive-set-label { font-weight:600; color:var(--text-muted); text-transform:uppercase; font-size:10px; letter-spacing:0.5px; }
.pm-onedrive-set-link {
  color:var(--primary-dk); text-decoration:none; flex:1; font-family:monospace; font-size:11px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.pm-onedrive-set-link:hover { text-decoration:underline; }
.pm-onedrive-edit summary { cursor:pointer; color:var(--text-muted); font-size:11px; }
.pm-onedrive-edit summary:hover { color:var(--primary-dk); }
.pm-onedrive-edit form { width:100%; display:flex; gap:8px; flex-wrap:wrap; }

/* ── File Explorer (OneDrive-style section layout) ─────────────────────────── */
.pm-file-explorer {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.pm-fe-thead {
  display: grid;
  grid-template-columns: 1fr 120px 160px;
  padding: 8px 14px;
  background: var(--light-grey);
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.pm-fe-th {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted);
}

/* Folder row */
details.pm-fe-folder { border-bottom: 1px solid var(--border); }
details.pm-fe-folder:last-child { border-bottom: none; }
.pm-fe-folder-row {
  display: grid;
  grid-template-columns: 18px 22px 1fr 120px 160px;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.1s;
}
.pm-fe-folder-row:hover { background: var(--light-grey); }
details.pm-fe-folder[open] > .pm-fe-folder-row { background: var(--primary-lt); }
.pm-fe-folder-row::-webkit-details-marker { display: none; }
.pm-fe-folder-chevron {
  font-size: 14px; color: var(--text-muted); font-weight: 700;
  display: inline-block; transition: transform 0.15s;
  line-height: 1;
}
details.pm-fe-folder[open] > .pm-fe-folder-row .pm-fe-folder-chevron {
  transform: rotate(90deg);
}
.pm-fe-folder-icon { font-size: 16px; line-height: 1; }
.pm-fe-folder-name { font-size: 13px; font-weight: 600; color: var(--text); }
a.pm-fe-folder-name-link { text-decoration: none; }
a.pm-fe-folder-name-link:hover { color: var(--primary-dk); text-decoration: underline; }
.pm-fe-folder-name-ext { font-size: 11px; color: var(--text-muted); }
a.pm-fe-folder-name-link:hover .pm-fe-folder-name-ext { color: var(--primary-dk); }

/* Open-folder bar inside an expanded explorer folder */
.pm-fe-folder-openbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 10px 40px; padding: 8px 12px;
  background: var(--primary-lt); border-radius: 6px;
}
a.pm-fe-folder-openlink, button.pm-fe-folder-openlink {
  font-size: 12px; font-weight: 600; color: var(--primary-dk);
  text-decoration: none; background: none; border: none; cursor: pointer;
  padding: 0; font-family: inherit;
}
a.pm-fe-folder-openlink:hover, button.pm-fe-folder-openlink:hover { text-decoration: underline; }
.pm-fe-folder-openhint { font-size: 11px; color: var(--text-muted); }
.pm-fe-folder-emptyhint {
  margin: 4px 0 8px 40px; font-size: 12px; color: var(--text-muted); font-style: italic;
}
.pm-fe-folder-req  { font-size: 12px; color: var(--text-muted); }
.pm-fe-folder-status { font-size: 12px; }
.pm-fe-folder-open { font-size: 12px; }

/* Status badges */
.pm-fe-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.pm-fe-badge-ok    { background: var(--ok-bg);   color: var(--ok-text); }
.pm-fe-badge-warn  { background: var(--warn-bg);  color: var(--warn-text); }
.pm-fe-badge-empty { background: transparent; color: var(--text-muted); }

/* Open in OneDrive button inside explorer */
a.pm-fe-open-btn, button.pm-fe-open-btn {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 5px;
  background: #fff; border: 1px solid var(--border-strong);
  color: var(--primary-dk); font-size: 11px; font-weight: 600;
  text-decoration: none; cursor: pointer; font-family: inherit;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
a.pm-fe-open-btn:hover, button.pm-fe-open-btn:hover {
  background: var(--primary-dk); color: #fff; border-color: var(--primary-dk);
}

/* Folder expanded body */
.pm-fe-folder-body {
  border-top: 1px solid var(--border);
  background: #FAFBFA;
}

/* File rows inside folders */
.pm-fe-file-row {
  display: grid;
  grid-template-columns: 22px 1fr 120px 40px;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 54px; /* indent to align under folder name */
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.pm-fe-file-row:last-of-type { border-bottom: none; }
.pm-fe-file-row:hover { background: #F0F7F3; }
.pm-fe-file-missing { opacity: 0.85; }
.pm-fe-file-ok .pm-fe-file-name { color: var(--text-muted); }
.pm-fe-file-icon { font-size: 14px; line-height: 1; }
.pm-fe-file-name { font-size: 13px; color: var(--text); }
.pm-fe-file-notes { color: var(--text-muted); font-size: 11px; }
.pm-fe-file-req  { font-size: 11px; color: var(--text-soft); }
.pm-fe-file-status { font-size: 12px; }
.pm-fe-file-open { text-align: right; }
a.pm-fe-doc-link { color: var(--primary-dk); font-weight: 600; text-decoration: none; }
a.pm-fe-doc-link:hover { text-decoration: underline; }

/* Add document accordion inside folder */
details.pm-fe-add-wrap { border-top: 1px dashed var(--border); }
.pm-fe-add-trigger {
  display: block; padding: 8px 14px 8px 54px;
  font-size: 12px; font-weight: 600; color: var(--primary);
  cursor: pointer; list-style: none; user-select: none;
}
.pm-fe-add-trigger:hover { background: var(--primary-lt); }
.pm-fe-add-trigger::-webkit-details-marker { display: none; }
.pm-fe-add-form { padding: 12px 14px 14px 54px; background: #fff; }

/* Subfolder quick-link bar — row of chips at top of each section */
.pm-subfolder-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 14px; margin-bottom: 16px;
  background: var(--primary-lt); border: 1px solid var(--border);
  border-radius: 8px;
}
.pm-subfolder-bar-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted); margin-right: 4px;
  flex-shrink: 0;
}
a.pm-subfolder-chip, button.pm-subfolder-chip {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border-strong);
  color: var(--primary-dk); font-size: 12px; font-weight: 600;
  text-decoration: none; cursor: pointer; font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
a.pm-subfolder-chip:hover, button.pm-subfolder-chip:hover {
  background: var(--primary-dk); color: #fff; border-color: var(--primary-dk);
}

/* Per-section OneDrive link editor — paste a folder's own share link so the
   "Open in OneDrive" button deep-links it (share-token URLs can't be path-built). */
.pm-folderlink-wrap {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.pm-folderlink-bar {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 280px;
  padding: 8px 12px; background: var(--white);
  border: 1px solid var(--border); border-radius: 8px;
}
.pm-folderlink-ic { font-size: 14px; flex-shrink: 0; }
.pm-folderlink-input {
  flex: 1; min-width: 140px; font: inherit; font-size: 13px;
  padding: 6px 10px; border: 1px solid var(--border-strong);
  border-radius: 6px; color: var(--text);
}
.pm-folderlink-hint { font-size: 11px; white-space: nowrap; }
.pm-folderlink-hint.is-set   { color: #16A34A; font-weight: 600; }
.pm-folderlink-hint.is-unset { color: var(--text-muted); font-style: italic; }
.pm-folderlink-clear-btn {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--text-muted); background: var(--white);
  border: 1px solid var(--border); border-radius: 6px; padding: 7px 12px;
}
.pm-folderlink-clear-btn:hover { color: #B91C1C; border-color: #FCA5A5; background: #FEF2F2; }

/* "Open in OneDrive" buttons / folder bars */
.pm-od-btn { white-space:nowrap; }
.pm-od-folder-bar {
  display:flex; gap:14px; align-items:center; padding:8px 12px; margin-bottom:12px;
  background:#F0F9FF; border:1px dashed #BAE6FD; border-radius:6px; font-size:12px;
  flex-wrap:wrap;
}
.pm-od-folder-link {
  color:var(--primary-dk); text-decoration:none; font-weight:600; flex-shrink:0;
}
.pm-od-folder-link:hover { text-decoration:underline; }
.pm-od-folder-hint { color:var(--text-muted); font-style:italic; flex:1; min-width:0; }

/* Inline "Mark Received" button on checklist items */
.pm-checklist-mark-btn {
  margin-left:auto; background:var(--white); border:1px solid var(--primary);
  color:var(--primary-dk); padding:3px 10px; border-radius:12px; cursor:pointer;
  font-size:10px; font-weight:600; font-family:inherit;
}
.pm-checklist-mark-btn:hover { background:var(--primary-lt); }

/* "Copy folder path" — local-path mode button (used as <button>, not <a>) */
button.pm-copy-path,
button.pm-od-folder-link {
  background:var(--white); border:1px solid var(--primary);
  color:var(--primary-dk); cursor:pointer; font-family:inherit;
  font-weight:600;
}
button.pm-copy-path { padding:6px 14px; border-radius:5px; font-size:13px; }
button.pm-od-folder-link { padding:4px 10px; border-radius:5px; font-size:12px; }
button.pm-copy-path:hover,
button.pm-od-folder-link:hover { background:var(--primary-lt); }
button.pm-copy-path-done,
.pm-copy-path-done { background:#DCFCE7 !important; color:#166534 !important; border-color:#86EFAC !important; }

/* Pre-filled URL hint */
.pm-od-prefilled-hint {
  font-size:9px; color:var(--primary-dk); text-transform:none; letter-spacing:0;
  font-weight:500; font-style:italic; margin-left:4px;
}

/* Convert-to-Project popover form on opportunity page */
.opp-convert-form {
  position:absolute; top:100%; right:0; margin-top:6px; z-index:100;
  background:var(--white); border:1px solid var(--border); border-radius:6px;
  padding:14px; box-shadow:0 4px 14px rgba(0,0,0,0.08);
  width:360px;
}

/* CRM cross-link block in PM Account section */
.pm-crm-link-block {
  background:var(--primary-lt); border:1px solid var(--border); border-radius:6px;
  padding:12px 14px; margin-bottom:14px;
}
.pm-crm-link-head {
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--primary-dk);
}

/* CRM Contract Value benchmark line on the financial dashboard */
.pm-benchmark-line {
  background:var(--light-grey); border:1px solid var(--border); border-radius:6px;
  padding:10px 14px; font-size:12px; margin-top:10px;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.pm-benchmark-label { font-size:10px; text-transform:uppercase; letter-spacing:0.5px; font-weight:700; color:var(--text-muted); }
.pm-benchmark-value { font-weight:700; color:var(--primary-dk); font-size:13px; }
.pm-benchmark-vs    { color:var(--text-muted); font-size:11px; }
.pm-benchmark-variance { font-weight:700; padding:2px 8px; border-radius:10px; background:var(--white); border:1px solid var(--border); }
.pm-benchmark-match    { font-weight:600; color:#16A34A; }
.pm-benchmark-link     { margin-left:auto; color:var(--primary-dk); font-weight:600; text-decoration:none; }

/* Cost Ledger */
.pm-import-form { display:flex; gap:10px; align-items:center; }
.pm-import-form input[type="file"] { font-size:13px; }
.pm-txn-date { width:130px; padding:4px 6px; border:1px solid transparent; background:transparent; border-radius:4px; font-size:12px; }
.pm-txn-date:focus { border-color:var(--border); background:var(--white); outline:none; }
.pm-txn-alloc { padding:4px 6px; font-size:12px; max-width:200px; }

/* PO ↔ Invoice matching */
.pm-supplier-group { margin-bottom:14px; }
.pm-supplier-head {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 14px; background:var(--light-grey); border-radius:5px 5px 0 0;
  border:1px solid var(--border); border-bottom:none; font-size:13px;
}
.pm-supplier-totals { font-size:12px; color:var(--text-muted); }

.pm-match-card {
  border:1px solid var(--border); border-radius:6px; margin-bottom:8px;
  background:var(--white);
}
.pm-match-card[open] { box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.pm-match-card summary {
  cursor:pointer; padding:10px 14px;
  display:flex; gap:12px; align-items:center; font-size:13px;
}
.pm-match-poref {
  font-weight:700; color:var(--primary-dk); flex-shrink:0;
  font-family:monospace; font-size:12px;
}
.pm-match-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-match-meta { font-size:11px; color:var(--text-muted); flex-shrink:0; }
.pm-match-status {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;
  padding:3px 8px; border-radius:10px; flex-shrink:0;
}
.pm-match-status-match   { background:#DCFCE7; color:#166534; }
.pm-match-status-over    { background:#FEE2E2; color:#991B1B; }
.pm-match-status-under   { background:#FEF3C7; color:#92400E; }
.pm-match-status-pending { background:var(--light-grey); color:var(--text-muted); }
.pm-match-ok      summary { border-left:3px solid #16A34A; }
.pm-match-over    summary { border-left:3px solid #DC2626; }
.pm-match-under   summary { border-left:3px solid #D97706; }
.pm-match-pending summary { border-left:3px solid var(--border); }
.pm-match-body { padding:0 14px 14px; }
.pm-match-expected-form {
  display:flex; gap:8px; align-items:flex-end; padding:6px 0;
}
.pm-match-expected-form label { font-size:11px; color:var(--sage); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }
.pm-match-expected-form input { padding:6px 10px; border:1px solid var(--border); border-radius:4px; font-size:13px; }

/* Subcontractor roster form */
.pm-roster-form {
  background:var(--light-grey); padding:12px 14px; border-radius:6px;
  margin-bottom:12px; border:1px solid var(--border);
}

/* Progress Report cards */
.pm-report-card {
  background:var(--white); border:1px solid var(--border); border-radius:6px;
  margin-bottom:8px; padding:0;
}
.pm-report-card[open] { box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.pm-report-card summary {
  cursor:pointer; padding:12px 14px; display:flex; gap:10px; align-items:center;
  font-size:13px; flex-wrap:wrap;
}
.pm-report-by { color:var(--text-muted); font-size:12px; }
.pm-report-summary { color:var(--text); flex:1; min-width:0; font-style:italic; }
.pm-report-form { padding:0 14px 14px; }
.pm-report-add { background:var(--primary-lt); border-color:var(--border); }
.pm-report-add summary { color:var(--primary-dk); font-weight:600; }

/* Milestones table */
.pm-milestone-table input[type="date"] { max-width:130px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ════════════════════ 2026 MODERN UI POLISH PASS ═════════════════════════
   Comprehensive refinement layer — overrides specific patterns to feel
   sleek, modern, and acceptable for a professional customer in 2026.
   Keeps existing class names so HTML doesn't change.
═══════════════════════════════════════════════════════════════════════════ */

/* ─── Typography ───────────────────────────────────────────────────────── */

/* Brand serif kept only for the topbar wordmark and title slides — not for
   in-app section headers (which now use Inter for cleaner readability). */

main, main.crm-main { padding-top: 32px; padding-bottom: 56px; max-width: 1240px; }

h1, h2, h3, h4 { letter-spacing: -0.018em; font-weight: 600; color: var(--text); }
h1 { font-weight: 700; }

/* Page header — replace serif + underline with a cleaner sans treatment */
.page-header h1 {
  font-family: "InterVariable", "Inter", -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.022em;
  color: var(--text);
  border-bottom: none;
  padding-bottom: 0;
}
.hub-intro h1 {
  font-family: "InterVariable", "Inter", -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.024em;
  color: var(--text);
  border-bottom: none;
  padding-bottom: 0;
}

/* ─── Topbar refinements ──────────────────────────────────────────────── */
header.topbar { border-bottom: 1px solid rgba(255,255,255,0.08); padding: 14px 32px; }
.brand-name { letter-spacing: 0.5px; font-size: 18px; }
.brand-tagline { letter-spacing: 0.4px; }

/* ─── CRM secondary nav refinements ───────────────────────────────────── */
.crm-nav { padding: 0 32px; backdrop-filter: saturate(180%); }
.crm-nav-inner { max-width: 1240px; height: 52px; }
.crm-nav-link {
  font-size: 13.5px; font-weight: 500;
  border-bottom-width: 2px; transition: color 0.15s, border-color 0.15s;
}
.crm-nav-link.active { font-weight: 600; }
.crm-nav-link.nav-new {
  background: var(--text); height: 34px; padding: 0 16px;
  border-radius: var(--radius-md); font-weight: 500; font-size: 13px;
  letter-spacing: -0.005em;
}
.crm-nav-link.nav-new:hover { background: var(--primary-dk); }

/* ─── Section cards ──────────────────────────────────────────────────── */
.section-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow 0.2s var(--ease-out);
}
.section-card-header {
  padding: 16px 22px !important;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.section-card-header h2 {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  color: var(--text) !important;
  margin: 0;
}
.section-card-body { padding: 20px 22px !important; }

/* ─── Stat cards (CRM dashboard) — modern white style ────────────────── */
.stats-grid { gap: 14px; }
.stat-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-top: 1px solid var(--border);
  padding: 18px 20px 20px;
  background: var(--white);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}
.stat-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--primary);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.stat-card.urgent::before  { background: #EF4444; }
.stat-card.ireland::before { background: #1A6B3C; }
.stat-card.uk::before      { background: #2563EB; }
.stat-card-link:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-value {
  font-family: "InterVariable", "Inter", sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.025em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-value.urgent { color: #DC2626; }
.stat-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-soft); font-weight: 500; margin-top: 6px;
}

/* ─── PM workspace KPIs — modern white style ─────────────────────────── */
.pm-kpi {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px 20px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s var(--ease-out);
}
.pm-kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--primary);
}
.pm-kpi-warn::before { background: #F59E0B; }
.pm-kpi-ok::before   { background: #10B981; }
.pm-kpi:hover { box-shadow: var(--shadow-sm); }
.pm-kpi-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-soft); font-weight: 500; margin-bottom: 10px;
}
.pm-kpi-value {
  font-family: "InterVariable", "Inter", sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pm-kpi-warn .pm-kpi-value { color: #B45309; }
.pm-kpi-ok .pm-kpi-value   { color: #047857; }
.pm-kpi-sub { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* ─── PM workspace left rail ─────────────────────────────────────────── */
.pm-rail { padding: 28px 0 24px; background: var(--white); border-right: 1px solid var(--border); }
.pm-rail-header { padding: 0 22px 22px; }
.pm-rail-title { font-size: 17px; letter-spacing: -0.018em; font-weight: 700; }
.pm-rail-back { font-weight: 500; transition: color 0.15s; }
.pm-rail-pct-bar { background: var(--light-grey); border: none; height: 6px; border-radius: var(--radius-pill); overflow: hidden; }
.pm-rail-pct-fill { background: var(--primary); border-radius: var(--radius-pill); }
.pm-rail-list li { list-style: none; }
.pm-rail-item a {
  padding: 8px 22px; font-size: 13px; font-weight: 500; gap: 10px;
  margin: 1px 8px; border-left: none; border-radius: var(--radius-sm);
  position: relative;
}
.pm-rail-item a:hover { background: var(--primary-lt); color: var(--primary-dk); }
.pm-rail-item.active a {
  background: var(--primary-lt); color: var(--primary-dk); font-weight: 600;
  border-left: none;
}
.pm-rail-item.active a::before {
  content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px;
  background: var(--primary); border-radius: 0 2px 2px 0;
}
.pm-rail-num { color: var(--text-soft); font-size: 10.5px; font-family: "InterVariable", monospace; font-feature-settings: "tnum"; }
.pm-rail-missing {
  background: var(--err-bg); color: var(--err-text); border: 1px solid var(--err-border);
  font-size: 9.5px; padding: 1px 6px; border-radius: var(--radius-pill); font-weight: 700;
}

/* ─── Section heading area (workspace) ───────────────────────────────── */
.pm-section-head { gap: 24px; margin-bottom: 24px; }
.pm-section-crumb {
  font-size: 11px; letter-spacing: 0.7px; color: var(--text-soft); font-weight: 600;
  text-transform: uppercase;
}
.pm-section-title {
  font-family: "InterVariable", "Inter", sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.024em;
  color: var(--text) !important;
  line-height: 1.15;
}
.pm-section-sub { font-size: 13px; color: var(--text-muted); margin-top: 8px; }

/* ─── Buttons — modern, consistent, accessible ───────────────────────── */
.btn-sm, button.btn-sm, a.btn-sm {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.btn-sm:focus-visible { outline: none; box-shadow: var(--ring-primary); }
.btn-primary {
  background: var(--text);
  color: var(--white);
  border-color: var(--text);
}
.btn-primary:hover { background: #000; border-color: #000; }
.btn-secondary {
  background: var(--white);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--light-grey); border-color: var(--text-soft); }
.btn-handover {
  background: var(--gold); color: #5C3D00; border-color: var(--gold);
}
.btn-handover:hover { background: #C29A3D; border-color: #C29A3D; }
.btn-danger { background: var(--err-bg); color: var(--err-text); border-color: var(--err-border); }
.btn-danger:hover { background: #FECACA; }

/* Big buttons (login, hub tiles) */
.btn-open {
  background: var(--text);
  border-radius: var(--radius-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  font-size: 14px;
  padding: 11px 22px;
}
.btn-open:hover { background: #000; }

/* ─── Inputs — modern focus rings ────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="url"], input[type="search"], input[type="password"],
select, textarea {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-feature-settings: "tnum";
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring-primary);
}
input::placeholder, textarea::placeholder { color: var(--text-soft); }

/* In-table editable inputs — invisible until hovered/focused */
.pm-finance-table input.pm-finance-num,
.pm-finance-table input.pm-finance-desc,
.pm-finance-table input.pm-finance-vo-label,
.pm-doc-table input.pm-txn-date,
.pm-doc-table input.pm-txn-supplier,
.pm-doc-table input.pm-txn-desc,
.pm-doc-table input.pm-finance-num {
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 8px;
  font-size: 13px;
  border-radius: var(--radius-xs);
  box-shadow: none;
  transition: background 0.12s, border-color 0.12s;
}
.pm-finance-table tbody tr:hover input.pm-finance-num,
.pm-finance-table tbody tr:hover input.pm-finance-desc,
.pm-finance-table tbody tr:hover input.pm-finance-vo-label,
.pm-doc-table tbody tr:hover input.pm-txn-date,
.pm-doc-table tbody tr:hover input.pm-txn-supplier,
.pm-doc-table tbody tr:hover input.pm-txn-desc,
.pm-doc-table tbody tr:hover input.pm-finance-num {
  background: rgba(255,255,255,0.7);
  border-color: var(--border);
}
.pm-finance-table input:focus,
.pm-doc-table input:focus,
.pm-doc-table select:focus {
  background: var(--white) !important;
  border-color: var(--primary) !important;
  box-shadow: var(--ring-primary) !important;
}

/* Inline form selects (status dropdowns etc.) inside tables — minimal */
.pm-doc-table select, .pm-finance-table select {
  border: 1px solid transparent;
  background: transparent;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: var(--radius-xs);
}
.pm-doc-table tbody tr:hover select, .pm-finance-table tbody tr:hover select {
  border-color: var(--border); background: var(--white);
}

/* ─── Tables — refined spacing and hover ─────────────────────────────── */
.crm-table th, .pm-doc-table th, .pm-finance-table th, .pm-section-grid th {
  background: var(--light-grey);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-soft);
  font-weight: 600;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
}
.crm-table td, .pm-section-grid td { padding: 13px 16px; border-bottom: 1px solid var(--border); }
.pm-doc-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); }
.crm-table tbody tr:hover td { background: var(--primary-lt); }
.crm-table .client-link { font-weight: 600; color: var(--text); }
.crm-table .client-link:hover { color: var(--primary-dk); text-decoration: none; }
.pm-finance-table tr:hover td { background: var(--primary-lt); }
.pm-finance-table td { padding: 9px 14px; }
.pm-finance-sub td { background: var(--light-grey); font-weight: 600; padding: 11px 14px; }
.pm-finance-grand td {
  background: var(--text); color: var(--white); padding: 14px;
  font-size: 14.5px; letter-spacing: -0.01em;
}

/* ─── Status pills — modern dot+text style ───────────────────────────── */
.pm-status-pill, .stage-badge, .region-badge, .ps-badge, .payment-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  background: var(--light-grey);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.pm-status-pill::before, .stage-badge::before, .region-badge::before, .ps-badge::before, .payment-status-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.85;
}
.pm-status-complete   { background: var(--ok-bg);   color: var(--ok-text);   border-color: var(--ok-border); }
.pm-status-in-progress{ background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.pm-status-not-started{ background: var(--light-grey); color: var(--text-muted); }
.pm-status-active     { background: var(--primary-lt); color: var(--primary-dk); border-color: var(--border); }
.pm-status-on-hold    { background: var(--warn-bg);  color: var(--warn-text);  border-color: var(--warn-border); }
.pm-status-cancelled  { background: var(--err-bg);   color: var(--err-text);   border-color: var(--err-border); }

/* Pipeline stages — readable subtle colour-coding */
.stage-badge {
  background: var(--primary-lt); color: var(--primary-dk); border-color: var(--border);
}
.stage-enquiry, .stage-desktop, .stage-initialbudget, .stage-sitesurvey, .stage-livebudget {
  background: var(--info-bg); color: var(--info-text); border-color: var(--info-border);
}
.stage-hoa, .stage-prestart {
  background: #EDE9FE; color: #6D28D9; border-color: #DDD6FE;
}
.stage-subcontractor, .stage-orders, .stage-scheduling {
  background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border);
}
.stage-drafting, .stage-clientapproval, .stage-construction {
  background: #DBEAFE; color: #1E3A8A; border-color: #BFDBFE;
}
.stage-hsdoc, .stage-induction, .stage-onsite {
  background: #CCFBF1; color: #115E59; border-color: #99F6E4;
}
.stage-complete { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }
.stage-lost     { background: var(--err-bg); color: var(--err-text); border-color: var(--err-border); }

/* Region badges */
.region-ireland, .region-uk { font-weight: 500; }
.region-ireland { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }
.region-uk      { background: var(--info-bg); color: var(--info-text); border-color: var(--info-border); }

/* Payment status */
.pm-scheduled { background: var(--light-grey); color: var(--text-muted); }
.pm-invoiced  { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.pm-received  { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }
.pm-overdue   { background: var(--err-bg); color: var(--err-text); border-color: var(--err-border); }

/* Project status badges */
.ps-identified { background: var(--info-bg); color: var(--info-text); border-color: var(--info-border); }
.ps-booked     { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.ps-live       { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }
.ps-completed  { background: var(--primary-lt); color: var(--primary-dk); }
.ps-lost       { background: var(--err-bg); color: var(--err-text); border-color: var(--err-border); }

/* ─── Empty states ───────────────────────────────────────────────────── */
.pm-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13.5px;
  font-style: normal;
  background: var(--light-grey);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-strong);
}
.pm-empty::before {
  content: "";
  display: block;
  width: 36px; height: 36px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--white);
  border: 2px dashed var(--border-strong);
}

/* ─── Opportunity header refinements ─────────────────────────────────── */
.opp-header {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-xs);
}
.opp-title { gap: 14px; flex-wrap: wrap; }
.opp-title h1 {
  font-family: "InterVariable", "Inter", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--text);
}
.opp-meta { gap: 6px 14px; margin-top: 12px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.opp-meta-item strong { color: var(--text); font-weight: 600; }
.opp-actions { gap: 8px; margin-top: 18px; flex-wrap: wrap; align-items: center; }

/* ─── Detail grid ────────────────────────────────────────────────────── */
.detail-grid { gap: 18px; margin-bottom: 24px; }
.detail-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-xs);
}
.detail-box h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-soft);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.detail-row {
  display: flex; gap: 12px;
  padding: 9px 0;
  font-size: 13.5px;
  border-bottom: none;
  align-items: baseline;
}
.detail-row + .detail-row { border-top: 1px solid var(--light-grey); }
.detail-label { color: var(--text-muted); font-weight: 500; flex-shrink: 0; min-width: 130px; font-size: 12.5px; }
.detail-value { color: var(--text); font-weight: 500; }

/* ─── Activity log refinements ───────────────────────────────────────── */
.activity-log { display: flex; flex-direction: column; gap: 0; }
.activity-item { display: flex; gap: 14px; padding: 14px 0; align-items: flex-start; border-bottom: 1px solid var(--light-grey); }
.activity-item:last-child { border-bottom: none; }
.activity-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
  background: var(--primary-lt);
  color: var(--primary-dk);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--border);
}
.activity-dot.stage { background: var(--info-bg); color: var(--info-text); }
.activity-dot.note  { background: var(--primary-lt); color: var(--primary-dk); }
.activity-dot.call  { background: var(--warn-bg); color: var(--warn-text); }
.activity-dot.email { background: #EDE9FE; color: #6D28D9; }
.activity-content { font-size: 13.5px; color: var(--text); line-height: 1.55; }
.activity-meta { font-size: 11.5px; color: var(--text-soft); margin-top: 4px; letter-spacing: 0; }

/* ─── Project cards (Projects index) ─────────────────────────────────── */
.pm-project-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px 18px;
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s var(--ease-out), transform 0.15s var(--ease-out), border-color 0.15s;
}
.pm-project-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary);
}
.pm-project-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--border-strong); }
.pm-project-name {
  font-family: "InterVariable", "Inter", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.012em;
  color: var(--text);
}
.pm-project-meta { font-size: 12.5px; color: var(--text-muted); }
.pm-progress-bar { background: var(--light-grey); height: 6px; border-radius: var(--radius-pill); border: none; }
.pm-progress-fill { background: var(--primary); border-radius: var(--radius-pill); }

/* ─── Doc tables (PM workspace) ──────────────────────────────────────── */
.pm-doc-table tbody tr { transition: background 0.15s; }
.pm-doc-table tbody tr:hover { background: var(--primary-lt); }
.pm-doc-label { font-weight: 600; }
.pm-doc-link {
  color: var(--primary-dk); font-weight: 500; font-size: 12.5px;
  text-decoration: none; padding: 2px 6px; border-radius: var(--radius-xs);
}
.pm-doc-link:hover { background: var(--primary-lt); }

/* ─── Checklist — modern look ────────────────────────────────────────── */
.pm-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px 14px;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.pm-checklist-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.pm-checklist-item.is-missing { background: transparent; }
.pm-checklist-item.is-received { background: var(--ok-bg); }
.pm-check-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  border-radius: 50%;
}
.pm-checklist-item.is-received .pm-check-icon {
  background: #16A34A; color: var(--white);
}
.pm-checklist-item.is-missing .pm-check-icon {
  background: var(--white); color: var(--text-soft); border: 1.5px solid var(--border-strong);
}
.pm-checklist-item.is-received .pm-check-label { color: var(--ok-text); text-decoration: none; font-weight: 500; }
.pm-checklist-item.is-missing .pm-check-label { color: var(--text); }
.pm-check-status { display: none; }  /* Replaced by visual icon state */
.pm-checklist-mark-btn {
  background: var(--white); border: 1px solid var(--border-strong); color: var(--text);
  padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.pm-checklist-mark-btn:hover {
  background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border);
}

/* ─── Missing-doc banner ─────────────────────────────────────────────── */
.pm-missing-banner {
  background: linear-gradient(180deg, #FFFBF5 0%, #FFF7ED 100%);
  border: 1px solid #FED7AA; border-radius: var(--radius-md);
  padding: 16px 20px; box-shadow: var(--shadow-xs);
}
.pm-missing-head { font-weight: 600; color: #9A3412; font-size: 14px; margin-bottom: 8px; }
.pm-missing-banner ul { margin: 0; padding-left: 22px; font-size: 13px; line-height: 1.7; }
.pm-missing-banner a { color: var(--primary-dk); font-weight: 500; }

/* ─── Section status grid (dashboard) ────────────────────────────────── */
.pm-section-grid tbody tr:hover td { background: var(--primary-lt); }
.pm-section-grid .pm-grid-name a { color: var(--text); font-weight: 600; }
.pm-section-grid .pm-grid-name a:hover { color: var(--primary-dk); text-decoration: none; }
.pm-section-grid .pm-grid-num {
  font-family: "InterVariable", monospace; font-feature-settings: "tnum";
  color: var(--text-soft); font-weight: 600; font-size: 11.5px;
}

/* ─── Add-doc form refinement ────────────────────────────────────────── */
.pm-add-doc-form { padding-top: 16px; border-top: 1px solid var(--border); }
.pm-field label {
  font-size: 10.5px; color: var(--text-soft); text-transform: uppercase;
  letter-spacing: 0.6px; font-weight: 600;
}

/* ─── PM workspace overall ───────────────────────────────────────────── */
.pm-workspace { max-width: 1440px; }
.pm-main { padding: 28px 36px 56px; }

/* ─── Hub home tools grid ────────────────────────────────────────────── */
.tool-card {
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-xs);
  position: relative; overflow: hidden;
}
.tool-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary);
}
.tool-card--soon::before { background: var(--border); }
.tool-card:hover:not(.tool-card--soon) { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tool-name {
  font-family: "InterVariable", "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: -0.012em;
  color: var(--text) !important;
}
.tool-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--primary-lt); color: var(--primary-dk);
}

/* ─── Footer refinements ─────────────────────────────────────────────── */
footer.site-footer {
  padding: 16px 32px;
  font-size: 11.5px;
  color: var(--text-soft);
  letter-spacing: 0;
}

/* ─── Misc utilities and overrides ───────────────────────────────────── */
.text-muted { color: var(--text-muted); }

/* Tabular numbers everywhere a number is shown */
.stat-value, .pm-kpi-value, .pm-finance-num, .pm-finance-readonly,
td.num, .pm-rail-pct span, .pm-progress-meta strong {
  font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Scrollbar polish (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-pill); border: 2px solid var(--light-grey); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ════════════════════════════════════════════════════════════════════════
   ════════════════════════ PASS A — QUICK WINS ════════════════════════
═══════════════════════════════════════════════════════════════════════════ */

/* ─── Sticky table headers ──────────────────────────────────────────── */
/* Long tables (Opportunities list, cost ledger, activity log etc.) keep
   their column headers visible on scroll. Use position:sticky on <th>. */
.crm-table thead th,
.pm-doc-table thead th,
.pm-finance-table thead th,
.pm-section-grid thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--light-grey);
  /* Ensure the bottom border doesn't get clipped */
  box-shadow: inset 0 -1px 0 var(--border);
  border-bottom: none;
}

/* ─── Pulsing red dot for TODAY / overdue deadlines ─────────────────── */
@keyframes pulse-urgent {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.55; }
}
.deadline-urgent::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #DC2626;
  margin-right: 7px;
  vertical-align: middle;
  animation: pulse-urgent 1.4s var(--ease-out) infinite;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5);
}
.deadline-soon::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #F59E0B;
  margin-right: 7px;
  vertical-align: middle;
}
/* The pulse should NOT show inside text-only contexts where the dot
   would be confusing (e.g. inside detail-row labels). Override
   selectively if needed in views. */

/* ─── Hover lift on primary CTAs ────────────────────────────────────── */
.btn-primary, .crm-nav-link.nav-new {
  transition: background 0.15s, border-color 0.15s, box-shadow 0.2s var(--ease-out), transform 0.15s var(--ease-out), color 0.15s;
}
.btn-primary:hover {
  background: #000;
  border-color: #000;
  box-shadow: 0 4px 12px rgba(15, 31, 24, 0.18), 0 2px 4px rgba(15, 31, 24, 0.10);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

/* ─── Real-time search input chrome ─────────────────────────────────── */
.crm-search-live {
  position: relative;
}
.crm-search-live input[type="search"],
.crm-search-live input[type="text"] {
  padding-left: 32px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C7265' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line></svg>");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 14px 14px;
}
.crm-search-live[data-empty="true"]::after {
  content: "No matches";
  position: absolute;
  right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--text-soft);
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════
   ════════════════════════ PASS B — APP SIDEBAR ════════════════════════
   240px dark-slate sidebar with SVG icons + collapsible icon-only mode
   for PM workspace pages. Replaces the top horizontal nav across all CRM
   pages (top-bar wordmark + crm-nav are deprecated; CSS hides them on
   pages that use the new shell).
═══════════════════════════════════════════════════════════════════════════ */

/* When .app-sidebar is present, lay out body as grid. */
body:has(.app-sidebar) {
  display: grid;
  grid-template-columns: 240px 1fr;
  align-items: stretch;
  min-height: 100vh;
  background: var(--light-grey);
}
body:has(.app-sidebar) > header.topbar,
body:has(.app-sidebar) > nav.crm-nav { display: none; }
body:has(.app-sidebar) > footer.site-footer { display: none; }

body:has(.app-sidebar[data-mode="icons"]) {
  grid-template-columns: 64px 1fr;
}

/* Sidebar */
.app-sidebar {
  background: #0F2E1B;
  color: rgba(255,255,255,0.86);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid #0A2113;
  z-index: 30;
  transition: width 0.2s var(--ease-out);
}
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border: none; border-radius: 3px; }

/* Brand block at top */
.app-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-decoration: none;
  color: var(--white);
  flex-shrink: 0;
  transition: background 0.15s;
}
.app-sidebar-brand:hover { background: rgba(255,255,255,0.04); }
.app-sidebar-logo {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.app-sidebar-logo img { width: 100%; height: 100%; object-fit: cover; }
.app-sidebar-logo-fallback { font-family: Georgia, serif; font-weight: bold; font-size: 13px; color: #0F2E1B; }
.app-sidebar-brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-sidebar-brand-name {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-sidebar-brand-tagline {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Nav items */
.app-sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  gap: 2px;
}
.app-sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: rgba(255,255,255,0.72);
  font-size: 13.5px;
  font-weight: 500;
  position: relative;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
}
.app-sidebar-link:hover { background: rgba(255,255,255,0.05); color: var(--white); }
.app-sidebar-link.is-active {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  font-weight: 600;
}
.app-sidebar-link.is-active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 6px; bottom: 6px;
  width: 3px;
  background: var(--gold);
  border-radius: 0 2px 2px 0;
}
.app-sidebar-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
}
.app-sidebar-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Footer area in sidebar */
.app-sidebar-foot {
  padding: 12px 10px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 2px;
  flex-shrink: 0;
}
.app-sidebar-link--ghost { color: rgba(255,255,255,0.5); font-size: 12.5px; padding: 7px 12px; }
.app-sidebar-link--ghost:hover { color: rgba(255,255,255,0.85); }

/* Mobile/desktop toggles (hidden by default; visible on specific breakpoints) */
.app-sidebar-toggle, .app-header-mobile-toggle { display: none; }

/* ─── Icon-only mode (PM workspace) ─────────────────────────────────── */
.app-sidebar[data-mode="icons"] { width: 64px; }
.app-sidebar[data-mode="icons"] .app-sidebar-brand { padding: 18px 0; justify-content: center; }
.app-sidebar[data-mode="icons"] .app-sidebar-brand-text { display: none; }
.app-sidebar[data-mode="icons"] .app-sidebar-nav { padding: 12px 8px; }
.app-sidebar[data-mode="icons"] .app-sidebar-link { padding: 11px; justify-content: center; }
.app-sidebar[data-mode="icons"] .app-sidebar-label { display: none; }
.app-sidebar[data-mode="icons"] .app-sidebar-foot { padding: 12px 8px 16px; }
.app-sidebar[data-mode="icons"] .app-sidebar-link.is-active::before { left: -8px; }

/* Tooltips for icon-only mode (CSS-only via data-tip) */
.app-sidebar[data-mode="icons"] .app-sidebar-link[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%; transform: translateY(-50%);
  background: var(--text);
  color: var(--white);
  padding: 5px 10px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  box-shadow: var(--shadow-md);
  z-index: 50;
}
.app-sidebar[data-mode="icons"] .app-sidebar-link[data-tip]:hover::after { opacity: 1; }

/* ─── Main content area (right of sidebar) ──────────────────────────── */
.app-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  background: var(--light-grey);
}

/* Slim app header — sits at top of content */
.app-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
  flex-shrink: 0;
}
.app-header-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
}
.app-header-title--muted { color: var(--text-soft); }
.app-header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* Footer in app shell — fixes flush to bottom of content */
.app-footer.site-footer { border-top: 1px solid var(--border); padding: 14px 28px; }

/* Override existing main padding when inside the new shell */
body:has(.app-sidebar) main.crm-main {
  padding: 32px 36px 56px;
  max-width: 1240px;
}
body:has(.app-sidebar) main {
  padding: 32px 36px 56px;
  max-width: 1240px;
}

/* PM workspace special — body has BOTH .app-sidebar AND .pm-workspace */
/* The PM workspace section rail (.pm-rail) sits inside .pm-workspace which
   sits inside .app-main. Layout: 64px global sidebar + 240px section rail
   + content. Total left chrome = 304px, leaving plenty of canvas. */
body:has(.app-sidebar[data-mode="icons"]) .pm-workspace { max-width: none; }

/* ─── Mobile: sidebar collapses behind a hamburger ──────────────────── */
@media (max-width: 900px) {
  body:has(.app-sidebar) {
    grid-template-columns: 1fr;
  }
  .app-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 240px;
    transform: translateX(-100%);
    transition: transform 0.25s var(--ease-out);
    box-shadow: var(--shadow-lg);
  }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  body.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 25;
  }
  .app-sidebar[data-mode="icons"] { width: 240px; } /* on mobile always full */
  .app-sidebar[data-mode="icons"] .app-sidebar-brand-text,
  .app-sidebar[data-mode="icons"] .app-sidebar-label { display: flex; }
  .app-sidebar[data-mode="icons"] .app-sidebar-brand { padding: 18px 20px; justify-content: flex-start; }
  .app-sidebar[data-mode="icons"] .app-sidebar-link { padding: 9px 12px; justify-content: flex-start; }
  .app-header-mobile-toggle {
    display: inline-flex;
    align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text);
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .app-header-mobile-toggle:hover { background: var(--light-grey); }
  body:has(.app-sidebar) main.crm-main, body:has(.app-sidebar) main { padding: 20px 18px 40px; }
}

/* ════════════════════════════════════════════════════════════════════════
   ════════════════════ CASHFLOW FORECASTER ═══════════════════════════════
═══════════════════════════════════════════════════════════════════════════ */

/* Granularity toggle pills (Daily / Weekly / Monthly / Quarterly) */
.cf-toggle {
  display: inline-flex;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 2px;
  box-shadow: var(--shadow-xs);
}
.cf-toggle-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 0.15s, color 0.15s;
  min-width: 84px;
}
.cf-toggle-btn:hover { background: var(--light-grey); color: var(--text); }
.cf-toggle-btn.is-active {
  background: var(--text); color: var(--white); font-weight: 600;
}
.cf-toggle-btn.is-active .cf-toggle-sub { color: rgba(255,255,255,0.65); }
.cf-toggle-label { font-size: 13px; }
.cf-toggle-sub { font-size: 10.5px; color: var(--text-soft); letter-spacing: 0.2px; }

/* Headline stat cards (next 30/90/365) */
.cf-headline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.cf-headline-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px 16px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.cf-headline-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--primary);
}
.cf-headline-card--alert::before { background: #DC2626; }
.cf-headline-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-soft); font-weight: 600; margin-bottom: 12px;
}
.cf-headline-amounts {
  display: flex; flex-direction: column; gap: 4px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.cf-amount {
  font-family: "InterVariable", "Inter", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.022em;
  line-height: 1.1;
}
.cf-amount-irl { color: #166534; }
.cf-amount-uk  { color: #1E40AF; }
.cf-amount-overdue { color: #DC2626; }
.cf-amount-zero { color: var(--text-soft); font-size: 22px; font-weight: 700; }
.cf-headline-meta { font-size: 12px; color: var(--text-muted); }

/* Hero chart */
.cf-chart-card { margin-top: 4px; }
.cf-legend { display: flex; gap: 12px; align-items: center; font-size: 11.5px; color: var(--text-muted); }
.cf-legend-swatch {
  display: inline-block; width: 11px; height: 11px; border-radius: 2px;
}
.cf-legend-irl { background: #16A34A; }
.cf-legend-uk  { background: #2563EB; }
.cf-legend-label { margin-right: 6px; }

.cf-chart-wrap { width: 100%; overflow-x: auto; padding: 8px 0; }
.cf-chart { width: 100%; height: auto; min-width: 720px; display: block; }
.cf-bar { transition: opacity 0.15s; cursor: default; }
.cf-bar-irl { fill: #16A34A; }
.cf-bar-uk  { fill: #2563EB; }
.cf-bar:hover { opacity: 0.78; }
.cf-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.cf-axis { stroke: var(--border-strong); stroke-width: 1; }
.cf-axis-label {
  font-family: "InterVariable", "Inter", sans-serif;
  font-size: 10.5px;
  fill: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.cf-axis-sublabel {
  font-family: "InterVariable", "Inter", sans-serif;
  font-size: 9.5px;
  fill: var(--text-soft);
}

/* Detail-table drilldown */
.cf-row-drill summary { cursor: pointer; list-style: none; }
.cf-row-drill summary::-webkit-details-marker { display: none; }
.cf-row-drill-toggle {
  font-size: 11.5px; color: var(--primary-dk); font-weight: 500;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--primary-lt); border: 1px solid var(--border);
}
.cf-row-drill[open] .cf-row-drill-toggle::after { content: " ↑"; }
.cf-row-drill-content {
  position: absolute; right: 14px; margin-top: 4px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 10px 12px;
  min-width: 320px;
  max-width: 480px;
  z-index: 10;
}
.cf-row-drill-item {
  display: flex; gap: 8px; align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--light-grey);
  font-size: 12.5px;
}
.cf-row-drill-item:last-child { border-bottom: none; }
.cf-row-drill-link { color: var(--primary-dk); font-weight: 600; text-decoration: none; }
.cf-row-drill-meta { color: var(--text-muted); flex: 1; }
.cf-row-drill-amount { font-weight: 700; color: var(--text); white-space: nowrap; }
.cf-row-drill-date { color: var(--text-soft); font-size: 11.5px; white-space: nowrap; }

/* Overdue card */
.cf-overdue-card { border-color: #FECACA; }
.cf-overdue-card .section-card-header { background: #FEF2F2; border-bottom-color: #FECACA; }

/* Missing-contracts callout */
.cf-callout {
  background: linear-gradient(180deg, #FFFBF5 0%, #FFF7ED 100%);
  border: 1px solid #FED7AA;
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-top: 24px;
  box-shadow: var(--shadow-xs);
}
.cf-callout-head { font-weight: 600; font-size: 14px; color: #9A3412; margin-bottom: 4px; }
.cf-callout-body { font-size: 12.5px; color: #92400E; margin-bottom: 12px; }
.cf-callout-list { list-style: none; padding: 0; margin: 0; }
.cf-callout-list li {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 0;
  border-top: 1px solid #FED7AA;
  font-size: 13px;
  flex-wrap: wrap;
}
.cf-callout-list li:first-child { border-top: 1px solid #FED7AA; }
.cf-callout-name {
  color: var(--text); font-weight: 600; text-decoration: none;
  flex-shrink: 0;
}
.cf-callout-name:hover { color: var(--primary-dk); }
.cf-callout-meta { color: var(--text-muted); font-size: 12px; flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cf-callout-action {
  color: var(--primary-dk); font-weight: 500; font-size: 12.5px;
  text-decoration: none; padding: 4px 10px; border-radius: var(--radius-sm);
  background: var(--white); border: 1px solid #FED7AA;
}
.cf-callout-action:hover { background: var(--primary-lt); border-color: var(--primary); }

/* Tabular numerals on cashflow numeric cells */
.cf-headline-amounts, .cf-row-drill-amount, .crm-table td.num { font-variant-numeric: tabular-nums; }
.crm-table th.num, .crm-table td.num { text-align: right; }

@media (max-width: 768px) {
  .cf-toggle { flex-wrap: wrap; }
  .cf-toggle-btn { min-width: 0; flex: 1 1 auto; }
}

/* ════════════════════════════════════════════════════════════════════════
   ════════════════════ OPPORTUNITIES PAGE POLISH ═════════════════════════
   - Manual sidebar collapse toggle (chevron, 64px when collapsed)
   - Row "card" treatment on /crm/all
   - Lighter filter row
   - Typography hierarchy (bold dark client name, lighter contact subtext)
═══════════════════════════════════════════════════════════════════════════ */

/* ─── Manual sidebar collapse toggle ────────────────────────────────── */
/* User-controlled chevron that shrinks the sidebar to 64px (icon-only),
   distinct from the automatic icons-mode used on PM workspace pages.
   Persisted in localStorage as 'sidebar-collapsed'. */

.app-sidebar-collapse-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 9px 12px;
  background: transparent; border: none; cursor: pointer;
  color: rgba(255,255,255,0.5); font-size: 12.5px; font-weight: 500;
  font-family: inherit; border-radius: var(--radius-sm);
  margin-top: 4px;
  position: relative;
  transition: background 0.15s, color 0.15s;
}
.app-sidebar-collapse-btn:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); }
.app-sidebar-chevron-expand { display: none; }
body.sidebar-collapsed .app-sidebar-chevron-collapse { display: none; }
body.sidebar-collapsed .app-sidebar-chevron-expand { display: inline-block; }

/* When body has .sidebar-collapsed AND sidebar is in full mode, shrink to 64px */
body.sidebar-collapsed:has(.app-sidebar[data-mode="full"]) {
  grid-template-columns: 64px 1fr;
}
body.sidebar-collapsed .app-sidebar[data-mode="full"] {
  width: 64px;
}
body.sidebar-collapsed .app-sidebar[data-mode="full"] .app-sidebar-brand { padding: 18px 0; justify-content: center; }
body.sidebar-collapsed .app-sidebar[data-mode="full"] .app-sidebar-brand-text { display: none; }
body.sidebar-collapsed .app-sidebar[data-mode="full"] .app-sidebar-nav { padding: 12px 8px; }
body.sidebar-collapsed .app-sidebar[data-mode="full"] .app-sidebar-link { padding: 11px; justify-content: center; }
body.sidebar-collapsed .app-sidebar[data-mode="full"] .app-sidebar-label { display: none; }
body.sidebar-collapsed .app-sidebar[data-mode="full"] .app-sidebar-foot { padding: 12px 8px 16px; }
body.sidebar-collapsed .app-sidebar[data-mode="full"] .app-sidebar-link.is-active::before { left: -8px; }
body.sidebar-collapsed .app-sidebar[data-mode="full"] .app-sidebar-collapse-btn { padding: 11px; justify-content: center; }

/* Tooltips for collapsed full-mode (reuse the icons-mode pattern) */
body.sidebar-collapsed .app-sidebar[data-mode="full"] .app-sidebar-link[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%; transform: translateY(-50%);
  background: var(--text);
  color: var(--white);
  padding: 5px 10px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  box-shadow: var(--shadow-md);
  z-index: 50;
}
body.sidebar-collapsed .app-sidebar[data-mode="full"] .app-sidebar-link[data-tip]:hover::after { opacity: 1; }

/* Smooth width transition */
.app-sidebar { transition: width 0.25s var(--ease-out); }
body:has(.app-sidebar) { transition: grid-template-columns 0.25s var(--ease-out); }

/* ─── Lighter filter bar treatment ──────────────────────────────────── */
.filter-bar {
  background: transparent !important;
  border: none !important;
  padding: 0 0 16px !important;
  display: flex; gap: 12px; flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 16px;
}
.filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 140px; flex: 1; }
.filter-group label {
  font-size: 10.5px; color: var(--text-soft); text-transform: uppercase;
  letter-spacing: 0.6px; font-weight: 600; padding-left: 2px;
}
.filter-group select, .filter-group input {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 13px;
  height: 36px;
  box-shadow: var(--shadow-xs);
  /* Fill the flex group so every control shares the same right edge. Without
     this, each <select> keeps its intrinsic width (long stage names vs short
     QS labels) and the controls misalign into a right-side "staircase". */
  width: 100%;
  box-sizing: border-box;
}
.filter-group select:hover, .filter-group input:hover { border-color: var(--border-strong); }
.filter-actions { display: flex; gap: 8px; padding-top: 18px; }
.btn-filter, .btn-clear {
  padding: 8px 16px; border-radius: var(--radius-sm); font-size: 13px;
  font-weight: 500; cursor: pointer; border: 1px solid transparent;
  font-family: inherit; transition: all 0.15s;
}
.btn-filter { background: var(--text); color: var(--white); }
.btn-filter:hover { background: #000; box-shadow: var(--shadow-sm); }
.btn-clear { background: var(--white); color: var(--text-muted); border-color: var(--border); text-decoration: none; display: inline-flex; align-items: center; }
.btn-clear:hover { background: var(--light-grey); color: var(--text); }

/* ─── Opportunities table — card-style rows + typography hierarchy ──── */
/* The customer brief: rows should feel like floating cards, with bold dark
   client name and lighter contact subtext for scanability.
   Approach: keep the table semantics but spread rows visually with extra
   padding, soft hover, and a clean bottom-border-only divider. */

main.crm-main .crm-table-wrap {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
main.crm-main .crm-table-wrap > .crm-table {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

/* Higher row padding on the Opportunities table specifically */
main.crm-main .crm-table tbody tr td { padding: 18px 18px; vertical-align: top; }
main.crm-main .crm-table thead th { padding: 12px 18px; }
main.crm-main .crm-table tbody tr { transition: background 0.12s; }
main.crm-main .crm-table tbody tr:hover td { background: var(--primary-lt); }

/* Client name = bold + dark; everything below = lighter */
main.crm-main .crm-table .client-link {
  color: #111827;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  text-decoration: none;
}
main.crm-main .crm-table .client-link:hover { color: var(--primary-dk); }
main.crm-main .crm-table td .text-muted { color: #6B7280; font-size: 12px; }
main.crm-main .crm-table td .text-muted[style*="font-size:11px"] { font-size: 11px; color: var(--text-soft); }

/* Bottom totals bar — softer */
main.crm-main .crm-table-wrap > .crm-table tbody tr:last-child td { border-bottom: none; }

/* Status filter pills (Active Pipeline / All / Closed / Won / Lost) — softer */
main.crm-main .page-header > div[style*="flex-wrap:wrap"] a {
  background: var(--white);
  border-color: var(--border);
  color: var(--text-muted);
  transition: all 0.15s;
  box-shadow: var(--shadow-xs);
}
main.crm-main .page-header > div[style*="flex-wrap:wrap"] a:hover {
  background: var(--light-grey);
  border-color: var(--border-strong);
  color: var(--text);
}
/* (Active state — overridden in inline style — picks up var(--primary-dk) bg automatically) */

/* ─── Collapsible region groups in the opportunities table ────────── */
.crm-table-grouped tbody.crm-group + tbody.crm-group .crm-group-header th {
  /* Add a little extra space above each subsequent group */
  padding-top: 18px;
}
.crm-group-header {
  cursor: pointer;
  user-select: none;
  background: linear-gradient(180deg, #FAFBFC 0%, #F4F6F8 100%);
}
.crm-group-header:hover { background: linear-gradient(180deg, #F4F6F8 0%, #ECEFF3 100%); }
.crm-group-header th {
  padding: 11px 18px !important;
  font-weight: 600;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: sticky;
  /* Sit just below the main column header which is also sticky at top:0 */
  top: 44px;
  z-index: 5;
}
.crm-group-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.crm-group-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform 0.18s var(--ease-out, ease-out);
}
.crm-group.is-collapsed .crm-group-chevron { transform: rotate(-90deg); }
.crm-group-count {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}
.crm-group-totals {
  margin-left: auto;
  display: inline-flex;
  gap: 14px;
  align-items: center;
}
.crm-group-total {
  font-weight: 700;
  color: var(--primary-dk);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.crm-group.is-collapsed tr:not(.crm-group-header) { display: none; }

/* ─── Region pill toggle (Both / Ireland / UK) ─────────────────────── */
.opp-pill-group {
  display: inline-flex;
  gap: 4px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 3px;
  box-shadow: var(--shadow-xs);
}
.opp-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-muted);
  transition: background 0.12s ease, color 0.12s ease;
  line-height: 1.2;
}
.opp-pill:hover { color: var(--text); background: var(--light-grey); }
.opp-pill.is-active {
  background: var(--primary-dk);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.opp-pill.is-active:hover { background: var(--primary-dk); color: #fff; }

/* ─── List/Board view toggle ───────────────────────────────────────── */
.opp-view-toggle {
  display: inline-flex;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3px;
  box-shadow: var(--shadow-xs);
}
.opp-view-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 500;
  color: var(--text-muted); text-decoration: none;
  transition: all 0.15s;
}
.opp-view-btn:hover { background: var(--light-grey); color: var(--text); }
.opp-view-btn.is-active { background: var(--text); color: var(--white); font-weight: 600; }
.opp-view-btn svg { stroke: currentColor; }

/* ─── Kanban board ─────────────────────────────────────────────────── */
.opp-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 4px 16px;
  scroll-snap-type: x proximity;
  align-items: flex-start;
  /* Positioned so child columns' offsetLeft is measured within the scroll
     container — the minimap click-to-jump and active-phase math depend on it.
     Without this, offsetLeft includes the page/sidebar offset and scrollTo
     overshoots, leaving earlier phases (e.g. Agreement) unreachable. */
  position: relative;
}
.opp-board-column {
  flex: 0 0 280px;
  min-width: 280px;
  background: var(--light-grey);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex; flex-direction: column;
  scroll-snap-align: start;
  max-height: calc(100vh - 280px);
}
.opp-board-col-head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.opp-board-col-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.opp-board-col-count {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--white); padding: 2px 8px; border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}
.opp-board-col-total {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.opp-board-col-body {
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 80px;
  transition: background 0.12s;
}
.opp-board-col-body.is-drop-target {
  background: var(--primary-lt);
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
}
.opp-board-col-body:empty::before {
  content: "Drop here";
  display: block;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-soft);
  padding: 16px 8px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  font-style: italic;
}

/* Board minimap / horizontal progress tracker.
   Hidden by default — JS reveals it only when the board actually overflows. */
.board-minimap {
  display: none;
  align-items: center;
  gap: 12px;
  margin: 0 4px 12px;
}
.board-minimap.is-overflowing { display: flex; }
.board-minimap-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted); white-space: nowrap;
}
.board-minimap-track {
  position: relative;
  display: flex;
  flex: 1;
  gap: 4px;
  height: 30px;
  padding: 3px;
  background: var(--light-grey);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.board-minimap-viewport {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(26, 107, 60, 0.14);
  border: 1px solid var(--primary);
  border-radius: var(--radius-pill);
  pointer-events: none;
  z-index: 0;
  transition: left 0.08s linear, width 0.08s linear;
}
.board-minimap-seg {
  position: relative; z-index: 1;
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--text-muted); border-radius: var(--radius-pill);
  padding: 0 8px; white-space: nowrap; overflow: hidden;
  transition: background 0.12s, color 0.12s;
}
.board-minimap-seg:hover { background: rgba(0, 0, 0, 0.05); color: var(--text); }
.board-minimap-seg.is-active { color: var(--primary-dk); }
.board-minimap-seg-label { overflow: hidden; text-overflow: ellipsis; }
.board-minimap-seg-count {
  font-size: 10px; background: var(--white); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 0 6px; line-height: 16px; font-variant-numeric: tabular-nums;
}
.board-minimap-seg.is-active .board-minimap-seg-count {
  background: var(--primary); color: var(--white); border-color: var(--primary);
}

/* Kanban card */
.opp-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px 11px;
  box-shadow: var(--shadow-xs);
  cursor: grab;
  display: flex; flex-direction: column; gap: 6px;
  transition: box-shadow 0.15s, transform 0.12s, border-color 0.15s;
}
.opp-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.opp-card.is-dragging { opacity: 0.4; cursor: grabbing; }
.opp-card.is-dropping { animation: drop-pop 0.4s var(--ease-out); }
@keyframes drop-pop {
  0%   { transform: scale(0.96); box-shadow: 0 0 0 4px rgba(26, 107, 60, 0.18); }
  100% { transform: scale(1);   box-shadow: var(--shadow-xs); }
}
.opp-card-name {
  color: #111827; font-weight: 700; font-size: 13.5px;
  letter-spacing: -0.01em; text-decoration: none;
  line-height: 1.3;
}
.opp-card-name:hover { color: var(--primary-dk); }
.opp-card-contact { font-size: 11.5px; color: #6B7280; }
.opp-card-meta {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-top: 2px;
}
.opp-card-qs { font-size: 10.5px; color: var(--text-soft); font-weight: 500; padding: 1px 7px; background: var(--light-grey); border-radius: var(--radius-pill); }
.opp-card-foot {
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
  margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--light-grey);
  font-size: 11.5px;
}
.opp-card-value { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.opp-card-deadline { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.opp-card-deadline.deadline-urgent { color: #DC2626; font-weight: 600; }
.opp-card-deadline.deadline-soon   { color: #B45309; font-weight: 600; }
.opp-card-type { font-size: 10.5px; color: var(--text-soft); }

@media (max-width: 768px) {
  .opp-board-column { flex-basis: 240px; min-width: 240px; }
}