/*!
 * SmartMail CRM — Frontend app styles.
 * All selectors are scoped under .smcrm-app so they cannot leak into
 * the surrounding theme.
 */

.smcrm-app {
    /* Design tokens — Mocha-style SaaS CRM (all scoped; never leaks to theme) */
    --smcrm-bg-page: #f1f5f9;
    --smcrm-bg-subtle: #f8fafc;
    --smcrm-surface: #ffffff;
    --smcrm-border: #e2e8f0;
    --smcrm-border-strong: #cbd5e1;
    --smcrm-text: #0f172a;
    --smcrm-text-secondary: #64748b;
    --smcrm-text-muted: #94a3b8;
    --smcrm-primary: #2563eb;
    --smcrm-primary-hover: #1d4ed8;
    --smcrm-primary-soft: #eff6ff;
    --smcrm-danger: #dc2626;
    --smcrm-danger-soft: #fef2f2;
    --smcrm-success: #16a34a;
    --smcrm-success-soft: #f0fdf4;
    --smcrm-warning: #d97706;
    --smcrm-warning-soft: #fffbeb;
    --smcrm-radius-sm: 6px;
    --smcrm-radius: 10px;
    --smcrm-radius-lg: 14px;
    --smcrm-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --smcrm-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --smcrm-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .04);
    --smcrm-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, .08), 0 4px 6px -4px rgba(15, 23, 42, .04);
    --smcrm-space-xs: 4px;
    --smcrm-space-sm: 8px;
    --smcrm-space: 16px;
    --smcrm-space-lg: 24px;
    --smcrm-space-xl: 32px;
    --smcrm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    --smcrm-z-modal: 10000;
    --smcrm-z-overlay: 9999;

    box-sizing: border-box;
    color: var(--smcrm-text);
    font-family: var(--smcrm-font);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 24px;
    max-width: 100%;
}

.smcrm-app *,
.smcrm-app *::before,
.smcrm-app *::after {
    box-sizing: inherit;
}

/* ── Layout chrome ───────────────────────────────────────────────────── */
.smcrm-app__header {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
    padding-bottom: 12px;
}

.smcrm-app__brand {
    color: #6b7280;
    font-size: 12px;
    letter-spacing: .08em;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.smcrm-app__title {
    color: #111827;
    font-size: 24px;
    line-height: 1.2;
    margin: 0 0 6px;
}

.smcrm-app__muted {
    color: #6b7280;
    margin: 0;
}

.smcrm-app__body { display: block; }

/* ── Nav (used by [smartmail_app] router) ────────────────────────── */
.smcrm-app .smcrm-app__nav {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
    padding: 8px;
}

.smcrm-app .smcrm-app__nav-link {
    background: transparent;
    border-radius: 6px;
    color: #1f2937;
    font-weight: 500;
    padding: 6px 12px;
    text-decoration: none;
    transition: background-color .15s ease;
}

.smcrm-app .smcrm-app__nav-link:hover {
    background: #e5e7eb;
}

.smcrm-app .smcrm-app__nav-link.is-active {
    background: #2563eb;
    color: #fff;
}

/* ── Stat cards ─────────────────────────────────────────────────────── */
.smcrm-app .smcrm-stats {
    display: grid;
    gap: var(--smcrm-space);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-bottom: var(--smcrm-space-lg);
}

.smcrm-app .smcrm-stat,
.smcrm-app .smcrm-stat-card {
    background: var(--smcrm-surface);
    border: 1px solid var(--smcrm-border);
    border-radius: var(--smcrm-radius);
    box-shadow: var(--smcrm-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--smcrm-space) 18px;
    position: relative;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.smcrm-app .smcrm-stat:hover,
.smcrm-app .smcrm-stat-card:hover {
    border-color: #cbd5e1;
    box-shadow: var(--smcrm-shadow);
}

.smcrm-app .smcrm-stat-card__label,
.smcrm-app .smcrm-stat__label {
    color: var(--smcrm-text-secondary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.smcrm-app .smcrm-stat-card__value,
.smcrm-app .smcrm-stat__value {
    color: var(--smcrm-text);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.smcrm-app .smcrm-stat-card__hint {
    color: var(--smcrm-text-muted);
    font-size: 13px;
    margin-top: 2px;
}
/* ── Tables ─────────────────────────────────────────────────────────── */
.smcrm-app .smcrm-table-wrap {
    -webkit-overflow-scrolling: touch;
    background: var(--smcrm-surface);
    border: 1px solid var(--smcrm-border);
    border-radius: var(--smcrm-radius);
    box-shadow: var(--smcrm-shadow-sm);
    margin-bottom: var(--smcrm-space);
    overflow-x: auto;
    width: 100%;
}

.smcrm-app .smcrm-table-wrap .smcrm-table {
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    min-width: 560px;
}

.smcrm-app .smcrm-table {
    background: var(--smcrm-surface);
    border: 1px solid var(--smcrm-border);
    border-collapse: collapse;
    border-radius: var(--smcrm-radius);
    box-shadow: var(--smcrm-shadow-sm);
    overflow: hidden;
    width: 100%;
}

.smcrm-app .smcrm-table th,
.smcrm-app .smcrm-table td {
    border-bottom: 1px solid var(--smcrm-border);
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
}

.smcrm-app .smcrm-table th {
    background: var(--smcrm-bg-subtle);
    color: var(--smcrm-text-secondary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.smcrm-app .smcrm-table tbody tr {
    transition: background-color .12s ease;
}

.smcrm-app .smcrm-table tbody tr:hover {
    background: #fafbfc;
}

.smcrm-app .smcrm-table tr:last-child td { border-bottom: 0; }
.smcrm-app .smcrm-num { text-align: right; white-space: nowrap; }
.smcrm-app .smcrm-muted { color: #6b7280; font-size: 13px; }
.smcrm-app .smcrm-link { color: #2563eb; text-decoration: none; }
.smcrm-app .smcrm-link:hover { text-decoration: underline; }
.smcrm-app .smcrm-message { word-break: break-word; }

/* ── Filters / forms ───────────────────────────────────────────────── */
.smcrm-app .smcrm-filters {
    align-items: center;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 12px;
}

.smcrm-app .smcrm-filters input,
.smcrm-app .smcrm-filters select {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #111827;
    font-size: 14px;
    padding: 6px 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.smcrm-app .smcrm-filters input:focus,
.smcrm-app .smcrm-filters select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
    outline: none;
}

.smcrm-app .smcrm-filters label {
    align-items: center;
    color: #374151;
    display: inline-flex;
    font-size: 13px;
    gap: 6px;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.smcrm-app .smcrm-btn {
    background: var(--smcrm-surface);
    border: 1px solid var(--smcrm-border-strong);
    border-radius: var(--smcrm-radius-sm);
    box-shadow: var(--smcrm-shadow-sm);
    color: var(--smcrm-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    gap: 6px;
    line-height: 1.25;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.smcrm-app .smcrm-btn:hover {
    background: var(--smcrm-bg-subtle);
    border-color: #94a3b8;
    box-shadow: var(--smcrm-shadow);
}

.smcrm-app .smcrm-btn:focus-visible {
    outline: 2px solid var(--smcrm-primary);
    outline-offset: 2px;
}

.smcrm-app .smcrm-btn:disabled,
.smcrm-app .smcrm-btn.is-disabled {
    cursor: not-allowed;
    opacity: .55;
    pointer-events: none;
}

.smcrm-app .smcrm-btn--primary,
.smcrm-app .smcrm-btn-primary {
    background: var(--smcrm-primary);
    border-color: var(--smcrm-primary-hover);
    box-shadow: 0 1px 2px rgba(37, 99, 235, .2);
    color: #fff;
}

.smcrm-app .smcrm-btn--primary:hover,
.smcrm-app .smcrm-btn-primary:hover {
    background: var(--smcrm-primary-hover);
    border-color: #1e40af;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .28);
}

.smcrm-app .smcrm-btn-secondary,
.smcrm-app .smcrm-btn--secondary {
    background: var(--smcrm-surface);
    border-color: var(--smcrm-border);
    box-shadow: var(--smcrm-shadow-sm);
    color: var(--smcrm-text-secondary);
}

.smcrm-app .smcrm-btn-secondary:hover,
.smcrm-app .smcrm-btn--secondary:hover {
    background: var(--smcrm-bg-subtle);
    border-color: var(--smcrm-border-strong);
    color: var(--smcrm-text);
}

.smcrm-app .smcrm-btn-danger,
.smcrm-app .smcrm-btn--danger {
    background: var(--smcrm-surface);
    border-color: #fecaca;
    color: var(--smcrm-danger);
}

.smcrm-app .smcrm-btn-danger:hover,
.smcrm-app .smcrm-btn--danger:hover {
    background: var(--smcrm-danger-soft);
    border-color: #f87171;
}

.smcrm-app .smcrm-btn-sm {
    font-size: 13px;
    padding: 5px 12px;
}

.smcrm-app .smcrm-btn-lg {
    font-size: 15px;
    padding: 10px 20px;
}
/* ── Definition lists ───────────────────────────────────────────────── */
.smcrm-app .smcrm-kv {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin: 0 0 16px;
    padding: 4px 0;
}

.smcrm-app .smcrm-kv__row {
    border-bottom: 1px solid #f3f4f6;
    display: grid;
    gap: 8px;
    grid-template-columns: 200px 1fr;
    padding: 10px 14px;
}

.smcrm-app .smcrm-kv__row:last-child { border-bottom: 0; }

.smcrm-app .smcrm-kv__label {
    color: #6b7280;
    font-size: 13px;
    margin: 0;
}

.smcrm-app .smcrm-kv__value {
    color: #111827;
    margin: 0;
    word-break: break-word;
}

/* ── Sections / cards ───────────────────────────────────────────────── */
.smcrm-app .smcrm-section { margin-top: 24px; }
.smcrm-app .smcrm-section__title {
    color: #111827;
    font-size: 18px;
    margin: 0 0 12px;
}

.smcrm-app .smcrm-cards {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 16px;
}

.smcrm-app .smcrm-card {
    background: var(--smcrm-surface);
    border: 1px solid var(--smcrm-border);
    border-radius: var(--smcrm-radius);
    box-shadow: var(--smcrm-shadow-sm);
    padding: var(--smcrm-space);
}

.smcrm-app .smcrm-card__header {
    align-items: flex-start;
    border-bottom: 1px solid var(--smcrm-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--smcrm-space-sm);
    justify-content: space-between;
    margin: calc(-1 * var(--smcrm-space)) calc(-1 * var(--smcrm-space)) var(--smcrm-space);
    padding: var(--smcrm-space) var(--smcrm-space) 14px;
}

.smcrm-app .smcrm-card__title {
    color: var(--smcrm-text);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.smcrm-app .smcrm-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--smcrm-space-sm);
}

.smcrm-app .smcrm-card__body { margin: 0; }

.smcrm-app .smcrm-card__footer {
    border-top: 1px solid var(--smcrm-border);
    margin: var(--smcrm-space) calc(-1 * var(--smcrm-space)) calc(-1 * var(--smcrm-space));
    padding: 14px var(--smcrm-space);
}

.smcrm-app .smcrm-card h3 {
    color: var(--smcrm-text);
    font-size: 16px;
    margin: 0 0 6px;
}
.smcrm-app .smcrm-list {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.smcrm-app .smcrm-list li {
    border-bottom: 1px solid #f3f4f6;
    padding: 10px 14px;
}

.smcrm-app .smcrm-list li:last-child { border-bottom: 0; }

/* ── Pager ──────────────────────────────────────────────────────────── */
.smcrm-app .smcrm-pager {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

/* ── Status badges ──────────────────────────────────────────────────── */
.smcrm-app .smcrm-badge {
    background: #e2e8f0;
    border-radius: 999px;
    color: #475569;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 4px 10px;
    text-transform: uppercase;
    vertical-align: middle;
}

.smcrm-app .smcrm-badge-success,
.smcrm-app .smcrm-badge--active,
.smcrm-app .smcrm-badge--sent,
.smcrm-app .smcrm-badge--published,
.smcrm-app .smcrm-badge--info,
.smcrm-app .smcrm-badge--success {
    background: #dcfce7;
    color: #166534;
}

.smcrm-app .smcrm-badge-warning,
.smcrm-app .smcrm-badge--pending,
.smcrm-app .smcrm-badge--scheduled,
.smcrm-app .smcrm-badge--draft,
.smcrm-app .smcrm-badge--paused,
.smcrm-app .smcrm-badge--debug {
    background: #fef9c3;
    color: #854d0e;
}

.smcrm-app .smcrm-badge-danger,
.smcrm-app .smcrm-badge--failed,
.smcrm-app .smcrm-badge--unsubscribed,
.smcrm-app .smcrm-badge--error {
    background: #fee2e2;
    color: #991b1b;
}

.smcrm-app .smcrm-badge--warning,
.smcrm-app .smcrm-badge--sending {
    background: #ffedd5;
    color: #9a3412;
}
/* ── Auth screens (login required + access denied) ──────────────── */
.smcrm-app .smcrm-auth-screen {
    align-items: center;
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    display: flex;
    flex-direction: column;
    margin: 16px auto;
    max-width: 460px;
    padding: 36px 28px;
    text-align: center;
}

.smcrm-app .smcrm-auth-screen__icon {
    align-items: center;
    background: #eff6ff;
    border-radius: 999px;
    color: #2563eb;
    display: flex;
    height: 88px;
    justify-content: center;
    margin-bottom: 18px;
    width: 88px;
}

.smcrm-app .smcrm-auth-screen__icon--danger {
    background: #fef2f2;
    color: #dc2626;
}

.smcrm-app .smcrm-auth-screen .smcrm-app__brand {
    margin-bottom: 6px;
}

.smcrm-app .smcrm-auth-screen .smcrm-app__title {
    font-size: 22px;
    margin: 0 0 8px;
}

.smcrm-app .smcrm-auth-screen .smcrm-app__muted {
    margin: 0 0 18px;
}

.smcrm-app .smcrm-auth-screen__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Legacy denied container (kept for backwards compatibility) */
.smcrm-app--denied {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────
 * [smartmail_app] SaaS shell — sidebar + topbar + main + mobile drawer.
 * Hash-routed; all chrome lives here so renderers stay layout-free
 * (smcrm_frontend_wrap drops its brand/title block when in-shell).
 * ───────────────────────────────────────────────────────────────────── */

.smcrm-app .smcrm-shell,
.smcrm-app .smcrm-layout {
    background: var(--smcrm-bg-page);
    border: 1px solid var(--smcrm-border);
    border-radius: var(--smcrm-radius-lg);
    box-shadow: var(--smcrm-shadow-sm);
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 640px;
    overflow: hidden;
    position: relative;
}

/* ── Sidebar ────────────────────────────────────────────────────────── */
.smcrm-app .smcrm-sidebar {
    background: var(--smcrm-surface);
    border-right: 1px solid var(--smcrm-border);
    display: flex;
    flex-direction: column;
    padding: 18px 12px;
}

.smcrm-app .smcrm-sidebar__brand {
    align-items: center;
    display: flex;
    gap: 10px;
    padding: 4px 8px 18px;
}

.smcrm-app .smcrm-sidebar__logo,
.smcrm-app .smcrm-sidebar-logo {
    align-items: center;
    background: var(--smcrm-primary);
    border-radius: 9px;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .28);
    color: #ffffff;
    display: flex;
    flex-shrink: 0;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.smcrm-app .smcrm-sidebar-logo svg,
.smcrm-app .smcrm-sidebar__logo svg { display: block; }

.smcrm-app .smcrm-sidebar__brand-name {
    color: #111827;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.smcrm-app .smcrm-sidebar__nav,
.smcrm-app .smcrm-nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    overflow-y: auto;
    padding-right: 2px;
}

.smcrm-app .smcrm-sidebar__item,
.smcrm-app .smcrm-nav-item {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--smcrm-radius-sm);
    color: #475569;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    gap: 12px;
    line-height: inherit;
    padding: 8px 12px;
    text-align: left;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.smcrm-app .smcrm-sidebar__item:hover,
.smcrm-app .smcrm-nav-item:hover {
    background: var(--smcrm-bg-subtle);
    color: var(--smcrm-text);
}

.smcrm-app .smcrm-sidebar__item.is-active,
.smcrm-app .smcrm-nav-item.is-active {
    background: var(--smcrm-primary-soft);
    color: var(--smcrm-primary-hover);
}

.smcrm-app .smcrm-sidebar__item.is-active .smcrm-sidebar__icon,
.smcrm-app .smcrm-nav-item.is-active .smcrm-sidebar__icon { color: var(--smcrm-primary); }

.smcrm-app .smcrm-nav-item.is-active .smcrm-nav-icon { color: var(--smcrm-primary); }

.smcrm-app .smcrm-nav-item:hover .smcrm-nav-icon { color: #64748b; }
.smcrm-app .smcrm-sidebar__icon {
    align-items: center;
    color: #9ca3af;
    display: inline-flex;
    flex-shrink: 0;
    height: 20px;
    justify-content: center;
    width: 20px;
}

.smcrm-app .smcrm-sidebar__icon svg { display: block; }

.smcrm-app .smcrm-nav-item .smcrm-nav-icon,
.smcrm-app .smcrm-nav-icon {
    align-items: center;
    color: #94a3b8;
    display: inline-flex;
    flex-shrink: 0;
    height: 20px;
    justify-content: center;
    width: 20px;
}

.smcrm-app .smcrm-nav-icon svg { display: block; }

.smcrm-app .smcrm-sidebar__label { line-height: 1.2; }
.smcrm-app .smcrm-sidebar__footer {
    border-top: 1px solid #f3f4f6;
    margin-top: 12px;
    padding-top: 12px;
}

.smcrm-app .smcrm-sidebar__footer-link {
    color: #6b7280;
    display: inline-block;
    font-size: 13px;
    padding: 4px 8px;
    text-decoration: none;
}

.smcrm-app .smcrm-sidebar__footer-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* ── Main column ────────────────────────────────────────────────────── */
.smcrm-app .smcrm-main {
    background: var(--smcrm-bg-page);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Page content column (inside main, below topbar) */
.smcrm-app .smcrm-page {
    flex: 1;
    min-height: 0;
    min-width: 0;
}

.smcrm-app .smcrm-content.smcrm-page,
.smcrm-app .smcrm-page.smcrm-content {
    padding: var(--smcrm-space-lg) var(--smcrm-space-lg) 28px;
}

.smcrm-app .smcrm-topbar {
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 14px 24px;
}

.smcrm-app .smcrm-topbar__left {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.smcrm-app .smcrm-topbar__title {
    color: #111827;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smcrm-app .smcrm-topbar__right {
    align-items: center;
    display: flex;
    gap: 12px;
}

.smcrm-app .smcrm-topbar__user {
    align-items: center;
    color: #4b5563;
    display: inline-flex;
    font-size: 13px;
    gap: 8px;
}

.smcrm-app .smcrm-topbar__avatar {
    align-items: center;
    background: #2563eb;
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    height: 28px;
    justify-content: center;
    letter-spacing: .02em;
    width: 28px;
}

.smcrm-app .smcrm-topbar__user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smcrm-app .smcrm-mobile-toggle {
    align-items: center;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #111827;
    cursor: pointer;
    display: none;
    height: 36px;
    justify-content: center;
    padding: 0;
    transition: background-color .15s ease;
    width: 36px;
}

.smcrm-app .smcrm-mobile-toggle:hover { background: #f3f4f6; }
.smcrm-app .smcrm-mobile-toggle svg { display: block; }

/* ── Content area ───────────────────────────────────────────────────── */
.smcrm-app .smcrm-content {
    flex: 1;
    min-height: 420px;
    padding: 22px 24px 28px;
    position: relative;
}

.smcrm-app .smcrm-content__inner { transition: opacity .18s ease; }

.smcrm-app .smcrm-content--loading .smcrm-content__inner {
    opacity: .35;
    pointer-events: none;
}

.smcrm-app .smcrm-content__loader {
    display: none;
    inset: 0;
    justify-content: center;
    padding-top: 60px;
    position: absolute;
    z-index: 1;
}

.smcrm-app .smcrm-content--loading .smcrm-content__loader {
    display: flex;
}

.smcrm-app .smcrm-spinner {
    animation: smcrm-spin 0.9s linear infinite;
    border: 3px solid #e5e7eb;
    border-radius: 50%;
    border-top-color: #2563eb;
    display: inline-block;
    height: 32px;
    width: 32px;
}

@keyframes smcrm-spin { to { transform: rotate(360deg); } }

/* In-shell renderers skip the brand/title header — give the body a hint
 * of breathing room since the surrounding shell already provides it. */
.smcrm-app .smcrm-app__body--in-shell { margin: 0; }
.smcrm-app .smcrm-app__body--in-shell > .smcrm-section:first-child { margin-top: 0; }
.smcrm-app .smcrm-app__intro { margin: 0 0 16px; }

/* ── Mobile drawer ──────────────────────────────────────────────────── */
.smcrm-app .smcrm-overlay {
    background: rgba(15, 23, 42, .42);
    display: none;
    inset: 0;
    position: fixed;
    z-index: 9998;
}

@media (max-width: 880px) {
    .smcrm-app .smcrm-shell,
    .smcrm-app .smcrm-layout {
        border-radius: 12px;
        grid-template-columns: 1fr;
        min-height: 560px;
    }

    .smcrm-app .smcrm-sidebar {
        bottom: 0;
        box-shadow: 0 0 30px rgba(15, 23, 42, .12);
        left: 0;
        max-width: 84vw;
        position: fixed;
        top: 0;
        transform: translateX(-100%);
        transition: transform .25s ease;
        width: 280px;
        z-index: 9999;
    }

    .smcrm-app .smcrm-shell--open .smcrm-sidebar,
    .smcrm-app .smcrm-layout--open .smcrm-sidebar { transform: translateX(0); }

    .smcrm-app .smcrm-shell--open .smcrm-overlay,
    .smcrm-app .smcrm-layout--open .smcrm-overlay { display: block; }

    .smcrm-app .smcrm-mobile-toggle { display: inline-flex; }

    .smcrm-app .smcrm-topbar { padding: 12px 16px; }
    .smcrm-app .smcrm-content { padding: 16px 16px 22px; }
    .smcrm-app .smcrm-topbar__user-name { display: none; }
}

/* ── Responsive (existing breakpoint) ───────────────────────────────── */
@media (max-width: 600px) {
    .smcrm-app .smcrm-kv__row { grid-template-columns: 1fr; }
    .smcrm-app .smcrm-table th,
    .smcrm-app .smcrm-table td { padding: 8px 10px; }
    .smcrm-app .smcrm-app__title { font-size: 20px; }
    .smcrm-app .smcrm-topbar__title { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * Design system — Mocha-style SaaS CRM components
 * (grid, forms, tabs, modals, alerts, empty states, loading)
 * All selectors remain under .smcrm-app — no global element styling.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Grid ───────────────────────────────────────────────────────────── */
.smcrm-app .smcrm-grid {
    display: grid;
    gap: var(--smcrm-space);
    margin-bottom: var(--smcrm-space);
    width: 100%;
}

.smcrm-app .smcrm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.smcrm-app .smcrm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.smcrm-app .smcrm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .smcrm-app .smcrm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .smcrm-app .smcrm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .smcrm-app .smcrm-grid--2,
    .smcrm-app .smcrm-grid--3,
    .smcrm-app .smcrm-grid--4 { grid-template-columns: 1fr; }
}

/* ── Forms & fields ──────────────────────────────────────────────────── */
.smcrm-app .smcrm-form {
    display: flex;
    flex-direction: column;
    gap: var(--smcrm-space);
    margin: 0;
    max-width: 100%;
}

.smcrm-app .smcrm-form--inline {
    align-items: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
}

.smcrm-app .smcrm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    max-width: 100%;
}

.smcrm-app .smcrm-field--inline {
    flex: 1 1 180px;
    min-width: 0;
}

.smcrm-app .smcrm-field__label {
    color: var(--smcrm-text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.smcrm-app .smcrm-field__hint {
    color: var(--smcrm-text-muted);
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
}

.smcrm-app .smcrm-field__error {
    color: var(--smcrm-danger);
    font-size: 12px;
    margin: 0;
}

.smcrm-app .smcrm-form .smcrm-field input[type="text"],
.smcrm-app .smcrm-form .smcrm-field input[type="email"],
.smcrm-app .smcrm-form .smcrm-field input[type="url"],
.smcrm-app .smcrm-form .smcrm-field input[type="number"],
.smcrm-app .smcrm-form .smcrm-field input[type="password"],
.smcrm-app .smcrm-form .smcrm-field input[type="search"],
.smcrm-app .smcrm-form .smcrm-field input[type="date"],
.smcrm-app .smcrm-form .smcrm-field input[type="datetime-local"],
.smcrm-app .smcrm-form .smcrm-field input[type="time"],
.smcrm-app .smcrm-form .smcrm-field select,
.smcrm-app .smcrm-form .smcrm-field textarea {
    appearance: none;
    background: var(--smcrm-surface);
    border: 1px solid var(--smcrm-border);
    border-radius: var(--smcrm-radius-sm);
    box-shadow: var(--smcrm-shadow-sm);
    color: var(--smcrm-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    max-width: 100%;
    padding: 8px 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
}

.smcrm-app .smcrm-form .smcrm-field textarea {
    min-height: 100px;
    resize: vertical;
}

.smcrm-app .smcrm-form .smcrm-field input:focus,
.smcrm-app .smcrm-form .smcrm-field select:focus,
.smcrm-app .smcrm-form .smcrm-field textarea:focus {
    border-color: var(--smcrm-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    outline: none;
}

.smcrm-app .smcrm-form .smcrm-field.is-invalid input,
.smcrm-app .smcrm-form .smcrm-field.is-invalid select,
.smcrm-app .smcrm-form .smcrm-field.is-invalid textarea {
    border-color: #f87171;
}

.smcrm-app .smcrm-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--smcrm-space);
}

/* ── Tabs ───────────────────────────────────────────────────────────── */
.smcrm-app .smcrm-tabs {
    border-bottom: 1px solid var(--smcrm-border);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 var(--smcrm-space-lg);
}

.smcrm-app .smcrm-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.smcrm-app .smcrm-tabs__item { margin: 0; }

.smcrm-app .smcrm-tabs__trigger {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--smcrm-radius-sm) var(--smcrm-radius-sm) 0 0;
    color: var(--smcrm-text-secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: inherit;
    margin-bottom: -1px;
    padding: 10px 16px;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.smcrm-app .smcrm-tabs__trigger:hover {
    background: var(--smcrm-bg-subtle);
    color: var(--smcrm-text);
}

.smcrm-app .smcrm-tabs__trigger.is-active,
.smcrm-app .smcrm-tabs__trigger[aria-selected="true"] {
    background: var(--smcrm-surface);
    border-bottom-color: var(--smcrm-primary);
    color: var(--smcrm-primary);
}

.smcrm-app .smcrm-tabs__panel {
    display: none;
    margin-top: var(--smcrm-space);
}

.smcrm-app .smcrm-tabs__panel.is-active,
.smcrm-app .smcrm-tabs__panel[aria-hidden="false"] {
    display: block;
}

/* ── Alerts ─────────────────────────────────────────────────────────── */
.smcrm-app .smcrm-alert {
    align-items: flex-start;
    border: 1px solid var(--smcrm-border);
    border-radius: var(--smcrm-radius);
    box-shadow: var(--smcrm-shadow-sm);
    display: flex;
    font-size: 14px;
    gap: 12px;
    line-height: 1.5;
    margin: 0 0 var(--smcrm-space);
    padding: 14px 16px;
}

.smcrm-app .smcrm-alert__icon {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    margin-top: 1px;
}

.smcrm-app .smcrm-alert__body { flex: 1; min-width: 0; }

.smcrm-app .smcrm-alert__title {
    font-weight: 600;
    margin: 0 0 4px;
}

.smcrm-app .smcrm-alert__text { color: var(--smcrm-text-secondary); margin: 0; }

.smcrm-app .smcrm-alert--info {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: var(--smcrm-text);
}

.smcrm-app .smcrm-alert--success {
    background: var(--smcrm-success-soft);
    border-color: #bbf7d0;
    color: #14532d;
}

.smcrm-app .smcrm-alert--warning {
    background: var(--smcrm-warning-soft);
    border-color: #fde68a;
    color: #78350f;
}

.smcrm-app .smcrm-alert--danger {
    background: var(--smcrm-danger-soft);
    border-color: #fecaca;
    color: #7f1d1d;
}

/* ── Empty state ────────────────────────────────────────────────────── */
.smcrm-app .smcrm-empty-state,
.smcrm-app .smcrm-app__empty {
    align-items: center;
    background: var(--smcrm-bg-subtle);
    border: 1px dashed var(--smcrm-border-strong);
    border-radius: var(--smcrm-radius);
    color: var(--smcrm-text-secondary);
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 var(--smcrm-space);
    padding: var(--smcrm-space-xl) var(--smcrm-space);
    text-align: center;
}

.smcrm-app .smcrm-empty-state__icon {
    align-items: center;
    background: var(--smcrm-surface);
    border-radius: 999px;
    box-shadow: var(--smcrm-shadow-sm);
    color: var(--smcrm-text-muted);
    display: flex;
    height: 56px;
    justify-content: center;
    margin-bottom: 4px;
    width: 56px;
}

.smcrm-app .smcrm-empty-state__title {
    color: var(--smcrm-text);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.smcrm-app .smcrm-empty-state__text {
    font-size: 14px;
    margin: 0;
    max-width: 360px;
}

.smcrm-app .smcrm-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--smcrm-space-sm);
    justify-content: center;
    margin-top: 8px;
}

/* ── Modal ─────────────────────────────────────────────────────────── */
.smcrm-app .smcrm-modal-backdrop {
    align-items: center;
    animation: smcrm-fade-in .2s ease;
    background: rgba(15, 23, 42, .45);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: var(--smcrm-space);
    position: fixed;
    z-index: var(--smcrm-z-modal);
}

.smcrm-app .smcrm-modal-backdrop[hidden],
.smcrm-app .smcrm-modal-backdrop.is-hidden { display: none; }

.smcrm-app .smcrm-modal {
    animation: smcrm-modal-in .22s ease;
    background: var(--smcrm-surface);
    border: 1px solid var(--smcrm-border);
    border-radius: var(--smcrm-radius-lg);
    box-shadow: var(--smcrm-shadow-lg);
    display: flex;
    flex-direction: column;
    max-height: min(90vh, 720px);
    max-width: 520px;
    overflow: hidden;
    width: 100%;
}

.smcrm-app .smcrm-modal--lg { max-width: 720px; }

.smcrm-app .smcrm-modal__header {
    align-items: flex-start;
    border-bottom: 1px solid var(--smcrm-border);
    display: flex;
    gap: var(--smcrm-space);
    justify-content: space-between;
    padding: var(--smcrm-space) var(--smcrm-space-lg);
}

.smcrm-app .smcrm-modal__title {
    color: var(--smcrm-text);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.smcrm-app .smcrm-modal__close {
    align-items: center;
    background: var(--smcrm-bg-subtle);
    border: 1px solid var(--smcrm-border);
    border-radius: var(--smcrm-radius-sm);
    color: var(--smcrm-text-secondary);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-family: inherit;
    font-size: 18px;
    height: 32px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background-color .15s ease, color .15s ease;
    width: 32px;
}

.smcrm-app .smcrm-modal__close:hover {
    background: var(--smcrm-border);
    color: var(--smcrm-text);
}

.smcrm-app .smcrm-modal__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--smcrm-space-lg);
}

.smcrm-app .smcrm-modal__footer {
    background: var(--smcrm-bg-subtle);
    border-top: 1px solid var(--smcrm-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--smcrm-space-sm);
    justify-content: flex-end;
    padding: 14px var(--smcrm-space-lg);
}

@keyframes smcrm-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes smcrm-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Loading / skeleton ─────────────────────────────────────────────── */
.smcrm-app .smcrm-loading {
    align-items: center;
    color: var(--smcrm-text-muted);
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    min-height: 160px;
    padding: var(--smcrm-space-lg);
}

.smcrm-app .smcrm-loading__text {
    font-size: 14px;
    margin: 0;
}

.smcrm-app .smcrm-skeleton {
    animation: smcrm-shimmer 1.2s ease-in-out infinite;
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
    background-size: 200% 100%;
    border-radius: var(--smcrm-radius-sm);
    height: 14px;
    max-width: 100%;
}

.smcrm-app .smcrm-skeleton--title { height: 22px; width: 40%; }
.smcrm-app .smcrm-skeleton--line { width: 100%; }
.smcrm-app .smcrm-skeleton--short { width: 60%; }

@keyframes smcrm-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.smcrm-app .smcrm-skeleton-card {
    background: var(--smcrm-surface);
    border: 1px solid var(--smcrm-border);
    border-radius: var(--smcrm-radius);
    box-shadow: var(--smcrm-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--smcrm-space);
}

/* -------------------------------------------------------------------------
 * Page toolbar (used above index tables and form cards)
 * ------------------------------------------------------------------------- */
.smcrm-app .smcrm-toolbar {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--smcrm-space);
    justify-content: space-between;
    margin-bottom: var(--smcrm-space);
}

.smcrm-app .smcrm-toolbar__title {
    flex: 1 1 280px;
    min-width: 0;
}

.smcrm-app .smcrm-toolbar__title .smcrm-card__heading {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 4px;
}

.smcrm-app .smcrm-toolbar__title .smcrm-muted {
    color: var(--smcrm-text-secondary);
    font-size: 14px;
    margin: 0;
}

.smcrm-app .smcrm-toolbar__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

/* Section heading inside cards */
.smcrm-app .smcrm-card__heading {
    color: var(--smcrm-text);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
}

/* -------------------------------------------------------------------------
 * Inline text helpers
 * ------------------------------------------------------------------------- */
.smcrm-app .smcrm-strong {
    color: var(--smcrm-text);
    font-weight: 600;
    text-decoration: none;
}

.smcrm-app .smcrm-strong:hover {
    color: var(--smcrm-primary);
    text-decoration: underline;
}

.smcrm-app .smcrm-muted {
    color: var(--smcrm-text-secondary);
}

.smcrm-app .smcrm-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.smcrm-app .smcrm-required {
    color: var(--smcrm-danger);
    font-weight: 600;
    margin-left: 2px;
}

.smcrm-app .smcrm-help {
    color: var(--smcrm-text-secondary);
    font-size: 13px;
    line-height: 1.5;
    margin: 6px 0 0;
}

/* -------------------------------------------------------------------------
 * Row actions (per-row button groups in tables)
 * ------------------------------------------------------------------------- */
.smcrm-app .smcrm-actions-col {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.smcrm-app .smcrm-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

/* -------------------------------------------------------------------------
 * Form section headings & action bar
 * ------------------------------------------------------------------------- */
.smcrm-app .smcrm-form__section {
    border-bottom: 1px solid var(--smcrm-border);
    color: var(--smcrm-text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    margin: var(--smcrm-space-lg) 0 var(--smcrm-space);
    padding-bottom: 8px;
    text-transform: uppercase;
}

.smcrm-app .smcrm-form__section:first-child {
    margin-top: 0;
}

.smcrm-app .smcrm-form__actions {
    align-items: center;
    border-top: 1px solid var(--smcrm-border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--smcrm-space-lg);
    padding-top: var(--smcrm-space);
}

/* Info-toned badge (e.g. "Double opt-in" pill on lists table) */
.smcrm-app .smcrm-badge--info {
    background: var(--smcrm-primary-soft);
    color: var(--smcrm-primary);
}

@media (max-width: 600px) {
    .smcrm-app .smcrm-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .smcrm-app .smcrm-toolbar__actions {
        justify-content: flex-start;
    }

    .smcrm-app .smcrm-actions-col,
    .smcrm-app .smcrm-row-actions {
        text-align: left;
        justify-content: flex-start;
    }
}

/* -------------------------------------------------------------------------
 * Filter bar (used above subscriber / log / report tables)
 * ------------------------------------------------------------------------- */
.smcrm-app .smcrm-filters {
    margin: 0;
}

.smcrm-app .smcrm-filters__row {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.smcrm-app .smcrm-filters__field {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.smcrm-app .smcrm-filters__field--grow {
    flex: 1 1 220px;
    min-width: 220px;
}

.smcrm-app .smcrm-filters__field > span {
    color: var(--smcrm-text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.smcrm-app .smcrm-filters__field input,
.smcrm-app .smcrm-filters__field select {
    background: var(--smcrm-surface);
    border: 1px solid var(--smcrm-border);
    border-radius: var(--smcrm-radius-sm);
    color: var(--smcrm-text);
    font: inherit;
    line-height: 1.4;
    padding: 8px 10px;
    width: 100%;
}

.smcrm-app .smcrm-filters__field input:focus,
.smcrm-app .smcrm-filters__field select:focus {
    border-color: var(--smcrm-primary);
    box-shadow: 0 0 0 3px var(--smcrm-primary-soft);
    outline: none;
}

.smcrm-app .smcrm-filters__actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

/* -------------------------------------------------------------------------
 * Inline single-button POST forms (e.g. row "Unsubscribe" action)
 * ------------------------------------------------------------------------- */
.smcrm-app .smcrm-inline-form {
    display: inline;
    margin: 0;
    padding: 0;
}

/* -------------------------------------------------------------------------
 * Pagination footer
 * ------------------------------------------------------------------------- */
.smcrm-app .smcrm-pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-top: var(--smcrm-space);
    padding: 0 4px;
}

.smcrm-app .smcrm-pagination__links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* -------------------------------------------------------------------------
 * Code block + bullet list (used by the import help card)
 * ------------------------------------------------------------------------- */
.smcrm-app .smcrm-code-block {
    background: var(--smcrm-bg-subtle);
    border: 1px solid var(--smcrm-border);
    border-radius: var(--smcrm-radius-sm);
    color: var(--smcrm-text);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 12px;
    overflow-x: auto;
    padding: 12px 14px;
    white-space: pre;
}

.smcrm-app .smcrm-bullet-list {
    color: var(--smcrm-text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    padding-left: 20px;
}

.smcrm-app .smcrm-bullet-list li + li {
    margin-top: 4px;
}

@media (max-width: 600px) {
    .smcrm-app .smcrm-filters__row {
        flex-direction: column;
        align-items: stretch;
    }

    .smcrm-app .smcrm-filters__field,
    .smcrm-app .smcrm-filters__field--grow {
        min-width: 0;
        width: 100%;
    }

    .smcrm-app .smcrm-pagination {
        justify-content: flex-start;
    }
}

/* -------------------------------------------------------------------------
 * Campaign editor
 * ------------------------------------------------------------------------- */

.smcrm-app .smcrm-grid--editor {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
}

@media (max-width: 1024px) {
    .smcrm-app .smcrm-grid--editor {
        grid-template-columns: 1fr;
    }
}

.smcrm-app .smcrm-form--campaign-editor .smcrm-card + .smcrm-card {
    margin-top: var(--smcrm-space);
}

.smcrm-app .smcrm-card__heading {
    align-items: center;
    border-bottom: 1px solid var(--smcrm-border);
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin: 0;
    padding: 14px 18px;
}

.smcrm-app .smcrm-card__heading h2,
.smcrm-app .smcrm-card__heading h3 {
    color: var(--smcrm-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

.smcrm-app .smcrm-form__section {
    display: flex;
    flex-direction: column;
    gap: var(--smcrm-space);
    padding: 18px;
}

.smcrm-app .smcrm-editor-host {
    border: 1px solid var(--smcrm-border);
    border-radius: var(--smcrm-radius-sm);
    overflow: hidden;
    background: var(--smcrm-surface);
}

.smcrm-app .smcrm-editor-host .wp-editor-wrap {
    border: 0;
    margin: 0;
}

.smcrm-app .smcrm-editor-host .wp-editor-tabs {
    background: var(--smcrm-bg-subtle);
    border-bottom: 1px solid var(--smcrm-border);
}

.smcrm-app .smcrm-editor-host .wp-editor-container {
    border: 0;
}

.smcrm-app .smcrm-editor-host textarea.wp-editor-area {
    background: var(--smcrm-surface);
    color: var(--smcrm-text);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.6;
    padding: 12px 14px;
}

.smcrm-app .smcrm-textarea--code {
    background: var(--smcrm-surface);
    border: 1px solid var(--smcrm-border);
    border-radius: var(--smcrm-radius-sm);
    color: var(--smcrm-text);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.6;
    min-height: 320px;
    padding: 12px 14px;
    width: 100%;
}

.smcrm-app .smcrm-field--toggle {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.smcrm-app .smcrm-toggle {
    align-items: center;
    color: var(--smcrm-text);
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    gap: 8px;
    user-select: none;
}

.smcrm-app .smcrm-toggle input[type="checkbox"] {
    accent-color: var(--smcrm-primary);
    cursor: pointer;
    height: 16px;
    margin: 0;
    width: 16px;
}

/* Merge-tag picker (sidebar) */
.smcrm-app .smcrm-merge-tags {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.smcrm-app .smcrm-merge-tags li {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.smcrm-app .smcrm-merge-tag {
    background: var(--smcrm-bg-subtle);
    border: 1px solid var(--smcrm-border);
    border-radius: 999px;
    color: var(--smcrm-text);
    cursor: pointer;
    font: inherit;
    padding: 4px 10px;
    transition: border-color .15s ease, background .15s ease;
}

.smcrm-app .smcrm-merge-tag:hover,
.smcrm-app .smcrm-merge-tag:focus {
    background: var(--smcrm-primary-soft);
    border-color: var(--smcrm-primary);
    outline: none;
}

.smcrm-app .smcrm-merge-tag code {
    background: transparent;
    color: var(--smcrm-primary);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12.5px;
    padding: 0;
}

.smcrm-app .smcrm-merge-tag__desc {
    color: var(--smcrm-text-secondary);
    font-size: 12.5px;
    line-height: 1.4;
}

/* Editor action bar (Save / Send Test / Queue / Back) */
.smcrm-app .smcrm-form__actions--editor {
    background: var(--smcrm-surface);
    border: 1px solid var(--smcrm-border);
    border-radius: var(--smcrm-radius);
    box-shadow: var(--smcrm-shadow-sm);
    margin-top: var(--smcrm-space);
    padding: 12px 16px;
    position: sticky;
    bottom: 12px;
    z-index: 5;
}

.smcrm-app .smcrm-form__actions-spacer {
    flex: 1 1 auto;
}

/* Ghost button alias (keeps existing call sites working). */
.smcrm-app .smcrm-btn--ghost {
    background: transparent;
    border: 1px solid var(--smcrm-border);
    color: var(--smcrm-text);
}

.smcrm-app .smcrm-btn--ghost:hover,
.smcrm-app .smcrm-btn--ghost:focus {
    background: var(--smcrm-bg-subtle);
}

.smcrm-app .smcrm-btn--success {
    background: var(--smcrm-success, #16a34a);
    border-color: var(--smcrm-success, #16a34a);
    color: #fff;
}

.smcrm-app .smcrm-btn--success:hover,
.smcrm-app .smcrm-btn--success:focus {
    background: #15803d;
    border-color: #15803d;
}

@media (max-width: 600px) {
    .smcrm-app .smcrm-form__actions--editor {
        position: static;
        flex-direction: column;
        align-items: stretch;
    }

    .smcrm-app .smcrm-form__actions--editor .smcrm-btn,
    .smcrm-app .smcrm-form__actions--editor a.smcrm-btn {
        width: 100%;
        text-align: center;
    }

    .smcrm-app .smcrm-form__actions-spacer {
        display: none;
    }
}

/* -------------------------------------------------------------------------
 * Campaign report tables (clicked URLs + subscriber activity)
 * ------------------------------------------------------------------------- */

.smcrm-app .smcrm-table--report-urls .smcrm-cell-url {
    max-width: 0;
    width: 100%;
    word-break: break-all;
}

.smcrm-app .smcrm-table--report-urls .smcrm-cell-url .smcrm-link {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

.smcrm-app .smcrm-table--report-activity td {
    vertical-align: top;
}

.smcrm-app .smcrm-cell-error {
    color: var(--smcrm-text-secondary);
    cursor: help;
    font-size: 12.5px;
    line-height: 1.45;
}

.smcrm-app .smcrm-pagination__summary {
    color: var(--smcrm-text-secondary);
    font-size: 13px;
}

.smcrm-app .smcrm-btn.is-disabled,
.smcrm-app .smcrm-btn.is-disabled:hover {
    cursor: not-allowed;
    opacity: .55;
    pointer-events: none;
}

@media (max-width: 880px) {
    .smcrm-app .smcrm-table--report-activity {
        font-size: 13px;
    }

    .smcrm-app .smcrm-table--report-urls .smcrm-cell-url .smcrm-link {
        white-space: normal;
        word-break: break-all;
    }
}