/* ============================================================
   MarketingOS — View-specific styles
   ============================================================ */

/* ================= DASHBOARD ================= */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}

.kpi {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kpi .kpi-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -1px;
}

.kpi .kpi-label { font-size: 13.5px; font-weight: 700; margin-top: 2px; }
.kpi .kpi-sub { font-size: 12.5px; color: var(--ink-soft); }

.kpi .kpi-icon {
  position: absolute;
  top: 16px; right: 16px;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sage-light);
}
.kpi .kpi-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--sage-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kpi .kpi-icon.rose { background: var(--rose-light); }
.kpi .kpi-icon.rose svg { stroke: var(--rose-deep); }

.kpi .kpi-trend { font-size: 12px; font-weight: 600; margin-top: 8px; }
.kpi .kpi-trend.up { color: var(--sage-ink); }
.kpi .kpi-trend.attn { color: var(--rose-deep); }

/* Dashboard grid */
.dash-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  gap: 16px;
}
.dash-grid > * { min-width: 0; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

/* AI Executive Brief */
.brief {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cream-card) 55%, var(--rose-light) 160%);
}
.brief .brief-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17.5px;
  line-height: 1.6;
  margin: 10px 0 18px;
  max-width: 60ch;
}
.brief .brief-text strong { font-weight: 600; color: var(--sage-ink); }
.brief .brief-text em { color: var(--rose-deep); font-style: normal; font-weight: 600; }
.brief .brief-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Focus list */
.focus-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.focus-item:last-of-type { border-bottom: 0; }
.focus-item .chk {
  width: 19px; height: 19px;
  border: 1.6px solid var(--ink-faint);
  border-radius: 6px;
  background: none;
  flex-shrink: 0;
  display: grid; place-items: center;
  padding: 0;
  transition: background .15s ease, border-color .15s ease;
}
.focus-item .chk svg { width: 11px; height: 11px; fill: none; stroke: var(--gunmetal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .15s ease; }
.focus-item.done .chk { background: var(--sage); border-color: var(--sage); }
.focus-item.done .chk svg { opacity: 1; }
.focus-item .focus-label { flex: 1; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-item.done .focus-label { text-decoration: line-through; color: var(--ink-faint); }

/* Capacity list */
.cap-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.cap-row .cap-name { width: 92px; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-row .bar { flex: 1; }
.cap-row .cap-val { width: 42px; text-align: right; font-size: 13px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Pulse ring */
.ring-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ring-wrap { position: relative; width: 128px; height: 128px; margin: 8px 0 4px; }
.ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-wrap .ring-bg { fill: none; stroke: var(--line-soft); stroke-width: 10; }
.ring-wrap .ring-fg { fill: none; stroke: var(--sage); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2,.7,.3,1); }
.ring-wrap .ring-fg.rose { stroke: var(--rose); }
.ring-wrap .ring-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  white-space: nowrap;
}
.ring-wrap .ring-num small { font-size: 15px; }

/* Week strip */
.week-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.week-day { padding: 4px 14px 8px; border-left: 1px solid var(--line-soft); min-width: 0; }
.week-day:first-child { border-left: 0; padding-left: 2px; }
.week-day .wd-name { font-size: 11px; font-weight: 700; letter-spacing: .8px; color: var(--ink-faint); text-transform: uppercase; }
.week-day .wd-num { font-family: var(--font-display); font-size: 24px; font-weight: 500; margin: 2px 0 8px; }
.week-day.today .wd-num { color: var(--sage-ink); }
.week-day.today { position: relative; }
.week-day.today::before { content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 3px; border-radius: 3px; background: var(--sage); }
.week-evt { display: flex; gap: 7px; align-items: baseline; font-size: 12.5px; margin-bottom: 6px; }
.week-evt .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transform: translateY(-1px); }
.week-evt .evt-label { font-weight: 600; line-height: 1.35; }
.week-evt .evt-time { display: block; color: var(--ink-faint); font-size: 11.5px; font-weight: 500; }

/* Quick add */
.quick-add { display: grid; gap: 8px; }
.quick-btn {
  display: flex; align-items: center; gap: 11px;
  background: none; border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  font-size: 13.5px; font-weight: 600;
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.quick-btn:hover { border-color: var(--sage); background: var(--sage-mist); }
.quick-btn svg { width: 17px; height: 17px; fill: none; stroke: var(--sage-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.quick-btn.rose svg { stroke: var(--rose-deep); }

/* Pulse list */
.pulse-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.pulse-row .pulse-name { font-weight: 600; flex: 1; }
.pulse-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.pulse-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.pulse-status.busy::before { background: var(--warn); }
.pulse-status.over::before { background: var(--rose); }

/* ================= TASKS ================= */

.task-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }

.task-row {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background .12s ease;
}
.task-row:hover { background: var(--sage-mist); }
.task-row:last-child { border-bottom: 0; }
.task-row .task-main { flex: 1; min-width: 0; }
.task-row .task-title { font-weight: 600; }
.task-row.done .task-title { text-decoration: line-through; color: var(--ink-faint); }
.task-row .task-meta { display: flex; gap: 10px; align-items: center; margin-top: 3px; font-size: 12.5px; color: var(--ink-soft); flex-wrap: wrap; }
.task-row .due { font-weight: 600; }
.task-row .due.overdue { color: var(--rose-deep); }
.task-row .due.today { color: var(--sage-ink); }

/* ================= PROJECTS ================= */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.toolbar .spacer { flex: 1; }

.seg {
  display: inline-flex;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px;
}
.seg button {
  border: 0; background: none;
  border-radius: var(--r-pill);
  padding: 6px 16px;
  font-size: 13px; font-weight: 600;
  color: var(--ink-soft);
  transition: background .15s ease, color .15s ease;
}
.seg button.active { background: var(--gunmetal); color: var(--cream); }

.board {
  display: grid;
  grid-template-columns: repeat(5, minmax(226px, 1fr));
  gap: 13px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.board-col { min-width: 0; }
.board-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 12px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .4px;
}
.board-col-head .col-dot { width: 8px; height: 8px; border-radius: 50%; }
.board-col-head .col-count {
  margin-left: auto;
  font-size: 11.5px;
  background: var(--line-soft);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  color: var(--ink-soft);
}

.board-cards { display: grid; gap: 10px; }

.proj-card {
  background: var(--cream-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  cursor: pointer;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.proj-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--sage-light); }
.proj-card .proj-title { font-weight: 600; font-size: 13.5px; line-height: 1.4; margin: 8px 0 10px; }
.proj-card .proj-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.proj-card .proj-due { font-size: 11.5px; font-weight: 600; color: var(--ink-faint); }
.proj-card .proj-due.overdue { color: var(--rose-deep); }

/* Calendar */
.cal {
  background: var(--cream-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cal-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--line);
}
.cal-head span {
  padding: 10px 0 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell {
  min-height: 96px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 7px 8px;
  font-size: 12px;
}
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell .cal-num { font-weight: 700; color: var(--ink-soft); font-size: 12px; }
.cal-cell.other { background: #FBFAF5; }
.cal-cell.other .cal-num { color: var(--ink-faint); opacity: .55; }
.cal-cell.today { background: var(--sage-mist); }
.cal-cell.today .cal-num {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  background: var(--sage);
  color: var(--gunmetal);
  border-radius: 50%;
}
.cal-evt {
  margin-top: 5px;
  border-radius: 6px;
  padding: 2.5px 7px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  background: var(--sage-light);
  color: var(--sage-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.cal-evt.rose { background: var(--rose-light); color: var(--rose-deep); }
.cal-evt.gun  { background: #E4E6E7; color: var(--gunmetal); }

/* ================= TEAM ================= */

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

.team-card .team-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}
.team-card .team-swatch { width: 12px; height: 12px; border-radius: 4px; }
.team-card .team-name { font-weight: 700; font-size: 15px; }
.team-card .team-count { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); }

.member-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.member-edit { cursor: pointer; border-radius: var(--r-sm); margin: 0 -8px; padding-left: 8px; padding-right: 8px; transition: background .12s ease; }
.member-edit:hover { background: var(--sage-mist); }
.member-row .member-info { flex: 1; min-width: 0; }
.member-row .member-name { font-weight: 600; font-size: 13.5px; }
.member-row .member-role { font-size: 12px; color: var(--ink-soft); }
.member-row .member-load { width: 110px; display: flex; align-items: center; gap: 8px; }
.member-row .member-load .bar { flex: 1; }
.member-row .member-load b { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ================= IMPACT ================= */

.impact-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }

.win-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

.win-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.win-edit, .idea-edit { cursor: pointer; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.win-edit:hover, .idea-edit:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--sage-light); }
.win-card .win-title { font-family: var(--font-display); font-size: 19px; font-weight: 500; line-height: 1.3; }
.win-card .win-desc { color: var(--ink-soft); font-size: 13.5px; }
.win-card .win-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; }
.win-card .win-date { font-size: 12px; color: var(--ink-faint); font-weight: 600; }
.win-metrics { display: flex; gap: 18px; flex-wrap: wrap; padding: 10px 0 2px; }
.win-metrics .wm { display: flex; flex-direction: column; }
.win-metrics .wm b { font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.win-metrics .wm span { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; }

/* ================= MEETINGS ================= */

.meeting-layout { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }

.meeting-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.meeting-item:hover { background: var(--sage-mist); }
.meeting-item.active { background: var(--sage-mist); border-color: var(--sage-light); }
.meeting-item .m-title { font-weight: 700; font-size: 13.5px; }
.meeting-item .m-date { font-size: 12px; color: var(--ink-soft); font-weight: 600; }

.meeting-detail .m-section { margin-top: 18px; }
.meeting-detail .m-section h4 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--ink-faint); margin-bottom: 8px;
}
.meeting-detail .summary-block {
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.65;
  background: var(--sage-mist);
  border-left: 3px solid var(--sage);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 14px 18px;
}
.decision-item, .action-item {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0;
  font-size: 13.5px;
}
.decision-item::before { content: '✓'; color: var(--sage-ink); font-weight: 700; }
.action-item::before { content: '→'; color: var(--rose-deep); font-weight: 700; }
.action-item .owner { margin-left: auto; white-space: nowrap; }

/* ================= REPORTS ================= */

.report-list { display: grid; gap: 14px; }
.report-card { display: flex; align-items: center; gap: 18px; cursor: pointer; transition: box-shadow .18s ease, transform .18s ease; }
.report-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.report-card .r-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--sage-light);
}
.report-card .r-icon svg { width: 21px; height: 21px; fill: none; stroke: var(--sage-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.report-card .r-main { flex: 1; min-width: 0; }
.report-card .r-title { font-weight: 700; }
.report-card .r-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }

.report-doc { max-width: 780px; }
.report-doc h3 { font-family: var(--font-display); font-weight: 500; font-size: 24px; margin-bottom: 4px; }
.report-doc .r-range { color: var(--ink-soft); font-size: 13px; margin-bottom: 18px; }
.report-doc h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-faint); margin: 20px 0 8px; }
.report-doc p, .report-doc li { font-size: 14.5px; line-height: 1.65; }
.report-doc ul { margin: 0; padding-left: 20px; }

/* ================= IDEAS ================= */

.idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.idea-card { display: flex; flex-direction: column; gap: 10px; }
.idea-card .idea-title { font-weight: 700; font-size: 15px; }
.idea-card .idea-desc { font-size: 13.5px; color: var(--ink-soft); flex: 1; }
.idea-card .idea-foot { display: flex; align-items: center; justify-content: space-between; }
.vote-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px 13px;
  font-size: 12.5px; font-weight: 700;
  transition: border-color .15s ease, background .15s ease;
}
.vote-btn:hover { border-color: var(--sage-deep); background: var(--sage-mist); }
.vote-btn.voted { background: var(--sage); border-color: var(--sage); color: var(--gunmetal); }

/* ================= AI ASSISTANT ================= */

.chat-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-h) - 150px);
  min-height: 440px;
}
.chat-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 6px 4px 18px; }

.msg { max-width: 66ch; }
.msg.user { align-self: flex-end; }
.msg .bubble {
  border-radius: var(--r-md);
  padding: 13px 17px;
  font-size: 14px;
  line-height: 1.6;
}
.msg.user .bubble {
  background: var(--gunmetal);
  color: var(--cream);
  border-bottom-right-radius: 5px;
}
.msg.ai .bubble {
  background: var(--cream-card);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 5px;
  box-shadow: var(--shadow-sm);
}
.msg.ai .bubble strong { color: var(--sage-ink); }
.msg.ai .bubble em { color: var(--rose-deep); font-style: normal; font-weight: 600; }
.msg .who {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
  color: var(--ink-faint);
  margin-bottom: 5px;
  text-transform: uppercase;
}
.msg.user .who { justify-content: flex-end; }
.msg .who .ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); }

.suggest-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 0; }
.suggest {
  border: 1px solid var(--line);
  background: var(--cream-card);
  border-radius: var(--r-pill);
  padding: 7px 15px;
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color .15s ease, background .15s ease;
}
.suggest:hover { border-color: var(--rose); background: var(--rose-light); }

.chat-input-row {
  display: flex; gap: 10px;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 8px 8px 8px 18px;
  box-shadow: var(--shadow-sm);
}
.chat-input-row:focus-within { border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-light); }
.chat-input-row input { flex: 1; border: 0; outline: 0; background: none; font-size: 14px; }
.chat-input-row .btn { border-radius: var(--r-md); }

.typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); animation: blink 1.2s infinite both; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } }

/* ================= SETTINGS ================= */

.settings-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; align-items: start; }
.settings-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.settings-card .s-sub { font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; }
.settings-card .modal-grid { display: grid; gap: 12px; }

/* Settings accordions */
.settings-acc { display: grid; gap: 12px; max-width: 880px; }
.settings-acc .s-sub { font-size: 13px; color: var(--ink-soft); }
.settings-acc .modal-grid { display: grid; gap: 12px; }

details.acc {
  background: var(--cream-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
details.acc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 20px;
  transition: background .15s ease;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary:hover { background: var(--sage-mist); }
details.acc > summary .acc-icon {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: var(--sage-mist);
  display: grid; place-items: center;
  font-size: 17px;
  flex-shrink: 0;
}
details.acc > summary .acc-titles { display: flex; flex-direction: column; min-width: 0; }
details.acc > summary .acc-titles > span:first-child { font-weight: 700; font-size: 14.5px; }
details.acc > summary .acc-sub { font-weight: 500; font-size: 12.5px; color: var(--ink-soft); }
details.acc > summary .acc-chev { margin-left: auto; color: var(--ink-faint); flex-shrink: 0; transition: transform .2s ease; }
details.acc[open] > summary { border-bottom: 1px solid var(--line-soft); }
details.acc[open] > summary .acc-chev { transform: rotate(180deg); }
.acc-body { padding: 18px 20px 20px; }
.acc-h4 { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }

/* Theme picker chips */
.theme-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.theme-chip {
  display: flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--line);
  background: var(--cream-card);
  border-radius: var(--r-pill);
  padding: 8px 15px;
  font-size: 13px; font-weight: 600;
  transition: border-color .15s ease, background .15s ease;
}
.theme-chip:hover { border-color: var(--sage-deep); }
.theme-chip.active { border-color: var(--sage-deep); background: var(--sage-mist); }
.theme-chip .theme-dots { display: flex; }
.theme-chip .theme-dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--cream-card); margin-left: -6px; }
.theme-chip .theme-dots i:first-child { margin-left: 0; }

/* Navigation order editor */
.nav-order-row {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}
.nav-order-row:last-child { border-bottom: 0; }
.nav-order-row .nav-order-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--sage-mist);
  color: var(--sage-ink);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.nav-order-row .i-name { flex: 1; font-weight: 600; font-size: 13.5px; }
.nav-order-arrows { display: flex; gap: 6px; }
.icon-btn.sm { width: 30px; height: 30px; font-size: 13px; }
.icon-btn:disabled { opacity: .3; cursor: default; }
.icon-btn:disabled:hover { border-color: var(--line); }

/* Original meeting notes — tucked in a collapsed accordion under the AI summary */
details.raw-notes { margin-top: 10px; }
details.raw-notes > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 4px 0;
}
details.raw-notes > summary::-webkit-details-marker { display: none; }
details.raw-notes > summary::after { content: ' ▾'; color: var(--ink-faint); margin-left: 5px; }
details.raw-notes[open] > summary::after { content: ' ▴'; }
details.raw-notes > pre {
  margin: 8px 0 0;
  padding: 12px 14px;
  background: var(--sage-mist);
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Campaign department chips (multi-department tagging) */
.dept-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dept-chip { gap: 4px; white-space: nowrap; }
.dept-chip button {
  border: 0; background: none; padding: 0 0 0 2px;
  font-size: 10px; color: inherit; opacity: .65; cursor: pointer;
}
.dept-chip button:hover { opacity: 1; }
.select-pill.dept-add { padding: 4px 26px 4px 10px; font-size: 12px; max-width: 120px; }

/* Email Reports — month scope dropdown (scales to years of data) */
.month-scope {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.month-scope .ms-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.month-dd { position: relative; }
.month-dd-btn { font-weight: 700; }
.month-dd-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 210px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 10px 14px;
}
.month-dd-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 2px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.month-dd-opt.all {
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 9px;
  margin-bottom: 5px;
}

/* Bulk retag bar (campaign table) */
.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: var(--sage-mist);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
}
.email-table tr.row-selected td { background: var(--sage-mist); }

/* Inline fiscal-year input (month table) */
.input.fy-input { width: 110px; padding: 5px 9px; font-size: 12.5px; }

/* Export scope modal — month checkbox list */
.export-month-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding: 4px 2px;
}
.export-month { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; cursor: pointer; }

.integration-row {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.integration-row:last-child { border-bottom: 0; }
.integration-row .i-name { font-weight: 700; font-size: 13.5px; }
.integration-row .i-sub { font-size: 12px; color: var(--ink-soft); }
.integration-row .i-state { margin-left: auto; }

.kb-item {
  display: flex; gap: 10px; align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.kb-item:last-child { border-bottom: 0; }
.kb-item .kb-type { flex-shrink: 0; }

/* ================= RESPONSIVE ================= */

.kpi-row-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1180px) {
  .kpi-row, .kpi-row-4 { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .span-3 { grid-column: span 2; }
  .week-strip { grid-template-columns: repeat(3, 1fr); }
  .week-day:nth-child(n+4) { border-top: 1px solid var(--line-soft); padding-top: 10px; margin-top: 4px; }
}

@media (max-width: 860px) {
  .dash-grid { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: span 1; }
  .task-layout, .meeting-layout { grid-template-columns: 1fr; }
  .impact-summary { grid-template-columns: 1fr; }
  .chat-shell { height: auto; min-height: 0; }
  .chat-scroll { max-height: 55vh; }
}

@media (max-width: 560px) {
  .kpi-row, .kpi-row-4 { grid-template-columns: 1fr; }
  .week-strip { grid-template-columns: 1fr; }
  .week-day { border-left: 0; padding-left: 2px; }
  .board { grid-template-columns: repeat(5, 82vw); }
}

/* ============================================================
   July additions: compact brief · task day-buckets · meeting
   threads & action rows · email performance · monthly report
   stats · passcode lock screen
   ============================================================ */

/* Compact AI brief (single column, sits where Today's Focus was) */
.brief-sm .brief-text { font-size: 15px; margin: 8px 0 14px; }
.brief-sm .botanical { width: 54px; opacity: .5; }

/* --- My Tasks: Due Today / Soon / Later buckets --- */
.bucket {
  border: 1.5px dashed transparent;
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--cream);
  transition: border-color .15s ease, background .15s ease;
}
.bucket .bucket-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 6px; margin-bottom: 2px;
  border-bottom: 1px solid var(--line-soft);
}
.bucket .bucket-title { font-weight: 800; font-size: 13.5px; letter-spacing: .02em; }
.bucket .bucket-sub { margin-left: auto; font-size: 11.5px; color: var(--ink-faint); font-weight: 600; }
.bucket-empty { font-size: 12.5px; color: var(--ink-faint); padding: 12px 4px; }
.bucket.drop-hint { border-color: var(--sage-deep); background: var(--sage-mist); }
.task-row[draggable] { cursor: grab; }
.task-row.dragging { opacity: .45; }

/* --- Meetings: thread + action-item editor --- */
.thread-item {
  display: flex; gap: 12px; align-items: baseline;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
}
.thread-item:hover { background: var(--sage-mist); }
.thread-item:last-child { border-bottom: 0; }
.thread-item .thread-date { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--sage-ink); }
.thread-item .thread-sum { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

.action-edit-row {
  display: grid; grid-template-columns: 1fr 110px 140px 32px;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
.action-edit-row .input { padding: 8px 10px; font-size: 13px; }

/* --- Reports: email performance table + monthly stats --- */
.email-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.email-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); padding: 8px 10px; border-bottom: 1.5px solid var(--line-soft);
}
.email-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); }
.email-table tr:last-child td { border-bottom: 0; }
.email-table .delta-up { color: var(--sage-ink); font-weight: 700; }
.email-table .delta-down { color: var(--rose-deep); font-weight: 700; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 8px; }
.stat { background: var(--cream); border-radius: 14px; padding: 14px; text-align: center; }
.stat .stat-num { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 500; color: var(--sage-ink); }
.stat .stat-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }

/* --- Passcode lock screen --- */
.lock-screen {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background:
    radial-gradient(60% 50% at 80% 10%, var(--sage-light) 0%, transparent 60%),
    radial-gradient(50% 40% at 10% 90%, var(--rose-light) 0%, transparent 60%),
    var(--cream);
  transition: opacity .3s ease;
}
.lock-screen.unlocking { opacity: 0; }
.lock-card {
  width: min(92vw, 380px);
  background: var(--cream-card);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  padding: 34px 30px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(53, 57, 60, .12);
}
.lock-card .lock-logo {
  font-family: 'Brittany Signature', 'Ms Madi', cursive;
  font-size: 30px; color: var(--sage-ink); margin-bottom: 10px;
}
.lock-card h1 { font-family: var(--font-display); font-weight: 500; font-size: 24px; margin-bottom: 6px; }
.lock-card p { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 18px; }
.lock-card form { display: flex; gap: 10px; }
.lock-card form .input { flex: 1; }
.lock-card .lock-err { color: var(--rose-deep); font-weight: 600; font-size: 13px; min-height: 18px; margin: 10px 0 0; }
.lock-card .lock-note { font-size: 11.5px; color: var(--ink-faint); margin: 12px 0 0; }

@media (max-width: 640px) {
  .action-edit-row { grid-template-columns: 1fr 90px; }
  .action-edit-row [data-a="due"] { grid-column: 1; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .bucket .bucket-sub { display: none; }
}