/* ════════════════════════════════════════════════════════════
   GSRA Workspace — Compliance module (v2 "Private Ledger")
   Extends the core design system (style.css). Same tokens only.
   ════════════════════════════════════════════════════════════ */

/* Wider canvas for the owner tracker views */
.c-page-wide { max-width: 1140px; }

/* Red-accent stat card (unallocated alert) */
.stat-card.red::before { background: linear-gradient(to bottom, #d0463d, var(--red)); opacity: 1; }
.stat-card.red::after  { background: radial-gradient(closest-side, rgba(179,38,30,0.10), transparent); }
.stat-value .spark { margin-left: 10px; vertical-align: 2px; opacity: .85; }

/* ── Tabs (segmented control) ────────────────────────────── */
.ctabs {
  display: inline-flex;
  gap: 3px;
  background: rgba(7,64,104,0.055);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 1.4rem;
  max-width: 100%;
  overflow-x: auto;
}
.ctab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7.5px 15px;
  border: none; background: transparent;
  border-radius: 9px;
  color: var(--text2); font-size:14.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background .18s, color .18s, box-shadow .18s;
}
.ctab .ti { font-size:17px; color: var(--text3); transition: color .18s; }
.ctab:hover { color: var(--text); background: rgba(255,255,255,0.65); }
.ctab.active {
  background: var(--surface);
  color: var(--accent-text); font-weight: 600;
  box-shadow: 0 1px 3px rgba(9,35,54,0.10), 0 3px 10px rgba(9,35,54,0.07);
}
.ctab.active .ti, .ctab:hover .ti { color: var(--accent); }
.c-fy-select { width: auto; padding: 7px 30px 7px 12px; font-size:14px; }

/* ── Chips & badges ──────────────────────────────────────── */
.cws-badge {
  display: inline-flex; align-items: center;
  padding: 2.5px 9px;
  border-radius: 20px;
  border: 1px solid;
  font-size:12.5px; font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.cchip {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  background: rgba(7,64,104,0.05);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size:12px; font-weight: 500; color: var(--text2);
  white-space: nowrap;
}

/* Living-chart primitives (F5/F6) */
.dial { vertical-align: middle; flex-shrink: 0; }
.spark { display: block; overflow: visible; }

/* Deadline countdown chips (rendered as <button> for keyboard access) */
button.dl-chip { appearance: none; font-family: inherit; cursor: pointer; }
button.dl-chip:focus-visible { outline: none; box-shadow: var(--ring); }

.dl-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid transparent;
  font-size:13px; font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dl-chip.ok   { background: var(--sage-light); color: var(--sage-text); border-color: rgba(146,154,125,.45); }
.dl-chip.warn { background: var(--gold-light); color: var(--gold-text); border-color: rgba(184,149,62,.32); }
.dl-chip.due  { background: var(--red-light);  color: var(--red);       border-color: rgba(179,38,30,.28); }
.dl-chip.over { background: var(--red);        color: #fff;             border-color: var(--red); }
.dl-chip.done { background: var(--blue-light); color: var(--blue-text); border-color: rgba(28,106,163,.2); }

/* Dashboard deadline strip */
.dl-strip { display: flex; flex-wrap: wrap; gap: 9px; }
.dl-chip-lg { padding: 8px 14px; font-size:14px; font-weight: 500; cursor: pointer; transition: transform .16s, box-shadow .16s; }
.dl-chip-lg b { font-weight: 700; }
.dl-chip-lg:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(9,35,54,0.12); }
.dl-chip-lg .dl-days { font-weight: 700; margin-left: 4px; }
.dl-chip-lg.nearest { position: relative; }
.dl-chip-lg.nearest::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); animation: livedot 2s ease-out infinite;
}

/* ── Donut charts ────────────────────────────────────────── */
.donut-row { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; justify-content: space-around; }
.donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.donut-arc { transition: stroke-dashoffset .9s cubic-bezier(.22,1,.36,1); }
.donut-pct { font-family: var(--font-head); font-size:16px; font-weight: 600; fill: var(--text); }
.donut-sub { font-size:9.5px; fill: var(--text3); font-weight: 500; }
.donut-label { text-align: center; }
.donut-meta { font-size:12px; color: var(--text3); margin-top: 4px; }

/* ── Partner stacked bars ────────────────────────────────── */
.hbar-row { margin-bottom: 14px; }
.hbar-row:last-child { margin-bottom: 0; }
.hbar-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; gap: 8px; }
.hbar {
  display: flex; height: 10px; border-radius: 6px; overflow: hidden;
  background: rgba(7,64,104,0.06); border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(9,35,54,0.05);
}
.hbar span { display: block; height: 100%; transition: width .8s cubic-bezier(.22,1,.36,1); }

/* ── Workload heat grid ──────────────────────────────────── */
.heat-grid { border-collapse: collapse; width: 100%; font-size:14px; }
.heat-grid th {
  font-size:11.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text3); font-weight: 600; text-align: center; padding: 4px 8px;
}
.heat-grid th:first-child { text-align: left; }
.heat-name { padding: 6px 8px 6px 0; font-weight: 500; white-space: nowrap; }
.heat-cell {
  text-align: center; padding: 6px 8px; min-width: 52px;
  border-radius: 7px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background .4s;
}
.heat-total { text-align: center; font-weight: 700; color: var(--accent-text); }
.heat-unalloc .heat-name { color: var(--gold-text); }

/* ── Filter bar ──────────────────────────────────────────── */
.c-filterbar { display: flex; flex-direction: column; gap: 9px; margin-bottom: 1rem; }
.c-wschips { display: flex; gap: 6px; flex-wrap: wrap; }
.cchip-f {
  padding: 5.5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-med);
  background: var(--surface);
  color: var(--text2); font-size:13.5px; font-weight: 500;
  cursor: pointer; transition: border-color .16s, background .16s, color .16s, box-shadow .16s, transform .16s;
}
.cchip-f:hover { border-color: rgba(7,64,104,0.34); color: var(--text); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(9,35,54,0.08); }
.cchip-f.on {
  background: linear-gradient(180deg, var(--accent-raised), var(--accent) 85%);
  border-color: #063a5e; color: #fff; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 1px 3px rgba(7,64,104,0.30);
}
.c-selects { display: flex; gap: 8px; flex-wrap: wrap; }
.c-mini-select { width: auto; min-width: 130px; padding: 6.5px 28px 6.5px 10px; font-size:14px; }
input.c-mini-select { padding-right: 10px; min-width: 170px; }

/* ── Tracker table ───────────────────────────────────────── */
.c-table-card { padding: 0; overflow: hidden; }
.c-table-scroll { overflow-x: auto; max-height: calc(100vh - 320px); overflow-y: auto; }
.ctable { width: 100%; border-collapse: collapse; font-size:14.5px; }
.ctable thead th {
  position: sticky; top: 0; z-index: 2;
  background: #f4f5ec;
  font-size:11.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text2); font-weight: 600; text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-med);
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(24,52,74,0.06);
}
.ctable tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ctable tbody tr { cursor: pointer; transition: background .14s, box-shadow .14s; }
.ctable tbody tr:hover { background: rgba(7,64,104,0.032); box-shadow: inset 3px 0 0 var(--gold-soft); }
.ctable tbody tr:last-child td { border-bottom: none; }
.c-table-foot { padding: 9px 14px; font-size:13px; color: var(--text3); border-top: 1px solid var(--border); background: var(--surface2); }
.c-assignee { display: inline-flex; align-items: center; gap: 7px; }

@keyframes crowFlash { 0% { background: var(--gold-light); } 100% { background: transparent; } }
.ctable-flash { animation: crowFlash 1.1s ease; }

/* Inline status select styled as a pill */
.c-status-select {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 3.5px 24px 3.5px 11px;
  font-size:13px; font-weight: 600;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23586871' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  transition: box-shadow .15s, transform .15s;
  max-width: 190px;
}
.c-status-select:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(9,35,54,0.10); }
.c-status-select:focus-visible { outline: none; box-shadow: var(--ring); }
.c-st-todo { background-color: rgba(7,64,104,0.05); color: var(--text2); border-color: var(--border); }
.c-st-wip  { background-color: var(--gold-light);  color: var(--gold-text); border-color: rgba(184,149,62,.3); }
.c-st-done { background-color: var(--blue-light);  color: var(--blue-text); border-color: rgba(28,106,163,.2); }
.c-st-ntbf { background-color: var(--surface2);    color: var(--text3); border-color: var(--border); }

/* Inline editable inputs (UDIN / remarks) */
.c-inline-input {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  padding: 3px 7px;
  font-size:13.5px;
  width: 120px;
  color: var(--text);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.c-inline-input:hover { border-color: var(--border-med); background: var(--surface); }
.c-inline-input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: var(--ring); }
.c-inline-wide { width: 200px; }
.c-udin { width: 130px; font-family: var(--font-mono); font-size:12.5px; }
.c-inline-label { display: inline-flex; align-items: center; gap: 6px; font-size:12px; color: var(--text3); font-weight: 600; }

/* ── Employee assignment cards ───────────────────────────── */
.c-cards { display: flex; flex-direction: column; gap: 11px; }
.c-item { padding: 1.1rem 1.25rem; }
.c-item:hover { border-color: rgba(7,64,104,0.20); box-shadow: var(--shadow-lift); }
.c-item-done { opacity: .72; }
.c-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: .8rem; flex-wrap: wrap; }
.c-item-client { font-weight: 600; font-size:16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c-item-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: .85rem; flex-wrap: wrap; }
.c-item-fields { display: flex; gap: 14px; flex-wrap: wrap; }

/* Status stepper */
.stepper { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.step-link { width: 14px; height: 2px; background: var(--border-med); flex-shrink: 0; }
.step-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 11px;
  border-radius: 20px;
  border: 1.5px solid var(--border-med);
  background: var(--surface);
  color: var(--text3); font-size:12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s, transform .18s;
}
.step-pill:disabled { cursor: default; }
.step-pill.past { background: var(--accent-light); border-color: var(--accent); color: var(--accent-text); }
.step-pill.now {
  background: linear-gradient(180deg, var(--accent-raised), var(--accent) 85%);
  border-color: var(--accent); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 2px 6px rgba(7,64,104,0.32);
}
.step-pill.next:not(:disabled):hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-light); transform: translateY(-1px); }
.step-pill.past:not(:disabled):hover { filter: brightness(.96); }

/* The Brass Seal — completion / filing stamp (F9) */
.gsra-seal {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; border-radius: inherit;
  background: rgba(255,255,255,0.64);
  backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);
}
.gsra-seal .seal-mark { filter: drop-shadow(0 2px 5px rgba(122,94,29,0.4)); }
.gsra-seal.steel .seal-mark { filter: drop-shadow(0 2px 5px rgba(60,70,80,0.32)); }
.seal-ripple {
  position: absolute; width: 66px; height: 66px; border-radius: 50%;
  border: 2px solid var(--gold-soft);
}

/* Celebration ring (terminal status) */
.celebrate-ring {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.74);
  backdrop-filter: blur(1.5px);
  border-radius: inherit;
  animation: fadeUp .2s ease;
  pointer-events: none;
  z-index: 5;
}
.celebrate-ring svg { width: 54px; height: 54px; }
.cel-c {
  stroke: var(--blue); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 145; stroke-dashoffset: 145;
  animation: celDraw .55s cubic-bezier(.65,0,.45,1) forwards;
}
.cel-k {
  stroke: var(--blue); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 34; stroke-dashoffset: 34;
  animation: celDraw .35s .4s cubic-bezier(.65,0,.45,1) forwards;
}
@keyframes celDraw { to { stroke-dashoffset: 0; } }

/* ── Bulk-select action bar ──────────────────────────────── */
.select-bar {
  position: sticky; bottom: 14px; z-index: 60;
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-med);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  animation: fadeUp .2s cubic-bezier(.22,1,.36,1);
}

/* ── Detail drawer ───────────────────────────────────────── */
.c-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(6,26,42,0.44);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: var(--z-modal);
  display: flex; justify-content: flex-end;
}
.c-drawer {
  width: min(440px, 94vw);
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-radius: 18px 0 0 18px;
  box-shadow: -8px 0 24px rgba(4,20,33,0.14), -30px 0 80px rgba(4,20,33,0.26);
  display: flex; flex-direction: column;
  animation: drawerIn .28s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
@keyframes drawerIn { from { transform: translateX(46px); opacity: 0; } to { transform: none; opacity: 1; } }
.c-drawer-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: 1.25rem 1.35rem;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(300px 120px at 100% 0%, rgba(184,149,62,0.09), transparent 70%),
    var(--surface2);
}
.c-drawer-body { flex: 1; min-height: 0; padding: 1.2rem 1.3rem 2rem; overflow-y: auto; }
.c-drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.c-drawer-grid .form-select, .c-drawer-grid .form-input { margin-top: 6px; }
.c-drawer-body textarea.form-input { margin-top: 6px; resize: vertical; }

.c-history { display: flex; flex-direction: column; gap: 2px; }
.c-hist-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.c-hist-item:last-child { border-bottom: none; }
.c-hist-item .ti { color: var(--text3); font-size:16px; margin-top: 2px; }

/* ── Import ──────────────────────────────────────────────── */
.dropzone {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 1rem 1.4rem;
  border: 1.5px dashed var(--border-med);
  border-radius: 12px;
  background: var(--surface2);
  color: var(--text2); font-weight: 500;
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: var(--accent-light); color: var(--accent-text); box-shadow: 0 3px 10px rgba(7,64,104,0.10); }
.dropzone .ti { font-size:23px; color: var(--accent); }
.c-import-stats { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.c-import-sec { margin: 8px 0; }
.c-import-sec summary { cursor: pointer; font-weight: 600; font-size:14px; color: var(--text2); padding: 4px 0; }
.c-import-list {
  max-height: 240px; overflow-y: auto;
  font-size:13.5px; color: var(--text2);
  padding: 8px 12px; margin-top: 4px;
  background: var(--surface2); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 3px;
}

/* ── Misc ────────────────────────────────────────────────── */
.c-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.c-empty {
  text-align: center; padding: 2.6rem 1rem; color: var(--text2);
}
.c-empty .ti {
  font-size:27px; color: var(--accent); display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--accent-light); border: 1px solid rgba(7,64,104,0.10);
  margin-bottom: 12px;
}
.c-dl-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: .6rem; flex-wrap: wrap; }

@media (max-width: 900px) {
  .c-grid-2 { grid-template-columns: 1fr; }
  .donut-row { gap: 1rem; }
}
@media (max-width: 760px) {
  .ctabs { width: 100%; }
  .c-drawer-grid { grid-template-columns: 1fr; }
  .c-table-scroll { max-height: none; }
  .select-bar { flex-wrap: wrap; }
  .topbar { flex-wrap: wrap; }
  .c-drawer { border-radius: 0; }
}

/* ── Dashboard overview rows (Total · Completed · Pending) ── */
.ov-row {
  display: grid;
  grid-template-columns: 210px auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--border);
}
.ov-row:last-child { border-bottom: none; }
.ov-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ov-name { font-weight: 600; font-size:14.5px; }
.ov-nums { display: flex; gap: 6px; }
.ov-num {
  display: flex; flex-direction: column; align-items: center;
  min-width: 58px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.ov-num:hover { border-color: var(--accent); background: var(--accent-light); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(9,35,54,0.08); }
.ov-num:active { transform: translateY(0); }
.ov-n { font-family: var(--font-head); font-weight: 600; font-size:18px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ov-l { font-size:11px; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; }
.ov-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: rgba(7,64,104,0.06); border: 1px solid var(--border); box-shadow: inset 0 1px 2px rgba(9,35,54,0.05); }
.ov-bar span { display: block; height: 100%; transition: width .8s cubic-bezier(.22,1,.36,1); }
@media (max-width: 760px) {
  .ov-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ── Deadline timeline (dashboard) ─────────────────────────── */
.dl-timeline { display: flex; flex-direction: column; }
.dl-tl-row {
  display: grid;
  grid-template-columns: 16px 92px 1fr auto;
  align-items: center; gap: 12px;
  padding: 9px 6px; width: 100%;
  border: none; border-bottom: 1px solid var(--border);
  background: transparent; cursor: pointer; text-align: left;
  transition: background .14s;
}
.dl-tl-row:last-child { border-bottom: none; }
.dl-tl-row:hover { background: rgba(7,64,104,0.03); }
.dl-tl-row:focus-visible { outline: none; box-shadow: inset var(--ring); }
.dl-tl-dial { display: inline-flex; align-items: center; justify-content: center; }
.dl-tl-row.nearest .dial { border-radius: 50%; animation: livedot 2s ease-out infinite; }
.dl-chip .dial { margin-right: 1px; }
.dl-tl-date { font-weight: 700; font-size:14px; display: flex; flex-direction: column; line-height: 1.1; }
.dl-tl-date small { font-weight: 500; font-size:11px; color: var(--text3); }
.dl-tl-body { min-width: 0; }
.dl-tl-days { font-weight: 700; font-size:13px; font-variant-numeric: tabular-nums; color: var(--text2); white-space: nowrap; }
.dl-tl-row.due .dl-tl-days, .dl-tl-row.over .dl-tl-days { color: var(--red); }
.dl-tl-row.warn .dl-tl-days { color: var(--gold-text); }

/* Heat cells clickable */
.heat-click { cursor: pointer; transition: filter .12s; }
.heat-click:hover { filter: brightness(.94); }

/* ── Ongoing Tasks dashboard ───────────────────────────────── */
.ong-group { padding: 0; overflow: hidden; margin-bottom: 14px; }
/* Urgency tones on group-card headings (pending queue's due buckets) */
.ong-grp-name.q-tone-red { color: var(--red); }
.ong-grp-name.q-tone-gold { color: var(--gold-text); }
/* Cards nested inside a boxed group (.ong-group has no padding of its own) */
.ong-group .ong-cards-pad { padding: 12px 14px; }
.ong-grp-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background:
    radial-gradient(240px 80px at 100% 0%, rgba(184,149,62,0.07), transparent 70%),
    var(--surface2);
  border-bottom: 1px solid var(--border);
}
.ong-grp-name { font-weight: 600; font-size:15px; flex: 1; }
.ong-list { display: flex; flex-direction: column; }
.ong-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  transition: background .14s;
}
.ong-row:hover { background: rgba(7,64,104,0.025); }
.ong-row:last-child { border-bottom: none; }
.ong-src { font-size:18px; flex-shrink: 0; width: 20px; text-align: center; }
.ong-main { flex: 1; min-width: 0; }
.ong-title { font-weight: 500; font-size:14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ong-sub { font-size:13px; color: var(--text2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ong-timer { font-family: var(--font-mono); color: var(--gold-text); font-weight: 600; }
/* A task whose partner is also one of its assignees: tinted row + badge. */
.ong-row-partner { background: var(--gold-light); box-shadow: inset 3px 0 0 0 var(--gold-text); }
.ong-row-partner:hover { background: var(--gold-light); }
.ong-partner-tag {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 7px; vertical-align: middle;
  padding: 1px 8px; border-radius: 9px; font-size:11.5px; font-weight: 700;
  background: var(--surface); color: var(--gold-text); border: 1px solid var(--gold-text);
}
.ong-partner-tag .ti { font-size:12px; }

/* Monthly month-picker input in the topbar */
input.c-fy-select { padding: 6px 10px; font-family: var(--font-body); }

/* Dashboard partner toolbar */
.c-dash-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }

/* ── Member multi-select chips + stacked avatars ──────────── */
.c-mchips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.c-mchips .cchip-f { font-size:13px; padding: 4px 11px; }
.select-bar .c-mchips { max-width: 55%; overflow-x: auto; }
.c-avstack { display: inline-flex; align-items: center; }
.c-avstack .avatar { margin-right: -7px; box-shadow: 0 0 0 2px var(--surface); }
.c-avstack .avatar:last-of-type { margin-right: 6px; }

/* ── Primary/secondary assignees ──────────────────────────── */
.c-sec-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 9px; font-size:11.5px; font-weight: 700;
  background: var(--surface2); color: var(--text2); border: 1px solid var(--border);
}
/* ── Collapsible Home cards ───────────────────────────────────── */
.hc > .card-title, .hc > .home-q-head, .hc > .home-att-head, .hc > .ong-grp-head { cursor: pointer; }
.hc-caret { margin-left: auto; flex: none; color: var(--text3); font-size:16px; transition: transform .18s ease; }
/* Collapsed: hide every direct child except the header (works for .card and
   .ong-group alike, which both carry the `card` class). */
.hc-off > * { display: none !important; }
.hc-off > .card-title,
.hc-off > .home-q-head,
.hc-off > .home-att-head,
.hc-off > .ong-grp-head { display: flex !important; }
.hc-off > .card-title { margin-bottom: 0; } /* no dangling gap under a collapsed title */
.hc-off.ong-group > .ong-grp-head { border-bottom: 0; }
/* A collapsed card in the 2-col grid must shrink to its title, not stretch to
   the sibling column's height. */
.c-grid-2 > .hc-off { align-self: start; }
.hc-off > .card-title .hc-caret,
.hc-off > .home-q-head .hc-caret,
.hc-off > .home-att-head .hc-caret,
.hc-off > .ong-grp-head .hc-caret { transform: rotate(-90deg); }
.c-mgr-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 9px; font-size:11.5px; font-weight: 700;
  background: var(--accent-light, var(--surface2)); color: var(--accent-text, var(--accent));
  border: 1px solid var(--accent, var(--border));
}
.heat-sec { font-size:10px; font-weight: 700; color: var(--text3); vertical-align: super; margin-left: 1px; }
.c-wl-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-size:13.5px; color: var(--text2); font-weight: 500;
  margin-bottom: 10px; cursor: pointer; user-select: none;
}
.c-wl-toggle input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
/* Allocate action bar: the primary+secondary picker sits inline */
.c-assign-pickwrap { display: flex; flex-direction: column; gap: 4px; min-width: 260px; max-width: 420px; }
.c-assign-pickwrap .form-label { margin: 0; font-size:12px; }
.c-assign-pickwrap .form-select { padding: 6px 28px 6px 10px; font-size:14px; }
.c-assign-pickwrap .c-mchips { max-height: 62px; overflow-y: auto; }

/* ── Multi-select filter dropdown ─────────────────────────── */
.ms-wrap { position: relative; display: inline-block; }
.ms-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6.5px 10px; border-radius: var(--radius);
  border: 1px solid var(--border-med); background: var(--surface);
  color: var(--text2); font-size:14px; font-weight: 500; cursor: pointer;
  white-space: nowrap; max-width: 220px;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.ms-btn .ti { font-size:15px; }
.ms-btn:hover { border-color: rgba(7,64,104,0.32); color: var(--text); box-shadow: 0 2px 6px rgba(9,35,54,0.07); }
.ms-btn.on { background: linear-gradient(180deg, var(--accent-raised), var(--accent) 85%); border-color: #063a5e; color: #fff; }
.ms-pop {
  position: absolute; z-index: 300; top: calc(100% + 4px); left: 0;
  min-width: 210px; max-width: 300px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-md);
  animation: slideIn .16s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
.ms-actions { display: flex; justify-content: flex-end; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.ms-actions button { border: none; background: none; color: var(--accent); font-size:13px; font-weight: 600; cursor: pointer; padding: 2px 6px; }
.ms-list { max-height: 260px; overflow-y: auto; padding: 4px; }
.ms-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); font-size:14px; cursor: pointer; transition: background .12s; }
.ms-opt:hover { background: rgba(7,64,104,0.05); }
.ms-opt input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

/* ── Sortable table headers ───────────────────────────────── */
.th-sort { cursor: pointer; user-select: none; transition: color .12s; }
.th-sort:hover { color: var(--accent) !important; }
.th-sort.active { color: var(--accent) !important; }

/* ── Inline client-edit pencil ────────────────────────────── */
.c-edit-pencil {
  border: none; background: none; cursor: pointer; padding: 1px 3px;
  color: var(--text3); border-radius: 4px; vertical-align: baseline;
  transition: color .14s, background .14s;
}
.c-edit-pencil:hover { color: var(--accent); background: var(--accent-light); }
.c-edit-pencil .ti { font-size:14px; }

/* ── Reports: team-workload summary bars ──────────────────── */
.rep-wl-grid { display: flex; flex-direction: column; gap: 10px; }
.rep-wl-row { display: grid; grid-template-columns: 180px 1fr 230px; gap: 12px; align-items: center; }
.rep-wl-name { display: flex; align-items: center; gap: 7px; font-weight: 500; font-size:14px; }
.rep-wl-bar { position: relative; height: 14px; background: var(--accent-light); border-radius: 7px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(9,35,54,0.06); }
.rep-wl-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); border-radius: 7px; }
.rep-wl-done { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--accent-h), var(--accent)); border-radius: 7px; }
.rep-wl-nums { font-size:13px; color: var(--text2); text-align: right; }
@media (max-width: 720px) { .rep-wl-row { grid-template-columns: 1fr; gap: 3px; } .rep-wl-nums { text-align: left; } }

/* ── Today ribbon — "the season ahead" hero (F11) ─────────── */
.today-ribbon .tr-track { position: relative; height: 96px; margin-top: 10px; }
.tr-line {
  position: absolute; left: 0; right: 0; top: 48px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--gold-soft) 86%, var(--gold) 100%);
}
.tr-today { position: absolute; left: 0; top: 48px; transform: translate(-50%, -50%); display: flex; }
.tr-today-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.tr-today-lbl {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-size:10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-text); white-space: nowrap;
}
.tr-notch {
  position: absolute; top: 48px; transform: translate(-50%, -50%);
  background: none; border: none; padding: 0; cursor: pointer;
}
.tr-dot { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--surface); transition: transform .15s; }
.tr-notch.ok .tr-dot { background: var(--sage); }
.tr-notch.warn .tr-dot { background: var(--gold); }
.tr-notch.due .tr-dot, .tr-notch.over .tr-dot { background: var(--red); }
.tr-notch.nearest .tr-dot { animation: livedot 2s ease-out infinite; }
.tr-notch:hover .tr-dot { transform: scale(1.3); }
.tr-notch:focus-visible { outline: none; }
.tr-notch:focus-visible .tr-dot { box-shadow: var(--ring); transform: scale(1.3); }
.tr-flag { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; white-space: nowrap; }
.tr-notch.tr-up .tr-flag { top: auto; bottom: 15px; }
.tr-flag b { font-family: var(--font-head); font-size:13.5px; color: var(--accent-text); line-height: 1.1; }
.tr-flag span { font-size:11px; color: var(--text2); }
.tr-notch:hover .tr-flag b { color: var(--accent); }
@media (max-width: 760px) { .today-ribbon { display: none; } }

/* ── Home dashboards (My Day / Firm Overview) ─────────────── */
.home-q-section { margin-top: 10px; }
.home-q-head { font-size:12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text3); padding: 4px 2px; display: flex; align-items: center; gap: 7px; }
.home-q-head.red { color: var(--red); }
.home-q-head.gold { color: var(--gold-text); }
.home-q-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 11px;
  border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px;
  background: var(--surface); cursor: pointer;
  transition: border-color .16s, background .16s, transform .16s, box-shadow .16s;
}
.home-q-row:hover { border-color: rgba(7,64,104,.30); background: var(--accent-light); transform: translateX(2px); box-shadow: 0 2px 8px rgba(9,35,54,0.07); }
.home-q-main { flex: 1; min-width: 0; }
.home-att-group { margin-top: 8px; }
.home-att-head { font-size:12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text3); padding: 6px 2px 3px; display: flex; align-items: center; gap: 6px; }
.home-att-head.red { color: var(--red); }
.home-att-head.gold { color: var(--gold-text); }
.home-att-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .14s, transform .14s; }
.home-att-row:hover { background: var(--accent-light); transform: translateX(2px); }
.home-dl-strip { display: flex; flex-wrap: wrap; gap: 8px; }

/* Report grouping — header rows injected by the "Group by" chips */
.rep-group-row td {
  background: var(--bg2, #f2f5f8);
  border-top: 1.5px solid var(--line, #dbe3e9);
  padding: 7px 12px;
  font-size: 13px;
}
.rep-group-row td i { color: var(--text3); font-size: 12px; }