/* =====================================================
   ACCOUNTING CLOSE DASHBOARD — STYLES
   ===================================================== */

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

:root {
  --navy:       #001E5A;
  --navy-light: #0D2E7A;
  --blue:       #2563eb;
  --blue-soft:  #eff6ff;
  --green:      #28A05A;
  --green-bg:   #EAF7F1;
  --green-pill: #D1F0E2;
  --yellow:     #b45309;
  --yellow-bg:  #fffbeb;
  --yellow-pill:#fef3c7;
  --red:        #dc2626;
  --red-bg:     #fef2f2;
  --red-pill:   #fee2e2;
  --gray:       #6b7280;
  --gray-bg:    #f9fafb;
  --gray-pill:  #f3f4f6;
  --gray-border:#e5e7eb;
  --text:       #111827;
  --text-light: #6b7280;
  --radius:     10px;
  --shadow:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
}

html { font-size: 15px; scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #F4F7FB;
  color: var(--text);
  min-height: 100vh;
}

/* ---- HEADER ---- */
.header {
  background: var(--navy);
  color: #fff;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: 16px;
}
.header-left  { display: flex; align-items: center; gap: 16px; }
.header-logo  {
  display: flex; align-items: center;
  flex-shrink: 0;
}
.header-logo img { display: block; height: 48px; width: auto; }
.header-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
}
.header-sub   { font-size: .8rem; color: rgba(255,255,255,.65); margin-top: 2px; }
.header-right { display: flex; align-items: center; gap: 20px; }
.header-meta  { font-size: .8rem; color: rgba(255,255,255,.65); }
.header-meta strong { color: #fff; font-weight: 600; }

.overall-badge {
  font-size: .78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.overall-badge.good    { background: var(--green-pill);  color: var(--green); }
.overall-badge.partial { background: var(--yellow-pill); color: var(--yellow); }
.overall-badge.behind  { background: var(--red-pill);    color: var(--red); }

/* ---- SECTION NAV ---- */
.section-nav {
  position: sticky;
  top: 68px;
  z-index: 90;
  background: #fff;
  border-bottom: 1px solid var(--gray-border);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.section-nav::-webkit-scrollbar { display: none; }
.section-nav-link {
  font-size: .74rem;
  font-weight: 600;
  color: var(--text-light);
  padding: 4px 11px;
  border-radius: 6px;
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.section-nav-link:hover { background: var(--gray-pill); color: var(--text); }
.section-nav-sep { color: var(--gray-border); font-size: .85rem; user-select: none; flex-shrink: 0; }

/* Scroll offset — accounts for sticky header (68px) + sticky nav (~34px) */
.card, .kpi-grid, .section-divider, .tri-panel, .health-bar {
  scroll-margin-top: 112px;
}

/* ---- MAIN ---- */
.main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---- KPI GRID ---- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.kpi-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 3px solid transparent;
  transition: box-shadow .15s;
}
.kpi-card:hover { box-shadow: var(--shadow-md); }
.kpi-card.kpi-green  { border-top-color: #28A05A; }
.kpi-card.kpi-yellow { border-top-color: #f59e0b; }
.kpi-card.kpi-blue   { border-top-color: #2563eb; }
.kpi-card.kpi-purple { border-top-color: #7c3aed; }

.kpi-label  { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-light); }
.kpi-value  { font-size: 1.65rem; font-weight: 800; line-height: 1; color: var(--text); }
.kpi-sub    { font-size: .78rem; color: var(--text-light); }

.progress-bar-wrap { margin-top: 8px; background: var(--gray-border); border-radius: 4px; height: 5px; overflow: hidden; }
.progress-bar-fill { height: 100%; border-radius: 4px; transition: width .4s ease; }
.kpi-green  .progress-bar-fill { background: #28A05A; }
.kpi-yellow .progress-bar-fill { background: #f59e0b; }
.kpi-blue   .progress-bar-fill { background: #2563eb; }
.kpi-purple .progress-bar-fill { background: #7c3aed; }

/* ---- CARDS ---- */
.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--gray-border);
  gap: 12px;
}
.card-title-group { display: flex; align-items: center; gap: 10px; }
.card-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.recon-icon { background: #eff6ff; color: #2563eb; }
.ar-icon    { background: #EAF7F1; color: #28A05A; }
.ap-icon    { background: #fff7ed; color: #ea580c; }
.check-icon { background: #faf5ff; color: #7c3aed; }

.card-title { font-size: 1rem; font-weight: 700; }

.card-badge {
  font-size: .73rem;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-green  { background: var(--green-pill);  color: var(--green); }
.badge-yellow { background: var(--yellow-pill); color: var(--yellow); }
.badge-red    { background: var(--red-pill);    color: var(--red); }
.badge-gray   { background: var(--gray-pill);   color: var(--gray); }
.badge-blue   { background: var(--blue-soft);   color: var(--blue); }

/* ---- TABLES ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
thead th {
  padding: 11px 16px;
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-light);
  background: var(--gray-bg);
  border-bottom: 1px solid var(--gray-border);
  white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--gray-border); transition: background .1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #fafafa; }
tbody td { padding: 12px 16px; vertical-align: middle; }

tfoot td {
  padding: 12px 16px;
  font-weight: 700;
  background: var(--gray-bg);
  border-top: 2px solid var(--gray-border);
}

th.right, td.right { text-align: right; }
th.center, td.center { text-align: center; }

/* ---- STATUS PILLS ---- */
.pill {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.pill-complete    { background: var(--green-pill);  color: var(--green); }
.pill-in-progress { background: var(--yellow-pill); color: var(--yellow); }
.pill-pending     { background: var(--gray-pill);   color: var(--gray); }
.pill-overdue     { background: var(--red-pill);    color: var(--red); }
.pill-paid        { background: var(--green-pill);  color: var(--green); }

/* ---- AMOUNT CELLS ---- */
.amount { font-variant-numeric: tabular-nums; font-family: "SF Mono", "Consolas", monospace; }
.amount-zero { color: var(--text-light); }
.amount-warn { color: var(--yellow); font-weight: 600; }
.amount-danger { color: var(--red); font-weight: 600; }

/* ---- NOTES ---- */
.note-text { color: var(--text-light); font-size: .8rem; font-style: italic; }

/* ---- DUE DATE ---- */
.due-overdue { color: var(--red); font-weight: 600; }

/* ---- FOOTER ---- */
.footer {
  text-align: center;
  font-size: .78rem;
  color: var(--text-light);
  padding: 16px;
}
.footer code {
  background: var(--gray-pill);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .75rem;
}

/* ---- SECTION DIVIDERS ---- */
.section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 2px;
  margin-top: 8px;
}
.section-divider-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ops-icon       { background: #D1F0E2; color: #28A05A; }
.analytics-icon { background: #faf5ff; color: #7c3aed; }
.section-divider-title {
  font-size: 1rem; font-weight: 800; color: var(--text); letter-spacing: -.01em;
}
.section-divider-sub {
  font-size: .74rem; color: var(--text-light); margin-top: 1px;
}
.analytics-section { margin-top: 16px; }

/* ---- INTERACTIVE CHECKLIST ---- */
.task-row { cursor: pointer; transition: background .1s; }
.task-row:hover { background: #f0f9ff !important; }
.task-done { opacity: .65; }
.task-cb {
  width: 20px; height: 20px;
  border-radius: 5px;
  border: 2px solid #d1d5db;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
}
.task-cb-checked { background: #28A05A; border-color: #28A05A; }
.task-row:hover .task-cb:not(.task-cb-checked) { border-color: #9ca3af; background: #f9fafb; }
.task-done-text { text-decoration: line-through; color: var(--text-light); }
.local-badge {
  font-size: .6rem; font-weight: 700; text-transform: uppercase;
  background: #dbeafe; color: #1d4ed8; border-radius: 3px; padding: 1px 5px;
}
.owner-cell { color: var(--text-light); font-size: .83rem; }

.owner-strip {
  display: flex; align-items: center; gap: 20px;
  padding: 10px 22px;
  background: var(--gray-bg);
  border-bottom: 1px solid var(--gray-border);
  flex-wrap: wrap;
}
.owner-item { display: flex; align-items: center; gap: 8px; }
.owner-name { font-size: .76rem; font-weight: 700; color: var(--text); min-width: 60px; }
.owner-bar-bg {
  width: 80px; height: 6px; border-radius: 3px;
  background: var(--gray-border); overflow: hidden;
}
.owner-bar-fill { height: 100%; border-radius: 3px; transition: width .3s ease; }
.owner-count { font-size: .72rem; color: var(--text-light); min-width: 28px; }

.checklist-hint {
  padding: 9px 22px;
  font-size: .72rem;
  color: var(--text-light);
  border-top: 1px solid var(--gray-border);
  background: var(--gray-bg);
}
.reset-btn {
  font-size: .7rem; font-weight: 600;
  padding: 3px 10px;
  border: 1px solid var(--gray-border);
  border-radius: 5px;
  background: #fff;
  color: var(--text-light);
  cursor: pointer;
  transition: all .1s;
}
.reset-btn:hover { border-color: #9ca3af; color: var(--text); }

/* ---- GL ANALYTICS ---- */
.card-subtitle {
  font-size: .72rem; color: var(--text-light); margin-top: 2px;
}
.dup-icon     { background: #fef2f2; color: #dc2626; }
.missing-icon { background: #fff7ed; color: #ea580c; }
.unusual-icon { background: #fffbeb; color: #d97706; }

.type-badge {
  display: inline-block;
  font-size: .65rem; font-weight: 800; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 4px;
  text-transform: uppercase;
}
.ar-type { background: #dcfce7; color: #15803d; }
.ap-type { background: #fee2e2; color: #b91c1c; }
.je-type { background: #ede9fe; color: #6d28d9; }
.pr-type { background: #dbeafe; color: #1d4ed8; }

.days-badge {
  display: inline-block;
  font-size: .72rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: var(--red-pill); color: var(--red);
}
.flag-line {
  font-size: .74rem; color: var(--yellow); line-height: 1.5;
}
.analytics-empty {
  text-align: center; padding: 28px 16px;
  color: var(--text-light); font-size: .84rem;
}
.analytics-empty::before { content: '✓  '; color: #16a34a; font-weight: 700; }

/* ---- FILTER BARS ---- */
.card-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--gray-border);
  background: var(--gray-bg);
  flex-wrap: wrap;
}
.card-filters:empty { display: none; }
.filter-group { display: flex; align-items: center; gap: 6px; }
.filter-label {
  font-size: .71rem;
  color: var(--text-light);
  font-weight: 600;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.filter-select {
  font-size: .78rem;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--gray-border);
  border-radius: 6px;
  padding: 4px 28px 4px 10px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 8px 5px;
  transition: border-color .15s;
}
.filter-select:hover { border-color: #9ca3af; }
.filter-select:focus { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(19,41,75,.1); }

/* ---- HEALTH COLLAPSE BAR ---- */
.health-bar {
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.health-bar-label {
  font-size: .68rem;
  color: rgba(255,255,255,.45);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.health-bar-toggle {
  font-size: .7rem;
  color: rgba(255,255,255,.45);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: color .15s, background .15s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.health-bar:hover .health-bar-toggle { color: #fff; background: rgba(255,255,255,.1); }

/* ---- THREE-PANEL HEALTH CARD ---- */
.tri-panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
}

.tri-col {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tri-col-lights {
  background: var(--navy);
  color: #fff;
}
.tri-col-progress {
  border-left: 1px solid var(--gray-border);
  border-right: 1px solid var(--gray-border);
}
.tri-col-cleared {
  background: var(--gray-bg);
}

/* Panel labels */
.tri-panel-label {
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.45);
}
.tri-col-progress .tri-panel-label,
.tri-col-cleared  .tri-panel-label {
  color: var(--text-light);
}

/* Shared tri-panel header row */
.tri-panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.tri-col-progress .tri-panel-hd,
.tri-col-cleared  .tri-panel-hd { border-bottom-color: var(--gray-border); }

/* Status dots (traffic light) */
.s-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.s-dot.s-green  { background:#28A05A; box-shadow:0 0 6px rgba(40,160,90,.7); }
.s-dot.s-yellow { background:#d97706; box-shadow:0 0 6px rgba(217,119,6,.7); }
.s-dot.s-red    { background:#dc2626; box-shadow:0 0 6px rgba(220,38,38,.7); }
.s-dot.s-gray   { background:#d1d5db; }

/* Panel 1 — Month-End Checklist */
.chk-list { display:flex; flex-direction:column; }
.chk-row  {
  display:flex; align-items:center; gap:8px;
  padding:5px 2px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.chk-row:last-child { border-bottom:none; }
.chk-task { flex:1; font-size:.75rem; color:rgba(255,255,255,.88); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chk-who  { font-size:.67rem; color:rgba(255,255,255,.38); white-space:nowrap; }

/* Panel 2 — Analytical Reviews */
.anlyt-list { display:flex; flex-direction:column; }
.anlyt-row  {
  display:flex; align-items:center; gap:8px;
  padding:6px 2px;
  border-bottom:1px solid var(--gray-border);
}
.anlyt-row:last-child { border-bottom:none; }
.anlyt-lbl { flex:1; font-size:.75rem; color:var(--text); }
.anlyt-val { font-size:.72rem; font-weight:700; white-space:nowrap; }

/* Panel 3 — Issues to Dig Into */
.issue-list { display:flex; flex-direction:column; max-height: 152px; overflow-y: auto; scrollbar-width: thin; }
.issue-row  {
  display:flex; align-items:flex-start; gap:8px;
  padding:5px 2px;
  border-bottom:1px solid var(--gray-border);
}
.issue-row:last-child { border-bottom:none; }
.issue-row .s-dot { margin-top:3px; }
.issue-txt { font-size:.73rem; color:var(--text); line-height:1.4; }
.issue-empty { font-size:.78rem; color:var(--green); font-weight:600; padding:6px 2px; }
.issue-empty::before { content:'✓  '; }

/* ---- HEALTH PANEL — RING + OWNER BARS (Panel 1) ---- */
.hpanel-ring-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0 2px;
}
.hpanel-owners {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.hpanel-owner {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hpanel-owner-name {
  font-size: .69rem;
  color: rgba(255,255,255,.62);
  width: 52px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.hpanel-owner-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,.12);
  border-radius: 3px;
  overflow: hidden;
}
.hpanel-owner-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}
.hpanel-owner-cnt {
  font-size: .66rem;
  color: rgba(255,255,255,.38);
  width: 24px;
  text-align: right;
  flex-shrink: 0;
}

/* ---- HEALTH PANEL — ANALYTICS ROW TINTING (Panel 2) ---- */
.anlyt-row.anlyt-clear { background: rgba(40,160,90,.07);  border-radius: 5px; margin: 1px -4px; padding-left: 6px; padding-right: 6px; }
.anlyt-row.anlyt-flag  { background: rgba(220,38,38,.06);   border-radius: 5px; margin: 1px -4px; padding-left: 6px; padding-right: 6px; }
.anlyt-row.anlyt-warn  { background: rgba(180,83,9,.06);    border-radius: 5px; margin: 1px -4px; padding-left: 6px; padding-right: 6px; }

/* ---- HEALTH PANEL — ISSUE SUMMARY PILLS (Panel 3) ---- */
.issue-summary {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.isp {
  font-size: .69rem;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.isp-red    { background: var(--red-pill);    color: var(--red); }
.isp-yellow { background: var(--yellow-pill); color: var(--yellow); }
.isp-green  { background: var(--green-pill);  color: var(--green); }

/* ---- CHECKLIST — OWNER GROUP HEADERS ---- */
.owner-group-row td {
  padding: 8px 16px 7px;
  background: #f0f3f8;
  border-top: 2px solid var(--gray-border);
  border-bottom: 1px solid var(--gray-border);
}
.owner-group-row:first-child td { border-top: none; }
.owner-group-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.owner-group-name {
  font-size: .71rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--navy);
}
.owner-group-prog {
  display: flex;
  align-items: center;
  gap: 8px;
}
.owner-group-bar {
  width: 64px;
  height: 4px;
  background: var(--gray-border);
  border-radius: 2px;
  overflow: hidden;
}
.owner-group-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .3s;
}
.owner-group-cnt {
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-light);
  white-space: nowrap;
}

/* ---- CHECKLIST TASK EXTRAS (signoff chips + SOP + filepath) ---- */
.task-extras {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.signoff-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .64rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  border: 1px solid transparent;
  background: none;
  font-family: inherit;
  transition: all .15s;
}
.signoff-done {
  background: var(--green-pill);
  color: var(--green);
  border-color: rgba(40,160,90,.2);
}
.signoff-done:hover { background: #c0e8d4; }
.signoff-approved {
  background: #ede9fe;
  color: #6d28d9;
  border-color: rgba(109,40,217,.15);
}
.signoff-approved:hover { background: #ddd6fe; }
.signoff-empty {
  background: var(--gray-pill);
  color: var(--text-light);
  border-color: var(--gray-border);
}
.signoff-empty:hover { border-color: #9ca3af; color: var(--text); background: #eaecf0; }
.task-sop-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .64rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  border: 1px solid rgba(37,99,235,.15);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.task-sop-btn:hover { background: #dbeafe; border-color: rgba(37,99,235,.35); }
.task-filepath:hover { border-color: #9ca3af; color: var(--text); background: #eaecf0; }
.task-filepath {
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .62rem;
  color: var(--text-light);
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--gray-pill);
  font-family: "SF Mono", "Consolas", monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  border: 1px solid var(--gray-border);
}

/* Responsive */
@media (max-width: 860px) {
  .tri-panel { grid-template-columns: 1fr; }
  .tri-col-progress { border-left:none; border-right:none; border-top:1px solid var(--gray-border); border-bottom:1px solid var(--gray-border); }
}

/* ---- HEALTH SCORE CARD (legacy — kept for reference) ---- */
.health-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 230px 1fr;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
}

.health-gauge-col {
  background: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 24px;
  gap: 10px;
}

.health-right-col {
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.health-section-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-light);
  margin-bottom: 10px;
}

.health-status-pill {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: 5px 16px;
  border-radius: 999px;
}
.health-status-pill.good   { background: rgba(40,160,90,.22); color: #52d6a0; }
.health-status-pill.warn   { background: rgba(217,119,6,.22);  color: #fbbf24; }
.health-status-pill.risk   { background: rgba(234,88,12,.22);  color: #fb923c; }
.health-status-pill.behind { background: rgba(220,38,38,.22);  color: #f87171; }

.health-period-text {
  font-size: .71rem;
  color: rgba(255,255,255,.38);
  text-align: center;
  line-height: 1.5;
}

/* Component breakdown */
.health-comp-grid {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.health-comp-row {
  display: grid;
  grid-template-columns: 155px 1fr 68px;
  align-items: center;
  gap: 12px;
}
.health-comp-label { font-size: .82rem; font-weight: 600; }
.health-comp-bar-bg {
  background: var(--gray-border);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}
.health-comp-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .5s ease;
}
.health-comp-pts {
  font-size: .73rem;
  color: var(--text-light);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Flags / indicators */
.health-flags-grid {
  border-top: 1px solid var(--gray-border);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.health-flag-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .8rem;
}
.health-flag-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.health-flag-dot.red    { background: #dc2626; box-shadow: 0 0 5px rgba(220,38,38,.5); }
.health-flag-dot.yellow { background: #d97706; box-shadow: 0 0 5px rgba(217,119,6,.4); }
.health-flag-dot.green  { background: #28A05A; box-shadow: 0 0 5px rgba(40,160,90,.4); }

.health-score-note {
  font-size: .68rem;
  color: var(--text-light);
  padding-top: 2px;
  line-height: 1.5;
}

/* ---- NOTES MODAL OVERLAY ---- */
.note-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.note-overlay.open { display: flex; }

.note-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  width: 100%;
  max-width: 500px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.note-modal-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--gray-border);
  gap: 12px;
}
.note-modal-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-light);
  margin-bottom: 3px;
}
.note-modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.note-modal-x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: background .1s;
}
.note-modal-x:hover { background: var(--gray-pill); color: var(--text); }

/* Thread */
.note-thread {
  flex: 1;
  overflow-y: auto;
  padding: 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.note-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-light);
  font-size: .84rem;
}
.note-item {
  background: var(--gray-bg);
  border-radius: 8px;
  padding: 10px 13px;
  border-left: 3px solid var(--gray-border);
}
.note-urgent-item {
  background: var(--red-bg);
  border-left-color: var(--red);
}
.note-item-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.note-author {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
}
.note-ts {
  font-size: .72rem;
  color: var(--text-light);
  margin-left: auto;
}
.note-del {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--text-light);
  padding: 0 3px;
  line-height: 1;
  border-radius: 4px;
  transition: all .1s;
}
.note-del:hover { background: var(--red-pill); color: var(--red); }
.note-item .note-text {
  font-size: .83rem;
  color: var(--text);
  line-height: 1.55;
  font-style: normal;
}

/* Compose area */
.note-compose {
  padding: 14px 22px 18px;
  border-top: 1px solid var(--gray-border);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.note-field {
  width: 100%;
  border: 1px solid var(--gray-border);
  border-radius: 7px;
  padding: 8px 12px;
  font-size: .84rem;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  transition: border-color .15s;
  resize: none;
}
.note-field:focus { outline: none; border-color: var(--blue); }
.note-compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.note-urgent-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--text-light);
  cursor: pointer;
  user-select: none;
}
.note-compose-btns { display: flex; align-items: center; gap: 8px; }
.note-email-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 600;
  padding: 6px 13px;
  border: 1px solid var(--gray-border);
  border-radius: 6px;
  background: #fff;
  color: var(--text-light);
  cursor: pointer;
  transition: all .15s;
}
.note-email-btn:hover { border-color: #9ca3af; color: var(--text); }
.note-post-btn {
  font-size: .82rem;
  font-weight: 700;
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  transition: background .15s;
}
.note-post-btn:hover { background: var(--navy-light); }

/* Urgent pill */
.note-urgent-pill {
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--red-pill);
  color: var(--red);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* ---- NOTE BUTTON (bubble icon in table rows) ---- */
.nb {
  background: none;
  border: 1px solid var(--gray-border);
  border-radius: 6px;
  padding: 4px 7px;
  cursor: pointer;
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .73rem;
  font-weight: 600;
  transition: all .15s;
  white-space: nowrap;
  vertical-align: middle;
}
.nb:hover { border-color: #9ca3af; color: var(--text); background: var(--gray-bg); }
.nb-has { border-color: #93c5fd; color: var(--blue); background: var(--blue-soft); }
.nb-has:hover { border-color: var(--blue); }
.nb-urgent { border-color: #fca5a5; color: var(--red); background: var(--red-bg); }
.nb-urgent:hover { border-color: var(--red); }
.nb-cnt { font-size: .68rem; font-weight: 800; }

/* ---- RECENT NOTES FEED CARD ---- */
.notes-icon { background: #f0f9ff; color: #0284c7; }
#notes-feed { display: flex; flex-direction: column; }
.feed-item {
  padding: 14px 22px;
  border-bottom: 1px solid var(--gray-border);
  transition: background .1s;
}
.feed-item:last-child { border-bottom: none; }
.feed-item:hover { background: #fafafa; }
.feed-urgent { background: var(--red-bg); }
.feed-urgent:hover { background: #fee8e8; }
.feed-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.feed-label { font-size: .8rem; font-weight: 700; color: var(--text); }
.feed-ts { font-size: .72rem; color: var(--text-light); margin-left: auto; }
.feed-author { font-size: .74rem; color: var(--text-light); margin-bottom: 3px; }
.feed-text { font-size: .82rem; color: var(--text); font-style: italic; line-height: 1.4; }

/* ---- RESPONSIVE ---- */
@media (max-width: 700px) {
  .health-card { grid-template-columns: 1fr; }
  .health-gauge-col { padding: 28px 20px; }
  .health-comp-row { grid-template-columns: 130px 1fr 56px; }
}
@media (max-width: 640px) {
  .header-inner { flex-wrap: wrap; padding: 12px 0; }
  .main { padding: 16px 12px 40px; gap: 16px; }
  .kpi-value { font-size: 1.4rem; }
}

/* ---- CHECKLIST PHASE CHART ---- */
.phase-chart {
  display: flex;
  gap: 10px;
  padding: 12px 20px 14px;
  border-bottom: 1px solid var(--gray-border);
  background: var(--gray-bg);
}
.phase-card {
  flex: 1;
  background: #fff;
  border: 1px solid var(--gray-border);
  border-radius: 8px;
  padding: 10px 13px 9px;
  min-width: 0;
}
.phase-card-complete {
  border-color: rgba(40,160,90,.3);
  background: rgba(40,160,90,.04);
}
.phase-card-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.phase-card-label {
  font-size: .7rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .02em;
  white-space: nowrap;
}
.phase-card-days {
  font-size: .64rem;
  color: var(--text-light);
  background: var(--gray-pill);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--gray-border);
  white-space: nowrap;
}
.phase-card-desc {
  font-size: .66rem;
  color: var(--text-light);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phase-bar-bg {
  height: 5px;
  background: rgba(0,0,0,.07);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}
.phase-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}
.phase-card-count {
  font-size: .67rem;
  font-weight: 700;
}

/* ---- CHECKLIST PHASE GROUP ROWS ---- */
.phase-group-row td {
  background: #f4f6f9;
  border-top: 2px solid var(--gray-border);
  padding: 7px 16px !important;
}
.phase-group-row:first-child td {
  border-top: none;
}
.phase-group-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.phase-group-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.phase-group-label {
  font-size: .71rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .02em;
}
.phase-group-days-pill {
  font-size: .63rem;
  color: var(--text-light);
  background: var(--gray-pill);
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid var(--gray-border);
  white-space: nowrap;
}
.phase-group-desc {
  font-size: .66rem;
  color: var(--text-light);
}
.phase-group-prog {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.phase-group-bar {
  width: 72px;
  height: 5px;
  background: rgba(0,0,0,.08);
  border-radius: 3px;
  overflow: hidden;
}
.phase-group-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}
.phase-group-cnt {
  font-size: .69rem;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .phase-chart { flex-direction: column; }
}

/* ---- PHASE CARD OVERDUE TAG ---- */
.phase-card-overdue {
  font-size: .6rem; font-weight: 800; letter-spacing: .04em;
  color: #dc2626; background: #fee2e2;
  padding: 1px 6px; border-radius: 4px;
  margin-left: auto;
}
.phase-group-overdue {
  font-size: .62rem; font-weight: 800;
  color: #dc2626; background: #fee2e2;
  padding: 1px 7px; border-radius: 4px;
}

/* ---- CLOSE STATUS PANEL ---- */
.close-status-panel {
  border-bottom: 1px solid var(--gray-border);
  background: var(--navy);
  color: #fff;
}
.csp-top {
  display: flex; align-items: center; gap: 0;
  padding: 14px 20px;
  flex-wrap: wrap; gap: 12px;
}
.csp-day-block { text-align: center; flex-shrink: 0; }
.csp-day-n {
  font-size: 1.55rem; font-weight: 900; color: #fff;
  line-height: 1; letter-spacing: -.02em;
}
.csp-day-l {
  font-size: .65rem; color: rgba(255,255,255,.5);
  text-transform: uppercase; letter-spacing: .05em;
  margin-top: 2px;
}
.csp-vr {
  width: 1px; height: 36px;
  background: rgba(255,255,255,.15);
  flex-shrink: 0; margin: 0 4px;
}
.csp-pace {
  font-size: .73rem; font-weight: 800;
  padding: 5px 12px; border-radius: 20px;
  border: 1px solid; white-space: nowrap; flex-shrink: 0;
  letter-spacing: .02em;
}
.csp-pace-good { color: #86efac; background: rgba(134,239,172,.12); border-color: rgba(134,239,172,.3); }
.csp-pace-warn { color: #fcd34d; background: rgba(252,211,77,.12);  border-color: rgba(252,211,77,.3);  }
.csp-pace-bad  { color: #fca5a5; background: rgba(252,165,165,.12); border-color: rgba(252,165,165,.3); }
.csp-stats {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-left: auto;
}
.csp-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.csp-sn { font-size: 1.25rem; font-weight: 900; line-height: 1; }
.csp-sl { font-size: .6rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }

/* alerts row */
.csp-alerts {
  display: flex; gap: 0;
  border-top: 1px solid rgba(255,255,255,.1);
}
.csp-alert-col {
  flex: 1; padding: 10px 20px 12px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.csp-alert-col:last-child { border-right: none; }
.csp-alert-hd {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 8px;
}
.csp-hd-amber { color: #fcd34d; }
.csp-hd-red   { color: #fca5a5; }
.csp-alert-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.csp-alert-item:last-child { border-bottom: none; }
.csp-alert-task  { font-size: .8rem; color: rgba(255,255,255,.88); }
.csp-alert-owner { font-size: .72rem; color: rgba(255,255,255,.45); white-space: nowrap; }

/* owner rows */
.csp-owners {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid rgba(255,255,255,.1);
}
.csp-owner-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.csp-owner-row:last-child { border-bottom: none; }
.csp-owner-name  { font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.88); width: 110px; flex-shrink: 0; }
.csp-owner-bar-bg {
  flex: 1; height: 6px; background: rgba(255,255,255,.12);
  border-radius: 3px; overflow: hidden;
}
.csp-owner-bar-fill { height: 100%; border-radius: 3px; transition: width .4s; }
.csp-owner-frac  { font-size: .75rem; font-weight: 700; width: 32px; text-align: right; flex-shrink: 0; }
.csp-owner-flag  {
  font-size: .62rem; font-weight: 800;
  color: #fca5a5; background: rgba(252,165,165,.15);
  padding: 2px 7px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0;
}

/* ---- REPORT BUTTON ---- */
.report-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(40,160,90,.12);
  border: 1px solid rgba(40,160,90,.3);
  color: var(--green);
  font-size: .75rem; font-weight: 700;
  padding: 5px 12px; border-radius: 6px;
  cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.report-btn:hover { background: rgba(40,160,90,.22); }

/* ---- SIGNOFF BLOCKS (dedicated column) ---- */
.signoff-col { width: 148px; vertical-align: middle; padding: 6px 8px !important; }
.signoff-block {
  display: flex; align-items: center; gap: 7px;
  width: 132px;
  padding: 6px 9px;
  border-radius: 7px;
  border: 1.5px solid;
  cursor: pointer;
  background: none;
  font-family: inherit;
  text-align: left;
  transition: opacity .12s;
}
.signoff-block:hover { opacity: .72; }
.sb-empty   { border-color: var(--gray-border); background: var(--gray-bg); }
.sb-done    { border-color: rgba(40,160,90,.28); background: rgba(40,160,90,.06); }
.sb-appr    { border-color: rgba(0,30,90,.2);    background: rgba(0,30,90,.04);  }
.sb-icon    { font-size: .9rem; flex-shrink: 0; color: var(--text-light); }
.sb-done .sb-icon { color: var(--green); }
.sb-appr .sb-icon { color: var(--navy); }
.sb-body    { display: flex; flex-direction: column; min-width: 0; }
.sb-name    {
  font-size: .74rem; font-weight: 700;
  color: var(--text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.sb-empty .sb-name { color: var(--text-light); font-weight: 600; }
.sb-ts      { font-size: .62rem; color: var(--text-light); margin-top: 1px; white-space: nowrap; }

/* ---- PRIORITY BADGE + CRITICAL ROW ---- */
.priority-badge {
  display: inline-block;
  font-size: .58rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  color: #dc2626; background: #fee2e2;
  padding: 1px 6px; border-radius: 3px;
  flex-shrink: 0;
}
.task-critical-row { border-left: 3px solid #dc2626; }
.task-overdue-row  { background: #fff8f8 !important; }
.task-overdue-row:hover { background: #fff1f1 !important; }

/* ---- TASK NOTE INLINE ---- */
.task-note-inline {
  font-size: .74rem; color: var(--text-light);
  margin-top: 4px; font-style: italic;
  max-width: 320px;
}

/* ---- NOTE TYPE BUTTONS (in compose) ---- */
.note-type-row {
  display: flex; gap: 6px; margin-bottom: 10px;
}
.note-type-btn {
  flex: 1; padding: 6px 10px;
  font-size: .76rem; font-weight: 600;
  border: 1.5px solid var(--gray-border);
  background: var(--gray-pill); color: var(--text-light);
  border-radius: 6px; cursor: pointer;
  transition: all .15s;
}
.note-type-btn:hover { border-color: var(--navy); color: var(--navy); }
.note-type-btn.active {
  border-color: var(--navy); background: var(--navy); color: #fff;
}
.note-type-btn[data-type="issue"].active { background: #dc2626; border-color: #dc2626; }
.note-type-btn[data-type="help"].active  { background: #7c3aed; border-color: #7c3aed; }

/* ---- NOTE TYPE BADGES (in thread + feed) ---- */
.note-type-badge {
  display: inline-block;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 4px;
  flex-shrink: 0;
}
.nt-note  { background: var(--gray-pill);  color: var(--text-light); }
.nt-issue { background: #fee2e2; color: #dc2626; }
.nt-help  { background: #ede9fe; color: #7c3aed; }

/* Feed type badges */
.feed-type-badge { margin-right: 4px; }

/* ---- TEAM COMMS FEED ---- */
.comms-empty {
  padding: 20px 20px;
  font-size: .84rem; color: var(--text-light);
  text-align: center; font-style: italic;
}

/* ---- INFO BLOCKS (SOP + File Location) ---- */
.task-info-blocks {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 7px;
}
.info-block {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 130px; max-width: 200px;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1.5px solid;
  font-family: inherit; font-size: inherit;
  text-align: left; text-decoration: none;
  cursor: pointer;
  transition: opacity .12s;
}
.info-block:hover { opacity: .75; }
.ib-sop  { border-color: rgba(37,99,235,.25); background: rgba(37,99,235,.04); }
.ib-file { border-color: rgba(107,114,128,.3); background: rgba(107,114,128,.04); }
.ib-sop  .sb-icon { color: #2563eb; }
.ib-file .sb-icon { color: var(--text-light); }
.sb-path-preview {
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block;
}

/* ---- @MENTION TAG ---- */
.mention-tag {
  display: inline-block;
  background: rgba(0,30,90,.08); color: var(--navy);
  border: 1px solid rgba(0,30,90,.18);
  border-radius: 4px; padding: 0 4px;
  font-size: .85em; font-weight: 700;
  white-space: nowrap;
}

/* ---- MENTION PICKER DROPDOWN ---- */
.mention-picker {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--gray-border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  margin-top: 5px;
  position: relative; z-index: 10;
}
.mention-chip {
  padding: 4px 11px;
  font-size: .76rem; font-weight: 600;
  background: var(--gray-pill); color: var(--text);
  border: 1px solid var(--gray-border); border-radius: 20px;
  cursor: pointer; transition: all .12s;
}
.mention-chip:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---- @ TAG BUTTON IN COMPOSE ---- */
.note-mention-btn {
  padding: 4px 10px;
  font-size: .74rem; font-weight: 700;
  background: rgba(0,30,90,.07); color: var(--navy);
  border: 1px solid rgba(0,30,90,.18); border-radius: 5px;
  cursor: pointer; transition: background .12s;
}
.note-mention-btn:hover { background: rgba(0,30,90,.14); }

/* ============================================================
   DARK THEME — Aligned to Checklist Builder Dashboard Preview
   ============================================================ */

body {
  background: linear-gradient(150deg, #000D26 0%, #000E30 50%, #001848 100%);
  background-attachment: fixed;
  color: rgba(255,255,255,.88);
}

/* Section nav */
.section-nav {
  background: rgba(0,14,48,.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.section-nav-link { color: rgba(255,255,255,.5); }
.section-nav-link:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); }
.section-nav-sep { color: rgba(255,255,255,.12); }

/* Cards */
.card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 28px rgba(0,0,0,.35);
}
.card-header { border-bottom-color: rgba(255,255,255,.08); }
.card-title  { color: rgba(255,255,255,.92); }
.card-subtitle { color: rgba(255,255,255,.42); }

/* KPI cards */
.kpi-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 28px rgba(0,0,0,.35);
  border-top: 3px solid transparent;
}
.kpi-label { color: rgba(255,255,255,.42); }
.kpi-value { color: rgba(255,255,255,.92); }
.kpi-sub   { color: rgba(255,255,255,.42); }
.progress-bar-wrap { background: rgba(255,255,255,.1); }

/* Tables */
thead th {
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.42);
  border-bottom-color: rgba(255,255,255,.08);
}
tbody tr  { border-bottom-color: rgba(255,255,255,.06); color: rgba(255,255,255,.88); }
tbody td  { color: rgba(255,255,255,.88); }
tbody tr:hover { background: rgba(255,255,255,.04) !important; }
tfoot td  { background: rgba(255,255,255,.04); border-top-color: rgba(255,255,255,.1); color: rgba(255,255,255,.88); }

/* Tri-panel health */
.tri-panel { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
.tri-col-progress { border-left-color: rgba(255,255,255,.08); border-right-color: rgba(255,255,255,.08); background: rgba(255,255,255,.02); }
.tri-col-cleared  { background: rgba(255,255,255,.02); }
.tri-col-progress .tri-panel-label,
.tri-col-cleared  .tri-panel-label { color: rgba(255,255,255,.42); }
.tri-col-progress .tri-panel-hd,
.tri-col-cleared  .tri-panel-hd   { border-bottom-color: rgba(255,255,255,.1); }
.anlyt-lbl { color: rgba(255,255,255,.88); }
.anlyt-row { border-bottom-color: rgba(255,255,255,.07); }
.issue-txt { color: rgba(255,255,255,.88); }
.issue-row { border-bottom-color: rgba(255,255,255,.07); }
.issue-empty { color: #86efac; }

/* Section dividers */
.section-divider-title { color: rgba(255,255,255,.9); }
.section-divider-sub   { color: rgba(255,255,255,.42); }
.ops-icon       { background: rgba(40,160,90,.14);   color: #86efac; }
.analytics-icon { background: rgba(124,58,237,.14);  color: #c4b5fd; }

/* Filter bars */
.card-filters { background: rgba(255,255,255,.03); border-bottom-color: rgba(255,255,255,.08); }
.filter-label  { color: rgba(255,255,255,.42); }
.filter-select {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff60'/%3E%3C/svg%3E");
}
.filter-select:hover { border-color: rgba(255,255,255,.28); }
.filter-select:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgba(40,160,90,.18); }

/* Owner strip */
.owner-strip { background: rgba(255,255,255,.03); border-bottom-color: rgba(255,255,255,.08); }
.owner-name  { color: rgba(255,255,255,.88); }
.owner-count { color: rgba(255,255,255,.42); }
.owner-bar-bg { background: rgba(255,255,255,.1); }

/* Checklist hint */
.checklist-hint { border-top-color: rgba(255,255,255,.07); background: rgba(255,255,255,.02); color: rgba(255,255,255,.32); }

/* Phase chart */
.phase-chart { background: rgba(255,255,255,.02); border-bottom-color: rgba(255,255,255,.07); }
.phase-card  { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
.phase-card-complete { border-color: rgba(40,160,90,.35); background: rgba(40,160,90,.06); }
.phase-card-label { color: rgba(255,255,255,.9); }
.phase-card-days  { color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.phase-card-desc  { color: rgba(255,255,255,.42); }
.phase-bar-bg     { background: rgba(255,255,255,.1); }
.phase-card-count { color: rgba(255,255,255,.55); }
.phase-card-overdue  { color: #fca5a5; background: rgba(220,38,38,.18); }
.phase-group-overdue { color: #fca5a5; background: rgba(220,38,38,.18); }

/* Phase group rows */
.phase-group-row td      { background: rgba(255,255,255,.04); border-top-color: rgba(255,255,255,.1); border-bottom-color: rgba(255,255,255,.06); }
.phase-group-label       { color: rgba(255,255,255,.9); }
.phase-group-days-pill   { color: rgba(255,255,255,.38); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.phase-group-desc        { color: rgba(255,255,255,.42); }
.phase-group-bar         { background: rgba(255,255,255,.1); }
.phase-group-cnt         { color: rgba(255,255,255,.55); }

/* Owner group rows */
.owner-group-row td  { background: rgba(255,255,255,.04); border-top-color: rgba(255,255,255,.1); border-bottom-color: rgba(255,255,255,.06); }
.owner-group-name    { color: #86efac; }
.owner-group-bar     { background: rgba(255,255,255,.1); }
.owner-group-cnt     { color: rgba(255,255,255,.52); }

/* Task rows */
.task-row:hover  { background: rgba(255,255,255,.04) !important; }
.task-overdue-row { background: rgba(220,38,38,.07) !important; }
.task-overdue-row:hover { background: rgba(220,38,38,.12) !important; }
.owner-cell      { color: rgba(255,255,255,.48); }
.task-done-text  { color: rgba(255,255,255,.38); }
.task-done       { opacity: .55; }
.task-cb { border-color: rgba(255,255,255,.2); }
.task-row:hover .task-cb:not(.task-cb-checked) { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.05); }

/* Signoff blocks */
.sb-empty  { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.sb-done   { border-color: rgba(40,160,90,.3); background: rgba(40,160,90,.08); }
.sb-appr   { border-color: rgba(134,239,172,.22); background: rgba(134,239,172,.06); }
.sb-name   { color: rgba(255,255,255,.88); }
.sb-empty .sb-name { color: rgba(255,255,255,.38); font-weight: 600; }
.sb-ts     { color: rgba(255,255,255,.32); }
.sb-icon   { color: rgba(255,255,255,.32); }
.sb-done .sb-icon { color: #86efac; }
.sb-appr .sb-icon { color: #86efac; }

/* Signoff chips */
.signoff-done    { background: rgba(40,160,90,.15);   color: #86efac;              border-color: rgba(40,160,90,.25); }
.signoff-done:hover { background: rgba(40,160,90,.25); }
.signoff-approved { background: rgba(109,40,217,.15); color: #c4b5fd;              border-color: rgba(109,40,217,.2); }
.signoff-approved:hover { background: rgba(109,40,217,.25); }
.signoff-empty   { background: rgba(255,255,255,.05); color: rgba(255,255,255,.38); border-color: rgba(255,255,255,.1); }
.signoff-empty:hover { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); }

/* Reset button */
.reset-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.45); }
.reset-btn:hover { border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.82); background: rgba(255,255,255,.09); }

/* Card icons */
.recon-icon   { background: rgba(37,99,235,.15);   color: #93c5fd; }
.ar-icon      { background: rgba(40,160,90,.15);   color: #86efac; }
.ap-icon      { background: rgba(234,88,12,.15);   color: #fdba74; }
.check-icon   { background: rgba(124,58,237,.15);  color: #c4b5fd; }
.dup-icon     { background: rgba(220,38,38,.15);   color: #fca5a5; }
.missing-icon { background: rgba(234,88,12,.15);   color: #fdba74; }
.unusual-icon { background: rgba(217,119,6,.15);   color: #fcd34d; }
.notes-icon   { background: rgba(2,132,199,.15);   color: #7dd3fc; }

/* Status badges */
.badge-green  { background: rgba(40,160,90,.18);   color: #86efac; }
.badge-yellow { background: rgba(180,83,9,.22);    color: #fcd34d; }
.badge-red    { background: rgba(220,38,38,.22);   color: #fca5a5; }
.badge-gray   { background: rgba(255,255,255,.08); color: rgba(255,255,255,.48); }
.badge-blue   { background: rgba(37,99,235,.18);   color: #93c5fd; }

/* Overall badge */
.overall-badge.good    { background: rgba(40,160,90,.18);  color: #86efac; }
.overall-badge.partial { background: rgba(180,83,9,.22);   color: #fcd34d; }
.overall-badge.behind  { background: rgba(220,38,38,.22);  color: #fca5a5; }

/* Status pills */
.pill-complete    { background: rgba(40,160,90,.18);   color: #86efac; }
.pill-in-progress { background: rgba(180,83,9,.22);    color: #fcd34d; }
.pill-pending     { background: rgba(255,255,255,.08);  color: rgba(255,255,255,.48); }
.pill-overdue     { background: rgba(220,38,38,.22);   color: #fca5a5; }
.pill-paid        { background: rgba(40,160,90,.18);   color: #86efac; }

/* Amount cells */
.amount-zero   { color: rgba(255,255,255,.28); }
.amount-warn   { color: #fcd34d; }
.amount-danger { color: #fca5a5; }
.due-overdue   { color: #fca5a5; }

/* Note button (bubble icon in tables) */
.nb       { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.45); }
.nb:hover { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.8);  background: rgba(255,255,255,.06); }
.nb-has   { border-color: rgba(147,197,253,.35); color: #93c5fd; background: rgba(37,99,235,.12); }
.nb-has:hover { border-color: rgba(147,197,253,.6); }
.nb-urgent { border-color: rgba(252,165,165,.35); color: #fca5a5; background: rgba(220,38,38,.1); }
.nb-urgent:hover { border-color: rgba(252,165,165,.6); }

/* Issue summary pills */
.isp-red    { background: rgba(220,38,38,.2);  color: #fca5a5; }
.isp-yellow { background: rgba(180,83,9,.22);  color: #fcd34d; }
.isp-green  { background: rgba(40,160,90,.18); color: #86efac; }

/* Type badges (GL analytics) */
.ar-type { background: rgba(21,128,61,.2);   color: #86efac; }
.ap-type { background: rgba(185,28,28,.2);   color: #fca5a5; }
.je-type { background: rgba(109,40,217,.2);  color: #c4b5fd; }
.pr-type { background: rgba(29,78,216,.2);   color: #93c5fd; }

/* Days badge */
.days-badge { background: rgba(220,38,38,.2); color: #fca5a5; }

/* Priority badge */
.priority-badge { color: #fca5a5; background: rgba(220,38,38,.18); }
.task-critical-row { border-left-color: rgba(220,38,38,.7); }

/* Analytics empty state */
.analytics-empty { color: rgba(255,255,255,.38); }
.analytics-empty::before { color: #86efac; }
.flag-line { color: #fcd34d; }

/* SOP button */
.task-sop-btn { background: rgba(37,99,235,.12); color: #93c5fd; border-color: rgba(37,99,235,.25); }
.task-sop-btn:hover { background: rgba(37,99,235,.2); border-color: rgba(37,99,235,.45); }

/* Task filepath */
.task-filepath { background: rgba(255,255,255,.05); color: rgba(255,255,255,.38); border-color: rgba(255,255,255,.1); }
.task-filepath:hover { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); }

/* Local badge */
.local-badge { background: rgba(37,99,235,.18); color: #93c5fd; }

/* Notes feed */
.feed-item          { border-bottom-color: rgba(255,255,255,.07); }
.feed-item:hover    { background: rgba(255,255,255,.04); }
.feed-urgent        { background: rgba(220,38,38,.08); }
.feed-urgent:hover  { background: rgba(220,38,38,.12); }
.feed-label         { color: rgba(255,255,255,.9); }
.feed-ts            { color: rgba(255,255,255,.38); }
.feed-author        { color: rgba(255,255,255,.42); }
.feed-text          { color: rgba(255,255,255,.75); }
.comms-empty        { color: rgba(255,255,255,.35); }

/* Note items in modal thread */
.note-item         { background: rgba(255,255,255,.05); border-left-color: rgba(255,255,255,.15); }
.note-urgent-item  { background: rgba(220,38,38,.1);    border-left-color: #dc2626; }
.note-author       { color: rgba(255,255,255,.9); }
.note-ts           { color: rgba(255,255,255,.38); }
.note-item .note-text { color: rgba(255,255,255,.8); font-style: normal; }
.note-empty        { color: rgba(255,255,255,.38); }
.note-del:hover    { background: rgba(220,38,38,.2); color: #fca5a5; }

/* Note modal — keep readable on dark overlay */
.note-modal { background: #0a1628; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 64px rgba(0,0,0,.5); }
.note-modal-hd     { border-bottom-color: rgba(255,255,255,.1); }
.note-modal-label  { color: rgba(255,255,255,.42); }
.note-modal-title  { color: rgba(255,255,255,.9); }
.note-modal-x      { color: rgba(255,255,255,.42); }
.note-modal-x:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); }
.note-thread       { }
.note-compose      { border-top-color: rgba(255,255,255,.1); }
.note-field { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.88); }
.note-field::placeholder { color: rgba(255,255,255,.3); }
.note-field:focus  { border-color: var(--green); }
.note-urgent-label { color: rgba(255,255,255,.55); }
.note-email-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.55); }
.note-email-btn:hover { border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.85); }
.note-post-btn { background: var(--green); }
.note-post-btn:hover { background: #34c46a; }
.note-type-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.55); }
.note-type-btn:hover { border-color: var(--green); color: #86efac; }
.note-type-btn.active { border-color: var(--navy); background: var(--navy); color: #fff; }
.note-type-btn[data-type="issue"].active { background: #b91c1c; border-color: #b91c1c; }
.note-type-btn[data-type="help"].active  { background: #6d28d9; border-color: #6d28d9; }

/* Mention picker */
.mention-picker { background: #0a1628; border-color: rgba(255,255,255,.12); }
.mention-chip { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.12); }
.mention-chip:hover { background: var(--green); color: #fff; border-color: var(--green); }
.mention-tag { background: rgba(37,99,235,.18); color: #93c5fd; border-color: rgba(37,99,235,.3); }
.note-mention-btn { background: rgba(255,255,255,.07); color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.14); }
.note-mention-btn:hover { background: rgba(255,255,255,.13); }

/* Info blocks */
.ib-sop  { border-color: rgba(37,99,235,.3);    background: rgba(37,99,235,.08); }
.ib-file { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.ib-file .sb-icon { color: rgba(255,255,255,.38); }

/* Note type badges */
.nt-note  { background: rgba(255,255,255,.07); color: rgba(255,255,255,.45); }
.nt-issue { background: rgba(220,38,38,.2);    color: #fca5a5; }
.nt-help  { background: rgba(109,40,217,.2);   color: #c4b5fd; }

/* Footer */
.footer { color: rgba(255,255,255,.28); }
.footer code { background: rgba(255,255,255,.07); color: rgba(255,255,255,.42); border-radius: 4px; padding: 1px 6px; }

/* ---- CG Monogram Badge & Redesigned Header ---- */
.header {
  background: rgba(0,10,36,.92);
  backdrop-filter: blur(16px);
  box-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.header-logo-link {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
}
.cg-logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #28A05A 0%, #1a7a43 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 900;
  color: #fff; letter-spacing: .02em;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(40,160,90,.35);
}
.header-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.header-company {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}
.header-period-txt {
  font-size: .72rem;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
}
/* Health badge pill — uppercase, bordered like CDE */
.overall-badge {
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .7rem;
  border: 1px solid transparent;
}
.overall-badge.good    { border-color: rgba(40,160,90,.3); }
.overall-badge.partial { border-color: rgba(252,211,77,.3); }
.overall-badge.behind  { border-color: rgba(252,165,165,.3); }