.followup-page { min-width: 0; }
.followup-page h1 { margin-bottom: 4px; }
.followup-campaign-bar { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; border-left: 3px solid var(--accent); background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 5%, var(--surface)), var(--surface) 70%); padding: 14px 16px; }
.followup-campaign-picker { display: flex; gap: 8px; min-width: 220px; }
.followup-campaign-picker select { font-weight: 650; max-width: 400px; }
.followup-objective { flex: 1; margin: 0; }
.followup-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: .85rem; }
.followup-tabs { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 8px; background: var(--surface-soft); gap: 3px; }
.followup-tabs a { padding: 8px 12px; color: var(--muted); text-decoration: none; border-radius: 6px; white-space: nowrap; }
.followup-tabs a[aria-current] { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--accent-link); box-shadow: 0 1px 4px color-mix(in srgb, var(--text) 8%, transparent); font-weight: 650; }
.followup-search { display: flex; flex: 1; gap: 6px; min-width: 230px; max-width: 420px; }
.followup-search input { min-width: 0; }
.followup-count { color: var(--muted); }
.followup-page .is-overdue, .followup-dashboard .is-overdue { color: var(--danger); }
.followup-page .is-today, .followup-dashboard .is-today { color: var(--accent-link); }
.followup-board-hint { font-size: .8rem; margin: 0; }
.followup-board { display: flex; align-items: stretch; gap: 12px; overflow-x: auto; padding-bottom: 12px; min-height: 490px; scroll-snap-type: x mandatory; }
.followup-column { flex: 1 0 225px; min-width: 225px; background: var(--surface-soft); border: 1px solid transparent; border-radius: 10px; padding: 10px; scroll-snap-align: start; }
.followup-column > header { display: flex; gap: 8px; align-items: center; padding: 4px 2px 11px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); margin-bottom: 10px; }
.followup-column h2 { flex: 1; font-size: .86rem; line-height: 1.3; margin: 0; }
.followup-column [data-followup-count] { font-size: .75rem; color: var(--accent-link); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); padding: 2px 6px; border-radius: 5px; }
.followup-step-dot { height: 8px; width: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--accent); }
.followup-step-dot.outcome-achieved { background: var(--ok); }
.followup-step-dot.outcome-closed { background: var(--danger); }
.followup-cards { display: grid; gap: 9px; }
.followup-card { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 10px; cursor: grab; min-width: 0; }
.followup-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.followup-card.is-dragging { opacity: .45; }
.followup-column.is-drop-target { border-color: var(--accent); }
.followup-card-person { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; min-width: 0; }
.followup-avatar { width: 32px; height: 32px; min-width: 32px; font-size: .68rem; border-radius: 9px; }
.followup-identity { display: block; overflow: hidden; min-width: 0; }
.followup-identity strong { display: block; font-size: .83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.followup-identity small { display: block; color: var(--muted); font-size: .71rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.followup-card-action { display: block; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: .76rem; }
.followup-action-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.followup-card-action small { display: block; font-size: .7rem; margin-top: 4px; color: var(--muted); }
.followup-card-action.is-overdue small { color: var(--danger); }
.followup-card-action.is-today small { color: var(--accent-link); }
.followup-column-add { display: block; background: transparent; color: var(--accent-link); border: 0; width: 100%; text-align: left; padding: 12px 5px; font-size: .77rem; }
.followup-table-wrap { padding: 0; overflow-x: auto; }
.followup-table { width: 100%; min-width: 850px; border-collapse: collapse; }
.followup-table th, .followup-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: .83rem; text-align: left; }
.followup-table th { font-weight: 500; color: var(--muted); }
.followup-table select { font-size: .8rem; min-width: 150px; }
.followup-table-date { display: block; margin-top: 4px; }
.followup-table a { text-decoration: none; }
.followup-action-list { padding: 0; }
.followup-action-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.3fr) auto auto auto; gap: 16px; align-items: center; padding: 17px 20px; border-bottom: 1px solid var(--border); font-size: .8rem; }
.followup-action-row:last-child { border-bottom: 0; }
.followup-action-description small { display: block; color: var(--muted); margin-top: 5px; }
.followup-action-row button { font-size: .75rem; white-space: nowrap; }
.followup-dialog { padding: 24px; width: min(640px, calc(100vw - 24px)); max-height: 90dvh; overflow-y: auto; color: var(--text); background: var(--surface); }
.followup-dialog > header { margin-bottom: 15px; }
.followup-targets { padding: 12px; border: 1px solid var(--border); border-radius: 8px; }
.followup-targets label { margin-top: 8px; }
.followup-detail { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(460px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; overflow-y: auto; border: 0; border-left: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 24px; border-radius: 0; }
.followup-detail > * { margin-bottom: 18px; }
.followup-detail::backdrop, .followup-dialog::backdrop { background: rgb(0 0 0 / .25); }
.followup-detail-action { padding: 14px; border: 1px solid var(--border); border-radius: 8px; font-size: .85rem; }
.followup-detail-action details { margin-top: 12px; }
.followup-detail summary { cursor: pointer; font-weight: 600; }
.followup-detail details .form-stack { margin-top: 12px; }
.followup-history { padding-left: 20px; font-size: .83rem; }
.followup-history li { margin: 12px 0; }
.followup-history small { display: block; color: var(--muted); margin-top: 4px; }
.followup-campaign-form { max-width: 1060px; }
.followup-step-editor { display: grid; gap: 10px; }
.followup-step-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; }
.followup-step-row > label { flex: 1; min-width: 160px; }
.followup-step-row[hidden], [data-step-confirm-destination][hidden] { display: none; }
.followup-step-handle, .followup-step-delete { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 auto; width: 36px; height: 40px; padding: 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); }
.followup-step-handle { cursor: grab; touch-action: none; }
.followup-step-handle svg, .followup-step-delete svg { pointer-events: none; }
.followup-step-handle:hover, .followup-step-handle:focus-visible { color: var(--accent-link); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.followup-step-delete:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.followup-step-delete:disabled { opacity: .4; cursor: not-allowed; }
.followup-step-row.is-sorting { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); }
.followup-step-confirm { max-width: 520px; }
.followup-step-confirm h2 { margin: 0; }
.followup-delete-confirm { background: var(--danger); border-color: var(--danger); color: #fff; }
.followup-dashboard .followup-action-row { grid-template-columns: minmax(160px, 1fr) minmax(200px, 1.5fr) auto auto; }
.followup-dashboard .followup-action-row:first-child { padding-top: 8px; }
.followup-commercial-summary { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.followup-commercial-summary strong { display: block; margin-top: 4px; }
@media (max-width: 1200px) { .followup-action-row { grid-template-columns: minmax(180px, 1fr) minmax(200px, 1fr); } .followup-dashboard .followup-action-row { grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr); } }
@media (max-width: 650px) { .followup-page > header, .followup-campaign-bar { align-items: stretch; flex-direction: column; } .followup-campaign-picker { min-width: 0; } .followup-campaign-picker select { max-width: none; } .followup-column { flex-basis: 245px; } .followup-action-row, .followup-dashboard .followup-action-row { grid-template-columns: 1fr; gap: 10px; } .followup-search { max-width: none; flex-basis: 100%; } .followup-step-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 10px; } .followup-step-row > label { grid-column: 2; min-width: 0; } .followup-step-handle { grid-column: 1; grid-row: 1 / 4; } .followup-step-delete { grid-column: 3; grid-row: 1 / 4; } .followup-detail { padding: 18px; } }

.followup-auto-badge { font-size: 10px; font-weight: 500; color: var(--muted); white-space: nowrap; }

.followup-column-add:hover, .followup-column-add:focus-visible { color: var(--text); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.followup-board-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.followup-board-nav { display: flex; gap: 6px; flex: 0 0 auto; }
.followup-board-nav[hidden], .followup-bulk-add[hidden], .followup-picker-empty[hidden] { display: none; }
.followup-board-nav button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 5px; color: var(--text); background: var(--surface); border: 1px solid var(--border); opacity: .65; border-radius: 7px; }
.followup-board-nav button:hover, .followup-board-nav button:focus-visible { opacity: 1; color: var(--text); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.followup-board-nav button:disabled { opacity: .25; cursor: default; }
.followup-board-nav svg { width: 18px; height: 18px; }
.followup-selected-contacts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 12px 0 0; max-height: 240px; overflow-y: auto; }
.followup-selected-contacts li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 5px 4px 10px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); font-size: .83rem; max-width: 100%; }
.followup-selected-contacts li span { overflow-wrap: anywhere; }
.followup-selected-contacts button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; padding: 0; color: var(--text); background: transparent; font-size: 1.1rem; }
.followup-selected-contacts button:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.followup-picker-empty { margin-top: 12px; font-size: .83rem; }
.followup-contacts-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.followup-contacts-tools > p { margin: 0; }
.followup-bulk-add { display: inline-flex; align-items: center; gap: 5px; }
.followup-bulk-count { color: var(--muted); font-size: .75rem; white-space: nowrap; }
.followup-bulk-add select { height: 30px; padding: 3px 7px; border-radius: 6px; min-width: 115px; max-width: 200px; font-size: .78rem; }
.followup-bulk-add button { display: inline-flex; align-items: center; justify-content: center; height: 30px; width: 30px; padding: 5px; border-radius: 6px; }
.followup-bulk-add svg { width: 16px; height: 16px; }
#contacts-list-table .followup-selection-cell { width: 34px; padding-left: 8px; padding-right: 5px; }
.followup-select-page { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 26px; padding: 3px; color: var(--muted); background: transparent; border-radius: 5px; }
.followup-select-page svg { width: 17px; height: 17px; }
.followup-select-page:hover, .followup-select-page[aria-pressed="true"] { color: var(--text); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
@media (max-width: 650px) { .followup-bulk-add { flex-wrap: wrap; } .followup-bulk-add select { max-width: 150px; } .followup-board-heading { gap: 8px; } }

@media (min-width: 760px) {
    #followup-add[open] { display: flex; flex-direction: column; width: min(760px, calc(100vw - 64px)); min-height: min(640px, calc(100dvh - 64px)); }
    #followup-add > .form-stack { display: flex; flex-direction: column; flex: 1; }
    #followup-add [data-followup-contact-picker] { flex: 1; }
    #followup-add [data-followup-add-submit] { margin-top: auto; flex-shrink: 0; }
    #followup-add .searchable-select-dropdown { position: static; margin-top: 6px; max-height: none; overflow: visible; box-shadow: none; }
    #followup-add .followup-selected-contacts { max-height: none; overflow: visible; }
}
