/* User Management module */

/* Page layout */

.um-page {
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
    /* Top padding separates the module from the nav bar. */
    padding: 32px 24px 40px;
    font-family: inherit;
}

.um-content-narrow {
    max-width: 780px;
}

.um-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.um-title {
    font-size: 22px;
    font-weight: 600;
    color: #101828;
    margin: 0 0 4px;
    line-height: 1.3;
}

.um-subtitle {
    font-size: 13px;
    color: #475467;
    margin: 0;
}

.um-section-heading { margin: 4px 0 12px; }

.um-section-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #101828;
}

.um-section-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: #475467;
}

.um-invite-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: #0f4d47;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

.um-invite-btn:hover { background: #0c3d38; }
.um-invite-btn:focus-visible { outline: 2px solid #0f4d47; outline-offset: 2px; }

/* Tabs */

.um-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: #f9fafb;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    margin-bottom: 20px;
}

.um-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: #667085;
    text-decoration: none;
    white-space: nowrap;
}

.um-tab:hover { color: #344054; }

.um-tab-active {
    background: #fff;
    border-color: #e4e7ec;
    color: #101828;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.um-tab-badge {
    background: #f2f4f7;
    color: #344054;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 600;
}

/* Cards */

.um-card {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: visible;
}

.um-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #101828;
}

.um-card-title-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.um-card-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.um-card-subtitle {
    font-size: 13px;
    font-weight: 400;
    color: #475467;
    margin: 2px 0 0;
}

.um-count-pill {
    background: #f9f5ff;
    border: 1px solid #e9d7fe;
    color: #6941c6;
    border-radius: 16px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
}

.um-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    gap: 4px 16px;
    padding: 14px 20px;
    border-top: 1px solid #eaecf0;
    font-size: 14px;
}

.um-row-label {
    color: #475467;
    flex: 0 0 auto;
}

.um-row-value {
    color: #101828;
    font-weight: 400;
    text-align: right;

    flex: 1 1 0;
    min-width: min-content;

    overflow-wrap: break-word;
}

.um-row-value-strong { font-weight: 600; }

/* Badges */

/* Same rounded-rectangle shape as .um-role-badge, not a capsule. */
.um-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;

    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
}

.um-badge-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

/* Empty / loading states */

.um-empty {
    padding: 48px 20px;
    text-align: center;
    color: #475467;
}

.um-empty i {
    font-size: 28px;
    color: #98a2b3;
    display: block;
    margin-bottom: 12px;
}

.um-empty-title {
    font-weight: 600;
    color: #101828;
    margin: 0 0 4px;
}

.um-loading {
    padding: 48px 20px;
    text-align: center;
    color: #475467;
}

/* Buttons */

.um-btn {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
}

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

.um-btn-primary { background: #0f4d47; color: #fff; }
.um-btn-primary:hover:not(:disabled) { background: #0c3d38; }

.um-btn-secondary { background: #fff; color: #344054; border-color: #d0d5dd; }
.um-btn-secondary:hover:not(:disabled) { background: #f9fafb; }

.um-btn-danger { background: #d92d20; color: #fff; }
.um-btn-danger:hover:not(:disabled) { background: #b42318; }

.um-btn-outline-danger {
    background: #fff;
    color: #b42318;
    border-color: #fda29b;
}

.um-btn-outline-danger:hover:not(:disabled) { background: #fff5f5; }

.um-btn-link {
    background: none;
    border: none;
    padding: 0;
    color: #b42318;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.um-btn-link:hover { text-decoration: underline; }

.um-btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

/* Forms */

.um-field { margin-bottom: 16px; }

.um-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #344054;
}

.um-req { color: #d92d20; }

.um-input,
.um-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #101828;
    background: #fff;
}

.um-input::placeholder {
    color: #667085;
    opacity: 1;
}

.um-input:disabled,
.um-select:disabled {
    background: #f9fafb;
    color: #667085;
    cursor: not-allowed;
}

.um-input:focus,
.um-select:focus {
    outline: none;
    border-color: #0f4d47;
    box-shadow: 0 0 0 3px rgba(15, 77, 71, 0.1);
}

.um-input-error { border-color: #fda29b; }

input.um-input.valid.modified,
select.um-select.valid.modified,
textarea.um-input.valid.modified {
    outline: none;
}

input.um-input.invalid,
select.um-select.invalid,
textarea.um-input.invalid {
    outline: none;
    border-color: #fda29b;
}

input.um-input.invalid:focus,
select.um-select.invalid:focus,
textarea.um-input.invalid:focus {
    border-color: #d92d20;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.10);
}

.um-field-error {
    margin: 6px 0 0;
    font-size: 12px;
    color: #b42318;
}

.um-field-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: #475467;
}

.um-input-wrap {
    position: relative;
}

.um-input-alert {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: flex;

    pointer-events: none;
}

.um-input-has-alert {
    padding-right: 38px;
}

.um-error-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #f1aeae;
    border-radius: 8px;
    background: #fdecec;
    font-size: 13px;
    line-height: 1.45;
    color: #cc2e2e;
}

.um-banner-icon {
    flex: 0 0 auto;
    margin-top: 1px;
}

.um-field-row {
    display: flex;
    gap: 12px;
}

.um-field-row > * { flex: 1 1 0; min-width: 0; }

.um-notice {
    padding: 12px 14px;
    margin-bottom: 20px;
    background: #f5f8ff;
    border: 1px solid #d1e0ff;
    border-radius: 8px;
    font-size: 13px;
    color: #363f72;
}

/* Modals */

.um-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 24, 40, 0.5);
    overflow-y: auto;
}

.um-modal {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08);
}

.um-modal-wide { max-width: 620px; }

/* Header row with the × close button, divided from the body below. */
.um-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: -4px 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eaecf0;
}

.um-modal-header .um-modal-title { margin: 0; }

.um-modal-close {
    border: none;
    background: none;
    color: #98a2b3;
    cursor: pointer;
    padding: 0;
    font-size: 13px;
    line-height: 24px;
    flex: 0 0 auto;
}

.um-modal-close:hover { color: #475467; }

.um-modal-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #101828;
}

.um-alert-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: #fef3f2;
    border: 1px solid #fda29b;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #b42318;
    line-height: 1.45;
}

.um-alert-error i {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1.4;
}

.um-optional {
    font-weight: 400;
    color: #667085;
}

.um-modal-subtitle {
    margin: 0 0 20px;
    font-size: 13px;
    color: #475467;
}

.um-modal-body {
    margin: 0 0 24px;
    font-size: 14px;
    color: #475467;
    line-height: 1.5;
}

.um-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.um-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin: 20px -24px -24px;
    padding: 16px 24px;
    border-top: 1px solid #eaecf0;
}

.um-modal-note {
    margin-top: 0;
    margin-bottom: 0;
}

/* Permission dropdown */

.um-perm-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    min-height: 56px;
}

.um-perm-trigger-placeholder {
    color: #667085;
    font-weight: 600;
}

.um-perm-trigger-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.um-perm-trigger-name {
    font-size: 14px;
    font-weight: 600;
    color: #101828;
}

.um-perm-trigger-desc {
    font-size: 12px;
    font-weight: 400;
    color: #475467;
}

/* Anchor for the overlaid option list. */
.um-perm-field { position: relative; }

.um-perm-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1300;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.12), 0 4px 6px -2px rgba(16, 24, 40, 0.06);
}

.um-perm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1290;
    background: transparent;
}

/* Trigger picks up the focus ring while the list is open. */
.um-perm-trigger-open {
    border-color: #0f4d47;
    box-shadow: 0 0 0 3px rgba(15, 77, 71, 0.10);
}

.um-perm-trigger-chevron {
    flex: 0 0 auto;
    color: #667085;
    font-size: 12px;
}

.um-perm-option {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-bottom: 1px solid #f2f4f7;
    background: #fff;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.um-perm-option:last-child { border-bottom: none; }
.um-perm-option:hover:not(:disabled) { background: #f9fafb; }

.um-perm-option-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.um-perm-option-selected {
    background: #f5f8ff;
    box-shadow: inset 3px 0 0 #0f4d47;
}

.um-perm-option-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.um-perm-option-name {
    font-size: 14px;
    font-weight: 600;
    color: #101828;
}

.um-perm-badge {
    background: #fafafa;
    border: 1px solid #e9eaeb;
    color: #414651;
    border-radius: 6px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
}

.um-perm-badge-seats {
    background: #fffaeb;
    border-color: #fedf89;
    color: #b54708;
}

/* Tick on the right of the chosen option. */
.um-perm-option-check {
    margin-left: auto;
    flex: 0 0 auto;
    color: #0f4d47;
    font-size: 13px;
}

.um-perm-option-desc {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #475467;
}

.um-join-page {
    max-width: 720px;
    padding-top: 48px;
}

.um-join-heading {
    text-align: center;
    margin-bottom: 20px;
}

.um-join-title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 600;
    color: #101828;
}

.um-join-subtitle {
    margin: 0;
    font-size: 13px;
    color: #475467;
}

.um-join-card {
    max-width: 420px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.um-join-card-center { text-align: center; }

.um-join-card-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: #101828;
}

.um-join-card-subtitle {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.5;
    color: #475467;
}

.um-join-icon-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #F0FDFA;
}

.um-join-icon-glyph {
    width: 25px;
    height: 22px;
    display: block;

}

.um-join-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
}

/* Organisation card on the review step. */
.um-join-org {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: #f9fafb;
    border: 1px solid #eaecf0;
    border-radius: 8px;
}

.um-join-org-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #0f4d47;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.um-join-org-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.um-join-org-name {
    font-size: 14px;
    font-weight: 600;
    color: #101828;
}

.um-join-org-meta {
    margin-top: 2px;
    font-size: 13px;
    color: #475467;
}

.um-join-org-role { margin-left: auto; }

.um-join-prompt {
    margin: 0 0 12px;
    text-align: left;
    font-size: 13px;
    line-height: 1.5;
    color: #344054;
}

.um-join-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    margin-bottom: 20px;
    background: #e7f1ff;
    border-color: #cfe2ff;
    color: #052c65;
}

.um-join-notice .um-notice-icon {
    flex: 0 0 16px;
    margin-top: 2px;
}

.um-join-notice strong { color: #052c65; }

/* Single centred action, for the joined step. */
.um-join-single-action {
    display: flex;
    justify-content: center;
}

.um-invite-banner {
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    background: #E7F1FF;
    border: 1px solid #9EC5FE;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
    font-family: 'Roboto', 'Open Sans', sans-serif;
    color: #084298;
}

.um-invite-banner-title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: #084298;
}

.um-invite-banner-body {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #084298;
}

.um-invite-banner-body strong { color: #084298; }

.um-invite-banner-expiry {
    margin: 0 0 12px;
    font-size: 12px;
    color: #084298;
}

.um-invite-banner-expiry strong { font-weight: 600; }

.um-invite-banner-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.um-invite-banner-actions .um-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
}

.um-dd { position: relative; }

.um-dd-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    cursor: pointer;
}

.um-dd-trigger:disabled {
    background: #f9fafb;
    color: #667085;
    cursor: not-allowed;
}

.um-dd-trigger-open {
    border-color: #0f4d47;
    box-shadow: 0 0 0 3px rgba(15, 77, 71, 0.10);
}

.um-dd-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.um-dd-placeholder { color: #667085; }

.um-dd-chevron {
    flex: 0 0 auto;
    color: #667085;
    font-size: 12px;
}

.um-dd-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1290;
    background: transparent;
}

/* Overlaid so opening the list never changes the card's height. */
.um-dd-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1300;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.12), 0 4px 6px -2px rgba(16, 24, 40, 0.06);
}

.um-dd-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: #101828;
    text-align: left;
    cursor: pointer;
}

.um-dd-option:hover:not(:disabled) { background: #f9fafb; }

.um-dd-option-selected { background: #f9fafb; }

.um-dd-option-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.um-dd-option-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.um-dd-option-check {
    margin-left: auto;
    flex: 0 0 auto;
    color: #0f4d47;
    font-size: 14px;
}

.um-dd-filter .um-dd-trigger { width: 100%; }

.um-dd-filter .um-dd-placeholder { color: #101828; }

.um-dd-filter .um-dd-list {
    top: calc(100% + 8px);
    right: auto;
    min-width: 240px;
    padding: 6px 0;
}

.um-dd-filter .um-dd-option {
    padding: 9px 20px;
    font-size: 15px;
}

/* The design marks the active filter with the tick alone. */
.um-dd-filter .um-dd-option-selected { background: #fff; }

.um-dd-filter .um-dd-option-selected:hover { background: #f9fafb; }

.um-dd-filter .um-dd-option-check {
    color: #1570ef;
    font-size: 16px;
}

/* Remove member modal */

.um-member-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: #F8F9FA;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
}

.um-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #f4f3ff;
    color: #5925dc;
    font-size: 14px;
    font-weight: 600;
}

.um-member-card-text { display: flex; flex-direction: column; min-width: 0; }

.um-member-card-name {
    font-size: 14px;
    font-weight: 600;
    color: #667085;
}

.um-member-card-email {
    font-size: 13px;
    color: #475467;
    overflow: hidden;
    text-overflow: ellipsis;
}

.um-warning-panel {
    padding: 16px;
    margin-bottom: 20px;
    background: #f9fafb;
    border: 1px solid #eaecf0;
    border-radius: 8px;
}

.um-warning-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #101828;
}

.um-warning-panel ul {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.5;
    color: #475467;
}

.um-warning-panel li { margin-bottom: 4px; }
.um-warning-panel li:last-child { margin-bottom: 0; }

.um-confirm-name {
    color: #495057;
    font-weight: 600;
}

.um-modal-remove .um-modal-header {
    margin: -24px -24px 20px;
    padding: 20px 24px;
}

.um-modal-remove .um-modal-title { font-size: 20px; }

.um-modal-remove .um-modal-body {
    margin-bottom: 20px;
    font-size: 15px;
    color: #344054;
}

.um-modal-remove .um-member-card {
    padding: 16px;
    background: #f9fafb;
    border-color: #eaecf0;
}

.um-modal-remove .um-avatar {
    width: 56px;
    height: 56px;
    font-size: 18px;
}

.um-modal-remove .um-member-card-name { font-size: 16px; }

.um-modal-remove .um-member-card-email { font-size: 15px; }

/* Update Profile slide-over */

.um-slideover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(16, 24, 40, 0.5);
}

.um-slideover {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -8px 0 24px rgba(16, 24, 40, 0.12);
    animation: um-slide-in 0.25s ease;
}

@keyframes um-slide-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.um-slideover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid #eaecf0;
}

.um-slideover-header .um-modal-title { margin: 0; }

.um-slideover-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.um-slideover-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 24px;
}

.um-slideover-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #eaecf0;
    background: #fff;
}

/* Kebab row menu */

.um-kebab {
    position: relative;
    display: inline-block;
}

.um-kebab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: none;
    color: #667085;
    cursor: pointer;
}

.um-kebab-btn:hover { background: #f2f4f7; color: #344054; }

.um-kebab-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: transparent;
}

.um-kebab-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1001;
    min-width: 200px;
    padding: 4px;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
}

.um-kebab-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background: none;
    color: #414651;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.um-kebab-item:hover { background: #fafafa; }

.um-kebab-item .um-icon {
    flex: 0 0 16px;
    color: #a4a7ae;
}

.um-kebab-item-danger { color: #b42318; }
.um-kebab-item-danger .um-icon { color: #d92d20; }
.um-kebab-item-danger:hover { background: #fff5f5; }

.um-kebab-divider {
    height: 1px;
    margin: 4px -4px;
    background: #e9eaeb;
}

/* Toast */

.um-toast {
    position: fixed;
    top: 84px;
    right: 24px;

    z-index: 1400;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 360px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    box-shadow: 0 8px 16px -4px rgba(16, 24, 40, 0.10), 0 4px 6px -2px rgba(16, 24, 40, 0.04);
}

/* Icon sits in a tinted ring, green for success and red for error. */
.um-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: 11px;
}

.um-toast-success .um-toast-icon { color: #17b26a; background: #ecfdf3; }
.um-toast-error .um-toast-icon { color: #d92d20; background: #fef3f2; }

.um-toast-body { flex: 1 1 auto; min-width: 0; }

.um-toast-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #101828;
}

.um-toast-message {
    margin: 2px 0 0;
    font-size: 12px;
    color: #475467;
    line-height: 1.5;
}

.um-toast-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}

.um-toast-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: #0f4d47;
    font-family: inherit;
    cursor: pointer;
}

.um-toast-action:hover { text-decoration: underline; }

.um-toast-action-muted { color: #475467; }

.um-toast-close {
    border: none;
    background: none;
    color: #98a2b3;
    cursor: pointer;
    padding: 0;
    font-size: 11px;
    line-height: 20px;
    flex: 0 0 auto;
}

.um-toast-close:hover { color: #475467; }

/* Table toolbar (search + role filter) */

.um-card-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.um-search {
    position: relative;
    flex: 0 1 260px;
    min-width: 140px;
}

.um-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #667085;
    font-size: 14px;
    pointer-events: none;
}

.um-search-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #101828;
}

.um-search-input:focus {
    outline: none;
    border-color: #0f4d47;
    box-shadow: 0 0 0 3px rgba(15, 77, 71, 0.1);
}

.um-role-filter {
    width: auto;
    min-width: 130px;
    flex: 0 0 auto;
}

/* Tables */

.um-table-wrap {
    width: 100%;
    overflow: visible;
    border-top: 1px solid #eaecf0;
}

.um-table-flush {
    border-top: none;
}

.um-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

@media (max-width: 1024px) {
    .um-table-wrap { overflow-x: auto; }
}

.um-table th {
    text-align: left;
    padding: 12px 20px;
    background: transparent;
    border-top: none;
    border-bottom: 1px solid #eaecf0;
    font-size: 13px;
    font-weight: 700;
    color: #101828;
    white-space: nowrap;
}

.um-table td {
    padding: 14px 20px;
    border-bottom: 1px solid #eaecf0;
    vertical-align: middle;
}

.um-table tbody tr:last-child td { border-bottom: none; }

.um-table-row { cursor: pointer; }
.um-table-row:hover { background: #f9fafb; }

.um-cell-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #101828;
    font-weight: 600;
    white-space: nowrap;
}

.um-cell-secondary {
    color: #475467;
    font-size: 13px;
    white-space: nowrap;
}

.um-cell-actions {
    text-align: right;
    width: 1%;
}

.um-you-pill {
    background: #f2f4f7;
    color: #475467;
    border-radius: 10px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 600;
}

.um-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    white-space: nowrap;
}

.um-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Pager */

.um-pager {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 20px;
    border-top: 1px solid #eaecf0;
    font-size: 13px;
    color: #475467;
}

.um-pager-total { flex: 0 0 auto; }

.um-pager-pages {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.um-pager-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: #475467;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.um-pager-btn:hover:not(:disabled):not(.um-pager-btn-current) { background: #f2f4f7; }

.um-pager-btn:disabled {
    color: #d0d5dd;
    cursor: not-allowed;
}

.um-pager-btn-current {
    background: #f9fafb;
    border-color: #d0d5dd;
    color: #101828;
    font-weight: 600;
}

.um-pager-gap {
    min-width: 20px;
    text-align: center;
    color: #98a2b3;
}

.um-pager-size {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}

.um-pager-size label { white-space: nowrap; }

.um-pager-size .um-select {
    width: auto;
    min-width: 72px;
    padding: 6px 10px;
    font-size: 13px;
}

/* User Profile */

.um-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #475467;
}

.um-breadcrumb a { color: #475467; text-decoration: none; }
.um-breadcrumb a:hover { text-decoration: underline; }
.um-breadcrumb i { font-size: 10px; color: #98a2b3; }

.um-breadcrumb-current {
    background: #f2f4f7;
    border-radius: 6px;
    padding: 2px 8px;
    color: #344054;
    font-weight: 500;
}

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

.um-profile-sidebar { padding: 24px; }

.um-profile-identity {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #eaecf0;
}

.um-avatar-lg {
    width: 56px;
    height: 56px;
    font-size: 18px;
    margin-bottom: 12px;
    background: #f2f4f7;
    color: #475467;
}

.um-profile-name {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
    color: #101828;
}

.um-profile-role-text {
    margin: 0 0 6px;
    font-size: 13px;
    color: #475467;
}

.um-profile-meta {
    margin: 0;
    font-size: 12px;
    color: #667085;
}

.um-profile-status { margin-top: 12px; }

.um-profile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
}

.um-profile-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.um-profile-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.um-profile-main .um-card { margin-bottom: 0; }

.um-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding: 20px;
    border-top: 1px solid #eaecf0;
}

.um-detail-full { grid-column: 1 / -1; }

.um-detail {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.um-detail-label {
    font-size: 12px;
    color: #667085;
}

.um-detail-value {
    font-size: 14px;
    color: #101828;
    overflow-wrap: anywhere;
}

.um-inline-edit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    color: #475467;
    font-family: inherit;
}

.um-inline-edit:hover { color: #0f4d47; }

/* Removal confirmation screen */
.um-removed-card {
    padding: 40px 24px;
    text-align: center;
}

.um-removed-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
}

    .um-removed-icon .um-toast-figure {
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        margin: 0;
    }

.um-removed-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #101828;
}

.um-removed-body {
    margin: 0 0 20px;
    font-size: 13px;
    color: #475467;
    line-height: 1.6;
}

.um-removed-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.um-removed-actions .um-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Remove from organization panel */
.um-danger-panel {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding: 16px 20px;
    background: #fffbfa;
    border: 1px solid #fda29b;
    border-radius: 8px;
}

.um-danger-text { flex: 1 1 auto; min-width: 0; }

.um-danger-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: #b42318;
}

.um-danger-body {
    margin: 0;
    font-size: 13px;
    color: #b42318;
}

.um-danger-action { flex: 0 0 auto; }

/* Responsive */

/* Tablet: profile collapses to a single column (design template). */
@media (max-width: 1024px) {
    .um-profile-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
    .um-card-header-right {
        margin-left: 0;
        width: 100%;
    }

    .um-card-tools { width: 100%; }
    .um-search { flex: 1 1 auto; }
}

@media (max-width: 780px) {
    .um-pager { justify-content: center; }
    .um-pager-size { margin-left: 0; }
}

@media (max-width: 640px) {
    .um-page { padding: 20px 16px 32px; }

    .um-header {
        flex-direction: column;
        align-items: stretch;
    }

    .um-invite-btn { justify-content: center; }

    .um-tabs {
        display: flex;
        width: 100%;
        overflow-x: auto;
    }

    .um-card-header { padding: 14px 16px; }

    .um-row {
        padding: 12px 16px;
        gap: 4px 12px;
    }

    .um-row-stack-sm {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .um-row-stack-sm .um-row-value {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    .um-field-row { flex-direction: column; gap: 0; }

    .um-field-row.um-field-row-inline {
        flex-direction: row;
        gap: 12px;
    }

    .um-field-row-inline > :first-child { flex: 2 1 0; }
    .um-field-row-inline > :last-child { flex: 1 1 0; }

    .um-modal-actions .um-btn { flex: 1 1 auto; }

    .um-slideover { max-width: none; }
    .um-slideover-footer .um-btn { flex: 1 1 auto; }

    .um-detail-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .um-danger-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .um-danger-action { width: 100%; }

}

@media (max-width: 420px) {
    .um-row {
        padding: 12px 14px;
        gap: 4px 8px;
    }
}

@media (max-width: 1024px) {
    .um-card-wide {
        width: max-content;
        min-width: 100%;
        max-width: none;
    }

    .um-card-wide .um-table-wrap { overflow: visible; }

    .um-card-wide .um-table {
        width: max-content;
        min-width: 100%;
    }

    .um-card-wide .um-card-header-right {
        width: auto;
        margin-left: auto;
    }

    .um-card-wide .um-card-tools { width: auto; }
    .um-card-wide .um-search { flex: 0 1 260px; }

    .um-card-wide .um-pager {
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    .um-card-wide .um-pager-size { margin-left: auto; }
}

/* Sortable table headers */

.um-th-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.um-th-sort:hover { color: #101828; }
.um-th-sort:focus-visible { outline: 2px solid #0f4d47; outline-offset: 2px; border-radius: 4px; }

.um-th-sort i {
    font-size: 11px;
    color: #98a2b3;
}

/* Permission pill */

.um-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
}

/* Administrator + Manager */
.um-role-blue {
    background: #f0f9ff;
    border-color: #b9e6fe;
    color: #026aa2;
}

/* Standard */
.um-role-purple {
    background: #eef4ff;
    border-color: #c7d7fe;
    color: #3538cd;
}

/* Viewer */
.um-role-grey {
    background: #fafafa;
    border-color: #e9eaeb;
    color: #414651;
}

.um-sort-icon {
    flex: 0 0 auto;
    display: block;
}

.um-cell-invited-by {
    color: #344054;
    font-size: 14px;
    white-space: nowrap;
}

.um-table-flush th {
    padding-top: 22px;
    padding-bottom: 10px;
}

.um-btn-with-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.um-spinner {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: um-spin 0.6s linear infinite;
}

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

/* Bolded name inside modal body copy. */
.um-emphasis {
    color: #101828;
    font-weight: 600;
}

.um-modal-compact .um-modal-body {
    margin-bottom: 14px;
}

.um-modal-compact .um-modal-footer {
    margin-top: 0;
    padding: 12px 24px;
}

.um-modal-compact .um-btn {
    padding: 7px 14px;
    font-size: 13px;
    line-height: 18px;
}

.um-modal-compact .um-spinner {
    width: 13px;
    height: 13px;
}

.um-toast-figure {
    flex: 0 0 38px;
    display: block;
    margin-top: -2px;
}

.um-join-card-center .um-toast-figure {
    margin: 0 auto 16px;
}

.um-toast { max-width: min(400px, calc(100vw - 32px)); padding: 14px 16px; gap: 12px; }
.um-toast-title { font-size: 14px; }
.um-toast-message { font-size: 13px; }
.um-toast-action { font-size: 13px; }

.um-btn-inert,
.um-btn-inert:disabled,
.um-btn-inert:hover:not(:disabled) {
    background: #f8f9fa;
    border-color: #e9eaeb;
    color: #a4a7ae;
    opacity: 1;
}

.um-member-card .um-avatar {
    background: #e9eaeb;
    color: #717680;
}

.um-member-card-name {
    color: #101828;
}

.um-profile-action .um-icon {
    flex: 0 0 16px;
    color: currentColor;
}

/* Inert sidebar buttons keep their icon muted with the label. */
.um-btn-inert .um-icon { color: #a4a7ae; }

.um-caret-group {
    display: flex;
    flex-direction: column;
    margin-top: 3px;
}

.um-caret-group i {
    display: block;
    font-size: 11px;
    line-height: 1;
    color: #ADB5BD;
}

.um-caret-group i:nth-child(1) {
    margin-bottom: -4px;
}