/* ==========================================================================
   CoOrdio Suite Portal — inner page components
   Loaded together with portal.css by _LayoutPortalPage.cshtml. Provides the
   page header, cards, forms, tables, dialogs, tabs and status treatments used
   by every redesigned Galaxy screen, plus the Kendo grid theme overrides so
   existing grids keep their behaviour while matching the new design.
   ========================================================================== */

/* ---------- page shell ---------- */

.pp-main {
    flex: 1 0 auto;
}

.pp-section {
    padding-top: 40px;
    padding-bottom: 64px;
}

/* Header "Back to portal" label stays visible at every width. */
.portal-menu__label--always {
    display: block;
}

/* ---------- back link / breadcrumb ---------- */

.pp-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--portal-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #795bb0;
}

.pp-back:hover {
    color: #4e2b91;
}

.pp-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    font-family: var(--portal-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--portal-muted);
}

.pp-crumbs a {
    color: #795bb0;
}

.pp-crumbs a:hover {
    color: #4e2b91;
}

/* ---------- page header ---------- */

.pp-head {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}

.pp-head__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    border-radius: 15px;
}

.pp-head__eyebrow {
    margin: 0;
    font-family: var(--portal-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--portal-muted);
}

.pp-head h1 {
    margin: 8px 0 0;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -.045em;
    color: #302d40;
    overflow-wrap: anywhere;
}

.pp-head__desc {
    max-width: 610px;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: #716d77;
}

.pp-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
}

/* ---------- tenant strip ---------- */

.pp-tenantbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 32px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--portal-border);
}

.pp-tenantbar__id {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pp-tenantbar__label {
    display: block;
    font-family: var(--portal-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--portal-muted);
}

.pp-tenantbar__value {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #4f4b57;
}

.pp-tenantbar__note {
    font-size: 11px;
    color: #817b83;
}

/* ---------- cards ---------- */

.pp-card {
    min-width: 0;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--portal-border);
    border-radius: 17px;
    background: var(--portal-surface);
}

.pp-card + .pp-card,
.pp-stack > * + * {
    margin-top: 20px;
}

/* ...but not inside a grid. There the cards are columns, not a stack: `gap`
   already provides the spacing, and the stacking margin only pushes every card
   after the first down by 20px, so a two-column row renders with its second card
   visibly lower than its first and the two boxes end up different heights. */
.pp-grid > .pp-card + .pp-card {
    margin-top: 0;
}

.pp-card__head {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.pp-card__eyebrow {
    margin: 0;
    font-family: var(--portal-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--portal-muted);
}

.pp-card__title {
    margin: 4px 0 0;
    font-size: 18px;
    font-weight: 600;
    color: #302d40;
}

.pp-card__desc {
    max-width: 640px;
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: #817b83;
}

.pp-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pp-panel {
    min-width: 0;
    padding: 16px;
    border: 1px solid #eee9e4;
    border-radius: 13px;
    background: #fffefd;
}

.pp-panel__label {
    display: block;
    font-family: var(--portal-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--portal-muted);
}

.pp-panel__value {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #3f3550;
}

.pp-panel__value--lg {
    font-size: 20px;
}

/* ---------- grids ---------- */

.pp-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

.pp-grid--tight {
    gap: 12px;
}

.pp-mt {
    margin-top: 20px;
}

.pp-mt-sm {
    margin-top: 12px;
}

.pp-mt-lg {
    margin-top: 32px;
}

/* ---------- stat tiles ---------- */

.pp-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 620px;
    margin-top: 20px;
}

.pp-stat {
    min-width: 0;
    padding: 12px;
    border: 1px solid #e6dfee;
    border-radius: 11px;
    background: #f7f3f8;
}

.pp-stat--amber {
    border-color: #ead8b8;
    background: rgba(255, 248, 233, .7);
}

.pp-stat__label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--portal-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #8a7aa2;
}

.pp-stat--amber .pp-stat__label {
    color: #9a681d;
}

.pp-stat__value {
    display: block;
    margin-top: 4px;
    font-size: 20px;
    font-weight: 600;
    color: #3f3550;
}

.pp-stat--amber .pp-stat__value {
    color: #805d1b;
}

/* ---------- description list ---------- */

.pp-dl {
    display: grid;
    gap: 12px;
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid #eee9e4;
}

.pp-dl > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid #eee9e4;
}

.pp-dl > div:first-child {
    padding-top: 0;
    border-top: 0;
}

.pp-dl dt {
    font-size: 11px;
    font-weight: 400;
    color: #817b83;
}

.pp-dl dd {
    max-width: 62%;
    margin: 0;
    overflow-wrap: anywhere;
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    color: #4f4b57;
}

/* ---------- buttons ---------- */

.pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--portal-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(108, 63, 192, .14);
    transition: background-color .15s ease, transform .15s ease, border-color .15s ease, color .15s ease;
}

.pp-btn:hover {
    transform: translateY(-1px);
    background: var(--portal-primary-dark);
    color: #fff;
}

.pp-btn[disabled],
.pp-btn.pp-btn--disabled {
    transform: none;
    background: #c3aee6;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

.pp-seg {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #e1dcd7;
    border-radius: 8px;
    overflow: hidden;
    background: #fffefd;
}

.pp-seg__form {
    margin: 0;
    display: flex;
}

.pp-seg__btn {
    appearance: none;
    border: 0;
    border-right: 1px solid #e1dcd7;
    background: transparent;
    color: #716d77;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 6px 10px;
    cursor: pointer;
    line-height: 1.2;
}

.pp-seg__form:last-child .pp-seg__btn {
    border-right: 0;
}

.pp-seg__btn:hover {
    background: #f6f1fb;
    color: #5c34aa;
}

.pp-seg__btn.is-active {
    background: #5c34aa;
    color: #fff;
}

.pp-btn--secondary {
    border: 1px solid #e1dcd7;
    background: #fffefd;
    color: #595461;
    box-shadow: none;
}

.pp-btn--secondary:hover {
    border-color: #cbb8eb;
    background: #fffefd;
    color: #5c34aa;
}

.pp-btn--danger {
    border: 1px solid #e2c8c2;
    background: #fffaf8;
    color: #9a5146;
    box-shadow: none;
}

.pp-btn--danger:hover {
    border-color: #d6a9a1;
    background: #fff3ef;
    color: #9a5146;
}

.pp-btn--ghost {
    background: none;
    color: #716d77;
    box-shadow: none;
}

.pp-btn--ghost:hover {
    transform: none;
    background: #f1ece8;
    color: #4f4b57;
}

.pp-btn--soft {
    background: #f3eef8;
    color: var(--portal-primary);
    box-shadow: none;
}

.pp-btn--soft:hover {
    background: #e8def5;
    color: var(--portal-primary);
}

.pp-btn svg {
    flex: 0 0 auto;
}

/* Small in-table command button */
.pp-tbtn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: #f3eef8;
    color: var(--portal-primary);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.pp-tbtn:hover {
    background: #e8def5;
    color: var(--portal-primary);
}

.pp-tbtn--plain {
    border: 1px solid #e1dcd7;
    background: #fffefd;
    color: #716d77;
}

.pp-tbtn--plain:hover {
    border-color: #cbb8eb;
    background: #fffefd;
    color: #5c34aa;
}

.pp-tbtn--danger {
    border: 1px solid #e2c8c2;
    background: #fffaf8;
    color: #9a5146;
}

.pp-tbtn--danger:hover {
    border-color: #d6a9a1;
    background: #fff3ef;
    color: #9a5146;
}

.pp-tbtn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------- anchor colour overrides ----------
   portal.css sets `.portal-page a { color: inherit }`, which out-specifies the
   single-class component rules above (0,1,1 beats 0,1,0). Any component used on
   an <a> therefore inherited the page ink until :hover raised the specificity —
   which is why an anchor button read black and only turned white on hover.
   Restate the colours at matching specificity. Variants must stay after the
   base rules: they tie on specificity, so source order decides. */

.portal-page a.pp-back { color: #795bb0; }
.portal-page a.pp-back:hover { color: #4e2b91; }

.portal-page a.pp-btn { color: #fff; }
.portal-page a.pp-btn:hover { color: #fff; }
.portal-page a.pp-btn--secondary { color: #595461; }
.portal-page a.pp-btn--secondary:hover { color: #5c34aa; }
.portal-page a.pp-btn--danger,
.portal-page a.pp-btn--danger:hover { color: #9a5146; }
.portal-page a.pp-btn--ghost { color: #716d77; }
.portal-page a.pp-btn--ghost:hover { color: #4f4b57; }
.portal-page a.pp-btn--soft,
.portal-page a.pp-btn--soft:hover { color: var(--portal-primary); }

.portal-page a.pp-tbtn,
.portal-page a.pp-tbtn:hover { color: var(--portal-primary); }
.portal-page a.pp-tbtn--plain { color: #716d77; }
.portal-page a.pp-tbtn--plain:hover { color: #5c34aa; }
.portal-page a.pp-tbtn--danger,
.portal-page a.pp-tbtn--danger:hover { color: #9a5146; }

.portal-page a.pp-tabs__tab { color: #817b83; }
.portal-page a.pp-tabs__tab:hover { color: #4f4b57; }
.portal-page a.pp-tabs__tab.is-active { color: #5c34aa; }

.portal-page a.pp-pager__link { color: #716d77; }
.portal-page a.pp-pager__link:hover { color: #5c34aa; }
.portal-page a.pp-pager__link.is-active { color: #fff; }
.portal-page a.pp-pager__link.pp-btn--disabled,
.portal-page a.pp-pager__link.pp-btn--disabled:hover,
.portal-page a.pp-pager__link[aria-disabled="true"] { color: #b3aeb5; }

.portal-page a.pp-rule__name,
.portal-page a.pp-rule__name:hover { color: #5c34aa; }

.pp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.pp-formactions {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #eee9e4;
}

.pp-formactions__note {
    margin: 0;
    font-size: 10px;
    line-height: 1.5;
    color: #918b91;
}

/* ---------- pills ---------- */

.pp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.pp-pill--violet { background: #f3eef8; color: #6c3fc0; }
.pp-pill--teal   { background: #e5f1ef; color: #236b63; }
.pp-pill--amber  { background: #f8ecd9; color: #9a681d; }
.pp-pill--blue   { background: #e7edf5; color: #425d7d; }
.pp-pill--danger { background: #fff3ef; color: #9a5146; }
.pp-pill--neutral{ background: #f1ece8; color: #716d77; }

/* ---------- forms ---------- */

.pp-field {
    display: block;
    min-width: 0;
}

.pp-field + .pp-field {
    margin-top: 16px;
}

.pp-grid .pp-field + .pp-field {
    margin-top: 0;
}

.pp-field__label {
    display: block;
    margin-bottom: 8px;
    margin-top: 0;
    font-size: 11px;
    font-weight: 600;
    color: #4f4b57;
}

.pp-field__label .pp-req {
    color: #9a5146;
}

.pp-field__hint {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.5;
    color: #918b91;
}

.pp-field .text-danger,
.pp-field__error {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    color: #9a5146;
}

.portal-page input[type="text"],
.portal-page input[type="email"],
.portal-page input[type="password"],
.portal-page input[type="number"],
.portal-page input[type="search"],
.portal-page input[type="tel"],
.portal-page input[type="url"],
.portal-page input[type="date"],
.portal-page select,
.portal-page textarea,
.pp-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e1dcd7;
    border-radius: 10px;
    background: #fffefd;
    font-family: inherit;
    font-size: 12px;
    color: #302d40;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.portal-page textarea,
.pp-textarea {
    min-height: 96px;
    resize: vertical;
}

.portal-page input:focus,
.portal-page select:focus,
.portal-page textarea:focus,
.pp-input:focus {
    border-color: #9b7bd0;
    box-shadow: 0 0 0 2px #e7ddf4;
}

.portal-page input::placeholder,
.portal-page textarea::placeholder {
    color: #aaa3aa;
}

.portal-page input[readonly],
.portal-page input[disabled],
.portal-page select[disabled],
.portal-page textarea[disabled] {
    background: #f4f1ec;
    color: #918b91;
    cursor: not-allowed;
}

.portal-page select {
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a858c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 14px;
}

.portal-page .input-validation-error {
    border-color: #c56b5e;
}

.portal-page .field-validation-error,
.portal-page .validation-summary-errors {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    color: #9a5146;
}

.portal-page .validation-summary-errors ul {
    margin: 0;
    padding-left: 18px;
}

/* password / pin reveal button */
.pp-reveal {
    position: relative;
}

.pp-reveal > button {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    border: 0;
    background: none;
    color: #918b91;
    line-height: 0;
}

.pp-reveal > button:hover {
    color: #5c34aa;
}

/* Legacy disable helpers still emitted by the Galaxy pages/scripts. */
.portal-page .pe-none {
    pointer-events: none;
}

.portal-page .ddDisabled,
.portal-page select.ddDisabled {
    background-color: #f4f1ec;
    color: #918b91;
    cursor: not-allowed;
}

/* checkbox row */
.pp-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.pp-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--portal-primary);
    flex: 0 0 auto;
}

.pp-check span {
    font-size: 11px;
    font-weight: 600;
    color: #4f4b57;
}

/* toggle switch */
.pp-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.pp-toggle__text p {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: #4f4b57;
}

.pp-toggle__text small {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.5;
    color: #817b83;
}

.pp-switch {
    /* A <label> is display:inline by default, which ignores width/height. Where
       the switch happens to be a direct child of the .pp-toggle flex container it
       gets blockified and renders anyway, but every page that wraps it in its own
       <form> (so the toggle can post its own handler — UserRoles, AppSecurity,
       OrganizationSecurity) has the label one level deeper, where it stays inline
       and collapses to 0x0. The track is inset:0 on that zero box, so the whole
       control disappears. Blockify it explicitly rather than relying on the
       parent's layout. */
    display: inline-block;
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 22px;
    margin: 2px 0 0;
    vertical-align: middle;
}

.pp-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.pp-switch__track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #ded9d3;
    transition: background-color .18s ease;
    pointer-events: none;
}

.pp-switch__track:after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
    transition: left .18s ease;
}

.pp-switch input:checked ~ .pp-switch__track {
    background: var(--portal-primary);
}

.pp-switch input:checked ~ .pp-switch__track:after {
    left: 19px;
}

.pp-switch input:disabled ~ .pp-switch__track {
    opacity: .5;
}

.pp-switch input:focus-visible ~ .pp-switch__track {
    outline: 2px solid #7544c4;
    outline-offset: 3px;
}

/* ---------- tables ---------- */

.pp-tablewrap {
    overflow-x: auto;
    border: 1px solid #eee9e4;
    border-radius: 13px;
    background: #fffefd;
}

.pp-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    text-align: left;
}

.pp-table thead tr {
    border-bottom: 1px solid #eee9e4;
}

.pp-table th {
    padding: 12px 16px;
    font-family: var(--portal-mono);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--portal-muted);
    white-space: nowrap;
}

.pp-table th a {
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pp-table th a:hover {
    color: #5c34aa;
}

.pp-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f3efe9;
    vertical-align: middle;
    font-size: 11px;
    color: #4f4b57;
}

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

.pp-table tbody tr:hover {
    background: #faf7f3;
}

.pp-table .pp-num {
    text-align: right;
}

.pp-table .pp-center {
    text-align: center;
}

.pp-table a {
    color: #5c34aa;
    font-weight: 600;
}

.pp-table a:hover {
    text-decoration: underline;
}

.pp-table__group td {
    background: #faf7f3;
    font-weight: 600;
}

.pp-muted {
    color: #918b91;
}

.pp-search {
    position: relative;
    display: block;
    min-width: 0;
    max-width: 240px;
}

.pp-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #918b91;
    pointer-events: none;
}

.portal-page .pp-search input {
    padding: 10px 12px 10px 34px;
    font-size: 11px;
}

.pp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

/* ---------- support topic picker ---------- */

.issuesList li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding: 12px 16px;
    border: 1px solid #eee9e4;
    border-radius: 11px;
    background: #fffefd;
    font-size: 12px;
    font-weight: 500;
    color: #4f4b57;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.issuesList li:after {
    content: "→";
    flex: 0 0 auto;
    color: var(--portal-primary);
}

.issuesList li:hover {
    border-color: #cbb8eb;
    color: #5c34aa;
}

/* ---------- pagination ---------- */

.pp-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 16px;
}

.pp-pager__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 6px 10px;
    border: 1px solid #e1dcd7;
    border-radius: 8px;
    background: #fffefd;
    font-size: 11px;
    font-weight: 600;
    color: #716d77;
    text-decoration: none;
}

.pp-pager__link:hover {
    border-color: #cbb8eb;
    color: #5c34aa;
}

.pp-pager__link.is-active {
    border-color: var(--portal-primary);
    background: var(--portal-primary);
    color: #fff;
}

/* Boundary state for prev/next pagers. PartnerReferrals emits the shared
   `pp-btn--disabled` modifier onto a .pp-pager__link, but the only definition of
   that modifier is the compound `.pp-btn.pp-btn--disabled`, which cannot match an
   element that never carries .pp-btn — so the link stayed live and clickable and
   would navigate to pageIndex 0. */
.pp-pager__link.pp-btn--disabled,
.pp-pager__link[aria-disabled="true"] {
    border-color: #e1dcd7;
    background: #f5f2ef;
    color: #b3aeb5;
    cursor: not-allowed;
    pointer-events: none;
}

.pp-pager__link.pp-btn--disabled:hover,
.pp-pager__link[aria-disabled="true"]:hover {
    border-color: #e1dcd7;
    color: #b3aeb5;
}

.pp-pager__ellipsis {
    padding: 6px 4px;
    font-size: 11px;
    color: #918b91;
}

/* ---------- states ---------- */

.pp-empty {
    padding: 48px 20px;
    border: 1px dashed #d9d0e5;
    border-radius: 12px;
    background: rgba(247, 243, 248, .55);
    text-align: center;
}

.pp-empty strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #4f4b57;
}

.pp-empty span {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #817b83;
}

.pp-loading {
    padding: 48px 20px;
    border: 1px dashed #e2ddd6;
    border-radius: 12px;
    background: rgba(247, 245, 241, .6);
    text-align: center;
    font-family: var(--portal-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--portal-muted);
}

.pp-alert {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid #ead8b8;
    border-radius: 13px;
    background: #fff8e9;
    color: #805d1b;
}

.pp-alert--danger {
    border-color: #e2c8c2;
    background: #fffaf8;
    color: #9a5146;
}

.pp-alert--violet {
    border-color: #d9d0e5;
    background: #f7f3f8;
    color: #5c34aa;
}

.pp-alert__title {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
}

.pp-alert__text {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.5;
    opacity: .85;
}

.pp-restricted {
    margin-top: 32px;
    padding: 64px 24px;
    border: 1px solid var(--portal-border);
    border-radius: 17px;
    background: var(--portal-surface);
    text-align: center;
}

.pp-restricted__eyebrow {
    margin: 0;
    font-family: var(--portal-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: #9a5146;
}

.pp-restricted h2 {
    margin: 12px 0 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.035em;
    color: #302d40;
}

.pp-restricted p {
    max-width: 420px;
    margin: 8px auto 0;
    font-size: 12px;
    line-height: 1.6;
    color: #817b83;
}

/* ---------- tabs ---------- */

.pp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 32px;
    border-bottom: 1px solid var(--portal-border);
}

.pp-tabs__tab {
    margin-bottom: -1px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 10px 10px 0 0;
    background: none;
    font-size: 12px;
    font-weight: 600;
    color: #817b83;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
}

.pp-tabs__tab:hover {
    color: #4f4b57;
}

.pp-tabs__tab.is-active {
    border-bottom-color: var(--portal-primary);
    color: #5c34aa;
}

/* ---------- dialogs ----------
   The portal shell deliberately does not load bootstrap.css, so these rules
   provide the structural behaviour bootstrap's modal JS expects (it toggles
   display/`.show` and injects `.modal-backdrop`) on top of the portal skin. */

body.portal-body.modal-open {
    overflow: hidden;
}

body.portal-body .modal {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

body.portal-body .modal.fade .modal-dialog {
    transform: translateY(-12px);
    transition: transform .2s ease-out;
}

body.portal-body .modal.show .modal-dialog {
    transform: none;
}

body.portal-body .modal-dialog {
    position: relative;
    width: auto;
    margin: 24px auto;
    pointer-events: none;
}

body.portal-body .modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 48px);
}

body.portal-body .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
}

/* Bootstrap appends .modal-backdrop to <body>, but page content — and therefore
   every modal — is rendered inside .portal-shell, which is
   `position:relative; z-index:10` and so opens a stacking context. That caps the
   modal's z-index:1055 inside a layer sitting at 10 in the root context, while
   the backdrop sits at 1050 in the root context itself. Net effect: the backdrop
   paints OVER the dialog, dims it, and swallows every click — the dialog opens
   but nothing in it can be clicked.

   Rather than move modals out of .portal-shell (one of them,
   Forum/Pages/Shared/ConfirmModel.cshtml, is nested inside a <form> and would
   lose its submission) or restack the whole shell, the injected backdrop is
   dropped and the dim is painted on .modal itself. .modal is a viewport-filling
   fixed element that lives in the SAME stacking context as the dialog, so the
   dialog paints above the dim, and clicks outside the dialog still land on
   .modal — which is the element bootstrap's dismiss handler listens on. */
body.portal-body .modal-backdrop {
    display: none;
}

body.portal-body .modal {
    background: rgba(40, 32, 53, 0);
    transition: background-color .15s linear;
}

body.portal-body .modal.show {
    background: rgba(40, 32, 53, .2);
    backdrop-filter: blur(2px);
}

@media (min-width: 576px) {
    body.portal-body .modal-dialog {
        margin: 32px auto;
    }
}

/* ---------- dialog skin ---------- */

/* the dim now lives on .modal itself — see the note above */

body.portal-body .modal-dialog {
    max-width: 460px;
}

body.portal-body .modal-content {
    padding: 24px;
    border: 1px solid var(--portal-border);
    border-radius: 20px;
    background: var(--portal-surface);
    box-shadow: 0 20px 50px rgba(45, 35, 55, .18);
}

body.portal-body .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 0;
    border: 0;
}

body.portal-body .modal-header .pp-dialog__eyebrow {
    margin: 0;
    font-family: var(--portal-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: #795bb0;
}

body.portal-body .modal-header .pp-dialog__eyebrow--danger {
    color: #9a5146;
}

body.portal-body .modal-title,
body.portal-body .modal-header h4,
body.portal-body .modal-header h5 {
    margin: 8px 0 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.04em;
    color: #302d40;
}

body.portal-body .modal-body {
    padding: 16px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #716d77;
}

body.portal-body .pp-dialog__close {
    flex: 0 0 auto;
    padding: 6px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: #817b83;
    line-height: 0;
}

body.portal-body .pp-dialog__close:hover {
    background: #eee9e4;
}

/* ---------- toast ---------- */

.pp-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 60;
    display: none;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 2rem);
    transform: translateX(-50%);
    padding: 10px 16px;
    border-radius: 999px;
    background: #29223a;
    color: #f8f6f1;
    font-size: 12px;
    box-shadow: 0 10px 24px rgba(41, 34, 58, .25);
}

.pp-toast.is-visible {
    display: flex;
    animation: portal-fade .45s ease both;
}

.pp-toast svg {
    color: #bce8d1;
    flex: 0 0 auto;
}

/* Kendo Notification body, restyled to match the portal toast. */
.pp-knotif {
    padding: 10px 16px;
    border-radius: 999px;
    background: #29223a;
    color: #f8f6f1;
    font-family: var(--portal-font);
    font-size: 12px;
    white-space: pre-line;
    box-shadow: 0 10px 24px rgba(41, 34, 58, .25);
}

.pp-knotif--error {
    background: #7c3a30;
}

.portal-page .k-notification,
body.portal-body .k-notification {
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* ---------- permission scope matrix ---------- */

.pp-scope {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0 auto;
    border: 0;
    border-radius: 8px;
}

.pp-scope--allow { background: #e5f1ef; color: #236b63; }
.pp-scope--deny  { background: #fff3ef; color: #9a5146; }
.pp-scope--na    { background: #f1ece8; color: #a09aa2; }

/* ---------- collapsible (sentinel report) ---------- */

.pp-collapse {
    overflow: hidden;
    border: 1px solid var(--portal-border);
    border-radius: 15px;
    background: var(--portal-surface);
}

.pp-collapse + .pp-collapse {
    margin-top: 12px;
}

.pp-collapse__btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border: 0;
    background: none;
    text-align: left;
}

.pp-collapse__btn > span:first-child {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.pp-collapse__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    color: #302d40;
}

.pp-collapse__chev {
    flex: 0 0 auto;
    color: #918b91;
    transition: transform .18s ease;
}

.pp-collapse.is-open .pp-collapse__chev {
    transform: rotate(90deg);
}

.pp-collapse__body {
    display: none;
    padding: 16px 20px;
    border-top: 1px solid #eee9e4;
}

.pp-collapse.is-open .pp-collapse__body {
    display: block;
}

.pp-rule {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid #eee9e4;
    border-radius: 11px;
    background: #fffefd;
}

.pp-rule + .pp-rule {
    margin-top: 8px;
}

.pp-rule__name {
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    color: #5c34aa;
}

.pp-rule__counts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* ---------- permission tree ---------- */

.pp-tree {
    font-size: 12px;
}

.pp-tree ul {
    list-style: none;
    margin: 0;
    padding-left: 24px;
}

.pp-tree > ul {
    padding-left: 0;
}

.pp-tree li {
    padding: 2px 0;
}

.pp-tree__row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pp-tree__row label {
    margin: 0;
    cursor: pointer;
}

.pp-tree__toggle {
    width: 16px;
    text-align: center;
    color: #918b91;
    cursor: pointer;
    user-select: none;
    font-size: 11px;
}

.pp-tree__toggle.is-empty {
    visibility: hidden;
}

.pp-tree input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--portal-primary);
}

.pp-tree__service > .pp-tree__row > label {
    font-weight: 600;
    color: #5c34aa;
}

.pp-tree__resource > .pp-tree__row > label {
    font-weight: 500;
    color: #4f4b57;
}

.pp-tree__leaf > .pp-tree__row > label {
    color: #4f4b57;
}

.pp-tree__overridden > .pp-tree__row > label:after {
    content: " · custom";
    font-size: 10px;
    font-style: italic;
    color: #d6336c;
}

.pp-tree__children.is-collapsed {
    display: none;
}

.pp-servicegroup {
    overflow: hidden;
    border: 1px solid #eee9e4;
    border-radius: 13px;
    background: #fffefd;
}

.pp-servicegroup + .pp-servicegroup {
    margin-top: 16px;
}

.pp-servicegroup__head {
    padding: 10px 16px;
    background: #f5f0fc;
    font-family: var(--portal-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: #5c34aa;
}

.pp-servicegroup__body {
    padding: 12px 16px;
}

.pp-checkline {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    margin: 0;
    cursor: pointer;
}

.pp-checkline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--portal-primary);
    flex: 0 0 auto;
}

.pp-checkline span {
    font-size: 12px;
    color: #4f4b57;
}

.pp-checkline strong {
    font-weight: 600;
}

.pp-checkline em {
    font-style: normal;
    color: #817b83;
}

/* ---------- password rules checklist ---------- */

.pp-rules {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.pp-rules li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    color: #817b83;
}

.pp-rules li.is-ok {
    color: #4f4b57;
}

.pp-rules__mark {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #f1ece8;
    color: #a09aa2;
}

.pp-rules li.is-ok .pp-rules__mark {
    background: #e5f1ef;
    color: #236b63;
}

/* ---------- kendo grid theme ---------- */

.portal-page .k-grid {
    border: 1px solid #eee9e4;
    border-radius: 13px;
    background: #fffefd;
    font-family: var(--portal-font);
    font-size: 11px;
    color: #4f4b57;
    overflow: hidden;
}

.portal-page .k-grid .k-grid-header,
.portal-page .k-grid .k-toolbar,
.portal-page .k-grid .k-grid-toolbar {
    border-color: #eee9e4;
    background: #fffefd;
}

.portal-page .k-grid .k-grid-header th.k-header,
.portal-page .k-grid th {
    padding: 12px 16px;
    border-color: #eee9e4;
    font-family: var(--portal-mono);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--portal-muted);
}

.portal-page .k-grid td {
    padding: 12px 16px;
    border-color: #f3efe9;
    font-size: 11px;
}

.portal-page .k-grid tbody tr:hover,
.portal-page .k-grid tbody tr.k-state-hover {
    background: #faf7f3;
}

.portal-page .k-grid tbody tr.k-alt {
    background: transparent;
}

.portal-page .k-grid .k-button,
.portal-page .k-grid .k-grid-edit,
.portal-page .k-grid .k-grid-update,
.portal-page .k-grid .k-grid-cancel,
.portal-page .k-grid .k-grid-delete {
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: #f3eef8;
    color: var(--portal-primary);
    font-size: 10px;
    font-weight: 600;
    box-shadow: none;
}

.portal-page .k-grid .k-grid-delete {
    border: 1px solid #e2c8c2;
    background: #fffaf8;
    color: #9a5146;
}

.portal-page .k-pager-wrap,
.portal-page .k-grid .k-pager {
    border-color: #eee9e4;
    background: #fffefd;
    font-size: 10px;
    color: #817b83;
}

/* Kendo paints the pager nav arrows with its own link blue. */
.portal-page .k-pager-wrap .k-link,
.portal-page .k-grid .k-pager .k-link {
    color: #716d77;
}

.portal-page .k-pager-wrap .k-link:hover,
.portal-page .k-grid .k-pager .k-link:hover {
    background-color: #f1ece8;
    color: #5c34aa;
}

.portal-page .k-pager-wrap .k-pager-numbers .k-link.k-selected,
.portal-page .k-pager-wrap .k-link.k-selected {
    background-color: var(--portal-primary) !important;
    border-color: var(--portal-primary) !important;
    color: #fff !important;
}

.portal-page .k-grid .k-textbox,
.portal-page .k-grid .k-input {
    border-radius: 8px;
    font-size: 11px;
}

/* ---------- kendo dropdowns ----------
   Verified against the live Kendo 2022.3.913 bootstrap theme, not assumed:
     closed picker  span.k-picker.k-dropdownlist > span.k-input-inner
                                                 + span.k-input-button
     popup          body > div.k-animation-container
                      > div.k-popup.k-group.k-reset
                        > div.k-list > div.k-list-content > ul.k-list-ul
                          > li.k-list-item(.k-selected)
     filter menu    body > div.k-animation-container
                      > form.k-filter-menu.k-popup
     pager size     select.k-dropdown.k-picker.k-dropdown-list   <- a NATIVE select
   The popup is appended to <body>, so it is a SIBLING of div.portal-page and no
   `.portal-page ...` rule can ever reach it. Popup rules are therefore anchored
   on body.portal-body — the same workaround the .k-notification rule above
   already uses. */

/* Closed picker, styled to the same spec as `.portal-page select` above so a
   Kendo dropdown and a native one read as the same control: 10px radius,
   #e1dcd7 border, #fffefd fill, 12px #302d40. */
.portal-page .k-picker,
body.portal-body .k-filter-menu .k-picker {
    border-color: #e1dcd7;
    border-radius: 10px;
    background: #fffefd;
    background-image: none;
    font-family: inherit;
    font-size: 12px;
    color: #302d40;
}

.portal-page .k-picker:hover,
.portal-page .k-picker.k-hover,
body.portal-body .k-filter-menu .k-picker:hover,
body.portal-body .k-filter-menu .k-picker.k-hover {
    border-color: #cbb8eb;
    background: #fffefd;
}

.portal-page .k-picker.k-focus,
body.portal-body .k-filter-menu .k-picker.k-focus {
    border-color: #9b7bd0;
    box-shadow: 0 0 0 2px #e7ddf4;
}

.portal-page .k-picker .k-input-inner,
body.portal-body .k-filter-menu .k-picker .k-input-inner {
    padding: 6px 8px;
    color: #302d40;
}

/* The pager page-size picker. The reference design uses a compact select in its
   pager (8px radius, 10px text), so it gets that rather than the field size.

   The width override is a bug fix, not taste: the Kendo theme declares
   `.k-pager-sizes .k-dropdownlist { width: 5em }`. That is em-relative, so
   overriding the font from Kendo's 16px down to 12px shrinks the box from 80px
   to 60px while the inner padding and the caret button keep their pixel sizes —
   leaving negative room for the value, which collapsed .k-input-value-text to
   zero width and rendered the control as an empty box. Sizing to content fixes
   it. (No 3-digit page size exists: every grid uses .PageSizes(true), which
   Kendo expands to All/5/10/20.) */
.portal-page .k-pager .k-picker,
.portal-page .k-pager-wrap .k-picker,
.portal-page .k-pager-sizes .k-picker {
    width: auto;
    min-width: 74px;
    border-radius: 8px;
    font-size: 10px;
    color: #595461;
}

/* Kendo draws its caret as a WebComponentsIcons webfont triangle. Hide the glyph
   and paint the same stroked chevron every skinned <select> uses, so the two
   controls have an identical affordance. */
.portal-page .k-picker .k-input-button,
body.portal-body .k-filter-menu .k-picker .k-input-button {
    border: 0;
    color: #8a858c;
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a858c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}

.portal-page .k-picker .k-input-button .k-icon,
.portal-page .k-picker .k-input-button .k-button-icon,
body.portal-body .k-filter-menu .k-picker .k-input-button .k-icon,
body.portal-body .k-filter-menu .k-picker .k-input-button .k-button-icon {
    visibility: hidden;
}

/* Popup — body-anchored, see note above.
   :not(.k-notification) matters: a Kendo toast is also body-appended and its
   element literally carries `k-popup` (kendo.notification builds
   `div.k-widget.k-popup.k-notification`), so without the exclusion this rule
   out-specifies the .k-notification reset further up and wraps every grid toast
   in a card.

   No padding here: kendo.list's _adjustListWidth writes an inline width onto
   this exact element, and it is box-sizing:border-box, so padding would be
   taken out of the list's usable width and wrap the option text on narrow
   pickers. The inset goes on .k-list instead. */
body.portal-body .k-animation-container .k-popup:not(.k-notification),
body.portal-body .k-animation-container .k-list-container {
    padding: 0;
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    background: var(--portal-surface);
    box-shadow: 0 12px 30px rgba(45, 35, 55, .12);
    color: #4f4b57;
}

body.portal-body .k-animation-container .k-list {
    padding: 6px;
    font-family: var(--portal-font);
    font-size: 12px;
    background: transparent;
    color: #4f4b57;
}

body.portal-body .k-animation-container .k-list-item {
    padding: 8px 12px;
    border-radius: 8px;
}

body.portal-body .k-animation-container .k-list-item:hover,
body.portal-body .k-animation-container .k-list-item.k-hover {
    background: #f1ece8;
    color: #302d40;
}

body.portal-body .k-animation-container .k-list-item.k-selected {
    background: #f3eef8;
    color: #5c34aa;
    font-weight: 600;
}

body.portal-body .k-animation-container .k-list-item.k-selected:hover,
body.portal-body .k-animation-container .k-list-item.k-selected.k-hover {
    background: #e8def5;
    color: #5c34aa;
}

body.portal-body .k-animation-container .k-nodata,
body.portal-body .k-animation-container .k-no-data {
    font-size: 11px;
    color: #918b91;
}

/* filter menu */
body.portal-body .k-filter-menu.k-popup {
    padding: 12px;
    border-radius: 14px;
}

body.portal-body .k-filter-menu .k-filter-help-text {
    font-family: var(--portal-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: #8a858c;
}

body.portal-body .k-filter-menu .k-textbox,
body.portal-body .k-filter-menu .k-input {
    border-color: #e1dcd7;
    border-radius: 8px;
    background: #fffefd;
    font-family: inherit;
    font-size: 11px;
    color: #302d40;
}

body.portal-body .k-filter-menu .k-textbox.k-focus,
body.portal-body .k-filter-menu .k-input.k-focus {
    border-color: #9b7bd0;
    box-shadow: 0 0 0 2px #e7ddf4;
}

body.portal-body .k-filter-menu .k-button-solid-primary {
    border-color: var(--portal-primary);
    background: var(--portal-primary);
    color: #fff;
}

body.portal-body .k-filter-menu .k-button-solid-primary:hover {
    border-color: var(--portal-primary-dark);
    background: var(--portal-primary-dark);
}

body.portal-body .k-filter-menu .k-button-solid-base {
    border-color: #e1dcd7;
    background: #fffefd;
    color: #595461;
}

body.portal-body .k-filter-menu .k-button-solid-base:hover {
    border-color: #cbb8eb;
    background: #f1ece8;
    color: #5c34aa;
}

.portal-page .k-grid .k-grid-search {
    border: 1px solid #e1dcd7;
    border-radius: 10px;
    background: #fffefd;
}

.portal-page .k-grid .k-no-data {
    padding: 40px 20px;
    color: #817b83;
    font-size: 12px;
}

/* ---------- responsive ---------- */

@media (min-width: 640px) {
    .pp-card {
        padding: 24px;
    }

    .pp-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pp-card__head {
        flex-direction: row;
        align-items: flex-start;
    }

    .pp-formactions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .pp-formactions--split {
        justify-content: space-between;
    }

    .pp-toggle-row {
        flex-direction: row;
    }

    .pp-rule {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .pp-alert {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (min-width: 768px) {
    .pp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .pp-section {
        padding-top: 56px;
    }

    .pp-head {
        flex-direction: row;
        align-items: flex-end;
    }

    .pp-head__actions {
        align-self: flex-end;
    }

    .pp-grid--lg2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .pp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- HIPAA Business Associate Agreement ---------- */

.baa-wrap {
    width: 100%;
}

.baa-card {
    overflow: visible;
}

.baa-meta {
    margin: 4px 0 0;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fdfdfc;
}

.baa-meta > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
}

.baa-meta > div + div {
    border-top: 1px solid #e6e6e6;
}

.baa-meta dt {
    font-size: 12px;
    color: #60527b;
}

.baa-meta dd {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    text-align: right;
    overflow-wrap: anywhere;
}

.baa-mono {
    font-family: var(--portal-mono);
    font-size: 12px;
    font-weight: 400;
}

.baa-choices {
    margin: 24px 0 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.baa-choices legend {
    margin: 0 0 10px;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: #302d40;
}

.baa-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.baa-choice:has(input:checked) {
    border-color: #6c3fc0;
    background: #f8f6fc;
}

.baa-choice input {
    margin-top: 2px;
    accent-color: #6c3fc0;
}

.baa-choice strong,
.baa-choice small {
    display: block;
}

.baa-choice strong {
    font-size: 12px;
    font-weight: 600;
    color: #302d40;
}

.baa-choice small {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.5;
    color: #716d77;
}

.baa-doc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding: 14px 16px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
}

.baa-doc__title {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #302d40;
}

.baa-doc__status {
    margin: 4px 0 0;
    font-size: 11px;
    color: #716d77;
}

.baa-accept {
    align-items: flex-start;
    margin-top: 16px;
}

.baa-accept:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.55;
}

.baa-accept span {
    font-weight: 500;
    line-height: 1.5;
}

.baa-result {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.baa-result__mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f3eef8;
    color: #6c3fc0;
}

.baa-result h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #302d40;
}

.baa-result p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #60527b;
}

.baa-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.baa-label label {
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.baa-info-wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
}

.baa-info {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 1px solid #d9d6e2;
    border-radius: 999px;
    background: #f4f1fa;
    color: #6c3fc0;
    cursor: help;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}

.baa-info svg {
    width: 24px;
    height: 24px;
    display: block;
}

.baa-info:hover,
.baa-info:focus-visible {
    border-color: #c4bdd4;
    background: #efeaf8;
    outline: none;
}

.baa-info__tip {
    display: none;
    position: absolute;
    z-index: 5;
    left: calc(100% + 10px);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 260px;
    padding: 10px 12px;
    border: 1px solid #d9d0e5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(30, 16, 60, .12);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    color: #4f4b57;
    text-align: left;
    pointer-events: none;
}

.baa-info:hover + .baa-info__tip,
.baa-info:focus-visible + .baa-info__tip {
    display: block;
}