/* ══════════════════════════════════════════════════════════════════
   Vertex HQ — Executive Operating System · Design System
   Palette: blue / black / white. Flat surfaces, 1px borders, no gloss.
   ══════════════════════════════════════════════════════════════════ */

/* ── Design tokens ──
   Bright, high-saturation iOS system colours. The audience is children
   learning to run a team, so contrast is generous, corners are chunky and
   the type is rounded. Every accent below is an Apple system colour, which
   gives a palette that is cheerful without turning muddy when mixed. */
:root {
  /* Brand blue */
  --primary: #007AFF;
  --primary-dark: #0062CC;
  --primary-light: #E8F2FF;
  --primary-soft: #CCE4FF;
  --accent: #5AC8FA;

  /* Playful accents, used to tell things apart at a glance */
  --joy-green: #34C759;
  --joy-orange: #FF9500;
  --joy-pink: #FF375F;
  --joy-purple: #AF52DE;
  --joy-yellow: #FFCC00;
  --joy-teal: #30D5C8;

  /* Deep blues stand in for black: softer on the eye than true black */
  --brand-950: #062B54;
  --brand-900: #0A3D75;
  --brand-800: #0F4F94;
  --brand-700: #1565B8;

  --canvas: #F2F7FF;
  --surface: #FFFFFF;
  --border: #DCE9FA;
  --border-strong: #B9D4F2;

  --text: #0B2545;
  --text-muted: #4A6B93;
  --text-subtle: #7C97B8;
  --on-dark: #FFFFFF;
  --on-dark-2: #D6E9FF;
  --on-dark-muted: #A8CBF0;
  --accent-warm: #FFCC00;

  --success: #34C759;
  --success-light: #E4F8EA;
  --danger: #FF3B30;
  --danger-light: #FFEBEA;
  --warning: #FF9500;
  --warning-light: #FFF4E5;

  --bg: var(--canvas);

  /* Chunky corners read as friendly and are easier to hit on a tablet */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;

  --shadow-sm: 0 2px 6px rgba(10, 61, 117, 0.07);
  --shadow-md: 0 8px 20px -8px rgba(10, 61, 117, 0.18);
  --shadow-lg: 0 20px 44px -18px rgba(10, 61, 117, 0.32);
}

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

body {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif,
               'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  background: var(--canvas);
  color: var(--text);
  min-height: 100vh;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* Rounded display face for anything a child reads first */
h1, h2, h3,
.login-brand-title, .login-panel-title, .login-rail-lede,
.health-score-value, .cmd-streak-num, .cal-month-label,
.me-badge-name, .kpi-value, .fin-stat-value, .metric, .stat-value {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  letter-spacing: 0;
}

.metric, .stat-value, .health-score-value, .cmd-streak-num,
.kpi-value, .fin-stat-value, td, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

/* ══════════════════════════════════════════════════════════════════
   APP SHELL
   ══════════════════════════════════════════════════════════════════ */
#app { display: none; }

/* ── Sidebar Nav ── */
.nav-label {
  padding: 12px 12px 4px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #64748B;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.nav-item:hover { background: #F1F5F9; color: #0F172A; }
.nav-item.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.nav-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }

/* ── Tab transitions ── */
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeInUp 0.2s ease-out; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* AI tab needs full height */
main.ai-mode { overflow: hidden; height: 100%; display: flex; flex-direction: column; }
#tab-ai { height: 100%; }
#tab-ai.active { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════
   COMMON COMPONENTS
   ══════════════════════════════════════════════════════════════════ */

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary, .btn.btn-primary {
  background: var(--primary);
  color: white;
}
.btn-primary:hover, .btn.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary, .btn.btn-secondary {
  background: white;
  color: #334155;
  border: 1px solid #E3E8EF;
}
.btn-secondary:hover, .btn.btn-secondary:hover { background: #F6F8FB; border-color: #CDD5E1; }
.btn-ghost, .btn.btn-ghost {
  background: transparent;
  color: #334155;
  border: 1px solid #E3E8EF;
}
.btn-ghost:hover, .btn.btn-ghost:hover { background: #F1F5F9; }
.btn-sm { padding: 5px 12px; font-size: 0.78rem; }
.btn-icon {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  border-radius: 6px;
  color: #64748B;
  transition: background 0.15s;
}
.btn-icon:hover { background: #F1F5F9; }

/* ── Inputs ── */
.input {
  width: 100%;
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-family: inherit;
  color: #0F172A;
  background: white;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235,0.1); }
.input::placeholder { color: #94A3B8; }
.input-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 5px;
}
.input-group { display: flex; flex-direction: column; }
.input-row { display: flex; gap: 12px; flex-wrap: wrap; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mb-4 { margin-bottom: 16px; }
.mt-4 { margin-top: 16px; }

/* ── Cards ── */
.card {
  background: white;
  border-radius: 12px;
  border: 1px solid #E3E8EF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #F1F5F9;
}
.card-title { font-size: 0.875rem; font-weight: 700; color: #0F172A; }
.card-body { padding: 20px; }
.mb-4 { margin-bottom: 16px; }

/* ── Form inputs (revenue forms) ── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
}
.form-input {
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-family: inherit;
  color: #0F172A;
  background: white;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235,0.1); }

/* ── Badge ── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
}
.badge-category { background: #F1F5F9; color: #334155; }
.badge-due { background: #FEE2E2; color: #DC2626; }
.badge-due.ok { background: #ECFDF5; color: #059669; }
.badge-recurring { background: #EFF6FF; color: #1D4ED8; padding: 2px 5px; }
.badge-time { background: var(--primary-light); color: var(--primary); }

/* ── Loading / Empty ── */
.loading {
  padding: 24px;
  text-align: center;
  color: #94A3B8;
  font-size: 0.875rem;
}
.empty-state {
  padding: 40px 24px;
  text-align: center;
  color: #94A3B8;
  font-size: 0.875rem;
}
.empty-state-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  display: block;
}

/* ── Pagination ── */
.pagination-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 12px;
}
.pag-btn {
  padding: 6px 14px;
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  background: white;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  color: #334155;
  transition: background 0.15s;
  font-family: inherit;
}
.pag-btn:hover:not(:disabled) { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.pag-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pag-info { font-size: 0.8rem; color: #64748B; }

/* ── Progress bars ── */
.progress-bar-track {
  height: 8px;
  background: #F1F5F9;
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 8px;
  background: var(--primary);
  border-radius: 999px;
  transition: width 0.5s ease;
}

/* ── Toast ── */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #0F172A;
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 9999;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#toast.show.success { background: #059669; }
#toast.show.error   { background: #DC2626; }

/* KPI pills */
.mission-kpi-pill {
  background: white;
  border: 1px solid #E3E8EF;
  border-radius: 12px;
  padding: 18px 16px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.mission-kpi-pill:hover { box-shadow: 0 4px 12px rgba(37, 99, 235,0.1); border-color: rgba(37, 99, 235,0.25); }
.mission-kpi-pill-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 8px;
}
.mission-kpi-pill-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1;
}

/* Mission cards */
.mission-card {
  background: white;
  border: 1px solid #E3E8EF;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.mission-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.mission-card-title { font-size: 0.875rem; font-weight: 700; color: #0F172A; }
.mission-count-tag {
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--primary-light);
  color: var(--primary);
  padding: 2px 10px;
  border-radius: 999px;
}

/* Mission daily checklist grid */
.mission-checklist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.mission-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  border: 1px solid #F1F5F9;
  transition: all 0.15s;
  background: var(--canvas);
}
.mission-check-item:hover { border-color: var(--primary); background: var(--primary-light); }
.mission-check-item.done { text-decoration: line-through; color: #94A3B8; background: #F1F5F9; border-color: transparent; }
.mission-check-icon { font-size: 0.85rem; color: var(--primary); }
.exec-task-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}
.exec-task-label { flex: 1; font-size: 0.82rem; font-weight: 500; color: #334155; }
.exec-task-fase {
  font-size: 0.7rem;
  font-weight: 600;
  color: #94A3B8;
  background: #F1F5F9;
  padding: 1px 7px;
  border-radius: 999px;
}

/* Today todos */
.today-todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.today-todo-item:hover { background: #F1F5F9; }
.today-todo-check {
  width: 16px; height: 16px;
  border: 2px solid #CDD5E1;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.15s;
}
.today-todo-item:hover .today-todo-check { border-color: var(--primary); }
.today-todo-label { font-size: 0.82rem; font-weight: 500; color: #334155; }
.today-todo-time {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 1px 6px;
  border-radius: 5px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Revenue source tags */
.mission-rev-source-tag {
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--primary-light);
  color: var(--primary);
  padding: 3px 10px;
  border-radius: 999px;
}

/* ══════════════════════════════════════════════════════════════════
   TAB: TODOS — View Toggle + Calendar + Kanban
   ══════════════════════════════════════════════════════════════════ */

/* View toggle */
.view-toggle {
  display: flex;
  gap: 4px;
  background: #F1F5F9;
  padding: 3px;
  border-radius: 10px;
}
.view-toggle-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748B;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.view-toggle-btn.active { background: white; color: #0F172A; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* ── Calendar ── */
.cal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.cal-nav-btn {
  width: 32px; height: 32px;
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  background: white;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #334155;
  transition: all 0.15s;
  font-family: inherit;
}
.cal-nav-btn:hover { background: #F1F5F9; border-color: #CDD5E1; }
.cal-month-label { font-size: 0.975rem; font-weight: 700; color: #0F172A; flex: 1; }
.cal-today-btn {
  padding: 5px 14px;
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  background: white;
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.cal-today-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }

.cal-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  margin-bottom: 4px;
  padding: 0 2px;
}
.dow-sun { color: #EF4444; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-bottom: 16px;
}
.cal-cell {
  min-height: 88px;
  background: white;
  border: 1px solid #E3E8EF;
  border-radius: 10px;
  padding: 7px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}
.cal-cell:hover { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235,0.08); }
.cal-cell.other-month { background: var(--canvas); opacity: 0.45; }
.cal-cell.today { border-color: var(--primary); border-width: 2px; background: var(--canvas); }
.cal-cell.selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235,0.2); }
.cal-cell.has-overdue { border-color: #FCA5A5; background: #FFF5F5; }

.cal-cell-num {
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cal-cell.today .cal-cell-num {
  background: var(--primary);
  color: white;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 0.72rem;
}
.cal-cell.other-month .cal-cell-num { color: #94A3B8; }

.cal-chip {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 2px;
  padding: 2px 5px;
  border-radius: 4px;
  background: #F1F5F9;
  cursor: pointer;
  transition: background 0.1s;
}
.cal-chip:hover { background: var(--primary-light); }
.cal-chip.done { background: #F0FDF4; text-decoration: line-through; opacity: 0.6; }
.cal-chip.overdue { background: #FEE2E2; }
.cal-chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #94A3B8;
}
.cal-chip-dot.high { background: #EF4444; }
.cal-chip-dot.medium { background: #F59E0B; }
.cal-chip-dot.low { background: #CDD5E1; }
.cal-chip-text { font-size: 0.68rem; font-weight: 500; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip-time { font-size: 0.62rem; font-weight: 700; color: var(--primary); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.cal-chip.done .cal-chip-time { color: #059669; }
.cal-chip.overdue .cal-chip-time { color: #DC2626; }
.cal-more { font-size: 0.65rem; color: #94A3B8; padding: 1px 5px; }

.cal-cell-add {
  position: absolute;
  top: 4px; right: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: transparent;
  border: none;
  font-size: 0.85rem;
  color: #94A3B8;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cal-cell:hover .cal-cell-add { display: flex; }
.cal-cell-add:hover { background: var(--primary-light); color: var(--primary); }

/* Day panel */
.cal-day-panel {
  display: none;
  background: white;
  border: 1px solid #E3E8EF;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.cal-day-panel.open { display: block; animation: fadeInUp 0.2s ease-out; }
.cal-day-panel-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 12px;
}
.cal-day-panel-close {
  background: transparent;
  border: none;
  font-size: 0.85rem;
  color: #94A3B8;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: inherit;
}
.cal-day-panel-close:hover { background: #F1F5F9; color: #334155; }
.cal-day-task-list { margin-bottom: 12px; }
.cal-day-task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  margin-bottom: 4px;
  transition: background 0.1s;
}
.cal-day-task-item:hover { background: #F6F8FB; }
.cal-day-task-item.done { opacity: 0.5; }
.cal-day-task-item.done .cal-day-task-title { text-decoration: line-through; }
.cal-day-task-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #CDD5E1;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
  background: white;
}
.cal-day-task-dot:hover { border-color: var(--primary); background: var(--primary-light); }
.cal-day-task-dot.high { border-color: #FCA5A5; }
.cal-day-task-dot.medium { border-color: #FCD34D; }
.cal-day-task-time {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 2px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cal-day-task-title { flex: 1; font-size: 0.82rem; color: #334155; cursor: pointer; }
.cal-day-task-title:hover { color: var(--primary); }
.cal-day-task-del { background: transparent; border: none; cursor: pointer; font-size: 0.8rem; color: #94A3B8; padding: 2px 4px; border-radius: 4px; }
.cal-day-task-del:hover { background: #FEE2E2; color: #DC2626; }

.cal-day-add { padding-top: 8px; border-top: 1px solid #F1F5F9; }
.cal-day-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cal-day-add-inp {
  flex: 1;
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.82rem;
  font-family: inherit;
  outline: none;
  color: #0F172A;
}
.cal-day-add-inp:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235,0.1); }
.cal-day-prio {
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.82rem;
  font-family: inherit;
  outline: none;
  background: white;
  cursor: pointer;
}
.cal-day-time {
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.82rem;
  font-family: inherit;
  outline: none;
  background: white;
  color: #0F172A;
  width: 96px;
  flex-shrink: 0;
}
.cal-day-time:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235,0.1); }
.cal-day-add-btn {
  padding: 7px 14px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s;
}
.cal-day-add-btn:hover { background: var(--primary-dark); }

/* Daily consistency heatmap */
.heatmap-grid {
  display: grid;
  grid-template-rows: repeat(7, 13px);
  grid-auto-flow: column;
  grid-auto-columns: 13px;
  gap: 3px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 0.68rem;
  color: #94A3B8;
}

/* Agenda (day timeline) */
.agenda-list {
  background: white;
  border: 1px solid #E3E8EF;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}
.agenda-section-hdr {
  font-size: 0.72rem;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 0 6px;
}
.agenda-section-hdr:first-child { padding-top: 0; }
.agenda-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 4px;
}
.agenda-time {
  width: 52px;
  flex-shrink: 0;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  padding-top: 9px;
  font-variant-numeric: tabular-nums;
}
.agenda-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #F1F5F9;
  border-left: 3px solid var(--primary-light);
  border-radius: 8px;
  background: var(--canvas);
  transition: background 0.1s;
}
.agenda-card:hover { background: #F6F8FB; }
.agenda-card.done { opacity: 0.5; }
.agenda-card.done .agenda-card-title { text-decoration: line-through; }
.agenda-card-title { flex: 1; font-size: 0.84rem; font-weight: 500; color: #334155; }
.agenda-now-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}
.agenda-now-line::after {
  content: '';
  flex: 1;
  height: 2px;
  background: #EF4444;
  border-radius: 1px;
}
.agenda-now-line span {
  font-size: 0.68rem;
  font-weight: 800;
  color: #EF4444;
  width: 52px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Undated section */
.cal-undated {
  background: white;
  border: 1px solid #E3E8EF;
  border-radius: 12px;
  padding: 16px;
}
.cal-undated-hdr {
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cal-undated-hdr span {
  background: #F1F5F9;
  color: #64748B;
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: 999px;
}
.cal-undated-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cal-undated-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #F1F5F9;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.cal-undated-chip:hover { background: var(--primary-light); color: var(--primary); }
.cal-undated-chip.done { text-decoration: line-through; opacity: 0.5; }
.cal-undated-chip-del {
  background: transparent; border: none; cursor: pointer;
  color: #94A3B8; font-size: 0.75rem; padding: 0 2px;
  line-height: 1;
}
.cal-undated-chip-del:hover { color: #DC2626; }
.cal-undated-add-btn {
  background: transparent;
  border: 1px dashed #CDD5E1;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.cal-undated-add-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.cal-undated-add-form { display: none; margin-top: 10px; flex-direction: column; gap: 8px; }
.cal-undated-add-form.open { display: flex; }

/* ── Kanban ── */
.kbn-filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}
.kbn-filter-pill {
  padding: 5px 14px;
  border: 1px solid #E3E8EF;
  border-radius: 999px;
  background: white;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.kbn-filter-pill:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.kbn-filter-pill.active { background: var(--primary); color: white; border-color: var(--primary); }
.kbn-filter-pill.has-badge { border-color: #FCA5A5; color: #DC2626; }

/* Select toggle button */
.kbn-select-toggle {
  margin-left: auto;
  padding: 5px 12px;
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  background: white;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.kbn-select-toggle:hover { border-color: var(--primary); color: var(--primary); }
.kbn-select-toggle.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }

/* Bulk action bar */
.kbn-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #1E1B4B;
  color: white;
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.kbn-bulk-bar.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
.kbn-bulk-count { font-size: 0.82rem; font-weight: 700; }
.kbn-bulk-actions { display: flex; gap: 8px; }
.kbn-bulk-del {
  padding: 5px 14px;
  background: #EF4444;
  color: white;
  border: none;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.kbn-bulk-del:hover:not(:disabled) { background: #DC2626; }
.kbn-bulk-del:disabled { opacity: 0.6; cursor: not-allowed; }
.kbn-bulk-cancel {
  padding: 5px 12px;
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.kbn-bulk-cancel:hover { background: rgba(255,255,255,0.25); }

/* "Select all" button in the column header */
.kbn-col-selall {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 600;
  color: #94A3B8;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: inherit;
  display: none;
  transition: color 0.15s;
}
.kbn-col-selall:hover { color: var(--primary); }

/* Only shown while selection mode is active */
.kanban-col-header:has(+ .kanban-cards .kanban-card.select-mode) .kbn-col-selall,
#kanban-board.select-active .kbn-col-selall { display: block; }

.kbn-filter-date {
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-family: inherit;
  outline: none;
  color: #334155;
}

#kanban-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
.kanban-col {
  background: #F6F8FB;
  border: 1px solid #E3E8EF;
  border-radius: 12px;
  overflow: hidden;
}
.kanban-col.drag-over { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235,0.1); }
.kanban-col.col-done { background: #F0FDF4; border-color: #BBF7D0; }
.kanban-col.col-done .kanban-col-header { background: #F0FDF4; border-color: #BBF7D0; }
.kanban-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: white;
  border-bottom: 1px solid #E3E8EF;
}
.kanban-col-icon { font-size: 0.9rem; }
.kanban-col-title { font-size: 0.82rem; font-weight: 700; color: #334155; flex: 1; }
.kanban-col-count {
  font-size: 0.72rem;
  font-weight: 700;
  background: #F1F5F9;
  color: #64748B;
  padding: 2px 8px;
  border-radius: 999px;
}

.kanban-cards { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }

.kanban-card {
  background: white;
  border: 1px solid #E3E8EF;
  border-radius: 10px;
  padding: 12px;
  cursor: grab;
  position: relative;
  transition: box-shadow 0.15s, border-color 0.15s, background 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.kanban-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #CDD5E1; }
.kanban-card.dragging { opacity: 0.6; box-shadow: 0 8px 24px rgba(0,0,0,0.15); cursor: grabbing; }
.kanban-card.editing { cursor: default; }
.kanban-card.select-mode { cursor: default; }

/* Selected state */
.kanban-card.selected {
  border-color: var(--primary);
  background: #F5F3FF;
  box-shadow: 0 0 0 2px rgba(37, 99, 235,0.2);
}

/* Checkbox wrapper — hidden until hover or select-mode/selected */
.kanban-card-cb-wrap {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.kanban-card:hover .kanban-card-cb-wrap,
.kanban-card.select-mode .kanban-card-cb-wrap,
.kanban-card.selected .kanban-card-cb-wrap { opacity: 1; }

.kanban-card-cb {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--primary);
}

/* Indent title when checkbox visible */
.kanban-card.select-mode .kanban-card-title,
.kanban-card.selected .kanban-card-title { padding-left: 22px; }
.kanban-card-del {
  position: absolute;
  top: 8px; right: 8px;
  background: transparent;
  border: none;
  font-size: 0.7rem;
  color: #CDD5E1;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  display: none;
  font-family: inherit;
}
.kanban-card:hover .kanban-card-del { display: block; }
.kanban-card-del:hover { background: #FEE2E2; color: #DC2626; }
.kanban-card-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #0F172A;
  padding-right: 20px;
  margin-bottom: 8px;
  line-height: 1.4;
  cursor: pointer;
}
.kanban-card-title:hover { color: var(--primary); }
.kanban-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kanban-priority-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #CDD5E1;
}
.kanban-priority-dot.high { background: #EF4444; }
.kanban-priority-dot.medium { background: #F59E0B; }
.kanban-priority-dot.low { background: #CDD5E1; }

.kanban-add-area { padding: 10px; border-top: 1px solid #F1F5F9; }
.kanban-add-btn {
  width: 100%;
  padding: 7px;
  background: transparent;
  border: 1px dashed #CDD5E1;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #94A3B8;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.kanban-add-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.kanban-add-form { display: none; padding-top: 8px; }
.kanban-add-form.open { display: block; }
.kanban-add-input {
  width: 100%;
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.82rem;
  font-family: inherit;
  color: #0F172A;
  outline: none;
  resize: none;
  background: white;
  margin-bottom: 6px;
}
.kanban-add-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235,0.1); }
.kanban-priority-sel {
  width: 100%;
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.8rem;
  font-family: inherit;
  outline: none;
  background: white;
  color: #334155;
  margin-bottom: 6px;
  cursor: pointer;
}
.kanban-add-row { display: flex; gap: 6px; margin-top: 4px; }
.kanban-add-save {
  flex: 1;
  padding: 6px 12px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.kanban-add-save:hover { background: var(--primary-dark); }
.kanban-add-cancel {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.kanban-add-cancel:hover { background: #F1F5F9; }
.kanban-edit-title {
  width: 100%;
  border: 1px solid var(--primary);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.82rem;
  font-family: inherit;
  color: #0F172A;
  outline: none;
  resize: none;
  margin-bottom: 6px;
  box-shadow: 0 0 0 3px rgba(37, 99, 235,0.1);
}
.kanban-edit-row { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.kanban-edit-due,
.kanban-edit-time {
  flex: 1;
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.78rem;
  font-family: inherit;
  outline: none;
}
.kanban-edit-time { flex: 0 0 86px; }

/* ══════════════════════════════════════════════════════════════════
   TAB: SPRINT
   ══════════════════════════════════════════════════════════════════ */
.sprint-target-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.sprint-target-item:hover { background: var(--canvas); border-color: #FBCFE8; }
.sprint-target-item.done { background: #F0FDF4; border-color: #BBF7D0; }
.sprint-target-item.done .sprint-target-text { text-decoration: line-through; color: #94A3B8; }
.sprint-target-circle {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #CDD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 900;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.2s;
  background: white;
}
.sprint-target-item:hover .sprint-target-circle { border-color: var(--primary); }
.sprint-target-item.done .sprint-target-circle {
  background: #059669;
  border-color: #059669;
  color: white;
}
.sprint-target-item.done .sprint-target-circle::after { content: '✓'; }
.sprint-target-text { font-size: 0.875rem; font-weight: 500; color: #334155; line-height: 1.4; }

/* ══════════════════════════════════════════════════════════════════
   TAB: AI ASSISTANT (full-screen)
   ══════════════════════════════════════════════════════════════════ */
.ai-layout {
  display: flex;
  height: 100%;
  flex: 1;
  overflow: hidden;
}
.ai-sessions-sidebar {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid #E3E8EF;
  background: #F6F8FB;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ai-new-chat-btn {
  margin: 12px;
  padding: 8px 12px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s;
  flex-shrink: 0;
}
.ai-new-chat-btn:hover { background: var(--primary-dark); }
.ai-sessions-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; }
.ai-sessions-empty { padding: 20px 12px; font-size: 0.78rem; color: #94A3B8; text-align: center; line-height: 1.5; }
.ai-session-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 2px;
  position: relative;
}
.ai-session-item:hover { background: #F1F5F9; }
.ai-session-item.active { background: var(--primary-light); }
.ai-session-name {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-session-item.active .ai-session-name { color: var(--primary); font-weight: 600; }
.ai-session-time { font-size: 0.68rem; color: #94A3B8; flex-shrink: 0; }
.ai-session-del {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  color: #CDD5E1;
  display: none;
  align-items: center;
  flex-shrink: 0;
}
.ai-session-item:hover .ai-session-del { display: flex; }
.ai-session-del:hover { background: #FEE2E2; color: #DC2626; }

.ai-chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: white;
}
.ai-page-header {
  padding: 16px 24px;
  border-bottom: 1px solid #E3E8EF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  flex-shrink: 0;
}
.ai-page-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.975rem;
  font-weight: 800;
  color: #0F172A;
  background: var(--primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ai-page-badge {
  -webkit-text-fill-color: initial;
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--primary-light);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 999px;
}
.ai-page-subtitle { font-size: 0.78rem; color: #94A3B8; margin-top: 2px; }

.ai-page-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--canvas);
}

.ai-msg {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: fadeInUp 0.2s ease-out;
}
.ai-msg.user { flex-direction: row-reverse; }
.ai-msg-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}
.ai-msg.user .ai-msg-avatar { background: var(--primary); color: white; }
.ai-msg.assistant .ai-msg-avatar {
  background: var(--primary);
  color: white;
}
.ai-msg-bubble {
  max-width: 72%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.875rem;
  line-height: 1.65;
}
.ai-msg.user .ai-msg-bubble {
  background: var(--primary);
  color: white;
  border-radius: 14px 4px 14px 14px;
}
.ai-msg.assistant .ai-msg-bubble {
  background: white;
  color: #334155;
  border: 1px solid #E3E8EF;
  border-radius: 4px 14px 14px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ai-msg-content { line-height: 1.7; }
.ai-msg-content p { margin-bottom: 8px; }
.ai-msg-content p:last-child { margin-bottom: 0; }
.ai-msg-content ul, .ai-msg-content ol { padding-left: 20px; margin-bottom: 8px; }
.ai-msg-content li { margin-bottom: 4px; }
.ai-msg-content code {
  background: #F1F5F9;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: monospace;
}
.ai-msg-content pre { background: #F1F5F9; padding: 12px; border-radius: 8px; overflow-x: auto; margin: 8px 0; }
.ai-msg-content strong { font-weight: 700; }

.ai-typing-dots { display: flex; gap: 4px; padding: 4px 0; }
.ai-typing-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #94A3B8;
  animation: typingDot 1.4s infinite ease-in-out;
}
.ai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* AI Welcome */
.ai-welcome {
  margin: auto;
  text-align: center;
  max-width: 460px;
  padding: 40px 20px;
}
.ai-welcome-glow {
  width: 60px; height: 60px;
  border-radius: 16px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 24px rgba(37, 99, 235,0.3);
}
.ai-welcome-title { font-size: 1.25rem; font-weight: 800; color: #0F172A; margin-bottom: 8px; }
.ai-welcome-sub { font-size: 0.875rem; color: #64748B; line-height: 1.6; margin-bottom: 24px; }
.ai-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.ai-quick-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: white;
  border: 1px solid #E3E8EF;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  text-align: left;
}
.ai-quick-btn:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }

/* AI Input */
.ai-page-input-area {
  padding: 16px 24px;
  border-top: 1px solid #E3E8EF;
  background: white;
  flex-shrink: 0;
}
.ai-page-input-box {
  border: 1px solid #E3E8EF;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ai-page-input-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235,0.1); }
.ai-page-textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  padding: 12px 16px;
  font-size: 0.875rem;
  font-family: inherit;
  color: #0F172A;
  background: transparent;
  line-height: 1.5;
  max-height: 160px;
}
.ai-page-input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-top: 1px solid #F1F5F9;
}
.ai-page-hint { font-size: 0.72rem; color: #94A3B8; }
.ai-page-send-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.ai-page-send-btn:hover { background: var(--primary-dark); }
.ai-page-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════
   TAB: DAILY JOBS — todo-item
   ══════════════════════════════════════════════════════════════════ */
.todo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #F1F5F9;
  border-radius: 10px;
  background: white;
  transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.todo-item:hover { border-color: rgba(37, 99, 235,0.2); box-shadow: 0 3px 10px rgba(37, 99, 235,0.08); }
.todo-body { flex: 1; }
.todo-title { font-size: 0.875rem; font-weight: 600; color: #0F172A; margin-bottom: 2px; }
.todo-meta { display: flex; gap: 6px; }
.todo-actions { opacity: 0; transition: opacity 0.15s; }
.todo-item:hover .todo-actions { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   AI FLOATING CHAT (FAB)
   ══════════════════════════════════════════════════════════════════ */
#ai-fab { display: none; }
#ai-fab:hover {}

.ai-panel {
  position: fixed;
  bottom: 90px;
  right: 24px;
  width: 360px;
  max-height: 500px;
  background: white;
  border: 1px solid #E3E8EF;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  z-index: 999;
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.ai-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

.ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #F1F5F9;
  font-size: 0.875rem;
  font-weight: 700;
  color: #0F172A;
  background: white;
  border-radius: 16px 16px 0 0;
}
.ai-panel-header button {
  background: transparent; border: none; font-size: 0.85rem; cursor: pointer;
  color: #94A3B8; padding: 2px 6px; border-radius: 4px; font-family: inherit;
}
.ai-panel-header button:hover { background: #F1F5F9; color: #334155; }
.ai-messages {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.ai-bubble {
  max-width: 85%;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.55;
}
.ai-bubble.user { background: var(--primary); color: white; align-self: flex-end; border-radius: 12px 4px 12px 12px; }
.ai-bubble.assistant { background: #F1F5F9; color: #334155; align-self: flex-start; border-radius: 4px 12px 12px 12px; }
.ai-bubble.loading { opacity: 0.6; }
.ai-input-row {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #F1F5F9;
}
.ai-input-row input {
  flex: 1;
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-family: inherit;
  outline: none;
  color: #0F172A;
}
.ai-input-row input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235,0.1); }
.ai-input-row button {
  padding: 8px 14px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.ai-input-row button:hover { background: var(--primary-dark); }

/* ══════════════════════════════════════════════════════════════════
   CONFIRM MODAL
   ══════════════════════════════════════════════════════════════════ */
#ai-confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(3px);
  z-index: 9998;
  align-items: center;
  justify-content: center;
}
#ai-confirm-overlay.open { display: flex; }
.ai-confirm-box {
  background: white;
  border-radius: 16px;
  padding: 28px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  animation: fadeInUp 0.2s ease-out;
}
.ai-confirm-title { font-size: 1rem; font-weight: 800; color: #0F172A; margin-bottom: 12px; }
.ai-confirm-desc { font-size: 0.875rem; color: #334155; line-height: 1.6; margin-bottom: 20px; }
.ai-confirm-btns { display: flex; gap: 10px; }
.ai-confirm-btns button {
  flex: 1; padding: 10px; border: none; border-radius: 10px;
  font-size: 0.875rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.15s;
}
#ai-confirm-yes { background: var(--primary); color: white; }
#ai-confirm-yes:hover { background: var(--primary-dark); }
#ai-confirm-no { background: #F1F5F9; color: #334155; }
#ai-confirm-no:hover { background: #E3E8EF; }

/* ══════════════════════════════════════════════════════════════════
   MISC / UTILITIES
   ══════════════════════════════════════════════════════════════════ */
.page-header { margin-bottom: 24px; }
.page-title { font-size: 1.25rem; font-weight: 800; color: #0F172A; }
.page-subtitle { font-size: 0.82rem; color: #94A3B8; margin-top: 2px; }
.mt-6 { margin-top: 24px; }

/* Phase overall bar (Eksekusi) */
.phase-overall-bar { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════
   MOBILE (≤900px) — sidebar becomes a top bar, grids stack
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   TEAM HQ — tambahan di atas design system irfan-dashboard
   ══════════════════════════════════════════════════════════════════ */

/* ── Login: pick a person, then a PIN ── */

/* ── Sidebar footer: badge member login ── */
.me-badge {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px; background: var(--bg, #F6F8FB);
}
.me-badge-avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 0.78rem; line-height: 1;
}
.me-badge-info { min-width: 0; flex: 1; }
.me-badge-name { font-size: 0.82rem; font-weight: 700; color: var(--text, #0F172A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-badge-role { font-size: 0.68rem; color: var(--text-muted, #94A3B8); }
.me-badge button {
  background: none; border: none; cursor: pointer; font-size: 1rem;
  color: var(--text-muted, #94A3B8); padding: 4px 6px; border-radius: 8px;
}
.me-badge button:hover { background: #FEE2E2; color: #B91C1C; }
@keyframes pet-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* ── Command Center: the "on track today" strip ── */
.streak-strip { display: flex; gap: 18px; flex-wrap: wrap; }
.streak-member { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 64px; }
.streak-member-avatar {
  position: relative;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.92rem; background: #F1F5F9;
  border: 2.5px solid #E3E8EF;
  filter: grayscale(1); opacity: 0.6;
  transition: all .25s;
}
.streak-member.active .streak-member-avatar {
  filter: none; opacity: 1;
  border-color: var(--member-color, #2563EB);
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--member-color, #2563EB) 18%, transparent);
}
.streak-check {
  position: absolute; right: -3px; bottom: -3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #22C55E; color: #fff;
  font-size: 0.62rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.streak-member-name { font-size: 0.72rem; font-weight: 600; color: var(--text, #0F172A); }
.streak-member-count { font-size: 0.7rem; font-weight: 700; color: var(--text-muted, #94A3B8); }
.streak-member.active .streak-member-count { color: var(--primary); }

/* ── Command Center: today's commitments, one column per executive ── */
.member-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.member-col {
  border: 1px solid var(--border, #E3E8EF);
  border-top: 3px solid var(--member-color, #2563EB);
  border-radius: 12px; padding: 12px;
  background: var(--canvas);
}
.member-col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.member-col-avatar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--member-color, var(--primary));
  color: #FFFFFF;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.member-col-name { font-size: 0.85rem; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-col-count { font-size: 0.72rem; font-weight: 700; color: var(--member-color, #2563EB); }
.member-col-checklist { font-size: 0.7rem; color: var(--text-muted, #94A3B8); margin-bottom: 6px; }
.member-col-tasks { display: flex; flex-direction: column; gap: 4px; }
.cmd-todo-item {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 7px; border-radius: 8px; background: #fff;
  border: 1px solid var(--border, #E3E8EF);
  font-size: 0.78rem;
}
.cmd-todo-item.done { opacity: 0.5; }
.cmd-todo-item.done .cmd-todo-title { text-decoration: line-through; }
.cmd-todo-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--member-color, #2563EB);
  flex-shrink: 0;
}
.cmd-todo-dot.clickable { cursor: pointer; }
.cmd-todo-dot.clickable:hover { background: var(--member-color, #2563EB); }
.cmd-todo-item.done .cmd-todo-dot { background: var(--member-color, #2563EB); }
.cmd-todo-time { font-size: 0.68rem; font-weight: 700; color: var(--primary, #2563EB); flex-shrink: 0; }
.cmd-todo-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-todo-empty { font-size: 0.75rem; color: var(--text-muted, #94A3B8); padding: 6px 2px; }

/* ── Home: multi-row team heatmap ── */
.thm-grid { display: flex; flex-direction: column; gap: 5px; overflow-x: auto; padding-bottom: 4px; }
.thm-row { display: flex; align-items: center; gap: 8px; }
.thm-label {
  width: 34px; flex-shrink: 0; text-align: center;
  font-size: 0.95rem; font-weight: 800;
}
.thm-team-row .thm-label { font-size: 0.6rem; letter-spacing: 0.04em; color: var(--primary, #2563EB); }
.thm-cells { display: flex; gap: 3px; }
.thm-cell {
  width: 9px; height: 9px; border-radius: 2.5px;
  background: #F1F5F9; flex-shrink: 0;
}
.thm-cell.task { background: var(--member-color, #2563EB); }
.thm-cell.checklist { background: color-mix(in srgb, var(--member-color, #2563EB) 55%, #fff); }
.thm-cell.shield { background: #93C5FD; }
.thm-cell.holiday { background: #E3E8EF; }
.thm-cell.team { background: #2563EB; }
.thm-team-row .thm-cell { border-radius: 50%; }

/* ── Shared member dot/badge (day panel, agenda, kanban) ── */
.member-dot {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; flex-shrink: 0;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.06);
}
.kanban-member-badge { font-size: 0.85rem; line-height: 1; }
.assigned-tag { font-size: 0.68rem; color: var(--text-muted, #94A3B8); flex-shrink: 0; }
.member-select { max-width: 130px; }

/* ── Team checklist ── */
.team-daily-row { display: flex; align-items: center; gap: 10px; }
.team-daily-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; background: #F1F5F9;
  border: 2px solid var(--member-color, #E3E8EF);
  flex-shrink: 0;
}
.team-daily-info { flex: 1; min-width: 0; }
.team-daily-name { font-size: 0.8rem; font-weight: 600; margin-bottom: 4px; }
.team-daily-bar { height: 6px; background: #F1F5F9; border-radius: 999px; overflow: hidden; }
.team-daily-fill { height: 100%; border-radius: 999px; transition: width .4s; }

/* ── Administration: non-working-day pills ── */
.holiday-pill {
  padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--border, #E3E8EF);
  background: #fff; font-size: 0.8rem; font-weight: 600;
  color: var(--text-muted, #64748B); cursor: pointer;
  transition: all .12s;
}
.holiday-pill:hover { border-color: var(--primary, #2563EB); }
.holiday-pill.active {
  background: var(--primary, #2563EB); border-color: var(--primary, #2563EB);
  color: #fff;
}

/* ── Mobile ── */
@media (max-width: 900px) {
  .member-cols { grid-template-columns: 1fr; }
  .streak-strip { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════
   VERTEX HQ — COMPONENT LAYER
   Flat corporate surfaces on the blue/black/white palette.
   The --clay-* names are retained as aliases so the component rules
   below keep resolving; they now map to flat, low-contrast shadows.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --clay-shadow: var(--shadow-md);
  --clay-shadow-sm: var(--shadow-sm);
  --clay-press: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #F6F8FB;
}

/* ── Fokus keyboard terlihat ── */
:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
  border-radius: 6px;
}
.input:focus-visible { outline: none; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Sidebar ── */
.nav-item {
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  min-height: 40px;
  transition: background 0.18s, color 0.18s, transform 0.12s;
}
.nav-item:active { transform: scale(0.97); }
.nav-item.active {
  background: var(--primary-light);
  box-shadow: inset 0 0 0 1.5px rgba(37, 99, 235, 0.22);
}
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
}
.nav-icon svg { width: 17px; height: 17px; }

.me-badge { border-radius: var(--radius-md); }
.me-badge button { cursor: pointer; min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }

/* ── Kartu: clay di atas utilitas tailwind ── */
main .rounded-xl { border-radius: 18px; }
main .shadow-sm { box-shadow: var(--clay-shadow); }
main .border-gray-200 { border-color: #E3E8EF; }

/* ── Tombol ── */
.btn {
  border-radius: 12px;
  min-height: 38px;
  transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); box-shadow: var(--clay-press); }
.btn-primary, .btn.btn-primary {
  background: #2563EB;
  box-shadow: 0 4px 10px -3px rgba(37, 99, 235, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.btn-primary:hover, .btn.btn-primary:hover {
  background: #1D4ED8;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(37, 99, 235, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.btn-secondary, .btn.btn-secondary {
  border-radius: 12px;
  box-shadow: var(--clay-shadow-sm);
  border-color: #E3E8EF;
}
.btn-secondary:hover, .btn.btn-secondary:hover { transform: translateY(-1px); }

/* ── Input ── */
.input {
  border-radius: 12px;
  min-height: 40px;
  border-color: #E3E8EF;
}
.input:focus { box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.14); }

/* ── View toggle ── */
.view-toggle { border-radius: 13px; padding: 4px; background: #EEF2F7; }
.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  padding: 7px 14px;
  min-height: 34px;
  transition: all 0.18s;
}
.view-toggle-btn svg { width: 14px; height: 14px; }
.view-toggle-btn.active {
  color: var(--primary);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.18), inset 0 -2px 0 rgba(17, 24, 39, 0.04);
}

/* ── Strip streak & kolom member ── */
.streak-member-avatar { transition: transform 0.18s, filter 0.25s, opacity 0.25s, border-color 0.25s, box-shadow 0.25s; }
.streak-member:hover .streak-member-avatar { transform: translateY(-2px) scale(1.05); }
.member-col { border-radius: 16px; background: #FAFBFD; box-shadow: var(--clay-shadow-sm); border-color: #E3E8EF; }
.cmd-todo-item { border-radius: 10px; transition: transform 0.15s, box-shadow 0.15s; }
.cmd-todo-item:not(.done):hover { transform: translateY(-1px); box-shadow: 0 3px 8px -2px rgba(17, 24, 39, 0.08); }

/* ── Heatmap ── */
.thm-cell { width: 10px; height: 10px; border-radius: 3px; }

/* ── Calendar / kanban / agenda ── */
.cal-cell { transition: background 0.15s, box-shadow 0.15s; }
.cal-chip { cursor: pointer; border-radius: 7px; }
.kanban-card {
  border-radius: var(--radius-md);
  box-shadow: var(--clay-shadow-sm);
  transition: transform 0.15s, box-shadow 0.18s;
}
.kanban-card:hover:not(.editing) { transform: translateY(-2px); box-shadow: var(--clay-shadow); }
.kanban-col { border-radius: 18px; }
.agenda-card { border-radius: var(--radius-md); }
.mission-check-item {
  border-radius: 12px;
  min-height: 40px;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.mission-check-item:active { transform: scale(0.985); }
.kbn-filter-pill, .holiday-pill { min-height: 34px; transition: all 0.15s; }
.holiday-pill:active, .kbn-filter-pill:active { transform: scale(0.96); }

/* ── Toast ── */
#toast { border-radius: var(--radius-md); box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.35); }

/* ── Skeleton loading ── */
.loading { position: relative; color: var(--text-muted); }

/* ── AI Analyst (chat) ── */
.assistant-bubble {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.assistant-user {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.assistant-ai {
  background: #F1F5F9;
  color: #0F172A;
  border: 1px solid #E3E8EF;
  border-bottom-left-radius: 4px;
}

/* ── Modal (Ganti PIN dll) ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 24, 39, 0.5);
  backdrop-filter: blur(3px);
}
.modal-card {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.4);
}
.modal-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 2px;
}
#change-pin-btn { color: #94A3B8; display: inline-flex; }
#change-pin-btn:hover { color: var(--primary); }

/* ── Tag chips di kartu ── */
.tag-chip { display: inline-block; font-size: 0.6rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; line-height: 1.5; }
.kanban-card-tags { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0 2px; }
.badge-subtask { background: #EFF6FF; color: #1D4ED8; }
.kanban-card-detail {
  position: absolute; top: 5px; right: 26px;
  background: transparent; border: none; cursor: pointer;
  color: #94A3B8; font-size: 0.8rem; padding: 2px 4px; border-radius: 5px;
}
.kanban-card-detail:hover { color: var(--primary); background: var(--primary-light); }

/* ── Task detail modal ── */
.task-modal-card {
  max-width: 560px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  position: relative; padding: 26px 24px;
}
.tm-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 1.1rem; color: #94A3B8; cursor: pointer; }
.tm-close:hover { color: #0F172A; }
.tm-title-input { width: 100%; font-size: 1.15rem; font-weight: 800; color: #0F172A; border: none; outline: none; padding: 2px 0 8px; border-bottom: 2px solid transparent; }
.tm-title-input:focus { border-bottom-color: var(--primary); }
.tm-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 4px; }
.tm-meta-item { font-size: 0.8rem; color: #4B5563; background: #F1F5F9; padding: 5px 10px; border-radius: 8px; }
.tm-meta-sel, .tm-meta-inp { font-size: 0.8rem; border: 1px solid #E3E8EF; border-radius: 8px; padding: 5px 8px; min-height: 32px; background: #fff; }
.tm-meta-sel:focus, .tm-meta-inp:focus { border-color: var(--primary); outline: none; }
.tm-section { margin-top: 16px; }
.tm-label { font-size: 0.72rem; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.03em; }
.tm-section-head { display: flex; justify-content: space-between; align-items: center; }
.tm-sub-progress, .tm-time-total { font-size: 0.75rem; font-weight: 700; color: var(--primary); }
.tm-textarea { width: 100%; margin-top: 6px; border: 1px solid #E3E8EF; border-radius: 10px; padding: 9px 11px; font-size: 0.9rem; resize: vertical; font-family: inherit; }
.tm-textarea:focus { border-color: var(--primary); outline: none; }
.tm-subtasks { margin-top: 6px; }
.tm-subtask { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 0.88rem; }
.tm-subtask.done .tm-sub-text { text-decoration: line-through; color: #94A3B8; }
.tm-sub-text { flex: 1; }
.tm-sub-del { background: none; border: none; color: #94A3B8; cursor: pointer; font-size: 0.75rem; }
.tm-sub-del:hover { color: #EF4444; }
.tm-add-row { display: flex; gap: 6px; margin-top: 8px; }
.tm-add-inp { flex: 1; border: 1px solid #E3E8EF; border-radius: 8px; padding: 7px 10px; font-size: 0.85rem; }
.tm-add-inp:focus { border-color: var(--primary); outline: none; }
.tm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tm-tag-toggle { font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid #E3E8EF; background: #fff; color: #64748B; cursor: pointer; }
.tm-tag-toggle:hover { border-color: var(--primary); }
.tm-empty { font-size: 0.8rem; color: #94A3B8; padding: 4px 0; }
.tm-timer-btn.timer-running, .btn.timer-running { background: #FEE2E2; color: #DC2626; }
.tm-comments { margin-top: 6px; max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.tm-comment { display: flex; gap: 8px; }
.tm-comment-av { font-size: 1.1rem; }
.tm-comment-body { flex: 1; background: #F6F8FB; border-radius: 10px; padding: 7px 10px; }
.tm-comment-name { font-size: 0.75rem; font-weight: 700; color: #334155; }
.tm-comment-time { font-weight: 400; color: #94A3B8; font-size: 0.68rem; }
.tm-comment-text { font-size: 0.85rem; color: #0F172A; margin-top: 1px; white-space: pre-wrap; }
.tm-footer { display: flex; gap: 8px; margin-top: 22px; padding-top: 14px; border-top: 1px solid #F1F5F9; }

/* ── Notifications ── */
.notif-bell { position: relative; color: #94A3B8; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 8px; display: inline-flex; }
.notif-bell:hover { color: var(--primary); background: var(--primary-light); }
.notif-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #EF4444; color: #fff; font-size: 0.62rem; font-weight: 800;
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
}
.notif-panel {
  position: absolute; top: 60px; left: 12px; right: 12px; z-index: 60;
  background: #fff; border: 1px solid #E3E8EF; border-radius: 14px;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,0.25); overflow: hidden;
}
.notif-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-bottom: 1px solid #F1F5F9; font-size: 0.8rem; font-weight: 800; color: #0F172A; }
.notif-mark-all { font-size: 0.72rem; font-weight: 700; color: var(--primary); background: none; border: none; cursor: pointer; }
.notif-list { max-height: 320px; overflow-y: auto; }
.notif-item { padding: 10px 14px; border-bottom: 1px solid #F6F8FB; cursor: pointer; }
.notif-item:hover { background: var(--canvas); }
.notif-item.unread { background: var(--canvas); }
.notif-item.unread .notif-item-body { font-weight: 700; }
.notif-item-body { font-size: 0.82rem; color: #334155; }
.notif-item-time { font-size: 0.68rem; color: #94A3B8; margin-top: 2px; }
.notif-empty { padding: 20px; text-align: center; font-size: 0.8rem; color: #94A3B8; }

/* ── List / Table view ── */
.list-view-wrap { overflow-x: auto; border: 1px solid #E3E8EF; border-radius: 14px; background: #fff; }
.list-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.list-table thead th { text-align: left; padding: 11px 14px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #64748B; border-bottom: 1px solid #F1F5F9; background: #FafafA; position: sticky; top: 0; }
.list-table td { padding: 11px 14px; border-bottom: 1px solid #F6F8FB; vertical-align: middle; }
.list-row { cursor: pointer; }
.list-row:hover { background: var(--canvas); }
.list-task-title { font-weight: 600; color: #0F172A; margin-bottom: 3px; }
.list-status { font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.list-status-todo { background: #F1F5F9; color: #64748B; }
.list-status-doing { background: #EFF6FF; color: #1D4ED8; }
.list-status-done { background: #ECFDF5; color: #059669; }

/* ── Finance (budget plans) ── */
.fin-dept-row td { background: #F6F8FB; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.fin-subtotal-row td { background: var(--canvas); font-weight: 700; border-top: 1px solid var(--border); }
.fin-grandtotal-row td { background: var(--primary-light); font-weight: 800; }
.badge-paid { background: var(--success-light); color: var(--success); }
.badge-unpaid { background: var(--danger-light); color: var(--danger); }
.badge-sponsor-proposed { background: #F1F5F9; color: #334155; }
.badge-sponsor-confirmed { background: var(--success-light); color: var(--success); }
.badge-sponsor-rejected { background: var(--danger-light); color: var(--danger); }
.badge-status-active { background: var(--success-light); color: var(--success); }
.badge-status-archived { background: #F1F5F9; color: #64748B; }
#fin-plan-tbody tr[data-plan-id] { cursor: pointer; }

/* ── Finance: dashboard (stat tiles, chart, meter) ── */
.fin-stat-tile { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.fin-stat-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.fin-stat-value { font-size: 1.35rem; font-weight: 800; margin-top: 4px; }

.fin-legend { display: flex; gap: 14px; }
.fin-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-muted); }
.fin-legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.fin-bar-group rect.fin-bar { transition: opacity 0.15s; cursor: pointer; }
.fin-bar-group:hover rect.fin-bar { opacity: 0.85; }
.fin-bar-value { font-size: 10px; fill: var(--text-muted); font-weight: 700; }
.fin-axis-label { font-size: 10px; fill: var(--text-muted); }
.fin-gridline { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }

.fin-chart-tooltip {
  position: absolute; pointer-events: none; z-index: 20;
  background: var(--text); color: #fff; font-size: 0.72rem; line-height: 1.4;
  padding: 6px 10px; border-radius: 8px; box-shadow: 0 4px 12px rgba(17,24,39,0.18);
  white-space: nowrap;
}
.fin-chart-tooltip b { font-size: 0.78rem; }

.fin-meter-value { font-size: 1.6rem; font-weight: 800; color: var(--success); }
.fin-meter-track { background: var(--success-light); border-radius: 999px; height: 10px; overflow: hidden; margin-top: 8px; }
.fin-meter-fill { background: var(--success); height: 100%; border-radius: 999px; transition: width 0.4s ease; }

/* ── Docs / Wiki ── */
.doc-list-item { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid #E3E8EF; border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .12s, background .12s; }
.doc-list-item:hover { border-color: var(--primary); }
.doc-list-item.active { border-color: var(--primary); background: var(--primary-light); }
.doc-list-title { font-size: 0.88rem; font-weight: 700; color: #0F172A; }
.doc-list-meta { font-size: 0.68rem; color: #94A3B8; margin-top: 2px; }
.doc-editor { border: 1px solid #E3E8EF; border-radius: 14px; padding: 16px; background: #fff; }
.doc-editor-toolbar { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.doc-tab-btn { font-size: 0.75rem; font-weight: 700; padding: 5px 12px; border-radius: 8px; border: 1px solid #E3E8EF; background: #fff; color: #64748B; cursor: pointer; }
.doc-tab-btn.active { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.doc-editor-meta { margin-left: auto; font-size: 0.68rem; color: #94A3B8; }
.doc-textarea { width: 100%; min-height: 320px; border: 1px solid #E3E8EF; border-radius: 10px; padding: 12px; font-size: 0.9rem; font-family: ui-monospace, 'SF Mono', Menlo, monospace; resize: vertical; }
.doc-textarea:focus { border-color: var(--primary); outline: none; }
.doc-preview { min-height: 320px; border: 1px solid #F1F5F9; border-radius: 10px; padding: 14px 16px; }
.doc-empty { font-size: 0.85rem; color: #94A3B8; text-align: center; padding: 40px 20px; border: 1px dashed #E3E8EF; border-radius: 14px; }
.markdown-body h1 { font-size: 1.3rem; font-weight: 800; margin: 10px 0 6px; }
.markdown-body h2 { font-size: 1.1rem; font-weight: 800; margin: 10px 0 5px; }
.markdown-body h3 { font-size: 0.98rem; font-weight: 700; margin: 8px 0 4px; }
.markdown-body p { margin: 5px 0; font-size: 0.9rem; line-height: 1.6; color: #334155; }
.markdown-body ul { margin: 6px 0 6px 20px; list-style: disc; }
.markdown-body li { font-size: 0.9rem; line-height: 1.6; color: #334155; }
.markdown-body code { background: #F1F5F9; padding: 1px 5px; border-radius: 5px; font-size: 0.85em; }
.markdown-body a { color: var(--primary); text-decoration: underline; }

/* ── AI Analyst: multi-session ── */
.assistant-layout { display: grid; grid-template-columns: 220px 1fr; gap: 14px; }
.assistant-sidebar { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.assistant-session-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.assistant-session-item {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 10px; border-radius: 10px; border: 1px solid #E3E8EF;
  background: #fff; cursor: pointer; transition: border-color .12s, background .12s;
}
.assistant-session-item:hover { border-color: var(--primary); }
.assistant-session-item.active { border-color: var(--primary); background: var(--primary-light); }
.assistant-session-info { flex: 1; min-width: 0; }
.assistant-session-name { font-size: 0.82rem; font-weight: 700; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assistant-session-preview { font-size: 0.68rem; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.assistant-session-del, .assistant-session-edit { background: none; border: none; cursor: pointer; font-size: 0.72rem; opacity: 0; padding: 2px 3px; border-radius: 6px; flex-shrink: 0; }
.assistant-session-item:hover .assistant-session-del, .assistant-session-item:hover .assistant-session-edit,
.assistant-session-item.active .assistant-session-del, .assistant-session-item.active .assistant-session-edit { opacity: 0.7; }
.assistant-session-edit:hover { opacity: 1; background: var(--primary-light); }
.assistant-session-del:hover { opacity: 1; background: #FEE2E2; }
.assistant-rename-input { width: 100%; font-size: 0.82rem; font-weight: 700; border: 1px solid var(--primary); border-radius: 6px; padding: 2px 6px; outline: none; }
.assistant-chat { min-width: 0; }

/* ── Insights: briefings ── */
.report-hist-item { display: block; width: 100%; text-align: left; padding: 9px 11px; border: 1px solid #E3E8EF; border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .12s, background .12s; }
.report-hist-item:hover { border-color: var(--primary); }
.report-hist-item.active { border-color: var(--primary); background: var(--primary-light); }
.report-hist-period { font-size: 0.8rem; font-weight: 700; color: #0F172A; }
.report-hist-meta { font-size: 0.68rem; color: #94A3B8; margin-top: 1px; }
.report-empty { border: 1px dashed #E3E8EF; border-radius: 14px; padding: 40px 20px; text-align: center; font-size: 0.9rem; color: #64748B; line-height: 1.6; }
.report-card { border: 1px solid #E3E8EF; border-radius: 16px; background: #fff; padding: 22px; }
.report-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.report-score { width: 72px; height: 72px; flex-shrink: 0; border: 4px solid var(--primary); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; line-height: 1; }
.report-score span { font-size: 0.6rem; font-weight: 600; color: #94A3B8; }
.report-headline { font-size: 1.05rem; font-weight: 800; color: #0F172A; line-height: 1.4; }
.report-period { font-size: 0.75rem; color: #94A3B8; margin-top: 3px; }
.report-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 6px; }
@media (max-width: 800px) { .report-grid3 { grid-template-columns: 1fr; } }
.report-sec { margin-top: 14px; }
.report-sec h4 { font-size: 0.8rem; font-weight: 800; color: #334155; margin-bottom: 6px; }
.report-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.report-list li { font-size: 0.85rem; color: #334155; line-height: 1.45; }
.report-none { font-size: 0.82rem; color: #94A3B8; }
.report-recs { display: flex; flex-direction: column; gap: 7px; }
.report-rec { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--primary-light); border-radius: 10px; }
.report-rec span { flex: 1; font-size: 0.85rem; color: #0F172A; font-weight: 600; }
.report-member { font-size: 0.85rem; color: #334155; padding: 4px 0; line-height: 1.5; }
.report-member b { color: #0F172A; }

/* ── Pet Room ── */
.opt-card-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.opt-card { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; padding: 14px 8px; border: 2px solid #E3E8EF; border-radius: 14px; background: #fff; cursor: pointer; font-size: 0.85rem; font-weight: 700; color: #334155; transition: all .14s; }
.opt-card span { font-size: 2rem; }
.opt-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.opt-card.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.health-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 820px) { .health-grid { grid-template-columns: 1fr; } }
.health-card-title { font-size: 0.85rem; font-weight: 800; color: #334155; margin-bottom: 10px; }
.health-chat-card { border: 1px solid #E3E8EF; border-radius: 16px; background: #fff; padding: 16px; margin-top: 18px; }
.health-chat-box { min-height: 120px; max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.health-chat-form-row { display: flex; gap: 8px; }

/* ══════════════════════════════════════════════════════════════════
   VERTEX HQ — CORPORATE OVERRIDES
   Applied last. Flattens the inherited soft-3D treatment, darkens the
   navigation chrome, and styles the components this product added:
   the Company Health gauge, monogram avatars, and the demo credential
   panel on the login screen.
   ══════════════════════════════════════════════════════════════════ */

/* ── Flatten: no inset lips, no lift-on-hover, tighter corners ── */
main .rounded-xl { border-radius: var(--radius-md); }
main .shadow-sm  { box-shadow: var(--shadow-sm); }
main .border-gray-200 { border-color: var(--border); }

.btn { border-radius: var(--radius-sm); min-height: 36px; font-weight: 600; }
.btn:active:not(:disabled) { transform: none; box-shadow: var(--clay-press); }
.btn-primary, .btn.btn-primary {
  background: var(--primary);
  box-shadow: none;
  border: 1px solid var(--primary-dark);
}
.btn-primary:hover, .btn.btn-primary:hover {
  background: var(--primary-dark);
  transform: none;
  box-shadow: none;
}
.btn-secondary, .btn.btn-secondary {
  border-radius: var(--radius-sm);
  box-shadow: none;
  border-color: var(--border-strong);
  background: var(--surface);
}
.btn-secondary:hover, .btn.btn-secondary:hover { transform: none; background: var(--canvas); }

.input { border-radius: var(--radius-sm); min-height: 38px; border-color: var(--border-strong); }
.input:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); border-color: var(--primary); }

.kanban-card { box-shadow: var(--shadow-sm); border-radius: var(--radius-sm); }
.kanban-card:hover:not(.editing) { transform: none; box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.kanban-col { border-radius: var(--radius-md); background: var(--canvas); }
.member-col { border-radius: var(--radius-md); background: var(--surface); box-shadow: none; border: 1px solid var(--border); }
.cmd-todo-item:not(.done):hover { transform: none; box-shadow: none; background: var(--primary-light); }
.agenda-card, .modal-card { border-radius: var(--radius-md); }
.modal-card { box-shadow: var(--shadow-lg); }
.view-toggle { border-radius: var(--radius-sm); background: #EEF2F7; padding: 3px; }
.view-toggle-btn { border-radius: var(--radius-sm); }
.view-toggle-btn.active { color: var(--primary); background: var(--surface); box-shadow: var(--shadow-sm); }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* ── Dark sidebar ── */
.app-sidebar {
  background: var(--brand-900);
  border-right: 1px solid var(--brand-800);
  color: var(--on-dark);
}
.app-sidebar .border-gray-100 { border-color: rgba(255, 255, 255, 0.08); }
.app-sidebar .text-gray-900 { color: #FFFFFF; }
.app-sidebar .text-gray-400 { color: var(--on-dark-muted); }

.nav-label {
  color: var(--on-dark-muted);
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 14px 12px 6px;
}
.nav-item {
  color: var(--on-dark-muted);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  padding: 8px 12px;
  min-height: 36px;
  font-weight: 500;
}
.nav-item:active { transform: none; }
.nav-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--on-dark); }
.nav-item.active {
  background: rgba(37, 99, 235, 0.16);
  border-left-color: var(--primary);
  color: #FFFFFF;
  box-shadow: none;
  font-weight: 600;
}
.nav-item.active .nav-icon { color: #60A5FA; }

.me-badge {
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.me-badge-name { color: #FFFFFF; }
.me-badge-role { color: var(--on-dark-muted); }
.me-badge button { color: var(--on-dark-muted); }
.me-badge button:hover { color: #FFFFFF; }
.notif-bell { color: var(--on-dark-muted); }
.notif-bell:hover { color: #FFFFFF; }

/* ── Monogram avatars (initials, not emoji) ── */
.avatar-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mono-bg, var(--primary));
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  flex-shrink: 0;
  font-size: 0.72em;
}
.me-badge-avatar, .streak-member-avatar, .cmd-member-avatar {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Company Health Index ── */
.health-hero {
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 92% 8%, rgba(37, 99, 235, 0.28) 0%, transparent 45%),
    var(--brand-900);
  border: 1px solid var(--brand-800);
  box-shadow: none;
  color: var(--on-dark);
}
.health-hero-name { color: #FFFFFF; font-weight: 700; }
.health-hero-sub { color: var(--on-dark-muted); font-size: 0.78rem; }

.health-gauge { position: relative; display: inline-flex; flex-shrink: 0; }
.health-gauge svg { transform: rotate(-90deg); display: block; }
.health-gauge-track { stroke: rgba(255, 255, 255, 0.12); }
.health-gauge-fill {
  stroke: var(--primary);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.health-gauge-fill.is-thriving { stroke: #38BDF8; }
.health-gauge-fill.is-steady   { stroke: var(--primary); }
.health-gauge-fill.is-strained { stroke: var(--warning); }
.health-gauge-fill.is-at_risk  { stroke: #F97316; }
.health-gauge-fill.is-critical { stroke: var(--danger); }
.health-gauge-fill.is-on_hold  { stroke: var(--text-subtle); }
.health-gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.health-score-value {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.health-score-max { font-size: 0.7rem; color: var(--on-dark-muted); font-weight: 600; }

.health-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.health-status-pill.is-thriving { background: rgba(56, 189, 248, 0.16); color: #7DD3FC; border-color: rgba(56, 189, 248, 0.35); }
.health-status-pill.is-steady   { background: rgba(37, 99, 235, 0.18);  color: #93C5FD; border-color: rgba(37, 99, 235, 0.4); }
.health-status-pill.is-strained { background: rgba(217, 119, 6, 0.16);  color: #FCD34D; border-color: rgba(217, 119, 6, 0.4); }
.health-status-pill.is-at_risk  { background: rgba(249, 115, 22, 0.16); color: #FDBA74; border-color: rgba(249, 115, 22, 0.4); }
.health-status-pill.is-critical { background: rgba(220, 38, 38, 0.16);  color: #FCA5A5; border-color: rgba(220, 38, 38, 0.4); }
.health-status-pill.is-on_hold  { background: rgba(148, 163, 184, 0.16); color: #CBD5E1; border-color: rgba(148, 163, 184, 0.35); }

.health-tier-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--on-dark);
}

.health-spark { display: block; width: 100%; height: 44px; }
.health-spark-line { fill: none; stroke: #60A5FA; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.health-spark-area { fill: rgba(96, 165, 250, 0.14); stroke: none; }

.health-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.health-metric {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.health-metric-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-dark-muted);
  font-weight: 600;
}
.health-metric-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.health-event {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.health-event:last-child { border-bottom: none; }
.health-event-type {
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  width: 92px;
  padding-top: 2px;
}
.health-event-date { color: var(--text-subtle); font-size: 0.7rem; }

/* ── Heatmap: blue ramp ── */
.thm-cell { width: 10px; height: 10px; border-radius: 2px; }

/* ── Tables read as financial statements ── */
table th {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}
table td { font-variant-numeric: tabular-nums; }

/* ── Chat bubbles ── */
.assistant-user { background: var(--primary); border-bottom-right-radius: 4px; }
.assistant-ai {
  background: var(--canvas);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — last in the file on purpose
   These rules override component defaults of equal specificity, so
   they have to come after every layer that defines them.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Shell: the sidebar becomes a scrolling top bar. */
  #app .flex.h-screen { flex-direction: column; }
  #app aside.app-sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid var(--brand-800);
    flex-shrink: 0;
  }
  /* Brand mark only — the wordmark does not survive the width. */
  #app aside > div:first-child { border-bottom: none; padding: 8px 10px; flex-shrink: 0; }
  #app aside > div:first-child img { width: 30px; height: 30px; }
  #app aside > div:first-child img + div { display: none; }

  /* Nav scrolls horizontally; the group labels go. */
  .sidebar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 4px;
    gap: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-nav .nav-label { display: none; }
  .nav-item {
    white-space: nowrap;
    padding: 6px 10px;
    gap: 6px;
    font-size: 0.8rem;
    flex-shrink: 0;
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  .nav-item.active { border-left: none; border-bottom-color: var(--primary); }

  #app aside > div:last-child { border-top: none; padding: 6px 8px; flex-shrink: 0; }
  .me-badge-info { display: none; }
  #logout-btn { padding: 6px 8px; font-size: 0.78rem; white-space: nowrap; }

  /* Content padding (the analyst tab stays full-bleed). */
  main .tab-content.p-7 { padding: 14px; }

  /* Kanban columns stack. */
  #kanban-board { grid-template-columns: 1fr; }

  /* Calendar: smaller cells, chips reduce to a dot plus the time. */
  .cal-grid { gap: 3px; }
  .cal-cell { min-height: 56px; padding: 4px; border-radius: 7px; }
  .cal-chip-text { display: none; }
  .cal-chip { padding: 2px 3px; gap: 2px; }
  .cal-more { font-size: 0.58rem; padding: 0 2px; }

  /* AI Analyst: stack, and drop the conversation list — the newest auto-loads. */
  .assistant-layout { grid-template-columns: 1fr; display: block; }
  .assistant-sidebar { display: none; }

  /* Agenda: narrower time gutter. */
  .agenda-time { width: 42px; font-size: 0.74rem; }
  .agenda-now-line span { width: 42px; }

  /* Company Health: gauge above the copy rather than beside it. */
  .health-hero > div { flex-direction: column; align-items: flex-start; }
  .health-grid { grid-template-columns: 1fr; }

  /* Wide tables scroll inside their own container, never the page. */
  .list-view-wrap { overflow-x: auto; }

  .health-metric-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   SIGN IN
   One coherent layer. Three earlier ones fought over this screen —
   a dark-glass card, a solid-blue claymorphism card, and a corporate
   override — which left white buttons designed for the blue card
   floating on the dark one. All three are gone.

   Layout: a landscape two-panel card. The left rail carries identity
   and the demo notice; the right panel carries whichever step is
   active. Below 820px the rail moves above the panel.
   ══════════════════════════════════════════════════════════════════ */

#login-screen {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  background-color: var(--brand-950);
  background-image:
    radial-gradient(circle at 18% 16%, rgba(37, 99, 235, 0.22) 0%, transparent 46%),
    radial-gradient(circle at 84% 82%, rgba(14, 165, 233, 0.15) 0%, transparent 44%),
    radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px;
}

.login-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 292px 1fr;
  width: min(800px, 100%);
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

/* ── Left rail ── */
.login-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background-color: var(--brand-950);
  background-image:
    linear-gradient(185deg,
      rgba(6, 43, 84, 0.55) 0%,
      rgba(6, 43, 84, 0.86) 48%,
      rgba(6, 43, 84, 0.96) 100%),
    url('https://images.unsplash.com/photo-1524069290683-0457abfe42c3?auto=format&fit=crop&w=900&q=70');
  background-size: cover, cover;
  background-position: center, center;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.login-rail-credit {
  margin-top: 10px;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.32);
  letter-spacing: 0.02em;
}
.login-rail-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.login-rail-credit a:hover { color: rgba(255, 255, 255, 0.6); }
.login-brand { display: flex; align-items: center; gap: 11px; }
.login-brand img { width: 34px; height: 34px; border-radius: 9px; }
.login-brand-title {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.login-brand-sub { color: var(--on-dark-2); font-size: 0.78rem; line-height: 1.35; }

.login-rail-lede {
  margin-top: 20px;
  color: #FFFFFF;
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.5;
}

/* What the product covers — three lines, enough to balance the rail
   against the directory opposite without inventing filler. */
.login-rail-points {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.login-rail-points li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--on-dark-2);
  font-size: 0.82rem;
  line-height: 1.45;
}
.login-rail-points li::before {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.login-rail-points b { color: #FFFFFF; font-weight: 600; }

.login-rail-note {
  margin-top: auto;
  padding-top: 20px;
  color: var(--on-dark-2);
  font-size: 0.78rem;
  line-height: 1.55;
}
/* Block, not inline: as an inline badge it broke the sentence across
   two ragged lines instead of sitting above it. */
.login-rail-badge {
  display: block;
  width: fit-content;
  margin-bottom: 7px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.38);
  color: var(--accent-warm);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ── Right panel ── */
.login-panel { padding: 28px 26px; display: flex; flex-direction: column; }
.login-panel-title { color: #FFFFFF; font-weight: 600; font-size: 1.02rem; }
.login-panel-sub { color: var(--on-dark-2); font-size: 0.82rem; margin-top: 4px; line-height: 1.5; }

/* ── The directory: one row per executive, PIN included ──
   This replaces an avatar grid that listed the same six people a
   second time directly above the credential panel. One list, one
   click: it fills the PIN and signs in. */
.login-directory {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 16px;
}
.login-directory .loading {
  color: var(--on-dark-muted);
  text-align: center;
  padding: 22px 0;
  font-size: 0.82rem;
}
.login-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--on-dark);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.login-row:hover {
  background: rgba(37, 99, 235, 0.18);
  border-color: var(--primary);
}
.login-row-mono {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: #FFFFFF;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.login-row:hover .login-row-mono {
  background: rgba(255, 255, 255, 0.16);
}
.login-row-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.3;
}
.login-row-name { color: #FFFFFF; font-size: 0.89rem; font-weight: 600; }
.login-row-title { color: var(--on-dark-2); font-size: 0.78rem; }
.login-row-pin {
  margin-left: auto;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--accent-warm);
}

.login-register-link {
  margin-top: 14px;
  padding: 9px;
  width: 100%;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  color: var(--on-dark-2);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.login-register-link:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.4); }

/* ── PIN step ── */
.pin-back-btn {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--on-dark-muted);
  font-size: 0.76rem;
  cursor: pointer;
  padding: 0 0 14px;
}
.pin-back-btn:hover { color: #FFFFFF; }
.pin-member-head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.pin-member-avatar {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.pin-member-name { color: #FFFFFF; font-weight: 600; font-size: 0.95rem; }
.pin-member-title { color: var(--on-dark-muted); font-size: 0.74rem; }

.pin-dots { display: flex; justify-content: center; gap: 11px; margin-bottom: 6px; }
.pin-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.pin-dots span.filled {
  background: var(--primary);
  border-color: var(--primary);
  transform: scale(1.12);
}
.pin-dots.shake { animation: pin-shake 0.4s; }
@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}
.pin-error {
  min-height: 17px;
  text-align: center;
  color: #FCA5A5;
  font-size: 0.75rem;
  margin-bottom: 12px;
}
.pin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 246px;
  margin: 0 auto;
}
.pin-btn {
  height: 50px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.pin-btn:hover { background: rgba(37, 99, 235, 0.26); border-color: var(--primary); }
.pin-btn:active { background: var(--primary); }
.pin-fn { font-size: 0.9rem; color: var(--on-dark-muted); }

/* ── Register + pending steps ── */
.login-form { display: flex; flex-direction: column; }
.login-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--on-dark-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 12px 0 5px;
}
.login-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.login-input::placeholder { color: rgba(255, 255, 255, 0.32); }
.login-input:focus { border-color: var(--primary); background: rgba(37, 99, 235, 0.12); }
.initials-row { display: flex; gap: 10px; align-items: center; }
.initials-input { width: 72px; text-align: center; letter-spacing: 0.14em; font-weight: 700; flex-shrink: 0; }
.login-error {
  color: #FCA5A5;
  font-size: 0.76rem;
  margin-top: 10px;
  min-height: 16px;
}
.login-form .btn-primary {
  width: 100%;
  margin-top: 16px;
  background: var(--primary);
  border: 1px solid var(--primary-dark);
  color: #FFFFFF;
  font-weight: 600;
}
.login-form .btn-primary:hover { background: var(--primary-dark); }

.pending-icon { font-size: 2.2rem; text-align: center; margin: 6px 0 8px; }
.pending-title { text-align: center; font-weight: 700; font-size: 1rem; color: #FFFFFF; }
.pending-sub {
  text-align: center;
  font-size: 0.8rem;
  color: var(--on-dark-muted);
  margin-top: 6px;
  line-height: 1.55;
}
.login-submit { margin-top: 18px; }

@media (max-width: 820px) {
  #login-screen { padding: 14px; align-items: flex-start; }
  .login-card { grid-template-columns: 1fr; width: 100%; max-width: 460px; margin: 18px auto; }
  .login-rail {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 18px 20px 16px;
  }
  /* On a phone the rail is a header, not a pitch: the product copy would
     push the sign-in list a full screen down. Brand and the demo notice
     carry everything a visitor needs before signing in. */
  .login-rail-lede,
  .login-rail-points { display: none; }
  .login-rail-note { margin-top: 14px; padding-top: 0; }
  .login-panel { padding: 20px; }
}

/* ══════════════════════════════════════════════════════════════════
   HOME — bright, chunky, written for children
   Structure follows a reference dashboard: KPI chips, an area chart
   with an encouraging callout, a donut with a legend, a consistency
   dot grid, per-person bars, and a cheer banner.
   ══════════════════════════════════════════════════════════════════ */

.card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
}
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.card-title { font-family: 'Fredoka', sans-serif; font-size: 1.02rem; font-weight: 600; color: var(--text); }
.card-hint  { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.card-bignum { font-family: 'Fredoka', sans-serif; font-size: 2rem; font-weight: 600; color: var(--primary); line-height: 1; }
.card-link { font-size: 0.85rem; font-weight: 700; color: var(--primary); white-space: nowrap; }
.card-link:hover { text-decoration: underline; }
.empty-line { font-size: 0.85rem; color: var(--text-muted); padding: 18px 0; text-align: center; }

/* ── Greeting ── */
.home-greeting {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.home-hello { font-size: 0.95rem; color: var(--text-muted); }
.home-name  { font-family: 'Fredoka', sans-serif; font-size: 1.9rem; font-weight: 600; color: var(--text); line-height: 1.15; }
.home-sub   { font-size: 0.9rem; color: var(--text-muted); margin-top: 2px; }
.home-datepill {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── KPI strip ── */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.kpi {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 15px 16px;
  box-shadow: var(--shadow-sm);
}
.kpi-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px;
}
.kpi-icon svg { width: 21px; height: 21px; }
.kpi-body { min-width: 0; }
.kpi-label { font-size: 0.76rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.kpi-value { font-family: 'Fredoka', sans-serif; font-size: 1.6rem; font-weight: 600; color: var(--text); line-height: 1.15; }
.kpi-of { font-size: 0.95rem; color: var(--text-subtle); font-weight: 500; }
.kpi-note { font-size: 0.76rem; color: var(--text-muted); }
.kpi.is-blue   .kpi-icon { background: #E8F2FF; color: #007AFF; }
.kpi.is-green  .kpi-icon { background: #E4F8EA; color: #26A344; }
.kpi.is-orange .kpi-icon { background: #FFF1DE; color: #E07B00; }
.kpi.is-pink   .kpi-icon { background: #FFE6EB; color: #E01E43; }
.kpi.is-purple .kpi-icon { background: #F3E8FC; color: #8B36BC; }

/* ── Rows ── */
.home-row { display: grid; gap: 16px; }
.home-row-2 { grid-template-columns: 1.55fr 1fr; }

/* ── Area chart ── */
.area-chart { width: 100%; height: auto; display: block; }
.area-grid { stroke: var(--border); stroke-width: 1.5; }
.area-axis { font-size: 10px; fill: var(--text-subtle); font-weight: 700; }
.area-fill { fill: url(#areaFill); }
.area-line { fill: none; stroke: var(--primary); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.area-dot  { fill: #FFFFFF; stroke: var(--primary); stroke-width: 3; }
.area-foot { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-subtle); font-weight: 700; margin-top: 4px; }

.callout {
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px; padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem; line-height: 1.45;
}
.callout b { font-weight: 800; }
.callout-icon { flex-shrink: 0; display: inline-flex; }
.callout-icon svg { width: 17px; height: 17px; }
.callout.is-good  { background: var(--success-light); color: #1B7A34; }
.callout.is-watch { background: var(--warning-light); color: #A85B00; }

/* ── Donut ── */
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.donut { position: relative; flex-shrink: 0; }
.donut-track { stroke: var(--primary-light); }
.donut-fill  { stroke: var(--joy-green); transition: stroke-dashoffset 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-pct { font-family: 'Fredoka', sans-serif; font-size: 1.7rem; font-weight: 600; color: var(--text); line-height: 1; }
.donut-cap { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; }
.donut-legend { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.donut-legend li { display: flex; align-items: center; gap: 9px; font-size: 0.86rem; color: var(--text-muted); font-weight: 600; }
.donut-legend b { margin-left: auto; padding-left: 14px; color: var(--text); font-size: 1rem; }
.donut-legend .dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.dot.is-green { background: var(--joy-green); }
.dot.is-grey  { background: var(--primary-light); border: 2px solid var(--border-strong); }

/* ── Consistency dots (replaces the heatmap) ── */
.cgrid { display: inline-flex; flex-direction: column; gap: 7px; }
.cgrid-head, .cgrid-row { display: grid; grid-template-columns: repeat(7, 26px); gap: 7px; }
.cgrid-head span { text-align: center; font-size: 0.72rem; font-weight: 800; color: var(--text-subtle); }
.cdot { width: 26px; height: 26px; border-radius: 50%; display: block; }
.cdot.is-none { background: transparent; }
.cdot.is-off  { background: repeating-linear-gradient(45deg, var(--border) 0 3px, var(--surface) 3px 6px); }
.cdot.is-l0 { background: #EDF3FB; }
.cdot.is-l1 { background: #BBDBFF; }
.cdot.is-l2 { background: #7FBBFF; }
.cdot.is-l3 { background: #3E9BFF; }
.cdot.is-l4 { background: #007AFF; }
.cgrid-legend { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 0.76rem; color: var(--text-muted); font-weight: 700; }
.cgrid-legend .cdot { width: 15px; height: 15px; }

/* ── Per-person bars ── */
.pbars { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.pbars li { display: flex; align-items: center; gap: 10px; }
.pbar-mono {
  flex-shrink: 0; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-size: 0.7rem; font-weight: 800;
}
.pbar-name { width: 68px; flex-shrink: 0; font-size: 0.85rem; font-weight: 700; color: var(--text); }
.pbar-track { flex: 1; height: 13px; border-radius: 999px; background: var(--primary-light); overflow: hidden; }
.pbar-fill { display: block; height: 100%; border-radius: 999px; transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.pbar-n { width: 22px; text-align: right; font-size: 0.95rem; color: var(--text); }

/* ── Cheer banner ── */
.cheer {
  background: linear-gradient(135deg, var(--primary) 0%, #4AA3FF 100%);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  color: #fff;
  box-shadow: var(--shadow-md);
}
.cheer-head { display: flex; align-items: center; gap: 13px; }
.cheer-badge {
  flex-shrink: 0; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px; background: rgba(255, 255, 255, 0.22); color: #fff;
}
.cheer-badge svg { width: 23px; height: 23px; }
.cheer-title { font-family: 'Fredoka', sans-serif; font-size: 1.15rem; font-weight: 600; }
.cheer-sub { font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); }
.cheer-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 16px; }
.cheer-tip {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm); padding: 11px 13px;
}
.cheer-tip-ic { flex-shrink: 0; color: #fff; opacity: 0.9; }
.cheer-tip-ic svg { width: 18px; height: 18px; }
.cheer-tip b { display: block; font-size: 0.86rem; font-weight: 800; }
.cheer-tip span { font-size: 0.78rem; color: rgba(255, 255, 255, 0.85); line-height: 1.4; }

@media (max-width: 1050px) {
  .home-row-2 { grid-template-columns: 1fr; }
}

/* ── Monogram chips ────────────────────────────────────────────────
   Bright iOS colours are too light to carry white text — measured, iOS
   blue gives 4.02:1 and green only 2.22:1. So chips follow the iOS
   pattern instead: a pale tint of the person's colour, with a darkened
   version of that same colour as the letters. Cheerful and legible.
   Bars keep the colour at full strength, since no text sits on them. */
.pbar-mono, .login-row-mono, .member-col-avatar,
.me-badge-avatar, .streak-member-avatar, .thm-label, .member-dot {
  background: var(--primary-light);
  color: var(--primary-dark);
}
.pbar-mono, .member-col-avatar, .member-dot, .streak-member-avatar {
  background: color-mix(in srgb, var(--member-color, #007AFF) 16%, #FFFFFF);
  color: color-mix(in srgb, var(--member-color, #007AFF) 72%, #06305C);
  border: none;
}
.streak-member-avatar { filter: none; opacity: 0.45; }
.streak-member.active .streak-member-avatar {
  opacity: 1;
  background: color-mix(in srgb, var(--member-color, #007AFF) 22%, #FFFFFF);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--member-color, #007AFF) 26%, #FFFFFF);
}

/* ── Home layout tweaks ── */
/* The dot grid is naturally narrow; give it the smaller half so neither
   card is left with a wide empty margin. */
.home-row-2.is-flipped { grid-template-columns: 1fr 1.5fr; }
.cgrid-head, .cgrid-row { grid-template-columns: repeat(7, 30px); gap: 9px; }
.cdot { width: 30px; height: 30px; }
.cgrid-wrap { display: flex; justify-content: center; }
/* Centre the donut in a card that is as tall as the chart beside it. */
.donut-wrap { flex: 1; align-content: center; min-height: 220px; }
@media (max-width: 1050px) { .home-row-2.is-flipped { grid-template-columns: 1fr; } }
.badge-wait { background: var(--warning-light); color: #A85B00; }
.badge-yes  { background: var(--success-light); color: #1B7A34; }
.badge-no   { background: var(--danger-light);  color: #C22219; }

/* ══════════════════════════════════════════════════════════════════
   SIGN IN — bright
   The app is light and cheerful, so a dark sign-in read as a different
   product. White card on a soft blue field; the photograph keeps its
   own colour instead of hiding under a heavy scrim.
   ══════════════════════════════════════════════════════════════════ */

#login-screen {
  background-color: var(--canvas);
  background-image:
    radial-gradient(circle at 14% 14%, rgba(0, 122, 255, 0.18) 0%, transparent 46%),
    radial-gradient(circle at 86% 84%, rgba(90, 200, 250, 0.20) 0%, transparent 44%),
    radial-gradient(circle at 78% 12%, rgba(175, 82, 222, 0.10) 0%, transparent 38%);
  background-size: auto;
}
.login-card {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 26px 60px -24px rgba(10, 61, 117, 0.38);
}

/* Rail: the photo reads as a picture, tinted only enough to hold text */
.login-rail {
  background-color: var(--brand-900);
  background-image:
    linear-gradient(190deg, rgba(6, 43, 84, 0.30) 0%, rgba(6, 43, 84, 0.72) 52%, rgba(6, 43, 84, 0.92) 100%),
    url('https://images.unsplash.com/photo-1524069290683-0457abfe42c3?auto=format&fit=crop&w=900&q=70');
  border-right: none;
}
.login-rail-lede { color: #FFFFFF; }
.login-rail-points li { color: rgba(255, 255, 255, 0.92); }
.login-rail-note { color: rgba(255, 255, 255, 0.88); }
.login-rail-credit { color: rgba(255, 255, 255, 0.55); }

/* Panel: light, with chunky tappable rows */
.login-panel-title { color: var(--text); font-family: 'Fredoka', sans-serif; font-size: 1.25rem; }
.login-panel-sub { color: var(--text-muted); }
.login-row {
  background: var(--canvas);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 13px;
}
.login-row:hover { background: var(--primary-light); border-color: var(--primary); }
.login-row-mono {
  width: 38px; height: 38px; font-size: 0.8rem;
  background: color-mix(in srgb, var(--member-color, #007AFF) 16%, #FFFFFF);
  color: color-mix(in srgb, var(--member-color, #007AFF) 72%, #06305C);
  box-shadow: none;
}
.login-row-name { color: var(--text); font-size: 0.95rem; font-weight: 800; }
.login-row-title { color: var(--text-muted); font-size: 0.8rem; }
.login-row-pin {
  font-size: 0.95rem;
  color: var(--primary-dark);
  background: var(--primary-light);
  border-radius: 999px;
  padding: 4px 11px;
}
.login-register-link { border-color: var(--border-strong); color: var(--text-muted); }
.login-register-link:hover { color: var(--primary-dark); border-color: var(--primary); background: var(--primary-light); }

/* PIN pad on a light card */
.pin-back-btn { color: var(--text-muted); }
.pin-back-btn:hover { color: var(--primary-dark); }
.pin-member-avatar {
  width: 52px; height: 52px; font-size: 1.05rem;
  background: color-mix(in srgb, var(--member-color, #007AFF) 18%, #FFFFFF);
  color: color-mix(in srgb, var(--member-color, #007AFF) 72%, #06305C);
  box-shadow: none;
}
.pin-member-name { color: var(--text); font-size: 1.05rem; font-weight: 800; }
.pin-member-title { color: var(--text-muted); font-size: 0.8rem; }
.pin-dots span { border-color: var(--border-strong); }
.pin-dots span.filled { background: var(--primary); border-color: var(--primary); }
.pin-error { color: var(--danger); font-size: 0.82rem; }
.pin-grid { max-width: 262px; gap: 10px; }
.pin-btn {
  height: 56px;
  background: var(--canvas);
  border: 2px solid var(--border);
  color: var(--text);
  font-family: 'Fredoka', sans-serif;
  font-size: 1.25rem;
}
.pin-btn:hover { background: var(--primary-light); border-color: var(--primary); }
.pin-btn:active { background: var(--primary); color: #fff; }
.pin-fn { color: var(--text-muted); font-size: 1rem; }

/* Join form */
.login-label { color: var(--text-muted); }
.login-input {
  background: var(--canvas);
  border: 2px solid var(--border);
  color: var(--text);
  font-size: 0.95rem;
  padding: 11px 13px;
}
.login-input::placeholder { color: var(--text-subtle); }
.login-input:focus { border-color: var(--primary); background: var(--surface); }
.login-error { color: var(--danger); }
.pending-title { color: var(--text); }
.pending-sub { color: var(--text-muted); }

@media (max-width: 900px) {
  /* Two across beats a single tall column of five */
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { flex-direction: column; align-items: flex-start; gap: 8px; padding: 13px; }
  .kpi-icon { width: 36px; height: 36px; }
  .kpi-value { font-size: 1.35rem; }
  .kpi-label { font-size: 0.68rem; }
  .kpi-note { font-size: 0.72rem; }

  /* The profile badge was crowding the nav out of the top bar */
  #app aside > div:last-child { margin-left: auto; }
  .me-badge { padding: 4px 6px; gap: 6px; background: rgba(255, 255, 255, 0.10); }
  .me-badge-avatar { width: 30px; height: 30px; font-size: 0.7rem; }
  .me-badge button { min-width: 26px; min-height: 26px; }
  #change-pin-btn { display: none; }

  .home-name { font-size: 1.55rem; }
  .home-greeting { gap: 10px; }
  .cheer-tips { grid-template-columns: 1fr; }
  .cgrid-head, .cgrid-row { grid-template-columns: repeat(7, 26px); gap: 7px; }
  .cdot { width: 26px; height: 26px; }
  .donut-wrap { min-height: 0; }
  .card { padding: 16px; }
}

/* Emoji render in the platform's colour set — Apple's first, which is the
   iOS look. Without this they fall back to the UI font and some code points
   (✏ U+270F, 🗑 U+1F5D1) draw as thin monochrome glyphs instead. */
.emoji, .kanban-col-icon, .pending-icon, .empty-state-icon, .btn-icon,
.cal-day-prio, .kanban-priority-sel, .kanban-edit-prio {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-variant-emoji: emoji;
}

/* ══════════════════════════════════════════════════════════════════
   PAGE HEROES
   Every inner page opens with a photograph of students rather than a
   bare heading. A blue wash over the image keeps the title readable
   whatever the photo does underneath, and each page gets its own shot
   so the app does not feel like one long form.
   ══════════════════════════════════════════════════════════════════ */

.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 132px;
  margin-bottom: 20px;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--brand-900);
  background-size: cover;
  background-position: center 38%;
  box-shadow: var(--shadow-md);
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(6, 43, 84, 0.90) 0%, rgba(6, 43, 84, 0.72) 46%, rgba(0, 122, 255, 0.38) 100%);
}
.page-hero-text { position: relative; z-index: 1; max-width: 640px; }
.page-hero-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.85rem;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.15;
}
.page-hero-sub { color: rgba(255, 255, 255, 0.92); font-size: 0.92rem; margin-top: 4px; line-height: 1.45; }

/* One photograph per page. Junior-school age, working together. */
.page-hero.is-jobs   { background-image: url('https://images.unsplash.com/photo-1509062522246-3755977927d7?auto=format&fit=crop&w=1200&q=68'); }
.page-hero.is-coach  { background-image: url('https://images.unsplash.com/photo-1543269865-cbf427effbad?auto=format&fit=crop&w=1200&q=68'); }
.page-hero.is-report { background-image: url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1200&q=68'); }
.page-hero.is-goals  { background-image: url('https://images.unsplash.com/photo-1565350897149-38dfafa81d83?auto=format&fit=crop&w=1200&q=68'); }
.page-hero.is-money  { background-image: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1200&q=68'); }
.page-hero.is-book   { background-image: url('https://images.unsplash.com/photo-1531545514256-b1400bc00f31?auto=format&fit=crop&w=1200&q=68'); }
.page-hero.is-setup  { background-image: url('https://images.unsplash.com/photo-1461280360983-bd93eaa5051b?auto=format&fit=crop&w=1200&q=68'); }
.page-hero.is-health { background-image: url('https://images.unsplash.com/photo-1569616813007-8dede61a698e?auto=format&fit=crop&w=1200&q=68'); }

/* The cheer banner earns a photo too — it is the page's send-off. */
.cheer {
  position: relative;
  overflow: hidden;
  background-color: var(--primary);
  background-image: url('https://images.unsplash.com/photo-1524069290683-0457abfe42c3?auto=format&fit=crop&w=1200&q=68');
  background-size: cover;
  background-position: center 34%;
}
.cheer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(0, 98, 204, 0.94) 0%, rgba(0, 122, 255, 0.86) 52%, rgba(90, 200, 250, 0.72) 100%);
}
.cheer-head, .cheer-tips { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .page-hero { min-height: 108px; padding: 16px; margin-bottom: 14px; }
  .page-hero-title { font-size: 1.4rem; }
  .page-hero-sub { font-size: 0.85rem; }
}

/* The hero carries its page's one action, sitting on the wash rather than
   floating over the photograph. */
.page-hero { justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-hero > .btn {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.94);
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: var(--primary-dark);
  font-weight: 800;
}
.page-hero > .btn:hover { background: #FFFFFF; color: var(--primary-dark); transform: none; }
.jobs-toolbar { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 20px; }
@media (max-width: 900px) {
  .page-hero { align-items: flex-start; flex-direction: column; }
  .jobs-toolbar { justify-content: flex-start; }
}

/* ── Faces ─────────────────────────────────────────────────────────
   Every avatar is a photograph when the person has one. The chip keeps
   its size and tint from the rules above; the image just fills it. If
   the photo fails to load, the script swaps in the initials, so the
   tinted background underneath stays meaningful either way. */
.has-face {
  position: relative;
  overflow: hidden;
  padding: 0;
}
.face-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
/* Chips that were sized by font metrics rather than a box need one now. */
.member-dot.has-face { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
.tm-comment-av.has-face { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.member-col-avatar.has-face { width: 26px; height: 26px; }
.cell-who { display: inline-flex; align-items: center; gap: 8px; }
/* The tick has to float over the photo, not be covered by it. */
.streak-member-avatar.has-face .streak-check { position: absolute; right: -2px; bottom: -2px; z-index: 2; }
.kanban-member-badge.has-face { width: 22px; height: 22px; border-radius: 50%; display: inline-block; }