* {
    box-sizing: border-box;
}

html {
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body {
    margin: 0;
    background: #f4f7fb;
    color: #182033;
}


/* LOGIN */

.login-page {
    min-height: 100vh;
}

.login-wrapper {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 430px;

    background: white;

    padding: 42px;

    border-radius: 18px;

    box-shadow:
        0 12px 40px rgba(20, 30, 55, 0.10);
}

.brand {
    margin-bottom: 36px;
}

.brand-name {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 1px;
}

.brand-product {
    color: #667085;
    margin-top: 3px;
}

.login-card h1 {
    margin-bottom: 8px;
    font-size: 30px;
}

.login-description {
    margin-top: 0;
    margin-bottom: 28px;
    color: #667085;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;

    font-size: 14px;
    font-weight: 600;

    margin-bottom: 8px;
}

.form-control {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid #d0d5dd;
    border-radius: 9px;

    font-size: 16px;

    background: white;

    outline: none;
}

.form-control:focus {
    border-color: #344054;

    box-shadow:
        0 0 0 3px rgba(52, 64, 84, 0.10);
}

.btn-primary {
    width: 100%;

    border: none;
    border-radius: 9px;

    padding: 14px 18px;

    background: #101828;
    color: white;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;
}

.btn-primary:hover {
    opacity: 0.94;
}

.login-footer {
    margin-top: 26px;

    text-align: center;

    font-size: 13px;
    color: #98a2b3;
}

.alert {
    padding: 12px 14px;
    border-radius: 8px;

    margin-bottom: 20px;

    font-size: 14px;
}

.alert-error {
    background: #fef3f2;
    color: #b42318;
}

.alert-warning {
    background: #fffaeb;
    color: #b54708;
}

.alert-success {
    background: #ecfdf3;
    color: #027a48;
}


/* DASHBOARD */

.topbar {
    min-height: 70px;

    background: #101828;
    color: white;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 32px;
}

.portal-label {
    margin-left: 10px;
    color: #d0d5dd;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 18px;
}

.client-header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.client-header-separator {
    color: #98a2b3;
}

.logout-link {
    color: white;
    text-decoration: none;
}

.dashboard-container {
    max-width: 1300px;

    margin: auto;

    padding: 40px 32px;
}

.page-heading h1 {
    margin: 0;
    font-size: 34px;
}

.page-heading p {
    color: #667085;
}

.dashboard-grid {
    margin-top: 30px;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;
}

.dashboard-card {
    background: white;

    border: 1px solid #e4e7ec;
    border-radius: 14px;

    padding: 24px;

    min-height: 150px;
}

.dashboard-card h3 {
    margin-top: 0;
}

.dashboard-card p {
    color: #667085;
}


/* TABLET */

@media (max-width: 900px) {

    .dashboard-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .login-wrapper {
        padding: 16px;
    }

    .login-card {
        padding: 28px 22px;
        border-radius: 14px;
    }

    .login-card h1 {
        font-size: 26px;
    }

    .topbar {
        padding: 14px 18px;

        align-items: flex-start;
    }

    .portal-label {
        display: block;
        margin-left: 0;
        font-size: 13px;
    }

    .topbar-user {
        flex-direction: column;
        align-items: flex-end;

        gap: 4px;

        font-size: 13px;
    }

    .dashboard-container {
        padding: 26px 18px;
    }

    .page-heading h1 {
        font-size: 27px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

}

/* LOGOUT BUTTON */

.logout-form {
    margin: 0;
}

.logout-button {
    border: 0;
    padding: 0;
    background: transparent;
    color: white;
    font: inherit;
    cursor: pointer;
}

.logout-button:hover {
    text-decoration: underline;
}


/* CLIENT MANAGEMENT */

.clients-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.client-status-tabs {
    display: flex;
    gap: 8px;
    margin: 18px 0 14px;
    flex-wrap: wrap;
}

.client-status-tab {
    padding: 8px 14px;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    background: #ffffff;
    color: #344054;
    text-decoration: none;
    font-weight: 600;
}

.client-status-tab.active-tab {
    background: #101828;
    border-color: #101828;
    color: #ffffff;
}

.client-list-search {
    display: flex;
    gap: 10px;
    align-items: center;
    max-width: 640px;
    margin-bottom: 4px;
}

.client-list-search input[type="search"] {
    flex: 1;
    min-width: 220px;
    padding: 10px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
}

.secondary-button {
    border: 0;
    border-radius: 9px;
    padding: 12px 18px;
    background: #101828;
    color: white;
    font-size: 15px;
    font-weight: 600;
}

.secondary-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.primary-button {
    border: 0;
    border-radius: 9px;
    padding: 12px 18px;
    background: #175cd3;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.primary-button:hover:not(:disabled) {
    background: #1447a6;
}

.primary-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.primary-button.button-link {
    color: white;
}

.table-card {
    margin-top: 30px;
    background: white;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    overflow: hidden;
}

.responsive-table {
    overflow-x: auto;
}

.client-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.client-table th,
.client-table td {
    padding: 18px 20px;
    text-align: left;
    border-bottom: 1px solid #eaecf0;
}

.client-table th {
    font-size: 13px;
    color: #667085;
    text-transform: uppercase;
}

.client-table tbody tr:last-child td {
    border-bottom: 0;
}

.inline-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}

.inline-action-row form {
    margin: 0;
}

.privilege-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.privilege-group {
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    padding: 16px;
}

.privilege-group h2 {
    margin: 0 0 12px;
    font-size: 16px;
}

.privilege-option {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    padding: 8px 0;
}

.privilege-option small {
    color: #667085;
    display: block;
    font-size: 12px;
    margin-top: 2px;
}

.link-button {
    border: 0;
    padding: 0;
    background: none;
    color: #175cd3;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.status-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 13px;
    text-transform: capitalize;
}

.job-status-badge {
    box-sizing: border-box;
    height: 24px;
    padding: 3px 8px;
    border: 1.5px solid currentColor;
    border-radius: 5px;
    background: #ffffff;
    font-size: 11px;
    font-weight: 800;
    line-height: 16px;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-badge-period-ended { color: #6941c6; }
.status-badge-enabled { color: #175cd3; }
.status-badge-ready { color: #067647; }
.status-badge-draft { color: #667085; }
.status-badge-disabled { color: #475467; }
.status-badge-scheduled { color: #067647; }
.status-badge-not-started { color: #667085; }
.status-badge-paused { color: #b54708; }
.status-badge-stopped,
.status-badge-failed { color: #b42318; }
.status-badge-success { color: #067647; }
.status-badge-partial { color: #b54708; }
.status-badge-cancelled,
.status-badge-unavailable { color: #667085; }
.status-badge-in-progress { color: #175cd3; }

.platform-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0 0 18px;
    padding: 10px 14px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #f9fafb;
}

.platform-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #ffffff;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.platform-breadcrumbs__item:hover {
    border-color: #98a2b3;
    background: #f2f4f7;
    color: #101828;
}

a.platform-breadcrumbs__item:focus-visible {
    outline: 2px solid #175cd3;
    outline-offset: 1px;
}

.platform-breadcrumbs__item--current {
    border-color: #b2ddff;
    background: #eff8ff;
    color: #175cd3;
    cursor: default;
}

.platform-breadcrumbs__separator {
    color: #98a2b3;
    font-size: 14px;
    line-height: 1;
}

.status-active {
    background: #ecfdf3;
    color: #027a48;
}

.status-suspended {
    background: #fffaeb;
    color: #b54708;
}

.status-disabled {
    background: #fef3f2;
    color: #b42318;
}

.status-archived {
    background: #f2f4f7;
    color: #475467;
}

.closed-notice {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    background: #fcfcfd;
}

.closed-notice strong {
    display: block;
    margin-bottom: 6px;
    color: #344054;
}

.closed-notice p {
    margin: 4px 0;
    color: #475467;
    font-size: 13px;
}

.close-client-details {
    margin-top: 18px;
}

.close-client-details summary {
    cursor: pointer;
    font-weight: 650;
}

.close-client-panel {
    margin-top: 10px;
    padding: 14px 16px;
    border: 1px solid #fda29b;
    border-radius: 10px;
    background: #fffbfa;
}

.close-client-panel label {
    display: block;
    margin: 10px 0 4px;
    font-size: 13px;
    color: #344054;
}

.close-client-panel select,
.close-client-panel textarea,
.close-client-panel input[type="text"] {
    width: 100%;
    max-width: 420px;
    padding: 8px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font: inherit;
}

.close-client-panel .confirm-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
}

.close-client-panel .confirm-checkbox input {
    margin-top: 3px;
}

.retention-policy-fieldset {
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 12px;
    max-width: 420px;
}

.retention-policy-fieldset legend {
    font-size: 13px;
    font-weight: 650;
    color: #344054;
}

.retention-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0;
    font-size: 13px;
    color: #344054;
}

.retention-option input {
    margin-top: 3px;
}

.retention-option small {
    display: block;
    color: #667085;
    font-size: 12px;
    margin-top: 2px;
}

.danger-text {
    color: #b42318;
}

.empty-state {
    margin-top: 30px;
    padding: 60px 24px;
    background: white;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    text-align: center;
}

.empty-state h2 {
    margin-top: 0;
}

.empty-state p {
    color: #667085;
}


@media (max-width: 600px) {

    .clients-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .secondary-button {
        width: 100%;
    }

    .empty-state {
        padding: 40px 20px;
    }

}


/* ADD CLIENT */

.button-link {
    display: inline-block;
    text-decoration: none;
}

.form-card {
    margin-top: 30px;

    background: white;

    border: 1px solid #e4e7ec;
    border-radius: 14px;

    padding: 30px;
}

.form-section {
    padding-bottom: 30px;
    margin-bottom: 30px;

    border-bottom: 1px solid #eaecf0;
}

.form-section:last-of-type {
    border-bottom: 0;
}

.form-section h2 {
    margin-top: 0;
    margin-bottom: 8px;

    font-size: 20px;
}

.section-description {
    margin-top: 0;
    margin-bottom: 20px;

    color: #667085;
}

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.field-help {
    margin-top: 6px;

    color: #667085;
    font-size: 13px;
}

.feature-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.feature-option {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    border: 1px solid #e4e7ec;
    border-radius: 10px;

    padding: 16px;

    cursor: pointer;
}

.feature-option:hover {
    background: #f9fafb;
}

.feature-option input {
    margin-top: 3px;

    width: 18px;
    height: 18px;
}

.feature-option strong {
    display: block;
}

.feature-option small {
    display: block;

    margin-top: 5px;

    line-height: 1.4;

    color: #667085;
}

.form-actions {
    display: flex;

    justify-content: flex-end;
    align-items: center;

    gap: 12px;
}

.cancel-button {
    padding: 11px 16px;

    color: #344054;

    text-decoration: none;
}


@media (max-width: 700px) {

    .form-card {
        padding: 22px 18px;
    }

    .form-grid,
    .feature-grid {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column-reverse;
    }

    .form-actions .secondary-button,
    .form-actions .cancel-button {
        width: 100%;

        text-align: center;
    }

}


/* CLIENT OVERVIEW */

.client-link {
    color: #101828;
    text-decoration: none;
}

.client-link:hover {
    text-decoration: underline;
}

.back-link {
    display: inline-block;
    margin-bottom: 24px;
    color: #475467;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

.client-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.client-title-row h1 {
    margin: 5px 0;
    font-size: 34px;
}

.client-title-row p {
    margin: 0;
    color: #667085;
}

.client-code-label {
    font-size: 13px;
    font-weight: 700;
    color: #667085;
    letter-spacing: 0.5px;
}

.summary-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.summary-card {
    background: white;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    padding: 22px;
}

.summary-card span {
    display: block;
    color: #667085;
    font-size: 14px;
}

.summary-card strong {
    display: block;
    margin-top: 8px;
    font-size: 28px;
}

/* Verification results that require client attention */
.summary-card-attention {
    background: #fff7f7;
    border-color: #efb4b4;
    border-left: 5px solid #c53030;
}

.summary-card-attention span {
    color: #9b2c2c;
    font-weight: 600;
}

.summary-card-attention strong {
    color: #9b2c2c;
}

a.summary-card-attention {
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}

a.summary-card-attention:hover {
    background: #fff0f0;
    border-color: #dc8d8d;
    transform: translateY(-1px);
}

.detail-card {
    margin-top: 24px;
    background: white;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    padding: 28px;
}

.detail-card-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 26px;
}

.detail-card-heading h2 {
    margin: 0;
}

.detail-card-heading p {
    margin: 6px 0 0;
    color: #667085;
}

.detail-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.detail-item span,
.detail-item small {
    display: block;
    color: #667085;
}

.detail-item span {
    margin-bottom: 7px;
    font-size: 13px;
}

.detail-item small {
    margin-top: 5px;
    font-size: 12px;
}

.feature-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.feature-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;

    border: 1px solid #eaecf0;
    border-radius: 10px;
    padding: 16px;
}

.feature-summary strong,
.feature-summary small {
    display: block;
}

.feature-summary small {
    margin-top: 5px;
    color: #667085;
}

.feature-enabled {
    color: #027a48;
    font-weight: 600;
    font-size: 13px;
}

.feature-disabled {
    color: #667085;
    font-size: 13px;
}

.client-module-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.module-card {
    background: white;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    padding: 22px;
}

.module-card h3 {
    margin-top: 0;
}

.module-card p {
    color: #667085;
    min-height: 44px;
}

.module-card span {
    font-size: 13px;
    font-weight: 600;
    color: #475467;
}

.muted-text {
    color: #667085;
}


@media (max-width: 900px) {

    .summary-grid,
    .client-module-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .detail-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 600px) {

    .client-title-row,
    .detail-card-heading {
        flex-direction: column;
    }

    .summary-grid,
    .client-module-grid,
    .detail-grid,
    .feature-summary-grid {
        grid-template-columns: 1fr;
    }

    .detail-card {
        padding: 22px 18px;
    }

    .detail-card-heading .secondary-button {
        width: 100%;
    }

}


/* READ-ONLY / PERMANENT FIELDS */

.readonly-field {
    background: #f2f4f7;
    color: #667085;
    cursor: not-allowed;
}


/* FEATURE MANAGEMENT */

.feature-management-list {
    display: grid;
    gap: 14px;
}

.feature-management-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    padding: 18px;

    cursor: pointer;
}

.feature-management-item:hover {
    background: #f9fafb;
}

.feature-management-info {
    flex: 1;
}

.feature-management-info strong,
.feature-management-info span,
.feature-management-info small {
    display: block;
}

.feature-management-info span {
    margin-top: 5px;

    color: #667085;

    font-size: 14px;
}

.feature-management-info small {
    margin-top: 7px;

    color: #475467;

    font-size: 12px;
}


/* TOGGLE */

.toggle-control {
    position: relative;

    width: 48px;
    height: 26px;

    flex: 0 0 auto;
}

.toggle-control input {
    opacity: 0;

    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;

    inset: 0;

    background: #d0d5dd;

    border-radius: 999px;

    transition: 0.2s;
}

.toggle-slider::before {
    content: "";

    position: absolute;

    width: 20px;
    height: 20px;

    left: 3px;
    top: 3px;

    background: white;

    border-radius: 50%;

    transition: 0.2s;

    box-shadow:
        0 1px 3px rgba(0,0,0,0.2);
}

.toggle-control input:checked
+ .toggle-slider {
    background: #101828;
}

.toggle-control input:checked
+ .toggle-slider::before {
    transform: translateX(22px);
}

.feature-actions {
    margin-top: 28px;
}


@media (max-width: 600px) {

    .feature-management-item {
        padding: 16px;
    }

}


/* PORTAL USERS */

.module-card-link {
    color: inherit;
    text-decoration: none;
}

.module-card-link:hover {
    border-color: #98a2b3;

    box-shadow:
        0 3px 10px rgba(16, 24, 40, 0.06);
}

.table-secondary-text {
    margin-top: 5px;

    color: #667085;
    font-size: 13px;
}

.password-pending {
    color: #b54708;
    font-size: 13px;
    font-weight: 600;
}

.password-normal {
    color: #027a48;
    font-size: 13px;
    font-weight: 600;
}


/* CLIENT USER CREATION */

.info-panel {
    margin-bottom: 28px;
    padding: 18px;

    background: #f9fafb;

    border: 1px solid #eaecf0;
    border-radius: 10px;
}

.info-panel strong {
    display: block;
    margin-bottom: 4px;
}

.info-panel p {
    margin-top: 0;
    margin-bottom: 16px;

    color: #667085;
}

.info-panel p:last-child {
    margin-bottom: 0;
}

.credential-card {
    margin-top: 30px;

    background: white;

    border: 1px solid #e4e7ec;
    border-radius: 14px;

    padding: 30px;
}

.credential-warning {
    margin-bottom: 28px;

    padding: 18px;

    background: #fffaeb;

    border: 1px solid #fedf89;
    border-radius: 10px;
}

.credential-warning p {
    margin-bottom: 0;

    color: #7a2e0e;
}

.temporary-password-section {
    margin-top: 28px;
}

.temporary-password-section label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;
    font-weight: 600;
}

.temporary-password-row {
    display: flex;
    gap: 10px;
}

.temporary-password {
    font-family: monospace;
    font-size: 17px;
}

.credential-actions {
    margin-top: 30px;
}


@media (max-width: 600px) {

    .credential-card {
        padding: 22px 18px;
    }

    .temporary-password-row {
        flex-direction: column;
    }

    .temporary-password-row .secondary-button {
        width: 100%;
    }

}

/* PLATFORM DASHBOARD LINKS */

.dashboard-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.dashboard-card-link:hover {
    border-color: #98a2b3;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.07);
    transform: translateY(-1px);
}

.dashboard-card-link:focus-visible {
    outline: 3px solid rgba(52, 64, 84, 0.20);
    outline-offset: 3px;
}


/* CLIENT DASHBOARD */

.client-dashboard-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 24px;
}

.client-dashboard-heading h1 {
    margin: 5px 0;

    font-size: 36px;
}

.client-dashboard-heading p {
    margin: 0;

    color: #667085;
}


.client-role-box {
    min-width: 170px;

    background: white;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    padding: 16px 18px;
}

.client-role-box span,
.client-role-box strong {
    display: block;
}

.client-role-box span {
    color: #667085;

    font-size: 12px;
}

.client-role-box strong {
    margin-top: 4px;
}


.client-dashboard-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

    margin-top: 32px;
}


.client-action-card {
    position: relative;

    min-height: 210px;

    padding: 25px;

    background: white;

    border: 1px solid #e4e7ec;
    border-radius: 15px;
}


.client-action-card h2 {
    margin-top: 0;

    font-size: 20px;
}


.client-action-card p {
    color: #667085;

    line-height: 1.5;
}


.module-coming {
    position: absolute;

    bottom: 22px;

    color: #667085;

    font-size: 13px;
    font-weight: 600;
}


.feature-chip {
    display: inline-block;

    margin-top: 8px;

    padding: 5px 9px;

    border-radius: 999px;

    background: #ecfdf3;

    color: #027a48;

    font-size: 12px;
    font-weight: 600;
}


.card-action-link {
    display: inline-block;

    margin-top: 8px;

    color: #101828;

    font-weight: 600;

    text-decoration: none;
}

.card-action-link:hover {
    text-decoration: underline;
}


.client-capabilities {
    margin-top: 24px;

    padding: 24px;

    background: white;

    border: 1px solid #e4e7ec;
    border-radius: 14px;
}

.client-capabilities h2 {
    margin-top: 0;

    font-size: 18px;
}


.capability-list {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}


.capability-chip {
    padding: 7px 11px;

    background: #f2f4f7;

    border-radius: 999px;

    color: #344054;

    font-size: 13px;
}


@media (max-width: 900px) {

    .client-dashboard-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 600px) {

    .client-dashboard-heading {
        flex-direction: column;
    }

    .client-dashboard-heading h1 {
        font-size: 29px;
    }

    .client-role-box {
        width: 100%;
    }

    .client-dashboard-grid {
        grid-template-columns: 1fr;
    }

}


/* WHATSAPP ADMIN */

.inline-empty {
    padding: 24px;

    background: #f9fafb;

    border: 1px dashed #d0d5dd;
    border-radius: 10px;

    color: #667085;

    text-align: center;
}

.client-table code {
    font-size: 13px;
    color: #344054;
}


/* PLATFORM WHATSAPP GROUP ASSIGNMENT */

.security-notice {
    margin-bottom: 22px;
    padding: 16px 18px;

    border: 1px solid #d0d5dd;
    border-radius: 10px;

    background: #f9fafb;
}

.security-notice p {
    margin: 5px 0 0;
    color: #667085;
}


.group-search-box {
    margin-bottom: 20px;
}

.group-search-box label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
}


.admin-group-list {
    display: grid;
    gap: 12px;
}

.admin-group-row {
    display: flex;
    gap: 15px;

    padding: 17px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;
}

.admin-group-check input {
    width: 19px;
    height: 19px;
    margin-top: 3px;
}

.admin-group-main {
    flex: 1;
    min-width: 0;
}

.admin-group-name {
    display: block;
    font-weight: 700;
}

.admin-group-jid {
    margin-top: 4px;

    font-family: monospace;
    font-size: 12px;

    color: #667085;

    overflow-wrap: anywhere;
}

.mapping-warning {
    display: inline-block;

    margin-top: 9px;
    padding: 5px 8px;

    border-radius: 6px;

    background: #fffaeb;
    color: #b54708;

    font-size: 12px;
    font-weight: 600;
}

.small-action-button {
    display: inline-block;

    padding: 7px 11px;

    border-radius: 7px;

    background: #101828;
    color: #ffffff;

    text-decoration: none;
    font-size: 13px;
}

@media (max-width: 600px) {

    .admin-group-row {
        padding: 14px;
    }

}


/* CLIENT WHATSAPP GROUPS */

.client-group-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}


.client-group-card {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 18px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    background: #ffffff;
}


.client-group-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 10px;

    background: #f2f4f7;

    font-size: 12px;
    font-weight: 700;

    color: #344054;
}


.client-group-status {
    margin-top: 4px;

    color: #027a48;

    font-size: 12px;
    font-weight: 600;
}


.client-info-note {
    margin-top: 20px;

    padding: 15px 17px;

    border: 1px solid #e4e7ec;
    border-radius: 10px;

    background: #f9fafb;

    color: #667085;

    font-size: 14px;
}


@media (max-width: 700px) {

    .client-group-grid {
        grid-template-columns: 1fr;
    }

}


.client-action-card-link {
    display: block;

    color: inherit;

    text-decoration: none;
}

.client-action-card-link:hover {
    transform: translateY(-1px);
}


/* CLIENT OVERVIEW / MY JOBS */

.jobs-workspace {
    margin-top: 32px;
    padding: 26px;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 15px;
}

.jobs-workspace-heading,
.job-slot,
.supporting-navigation,
.supporting-navigation-links {
    display: flex;
    align-items: center;
}

.jobs-workspace-heading,
.job-slot,
.supporting-navigation {
    justify-content: space-between;
}

.jobs-workspace-heading {
    gap: 20px;
    margin-bottom: 20px;
}

.jobs-workspace-heading h2,
.supporting-navigation h2 {
    margin: 0;
}

.jobs-workspace-heading p,
.supporting-navigation p {
    margin: 5px 0 0;
    color: #667085;
}

.job-slot-list {
    display: grid;
    gap: 12px;
}

.job-slot {
    gap: 24px;
    min-height: 112px;
    padding: 18px 20px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #ffffff;
}

.job-slot-configured {
    align-items: flex-start;
    position: relative;
}

.job-slot-configured.job-card-border-not_started { border: 2px solid #98a2b3; }
.job-slot-configured.job-card-border-enabled,
.job-slot-configured.job-card-border-auto_repeat_active,
.job-slot-configured.job-card-border-running,
.job-slot-configured.job-card-border-completed { border: 2px solid #2e90fa; }
.job-slot-configured.job-card-border-scheduled { border: 2px solid #12b76a; }
.job-slot-configured.job-card-border-paused,
.job-slot-configured.job-card-border-auto_repeat_paused,
.job-slot-configured.job-card-border-partial { border: 2px solid #f79009; }
.job-slot-configured.job-card-border-stopped,
.job-slot-configured.job-card-border-failed { border: 2px solid #f04438; }
.job-slot-configured.job-card-border-period_ended { border: 2px solid #7f56d9; }

.job-schedule-indicator {
    position: absolute;
    top: 18px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 112px;
    height: 56px;
    border: 2px solid #2e90fa;
    border-radius: 10px;
    background: #eff8ff;
    color: #175cd3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
}

.job-schedule-icon {
    display: inline-flex;
}

.job-schedule-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.job-schedule-text {
    display: block;
}

.job-schedule-once {
    border-color: #7f56d9;
    background: #f5f1ff;
    color: #6941c6;
}

.job-schedule-recurring {
    border-color: #344b6e;
    background: #f2f4f7;
    color: #1d2939;
}

.job-slot-main {
    flex: 0 1 280px;
    min-width: 220px;
}

.job-period-guidance {
    position: absolute;
    left: 20px;
    right: 260px;
    bottom: 2px;
    z-index: 1;
    display: block;
    overflow: hidden;
    color: #6941c6;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

.job-status-line {
    display: flex;
    align-items: center;
    gap: 9px;
}

.job-code,
.job-slot-number {
    color: #667085;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.job-slot h3 {
    margin: 9px 0 5px;
    font-size: 18px;
}

.job-slot p {
    margin: 0;
    color: #667085;
}

.job-content-summary {
    line-height: 1.45;
}

.job-card-content {
    margin-top: 8px;
}

.job-card-content-label {
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.job-content-type-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 10px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    color: #667085;
    font-size: 13px;
    line-height: 1.25;
}

.job-content-type-list li {
    white-space: nowrap;
}

.job-content-type-list span {
    color: #475467;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-weight: 750;
}

.job-content-type-list .is-selected {
    color: #1d2939;
    font-weight: 700;
}

.job-content-type-list .is-selected span {
    color: #067647;
}

.job-lifecycle-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 12px;
}

.job-lifecycle-actions form { margin: 0; }

.job-slot-details {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 16px 20px;
    margin: 0;
}

.job-slot-details dt {
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.job-slot-details dd {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.job-channel-sender dd + dt {
    margin-top: 10px;
}

.job-slot-empty {
    border-style: dashed;
    background: #f9fafb;
}

.supporting-navigation {
    gap: 24px;
    margin-top: 24px;
    padding: 22px 24px;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #ffffff;
}

.supporting-navigation-links {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.supporting-navigation-links a,
.supporting-navigation-links button,
.supporting-link-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid #e4e7ec;
    border-radius: 9px;
    color: #344054;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
}

.supporting-navigation-links button {
    appearance: none;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

.supporting-navigation-links a:hover,
.supporting-navigation-links button:hover {
    border-color: #98a2b3;
    background: #f9fafb;
}

.supporting-navigation-links a:focus-visible,
.supporting-navigation-links button:focus-visible {
    outline: 3px solid rgba(46, 144, 250, 0.35);
    outline-offset: 2px;
}

.identity-page { max-width: 1080px; }
.identity-page-heading,
.identity-channel-heading,
.identity-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}
.identity-page-heading { margin-bottom: 24px; }
.identity-page-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}
.identity-channel-card,
.registration-section {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}
.identity-list { display: grid; gap: 12px; margin-top: 20px; }
.identity-card { border-top: 1px solid #e8ecef; padding-top: 18px; }
.identity-job-dependencies {
    margin-top: 14px;
    border-top: 1px solid #e8ecef;
    padding-top: 6px;
}
.identity-job-dependency {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f3f5;
}
.identity-card h3 { margin: 4px 0; }
.identity-management-label,
.identity-permanent-id { color: #66737f; font-size: .8rem; }
.identity-value { margin: 0 0 5px; }
.identity-status {
    border-radius: 999px;
    background: #eef1f4;
    padding: 6px 10px;
    font-size: .82rem;
    font-weight: 700;
}
.identity-status-active { background: #e2f5e9; color: #176b36; }
.identity-status-setup_required,
.identity-status-pending_verification { background: #fff2cf; color: #785700; }
.identity-status-error,
.identity-status-disconnected { background: #fde7e7; color: #8c2525; }
.identity-empty-state { margin-top: 18px; color: #66737f; }
.registration-progress {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.registration-progress li { background: #eef1f4; padding: 10px; font-size: .78rem; }
.registration-progress li.current { background: #dcecff; color: #164f87; }
.identity-registration-form { max-width: 820px; }
.radio-option { display: flex; gap: 10px; margin: 10px 0; }
.radio-option span { display: grid; gap: 3px; }
.radio-option small { color: #66737f; }
.provider-options { border: 0; padding: 14px 0; }
.smtp-future-fields { border-top: 1px solid #e8ecef; margin-top: 14px; padding-top: 14px; }
.setup-required-notice { border-color: #ebcf7b; background: #fffaf0; }

@media (max-width: 760px) {
    .identity-page-heading,
    .identity-channel-heading,
    .identity-card { flex-direction: column; }
    .registration-progress { grid-template-columns: 1fr 1fr; }
}

.supporting-link-disabled {
    color: #98a2b3;
}

.supporting-link-disabled small {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 500;
}

@media (max-width: 900px) {
    .job-slot-configured,
    .supporting-navigation {
        align-items: stretch;
        flex-direction: column;
    }

    .job-schedule-indicator {
        display: none;
    }

    .job-slot-main {
        min-width: 0;
    }

    .job-period-guidance {
        position: static;
        right: auto;
        bottom: auto;
        width: auto;
        max-width: 520px;
        margin-top: 10px;
        overflow: visible;
        white-space: normal;
    }

    .supporting-navigation-links {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .jobs-workspace {
        padding: 18px;
    }

    .jobs-workspace-heading,
    .job-slot-empty {
        align-items: stretch;
        flex-direction: column;
    }

    .job-slot-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* CLIENT JOB BUILDER */

.button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.job-edit-link { display: inline-block; margin-top: 10px; color: #344054; font-size: 14px; font-weight: 700; }
.job-view-command { align-items: center; background: #fff; border: 2px solid #344b6e; border-radius: 8px; color: #1d2939; display: inline-flex; font-size: 14px; font-weight: 700; justify-content: center; line-height: 1.2; min-height: 38px; padding: 8px 16px; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease; }
.job-view-command:hover { background: #f2f4f7; border-color: #1d3557; color: #101828; text-decoration: none; }
.job-view-command:focus-visible { border-color: #175cd3; box-shadow: 0 0 0 3px rgba(46,144,250,.25); outline: none; }
.page-context-label { color: #667085; font-size: 13px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.client-reference { color: #667085; font-size: 13px; }
.account-container { max-width: 860px; }
.account-brand-card, .account-security-card { margin-top: 20px; }
.readonly-value { padding: 13px 14px; border: 1px solid #e4e7ec; border-radius: 9px; background: #f9fafb; color: #667085; }
.job-builder-container { max-width: 1380px; margin: auto; padding: 34px 32px 60px; }
.builder-title-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.builder-title-row h1 { margin: 10px 0 4px; }
.back-link { color: #475467; text-decoration: none; font-weight: 600; }
.job-code-display { margin: 0; color: #667085; }
.builder-alert { background: #fffaeb; color: #7a2e0e; }
.builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 24px; align-items: start; }
.builder-main { min-width: 0; }
.setup-progress { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.setup-progress li { padding: 8px 11px; border: 1px solid #d0d5dd; border-radius: 999px; background: white; color: #667085; font-size: 13px; font-weight: 700; }
.setup-progress li.complete { border-color: #a6f4c5; background: #ecfdf3; color: #067647; }
.builder-card, .job-overview, .ready-form { margin-bottom: 16px; padding: 22px; border: 1px solid #e4e7ec; border-radius: 14px; background: white; }
.builder-card label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 650; }
.step-label { margin-bottom: 16px; color: #344054; font-size: 17px; font-weight: 800; }
.section-help, .save-hint { color: #667085; }
.save-hint { font-size: 13px; }
.content-type-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.builder-card .choice-tile { display: flex; gap: 9px; align-items: center; margin: 0; padding: 15px; border: 1px solid #d0d5dd; border-radius: 10px; }
.recipient-list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 260px; overflow: auto; }
.recipient-list-grid label, .radio-row label { font-weight: 500; }
.radio-row { display: flex; flex-wrap: wrap; gap: 20px; }
.conditional-field { margin-top: 16px; }
.schedule-substep { margin: 22px 0 10px; color: #344054; font-size: 14px; font-weight: 800; }
.timezone-choice-list { display: grid; gap: 9px; }
.timezone-choice-list label { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 13px; border: 1px solid #d0d5dd; border-radius: 10px; }
.timezone-choice-list span, .timezone-choice-list small { display: block; }
.timezone-choice-list small { margin-top: 3px; color: #667085; font-weight: 500; }
.date-time-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.recurring-details { margin-top: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.schedule-summary { margin-top: 20px; padding: 18px; border: 1px solid #b2ddff; border-radius: 10px; background: #eff8ff; }
.schedule-summary .schedule-substep { margin-top: 0; color: #175cd3; }
.schedule-summary p { margin: 10px 0 4px; color: #475467; font-size: 13px; }
.schedule-summary strong { display: block; color: #1849a9; }
.content-workspace { padding: 0; overflow: hidden; }
.inline-content-workspace { margin-top: 18px; border: 1px solid #e4e7ec; border-radius: 12px; overflow: hidden; }
.inline-content-workspace:empty { display: none; }
.content-workspace > .step-label { padding: 22px 22px 0; }
.content-editor { padding: 22px; border-top: 1px solid #e4e7ec; }
.inline-content-workspace .content-editor:first-child:not([hidden]) { border-top: 0; }
.content-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.content-editor h2 { margin: 0 0 12px; font-size: 19px; }
.content-state { padding: 5px 9px; border-radius: 999px; background: #fff4ed; color: #b93815; font-size: 12px; font-weight: 750; }
.content-state.confirmed { background: #ecfdf3; color: #067647; }
.content-textarea { min-height: 150px; resize: vertical; margin-bottom: 10px; }
.text-preview { margin-bottom: 18px; padding: 18px; border: 1px solid #e4e7ec; border-radius: 10px; background: #f9fafb; white-space: pre-wrap; overflow-wrap: anywhere; }
.content-image-preview, .content-video-preview { display: block; width: 100%; max-width: 620px; max-height: 440px; margin: 12px 0 18px; border-radius: 10px; object-fit: contain; background: #101828; }
.file-name { color: #475467; overflow-wrap: anywhere; }
.content-actions { margin: 12px 0; }
.standard-content-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 14px; }
.action-link { border: 0; padding: 0; background: none; color: #175cd3; font: inherit; font-size: 14px; font-weight: 750; text-decoration: none; cursor: pointer; }
.action-link:hover { text-decoration: underline; }
.danger-action { color: #b42318; }

.job-action-area { min-width: 220px; }
.job-state-indicator { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.job-state-indicator > span { width: 9px; height: 9px; border-radius: 50%; background: #98a2b3; }
.builder-info-notice { border-color: #b2ddff; background: #eff8ff; color: #175cd3; }
.job-state-running > span { background: #12b76a; }
.job-state-paused > span { background: #f79009; }
.job-state-partial > span { background: #f79009; }
.job-state-completed > span { background: #2e90fa; }
.job-state-failed > span { background: #f04438; }
.job-state-scheduled > span { background: #667085; }
.job-state-auto_repeat_active > span { background: #12b76a; }
.job-state-auto_repeat_paused > span { background: #f79009; }
.job-state-period_ended > span { background: #667085; }
.job-state-stopped > span { background: #d92d20; }
.job-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.job-card-actions form { margin: 0; }
.job-action-button { border: 0; border-radius: 7px; color: #fff; cursor: pointer; font: inherit; font-weight: 700; padding: 7px 12px; }
.job-action-start { background: #12b76a; }
.job-action-enable { background: #175cd3; }
.job-action-pause { background: #f79009; color: #332000; }
.job-action-resume { background: #2e90fa; }
.job-action-stop { background: #e04f16; }
.job-action-start-again { background: #6941c6; }
.job-action-delete { background: #d92d20; }
.job-action-button:hover { filter: brightness(.94); }
.job-action-button:focus-visible { outline: 3px solid rgba(46,144,250,.3); outline-offset: 2px; }
.job-action-unavailable {
    background: #eaecf0;
    color: #667085;
    cursor: default;
    display: inline-block;
    font-size: 12px;
    padding: 7px 12px;
    border-radius: 7px;
    font-weight: 700;
}
.job-action-unavailable:hover { filter: none; }
.email-execution-unavailable p { margin: 0; }
.job-failed-count { color: #b42318; font-weight: 700; }
.job-latest-result { margin-top: 6px; font-size: 12px; font-weight: 650; line-height: 1.35; }
.job-latest-result-partial { color: #b54708; }
.job-latest-result-failed { color: #b42318; }
.job-execution-feedback {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid #f0b8b8;
    border-radius: 8px;
    background: #fff8f8;
    font-size: 13px;
    line-height: 1.45;
}
.job-execution-feedback p { margin: 2px 0 6px; color: #b42318; }
.job-execution-feedback .secondary-button { margin-right: 8px; }
.confirm-dialog { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.confirm-dialog[hidden] { display: none; }
.confirm-dialog-backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, 0.55); }
.confirm-dialog-panel { position: relative; width: min(440px, 100%); padding: 24px; border: 1px solid #e4e7ec; border-radius: 14px; background: #ffffff; box-shadow: 0 16px 40px rgba(16, 24, 40, 0.24); }
.confirm-dialog-panel h2 { margin: 0 0 8px; font-size: 18px; }
.confirm-dialog-panel p { margin: 0 0 20px; color: #475467; font-size: 14px; line-height: 1.55; }
.confirm-dialog-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -8px 0 18px;
    color: #475467;
    font-size: 14px;
}
.confirm-dialog-progress[hidden] { display: none; }
.confirm-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(46, 144, 250, 0.25);
    border-top-color: #2e90fa;
    border-radius: 50%;
    animation: confirm-spin 0.8s linear infinite;
    flex: 0 0 auto;
}
@keyframes confirm-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .confirm-spinner { animation: none; }
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.confirm-dialog-button { border: 0; border-radius: 9px; padding: 10px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
.confirm-dialog-cancel { border: 1px solid #d0d5dd; background: #ffffff; color: #344054; }
.confirm-dialog-cancel:hover { background: #f2f4f7; }
.confirm-dialog-submit { background: #d92d20; color: #ffffff; }
.confirm-dialog-submit:hover { background: #b42318; }
.confirm-dialog-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.confirm-dialog-button:focus-visible { outline: 3px solid rgba(46, 144, 250, 0.35); outline-offset: 2px; }
.job-counter-box { align-items: center; background: #fff; border: 2px solid #101828; border-radius: 8px; color: #101828; display: inline-flex; font-size: 1.6rem; font-variant-numeric: tabular-nums; font-weight: 800; justify-content: center; line-height: 1; min-height: 44px; min-width: 58px; padding: 4px 10px; }
.job-current-counter dd { align-items: flex-start; display: flex; flex-direction: column; gap: 6px; }
.disabled-action { color: #98a2b3; cursor: default; }
.disabled-action:hover { text-decoration: none; }
.confirmed-note { margin-top: 16px; padding: 12px 14px; border-radius: 9px; background: #ecfdf3; color: #067647; font-weight: 750; }
.approval-box summary { cursor: pointer; color: #7a2e0e; font-weight: 800; }
.recipient-empty-state { padding: 18px; border: 1px dashed #d0d5dd; border-radius: 10px; background: #f9fafb; }
.recipient-empty-state p { margin-top: 0; }
.mapping-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.mapping-grid label { display: block; font-size: 13px; font-weight: 600; color: #344054; }
.mapping-grid select { width: 100%; }
.recipient-file-list { margin: 10px 0; padding-left: 20px; }
.recipient-file-list li { font-size: 13px; }
.attachment-library-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.attachment-cell-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    min-height: 34px;
    padding: 2px 4px;
    border-radius: 8px;
}
.attachment-cell-button {
    display: inline-block;
    border: 1px solid #d0d5dd;
    background: #f9fafb;
    color: #344054;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 7px;
}
.attachment-cell-control:hover .attachment-cell-button {
    border-color: #98a2b3;
    background: #f2f4f7;
}
.attachment-cell-name {
    color: #344054;
    font-size: 12px;
    font-weight: 600;
    word-break: break-all;
}
.attachment-cell-name.attachment-resolved { color: #067647; }
.attachment-cell-control input[type="file"] { display: none; }
td[data-attachment-cell].cell-invalid { outline: 1px solid #f04438; border-radius: 8px; }
td[data-attachment-cell].cell-ambiguous { outline: 1px solid #f79009; border-radius: 8px; }
.merge-field-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; align-items: center; }
.merge-field-button {
    border: 1px solid #d0d5dd;
    background: #f9fafb;
    color: #344054;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.merge-field-button:hover { border-color: #98a2b3; background: #f2f4f7; }
.email-body-guide {
    margin: 10px 0;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    background: #f9fafb;
    padding: 10px 12px;
}
.email-body-guide summary { cursor: pointer; font-weight: 700; color: #344054; }
.email-body-guide p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.content-state.content-dirty { color: #b54708; font-weight: 800; }
.preview-details { margin-top: 8px; }
.preview-details dd { white-space: normal; }
.email-preview-body { min-height: 120px; }
.attachment-preview-iframe {
    width: 100%;
    height: 620px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
}
.attachment-preview-image {
    max-width: 100%;
    max-height: 620px;
    object-fit: contain;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
}
.recipient-summary-line { margin-top: 14px; }
.row-invalid { background: #fffbfa; }
.row-duplicate { background: #fffcf5; }
.row-ready td[data-row-status] { color: #067647; }
.row-invalid td[data-row-status],
.row-duplicate td[data-row-status] { font-weight: 700; }
.cell-invalid,
.cell-invalid:focus {
    border-color: #f04438 !important;
    background: #fef3f2 !important;
    box-shadow: 0 0 0 1px #f04438 inset;
}
.cell-duplicate,
.cell-duplicate:focus {
    border-color: #f79009 !important;
    background: #fffaeb !important;
}
.cell-ambiguous,
.cell-ambiguous:focus {
    border-color: #f79009 !important;
    background: #fffaeb !important;
}
.row-status-line { font-weight: 700; }
.row-errors-line { color: #b42318; font-size: 11px; line-height: 1.3; margin-top: 2px; }
.field-error { color: #b42318; font-size: 13px; font-weight: 600; margin: 6px 0 0; }
.list-status-badge {
    display: inline-block;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    padding: 3px 9px;
    text-transform: uppercase;
    vertical-align: middle;
}
.list-status-ready { background: #ecfdf3; color: #067647; border: 1px solid #abefc6; }
.list-status-draft { background: #fffaeb; color: #b54708; border: 1px solid #fedf89; }
.form-actions-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 18px 0 28px;
}
.template-download-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 4px;
}
.is-submitting { opacity: .65; pointer-events: none; }
.danger-link { border: 0; padding: 0; background: none; color: #b42318; font-weight: 700; cursor: pointer; }
.approval-box { margin-top: 18px; padding: 18px; border: 1px solid #fedf89; border-radius: 10px; background: #fffaeb; }
.approval-box p { line-height: 1.55; }
.approval-box label { display: flex; align-items: center; gap: 8px; margin: 14px 0; }
.ready-form p { margin-bottom: 0; color: #667085; font-size: 13px; }
.archive-form { margin: 8px 0 24px; text-align: right; }
.archive-confirmation { display: block; margin-bottom: 8px; color: #667085; font-size: 12px; }
.review-summary dl { display: grid; gap: 12px; }
.review-summary dt { color: #667085; font-size: 12px; font-weight: 700; }
.review-summary dd { margin: 3px 0 0; }
.review-list { padding-left: 22px; color: #475467; line-height: 1.7; }
.review-text { margin-top: 8px; padding: 12px; border-radius: 8px; background: #f9fafb; white-space: pre-wrap; }
.final-confirmation-form label { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0; }
.job-overview { position: sticky; top: 18px; margin: 0; }
.overview-toggle { width: 100%; border: 0; padding: 0; background: none; text-align: left; font-size: 20px; font-weight: 800; cursor: default; }
.overview-toggle span { display: none; float: right; }
.job-overview dl { margin: 18px 0; }
.job-overview dl div { margin-bottom: 12px; }
.job-overview dt { color: #667085; font-size: 12px; font-weight: 700; }
.job-overview dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.job-overview h3 { margin: 20px 0 7px; font-size: 14px; }
.job-overview p { margin: 0; color: #475467; }
.overview-list { margin: 0; padding: 0; list-style: none; color: #475467; line-height: 1.8; }
.job-overview .overview-warning,
.job-overview dd.overview-warning,
.job-overview p.overview-warning,
.job-overview li.overview-warning {
    background: #fef3f2;
    color: #b42318;
    font-weight: 650;
    border-radius: 4px;
    padding: 1px 5px;
}
.execution-note { margin-top: 22px !important; padding-top: 14px; border-top: 1px solid #e4e7ec; font-size: 12px; }

/* EXECUTION HISTORY */

.execution-history-card {
    margin-top: 24px;
}

.execution-history-heading h2 {
    margin: 0 0 14px;
    font-size: 18px;
}

.execution-history-table {
    min-width: 640px;
}

.execution-history-table td {
    vertical-align: middle;
}

.execution-time {
    color: #344054;
    font-weight: 600;
    white-space: nowrap;
}

.execution-recipients {
    font-variant-numeric: tabular-nums;
}

.execution-details {
    color: #475467;
}

.execution-history-empty {
    margin: 0;
    color: #667085;
}

.execution-history-more {
    margin-top: 16px;
}

@media (max-width: 950px) {
    .builder-layout { display: flex; flex-direction: column; }
    .job-overview { position: static; order: -1; width: 100%; }
    .overview-toggle { cursor: pointer; }
    .overview-toggle span { display: block; }
}

@media (max-width: 620px) {
    .job-builder-container { padding: 24px 16px 44px; }
    .builder-title-row { align-items: flex-start; }
    .content-type-grid, .recipient-list-grid { grid-template-columns: 1fr; }
    .date-time-grid, .recurring-details { grid-template-columns: 1fr; }
    .radio-row { flex-direction: column; gap: 7px; }
    .content-editor-heading { align-items: flex-start; flex-direction: column; }
    .builder-card, .job-overview, .ready-form { padding: 18px; }
}


/* CLIENT ACCOUNT SUSPENSION */

.client-status-control {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 20px;
    padding: 16px 18px;

    border: 1px solid #e4e7ec;
    border-radius: 10px;

    background: #ffffff;
}

.client-status-control > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.danger-button {
    padding: 9px 14px;

    border: 0;
    border-radius: 8px;

    background: #b42318;
    color: #ffffff;

    cursor: pointer;
    font-weight: 600;
}

.suspended-banner {
    margin-bottom: 20px;
    padding: 16px 18px;

    border: 1px solid #fedf89;
    border-radius: 10px;

    background: #fffaeb;
}

.suspended-banner strong {
    display: block;
    margin-bottom: 5px;
}

.client-module-disabled {
    opacity: 0.45;
    filter: grayscale(1);
    pointer-events: none;
    cursor: not-allowed;
}

.suspended-message {
    max-width: 600px;

    margin: 30px auto;
    text-align: center;
}

.suspended-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin: 0 auto 16px;

    border-radius: 50%;

    background: #fffaeb;

    font-weight: 800;
    font-size: 22px;
}


@media (max-width: 650px) {

    .client-status-control {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* PLATFORM NAVIGATION */

.platform-brand-link {
    color: inherit;
    text-decoration: none;
}

.platform-brand-link:hover {
    opacity: 0.85;
}


/* CLIENT MESSAGES */

.messages-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.messages-empty {
    max-width: 520px;
    margin: 25px auto;
    padding: 28px 20px;
    text-align: center;
}

.messages-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin: 0 auto 15px;

    border-radius: 12px;
    background: #f2f4f7;

    color: #344054;
    font-weight: 700;
}

.messages-empty p {
    color: #667085;
}

.messages-next-note {
    font-size: 13px;
}

@media (max-width: 700px) {

    .messages-heading {
        align-items: stretch;
        flex-direction: column;
    }

}


/* DELIVERY PROFILE ADMIN */

.delivery-profile-list {
    display: grid;
    gap: 18px;
}

.delivery-profile-card {
    padding: 20px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    background: #ffffff;
}

.delivery-profile-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;
}

.channel-pill,
.default-pill {
    display: inline-block;

    padding: 5px 9px;

    border-radius: 7px;

    font-size: 12px;
    font-weight: 700;
}

.channel-pill {
    background: #f2f4f7;
    color: #344054;
}

.default-pill {
    margin-left: 5px;

    background: #ecfdf3;
    color: #027a48;
}

.delivery-setting-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 16px;
}

.delivery-toggle-row {
    display: flex;
    flex-wrap: wrap;

    gap: 18px;

    margin-top: 20px;
}

.delivery-toggle-row label {
    display: flex;
    align-items: center;

    gap: 7px;

    font-size: 14px;
}

.delivery-readonly-grid {
    display: flex;
    flex-wrap: wrap;

    gap: 20px;

    color: #667085;
}


@media (max-width: 950px) {

    .delivery-setting-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 600px) {

    .delivery-setting-grid {
        grid-template-columns: 1fr;
    }

    .delivery-profile-heading {
        align-items: flex-start;
        flex-direction: column;
    }

}

clear


.client-admin-quick-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 20px;
}


/* CLIENT CONTACT LISTS */

.contacts-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}

.contact-summary-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 20px;
}

.contacts-empty {
    max-width: 560px;

    margin: 25px auto;

    padding: 28px 20px;

    text-align: center;
}

.contacts-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin: 0 auto 15px;

    border-radius: 12px;

    background: #f2f4f7;

    color: #344054;

    font-weight: 700;
}

.contacts-empty p,
.table-subtext {
    color: #667085;
}

.table-subtext {
    margin-top: 4px;
    font-size: 13px;
}


@media (max-width: 700px) {

    .contacts-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .contact-summary-grid {
        grid-template-columns: 1fr;
    }

}


/* CONTACT PASTE IMPORT */

.contact-import-form {
    max-width: 900px;
}

.contact-number-paste {
    min-height: 260px;
    resize: vertical;
    font-family: monospace;
}

.import-stat-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 20px;
}


@media (max-width: 900px) {

    .import-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 550px) {

    .import-stat-grid {
        grid-template-columns: 1fr;
    }

}


/* UNIFIED CONTACT IMPORT */

.contact-import-form {
    max-width: 900px;
}

.import-method-selector {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin: 16px 0 20px;
}

.import-method-option {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    padding: 16px;

    border: 1px solid #e4e7ec;
    border-radius: 11px;

    background: #ffffff;

    cursor: pointer;
}

.import-method-option input {
    width: 18px;
    height: 18px;

    margin-top: 2px;
}

.import-method-option span {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.import-method-option small {
    color: #667085;
}

.import-method-panel {
    margin-top: 16px;
}

.contact-number-paste {
    min-height: 250px;
    resize: vertical;

    font-family: monospace;
}

.upload-format-note {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 12px;
}

.upload-format-note strong {
    width: 100%;
}

.upload-format-note span {
    padding: 4px 8px;

    border-radius: 6px;

    background: #f2f4f7;

    font-size: 12px;
    font-weight: 600;
}

.import-stat-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 20px;
}


@media (max-width: 700px) {

    .import-method-selector {
        grid-template-columns: 1fr;
    }

    .import-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 450px) {

    .import-stat-grid {
        grid-template-columns: 1fr;
    }

}


/* CONTACT LIST SEARCH / PREVIEW */

.contact-list-view-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.contact-list-count {
    min-width: 150px;

    padding: 14px 18px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    background: #ffffff;
}

.contact-list-count span {
    display: block;

    margin-bottom: 4px;

    color: #667085;
    font-size: 13px;
}

.contact-list-count strong {
    font-size: 24px;
}

.contact-filter-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 14px;
}

.contact-filter-actions {
    margin-top: 16px;
}

.contact-match-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 20px;

    padding: 14px 18px;

    border: 1px solid #d0d5dd;
    border-radius: 12px;

    background: #ffffff;
}

.contact-match-summary > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-match-summary span {
    color: #667085;
}

.preview-only-badge {
    flex-shrink: 0;

    padding: 6px 10px;

    border-radius: 999px;

    background: #f2f4f7;

    font-size: 12px;
    font-weight: 700;
}

.phone-preview-cell {
    font-family: monospace;
    font-size: 14px;
}

.phone-match-highlight {
    padding: 2px 3px;

    border-radius: 4px;

    font-weight: 800;
}

.contact-pagination {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 14px;

    margin-top: 20px;
}

.contact-pagination > :last-child {
    justify-self: end;
}

.contact-list-name-link {
    color: inherit;
    text-decoration: none;
}

.contact-list-name-link:hover {
    text-decoration: underline;
}


@media (max-width: 1100px) {

    .contact-filter-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 700px) {

    .contact-list-view-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-list-count {
        min-width: 0;
    }

    .contact-filter-grid {
        grid-template-columns: 1fr;
    }

    .contact-match-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .contact-pagination {
        grid-template-columns:
            1fr 1fr;

        row-gap: 15px;
    }

    .contact-pagination > span:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 1;

        text-align: center;
    }

}


/* CONTACT HOUSEKEEPING SELECTION */

.contact-select-column {
    width: 42px;
    text-align: center;
}

.contact-select-column input {
    width: 17px;
    height: 17px;
}

.contact-selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-top: 18px;

    padding: 16px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    background: #ffffff;
}

.contact-selection-message {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.contact-selection-message span {
    color: #667085;
    font-size: 13px;
}

.contact-selection-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 9px;
}

.housekeeping-review-summary {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 20px;
}

.housekeeping-review-summary > div {
    padding: 18px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    background: #ffffff;
}

.housekeeping-review-summary span {
    display: block;

    margin-bottom: 5px;

    color: #667085;

    font-size: 13px;
}

.housekeeping-review-summary strong {
    font-size: 18px;
}

.housekeeping-impact-count {
    font-size: 28px !important;
}

.housekeeping-filter-summary {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.housekeeping-filter-summary > div {
    padding: 12px;

    border-radius: 10px;

    background: #f8fafc;
}

.housekeeping-filter-summary span {
    display: block;

    margin-bottom: 4px;

    color: #667085;

    font-size: 12px;
}

.housekeeping-warning {
    margin-bottom: 20px;

    padding: 16px 18px;

    border: 1px solid #d0d5dd;
    border-radius: 12px;

    background: #ffffff;
}

.housekeeping-warning p {
    margin-bottom: 0;
}

.housekeeping-review-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    margin: 20px 0;
}


@media (max-width: 800px) {

    .contact-selection-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .contact-selection-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .contact-selection-actions button {
        width: 100%;
    }

    .housekeeping-filter-summary {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .housekeeping-review-summary {
        grid-template-columns: 1fr;
    }

    .housekeeping-review-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .housekeeping-review-actions > * {
        width: 100%;
        text-align: center;
    }

}


/* CONTACT HOUSEKEEPING ACTION */

.housekeeping-action-form {
    max-width: 760px;
}

.housekeeping-action-option {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 12px;
    padding: 18px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    background: #ffffff;

    cursor: pointer;
}

.housekeeping-action-option input {
    width: 18px;
    height: 18px;

    margin-top: 3px;
}

.housekeeping-action-option > span {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.housekeeping-action-option small {
    color: #667085;
    line-height: 1.5;
}


@media (max-width: 600px) {

    .housekeeping-action-option {
        padding: 15px;
    }

}


/* CONTACT LIST MANAGEMENT */

.list-management-form {
    max-width: 760px;
}

.list-actions-heading,
.list-actions-cell {
    width: 80px;
    text-align: center;
}

.list-action-menu {
    position: relative;
    display: inline-block;
}

.list-action-menu summary {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 34px;

    border: 1px solid #d0d5dd;
    border-radius: 8px;

    background: #ffffff;

    cursor: pointer;

    font-size: 20px;
    line-height: 1;

    list-style: none;
}

.list-action-menu summary::-webkit-details-marker {
    display: none;
}

.list-action-menu-items {
    position: absolute;
    right: 0;
    z-index: 50;

    min-width: 180px;

    margin-top: 6px;
    padding: 6px;

    border: 1px solid #e4e7ec;
    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 10px 30px
        rgba(16, 24, 40, 0.14);

    text-align: left;
}

.list-action-menu-items a {
    display: block;

    padding: 9px 10px;

    border-radius: 7px;

    color: #101828;

    text-decoration: none;

    white-space: nowrap;
}

.list-action-menu-items a:hover {
    background: #f2f4f7;
}

.list-action-menu-items .list-action-danger {
    color: #b42318;
}

.list-action-menu-items .list-action-danger:hover {
    background: #fef3f2;
}

.contact-list-actions-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 34px;

    border: 1px solid #d0d5dd;
    border-radius: 8px;

    background: #ffffff;

    cursor: pointer;

    font-size: 20px;
    line-height: 1;
}

.contact-list-floating-menu {
    position: fixed;
    z-index: 1000;

    min-width: 180px;

    padding: 6px;

    border: 1px solid #e4e7ec;
    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 10px 30px
        rgba(16, 24, 40, 0.14);

    text-align: left;
}

.contact-list-floating-menu a {
    display: block;

    padding: 9px 10px;

    border-radius: 7px;

    color: #101828;

    text-decoration: none;

    white-space: nowrap;
}

.contact-list-floating-menu a:hover {
    background: #f2f4f7;
}

.contact-list-floating-menu .list-action-danger {
    color: #b42318;
}

.contact-list-floating-menu .list-action-danger:hover {
    background: #fef3f2;
}

.delete-list-warning {
    max-width: 760px;

    padding: 20px;

    border: 1px solid #f0b8b8;
    border-radius: 12px;

    background: #ffffff;
}

.delete-list-warning h2 {
    margin-top: 0;
}

.delete-list-count {
    display: inline-block;

    margin: 4px 0 12px;
    padding: 6px 10px;

    border-radius: 999px;

    background: #f2f4f7;

    font-weight: 700;
}

.delete-list-actions {
    display: flex;
    justify-content: flex-end;

    gap: 10px;

    max-width: 760px;

    margin-top: 18px;
}

.list-dependency-blocker {
    max-width: 760px;

    display: grid;
    gap: 10px;

    margin-top: 16px;
}

.list-dependency-job {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 14px 16px;

    border: 1px solid #e4e7ec;
    border-radius: 10px;

    background: #ffffff;
}

.list-dependency-job .secondary-button {
    white-space: nowrap;
}


@media (max-width: 700px) {

    .list-actions-heading,
    .list-actions-cell {
        width: 55px;
    }

    .list-action-menu-items {
        right: 0;
        min-width: 165px;
    }

    .delete-list-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .delete-list-actions > * {
        width: 100%;
        text-align: center;
    }

    .list-dependency-job {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* IMPORT REPORT COUNTERS */

.import-stat-grid {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(125px, 1fr)
        );
}


/* HOUSEKEEPING BACK NAVIGATION */

.housekeeping-back-form {
    margin: 0 0 16px;
}

.back-link-button {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}


/* Contact import live progress */

.import-progress-panel {
    margin-top: 1rem;
}

.import-progress-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.import-progress-heading p {
    margin-top: 0.35rem;
    margin-bottom: 0;
}

.import-progress-title-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.import-progress-title-row h2 {
    margin: 0;
}

.import-live-indicator {
    width: 0.7rem;
    height: 0.7rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #2563eb;
    opacity: 0;
}

.import-live-indicator.is-active {
    opacity: 1;
    animation:
        import-live-pulse
        1.1s
        ease-in-out
        infinite;
}

.import-status-button {
    min-height: 42px;
    padding: 0.65rem 1rem;
    border: 1px solid rgba(15, 23, 42, 0.16);
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        opacity 0.15s ease;
}

.import-status-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        0 5px 15px
        rgba(15, 23, 42, 0.08);
}

.import-status-button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.import-progress-track {
    position: relative;
    width: 100%;
    height: 14px;
    margin-top: 1.5rem;
    overflow: hidden;
    border-radius: 999px;
    background:
        rgba(15, 23, 42, 0.10);
}

.import-progress-fill {
    position: relative;
    width: 0;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #2563eb,
            #3b82f6
        );
    transition:
        width 0.45s ease;
}

.import-progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.55),
            transparent
        );
    animation:
        import-progress-shimmer
        1.4s
        linear
        infinite;
}

.import-progress-track.is-indeterminate
.import-progress-fill {
    position: absolute;
    width: 35% !important;
    animation:
        import-indeterminate
        1.4s
        ease-in-out
        infinite;
}

.import-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.8rem;
    font-size: 0.92rem;
}

.import-background-note {
    margin-top: 1rem;
    margin-bottom: 0;
    opacity: 0.72;
}

.import-progress-error {
    margin-top: 1rem;
    margin-bottom: 0;
    font-weight: 600;
}

@keyframes import-live-pulse {

    0%,
    100% {
        transform: scale(0.7);
        opacity: 0.35;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }

}

@keyframes import-progress-shimmer {

    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }

}

@keyframes import-indeterminate {

    0% {
        left: -35%;
    }

    50% {
        left: 45%;
    }

    100% {
        left: 100%;
    }

}

@media (max-width: 720px) {

    .import-progress-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .import-status-button {
        width: 100%;
    }

    .import-progress-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

}


.import-progress-count-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.import-progress-percent {
    font-size: 1rem;
    font-weight: 700;
}

@media (max-width: 720px) {

    .import-progress-count-group {
        width: 100%;
        justify-content: space-between;
    }

}



/* Contact import finished progress states */

.import-progress-track.is-complete
.import-progress-fill {
    background: #22c55e;
}

.import-progress-track.is-complete
.import-progress-fill::after {
    display: none;
    animation: none;
}

.import-progress-track.is-failed
.import-progress-fill {
    background: #dc2626;
}

.import-progress-track.is-failed
.import-progress-fill::after {
    display: none;
    animation: none;
}

.import-progress-track.is-cancelled
.import-progress-fill {
    background: #64748b;
}

.import-progress-track.is-cancelled
.import-progress-fill::after {
    display: none;
    animation: none;
}

.contact-list-names-cell {
    width: 24%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.attention-table {
    width: 100%;
    table-layout: fixed;
}

.attention-table th,
.attention-table td {
    vertical-align: middle;
}

.attention-table .phone-preview-cell {
    width: 18%;
    white-space: nowrap;
}

.attention-status-cell {
    width: 11%;
    white-space: nowrap;
}

.attention-reason-cell {
    width: 30%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.attention-checked-cell {
    width: 17%;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .attention-table {
        min-width: 680px;
        table-layout: auto;
    }

    .attention-table .phone-preview-cell,
    .contact-list-names-cell,
    .attention-status-cell,
    .attention-reason-cell,
    .attention-checked-cell {
        width: auto;
    }
}

.client-header-reference {
    color: #98a2b3;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.whatsapp-qr-frame {
    align-items: center;
    background: #fff;
    border: 1px solid #d8dee8;
    display: flex;
    justify-content: center;
    margin: 1rem 0;
    min-height: 280px;
    padding: 1rem;
}

.whatsapp-qr-frame img {
    height: auto;
    max-width: 280px;
    width: 100%;
}


/* CLIENT BILLING & USAGE */

.billing-usage-container {
    max-width: 1180px;
}

.billing-page-heading {
    margin-bottom: 24px;
}

.billing-summary-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 18px;
}

.billing-summary-card,
.service-usage-card {
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    padding: 22px;
}

.billing-summary-card > span,
.service-usage-topline span,
.billing-additional-charge span {
    display: block;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.billing-summary-card h2,
.service-usage-card h3 {
    margin: 8px 0;
    color: #101828;
}

.billing-plan-card strong,
.billing-charge-card h2,
.billing-additional-charge strong {
    color: #101828;
}

.billing-summary-card p {
    margin: 10px 0 0;
    color: #667085;
}

.billing-summary-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 20px 0 0;
}

.billing-summary-card dt,
.service-usage-metrics dt {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.billing-summary-card dd,
.service-usage-metrics dd {
    margin: 4px 0 0;
    color: #101828;
    font-weight: 650;
}

.billing-additional-charge {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #eaecf0;
}

.billing-section {
    margin-top: 28px;
}

.billing-section-heading {
    margin-bottom: 14px;
}

.billing-section-heading h2 {
    margin: 0;
}

.service-usage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.service-usage-topline {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.billing-mode-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #f9fafb;
    color: #344054;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.usage-progress {
    height: 10px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: #eaecf0;
}

.usage-progress span {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
    background: #175cd3;
}

.usage-progress-unlimited span {
    background: #667085;
}

.usage-percent {
    margin: 9px 0 0;
    color: #667085;
    font-size: 13px;
}

.service-usage-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 20px 0 0;
}

.billing-activity-card {
    margin-top: 0;
}

.billing-activity-table {
    min-width: 980px;
}

.billing-empty-cell {
    color: #667085;
    text-align: center;
}

@media (max-width: 980px) {

    .billing-summary-grid {
        grid-template-columns: 1fr;
    }

    .service-usage-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 640px) {

    .billing-summary-card dl,
    .service-usage-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-usage-topline {
        flex-direction: column;
    }

}

/* Part 4C.2 - guided invoice creation workflow */
.form-section {
    margin: 0 0 18px;
    padding: 16px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
}

.form-section legend {
    padding: 0 8px;
    color: #344054;
    font-size: 14px;
    font-weight: 800;
}

.invoice-flow {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e4e7ec;
}

.invoice-flow h3 {
    margin: 0 0 14px;
    color: #344054;
    font-size: 17px;
    font-weight: 800;
}

.invoice-flow-subsection {
    margin-top: 14px;
}

.invoice-price-box {
    margin: 14px 0;
    padding: 14px 16px;
    border: 1px solid #b2ddff;
    border-radius: 10px;
    background: #eff8ff;
}

.invoice-price-box p {
    margin: 6px 0;
    color: #344054;
    font-size: 14px;
}

.choice-preview {
    margin-top: 6px;
    color: #175cd3;
    font-weight: 700;
}

.choice-note {
    color: #b93815;
    font-weight: 600;
}


/* ============ INVOICE V1 UX ============ */

.page-heading-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.button-row form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.table-subline {
    display: block;
    margin-top: 2px;
    color: #667085;
    font-size: 12px;
    font-weight: 500;
}

.invoice-counter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.invoice-counter-card {
    display: block;
    padding: 16px 18px;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    background: #ffffff;
    text-decoration: none;
    color: #344054;
}

.invoice-counter-card span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #667085;
}

.invoice-counter-card strong {
    display: block;
    margin-top: 4px;
    font-size: 28px;
    line-height: 1.1;
    color: #101828;
}

.invoice-counter-card-alert strong {
    color: #b42318;
}

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0;
}

.filter-tab {
    padding: 7px 13px;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    background: #ffffff;
    color: #475467;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.filter-tab-active {
    background: #175cd3;
    border-color: #175cd3;
    color: #ffffff;
}

.invoice-status-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 12px;
    font-weight: 700;
}

.invoice-status-draft,
.invoice-status-preview {
    background: #eef2f6;
    color: #475467;
}

.invoice-status-issued {
    background: #eff8ff;
    color: #175cd3;
}

.invoice-status-overdue {
    background: #fef3f2;
    color: #b42318;
}

.invoice-status-paid {
    background: #ecfdf3;
    color: #067647;
}

.invoice-status-void {
    background: #f2f4f7;
    color: #667085;
}

.invoice-document {
    margin: 18px 0;
    padding: 24px 26px;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.invoice-document-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 16px;
    border-bottom: 2px solid #101828;
}

.invoice-brand {
    display: block;
    font-size: 22px;
    letter-spacing: 1px;
    color: #101828;
}

.invoice-brand-sub {
    display: block;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.invoice-document-meta {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, auto));
    gap: 14px;
}

.invoice-document-meta span {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #667085;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.invoice-document-meta strong {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #101828;
}

.invoice-document-body {
    padding: 16px 0 6px;
}

.invoice-document-body h3,
.invoice-payment-section h3 {
    margin: 0 0 6px;
    font-size: 13px;
    color: #667085;
}

.invoice-document-body p {
    margin: 3px 0;
    color: #344054;
}

.invoice-plan-line {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e4e7ec;
}

.invoice-line-table td {
    vertical-align: top;
}

.invoice-included-row {
    color: #667085;
    font-size: 13px;
}

.invoice-amount-cell {
    text-align: right;
    font-weight: 600;
}

.invoice-totals {
    max-width: 340px;
    margin: 14px 0 14px auto;
}

.invoice-totals p {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    color: #344054;
}

.invoice-total-line {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #101828;
}

.invoice-totals-card p {
    margin: 5px 0;
    color: #344054;
}

.invoice-total-line strong {
    color: #101828;
}

.invoice-payment-section {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fcfcfd;
}

.qr-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin: 10px 0;
    border: 1px dashed #98a2b3;
    border-radius: 10px;
    background: #f9fafb;
    color: #475467;
    font-size: 11px;
    text-align: center;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .invoice-counter-grid {
        grid-template-columns: 1fr;
    }

    .invoice-document-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.invoice-preview-card p {
    margin: 8px 0;
    color: #344054;
}

.invoice-preview-card strong {
    color: #475467;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.invoice-preview-total {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e4e7ec;
    font-size: 18px;
}

/* ============================================================
   Part 4D - Account Credit / Top-Up (mobile-first)
   ============================================================ */

.account-credit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 18px 0;
}

.account-credit-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.account-credit-card span {
    color: #475467;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.account-credit-card strong {
    color: #101828;
    font-size: 26px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.account-credit-card small {
    color: #667085;
    font-size: 12px;
    line-height: 1.4;
}

.account-credit-confirmed {
    border-top: 3px solid #175cd3;
}

.account-credit-pending {
    border-top: 3px solid #b54708;
}

.account-credit-available {
    border-top: 3px solid #079455;
}

.account-credit-outstanding {
    border-top: 3px solid #b42318;
}

.alert-warning {
    border: 1px solid #fecdca;
    background: #fffbfa;
    color: #912018;
}

.topup-page-heading,
.statement-page-heading {
    align-items: flex-start;
    flex-wrap: wrap;
}

.topup-heading-actions,
.statement-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.topup-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.topup-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.topup-methods {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 0;
    border: 0;
}

.topup-methods legend {
    padding: 0;
    margin-bottom: 8px;
    color: #344054;
    font-size: 14px;
    font-weight: 600;
}

.topup-method-option {
    position: relative;
    display: block;
    cursor: pointer;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.topup-method-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.topup-method-option:has(input:checked) {
    border-color: #175cd3;
    box-shadow: 0 0 0 3px rgba(23, 92, 211, 0.14);
}

.topup-method-option:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.55;
}

.topup-method-option input:focus-visible + .topup-method-body {
    outline: 2px solid #175cd3;
    outline-offset: -2px;
    border-radius: 9px;
}

.topup-method-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 13px 14px;
}

.topup-method-body small {
    color: #667085;
}

.money-input {
    display: flex;
    align-items: stretch;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

.money-input:focus-within {
    border-color: #175cd3;
    box-shadow: 0 0 0 3px rgba(23, 92, 211, 0.14);
}

.money-input-prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: #475467;
    background: #f9fafb;
    border-right: 1px solid #d0d5dd;
    font-weight: 600;
}

.money-input input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 0;
    outline: 0;
    font-size: 18px;
    font-weight: 600;
}

.destination-card,
.duitnow-card {
    padding: 14px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fcfcfd;
    overflow-wrap: anywhere;
}

.destination-card h3,
.duitnow-card h3 {
    margin: 0 0 8px;
    color: #101828;
    font-size: 15px;
}

.destination-details {
    display: grid;
    gap: 6px;
    margin: 0;
}

.destination-details div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px;
}

.destination-details dt {
    color: #667085;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.destination-details dd {
    margin: 0;
    color: #344054;
    overflow-wrap: anywhere;
}

.destination-note-row {
    display: block !important;
}

.duitnow-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.duitnow-card .qr-placeholder {
    flex: 0 0 auto;
}

.duitnow-card > div:last-child {
    flex: 1 1 220px;
    min-width: 0;
}

.duitnow-card p {
    margin: 4px 0;
    color: #475467;
    font-size: 13px;
    line-height: 1.5;
}

.qr-payload {
    font-size: 11px !important;
    color: #667085 !important;
    overflow-wrap: anywhere;
}

.receipt-upload-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.file-control {
    font-size: 14px;
}

.receipt-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 100%;
    padding: 10px;
    border: 1px dashed #98a2b3;
    border-radius: 10px;
    background: #f9fafb;
}

.receipt-preview img {
    display: block;
    max-width: 100%;
    max-height: 320px;
    width: auto;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 6px;
    background: #ffffff;
}

.receipt-preview p {
    margin: 0;
    color: #475467;
    font-size: 12px;
    text-align: center;
    overflow-wrap: anywhere;
}

.receipt-preview[hidden],
.receipt-preview img[data-receipt-preview-image][hidden],
.receipt-preview [data-receipt-pdf-preview][hidden] {
    display: none;
}

.receipt-preview [data-receipt-pdf-preview] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: #475467;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.receipt-preview [data-receipt-pdf-preview] strong {
    color: #101828;
    font-size: 14px;
}

.receipt-preview [data-receipt-pdf-open] {
    margin-top: 2px;
}

.receipt-admin-preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 480px;
}

.receipt-admin-preview img {
    display: block;
    width: 100%;
    max-width: 460px;
    max-height: 360px;
    object-fit: contain;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #ffffff;
}

.receipt-admin-pdf {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.receipt-admin-pdf strong {
    color: #101828;
    font-size: 14px;
}

.full-width-button {
    width: 100%;
    justify-content: center;
}

.topup-steps {
    padding-left: 20px;
    margin: 10px 0 0;
    color: #344054;
    line-height: 1.6;
}

.topup-steps li {
    margin-bottom: 8px;
}

.topup-table td,
.statement-table td {
    vertical-align: top;
}

.table-subline-error {
    display: block;
    color: #b42318 !important;
    margin-top: 3px;
}

.small-button {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.3;
    min-height: 32px;
}

.secondary-button.danger-button {
    border-color: #fecdca;
    color: #b42318;
}

.status-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0;
}

.status-filter-tab {
    padding: 8px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    color: #475467;
    background: #ffffff;
    font-size: 13px;
    text-decoration: none;
}

.status-filter-tab:hover {
    border-color: #98a2b3;
}

.status-filter-active {
    border-color: #175cd3;
    color: #ffffff;
    background: #175cd3;
}

.correction-form {
    align-items: flex-end;
}

.inline-topup-action {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 8px;
    max-width: 220px;
}

.inline-note-input {
    padding: 6px 8px;
    font-size: 12px;
}

.topup-actions-cell {
    min-width: 210px;
}

.form-group-wide {
    grid-column: 1 / -1;
}

.statement-filter-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.statement-balance-grid {
    grid-template-columns: 1fr;
}

.statement-amount-negative {
    color: #b42318;
}

.statement-opening-row td,
.statement-closing-row td {
    border-top: 2px solid #d0d5dd;
    background: #f9fafb;
}

@media (min-width: 620px) {
    .account-credit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .statement-balance-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .topup-methods {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 980px) {
    .account-credit-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .topup-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .inline-topup-action {
        flex-direction: row;
        align-items: center;
        max-width: none;
    }

    .inline-note-input {
        flex: 1;
        min-width: 180px;
    }
}

/* Part 4F staff billing actions + onboarding free credit */
.staff-billing-actions {
    margin-bottom: 18px;
}

.staff-billing-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.staff-billing-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.action-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #fef3c7;
    color: #92400e;
    font-size: 12px;
    font-weight: 700;
}

.action-count-badge.action-count-critical {
    background: #fee2e2;
    color: #991b1b;
}

.radio-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
    margin-bottom: 6px;
}

.notification-type-label {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* Part 4I.1 - Simple Top-Up Flow */

.oxibytes-payee-card h2,
.duitnow-card h2 {
    margin: 0 0 8px;
    color: #101828;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.duitnow-card .duitnow-qr-frame {
    flex: 0 0 auto;
}

.duitnow-qr-image {
    display: block;
    width: 180px;
    height: 180px;
    object-fit: contain;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #ffffff;
}

.duitnow-card .duitnow-destination-info {
    flex: 1 1 260px;
    min-width: 0;
}

.topup-submission-fields {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e4e7ec;
}

.topup-submission-fields h3 {
    margin: 0 0 14px;
    color: #101828;
    font-size: 15px;
}

.qr-preview-box {
    margin-top: 10px;
}

.qr-preview-image {
    display: block;
    width: 150px;
    height: 150px;
    object-fit: contain;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #ffffff;
}

.destination-snapshot-text {
    margin-top: 6px;
    color: #475467;
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.topup-detail-action {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e4e7ec;
}

.topup-detail-action:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.topup-detail-reject {
    padding-top: 14px;
}

.admin-client-view-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 20px;
    background: #fff4e5;
    border-bottom: 1px solid #f9dba8;
    color: #7a4a00;
    font-size: 14px;
}

.admin-client-view-banner-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-client-view-banner .link-button {
    color: #b54708;
    font-weight: 650;
}

.support-session-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 20px;
    background: #eef4ff;
    border-bottom: 1px solid #b2ccff;
    color: #1d4ed8;
    font-size: 14px;
}

.support-session-active-client {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 14px 18px;
    border: 1px solid #b2ccff;
    border-radius: 10px;
    background: #eef4ff;
}

.support-session-active-client strong {
    display: block;
    color: #1d4ed8;
}

.support-session-active-client small {
    display: block;
    margin-top: 2px;
    color: #344054;
}

.support-request-pending {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 14px 18px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fcfcfd;
}

.support-request-pending strong {
    display: block;
    color: #101828;
}

.support-request-pending small {
    display: block;
    margin-top: 2px;
    color: #667085;
}

.support-description-input {
    min-width: 240px;
    padding: 8px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 14px;
}

.support-description-label {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: #344054;
}

.support-consent-line {
    margin-top: 8px;
    font-weight: 600;
}

/* Client self-service plan cards and switch actions */
.plan-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-top: 14px;
}

.plan-card .plan-card-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.plan-card .plan-service-list {
    margin: 14px 0;
}

.plan-card .plan-service-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid #eaecf0;
}

.plan-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.plan-action-button {
    margin-top: 14px;
}

.login-footer-divider {
    margin: 0 6px;
    opacity: 0.6;
}

.register-wrapper {
    overflow-y: auto;
}

.register-card {
    max-width: 620px;
}

/* Job Builder SQL Data Source (Phase 1) */
[data-sql-source-panel] {
    margin-top: 16px;
}

.sql-panel-box {
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fcfcfd;
    padding: 14px;
    margin-top: 12px;
}

.sql-panel-box > :first-child {
    margin-top: 0;
}

.sql-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.sql-panel-heading h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 650;
    color: #344054;
}

.sql-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px 14px;
}

.sql-field-grid label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #475467;
    margin-bottom: 4px;
}

.sql-action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 4px;
}

.sql-status-line {
    margin: 8px 0;
    font-size: 13px;
    color: #344054;
}

.sql-credential-help {
    color: #b42318;
}

.sql-security-warning {
    margin: 8px 0;
    padding: 8px 10px;
    border-left: 3px solid #f79009;
    background: #fffaeb;
    border-radius: 6px;
    color: #93370d;
    font-size: 12px;
}

.sql-result {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    white-space: pre-line;
}

.sql-result[data-state="success"] {
    background: #ecfdf3;
    color: #027a48;
    border: 1px solid #abefc6;
}

.sql-result[data-state="error"] {
    background: #fef3f2;
    color: #b42318;
    border: 1px solid #fecdca;
}

.sql-environment-guidance {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #e4e7ec;
    border-left: 3px solid #3538cd;
    background: #f8f9fc;
    border-radius: 8px;
}

.sql-environment-guidance .save-hint {
    margin: 4px 0;
}

.sql-query-editor {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    white-space: pre;
    overflow-wrap: normal;
}

.sql-fields-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 8px 0;
    padding: 0;
}

.sql-fields-list li {
    background: #eef4ff;
    color: #3538cd;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
}

.sql-fields-list li {
    background: transparent;
    padding: 0;
}

.sql-field-chip {
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: #eef4ff;
    color: #3538cd;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.sql-field-chip:hover {
    background: #d8e3ff;
}

.sql-preview-table {
    font-size: 12px;
}

.sql-preview-table td,
.sql-preview-table th {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sql-preview-item {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    background: #ffffff;
}

.sql-preview-item p {
    margin: 4px 0;
    white-space: pre-line;
    font-size: 12px;
}

/* SQL mapping hides conflicting static controls without clearing draft values. */
.sql-static-control-hidden {
    display: none !important;
}

.sql-preview-heading {
    margin: 14px 0 6px;
    font-size: 14px;
}

.sql-preview-record {
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #f9fafb;
    padding: 10px 12px;
    margin: 6px 0;
}

.sql-preview-record p {
    margin: 4px 0;
}

.sql-preview-message {
    white-space: pre-wrap;
    font-weight: 550;
}

.sql-preview-controls {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}