/* ============================================================
   page-extras.css — additional styles for pages I built
   (reconciles with existing styles.css)
   ============================================================ */

/* Page wrapper baseline */
.page { padding: var(--pad-page); max-width: 1300px; margin: 0 auto; }

/* Bot Behavior / settings inputs — these were unstyled (faint, hard to read,
   especially when disabled in read-only mode). Give them a proper readable
   field style with full-contrast text in every state. */
.input,
textarea.input,
input.input {
  width: 100%;
  background: var(--bg-elev-1, #fff);
  color: var(--text-1, #0f172a);
  border: 1px solid var(--line, #d8dee9);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
  font-family: var(--font-sans, inherit);
}
.input:focus,
textarea.input:focus,
input.input:focus {
  outline: none;
  border-color: var(--brand, #2563eb);
  box-shadow: 0 0 0 3px var(--brand-soft, rgba(37,99,235,0.15));
}
.input::placeholder { color: var(--text-3); opacity: 1; }
/* Disabled fields stayed faint (browser default grays the text). Keep them
   visually "read-only" but fully legible. */
.input:disabled,
textarea.input:disabled,
input.input:disabled,
input:disabled, textarea:disabled, select:disabled {
  -webkit-text-fill-color: var(--text-1, #0f172a);
  color: var(--text-1, #0f172a);
  opacity: 1;
  background: var(--bg-elev-2, #f1f5f9);
  cursor: default;
}
.input-sm { font-size: 12px; padding: 5px 8px; }

/* Card — A15: allow descendant dropdowns to escape clipping. Charts use
   their own SVG viewport so visible overflow is safe at the card level. */
.card {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: visible;
  margin-bottom: 0;
}
.card.card-clip { overflow: hidden; }
html[data-aesthetic="terminal"] .card { border-radius: var(--r-sm); }

/* Re-alias tables */
.t { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.t th {
  text-align: left;
  font-size: 10.5px; font-weight: 500; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-3);
  padding: 10px 14px;
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap; position: sticky; top: 0;
}
.t th.sortable { cursor: pointer; user-select: none; }
.t th.sortable:hover { color: var(--text-2); }
.t th .sort-ic { display: inline-block; margin-left: 4px; opacity: 0.5; }
.t th.sorted { color: var(--text); }
.t th.sorted .sort-ic { opacity: 1; color: var(--brand); }
.t td {
  padding: var(--pad-row, 10px) 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--text); vertical-align: middle;
}
.t tbody tr { transition: background 80ms; }
.t tbody tr:hover td { background: var(--bg-hover); }
.t tbody tr:last-child td { border-bottom: 0; }
.t td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Toolbar */
.toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev-1);
  flex-wrap: wrap;
}
.search { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); background: var(--bg); border-radius: var(--r-sm); flex: 0 1 320px; min-width: 220px; }
.search input { background: transparent; border: 0; outline: none; flex: 1; font-size: 13px; color: var(--text); }
.search input::placeholder { color: var(--text-3); }
.search .ic { color: var(--text-3); }
.sel { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; font-size: 12.5px; color: var(--text); cursor: pointer; }

/* KPI grid widths */
.kpi-grid { display: grid; gap: 12px; }
.kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Two-column 2:3 layout */
.grid-2-3 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.grid-cards-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.employee-card-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: stretch; gap: 14px; }

/* AI roll-up card */
.card-ai {
  background:
    linear-gradient(180deg, var(--brand-soft) 0%, transparent 70%),
    var(--bg-elev-1);
  border-color: color-mix(in oklab, var(--brand) 25%, var(--line));
}
.ai-body { padding: 14px 18px; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.ai-body p + p { margin-top: 8px; }
.ai-body strong { font-weight: 600; }
.ai-foot { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line); }
.ai-typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: 0.5; animation: dot 1.2s infinite; }
.ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { transform: scale(0.7); opacity: 0.4; } 30% { transform: scale(1); opacity: 1; } }

/* Activity feed */
.feed { padding: 6px 0; }
.feed-row { display: flex; align-items: center; gap: 10px; padding: 7px 16px; border-bottom: 1px dashed var(--line); }
.feed-row:last-child { border-bottom: 0; }
.feed-line { flex: 1; font-size: 12.5px; color: var(--text); }
.feed-line .muted { color: var(--text-3); }
.feed-time { font-size: 11px; color: var(--text-3); }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-3); }
.feed-dot.feed-signin { background: var(--ok); }
.feed-dot.feed-signoff { background: var(--brand); }
.feed-dot.feed-blocker { background: var(--err); }
.feed-dot.feed-pto { background: var(--brand); }
.feed-dot.feed-admin { background: var(--text-3); }

/* Blockers list */
.blocker-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; }
.blocker-card {
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.blocker-text { margin-top: 8px; padding: 8px 10px; background: var(--bg-elev-2); border-radius: var(--r-sm); font-size: 12.5px; color: var(--text-2); border-left: 2px solid var(--err); }

/* Person card grid */
.person-card {
  padding: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; transition: border-color 120ms;
}
.person-card:hover { border-color: var(--brand); }
.employee-square-card {
  /* Removed aspect-ratio: 1/1 — the card now contains two pies + stats
   * chips + a 5-row mini-table + time bar + 8 action icons. Forcing a
   * square box clipped the actions off the bottom. min-height keeps
   * cards consistent in height when content is sparse. */
  min-height: 460px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.employee-card-actions {
  /* Always sit at the bottom of the card, regardless of content above.
   * The inner button row is flex+wrap so 8 icons reflow on narrow cards. */
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;
}
.employee-card-actions > div {
  /* Inner button row uses the full width so icons spread out, not clump. */
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  justify-content: space-between;
}
.employee-card-actions button {
  flex: 0 0 auto;
}
.employee-card-head { display:flex; align-items:center; gap:12px; min-width:0; }
.employee-card-name { font-weight:600; font-size:14px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.employee-card-id { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.employee-card-pie { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:138px; }
.employee-card-pct { margin-top:8px; font-size:26px; font-weight:700; line-height:1; }
.employee-card-pie-label { margin-top:3px; font-size:11px; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; }
.employee-card-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; font-size:11px; color:var(--text-2); }
.employee-card-stats > div { display:flex; align-items:center; justify-content:center; gap:5px; padding:6px 4px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg-elev-2); white-space:nowrap; }
.employee-card-stats .dot { width:7px; height:7px; border-radius:999px; display:inline-block; }
.employee-card-stats .dot.ok { background:var(--ok); }
.employee-card-stats .dot.warn { background:var(--warn); }
.employee-card-stats .dot.mute { background:var(--text-3); }
.employee-card-meta { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--text-2); min-width:0; }
.employee-card-meta span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Override duplicate from the older block above — the bottom-anchored variant
 * with a top-border lives on the .employee-square-card definition above.
 * Keep this rule for non-square card uses. */

@media (max-width: 720px) {
  .employee-card-grid { grid-template-columns: 1fr; }
  .employee-square-card { aspect-ratio: auto; }
}

/* Drawer (overlay version) */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: color-mix(in oklab, black 40%, transparent);
  backdrop-filter: blur(4px);
  display: flex; justify-content: flex-end;
  animation: fadeIn 160ms ease;
}
.drawer {
  width: min(560px, 96vw);
  background: var(--bg-elev-1);
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px -20px #00000080;
  animation: drawerIn 240ms cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column;
  max-height: 100vh;
}
.drawer-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 22px; }
.drawer-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; }

/* Mini stat */
.mini-stat { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; }
.mini-stat .lbl { font-size: 10.5px; font-family: var(--font-mono); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.mini-stat .val { font-size: 18px; font-weight: 600; color: var(--text); }

/* Standup card */
.standup-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; margin-bottom: 16px; }
.standup-row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.standup-row:last-child { border-bottom: 0; }
.standup-row .lbl { font-size: 11px; font-family: var(--font-mono); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; padding-top: 2px; }
.standup-row .txt { font-size: 13px; color: var(--text); line-height: 1.5; }

/* Audit list */
.audit-list { padding: 6px 0; }
.audit-row { display: flex; align-items: center; gap: 10px; padding: 7px 16px; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.audit-row:last-child { border-bottom: 0; }
.audit-row .ts { color: var(--text-3); flex-shrink: 0; min-width: 110px; font-size: 11.5px; }
.audit-row .who { color: var(--text-2); min-width: 130px; font-size: 12px; }
.audit-row .detail { color: var(--text); flex: 1; min-width: 0; }
.audit-big { padding: 11px 16px; }
.audit-big .body-quote { font-size: 12px; color: var(--text-3); font-style: italic; margin-top: 3px; padding-left: 8px; border-left: 2px solid var(--line); }

/* Settings card */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.setting { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.setting:nth-last-child(-n+2) { border-bottom: 0; }
.setting-l { font-size: 11.5px; color: var(--text-3); }
.setting-v { font-size: 12.5px; color: var(--text); }

/* Heatmap (monthly) */
.heatmap { padding: 8px 14px 14px; overflow-x: auto; }
.heatmap-head { display: grid; grid-template-columns: 220px repeat(30, 18px) 56px; gap: 3px; padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.heatmap-row { display: grid; grid-template-columns: 220px repeat(30, 18px) 56px; gap: 3px; align-items: center; padding: 3px 0; cursor: pointer; }
.heatmap-row:hover .hm-name-cell { color: var(--brand); }
.hm-day-h { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-3); text-align: center; }
.hm-name-cell { padding-right: 10px; }
.hm-tot-cell { text-align: right; font-size: 11.5px; color: var(--text-2); padding-left: 8px; }
.hm-cell { height: 18px; border-radius: 2px; background: var(--bg-elev-2); border: 1px solid var(--line); transition: transform 80ms; }
.hm-cell:hover { transform: scale(1.4); z-index: 2; position: relative; }
.hm-cell.hm-present { background: color-mix(in oklab, var(--ok) 50%, var(--bg-elev-2)); border-color: color-mix(in oklab, var(--ok) 60%, var(--line)); }
.hm-cell.hm-late { background: color-mix(in oklab, var(--warn) 50%, var(--bg-elev-2)); border-color: color-mix(in oklab, var(--warn) 60%, var(--line)); }
.hm-cell.hm-absent { background: color-mix(in oklab, var(--err) 40%, var(--bg-elev-2)); border-color: color-mix(in oklab, var(--err) 50%, var(--line)); }
.hm-cell.hm-pto { background: color-mix(in oklab, var(--brand) 45%, var(--bg-elev-2)); border-color: color-mix(in oklab, var(--brand) 55%, var(--line)); }
.hm-cell.hm-weekend { background: transparent; border-style: dashed; opacity: 0.5; }

/* PTO calendar */
.cal-strip { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; padding: 12px; }
.cal-cell { padding: 8px 4px; border: 1px solid var(--line); border-radius: var(--r-sm); text-align: center; background: var(--bg); }
.cal-d { font-size: 13px; font-weight: 500; color: var(--text); }
.cal-w { font-size: 9.5px; color: var(--text-3); font-family: var(--font-mono); text-transform: uppercase; }
.cal-pips { display: flex; gap: 2px; justify-content: center; margin-top: 4px; min-height: 6px; }
.cal-pip { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }

/* Provider card */
.prov-card { background: var(--bg-elev-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; transition: border-color 120ms; }
.prov-card.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }

/* KV row, job row */
.kv-row { display: flex; justify-content: space-between; padding: 8px 16px; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.kv-row:last-child { border-bottom: 0; }
.kv-k { color: var(--text-3); }
.kv-v { color: var(--text); }
.job-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px dashed var(--line); }
.job-row:last-child { border-bottom: 0; }
.run-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px dashed var(--line); }
.run-row:last-child { border-bottom: 0; }
.run-row > div:first-child { flex: 1; min-width: 0; }

/* Messages */
.msg-list { padding: 6px 0; }
.msg-row { padding: 10px 16px; border-bottom: 1px dashed var(--line); }
.msg-row:last-child { border-bottom: 0; }
.msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 11.5px; }
.msg-body { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }

/* Reports */
.report-card { background: var(--bg-elev-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; display: flex; gap: 14px; align-items: flex-start; }
.report-card .r-ic { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.report-card .r-body { flex: 1; min-width: 0; }
.report-card .r-name { font-size: 14px; font-weight: 500; color: var(--text); }
.report-card .r-desc { font-size: 12.5px; color: var(--text-2); margin: 4px 0 8px; }
.report-card .r-meta { display: flex; gap: 8px; align-items: center; font-size: 11px; }
.report-card .r-actions { display: flex; gap: 6px; flex-direction: column; align-items: flex-end; }

/* Chat */
.chat-card { display: flex; flex-direction: column; height: calc(100vh - 56px - var(--pad-page) * 2 - 60px); min-height: 500px; }
.chat-list { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.chat-msg { display: flex; gap: 10px; }
.chat-msg.chat-user { flex-direction: row-reverse; }
.chat-msg.chat-user .chat-bubble { background: var(--brand); border-color: var(--brand); color: white; max-width: 70%; }
.chat-bubble { background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; font-size: 13.5px; line-height: 1.55; color: var(--text); max-width: 80%; }
.chat-body { white-space: pre-wrap; }
.chat-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); }
.chat-system { padding: 12px 14px; background: var(--brand-soft); border: 1px dashed color-mix(in oklab, var(--brand) 30%, var(--line)); border-radius: var(--r-md); font-size: 12.5px; color: var(--text-2); display: flex; gap: 8px; align-items: center; }
.chat-suggested { padding: 8px 0 0; border-top: 1px solid var(--line); }
.suggest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 16px 16px; }
.suggest-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; text-align: left; transition: border-color 120ms; }
.suggest-card:hover { border-color: var(--brand); }
.suggest-card .t { font-size: 12.5px; font-weight: 500; color: var(--text); }
.suggest-card .h { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.chat-input-wrap { padding: 12px 16px; border-top: 1px solid var(--line); background: var(--bg-elev-1); }
.chat-input { display: flex; gap: 8px; align-items: flex-end; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); }
.chat-input textarea { flex: 1; background: transparent; border: 0; outline: none; resize: none; font-size: 13.5px; font-family: var(--font-sans); color: var(--text); max-height: 140px; min-height: 22px; line-height: 1.4; }
.chat-foot-tip { display: flex; justify-content: space-between; padding: 8px 4px 0; font-size: 11px; color: var(--text-3); font-family: var(--font-mono); }
.kbd-inline { display: inline-block; padding: 1px 4px; border: 1px solid var(--line); border-radius: 3px; font-family: var(--font-mono); font-size: 10.5px; background: var(--bg); }

/* ============================================================
   ASK AI FLOATING WIDGET
   ============================================================ */
.ai-fab {
  position: fixed; bottom: 22px; right: 22px; z-index: 200;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in oklab, var(--brand) 35%, var(--line-hi));
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 18%, var(--bg-elev-1)), var(--bg-elev-1));
  color: var(--brand);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 10px 30px -8px color-mix(in oklab, var(--brand) 50%, transparent),
              0 2px 6px -2px #00000060;
  transition: transform 140ms cubic-bezier(.2,.7,.2,1), border-color 140ms, box-shadow 140ms;
}
.ai-fab:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 14px 34px -8px color-mix(in oklab, var(--brand) 60%, transparent),
              0 2px 6px -2px #00000080;
}
.ai-fab.on {
  background: var(--brand);
  color: #ffffff;
  border-color: var(--brand);
}
html[data-aesthetic="terminal"] .ai-fab { border-radius: var(--r-sm); }
.ai-fab-glow {
  position: absolute; inset: -4px;
  border-radius: inherit;
  background: radial-gradient(circle, color-mix(in oklab, var(--brand) 40%, transparent), transparent 70%);
  z-index: -1;
  opacity: 0.6;
  animation: aiPulse 2.4s ease-in-out infinite;
}
@keyframes aiPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.08); }
}
.ai-fab.on .ai-fab-glow { display: none; }
.ai-fab-dot {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--err); color: white;
  border: 2px solid var(--bg);
  border-radius: 999px;
  font-size: 10px; font-weight: 600; font-family: var(--font-mono);
  display: flex; align-items: center; justify-content: center;
}

/* Popover panel */
.ai-pop {
  position: fixed; bottom: 88px; right: 22px; z-index: 199;
  width: min(420px, calc(100vw - 44px));
  height: min(580px, calc(100vh - 130px));
  background: var(--bg-elev-1);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px -20px #000000a0,
              0 0 0 1px color-mix(in oklab, var(--brand) 12%, transparent);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: aiPopIn 220ms cubic-bezier(.2,.7,.2,1);
  transform-origin: bottom right;
}
@keyframes aiPopIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
html[data-aesthetic="terminal"] .ai-pop { border-radius: var(--r-sm); }

.ai-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 8%, var(--bg-elev-1)), var(--bg-elev-1));
}
.ai-pop-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 150px; }
.ai-pop-ic {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid color-mix(in oklab, var(--brand) 25%, var(--line));
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.ai-pop-name { font-size: 13.5px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.ai-pop-sub {
  font-size: 11px; color: var(--text-3); font-family: var(--font-mono);
  display: flex; align-items: center; gap: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-top: 1px;
}
.ai-pop-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ai-prov { font-size: 11px; padding: 4px 6px; max-width: 150px; min-width: 0; flex-shrink: 1; }

/* Scroll list */
.ai-pop-list {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}
.ai-pop-list::-webkit-scrollbar { width: 6px; }
.ai-pop-list::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 3px; }
.ai-pop-list .chat-msg { gap: 8px; }
.ai-pop-list .chat-bubble { font-size: 13px; padding: 8px 11px; max-width: 88%; }
.ai-pop-list .chat-system { font-size: 11.5px; padding: 8px 10px; }
.ai-pop-list .chat-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: flex-end; }

/* Suggestions inside popover */
.ai-pop-suggest { padding: 0 14px 12px; }
.ai-pop-suggest-lbl {
  font-size: 10.5px; font-family: var(--font-mono); color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
}
.ai-pop-suggest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ai-pop-suggest-card {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer; text-align: left;
  color: var(--text);
  font-family: inherit;
  transition: border-color 100ms, background 100ms;
}
.ai-pop-suggest-card:hover { border-color: var(--brand); background: var(--bg-elev-2); }
.ai-pop-suggest-card .t { font-size: 11.5px; font-weight: 500; line-height: 1.3; }
.ai-pop-suggest-card .h { font-size: 10.5px; color: var(--text-3); margin-top: 2px; line-height: 1.3; }
.ai-pop-suggest-card svg { color: var(--brand); margin-top: 1px; flex-shrink: 0; }

/* Input */
.ai-pop-input-wrap {
  padding: 10px 12px 11px;
  border-top: 1px solid var(--line);
  background: var(--bg-elev-1);
}
.ai-pop-input {
  display: flex; align-items: flex-end; gap: 6px;
  padding: 8px 8px 8px 11px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 120ms;
}
.ai-pop-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ai-pop-input textarea {
  flex: 1;
  background: transparent;
  border: 0; outline: none; resize: none;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--text);
  max-height: 100px;
  min-height: 20px;
  line-height: 1.4;
  padding: 2px 0;
}
.ai-pop-input textarea::placeholder { color: var(--text-3); }
.ai-pop-send {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: white;
  border: 0; border-radius: var(--r-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 100ms, transform 80ms;
}
.ai-pop-send:hover:not(:disabled) { background: color-mix(in oklab, var(--brand) 90%, white); }
.ai-pop-send:active { transform: scale(0.94); }
.ai-pop-send:disabled { background: var(--line-hi); color: var(--text-3); cursor: not-allowed; }
.ai-pop-tip {
  margin-top: 6px;
  font-size: 10.5px; color: var(--text-3);
  text-align: center;
}

/* ── Attach button (paperclip) ───────────────────────────────────────────── */
.ai-attach-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 100ms, border-color 100ms, background 100ms;
  margin-right: 2px;
}
.ai-attach-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.ai-attach-btn.active { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }

/* ── Server chip (above textarea) ───────────────────────────────────────── */
.ai-server-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 6px;
  background: var(--bg-elev-2);
  border: 1px solid color-mix(in oklab, var(--brand) 30%, var(--line));
  border-radius: 999px;
  font-size: 11px; color: var(--text-2);
  margin-bottom: 7px;
  max-width: 100%;
  overflow: hidden;
}
.ai-server-chip-status {
  font-size: 10px; font-family: var(--font-mono);
  padding: 1px 5px; border-radius: 3px;
  background: var(--bg-1);
  color: var(--text-3);
}
.ai-server-chip-status[data-status="running"],
.ai-server-chip-status[data-status="active"] { color: var(--ok); }
.ai-server-chip-status[data-status="stopped"],
.ai-server-chip-status[data-status="off"] { color: var(--err); }
.ai-server-chip-x {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-3); border-radius: 50%;
  margin-left: 2px;
  transition: color 100ms, background 100ms;
}
.ai-server-chip-x:hover { color: var(--err); background: rgba(239,68,68,0.12); }

/* ── Empty state welcome card ───────────────────────────────────────────── */
.ai-empty-state {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 20px 16px;
  text-align: center;
}
.ai-empty-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft);
  border: 1px solid color-mix(in oklab, var(--brand) 30%, var(--line));
  border-radius: var(--r-md);
  color: var(--brand);
  margin-bottom: 12px;
}
.ai-empty-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin-bottom: 4px;
}
.ai-empty-sub {
  font-size: 11.5px; color: var(--text-3);
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.ai-empty-chips {
  display: flex; flex-direction: column; gap: 5px; width: 100%;
}
.ai-empty-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 12px; font-family: inherit;
  cursor: pointer; text-align: left;
  transition: border-color 100ms, background 100ms, color 100ms;
}
.ai-empty-chip:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.ai-empty-chip svg { color: var(--brand); flex-shrink: 0; }

/* ── Settings drawer (slides in from right inside the popup) ────────────── */
.ai-settings-drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(300px, 100%);
  background: var(--bg-elev-1);
  border-left: 1px solid var(--line-hi);
  display: flex; flex-direction: column;
  z-index: 10;
  animation: aiDrawerIn 200ms cubic-bezier(.2,.7,.2,1);
  box-shadow: -8px 0 24px -4px #00000040;
}
@keyframes aiDrawerIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ai-settings-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 6%, var(--bg-elev-1)), var(--bg-elev-1));
  flex-shrink: 0;
}
.ai-settings-drawer-body {
  flex: 1; overflow-y: auto;
  padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.ai-settings-drawer-body::-webkit-scrollbar { width: 5px; }
.ai-settings-drawer-body::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 3px; }
.ai-settings-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.ai-settings-section:last-child { border-bottom: 0; }
.ai-settings-section-label {
  font-size: 10.5px; font-family: var(--font-mono);
  color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.07em; font-weight: 600;
  margin-bottom: 10px;
}
.ai-settings-subsection {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 12px;
}

/* ── chat-row in ai-pop-list uses the global chat-row styles ─────────────
   Override max-width so messages fill nicely inside the narrower popup     */
.ai-pop-list .chat-row { max-width: 92%; }

/* Hide pop on tiny viewports — keep fab */
@media (max-height: 500px) {
  .ai-pop { height: calc(100vh - 100px); bottom: 70px; }
}

/* ============================================================
   Ask AI — easy-exit affordances (added v3.5.2)
   Tap-outside backdrop, drag-handle on mobile, bigger close X,
   bottom-sheet shape on phones, swipe-down dismiss.
   ============================================================ */
.ai-pop-backdrop {
  position: fixed; inset: 0; z-index: 198;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.ai-pop-grab { display: none; }
.ai-pop-close { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ai-pop-close > * { pointer-events: none; }

@media (max-width: 640px) {
  .ai-pop-backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .ai-pop {
    left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: min(82vh, 720px);
    border-radius: 18px 18px 0 0;
    transform-origin: bottom center;
    padding-bottom: env(safe-area-inset-bottom);
    transition: transform 220ms cubic-bezier(.2,.7,.2,1);
  }
  .ai-pop-grab {
    display: block;
    width: 44px; height: 5px;
    margin: 8px auto 4px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--text-3) 60%, transparent);
    flex-shrink: 0;
  }
  .ai-pop-close {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .ai-pop-head { padding: 10px 14px 12px; }
}
.app-shell { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
.app-shell .side { grid-row: 1 / 3; }
.app-shell .top { grid-column: 2; }
.app-shell .main { grid-column: 2; min-width: 0; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Topbar tightening */
.top .cmd-pill { min-width: 0; max-width: 280px; }
.top .cmd-pill > span:not(.kbd) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Responsive */
@media (max-width: 1280px) {
  .top .clock { display: none; }
}
@media (max-width: 1180px) {
  .top .live-pill { display: none; }
  .top .cmd-pill { max-width: 220px; }
}
/* Responsive */
@media (max-width: 900px) {
  .grid-2-3 { grid-template-columns: 1fr; }
  .blocker-list { grid-template-columns: 1fr; }
  .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .heatmap-head, .heatmap-row { grid-template-columns: 180px repeat(30, 14px) 50px; }
  .top .seg { display: none; }
}

/* ── Extra theme variants (Mono / Solarized / Midnight) ── */
html[data-theme="mono"] {
  --bg: #ffffff; --bg-elev-1: #fafafa; --bg-elev-2: #ffffff;
  --bg-hover: #f4f4f5; --bg-active: #e8e8eb;
  --line: #d4d4d4; --line-hi: #b8b8b8;
  --text: #171717; --text-2: #525252; --text-3: #737373;
  --brand: #404040; --brand-2: #262626; --brand-soft: #40404015;
  --shadow: 0 1px 2px #00000010;
  --grid-line: #00000008; --pop-bg: rgba(255,255,255,.96);
  --ok: #404040; --warn: #525252; --err: #737373;
}
html[data-theme="solarized"] {
  --bg: #002b36; --bg-elev-1: #073642; --bg-elev-2: #073642;
  --bg-hover: #0a4a59; --bg-active: #0e5b6c;
  --line: #094956; --line-hi: #0e5b6c;
  --text: #fdf6e3; --text-2: #93a1a1; --text-3: #6c7c7c;
  --brand: #b58900; --brand-2: #af8a04; --brand-soft: #b5890025;
  --shadow: 0 4px 16px -8px #00000080;
  --grid-line: #ffffff10; --pop-bg: rgba(7,54,66,.95);
  --ok: #859900; --warn: #cb4b16; --err: #dc322f;
}
html[data-theme="midnight"] {
  --bg: #0a0a1f; --bg-elev-1: #14142b; --bg-elev-2: #1a1a3a;
  --bg-hover: #1f1f47; --bg-active: #2a2a5e;
  --line: #2d2d5a; --line-hi: #3a3a72;
  --text: #e0e0ff; --text-2: #a8a8d0; --text-3: #8888bb;
  --brand: #7c3aed; --brand-2: #6d28d9; --brand-soft: #7c3aed25;
  --shadow: 0 12px 40px -16px #000000a0;
  --grid-line: #ffffff08; --pop-bg: rgba(20,20,43,.94);
  --ok: #34d399; --warn: #fbbf24; --err: #f87171;
}

/* Employee square-card mini-table (added when grid view became default) */
.employee-card-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.employee-card-table td { padding: 4px 6px; border-bottom: 1px solid var(--line); }
.employee-card-table td.lbl { color: var(--text-3); width: 42%; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.employee-card-table tr:last-child td { border-bottom: none; }
/* Clickable hover for square cards (toggle feel) */
.employee-square-card { cursor: pointer; transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.employee-square-card:hover { transform: translateY(-2px); border-color: var(--brand); background: var(--bg-hover); }

/* Two-pie layout per employee card: 30-day attendance + live presence */
.employee-card-pies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: center;
  min-height: 130px;
}
.employee-card-pies .employee-card-pie {
  min-height: auto;
  padding: 4px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.employee-card-pies .employee-card-pct {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.employee-card-pies .employee-card-pie-label {
  margin-top: 2px;
  font-size: 9px;
  white-space: nowrap;
}

/* ─── Modal styling for EmployeeScoreboardModal + others ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.modal {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 80px -8px rgba(0, 0, 0, 0.7);
  width: 100%;
  max-width: 1000px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev-2);
  flex-shrink: 0;
}
.modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}
.modal-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--bg-elev-2);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.modal-body .card { margin-bottom: 12px; }
.modal-body .card:last-child { margin-bottom: 0; }
.modal-body table.t { width: 100%; border-collapse: collapse; }
.modal-body table.t th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.modal-body table.t td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.modal-body table.t tr:last-child td { border-bottom: none; }

.employee-scoreboard-overlay {
  align-items: center;
  padding: 24px;
}
.employee-scoreboard-modal {
  width: min(1180px, calc(100vw - 48px));
  max-width: none;
  max-height: min(92vh, 920px);
}
.employee-scoreboard-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.employee-scoreboard-error {
  color: var(--err);
  font-size: 12px;
  padding: 10px;
  background: color-mix(in oklch, var(--err) 8%, transparent);
  border-radius: var(--r-sm);
}
.employee-scoreboard-kpis {
  margin-bottom: 0;
}
.employee-scoreboard-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.employee-scoreboard-chart-card,
.employee-scoreboard-card {
  min-width: 0;
}
.employee-scoreboard-chart {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr);
  align-items: center;
  gap: 18px;
}
.employee-scoreboard-legend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  font-size: 12px;
  min-width: 0;
}
.employee-scoreboard-legend .num {
  text-align: right;
}
.employee-scoreboard-legend-foot {
  border-top: 1px solid var(--line);
  padding-top: 5px;
  margin-top: 3px;
  color: var(--text-3);
}
.employee-scoreboard-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.employee-scoreboard-daily {
  grid-column: 1 / -1;
}
@media (max-width: 720px) {
  .modal { max-width: 100%; max-height: calc(100vh - 40px); }
  .modal-overlay { padding: 20px 8px; }
  .employee-scoreboard-overlay { align-items: flex-start; }
  .employee-scoreboard-modal { width: 100%; max-height: calc(100vh - 40px); }
  .employee-scoreboard-chart-grid,
  .employee-scoreboard-detail-grid,
  .employee-scoreboard-chart {
    grid-template-columns: 1fr;
  }
  .employee-scoreboard-chart {
    justify-items: center;
  }
  .employee-scoreboard-legend {
    width: 100%;
  }
  .modal-body .card > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   BATCH 3 — P10/P11/P12/P13/P14
   ============================================================ */

/* P10 — Semantic color palette CSS variables */
:root {
  --color-on-time: #10b981;  /* emerald-500 */
  --color-late:    #f59e0b;  /* amber-500   */
  --color-absent:  #ef4444;  /* rose-500    */
  --color-pto:     #0ea5e9;  /* sky-500     */
  --color-ai:      #8b5cf6;  /* violet-500  */
}

/* P11 — SSE freshness flash on the live chip */
@keyframes sse-flash-bg {
  0%   { background: color-mix(in oklab, var(--ok) 30%, transparent); }
  100% { background: transparent; }
}
.live-pill.sse-flash {
  animation: sse-flash-bg 200ms ease-out forwards;
}

/* Per-row just-updated glow (applied via JS data-just-updated attribute) */
@keyframes row-glow {
  0%   { box-shadow: 0 0 0 2px color-mix(in oklab, var(--ok) 60%, transparent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}
tr[data-just-updated="1"] td,
div[data-just-updated="1"] {
  animation: row-glow 300ms ease-out forwards;
}

/* BETA pill — reusable label for beta/preview features */
.beta-pill {
  display: inline-block;
  background: #d97706;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 1px 4px;
  vertical-align: middle;
  line-height: 1.4;
  margin-left: 6px;
}

/* Mobile BETA ribbon — thin amber strip above bottom tabs, mobile only */
.mobile-beta-ribbon {
  display: none;
}
@media (max-width: 768px) {
  .mobile-beta-ribbon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    height: 16px;
    background: #d97706;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 100;
  }
}

/* P12 — Mobile bottom tab bar (show only on mobile) */
.bottom-tab-bar {
  display: none;
}
.bottom-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  padding: 8px 4px 6px;
  transition: color 120ms;
  font-size: 10px;
  font-family: var(--font-sans, inherit);
  -webkit-tap-highlight-color: transparent;
}
.bottom-tab.active {
  color: var(--brand);
}
.bottom-tab-label {
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
}

/* P13 — Settings / display popover */
.settings-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 260px;
  background: var(--bg-elev-1);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 48px -12px #000000b0;
  z-index: 90;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Cap height so the Voice + Language sections at the bottom stay
   * reachable on shorter viewports, and let the panel scroll inside. */
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.settings-popover-title {
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  margin-bottom: 2px;
}
.settings-popover-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-popover-label {
  font-size: 11.5px;
  color: var(--text-2);
  font-weight: 500;
}
.settings-density-seg {
  display: flex;
  gap: 4px;
}
.settings-density-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text-3);
  transition: border-color 100ms, color 100ms;
  font-size: 11px;
  font-family: var(--font-sans, inherit);
  line-height: 1;
}
.settings-density-opt:hover {
  color: var(--text-2);
  border-color: var(--brand);
}
.settings-density-opt.on {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
}
.settings-density-icon {
  font-size: 16px;
  line-height: 1;
}
.settings-density-word {
  font-size: 10px;
}

/* P12 — Mobile responsive: hide sidebar, show bottom bar below 768px */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
  .show-on-mobile {
    display: flex !important;
  }
  .bottom-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--bg);
    border-top: 1px solid var(--line);
    display: flex;
    align-items: stretch;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  /* Push main content above the bottom bar */
  .main {
    padding-bottom: 68px;
  }
  /* Topbar: hide density/clock extras, shrink command pill */
  .top .cmd-pill span:not(.kbd) {
    display: none;
  }
  .top .cmd-pill {
    min-width: unset;
    padding: 5px 8px;
  }
}

/* ============================================================
   P18 — prefers-reduced-motion
   Globally silence all animations and transitions for users
   who have the OS "reduce motion" setting enabled.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
}


/* ══════════════════════════════════════════════════════════════════
   2026-05-02 EXECUTIVE POLISH PASS
   Subtle modernisation: card lift on hover, gentle shadows, gradient
   accents on KPI cards, smoother transitions, refined focus rings.
   Designed for high-density executive dashboards — restrained, not
   flashy. No layout changes; visual-only.
   ══════════════════════════════════════════════════════════════════ */

/* Card lift + soft shadow */
.card {
  transition: box-shadow 240ms cubic-bezier(.2,.8,.2,1),
              transform 200ms cubic-bezier(.2,.8,.2,1),
              border-color 240ms ease;
}
.card:hover {
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.45),
              0 2px 6px -2px rgba(0,0,0,.18);
  border-color: color-mix(in oklch, var(--accent) 22%, var(--line));
}

/* KPI hero cards — subtle gradient accent on left edge */
.kpi-card {
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--accent) 60%, transparent),
    color-mix(in oklch, var(--accent) 10%, transparent));
  opacity: 0;
  transition: opacity 220ms ease;
}
.kpi-card:hover::before { opacity: 1; }

/* Pie / chart subtle bloom on hover */
svg circle:hover {
  filter: drop-shadow(0 0 6px color-mix(in oklch, var(--accent) 40%, transparent));
}

/* Buttons — refined press feedback */
.btn {
  transition: background 180ms ease, transform 120ms ease, box-shadow 200ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-pri {
  box-shadow: 0 2px 8px -2px color-mix(in oklch, var(--accent) 35%, transparent);
}
.btn-pri:hover {
  box-shadow: 0 4px 12px -2px color-mix(in oklch, var(--accent) 50%, transparent);
}

/* Section headers — tighten typography */
.card .section-header h3,
.card .section-header .title {
  letter-spacing: -0.012em;
  font-weight: 600;
}

/* Focus ring consistency — softer, no harsh outline */
*:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--accent) 65%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Numbers — tabular figures by default */
.num, .mono { font-variant-numeric: tabular-nums; }

/* Subtle body background gradient — adds depth without distraction */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(
    1200px 600px at 100% 0%,
    color-mix(in oklch, var(--accent) 6%, transparent),
    transparent 50%
  );
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* Empty-state polish — replace harsh red squares with neutral when no data */
.heatmap-cell.no-data {
  background: var(--bg-elev-2) !important;
  opacity: 0.4;
  border: 1px dashed var(--line);
}

/* Skeleton shimmer — smoother gradient */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-elev-2) 0%,
    color-mix(in oklch, var(--accent) 8%, var(--bg-elev-2)) 50%,
    var(--bg-elev-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--r-md);
}

/* Live status pulse on the "X live" badge */
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--ok) 40%, transparent); }
  50%      { box-shadow: 0 0 0 4px color-mix(in oklch, var(--ok) 0%, transparent); }
}
.badge-live {
  animation: live-pulse 2.4s ease-in-out infinite;
}

/* Sidebar item — gentle wash on active */
.sidebar-item.active {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--accent) 14%, var(--bg-elev-1)),
    var(--bg-elev-1));
  border-left: 2px solid var(--accent);
}

/* Status pills — slight gradient fill */
.status-pill {
  background: linear-gradient(180deg,
    color-mix(in oklch, currentColor 12%, transparent),
    color-mix(in oklch, currentColor 4%, transparent));
}

/* Cmd+K modal — refined backdrop */
.cmdk-overlay {
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

/* Tabular data rows — subtle striping for executive scan-ability */
.table-striped tr:nth-child(even) {
  background: color-mix(in oklch, var(--bg-elev-1) 50%, transparent);
}

/* Modal — refined drop shadow */
.modal {
  box-shadow:
    0 24px 60px -16px rgba(0,0,0,.55),
    0 8px 20px -4px rgba(0,0,0,.25);
}

/* Help-icon (?) hover tooltip — instant, styled bubble so every section's
   help glyph visibly works (native title is slow/unreliable). */
.hint-glyph[data-tip]:hover::after,
.hint-glyph[data-tip]:focus::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 280px;
  white-space: normal;
  text-align: left;
  background: var(--bg-elev-2, #1b1e25);
  color: var(--text, #e8eaed);
  border: 1px solid var(--line-hi, #333);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: normal;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,.55);
  z-index: 9999;
  pointer-events: none;
}
.hint-glyph[data-tip]:hover::before,
.hint-glyph[data-tip]:focus::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--line-hi, #333);
  z-index: 9999;
  pointer-events: none;
}
.hint-glyph:hover { opacity: 1 !important; }

/* 2026-05-27 — iOS safe-area handling for mobile WebView (notch / Dynamic Island).
   env() can be 0 under Capacitor's contentInset, so use max() with a floor that
   clears the status bar / Dynamic Island. Login panel is top-aligned so the
   keyboard can't shove the header under the status bar. */
@media (max-width: 768px) {
  .top {
    height: auto;
    min-height: 56px;
    padding-top: max(env(safe-area-inset-top, 0px), 50px);
    padding-bottom: 8px;
    align-items: flex-end;
  }
  .login-wrap .panel-left {
    align-items: flex-start;
    padding: max(env(safe-area-inset-top, 0px), 54px) 22px 22px;
  }
  .main { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* 2026-05-27 — Mobile daily sign-in card (Today page). Hidden on desktop. */
.mobile-checkin-wrap { display: none; }
@media (max-width: 768px) {
  .mobile-checkin-wrap { display: block; margin: 0 0 14px; }
  .mobile-checkin-card {
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
  }
  .mobile-checkin-card .mc-cta { width: 100%; justify-content: center; padding: 12px; font-size: 15px; }
  .mc-form { display: flex; flex-direction: column; gap: 8px; }
  .mc-form .inp { width: 100%; }
  .mc-title { font-weight: 600; font-size: 15px; margin-bottom: 2px; }
  .mc-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
  .mc-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
  .mc-done { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ok, #16a34a); }
  .mc-done .btn { margin-left: auto; }
}

/* 2026-05-27 — Mobile layout reflow. Content card grids use inline
   minmax(200-280px,1fr) which forces columns wider than a phone, making the
   whole page scroll sideways (cards/buttons cut off at the right edge).
   Collapse those grids to a single column on mobile and clamp page width. */
@media (max-width: 768px) {
  .app, .main, .page { max-width: 100%; min-width: 0; }
  .main { overflow-x: hidden; }
  .page [style*="minmax(2"] { grid-template-columns: 1fr !important; }
  /* presence heatmap (8-col) — let it scroll rather than force page width */
  .page [style*="repeat(8"] { overflow-x: auto; }
}

/* 2026-05-27 — Mobile overflow containment + top bar wrap.
   Kill any body-level horizontal scroll, and let the dense top bar wrap to a
   second line instead of pushing actions off-screen. */
@media (max-width: 768px) {
  /* Constrain width WITHOUT overflow:hidden on html/body — that breaks touch
     on position:fixed elements (the bottom tab bar) in iOS WKWebView. */
  html, body { max-width: 100%; }
  .top {
    flex-wrap: wrap;
    height: auto;
    row-gap: 6px;
  }
  .mobile-checkin-card, .mobile-checkin-card .mc-cta { box-sizing: border-box; max-width: 100%; }
}

/* 2026-05-27 — Mobile: lift Ask-AI FAB above the bottom tab bar (was overlapping
   the rightmost tabs), tighten labels, and make sure the tab bar is the topmost
   tappable layer. */
@media (max-width: 768px) {
  .ai-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; right: 16px !important; }
  .ai-pop { bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important; }
  .ai-fab-glow { pointer-events: none !important; }
  .bottom-tab-label { font-size: 10.5px; white-space: nowrap; }
  /* Ensure tabs sit above any sibling layer and always receive taps. */
  .bottom-tab-bar { z-index: 500 !important; pointer-events: auto !important; }
  .bottom-tab { pointer-events: auto !important; }
  /* Remove the intrusive beta ribbon (was a fixed strip over the tab area). */
  .mobile-beta-ribbon { display: none !important; }
}

/* 2026-05-27 — Mobile app-native polish. v2 already uses Geist + the design
   palette; the desktop top bar + wide padding are what make it feel like a
   shrunk dashboard. Strip desktop-only chrome and tighten spacing on phones. */
@media (max-width: 768px) {
  /* Slim the top bar: drop ⌘K search pill, live SSE pill, and breadcrumb */
  .top .cmd-pill,
  .top .live-pill,
  .top .crumb,
  .top .crumb-sep { display: none !important; }
  .top { gap: 8px; }
  /* Tighter, app-like page padding (desktop --pad-page is 28px) */
  .page { padding-left: 14px !important; padding-right: 14px !important; }
  /* Rounder cards for a native feel */
  .card { border-radius: 16px; }
  /* Page header: stack title over actions, smaller title */
  .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* 2026-05-27 — Mobile sign-in HERO card (Today), matching the design's hero.
   Replaces the plain "Signed in" row when the user is signed in. */
@media (max-width: 768px) {
  .mc-hero {
    background: linear-gradient(135deg, var(--brand, #3b66f5), var(--blue-700, #233fae));
    border-radius: 18px;
    padding: 18px;
    color: #fff;
  }
  .mc-hero.done { background: linear-gradient(135deg, var(--ok, #16a34a), #0d6b30); }
  .mc-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; opacity: 0.85; font-family: var(--font-mono, monospace); }
  .mc-hero-time { font-size: 34px; font-weight: 700; line-height: 1.1; margin-top: 4px; letter-spacing: -0.01em; }
  .mc-hero-sub { font-size: 13px; opacity: 0.85; margin-top: 4px; }
  .mc-hero-bar { margin-top: 14px; height: 8px; background: rgba(255,255,255,0.22); border-radius: 999px; overflow: hidden; }
  .mc-hero-fill { height: 100%; background: #fff; border-radius: 999px; transition: width 0.4s ease; }
  .mc-hero-actions { display: flex; gap: 8px; margin-top: 16px; }
  .mc-hero-btn { flex: 1; padding: 11px; border-radius: 12px; font-weight: 600; font-size: 14px; border: 0; cursor: pointer; }
  .mc-hero-btn.ghost { background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
  .mc-hero-btn.solid { background: #fff; color: var(--brand, #3b66f5); }
}

/* 2026-05-27 — Hybrid mobile accents (v1 layout + v2 terminal touches).
   Monospace tabular numerals on KPIs and log-level status tags. Mobile only. */
@media (max-width: 768px) {
  .kpi-value { font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .badge {
    border-radius: 4px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    font-weight: 600;
  }
}

/* 2026-05-27 — Mobile People roster compaction (toward design's clean list).
   Shrink the bulky 30d/presence donuts and tighten cards on phones. */
@media (max-width: 768px) {
  .employee-card-pie { min-height: 0; }
  .employee-card-pie svg { width: 86px !important; height: 86px !important; }
  .employee-card-pct { font-size: 20px; margin-top: 4px; }
  .employee-card-pies { gap: 10px; }
  .employee-card-stats { font-size: 10.5px; }
}

/* 2026-05-27 — Mobile forms + tap targets (design's iOS conventions).
   16px inputs prevent iOS focus-zoom; 44px primary tap targets. */
@media (max-width: 768px) {
  .page input, .page textarea, .page select,
  .inp, .field { font-size: 16px !important; }
  .inp, .field, .page textarea { border-radius: 12px; padding: 11px 12px; }
  .btn { min-height: 40px; }
  .btn-pri, .btn-block { min-height: 44px; }
  /* Comfortable spacing for stacked form rows */
  .field-label, .mc-label { margin-bottom: 4px; display: block; }
}

/* 2026-05-27 — Mobile shared-component polish (Ask-AI, Inbox, Me, Settings,
   Admin, On-call, Support all use these). */
@media (max-width: 768px) {
  /* Friendly rounded chat bubbles (design's Ask-AI) */
  .chat-bubble { border-radius: 16px !important; }
  /* Comfortable 44px list-row tap targets */
  .row { min-height: 44px; }
  /* Section headers: a touch tighter, consistent */
  .sh { margin-top: 18px; }
}

/* 2026-05-27 — Today tab mobile fixes (items 1,5,9,11). */
@media (max-width: 768px) {
  /* (1) Icon-only refresh on mobile */
  .refresh-label { display: none; }
  /* (5) Subtabs: single neat scrollable row, not a cramped wrap */
  .today-subtabs { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px !important; padding-bottom: 6px; }
  .today-subtabs::-webkit-scrollbar { display: none; }
  .today-subtabs .btn { flex: 0 0 auto; }
  /* (9) Scoreboard / sign-in / activity tables: scroll horizontally, keep all columns */
  .card .t { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; max-width: 100%; }
  /* (11) No good spot for the floating Ask-AI FAB on mobile — remove it */
  .ai-fab, .ai-fab-glow, .ai-pop { display: none !important; }
}

/* 2026-05-27 — (7) Top 10 on mobile: the 6-column grid was too wide so the
   metric value (e.g. Progress) got squeezed/cut. Show rank + name + value;
   hide Worked/Missed/Expected (cols 4-6) on phones. */
@media (max-width: 768px) {
  .topten-row-grid { grid-template-columns: auto 1fr auto !important; }
  .topten-row-grid > :nth-child(6n+4),
  .topten-row-grid > :nth-child(6n+5),
  .topten-row-grid > :nth-child(6n+6) { display: none !important; }
}

/* 2026-05-27 — Progress sheet (item #6): embedded per-user progress view. */
.mc-sheet-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; }
.mc-sheet { width: 100%; max-width: 480px; background: var(--bg-elev-1); border: 1px solid var(--line-hi); border-radius: 18px 18px 0 0; padding: 18px; max-height: 82vh; overflow-y: auto; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 560px) { .mc-sheet-backdrop { align-items: center; } .mc-sheet { border-radius: 18px; } }
.mc-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mc-sheet-verdict { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 8px; margin-bottom: 6px; }
.mc-sheet-verdict.ok { color: var(--ok); background: color-mix(in oklch, var(--ok) 12%, transparent); }
.mc-sheet-verdict.no { color: var(--err); background: color-mix(in oklch, var(--err) 12%, transparent); }
.mc-sheet-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin: 14px 0 6px; }
.mc-sheet-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--text); display: flex; flex-direction: column; gap: 4px; }

/* 2026-05-28 — Today tab follow-ups (items 1, 4, 5, 6). */
@media (max-width: 768px) {
  /* (1) Settings popover scrolls when content is tall */
  .settings-popover { max-height: 72vh; overflow-y: auto; max-width: calc(100vw - 24px); }
  /* (4) Violations charts: stack vertically on mobile */
  .violations-charts { grid-template-columns: 1fr !important; }
  /* (5) Compact Segmented (AttendanceReport rng + others) so "Year" isn't cut off */
  .seg button { padding: 4px 8px !important; font-size: 11px !important; }
  /* (6) Scoreboard / tables: revert prior display:block (broke columns); scroll via the card */
  .card .t { display: table !important; white-space: nowrap; }
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* 2026-05-28 — Employees tab mobile fixes (items 2, 3, 5, 7). */
@media (max-width: 768px) {
  /* (2) Employee cards become compact rows — hide bulky donuts/stats */
  .employee-square-card { padding: 12px !important; }
  .employee-square-card .employee-card-pies,
  .employee-square-card .employee-card-stats { display: none !important; }

  /* (3,5,7) Drawers + modals: full-screen, anchored top, scrollable, clear of bottom tabs */
  .drawer-overlay, .modal-overlay {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 0 !important;
  }
  .drawer, .modal {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* 2026-05-28 — Compact PersonDrawer on mobile (item 7B starter). */
@media (max-width: 768px) {
  .drawer .card { padding: 12px; margin-top: 8px; }
  .drawer .sh-title { font-size: 13.5px; }
  .drawer .sh-sub { font-size: 11px; }
  .drawer .standup-card { padding: 10px; }
  .drawer .standup-row { padding: 6px 0; }
  /* collapse heavy chart heights on mobile */
  .drawer canvas { max-height: 180px !important; }
}

/* 2026-05-28 — (#7) PersonDrawer accordion sections. */
.acc-section { margin-top: 8px; }
.acc-section > summary { list-style: none; cursor: pointer; padding: 0; }
.acc-section > summary::-webkit-details-marker { display: none; }
.acc-section > summary::marker { display: none; }
.acc-section > summary .sh { padding-right: 22px; position: relative; }
.acc-section > summary .sh::after {
  content: '▾';
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%) rotate(0deg);
  color: var(--text-3); font-size: 11px; transition: transform .18s ease;
}
.acc-section:not([open]) > summary .sh::after { transform: translateY(-50%) rotate(-90deg); }

/* 2026-05-28 — Employees header actions on mobile: collapse labels to icons
   so Invite isn't cut off next to Export. */
@media (max-width: 768px) {
  .emp-header-actions .emp-action-label { display: none; }
  .emp-header-actions .btn { padding-left: 10px; padding-right: 10px; }
  .emp-header-actions { row-gap: 6px; }
}