:root {
  /* Skousen Search brand */
  --brand-navy: #0A2540;
  --brand-green: #3D7D41;

  --bg: #081726;          /* deep navy-black */
  --panel: #0d2135;       /* navy panel */
  --panel-2: #15314b;     /* lighter navy */
  --line: #274865;
  --line-soft: #1b3450;
  --text: #eaf0f6;
  --text-dim: #9fb2c6;
  --accent: #3D7D41;      /* brand green = primary accent */
  --accent-hover: #489350;
  --danger: #E5484D;
  --radius: 10px;
  --slot-h: 46px;      /* pixel height of one 30-min row */
  --timecol-w: 74px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  row-gap: 10px;
  flex-wrap: wrap;
  padding: 12px 18px;
  background: linear-gradient(180deg, #0d2338, #0a1c2f);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.brand:hover h1 { color: var(--brand-green); }
.brand h1 { font-size: 16px; margin: 0; font-weight: 650; letter-spacing: .2px; line-height: 1.15; }
.brand-text { display: flex; flex-direction: column; }
.brand-welcome { font-size: 11px; color: var(--brand-green); font-weight: 600; line-height: 1.1; }
.brand .dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-green), #1f5f8a);
  box-shadow: 0 0 0 3px rgba(61, 125, 65, .18);
}
.nav { display: flex; align-items: center; gap: 8px; }
.range-label { color: var(--text-dim); margin-left: 8px; font-variant-numeric: tabular-nums; }
.jump-date {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  color-scheme: dark;
  cursor: pointer;
}
.view-toggle { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }

/* ---------- Responsive header: JS (fitHeader) measures ACTUAL overflow and adds
   body.hdr-c1/2/3 only when the header genuinely needs more rows. TEXT WINS:
   c1 drops the emoji icons (words stay), c2 tightens + truncates long labels,
   c3 truncates harder + hides the least-used extras. Never icon-only. */
body.hdr-c1 .topbar .bi, body.hdr-c1 .brand-welcome, body.hdr-c1 #rangeLabel { display: none; }
body.hdr-c1 .topbar { gap: 8px; }
body.hdr-c2 .topbar .btn { padding: 6px 9px; font-size: 12.5px; }
body.hdr-c2 .topbar .bl { display: inline-block; max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
body.hdr-c2 .jump-date, body.hdr-c2 #userName { display: none; }
body.hdr-c2 .topbar { gap: 6px; }
body.hdr-c3 .topbar .bl { max-width: 48px; }
body.hdr-c3 #copyDayBtn, body.hdr-c3 #copyWeekBtn, body.hdr-c3 .brand-hq { display: none; }
body.hdr-c3 .topbar { padding: 10px 12px; }
body.hdr-c3 .topbar .btn { padding: 5px 7px; font-size: 12px; }
body.hdr-c3 .nav, body.hdr-c3 .view-toggle, body.hdr-c3 .hgrp, body.hdr-c3 .tools-group { gap: 4px; }

/* ---------- Buttons (buttons over links, always) ---------- */
.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .04s;
}
.btn:hover { background: color-mix(in srgb, var(--panel-2) 70%, #ffffff 8%); border-color: color-mix(in srgb, var(--line) 60%, #ffffff 12%); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn.ghost { background: transparent; }
.btn.accent { background: var(--accent); border-color: var(--accent); }
.btn.accent:hover { background: var(--accent-hover); }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: rgba(229,72,77,.12); }
.btn.toggle.active { background: var(--accent); border-color: var(--accent); }

/* ---------- Calendar grid ---------- */
.layout { padding: 14px; }
.calendar-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.calendar { overflow: auto; max-height: calc(100vh - 120px); }

.cal-grid {
  display: grid;
  grid-template-columns: var(--timecol-w) repeat(var(--ncols), 1fr);
  min-width: 720px;
  justify-content: start;
}
/* Day view: let the single day fill the whole width */
.cal-grid.day-mode {
  grid-template-columns: var(--timecol-w) 1fr;
  min-width: 0;
}

/* header row */
.col-head {
  position: sticky; top: 0; z-index: 10;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line-soft);
  padding: 8px 10px;
  text-align: left;
}
.col-head.time-head {
  border-left: none;
  position: sticky; left: 0; z-index: 16;   /* freeze the top-left corner */
}

/* freeze the time column when scrolling sideways */
.time-gutter {
  position: sticky; left: 0; z-index: 6;
  background: var(--panel);
}
.col-head { padding: 10px 12px; }
.col-head .dow { font-weight: 800; font-size: 17px; letter-spacing: .2px; }
.col-head .date { color: var(--text); font-size: 13.5px; font-weight: 600; margin-top: 2px; opacity: .85; }
.col-head.is-today .dow { color: var(--accent); }
.col-head.is-today .date { color: var(--accent); opacity: 1; }
.col-head.is-today { box-shadow: inset 0 -2px 0 var(--accent); }
.col-head.weekend .dow { color: var(--text-dim); }

/* time gutter */
.time-cell {
  height: var(--slot-h);
  border-top: 1px solid var(--line-soft);
  color: var(--text-dim);
  font-size: 11px;
  padding: 2px 8px 0 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.time-cell.hour { color: var(--text); }

/* day columns as positioned containers */
.day-col {
  position: relative;
  border-left: 1px solid var(--line-soft);
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--slot-h) - 1px),
      var(--line-soft) calc(var(--slot-h) - 1px),
      var(--line-soft) var(--slot-h)
    );
}
.day-col.weekend { background-color: rgba(255,255,255,.015); }
.day-col.is-today { background-color: rgba(61,125,65,.08); }

/* clickable empty slot overlay */
.slot {
  position: absolute; left: 0; right: 0;
  height: var(--slot-h);
  cursor: pointer;
}
.slot:hover { background: rgba(255,255,255,.05); }

/* a logged block */
.block {
  position: absolute;
  left: 3px; right: 3px;
  border-radius: 8px;
  padding: 5px 8px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  color: #0d0f13;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  font-size: 13px;
  line-height: 1.3;
}
.block.dragging {
  cursor: grabbing; opacity: .9; z-index: 30;
  box-shadow: 0 8px 24px rgba(0,0,0,.55); overflow: visible;
}
.block { transition: filter .1s, box-shadow .1s; }
.block:hover { filter: brightness(1.05); box-shadow: 0 2px 8px rgba(0,0,0,.45); z-index: 2; }
.block .b-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block .b-note { opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.block .b-job {
  display: inline-block; margin-top: 3px;
  background: rgba(0,0,0,.22); color: #fff;
  border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 600;
}
.block .b-link {
  display: inline-block; margin-top: 3px; margin-left: 4px;
  background: rgba(255,255,255,.28); color: #12141a;
  border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 600;
}

/* current-time indicator */
.now-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed #22D3EE; z-index: 4; pointer-events: none; }
.now-line::before {
  content: ""; position: absolute; left: -5px; top: -6px;
  width: 10px; height: 10px; border-radius: 50%; background: #22D3EE;
  box-shadow: 0 0 6px rgba(34,211,238,.8);
}
.now-pill {
  position: absolute; left: 8px; top: -9px;
  background: #22D3EE; color: #04121a; font-size: 9px; font-weight: 800;
  padding: 1px 7px; border-radius: 8px; letter-spacing: .3px; white-space: nowrap;
}
.block.interview { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }

.export-summary {
  margin: 8px 0 2px; padding: 8px 12px; border-radius: 8px;
  background: rgba(61,125,65,.14); border: 1px solid rgba(61,125,65,.4);
  color: var(--brand-green); font-weight: 700; font-size: 13px;
}

/* planned / unconfirmed blocks: faded + dashed until you confirm they happened */
.block.unconfirmed { opacity: .6; border-style: dashed; border-width: 1.5px; }
/* a planned block whose time has already passed — nudge to mark done/skipped */
.block.needs-review {
  opacity: 1; border: 2px solid #F5A623;
  box-shadow: 0 0 0 2px rgba(245,166,35,.35), 0 0 10px rgba(245,166,35,.55);
  animation: reviewPulse 2s ease-in-out infinite;
}
.block.needs-review::before {
  content: "⚠"; position: absolute; top: 2px; right: 5px;
  font-size: 11px; color: #F5A623; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
@keyframes reviewPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(245,166,35,.30), 0 0 8px rgba(245,166,35,.45); }
  50%      { box-shadow: 0 0 0 2px rgba(245,166,35,.55), 0 0 14px rgba(245,166,35,.75); }
}
/* a required field flashed when left empty on save */
.flash-required { outline: 2px solid #E5484D; outline-offset: 3px; border-radius: 8px; animation: flashReq .4s ease-in-out 2; }
@keyframes flashReq { 0%,100% { outline-color: #E5484D; } 50% { outline-color: transparent; } }
/* skipped: dimmed with a struck-through title. partial: shows a ½ marker. */
.block.skipped { opacity: .45; }
.block.skipped .b-title { text-decoration: line-through; }
.block.partial::after {
  content: "½"; position: absolute; bottom: 2px; right: 6px;
  font-size: 12px; font-weight: 800; opacity: .6;
}
.b-confirm {
  position: absolute; top: 3px; right: 3px;
  width: 19px; height: 19px; border-radius: 6px;
  background: rgba(0, 0, 0, .38); color: #fff; border: none;
  font-size: 12px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.b-confirm:hover { background: #30A46C; }

/* hover toolbar: confirm / edit / delete a block without opening the dialog */
.b-actions { position: absolute; top: 3px; right: 3px; display: none; gap: 4px; z-index: 5; }
.block:hover .b-actions { display: flex; }
.b-act {
  width: 22px; height: 22px; border-radius: 6px; border: none; padding: 0;
  background: rgba(0, 0, 0, .5); color: #fff; cursor: pointer;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.b-act:hover { background: rgba(0, 0, 0, .78); }
.b-act.ok:hover { background: var(--brand-green); }
.b-act.del:hover { background: var(--danger); }

/* interview marker + reminders in the header */
.day-flags { padding: 3px 6px 6px; display: flex; flex-direction: column; gap: 3px; }
.flag {
  font-size: 11px; border-radius: 6px; padding: 2px 6px;
  background: rgba(255,178,36,.16); color: #FFB224; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flag.rem { background: rgba(233,61,130,.14); color: #f36; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal {
  width: 420px; max-width: calc(100vw - 32px);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  max-height: 88vh; overflow-y: auto;
}
.modal h2 { margin: 0 0 2px; font-size: 17px; }
.when { color: var(--text-dim); margin: 0 0 14px; font-size: 13px; }
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; font-weight: 600; }
.field input, .field select {
  width: 100%; padding: 9px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font-size: 14px;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 11px; border-radius: 20px; cursor: pointer;
  border: 1.5px solid transparent; font-size: 12.5px; font-weight: 600;
  color: #0d0f13; user-select: none;
}
.chip.dim { opacity: .45; }
.chip.selected { outline: 2px solid #fff; }
.chips.small .chip { background: var(--panel-2); color: var(--text); border-color: var(--line); }
.chips.small .chip.selected { border-color: var(--accent); background: rgba(62,99,221,.2); outline: none; }
/* activity (category) chips: always solid black + bold so they read on any color;
   selection is shown with a ring, not by fading the others */
#catChips .chip { color: #0a0a0a; font-weight: 800; opacity: 1; border: 1.5px solid rgba(0,0,0,.3); }
#catChips .chip.dim { opacity: 1; }
#catChips .chip.selected { outline: 3px solid #fff; box-shadow: 0 0 0 3px var(--accent); border-color: #0a0a0a; }
.modal-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.modal-actions .spacer { flex: 1; }

/* ---------- Report drawer ---------- */
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 380px; max-width: 90vw;
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -12px 0 40px rgba(0,0,0,.4); z-index: 60;
  display: flex; flex-direction: column;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 16px; }
.drawer-body { padding: 18px; overflow: auto; }
.report-total { font-size: 26px; font-weight: 700; }
.report-total small { font-size: 13px; color: var(--text-dim); font-weight: 500; }
.report-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); margin: 22px 0 10px; }
.bar-row { margin-bottom: 10px; }
.bar-row .bar-label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.bar-row .bar-label .hrs { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.bar-track { height: 8px; background: var(--panel-2); border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; }

/* ---------- time labels: :30 and top-of-hour share the same font ---------- */
.time-cell { font-size: 11px; color: var(--text); font-weight: 600; }
.time-cell.hour { font-size: 11px; color: var(--text); font-weight: 600; }

/* ---------- Dashboard ---------- */
.dashboard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}
.dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.dash-head h2 { margin: 0; font-size: 18px; }
.dash-head .dim { color: var(--text-dim); font-weight: 500; }
.dash-range-toggle { display: flex; gap: 6px; }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.stat {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px;
}
.stat-h { font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-h small { font-size: 15px; font-weight: 600; color: var(--text-dim); margin-left: 2px; }
.stat-l { margin-top: 6px; color: var(--text-dim); font-size: 12.5px; }

.dash-panel {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px; margin-bottom: 16px;
}
.dash-panel h3 { margin: 0 0 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); }
.dash-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.dash-cols .dash-panel { margin-bottom: 0; }

/* daily bar chart */
.dchart { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
.dbar { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.dbar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.dbar-fill { width: 100%; min-height: 2px; background: linear-gradient(180deg, var(--accent), #6E56CF); border-radius: 4px 4px 0 0; }
.dbar-lbl { margin-top: 6px; font-size: 10.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.dim { color: var(--text-dim); }

/* recruiting funnel + forecast */
.funnel-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.funnel-step {
  flex: 1; text-align: center; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 8px;
}
.fs-num { font-size: 28px; font-weight: 700; line-height: 1; }
.fs-lbl { margin-top: 5px; font-size: 12px; color: var(--text-dim); }
.funnel-arrow { color: var(--text-dim); font-size: 18px; }
.funnel-ratios { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.funnel-ratios .fr { font-size: 13px; color: var(--text-dim); }
.funnel-ratios .fr b { color: var(--text); font-size: 15px; }
.forecast-box {
  background: rgba(48, 164, 108, .12); border: 1px solid rgba(48, 164, 108, .4);
  border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5;
}

/* ---------- Interviews: work lane + dedicated interview rail ---------- */
.work-lane { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.itv-lane {
  position: absolute; top: 0; right: 0; bottom: 0;
  border-left: 1px dashed rgba(255, 178, 36, .5);
  background: rgba(255, 178, 36, .05);
  cursor: pointer;
}
.itv-marker {
  position: absolute; left: 2px; right: 2px;
  height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: #FFB224; color: #3a2600;
  border: 1px solid #fff; border-radius: 6px;
  font-size: 13px; font-weight: 800; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.itv-marker:hover { filter: brightness(1.08); }

/* interview pin in the day header */
.flag { cursor: pointer; }
.flag.itv { background: rgba(255, 178, 36, .18); color: #FFB224; font-weight: 700; }
.flag.itv:hover { background: rgba(255, 178, 36, .3); }

/* ---------- Today briefing bar ---------- */
.briefing {
  background: linear-gradient(90deg, rgba(255, 178, 36, .14), rgba(255, 178, 36, .04));
  border: 1px solid rgba(255, 178, 36, .35);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.briefing-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.briefing-head h2 { margin: 0; font-size: 15px; }
.briefing-head h2 .amber { color: #FFB224; }
.briefing-list { display: flex; flex-direction: column; gap: 8px; }
.briefing-item {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px;
}
.briefing-item .b-time { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 66px; }
.briefing-item .b-name { font-weight: 600; }
.briefing-item .b-job { color: var(--text-dim); font-size: 12.5px; }
.briefing-item .b-follow { margin-left: auto; color: #FFB224; font-size: 12.5px; font-weight: 600; }

/* modal: two fields side by side */
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

/* interview time picker: hour / minutes / AM-PM selects side by side */
.time-picker { display: flex; gap: 6px; }
.time-picker select { min-width: 0; flex: 1; }

/* split control in the edit dialog */
.split-row { display: flex; gap: 8px; align-items: center; }
.split-row select {
  flex: 1; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 13px;
}

/* metrics mode toggle (Actual / Planned) */
.metric-toggle { display: flex; gap: 6px; margin-bottom: 12px; }
.metric-toggle .btn { flex: 1; }
.report-sub { display: flex; gap: 16px; margin: 6px 0 4px; flex-wrap: wrap; }
.report-sub .rs { font-size: 12.5px; color: var(--text-dim); }
.report-sub .rs b { color: var(--text); font-weight: 700; }
.review-note {
  background: rgba(255,178,36,.12); border: 1px solid rgba(255,178,36,.35);
  color: #FFB224; border-radius: 8px; padding: 8px 11px; font-size: 12.5px; margin: 12px 0;
}

/* ---------- Outlook-imported events ---------- */
.block.outlook {
  background: rgba(120, 132, 156, .22);
  color: var(--text);
  border: 1px dashed #7f8ea3;
}
.block.outlook .b-title { font-weight: 600; }

/* ---------- 📅 booked-via-link blocks — gold left edge so they pop on the grid ---------- */
.block.booking {
  background: rgba(224,182,79,.3);
  color: var(--text);
  border: 1px solid rgba(224,182,79,.6);
  border-left: 3px solid #e0b64f;
}
.block.booking .b-title { font-weight: 700; }
/* collapsed "Advanced" fold in the booking-link form (custom URL lives here) */
.bk-adv { margin: 2px 0 8px; }
.bk-adv summary { cursor: pointer; font-size: 12px; }
.bk-adv summary:hover { color: var(--text); }
.block .b-book {
  display: inline-block; margin-top: 3px;
  background: rgba(224,182,79,.9); color: #111417;
  border-radius: 4px; padding: 1px 6px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
}

/* ---------- Jobs manager ---------- */
.jobs-list { max-height: 240px; overflow: auto; margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.job-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px;
}
.job-row.inactive { opacity: .5; }
.job-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.job-name { font-weight: 600; }
.job-sub { font-size: 12px; color: var(--text-dim); }
.job-actions { display: flex; gap: 4px; }
.jobs-form h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); margin: 6px 0 10px; }

.avail-backup { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; }
.avail-backup h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); margin: 0 0 8px; }
.avail-backup code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.avail-backup h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); margin: 0 0 8px; }
.export-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.export-row input {
  flex: 1; min-width: 160px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 13px;
}
a.btn { text-decoration: none; display: inline-flex; align-items: center; }

/* AI summary in the report drawer */
.report-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.summary-box {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px; margin-bottom: 14px;
  font-size: 13.5px; line-height: 1.6; white-space: pre-wrap;
}
.summary-tag { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }

.report-worked {
  background: rgba(48,164,108,.14); border: 1px solid rgba(48,164,108,.4);
  border-radius: 10px; padding: 10px 14px; margin: 10px 0; font-size: 14px; color: #9be8bf;
}
.report-worked .rw-hint { color: var(--text-dim); font-size: 12px; font-weight: 400; }
.report-personal { color: var(--text-dim); font-size: 12.5px; margin: 4px 0 10px; }

/* ---------------- donut chart ---------------- */
.donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.donut { width: 180px; height: 180px; flex: 0 0 auto; }
.donut-mid { fill: var(--text); font-size: 26px; font-weight: 800; }
.donut-sub { fill: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.donut-legend { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.lg-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.lg-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.lg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-row b { font-variant-numeric: tabular-nums; }
.lg-pct { color: var(--text-dim); font-size: 12px; width: 38px; text-align: right; }
.bar-ct { color: var(--text-dim); font-size: 11px; font-weight: 700; }

/* ---------------- efficiency panel ---------------- */
.dash-panel.eff .eff-hero {
  background: rgba(48,164,108,.14); border: 1px solid rgba(48,164,108,.4);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 15px; color: #9be8bf;
}
.eff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.eff-card {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 12px; text-align: center;
}
.eff-num { font-size: 30px; font-weight: 800; color: var(--text); line-height: 1; }
.eff-num small { font-size: 15px; font-weight: 700; color: var(--text-dim); margin-left: 2px; }
.eff-lbl { font-size: 13px; color: var(--text); margin-top: 6px; font-weight: 600; }
.eff-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.eff-note { color: var(--text-dim); font-size: 12.5px; margin-top: 12px; }
@media (max-width: 620px) { .eff-grid { grid-template-columns: 1fr; } }

/* ---------------- end-of-day clock-out nudge ---------------- */
.clockout-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(245,166,35,.14); border: 1px solid #F5A623;
  border-radius: 12px; padding: 10px 16px; margin-bottom: 12px;
  color: #f5d9a8; font-size: 14px; font-weight: 600;
}
.clockout-banner span { flex: 1; min-width: 180px; }

/* ---------------- work clock ---------------- */
.clock-btn { font-weight: 800; }
/* evident glowing frame around the whole page while clocked in */
body.clocked-in::after {
  content: ""; position: fixed; inset: 0; z-index: 45; pointer-events: none;
  border: 4px solid var(--accent);
  box-shadow: inset 0 0 22px rgba(48,164,108,.38);
  animation: clockGlow 3.5s ease-in-out infinite;
}
@keyframes clockGlow {
  0%, 100% { box-shadow: inset 0 0 16px rgba(48,164,108,.28); }
  50%      { box-shadow: inset 0 0 26px rgba(48,164,108,.5); }
}
.clock-btn.on {
  background: rgba(48,164,108,.18); border-color: var(--accent); color: #9be8bf;
  box-shadow: 0 0 0 1px var(--accent), 0 0 10px rgba(48,164,108,.35);
}

/* 😊😊 header plan faces — TWO side by side: first = TODAY's plan state, second =
   TOMORROW's (next workday). Button tint: green when every visible face is happy,
   amber when any is not. The face emojis ARE the status, so they survive header
   compaction (the label .bl truncates like every other button; .pf-face is
   intentionally NOT .bi). A hairline separator keeps the pair readable small. */
.plan-face { font-weight: 700; }
.plan-face .pf-face { font-size: 14px; line-height: 1; }
.plan-face .pf-face + .pf-face { margin-left: 4px; padding-left: 4px; border-left: 1px solid var(--line); }
.plan-face .pf-face.hidden + .pf-face { margin-left: 0; padding-left: 0; border-left: 0; }   /* weekend: today face hidden */
.plan-face.pf-good { background: rgba(48,164,108,.14); border-color: var(--accent); }
.plan-face.pf-bad { background: rgba(202,138,4,.16); border-color: #CA8A04; }
.pf-remind { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; }
/* plan-check popup rows: day label left, segmented answer pair right. Selected
   state is PERSISTENT — ✓ fills green, ✗ fills red, unanswered = both ghost. */
.pf-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.pf-day { font-size: 13px; font-weight: 600; }
.pf-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pf-seg-btn { background: transparent; border: 0; color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.pf-seg-btn + .pf-seg-btn { border-left: 1px solid var(--line); }
.pf-seg-btn:hover { color: var(--text); background: rgba(255,255,255,.05); }
.pf-seg-btn.on-yes { background: var(--accent); color: #fff; }
.pf-seg-btn.on-yes:hover { background: var(--accent-hover); color: #fff; }
.pf-seg-btn.on-no { background: rgba(229,72,77,.85); color: #fff; }
.pf-seg-btn.on-no:hover { background: var(--danger); color: #fff; }
.pf-remind-line { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; font-size: 12.5px; color: var(--text-dim); }
.pf-remind-x { background: transparent; border: 0; color: var(--text-dim); cursor: pointer; font: inherit; font-size: 12px; padding: 2px 6px; border-radius: 6px; }
.pf-remind-x:hover { color: var(--danger); background: rgba(229,72,77,.12); }

/* ---------------- start-of-day dim overlay ---------------- */
.dim-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(4,10,18,.82); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.dim-card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: 18px;
  padding: 40px 44px; text-align: center; max-width: 440px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.dim-emoji { font-size: 48px; margin-bottom: 8px; }
.dim-card h2 { margin: 6px 0 8px; font-size: 24px; }
.dim-card p { color: var(--text-dim); font-size: 14px; line-height: 1.5; margin-bottom: 22px; }
.btn.big { font-size: 17px; padding: 13px 26px; border-radius: 12px; display: block; width: 100%; margin-bottom: 12px; }

/* ---------------- to-do view ---------------- */
.todos { padding: 8px 4px 48px; max-width: 820px; margin: 0 auto; width: 100%; }
.todo-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.todo-tabs { display: flex; gap: 8px; }
.todo-tab {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim);
  padding: 10px 20px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; transition: all .12s;
}
.todo-tab:hover { color: var(--text); }
.todo-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tt-count { background: rgba(255,255,255,.22); border-radius: 20px; padding: 1px 8px; font-size: 12px; font-weight: 800; }
.todo-tab:not(.active) .tt-count { background: var(--line); color: var(--text); }
.todo-showdone { color: var(--text-dim); font-size: 13px; display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* quick add */
.todo-add-card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 16px;
}
.todo-add-main { display: flex; gap: 10px; }
.todo-add-main input {
  flex: 1; background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 13px 16px; font-size: 16px;
}
.todo-add-main input:focus { outline: none; border-color: var(--accent); }
.todo-add-opts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tao-lbl { color: var(--text-dim); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.prio-pick { display: inline-flex; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.prio-opt {
  background: transparent; border: none; color: var(--text-dim); cursor: pointer;
  padding: 5px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 700;
}
.prio-opt.sel { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.todo-add-opts input[type=date], .todo-add-opts select {
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 7px 9px; font-size: 13px;
}

/* priority filter */
.todo-filter { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
.tf-lbl { color: var(--text-dim); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-right: 2px; }
.tf-chip {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim);
  padding: 6px 13px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.tf-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* list + group headers */
.todo-list { display: flex; flex-direction: column; gap: 8px; }
.todo-empty { color: var(--text-dim); padding: 30px; text-align: center; font-style: italic; }
.todo-group {
  display: flex; align-items: center; gap: 8px; margin: 16px 0 2px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .3px; color: var(--text-dim);
}
.todo-group:first-child { margin-top: 2px; }
.todo-group span { background: var(--line); color: var(--text); border-radius: 20px; padding: 0 8px; font-size: 11px; }
.todo-group.p-high { color: #f4a3a5; } .todo-group.p-med { color: #f5cf8f; } .todo-group.p-low { color: var(--text-dim); }
.todo-group.done { color: var(--accent); margin-top: 22px; }

/* item card */
.todo-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; border-left: 4px solid var(--pc, var(--line)); transition: border-color .12s, background .12s;
}
.todo-item:hover { background: var(--panel-2); }
.todo-item.s-done { opacity: .5; border-left-color: var(--line); }
.todo-item.s-done .todo-title { text-decoration: line-through; color: var(--text-dim); }
/* left action cluster: Done / Working / Delete — three clean one-click buttons */
.todo-actions { flex: 0 0 auto; display: inline-flex; gap: 5px; }
.todo-actions button {
  width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--line);
  background: var(--panel-2); cursor: pointer; font-size: 15px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: all .12s;
}
.ta-done { color: #3f7d55; }
.ta-done:hover { border-color: var(--accent); background: rgba(48,164,108,.18); color: #b6f0cf; }
.ta-done.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.ta-work { color: #b5842f; }
.ta-work:hover { border-color: #F5A623; background: rgba(245,166,35,.18); color: #f5cf8f; }
.ta-work.on { border-color: #F5A623; background: rgba(245,166,35,.9); color: #2a1c00; }
.ta-del { color: #9a4b4d; }
.ta-del:hover { border-color: #E5484D; background: rgba(229,72,77,.2); color: #ff9a9c; }

/* quick due-date presets in the add card */
.todo-add-due { margin-top: 12px; }
.tao-hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-dim); }
.due-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.due-opt {
  background: var(--bg); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 20px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.due-opt:hover { color: var(--text); border-color: var(--text-dim); }
.due-opt.sel { background: var(--accent); border-color: var(--accent); color: #fff; }
.due-date-inline { background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 6px 9px; font-size: 13px; }
.tm-added { color: var(--text-dim); font-size: 11.5px; }
.todo-main { flex: 1; min-width: 0; }
.todo-title {
  width: 100%; background: transparent; border: none; color: var(--text);
  font-size: 15.5px; padding: 3px 2px; border-bottom: 1px solid transparent;
}
.todo-title:focus { outline: none; border-bottom-color: var(--accent); }
.todo-meta { display: flex; gap: 8px; margin-top: 2px; }
.tm-due, .tm-recur { font-size: 11.5px; color: var(--text-dim); }
.tm-due.today { color: #F5A623; font-weight: 700; }
.tm-due.soon { color: var(--text); }
.tm-due.overdue { color: #ff6b6b; font-weight: 700; }
.tm-recur { color: #7fb8ff; }
.tm-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px; color: var(--tc, #6B7280);
  border: 1px solid var(--tc, #6B7280); border-radius: 20px; padding: 0 8px;
}
.todo-ctrl { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
.tf-select {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 20px; padding: 6px 10px; font-size: 13px;
}
.prio-pill {
  border: 1px solid var(--pc); color: var(--pc); background: transparent;
  border-radius: 20px; padding: 3px 11px; font-size: 11.5px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.prio-pill.p-high { --pc: #E5484D; } .prio-pill.p-med { --pc: #F5A623; } .prio-pill.p-low { --pc: #64748B; }
.todo-due-edit, .todo-recur-edit, .todo-tag-edit {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 8px; padding: 5px 6px; font-size: 12px; max-width: 130px;
}
.todo-recur-edit, .todo-tag-edit { max-width: 108px; }
.todo-del {
  background: transparent; border: none; color: var(--text-dim);
  font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.todo-del:hover { background: rgba(229,72,77,.2); color: #ff6b6b; }
.todo-done-hint { color: var(--text-dim); font-size: 12px; text-align: center; padding: 10px; font-style: italic; }
@media (max-width: 680px) {
  .todo-item { flex-wrap: wrap; }
  .todo-ctrl { width: 100%; justify-content: flex-end; padding-left: 42px; }
}

/* ---------------- colorful tag buttons (quick-add) ---------------- */
.todo-add-tags { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.tag-pick { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.tag-opt {
  --tc: #6B7280; background: transparent; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent);
  color: color-mix(in srgb, var(--tc) 78%, #fff 22%);
  padding: 4px 11px; border-radius: 20px; font-size: 12px; font-weight: 700; line-height: 1.3;
  transition: background .12s, color .12s, border-color .12s;
}
.tag-opt:hover { border-color: var(--tc); color: #fff; }
.tag-opt.sel { background: var(--tc); border-color: var(--tc); color: #fff; box-shadow: 0 1px 6px color-mix(in srgb, var(--tc) 45%, transparent); }
.tag-opt.none { --tc: #6B7280; }
.tag-opt.none.sel { background: var(--panel-2); color: var(--text); border-color: var(--line); box-shadow: none; }

/* ---------------- filter rows: colorful tag chips + search ---------------- */
.tf-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tf-tags { margin-top: 8px; }
.tag-chip {
  --tc: #6B7280; background: transparent; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--tc) 50%, transparent);
  color: color-mix(in srgb, var(--tc) 80%, #fff 20%);
  padding: 5px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 700;
}
.tag-chip:hover { border-color: var(--tc); color: #fff; }
.tag-chip.active { background: var(--tc); border-color: var(--tc); color: #fff; }
.tag-chip[data-t="all"] { --tc: var(--accent); }
.tf-search { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 3px 8px 3px 11px; }
.tf-search-ico { font-size: 12px; opacity: .7; }
.tf-search input { background: transparent; border: none; outline: none; color: var(--text); font-size: 13px; width: 150px; }
.tf-search-x { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px; padding: 2px 5px; border-radius: 50%; }
.tf-search-x:hover { background: var(--line); color: var(--text); }
.search-hide { display: none !important; }
.todo-nomatch { color: var(--text-dim); padding: 22px; text-align: center; font-style: italic; }

/* ---------------- per-row tag pill + popover ---------------- */
.todo-tag-wrap { position: relative; }
.row-tag-pill {
  --tc: #6B7280; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--tc); color: #fff; background: color-mix(in srgb, var(--tc) 82%, #000 18%);
  border-radius: 20px; padding: 4px 11px; font-size: 11.5px; font-weight: 800;
}
.row-tag-pill.untag { background: transparent; color: var(--text-dim); border-color: var(--line); border-style: dashed; }
.row-tag-pill:hover { filter: brightness(1.12); }
.tag-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  display: flex; flex-wrap: wrap; gap: 5px; width: 232px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 9px; box-shadow: 0 12px 34px rgba(0,0,0,.45);
}

/* ---------------- BD Engine tool button + fallback ---------------- */
.btn.tool-btn.bd-btn { background: linear-gradient(180deg, #14512e, #0e3a22); border-color: #1c7a45; color: #d7f7e4; }
.btn.tool-btn.bd-btn:hover { background: linear-gradient(180deg, #1a6b3d, #0e4527); border-color: #2ecc71; color: #fff; }
.tool-fallback { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 30px; }
.bd-fallback-card {
  max-width: 460px; text-align: center; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 34px 30px; box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.bdf-emoji { font-size: 48px; margin-bottom: 6px; }
.bd-fallback-card h2 { margin: 4px 0 10px; color: var(--text); font-size: 21px; }
.bd-fallback-card p { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin: 0 0 10px; }
.bd-fallback-card code { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 12.5px; color: var(--text); }
.bdf-hint { font-size: 12.5px !important; opacity: .85; }
.bdf-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }

/* ---------------- bottom "due today" dock ---------------- */
.todo-dock {
  margin-top: 14px; background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-top: 2px solid var(--accent);
  border-radius: 14px 14px 10px 10px; padding: 10px 14px 12px;
}
.dock-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dock-toggle {
  background: transparent; border: none; color: var(--text); cursor: pointer;
  font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px;
}
.dock-toggle::after { content: "▾"; color: var(--text-dim); transition: transform .15s; }
.todo-dock.collapsed .dock-toggle::after { transform: rotate(-90deg); }
.dock-count { background: var(--accent); color: #fff; border-radius: 20px; padding: 1px 9px; font-size: 12px; }
.dock-quick { flex: 1; min-width: 160px; }
.dock-quick input {
  width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 8px 12px; font-size: 13.5px;
}
.dock-quick input:focus { outline: none; border-color: var(--accent); }
.dock-open { background: transparent; border: none; color: var(--accent); cursor: pointer; font-size: 13px; font-weight: 700; white-space: nowrap; }
.dock-body { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.todo-dock.collapsed .dock-body, .todo-dock.collapsed .dock-quick { display: none; }
.dock-empty { color: var(--text-dim); font-size: 13px; font-style: italic; padding: 4px 2px; }
.dock-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--pc, var(--line)); border-radius: 10px; padding: 6px 10px;
}
.dock-pill.p-high { --pc: #E5484D; } .dock-pill.p-med { --pc: #F5A623; } .dock-pill.p-low { --pc: #64748B; }
.dock-check {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line);
  background: transparent; color: transparent; cursor: pointer; font-size: 11px; line-height: 1; flex: 0 0 auto;
}
.dock-check:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
.dock-title { font-size: 13.5px; color: var(--text); cursor: pointer; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-title:hover { color: var(--accent); }
.dock-tag { font-size: 12px; }
.dock-od { color: #ff6b6b; font-size: 10.5px; font-weight: 800; text-transform: uppercase; }

/* ---------------- Spott sync ---------------- */
.spott-status { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.5; }
.spott-status .ss-on { color: #9be8bf; font-weight: 700; }
.spott-status .ss-off { color: #f5cf8f; font-weight: 700; }
.spott-status .ss-run { color: #7fb8ff; font-weight: 700; }
.spott-status .ss-err { color: #ff9a9c; font-weight: 600; }
#spottKeyInput { flex: 1; }
.spott-cand-toggle { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.linklike { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12.5px; padding: 0; text-decoration: underline; }
#msClientId { flex: 1; }
.ms-setup { margin-top: 6px; }
.ms-device { margin-top: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.ms-code { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.ms-usercode { font-size: 20px; letter-spacing: 3px; color: var(--accent); font-family: ui-monospace, monospace; }
.ms-help { margin-top: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; }
.ms-steps { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-dim); line-height: 1.7; }
.ms-steps b { color: var(--text); }

/* ---------------- end-of-day review ---------------- */
.eod-modal { max-width: 520px; }
.eod-stat { background: rgba(48,164,108,.14); border: 1px solid rgba(48,164,108,.4); border-radius: 10px; padding: 12px 14px; font-size: 15px; color: #9be8bf; margin-bottom: 14px; }
.eod-stat b { font-size: 18px; }
.eod-section { margin-bottom: 14px; }
.eod-section h4 { margin: 0 0 8px; font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; }
.eod-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.eod-chip { font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--line)); border-radius: 8px; padding: 4px 10px; }
.eod-todos { display: flex; flex-direction: column; gap: 6px; }
.eod-todo { display: flex; align-items: center; gap: 10px; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--pc, var(--line)); border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.eod-todo.p-high { --pc: #E5484D; } .eod-todo.p-med { --pc: #F5A623; } .eod-todo.p-low { --pc: #64748B; }
.eod-todo.eod-done { opacity: .5; } .eod-todo.eod-done span { text-decoration: line-through; }
.eod-todo .todo-check {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--line);
  background: transparent; color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; line-height: 1;
}
.eod-todo .todo-check:hover { border-color: var(--accent); background: rgba(48,164,108,.15); }
.eod-todo .todo-check.done { border-color: var(--accent); background: var(--accent); }

/* ---------------- login screen ---------------- */
.login-screen {
  position: fixed; inset: 0; z-index: 90;
  background: radial-gradient(1200px 600px at 50% -10%, #12365a, var(--bg));
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: 18px; padding: 38px 40px;
  width: 360px; max-width: 90vw; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.login-logo { display: flex; justify-content: center; margin-bottom: 12px; }
.login-logo .dot { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px rgba(48,164,108,.6); }
.login-card h2 { margin: 0 0 4px; font-size: 22px; }
.login-sub { color: var(--text-dim); font-size: 13.5px; margin-bottom: 20px; }
.login-card input {
  display: block; width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 12px 14px; font-size: 15px; margin-bottom: 12px;
}
.login-card input:focus { outline: none; border-color: var(--accent); }
.login-error { background: rgba(229,72,77,.15); border: 1px solid #E5484D; color: #ffb3b5; border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-bottom: 12px; }

/* ---------------- user area + admin ---------------- */
.user-area { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; }
.user-name { color: var(--text-dim); font-size: 13px; font-weight: 700; white-space: nowrap; }
.admin-modal { max-width: 720px; width: 92vw; }
.admin-h { margin: 20px 0 8px; font-size: 15px; color: var(--text); border-top: 1px solid var(--line-soft); padding-top: 16px; }
.admin-range { display: flex; gap: 6px; margin-bottom: 12px; }
.rollup-scroll { overflow-x: auto; }
.rollup-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rollup-table th { text-align: left; color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rollup-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.rollup-table .ru-name { font-weight: 600; }
.ru-owner { font-size: 10px; background: var(--accent); color: #fff; border-radius: 20px; padding: 1px 7px; }
.admin-users { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.admin-user { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.admin-user.inactive { opacity: .55; }
.au-role { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; }
.au-email { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.au-actions { display: flex; gap: 6px; }

/* upcoming-activity ping toast */
#pingToast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(24px);
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
  padding: 12px 20px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.4);
  z-index: 200; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  max-width: 92vw; text-align: center;
}
#pingToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Goals & momentum panel ---- */
.goal-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.goal-main { flex: 1 1 260px; }
.goal-hd { font-size: 13px; color: var(--text); margin-bottom: 7px; }
.goal-hd input { width: 52px; background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 3px 6px; font-size: 13px; }
.goal-bar { height: 12px; background: var(--panel-2); border-radius: 999px; overflow: hidden; }
.goal-fill { height: 100%; border-radius: 999px; transition: width .35s; }
.goal-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; }
.goal-sub b { color: var(--text); }
.goal-streak { flex: 0 0 auto; text-align: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 18px; }
.gs-num { font-size: 24px; font-weight: 800; color: var(--text); }
.gs-lbl { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; }

/* ---- Global search overlay ---- */
.search-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(4,10,18,.6); backdrop-filter: blur(2px); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.search-box { width: min(620px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.6); overflow: hidden; }
#searchInput { width: 100%; border: none; background: transparent; color: var(--text); font-size: 17px; padding: 18px 20px; outline: none; border-bottom: 1px solid var(--line); }
.search-results { max-height: 52vh; overflow-y: auto; }
.search-item { display: flex; align-items: center; gap: 12px; padding: 11px 18px; cursor: pointer; border-bottom: 1px solid var(--line-soft); }
.search-item.sel, .search-item:hover { background: var(--panel-2); }
.si-ico { flex: 0 0 auto; font-size: 16px; width: 22px; text-align: center; }
.si-main { display: flex; flex-direction: column; min-width: 0; }
.si-main b { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-sub { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-empty { padding: 22px; text-align: center; }
.search-hint { padding: 9px 18px; font-size: 11px; color: var(--text-dim); border-top: 1px solid var(--line-soft); }

/* ---- Today cockpit ---- */
.btn.toggle.b-today.active { background: linear-gradient(180deg, #7a5a1e, #5c4416); border-color: #d9a441; color: #fff; }
.today-view { padding: 20px 26px 90px; max-width: 900px; margin: 0 auto; overflow-y: auto; }
.today-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.today-head h1 { font-size: 26px; }
.today-date { color: var(--text-dim); font-size: 14px; margin-top: 3px; }
.today-attention { background: rgba(217,164,65,.14); border: 1px solid rgba(217,164,65,.4); color: #f2d79a; border-radius: 999px; padding: 8px 16px; font-size: 13.5px; white-space: nowrap; }
.today-attention.clear { background: rgba(61,125,65,.14); border-color: rgba(61,125,65,.4); color: #a8e0ab; }
.today-attention b { color: #fff; }
.today-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.today-card h3 { font-size: 14px; margin-bottom: 10px; }
.today-card h3 .dim { font-weight: 400; }
.today-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.today-row:last-child { border-bottom: none; }
.tr-time { flex: 0 0 auto; min-width: 92px; font-size: 12.5px; font-weight: 700; color: var(--text-dim); }
.tr-time.neg { color: var(--danger); }
.tr-main { flex: 1 1 auto; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-tag { flex: 0 0 auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); }
.tr-tag.amber { color: #e0a63c; } .tr-tag.neg { color: var(--danger); }
.tr-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }

/* ---- Header button groups, color-coded by function ---- */
/* Each cluster (Views / Add / Settings / Insights / Tools) sits on its own quiet
   pill so the long button row reads as labeled-feeling groups, not one big strip. */
.hgrp, .tools-group { padding: 3px 5px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line-soft); }
.hgrp { display: flex; align-items: center; gap: 6px; }
.hsep, .tools-sep { display: none; }  /* the pills now do the separating */
body.hdr-c2 .hgrp, body.hdr-c2 .tools-group { padding: 2px 3px; }
body.hdr-c3 .hgrp, body.hdr-c3 .tools-group { padding: 0; border: none; background: transparent; border-radius: 0; }
/* Create / add (green) */
.btn.b-create { background: linear-gradient(180deg, #24512b, #1a3c20); border-color: #3D7D41; color: #dcf4df; }
.btn.b-create:hover { border-color: #5aa860; }
/* Insights: Dashboard + This week (blue) */
.btn.b-insight { background: linear-gradient(180deg, #123f5a, #0e2d44); border-color: #2a6f9e; color: #d3ecff; }
.btn.b-insight:hover { border-color: #4aa3e0; }
.btn.toggle.b-insight.active { background: linear-gradient(180deg, #1f74a8, #175a86); border-color: #63b4ea; color: #fff; }
/* Admin (amber, set apart) */
.btn.b-admin { background: linear-gradient(180deg, #5a3d10, #42300c); border-color: #b0791f; color: #ffe6bd; }
.btn.b-admin:hover { border-color: #e0a63c; }
/* Availability / settings (subdued) */
.btn.b-settings { background: var(--panel-2); border-color: var(--line); color: var(--text-dim); }
.btn.b-settings:hover { color: var(--text); }

/* ---- Dashboard "Documents & money" panel ---- */
.dash-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.biz-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.btn.tool-btn.sm { font-size: 12px; padding: 6px 12px; }

/* ---- Tools group + full-window tool overlay (Offers / Invoices / Agreements / Financials) ---- */
.tools-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }
.tools-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* distinct violet treatment so the HQ tools read as their own group, apart from the calendar buttons */
.btn.tool-btn { background: linear-gradient(180deg, #3b3170, #2c2455); border-color: #4c4090; color: #e9e6ff; }
.btn.tool-btn:hover { background: linear-gradient(180deg, #473a86, #362d68); border-color: #7c6cf0; color: #fff; }
.tool-overlay { position: fixed; inset: 0; z-index: 300; background: var(--bg); display: flex; flex-direction: column; }
.tool-overlay-bar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel); flex: 0 0 auto; }
.tool-title { font-weight: 700; font-size: 15px; color: var(--text); }
.tool-frame { flex: 1 1 auto; border: none; width: 100%; height: 100%; background: #fff; }

.hidden { display: none !important; }

/* change-password modal message */
.pw-msg { font-size: 12.5px; margin-top: 8px; min-height: 16px; font-weight: 600; }
.pw-msg.err { color: #ff6b6b; }
.pw-msg.ok { color: #4ade80; }

/* admin: per-user capability picker */
.ucaps { margin-top: 14px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.ucaps-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ucaps-lbl { font-size: 12.5px; font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: .4px; }
.ucaps-tpl { font-size: 11.5px; color: var(--text-dim); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ucaps-tpl .btn.sm { padding: 3px 9px; font-size: 11.5px; }
.ucaps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; }
.ucaps-grid label { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); cursor: pointer; }
.ucaps-grid input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
@media (max-width: 560px) { .ucaps-grid { grid-template-columns: repeat(2, 1fr); } }

/* admin: activity feed */
.admin-sub { font-weight: 400; color: var(--text-dim); font-size: 12px; }
.act-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 12.5px; color: var(--text-dim); }
.act-bar select { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 5px 8px; font-size: 12.5px; }
.admin-activity { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.act-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.act-row:last-child { border-bottom: none; }
.act-ico { flex: 0 0 auto; font-size: 14px; }
.act-body { flex: 1 1 auto; color: var(--text); }
.act-when { flex: 0 0 auto; color: var(--text-dim); font-size: 11.5px; white-space: nowrap; }
.act-empty { padding: 20px; text-align: center; color: var(--text-dim); font-style: italic; }

/* owner "view as" pill */
.viewas-wrap { display: none; align-items: center; gap: 6px; }
body.is-owner .viewas-wrap { display: inline-flex; }
.viewas-wrap.viewing { }
.viewas-wrap select { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 20px; padding: 5px 10px; font-size: 12px; }
.viewas-banner { display: none; }
body.viewing-other .viewas-banner { display: flex; align-items: center; justify-content: center; gap: 12px; background: #7c3aed; color: #fff; font-size: 13px; font-weight: 600; padding: 6px 14px; }
/* 👓 recruiter mode — high-visibility, sticky so it survives every view change */
body.recruiter-mode .viewas-banner { display: flex; align-items: center; justify-content: center; gap: 6px; position: sticky; top: 0; z-index: 500; background: #7c3aed; color: #fff; font-size: 13.5px; font-weight: 700; padding: 9px 16px; box-shadow: 0 4px 16px rgba(124,58,237,.45); border-bottom: 2px solid #5b21b6; }
.rm-pulse { animation: rmPulse 1.6s ease-in-out infinite; }
@keyframes rmPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.rm-exit { margin-left: 12px; background: #fff !important; color: #7c3aed !important; font-weight: 800; border: none; }
.rm-exit:hover { background: #ede9fe !important; }
/* the old header "View as" select is the owner-lens tool — hide it inside recruiter mode */
body.recruiter-mode .viewas-wrap { display: none !important; }

/* 📡 Team activity (owner-only dashboard panel) */
.tl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 2px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.tl-row:last-of-type { border-bottom: none; }
.tl-dot { font-size: 11px; }
.tl-name { min-width: 110px; }
.tl-page { min-width: 150px; }
.tl-nums { color: var(--text); opacity: .9; }
.tl-seen { margin-left: auto; font-size: 12px; }
.tl-feed { margin-top: 8px; }
.tl-feed summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text); opacity: .85; padding: 4px 0; }
.tl-feed-row { font-size: 12.5px; padding: 3px 0 3px 14px; border-left: 2px solid var(--line-soft); margin-left: 4px; }
.tl-time { font-variant-numeric: tabular-nums; }

/* Clients & Candidates board */
.clients-view { padding: 4px 2px 40px; }
.clients-head h2 { font-size: 22px; margin: 0 0 4px; color: var(--text); }
.clients-sub { color: var(--text-dim); font-size: 13px; margin: 0 0 18px; max-width: 760px; line-height: 1.5; }
.clients-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.clients-empty { grid-column: 1/-1; padding: 40px; text-align: center; color: var(--text-dim); font-style: italic; background: var(--panel); border: 1px dashed var(--line); border-radius: 14px; }
.client-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.client-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 13px 16px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-bottom: 1px solid var(--line); }
.client-name { font-size: 15px; font-weight: 800; color: var(--text); }
.client-meta { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }
.client-jobs { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.client-job { padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.client-job.job-closed { opacity: .6; }
.cj-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.cj-closed { font-size: 10px; font-weight: 700; color: var(--text-dim); border: 1px solid var(--line); border-radius: 10px; padding: 0 6px; text-transform: uppercase; }
.cj-cands { display: flex; flex-wrap: wrap; gap: 6px; }
.cand-chip { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--sc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent); border-radius: 20px; padding: 3px 9px; font-size: 12px; color: var(--text); }
.cand-stage { font-size: 10px; font-weight: 800; color: var(--sc); text-transform: uppercase; letter-spacing: .3px; }
.cj-none { font-size: 12px; color: var(--text-dim); font-style: italic; }

/* avg placement fee line in the forecast box */
.fee-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text); }
.fee-line .btn.sm { padding: 3px 9px; font-size: 11.5px; }

/* pause/resume button */
#pauseBtn.resuming { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

/* team leaderboard */
.lb-costbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-dim); margin-bottom: 10px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.lb-costbar b { color: var(--text); }
.lb-table td, .lb-table th { white-space: nowrap; }
.lb-rank { font-weight: 800; color: var(--text-dim); text-align: center; width: 30px; }
.lb-net-pos { color: #30d158; font-weight: 800; border: 1px solid rgba(48,209,88,.4); border-radius: 8px; text-align: center; }
.lb-net-neg { color: #ff6b6b; font-weight: 800; border: 1px solid rgba(255,107,107,.4); border-radius: 8px; text-align: center; }

/* PTO — quiet team-awareness strip (not a heavy green banner) */
.pto-strip { background: rgba(48,209,88,.06); color: var(--text-dim); font-size: 12.5px; font-weight: 500; padding: 5px 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line-soft); }
.pto-chip { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 20px; padding: 2px 11px; color: var(--text); }
.pto-chip b { font-weight: 600; }
.pto-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.pto-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; padding: 7px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.pto-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; border-radius: 20px; padding: 2px 8px; }
.pto-pending { color: #F5A623; border: 1px solid rgba(245,166,35,.4); }
.pto-approved { color: #30d158; border: 1px solid rgba(48,209,88,.4); }
.pto-denied { color: #ff6b6b; border: 1px solid rgba(255,107,107,.4); }
.eod-remind-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.eod-remind { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }

/* Goals & incentive board */
.goalboard-view { padding: 4px 2px 40px; }
.gb-head h2 { font-size: 22px; margin: 0 0 4px; color: var(--text); }
.gb-sub { color: var(--text-dim); font-size: 13px; margin: 0 0 18px; max-width: 820px; line-height: 1.5; }
.gb-section { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); margin: 18px 0 10px; }
.gb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.gb-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.gb-card.gb-done { border-color: #30d158; box-shadow: 0 0 0 1px rgba(48,209,88,.35); }
.gb-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.gb-title { font-size: 15px; font-weight: 800; color: var(--text); }
.gb-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.gb-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.gb-bar { height: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; margin: 12px 0 6px; }
.gb-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #5bd6a0); border-radius: 20px; transition: width .5s ease; }
.gb-fill.done { background: linear-gradient(90deg, #30d158, #7be59f); }
.gb-nums { font-size: 13px; color: var(--text); }
.gb-pct { color: var(--text-dim); margin-left: 6px; }
.gb-badge { color: #30d158; font-weight: 800; margin-left: 6px; }
.gb-reward { margin-top: 8px; font-size: 12.5px; color: #eab308; background: rgba(234,179,8,.1); border: 1px solid rgba(234,179,8,.3); border-radius: 8px; padding: 6px 10px; }
@media (max-width: 620px) { .gb-grid { grid-template-columns: 1fr; } }
/* goal progress ring (donut) */
.gb-body-row { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; }
.gb-ring { flex: 0 0 auto; width: 72px; height: 72px; }
.gb-ring .track { fill: none; stroke: var(--bg); stroke-width: 9; }
.gb-ring .prog { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.gb-ring.done .prog { stroke: #30d158; }
.gb-ring text { fill: var(--text); font-size: 17px; font-weight: 800; }
.gb-body-main { flex: 1; min-width: 0; }
/* overall goal summary + margin mini-widget */
.gb-summary { display: flex; align-items: center; gap: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin-bottom: 18px; flex-wrap: wrap; }
.gb-summary .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); font-weight: 700; }
.gb-summary .big { font-size: 26px; font-weight: 800; }
.goal-mini { margin: 10px 0 4px; }
.goal-mini h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); margin: 0 0 8px; }
.goal-mini-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.goal-mini-row .gm-bar { flex: 1; height: 7px; background: var(--bg); border-radius: 20px; overflow: hidden; }
.goal-mini-row .gm-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #5bd6a0); }
.goal-mini-row .gm-fill.done { background: linear-gradient(90deg, #30d158, #7be59f); }
.goal-mini-row .gm-nm { flex: 0 0 auto; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-mini-row .gm-pct { flex: 0 0 auto; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* notifications bell + panel + toast */
.notif-wrap { position: relative; display: inline-block; }
#notifBell { position: relative; }
.notif-count { position: absolute; top: -4px; right: -4px; background: #E5484D; color: #fff; font-size: 9.5px; font-weight: 800; min-width: 15px; height: 15px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; }
.notif-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 300; width: 300px; max-height: 360px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.notif-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text); }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.notif-when { font-size: 11px; color: var(--text-dim); }
.notif-empty { padding: 20px; text-align: center; color: var(--text-dim); font-style: italic; font-size: 13px; }
.notif-toast { position: fixed; bottom: 22px; right: 22px; z-index: 9999; background: var(--brand-green, #3D7D41); color: #fff; font-size: 13px; font-weight: 600; padding: 12px 18px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.4); max-width: 340px; opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; pointer-events: none; }
.notif-toast.show { opacity: 1; transform: translateY(0); }
/* bell panel v2 — header actions, Today/Yesterday/Earlier groups, per-item actions */
.notif-panel { width: 340px; max-height: 460px; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 1; font-size: 13px; }
.notif-head-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.notif-day { padding: 8px 12px 2px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.notif-kind { font-size: 11px; font-weight: 700; color: var(--text-dim); }
.notif-item .notif-acts { display: none; gap: 4px; padding-top: 4px; flex-wrap: wrap; }
.notif-item:hover .notif-acts, .notif-item:focus-within .notif-acts { display: flex; }
.notif-snooze-chips { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--text-dim); padding-top: 4px; }
.notif-snooze-chips.hidden { display: none; }
.notif-item.crit { border-left: 3px solid #E5484D; }
/* ⚙ Settings → 🔔 per-kind toggles */
.np-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text); cursor: pointer; }
.np-row:last-of-type { border-bottom: none; }
.np-row input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.np-crit { cursor: default; font-weight: 700; }
/* 🚨 critical takeover — interview good-lucks & follow-ups; only its buttons close it */
.crit-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(8,10,12,.82); display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(3px); }
.crit-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.6); max-width: 520px; width: 100%; padding: 34px 30px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.crit-icon { font-size: 56px; line-height: 1; }
.crit-tag { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #E5484D; }
.crit-msg { font-size: 17px; font-weight: 700; color: var(--text); overflow-wrap: break-word; max-width: 100%; }
.crit-count { font-size: 12px; }
.crit-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding-top: 4px; }
.crit-hint { font-size: 11.5px; }

/* Placement Log */
.placements-view { padding: 4px 2px 40px; }
.pl-head h2 { font-size: 22px; margin: 0 0 4px; color: var(--text); }
.pl-sub { color: var(--text-dim); font-size: 13px; margin: 0 0 18px; max-width: 780px; line-height: 1.5; }
.pl-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pl-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-align: center; }
.pl-h { font-size: 26px; font-weight: 800; color: var(--text); }
.pl-l { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.pl-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.pl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pl-table th { text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); border-bottom: 1px solid var(--line); white-space: nowrap; }
.pl-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: top; }
.pl-table tr:last-child td { border-bottom: none; }
.pl-role { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.pl-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-status { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--pc); border: 1px solid var(--pc); border-radius: 20px; padding: 2px 9px; }
@media (max-width: 620px) { .pl-summary { grid-template-columns: 1fr; } }

/* ---------------- Team chat ---------------- */
.chat-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 30px; }
.chat-overlay.hidden { display: none; }
.chat-box { width: min(940px, 100%); height: min(640px, 90vh); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.55); display: flex; overflow: hidden; }
.chat-side { width: 296px; flex: 0 0 auto; border-right: 1px solid var(--line); display: flex; flex-direction: column; background: var(--panel-2); }
.chat-side-head { padding: 18px 18px 12px; font-size: 18px; font-weight: 800; letter-spacing: -.2px; display: flex; align-items: center; justify-content: space-between; }
.chat-threads { flex: 1; overflow-y: auto; padding-bottom: 6px; }
.ct-sec { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; margin-top: 8px; border-top: 1px solid var(--line-soft); font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; font-weight: 800; color: var(--text-dim); }
.chat-threads > .ct-sec:first-child { border-top: none; margin-top: 0; padding-top: 8px; }
.ct-plus { background: transparent; border: 1px solid var(--line); color: var(--text-dim); border-radius: 6px; width: 18px; height: 18px; font-size: 12px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ct-plus:hover { color: var(--text); border-color: var(--accent); }
.ct-empty { padding: 4px 14px 8px; font-size: 11.5px; color: var(--text-dim); line-height: 1.45; }
.chat-thread { display: flex; align-items: center; gap: 11px; margin: 1px 8px; padding: 9px 10px; cursor: pointer; border-radius: 11px; border-left: none; position: relative; }
.chat-thread:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.chat-thread.active { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.chat-thread .ct-mid { flex: 1; min-width: 0; }
.chat-thread .ct-top { display: flex; align-items: baseline; gap: 6px; }
.chat-thread .ct-nm { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread .ct-time { flex: 0 0 auto; font-size: 10px; color: var(--text-dim); }
.chat-thread .ct-last { display: block; margin-top: 1px; font-size: 12px; line-height: 1.3; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 👤 avatar circles — photo or deterministic initials, optional presence dot */
.av-circle { position: relative; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: var(--accent); vertical-align: middle; }
.av-circle .av-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.av-dot { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--panel-2); background: #22c55e; box-sizing: content-box; }
.av-dot.idle { background: #eab308; }
.chat-thread .ct-unread { flex: 0 0 auto; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.chat-monitor-label { padding: 10px 14px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; font-weight: 800; color: #eab308; display: flex; align-items: center; gap: 5px; }
.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-main-head { padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--line); min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: color-mix(in srgb, var(--panel-2) 45%, transparent); }
.chm-id { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
.chm-meta { display: flex; flex-direction: column; min-width: 0; }
.chm-name { font-size: 15.5px; font-weight: 700; letter-spacing: -.1px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chm-sub { margin-top: 1px; font-size: 11.5px; font-weight: 500; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chm-tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.chm-pill { white-space: nowrap; }
.chm-pill .bl { font-weight: 700; }
.chm-help { padding-left: 8px; padding-right: 8px; }
.chm-sep { width: 1px; height: 20px; background: var(--line); margin: 0 3px; flex: 0 0 auto; }
@media (max-width: 1060px) { .chm-tools .chm-pill .bi { display: none; } }
@media (max-width: 900px) { .chm-tools .chm-pill .bl { display: inline-block; max-width: 58px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } }
/* 🏷 status picker — chips + duration, opened from the self strip / settings */
.status-pick { position: fixed; z-index: 700; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px; min-width: 236px; box-shadow: 0 14px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px; }
.sp-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); padding: 4px 8px 6px; }
.sp-durs { display: flex; align-items: center; gap: 4px; padding: 0 8px 8px; }
.sp-durlbl { font-size: 11px; color: var(--text-dim); font-weight: 600; margin-right: 2px; }
.sp-dur { background: transparent; border: 1px solid var(--line); color: var(--text-dim); border-radius: 999px; font: inherit; font-size: 11px; font-weight: 700; padding: 3px 9px; cursor: pointer; }
.sp-dur:hover { color: var(--text); border-color: var(--accent); }
.sp-dur.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sp-chip { display: flex; align-items: center; gap: 9px; background: transparent; border: none; color: var(--text); font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 8px; cursor: pointer; text-align: left; font-family: inherit; }
.sp-chip:hover { background: var(--panel-2); }
.sp-chip.sp-auto { border-top: 1px solid var(--line-soft); border-radius: 0 0 8px 8px; margin-top: 4px; padding-top: 10px; }
.sp-ico { width: 18px; text-align: center; flex: 0 0 auto; }
.sp-hint { font-size: 11px; line-height: 1.4; padding: 6px 8px 2px; max-width: 240px; }
.sp-in { margin: 2px 8px 8px; background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; }
.sp-row { display: flex; gap: 6px; padding: 0 8px 4px; }
.chat-covert { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #eab308; background: rgba(234,179,8,.12); border: 1px solid rgba(234,179,8,.35); border-radius: 20px; padding: 2px 9px; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 74%; }
.chat-msg .cm-who { font-size: 11px; color: var(--text-dim); margin: 0 0 3px 35px; }
.cm-avcol { width: 26px; flex: 0 0 auto; align-self: flex-end; }
.chat-msg:not(.mine) .cm-when, .chat-msg:not(.mine) .rx-row { margin-left: 35px; }
.cm-seen .av-circle { margin-right: 2px; }
.chat-msg .cm-bubble { padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; background: var(--panel-2); border: 1px solid var(--line-soft); color: var(--text); white-space: pre-wrap; word-wrap: break-word; }
.chat-msg .cm-when { font-size: 10px; color: var(--text-dim); margin: 3px 0 0 3px; }
.chat-msg.mine { align-self: flex-end; }
.chat-msg.mine .cm-bubble { background: var(--accent); border-color: var(--accent); color: #fff; }
.chat-msg.mine .cm-who, .chat-msg.mine .cm-when { text-align: right; }
.chat-compose { border-top: 1px solid var(--line); padding: 12px 14px; display: flex; gap: 9px; align-items: flex-end; }
.chat-compose textarea { flex: 1; resize: none; background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-family: inherit; max-height: 120px; }
.chat-empty { margin: auto; color: var(--text-dim); font-size: 13px; text-align: center; padding: 30px; }
.chat-readonly { margin: auto; color: #eab308; font-size: 12.5px; text-align: center; padding: 14px; }
#chatBtn { position: relative; }
.chat-btn-count { position: absolute; top: -5px; right: -5px; background: #E5484D; color: #fff; font-size: 9.5px; font-weight: 800; min-width: 15px; height: 15px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; }
.chat-btn-count.hidden { display: none; }
@media (max-width: 640px) { .chat-side { width: 100px; } .chat-thread .ct-mid, .chat-side-head span, .ct-sec > span, .chat-self .cs-meta, .chat-self .cs-edit { display: none; } }

/* eye / view-as label */
.viewas-wrap .va-label { font-size: 11px; color: var(--text-dim); font-weight: 600; }

/* owner-only elements (shown once we know the user is the owner) */
.owner-only { display: none !important; }
body.is-owner button.owner-only { display: inline-flex !important; }
body.is-owner .settings-menu .menu-item.owner-only { display: block !important; }
body.is-owner label.owner-only.field, body.is-owner .for-field { display: block !important; }

/* "For:" on-behalf select */
.for-field select { width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 14px; }

/* team-access live status + bulk settings */
.setup-live { font-size: 12px; font-weight: 700; }
.setup-live.ok { color: #6ddf9f; } .setup-live.warn { color: #f5cf8f; } .setup-live.off { color: var(--text-dim); }
.bulk-box { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.bulk-box h4 { font-size: 13px; margin: 0 0 8px; color: var(--text); }
.bulk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bulk-row select { background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 7px 9px; font-size: 12.5px; font-weight: 600; }

/* library editing */
.lib-row { display: flex; align-items: center; gap: 6px; }
.lib-row .lib-file { flex: 1; }
.lib-up { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.lib-up select, .lib-up input[type="text"] { background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 6px 9px; font-size: 12.5px; }

/* chat message delete + comms analytics */
.cm-line { display: flex; align-items: center; gap: 6px; }
.chat-msg.mine .cm-line { flex-direction: row-reverse; }
.cm-del { opacity: 0; border: none; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 11px; padding: 2px 4px; border-radius: 6px; transition: opacity .12s; flex: 0 0 auto; }
.chat-msg:hover .cm-del { opacity: .8; }
.cm-del:hover { color: var(--danger); background: rgba(229,72,77,.12); }
.ca-silent td { color: #f5cf8f; }
.ca-bar { width: 70px; height: 8px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.ca-fill { height: 100%; background: var(--accent); }
.ca-fill.p { background: #0EA5E9; }
.ca-trend td { padding: 4px 6px; }

/* group-goal member chips */
#gGroupPick .gpick { background: var(--panel-2); color: var(--text); border: 1.5px solid var(--line); }
#gGroupPick .gpick.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); outline: none; }

/* quick-preview metrics strip (home) */
.metric-strip { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-bottom: 1px solid var(--line-soft); background: var(--panel); flex-wrap: wrap; }
.ms-toggle { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; flex: 0 0 auto; }
.ms-seg { background: transparent; border: none; color: var(--text-dim); font-size: 11.5px; font-weight: 700; padding: 5px 11px; cursor: pointer; }
.ms-seg.on { background: var(--accent); color: #fff; }
.ms-tiles { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.ms-tile { display: flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 5px 11px; }
.ms-click { cursor: pointer; color: inherit; font: inherit; transition: border-color .12s, transform .08s; }
.ms-click:hover { border-color: var(--accent); transform: translateY(-1px); }
.ms-left { display: flex; flex-direction: column; gap: 3px; }
.ms-range { font-size: 10.5px; color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.ms-today { font-size: 11.5px; color: var(--text); white-space: nowrap; }
.ms-today b { color: var(--accent); }

/* ⚙ settings dropdown */
.settings-wrap { position: relative; display: inline-block; }
.settings-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 320; min-width: 180px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.5); padding: 6px; display: flex; flex-direction: column; }
.settings-menu.hidden { display: none; }
.menu-item { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); font-size: 13px; font-weight: 600; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.menu-item:hover { background: var(--panel-2); }
.menu-sep { height: 1px; background: var(--line-soft); margin: 4px 8px; }

/* search: multi-place destination chips */
.si-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.si-chip { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 16px; padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer; }
.si-chip:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.search-multi { cursor: default; }

/* dashboard person lens + range */
.dash-who { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-weight: 600; }
.dash-sub-range { font-size: 11.5px; color: var(--text-dim); font-weight: 600; margin-top: 3px; }
/* metric drill-down modal */
.det-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.det-search { flex: 1; min-width: 180px; background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 8px 11px; font-size: 13px; }
.det-who { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 7px 9px; font-size: 12.5px; font-weight: 600; }
.det-scroll { max-height: 420px; overflow-y: auto; }
.det-th { cursor: pointer; user-select: none; position: sticky; top: 0; background: var(--panel); }
.det-th:hover { color: var(--text); }
.det-tbl td { font-size: 12.5px; }
.ms-ico { font-size: 14px; }
.ms-val { font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.ms-lbl { font-size: 11px; color: var(--text-dim); font-weight: 600; }
@media (max-width: 700px) { .ms-lbl { display: none; } }

/* export modal presets */
.exp-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

/* 🗓 night-before planning — Today-view streak chip */
.plan-chip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); border: 1px solid var(--line-soft); border-radius: 10px; padding: 7px 12px; margin: 8px 0 12px; }
.plan-chip .dim { font-weight: 500; }
.plan-done { color: var(--accent); font-weight: 700; }
.plan-seg { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.plan-sel { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 5px 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.plan-sel:focus { outline: none; border-color: var(--accent); }
.eod-plan { width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; font-family: inherit; resize: vertical; }

/* assigned-event confirm banner */
.assign-banner { padding: 8px 16px; background: rgba(37,99,235,.1); border-bottom: 1px solid rgba(37,99,235,.35); display: flex; flex-direction: column; gap: 6px; }
.assign-banner.hidden { display: none; }
.assign-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); flex-wrap: wrap; }

/* admin: delete + setup guide */
.au-del { color: var(--danger) !important; }
.admin-setup { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.setup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.setup-toggle { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.setup-url { font-size: 13px; color: var(--text); margin: 6px 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.setup-url code { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 13px; color: var(--accent); }
.setup-steps { padding-left: 20px; font-size: 13px; color: var(--text); line-height: 1.65; margin: 0; }

/* prize wheel */
.wheel-wrap { position: relative; width: 240px; height: 250px; margin: 0 auto; }
.wheel-pointer { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); font-size: 22px; color: var(--text); z-index: 2; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.wheel { position: absolute; top: 10px; left: 0; width: 240px; height: 240px; border-radius: 50%; border: 4px solid var(--line); box-shadow: 0 10px 34px rgba(0,0,0,.45); }
.wheel-lbl { position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -34px; width: 68px; text-align: center; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); transform-origin: center; }
.wheel-result { min-height: 30px; margin-top: 14px; font-size: 15px; color: var(--text); }
.wheel-lbl2 { margin-top: -16px; font-size: 9.5px; line-height: 1.15; }
.wheel-lbl2 .wheel-ico { font-size: 14px; }
/* averages: tiny run-rate sub-line on scorecard tiles */
.ms-avg { display: block; font-size: 10.5px; margin-top: 2px; color: var(--text-dim); font-weight: 500; }

/* onboarding checklist + library */
.onb-box { background: color-mix(in srgb, var(--accent) 8%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.onb-box h4 { font-size: 13px; margin: 0 0 8px; color: var(--text); }
.onb-item { font-size: 13px; color: var(--text); padding: 3px 0; }
.onb-item.done { color: var(--text-dim); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.35); }
.lib-scroll { max-height: 420px; overflow-y: auto; }
.lib-folder h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); margin: 14px 0 6px; }
.lib-folder:first-child h4 { margin-top: 0; }
.lib-file { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 7px 11px; border: 1px solid var(--line-soft); border-radius: 10px; margin-bottom: 5px; font-size: 13px; color: var(--text); text-decoration: none; background: var(--panel-2); }
.lib-file:hover { border-color: var(--accent); }

/* team tab */
.team-view { padding: 4px 2px 40px; }
.tm-grid th .th-lbl { font-weight: 700; }
.tm-grid th:not(:first-child) { text-align: right; }
.tm-grid .tm-owner { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tm-grid .tm-lead { color: #6ddf9f; font-weight: 800; }
.tm-grid .tm-total td { border-top: 2px solid var(--line); font-weight: 800; }

/* brand logo + login logo — real logo is on white, so sit it on a clean white badge */
.brand-badge { display: inline-flex; align-items: center; background: #fff; border-radius: 8px; padding: 4px 8px; }
.brand-logo { height: 22px; width: auto; display: block; }
.brand-hq { font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 6px; padding: 1px 6px; }
.brand-welcome { margin-left: 4px; }
.login-logo-badge { display: flex; width: fit-content; background: #fff; border-radius: 12px; padding: 12px 18px; margin: 0 auto 16px; }
.login-logo-img { height: 40px; width: auto; display: block; }

/* theme picker */
.thm-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.thm-sw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; transition: transform .1s; }
.thm-sw:hover { transform: scale(1.08); }
.thm-sw.on { border-color: #fff; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor; }
.thm-moods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.thm-mood { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 9px 11px; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.thm-mood.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.thm-mood-dot { width: 16px; height: 16px; border-radius: 6px; border: 1px solid; flex: 0 0 auto; }

/* connections / onboarding */
.conn-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 15px; margin-bottom: 12px; background: var(--panel-2); }
.conn-card.on { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.conn-top { display: flex; align-items: flex-start; gap: 10px; }
.conn-ico { font-size: 22px; flex: 0 0 auto; }
.conn-name { font-size: 14px; font-weight: 700; color: var(--text); }
.conn-why { font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.conn-badge { margin-left: auto; flex: 0 0 auto; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--text-dim); border: 1px solid var(--line); border-radius: 20px; padding: 2px 9px; white-space: nowrap; }
.conn-badge.ok { color: #6ddf9f; border-color: rgba(48,209,88,.4); background: rgba(48,209,88,.1); }
.conn-steps { margin: 12px 0 10px; padding-left: 20px; font-size: 12.5px; color: var(--text); line-height: 1.6; }
.conn-steps li { margin-bottom: 3px; }
.conn-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); font-weight: 600; cursor: pointer; }
.conn-owner { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.conn-owner h4 { font-size: 13px; margin: 0; color: var(--text); }
.conn-owner select { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 600; width: 100%; max-width: 320px; }
.conn-roster { width: 100%; border-collapse: collapse; font-size: 13px; }
.conn-roster th { text-align: left; font-size: 11px; color: var(--text-dim); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.conn-roster th:not(:first-child) { text-align: center; font-size: 15px; }
.conn-roster td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); }

/* ---------------- Commission & payroll ---------------- */
.payroll-view { padding: 4px 2px 40px; }
.pay-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.pay-head h2 { font-size: 22px; margin: 0 0 4px; color: var(--text); }
.pay-sub { color: var(--text-dim); font-size: 13px; margin: 0; max-width: 720px; line-height: 1.5; }
.pay-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.pay-card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.pay-card .lbl { color: var(--text-dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; margin-bottom: 5px; }
.pay-card .val { font-size: 22px; font-weight: 800; line-height: 1.1; }
.pay-card.hero { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(62,99,221,.25); }
.pay-card.owed { border-color: rgba(245,166,35,.5); }
.pay-card .rev { color: #7fb8ff; } .pay-card .pos { color: #6ddf9f; }
.pay-note { background: rgba(62,99,221,.1); border: 1px solid rgba(62,99,221,.35); border-radius: 10px; padding: 11px 14px; font-size: 13px; color: var(--text); margin-bottom: 16px; }
.pay-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 820px) { .pay-cols { grid-template-columns: 1fr; } }
.pay-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.pay-panel h3 { font-size: 14px; margin: 0 0 12px; }
table.pay-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.pay-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-dim); padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.pay-table td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft); }
.pay-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.pay-table .pos { color: #6ddf9f; }
.pay-grid td.owed-txt { color: #f5cf8f; }
.pay-grid th.pay-num, .pay-grid td.pay-num { text-align: right; }
/* generic modal-card + fields (payroll, comp plan) */
.modal-card { width: 460px; max-width: calc(100vw - 32px); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.5); max-height: 88vh; overflow-y: auto; }
.modal-card h3 { margin: 0 0 10px; font-size: 17px; }
.fld { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); font-weight: 600; margin-bottom: 12px; }
.fld input, .fld select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 14px; font-weight: 500; }
.fld > input[type="number"], .fld > input[type="text"] { flex: 1; min-width: 120px; }
.cp-sec { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; font-size: 13px; color: var(--text); }
.cp-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-dim); margin-bottom: 7px; }
.cp-row input, .cp-row select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 13px; }
.btn.sm { padding: 4px 10px; font-size: 12px; }


/* ---- v8.18 audit polish ---- */
/* big, unmissable today date on the metric strip */
.ms-today2 { display: flex; align-items: baseline; gap: 7px; line-height: 1; margin-bottom: 6px; }
.ms-today2 .ms-dow { font-size: 17px; font-weight: 800; color: var(--accent); }
.ms-today2 .ms-date { font-size: 17px; font-weight: 800; color: var(--text); }
.ms-today2 .ms-yr { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.ms-ctl { display: flex; align-items: center; gap: 10px; }

/* search + chat get real presence */
.search-pill { background: var(--bg); border: 1px solid var(--line); color: var(--text-dim); border-radius: 20px; padding: 7px 14px; min-width: 190px; text-align: left; font-weight: 500; }
.search-pill:hover { border-color: var(--accent); color: var(--text); }
.sp-key { float: right; border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; font-size: 11px; color: var(--text-dim); }
.chat-cta { background: color-mix(in srgb, var(--accent) 18%, var(--panel-2)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); font-weight: 700; }
.chat-cta:hover { background: color-mix(in srgb, var(--accent) 30%, var(--panel-2)); }

/* chat attachments */
.cm-img { max-width: 260px; max-height: 220px; border-radius: 10px; display: block; cursor: zoom-in; margin: 2px 0; }
.cm-audio { width: 230px; height: 36px; display: block; margin: 2px 0; }
.cm-file { display: inline-block; color: inherit; font-weight: 600; text-decoration: underline; }
.cm-mic.rec-on { background: rgba(229,72,77,.25); border-color: var(--danger); }

/* goals archive */
.gb-past { margin-top: 22px; }
.gb-past summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-dim); padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.gb-past[open] summary { margin-bottom: 4px; }

/* admin activity: proper scrolling */
.admin-activity { max-height: 340px !important; overflow-y: auto !important; overscroll-behavior: contain; padding-bottom: 8px; }

/* dashboard viewing label */
.dash-view-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); font-weight: 700; margin-right: 2px; }


/* ---- v8.19 marathon ---- */
/* drill-downs take the screen they deserve */
.det-full { width: min(1240px, 96vw) !important; max-width: 96vw !important; max-height: 92vh; display: flex; flex-direction: column; }
.det-full .det-scroll { max-height: none; flex: 1; min-height: 200px; }
.det-full .det-tbl td { font-size: 13px; padding: 9px 12px; }
.det-full .det-tbl th { padding: 9px 12px; }

/* admin portal: never taller than the screen, always scrollable, top visible */
#adminModal { align-items: flex-start !important; padding: 3vh 16px; overflow-y: auto; }
.admin-modal { max-height: 94vh; overflow-y: auto; width: 720px; max-width: calc(100vw - 32px); }

/* comms analytics: readable */
.ca-wide { width: min(900px, 95vw) !important; max-width: 95vw !important; }
.ca-wide .pay-table td, .ca-wide .pay-table th { font-size: 13.5px; padding: 9px 10px; }
.ca-wide .pay-table tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--panel-2) 55%, transparent); }

/* chat emoji quick row */
.emoji-row { display: inline-flex; gap: 2px; }
.em-btn { background: transparent; border: none; font-size: 16px; cursor: pointer; padding: 2px 3px; border-radius: 6px; }
.em-btn:hover { background: var(--panel-2); }

/* reactions */
.rx-row { display: flex; gap: 4px; flex-wrap: wrap; margin: 3px 0 0 3px; }
.chat-msg.mine .rx-row { justify-content: flex-end; }
.rx-chip { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 1px 8px; font-size: 12px; cursor: pointer; }
.rx-chip.mine { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.react-pick { position: absolute; z-index: 50; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: flex; flex-wrap: wrap; gap: 2px; max-width: 260px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
/* 😀 full emoji keyboard — shared by reactions + composer */
.emoji-kb { position: fixed; z-index: 720; width: 324px; max-height: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 50px rgba(0,0,0,.55); padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.ek-search { background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; font-family: inherit; }
.ek-recent { display: flex; gap: 2px; overflow-x: auto; flex: 0 0 auto; padding-bottom: 2px; }
.ek-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; flex: 0 0 auto; }
.ek-tab { background: transparent; border: none; font-size: 15px; padding: 3px 6px; border-radius: 6px; cursor: pointer; opacity: .5; }
.ek-tab:hover { opacity: .85; }
.ek-tab.on { background: var(--panel-2); opacity: 1; }
.ek-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; min-height: 140px; }
.ek-em { background: transparent; border: none; font-size: 19px; padding: 4px 2px; border-radius: 6px; cursor: pointer; line-height: 1.2; }
.ek-em:hover { background: var(--panel-2); }
.ek-none { grid-column: 1 / -1; text-align: center; padding: 20px 0; font-size: 12px; }
/* 👥 group-creator member chips (avatar + name, click to toggle) */
.grp-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.grp-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 20px; padding: 4px 11px 4px 5px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.grp-chip .grp-check { display: none; color: var(--accent); font-weight: 800; }
.grp-chip.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.grp-chip.selected .grp-check { display: inline; }
.chat-msg { position: relative; }

/* v8.21: chat parity + profiles + clients */
.cm-quote { border-left: 3px solid var(--accent); background: rgba(255,255,255,.06); border-radius: 6px; padding: 4px 8px; font-size: 11.5px; color: var(--text-dim); margin-bottom: 4px; }
.cm-edited { font-size: 10px; color: var(--text-dim); font-style: italic; }
.cm-acts { display: inline-flex; gap: 1px; }
.pin-bar { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, #EAB308 12%, var(--panel)); border: 1px solid rgba(234,179,8,.35); border-radius: 10px; padding: 6px 10px; font-size: 12px; margin-bottom: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.pin-item a { color: var(--text-dim); text-decoration: none; margin-left: 3px; }
.cm-seen { text-align: right; font-size: 10.5px; color: var(--text-dim); }
.cm-typing { font-size: 12px; color: var(--text-dim); font-style: italic; padding: 2px 4px; }
/* iMessage-style polish: day dividers, unread marker, tight same-sender groups */
.cm-daydiv { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; color: var(--text-dim); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; align-self: stretch; }
.cm-daydiv::before, .cm-daydiv::after { content: ""; flex: 1; border-top: 1px solid var(--line-soft); }
.cm-newdiv { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; color: var(--danger); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; align-self: stretch; }
.cm-newdiv::before, .cm-newdiv::after { content: ""; flex: 1; border-top: 1px solid var(--danger); }
.chat-msg.grp { margin-top: -7px; }          /* pulls grouped bubbles together (list gap is 10px) */
.chat-msg.grp-mid .cm-when { display: none; }  /* one timestamp per group — on its last message */
.reply-bar { padding: 6px 14px; font-size: 12px; color: var(--text-dim); background: var(--panel-2); border-top: 1px solid var(--line-soft); }
.reply-bar a { color: var(--text-dim); margin-left: 6px; }
.gif-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-height: 110px; max-height: 46vh; overflow-y: auto; }
.gif-grid img { height: 100px; border-radius: 8px; cursor: pointer; }
.gif-grid img:hover { outline: 2px solid var(--accent); }
.prof-h { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); margin: 16px 0 8px; }
.prof-h:first-child { margin-top: 0; }
.client-past { opacity: .65; }
.client-name { color: var(--text); text-decoration: none; }
a.client-name:hover { color: var(--accent); text-decoration: underline; }

/* v8.22: profile action bar + placement micro-polish */
.prof-acts { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 12px; }
.prof-acts a { text-decoration: none; }
.user-area { border-left: 1px solid var(--line-soft); padding-left: 10px; }
.ms-tiles { row-gap: 6px; }
.det-bar .ms-toggle { flex-wrap: wrap; }

/* ── v8.25: confetti celebration ── */
.confetti-wrap{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.confetti-wrap i{position:absolute;top:-14px;width:9px;height:14px;opacity:.95;animation:cfall linear forwards}
@keyframes cfall{0%{transform:translateY(-10px) rotate(0deg)}100%{transform:translateY(105vh) rotate(720deg);opacity:.7}}

/* ── v8.25: activity heatmap ── */
.hm-wrap{display:flex;gap:3px;overflow-x:auto;padding:8px 2px}
.hm-col{display:flex;flex-direction:column;gap:3px}
.hm-c{width:11px;height:11px;border-radius:2.5px;display:inline-block;background:var(--panel-2,#2a2d33)}
.hm-0{background:color-mix(in srgb,var(--text,#eee) 7%,transparent)}
.hm-1{background:color-mix(in srgb,var(--accent,#e0b64f) 30%,transparent)}
.hm-2{background:color-mix(in srgb,var(--accent,#e0b64f) 55%,transparent)}
.hm-3{background:color-mix(in srgb,var(--accent,#e0b64f) 80%,transparent)}
.hm-4{background:var(--accent,#e0b64f);box-shadow:0 0 6px color-mix(in srgb,var(--accent,#e0b64f) 60%,transparent)}
.hm-off{opacity:.18}
.hm-foot{font-size:12px;margin-top:4px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}

/* ── v8.26: weekend toggle ── */
.wknd-toggle{position:absolute;top:4px;right:4px;font-size:10px;padding:2px 7px;border-radius: 10px;border:1px solid color-mix(in srgb,var(--text,#eee) 18%,transparent);background:color-mix(in srgb,var(--text,#eee) 6%,transparent);color:var(--text-dim,#aaa);cursor:pointer;z-index:3}
.wknd-toggle:hover{background:color-mix(in srgb,var(--accent,#e0b64f) 25%,transparent);color:var(--text,#eee)}
.col-head{position:relative}
.wknd-off-head{display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim,#888);font-size:14px;border-left:1px dashed color-mix(in srgb,var(--text,#eee) 15%,transparent)}
.wknd-off-head:hover{color:var(--accent,#e0b64f)}
.wknd-off-col{cursor:pointer;display:flex;align-items:flex-start;justify-content:center;padding-top:24px;border-left:1px dashed color-mix(in srgb,var(--text,#eee) 15%,transparent);background:color-mix(in srgb,var(--text,#eee) 2%,transparent)}
.wknd-off-col:hover .wknd-vtxt{color:var(--accent,#e0b64f)}
.wknd-vtxt{writing-mode:vertical-rl;font-size:11px;letter-spacing:2px;color:var(--text-dim,#777)}


/* ================================================================
   🧰 Toolbox (growth mode) — v8.26 feature pack
   ================================================================ */
.growth-view { padding: 4px 2px 40px; }
.gw-head h2 { font-size: 22px; margin: 0 0 4px; color: var(--text); }
.gw-sub { color: var(--text-dim); font-size: 13px; margin: 0 0 18px; max-width: 820px; line-height: 1.5; }
.gw-headrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.gw-headrow h2 { margin: 0; }
.gw-headrow .spacer { flex: 1; }
.gw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.gw-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px;
  cursor: pointer; color: var(--text); font: inherit; transition: border-color .15s, transform .15s; }
.gw-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.gw-ico { font-size: 26px; }
.gw-name { font-size: 16px; font-weight: 700; }
.gw-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; font-weight: 400; }

/* dynamic modals (modalX) must stack above the fixed dialogs (e.g. the
   interview modal opens the scorecard editor on top of itself) AND above the
   chat/search overlays (z 500) — at 60 every modal opened from chat (polls,
   schedule, GIF picker, file viewer) rendered invisibly BEHIND the overlay,
   which read as "the button does nothing". Catch-up (2600), the clip pill
   (3000), toasts (9999) and critical alerts (10000) still stack above. */
#modalX { z-index: 900; }

/* generic textareas inside dynamic modal fields (scorecard, ad writer, sequences) */
.modal-card .fld textarea { width: 100%; margin-top: 4px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font-size: 13.5px; font-family: inherit; line-height: 1.45; resize: vertical; }

/* ---------- 📅 booking links ---------- */
.bk-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.bk-row:last-child { border-bottom: none; }
.bk-row.bk-off { opacity: .55; }
.bk-info { flex: 1; min-width: 0; }
.bk-title { font-weight: 700; font-size: 14px; }
.bk-badge { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; border: 1px solid var(--line);
  border-radius: 10px; padding: 1px 7px; color: var(--text-dim); vertical-align: middle; }
.bk-meta { font-size: 12px; margin-top: 1px; }
.bk-url { font-size: 11.5px; color: var(--text-dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.bk-acts { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- 🚀 sequences ---------- */
.seq-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.seq-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.seq-name { font-weight: 700; font-size: 15px; }
.seq-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.seq-chip { font-size: 11.5px; border: 1px solid var(--line); background: var(--panel-2);
  border-radius: 20px; padding: 3px 10px; color: var(--text-dim); white-space: nowrap; }
.seq-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.seq-step { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px; margin-bottom: 8px; }
.seq-step-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.seq-step-bar .spacer { flex: 1; }
.seq-step input, .seq-step select { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-size: 13px; }
.seq-step textarea { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-size: 13px; font-family: inherit; line-height: 1.45; resize: vertical; }
.seq-preview { font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 560px; }

/* ---------- 📋 pipeline board (inside Jobs: List | 📋 Pipeline) ---------- */
.jobs-tabs { display: flex; gap: 6px; margin: 0 0 12px; }
#jobsModal .modal.jobs-wide { width: min(1160px, calc(100vw - 32px)); }
.pipe-board { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 1100px) { .pipe-board { grid-template-columns: repeat(5, 230px); overflow-x: auto; padding-bottom: 10px; } }
.pipe-col { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px; min-height: 240px; }
.pipe-col.drag-over { border-color: var(--pc, var(--accent)); box-shadow: inset 0 0 0 1px var(--pc, var(--accent)); }
.pipe-col-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px; color: var(--pc, var(--text-dim)); padding: 3px 4px 11px; }
.pipe-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pc, var(--line)); flex: 0 0 auto; }
.pipe-count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px; }
.pipe-cards { display: flex; flex-direction: column; gap: 8px; }
.pipe-card { background: var(--panel-2); border: 1px solid var(--line-soft); border-left: 3px solid var(--pc, var(--line));
  border-radius: 10px; padding: 9px 11px; cursor: grab; position: relative; }
/* 🗑 card delete — quiet until you hover the card */
.pipe-del { position: absolute; top: 4px; right: 4px; background: none; border: none; color: var(--text-dim);
  font-size: 12px; line-height: 1; padding: 3px 5px; border-radius: 6px; cursor: pointer; opacity: 0; }
.pipe-card:hover .pipe-del { opacity: .75; }
.pipe-del:hover { opacity: 1; color: var(--danger); background: var(--panel); }
.pipe-card:active { cursor: grabbing; }
.pipe-card.dragging { opacity: .45; }
.pipe-cand { font-weight: 700; font-size: 13.5px; color: var(--text); text-decoration: none; }
.pipe-cand:hover { color: var(--accent); }
.pipe-job { font-size: 12px; margin-top: 2px; }
.pipe-foot { font-size: 11px; margin-top: 5px; }
.pipe-empty { font-size: 12px; font-style: italic; padding: 8px 4px; }

/* ---------- 🎤 scorecards ---------- */
.star-chip { font-size: 16px; padding: 4px 11px; color: var(--text-dim); }
.chips.small .star-chip.selected { color: #e0b64f; border-color: #e0b64f; background: rgba(224,182,79,.14); }
.score-row { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.score-row-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.score-stars { color: #e0b64f; letter-spacing: 2px; font-size: 14px; }
.score-verdict { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.score-line { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; line-height: 1.45; }

/* ---------- 💜 placement pulse ---------- */
.pulse-row.pulse-bad { background: rgba(229,72,77,.09); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.pulse-score { font-weight: 800; font-size: 13px; color: var(--accent); flex: 0 0 auto; }
.pulse-score.bad { color: var(--danger); }

/* ---------- ✍️ job ad writer ---------- */
.adw-grid { display: grid; grid-template-columns: 320px 1fr; gap: 18px; }
@media (max-width: 780px) { .adw-grid { grid-template-columns: 1fr; } }
.adw-form .fld { display: block; }
.adw-form .fld input { width: 100%; margin-top: 4px; }
.adw-form .fld textarea { background: var(--panel-2); }
.adw-outwrap { min-width: 0; }
.adw-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.adw-out { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 14px 16px; min-height: 340px; max-height: 58vh; overflow-y: auto; font-size: 13px; line-height: 1.55; }
.adw-text { white-space: pre-wrap; color: var(--text); }
.adw-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }

/* ---------- Density: Comfortable (default) vs Compact (⚙ → 🎨 Appearance & layout).
   body.density-compact tightens paddings, row heights and headline sizes ~5-10%
   across the shell, dashboard, Today view and modals. Calendar slot height is
   left alone (it's pixel-synced with SLOT_H in app.js). ---------- */
body.density-compact { font-size: 13px; }
body.density-compact .btn { padding: 5px 10px; font-size: 12.5px; }
body.density-compact .btn.sm { padding: 3px 8px; font-size: 11.5px; }
body.density-compact .topbar { padding: 8px 14px; gap: 10px; row-gap: 6px; }
body.density-compact .layout { padding: 10px; }
body.density-compact .dash-head { margin-bottom: 12px; }
body.density-compact .dash-panel { padding: 12px 14px; margin-bottom: 10px; }
body.density-compact .stat-cards { gap: 8px; margin-bottom: 14px; }
body.density-compact .stat { padding: 11px 12px; }
body.density-compact .stat-h { font-size: 24px; }
body.density-compact .today-head { margin-bottom: 12px; }
body.density-compact .today-head h1 { font-size: 22px; }
body.density-compact .today-card { padding: 11px 14px; margin-bottom: 10px; }
body.density-compact .today-row { padding: 6px 0; gap: 10px; }
body.density-compact .menu-item { padding: 7px 10px; font-size: 12.5px; }
body.density-compact .modal { padding: 18px; }
body.density-compact .modal-card { padding: 16px 18px; }
body.density-compact .field input, body.density-compact .field select { padding: 6px 8px; }

/* ---------- 🎨 Appearance & layout modal ---------- */
.ap-sec { margin: 18px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); font-weight: 700; }
.ap-sec .dim { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ap-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line-soft); border-radius: 8px; margin-bottom: 6px; background: var(--panel-2); font-size: 13px; font-weight: 600; }
.ap-row.off { opacity: .55; }
.ap-row label { flex: 1; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ap-row input[type="checkbox"] { accent-color: var(--accent); }
.ap-move { display: inline-flex; gap: 4px; }
.ap-move .btn { padding: 2px 8px; font-size: 12px; line-height: 1.4; }
.ap-move .btn:disabled { opacity: .3; cursor: default; }
.ap-den { display: flex; gap: 8px; }
.ap-den .btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ap-grid .ap-row { margin-bottom: 0; cursor: pointer; }

/* ---------- Chat v2: clips, catch-up, polls, later, presence ---------- */
.clip-pill { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--danger); border-radius: 24px; padding: 8px 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); font-variant-numeric: tabular-nums; font-weight: 700; }
.clip-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: clipblink 1.1s infinite; }
@keyframes clipblink { 50% { opacity: .25; } }
.cm-clip video { max-width: 420px; width: 100%; border-radius: 10px; display: block; background: #000; }
.clip-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 11.5px; }
.spd-chips { display: inline-flex; gap: 4px; }
.spd-chip { background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim); border-radius: 10px; padding: 0 7px; font-size: 10.5px; cursor: pointer; line-height: 18px; }
.spd-chip.on { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.cm-voice { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cm-flash { animation: cmflash 2.4s; }
@keyframes cmflash { 0%, 60% { background: color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 10px; } }

/* ⚡ Catch Up card stack */
.cu-overlay { position: fixed; inset: 0; z-index: 2600; background: rgba(4, 12, 22, .88); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; }
.cu-card { width: min(560px, 92vw); max-height: 82vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; box-shadow: 0 16px 48px rgba(0, 0, 0, .55); }
.cu-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }
.cu-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: transform .2s, background .2s; }
.cu-dot.on { background: var(--accent); transform: scale(1.35); }
.cu-dot.done { background: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.cu-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 800; font-size: 15px; margin-bottom: 10px; }
.cu-msgs { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; min-height: 60px; }
.cu-msg { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 11px; font-size: 13px; line-height: 1.45; }
.cu-acts { display: flex; gap: 8px; justify-content: space-between; margin-top: 14px; }
.cu-hint { text-align: center; font-size: 11px; margin-top: 8px; }
.cu-done { text-align: center; align-items: center; }
.cu-fin { font-size: 42px; margin: 8px 0; }

/* 📊 Polls */
.poll-box { min-width: 240px; }
.poll-q { font-weight: 800; margin-bottom: 8px; }
.poll-opt { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 7px 10px; margin: 3px 0 0; cursor: pointer; font-size: 13px; text-align: left; font-family: inherit; }
.poll-opt:hover { border-color: var(--accent); }
.poll-opt.mine { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.poll-fill { position: absolute; top: 0; bottom: 0; left: 0; background: color-mix(in srgb, var(--accent) 30%, transparent); transition: width .4s; }
.poll-lbl, .poll-ct { position: relative; }
.poll-ct { font-size: 11.5px; color: var(--text-dim); margin-left: 10px; white-space: nowrap; }
.poll-names { font-size: 10.5px; color: var(--text-dim); margin: 2px 2px 0; }
.poll-total { font-size: 11px; margin-top: 7px; }

/* 🔖 Later drawer */
.later-list { display: flex; flex-direction: column; gap: 10px; max-height: 55vh; overflow-y: auto; }
.later-item { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; }
.later-top { font-size: 12px; margin-bottom: 4px; }
.later-body { font-size: 13px; line-height: 1.45; }
.later-acts { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

/* 🟢 Presence + chat side extras */
.pres { font-size: 10.5px; margin-left: 5px; font-weight: 400; }
.pres-status { color: var(--text-dim); font-style: italic; }
.chat-side-tools { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
/* 🪞 self strip — you + your live status at the bottom of the sidebar; click = status picker */
.chat-self { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 55%, transparent); cursor: pointer; }
.chat-self:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.chat-self .cs-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-self .cs-nm { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-self .cs-st { font-size: 11.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-self .cs-st.dim { color: var(--text-dim); font-style: italic; }
.chat-self .cs-edit { flex: 0 0 auto; color: var(--text-dim); font-size: 12px; }

/* ---- 🩺 System health chips + 💾 backup rows + scorecard deltas (dashboard) ---- */
.hl-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: 12.5px; cursor: default; }
.hl-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.hl-green .hl-dot { background: var(--accent); }
.hl-amber .hl-dot { background: #CA8A04; }
.hl-red .hl-dot { background: var(--danger); }
.hl-red { border-color: var(--danger); }
.bk-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.bk-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ms-delta { display: block; font-size: 11px; margin-top: 2px; font-weight: 500; }
#exportResult { margin-top: 8px; font-size: 12.5px; }
#exportResult:empty { display: none; }

/* ---------- Phase A polish (v833): scrollbars, focus, hover coverage, shared hint classes ---------- */
/* Thin themed scrollbars everywhere (chat, drill-downs, modals, board columns) */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--line) 75%, #fff 18%); background-clip: padding-box; }

/* One focus language for all form fields (matches the existing accent-border convention) */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); }

/* Hover states for clickable things that had none */
.chip:hover { filter: brightness(1.12); }
.chips.small .chip:hover { filter: none; border-color: color-mix(in srgb, var(--line) 40%, #fff 20%); }
.rx-chip:hover, .spd-chip:hover, .si-chip:hover { border-color: color-mix(in srgb, var(--line) 45%, #fff 22%); color: var(--text); }
.jump-date:hover, .thm-mood:hover { border-color: color-mix(in srgb, var(--line) 50%, #fff 18%); }
.ms-seg:hover, .prio-opt:hover { color: var(--text); }
.linklike:hover, .dock-open:hover { color: var(--accent-hover); }
.tl-feed summary:hover { opacity: 1; }
.gb-past summary:hover { color: var(--text); border-color: color-mix(in srgb, var(--line) 55%, #fff 15%); }
.todo-showdone:hover, .conn-check:hover, .spott-cand-toggle:hover, .setup-toggle:hover { color: var(--text); }
.gif-grid img:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.pipe-card:hover { border-color: var(--line); background: color-mix(in srgb, var(--panel-2) 82%, #fff 5%); }

/* Subtle interaction smoothing (colors only — never layout) */
.chip, .rx-chip, .spd-chip, .si-chip, .tag-chip, .jump-date, .thm-mood, .ms-seg, .prio-opt,
.linklike, .dock-open, .menu-item, .search-item, .chat-thread, .pipe-card, .tf-search-x,
.todo-showdone, .conn-check, .spott-cand-toggle, .setup-toggle, .gb-past summary {
  transition: background .15s, border-color .15s, color .15s;
}

#pingToast, .notif-toast { overflow-wrap: break-word; }

/* Shared classes replacing the most-repeated inline styles in app.js */
.modal-hint { font-size: 12.5px; margin: -4px 0 12px; }
.form-msg { font-size: 12px; min-height: 14px; }

/* ================================================================
   ⚙ Settings (mode "settings") — left section rail + content pane
   ================================================================ */
.settings-view { padding: 4px 2px 40px; }
.set-shell { display: flex; gap: 20px; align-items: flex-start; max-width: 1060px; margin: 0 auto; }
.set-rail { flex: 0 0 208px; position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 10px 8px 12px; }
.set-rail-title { font-size: 15px; font-weight: 800; color: var(--text); padding: 4px 10px 10px; }
.set-rail-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: none; color: var(--text-dim); font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.set-rail-item:hover { background: var(--panel-2); color: var(--text); }
.set-rail-item.on { background: var(--accent); color: #fff; }
.sri-ico { width: 20px; text-align: center; flex-shrink: 0; }
.set-pane { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 20px 24px 10px; }
.set-sec-head { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.set-sec-head h2 { margin: 0 0 3px; font-size: 19px; color: var(--text); }
.set-sec-head .dim { font-size: 12.5px; line-height: 1.5; margin: 0; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.set-row:last-child { border-bottom: none; }
.set-row-l { min-width: 0; }
.set-row-label { font-size: 13.5px; font-weight: 700; color: var(--text); }
.set-row-hint { font-size: 12px; color: var(--text-dim); margin-top: 2px; line-height: 1.45; }
.set-row-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.set-pill { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-dim); white-space: nowrap; background: var(--panel-2); }
.set-pill.ok { color: #6ddf9f; border-color: rgba(109, 223, 159, .35); background: rgba(109, 223, 159, .08); }
.set-pill.warn { color: #f5cf8f; border-color: rgba(245, 207, 143, .35); background: rgba(245, 207, 143, .08); }
.set-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); display: inline-block; }
@media (max-width: 780px) {
  .set-shell { flex-direction: column; gap: 12px; }
  .set-rail { position: static; flex: none; flex-direction: row; overflow-x: auto; width: 100%; padding: 8px; gap: 6px; }
  .set-rail-title { display: none; }
  .set-rail-item { width: auto; white-space: nowrap; padding: 7px 12px; border-radius: 999px; background: var(--panel-2); }
  .set-pane { padding: 16px 16px 8px; }
  .set-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .set-row-r { justify-content: flex-start; }
}

/* ---- C5: composer labels, file cards, viewers, digest metric legends ---- */
/* hover tooltips that work everywhere (the desktop shell is flaky with native title bubbles) */
/* [data-tip] bubbles are JS-positioned into #uiTip (fixed) — never clipped by
   overflow containers, and they flip below the element near the viewport top. */
#uiTip { position: fixed; z-index: 1300; pointer-events: none; display: none; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; font-size: 11.5px; font-weight: 500; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
/* composer tools — one consistent size and rhythm */
.chat-compose { flex-wrap: wrap; gap: 7px; align-items: center; }
.chat-compose .cm-tool { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
.chat-compose textarea { min-width: 200px; }
/* attachment file cards (PDF, docx, …) — open in-app or download, never target=_blank */
.cm-filewrap { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0; }
.cm-filecard { display: inline-flex; align-items: center; gap: 9px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; color: var(--text); font-family: inherit; font-size: 13px; text-decoration: none; text-align: left; max-width: 300px; }
.cm-filecard:hover { border-color: var(--accent); }
.chat-msg.mine .cm-filecard { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; }
.cm-fico { font-size: 20px; line-height: 1; }
.cm-fmeta { display: flex; flex-direction: column; min-width: 0; }
.cm-fname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.cm-fhint { font-size: 10.5px; opacity: .68; }
.cm-dl { text-decoration: none; font-size: 14px; color: inherit; opacity: .7; padding: 4px; border-radius: 8px; }
.cm-dl:hover { opacity: 1; background: var(--panel-2); }
.chat-msg.mine .cm-dl:hover { background: rgba(255,255,255,.18); }
/* in-app viewers — PDFs/images open right here (the shell ignores window.open) */
.cm-viewer { max-width: min(880px, 94vw); width: min(880px, 94vw); }
.cm-fileframe { width: 100%; height: min(62vh, 560px); border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.cm-lightbox { max-width: 100%; max-height: 62vh; display: block; margin: 0 auto; border-radius: 10px; }
/* composer "?" legend modal */
.ch-row { display: flex; gap: 12px; align-items: flex-start; padding: 8px 2px; border-bottom: 1px solid var(--line-soft); }
.ch-row:last-of-type { border-bottom: none; }
.ch-ico { font-size: 19px; line-height: 1.3; width: 26px; text-align: center; flex: 0 0 auto; }
/* digest metric headers — icon + its METRIC_DEFS label, no more emoji guessing */
.tm-mh { vertical-align: bottom; }
.tm-mico { display: block; font-size: 15px; }
.tm-mhl { display: block; font-size: 9px; font-weight: 600; color: var(--text-dim); line-height: 1.15; white-space: normal; max-width: 62px; margin: 2px auto 0; }

/* ── v8.31: hover time helper on calendar slots ── */
#slotTip{position:fixed;z-index:1200;pointer-events:none;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--accent,#3D7D41) 26%,#101318);border:1px solid var(--accent,#3D7D41);color:var(--text,#eee);box-shadow:0 4px 14px rgba(0,0,0,.45);display:none;white-space:nowrap}
.time-cell.tc-hot{color:var(--accent,#3D7D41);font-weight:700;background:color-mix(in srgb,var(--accent,#3D7D41) 14%,transparent);border-radius:4px}

/* ── v8.32: day headers stay frozen while the week scrolls ── */
.cal-grid .col-head{position:sticky;top:0;z-index:40;background:var(--panel,#151a21);box-shadow:0 3px 8px rgba(0,0,0,.35)}
.cal-grid .col-head.time-head{z-index:41}

/* ── v8.34: listen-before-send voice review bar ── */
#voiceReview{display:none;align-items:center;gap:10px;padding:8px 12px;margin:6px 0;border-radius:10px;background:color-mix(in srgb,var(--accent,#3D7D41) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent,#3D7D41) 45%,transparent);flex-wrap:wrap}
#voiceReview .vr-lbl{font-size:12.5px;font-weight:600;color:var(--text-dim,#aaa)}
#voiceReview audio{height:34px;flex:1;min-width:180px}

/* ── v8.36: watch-before-send clip review bar ── */
#clipReview{display:none;flex-direction:column;gap:8px;padding:10px 12px;margin:6px 0;border-radius:10px;background:color-mix(in srgb,var(--accent,#3D7D41) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent,#3D7D41) 45%,transparent)}
#clipReview video{max-height:240px;width:100%;border-radius:8px;background:#000}
#clipReview .cr-acts{display:flex;gap:8px;justify-content:flex-end}

/* ── J1: 🎯 Pipeline hub priority board ── */
.pb-list { display: flex; flex-direction: column; gap: 10px; max-width: 980px; }
.pb-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 12px;
  cursor: grab; transition: border-color .12s, box-shadow .12s; }
.pb-card:active { cursor: grabbing; }
.pb-card.dragging { opacity: .45; }
.pb-card.drag-over { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pb-rank { font-size: 18px; font-weight: 800; color: var(--accent); min-width: 30px; line-height: 1.3; }
.pb-main { flex: 1; min-width: 0; }
.pb-title { font-size: 14px; line-height: 1.35; }
.pb-co { font-size: 12.5px; }
.pb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.pb-chip { font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  color: var(--pc, var(--text)); background: color-mix(in srgb, var(--pc, var(--line)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc, var(--line)) 45%, transparent); }
.pb-chip:hover, .pb-chip.open { background: color-mix(in srgb, var(--pc, var(--line)) 26%, transparent); }
.pb-cands { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; padding: 8px 10px;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 8px; font-size: 12.5px; }
.pb-grip { color: var(--text-dim); font-size: 15px; align-self: center; user-select: none; }