:root {
    /* ===== Primary Brand Colors ===== */
    --color-primary: #6c3baa; /* Main purple */
    --color-primary-light: #8870df; /* Lighter purple for hovers */
    --color-primary-dark: #5a2f8f; /* Darker purple for active states */
    --color-primary-rgb: 108, 59, 170;
    /* ===== Secondary/Accent Colors ===== */
    --color-secondary: #79aa3b;
    --color-secondary-light: #98c23e;
    --color-secondary-dark: #658a2f;
    --color-secondary-rgb: 121, 170, 59;
    /* ===== Grey ===== */
    --color-grey: #636c7e; /* Main grey */
    --color-grey-light: #818aa0; /* Lighter grey for hovers */
    --color-grey-dark: #505868; /* Darker grey for active states */
    --color-grey-rgb: 99, 108, 126;
    /* ===== Semantic Colors ===== */
    --color-success: #26b050;
    --color-success-rgb: 38, 176, 80;
    --color-danger: #ec3456;
    --color-danger-rgb: 236, 52, 86;
    --color-warning: #e19d57;
    --color-warning-rgb: 225, 157, 87;
    --color-info: #0071c1;
    --color-info-rgb: 0, 113, 193;
    /* ===== Neutral/UI Colors ===== */
    --color-text-primary: #1d1d1f;
    --color-text-secondary: #6e6e73;
    --color-text-tertiary: #9ca3af;
    --color-bg-page: #f4f4fd;
    --color-bg-card: #ffffff;
    --color-bg-surface: #ececec;
    --color-bg-elevated: #ffffff;
    --color-border: rgba(0, 0, 0, var(--opacity-subtle));
    --color-border-strong: rgba(0, 0, 0, var(--opacity-light));
    /* ===== Opacity Scale ===== */
    --opacity-light: 0.15;
    --opacity-subtle: 0.08;
    --opacity-medium: 0.25;
    --opacity-strong: 0.4;
    --opacity-heavy: 0.6;
    /* ===== Gradients ===== */
    --gradient-primary: linear-gradient( 135deg, rgba(var(--color-primary-rgb), 0.11) 0%, rgba(var(--color-primary-rgb), 0.075) 45%, rgba(var(--color-primary-rgb), 0.123) 100% );
    --gradient-primary-solid: linear-gradient( 315deg, var(--color-primary) 0%, #d5d1f6 100% );
    --gradient-primary-hover: linear-gradient( 135deg, var(--color-primary-light) 0%, var(--color-primary) 100% );
    --gradient-fusion: linear-gradient( 135deg, rgba(var(--color-primary-rgb), 0.18) 0%, rgba(var(--color-primary-rgb), 0.1) 55%, rgba(var(--color-secondary-rgb), 0.12) 100% );
    --gradient-button: linear-gradient( 0deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, white 20%) );
    --gradient-button-green: linear-gradient( 0deg, var(--color-secondary-light) 0%, color-mix(in srgb, var(--color-secondary-light) 80%, white 20%) );
    --gradient-button-grey: linear-gradient( 0deg, var(--color-grey) 0%, color-mix(in srgb, var(--color-grey) 80%, white 20%) );
    /* ===== Shadows ===== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 5px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-card: 0 5px 8px rgba(0, 0, 0, 0.3);
    /* hover items */
    --list-item-hover: color-mix(in srgb, var(--color-primary) 8%, transparent);
    --list-item-selected: color-mix( in srgb, var(--color-primary) 14%, transparent );
    /* Taken from registration css in portal.css */
    --c-primary: #6f42c1;
    --c-success: #198754;
    --c-danger: #dc3545;
    --c-border: #ced4da;
    --c-border-sub: #dee2e6;
    --c-surface: #f8f9fa;
    --c-text: #212529;
    --c-text-muted: #555;
    --c-text-hint: #adb5bd;
    /* Semi-transparent tints derived from the tokens above.
     color-mix() blends two colors in oklch space — perceptually
     uniform, so tints look "correct" across all hue values. */
    --c-primary-tint: color-mix(in oklch, var(--c-primary) 15%, transparent);
    --c-danger-tint: color-mix(in oklch, var(--c-danger) 12%, transparent);
    --c-danger-bg: color-mix(in oklch, var(--c-danger) 8%, white);
    --c-danger-bdr: color-mix(in oklch, var(--c-danger) 25%, transparent);
    --c-success-bg: color-mix(in oklch, var(--c-success) 8%, white);
    --c-success-bdr: color-mix(in oklch, var(--c-success) 25%, transparent);
}

.validation-message {
    color: red;
}

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

/* ─── Brand button (replaces SfButton btn-purple) ─── */


.btn-brand-green {
    background: var(--gradient-button-green);
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    padding: 0.625rem 1.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 150ms ease, box-shadow 150ms ease;

    &:hover {
        opacity: 0.9;
        box-shadow: var(--shadow-sm);
    }

    &:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.3);
    }

    &:active {
        background: var(--color-primary-dark);
    }
}

/* WIDELY IN USE */

.btn-purple {
    background: var(--gradient-button);
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    padding: 0.625rem 1.75rem;
    font-size: 0.9375rem;
    min-width: 120px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 150ms ease, box-shadow 150ms ease;

    &:hover {
        opacity: 0.9;
        box-shadow: var(--shadow-sm);
    }

    &:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.3);
    }

    &:active {
        background: var(--color-primary-dark);
    }
}

.btn-purple-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary, #231e5a);
    color: #fff !important;
    border: none;
    border-radius: 0.375rem;
    padding-block: 0.35rem;
    padding-inline: 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease, opacity 150ms ease;
}

    .btn-purple-sm:hover {
        background-color: var(--color-primary-dark, #1a1645);
    }

    .btn-purple-sm:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-grey {
    background: var(--gradient-button-grey);
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    padding: 0.625rem 1.75rem;
    font-size: 0.9375rem;
    min-width: 120px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 150ms ease, box-shadow 150ms ease;

    &:hover {
        opacity: 0.9;
        box-shadow: var(--shadow-sm);
    }

    &:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(var(--color-grey-rgb), 0.3);
    }

    &:active {
        background: var(--color-grey-dark);
    }
}

.btn-green {
    background-color: var(--color-secondary);
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    padding: 0.625rem 1.75rem;
    font-size: 0.9375rem;
    min-width: 120px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 150ms ease, box-shadow 150ms ease;

    &:hover {
        opacity: 0.9;
        box-shadow: var(--shadow-sm);
    }

    &:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.3);
    }

    &:active {
        background: var(--color-primary-dark);
    }
}


.btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--c-border-sub);
    border-radius: 0.375rem;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    font-size: 0.8rem;
    color: var(--c-text-muted);
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;

    &:hover {
        background-color: var(--c-surface);
        border-color: var(--c-text-muted);
    }

    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
}

/* END WIDELY IN USE */


.setup-page {
    border-width: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    border-top: 0;
    border-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-anchor {
    color: #007bff;
    cursor: pointer;
}




.btn-grey {
    margin-bottom: 1rem !important;
    width: 100% !important;
    cursor: pointer;
    background: #dadada;
    border: 1px solid #dadada;
    color: #6c757d;
    border-radius: 50px;
    text-transform: uppercase !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
    -webkit-appearance: button;
    appearance: button;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    box-sizing: border-box;
}

    .btn-grey:hover {
        background: #efeef9;
        color: #6c757d;
    }

    .btn-grey.btn-small {
        width: 30% !important;
    }

.btn-red {
    margin-bottom: 1rem !important;
    width: 100% !important;
    cursor: pointer;
    background: #ab0000;
    border: 1px solid #e43e3e;
    color: #fff;
    border-radius: 50px;
    text-transform: uppercase !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
    -webkit-appearance: button;
    appearance: button;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    box-sizing: border-box;
}

    .btn-red:hover {
        background: #e43e3e;
        color: #fff;
    }

    .btn-red.btn-small {
        width: 30% !important;
    }

.help-contact-form-button {
    justify-content: center !important;
    text-align: center !important;
}

.float-center {
    justify-content: center !important;
    text-align: center !important;
}

.rb-sms .e-radio-wrapper {
    display: flex;
}

.rb-sms input {
    margin-top: 5px;
    margin-right: 10px;
}

.explicit-notice {
    position: absolute !important;
    top: 0 !important;
    left: 42px !important;
    line-height: 10px !important;
    margin-left: 220px;
    padding-left: 20px;
    padding-top: 25px;
    color: #fff;
}

.magenta-nav {
    background: #f30252 !important;
    background-color: #f30252 !important;
}

.explicit-notice b {
    color: #fff;
}

.btn-yellow {
    margin-bottom: 1rem !important;
    width: 100% !important;
    cursor: pointer;
    background: #fbbb00;
    border: 1px solid #f1b60b;
    color: #fff;
    border-radius: 50px;
    text-transform: uppercase !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
    appearance: button;
    -webkit-appearance: button;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    box-sizing: border-box;
}

    .btn-yellow:hover {
        background: #f1b60b;
        color: #fff;
    }

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.4); opacity: 0; }
}

.btn-pulse-save {
    position: relative;
    z-index: 1;
}

.btn-pulse-save::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit;
    border: 2px solid #8e8e8e;
    animation: pulse-ring 1.5s infinite ease-out;
    pointer-events: none;
    z-index: -1;
}