/* ============================================================
   Marketing Activities — Design System
   NuFocus Group 2026
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* Colors */
  --color-black:        #404040;
  --color-dark-gray:    #404040;
  --color-medium-gray:  #878787;
  --color-light-gray:   #F2F2F2;
  --color-off-white:    #FAFAFA;
  --color-accent:       #F79423;
  --color-accent-alt:   #F1A701;
  --color-white:        #FFFFFF;

  /* Typography */
  --font-family:        "Poppins", Arial, sans-serif;
  --font-title:         600 37px/1.1 var(--font-family);
  --font-h1:            600 24px/1.15 var(--font-family);
  --font-h2:            500 19px/1.15 var(--font-family);
  --font-h3:            500 16px/1.15 var(--font-family);
  --font-body:          400 15px/1.15 var(--font-family);
  --font-caption:       400 12px/1.1 var(--font-family);
  --font-table:         400 13px/1.0 var(--font-family);

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;

  /* Borders */
  --border:           0.5px solid var(--color-medium-gray);
  --border-accent:    0.5px solid var(--color-accent);

  /* Radius */
  --radius:           4px;

  /* Transitions */
  --transition:       150ms ease;
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font: var(--font-body);
  color: var(--color-dark-gray);
  background: var(--color-off-white);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

button { cursor: pointer; font-family: var(--font-family); }

input, select, textarea {
  font-family: var(--font-family);
  font-size: 15px;
  color: var(--color-black);
}

/* ── Typography ───────────────────────────────────────────── */
.t-title   { font: var(--font-title);   color: var(--color-black); }
.t-h1      { font: var(--font-h1);      color: var(--color-black); }
.t-h2      { font: var(--font-h2);      color: var(--color-black); }
.t-h3      { font: var(--font-h3);      color: var(--color-dark-gray); }
.t-body    { font: var(--font-body);    color: var(--color-dark-gray); }
.t-caption { font: var(--font-caption); color: var(--color-medium-gray); }
.t-table   { font: var(--font-table); }

.text-black    { color: var(--color-black) !important; }
.text-dark     { color: var(--color-dark-gray) !important; }
.text-muted    { color: var(--color-medium-gray) !important; }
.text-accent   { color: var(--color-accent) !important; }

/* ── Layout Utilities ─────────────────────────────────────── */
.container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }

/* ── Surface Components ───────────────────────────────────── */
.card {
  background: var(--color-off-white);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

.card--gray {
  background: var(--color-light-gray);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

.card--accent-top {
  border-top: 3px solid var(--color-accent);
}

.section-block {
  background: var(--color-off-white);
  border: var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--sp-5);
  overflow: hidden;
}

.section-block__header {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: var(--color-off-white);
}

.section-block__body {
  padding: var(--sp-5);
}

.section-block__body--flush {
  padding: 0;
}

.divider {
  border: none;
  border-top: var(--border);
  margin: var(--sp-4) 0;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px 20px;
  border-radius: var(--radius);
  font: 500 14px/1 var(--font-family);
  border: var(--border);
  transition: var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-off-white);
  border-color: var(--color-accent);
  font-weight: 600;
  font-size: 15px;
  padding: 11px 24px;
}
.btn-primary:hover { background: #e08420; border-color: #e08420; }

.btn-secondary {
  background: var(--color-off-white);
  color: var(--color-dark-gray);
  border-color: var(--color-medium-gray);
}
.btn-secondary:hover { border-color: var(--color-dark-gray); color: var(--color-black); }

.btn-ghost {
  background: transparent;
  color: var(--color-dark-gray);
  border-color: transparent;
  padding-left: var(--sp-2);
  padding-right: var(--sp-2);
}
.btn-ghost:hover { background: var(--color-light-gray); }

.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
}

.btn:disabled {
  background: var(--color-light-gray);
  color: var(--color-medium-gray);
  border-color: var(--color-medium-gray);
  cursor: not-allowed;
}

/* ── Tables ───────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--font-table);
}

.data-table thead th {
  background: var(--color-accent);
  color: var(--color-off-white);
  font-weight: 600;
  font-size: 13px;
  text-align: left;
  padding: 8px 10px;
  border: 0.5px solid #e08420;
  white-space: nowrap;
}

.data-table thead th.center { text-align: center; }
.data-table thead th.right  { text-align: right; }

.data-table tbody tr:nth-child(odd)  { background: var(--color-off-white); }
.data-table tbody tr:nth-child(even) { background: var(--color-light-gray); }

.data-table tbody tr:hover { background: #ede9e3; }

.data-table tbody td {
  padding: 7px 10px;
  border: 0.5px solid var(--color-medium-gray);
  vertical-align: middle;
}
.data-table tbody td.center { text-align: center; }
.data-table tbody td.right  { text-align: right; }

/* ── Status Chips ─────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius);
  font: 400 11px/1.1 var(--font-family);
  border: 0.5px solid var(--color-medium-gray);
  background: var(--color-off-white);
  color: var(--color-dark-gray);
  white-space: nowrap;
}

.chip::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-medium-gray);
  flex-shrink: 0;
}

.chip--planned    { }
.chip--in-progress::before { background: var(--color-accent); }
.chip--scheduled  { border-color: var(--color-accent-alt); }
.chip--scheduled::before { background: var(--color-accent-alt); }
.chip--published  { font-weight: 500; color: var(--color-black); }
.chip--sent       { font-weight: 500; color: var(--color-black); }
.chip--completed  { }
.chip--cancelled  { color: var(--color-medium-gray); }
.chip--postponed  { border-color: var(--color-accent-alt); }
.chip--postponed::before { background: var(--color-accent-alt); }

/* ── Form Elements ────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}

.form-label {
  font: 300 12px/1.1 var(--font-family);
  color: var(--color-medium-gray);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-input, .form-select, .form-textarea {
  background: var(--color-off-white);
  border: var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  font: 400 15px/1.15 var(--font-family);
  color: var(--color-black);
  width: 100%;
  transition: border-color var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.form-section-title {
  font: 500 13px/1 var(--font-family);
  color: var(--color-black);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: var(--sp-2);
  border-bottom: var(--border);
  margin-bottom: var(--sp-3);
  margin-top: var(--sp-5);
}

.form-section-title:first-child { margin-top: 0; }

/* ── Month Switcher ───────────────────────────────────────── */
.month-switcher {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.month-btn {
  padding: 6px 14px;
  border-radius: var(--radius);
  font: 500 13px/1 var(--font-family);
  border: var(--border);
  background: var(--color-light-gray);
  color: var(--color-dark-gray);
  transition: var(--transition);
  cursor: pointer;
}

.month-btn:hover { border-color: var(--color-dark-gray); color: var(--color-black); }

.month-btn--active {
  background: var(--color-accent);
  color: var(--color-off-white);
  border-color: var(--color-accent);
}

/* ── Focus Badge ──────────────────────────────────────────── */
.focus-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 14px;
  border-radius: var(--radius);
  font: 500 13px/1 var(--font-family);
  background: var(--color-light-gray);
  border: var(--border);
  color: var(--color-dark-gray);
}

.focus-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* ── Calendar ─────────────────────────────────────────────── */

/* Single unified grid — headers + cells share one container */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: var(--border);
  border-left: var(--border);
  width: 100%;
}

/* Day-name header cells (first 7 children) */
.cal-hdr {
  padding: 9px 4px;
  font: 600 11px/1 var(--font-family);
  color: var(--color-off-white);
  text-align: center;
  background: var(--color-dark-gray);
  border-right: var(--border);
  border-bottom: 2px solid var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Day cell */
.cal-cell {
  min-height: 130px;
  padding: 6px 5px 5px;
  border-right: var(--border);
  border-bottom: var(--border);
  background: var(--color-off-white);
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.cal-cell--out {
  background: var(--color-light-gray);
  opacity: 0.55;
}

/* Date number */
.cal-date {
  font: 600 12px/1 var(--font-family);
  color: var(--color-dark-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.cal-date--today {
  background: var(--color-accent);
  color: var(--color-off-white);
}

/* Activity cards wrapper */
.cal-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

/* Single activity card */
.cal-item {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--color-light-gray);
  border: 0.5px solid var(--color-medium-gray);
  border-left: 3px solid var(--color-accent);
  border-radius: 2px;
  padding: 3px 5px;
  font: 400 11px/1.3 var(--font-family);
  color: var(--color-dark-gray);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  transition: background var(--transition);
}

.cal-item:hover { background: #e8e4df; }

/* Channel icon */
.cal-item__icon {
  font-size: 10px;
  color: var(--color-accent);
  flex-shrink: 0;
  width: 11px;
  text-align: center;
}

/* Title */
.cal-item__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* Overflow label */
.cal-more {
  font: 400 10px/1 var(--font-family);
  color: var(--color-medium-gray);
  padding: 1px 3px;
}

/* Channel colour variants */
.cal-item--email      { border-left-color: var(--color-accent-alt); }
.cal-item--email      .cal-item__icon { color: var(--color-accent-alt); }
.cal-item--video      { border-left-color: var(--color-dark-gray); }
.cal-item--video      .cal-item__icon { color: var(--color-dark-gray); }
.cal-item--event      { border-left-color: var(--color-black); }
.cal-item--event      .cal-item__icon { color: var(--color-black); }
.cal-item--cancelled  { opacity: 0.4; }
.cal-item--highlighted { border-left-width: 4px; }
.cal-item--paid       { border-left-width: 4px; background: #fef6ec; }

/* Timeline */
.timeline-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-bottom: var(--border);
  min-height: 44px;
}

.timeline-label {
  padding: 10px 12px;
  font: 500 12px/1.2 var(--font-family);
  color: var(--color-dark-gray);
  border-right: var(--border);
  background: var(--color-light-gray);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.timeline-bars {
  position: relative;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.timeline-bar {
  position: absolute;
  height: 22px;
  border: 0.5px solid var(--color-medium-gray);
  border-left: 3px solid var(--color-accent);
  background: var(--color-light-gray);
  border-radius: 2px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font: 400 11px/1 var(--font-family);
  color: var(--color-dark-gray);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  top: 6px;
  transition: background var(--transition);
}
.timeline-bar:hover { background: #e8e4df; }

/* ── Channel Cards ────────────────────────────────────────── */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-3);
}

.channel-card {
  background: var(--color-off-white);
  border: var(--border);
  border-top: 3px solid var(--color-medium-gray);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  transition: border-color var(--transition);
}

.channel-card:hover { border-top-color: var(--color-accent); }
.channel-card--active { border-top-color: var(--color-accent); background: #fdf8f3; }

.channel-card__name {
  font: 500 14px/1 var(--font-family);
  color: var(--color-black);
  margin-bottom: var(--sp-2);
}

.channel-card__count {
  font: 600 22px/1 var(--font-family);
  color: var(--color-dark-gray);
}

.channel-card__meta {
  font: 400 11px/1.1 var(--font-family);
  color: var(--color-medium-gray);
  margin-top: var(--sp-1);
}

/* ── Channel Activity Cards (new style) ───────────────────── */
.cha-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
}

.cha-card {
  background: var(--color-off-white);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  transition: box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cha-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.cha-card--active {
  background: #fdf8f3;
}

.cha-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.cha-card__name {
  font: 600 12px/1.2 var(--font-family);
  color: var(--color-dark-gray);
}

.cha-card__total {
  font: 700 26px/1 var(--font-family);
  color: var(--color-dark-gray);
}

.cha-card__bar-wrap {
  height: 4px;
  background: var(--color-light-gray);
  border-radius: 2px;
  overflow: hidden;
}

.cha-card__bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width .3s ease;
}

.cha-card__stats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font: 400 11px/1 var(--font-family);
}

/* ── Campaign Groups ──────────────────────────────────────── */
.campaign-group {
  border: var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}

.campaign-group__header {
  padding: 12px var(--sp-4);
  background: var(--color-light-gray);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-bottom: var(--border);
  gap: var(--sp-3);
}

.campaign-group__header:hover { background: #e8e4df; }

.campaign-group__name { font: 500 14px/1 var(--font-family); color: var(--color-black); }
.campaign-group__meta { font: 400 12px/1 var(--font-family); color: var(--color-medium-gray); }

.campaign-group__body { background: var(--color-off-white); }

.campaign-group__body.collapsed { display: none; }

.campaign-item {
  padding: 10px var(--sp-4);
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.campaign-item:last-child { border-bottom: none; }

/* ── Campaigns by Service (cbs-) ──────────────────────────── */

/* Outer block — same card shell as summary-block */
.cbs-service-block {
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-off-white);
  margin-bottom: var(--sp-5);
}

.cbs-service-block:last-child { margin-bottom: 0; }

/* ── Service-line header (dark bar, like summary-block__header) */
.cbs-sl-header {
  background: var(--color-dark-gray);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: background var(--transition);
  user-select: none;
}

.cbs-sl-header:hover { background: #333; }

/* Service number — large watermark style */
.cbs-sl-num {
  font: 700 28px/1 var(--font-family);
  color: rgba(255,255,255,.15);
  min-width: 36px;
  flex-shrink: 0;
}

/* Icon badge */
.cbs-sl-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius);
  font-size: 15px;
  flex-shrink: 0;
}

/* Text block */
.cbs-sl-text { flex: 1; min-width: 0; }

.cbs-sl-name {
  font: 600 16px/1.1 var(--font-family);
  color: var(--color-off-white);
  margin-bottom: 4px;
}

.cbs-sl-meta {
  font: 400 11px/1 var(--font-family);
  color: rgba(255,255,255,.4);
  letter-spacing: 0.02em;
}

/* Progress bar inside dark header */
.cbs-sl-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 100px;
  flex-shrink: 0;
}

.cbs-sl-progress__bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,.15);
  border-radius: 2px;
  overflow: hidden;
}

.cbs-sl-progress__bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width .3s;
}

.cbs-sl-progress__pct {
  font: 600 12px/1 var(--font-family);
  color: rgba(255,255,255,.7);
  min-width: 34px;
  text-align: right;
  flex-shrink: 0;
}

/* Channel pills in header */
.cbs-sl-channels {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.cbs-ch-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  font: 400 10px/1 var(--font-family);
  color: rgba(255,255,255,.7);
  border: 0.5px solid rgba(255,255,255,.15);
}

/* Chevron */
.cbs-sl-chevron {
  font-size: 11px;
  color: rgba(255,255,255,.35);
  transition: transform var(--transition);
  flex-shrink: 0;
}

/* ── Campaigns body (below dark header) ───────────────────── */
.cbs-campaigns-body {
  padding: var(--sp-5);
  background: var(--color-off-white);
  border-top: var(--border);
}

.cbs-campaigns-body.cbs-collapsed { display: none; }

/* Campaign cards grid — same visual language as summary cards */
.cbs-campaigns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  background: var(--color-light-gray);
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Individual campaign card */
.cbs-campaign-card {
  background: var(--color-off-white);
  position: relative;
  overflow: hidden;
}

/* Accent top stripe per card (like scard::before) */
.cbs-campaign-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-accent);
  opacity: .5;
}

.cbs-campaign-card:nth-child(2n) {
  background: #fafaf8;
}

.cbs-campaign-card__inner {
  padding: var(--sp-4) var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  box-sizing: border-box;
}

/* Card header row */
.cbs-campaign-card__head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.cbs-campaign-num {
  font: 700 9px/1 var(--font-family);
  color: var(--color-medium-gray);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 2px;
  min-width: 22px;
  flex-shrink: 0;
}

.cbs-campaign-name {
  font: 600 13px/1.25 var(--font-family);
  color: var(--color-dark-gray);
  flex: 1;
}

/* Channel pills in card body */
.cbs-campaign-card__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cbs-campaign-card .cbs-ch-pill {
  background: var(--color-light-gray);
  color: var(--color-dark-gray);
  border-color: transparent;
}

/* Progress row */
.cbs-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cbs-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--color-light-gray);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.cbs-progress-bar__done {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: #22863a;
  border-radius: 3px;
}

.cbs-progress-bar__inprog {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--color-accent);
  border-radius: 3px;
}

.cbs-progress-label {
  font: 600 11px/1 var(--font-family);
  color: var(--color-medium-gray);
  white-space: nowrap;
}

/* Status chips */
.cbs-status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}

.cbs-status-chip {
  padding: 3px 8px;
  font: 400 10px/1.3 var(--font-family);
  background: var(--color-light-gray);
  border-radius: 3px;
  color: var(--color-dark-gray);
  border: 0.5px solid transparent;
}

/* Done-status chip highlight */
.cbs-status-chip--done {
  background: #eaf4ec;
  border-color: #a3cba8;
  color: #1d6929;
}

/* In-progress chip */
.cbs-status-chip--wip {
  background: #fef3e6;
  border-color: var(--color-accent-alt);
  color: #a8610e;
}

/* ── Activity by Specific Service (sbs-) ─────────────────── */

/* 7-column grid — wraps into 2 rows naturally */
.sbs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4);
}

/* Individual service card */
.sbs-card {
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-off-white);
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow var(--transition);
  position: relative;
}

.sbs-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

/* Dimmed card when no activities tagged */
.sbs-card--empty {
  opacity: .55;
  background: #fafaf8;
}

/* Colour stripe at top */
.sbs-card__stripe {
  height: 3px;
  background: var(--sbs-color, var(--color-accent));
}

/* Card header: icon + name + line badges */
.sbs-card__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
}

.sbs-card__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: var(--sbs-color, var(--color-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
  opacity: .92;
}

.sbs-card__info {
  flex: 1;
  min-width: 0;
}

.sbs-card__name {
  font: 600 13px/1.2 var(--font-family);
  color: var(--color-dark-gray);
  margin-bottom: 5px;
}

/* Revenue line badges: FM / D&P / CS / BS */
.sbs-card__lines {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.sbs-line-badge {
  font: 500 9px/1 var(--font-family);
  padding: 2px 5px;
  border-radius: 2px;
  background: var(--color-light-gray);
  color: var(--color-medium-gray);
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 0.5px solid transparent;
}

/* Empty state text inside card */
.sbs-card__none {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  font: 400 11px/1.4 var(--font-family);
  color: var(--color-medium-gray);
  font-style: italic;
}

/* Stats row: Total / Done / WIP / Planned */
.sbs-card__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-light-gray);
  border-top: var(--border);
  border-bottom: var(--border);
  margin: 0 0 var(--sp-3);
}

.sbs-stat {
  background: var(--color-off-white);
  padding: var(--sp-2) 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.sbs-stat__val {
  font: 700 15px/1 var(--font-family);
  color: var(--color-dark-gray);
}

.sbs-stat__lbl {
  font: 400 8px/1 var(--font-family);
  color: var(--color-medium-gray);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sbs-stat--done .sbs-stat__val { color: #22863a; }
.sbs-stat--wip  .sbs-stat__val { color: var(--color-accent); }

/* Progress bar */
.sbs-card__progress {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--sp-4) var(--sp-3);
}

.sbs-progress-bar {
  flex: 1;
  height: 5px;
  background: var(--color-light-gray);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.sbs-progress-bar__done {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: #22863a;
  border-radius: 3px;
  transition: width .4s ease;
}

.sbs-progress-bar__wip {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--color-accent);
  border-radius: 3px;
  transition: width .4s ease, left .4s ease;
}

.sbs-progress-pct {
  font: 600 10px/1 var(--font-family);
  color: var(--color-medium-gray);
  min-width: 28px;
  text-align: right;
}

/* Footer: channel icons + persona tags */
.sbs-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-4) var(--sp-4);
  gap: 6px;
  margin-top: auto;
}

.sbs-channels {
  display: flex;
  gap: 6px;
  color: var(--color-medium-gray);
  font-size: 12px;
}

.sbs-channels i { color: var(--sbs-color, var(--color-accent)); }

.sbs-personas {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: flex-end;
}

.sbs-persona-tag {
  font: 400 9px/1 var(--font-family);
  padding: 2px 6px;
  border-radius: 2px;
  background: #fef3e6;
  color: #a8610e;
  border: 0.5px solid var(--color-accent-alt);
  white-space: nowrap;
}

/* Empty state (when no activities tagged at all) */
.sbs-empty {
  text-align: center;
  padding: 48px var(--sp-6);
  color: var(--color-medium-gray);
}

.sbs-empty i {
  font-size: 32px;
  opacity: .3;
  display: block;
  margin-bottom: 12px;
}

.sbs-empty__title {
  font: 600 15px/1 var(--font-family);
  color: var(--color-dark-gray);
  margin-bottom: 6px;
}

.sbs-empty__sub {
  font: 400 13px/1.5 var(--font-family);
  max-width: 380px;
  margin: 0 auto;
}

/* Responsive: on narrow screens 2 columns */
@media (max-width: 900px) {
  .sbs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .sbs-grid { grid-template-columns: 1fr; }
}

/* ── Summary Block — redesigned ───────────────────────────── */

/* Outer wrapper */
.summary-block {
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-off-white);
}

/* ── Header bar ─────────────────────────────────────────── */
.summary-block__header {
  background: var(--color-dark-gray);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.summary-block__header-label {
  font: 500 11px/1 var(--font-family);
  color: var(--color-medium-gray);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-2);
}

.summary-block__header-title {
  font: 600 24px/1.1 var(--font-family);
  color: var(--color-off-white);
}

.summary-block__header-meta {
  font: 400 13px/1.4 var(--font-family);
  color: var(--color-medium-gray);
  text-align: right;
  flex-shrink: 0;
}

/* ── Focus hero row ─────────────────────────────────────── */
.summary-focus-row {
  background: var(--color-off-white);
  border-bottom: var(--border);
  padding: var(--sp-5) var(--sp-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: center;
}

.summary-focus-accent {
  width: 4px;
  align-self: stretch;
  background: var(--color-accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.summary-focus-theme {
  font: 600 28px/1.1 var(--font-family);
  color: var(--color-black);
  margin-bottom: var(--sp-2);
}

.summary-focus-desc {
  font: 400 15px/1.5 var(--font-family);
  color: var(--color-dark-gray);
  max-width: 680px;
}

/* ── Cards grid ─────────────────────────────────────────── */
.summary-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;                            /* gap lines = light-gray background showing through */
  background: var(--color-light-gray);
  border-bottom: var(--border);
}

/* Individual summary card */
.scard {
  background: var(--color-off-white);
  padding: var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: relative;
  overflow: hidden;
}

/* Alternate tint — applied to even cards (Services, Video) */
.scard--tint {
  background: #fafaf8;
}

/* Accent top border — color varies per card */
.scard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--scard-accent, var(--color-accent));
}

/* Watermark number */
.scard__num {
  position: absolute;
  top: 10px;
  right: 14px;
  font: 600 52px/1 var(--font-family);
  color: var(--color-light-gray);
  user-select: none;
  pointer-events: none;
  line-height: 1;
}

/* Icon + label row */
.scard__header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  position: relative; /* above watermark */
}

.scard__icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  background: var(--scard-icon-bg, var(--color-light-gray));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--scard-accent, var(--color-accent));
  flex-shrink: 0;
}

.scard__label {
  font: 500 10px/1 var(--font-family);
  color: var(--color-medium-gray);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

/* Pill tags — replace boring lists */
.scard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: relative;
}

.stag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 2px;
  font: 400 12px/1 var(--font-family);
  background: var(--color-light-gray);
  border: 0.5px solid var(--color-medium-gray);
  color: var(--color-dark-gray);
  white-space: nowrap;
}

/* Accent variant for highlighted tags */
.stag--accent {
  background: #fef3e6;
  border-color: var(--color-accent);
  color: #a8610e;
  font-weight: 500;
}

/* Empty placeholder */
.scard__empty {
  font: 400 13px/1 var(--font-family);
  color: var(--color-medium-gray);
  font-style: italic;
}

/* ── Email row (full width) ─────────────────────────────── */
.summary-email-row {
  background: var(--color-off-white);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: var(--border);
}

.summary-email-row__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.summary-email-row__icon {
  width: 32px;
  height: 32px;
  background: #fef3e6;
  border: 0.5px solid var(--color-accent-alt);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-alt);
  font-size: 14px;
  flex-shrink: 0;
}

.summary-email-row__label {
  font: 500 10px/1 var(--font-family);
  color: var(--color-medium-gray);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.summary-email-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
}

.semail-card {
  background: var(--color-light-gray);
  border: 0.5px solid var(--color-medium-gray);
  border-top: 2px solid var(--color-accent-alt);
  border-radius: var(--radius);
  padding: 12px var(--sp-3);
}

.semail-card__name {
  font: 500 13px/1.3 var(--font-family);
  color: var(--color-black);
  margin-bottom: 4px;
}

.semail-card__meta {
  font: 400 11px/1.3 var(--font-family);
  color: var(--color-medium-gray);
}

/* ── Channels row ───────────────────────────────────────── */
.summary-channels-row {
  background: var(--color-off-white);
  padding: var(--sp-4) var(--sp-6);
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.summary-channels-row__label {
  font: 500 10px/1 var(--font-family);
  color: var(--color-medium-gray);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  flex-shrink: 0;
  white-space: nowrap;
}

.summary-channels-row__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.schannel-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius);
  font: 500 12px/1 var(--font-family);
  background: var(--color-light-gray);
  border: 0.5px solid var(--color-medium-gray);
  color: var(--color-dark-gray);
}

.schannel-pill i { font-size: 11px; color: var(--color-accent); }

/* ── Wrap-Up ────────────────────────────────────────────── */
.summary-wrapup-row {
  background: var(--color-dark-gray);
  padding: var(--sp-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: start;
}

.summary-wrapup-accent {
  width: 4px;
  align-self: stretch;
  background: var(--color-accent);
  border-radius: 2px;
  min-height: 40px;
  flex-shrink: 0;
}

.summary-wrapup-inner {}

.summary-wrapup-label {
  font: 500 10px/1 var(--font-family);
  color: var(--color-medium-gray);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: var(--sp-3);
}

.summary-wrapup-text {
  font: 400 16px/1.7 var(--font-family);
  color: var(--color-off-white);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1060px) {
  .summary-cards-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .summary-cards-grid { grid-template-columns: 1fr; }
  .summary-focus-row  { grid-template-columns: 4px 1fr; }
  .summary-wrapup-row { grid-template-columns: 4px 1fr; }
  .summary-block__header { flex-direction: column; align-items: flex-start; }
  .summary-block__header-meta { text-align: left; }
  .summary-email-cards { grid-template-columns: 1fr; }
}

/* ── Month Selector Band ──────────────────────────────────── */
.month-selector-band {
  background: #2d2d2d;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky;
  top: 56px;          /* height of site-header */
  z-index: 90;
}

.month-selector {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 10px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.month-selector::-webkit-scrollbar { display: none; }

.month-selector__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 10px/1 var(--font-family);
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: var(--sp-3);
  border-right: 1px solid rgba(255,255,255,.1);
}

.month-selector__pills {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Individual pill */
.msel-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 14px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  position: relative;
}

.msel-pill:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.msel-pill:not(:disabled):hover {
  background: rgba(255,255,255,.08);
}

.msel-pill__short {
  font: 600 13px/1 var(--font-family);
  color: rgba(255,255,255,.65);
  transition: color var(--transition);
}

.msel-pill__year {
  font: 400 9px/1 var(--font-family);
  color: rgba(255,255,255,.3);
  letter-spacing: 0.04em;
  transition: color var(--transition);
}

/* Active state */
.msel-pill--active {
  background: var(--color-accent) !important;
}

.msel-pill--active .msel-pill__short {
  color: #fff;
}

.msel-pill--active .msel-pill__year {
  color: rgba(255,255,255,.75);
}

/* Active underline dot */
.msel-pill--active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 50%;
}

/* ── Filter Bar ───────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) 0;
}

.filter-bar select,
.filter-bar .form-select {
  padding: 6px 12px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-off-white);
  font: 400 13px/1 var(--font-family);
  color: var(--color-dark-gray);
  cursor: pointer;
  width: auto;
}

.filter-bar select:focus { outline: none; border-color: var(--color-accent); }

.view-toggle {
  display: flex;
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-left: auto;
}

.view-btn {
  padding: 6px 16px;
  font: 500 12px/1 var(--font-family);
  background: var(--color-off-white);
  color: var(--color-dark-gray);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  border-right: var(--border);
}
.view-btn:last-child { border-right: none; }
.view-btn:hover { background: var(--color-light-gray); }
.view-btn--active { background: var(--color-accent); color: var(--color-off-white); }

/* ── Site Header ──────────────────────────────────────────── */
.site-header {
  background: #ffffff;
  border-bottom: 1px solid #e8e8e8;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__inner {
  height: 56px;
  padding: 0 var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  box-sizing: border-box;
}

.site-header__logo {
  font: 600 20px/1 var(--font-family);
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.site-header__logo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.site-header__meta {
  font: 400 12px/1 var(--font-family);
  color: var(--color-medium-gray);
}

/* ── Page Header Band ─────────────────────────────────────── */
.page-header-band {
  background: var(--color-off-white);
  border-bottom: var(--border);
  padding: var(--sp-5) 0 var(--sp-4);
}

.page-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* ── Filter Band ──────────────────────────────────────────── */
.filter-band {
  background: var(--color-off-white);
  border-bottom: var(--border);
}

/* ── Admin Header ─────────────────────────────────────────── */
.admin-header {
  background: #ffffff;
  border-bottom: 2px solid var(--color-accent);
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-header__inner {
  padding: var(--sp-3) var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.admin-header__logo {
  font: 600 18px/1 var(--font-family);
  color: var(--color-off-white);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.admin-header__badge {
  font: 500 11px/1 var(--font-family);
  background: var(--color-accent);
  color: var(--color-off-white);
  padding: 3px 8px;
  border-radius: 2px;
}

/* ── Admin Layout ─────────────────────────────────────────── */
.admin-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--sp-5);
  align-items: start;
}

.admin-sidebar {
  background: var(--color-light-gray);
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: sticky;
  top: 70px;
}

.admin-sidebar__section {
  padding: var(--sp-4);
  border-bottom: var(--border);
}

.admin-sidebar__section:last-child { border-bottom: none; }

.admin-sidebar__label {
  font: 500 11px/1 var(--font-family);
  color: var(--color-medium-gray);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--sp-3);
}

.admin-sidebar__value {
  font: 500 15px/1 var(--font-family);
  color: var(--color-black);
}

.admin-sidebar__sub {
  font: 400 12px/1.3 var(--font-family);
  color: var(--color-medium-gray);
  margin-top: var(--sp-1);
}

.publish-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
}

/* ── Tabs ─────────────────────────────────────────────────── */
.tabs {
  display: flex;
  border-bottom: var(--border);
  gap: 0;
}

.tab-btn {
  padding: 12px 20px;
  font: 500 14px/1 var(--font-family);
  color: var(--color-medium-gray);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}

.tab-btn:hover { color: var(--color-dark-gray); }
.tab-btn--active { color: var(--color-black); border-bottom-color: var(--color-accent); }

.tab-panel { display: none; }
.tab-panel--active { display: block; }

/* ── Toast / Notifications ────────────────────────────────── */
.toast-container {
  position: fixed;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.toast {
  background: var(--color-dark-gray);
  color: var(--color-off-white);
  padding: 14px 20px;
  border-radius: var(--radius);
  font: 400 14px/1.3 var(--font-family);
  min-width: 280px;
  max-width: 380px;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  border-left: 4px solid var(--color-accent);
  animation: slideIn 200ms ease;
}

.toast--success { border-left-color: var(--color-accent); }
.toast--error   { border-left-color: #c44; }

@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}

.modal-overlay.hidden { display: none; }

.modal {
  background: var(--color-off-white);
  border: var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal--wide { max-width: 900px; }

.modal__header {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  position: sticky;
  top: 0;
  background: var(--color-off-white);
  z-index: 1;
}

.modal__body {
  padding: var(--sp-5);
  flex: 1;
  overflow-y: auto;
}

.modal__footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  position: sticky;
  bottom: 0;
  background: var(--color-off-white);
}

/* ── Misc Utilities ───────────────────────────────────────── */
.hidden { display: none !important; }
.visible { display: block !important; }

.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }

.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }

.p-4 { padding: var(--sp-4); }
.p-5 { padding: var(--sp-5); }

.w-full { width: 100%; }

.text-right { text-align: right; }
.text-center { text-align: center; }

.badge {
  display: inline-block;
  font: 500 12px/1 var(--font-family);
  background: var(--color-light-gray);
  border: var(--border);
  border-radius: var(--radius);
  padding: 3px 8px;
  color: var(--color-dark-gray);
}

.badge--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-off-white);
}

.empty-state {
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  color: var(--color-medium-gray);
  font: 400 15px/1.5 var(--font-family);
}

/* ── Paid Badge ───────────────────────────────────────────── */
.paid-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius);
  font: 600 11px/1 var(--font-family);
  background: var(--color-accent);
  color: var(--color-off-white);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.paid-badge--sm {
  padding: 2px 6px;
  font-size: 10px;
}

/* Calendar paid dot */
.cal-paid-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: var(--color-accent);
  color: var(--color-off-white);
  font: 700 9px/1 var(--font-family);
  margin-right: 2px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Paid cal-item variant */
.cal-item--paid {
  border-left-color: var(--color-accent) !important;
  border-left-width: 4px;
  background: #fef6ec;
}

/* ── Nature Toggle ────────────────────────────────────────── */
.nature-toggle {
  display: inline-flex;
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.nature-btn {
  padding: 8px 20px;
  font: 500 13px/1 var(--font-family);
  background: var(--color-off-white);
  color: var(--color-dark-gray);
  border: none;
  cursor: pointer;
  border-right: var(--border);
  transition: background var(--transition), color var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nature-btn:last-child { border-right: none; }
.nature-btn:hover { background: var(--color-light-gray); }

.nature-btn--active {
  background: var(--color-dark-gray);
  color: var(--color-off-white);
}

.nature-btn--paid.nature-btn--active {
  background: var(--color-accent);
  color: var(--color-off-white);
}

/* ── Activity Breakdown Table ─────────────────────────────── */
.breakdown-table {
  width: 100%;
}

.breakdown-row:hover { background: #ede9e3 !important; }

.breakdown-type-name {
  font: 500 13px/1 var(--font-family);
  color: var(--color-dark-gray);
  margin-bottom: 5px;
}

.breakdown-bar {
  height: 4px;
  background: var(--color-light-gray);
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
}

.breakdown-bar__fill {
  height: 100%;
  background: var(--color-medium-gray);
  border-radius: 2px;
  position: relative;
  transition: width .3s ease;
}

.breakdown-bar__paid {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  background: var(--color-accent);
  border-radius: 0 2px 2px 0;
}

/* ── Dashboard Layout (main + sidebar) ────────────────────── */
.dash-layout {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: var(--sp-5);
  align-items: start;
}

.dash-main {
  min-width: 0; /* prevent grid blowout */
}

.dash-sidebar {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: var(--color-off-white);
  border: var(--border);
  border-radius: var(--radius);
  scrollbar-width: thin;
}

.dash-sidebar__inner {
  display: flex;
  flex-direction: column;
}

/* Month section */
.sb-month-section {
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
}

.sb-month-label {
  font: 500 10px/1 var(--font-family);
  color: var(--color-medium-gray);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.sb-month-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sb-month-pill {
  padding: 4px 8px;
  font: 500 11px/1 var(--font-family);
  border-radius: 3px;
  background: var(--color-light-gray);
  color: var(--color-medium-gray);
  border: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.sb-month-pill:hover {
  background: #e8e4df;
  color: var(--color-dark-gray);
}

.sb-month-pill--active {
  background: var(--color-accent);
  color: #fff;
}

.sb-divider {
  height: 1px;
  background: var(--color-light-gray);
  border: none;
  margin: 0;
}

/* Summary sections in sidebar */
.sb-section {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 0.5px solid var(--color-light-gray);
}

.sb-section:last-of-type {
  border-bottom: none;
}

.sb-section__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 10px/1 var(--font-family);
  color: var(--color-medium-gray);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  padding-left: 8px;
  border-left: 3px solid var(--color-accent);
}

.sb-section__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sb-pill {
  padding: 3px 8px;
  font: 400 11px/1.3 var(--font-family);
  background: var(--color-light-gray);
  color: var(--color-dark-gray);
  border-radius: 3px;
  border: 0.5px solid transparent;
}

.sb-wrapup {
  font: 400 12px/1.5 var(--font-family);
  color: var(--color-dark-gray);
}

/* Version plaque */
.sb-version {
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-light-gray);
  border-top: 0.5px solid var(--color-medium-gray);
  font: 400 11px/1.4 var(--font-family);
  color: var(--color-medium-gray);
  margin-top: auto;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; }
  .publish-actions { flex-direction: row; flex-wrap: wrap; }
  .dash-layout { grid-template-columns: 1fr 260px; }
}

@media (max-width: 860px) {
  .container { padding: 0 var(--sp-4); }
  .site-header__inner { padding: var(--sp-3) var(--sp-4); }
  .admin-header__inner { padding: var(--sp-3) var(--sp-4); }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .summary-grid { grid-template-columns: 1fr; }
  .summary-section { border-right: none; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .dash-layout {
    grid-template-columns: 1fr;
  }
  .dash-sidebar {
    position: static;
    max-height: none;
    order: -1; /* sidebar above content on mobile */
  }
}

@media (max-width: 600px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .channel-grid { grid-template-columns: 1fr 1fr; }
  .month-switcher { gap: 4px; }
  .month-btn { padding: 5px 10px; font-size: 12px; }
  .modal { max-width: 100%; }
}