:root {
    --staff-color-white: #ffffff;
    --staff-color-black: #444444;
    --staff-color-grey: #f5f5f5;
}

body[class*="staff-"] .page.messages {
    margin: 2rem auto 1.25rem;
    max-width: 1280px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    width: 100%;
}

body[class*="staff-"] .page.messages .message {
    margin-left: auto;
    margin-right: auto;
    max-width: 960px;
}

@media (max-width: 767px) {
    body[class*="staff-"] .page.messages {
        margin-bottom: 1rem;
        margin-top: 1.25rem;
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
}

.staff-customer-account-create {
    .descriptions .field-description {
        @apply clear-both text-xs; /* clear: both; font-size: 10px; */
    }
    .descriptions .field {
        @apply relative mt-2.5 mb-2.5 min-h-[81px]; /* margin-top: 10px; margin-bottom: 10px; */
    }
    .descriptions .field p {
        @apply w-[260px];
    }
    .descriptions .field select,
    .descriptions .field input {
        @apply absolute bottom-0;
    }
    .descriptions .validation-advice {
        @apply absolute bottom-[-15px]; /* bottom: -15px */
    }
    #taxvat_message {
        @apply mt-4 p-1 border border-solid rounded;
    }
    #taxvat_message i {
        @apply float-left m-0.5;
    }
    #taxvat_data_ok + label {
        @apply float-right w-[90%];
    }
    #taxvat_data_ok + label em {
        @apply relative float-none top-0 right-0;
    }

    button[type="submit"] {
        align-items: center;
        background-color: #2563eb;
        border: 1px solid transparent;
        border-radius: .375rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
        color: #ffffff;
        display: inline-flex !important;
        font-size: .875rem;
        font-weight: 500;
        justify-content: center;
        line-height: 1.25rem;
        min-width: 150px;
        padding: .5rem 1rem;
    }

    button[type="submit"]:hover {
        background-color: #1d4ed8;
    }

    .field {
        margin-bottom: 1rem;
    }

    .label {
        color: #374151;
        display: block;
        font-size: .875rem;
        font-weight: 500;
        line-height: 1.25rem;
        margin-bottom: .5rem;
    }

    .control {
        margin-top: .25rem;
    }

    .input-text,
    .form-select {
        border-color: #d1d5db;
        border-radius: .375rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
        display: block;
        width: 100%;
    }

    .action.back {
        align-items: center;
        background-color: #e5e7eb;
        border: 1px solid transparent;
        border-radius: .375rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
        color: #374151;
        display: inline-flex;
        font-size: .875rem;
        font-weight: 500;
        justify-content: center;
        line-height: 1.25rem;
        padding: .5rem 1rem;
    }

    .action.back:hover {
        background-color: #d1d5db;
    }
}

.staff-customers-list {
    h4 {
        @apply text-2xl;
    }
    a {
        @apply no-underline;
    }
    .pagination-container .pagination {
        @apply flex flex-wrap gap-2 my-2;
    }

    .pagination-container .pagination a,
    .pagination-container .pagination span {
        @apply inline-flex items-center justify-center min-w-8 h-8 px-3 text-center rounded;
    }

    .pagination,
    div:has(> .pagination) {
        @apply flex flex-wrap gap-3 my-3 w-full justify-center;

        a, span {
            @apply inline-flex items-center justify-center min-w-[2.5rem] h-10 px-3
            text-center rounded border border-solid;
        }

        a {
            @apply border-gray-300 hover:border-gray-700 hover:bg-gray-100;
        }

        span.current {
            @apply bg-gray-800 text-white border-gray-800 font-medium;
        }

        span.disabled, span.elipses {
            @apply border-gray-200 text-gray-400;
        }
    }

    @media (max-width: 768px) {
        .pagination,
        div:has(> .pagination) {
            @apply overflow-x-auto whitespace-nowrap py-2 flex-nowrap;
            -webkit-overflow-scrolling: touch;
        }
    }
    .toolbar .pager {
        @apply text-left;
        .pagination_limiter_container {
            @apply w-full md:w-[72%] inline-block;
            .limiter {
                @apply inline-block w-full md:w-[35%];
            }
            .pagination {
                @apply inline-block text-left w-full md:w-[62%] p-0.5 m-0.5;
                a {
                    @apply px-2 py-1 m-1 border border-solid border-gray-400 no-underline text-gray-400 min-w-[2rem] text-center;
                    &:hover,
                    &:active {
                        @apply border-gray-700 text-black;
                    }
                }
                span.current {
                    @apply px-2 py-1 m-1 border border-black font-bold bg-black text-white min-w-[2rem] text-center;
                }
                span.disabled {
                    @apply px-2 py-1 m-1 border border-solid border-gray-200 text-gray-300 min-w-[2rem] text-center;
                }
            }
        }
        .sorter {
            @apply text-right inline-block w-full md:w-[27%];
            .sort_link {
                @apply text-xl mt-[-7px] absolute px-2.5 py-1;
            }
        }
    }
    .customer-card-header {
        @apply flex flex-col md:flex-row md:items-start md:justify-between gap-3;
    }
    .customer-card-header-main {
        @apply flex items-start gap-3 flex-1;
    }
    .customer-card-avatar {
        @apply flex items-center justify-center w-8 h-8 rounded-full bg-gradient-to-br from-blue-600 to-blue-400 text-white font-semibold text-xs shadow;
    }
    .customer-card-avatar-initials {
        @apply inline-block;
    }
    .customer-card-header-content {
        @apply flex-1;
    }
    .customer-card-name-row {
        @apply flex items-center gap-2 mb-1;
    }
    .customer-card-name {
        @apply font-semibold text-base leading-snug;
    }
    .customer-card-badge {
        @apply text-[11px] uppercase tracking-[0.06em] px-1.5 py-0.5 rounded-full border text-blue-700 bg-blue-50;
        border-color: rgb(29 78 216 / .4);
    }
    .customer-card-meta {
        @apply flex flex-wrap gap-1 text-[11px] text-gray-600 mb-1;
    }
    .customer-card-meta-item {
        @apply bg-gray-100 rounded-full px-2 py-0.5;
    }
    .customer-card-contact-inline {
        @apply flex flex-wrap gap-2;
    }
    .customer-card-contact-pill {
        @apply inline-flex items-center gap-1.5 px-2 py-1 rounded-full bg-slate-50 text-[13px] text-slate-700;
    }
    .customer-card-contact-icon {
        @apply w-3.5 h-3.5 flex items-center justify-center;
    }
    .customer-card-contact-icon svg {
        @apply w-full h-full;
    }
    .customer-card-contact-text {
        @apply max-w-[220px] whitespace-nowrap overflow-hidden text-ellipsis;
    }
    .customer-card-actions {
        @apply flex items-start gap-2 ml-auto;
    }
    .staff-action {
        @apply inline-flex items-center justify-center w-10 h-10 rounded-full border border-gray-300
        text-gray-600 bg-white hover:bg-gray-100 hover:text-gray-900;
    }
    .staff-action-icon {
        @apply w-5 h-5 flex items-center justify-center;
    }
    .staff-action-icon svg {
        @apply w-full h-full;
    }
    .customer-card {
        @apply relative;
        .success-overlay,
        .error-overlay {
            @apply absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] p-2.5 rounded z-50 text-center;
        }
        .success-overlay {
            @apply bg-green-600 text-white;
        }
        .error-overlay {
            @apply bg-red-600 text-white;
        }
    }
    .customer_grid_container {
        @apply clear-both;
        .customer_grid {
            @apply min-h-[50px];
            .row_container {
                @apply bg-white w-full mt-12 relative;
                &:hover {
                    @apply bg-gray-100;
                }
                .success-overlay,
                .error-overlay {
                    @apply absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] p-2.5 rounded z-50 text-center hidden;
                }
                .success-overlay {
                    @apply bg-green-600 text-white;
                }
                .error-overlay {
                    @apply bg-red-600 text-white;
                }
                .row {
                    @apply m-0.5 float-left w-full block;
                    &:first-of-type {
                        @apply absolute right-1.5 w-auto z-10;
                        .actions {
                            @apply float-right mr-[-1%];
                            a {
                                @apply text-center;
                            }
                        }
                    }
                    .col {
                        @apply float-left w-[50%] p-0;
                    }
                    .label {
                        @apply font-bold w-[40%] float-left text-sm;
                    }
                    .value {
                        @apply float-left w-[59.5%] text-sm;
                    }
                    .col-full {
                        @apply w-full;
                        .label {
                            @apply w-[20%];
                        }
                        .value {
                            @apply w-[79%];
                        }
                    }
                    .actions {
                        @apply bg-gray-200 p-1 rounded w-8 float-right;
                        a {
                            @apply block leading-tight;
                        }
                    }
                }
            }
            .row_container_with_staff {
                @apply min-h-[242px];
                min-height: 242px !important;
            }
        }
        .toolbar {
            @apply mt-5;
        }
    }
}

.customer_grid_container .staff-customer-filter-card {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.customer_grid_container .staff-customer-filter-trigger {
    align-items: center;
    background: #f8fafc;
    color: #111827;
    display: flex;
    font-weight: 600;
    gap: 1rem;
    justify-content: space-between;
    padding: .875rem 1rem;
    text-align: left;
    width: 100%;
}

.customer_grid_container .staff-customer-filter-trigger:hover {
    background: #f1f5f9;
}

.customer_grid_container .staff-customer-filter-toggle {
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #475569;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: 600;
    height: 1.5rem;
    justify-content: center;
    line-height: 1;
    width: 1.5rem;
}

.customer_grid_container .staff-customer-filter-panel {
    padding: 1rem;
}

.customer_grid_container .staff-customer-filter-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.customer_grid_container .staff-customer-filter-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}

.customer_grid_container .staff-customer-secondary-action {
    align-items: center;
    background: #e5e7eb;
    border: 1px solid transparent;
    border-radius: .375rem;
    color: #111827;
    display: inline-flex;
    font-weight: 500;
    justify-content: center;
    min-height: 2.5rem;
    padding: .5rem 1rem;
}

.customer_grid_container .staff-customer-secondary-action:hover {
    background: #d1d5db;
}

.customer_grid_container .staff-customer-toolbar {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
}

.staff-customer-additional-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.staff-customer-action-card {
    align-items: center;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
}

.staff-customer-action-card__content,
.staff-customer-search-form {
    min-width: 0;
    width: 100%;
}

.staff-customer-action-card__title {
    color: #111827;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

.staff-customer-action-card__actions {
    flex: 0 0 auto;
}

.staff-customer-search-controls {
    align-items: center;
    display: flex;
    gap: .75rem;
    margin-top: .75rem;
}

.staff-customer-search-input {
    flex: 1 1 auto;
    min-width: 0;
}

.staff-customer-primary-action {
    align-items: center;
    background: #2563eb;
    border: 1px solid transparent;
    border-radius: .375rem;
    color: #ffffff;
    display: inline-flex;
    font-weight: 600;
    justify-content: center;
    min-height: 2.5rem;
    padding: .5rem 1rem;
    white-space: nowrap;
}

.staff-customer-primary-action:hover {
    background: #1d4ed8;
}

.staff-customer-primary-action:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.staff-customer-search-feedback,
.staff-customer-search-result {
    margin-top: .75rem;
}

.staff-customer-search-result .customer-search-result-option {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: .375rem;
    display: inline-flex;
    gap: .5rem;
    padding: .5rem .75rem;
}

@media (max-width: 1023px) {
    .customer_grid_container .staff-customer-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .customer_grid_container .staff-customer-filter-grid {
        grid-template-columns: 1fr;
    }

    .staff-customer-action-card,
    .staff-customer-search-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .staff-customer-action-card__actions,
    .staff-customer-primary-action {
        width: 100%;
    }
}

/* Plain CSS fallback for Hyvä comment overlays (no @apply, no nesting) */
.staff-customers-list .customer-card {
    position: relative;
}

.staff-customers-list .customer-card .success-overlay,
.staff-customers-list .customer-card .error-overlay {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    border-radius: 5px;
    height: max-content;
    left: 50%;
    margin: 0;
    max-width: calc(100% - 2rem);
    min-width: min(18rem, calc(100% - 2rem));
    right: auto;
    bottom: auto;
    padding: 10px 20px;
    position: fixed;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    translate: none;
    width: max-content;
    z-index: 9999;
}

.staff-customers-list .customer-card .success-overlay {
    background-color: rgba(40, 167, 69, 0.9);
    color: #ffffff;
}

.staff-customers-list .customer-card .error-overlay {
    background-color: rgba(220, 53, 69, 0.9);
    color: #ffffff;
}

.staff-customers-list .customer-card-body {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.staff-customers-list .customer-card-section.customer-card-section--summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.staff-customers-list .customer-card-section.customer-card-section--addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.staff-customers-list .customer-card-section.customer-card-section--staff {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.staff-customers-list .customer-card-section.customer-card-section--comment {
    border-top: 1px solid #edf1f4;
    padding-top: 8px;
    margin-top: 4px;
}

.staff-customers-list .customer-card-summary-item {
    flex: 1 1 120px;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 6px;
    background: #f8fafc;
}

.staff-customers-list .customer-card-summary-item .customer-card-summary-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7a7a7a;
    margin-bottom: 2px;
}

.staff-customers-list .customer-card-summary-item .customer-card-summary-value {
    font-size: 13px;
    font-weight: 500;
    color: #242424;
}

.staff-customers-list .customer-card-address {
    border-radius: 6px;
    background: #f9fafb;
    padding: 6px 10px;
}

.staff-customers-list .customer-card-address-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.staff-customers-list .customer-card-address-icon {
    width: 14px;
    height: 14px;
}

.staff-customers-list .customer-card-address-icon svg {
    width: 100%;
    height: 100%;
}

.staff-customers-list .customer-card-address-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.staff-customers-list .customer-card-address-body {
    font-size: 13px;
    line-height: 1.3;
    color: #444444;
    white-space: normal;
}

.staff-customers-list .customer-card-staff-item {
    padding: 4px 8px;
    border-radius: 999px;
    background: #f1f3f5;
    font-size: 11px;
}

.staff-customers-list .customer-card-staff-label {
    font-weight: 600;
    margin-right: 4px;
}

.staff-customers-list .customer-card-comment-label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

.staff-customers-list .customer-card-comment-control {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.staff-customers-list .customer-card-comment-input {
    min-height: 60px;
    resize: vertical;
}

.staff-customers-list .customer-card-comment-button,
.customer_grid_container .customer-card-comment-button {
    align-self: flex-start;
    align-items: center;
    background-color: #2563eb;
    border: 1px solid transparent;
    border-radius: .375rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    color: #ffffff;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 500;
    justify-content: center;
    line-height: 1.25rem;
    margin-top: .5rem;
    padding: .5rem 1rem;
}

.staff-customers-list .customer-card-comment-button:hover,
.customer_grid_container .customer-card-comment-button:hover {
    background-color: #1d4ed8;
}

.staff-customers-list .customer-card-comment-button:focus,
.customer_grid_container .customer-card-comment-button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6;
}

.staff-customers-list .customer-card-contact-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.staff-customers-list .customer-card-contact-icon svg {
    width: 100%;
    height: 100%;
}

.staff-customers-list .customer-card-header {
    position: relative;
}

.staff-customers-list .customer-card-actions {
    position: absolute;
    top: 6px;
    right: 6px;
}

.staff-customers-list .staff-action {
    width: 44px;
    height: 44px;
}

.staff-customers-list .staff-action-icon {
    width: 22px;
    height: 22px;
}

.staff-customers-list .staff-action--login {
    color: #2e7d32;
    background-color: #e8f5e9;
}

.staff-customers-list .staff-action--unassign {
    color: #c62828;
    background-color: #ffebee;
}

.staff-customers-list .staff-action--logout {
    color: #1565c0;
    background-color: #e3f2fd;
}

.staff-report-root .staff-report-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.staff-report-root .staff-report-table-wrapper {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: .25rem;
    -webkit-overflow-scrolling: touch;
}

.staff-report-root .staff-report-table {
    min-width: 960px;
}

.staff-report-root .staff-report-table-product {
    min-width: 1040px;
}

.staff-report-root .staff-report-table th,
.staff-report-root .staff-report-table td {
    vertical-align: top;
}

.staff-report-root .staff-report-table th button {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: .375rem;
    padding: 0;
    text-align: left;
    text-decoration: none;
}

.staff-report-root .staff-report-table th button .sort-title::after {
    color: #64748b;
    display: inline-block;
    font-size: .75rem;
    margin-left: .375rem;
}

.staff-report-root .staff-report-table th button.sort-arrow-asc .sort-title::after {
    content: "\25B2";
}

.staff-report-root .staff-report-table th button.sort-arrow-desc .sort-title::after {
    content: "\25BC";
}

.staff-report-root .staff-report-table th button.not-sort .sort-title::after {
    content: "\2195";
}

.staff-report-root .staff-report-filter-cell {
    min-width: 130px;
}

.staff-report-root .staff-report-filter-range {
    display: grid;
    gap: .375rem;
}

.staff-report-root .staff-report-filter-actions {
    display: grid;
    gap: .5rem;
    justify-items: stretch;
    min-width: 108px;
}

.staff-report-root .staff-report-column-options {
    display: grid;
    gap: .75rem;
    max-height: 60vh;
    overflow: auto;
    padding-right: .25rem;
}

.staff-report-root .staff-report-column-option {
    align-items: center;
    display: flex;
    gap: .625rem;
}

.staff-report-root .staff-report-column-modal {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 9000;
}

.staff-report-root .staff-report-column-modal__backdrop {
    background: rgba(17, 24, 39, .55);
    inset: 0;
    position: absolute;
}

.staff-report-root .staff-report-column-modal__dialog {
    background: #fff;
    border-radius: .375rem;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 4rem);
    max-width: 34rem;
    outline: none;
    position: relative;
    width: 100%;
    z-index: 1;
}

.staff-report-root .staff-report-column-modal__header {
    align-items: center;
    background: #f3f4f6;
    border-bottom: 1px solid #d1d5db;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.staff-report-root .staff-report-column-modal__title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
}

.staff-report-root .staff-report-column-modal__close {
    align-items: center;
    border-radius: .25rem;
    color: #111827;
    display: inline-flex;
    font-size: 1.75rem;
    height: 2rem;
    justify-content: center;
    line-height: 1;
    width: 2rem;
}

.staff-report-root .staff-report-column-modal__content {
    overflow: auto;
    padding: 1.25rem;
}

.staff-report-root .staff-report-column-modal__actions {
    align-items: center;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
}

.customer_grid_container .customer-card {
    position: relative;
}

.customer_grid_container .customer-card .success-overlay,
.customer_grid_container .customer-card .error-overlay {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    border-radius: .375rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .22);
    height: max-content;
    left: 50%;
    margin: 0;
    max-width: calc(100% - 2rem);
    min-width: min(18rem, calc(100% - 2rem));
    right: auto;
    bottom: auto;
    padding: .75rem 1rem;
    position: fixed;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    translate: none;
    width: max-content;
    z-index: 9999;
}

.customer_grid_container .customer-card .success-overlay {
    background-color: rgba(22, 163, 74, .96);
    color: #ffffff;
}

.customer_grid_container .customer-card .error-overlay {
    background-color: rgba(220, 38, 38, .96);
    color: #ffffff;
}

.staff-order-comment-history-item {
    margin-left: 2px;
}

.staff-edit-order-form {
    display: inline-flex;
    margin: 0;
}

.staff-edit-order-form button {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    padding: 0;
}

.staff-edit-order-notice {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: .375rem;
    color: #1e3a8a;
    margin-bottom: 1rem;
    padding: .875rem 1rem;
}

.staff-edit-order-notice__message {
    font-weight: 500;
}

.staff-edit-order-notice__message a {
    color: #1d4ed8;
    text-decoration: underline;
}

.staff-customer-search-submit {
    float: none;
}

.block-my-sales-staff .block-title {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.block-my-sales-staff .block-title strong {
    color: #111827;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
}

.block-my-sales-staff .box {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    width: 100%;
}

.block-my-sales-staff .box-title {
    color: #111827;
    display: block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: .75rem;
}

.block-my-sales-staff .primary-staff-carousel {
    margin-top: .625rem;
}

.block-my-sales-staff .primary-staff-controls {
    align-items: center;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.block-my-sales-staff .primary-staff-controls .carousel-nav {
    min-width: 7rem;
}

.block-my-sales-staff .primary-staff-controls .carousel-counter {
    color: #4b5563;
    font-size: .8125rem;
    white-space: nowrap;
}

.block-my-sales-staff .primary-staff-controls .carousel-nav.is-disabled {
    cursor: not-allowed;
    opacity: .45;
}

.block-my-sales-staff .primary-staff-track {
    position: relative;
}

.block-my-sales-staff .primary-staff-carousel.is-carousel .primary-staff-track {
    min-height: 8.5rem;
}

.block-my-sales-staff .primary-staff-carousel.is-carousel .primary-staff-card {
    display: none;
}

.block-my-sales-staff .primary-staff-carousel.is-carousel .primary-staff-card.is-active {
    display: block;
}

.block-my-sales-staff .primary-staff-radio-none {
    left: -9999px;
    position: absolute;
}

.block-my-sales-staff .primary-staff-card,
.block-my-sales-staff .additional-staff-card {
    position: relative;
}

.block-my-sales-staff .additional-staff-card.is-hidden {
    display: none;
}

.block-my-sales-staff .staff-card {
    align-items: center;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .06);
    cursor: pointer;
    display: flex;
    gap: 1rem;
    min-height: 6rem;
    padding: .875rem 2.75rem .875rem 1rem;
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.block-my-sales-staff .staff-card:hover {
    border-color: #9ca3af;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
    transform: translateY(-1px);
}

.block-my-sales-staff .primary-staff-card input.primary-staff-radio,
.block-my-sales-staff .additional-staff-card input.additional-staff-checkbox {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.block-my-sales-staff .staff-card::after {
    background: #ffffff;
    border: 1px solid #9ca3af;
    content: '';
    height: 1rem;
    position: absolute;
    right: .875rem;
    top: .875rem;
    width: 1rem;
}

.block-my-sales-staff .staff-card--primary::after {
    border-radius: 50%;
}

.block-my-sales-staff .staff-card--additional::after {
    border-radius: .25rem;
}

.block-my-sales-staff .primary-staff-card input.primary-staff-radio:checked + .staff-card,
.block-my-sales-staff .additional-staff-card input.additional-staff-checkbox:checked + .staff-card {
    border-color: #111827;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .16);
}

.block-my-sales-staff .primary-staff-card input.primary-staff-radio:checked + .staff-card::after,
.block-my-sales-staff .additional-staff-card input.additional-staff-checkbox:checked + .staff-card::after {
    background: #111827;
    border-color: #111827;
    box-shadow: inset 0 0 0 2px #ffffff;
}

.block-my-sales-staff .primary-staff-card input.primary-staff-radio:focus + .staff-card,
.block-my-sales-staff .additional-staff-card input.additional-staff-checkbox:focus + .staff-card {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.block-my-sales-staff .staff-card-media {
    background: #f3f4f6;
    border-radius: 50%;
    flex: 0 0 4rem;
    height: 4rem;
    overflow: hidden;
    width: 4rem;
}

.block-my-sales-staff .staff-card--primary .staff-card-media {
    flex-basis: 6rem;
    height: 6rem;
    width: 6rem;
}

.block-my-sales-staff .staff-card-media img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.block-my-sales-staff .staff-card-body {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
}

.block-my-sales-staff .staff-card-name {
    color: #111827;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.block-my-sales-staff .staff-card-meta {
    color: #4b5563;
    display: flex;
    flex-wrap: wrap;
    font-size: .8125rem;
    gap: .375rem;
    line-height: 1.35;
    min-width: 0;
}

.block-my-sales-staff .staff-card-link {
    color: #1d4ed8;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.block-my-sales-staff .staff-card-link:hover {
    text-decoration: underline;
}

.block-my-sales-staff .staff-card-meta-sep {
    color: #9ca3af;
}

.block-my-sales-staff .primary-staff-footer {
    align-items: center;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-top: .75rem;
}

.block-my-sales-staff .primary-staff-selected {
    align-items: baseline;
    color: #4b5563;
    display: flex;
    font-size: .8125rem;
    gap: .375rem;
    min-width: 0;
}

.block-my-sales-staff .primary-staff-selected-label {
    color: #111827;
    font-weight: 600;
}

.block-my-sales-staff .primary-staff-selected-value {
    color: #111827;
    overflow-wrap: anywhere;
}

.block-my-sales-staff .additional-staff-container {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1280px) {
    .block-my-sales-staff .additional-staff-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .block-my-sales-staff .block-title,
    .block-my-sales-staff .primary-staff-footer,
    .block-my-sales-staff .primary-staff-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .block-my-sales-staff .primary-staff-controls .carousel-nav,
    .block-my-sales-staff .block-title .action,
    .block-my-sales-staff .primary-staff-clear {
        width: 100%;
    }

    .block-my-sales-staff .staff-card {
        align-items: flex-start;
    }

    .block-my-sales-staff .staff-card--primary .staff-card-media,
    .block-my-sales-staff .staff-card-media {
        flex-basis: 4rem;
        height: 4rem;
        width: 4rem;
    }

    .block-my-sales-staff .additional-staff-container {
        grid-template-columns: 1fr;
    }
}

.staff_accordion {
    .accordion-title {
        @apply bg-gray-900 text-white text-base cursor-pointer border-b border-solid border-white;
        &[aria-expanded="true"] {
            @apply border-b-0;
        }
        > div {
            @apply p-2.5;
        }
    }
    .accordion-content {
        @apply p-2.5 border-l border-r border-solid border-gray-900;
        &:last-of-type {
            @apply border-b border-solid border-gray-900;
        }
        .fields .field {
            @apply inline-block w-[48%] mr-[1%] mb-1.5;
            &:nth-child(even) {
                @apply mr-0;
                &:after {
                    content: "";
                    @apply block clear-both;
                }
            }
        }
        .button-container {
            @apply mt-2.5;
        }
    }
}