/*  Shared component styles for EMS.Web.

    Extracted from the views so a change lands in one place. Before this, .staff-editor was
    copy-pasted into Staff/Add, Staff/Edit, User/Add and User/Edit - four copies of the same
    ~45 selectors, which is why fixes kept having to be applied four times.

    The four copies were verified byte-identical before extraction (Staff/Add held a superset;
    the other three were exact subsets with no differing rule bodies), so this changes nothing
    visually.

    Loaded from Views/Shared/_BaseLayout.cshtml. Local file, not the CDN, so it ships with the
    app and needs no S3 upload when it changes.

    Add further components below under their own banner as they are extracted. */


/* ============================================================================
   staff-editor
   Used by: Staff/Add, Staff/Edit, User/Add, User/Edit
   ============================================================================ */
    .staff-editor {
        --staff-primary: #4f46e5;
        --staff-primary-dark: #3730a3;
        --staff-text: #172033;
        --staff-muted: #667085;
        --staff-border: #e4e7ec;
        max-width: 1120px;
        margin: 0 auto;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, .24);
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 22px 60px rgba(15, 23, 42, .10);
    }

    .staff-editor__hero {
        position: relative;
        min-height: 175px;
        padding: 32px 38px;
        overflow: hidden;
        background: linear-gradient(125deg, #312e81 0%, #4f46e5 54%, #0891b2 100%);
        color: #fff;
    }

        .staff-editor__hero::before,
        .staff-editor__hero::after {
            position: absolute;
            border-radius: 50%;
            content: "";
            pointer-events: none;
        }

        .staff-editor__hero::before {
            top: -125px;
            right: -55px;
            width: 310px;
            height: 310px;
            border: 46px solid rgba(255, 255, 255, .08);
        }

        .staff-editor__hero::after {
            right: 210px;
            bottom: -130px;
            width: 230px;
            height: 230px;
            background: rgba(255, 255, 255, .06);
        }

    .staff-editor__hero-content {
        position: relative;
        z-index: 1;
        max-width: 630px;
    }

    .staff-editor__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 11px;
        padding: 5px 11px;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 999px;
        background: rgba(255, 255, 255, .10);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .staff-editor__title {
        margin: 0 0 7px;
        color: #fff;
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -.02em;
    }

    .staff-editor__subtitle {
        margin: 0;
        color: rgba(255, 255, 255, .78);
        font-size: 14px;
        line-height: 1.6;
    }

    .staff-editor__body {
        padding: 34px 38px 38px;
    }

    .staff-editor__invite-panel {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 28px;
        padding: 16px 18px;
        border: 1px solid #c7d7fe;
        border-radius: 13px;
        background: linear-gradient(135deg, #f5f8ff 0%, #eef2ff 100%);
    }

    .staff-editor__invite-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: #fff;
        color: var(--staff-primary);
        font-size: 18px;
        box-shadow: 0 5px 14px rgba(79, 70, 229, .10);
    }

    .staff-editor__invite-copy {
        min-width: 0;
        flex: 1;
    }

        .staff-editor__invite-copy h3 {
            margin: 0 0 3px;
            color: var(--staff-text);
            font-size: 14px;
            font-weight: 700;
        }

        .staff-editor__invite-copy p {
            margin: 0;
            color: var(--staff-muted);
            font-size: 12px;
            line-height: 1.5;
        }

    .staff-editor__invite-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        gap: 7px;
        min-height: 40px;
        padding: 8px 14px;
        border: 1px solid #c7d2fe !important;
        border-radius: 9px;
        background: #fff !important;
        color: #4338ca !important;
        font-weight: 600;
        text-decoration: none !important;
        white-space: nowrap;
    }

        .staff-editor__invite-action i {
            margin: 0 !important;
            color: #4f46e5 !important;
        }

        .staff-editor__invite-action:hover,
        .staff-editor__invite-action:focus {
            border-color: #4f46e5 !important;
            background: #eef2ff !important;
            color: #3730a3 !important;
            text-decoration: none !important;
        }

    .staff-editor__or-divider {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 28px;
        color: #98a2b3;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

        .staff-editor__or-divider::before,
        .staff-editor__or-divider::after {
            flex: 1;
            height: 1px;
            background: var(--staff-border);
            content: "";
        }

    .staff-editor__section + .staff-editor__section {
        margin-top: 32px;
        padding-top: 30px;
        border-top: 1px solid var(--staff-border);
    }

    .staff-editor__section-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 23px;
    }

    .staff-editor__section-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: #eef2ff;
        color: var(--staff-primary);
        font-size: 18px;
    }

    .staff-editor__section-title {
        margin: 0 0 3px;
        color: var(--staff-text);
        font-size: 17px;
        font-weight: 700;
    }

    .staff-editor__section-copy {
        margin: 0;
        color: var(--staff-muted);
        font-size: 12px;
    }

    .staff-editor__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 21px 24px;
    }

    .staff-editor__field--wide {
        grid-column: 1 / -1;
    }

    .staff-editor .form-group {
        min-width: 0;
        margin: 0;
    }

    .staff-editor .control-label {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 8px;
        color: #344054;
        font-size: 12px;
        font-weight: 700;
    }

    .staff-editor .form-control {
        width: 100%;
        min-height: 46px;
        padding-right: 14px;
        padding-left: 14px;
        border: 1px solid #d7dce3;
        border-radius: 10px;
        background: #fff;
        color: var(--staff-text);
        transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .staff-editor textarea.form-control {
        min-height: 105px;
        padding-top: 12px;
        resize: vertical;
    }

    .staff-editor .form-control:focus {
        border-color: #818cf8;
        box-shadow: 0 0 0 4px rgba(99, 102, 241, .12);
    }

    .staff-editor .form-control:disabled {
        border-color: #e5e7eb;
        background: #f8fafc;
        color: #64748b;
        cursor: not-allowed;
    }

    .staff-editor__field-note {
        display: block;
        margin-top: 6px;
        color: #98a2b3;
        font-size: 11px;
    }

    .staff-editor__date-wrap {
        position: relative;
    }

        .staff-editor__date-wrap .form-control {
            padding-right: 112px;
        }

    .staff-editor__date-format {
        position: absolute;
        top: 50%;
        right: 13px;
        color: #98a2b3;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .04em;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .staff-editor__validation .validation-summary-valid {
        display: none;
    }

    .staff-editor__validation .validation-summary-errors {
        margin-top: 24px;
        padding: 13px 16px;
        border: 1px solid #fecaca;
        border-radius: 10px;
        background: #fef2f2;
        color: #b91c1c;
    }

    .staff-editor__validation ul {
        margin: 0;
        padding-left: 18px;
    }

    .staff-editor__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 30px;
        padding-top: 22px;
        border-top: 1px solid var(--staff-border);
    }

        .staff-editor__actions .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 42px;
            padding: 9px 16px;
            border-radius: 9px;
            font-weight: 600;
            line-height: 1;
            white-space: nowrap;
        }

            .staff-editor__actions .btn i {
                margin: 0 !important;
            }

    .staff-editor__save {
        border-color: var(--staff-primary);
        background: var(--staff-primary);
        color: #fff;
        box-shadow: 0 8px 18px rgba(79, 70, 229, .22);
    }

        .staff-editor__save:hover,
        .staff-editor__save:focus {
            border-color: var(--staff-primary-dark);
            background: var(--staff-primary-dark);
            color: #fff;
        }

    @media (max-width: 767px) {
        .staff-editor {
            border-radius: 14px;
        }

        .staff-editor__hero {
            min-height: 185px;
            padding: 25px 22px;
        }

        .staff-editor__body {
            padding: 28px 20px 24px;
        }

        .staff-editor__invite-panel {
            align-items: stretch;
            flex-direction: column;
        }

        .staff-editor__invite-action {
            width: 100%;
        }

        .staff-editor__grid {
            grid-template-columns: 1fr;
        }

        .staff-editor__field--wide {
            grid-column: auto;
        }

        .staff-editor__actions {
            align-items: stretch;
            flex-direction: column-reverse;
        }

            .staff-editor__actions .btn {
                width: 100%;
            }
    }

    /* Below 576 the card's own gutter starts to cost real width. The theme's .content already
       spends 20px a side and this card spent another 20 on top, so on a 294px viewport 80px -
       more than a quarter of the screen - went to padding before a field got any, leaving the
       inputs 212px wide. .content is the theme's own class, shared with every page in the app,
       so it is left alone and only this card gives ground. The hero moves with the body so the
       heading stays lined up with the fields under it. */
    @media (max-width: 575.98px) {
        .staff-editor__hero {
            padding: 22px 14px;
        }

        .staff-editor__body {
            padding: 24px 14px 20px;
        }
    }


/* ============================================================================
   user-profile
   Used by: Staff/Profile, Account/Profile
   ============================================================================ */
    .user-profile {
        --profile-primary: #4f46e5;
        --profile-primary-dark: #3730a3;
        --profile-text: #172033;
        --profile-muted: #667085;
        --profile-border: #e4e7ec;
        max-width: 1180px;
        margin: 0 auto;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, .24);
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 22px 60px rgba(15, 23, 42, .10);
    }

    .user-profile__hero {
        position: relative;
        min-height: 180px;
        padding: 32px 38px;
        overflow: hidden;
        background: linear-gradient(125deg, #312e81 0%, #4f46e5 54%, #0891b2 100%);
        color: #fff;
    }

        .user-profile__hero::before,
        .user-profile__hero::after {
            position: absolute;
            border-radius: 50%;
            content: "";
            pointer-events: none;
        }

        .user-profile__hero::before {
            top: -125px;
            right: -55px;
            width: 310px;
            height: 310px;
            border: 46px solid rgba(255, 255, 255, .08);
        }

        .user-profile__hero::after {
            right: 205px;
            bottom: -125px;
            width: 225px;
            height: 225px;
            background: rgba(255, 255, 255, .06);
        }

    .user-profile__hero-content {
        position: relative;
        z-index: 1;
        max-width: 620px;
    }

    .user-profile__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 11px;
        padding: 5px 11px;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 999px;
        background: rgba(255, 255, 255, .10);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .user-profile__title {
        margin: 0 0 7px;
        color: #fff;
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -.02em;
    }

    .user-profile__subtitle {
        margin: 0;
        color: rgba(255, 255, 255, .78);
        font-size: 14px;
        line-height: 1.6;
    }

    .user-profile__body {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .user-profile__aside {
        padding: 35px 28px;
        border-right: 1px solid var(--profile-border);
        background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
        text-align: center;
    }

    .user-profile__avatar-shell {
        position: relative;
        width: 156px;
        height: 156px;
        margin: -60px auto 18px;
        padding: 6px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 14px 32px rgba(15, 23, 42, .18);
    }

    .user-profile img.user-profile__avatar.profile-pic {
        display: block;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        background: #eef2ff;
    }

    .user-profile__status-dot {
        position: absolute;
        right: 13px;
        bottom: 13px;
        width: 20px;
        height: 20px;
        border: 4px solid #fff;
        border-radius: 50%;
    }

    .user-profile__status-dot--active {
        background: #22c55e;
    }

    .user-profile__status-dot--inactive {
        background: #ef4444;
    }

    .user-profile__name {
        margin: 0 0 4px;
        color: var(--profile-text);
        font-size: 19px;
        font-weight: 700;
    }

    .user-profile__email {
        margin: 0 0 20px;
        overflow: hidden;
        color: var(--profile-muted);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-profile__role {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 11px;
        border-radius: 999px;
        background: #eef2ff;
        color: #4338ca;
        font-size: 11px;
        font-weight: 700;
    }

    .user-profile__content {
        min-width: 0;
        padding: 34px 38px 38px;
    }

    .user-profile__section-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 25px;
        padding-bottom: 17px;
        border-bottom: 1px solid var(--profile-border);
    }

    .user-profile__section-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: #eef2ff;
        color: var(--profile-primary);
        font-size: 18px;
    }

    .user-profile__section-title {
        margin: 0 0 3px;
        color: var(--profile-text);
        font-size: 17px;
        font-weight: 700;
    }

    .user-profile__section-copy {
        margin: 0;
        color: var(--profile-muted);
        font-size: 12px;
    }

    .user-profile__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 24px;
    }

    .user-profile__field--wide {
        grid-column: 1 / -1;
    }

    .user-profile .form-group {
        min-width: 0;
        margin: 0;
    }

    .user-profile .control-label {
        display: block;
        margin-bottom: 8px;
        color: #344054;
        font-size: 12px;
        font-weight: 700;
    }

    .user-profile .form-control[readonly] {
        width: 100%;
        min-height: 46px;
        padding-right: 14px;
        padding-left: 14px;
        border: 1px solid #e4e7ec;
        border-radius: 10px;
        background: #f8fafc;
        color: #344054;
        cursor: default;
        box-shadow: none;
    }

    .user-profile textarea.form-control[readonly] {
        min-height: 96px;
        padding-top: 12px;
        resize: none;
    }

    .user-profile__date-wrap {
        position: relative;
    }

        .user-profile__date-wrap .form-control {
            padding-right: 112px !important;
        }

    .user-profile__date-format {
        position: absolute;
        top: 50%;
        right: 13px;
        color: #98a2b3;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .04em;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .user-profile__status-field {
        display: flex;
        align-items: center;
        min-height: 46px;
        padding: 0 14px;
        border: 1px solid #e4e7ec;
        border-radius: 10px;
        background: #f8fafc;
    }

    .user-profile__status-pill {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
    }

        .user-profile__status-pill::before {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            content: "";
        }

    .user-profile__status-pill--active {
        background: #ecfdf3;
        color: #027a48;
    }

        .user-profile__status-pill--active::before {
            background: #12b76a;
        }

    .user-profile__status-pill--inactive {
        background: #fef3f2;
        color: #b42318;
    }

        .user-profile__status-pill--inactive::before {
            background: #f04438;
        }

    .user-profile__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 30px;
        padding-top: 22px;
        border-top: 1px solid var(--profile-border);
    }

        .user-profile__actions .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 42px;
            padding: 9px 16px;
            border-radius: 9px;
            font-weight: 600;
            white-space: nowrap;
        }

            .user-profile__actions .btn i {
                margin: 0 !important;
            }

    .user-profile__primary-action {
        border-color: var(--profile-primary);
        background: var(--profile-primary);
        color: #fff;
        box-shadow: 0 8px 18px rgba(79, 70, 229, .20);
    }

        .user-profile__primary-action:hover,
        .user-profile__primary-action:focus {
            border-color: var(--profile-primary-dark);
            background: var(--profile-primary-dark);
            color: #fff;
        }

    @media (max-width: 767px) {
        .user-profile {
            border-radius: 14px;
        }

        .user-profile__hero {
            min-height: 185px;
            padding: 25px 22px;
        }

        .user-profile__body {
            grid-template-columns: 1fr;
        }

        .user-profile__aside {
            border-right: 0;
            border-bottom: 1px solid var(--profile-border);
        }

        .user-profile__avatar-shell {
            margin-top: -55px;
        }

        .user-profile__content {
            padding: 28px 20px 24px;
        }

        .user-profile__grid {
            grid-template-columns: 1fr;
        }

        .user-profile__field--wide {
            grid-column: auto;
        }

        .user-profile__actions {
            align-items: stretch;
            flex-direction: column;
        }

            .user-profile__actions .btn {
                width: 100%;
            }
    }


/* ============================================================================
   deleted-staff
   Used by: Staff/Deleted, User/Deleted
   ============================================================================ */
    .deleted-staff {
        --deleted-primary: #4f46e5;
        --deleted-text: #172033;
        --deleted-muted: #667085;
        --deleted-border: #e4e7ec;
        max-width: 1280px;
        margin: 0 auto;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, .24);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 20px 55px rgba(15, 23, 42, .09);
    }

    .deleted-staff__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 25px 28px;
        /* Same indigo-violet-cyan as every other directory hero in the admin, including
           the Users list this page sits under and the Deleted Customers page it mirrors.
           It was previously a grey ramp, the only one of its kind in the app. */
        background: linear-gradient(125deg, #312e81 0%, #4f46e5 58%, #0891b2 100%);
        color: #fff;
    }

    .deleted-staff__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 6px;
        color: rgba(255, 255, 255, .68);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .deleted-staff__title {
        margin: 0 0 4px;
        color: #fff;
        font-size: 24px;
        font-weight: 700;
    }

    .deleted-staff__subtitle {
        margin: 0;
        color: rgba(255, 255, 255, .72);
        font-size: 12px;
    }

    .deleted-staff__header-actions {
        display: flex;
        align-items: center;
        gap: 9px;
    }

        .deleted-staff__header-actions .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 41px;
            padding: 8px 14px;
            border: 1px solid rgba(255, 255, 255, .30) !important;
            border-radius: 9px;
            background: rgba(255, 255, 255, .10) !important;
            color: #fff !important;
            font-weight: 600;
            line-height: 1;
            text-decoration: none !important;
            white-space: nowrap;
        }

            .deleted-staff__header-actions .btn i {
                margin: 0 !important;
            }

    .deleted-staff__body {
        padding: 25px 26px 28px;
    }

    .deleted-staff__notice {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 20px;
        padding: 12px 14px;
        border: 1px solid #fedf89;
        border-radius: 10px;
        background: #fffaeb;
        color: #7a2e0e;
        font-size: 12px;
        line-height: 1.5;
    }

        .deleted-staff__notice i {
            margin-top: 2px;
            color: #f79009;
        }

    /* Scrollable for the same reason as .staff-directory__table-wrap: the table under it is held
       at 720px, so hiding the overflow put its right hand columns out of reach on a phone. */
    .deleted-staff__table-wrap {
        overflow: auto;
        border: 1px solid var(--deleted-border);
        border-radius: 12px;
    }

    .deleted-staff__table {
        min-width: 720px;
        margin: 0;
    }

        .deleted-staff__table thead th {
            padding: 12px 14px;
            border: 0;
            border-bottom: 1px solid var(--deleted-border);
            background: #f8fafc;
            color: #475467;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            vertical-align: middle;
        }

        .deleted-staff__table tbody td {
            padding: 13px 14px;
            border-top: 1px solid #eef1f5;
            color: #344054;
            vertical-align: middle !important;
        }

        .deleted-staff__table tbody tr:first-child td {
            border-top: 0;
        }

        .deleted-staff__table tbody tr:hover {
            background: #fafbfc;
        }

    .deleted-staff__avatar-cell {
        width: 68px;
        text-align: center;
    }

    .deleted-staff__avatar {
        width: 48px;
        height: 48px;
        border: 3px solid #fff;
        border-radius: 50% !important;
        object-fit: cover;
        background: #f1f5f9;
        box-shadow: 0 3px 10px rgba(15, 23, 42, .12);
    }

    .deleted-staff__name {
        color: var(--deleted-text);
        font-size: 13px;
        font-weight: 700;
    }

    .deleted-staff__meta {
        margin-top: 3px;
        color: var(--deleted-muted);
        font-size: 11px;
    }

    .deleted-staff__role {
        display: inline-flex;
        padding: 5px 9px;
        border-radius: 999px;
        background: #f2f4f7;
        color: #475467;
        font-size: 10px;
        font-weight: 700;
    }

    .deleted-staff__status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 9px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

        .deleted-staff__status::before {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            content: "";
        }

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

        .deleted-staff__status--active::before {
            background: #12b76a;
        }

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

        .deleted-staff__status--warning::before {
            background: #f79009;
        }

    .deleted-staff__status--inactive {
        background: #fef3f2;
        color: #b42318;
    }

        .deleted-staff__status--inactive::before {
            background: #f04438;
        }

    .deleted-staff__action-cell {
        text-align: center;
    }

    .deleted-staff__restore {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 36px;
        padding: 7px 12px;
        /* Filled tint rather than a white outline, matching .deleted-client-restore on the
           Deleted Customers page. The !important flags beat the theme's .btn rules. */
        border: 1px solid #dcd8ff !important;
        border-radius: 9px;
        background: #f3f1ff !important;
        color: #5144eb !important;
        font-size: 11px;
        font-weight: 700;
        text-decoration: none !important;
        white-space: nowrap;
    }

        .deleted-staff__restore:hover,
        .deleted-staff__restore:focus {
            border-color: #4f46e5 !important;
            background: #eef2ff !important;
            color: #3730a3 !important;
        }

    .deleted-staff__empty {
        padding: 45px 20px !important;
        color: var(--deleted-muted) !important;
        text-align: center;
    }

    @media (max-width: 767px) {
        .deleted-staff {
            border-radius: 14px;
        }

        .deleted-staff__header {
            align-items: stretch;
            flex-direction: column;
            padding: 22px 20px;
        }

        .deleted-staff__body {
            padding: 18px 14px 22px;
        }

        .deleted-staff__header-actions .btn {
            width: 100%;
        }
    }


/* ============================================================================
   account-created
   Used by: Staff/Created, User/Created
   ============================================================================ */
    .account-created {
        max-width: 760px;
        margin: 28px auto;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, .24);
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 22px 60px rgba(15, 23, 42, .10);
    }

    .account-created__hero {
        position: relative;
        padding: 42px 36px 36px;
        overflow: hidden;
        background: linear-gradient(125deg, #047857 0%, #10b981 58%, #0891b2 100%);
        color: #fff;
        text-align: center;
    }

        .account-created__hero::before,
        .account-created__hero::after {
            position: absolute;
            border-radius: 50%;
            content: "";
            pointer-events: none;
        }

        .account-created__hero::before {
            top: -115px;
            right: -65px;
            width: 260px;
            height: 260px;
            border: 38px solid rgba(255, 255, 255, .08);
        }

        .account-created__hero::after {
            bottom: -120px;
            left: -50px;
            width: 225px;
            height: 225px;
            background: rgba(255, 255, 255, .06);
        }

    .account-created__icon {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 68px;
        height: 68px;
        margin-bottom: 18px;
        border: 1px solid rgba(255, 255, 255, .32);
        border-radius: 50%;
        background: rgba(255, 255, 255, .16);
        color: #fff;
        font-size: 29px;
        box-shadow: 0 12px 28px rgba(6, 78, 59, .22);
    }

    .account-created__title {
        position: relative;
        z-index: 1;
        margin: 0 0 8px;
        color: #fff;
        font-size: 27px;
        font-weight: 700;
        letter-spacing: -.02em;
    }

    .account-created__subtitle {
        position: relative;
        z-index: 1;
        max-width: 510px;
        margin: 0 auto;
        color: rgba(255, 255, 255, .80);
        font-size: 13px;
        line-height: 1.6;
    }

    .account-created__body {
        padding: 32px 36px 36px;
    }

    .account-created__label {
        margin: 0 0 17px;
        color: #344054;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .account-created__steps {
        display: grid;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .account-created__step {
        display: flex;
        align-items: flex-start;
        gap: 13px;
        padding: 14px 15px;
        border: 1px solid #e4e7ec;
        border-radius: 11px;
        background: #f8fafc;
    }

    .account-created__step-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 29px;
        width: 29px;
        height: 29px;
        border-radius: 50%;
        background: #ecfdf3;
        color: #027a48;
        font-size: 11px;
        font-weight: 800;
    }

    .account-created__step-title {
        margin: 0 0 2px;
        color: #172033;
        font-size: 13px;
        font-weight: 700;
    }

    .account-created__step-copy {
        margin: 0;
        color: #667085;
        font-size: 11px;
        line-height: 1.5;
    }

    .account-created__notice {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        margin-top: 20px;
        padding: 12px 14px;
        border: 1px solid #c7d7fe;
        border-radius: 10px;
        background: #f5f8ff;
        color: #344054;
        font-size: 11px;
        line-height: 1.5;
    }

        .account-created__notice i {
            margin-top: 2px;
            color: #4f46e5;
        }

    .account-created__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        margin-top: 25px;
        padding-top: 21px;
        border-top: 1px solid #e4e7ec;
    }

        .account-created__actions .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 42px;
            padding: 9px 15px;
            border-radius: 9px;
            font-weight: 600;
            line-height: 1;
            white-space: nowrap;
        }

            .account-created__actions .btn i {
                margin: 0 !important;
            }

    .account-created__primary {
        border-color: #4f46e5 !important;
        background: #4f46e5 !important;
        color: #fff !important;
        box-shadow: 0 8px 18px rgba(79, 70, 229, .20);
    }

    @media (max-width: 575px) {
        .account-created {
            margin: 10px auto;
            border-radius: 14px;
        }

        .account-created__hero,
        .account-created__body {
            padding-right: 20px;
            padding-left: 20px;
        }

        .account-created__actions {
            align-items: stretch;
            flex-direction: column-reverse;
        }

            .account-created__actions .btn {
                width: 100%;
            }
    }


/* ============================================================================
   profile-editor
   Used by: Account/EditMyProfile, Staff/EditMyProfile
   ============================================================================ */
    .profile-editor {
        --profile-primary: #4f46e5;
        --profile-primary-dark: #3730a3;
        --profile-accent: #06b6d4;
        --profile-text: #172033;
        --profile-muted: #6b7280;
        --profile-border: #e5e7eb;
        --profile-surface: #ffffff;
        position: relative;
        overflow: hidden;
        max-width: 1180px;
        margin: 0 auto;
        border: 1px solid rgba(148, 163, 184, .24);
        border-radius: 20px;
        background: var(--profile-surface);
        box-shadow: 0 22px 60px rgba(15, 23, 42, .10);
    }

    .profile-editor__hero {
        position: relative;
        min-height: 145px;
        padding: 30px 36px;
        overflow: hidden;
        background: linear-gradient(125deg, #312e81 0%, #4f46e5 54%, #0891b2 100%);
        color: #fff;
    }

        .profile-editor__hero::before,
        .profile-editor__hero::after {
            position: absolute;
            border-radius: 50%;
            content: "";
            pointer-events: none;
        }

        .profile-editor__hero::before {
            top: -110px;
            right: -45px;
            width: 280px;
            height: 280px;
            border: 44px solid rgba(255, 255, 255, .08);
        }

        .profile-editor__hero::after {
            right: 190px;
            bottom: -105px;
            width: 210px;
            height: 210px;
            background: rgba(255, 255, 255, .06);
        }

    .profile-editor__hero-content {
        position: relative;
        z-index: 1;
        max-width: 620px;
    }

    .profile-editor__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 10px;
        padding: 5px 10px;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 999px;
        background: rgba(255, 255, 255, .10);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .profile-editor__title {
        margin: 0 0 7px;
        color: #fff;
        font-size: 27px;
        font-weight: 700;
        letter-spacing: -.02em;
    }

    .profile-editor__subtitle {
        max-width: 540px;
        margin: 0;
        color: rgba(255, 255, 255, .78);
        font-size: 14px;
        line-height: 1.6;
    }

    .profile-editor__body {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 0;
    }

    .profile-editor__aside {
        position: relative;
        padding: 34px 28px;
        border-right: 1px solid var(--profile-border);
        background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
        text-align: center;
    }

    .profile-editor__avatar-shell {
        position: relative;
        width: 156px;
        height: 156px;
        margin: -55px auto 18px;
        padding: 6px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 14px 32px rgba(15, 23, 42, .18);
    }

    .profile-editor img.profile-editor__avatar.profile-pic {
        display: block;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        background: #eef2ff;
    }

    .profile-editor__status {
        position: absolute;
        right: 13px;
        bottom: 13px;
        width: 20px;
        height: 20px;
        border: 4px solid #fff;
        border-radius: 50%;
        background: #22c55e;
    }

    .profile-editor__name {
        margin: 0 0 4px;
        color: var(--profile-text);
        font-size: 18px;
        font-weight: 700;
    }

    .profile-editor__email {
        margin: 0 0 20px;
        overflow: hidden;
        color: var(--profile-muted);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .profile-editor__image-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

        .profile-editor__image-actions .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            width: 100%;
            min-width: 0;
            min-height: 44px;
            padding: 9px 12px;
            border-radius: 9px;
            font-weight: 600;
            line-height: 1;
            white-space: nowrap;
        }

            .profile-editor__image-actions .btn i {
                display: inline-block;
                flex: 0 0 auto;
                margin: 0 !important;
                line-height: 1;
            }

    .profile-editor__remove {
        color: #dc2626;
    }

        .profile-editor__remove:hover,
        .profile-editor__remove:focus {
            border-color: #fecaca;
            background: #fef2f2;
            color: #b91c1c;
        }

    .profile-editor__busy {
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 18px;
        padding: 10px;
        border-radius: 9px;
        background: #eef2ff;
        color: #4338ca;
        font-size: 12px;
    }

        .profile-editor__busy img {
            width: 18px;
            height: 18px;
            border: 0 !important;
            border-radius: 0 !important;
        }

    .profile-editor__form {
        min-width: 0;
        padding: 34px 38px 38px;
    }

    .profile-editor__section-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 25px;
        padding-bottom: 17px;
        border-bottom: 1px solid var(--profile-border);
    }

    .profile-editor__section-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: #eef2ff;
        color: var(--profile-primary);
        font-size: 18px;
    }

    .profile-editor__section-title {
        margin: 0 0 3px;
        color: var(--profile-text);
        font-size: 17px;
        font-weight: 700;
    }

    .profile-editor__section-copy {
        margin: 0;
        color: var(--profile-muted);
        font-size: 12px;
    }

    .profile-editor__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 21px 24px;
    }

    .profile-editor__field--wide {
        grid-column: 1 / -1;
    }

    .profile-editor .form-group {
        min-width: 0;
        margin: 0;
    }

    .profile-editor .control-label {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 8px;
        color: #344054;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .01em;
    }

    .profile-editor .form-control {
        width: 100%;
        min-height: 46px;
        padding-right: 14px;
        padding-left: 14px;
        border: 1px solid #d7dce3;
        border-radius: 10px;
        background: #fff;
        color: var(--profile-text);
        transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .profile-editor textarea.form-control {
        min-height: 105px;
        padding-top: 12px;
        resize: vertical;
    }

    .profile-editor .form-control:focus {
        border-color: #818cf8;
        box-shadow: 0 0 0 4px rgba(99, 102, 241, .12);
    }

    .profile-editor .form-control:disabled {
        border-color: #e5e7eb;
        background: #f8fafc;
        color: #64748b;
        cursor: not-allowed;
    }

    .profile-editor__field-note {
        display: block;
        margin-top: 6px;
        color: #98a2b3;
        font-size: 11px;
    }

    .profile-editor__date-wrap {
        position: relative;
    }

        .profile-editor__date-wrap .form-control {
            padding-right: 112px;
        }

    .profile-editor__date-format {
        position: absolute;
        top: 50%;
        right: 13px;
        color: #98a2b3;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .04em;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .profile-editor__validation .validation-summary-valid {
        display: none;
    }

    .profile-editor__validation .validation-summary-errors {
        margin-top: 24px;
        padding: 13px 16px;
        border: 1px solid #fecaca;
        border-radius: 10px;
        background: #fef2f2;
        color: #b91c1c;
    }

    .profile-editor__validation ul {
        margin: 0;
        padding-left: 18px;
    }

    .profile-editor__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 30px;
        padding-top: 22px;
        border-top: 1px solid var(--profile-border);
    }

        .profile-editor__actions .btn {
            min-width: 118px;
            min-height: 42px;
            border-radius: 9px;
            font-weight: 600;
        }

    .profile-editor__save {
        border-color: var(--profile-primary);
        background: var(--profile-primary);
        color: #fff;
        box-shadow: 0 8px 18px rgba(79, 70, 229, .22);
    }

        .profile-editor__save:hover,
        .profile-editor__save:focus {
            border-color: var(--profile-primary-dark);
            background: var(--profile-primary-dark);
            color: #fff;
        }

    @media (max-width: 991px) {
        .profile-editor__body {
            grid-template-columns: 230px minmax(0, 1fr);
        }

        .profile-editor__aside {
            padding-right: 20px;
            padding-left: 20px;
        }

        .profile-editor__form {
            padding-right: 26px;
            padding-left: 26px;
        }
    }

    @media (max-width: 767px) {
        .profile-editor {
            border-radius: 14px;
        }

        .profile-editor__hero {
            min-height: 185px;
            padding: 25px 22px;
        }

        .profile-editor__body {
            grid-template-columns: 1fr;
        }

        .profile-editor__aside {
            border-right: 0;
            border-bottom: 1px solid var(--profile-border);
        }

        .profile-editor__avatar-shell {
            margin-top: -55px;
        }

        .profile-editor__form {
            padding: 28px 20px 24px;
        }

        .profile-editor__grid {
            grid-template-columns: 1fr;
        }

        .profile-editor__field--wide {
            grid-column: auto;
        }

        .profile-editor__actions {
            align-items: stretch;
            flex-direction: column-reverse;
        }

            .profile-editor__actions .btn {
                width: 100%;
            }
    }


/* ============================================================================
   staff-directory
   Used by: Staff/Index, User/Index
   The toolbar margin below is Staff/Index's 12px. User/Index used 20px and keeps a
   one-line override in the view - the only rule that differed between the two copies.
   ============================================================================ */
    .staff-directory {
        --directory-primary: #4f46e5;
        --directory-primary-dark: #3730a3;
        --directory-text: #172033;
        --directory-muted: #667085;
        --directory-border: #e4e7ec;
        max-width: 1380px;
        margin: 0 auto;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, .24);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 20px 55px rgba(15, 23, 42, .09);
    }

    .staff-directory__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 25px 28px;
        background: linear-gradient(125deg, #312e81 0%, #4f46e5 58%, #0891b2 100%);
        color: #fff;
    }

    .staff-directory__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 6px;
        color: rgba(255, 255, 255, .72);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .staff-directory__title {
        margin: 0 0 4px;
        color: #fff;
        font-size: 24px;
        font-weight: 700;
    }

    .staff-directory__subtitle {
        margin: 0;
        color: rgba(255, 255, 255, .76);
        font-size: 12px;
    }

    .staff-directory__header-actions {
        display: flex;
        align-items: center;
        gap: 9px;
        flex: 0 0 auto;
    }

        .staff-directory__header-actions .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 41px;
            padding: 8px 14px;
            border-radius: 9px;
            font-weight: 600;
            line-height: 1;
            white-space: nowrap;
        }

            .staff-directory__header-actions .btn i {
                margin: 0 !important;
            }

    .staff-directory__back {
        border-color: rgba(255, 255, 255, .32) !important;
        background: rgba(255, 255, 255, .10) !important;
        color: #fff !important;
    }

    .staff-directory__add {
        border-color: #fff !important;
        background: #fff !important;
        color: #4338ca !important;
    }

    .staff-directory__body {
        padding: 24px 26px 28px;
    }

    .staff-directory__toolbar {
        display: grid;
        grid-template-columns: minmax(240px, 1fr) 150px;
        gap: 12px;
        margin-bottom: 12px;
    }

    .staff-directory__quick-filters {
        display: grid;
        gap: 10px;
        margin-bottom: 20px;
        padding: 12px 14px;
        background: #f8fafc;
        border: 1px solid var(--directory-border);
        border-radius: 12px;
    }

    .staff-directory__filter-group {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
    }

    .staff-directory__filter-label {
        flex: 0 0 58px;
        color: #667085;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .staff-directory__filter-buttons {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        overflow-x: auto;
        padding: 2px;
        scrollbar-width: thin;
    }

    .staff-directory__filter-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-height: 34px;
        padding: 6px 11px;
        color: #514a5d;
        background: #fff;
        border: 1px solid #ddd8e7;
        border-radius: 9px;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
        transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
    }

    .staff-directory__filter-button:hover,
    .staff-directory__filter-button:focus {
        color: #4338ca;
        border-color: #a99af4;
        outline: none;
    }

    .staff-directory__filter-button.is-active {
        color: #fff;
        background: #5b36df;
        border-color: #5b36df;
        box-shadow: 0 5px 12px rgba(91, 54, 223, .20);
    }

    .staff-directory__results-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 2px 10px;
        color: var(--directory-muted);
        font-size: 11px;
    }

    .staff-directory__results-summary strong {
        color: var(--directory-text);
        font-size: 12px;
    }

    .staff-directory__search {
        position: relative;
        margin: 0;
    }

        .staff-directory__search .form-control {
            padding-left: 43px;
        }

        .staff-directory__search i {
            position: absolute;
            top: 50%;
            left: 15px;
            color: #98a2b3;
            transform: translateY(-50%);
            pointer-events: none;
        }

    .staff-directory .form-control {
        width: 100%;
        min-height: 44px;
        border: 1px solid #d7dce3;
        border-radius: 10px;
        background: #fff;
        color: var(--directory-text);
    }

        .staff-directory .form-control:focus {
            border-color: #818cf8;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, .10);
        }

    /* The table below is deliberately held at 820px so its columns do not squash, which means on
       a phone it has to be scrolled sideways to be read at all. overflow:hidden was here to keep
       the corners inside the 12px radius, but it also swallowed that scroll and left the
       .table-responsive class on this wrapper with nothing to do - the columns past the viewport
       were simply unreachable. auto still clips to the radius, as any non-visible overflow does,
       and gives the scroll back. Same fix as .role-directory__table-wrap, which already had it. */
    .staff-directory__table-wrap {
        overflow: auto;
        border: 1px solid var(--directory-border);
        border-radius: 12px;
    }

    .staff-directory__table {
        min-width: 820px;
        margin: 0;
    }

        .staff-directory__table thead th {
            padding: 12px 14px;
            border: 0;
            border-bottom: 1px solid var(--directory-border);
            background: #f8fafc;
            color: #475467;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            vertical-align: middle;
        }

        .staff-directory__table tbody td {
            padding: 13px 14px;
            border-top: 1px solid #eef1f5;
            color: #344054;
            vertical-align: middle !important;
        }

        .staff-directory__table tbody tr:first-child td {
            border-top: 0;
        }

        .staff-directory__table tbody tr:hover {
            background: #fafbff;
        }

    .staff-directory__avatar-cell {
        width: 68px;
        text-align: center;
    }

    .staff-directory__avatar {
        width: 46px;
        height: 46px;
        border: 3px solid #fff;
        border-radius: 50% !important;
        object-fit: cover;
        background: #eef2ff;
        box-shadow: 0 3px 10px rgba(15, 23, 42, .12);
    }

    .staff-directory__identity.clickable {
        cursor: pointer;
    }

    .staff-directory__name {
        color: var(--directory-text);
        font-size: 13px;
        font-weight: 700;
    }

    .staff-directory__meta {
        margin-top: 3px;
        color: var(--directory-muted);
        font-size: 11px;
    }

    .staff-directory__role {
        display: inline-flex;
        padding: 5px 9px;
        border-radius: 999px;
        background: #eef2ff;
        color: #4338ca;
        font-size: 10px;
        font-weight: 700;
    }

    .staff-directory__status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 9px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

        .staff-directory__status::before {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            content: "";
        }

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

        .staff-directory__status--active::before {
            background: #12b76a;
        }

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

        .staff-directory__status--warning::before {
            background: #f79009;
        }

    .staff-directory__status--inactive {
        background: #fef3f2;
        color: #b42318;
    }

        .staff-directory__status--inactive::before {
            background: #f04438;
        }

    .staff-directory__action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: #4f46e5 !important;
        font-size: 11px;
        font-weight: 600;
        text-decoration: none !important;
        white-space: nowrap;
    }

        .staff-directory__action i {
            margin: 0 !important;
        }

        .staff-directory__action:hover,
        .staff-directory__action:focus {
            color: #3730a3 !important;
            text-decoration: none !important;
        }

        .staff-directory__action.text-danger {
            color: #dc2626 !important;
        }

            .staff-directory__action.text-danger:hover,
            .staff-directory__action.text-danger:focus {
                color: #b91c1c !important;
            }

    .staff-directory__action-cell {
        text-align: center;
    }

    .staff-directory__empty {
        padding: 45px 20px !important;
        color: var(--directory-muted) !important;
        text-align: center;
    }

    .staff-directory__pagination {
        margin-top: 20px;
    }

    @media (max-width: 767px) {
        .staff-directory {
            border-radius: 14px;
        }

        .staff-directory__header {
            align-items: stretch;
            flex-direction: column;
            padding: 22px 20px;
        }

        .staff-directory__header-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        }

        .staff-directory__body {
            padding: 18px 14px 22px;
        }

        .staff-directory__toolbar {
            grid-template-columns: 1fr;
        }

        .staff-directory__filter-group {
            align-items: flex-start;
            flex-direction: column;
            gap: 5px;
        }

        .staff-directory__filter-label {
            flex-basis: auto;
        }

        .staff-directory__filter-buttons {
            width: 100%;
        }
    }


/* ============================================================================
   cf-catalog-modal
   Used by: Event/AddMerchandise, Event/AddPOSInventory
   Only the rules identical in both views live here. The two pages genuinely differ on
   grid sizing and image placement, so each keeps those few rules in the view rather than
   one silently inheriting the other's layout.
   ============================================================================ */
.cf-catalog-modal {
    max-width: 880px;
}

.cf-catalog-modal__content {
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(25, 18, 48, .24);
}

.cf-catalog-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    background: linear-gradient(135deg, #faf9ff 0%, #f2efff 100%);
    border: 0;
    border-bottom: 1px solid #e8e2f2;
}

.cf-catalog-modal__heading {
    display: flex;
    align-items: center;
    gap: 13px;
}

.cf-catalog-modal__heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    color: #fff;
    font-size: 20px;
    background: linear-gradient(135deg, #6658ff, #7928e8);
    border-radius: 12px;
    box-shadow: 0 9px 20px rgba(88, 52, 213, .2);
}

.cf-catalog-modal__heading .modal-title {
    margin: 0;
    color: #221b35;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
}

.cf-catalog-modal__heading p {
    margin: 4px 0 0;
    color: #777083;
    font-size: 13px;
}

.cf-catalog-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    color: #5f586b;
    font-size: 17px;
    background: #fff;
    border: 1px solid #dfd9e8;
    border-radius: 11px;
    opacity: 1;
    text-shadow: none;
}

.cf-catalog-modal__close:hover {
    color: #4c21c7;
    background: #f7f4ff;
}

.cf-catalog-modal__body {
    padding: 24px;
}

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

.cf-catalog-modal .form-group {
    margin: 0;
}

.cf-catalog-modal label:not(#item-label) {
    display: block;
    margin-bottom: 7px;
    color: #554e61;
    font-size: 13px;
    font-weight: 700;
}

.cf-catalog-modal .form-control {
    height: 48px;
    padding: 11px 14px;
    color: #292237;
    background: #fbfaff;
    border: 1px solid #ddd7e8;
    border-radius: 11px;
    box-shadow: none;
}

.cf-catalog-modal .form-control:focus {
    background: #fff;
    border-color: #8267e9;
    box-shadow: 0 0 0 3px rgba(105, 74, 222, .11);
}

.cf-catalog-modal__price {
    position: relative;
}

.cf-catalog-modal__price .form-control {
    padding-right: 58px;
}

.cf-catalog-modal__currency {
    position: absolute;
    top: 50%;
    right: 14px;
    color: #5e566b;
    font-size: 12px;
    font-weight: 800;
    transform: translateY(-50%);
}

.cf-catalog-modal__validation .validation-summary-valid {
    display: none;
}

.cf-catalog-modal__validation .validation-summary-errors {
    padding: 12px 14px;
    color: #a92e42;
    background: #fff2f4;
    border: 1px solid #f4ccd3;
    border-radius: 10px;
}

.cf-catalog-modal__validation ul {
    margin: 0;
    padding-left: 18px;
}

.cf-catalog-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 24px;
    background: #fcfbfe;
    border: 0;
    border-top: 1px solid #ebe6f1;
}

.cf-catalog-modal__footer .btn {
    min-width: 128px;
    min-height: 46px;
    margin: 0;
    font-weight: 700;
    border-radius: 11px;
}

.cf-catalog-modal__cancel {
    color: #4e4659;
    background: #fff;
    border: 1px solid #dad3e4;
}

.cf-catalog-modal__submit {
    color: #fff;
    background: linear-gradient(120deg, #5e6df6, #7931eb);
    border: 0;
    box-shadow: 0 10px 22px rgba(91, 55, 215, .2);
}

.cf-catalog-modal__submit:hover, .cf-catalog-modal__submit:focus {
    color: #fff;
    background: linear-gradient(120deg, #5361e7, #6d25dc);
}

@media (max-width: 767.98px) {
    .cf-catalog-modal {
        margin: 12px;
    }

    .cf-catalog-modal__header, .cf-catalog-modal__body, .cf-catalog-modal__footer {
        padding: 17px;
    }

    .cf-catalog-modal__heading p {
        display: none;
    }

    .cf-catalog-modal__footer .btn {
        flex: 1 1 50%;
        min-width: 0;
    }
}


/* ============================================================================
   subscription form
   Used by: Subscription/Add, Subscription/Edit
   ============================================================================ */
    .subscription-form {
        max-width: none;
    }

    .subscription-form__intro {
        margin: 0;
        color: #64748b;
    }

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

    .subscription-section {
        padding: 24px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        box-shadow: 0 3px 12px rgba(15, 23, 42, .06);
    }

    .subscription-section--wide {
        grid-column: 1 / -1;
    }

    .subscription-section__header {
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid #edf1f5;
    }

    .subscription-section__title {
        margin: 0 0 4px;
        color: #1e293b;
        font-size: 18px;
        font-weight: 600;
    }

    .subscription-section__description {
        margin: 0;
        color: #64748b;
        font-size: 13px;
    }

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

    .subscription-field-grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .subscription-field-grid .form-group {
        min-width: 0;
        margin: 0;
    }

    .subscription-field-grid .form-control {
        width: 100%;
        min-height: 42px;
        border-radius: 8px;
    }

    .subscription-form__required {
        color: #dc3545;
    }

    .subscription-choice-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 18px;
        min-height: 42px;
    }

        .subscription-choice-row .mt-radio,
        .subscription-choice-row .mt-checkbox {
            margin: 0;
        }

    .subscription-help {
        display: flex;
        align-items: flex-start;
        gap: 7px;
        margin: 6px 0 0 30px;
        color: #64748b;
        font-size: 12px;
    }

    .subscription-form__validation {
        margin-top: 20px;
    }

        .subscription-form__validation:empty {
            display: none;
        }

    .subscription-form__actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 24px;
    }

        .subscription-form__actions .btn {
            min-width: 170px;
            min-height: 42px;
            border-radius: 9px;
        }

    .subscription-options__group {
        padding: 16px 0;
        border-bottom: 1px solid #edf1f5;
    }

        .subscription-options__group:first-child {
            padding-top: 0;
        }

        .subscription-options__group:last-child {
            padding-bottom: 0;
            border-bottom: 0;
        }

    .subscription-options__group-title {
        margin: 0 0 12px;
        color: #334155;
        font-size: 14px;
        font-weight: 600;
    }

    .subscription-options__choices {
        display: grid;
        gap: 10px;
    }

        .subscription-options__choices .mt-checkbox,
        .subscription-options__choices .mt-radio {
            margin: 0;
        }

        /* Every other validation message on these forms sits inside a .form-group, which
           _BaseLayout's `.form-group span { font-weight: bold !important }` renders bold.
           The Stripe charge message sits in a choices list instead, so it came out at 400
           and read lighter than the errors beside it. State the weight here rather than
           wrapping it in a .form-group it does not belong to. */
        .subscription-options__choices .field-validation-error {
            font-weight: 700;
        }

    .subscription-options__indent {
        margin: 5px 0 0 5px;
    }

    .subscription-options__fee-grid,
    .subscription-options__limit-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .subscription-options__field .form-control {
        width: 100%;
        min-height: 40px;
        margin-left: 0 !important;
        border-radius: 8px;
    }

    .subscription-options__field label {
        display: block;
        margin-bottom: 5px;
        color: #475569;
        font-size: 12px;
        font-weight: 600;
    }

    .subscription-options__help {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        margin: 5px 0 0 30px;
        color: #64748b;
        font-size: 12px;
    }

    .subscription-form__validation {
        display: none;
        margin-top: 20px;
    }

        .subscription-form__validation:has(.validation-summary-errors),
        .subscription-form__validation:has(#message:not(:empty)) {
            display: block;
        }

    #event-configuration-options {
        margin-top: 24px;
        padding-top: 8px;
        border-top: 1px solid #edf1f5;
    }

    @media (max-width: 991px) {
        .subscription-form__grid,
        .subscription-field-grid--three {
            grid-template-columns: 1fr;
        }

        .subscription-section--wide {
            grid-column: auto;
        }
    }

    @media (max-width: 575px) {
        .subscription-field-grid {
            grid-template-columns: 1fr;
        }

        .subscription-options__fee-grid,
        .subscription-options__limit-grid {
            grid-template-columns: 1fr;
        }

        .subscription-section {
            padding: 18px;
            border-radius: 12px;
        }

        .subscription-form__actions {
            align-items: stretch;
            flex-direction: column;
        }

            .subscription-form__actions .btn {
                width: 100%;
            }
    }

/* ============================================================================
   ticket-type-modal
   Used by: Event/AddTicketType, Event/EditTicketType
   The two views held 312 and 322 lines of near-identical CSS, so every fix had to be
   made twice, and the access-gate rules had already drifted apart between them.

   The inner rules are scoped under .ticket-type-modal rather than #ajaxModal alone.
   #ajaxModal is the app-wide modal container shared by 23 views, and the block
   included generic rules (.form-control, .required, .field-validation-error) that
   would otherwise have restyled every one of them. The scope is applied to those
   inner rules uniformly so the specificity ties inside the component are unchanged
   - .ticket-description still overrides .form-control on height, as before.

   Three selectors are deliberately not scoped that way: .ticket-type-dialog is the
   .modal-dialog that wraps .ticket-type-modal, and the two .entry-gate-select2-dropdown
   rules style a select2 dropdown that select2 appends to document.body, outside the
   modal. All three use class names unique to this component.

   Two rules genuinely differ between the views, and only their differing declarations
   stay behind in each view: .entry-gate-select2-dropdown, where Add opens the list
   upward and Edit downward, and the select2 search field. Everything else was
   identical.
   ============================================================================ */
    #ajaxModal .ticket-type-dialog {
        width: 710px;
        max-width: calc(100vw - 32px);
        margin: 30px auto;
    }

    #ajaxModal .ticket-type-modal {
        border: 0;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 24px 70px rgba(15,23,42,.28);
        color: #172033;
    }

    #ajaxModal .ticket-type-modal .ticket-modal-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 15px;
        border-bottom: 1px solid #e6e9ef;
    }

    #ajaxModal .ticket-type-modal .ticket-modal-heading {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    #ajaxModal .ticket-type-modal .ticket-modal-icon {
        display: grid;
        place-items: center;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #f1efff;
        color: #5335e8;
        font-size: 25px;
    }

    #ajaxModal .ticket-type-modal .ticket-modal-heading h4 {
        margin: 0 0 4px;
        font-size: 20px;
        font-weight: 700;
    }

    #ajaxModal .ticket-type-modal .ticket-modal-heading p {
        margin: 0;
        color: #687184;
        font-size: 14px;
    }

    #ajaxModal .ticket-type-modal .ticket-modal-close {
        border: 0;
        background: transparent;
        color: #172033;
        font-size: 29px;
        line-height: 1;
        cursor: pointer;
    }

    #ajaxModal .ticket-type-modal .ticket-type-modal-body {
        max-height: calc(100vh - 230px);
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #ajaxModal .ticket-type-modal .ticket-section {
        padding: 10px 24px;
        border-bottom: 1px solid #e6e9ef;
    }

    #ajaxModal .ticket-type-modal .ticket-section-title {
        margin: 0 0 10px;
        color: #4224d6;
        font-size: 15px;
        font-weight: 700;
    }

    #ajaxModal .ticket-type-modal .ticket-details-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px 20px;
    }

        #ajaxModal .ticket-type-modal .ticket-details-grid .form-group {
            margin: 0;
        }

        #ajaxModal .ticket-type-modal .ticket-details-grid label, #ajaxModal .ticket-type-modal .gate-label-row label {
            margin-bottom: 8px;
            font-size: 13px;
            font-weight: 600;
        }

    #ajaxModal .ticket-type-modal .required {
        color: #ef4444;
    }

    #ajaxModal .ticket-type-modal .form-control {
        height: 42px;
        border: 1px solid #d9dee8;
        border-radius: 8px;
        box-shadow: none;
        font-size: 14px;
    }

        #ajaxModal .ticket-type-modal .form-control:focus {
            border-color: #6b4eff;
            box-shadow: 0 0 0 3px rgba(107,78,255,.12);
        }

    #ajaxModal .ticket-type-modal .ticket-description-field {
        position: relative;
    }

    #ajaxModal .ticket-type-modal .ticket-description {
        height: 65px;
        resize: vertical;
        padding-bottom: 25px;
    }

    #ajaxModal .ticket-type-modal .ticket-validity .form-group {
        margin-bottom: 0 !important;
    }

    #ajaxModal .ticket-type-modal .ticket-validity .mb-1 {
        margin-bottom: 0 !important;
    }

    #ajaxModal .ticket-type-modal .ticket-validity h5.mb-1 {
        font-size: 13px;
        font-weight: 700 !important;
    }

    #ajaxModal .ticket-type-modal .ticket-validity label {
        margin-bottom: 0;
    }

    #ajaxModal .ticket-type-modal .ticket-validity p.text-muted.mb-3 {
        margin-bottom: 5px !important;
    }

    #ajaxModal .ticket-type-modal .ticket-price-input {
        display: flex;
        align-items: stretch;
    }

        #ajaxModal .ticket-type-modal .ticket-price-input .form-control {
            min-width: 0;
            border-radius: 0;
        }

    #ajaxModal .ticket-type-modal .currency-symbol, #ajaxModal .ticket-type-modal .currency-code {
        display: flex;
        align-items: center;
        padding: 0 13px;
        border: 1px solid #d9dee8;
        background: #fff;
        font-size: 13px;
    }

    #ajaxModal .ticket-type-modal .currency-symbol {
        border-right: 0;
        border-radius: 8px 0 0 8px;
    }

    #ajaxModal .ticket-type-modal .currency-code {
        border-left: 0;
        border-radius: 0 8px 8px 0;
        font-weight: 600;
    }

    #ajaxModal .ticket-type-modal .ticket-option-list {
        border: 1px solid #e5e8ef;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(15,23,42,.04);
    }

    #ajaxModal .ticket-type-modal .ticket-option {
        position: relative;
        display: flex;
        align-items: center;
        gap: 15px;
        min-height: 40px;
        margin: 0;
        padding: 0 13px;
        border-bottom: 1px solid #e8ebf1;
        cursor: pointer;
    }

        #ajaxModal .ticket-type-modal .ticket-option:last-child {
            border-bottom: 0;
        }

    #ajaxModal .ticket-type-modal .ticket-switch-input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    #ajaxModal .ticket-type-modal .ticket-switch {
        position: relative;
        flex: 0 0 31px;
        width: 31px;
        height: 18px;
        border-radius: 20px;
        background: #cdd3dd;
        transition: .18s ease;
    }

        #ajaxModal .ticket-type-modal .ticket-switch:after {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0,0,0,.2);
            transition: .18s ease;
        }
    /* CheckBoxFor renders a hidden fallback input after the checkbox, so use the
       general-sibling selector instead of requiring the switch to be adjacent. */
    #ajaxModal .ticket-type-modal .ticket-switch-input:checked ~ .ticket-switch {
        background: #6448ff;
    }

        #ajaxModal .ticket-type-modal .ticket-switch-input:checked ~ .ticket-switch:after {
            transform: translateX(13px);
        }

    #ajaxModal .ticket-type-modal .ticket-switch-input:focus ~ .ticket-switch {
        box-shadow: 0 0 0 3px rgba(100,72,255,.18);
    }

    #ajaxModal .ticket-type-modal .ticket-option-copy {
        display: flex;
        flex-direction: column;
        line-height: 1.25;
    }

        #ajaxModal .ticket-type-modal .ticket-option-copy strong {
            font-size: 13px;
            font-weight: 600;
        }

        #ajaxModal .ticket-type-modal .ticket-option-copy small, #ajaxModal .ticket-type-modal .gate-help {
            margin-top: 3px;
            color: #7c8597;
            font-size: 11px;
            font-weight: 400;
        }

    #ajaxModal .ticket-type-modal .gate-label-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        #ajaxModal .ticket-type-modal .gate-label-row a {
            color: #5638e6;
            font-size: 12px;
        }

    #ajaxModal .ticket-type-modal .gate-help {
        margin: 10px 0 0;
        font-size: 12px;
    }

    .entry-gate-select2-dropdown {
        z-index: 10600;
    }

        .entry-gate-select2-dropdown .select2-results__options {
            max-height: min(45vh,320px) !important;
            overflow-y: auto !important;
        }

    #ajaxModal .ticket-type-modal .entry-gate-field .select2-selection--multiple {
        max-height: min(28vh,200px) !important;
        min-height: 46px;
        overflow-y: auto !important;
        border-color: #d9dee8;
        border-radius: 8px;
    }

        #ajaxModal .ticket-type-modal .entry-gate-field .select2-selection--multiple .select2-selection__rendered {
            display: block;
            width: 100%;
            padding: 4px 10px;
            box-sizing: border-box;
        }

        #ajaxModal .ticket-type-modal .entry-gate-field .select2-selection--multiple .select2-search--inline:only-child {
            display: block;
            float: none;
            width: 100%;
        }

            /* Add and Edit each add one more declaration to this rule; see their views. */
            #ajaxModal .ticket-type-modal .entry-gate-field .select2-selection--multiple .select2-search--inline:only-child .select2-search__field {
                width: 100% !important;
                max-width: none;
                box-sizing: border-box;
            }

    #ajaxModal .ticket-type-modal .ticket-validation-summary {
        margin: 16px 24px;
        color: #c53030;
    }

    #ajaxModal .ticket-type-modal .ticket-modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding: 10px 24px;
        background: #fff;
    }

        #ajaxModal .ticket-type-modal .ticket-modal-footer .btn {
            min-width: 122px;
            height: 42px;
            border-radius: 8px;
            font-weight: 600;
        }

    #ajaxModal .ticket-type-modal .ticket-btn-secondary {
        border: 1px solid #d9dee8;
        background: #fff;
        color: #172033;
    }

    #ajaxModal .ticket-type-modal .ticket-btn-primary {
        border: 0;
        background: linear-gradient(135deg,#7857ff,#4d28ea);
        color: #fff;
        box-shadow: 0 5px 14px rgba(91,55,235,.24);
    }

    #ajaxModal .ticket-type-modal .field-validation-error {
        display: block;
        margin-top: 4px;
        color: #dc2626;
        font-size: 12px;
    }

    @media (max-width: 650px) {
        #ajaxModal .ticket-type-dialog {
            margin: 12px auto;
        }

        #ajaxModal .ticket-type-modal .ticket-details-grid {
            grid-template-columns: 1fr;
        }

        #ajaxModal .ticket-type-modal .ticket-modal-header, #ajaxModal .ticket-type-modal .ticket-section, #ajaxModal .ticket-type-modal .ticket-modal-footer {
            padding-left: 18px;
            padding-right: 18px;
        }

        #ajaxModal .ticket-type-modal .ticket-type-modal-body {
            max-height: calc(100vh - 205px);
        }
    }

/* ============================================================================
   cf-settings-list
   Used by: Event/_EmailSettings, Event/_MobileAnalyticItemSetting
   Both views render the same toggle-per-row settings table and each carried its own
   copy of these rules, keyed on its own container id. The copies were identical apart
   from two declarations only Event/_EmailSettings sets, which stay in that view's
   section of crowdflo-pages.css.

   Each rule lists both container ids rather than the .cf-settings-list class the two
   containers share. Both partials render inside Event/Edit, whose own section styles
   .cf-event-editor table.table tbody td (0,2,3) and .cf-event-editor table.table
   input[type="checkbox"] (0,3,2). A class-rooted selector here would be (0,2,2) and
   (0,3,1) and would lose to both, so the ids are what keeps these rules applied.
   Rooting on the class was tried and measured: row padding went from 8px to 10px, and
   the toggle's transparent input - its click target - shrank from 44x24 to 17x17. The
   visible track and slider were unaffected, which is what made it easy to miss.
   ============================================================================ */
    #updateEmailSettingContainer .toggle-switch,
    #mobileAnalyticsSettingsContainer .toggle-switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
        margin: 0;
        vertical-align: middle;
    }

    #updateEmailSettingContainer .table tbody td,
    #mobileAnalyticsSettingsContainer .table tbody td {
        height: 50px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        vertical-align: middle !important;
    }

    #updateEmailSettingContainer .cf-settings-list__table,
    #mobileAnalyticsSettingsContainer .cf-settings-list__table {
        width: 100%;
        overflow: hidden;
        background: #fff;
        border: 1px solid #e5e0eb;
        border-radius: 14px;
        box-shadow: 0 10px 28px rgba(45, 33, 79, .055);
    }

    #updateEmailSettingContainer .cf-settings-list__table .table,
    #mobileAnalyticsSettingsContainer .cf-settings-list__table .table {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        table-layout: fixed;
    }

    #updateEmailSettingContainer .cf-settings-list__table th:last-child,
    #mobileAnalyticsSettingsContainer .cf-settings-list__table th:last-child,
    #updateEmailSettingContainer .cf-settings-list__table td:last-child,
    #mobileAnalyticsSettingsContainer .cf-settings-list__table td:last-child {
        width: 112px;
    }

    #updateEmailSettingContainer .cf-settings-list__footer,
    #mobileAnalyticsSettingsContainer .cf-settings-list__footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        width: 100%;
        margin-top: 14px;
    }

    #updateEmailSettingContainer .cf-settings-list__footer .btn,
    #mobileAnalyticsSettingsContainer .cf-settings-list__footer .btn {
        margin: 0 !important;
    }

        #updateEmailSettingContainer .toggle-switch input[type="checkbox"],
        #mobileAnalyticsSettingsContainer .toggle-switch input[type="checkbox"] {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            cursor: pointer;
            opacity: 0;
            z-index: 2;
        }

    #updateEmailSettingContainer .toggle-slider,
    #mobileAnalyticsSettingsContainer .toggle-slider {
        position: absolute;
        inset: 0;
        display: block;
        cursor: pointer;
        background-color: #b8b8b8;
        border-radius: 24px;
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

        #updateEmailSettingContainer .toggle-slider::before,
        #mobileAnalyticsSettingsContainer .toggle-slider::before {
            position: absolute;
            bottom: 3px;
            left: 3px;
            width: 18px;
            height: 18px;
            content: "";
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
            transform: translateX(0);
            transition: transform 0.2s ease;
        }

    #updateEmailSettingContainer .toggle-switch input[type="checkbox"]:checked + .toggle-slider,
    #mobileAnalyticsSettingsContainer .toggle-switch input[type="checkbox"]:checked + .toggle-slider {
        background-color: #007bff;
    }

        #updateEmailSettingContainer .toggle-switch input[type="checkbox"]:checked + .toggle-slider::before,
        #mobileAnalyticsSettingsContainer .toggle-switch input[type="checkbox"]:checked + .toggle-slider::before {
            transform: translateX(20px);
        }

    #updateEmailSettingContainer .toggle-switch input[type="checkbox"]:focus + .toggle-slider,
    #mobileAnalyticsSettingsContainer .toggle-switch input[type="checkbox"]:focus + .toggle-slider {
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    }

    #updateEmailSettingContainer .toggle-switch input[type="checkbox"]:disabled + .toggle-slider,
    #mobileAnalyticsSettingsContainer .toggle-switch input[type="checkbox"]:disabled + .toggle-slider {
        cursor: not-allowed;
        opacity: 0.5;
    }

    @media (max-width: 575.98px) {
        #updateEmailSettingContainer .cf-settings-list__table th:last-child,
        #mobileAnalyticsSettingsContainer .cf-settings-list__table th:last-child,
        #updateEmailSettingContainer .cf-settings-list__table td:last-child,
        #mobileAnalyticsSettingsContainer .cf-settings-list__table td:last-child {
            width: 76px;
        }

        #updateEmailSettingContainer .cf-settings-list__footer,
        #mobileAnalyticsSettingsContainer .cf-settings-list__footer {
            align-items: stretch;
            flex-direction: column;
        }

        #updateEmailSettingContainer .cf-settings-list__footer .btn,
        #mobileAnalyticsSettingsContainer .cf-settings-list__footer .btn {
            width: 100%;
        }
    }


/* ============================================================================
   daterangepicker-actions
   Used by: Client/Add, Subscription/Add, Subscription/Edit, Home/_ClientDashboard,
            Home/_GuestCheckInByDateAndTicketType, Home/_TopSellingPOSItems
   The plugin ships its Apply button as .btn-success, so it renders green while every
   other primary action in the admin uses the blue to violet gradient. QA raised it on
   Add Customer > Duration; the picker appears on six views, so it is corrected once
   here rather than per page. Values match .btn-primary in customstyle.css.
   ============================================================================ */
.daterangepicker .applyBtn,
.daterangepicker .applyBtn.btn-success {
    border: 0 !important;
    background: linear-gradient(120deg, #61b3ff 0%, #645bff 100%) !important;
    color: #fff !important;
}

    .daterangepicker .applyBtn:hover,
    .daterangepicker .applyBtn:focus,
    .daterangepicker .applyBtn.btn-success:hover,
    .daterangepicker .applyBtn.btn-success:focus {
        background: linear-gradient(120deg, #2899ff 0%, #5c52f0 100%) !important;
        color: #fff !important;
    }


/* ============================================================================
   cf-empty-state
   Used by: Report/Download, Event/Add
   Shown where a page has nothing to work with yet. Both of these views used to render
   nothing at all in that case, relying on a toast that fades and leaves a blank screen
   behind. Each states why the page is empty and links to the action that fixes it.
   ============================================================================ */
.cf-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px 24px;
    text-align: center;
}

    .cf-empty-state__icon {
        display: grid;
        width: 64px;
        height: 64px;
        place-items: center;
        border-radius: 50%;
        background: #f1efff;
        color: #5335e8;
        font-size: 26px;
    }

    .cf-empty-state__title {
        margin: 0;
        color: #172033;
        font-size: 19px;
        font-weight: 700;
    }

    .cf-empty-state__text {
        max-width: 46ch;
        margin: 0;
        color: #687184;
        font-size: 14px;
        line-height: 1.55;
    }

    .cf-empty-state__action {
        margin-top: 6px;
    }


/* ============================================================================
   role-directory
   Used by: StaffRole/Index, Role/Index
   Roles list with a hero, search, count and a table of role rows. It began as
   page styling for the client-side StaffRole list; the system admin Role list
   rendered a bare bootstrap table, so the same screen looked like two different
   products depending on which menu you came from. Moved here when the second
   view adopted it. Every selector is rooted on .role-directory or #rolesTable,
   so nothing leaks.
   ============================================================================ */
    .role-directory {
        --role-primary: #5b36df;
        --role-text: #1f1934;
        --role-muted: #746e82;
        --role-border: #e5e0eb;
        max-width: 1380px;
        margin: 0 auto;
        overflow: hidden;
        background: #fff;
        border: 1px solid rgba(148, 163, 184, .24);
        border-radius: 18px;
        box-shadow: 0 20px 55px rgba(36, 25, 70, .09);
    }

    .role-directory__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 22px;
        padding: 25px 28px;
        color: #fff;
        background: linear-gradient(125deg, #312e81 0%, #5b36df 58%, #3b82f6 100%);
    }

    .role-directory__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 6px;
        color: rgba(255, 255, 255, .72);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .role-directory__title {
        margin: 0 0 4px;
        color: #fff;
        font-size: 24px;
        font-weight: 700;
    }

    .role-directory__subtitle {
        margin: 0;
        color: rgba(255, 255, 255, .78);
        font-size: 12px;
    }

    .role-directory__header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        flex: 0 0 auto;
    }

    .role-directory__header-actions .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 41px;
        padding: 8px 14px;
        border-radius: 9px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    .role-directory__header-actions .btn i {
        margin: 0 !important;
    }

    .role-directory__secondary {
        color: #fff !important;
        background: rgba(255, 255, 255, .10) !important;
        border-color: rgba(255, 255, 255, .32) !important;
    }

    .role-directory__primary {
        color: #4338ca !important;
        background: #fff !important;
        border-color: #fff !important;
    }

    .role-directory__body {
        padding: 24px 26px 28px;
    }

    .role-directory__toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 18px;
    }

    .role-directory__search {
        position: relative;
        flex: 1 1 420px;
        max-width: 620px;
    }

    .role-directory__search i {
        position: absolute;
        top: 50%;
        left: 15px;
        color: #918a9e;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .role-directory__search .form-control {
        width: 100%;
        min-height: 44px;
        padding-left: 43px;
        color: var(--role-text);
        border: 1px solid #dcd6e5;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(45, 33, 79, .04);
    }

    .role-directory__search .form-control:focus {
        border-color: #8b76eb;
        box-shadow: 0 0 0 4px rgba(91, 54, 223, .10);
    }

    .role-directory__count {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 15px;
        color: #493f5a;
        background: linear-gradient(120deg, #dff3ff, #ede2ff);
        border: 1px solid rgba(91, 54, 223, .08);
        border-radius: 10px;
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
    }

    .role-directory__table-wrap {
        overflow: auto;
        border: 1px solid var(--role-border);
        border-radius: 12px;
    }

    #rolesTable {
        min-width: 650px;
        margin: 0;
    }

    #rolesTable thead th {
        padding: 12px 14px;
        color: #625a70;
        background: #f8f6fb;
        border: 0;
        border-bottom: 1px solid var(--role-border);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        vertical-align: middle;
    }

    #rolesTable tbody td {
        height: 58px !important;
        padding: 12px 14px;
        color: #42394f;
        border-top: 1px solid #f0edf3;
        vertical-align: middle !important;
    }

    #rolesTable tbody tr:first-child td {
        border-top: 0;
    }

    #rolesTable tbody tr:hover {
        background: #fbfaff;
    }

    .role-directory__name {
        display: flex;
        align-items: center;
        gap: 11px;
        color: var(--role-text);
        font-size: 13px;
        font-weight: 700;
    }

    .role-directory__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        color: #5633d4;
        background: #f0ecff;
        border-radius: 9px;
    }

    .role-directory__badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 9px;
        color: #475467;
        background: #f2f4f7;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

    .role-directory__badge--custom {
        color: #4338ca;
        background: #eef2ff;
    }

    .role-directory__action-cell {
        width: 118px;
        text-align: center;
    }

    .role-directory__action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 34px;
        padding: 6px 10px;
        color: #5231c5 !important;
        background: #f5f2ff;
        border: 1px solid #e1daf9;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 700;
        text-decoration: none !important;
        white-space: nowrap;
    }

    .role-directory__action:hover,
    .role-directory__action:focus {
        color: #fff !important;
        background: var(--role-primary);
        border-color: var(--role-primary);
    }

    .role-directory__action--danger {
        color: #c5283d !important;
        background: #fff5f6;
        border-color: #f4d5da;
    }

    .role-directory__action--danger:hover,
    .role-directory__action--danger:focus {
        color: #fff !important;
        background: #cf2d42;
        border-color: #cf2d42;
    }

    .role-directory__locked {
        color: #98a2b3;
        font-size: 11px;
    }

    .role-directory__empty {
        padding: 48px 20px !important;
        color: var(--role-muted) !important;
        text-align: center;
    }

    @media (max-width: 900px) {
        .role-directory__header {
            align-items: stretch;
            flex-direction: column;
        }

        /* The track minimum has to clear the widest button, not just look roughly right. These
           buttons are white-space:nowrap, so a track narrower than their text does not wrap it,
           it clips it. At 150px auto-fit was fitting two columns of 161px into a phone, and
           "Configure permissions" needs 163px - it lost its last letters off the side of the
           card. Anything under the real content width simply drops the buttons to one per row
           instead, which is what a phone wants anyway. */
        .role-directory__header-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
        }
    }

    @media (max-width: 767px) {
        .role-directory {
            border-radius: 14px;
        }

        .role-directory__header {
            padding: 22px 20px;
        }

        .role-directory__body {
            padding: 18px 14px 22px;
        }

        .role-directory__toolbar {
            align-items: stretch;
            flex-direction: column;
        }

        .role-directory__search {
            flex-basis: auto;
            max-width: none;
        }

        .role-directory__count {
            align-self: flex-start;
        }
    }


/* ============================================================================
   permission-directory
   Used by: StaffRole/Permissions, Role/Permissions
   The role-by-permission matrix: hero, search, grouped rows and a sticky save bar.
   It began as page styling for the client-side screen; the system admin version of
   the same matrix rendered a bare bootstrap table. Moved here when that view
   adopted it. Selectors are rooted on .permission-directory, .permission-matrix,
   .permission-search or the permission-* row classes, so nothing leaks.
   ============================================================================ */
    .permission-directory {
        --permission-primary: #4c21c7;
        --permission-border: #e6e0f1;
        max-width: 1500px;
        margin: 0 auto;
    }

    .permission-directory__hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 28px 30px;
        margin-bottom: 18px;
        color: #fff;
        background: linear-gradient(125deg, #352080 0%, #5a2de0 58%, #517df1 100%);
        border-radius: 18px;
        box-shadow: 0 18px 44px rgba(54, 32, 128, .18);
    }

    .permission-directory__eyebrow {
        margin: 0 0 6px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
        opacity: .74;
    }

    .permission-directory__title {
        margin: 0;
        color: #fff;
        font-size: 30px;
        font-weight: 700;
        line-height: 1.15;
    }

    .permission-directory__intro {
        max-width: 690px;
        margin: 9px 0 0;
        font-size: 15px;
        line-height: 1.55;
        opacity: .86;
    }

    .permission-directory__actions {
        display: flex;
        flex: 0 0 auto;
        gap: 10px;
    }

    .permission-directory__hero .btn {
        min-height: 46px;
        padding: 11px 17px;
        color: #fff;
        font-weight: 700;
        background: rgba(255, 255, 255, .1);
        border: 1px solid rgba(255, 255, 255, .38);
        border-radius: 11px;
        box-shadow: none;
    }

    .permission-directory__hero .btn:hover,
    .permission-directory__hero .btn:focus {
        color: var(--permission-primary);
        background: #fff;
        border-color: #fff;
    }

    .permission-directory__panel {
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--permission-border);
        border-radius: 18px;
        box-shadow: 0 16px 42px rgba(44, 31, 79, .08);
    }

    .permission-directory__toolbar {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 20px 22px;
        border-bottom: 1px solid var(--permission-border);
    }

    .permission-search {
        position: relative;
        flex: 1 1 auto;
    }

    .permission-search > i {
        position: absolute;
        top: 50%;
        left: 17px;
        z-index: 1;
        color: #655e73;
        font-size: 19px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .permission-search .form-control {
        height: 50px;
        padding: 10px 44px 10px 48px;
        background: #fbfaff;
        border: 1px solid #ddd6eb;
        border-radius: 11px;
        box-shadow: none;
    }

    .permission-search .form-control:focus {
        background: #fff;
        border-color: #8a72ec;
        box-shadow: 0 0 0 3px rgba(107, 86, 255, .11);
    }

    .permission-search__clear {
        position: absolute;
        top: 50%;
        right: 9px;
        display: none;
        width: 32px;
        height: 32px;
        padding: 0;
        color: #625d6d;
        background: transparent;
        border: 0;
        border-radius: 8px;
        transform: translateY(-50%);
    }

    .permission-directory__count {
        flex: 0 0 auto;
        min-width: 132px;
        padding: 13px 16px;
        color: #4e4760;
        font-weight: 700;
        text-align: center;
        background: linear-gradient(120deg, #dff3ff, #ede0ff);
        border-radius: 11px;
    }

    .permission-matrix__table-wrap {
        max-height: calc(100vh - 330px);
        min-height: 360px;
        overflow: auto;
        scrollbar-color: #bdb4d1 #f5f2fa;
        scrollbar-width: thin;
    }

    .permission-matrix__table {
        width: 100%;
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .permission-matrix__table th,
    .permission-matrix__table td {
        padding: 15px 16px;
        vertical-align: middle;
        border: 0;
        border-bottom: 1px solid #eeeaf4;
    }

    .permission-matrix__table thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        min-width: 150px;
        color: #5d5769;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .045em;
        text-align: center;
        text-transform: uppercase;
        background: #f6f3fa;
    }

    .permission-matrix__table thead th:first-child {
        left: 0;
        z-index: 4;
        min-width: 320px;
        text-align: left;
    }

    .permission-matrix__table tbody tr:not(.permission-group-row):hover td {
        background: #fcfbff;
    }

    .permission-matrix__table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        min-width: 320px;
        background: #fff;
    }

    .permission-group-row td {
        position: static !important;
        padding: 13px 18px !important;
        color: #382777;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .025em;
        text-transform: uppercase;
        background: linear-gradient(90deg, #eee9ff 0%, #f7f5fc 70%) !important;
        border-bottom-color: #ddd5ef !important;
    }

    .permission-group-row i {
        margin-right: 9px;
        color: #6746e5;
        font-size: 16px;
    }

    .permission-group-row__count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 27px;
        height: 23px;
        margin-left: 8px;
        padding: 0 7px;
        color: #665c78;
        font-size: 11px;
        background: #fff;
        border: 1px solid #ded7eb;
        border-radius: 7px;
    }

    .permission-name {
        display: block;
        color: #282234;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.35;
    }

    .permission-code {
        display: block;
        margin-top: 4px;
        color: #8a8395;
        font-size: 11px;
        line-height: 1.35;
    }

    .permission-role-heading {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 0;
        white-space: nowrap;
    }

    .permission-toggle,
    .permission-checkall {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--permission-primary);
        cursor: pointer;
    }

    .permission-state {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        color: #138451;
        background: #e7f7ee;
        border-radius: 9px;
    }

    .permission-state--off {
        color: #9a4050;
        background: #fff0f2;
    }

    .permission-directory__empty {
        display: none;
        padding: 50px 20px;
        color: #746f82;
        text-align: center;
    }

    .permission-directory__empty i {
        display: block;
        margin-bottom: 10px;
        color: #9b8be5;
        font-size: 34px;
    }

    .permission-directory__footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 14px;
        padding: 17px 22px;
        background: #fcfbfe;
        border-top: 1px solid var(--permission-border);
    }

    .permission-directory__save-status {
        display: none;
        margin-right: auto;
        color: #7a7287;
        font-size: 13px;
    }

    .permission-directory__save {
        min-width: 158px;
        min-height: 46px;
        color: #fff;
        font-weight: 700;
        background: linear-gradient(120deg, #6658ff, #7d22ed);
        border: 0;
        border-radius: 11px;
        box-shadow: 0 10px 22px rgba(89, 45, 205, .2);
    }

    .permission-directory__save:hover,
    .permission-directory__save:focus {
        color: #fff;
        background: linear-gradient(120deg, #5648ef, #6e17dd);
    }

    @media (max-width: 767.98px) {
        .permission-directory__hero {
            align-items: stretch;
            flex-direction: column;
            padding: 22px 20px;
            border-radius: 15px;
        }

        .permission-directory__actions,
        .permission-directory__actions .btn {
            width: 100%;
        }

        .permission-directory__actions .btn {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .permission-directory__panel {
            border-radius: 15px;
        }

        .permission-directory__toolbar,
        .permission-directory__footer {
            align-items: stretch;
            flex-direction: column;
            padding: 16px;
        }

        .permission-directory__count,
        .permission-directory__save {
            width: 100%;
        }

        /* This used to lift the height cap on a phone, which is the one place it cannot be
           lifted. The pane then grew to the full height of all 87 permissions - over 6000px -
           and took its horizontal scrollbar down to the bottom with it, thousands of pixels
           below the fold. The matrix is 1092px wide against a 370px pane here, so sideways is
           the direction that actually matters, and it was the direction you could not go. The
           sticky header needs the cap too: position:sticky resolves against the nearest
           scrollport, and an uncapped pane never becomes one. Kept shallower than the desktop
           cap because a phone has less chrome around it. */
        .permission-matrix__table-wrap {
            max-height: calc(100vh - 240px);
            min-height: 320px;
        }

        .permission-matrix__table thead th:first-child,
        .permission-matrix__table tbody td:first-child {
            min-width: 245px;
        }

        .permission-directory__save-status {
            margin: 0;
            text-align: center;
        }
    }


/* ============================================================================
   cf-btn-secondary
   Used by: Setting/Email
   A neutral button for the action beside a primary one. The app had no app-wide
   secondary button, only modal-scoped ones (.ticket-btn-secondary,
   .cf-catalog-modal__cancel), so a Cancel outside a modal was left as a bare
   anchor - 16px of underlined text next to a 39px button. Values follow
   .cf-catalog-modal__cancel; pair it with .btn so the theme supplies the sizing.
   ============================================================================ */
.cf-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    /* .btn alone sits shorter than .btn-outline-primary, which raises the padding and font
       size, so both are matched here. The primary is a gradient fill with border-width 0
       while this one carries a 1px border, so the border is taken back out of the padding
       to keep the two the same height. */
    padding: 7.5px 19px;
    border: 1px solid #dad3e4 !important;
    background: #fff !important;
    color: #4e4659 !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
}

    .cf-btn-secondary:hover,
    .cf-btn-secondary:focus {
        border-color: #c9c0d8 !important;
        background: #f7f5fa !important;
        color: #2f2938 !important;
        text-decoration: none !important;
    }