/* home.css — Manager Home v2 */

/* ── Design tokens — light (scoped to home view) ── */
#view-ceo-home {
  --panel:       #FFFFFF;
  --panel-2:     #FAFBFD;
  --text:        #0E1320;
  --text-2:      #525A68;
  --muted:       #8A93A1;
  --border:      #ECEEF2;
  --border-2:    #E0E4EA;
  --hover:       rgba(14,19,32,0.045);
  --accent:      #5546E6;
  --accent-soft: #EEECFD;
  --accent-text: #4435CC;
  --shadow:      rgba(24,24,60,0.09);
  --prob-bg:     #FDECE8;
  --prob-bd:     #F6D4CC;
  --prob-tx:     #C2402B;
  --dec-bg:      #FBF3E3;
  --dec-bd:      #F0E0BF;
  --dec-tx:      #B07A0C;
  --good:        #1F9D63;
  --good-bg:     #E7F6EE;
  --good-bd:     #C7E9D6;
  --secgap:  32px;
  --cardpad: 20px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #F2F4F8;
}

/* ── Dark mode ── */
html.theme-dark #view-ceo-home {
  background: #0E1019;
  --panel:       #13161E;
  --panel-2:     #171B23;
  --text:        #F2F4F8;
  --text-2:      #AAB2BE;
  --muted:       #79818E;
  --border:      rgba(255,255,255,0.08);
  --border-2:    rgba(255,255,255,0.14);
  --hover:       rgba(255,255,255,0.055);
  --accent:      #6F60F2;
  --accent-soft: rgba(111,96,242,0.18);
  --accent-text: #B3A8FB;
  --shadow:      rgba(0,0,0,0.55);
  --prob-bg:     rgba(225,101,91,0.14);
  --prob-bd:     rgba(225,101,91,0.32);
  --prob-tx:     #F0998C;
  --dec-bg:      rgba(233,180,76,0.13);
  --dec-bd:      rgba(233,180,76,0.3);
  --dec-tx:      #EBC069;
  --good:        #34B877;
  --good-bg:     rgba(52,184,119,0.14);
  --good-bd:     rgba(52,184,119,0.32);
}

/* ── Layout ── */
#ceo-home-page { padding: 0; max-width: none; }
.hv-wrap {
  padding: clamp(22px,3vw,38px) clamp(20px,4vw,44px) 56px;
  max-width: 1280px;
  margin: 0 auto;
  color: var(--text);
}
.hv-lower { display: flex; flex-direction: column; gap: var(--secgap); }

/* ── Greeting ── */
.hv-greeting {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 16px;
  margin-bottom: var(--secgap);
}
.hv-greeting-h1 {
  margin: 0;
  font-size: clamp(1.7rem,3.2vw,2.25rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.05;
  color: var(--text);
}
.hv-week-label { margin: 9px 0 0; font-size: 0.95rem; color: var(--muted); }
.hv-date-chip {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--text-2); background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 12px; white-space: nowrap;
}

/* ── Briefing ── */
.hv-briefing {
  background: var(--accent-soft);
  border-radius: 16px; padding: var(--cardpad);
  margin-bottom: var(--secgap);
}
.hv-eyebrow {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--accent-text);
}
.hv-diamond {
  width: 7px; height: 7px; background: var(--accent);
  transform: rotate(45deg); display: inline-block; flex-shrink: 0;
}
.hv-diamond--sm { width: 6px; height: 6px; }
.hv-briefing-refresh {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--accent-text);
  opacity: 0.45;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: opacity 0.15s;
  line-height: 1;
}
.hv-briefing-refresh:hover { opacity: 1; }

.hv-briefing-body {
  margin: 0;
  font-size: clamp(1.05rem,1.7vw,1.3rem);
  font-weight: 500; line-height: 1.5; letter-spacing: -0.01em;
  color: var(--text); text-wrap: pretty;
}

/* ── Section header ── */
.hv-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.hv-section-label {
  margin: 0 0 14px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.hv-section-hdr .hv-section-label { margin: 0; }
.hv-link { font-size: 0.8rem; font-weight: 600; color: var(--accent-text); text-decoration: none; white-space: nowrap; }
.hv-link:hover { opacity: 0.75; }
.hv-inline-link { color: var(--accent-text); text-decoration: none; }
.hv-inline-link:hover { opacity: 0.75; }

/* ── Team section ── */
.hv-team-section { margin-bottom: var(--secgap); }
.hv-team-list { display: flex; flex-direction: column; gap: 11px; }

/* ── Member card ── */
.hv-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 1px 0 var(--shadow); overflow: hidden;
}

/* ── Collapsed row ── */
.hv-row {
  display: flex; align-items: center; gap: 14px;
  padding: var(--cardpad); cursor: pointer;
  transition: background 0.12s;
}
.hv-row:hover { background: var(--hover); }
.hv-rank {
  flex: none; width: 16px; text-align: center;
  font-size: 0.82rem; font-weight: 800; color: var(--muted); letter-spacing: -0.02em;
}
.hv-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text);
  font-size: 0.85rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.hv-name-block { flex: 1; min-width: 0; }
.hv-name-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hv-name { font-size: 0.96rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; color: var(--text); }
.hv-dept-pill {
  font-size: 0.74rem; font-weight: 600; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 7px;
}
.hv-snippet {
  font-size: 0.85rem; line-height: 1.45; color: var(--text-2);
  margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hv-time { font-size: 0.74rem; color: var(--muted); white-space: nowrap; width: 62px; text-align: right; }

/* ── Chevron ── */
.hv-chevron {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.hv-chevron--open  { background: var(--accent-soft); color: var(--accent-text); }
.hv-chevron--closed { background: var(--panel-2); border: 1px solid var(--border); color: var(--text-2); }
.hv-chevron-icon { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; display: block; }
.hv-chevron-icon--down  { transform: translateY(-2px) rotate(45deg); }
.hv-chevron-icon--right { transform: translateX(-2px) rotate(-45deg); }

/* ── Expanded panel ── */
.hv-expanded {
  border-top: 1px solid var(--border); padding: var(--cardpad);
  display: flex; flex-direction: column; gap: 20px;
}
.hv-submitted-meta { font-size: 0.74rem; color: var(--muted); margin-top: -6px; }

/* ── AI Insight ── */
.hv-insight { background: var(--accent-soft); border-radius: 11px; padding: 14px 16px; }
.hv-insight-eyebrow {
  display: flex; align-items: center; gap: 7px; margin-bottom: 7px;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-text);
}
.hv-insight-body { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--text); }

/* ── 3Ps ── */
.hv-threeps { display: flex; flex-direction: column; gap: 20px; }
.hv-3p-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 11px;
}
.hv-3p-label--prob { color: var(--prob-tx); }
.hv-progress-list, .hv-problems-list { display: flex; flex-direction: column; gap: 9px; }
.hv-plans-list { display: flex; flex-direction: column; gap: 8px; }

/* ── Progress / Problem lines ── */
.hv-line-row { display: flex; gap: 11px; align-items: flex-start; }
.hv-prog-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--good); margin-top: 7px; }
.hv-prob-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--prob-tx); margin-top: 7px; }
.hv-line-text { flex: 1; min-width: 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-2); }
.hv-problem-line { padding: 11px 13px; background: var(--prob-bg); border: 1px solid var(--prob-bd); border-radius: 10px; }
.hv-problem-line .hv-line-text { color: var(--text); }

/* ── Plan line ── */
.hv-plan-line {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.hv-plan-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.hv-plan-text { flex: 1; min-width: 0; font-size: 0.88rem; color: var(--text); }
.hv-status-chip {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 4px 10px; border-radius: 20px; border: 1px solid;
}
.hv-chip--done         { color: var(--good);    background: var(--good-bg); border-color: var(--good-bd); }
.hv-chip--wip          { color: #4435CC;         background: #EEECFD;        border-color: rgba(85,70,230,0.28); }
.hv-chip--risk         { color: #C2570A;         background: #FEF0E4;        border-color: #F6CEAD; }
.hv-chip--not-started  { color: var(--muted);    background: var(--panel-2); border-color: var(--border-2); }
.hv-chip--not-done     { color: #B03030;         background: #FDECEC;        border-color: #F6CCCC; }
html.theme-dark .hv-chip--done         { color: var(--good);   background: var(--good-bg); border-color: var(--good-bd); }
html.theme-dark .hv-chip--wip          { color: #B3A8FB;       background: rgba(111,96,242,0.18); border-color: rgba(111,96,242,0.38); }
html.theme-dark .hv-chip--risk         { color: #F2A56B;       background: rgba(220,100,40,0.15); border-color: rgba(220,100,40,0.32); }
html.theme-dark .hv-chip--not-started  { color: var(--muted);  background: rgba(255,255,255,0.04); border-color: var(--border-2); }
html.theme-dark .hv-chip--not-done     { color: #F08888;       background: rgba(220,80,80,0.13); border-color: rgba(220,80,80,0.28); }

/* ── Comment button ── */
.hv-comment-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text-2); font: inherit;
  font-size: 0.68rem; font-weight: 600;
  padding: 3px 9px; border-radius: 7px; cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.hv-comment-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.hv-comment-count { font-weight: 800; color: var(--accent-text); }
.hv-plan-line .hv-comment-btn { background: var(--panel); }
.hv-problem-line .hv-comment-btn { background: var(--panel); border-color: var(--prob-bd); }

/* ── Line threads & forms ── */
.hv-line-thread { margin: 9px 0 0 17px; display: flex; flex-direction: column; gap: 10px; }
.hv-line-thread--plan { border-top: 1px solid var(--border); padding: 11px 12px; margin: 0; }
.hv-line-comment-form { margin: 9px 0 0 17px; display: flex; gap: 8px; }
.hv-plan-line .hv-line-comment-form { margin: 0; padding: 10px 12px; border-top: 1px solid var(--border); }
.hv-not-reported {
  font-size: 0.86rem; color: var(--muted); font-style: italic;
  padding: 12px 14px; background: var(--panel-2);
  border: 1px dashed var(--border-2); border-radius: 10px;
}

/* ── Stat strip ── */
.hv-stat-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.hv-stat-card {
  flex: 1; min-width: 120px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px;
}
.hv-stat-label { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.hv-stat-value { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 3px; color: var(--text); }

/* ── Notes ── */
.hv-notes-section { border-top: 1px solid var(--border); padding-top: 16px; }
.hv-notes-header { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.hv-notes-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.hv-notes-live { font-size: 0.66rem; color: var(--muted); }
.hv-notes-text { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--text-2); }
.hv-notes-empty { margin: 0; font-size: 0.86rem; font-style: italic; color: var(--muted); }

/* ── Read receipt ── */
.hv-read-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-2); background: var(--panel-2);
  color: var(--text); font: inherit;
  font-size: 0.84rem; font-weight: 600;
  padding: 9px 16px; border-radius: 9px; cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.hv-read-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.hv-read-btn--done {
  border-color: var(--good-bd); background: var(--good-bg);
  color: var(--good); font-weight: 700;
}
.hv-read-btn--done:hover { border-color: var(--good-bd); color: var(--good); }

/* ── Member comments ── */
.hv-member-comments { border-top: 1px solid var(--border); padding-top: 16px; }
.hv-comments-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.hv-comments-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }

/* ── Comment bubbles ── */
.hv-comment { display: flex; gap: 10px; }
.hv-comment--sm { gap: 9px; }
.hv-comment-avatar {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 0.68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.hv-comment--sm .hv-comment-avatar { width: 24px; height: 24px; font-size: 0.64rem; }
.hv-comment-body { flex: 1; min-width: 0; }
.hv-comment-meta { display: flex; align-items: baseline; gap: 8px; }
.hv-comment-by { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.hv-comment--sm .hv-comment-by { font-size: 0.8rem; }
.hv-comment-when { font-size: 0.7rem; color: var(--muted); }
.hv-comment--sm .hv-comment-when { font-size: 0.68rem; }
.hv-comment-text { font-size: 0.86rem; line-height: 1.5; color: var(--text-2); margin-top: 2px; }

/* ── Comment form ── */
.hv-comment-form, .hv-line-comment-form { display: flex; gap: 9px; }
.hv-comment-input {
  flex: 1; min-width: 0; height: 38px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); padding: 0 13px;
  font: inherit; font-size: 0.86rem; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hv-comment-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hv-comment-input::placeholder { color: var(--muted); }
.hv-comment-submit {
  flex: none; border: none; background: var(--accent); color: #fff;
  font: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 0 16px; border-radius: 9px; cursor: pointer;
  transition: opacity 0.12s;
}
.hv-comment-submit:hover { opacity: 0.9; }
.hv-line-comment-form .hv-comment-input { height: 34px; font-size: 0.84rem; border-radius: 8px; }
.hv-line-comment-form .hv-comment-submit { padding: 0 14px; border-radius: 8px; font-size: 0.78rem; }

/* ── Status legend ── */
.hv-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
  align-items: center;
}
.hv-legend-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hv-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--text-2); }

/* ── Open Problems ── */
.hv-signals-list { display: flex; flex-direction: column; gap: 11px; }
.hv-signal-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 13px; padding: var(--cardpad);
  display: flex; gap: 14px; align-items: flex-start;
  box-shadow: 0 1px 0 var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.hv-signal-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px var(--shadow); border-color: var(--border-2); }
.hv-signal-avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text);
  font-size: 0.8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.hv-signal-body { flex: 1; min-width: 0; }
.hv-signal-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; flex-wrap: wrap; }
.hv-tag {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 5px; border: 1px solid;
}
.hv-tag--prob {
  color: var(--prob-tx); background: var(--prob-bg); border-color: var(--prob-bd);
  max-width: 52px; white-space: normal; text-align: center; line-height: 1.3;
}
.hv-tag--dec  { color: var(--dec-tx);  background: var(--dec-bg);  border-color: var(--dec-bd); }
.hv-signal-owner { font-size: 0.78rem; font-weight: 600; color: var(--text-2); }
.hv-signal-title  { font-size: 0.94rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; color: var(--text); }
.hv-signal-snippet { font-size: 0.85rem; line-height: 1.5; color: var(--text-2); }

/* ── Decision card ── */
.hv-decision-card {
  background: var(--panel);
  border: 1px solid var(--border); border-left: 3px solid var(--dec-tx);
  border-radius: 13px; padding: var(--cardpad);
  box-shadow: 0 1px 0 var(--shadow);
}
.hv-decision-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.hv-decision-name { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.hv-decision-sub  { font-size: 0.72rem; color: var(--muted); }
.hv-decision-body { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--text-2); }
.hv-decision-actions { display: flex; gap: 10px; margin-top: 14px; }
.hv-btn-primary {
  border: none; background: var(--accent); color: #fff;
  font: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
  transition: opacity 0.12s;
}
.hv-btn-primary:hover { opacity: 0.9; }
.hv-btn-ghost {
  border: 1px solid var(--border-2); background: transparent; color: var(--text-2);
  font: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
  transition: color 0.12s;
}
.hv-btn-ghost:hover { color: var(--text); }

/* ── Commitments ── */
.hv-commitments-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: var(--cardpad);
  box-shadow: 0 1px 0 var(--shadow);
}
.hv-commitments-hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.hv-commitments-hdr .hv-section-label { margin: 0; }
.hv-commitments-list { display: flex; flex-direction: column; gap: 13px; }
.hv-commitment-item { display: flex; gap: 11px; align-items: flex-start; }
.hv-commitment-num {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text);
  font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.hv-commitment-content { flex: 1; min-width: 0; }
.hv-commitment-text { font-size: 0.87rem; line-height: 1.45; color: var(--text); }
.hv-commitment-due  { font-size: 0.72rem; font-weight: 600; color: var(--muted); margin-top: 4px; }

/* ── Misc ── */
.hv-empty { font-size: 0.9rem; color: var(--muted); }

@media (max-width: 640px) {
  .hv-time { width: auto; }
}

/* ── Onboarding checklist ────────────────────────────────────────────────── */
.hv-onboard-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hv-onboard-item { border-radius: 10px; overflow: hidden; }
.hv-onboard-link { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; color: inherit; text-decoration: none; border-radius: 10px; border: 1px solid var(--hv-border-2); background: var(--panel); transition: background 0.15s; }
.hv-onboard-link:hover { background: var(--hv-hover); }
.hv-onboard-check { font-size: 1.1rem; color: var(--hv-text-3); margin-top: 1px; flex-shrink: 0; }
.hv-onboard-title { display: block; font-size: 0.9rem; font-weight: 600; color: var(--hv-text-1); }
.hv-onboard-sub { display: block; font-size: 0.8rem; color: var(--hv-text-3); margin-top: 2px; }