:root { --crm-pad: 0.4rem 0.7rem; }

html, body { overflow-x: hidden; }
body > * { max-width: 100%; }

header.container nav { padding: 0.5rem 0; flex-wrap: wrap; row-gap: 0.25rem; }
header.container nav > ul { flex-wrap: wrap; row-gap: 0.15rem; min-width: 0; }
header.container nav > ul > li { white-space: nowrap; }

.nav-sep { color: var(--pico-muted-color); }
.org-chip { font-size: 0.8rem; }
.user-chip { font-size: 0.875rem; }

.role-admin, .role-bde, .role-viewer {
  display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-right: 0.3rem;
  vertical-align: middle;
}
.role-admin  { background: #ef4444; color: #fff; }
.role-bde    { background: #22c55e; color: #06210e; }
.role-viewer { background: #6366f1; color: #fff; }

.card { background: var(--pico-card-background-color, #1c1f24); padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; overflow-x: auto; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.kpi { font-size: 2rem; font-weight: 700; margin: 0.2rem 0 0; }
.toolbar { display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar > * { margin: 0; }
.error { color: #ef4444; margin-top: 0.5rem; }
.ok    { color: #22c55e; margin-top: 0.5rem; }
.muted { color: var(--pico-muted-color); }
.right { text-align: right; }
.flex  { display: flex; gap: 0.75rem; align-items: center; }
.flex-between { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; }
.small { font-size: 0.85rem; }

table { max-width: 100%; }
table.compact td, table.compact th { padding: var(--crm-pad); }

.badge { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 0.3rem; font-size: 0.75rem; }
/* connection status */
.badge.pending   { background: #f59e0b; color: #1f1300; }
.badge.accepted  { background: #22c55e; color: #06210e; }
.badge.declined  { background: #ef4444; color: #fff; }
.badge.withdrawn { background: #6b7280; color: #fff; }
/* enrollment status */
.badge.active         { background: #3b82f6; color: #fff; }
.badge.replied        { background: #22c55e; color: #06210e; }
.badge.meeting_booked { background: #a855f7; color: #fff; }
.badge.stopped        { background: #6b7280; color: #fff; }
/* meeting status */
.badge.booked   { background: #a855f7; color: #fff; }
.badge.held     { background: #22c55e; color: #06210e; }
.badge.no_show  { background: #ef4444; color: #fff; }
.badge.cancelled{ background: #6b7280; color: #fff; }
/* campaign version status */
.badge.draft    { background: #6b7280; color: #fff; }
.badge.locked   { background: #f59e0b; color: #1f1300; }
.badge.archived { background: #374151; color: #cbd5e1; }
/* sentiment */
.badge.positive { background: #22c55e; color: #06210e; }
.badge.negative { background: #ef4444; color: #fff; }
.badge.neutral  { background: #6b7280; color: #fff; }

.worklist-badge { background: #ef4444; color: #fff; margin-left: 0.15rem; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; align-items: center; }
.kv label { margin: 0; }
.actions button { padding: 0.2rem 0.55rem; font-size: 0.8rem; }

/* Dynamic step / row builder (campaign builder, placeholder table) */
.step-row {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: end;
  margin-bottom: 0.6rem; padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--pico-muted-border-color, #2a2f36);
}
.step-row > label { margin: 0; flex: 1 1 160px; min-width: 140px; }
.step-row > .grow { flex: 3 1 320px; }
.step-row > .remove-row { margin: 0; flex: 0 0 auto; align-self: end; }

/* Copy-to-clipboard box on the worklist */
.copy-box { width: 100%; font-family: inherit; white-space: pre-wrap; }
.copy-btn { margin-top: 0.4rem; }

/* Campaign detail: stats + prospects sidebar layout */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline > li { padding: 0.5rem 0; border-bottom: 1px dashed var(--pico-muted-border-color, #2a2f36); }
.timeline .meta { font-size: 0.78rem; color: var(--pico-muted-color); }

.msg-in  { border-left: 3px solid #3b82f6; padding-left: 0.6rem; }
.msg-out { border-left: 3px solid #22c55e; padding-left: 0.6rem; }