/* folk-newsletter-manager styles */
:host { display: block; max-width: 960px; margin: 0 auto; padding: 1.5rem; color: #e5e5e5; font-family: system-ui, -apple-system, sans-serif; }

.nl-header { margin-bottom: 1.5rem; }
.nl-header h2 { font-size: 1.5rem; margin: 0 0 .25rem; }
.nl-header p { color: #a3a3a3; margin: 0; font-size: .9rem; }

/* Not-configured state */
.nl-setup { text-align: center; padding: 3rem 1.5rem; background: #1e1e2e; border: 1px dashed #404040; border-radius: 12px; }
.nl-setup h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.nl-setup p { color: #a3a3a3; margin: .5rem 0; font-size: .9rem; }
.nl-setup .nl-setup-steps { text-align: left; max-width: 420px; margin: 1.5rem auto 0; }
.nl-setup .nl-setup-steps li { color: #a3a3a3; margin-bottom: .5rem; font-size: .85rem; }

/* Tabs */
.nl-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; border-bottom: 1px solid #333; padding-bottom: 0; }
.nl-tab { padding: .6rem 1.2rem; background: none; border: none; border-bottom: 2px solid transparent; color: #a3a3a3; cursor: pointer; font-size: .9rem; transition: color .15s, border-color .15s; }
.nl-tab:hover { color: #e5e5e5; }
.nl-tab.active { color: #14b8a6; border-bottom-color: #14b8a6; }

/* Tables */
.nl-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.nl-table th { text-align: left; padding: .6rem .8rem; color: #a3a3a3; border-bottom: 1px solid #333; font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.nl-table td { padding: .6rem .8rem; border-bottom: 1px solid #1a1a2e; }
.nl-table tr:hover td { background: #1e1e2e; }

/* Badges */
.nl-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .75rem; font-weight: 500; }
.nl-badge--active { background: #14b8a622; color: #14b8a6; }
.nl-badge--draft { background: #f59e0b22; color: #f59e0b; }
.nl-badge--finished { background: #6366f122; color: #818cf8; }
.nl-badge--running { background: #14b8a622; color: #14b8a6; }
.nl-badge--paused { background: #ef444422; color: #f87171; }
.nl-badge--enabled { background: #14b8a622; color: #14b8a6; }
.nl-badge--blocklisted { background: #ef444422; color: #f87171; }

/* Buttons */
.nl-btn { padding: .5rem 1rem; border-radius: 6px; border: 1px solid #333; background: #1e1e2e; color: #e5e5e5; cursor: pointer; font-size: .85rem; transition: background .15s, border-color .15s; }
.nl-btn:hover { background: #252538; border-color: #14b8a6; }
.nl-btn--primary { background: #14b8a6; border-color: #14b8a6; color: #0a0a0a; font-weight: 500; }
.nl-btn--primary:hover { background: #0d9488; }
.nl-btn--sm { padding: .3rem .6rem; font-size: .8rem; }

/* Toolbar */
.nl-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: .75rem; flex-wrap: wrap; }
.nl-toolbar input[type="search"] { padding: .4rem .8rem; background: #0a0a0a; border: 1px solid #404040; border-radius: 6px; color: #e5e5e5; font-size: .85rem; min-width: 200px; }

/* Pagination */
.nl-pagination { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1rem; font-size: .85rem; color: #a3a3a3; }

/* Loading / Empty */
.nl-loading { text-align: center; padding: 3rem; color: #a3a3a3; }
.nl-empty { text-align: center; padding: 2rem; color: #525252; font-size: .9rem; }

/* Create campaign form */
.nl-form { background: #1e1e2e; border: 1px solid #333; border-radius: 8px; padding: 1.25rem; margin-bottom: 1.5rem; }
.nl-form label { display: block; font-size: .8rem; color: #a3a3a3; margin-bottom: .25rem; }
.nl-form input, .nl-form select, .nl-form textarea { width: 100%; padding: .45rem .7rem; background: #0a0a0a; border: 1px solid #404040; border-radius: 4px; color: #e5e5e5; font-size: .85rem; margin-bottom: .75rem; box-sizing: border-box; }
.nl-form textarea { min-height: 80px; resize: vertical; font-family: inherit; }
.nl-form-row { display: flex; gap: .75rem; }
.nl-form-row > * { flex: 1; }

/* Danger button */
.nl-btn--danger { border-color: #ef4444; color: #f87171; }
.nl-btn--danger:hover { background: #ef444422; border-color: #f87171; }
.nl-btn--send { background: #6366f1; border-color: #6366f1; color: #fff; font-weight: 500; }
.nl-btn--send:hover { background: #4f46e5; }

/* Actions cell */
.nl-actions-cell { white-space: nowrap; }
.nl-actions-cell .nl-btn { margin-right: .25rem; }

/* Error */
.nl-error { padding: .75rem 1rem; background: #ef444422; border: 1px solid #ef4444; border-radius: 6px; color: #f87171; font-size: .85rem; margin-bottom: 1rem; }

/* ── Editor ── */
.nl-editor-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.nl-editor-header h2 { font-size: 1.3rem; margin: 0; }

.nl-editor-fields { margin-bottom: 1rem; }
.nl-editor-fields label { display: block; font-size: .8rem; color: #a3a3a3; margin-bottom: .25rem; }
.nl-editor-fields input { width: 100%; padding: .45rem .7rem; background: #0a0a0a; border: 1px solid #404040; border-radius: 4px; color: #e5e5e5; font-size: .85rem; margin-bottom: .75rem; box-sizing: border-box; }

/* List selector */
.nl-list-selector { display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem; background: #1e1e2e; border: 1px solid #333; border-radius: 6px; margin-bottom: 1rem; min-height: 2.5rem; align-items: center; }
.nl-list-option { display: flex; align-items: center; gap: .4rem; padding: .3rem .6rem; background: #0a0a0a; border: 1px solid #333; border-radius: 4px; cursor: pointer; font-size: .82rem; transition: border-color .15s; }
.nl-list-option:hover { border-color: #14b8a6; }
.nl-list-option input[type="checkbox"] { accent-color: #14b8a6; }
.nl-list-count { color: #a3a3a3; font-size: .75rem; margin-left: .25rem; }

/* Editor body + preview */
.nl-editor { display: flex; gap: 1rem; margin-bottom: 1rem; }
.nl-editor__body { flex: 1; display: flex; flex-direction: column; }
.nl-editor__body label { font-size: .8rem; color: #a3a3a3; margin-bottom: .25rem; }
.nl-editor__body textarea { flex: 1; min-height: 300px; padding: .6rem .8rem; background: #0a0a0a; border: 1px solid #404040; border-radius: 4px; color: #e5e5e5; font-size: .85rem; font-family: 'Fira Code', 'Cascadia Code', monospace; resize: vertical; box-sizing: border-box; line-height: 1.5; }
.nl-editor__preview { flex: 1; display: flex; flex-direction: column; }
.nl-editor__preview label { font-size: .8rem; color: #a3a3a3; margin-bottom: .25rem; }
.nl-preview-frame { flex: 1; min-height: 300px; border: 1px solid #404040; border-radius: 4px; background: #fff; }

/* Editor action bar */
.nl-editor-actions { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; padding-top: .75rem; border-top: 1px solid #333; }
.nl-editor-actions__left, .nl-editor-actions__right { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.nl-schedule-group { display: flex; align-items: center; gap: .35rem; }
.nl-schedule-group input[type="datetime-local"] { padding: .4rem .5rem; background: #0a0a0a; border: 1px solid #404040; border-radius: 4px; color: #e5e5e5; font-size: .82rem; }

/* Responsive: stack editor panes vertically on narrow screens */
@media (max-width: 700px) {
	.nl-editor { flex-direction: column; }
	.nl-editor-actions { flex-direction: column; align-items: stretch; }
	.nl-editor-actions__left, .nl-editor-actions__right { justify-content: center; }
	.nl-form-row { flex-direction: column; }
	.nl-schedule-group { flex-wrap: wrap; }
}