:root {
    --suite-bg: var(--cp-surface-page);
    --suite-panel: var(--cp-surface-raised);
    --suite-ink: var(--cp-text-primary);
    --suite-muted: var(--cp-text-secondary);
    --suite-line: var(--cp-border-subtle);
    --suite-blue: var(--cp-accent);
    --suite-blue-soft: var(--cp-accent-soft);
    --suite-mint: var(--cp-success);
    --suite-mint-soft: var(--cp-success-soft);
    --suite-amber: var(--cp-warning);
    --suite-amber-soft: var(--cp-warning-soft);
    --suite-red: var(--cp-danger);
    --suite-red-soft: var(--cp-danger-soft);
    --suite-violet: #6f52c7;
    --suite-shadow: var(--cp-shadow-md);
}

body {
    background: var(--suite-bg);
    color: var(--suite-ink);
}

.cp-account-frame {
    min-height: 100vh;
    background: var(--cp-surface-page);
}

.cp-account-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

    .cp-account-header .cp-brand {
        color: var(--suite-ink);
        text-decoration: none;
    }

.cp-account-workspace {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - 96px);
    padding: 10px 24px 48px;
}

    .cp-account-workspace > .cp-login-card {
        width: 100%;
        max-width: 400px;
        margin-block: auto;
        padding: clamp(24px, 4vw, 32px);
        border: 1px solid var(--cp-border-subtle);
        border-radius: var(--cp-radius-md);
        background: var(--cp-surface-raised);
        box-shadow: var(--cp-shadow-md);
        color: var(--cp-text-primary);
    }

    .cp-account-workspace > .cp-account-page {
        width: 100%;
    }

.cp-login-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: var(--cp-radius-sm);
    background: var(--cp-accent-soft);
    color: var(--cp-accent);
    font-size: 1rem;
}

.cp-login-eyebrow {
    margin: 18px 0 4px;
    color: var(--cp-text-muted);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.cp-login-card h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 750;
    letter-spacing: -.02em;
    color: var(--cp-text-primary);
}

.cp-login-intro {
    margin: 7px 0 22px;
    color: var(--cp-text-secondary);
    font-size: .8rem;
    line-height: 1.5;
}

.cp-login-form {
    display: grid;
    gap: 6px;
}

    .cp-login-form > label {
        margin-top: 6px;
        color: var(--cp-text-secondary);
        font-size: .72rem;
        font-weight: 700;
    }

.cp-password-field {
    position: relative;
}

    .cp-password-field input {
        padding-right: 38px !important;
    }

    .cp-password-field button {
        position: absolute;
        right: 3px;
        top: 3px;
        bottom: 3px;
        width: 30px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: calc(var(--cp-radius-sm) - 2px);
        background: transparent;
        color: var(--cp-text-muted);
        cursor: pointer;
        transition: background var(--cp-transition-fast), color var(--cp-transition-fast);
    }

        .cp-password-field button:hover {
            background: var(--cp-surface-hover);
            color: var(--cp-text-primary);
        }

        .cp-password-field button:focus-visible {
            outline: 0;
            box-shadow: var(--cp-focus-ring);
        }

.cp-login-form span {
    min-height: 0;
    color: var(--cp-danger);
    font-size: .68rem;
}

.cp-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 8px;
}

    .cp-login-options a {
        color: var(--cp-accent);
        font-size: .72rem;
        font-weight: 700;
        text-decoration: none;
    }

        .cp-login-options a:hover {
            text-decoration: underline;
        }

.cp-remember {
    display: flex !important;
    align-items: center;
    gap: 6px;
    color: var(--cp-text-secondary) !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
}

    .cp-remember input[type=checkbox] {
        appearance: auto !important;
        width: 14px !important;
        height: 14px !important;
        margin: 0 !important;
        min-width: 14px !important;
        accent-color: var(--cp-accent);
    }

.cp-login-submit, .cp-login-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    border-radius: var(--cp-radius-sm);
    padding: 9px 14px;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--cp-transition-fast), border-color var(--cp-transition-fast);
}

.cp-login-submit {
    border: 1px solid var(--cp-accent);
    background: var(--cp-accent);
    color: var(--cp-accent-contrast);
}

    .cp-login-submit:hover {
        border-color: var(--cp-accent-hover);
        background: var(--cp-accent-hover);
    }

.cp-login-cancel {
    margin-top: 6px;
    border: 1px solid var(--cp-border-strong);
    background: var(--cp-surface-raised);
    color: var(--cp-text-secondary);
}

    .cp-login-cancel:hover {
        background: var(--cp-surface-hover);
        color: var(--cp-text-primary);
    }

.cp-external-logins {
    display: grid;
    gap: 9px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--cp-border-subtle);
    text-align: center;
}

    .cp-external-logins > span {
        color: var(--cp-text-muted);
        font-size: .7rem;
    }

    .cp-external-logins form {
        display: flex;
        justify-content: center;
        gap: 7px;
        flex-wrap: wrap;
    }

    .cp-external-logins button {
        border: 1px solid var(--cp-border-strong);
        border-radius: var(--cp-radius-sm);
        padding: 7px 11px;
        background: var(--cp-surface-raised);
        color: var(--cp-text-secondary);
        font: inherit;
        font-size: .7rem;
        font-weight: 700;
        cursor: pointer;
        transition: background var(--cp-transition-fast), border-color var(--cp-transition-fast);
    }

        .cp-external-logins button:hover {
            background: var(--cp-surface-hover);
            border-color: var(--cp-border-strong);
            color: var(--cp-text-primary);
        }

.cp-login-alert {
    margin-bottom: 14px;
    border: 1px solid var(--cp-danger-border);
    border-radius: var(--cp-radius-sm);
    padding: 9px 11px;
    background: var(--cp-danger-soft);
    color: var(--cp-danger);
}

@media(max-width:520px) {
    .cp-login-card {
        padding: 27px 22px;
    }

    .cp-login-options {
        align-items: flex-start;
        flex-direction: column;
    }
}

.workspace-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.provision-tenant {
    position: relative;
}

    .provision-tenant summary {
        cursor: pointer;
        list-style: none;
        border: 1px solid var(--suite-blue);
        border-radius: 8px;
        padding: 9px 11px;
        background: var(--suite-blue);
        color: var(--cp-text-inverse);
        font-size: .7rem;
        font-weight: 740;
    }

        .provision-tenant summary::-webkit-details-marker {
            display: none;
        }

    .provision-tenant form {
        position: absolute;
        z-index: 4;
        right: 0;
        top: calc(100% + 8px);
        display: grid;
        gap: 10px;
        width: 290px;
        padding: 14px;
        border: 1px solid var(--suite-line);
        border-radius: 10px;
        background: var(--cp-surface-raised);
        box-shadow: var(--suite-shadow);
    }

    .provision-tenant label {
        display: grid;
        gap: 6px;
        color: var(--cp-text-muted);
        font-size: .68rem;
    }

    .provision-tenant input[type=text] {
        padding: 9px 10px;
        border: 1px solid var(--cp-border-subtle);
        border-radius: 8px;
        background: var(--cp-surface-raised);
        color: var(--suite-ink);
        font: inherit;
        font-size: .74rem;
    }

.product-checks {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
}

    .product-checks label {
        display: flex;
        align-items: center;
        gap: 5px;
    }

.access-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 17px;
    padding: 17px 19px;
    border: 1px solid var(--suite-line);
    border-radius: 14px;
    background: var(--cp-surface-raised);
    box-shadow: var(--suite-shadow);
}

    .access-context > div {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .access-context h2 {
        margin: 2px 0;
        color: var(--suite-ink);
        font-size: 1rem;
    }

    .access-context span:not(.access-context-icon) {
        color: var(--suite-muted);
        font-size: .68rem;
    }

.access-context-icon {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 10px;
    background: var(--suite-blue-soft);
    color: var(--suite-blue);
}

.access-context > a {
    color: var(--suite-blue);
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none;
}

.access-grid {
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(330px,.85fr);
    gap: 17px;
}

.access-panel {
    padding: 20px;
    border: 1px solid var(--suite-line);
    border-radius: 14px;
    background: var(--cp-surface-raised);
    box-shadow: var(--suite-shadow);
}

.role-catalogue {
    display: grid;
    gap: 10px;
}

.role-group {
    padding: 13px;
    border: 1px solid var(--cp-border-subtle);
    border-radius: 10px;
    background: var(--cp-surface-page);
}

    .role-group > div:first-child {
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }

    .role-group b {
        color: var(--cp-text-secondary);
        font-size: .72rem;
        letter-spacing: .08em;
    }

    .role-group > div:first-child span, .role-group > small {
        color: var(--suite-muted);
        font-size: .67rem;
    }

.role-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

    .role-chips span {
        padding: 5px 7px;
        border-radius: 6px;
        background: var(--suite-blue-soft);
        color: var(--cp-text-accent);
        font-size: .66rem;
        font-weight: 700;
    }

        .role-chips span.unavailable {
            background: var(--cp-surface-sunken);
            color: var(--cp-text-muted);
            text-decoration: line-through;
        }

.role-create {
    margin-top: 10px;
}

    .role-create summary {
        cursor: pointer;
        color: var(--suite-blue);
        font-size: .68rem;
        font-weight: 700;
    }

    .role-create form {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        align-items: end;
        gap: 7px;
        margin-top: 9px;
    }

    .role-create label, .assignment-form label {
        display: grid;
        gap: 5px;
        color: var(--cp-text-muted);
        font-size: .65rem;
    }

    .role-create input, .assignment-form select {
        min-width: 0;
        border: 1px solid var(--cp-border-subtle);
        border-radius: 8px;
        padding: 8px 9px;
        background: var(--cp-surface-raised);
        color: var(--suite-ink);
        font: inherit;
        font-size: .72rem;
    }

.assignment-form {
    display: grid;
    grid-template-columns: 1.1fr .65fr 1fr auto;
    align-items: end;
    gap: 8px;
}

.access-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 28px 12px;
    color: var(--suite-muted);
    text-align: center;
}

    .access-empty i {
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        border-radius: 50%;
        background: var(--suite-blue-soft);
        color: var(--suite-blue);
    }

    .access-empty b {
        color: var(--suite-ink);
        font-size: .78rem;
    }

    .access-empty span {
        font-size: .69rem;
        line-height: 1.45;
    }

.user-access-section {
    margin-top: 17px;
}

.access-user-list {
    display: grid;
    gap: 8px;
}

    .access-user-list > article {
        display: grid;
        grid-template-columns: 36px minmax(180px,.7fr) minmax(0,1.7fr);
        align-items: center;
        gap: 12px;
        padding: 12px;
        border: 1px solid var(--cp-border-subtle);
        border-radius: 10px;
        background: var(--cp-surface-raised);
    }

.user-avatar {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    background: var(--cp-surface-sunken);
    color: var(--cp-text-accent);
    font-size: .72rem;
    font-weight: 800;
}

.user-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

    .user-copy b {
        overflow: hidden;
        font-size: .76rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-copy span, .user-copy small {
        overflow: hidden;
        color: var(--suite-muted);
        font-size: .66rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-copy small {
        color: var(--cp-success);
    }

.user-role-list {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: wrap;
}

    .user-role-list form {
        margin: 0;
    }

    .user-role-list button, .no-role {
        border: 1px solid var(--cp-border-subtle);
        border-radius: 6px;
        padding: 5px 7px;
        background: var(--cp-surface-hover);
        color: var(--cp-text-accent);
        font: inherit;
        font-size: .64rem;
        font-weight: 700;
    }

    .user-role-list button {
        cursor: pointer;
    }

.no-role {
    border-color: var(--cp-border-subtle);
    background: var(--cp-surface-page);
    color: var(--cp-text-muted);
    font-weight: 600;
}

@media(max-width:1050px) {
    .access-grid {
        grid-template-columns: 1fr;
    }

    .assignment-form {
        grid-template-columns: 1fr 1fr;
    }

        .assignment-form button {
            width: max-content;
        }
}

@media(max-width:720px) {
    .access-context {
        align-items: flex-start;
        flex-direction: column;
    }

    .role-create form, .assignment-form {
        grid-template-columns: 1fr;
    }

    .access-user-list > article {
        grid-template-columns: 36px minmax(0,1fr);
    }

    .user-role-list {
        grid-column: 1/-1;
        justify-content: flex-start;
    }
}

.organisation-picker {
    position: relative;
}

    .organisation-picker summary {
        cursor: pointer;
        list-style: none;
        color: var(--cp-text-accent);
        font-size: .72rem;
        font-weight: 700;
    }

        .organisation-picker summary::-webkit-details-marker {
            display: none;
        }

.organisation-picker-panel {
    position: absolute;
    z-index: 10;
    top: calc(100% + 9px);
    right: 0;
    width: min(390px,80vw);
    padding: 13px;
    border: 1px solid var(--cp-border-subtle);
    border-radius: 11px;
    background: var(--cp-surface-raised);
    box-shadow: 0 18px 42px rgba(23,54,74,.16);
}

    .organisation-picker-panel form {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
    }

    .organisation-picker-panel label {
        display: grid;
        gap: 5px;
        color: var(--cp-text-muted);
        font-size: .64rem;
        font-weight: 700;
    }

    .organisation-picker-panel input {
        min-width: 0;
        border: 1px solid var(--cp-border-subtle);
        border-radius: 8px;
        padding: 9px 10px;
        color: var(--cp-text-secondary);
        font: inherit;
        font-size: .74rem;
    }

.organisation-results {
    display: grid;
    max-height: 280px;
    margin-top: 10px;
    overflow: auto;
    border: 1px solid var(--cp-border-subtle);
    border-radius: 8px;
}

    .organisation-results a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 11px;
        border-bottom: 1px solid var(--cp-border-subtle);
        color: var(--cp-text-secondary);
        font-size: .73rem;
        font-weight: 650;
        text-decoration: none;
    }

        .organisation-results a:last-child {
            border-bottom: 0;
        }

        .organisation-results a:hover {
            background: var(--cp-surface-page);
        }

        .organisation-results a.selected {
            background: var(--cp-success-soft);
            color: var(--cp-success);
        }

        .organisation-results a i {
            color: var(--cp-success);
        }

.organisation-empty {
    padding: 14px;
    color: var(--cp-text-muted);
    font-size: .72rem;
    text-align: center;
}

.organisation-picker-panel > small {
    display: block;
    margin-top: 8px;
    color: var(--cp-text-muted);
    font-size: .62rem;
    line-height: 1.4;
}

.role-source {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

    .role-source a {
        color: var(--cp-success);
        font-size: .66rem;
        font-weight: 700;
        text-decoration: none;
    }

        .role-source a i {
            margin-left: 3px;
            font-size: .58rem;
        }

.role-permission-edits {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.role-permission-edit {
    border-top: 1px solid var(--cp-border-subtle);
    padding-top: 8px;
}

    .role-permission-edit summary {
        cursor: pointer;
        color: var(--cp-text-secondary);
        font-size: .67rem;
        font-weight: 700;
    }

        .role-permission-edit summary small {
            margin-left: 6px;
            color: var(--cp-text-muted);
            font-size: .61rem;
            font-weight: 600;
        }

    .role-permission-edit form {
        display: grid;
        gap: 9px;
        margin-top: 8px;
    }

.permission-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .permission-checklist label, .role-create fieldset label {
        display: flex;
        align-items: center;
        gap: 5px;
        border: 1px solid var(--cp-border-subtle);
        border-radius: 7px;
        padding: 6px 7px;
        background: var(--cp-surface-raised);
        color: var(--cp-text-secondary);
        font-size: .63rem;
        font-weight: 600;
    }

    .permission-checklist input, .role-create fieldset input {
        width: 13px;
        height: 13px;
        accent-color: var(--cp-success);
    }

.role-create fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border: 0;
    padding: 0;
    margin: 0;
}

.role-create legend {
    margin-bottom: 5px;
    color: var(--cp-text-muted);
    font-size: .62rem;
    font-weight: 700;
}

.role-permission-open {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    border: 1px solid var(--cp-border-subtle);
    border-radius: 8px;
    padding: 8px 9px;
    background: var(--cp-surface-raised);
    color: var(--cp-text-secondary);
    font: 700 .66rem var(--cp-font-sans);
    cursor: pointer;
    text-align: left;
}

    .role-permission-open:hover {
        border-color: var(--cp-border-subtle);
        background: var(--cp-surface-page);
    }

    .role-permission-open small {
        margin-left: auto;
        color: var(--cp-text-muted);
        font-size: .6rem;
        font-weight: 600;
    }

.permission-modal {
    width: min(760px,calc(100vw - 30px));
    max-height: min(760px,calc(100vh - 30px));
    border: 0;
    border-radius: 15px;
    padding: 0;
    box-shadow: 0 28px 80px rgba(5,28,43,.28);
}

    .permission-modal::backdrop {
        background: var(--cp-surface-overlay);
    }

.permission-modal-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 23px;
    border-bottom: 1px solid var(--cp-border-subtle);
}

    .permission-modal-head h2 {
        margin: 3px 0;
        color: var(--cp-text-primary);
        font-size: 1.2rem;
    }

    .permission-modal-head span {
        color: var(--cp-text-muted);
        font-size: .7rem;
    }

.permission-modal-close {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 1px solid var(--cp-border-subtle);
    border-radius: 8px;
    background: var(--cp-surface-raised);
    color: var(--cp-text-muted);
    cursor: pointer;
}

.permission-modal form {
    display: grid;
    gap: 16px;
    padding: 20px 23px;
}

.permission-tree {
    display: grid;
    gap: 10px;
    max-height: 480px;
    overflow: auto;
}

    .permission-tree section {
        border: 1px solid var(--cp-border-subtle);
        border-radius: 10px;
        overflow: hidden;
    }

.permission-parent {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--cp-surface-page);
    color: var(--cp-text-secondary);
    font-size: .74rem;
    font-weight: 750;
}

    .permission-parent input {
        width: 15px;
        height: 15px;
        accent-color: var(--cp-success);
    }

    .permission-parent i {
        margin-right: 5px;
        color: var(--cp-success);
    }

.permission-children {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0;
    border-top: 1px solid var(--cp-border-subtle);
}

    .permission-children label {
        display: grid;
        grid-template-columns: 16px 1fr;
        gap: 5px;
        align-items: center;
        padding: 9px 11px;
        border-right: 1px solid var(--cp-border-subtle);
        border-bottom: 1px solid var(--cp-border-subtle);
        color: var(--cp-text-secondary);
        font-size: .68rem;
        font-weight: 650;
    }

        .permission-children label:nth-child(2n) {
            border-right: 0;
        }

        .permission-children label:last-child {
            border-bottom: 0;
        }

    .permission-children input {
        grid-row: span 2;
        width: 14px;
        height: 14px;
        accent-color: var(--cp-success);
    }

    .permission-children small {
        color: var(--cp-text-muted);
        font-size: .57rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.permission-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--cp-border-subtle);
}

@media(max-width:620px) {
    .permission-children {
        grid-template-columns: 1fr;
    }

        .permission-children label {
            border-right: 0;
        }

    .permission-modal-head, .permission-modal form {
        padding-inline: 16px;
    }
}

.directory-search {
    display: flex;
    gap: 8px;
    margin: 0 0 13px;
}

    .directory-search input {
        min-width: 0;
        width: min(380px,100%);
        border: 1px solid var(--cp-border-subtle);
        border-radius: 8px;
        padding: 9px 10px;
        color: var(--cp-text-secondary);
        font: inherit;
        font-size: .75rem;
    }

.directory-table-wrap {
    overflow: auto;
    border: 1px solid var(--cp-border-subtle);
    border-radius: 11px;
}

.directory-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--cp-surface-raised);
}

    .directory-table th, .directory-table td {
        padding: 12px 13px;
        border-bottom: 1px solid var(--cp-border-subtle);
        text-align: left;
        white-space: nowrap;
    }

    .directory-table th {
        background: var(--cp-surface-page);
        color: var(--cp-text-muted);
        font-size: .62rem;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .directory-table td {
        color: var(--cp-text-muted);
        font-size: .72rem;
    }

    .directory-table tr:last-child td {
        border-bottom: 0;
    }

    .directory-table tr.selected {
        background: var(--cp-surface-hover);
    }

    .directory-table td:first-child {
        min-width: 230px;
    }

    .directory-table b, .directory-table small {
        display: block;
    }

    .directory-table b {
        color: var(--cp-text-secondary);
        font-size: .76rem;
    }

    .directory-table small {
        max-width: 230px;
        overflow: hidden;
        margin-top: 3px;
        color: var(--cp-text-muted);
        font-size: .61rem;
        text-overflow: ellipsis;
    }

    .directory-table a {
        color: var(--cp-success);
        font-size: .7rem;
        font-weight: 700;
        text-decoration: none;
    }

.directory-pager {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 11px;
    color: var(--cp-text-muted);
    font-size: .68rem;
}

    .directory-pager span {
        margin-right: auto;
    }

    .directory-pager a {
        color: var(--cp-success);
        font-weight: 700;
        text-decoration: none;
    }

.suite-shell {
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-6);
    max-width: 1800px !important;
    font-family: var(--cp-font-sans) !important;
}

.console-header h1, .suite-hero h1, .panel-heading h2, .section-heading h2, .review-heading h2 {
    font-family: var(--cp-font-sans) !important;
}

.primary-button {
    border-color: var(--cp-border-inverse) !important;
    background: var(--cp-surface-inverse) !important;
}

    .primary-button:hover {
        background: var(--cp-surface-inverse) !important;
    }

.secondary-button {
    border-color: var(--cp-border-subtle) !important;
    border-radius: 9px !important;
    color: var(--cp-text-secondary) !important;
}

.link-form input, .tenant-selector select, .role-create input, .role-create select {
    min-height: 40px !important;
    border: 1px solid var(--cp-border-subtle) !important;
    border-radius: 8px !important;
    background: var(--cp-surface-page) !important;
    color: var(--cp-text-secondary) !important;
}

    .link-form input:focus, .tenant-selector select:focus, .role-create input:focus, .role-create select:focus {
        border-color: var(--cp-success) !important;
        box-shadow: 0 0 0 3px rgba(25,197,154,.12) !important;
        outline: 0;
    }

.permission-node i {
    color: var(--cp-success) !important;
}

.directory-table-wrap, .review-table-wrap {
    border: 1px solid var(--cp-border-subtle) !important;
    border-radius: 10px !important;
    background: var(--cp-surface-raised);
}

.directory-table, .review-table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--cp-surface-page) !important;
    color: var(--cp-text-muted) !important;
    font-family: var(--cp-font-sans);
    padding: 11px 13px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cp-border-subtle) !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

    .directory-table td, .review-table td {
        min-height: 48px;
        padding: 13px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--cp-border-subtle) !important;
        color: var(--cp-text-secondary) !important;
        font-size: .79rem !important;
        vertical-align: middle;
    }

    .directory-table tr:last-child td, .review-table tr:last-child td {
        border-bottom: 0 !important;
    }

    .directory-table tbody tr:hover td, .review-table tbody tr:hover td {
        background: var(--cp-surface-page);
    }

    .directory-table small, .review-table small {
        color: var(--cp-text-muted);
        font-size: .7rem;
    }

.directory-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    color: var(--cp-text-muted);
    font-size: .72rem;
}

    .directory-pager a {
        display: grid;
        place-items: center;
        min-width: 34px;
        height: 34px;
        padding: 0 9px;
        border: 1px solid var(--cp-border-subtle);
        border-radius: 8px;
        background: var(--cp-surface-raised);
        color: var(--cp-text-muted);
        font-size: .72rem;
        font-weight: 700;
        text-decoration: none;
    }

        .directory-pager a:hover {
            border-color: var(--cp-border-inverse);
            background: var(--cp-surface-inverse);
            color: var(--cp-text-inverse);
        }

.directory-search input, .organisation-picker-panel input, .assignment-form input, .assignment-form select, .provision-tenant input {
    min-height: 40px !important;
    border: 1px solid var(--cp-border-subtle) !important;
    border-radius: 8px !important;
    background: var(--cp-surface-page) !important;
    color: var(--cp-text-secondary) !important;
    font-family: var(--cp-font-sans) !important;
}

    .directory-search input:focus, .organisation-picker-panel input:focus, .assignment-form input:focus, .assignment-form select:focus, .provision-tenant input:focus {
        border-color: var(--cp-success) !important;
        box-shadow: 0 0 0 3px rgba(25,197,154,.12) !important;
        outline: 0;
    }

.cp-login-card.cms-login .cp-login-mark {
    background: var(--cp-surface-sunken);
    color: var(--cp-text-accent);
}

.cp-login-card.cms-login .cp-login-submit {
    border-color: var(--cp-accent);
    background: var(--cp-accent);
}

.cp-login-card.rms-login .cp-login-mark {
    background: var(--cp-surface-sunken);
    color: var(--cp-success);
}

.cp-login-card.rms-login .cp-login-submit {
    border-color: var(--cp-success);
    background: var(--cp-success);
}

.cp-login-card.rms-login .cp-login-form input:focus {
    border-color: var(--cp-success);
    box-shadow: 0 0 0 3px rgba(13,155,124,.12);
}

.cp-organisation-field {
    display: grid;
    gap: 7px;
    margin: 7px 0 4px;
    padding: 13px 14px;
    border: 1px solid var(--cp-border-subtle);
    border-radius: 11px;
    background: var(--cp-surface-page);
}

    .cp-organisation-field label {
        margin: 0;
        color: var(--cp-text-secondary);
        font-size: .72rem;
        font-weight: 750;
    }

    .cp-organisation-field input {
        background: var(--cp-surface-raised) !important;
    }

    .cp-organisation-field small {
        color: var(--cp-text-muted);
        font-size: .66rem;
        line-height: 1.45;
    }

.cp-login-card.rms-login .cp-organisation-field {
    border-color: var(--cp-border-subtle);
    background: var(--cp-surface-page);
}
