/*
 * Salesmanager Africa - Front-end UI Refresh
 * Version 0.6.21
 *
 * This stylesheet intentionally sits on top of the historical front-end CSS.
 * It standardises the visual language without changing shortcode behaviour.
 */

/* -------------------------------------------------------------------------
   Design system
   ------------------------------------------------------------------------- */
.sma-wrap,
.sma-reports-dashboard,
.sma-leadmanager-ui {
    --sma-brand-950: #10233f;
    --sma-brand-900: #173457;
    --sma-brand-800: #1f4775;
    --sma-brand-700: #285b92;
    --sma-brand-600: #2e6cb0;
    --sma-brand-500: #3d82c8;
    --sma-brand-100: #eaf3fb;
    --sma-brand-50: #f5f9fd;
    --sma-accent-700: #0f766e;
    --sma-accent-600: #0d9488;
    --sma-success-700: #15803d;
    --sma-success-50: #f0fdf4;
    --sma-warning-700: #b45309;
    --sma-warning-50: #fff7ed;
    --sma-danger-700: #b91c1c;
    --sma-danger-50: #fef2f2;
    --sma-ink-950: #0f172a;
    --sma-ink-800: #1e293b;
    --sma-ink-700: #334155;
    --sma-ink-600: #475569;
    --sma-ink-500: #64748b;
    --sma-ink-400: #94a3b8;
    --sma-line: #dbe4ee;
    --sma-line-soft: #eaf0f5;
    --sma-surface: #ffffff;
    --sma-surface-soft: #f7f9fc;
    --sma-surface-muted: #f1f5f9;
    --sma-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --sma-shadow-sm: 0 5px 18px rgba(15, 23, 42, .055);
    --sma-shadow-md: 0 14px 34px rgba(15, 23, 42, .075);
    --sma-radius-sm: 9px;
    --sma-radius: 14px;
    --sma-radius-lg: 20px;
    --sma-radius-xl: 24px;
    --sma-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    width: min(100%, 1320px);
    max-width: 1320px;
    margin: 0 auto 36px;
    color: var(--sma-ink-800);
    font-family: var(--sma-font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.sma-wrap *,
.sma-reports-dashboard *,
.sma-leadmanager-ui * {
    box-sizing: border-box;
}

.sma-wrap a,
.sma-reports-dashboard a,
.sma-leadmanager-ui a {
    text-underline-offset: 2px;
}

.sma-wrap h1,
.sma-wrap h2,
.sma-wrap h3,
.sma-wrap h4,
.sma-reports-dashboard h1,
.sma-reports-dashboard h2,
.sma-reports-dashboard h3,
.sma-leadmanager-ui h1,
.sma-leadmanager-ui h2,
.sma-leadmanager-ui h3 {
    color: var(--sma-ink-950);
    font-family: var(--sma-font);
    letter-spacing: -.025em;
}

.sma-wrap .description,
.sma-reports-dashboard .description,
.sma-leadmanager-ui .description,
.sma-wrap .sma-help-text {
    color: var(--sma-ink-500);
    line-height: 1.55;
}

/* -------------------------------------------------------------------------
   Unified page heroes
   ------------------------------------------------------------------------- */
.sma-ui-hero,
.sma-member-list-hero,
.sma-my-visits-hero,
.sma-followup-header,
.sma-reports-header,
.sma-leadmanager-ui .sma-page-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 22px;
    padding: 28px 30px;
    border: 1px solid #d8e3ef;
    border-radius: var(--sma-radius-xl);
    background:
        radial-gradient(circle at 92% 12%, rgba(61,130,200,.14), transparent 27%),
        linear-gradient(135deg, #f9fbfe 0%, #eff6fc 50%, #ffffff 100%);
    box-shadow: var(--sma-shadow-md);
}

.sma-ui-hero::after,
.sma-member-list-hero::after,
.sma-my-visits-hero::after,
.sma-followup-header::after,
.sma-reports-header::after,
.sma-leadmanager-ui .sma-page-hero::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -95px;
    bottom: -130px;
    border-radius: 50%;
    background: rgba(13, 148, 136, .08);
    pointer-events: none;
}

.sma-ui-hero > *,
.sma-member-list-hero > *,
.sma-my-visits-hero > *,
.sma-followup-header > *,
.sma-reports-header > *,
.sma-leadmanager-ui .sma-page-hero > * {
    position: relative;
    z-index: 1;
}

.sma-ui-hero h1,
.sma-ui-hero h2,
.sma-member-list-hero h2,
.sma-my-visits-hero h2,
.sma-followup-header h2,
.sma-reports-header h1,
.sma-leadmanager-ui .sma-page-hero h1 {
    margin: 5px 0 7px;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.08;
    font-weight: 800;
    color: var(--sma-brand-950);
}

.sma-ui-hero p,
.sma-member-list-hero p,
.sma-my-visits-hero p,
.sma-followup-header p,
.sma-reports-header p,
.sma-leadmanager-ui .sma-page-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--sma-ink-600);
    font-size: 14.5px;
}

.sma-ui-eyebrow,
.sma-member-list-eyebrow,
.sma-route-library-eyebrow,
.sma-leadmanager-ui .sma-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--sma-brand-700);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .095em;
    text-transform: uppercase;
}

.sma-ui-hero-actions,
.sma-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    justify-content: flex-end;
}

/* -------------------------------------------------------------------------
   Buttons and controls
   ------------------------------------------------------------------------- */
.sma-wrap .button,
.sma-reports-dashboard .button,
.sma-leadmanager-ui .button,
.sma-member-action {
    min-height: 42px;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid #c7d3e1;
    border-radius: 11px;
    background: #fff;
    color: var(--sma-ink-700);
    box-shadow: var(--sma-shadow-xs);
    font-family: var(--sma-font);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none !important;
    text-shadow: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
    cursor: pointer;
}

.sma-wrap .button:hover,
.sma-reports-dashboard .button:hover,
.sma-leadmanager-ui .button:hover,
.sma-member-action:hover {
    border-color: #9fb3c9;
    background: #f8fbfe;
    color: var(--sma-brand-800);
    box-shadow: 0 5px 13px rgba(15,23,42,.075);
    transform: translateY(-1px);
}

.sma-wrap .button:focus-visible,
.sma-reports-dashboard .button:focus-visible,
.sma-leadmanager-ui .button:focus-visible,
.sma-member-action:focus-visible {
    outline: 3px solid rgba(46,108,176,.18);
    outline-offset: 2px;
}

.sma-wrap .button.button-primary,
.sma-reports-dashboard .button.button-primary,
.sma-leadmanager-ui .button.button-primary,
.sma-member-action-visit {
    border-color: var(--sma-brand-700);
    background: linear-gradient(180deg, var(--sma-brand-600), var(--sma-brand-700));
    color: #fff;
    box-shadow: 0 7px 16px rgba(40,91,146,.18);
}

.sma-wrap .button.button-primary:hover,
.sma-reports-dashboard .button.button-primary:hover,
.sma-leadmanager-ui .button.button-primary:hover,
.sma-member-action-visit:hover {
    border-color: var(--sma-brand-800);
    background: linear-gradient(180deg, var(--sma-brand-700), var(--sma-brand-800));
    color: #fff;
}

.sma-wrap .button.button-secondary,
.sma-reports-dashboard .button.button-secondary,
.sma-leadmanager-ui .button.button-secondary,
.sma-member-action-edit {
    border-color: #c7d3e1;
    background: #fff;
    color: var(--sma-brand-800);
}

.sma-wrap .button.button-small,
.sma-reports-dashboard .button.button-small,
.sma-leadmanager-ui .button.button-small {
    min-height: 34px;
    padding: 5px 10px;
    border-radius: 9px;
    font-size: 12px;
}

.sma-wrap .button .dashicons,
.sma-reports-dashboard .button .dashicons,
.sma-leadmanager-ui .button .dashicons,
.sma-member-action .dashicons {
    width: 17px;
    height: 17px;
    font-size: 17px;
    line-height: 17px;
}

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
.sma-form,
.sma-followup-editor,
.sma-front-member-panel,
.sma-public-submit-panel {
    border: 1px solid var(--sma-line);
    border-radius: var(--sma-radius-lg);
    background: var(--sma-surface);
    box-shadow: var(--sma-shadow-sm);
}

.sma-form {
    padding: 26px;
}

.sma-form > h2,
.sma-form > h3,
.sma-route-form > h3,
.sma-front-member-form h3 {
    margin: 28px 0 14px;
    padding-top: 20px;
    border-top: 1px solid var(--sma-line-soft);
    font-size: 18px;
    font-weight: 800;
}

.sma-form > h2:first-child,
.sma-form > h3:first-child,
.sma-route-form > h3:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.sma-form p,
.sma-front-member-form p {
    margin: 0 0 15px;
}

.sma-form label,
.sma-front-member-form label,
.sma-filter-form label,
.sma-route-library-filters label,
.sma-reports-filter-form label {
    color: var(--sma-ink-700);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.3;
}

.sma-form input[type="text"],
.sma-form input[type="email"],
.sma-form input[type="tel"],
.sma-form input[type="url"],
.sma-form input[type="number"],
.sma-form input[type="date"],
.sma-form input[type="time"],
.sma-form input[type="month"],
.sma-form input[type="datetime-local"],
.sma-form input[type="search"],
.sma-form select,
.sma-form textarea,
.sma-filter-form input[type="text"],
.sma-filter-form input[type="search"],
.sma-filter-form input[type="date"],
.sma-filter-form input[type="month"],
.sma-filter-form select,
.sma-route-library-filters input,
.sma-route-library-filters select,
.sma-member-list-search-input,
.sma-followup-editor input,
.sma-followup-editor select,
.sma-followup-editor textarea {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid #c9d5e2;
    border-radius: 10px;
    background: #fff;
    color: var(--sma-ink-950);
    font-family: var(--sma-font);
    font-size: 14px;
    line-height: 1.35;
    box-shadow: inset 0 1px 1px rgba(15,23,42,.02);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.sma-form textarea,
.sma-followup-editor textarea {
    min-height: 108px;
    resize: vertical;
}

.sma-form input:focus,
.sma-form select:focus,
.sma-form textarea:focus,
.sma-filter-form input:focus,
.sma-filter-form select:focus,
.sma-route-library-filters input:focus,
.sma-route-library-filters select:focus,
.sma-member-list-search-input:focus,
.sma-followup-editor input:focus,
.sma-followup-editor select:focus,
.sma-followup-editor textarea:focus {
    border-color: var(--sma-brand-500);
    outline: none;
    box-shadow: 0 0 0 3px rgba(61,130,200,.13);
}

.sma-form input[readonly],
.sma-form input:disabled,
.sma-form select:disabled,
.sma-form textarea:disabled {
    border-color: #dbe4ee;
    background: #f6f8fb;
    color: var(--sma-ink-500);
}

.sma-grid.two,
.sma-grid.three,
.sma-front-member-three {
    gap: 16px;
}

.sma-grid.three,
.sma-front-member-three {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sma-field-row {
    gap: 8px;
}

.sma-radio-group {
    gap: 8px;
}

.sma-radio-group label,
.sma-form label:has(input[type="checkbox"]),
.sma-form label:has(input[type="radio"]) {
    font-weight: 650;
}

.sma-radio-group label {
    min-height: 38px;
    padding: 7px 11px;
    border: 1px solid var(--sma-line);
    border-radius: 10px;
    background: #fbfcfe;
}

.sma-form input[type="checkbox"],
.sma-form input[type="radio"] {
    accent-color: var(--sma-brand-600);
}

.sma-actions,
.sma-form-actions,
.sma-action-button-row,
.sma-front-member-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--sma-line-soft);
}

/* -------------------------------------------------------------------------
   Panels, cards and KPIs
   ------------------------------------------------------------------------- */
.sma-panel,
.sma-card,
.sma-report-panel,
.sma-report-module,
.sma-report-kpi,
.sma-followup-list,
.sma-route-library,
.sma-route-preview,
.sma-contact-panel,
.sma-birthday-panel,
.sma-member-gps-panel,
.sma-visit-member-contacts,
.sma-draft-share,
.sma-custom-fields-panel,
.sma-front-custom-fields-panel {
    border: 1px solid var(--sma-line);
    border-radius: var(--sma-radius-lg);
    background: #fff;
    box-shadow: var(--sma-shadow-sm);
}

.sma-panel,
.sma-report-panel,
.sma-report-module,
.sma-followup-list,
.sma-route-preview {
    padding: 22px;
}

.sma-cards,
.sma-dashboard-cards,
.sma-report-kpi-grid,
.sma-report-summary-cards {
    gap: 14px;
}

.sma-card,
.sma-report-kpi {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    padding: 18px;
}

.sma-card::before,
.sma-report-kpi::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sma-brand-600), var(--sma-accent-600));
}

.sma-card strong,
.sma-report-kpi strong {
    display: block;
    margin-bottom: 7px;
    color: var(--sma-ink-500);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.sma-card > span,
.sma-report-kpi > span {
    display: block;
    color: var(--sma-brand-950);
    font-size: clamp(23px, 2.6vw, 31px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.sma-card small,
.sma-report-kpi small {
    display: block;
    margin-top: 7px;
    color: var(--sma-ink-500);
}

.sma-panel-heading,
.sma-form-titlebar,
.sma-contact-panel-heading,
.sma-birthday-panel-heading,
.sma-visit-member-contacts-heading {
    gap: 16px;
}

/* -------------------------------------------------------------------------
   Notices / feedback
   ------------------------------------------------------------------------- */
.sma-notice,
.sma-alert {
    position: relative;
    margin: 0 0 18px;
    padding: 14px 16px 14px 46px;
    border: 1px solid #b7e4c4;
    border-radius: 13px;
    background: #f2fbf5;
    color: #166534;
    box-shadow: var(--sma-shadow-xs);
    font-weight: 600;
}

.sma-notice::before,
.sma-alert::before {
    content: "✓";
    position: absolute;
    left: 15px;
    top: 14px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dcfce7;
    color: var(--sma-success-700);
    font-size: 13px;
    font-weight: 900;
}

.sma-notice-error,
.sma-alert-error {
    border-color: #fecaca;
    background: var(--sma-danger-50);
    color: #991b1b;
}

.sma-notice-error::before,
.sma-alert-error::before {
    content: "!";
    background: #fee2e2;
    color: var(--sma-danger-700);
}

.sma-notice-warning {
    border-color: #fed7aa;
    background: var(--sma-warning-50);
    color: #9a3412;
}

.sma-notice-warning::before {
    content: "!";
    background: #ffedd5;
    color: #c2410c;
}

/* -------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------- */
.sma-table-wrap,
.sma-table-scroll,
.sma-member-list-shell,
.sma-route-library-table-wrap,
.sma-performance-table-wrap,
.sma-reports-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--sma-line);
    border-radius: var(--sma-radius-lg);
    background: #fff;
    box-shadow: var(--sma-shadow-sm);
}

.sma-table,
.sma-member-list-table,
.sma-route-library-table,
.sma-performance-table,
.sma-reports-table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    box-shadow: none;
}

.sma-table thead th,
.sma-member-list-table thead th,
.sma-route-library-table thead th,
.sma-performance-table thead th,
.sma-reports-table thead th {
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--sma-line);
    background: #f6f8fb;
    color: var(--sma-ink-600);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sma-table tbody td,
.sma-member-list-table tbody td,
.sma-route-library-table tbody td,
.sma-performance-table tbody td,
.sma-reports-table tbody td {
    padding: 14px;
    border: 0;
    border-bottom: 1px solid var(--sma-line-soft);
    color: var(--sma-ink-700);
    vertical-align: middle;
}

.sma-table tbody tr:last-child td,
.sma-member-list-table tbody tr:last-child td,
.sma-route-library-table tbody tr:last-child td,
.sma-performance-table tbody tr:last-child td,
.sma-reports-table tbody tr:last-child td {
    border-bottom: 0;
}

.sma-table tbody tr:hover td,
.sma-member-list-table tbody tr:hover td,
.sma-route-library-table tbody tr:hover td,
.sma-performance-table tbody tr:hover td,
.sma-reports-table tbody tr:hover td {
    background: #f9fbfd;
}

.sma-member-link {
    color: var(--sma-brand-700);
    font-weight: 800;
    text-decoration: none;
}

.sma-member-link:hover {
    color: var(--sma-brand-900);
}

/* -------------------------------------------------------------------------
   Member/client list and editing
   ------------------------------------------------------------------------- */
.sma-member-list-search {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(300px, 2fr) auto;
    align-items: end;
    gap: 12px;
    margin: 18px 0;
    padding: 16px;
    border: 1px solid var(--sma-line);
    border-radius: var(--sma-radius);
    background: #fff;
    box-shadow: var(--sma-shadow-xs);
}

.sma-member-list-search label {
    align-self: center;
    color: var(--sma-ink-700);
    font-weight: 800;
}

.sma-member-list-search-status,
.sma-member-search-status {
    color: var(--sma-ink-500);
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.sma-member-row-actions,
.sma-route-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.sma-member-status,
.sma-badge,
.sma-status-pill,
.sma-route-metric-badge,
.sma-member-gps-badge,
.sma-primary-contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 25px;
    padding: 4px 9px;
    border: 1px solid #cfe0ef;
    border-radius: 999px;
    background: #f3f8fc;
    color: var(--sma-brand-800);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.sma-member-status-active,
.sma-status-pill.is-good,
.sma-badge-success {
    border-color: #bbf7d0;
    background: var(--sma-success-50);
    color: var(--sma-success-700);
}

.sma-member-status-archived,
.sma-badge-warning,
.sma-status-pill.is-warn {
    border-color: #fed7aa;
    background: var(--sma-warning-50);
    color: var(--sma-warning-700);
}

.sma-front-member-panel {
    margin: 18px 0 22px;
    overflow: clip;
}

.sma-front-member-panel summary {
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: #f8fafc;
    color: var(--sma-brand-950);
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.sma-front-member-panel[open] summary {
    border-bottom: 1px solid var(--sma-line);
    background: #f4f8fc;
}

.sma-front-member-form {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.sma-front-member-intro {
    margin-bottom: 22px;
    padding: 16px 18px;
    border-left: 4px solid var(--sma-brand-500);
    border-radius: 0 12px 12px 0;
    background: var(--sma-brand-50);
}

.sma-front-member-intro h3 {
    margin: 0 0 5px;
    padding: 0;
    border: 0;
}

.sma-front-member-intro p {
    margin: 0;
    color: var(--sma-ink-600);
}

.sma-contact-panel,
.sma-birthday-panel,
.sma-member-gps-panel,
.sma-custom-fields-panel,
.sma-front-custom-fields-panel {
    margin: 22px 0;
    padding: 18px;
    background: #f9fbfd;
}

.sma-contact-row,
.sma-birthday-row {
    border-color: var(--sma-line);
    border-radius: 12px;
    box-shadow: var(--sma-shadow-xs);
}

/* -------------------------------------------------------------------------
   Visit form / visit centre
   ------------------------------------------------------------------------- */
.sma-visit-form-toolbar {
    margin: -8px 0 16px;
}

.sma-visit-member-contacts {
    margin: 16px 0 22px;
    padding: 16px;
    background: #f9fbfd;
    box-shadow: none;
}

.sma-visit-member-contact-card {
    border-color: var(--sma-line);
    border-radius: 12px;
    box-shadow: var(--sma-shadow-xs);
}

.sma-photo-upload-grid {
    gap: 14px;
}

.sma-photo-upload-field,
.sma-file-upload-card {
    padding: 16px;
    border: 1px dashed #bdcddd;
    border-radius: 14px;
    background: #f9fbfd;
}

.sma-photo-upload-field input[type="file"] {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 7px 0;
}

.sma-attachment-item,
.sma-photo-existing-item {
    border-color: var(--sma-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--sma-shadow-xs);
}

.sma-signature-pad {
    border: 1px dashed #9fb2c8;
    border-radius: 14px;
    background: #fbfdff;
}

.sma-my-visits-summary {
    gap: 12px;
}

.sma-my-visits-filter {
    min-height: 60px;
    border-radius: 14px;
    box-shadow: var(--sma-shadow-xs);
}

.sma-my-visits-filter.is-active {
    border-color: #a9c7e4;
    background: var(--sma-brand-50);
    color: var(--sma-brand-800);
    box-shadow: 0 7px 18px rgba(40,91,146,.08);
}

.sma-my-visit-card {
    border-radius: var(--sma-radius-lg);
    box-shadow: var(--sma-shadow-sm);
    transition: box-shadow .16s ease, transform .16s ease;
}

.sma-my-visit-card:hover {
    box-shadow: var(--sma-shadow-md);
    transform: translateY(-1px);
}

.sma-visit-readonly-detail,
.sma-visit-readonly-block,
.sma-visit-readonly-grid > div {
    border-color: var(--sma-line);
}

/* -------------------------------------------------------------------------
   Routes
   ------------------------------------------------------------------------- */
.sma-route-form {
    margin-bottom: 24px;
}

.sma-route-stop-card {
    padding: 16px;
    border: 1px solid var(--sma-line);
    border-radius: 14px;
    background: #f9fbfd;
    box-shadow: var(--sma-shadow-xs);
}

.sma-route-stop-head {
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--sma-line-soft);
}

.sma-route-drag-handle {
    color: var(--sma-ink-400);
}

.sma-route-library {
    margin-top: 24px;
    padding: 0;
    overflow: hidden;
}

.sma-route-library-head {
    margin: 0;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--sma-line);
    background: linear-gradient(180deg, #fbfdff, #f6f9fc);
}

.sma-route-library-head h3 {
    margin: 4px 0 5px;
    color: var(--sma-brand-950);
    font-size: 22px;
}

.sma-route-library-filters {
    margin: 0;
    padding: 16px 22px;
    border: 0;
    border-bottom: 1px solid var(--sma-line);
    border-radius: 0;
    background: #fff;
}

.sma-route-library-table-wrap {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.sma-route-distance,
.sma-route-title,
.sma-route-date {
    color: var(--sma-ink-800);
}

.sma-route-id {
    display: block;
    margin-top: 3px;
    color: var(--sma-ink-400);
    font-size: 11px;
    font-weight: 700;
}

.sma-route-suggestions,
.sma-route-preview {
    margin: 18px 0;
}

/* -------------------------------------------------------------------------
   Follow-up calendar / task board
   ------------------------------------------------------------------------- */
.sma-followup-nav {
    position: relative;
    z-index: 2;
    justify-content: flex-end;
}

.sma-followup-nav > strong {
    min-width: 120px;
    color: var(--sma-brand-950);
    text-align: center;
}

.sma-followup-calendar {
    gap: 8px;
}

.sma-followup-weekday {
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sma-ink-500);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sma-followup-day {
    min-height: 140px;
    border: 1px solid var(--sma-line);
    border-radius: 12px;
    box-shadow: var(--sma-shadow-xs);
}

.sma-followup-day.is-today {
    border-color: #8db8df;
    box-shadow: 0 0 0 3px rgba(61,130,200,.11);
}

.sma-followup-day-number {
    display: inline-flex;
    width: 27px;
    height: 27px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--sma-ink-700);
}

.sma-followup-day.is-today .sma-followup-day-number {
    background: var(--sma-brand-700);
    color: #fff;
}

.sma-followup-chip {
    border: 1px solid #d8e7f5;
    border-radius: 8px;
    background: #f2f7fc;
    color: var(--sma-brand-800);
    font-weight: 700;
}

.sma-followup-editor,
.sma-followup-list {
    padding: 22px;
}

.sma-followup-card {
    padding: 18px 0;
}

.sma-task-board-table .sma-task-status {
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Reports / performance
   ------------------------------------------------------------------------- */
.sma-performance-dashboard .sma-filter-form,
.sma-reports-filter-form,
.sma-leadmanager-ui .sma-filter-form {
    gap: 12px;
    margin: 0 0 18px;
    padding: 16px;
    border: 1px solid var(--sma-line);
    border-radius: var(--sma-radius);
    background: #fff;
    box-shadow: var(--sma-shadow-xs);
}

.sma-report-tabs {
    gap: 6px;
    margin: 0 0 18px;
    padding: 5px;
    border: 1px solid var(--sma-line);
    border-radius: 13px;
    background: #eef3f8;
}

.sma-report-tab {
    min-height: 38px;
    padding: 8px 13px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--sma-ink-600);
    font-weight: 800;
}

.sma-report-tab:hover,
.sma-report-tab:focus,
.sma-report-tab.is-active {
    border: 0;
    background: #fff;
    color: var(--sma-brand-800);
    box-shadow: 0 1px 4px rgba(15,23,42,.08);
}

.sma-progress-track,
.sma-mini-progress,
.sma-report-bar-track {
    border: 0;
    background: #e8eef5;
}

.sma-progress-track > span,
.sma-mini-progress > span,
.sma-report-bar-track > span {
    background: linear-gradient(90deg, var(--sma-brand-600), var(--sma-accent-600));
}

/* -------------------------------------------------------------------------
   Leadmanager compatibility / visual unification
   ------------------------------------------------------------------------- */
.sma-leadmanager-ui {
    max-width: 1320px;
}

.sma-leadmanager-ui .sma-page-hero,
.sma-leadmanager-ui .sma-panel,
.sma-leadmanager-ui .sma-card,
.sma-leadmanager-ui .sma-table-wrap,
.sma-leadmanager-ui .sma-filter-form {
    border-color: var(--sma-line);
}

.sma-leadmanager-ui .sma-page-hero {
    margin-top: 0;
}

.sma-leadmanager-ui .sma-panel {
    border-radius: var(--sma-radius-lg);
    box-shadow: var(--sma-shadow-sm);
}

.sma-leadmanager-ui .sma-card {
    border-radius: var(--sma-radius-lg);
    box-shadow: var(--sma-shadow-sm);
}

.sma-leadmanager-ui .sma-table-wrap {
    border-radius: var(--sma-radius-lg);
}

/* -------------------------------------------------------------------------
   Empty states and helper blocks
   ------------------------------------------------------------------------- */
.sma-empty-state,
.sma-my-visits-empty,
.sma-route-empty-row td {
    text-align: center;
}

.sma-empty-state,
.sma-my-visits-empty {
    padding: 42px 22px;
    border: 1px dashed #bdcbd9;
    border-radius: var(--sma-radius-lg);
    background: #f8fafc;
    color: var(--sma-ink-500);
}

.sma-soft-note,
.sma-route-order-help,
.sma-help-text {
    color: var(--sma-ink-500);
    font-size: 12.5px;
}

/* -------------------------------------------------------------------------
   Responsive behaviour
   ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .sma-grid.three,
    .sma-front-member-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sma-member-list-search {
        grid-template-columns: 1fr 2fr;
    }

    .sma-member-list-search-status {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .sma-wrap,
    .sma-reports-dashboard,
    .sma-leadmanager-ui {
        width: 100%;
        margin-bottom: 24px;
        font-size: 14px;
    }

    .sma-ui-hero,
    .sma-member-list-hero,
    .sma-my-visits-hero,
    .sma-followup-header,
    .sma-reports-header,
    .sma-leadmanager-ui .sma-page-hero {
        display: block;
        padding: 22px 20px;
        border-radius: 18px;
    }

    .sma-ui-hero-actions,
    .sma-hero-actions,
    .sma-followup-nav,
    .sma-route-export-actions {
        justify-content: flex-start;
        margin-top: 16px;
    }

    .sma-form {
        padding: 18px;
        border-radius: 16px;
    }

    .sma-grid.two,
    .sma-grid.three,
    .sma-front-member-three {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sma-field-row {
        align-items: stretch;
        flex-direction: column;
    }

    .sma-field-row .button,
    .sma-location-button {
        width: 100%;
    }

    .sma-member-list-search {
        grid-template-columns: 1fr;
    }

    .sma-member-list-search-status {
        grid-column: auto;
    }

    /* Convert the main member table into touch-friendly client cards. */
    .sma-member-list-scroll {
        overflow: visible;
    }

    .sma-member-list-table,
    .sma-member-list-table tbody,
    .sma-member-list-table tr,
    .sma-member-list-table td {
        display: block;
        width: 100%;
    }

    .sma-member-list-table thead {
        display: none;
    }

    .sma-member-list-table {
        background: transparent;
    }

    .sma-member-list-table tbody {
        display: grid;
        gap: 12px;
    }

    .sma-member-list-table tbody tr {
        overflow: hidden;
        border: 1px solid var(--sma-line);
        border-radius: 15px;
        background: #fff;
        box-shadow: var(--sma-shadow-sm);
    }

    .sma-member-list-table tbody td {
        display: grid;
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        padding: 10px 14px;
        border-bottom: 1px solid var(--sma-line-soft);
        background: transparent !important;
    }

    .sma-member-list-table tbody td::before {
        content: attr(data-label);
        color: var(--sma-ink-400);
        font-size: 10px;
        font-weight: 850;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .sma-member-list-table tbody td:first-child {
        padding-top: 14px;
    }

    .sma-member-list-table tbody td:last-child {
        border-bottom: 0;
        padding-bottom: 14px;
    }

    .sma-member-list-table .sma-member-row-actions {
        display: flex;
        grid-template-columns: none;
    }

    .sma-member-list-table .sma-member-row-actions::before {
        width: 105px;
        flex: 0 0 105px;
    }

    .sma-member-list-table .sma-member-action {
        flex: 1 1 120px;
    }

    .sma-table-wrap,
    .sma-table-scroll,
    .sma-route-library-table-wrap,
    .sma-performance-table-wrap,
    .sma-reports-table-wrap {
        border-radius: 14px;
    }

    .sma-actions .button,
    .sma-form-actions .button,
    .sma-front-member-actions .button {
        flex: 1 1 160px;
    }

    .sma-my-visits-grid,
    .sma-report-module-grid,
    .sma-report-kpi-grid,
    .sma-report-chart-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .sma-ui-hero h1,
    .sma-ui-hero h2,
    .sma-member-list-hero h2,
    .sma-my-visits-hero h2,
    .sma-followup-header h2,
    .sma-reports-header h1,
    .sma-leadmanager-ui .sma-page-hero h1 {
        font-size: 25px;
    }

    .sma-wrap .button,
    .sma-reports-dashboard .button,
    .sma-leadmanager-ui .button {
        min-height: 43px;
    }

    .sma-followup-calendar {
        grid-template-columns: 1fr;
    }

    .sma-followup-day {
        min-height: 0;
        padding: 12px;
    }

    .sma-followup-weekday {
        display: none;
    }

    .sma-member-list-table tbody td {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .sma-member-list-table .sma-member-row-actions::before {
        width: 88px;
        flex-basis: 88px;
    }

    .sma-member-list-table .sma-member-action {
        flex-basis: 100%;
    }

    .sma-my-visit-meta,
    .sma-visit-readonly-grid {
        grid-template-columns: 1fr;
    }

    .sma-route-library-head,
    .sma-route-library-filters,
    .sma-panel,
    .sma-report-panel,
    .sma-report-module,
    .sma-followup-list,
    .sma-followup-editor {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sma-wrap *,
    .sma-reports-dashboard *,
    .sma-leadmanager-ui * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* -------------------------------------------------------------------------
   Secondary front-end components
   ------------------------------------------------------------------------- */
.sma-public-submit-button,
.sma-public-lead-form button[type="submit"] {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border: 1px solid var(--sma-brand-700);
    border-radius: 11px;
    background: linear-gradient(180deg, var(--sma-brand-600), var(--sma-brand-700));
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 7px 16px rgba(40,91,146,.18);
}

.sma-reminder-overlay {
    background: rgba(15, 23, 42, .56);
    backdrop-filter: blur(3px);
}

.sma-reminder-modal {
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 22px;
    padding: 26px;
    box-shadow: 0 30px 85px rgba(15,23,42,.32);
}

.sma-reminder-close {
    transition: background .15s ease, transform .15s ease;
}

.sma-reminder-close:hover {
    background: #e2e8f0;
    transform: rotate(4deg);
}

.sma-reminder-item {
    border-color: var(--sma-line);
    border-radius: 14px;
    background: #f9fbfd;
}

.sma-draft-share.is-visible {
    border-color: #a7ddbc;
    background: #f3fbf5;
}

.sma-email-pill {
    border-radius: 999px;
}

.sma-upload-box,
.sma-import-upload-card,
.sma-file-upload-card {
    border-color: #c4d2e1;
    border-radius: 14px;
    background: #f9fbfd;
}

.sma-tool-summary-card,
.sma-action-card,
.sma-shortcode-card,
.sma-region-map-card,
.sma-report-chart-card,
.sma-report-bar-card,
.sma-report-donut-card {
    border-color: var(--sma-line) !important;
    border-radius: var(--sma-radius-lg) !important;
    box-shadow: var(--sma-shadow-sm) !important;
}

.sma-progress-cell-value,
.sma-chart-value {
    color: var(--sma-ink-700);
    font-weight: 750;
}

/* Task table becomes an easy-to-scan card list on small screens. */
@media (max-width: 760px) {
    .sma-task-board-page .sma-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .sma-task-board-table,
    .sma-task-board-table tbody,
    .sma-task-board-table tr,
    .sma-task-board-table td {
        display: block;
        width: 100%;
    }

    .sma-task-board-table thead {
        display: none;
    }

    .sma-task-board-table tbody {
        display: grid;
        gap: 12px;
    }

    .sma-task-board-table tbody tr {
        overflow: hidden;
        border: 1px solid var(--sma-line);
        border-radius: 14px;
        background: #fff;
        box-shadow: var(--sma-shadow-sm);
    }

    .sma-task-board-table tbody td {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 10px;
        padding: 10px 13px;
        border-bottom: 1px solid var(--sma-line-soft);
        background: transparent !important;
    }

    .sma-task-board-table tbody td::before {
        content: attr(data-label);
        color: var(--sma-ink-400);
        font-size: 10px;
        font-weight: 850;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .sma-task-board-table tbody td:last-child {
        border-bottom: 0;
    }
}

/* Table/panel compatibility corrections for legacy markup. */
table.sma-table {
    padding: 0;
}

.sma-route-preview.sma-table {
    padding: 22px;
    border: 1px solid var(--sma-line);
    border-radius: var(--sma-radius-lg);
    background: #fff;
    box-shadow: var(--sma-shadow-sm);
}

.sma-route-preview.sma-table > table.sma-table {
    padding: 0;
    border: 1px solid var(--sma-line);
    border-radius: 13px;
    overflow: hidden;
}