/* AMT Portal customer UI (Stage 1). Small scoped CSS on top of MudBlazor: it only reproduces the approved mockups where MudBlazor
   configuration alone is not enough. Colours come from the MudBlazor palette variables, so light/dark needs no second stylesheet. */

.cust-loading,
.cust-center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
    width: 100%;
}

.cust-loading { min-height: 100vh; }

/* ---------- app bar ---------- */
.cust-appbar .mud-toolbar { gap: 8px; }

.cust-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.cust-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.cust-brand-title {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.cust-drawer-toggle { display: none !important; }

/* ---------- Organization mark ---------- */
.cust-org-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.cust-org-mark-sm { width: 32px; height: 32px; }
.cust-org-mark-md { width: 44px; height: 44px; border-radius: 10px; }
.cust-org-mark .mud-icon-root { width: 58%; height: 58%; }

/* ---------- Organization switcher ---------- */
.cust-org-switcher-host { display: inline-flex; }

.cust-org-switcher {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border: 0;
    border-radius: 24px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.cust-org-switcher:hover,
.cust-org-switcher:focus-visible { background: rgba(255, 255, 255, .12); }
.cust-org-switcher:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.cust-org-switcher .cust-org-mark { background-color: rgba(255, 255, 255, .18); color: inherit; }

.cust-org-switcher-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    min-width: 0;
}

.cust-org-switcher-title {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 600;
}

.cust-org-switcher-text small { font-size: .7rem; opacity: .82; }

.cust-org-menu { min-width: 320px; max-width: calc(100vw - 16px); }
.cust-org-menu .mud-list { padding: 0; }

.cust-menu-section-label {
    padding: 12px 18px 6px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* Only the Organization list scrolls; the actions below the divider stay reachable however many Organizations there are. */
.cust-org-list { max-height: 50vh; overflow-y: auto; }

/* MudBlazor wraps a menu item's content in a block-level <p class="mud-menu-item-text">; lay the content out as a row there
   (mark/icon, text, check) rather than on the item root, and drop MudBlazor's text-only 36px side margins. */
.cust-org-menu .cust-org-item.mud-menu-item .mud-menu-item-text,
.cust-org-menu .cust-org-action.mud-menu-item .mud-menu-item-text {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
}

.cust-org-item.active { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.cust-org-item.active .name { color: var(--mud-palette-primary); font-weight: 700; }

.cust-org-menu-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cust-org-menu-text .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-org-menu-text .sub { font-size: .72rem; color: var(--mud-palette-text-secondary); }

.cust-org-action { color: var(--mud-palette-primary); font-weight: 700; }
.cust-org-leave { color: var(--mud-palette-error); }
.cust-org-leave .sub { color: var(--mud-palette-text-secondary); font-weight: 400; }

/* ---------- account pill / menu ---------- */
.cust-account-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 8px 5px 6px;
    border: 0;
    border-radius: 24px;
    background: rgba(255, 255, 255, .14);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.cust-account-pill:hover { background: rgba(255, 255, 255, .2); }
.cust-account-pill:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cust-account-avatar { background: #fff !important; color: var(--mud-palette-primary) !important; font-weight: 700; }

.cust-account-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.cust-account-copy strong { font-size: .85rem; font-weight: 600; }
.cust-account-copy small { font-size: .7rem; opacity: .8; }

.cust-account-menu { min-width: 260px; }

.cust-account-menu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
}

.cust-danger { color: var(--mud-palette-error); }

/* ---------- drawer, main area ---------- */
.cust-drawer .mud-nav-link { border-radius: 10px; margin: 2px 8px; }
.cust-main { padding: 28px 32px; }

@media (max-width: 599.98px) {
    .cust-drawer-toggle { display: inline-flex !important; }
    .cust-account-copy,
    .cust-account-pill > .mud-icon-root { display: none; }
    .cust-account-pill { padding: 4px; background: transparent; }
    .cust-org-switcher-title { max-width: 92px; font-size: .875rem; }
    .cust-appbar .mud-toolbar { padding-left: 8px; padding-right: 8px; min-width: 0; }
    .cust-brand-title { font-size: .9rem; }
    .cust-logo { width: 28px; height: 28px; }
    .cust-main { padding: 16px 14px; }

    .cust-org-menu { min-width: 0; width: calc(100vw - 16px); }
}

/* ---------- pages ---------- */
.cust-page { max-width: 1200px; }

.cust-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.cust-page-title { font-weight: 700; font-size: 1.5rem; }
.cust-home-card h1 { font-size: 1.75rem; font-weight: 600; }

.cust-category { margin-bottom: 30px; }
.cust-category:last-child { margin-bottom: 0; }

.cust-category-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cust-category-head h2 { font-size: 1rem; font-weight: 800; margin: 0; }
.cust-count { font-size: .75rem; color: var(--mud-palette-text-secondary); }

.cust-org-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.cust-org-card { padding: 16px 18px; }
.cust-org-card.pending { border: 1.5px dashed var(--mud-palette-lines-inputs); box-shadow: none; background: transparent; }
.cust-org-card.disabled { opacity: .62; }
.cust-org-card-row { display: flex; align-items: flex-start; gap: 14px; }
.cust-org-card-body { flex: 1; min-width: 0; }
.cust-org-name { font-weight: 700; font-size: .95rem; margin-bottom: 3px; overflow-wrap: anywhere; }
.cust-org-meta { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.cust-org-chips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.cust-org-actions { display: flex; gap: 8px; margin-top: 14px; }
.cust-org-actions .mud-button-root { flex: 1; }

.cust-org-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: .75rem;
    color: var(--mud-palette-error);
}

.cust-suspended-banner { margin-bottom: 16px; }
.cust-home-card { padding: 28px; max-width: 760px; }
.cust-home-org { margin: 4px 0 12px; }

/* An unbroken long Organization or user name must wrap inside the page instead of widening it on a phone. */
.cust-page, .cust-home-card, .cust-page-head > div { min-width: 0; overflow-wrap: anywhere; }
.cust-create-tabs { max-width: 100%; min-width: 0; }

@media (max-width: 599.98px) {
    .cust-org-grid { grid-template-columns: 1fr; gap: 10px; }
    .cust-home-card { padding: 20px 16px; }
    .cust-page-title { font-size: 1.2rem; }
    .cust-home-card h1 { font-size: 1.4rem; }
}

/* ---------- Create Organization dialog ---------- */
.cust-create-dialog.mud-dialog { width: 100%; max-width: 640px; }
.cust-create-dialog .mud-dialog-content { max-height: 70vh; overflow-y: auto; }
.cust-create-banner { margin-bottom: 16px; }
.cust-create-tabs .mud-tab { text-transform: none; }

/* An unresolved required field must be visible even while another tab is active (the validation-error mockup). */
.cust-create-tabs .mud-tab.cust-tab-error { color: var(--mud-palette-error); }
.cust-create-tabs .mud-tab.cust-tab-error .mud-badge-root { margin-left: 4px; }

@media (max-width: 599.98px) {
    .cust-create-dialog.mud-dialog {
        max-width: none;
        width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;
    }

    .cust-create-dialog .mud-dialog-content { max-height: none; flex: 1; }
}

/* ---------- Organization invitations (Stage 2) ---------- */
/* Public invitation pages reuse the Portal's public card (admin-auth-card); these only add what the invitation screens need. */
.cust-invite-card { max-width: 520px; }

.cust-invite-details {
    display: grid;
    gap: 8px;
    margin: 18px 0;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

.cust-invite-details > div { display: flex; justify-content: space-between; gap: 12px; font-size: .875rem; }
.cust-invite-details span { color: var(--mud-palette-text-secondary); }
.cust-invite-details strong { text-align: right; overflow-wrap: anywhere; }

.cust-invite-helper { display: block; margin-top: 16px; text-align: center; }
.cust-invite-alert { margin: 16px 0; }

/* The email link's action=accept|decline is only a hint: it emphasizes a button, it never clicks it. */
.cust-invite-hinted { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent); }

.cust-invite-terms-row { display: flex; align-items: center; gap: 8px; }

/* The Terms HTML is sanitized on the server (small allowlist); the box only scrolls it and keeps it keyboard-reachable. */
.cust-invite-terms {
    max-height: 240px;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    font-size: .85rem;
    line-height: 1.5;
}

.cust-invite-terms:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.cust-invite-terms p { margin: 0 0 8px; }
.cust-invite-terms ul, .cust-invite-terms ol { margin: 0 0 8px; padding-left: 20px; }

.cust-invite-dialog.mud-dialog { width: 100%; max-width: 520px; }

@media (max-width: 599.98px) {
    .cust-invite-dialog.mud-dialog { max-width: none; }
    .cust-invite-details > div { flex-direction: column; gap: 2px; }
    .cust-invite-details strong { text-align: left; }
}

/* The Members / Invitations tab pair of the Owner page. */
.cust-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--mud-palette-divider);
    margin-bottom: 16px;
}

.cust-tab {
    padding: 12px 20px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: pointer;
}

.cust-tab:hover { color: var(--mud-palette-text-primary); }
.cust-tab.active { color: var(--mud-palette-primary); border-bottom-color: var(--mud-palette-primary); }
.cust-tab:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }

/* The Owner list has five data columns plus two row actions: tighter cell padding keeps it inside the content area at laptop widths. */
.cust-page .admin-data-table .mud-table-cell { padding: 10px 12px; }
.cust-page .admin-data-table .mud-table-head .mud-button-root { white-space: nowrap; padding-left: 4px; padding-right: 4px; }
.cust-page .admin-data-table .admin-actions-column .mud-button-root { white-space: nowrap; }

/* ---------- Organization settings (Stage 3) ---------- */
.cust-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 760px; }
.cust-settings-card { padding: 24px; min-width: 0; }

.cust-logo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
/* The remove button mirrors the profile's change button: the same small round button, in the bottom-left corner of the picture. */
.cust-logo-remove { position: absolute !important; left: -3px; bottom: -3px; }

.cust-logo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }

.cust-logo-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.cust-logo-preview .mud-icon-root { width: 46%; height: 46%; }

/* The Owner field and its Transfer button share one row: the button takes the outlined field's height (56px) and its 8px top offset so their edges line up. */
.cust-owner-row { display: flex; align-items: flex-start; gap: 12px; }
.cust-owner-row .mud-input-control { flex: 1; min-width: 0; }
.cust-owner-row > .mud-button-root { flex: none; height: 56px; margin-top: 8px; white-space: nowrap; }

.cust-settings-actions { display: flex; justify-content: flex-end; gap: 12px; }

.cust-danger-zone { border: 1px solid color-mix(in srgb, var(--mud-palette-error) 45%, transparent); }

.cust-danger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--mud-palette-divider);
}

.cust-danger-row:first-of-type { border-top: 0; }
.cust-danger-row > div { min-width: 0; }
.cust-danger-row > .mud-button-root { flex: none; }

/* Ownership chooser: scrolls when the member list is long. */
.cust-owner-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--mud-palette-divider); border-radius: 8px; padding: 4px 8px; }
.cust-owner-list .mud-radio-group { width: 100%; }
.cust-owner-option { width: 100%; margin: 0; padding: 6px 0; }
.cust-owner-option-text { display: flex; flex-direction: column; min-width: 0; }
.cust-owner-option-text .name { font-weight: 500; overflow-wrap: anywhere; }
.cust-owner-option-text .sub { font-size: .75rem; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }

@media (max-width: 599.98px) {
    .cust-settings-card { padding: 16px; }
    .cust-owner-row { flex-direction: column; align-items: stretch; gap: 4px; }
    .cust-owner-row > .mud-button-root { height: auto; margin-top: 0; }
    .cust-danger-row { flex-direction: column; align-items: stretch; }
}

/* Member row actions wrap instead of overflowing on narrow cards (long localized labels). */
.cust-member-actions { flex-wrap: wrap; }

/* ~320 px phones: the brand text yields so the Organization switcher and the account button stay inside the app bar. */
@media (max-width: 359.98px) {
    .cust-brand-title { display: none; }
    .cust-org-switcher-title { max-width: 64px; }
}

 
/* Members & Invitations: same behaviour as the administration lists - the page stays put and only the table body (desktop) or the card list
   (phones) scrolls. The main area is one viewport tall, its own padding (the app bar) included. */
@media (min-height: 560px) {
    .cust-main-content:has(.cust-fit) {
        height: 100vh;
        height: 100dvh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .cust-main-content > .cust-main:has(> .cust-fit) {
        flex: 1 1 auto;
        min-height: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .cust-main > .cust-fit {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .cust-fit > .cust-page-head,
    .cust-fit > .cust-tabs {
        flex: none;
    }

    .cust-fit-panel {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
}

/* Administration roles (0015.2): the same page that does not scroll as a whole - fixed header, tabs and footer, an independently scrolling panel - drawn inside the
   administration shell, whose main area is .admin-main-content > .admin-main-inner instead of the customer .cust-main-content > .cust-main. */
@media (min-height: 560px) {
    .admin-main-content:has(.admin-main-inner > .cust-fit) {
        height: 100vh;
        height: 100dvh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .admin-main-content > .admin-main-inner:has(> .cust-fit) {
        flex: 1 1 auto;
        min-height: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .admin-main-inner > .cust-fit {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
}

/* ---------- Organization roles (00012) ---------- */
.cust-roles-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 12px 0;
    flex: none;
}

.cust-roles-language { max-width: 280px; min-width: 200px; }

.cust-roles-mobile-controls { flex-direction: column; gap: 8px; margin-bottom: 8px; }

.cust-roles-placeholder {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 24px;
}

.cust-role-cell { min-width: 0; }
.cust-role-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.cust-role-description { display: block; overflow-wrap: anywhere; }

/* The small marker of a role name shown in another language than the selected one (never one chip per translation). */
.cust-role-lang {
    flex: none;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.4;
    padding: 0 6px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-secondary);
}

.cust-tab-issue { margin-left: 6px; vertical-align: middle; }

/* ---- Role tabs: the reviewed mockups use compact sentence-case tabs (not the all-caps tabs of Members / Invitations). ---- */
.cust-roles .cust-tabs { gap: 4px; margin-bottom: 18px; flex: none; }
.cust-roles .cust-tab {
    padding: 11px 16px 9px;
    border-bottom-width: 3px;
    text-transform: none;
    letter-spacing: 0;
    font-size: .875rem;
    font-weight: 600;
}
.cust-roles .cust-tab.active { color: var(--mud-palette-primary); }

/* ---- The create / edit form: back link, title and tabs above, the action bar below, only the content between them scrolls. ---- */
.cust-roles-back.mud-button-root {
    flex: none;
    align-self: flex-start;
    margin: 0 0 6px -10px;
    padding: 4px 10px;
    text-transform: none;
    font-size: .84rem;
    font-weight: 600;
}
.cust-roles-form-head { margin-bottom: 14px; }
.cust-roles-form-sub { margin-top: 4px; font-size: .84rem; }
.cust-roles-form-panel { min-height: 0; }
.cust-roles-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.cust-roles-general { padding: 4px 2px 16px; }

.cust-roles-form-actions {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 14px 20px;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    box-shadow: var(--mud-elevation-1);
}
.cust-roles-form-state { font-size: .78rem; color: var(--mud-palette-text-secondary); }
.cust-roles-form-buttons { display: flex; gap: 10px; margin-left: auto; }

/* ---- General tab: the General card and the Status card (two columns on a desktop, one on a phone). ---- */
.cust-roles-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 24px;
    align-items: start;
}
.cust-roles-section { padding: 20px; border-radius: 8px; min-width: 0; }
.cust-roles-section-title { font-size: .94rem; font-weight: 800; margin-bottom: 18px; }
/* The side column of the General tab: the status card and, on a Project role, the Usage card under it. */
.cust-roles-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
/* The Usage card of a Project role (00014): the two counts of real assignments, read-only. */
.cust-roles-usage { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 32px; margin-bottom: 12px; }
.cust-roles-usage-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cust-roles-usage-value { font-size: 1.625rem; font-weight: 800; line-height: 1; }
.cust-roles-usage-label { font-size: .8rem; font-weight: 600; }
.cust-roles-usage-help { color: var(--mud-palette-text-secondary); font-size: .78rem; line-height: 1.4; }

/* A field whose label sits on the top border, as in the mockups; the label may carry the language tag of the name. */
.cust-roles-field { position: relative; margin-bottom: 20px; }
.cust-roles-field-label {
    position: absolute;
    top: -9px;
    left: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    pointer-events: none;
}
.cust-roles-required { color: var(--mud-palette-error); text-decoration: none; }
.cust-roles-lang-tag {
    padding: 1px 6px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .05em;
}
.cust-roles-field .mud-input-control { margin-top: 0; }
.cust-roles-field .mud-input-outlined.mud-input-margin-dense > input.mud-input-root { padding: 14px; }
.cust-roles-helper { margin-top: 5px; padding: 0 2px; color: var(--mud-palette-text-secondary); font-size: .75rem; }
.cust-roles-counter { text-align: right; }
.cust-roles-name-note { margin: -8px 2px 22px; }
.cust-roles-add-language { margin: -2px 0 14px -6px; }
.cust-roles-add-language .mud-button-root { text-transform: none; font-weight: 600; }
.cust-roles-lang-item { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 180px; }
.cust-roles-lang-code { font-size: .72rem; color: var(--mud-palette-text-secondary); }

.cust-roles-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0; }
.cust-roles-status-copy { display: flex; flex-direction: column; gap: 3px; font-size: .84rem; min-width: 0; }
.cust-roles-status-copy > span { color: var(--mud-palette-text-secondary); font-size: .78rem; line-height: 1.35; }

/* ---- Permissions / Members pickers: fixed heading and search, two bordered panels (desktop) or one list (phone). ---- */
.cust-roles-picker { display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; min-height: 0; }
.cust-picker-heading { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.cust-picker-heading h2 { margin: 0; font-size: 1.125rem; font-weight: 700; }
.cust-picker-total { margin-left: auto; font-size: .75rem; color: var(--mud-palette-text-secondary); }
.cust-picker-note { flex-basis: 100%; font-size: .75rem; color: var(--mud-palette-text-secondary); }
.cust-picker-toolbar { flex: none; display: flex; align-items: center; gap: 16px; }
.cust-picker-search { flex: 1 1 auto; min-width: 0; margin: 0; }
/* The picker search sits on the page, not on a card: its border label must take the page colour (visible in the dark theme). */
.cust-picker-search .cust-roles-field-label { background: var(--mud-palette-background); }
.cust-picker-toolbar-row { display: flex; align-items: center; gap: 12px; }
.cust-picker-inactive { margin: 0; flex: none; white-space: nowrap; }
.cust-picker-filter { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .75rem; color: var(--mud-palette-text-primary); }
.cust-picker-filter .mud-select { flex: 0 0 132px; width: 132px; min-width: 0; }

.cust-picker-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; flex: 1 1 auto; min-height: 0; }
.cust-picker-single { grid-template-columns: minmax(0, 1fr); }
.cust-picker-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}
.cust-picker-panel-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mud-palette-divider);
}
.cust-picker-panel-head h3 { margin: 0; font-size: .875rem; font-weight: 700; }
.cust-picker-count {
    padding: 2px 10px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 20px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
    font-weight: 700;
}
.cust-picker-list { padding: 10px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.cust-picker-empty { padding: 32px 12px; text-align: center; font-size: .84rem; color: var(--mud-palette-text-secondary); }

.cust-picker-card {
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    background: var(--mud-palette-surface);
}
.cust-picker-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.cust-picker-card-title { display: flex; align-items: flex-start; flex: 1 1 auto; min-width: 0; }
.cust-picker-card h4 { margin: 0; min-width: 0; font-size: .8125rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.cust-picker-move.mud-button-root { flex: none; min-width: 0; height: 28px; padding: 0 10px; font-size: .6875rem; }
.cust-picker-description { margin: 5px 0 0; font-size: .75rem; line-height: 1.4; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.cust-picker-level { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .6875rem; color: var(--mud-palette-text-secondary); }
.cust-picker-level > span { flex: none; white-space: nowrap; }
.cust-picker-level-select { flex: 1 1 auto; min-width: 0; }
.cust-picker-level-select .mud-input-slot { font-size: .75rem; }
.cust-roles-level-item { display: inline-flex; align-items: center; gap: 8px; }
.cust-picker-toggle { flex: none; margin: -6px -8px -6px 0; }

/* Members: initials avatar, name, Active / Inactive status. */
.cust-picker-member { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; }
.cust-picker-member > .cust-picker-avatar { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.cust-picker-member > .cust-picker-card-top,
.cust-picker-member > .cust-picker-description { grid-column: 2; }
.cust-picker-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    font-size: .75rem;
    font-weight: 500;
}
.cust-picker-member h4 { flex: 1 1 auto; }
.cust-picker-status {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 20px;
    font-size: .625rem;
    font-weight: 700;
    white-space: nowrap;
}
.cust-picker-status .mud-icon-root { width: 13px; height: 13px; }
.cust-picker-status.active { background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); color: var(--mud-palette-success); }
.cust-picker-status.inactive { background: var(--mud-palette-background); border: 1px solid var(--mud-palette-divider); color: var(--mud-palette-text-secondary); }

@media (max-width: 599.98px) {
    .cust-roles-toolbar { flex-direction: column; align-items: stretch; }
    .cust-roles-language { max-width: none; width: 100%; }

    .cust-roles-form-sub { display: none; }
    .cust-roles-form-head { margin-bottom: 8px; }
    .cust-roles-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .cust-roles-side { gap: 16px; }
    .cust-roles-form-actions { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 14px; }
    .cust-roles-form-state { font-size: .72rem; }
    .cust-roles-form-buttons { margin-left: 0; }
    .cust-roles-form-buttons > .mud-button-root { flex: 1 1 0; white-space: nowrap; padding-left: 10px; padding-right: 10px; }

    /* Three tabs on a phone: share the width and wrap only between words, never inside one. */
    .cust-roles-formpage .cust-tabs .cust-tab {
        flex: 1 1 0;
        min-width: 0;
        padding: 9px 8px;
        font-size: .8125rem;
        text-align: center;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .cust-picker-toolbar { flex-wrap: wrap; gap: 10px; }
    .cust-picker-search { flex-basis: 100%; }
    /* Two rows on a phone: "Show inactive" above, then the "Show" label with its select filling the rest of the row. */
    .cust-picker-toolbar-row { width: 100%; flex-direction: column; align-items: stretch; gap: 6px; }
    .cust-picker-filter { width: 100%; white-space: nowrap; }
    .cust-picker-filter .mud-select { flex: 1 1 auto; width: auto; }
    .cust-picker-total { font-size: .6875rem; }
    .cust-picker-list { padding: 8px; }
}

/* ---- Roles list: the collapsible "Search & filters" panel, the heading with the counts and the shared names language (mockup 01 / 02). ---- */
.cust-roles-filter-panel.admin-filter-panel { padding: 0; margin-bottom: 18px; }
.cust-roles-filter-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
}
.cust-roles-filter-toggle > span { display: flex; align-items: center; gap: 9px; }
.cust-roles-filter-toggle .mud-icon-root { color: var(--mud-palette-text-secondary); }
.cust-roles-filter-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) 140px minmax(220px, 1.3fr) 160px auto;
    gap: 14px;
    align-items: start;
    padding: 4px 16px 16px;
}
.cust-roles-filter-cell { min-width: 0; }
/* The fields start 8px below their cell (room for the label on the border); the button is as tall as a field and lines up with it. */
.cust-roles-filter-clear.mud-button-root { align-self: start; height: 40px; margin-top: 8px; }
.cust-roles-dialog-fields { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }

.cust-roles-summary { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.cust-roles-summary h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.cust-roles-toolbar > .mud-select { flex: 0 0 300px; width: 300px; max-width: 100%; margin: 0 0 0 auto; }

.cust-roles-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cust-roles-card-top > .cust-role-cell { flex: 1 1 auto; }
.cust-roles-card-meta { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .75rem; color: var(--mud-palette-text-secondary); }
.cust-roles-card-meta-end { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }

@media (max-width: 599.98px) {
    .cust-roles-toolbar .cust-roles-summary { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
    .cust-roles-toolbar > .mud-select { flex: none; width: 100%; margin: 0; }
}

/* "Has permission" dropdown: its own search above a scrollable flat list (screen 02). */
.cust-roles-dd { position: relative; }
.cust-roles-dd-field, .cust-roles-dd-field input { cursor: pointer; }
.cust-roles-dd-panel { min-width: 320px; padding: 6px; background-color: var(--mud-palette-surface); color: var(--mud-palette-text-primary); }
.cust-roles-dd-search { padding: 4px 4px 10px; border-bottom: 1px solid var(--mud-palette-divider); }
.cust-roles-dd-options { max-height: 280px; overflow-y: auto; padding-top: 6px; }
/* On a phone it is low enough to open below its field inside the filter dialog (screen 08), like the mockup, instead of flipping up over the dialog. */
@media (max-width: 599.98px) {
    .cust-roles-dd-options { max-height: 240px; }
}

.cust-roles-dd-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cust-roles-dd-item:hover { background: var(--mud-palette-action-default-hover); }
.cust-roles-dd-item.selected { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); color: var(--mud-palette-primary); }
.cust-roles-dd-item:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }

/* The kind icon (OBJECT / ACTION) that precedes a permission name in the picker cards and the dropdown list (00013). */
.cust-roles-kind { flex: none; margin-right: 6px; color: var(--mud-palette-text-secondary); vertical-align: text-bottom; }
.cust-roles-card-title { display: flex; align-items: flex-start; }
.cust-roles-card-title > .cust-roles-kind { margin-top: 2px; }
.cust-roles-dd-item-text { display: inline-flex; align-items: center; gap: 0; overflow-wrap: anywhere; }

/* Role delete confirmation: the three actions stack full-width on a phone (mockup 03). */
@media (max-width: 599.98px) {
    .cust-role-delete-dialog .mud-dialog-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .cust-role-delete-dialog .mud-dialog-actions > .mud-button-root { width: 100%; margin: 0; }
}

/* A member picture inside the round avatar of the member picker. */
.cust-picker-avatar { overflow: hidden; }
.cust-picker-avatar > img { width: 100%; height: 100%; object-fit: cover; }

/* Unsaved changes dialog: the two actions stack full-width on a phone. */
@media (max-width: 599.98px) {
    .cust-role-unsaved-dialog .mud-dialog-actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
    .cust-role-unsaved-dialog .mud-dialog-actions > .mud-button-root { width: 100%; margin: 0; }
}