@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

 /* ===========================================================================
   PORTAL V2 — CLEANED SHARED STYLESHEET (TEST CANDIDATE)
   Source: latest supplied app-ui.css, 2026-10-20.

   ARCHITECTURE
   - Sections 01–17 retain the existing cascade and legacy selectors so
     currently deployed Razor pages continue to render as before.
   - Section 18 provides reusable, page-independent .app-page components.
   - No module or cshtml path is a V2 styling dependency.
   - Legacy selectors can be removed only after every consuming view migrates.
   - All @media rules belong here, not inside Razor views.

   CSS CLEANUP
   - Eliminated empty declarations and formatting-only clutter.
   - Normalised indentation, line breaks and semicolon placement.
   - Preserved original declaration values, selector ordering and media rules.
   - Added a central mobile Safari input-focus safeguard.
   =========================================================================== */
/* === 01 / Navigation, account menu and dashboard === */
.app-menu {
    --app-navy: #082652;
    --app-blue: #0865e7;
    --app-border: #b6c9e9;
    --app-muted: #496383;
    --app-red: #d52e43;
    --app-tint: #f4f7fd;
    --app-tile-tint: #f9fbff;
    color: var(--app-navy);
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.app-menu * {
    box-sizing: border-box;
}

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}

.app-header-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.app-user-menu {
    position: relative;
}

.app-user {
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--app-border);
    padding: 7px 12px;
    background: var(--app-tile-tint);
    border-radius: 12px;
    color: var(--app-muted);
    font-size: 12px;
    min-height: 55px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

    .app-user:hover, .app-user:focus-visible, .app-user[aria-expanded="true"] {
        border-color: var(--app-blue);
        background: #f5f9ff;
        outline: none;
    }

.app-user-chevron {
    color: var(--app-blue);
    margin-left: 8px;
    transition: transform .15s;
}

.app-mobile-hamburger {
    display: none;
}

.app-mobile-account-label {
    display: none;
}

.app-user:focus-visible, .app-tile:focus-visible, .app-group-link:focus-visible, .app-dropdown-link:focus-visible {
    outline: 3px solid #0752bb;
    outline-offset: 2px;
}

.app-user-dropdown-account {
    display: none;
}

.app-user[aria-expanded="true"] .app-user-chevron {
    transform: rotate(180deg);
}

.app-user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: max-content;
    min-width: 210px;
    max-width: min(320px,90vw);
    border: 1px solid var(--app-border);
    background: #fff;
    box-shadow: 0 12px 30px rgba(8,38,82,.14);
    border-radius: 12px;
    padding: 7px;
    z-index: 50;
}

    .app-user-dropdown[hidden] {
        display: none;
    }

.app-dropdown-link {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 44px;
    padding: 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--app-navy);
    text-align: left;
    text-decoration: none !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .app-dropdown-link i {
        width: 20px;
        text-align: center;
        color: var(--app-blue);
        font-size: 16px;
    }

    .app-dropdown-link:hover, .app-dropdown-link:focus-visible {
        background: #eaf2ff;
        color: var(--app-navy);
        outline: none;
    }

.app-dropdown-divider {
    height: 1px;
    background: #dbe6fb;
    margin: 5px 4px;
}

.app-dropdown-logout {
    color: #b82135;
}

    .app-dropdown-logout i {
        color: #b82135;
    }

    .app-dropdown-logout:hover, .app-dropdown-logout:focus-visible {
        background: #fff1f2;
        color: #b82135;
    }

.app-dropdown-form {
    margin: 0;
}

.app-user-icon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    background: #eaf2ff;
    color: var(--app-blue);
    border-radius: 50%;
    font-size: 19px;
}

.app-user strong {
    color: var(--app-navy);
    display: block;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.app-site {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--app-border);
    padding: 12px 16px;
    background: var(--app-tile-tint);
    border-radius: 12px;
    color: var(--app-muted);
    font-size: 13px;
}

    .app-site i {
        color: var(--app-blue);
        font-size: 23px;
    }

    .app-site strong {
        color: var(--app-navy);
        display: block;
        font-size: 14px;
    }

.app-panel {
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.app-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    margin-bottom: 14px;
    background: linear-gradient(90deg, #e5edf9 0%, #f2f6fd 48%, #ffffff 100%);
}

.app-heading-icon {
    flex: 0 0 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: #e6f0ff;
    color: var(--app-blue);
    border-radius: 15px;
    font-size: 25px;
}

.app-heading h1 {
    margin: 0 0 4px;
    font-size: 27px;
    font-weight: 750;
    line-height: 1.2;
    color: var(--app-navy);
}

.app-heading p {
    margin: 0;
    color: var(--app-muted);
    font-size: 15px;
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-auto-rows: 112px;
    gap: 10px;
}

.app-tile {
    position: relative;
    height: 112px;
    min-height: 0;
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    text-align: left;
    border: 1px solid var(--app-border);
    background: var(--app-tile-tint);
    border-radius: 10px;
    padding: 11px;
    color: var(--app-navy);
    text-decoration: none !important;
    transition: border-color .16s,background .16s,transform .16s,box-shadow .16s;
    cursor: pointer;
}

    .app-tile:hover, .app-tile:focus-visible {
        color: var(--app-navy);
        background: #f5f9ff;
        border-color: var(--app-blue);
        transform: translateY(-2px);
        box-shadow: 0 5px 13px rgba(23,75,144,.1);
        outline: none;
    }

.app-tile-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    background: #eaf2ff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #0752bb;
    font-size: 22px;
}

.app-tile-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.app-tile-title {
    display: block;
    height: 19px;
    line-height: 19px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 750;
}

.app-tile-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 36px;
    font-size: 13px;
    color: var(--app-muted);
    margin-top: 4px;
    line-height: 18px;
}

.app-chevron {
    color: var(--app-blue);
    font-size: 20px;
    flex: 0 0 auto;
}

.app-group-wrap {
    position: relative;
    min-width: 0;
    height: 100%;
}

.app-group-toggle {
    appearance: none;
    font: inherit;
    padding-top: 20px;
}

.app-group-count {
    position: absolute;
    right: 9px;
    top: 8px;
    background: #e8f1ff;
    color: #0752bb;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    border-radius: 100px;
}

.app-group-toggle[aria-expanded="true"] {
    background: #eaf2ff;
    border-color: var(--app-blue);
}

    .app-group-toggle[aria-expanded="true"] .app-chevron {
        transform: rotate(90deg);
    }

.app-group-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: max(100%,290px);
    max-width: min(380px,calc(100vw - 36px));
    z-index: 80;
    border: 1px solid var(--app-border);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 14px 35px rgba(8,38,82,.18);
    padding: 7px;
    max-height: min(70vh,550px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

    .app-group-menu[hidden] {
        display: none;
    }

.app-group-label {
    margin: 6px 10px;
    font-weight: 750;
    font-size: 13px;
    color: var(--app-muted);
}

.app-group-link {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    color: var(--app-navy);
    text-decoration: none !important;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

    .app-group-link:hover, .app-group-link:focus-visible {
        background: #eaf2ff;
        outline: none;
        color: var(--app-navy);
    }

.app-group-link-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #eaf2ff;
    color: #0752bb;
}

.app-group-link-copy {
    min-width: 0;
    flex: 1;
}

    .app-group-link-copy strong {
        display: block;
        font-size: 13px;
        line-height: 1.3;
    }

    .app-group-link-copy small {
        display: block;
        font-size: 13px;
        margin-top: 2px;
        color: var(--app-muted);
        line-height: 1.3;
    }

.app-group-link-chevron {
    color: var(--app-blue);
    font-size: 13px;
}

.app-grid {
    align-items: start;
}

.app-post-form {
    display: none;
}

.app-menu .app-user:focus-visible,
.app-menu .app-tile:focus-visible,
.app-menu .app-group-link:focus-visible,
.app-menu .app-dropdown-link:focus-visible {
    outline: 3px solid #0752bb;
    outline-offset: 2px;
    border-color: #0752bb;
}

@media (prefers-reduced-motion:reduce) {
    .app-menu .app-tile, .app-menu .app-user-chevron {
        transition: none;
    }

        .app-menu .app-tile:hover {
            transform: none;
        }
}

@media (min-width:961px) {
    .app-group-wrap:nth-child(4n) .app-group-menu {
        left: auto;
        right: 0;
    }
}

@media (min-width:1450px) {
    .app-grid {
        grid-template-columns: repeat(5,minmax(0,1fr));
    }

    .app-group-wrap:nth-child(4n) .app-group-menu {
        left: 0;
        right: auto;
    }

    .app-group-wrap:nth-child(5n) .app-group-menu {
        left: auto;
        right: 0;
    }
}

@media (max-width:960px) {
    .app-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}

@media (max-width:700px) {
    .app-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:700px) {
    .app-user {
        width: 48px;
        height: 48px;
        min-height: 48px;
        padding: 0;
        justify-content: center;
        border-radius: 12px;
    }

    .app-user-icon, .app-user-text, .app-user-chevron {
        display: none;
    }

    .app-mobile-hamburger {
        display: block;
        color: var(--app-blue);
        font-size: 21px;
    }

    .app-user-dropdown-account {
        display: block;
        padding: 10px 12px 9px;
        color: var(--app-muted);
        font-size: 12px;
        overflow-wrap: anywhere;
    }

        .app-user-dropdown-account strong {
            display: block;
            color: var(--app-navy);
            font-size: 14px;
            margin-top: 3px;
        }

    .app-user-dropdown {
        min-width: 230px;
    }
}

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

    .app-topbar {
        align-items: center;
        flex-direction: row;
    }

    .app-heading h1 {
        font-size: 25px;
    }

    .app-heading p {
        font-size: 13px;
    }

    .app-panel {
        padding: 0;
    }

    .app-header-info {
        justify-content: flex-end;
    }

    .app-tile {
        position: relative;
        height: 112px;
    }
}


/* === 02 / Sign-in === */
.app-login {
    --app-navy: #082652;
    --app-blue: #0865e7;
    --app-border: #b6c9e9;
    --app-muted: #496383;
    --app-tint: #f9fbff;
    color: var(--app-navy);
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;
    margin: 16px auto;
    padding: 0 14px;
    font-family: inherit;
}

    .app-login *, .app-login *::before, .app-login *::after {
        box-sizing: border-box;
    }

.app-login-topbar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 0 22px;
}

.app-login-logo {
    display: block;
    width: min(220px,70vw);
    max-width: 100%;
    height: auto;
    max-height: 90px;
    object-fit: contain;
    margin: 0 auto;
}

.app-login-panel {
    width: 100%;
    max-width: 460px;
    margin: clamp(12px,4vh,48px) auto 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.app-login-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(90deg,#e5edf9 0%,#f2f6fd 48%,#fff 100%);
}

.app-login-heading-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: #e6f0ff;
    border-radius: 15px;
    color: var(--app-blue);
    font-size: 25px;
}

.app-login-heading h1 {
    font-size: 27px;
    font-weight: 750;
    line-height: 1.2;
    color: var(--app-navy);
    margin: 0 0 4px;
}

.app-login-heading p {
    font-size: 15px;
    color: var(--app-muted);
    margin: 0;
}

.app-login-field {
    margin-bottom: 16px;
}

.app-login-label {
    display: block;
    margin-bottom: 6px;
    color: var(--app-navy);
    font-size: 14px;
    font-weight: 750;
}

.app-login-input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-tint);
    color: var(--app-navy);
    font-size: 14px;
    line-height: 1.3;
    outline: none;
}

    .app-login-input::placeholder {
        color: #657b99;
    }

    .app-login-input:focus {
        border-color: var(--app-blue);
        box-shadow: 0 0 0 3px rgba(8,101,231,.15);
        background: #fff;
    }

.app-login-password-wrap {
    position: relative;
}

    .app-login-password-wrap .app-login-input {
        padding-right: 55px;
    }

.app-login-peek {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 42px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #0752bb;
    cursor: pointer;
    font-size: 17px;
}

    .app-login-peek:hover {
        background: #eaf2ff;
    }

    .app-login-peek:focus {
        outline: none !important;
        border: 0 !important;
        box-shadow: none;
    }

    .app-login-peek:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(8,101,231,.35);
    }

.app-login-submit:focus-visible, .app-login-links a:focus-visible {
    outline: 3px solid #0752bb;
    outline-offset: 2px;
}

.app-login-error {
    display: block;
    color: #a61d36;
    font-size: 12px;
    line-height: 1.4;
    margin-top: 5px;
}

.app-login-summary {
    color: #a61d36;
    font-size: 13px;
    margin: 0 0 14px;
}

    .app-login-summary:empty {
        display: none;
    }

    .app-login-summary ul {
        padding-left: 19px;
        margin: 0;
    }

.app-login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    border: 1px solid #0752bb;
    border-radius: 10px;
    background: #0865e7;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s,box-shadow .15s;
}

    .app-login-submit:hover {
        background: #0752bb;
        box-shadow: 0 4px 12px rgba(8,101,231,.18);
    }

.app-login-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 16px;
    margin-top: 17px;
    padding-top: 0;
    border: 0;
    font-size: 13px;
}

    .app-login-links a {
        color: #0752bb;
        text-decoration: none;
        font-weight: 600;
    }

        .app-login-links a:hover {
            text-decoration: underline;
        }

@media (max-width:540px) {
    .app-login {
        margin: 20px auto;
    }

    .app-login-panel {
        padding: 0;
    }

    .app-login-heading {
        padding: 12px 14px;
    }

        .app-login-heading h1 {
            font-size: 25px;
        }

        .app-login-heading p {
            font-size: 13px;
        }
}

@media (prefers-reduced-motion:reduce) {
    .app-login * {
        transition: none !important;
    }
}

.app-heading {
    justify-content: space-between;
}

.app-heading-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.app-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    flex: 0 0 auto;
}

    .app-heading-actions .app-header-info {
        justify-content: flex-end;
    }

    .app-heading-actions .app-user {
        min-height: 46px;
        padding: 4px 10px;
        background: #fff;
    }

    .app-heading-actions .app-user-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
    }

.app-header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 15px;
    border-radius: 10px;
    border: 1px solid var(--app-border);
    color: var(--app-navy);
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

    .app-header-action:hover {
        background: #edf4ff;
        border-color: var(--app-blue);
    }

    .app-header-action:focus-visible {
        outline: 3px solid #0752bb;
        outline-offset: 2px;
    }

.app-header-action--primary {
    background: var(--app-blue);
    color: #fff;
    border-color: var(--app-blue);
}

    .app-header-action--primary:hover {
        background: #0752bb;
        color: #fff;
    }

@media (max-width:700px) {
    .app-heading {
        gap: 9px;
    }

    .app-heading-main {
        gap: 10px;
    }

    .app-heading-actions .app-user {
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
    }

    .app-heading-actions .app-site {
        display: none;
    }
}

@media (max-width:420px) {
    .app-heading {
        padding: 10px;
    }

    .app-heading-icon {
        flex-basis: 40px;
        height: 40px;
        font-size: 21px;
    }

    .app-heading-main {
        gap: 8px;
    }

    .app-heading p {
        font-size: 12px;
    }

    .app-heading h1 {
        font-size: 21px;
    }

    .app-heading-actions {
        gap: 5px;
    }
}


/* === 03 / Existing shared forms, controls and dialogs === */
.app-form {
    width: 100%;
    color: var(--app-navy,#082652);
}

.app-form-section {
    margin: 0 0 18px;
    padding: 17px 18px 18px;
    border: 1px solid var(--app-border,#b6c9e9);
    border-radius: 12px;
    background: #fff;
}

.app-form-section-title {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 750;
    line-height: 1.35;
    color: var(--app-navy,#082652);
}

.app-form-section-description {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--app-muted,#496383);
}

.app-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    column-gap: 20px;
    row-gap: 16px;
}

.app-form-field {
    min-width: 0;
}

.app-form-field--wide {
    grid-column: 1/-1;
}

.app-form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--app-navy,#082652);
}

.app-form-required {
    color: #a61d36;
    margin-left: 3px;
}

.app-form-input {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--app-border,#b6c9e9);
    border-radius: 10px;
    background: #f9fbff;
    color: var(--app-navy,#082652);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
}

    .app-form-input:focus {
        outline: 3px solid rgba(8,101,231,.2);
        outline-offset: 1px;
        border-color: var(--app-blue,#0865e7);
        background: #fff;
    }

.app-form-error {
    display: block;
    margin-top: 5px;
    color: #a61d36;
    font-size: 12px;
    line-height: 1.4;
}

.app-form-validation {
    margin: 0 0 14px;
    color: #a61d36;
    font-size: 13px;
}

    .app-form-validation:empty {
        display: none;
    }

.app-form .app-heading {
    margin-bottom: 18px;
}

.app-form .app-heading-actions {
    flex-wrap: wrap;
}

@media (max-width:720px) {
    .app-form-grid {
        grid-template-columns: 1fr;
    }

    .app-form-section {
        padding: 14px;
    }
}

@media (max-width:540px) {
    .app-form .app-heading {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .app-form .app-heading-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

.app-changes-dialog {
    width: min(440px,calc(100vw - 32px));
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 0;
    border: 1px solid #b6c9e9;
    border-radius: 14px;
    background: #fff;
    color: #082652;
    box-shadow: 0 20px 64px rgba(8,38,82,.25);
}

    .app-changes-dialog::backdrop {
        background: rgba(8,25,53,.48);
    }

.app-changes-dialog-body {
    padding: 23px;
}

.app-changes-dialog-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #e6f0ff;
    color: #0865e7;
    font-size: 21px;
    margin-bottom: 14px;
}

.app-changes-dialog h2 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 750;
    line-height: 1.3;
}

.app-changes-dialog p {
    margin: 0;
    font-size: 14px;
    color: #496383;
    line-height: 1.55;
}

.app-changes-dialog-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.app-header-action--danger {
    color: #a61d36;
    background: #fff;
    border-color: #d8aab3;
}

    .app-header-action--danger:hover {
        background: #fff1f3;
        border-color: #a61d36;
        color: #a61d36;
    }

@media (max-width:540px) {
    .app-changes-dialog-body {
        padding: 18px;
    }

    .app-changes-dialog-actions {
        flex-direction: column;
    }

        .app-changes-dialog-actions .app-header-action {
            width: 100%;
        }
}

.app-form .app-heading.app-heading--sticky {
    position: sticky;
    top: var(--app-sticky-header-offset, 0px);
    z-index: 100;
    isolation: isolate;
    box-shadow: 0 5px 16px rgba(8,38,82,.08);
}

@media (max-width: 540px) {
    .app-form .app-heading.app-heading--sticky {
        padding: 9px 10px;
    }

        .app-form .app-heading.app-heading--sticky .app-heading-actions {
            width: auto;
            margin-left: auto;
            flex-wrap: nowrap;
        }

        .app-form .app-heading.app-heading--sticky .app-header-action {
            min-height: 40px;
            padding: 7px 10px;
        }

        .app-form .app-heading.app-heading--sticky .app-heading-main {
            min-width: 0;
        }

        .app-form .app-heading.app-heading--sticky p {
            display: none;
        }
}

@media (max-width: 370px) {
    .app-form .app-heading.app-heading--sticky .app-heading-main {
        width: 100%;
    }

    .app-form .app-heading.app-heading--sticky .app-heading-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

.app-invite .app-choice-grid {
    display: grid;
    margin-top: 13px;
}

.app-invite .app-choice, .app-invite .app-check {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--app-border,#b6c9e9);
    background: #f9fbff;
    border-radius: 10px;
    color: #082652;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.app-invite input[type=radio], .app-invite input[type=checkbox] {
    width: 17px;
    height: 17px;
    accent-color: #0865e7;
    flex: none;
}

.app-invite .app-choice:focus-within, .app-invite .app-check:focus-within {
    outline: 2px solid #0865e7;
    outline-offset: 2px;
}

.app-invite .app-invite-extra {
    margin-top: 16px;
}

.app-invite .app-invite-subtitle {
    font-size: 15px;
    margin: 0 0 12px;
}

.app-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width:540px) {
    .app-invite .app-choice-grid {
        grid-template-columns: 1fr;
    }
}

.app-select {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 42px 10px 12px;
    border: 1px solid var(--app-border,#b6c9e9);
    border-radius: 10px;
    background-color: #f9fbff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 7.5 5 5 5-5' stroke='%230865e7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-size: 18px 18px;
    background-repeat: no-repeat;
    color: var(--app-navy,#082652);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

    .app-select:hover:not(:disabled) {
        border-color: #809fcf;
        background-color: #fff;
    }

    .app-select:focus-visible {
        border-color: var(--app-blue,#0865e7);
        outline: 3px solid rgba(8,101,231,.24);
        outline-offset: 1px;
        background-color: #fff;
    }

    .app-select:disabled {
        opacity: .65;
        cursor: not-allowed;
        background-color: #edf1f7;
    }

    .app-select[aria-invalid="true"], .app-select.input-validation-error {
        border-color: #a61d36;
    }

    .app-select option, .app-select optgroup {
        color: var(--app-navy,#082652);
        background: #fff;
    }

@media (forced-colors:active) {
    .app-select {
        border: 1px solid CanvasText;
        background-image: none;
        appearance: auto;
        -webkit-appearance: menulist;
    }
}

.app-invite .app-form-section {
    border-color: #d9e4f5;
}

.app-invite .app-form-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-invite .app-step-number {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: #e8f1ff;
    color: #0752bb;
    font-size: 13px;
    font-weight: 750;
}

.app-invite .app-choice-grid {
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 10px;
}

.app-invite .app-choice {
    position: relative;
    min-height: 74px;
    gap: 11px;
    padding: 12px 13px;
    border-radius: 12px;
    transition: background .15s,border-color .15s,box-shadow .15s;
}

    .app-invite .app-choice:hover {
        background: #eff5ff;
        border-color: #7da9ef;
    }

    .app-invite .app-choice:has(input:checked) {
        background: #eaf2ff;
        border: 2px solid #0865e7;
        padding: 11px 12px;
        box-shadow: 0 2px 8px rgba(8,101,231,.07);
    }

    .app-invite .app-choice input[type=radio] {
        position: absolute;
        width: 20px;
        height: 20px;
        right: 11px;
        top: 10px;
        opacity: 0;
    }

.app-invite .app-choice-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: #e9f0fc;
    color: #0752bb;
    font-size: 18px;
}

.app-invite .app-choice-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding-right: 16px;
}

    .app-invite .app-choice-copy strong {
        font-size: 14px;
        font-weight: 750;
        line-height: 1.25;
    }

    .app-invite .app-choice-copy small {
        color: #496383;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.3;
    }

.app-invite .app-choice-check {
    display: none;
    position: absolute;
    right: 10px;
    top: 10px;
    color: #0865e7;
    font-size: 17px;
}

.app-invite .app-choice:has(input:checked) .app-choice-check {
    display: block;
}

.app-invite .app-choice:focus-within {
    outline: 3px solid rgba(8,101,231,.3);
    outline-offset: 2px;
}

.app-invite .app-invite-channel-note {
    display: flex;
    align-items: start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #c9dcfc;
    border-radius: 10px;
    background: #f4f8ff;
    color: #496383;
    font-size: 13px;
    line-height: 1.5;
}

    .app-invite .app-invite-channel-note i {
        flex: none;
        color: #0752bb;
        font-size: 18px;
    }

@media (max-width:540px) {
    .app-invite .app-choice-grid {
        grid-template-columns: 1fr;
    }

    .app-invite .app-choice {
        min-height: 68px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .app-invite .app-choice {
        transition: none;
    }
}

.app-date-presets {
    border: 0;
    padding: 0;
    margin: 0 0 14px;
    min-width: 0;
}

    .app-date-presets legend {
        margin-bottom: 8px;
    }

.app-date-presets-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.app-date-preset {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

    .app-date-preset input {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

    .app-date-preset span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 100px;
        min-height: 44px;
        padding: 9px 17px;
        border: 1px solid var(--app-border,#b6c9e9);
        border-radius: 10px;
        background: #f9fbff;
        color: var(--app-navy,#082652);
        font-size: 14px;
        font-weight: 650;
    }

    .app-date-preset:hover span {
        border-color: #7da9ef;
        background: #f0f5ff;
    }

    .app-date-preset input:checked + span {
        border: 2px solid var(--app-blue,#0865e7);
        background: #eaf2ff;
        padding: 8px 16px;
        color: #0752bb;
    }

    .app-date-preset input:focus-visible + span {
        outline: 3px solid rgba(8,101,231,.35);
        outline-offset: 2px;
    }

@media (max-width:540px) {
    .app-date-presets-options {
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .app-date-preset span {
        min-width: 0;
        width: 100%;
        padding-inline: 8px;
    }
}

.app-dialog {
    width: min(460px,calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow: auto;
    padding: 0;
    border: 1px solid #b6c9e9;
    border-radius: 14px;
    background: #fff;
    color: #082652;
    box-shadow: 0 20px 64px rgba(8,38,82,.25);
}

    .app-dialog::backdrop {
        background: rgba(8,25,53,.48);
    }

.app-dialog__body {
    padding: 23px;
}

.app-dialog__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #e6f0ff;
    color: #0865e7;
    font-size: 21px;
    margin-bottom: 14px;
}

.app-dialog[data-tone="error"] .app-dialog__icon {
    background: #fff1f3;
    color: #a61d36;
}

.app-dialog[data-tone="warning"] .app-dialog__icon {
    background: #fff6e5;
    color: #936400;
}

.app-dialog[data-tone="success"] .app-dialog__icon {
    background: #eaf8f0;
    color: #087641;
}

.app-dialog__title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 750;
    line-height: 1.3;
}

.app-dialog__message {
    margin: 0;
    color: #496383;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.app-dialog__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

    .app-dialog__actions button:focus-visible {
        outline: 3px solid #0865e7;
        outline-offset: 2px;
    }

@media (max-width:540px) {
    .app-dialog__body {
        padding: 18px;
    }

    .app-dialog__actions {
        flex-direction: column-reverse;
    }

        .app-dialog__actions button {
            width: 100%;
        }
}

.app-dialog__body {
    position: relative;
}

.app-dialog__close {
    position: absolute;
    top: 13px;
    right: 13px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #496383;
    cursor: pointer;
    font-size: 16px;
}

    .app-dialog__close[hidden] {
        display: none;
    }

    .app-dialog__close:hover {
        background: #eaf2ff;
        color: #082652;
    }

    .app-dialog__close:focus-visible {
        outline: 3px solid #0865e7;
        outline-offset: 2px;
    }

.app-dialog:has(.app-dialog__close:not([hidden])) .app-dialog__title {
    padding-right: 42px;
}

.app-dialog [hidden] {
    display: none !important;
}

.app-dialog__method {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 7px 11px;
    border-radius: 9px;
    background: #eef5ff;
    border: 1px solid #c9dcfc;
    color: #0752bb;
    font-size: 13px;
    font-weight: 650;
}

    .app-dialog__method i {
        font-size: 16px;
    }

.app-dialog__actions {
    margin-top: 20px;
}

    .app-dialog__actions .app-header-action {
        white-space: normal;
        text-align: center;
    }

@media (max-width:540px) {
    .app-dialog__actions {
        flex-direction: column;
    }
}

.app-dialog .app-dialog__body {
    padding: 22px 24px 20px;
}

.app-dialog .app-dialog__heading-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-right: 42px;
    margin-bottom: 12px;
}

    .app-dialog .app-dialog__heading-row .app-dialog__icon {
        flex: 0 0 42px;
        margin: 0;
    }

    .app-dialog .app-dialog__heading-row .app-dialog__title {
        margin: 0;
        padding: 0;
        font-size: 19px;
        font-weight: 750;
        line-height: 1.3;
        text-align: left;
    }

.app-dialog .app-dialog__message {
    margin: 0;
}

.app-dialog .app-dialog__actions {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

    .app-dialog .app-dialog__actions .app-header-action {
        display: inline-flex;
        flex: 0 1 auto;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 44px;
        padding: 10px 15px;
        border: 1px solid #b6c9e9;
        border-radius: 10px;
        background: #fff;
        color: #082652;
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        line-height: 1.3;
        cursor: pointer;
        visibility: visible;
        opacity: 1;
    }

        .app-dialog .app-dialog__actions .app-header-action[hidden] {
            display: none !important;
        }

        .app-dialog .app-dialog__actions .app-header-action i {
            font-size: 17px;
        }

    .app-dialog .app-dialog__actions .app-header-action--primary {
        background: #0865e7;
        border-color: #0865e7;
        color: #fff;
    }

        .app-dialog .app-dialog__actions .app-header-action--primary:hover {
            background: #0752bb;
            color: #fff;
        }

    .app-dialog .app-dialog__actions .app-dialog__action--close {
        background: #fff;
        border-color: #b6c9e9;
        color: #082652;
    }

        .app-dialog .app-dialog__actions .app-dialog__action--close:hover {
            background: #edf4ff;
            border-color: #0865e7;
        }

    .app-dialog .app-dialog__actions .app-dialog__action--whatsapp {
        background: #128c48;
        border-color: #128c48;
        color: #fff;
    }

        .app-dialog .app-dialog__actions .app-dialog__action--whatsapp:hover {
            background: #0e713a;
            border-color: #0e713a;
            color: #fff;
        }

    .app-dialog .app-dialog__actions .app-header-action:focus-visible {
        outline: 3px solid #0865e7;
        outline-offset: 3px;
    }

.app-dialog .app-dialog__close {
    border: 0;
    background: transparent;
    box-shadow: none;
}

    .app-dialog .app-dialog__close:hover, .app-dialog .app-dialog__close:focus-visible {
        background: #eaf2ff;
        color: #082652;
    }

@media (max-width:540px) {
    .app-dialog .app-dialog__body {
        padding: 18px;
    }

    .app-dialog .app-dialog__actions {
        flex-direction: column;
    }

        .app-dialog .app-dialog__actions .app-header-action {
            width: 100%;
        }
}

.app-dialog .app-dialog__actions [hidden] {
    display: none !important;
}

.app-dialog button.app-dialog__close,
.app-dialog button.app-dialog__close:focus,
.app-dialog button.app-dialog__close:active {
    appearance: none;
    -webkit-appearance: none;
    border: 0 !important;
    background: transparent;
    box-shadow: none !important;
    outline: none;
    color: #496383;
}

    .app-dialog button.app-dialog__close:hover {
        border: 0 !important;
        background: #eaf2ff;
        color: #082652;
    }

    .app-dialog button.app-dialog__close:focus-visible {
        background: #eaf2ff;
        color: #082652;
        outline: 3px solid #0865e7;
        outline-offset: 2px;
    }

.app-edit-delivery-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
}

.app-edit-delivery-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    min-height: 74px;
    padding: 12px;
    border: 1px solid #b6c9e9;
    border-radius: 11px;
    background: #f9fbff;
    cursor: pointer;
    color: #082652;
}

    .app-edit-delivery-choice:has(input:checked) {
        background: #eaf2ff;
        border: 2px solid #0865e7;
        padding: 11px;
    }

    .app-edit-delivery-choice input {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

    .app-edit-delivery-choice:focus-within {
        outline: 3px solid rgba(8,101,231,.3);
        outline-offset: 2px;
    }

.app-edit-delivery-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: #eaf2ff;
    color: #0752bb;
    font-size: 18px;
}

.app-edit-delivery-choice strong, .app-edit-delivery-choice small {
    display: block;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.app-edit-delivery-choice strong {
    font-size: 14px;
    font-weight: 700;
}

.app-edit-delivery-choice small {
    font-size: 12px;
    color: #496383;
    margin-top: 3px;
}

.app-edit-whatsapp-share {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #128c48 !important;
    color: #fff !important;
    border-color: #128c48 !important;
}

    .app-edit-whatsapp-share:hover {
        background: #0e713a !important;
        color: #fff !important;
    }

@media (max-width:960px) {
    .app-edit-delivery-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:540px) {
    .app-edit-delivery-grid {
        grid-template-columns: minmax(0,1fr);
    }
}

.app-edit-invite {
    max-width: 1100px;
    margin-inline: auto;
    min-width: 0;
}

    .app-edit-invite .app-form-section {
        min-width: 0;
    }

    .app-edit-invite .app-form-field {
        min-width: 0;
    }

    .app-edit-invite .app-form-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .app-edit-invite .app-heading {
        gap: 12px;
    }

    .app-edit-invite .app-heading-actions {
        display: flex;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .app-edit-invite .app-header-action, .app-edit-invite button.app-header-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 42px;
        padding: 9px 14px;
        border: 1px solid #b6c9e9;
        border-radius: 10px;
        background: #fff;
        color: #082652;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
        white-space: nowrap;
        opacity: 1;
        visibility: visible;
    }

    .app-edit-invite .app-heading-actions .app-header-action--primary,
    .app-edit-invite .app-changes-dialog-actions .app-header-action--primary {
        background: #0865e7;
        border-color: #0865e7;
        color: #fff;
    }

        .app-edit-invite .app-heading-actions .app-header-action--primary:hover,
        .app-edit-invite .app-changes-dialog-actions .app-header-action--primary:hover {
            background: #0752bb;
            border-color: #0752bb;
            color: #fff;
        }

    .app-edit-invite .app-changes-dialog-actions .app-header-action--danger {
        color: #a61d36;
        background: #fff;
        border-color: #d8aab3;
    }

    .app-edit-invite .app-header-action:focus-visible {
        outline: 3px solid #0865e7;
        outline-offset: 2px;
    }

    .app-edit-invite .app-changes-dialog-actions button[hidden] {
        display: none !important;
    }

    .app-edit-invite .app-edit-delivery-choice:has(input:checked) {
        border-color: #0865e7;
        background: #eaf2ff;
    }

    .app-edit-invite .app-edit-delivery-choice:focus-within {
        outline: 2px solid #0865e7;
        outline-offset: 2px;
    }

    .app-edit-invite .app-form-input[readonly] {
        background: #f2f5fa;
        color: #496383;
    }

.app-edit-feedback {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    padding: 11px 13px;
    border: 1px solid #c9dcfc;
    background: #f2f7ff;
    border-radius: 10px;
    color: #082652;
    font-size: 13px;
    line-height: 1.45;
}

    .app-edit-feedback[hidden] {
        display: none !important;
    }

.app-edit-invite .app-changes-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

@media (max-width:700px) {
    .app-edit-invite .app-form-grid {
        grid-template-columns: minmax(0,1fr);
    }
}

@media (max-width:540px) {
    .app-edit-invite .app-heading-actions {
        width: 100%;
        justify-content: flex-end;
    }

        .app-edit-invite .app-heading-actions .app-header-action {
            min-width: 0;
        }

    .app-edit-invite .app-changes-dialog-actions {
        flex-direction: column;
    }

        .app-edit-invite .app-changes-dialog-actions .app-header-action {
            width: 100%;
        }
}

.app-edit-decision {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 0 100%;
    min-width: 0;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid #b6c9e9;
    background: #fff;
    border-radius: 10px;
    color: #082652;
}

    .app-edit-decision[hidden] {
        display: none !important;
    }

    .app-edit-decision[data-tone="danger"] {
        border-color: #d8aab3;
        background: #fff6f7;
    }

    .app-edit-decision[data-tone="success"] {
        border-color: #afddc4;
        background: #f2fbf5;
    }

.app-edit-decision-copy {
    flex: 1 1 220px;
    min-width: 0;
}

    .app-edit-decision-copy strong {
        font-size: 14px;
        font-weight: 750;
    }

.app-edit-invite .app-edit-decision-copy p {
    display: block;
    margin: 3px 0 0;
    color: #496383;
    font-size: 13px;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.app-edit-decision-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

    .app-edit-decision-actions button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 8px 13px;
        border-radius: 9px;
        border: 1px solid #b6c9e9;
        color: #082652;
        background: #fff;
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }

    .app-edit-decision-actions .app-edit-decision-primary {
        background: #0865e7;
        color: #fff;
        border-color: #0865e7;
    }

    .app-edit-decision-actions .app-edit-decision-danger {
        color: #a61d36;
        border-color: #d8aab3;
    }

    .app-edit-decision-actions button:focus-visible {
        outline: 3px solid #0865e7;
        outline-offset: 2px;
    }

@media (max-width:700px) {
    .app-edit-decision {
        align-items: stretch;
        flex-direction: column;
    }

    .app-edit-decision-actions {
        width: 100%;
    }

        .app-edit-decision-actions button {
            flex: 1 1 auto;
        }
}

.app-edit-invite #editPrimaryActions[hidden] {
    display: none !important;
}

.app-edit-invite .app-edit-decision {
    align-items: center;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
}

    .app-edit-invite .app-edit-decision[hidden] {
        display: none !important;
    }

.app-edit-invite .app-edit-decision-copy strong {
    font-size: 14px;
}

.app-edit-invite .app-edit-decision-actions button {
    white-space: nowrap;
}

.app-edit-invite .app-edit-decision[data-tone="danger"] .app-edit-decision-copy strong {
    color: #a61d36;
}

.app-edit-invite .app-edit-decision[data-tone="success"] .app-edit-decision-copy strong {
    color: #166534;
}

@media (max-width:700px) {
    .app-edit-invite .app-edit-decision {
        flex-basis: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .app-edit-invite .app-edit-decision-copy {
        flex: auto;
    }

    .app-edit-invite .app-edit-decision-actions {
        flex-wrap: wrap;
    }

        .app-edit-invite .app-edit-decision-actions button {
            flex: 1 1 auto;
            white-space: normal;
        }
}

.app-edit-invite .app-heading--sticky {
    display: flex;
    flex-wrap: nowrap;
}

.app-edit-invite .app-heading-main {
    flex: 0 1 340px;
    min-width: 0;
}

.app-edit-invite .app-edit-decision-actions {
    flex: 0 0 auto;
}

.app-edit-invite .app-edit-decision-copy p {
    margin-top: 2px;
}

.app-edit-invite .app-edit-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-edit-invite .app-edit-section-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 3px;
}

    .app-edit-invite .app-edit-section-copy .app-form-section-title {
        margin: 0;
        text-align: left;
    }

    .app-edit-invite .app-edit-section-copy .app-form-section-description {
        margin: 0;
    }

.app-edit-invite .app-edit-section-icon, .app-edit-invite .app-edit-section-icon i,
.app-edit-invite .app-heading-icon, .app-edit-invite .app-heading-icon i {
    color: #0865e7 !important;
}

.app-edit-invite .app-edit-section-icon {
    display: inline-grid;
    place-items: center;
    background: #eaf2ff;
    flex-shrink: 0;
}

.app-edit-invite .app-edit-notification-fieldset {
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.app-edit-invite .app-edit-notification-legend {
    font-size: 13px;
    font-weight: 700;
    color: #082652;
    padding: 0;
    margin-bottom: 8px;
}

.app-edit-invite .app-edit-notification-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.app-edit-invite .app-edit-notification-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 39px;
    padding: 8px 12px;
    border: 1px solid #b6c9e9;
    border-radius: 9px;
    background: #fff;
    color: #082652;
    cursor: pointer;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.25;
}

    .app-edit-invite .app-edit-notification-option i {
        color: #0865e7;
        font-size: 15px;
    }

    .app-edit-invite .app-edit-notification-option input {
        accent-color: #0865e7;
        margin: 0;
    }

    .app-edit-invite .app-edit-notification-option:has(input:checked) {
        border-color: #0865e7;
        background: #eaf2ff;
    }

    .app-edit-invite .app-edit-notification-option:focus-within {
        outline: 2px solid #0865e7;
        outline-offset: 2px;
    }

.app-edit-invite .app-edit-notification-help {
    font-size: 12px;
    color: #496383;
    margin: 9px 0 0;
}

@media (max-width:900px) {
    .app-edit-invite .app-heading--sticky {
        flex-wrap: wrap;
    }

    .app-edit-invite .app-heading-main {
        flex: 1 1 100%;
    }

    .app-edit-invite .app-edit-decision {
        flex: 1 1 100%;
        justify-content: space-between;
    }
}

@media (max-width:540px) {
    .app-edit-invite .app-edit-decision {
        flex-direction: column;
        align-items: stretch;
    }

    .app-edit-invite .app-edit-decision-actions {
        justify-content: flex-end;
    }

    .app-edit-invite .app-edit-notification-option {
        flex: 1 1 auto;
        justify-content: center;
    }
}

.app-edit-invite .app-heading--sticky {
    column-gap: 16px;
    row-gap: 8px;
    margin-bottom: 10px;
}

.app-edit-invite .app-edit-decision {
    flex: 1 1 auto;
    min-width: 0;
    gap: 12px;
    justify-content: flex-end;
}

.app-edit-invite .app-edit-decision-copy {
    flex: 0 1 280px;
    max-width: 310px;
    min-width: 0;
}

.app-edit-invite .app-edit-decision-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

    .app-edit-invite .app-edit-decision-actions button {
        min-height: 40px;
        padding: 8px 12px;
        font-weight: 700;
        line-height: 1.25;
    }

    .app-edit-invite .app-edit-decision-actions .app-edit-decision-whatsapp {
        background: #128c48;
        color: white;
        border-color: #128c48;
    }

        .app-edit-invite .app-edit-decision-actions .app-edit-decision-whatsapp:hover {
            background: #0e713a;
        }

.app-edit-invite .app-edit-access-note {
    margin: 4px 0 14px;
    font-size: 13px;
    color: #496383;
}

@media (max-width:900px) {
    .app-edit-invite .app-edit-decision-copy {
        max-width: none;
        flex: 1 1 180px;
    }
}

@media (max-width:540px) {
    .app-edit-invite .app-edit-decision-actions button {
        flex: 1 1 auto;
    }
}


/* === 04 / Invitations and invitation lists (compatibility) === */
.app-invite-page {
    --app-navy: #082652;
    --app-blue: #0865e7;
    --app-border: #b6c9e9;
    --app-muted: #496383;
    width: 100%;
    min-width: 0;
    color: var(--app-navy);
    padding: 4px 0 max(30px,env(safe-area-inset-bottom));
}

    .app-invite-page * {
        box-sizing: border-box;
    }

    .app-invite-page .app-screen-header {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        padding: 14px 18px;
        margin-bottom: 18px;
        border-radius: 12px;
        background: linear-gradient(90deg,#e5edf9,#f2f6fd 48%,#fff);
    }

    .app-invite-page .app-screen-icon {
        display: grid;
        place-items: center;
        flex: 0 0 44px;
        height: 44px;
        border-radius: 12px;
        background: #eaf2ff;
        color: #0865e7;
        font-size: 20px;
    }

    .app-invite-page .app-screen-copy {
        flex: 1;
        min-width: 0;
    }

        .app-invite-page .app-screen-copy h1 {
            font-size: 22px;
            font-weight: 750;
            line-height: 1.25;
            margin: 0 0 3px;
            color: #082652;
        }

        .app-invite-page .app-screen-copy p {
            font-size: 13px;
            color: #496383;
            margin: 0;
        }

    .app-invite-page .app-screen-actions {
        margin-left: auto;
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
    }

    .app-invite-page .app-section {
        border: 1px solid #c9dcfc;
        border-radius: 13px;
        padding: 18px;
        margin-bottom: 16px;
        background: #fff;
        min-width: 0;
    }

        .app-invite-page .app-section h2 {
            font-size: 17px;
            font-weight: 750;
            margin: 0 0 10px;
            color: #082652;
        }

    .app-invite-page .input-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 9px 0;
    }

        .app-invite-page .input-container input, .app-invite-page .input-container select, .app-invite-page .input-container textarea, .app-invite-page input.input {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            min-height: 44px;
            padding: 10px 12px;
            border-radius: 9px;
            border: 1px solid #b6c9e9;
            background: #f9fbff;
            color: #082652;
            font-size: 14px;
        }

            .app-invite-page .input-container input:focus, .app-invite-page input.input:focus {
                outline: 2px solid #0865e7;
                outline-offset: 1px;
            }

    .app-invite-page label.placeholder {
        position: static !important;
        display: block;
        transform: none !important;
        font-size: 13px;
        font-weight: 650;
        color: #082652;
        margin: 0 0 5px;
        background: none;
        padding: 0;
    }

    .app-invite-page input[readonly] {
        background: #eff4fb !important;
        color: #496383;
    }

    .app-invite-page .app-search {
        width: 100%;
        max-width: 430px;
        min-height: 42px;
        padding: 9px 12px;
        border: 1px solid #b6c9e9;
        border-radius: 10px;
        background: #fff;
        color: #082652;
        margin-bottom: 14px;
    }

    .app-invite-page .app-table-wrap {
        overflow-x: auto;
        max-width: 100%;
        border: 1px solid #c9dcfc;
        border-radius: 12px;
        background: #fff;
    }

    .app-invite-page table.table {
        width: 100%;
        margin: 0;
        min-width: 640px;
        border-collapse: collapse;
        font-size: 13px;
    }

        .app-invite-page table.table th {
            background: #eef4ff;
            color: #082652;
            text-align: left;
            font-weight: 700;
            white-space: nowrap;
            padding: 12px;
        }

        .app-invite-page table.table td {
            padding: 11px 12px;
            vertical-align: middle;
            border-top: 1px solid #e4ecfa;
        }

    .app-invite-page .btn, .app-invite-page button.btn {
        border-radius: 9px;
        font-size: 13px;
        font-weight: 700;
        padding: 9px 13px;
        min-height: 38px;
        text-decoration: none;
        white-space: normal;
    }

    .app-invite-page .btn-danger {
        background: #fff;
        color: #ad293f;
        border: 1px solid #dcb8c0;
    }

    .app-invite-page .btn-success, .app-invite-page .btn-primary {
        background: #0865e7;
        border: 1px solid #0865e7;
        color: white;
    }

    .app-invite-page .btn-link {
        background: #f0f5ff;
        border: 1px solid #c9dcfc;
        color: #0752bb;
        display: inline-flex;
        margin: 2px;
    }

    .app-invite-page .app-qr-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
    }

        .app-invite-page .app-qr-grid img {
            max-width: 100%;
            height: auto;
        }

    .app-invite-page .app-status-note {
        background: #f2f7ff;
        border: 1px solid #c9dcfc;
        border-radius: 12px;
        padding: 14px;
        color: #496383;
    }

    .app-invite-page .app-status-note--warning {
        background: #fff7ee;
        border-color: #edd8a4;
        color: #7a4a13;
    }

    .app-invite-page [rel~=tooltip] {
        color: #0752bb;
    }

@media (max-width:700px) {
    .app-invite-page .app-screen-header {
        padding: 12px;
        gap: 10px;
    }

    .app-invite-page .app-screen-copy h1 {
        font-size: 19px;
    }

    .app-invite-page .app-screen-actions {
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
    }

    .app-invite-page .app-section {
        padding: 13px;
    }

    .app-invite-page .row {
        margin-left: 0;
        margin-right: 0;
    }

        .app-invite-page .row > [class*=col-] {
            padding-left: 0;
            padding-right: 0;
        }
}


/* === 05 / Invitation directories (compatibility) === */
.app-my-invites {
    color: #082652;
}

    .app-my-invites * {
        box-sizing: border-box;
    }

.app-my-invites-content {
    min-width: 0;
}

.app-my-invites-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0 18px;
}

.app-my-invites-search {
    width: min(100%,440px);
    min-width: 0;
}

    .app-my-invites-search label {
        display: block;
        margin-bottom: 6px;
        font-size: 13px;
        font-weight: 700;
        color: #082652;
    }

.app-my-invites-search-box {
    position: relative;
}

    .app-my-invites-search-box i {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: #0865e7;
        pointer-events: none;
    }

    .app-my-invites-search-box input {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 9px 14px 9px 39px;
        border: 1px solid #b6c9e9;
        border-radius: 10px;
        background: #fff;
        color: #082652;
        font: inherit;
        font-size: 14px;
    }

        .app-my-invites-search-box input:focus-visible {
            outline: 3px solid rgba(8,101,231,.24);
            outline-offset: 1px;
            border-color: #0865e7;
        }

.app-my-invites-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #496383;
}

.app-my-invites-count {
    color: #496383;
    font-size: 13px;
    font-weight: 650;
}

.app-my-invites-section-heading {
    margin-bottom: 10px;
}

    .app-my-invites-section-heading h2 {
        margin: 0 0 3px;
        color: #082652;
        font-size: 17px;
        font-weight: 750;
    }

    .app-my-invites-section-heading p {
        margin: 0;
        color: #496383;
        font-size: 13px;
    }

.app-my-invites-table-wrap {
    min-width: 0;
    width: 100%;
    border: 1px solid #b6c9e9;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.app-my-invites-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: #082652;
    font-size: 13px;
}

    .app-my-invites-table thead {
        background: #eaf2ff;
    }

    .app-my-invites-table th, .app-my-invites-table td {
        padding: 11px 13px;
        text-align: left;
        vertical-align: middle;
        border-bottom: 1px solid #dce6f6;
        overflow-wrap: anywhere;
    }

    .app-my-invites-table thead th {
        font-size: 13px;
        font-weight: 750;
    }

    .app-my-invites-table tbody tr:last-child th, .app-my-invites-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .app-my-invites-table tbody tr:hover {
        background: #f8fbff;
    }

    .app-my-invites-table tr[hidden] {
        display: none !important;
    }

.app-my-invites-visitor {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
}

    .app-my-invites-visitor i {
        color: #0865e7;
    }

.app-my-invites-subtext {
    display: block;
    margin-top: 4px;
    color: #496383;
    font-size: 11px;
    font-weight: 400;
}

.app-my-invites-actions-col, .app-my-invites-action-cell {
    width: 112px;
    text-align: right !important;
}

.app-my-invites-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 12px;
    background: #eaf2ff;
    border: 1px solid #c9dcfc;
    border-radius: 9px;
    color: #0752bb !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
}

    .app-my-invites-view:hover {
        border-color: #0865e7;
        background: #e0ecff;
    }

    .app-my-invites-view:focus-visible {
        outline: 3px solid #0865e7;
        outline-offset: 2px;
    }

.app-my-invites-empty {
    padding: 20px;
    margin: 0;
    color: #496383;
    font-size: 14px;
    text-align: center;
}

    .app-my-invites-empty[hidden] {
        display: none !important;
    }

@media (max-width:680px) {
    .app-my-invites-toolbar {
        align-items: flex-start;
    }

    .app-my-invites-search {
        width: 100%;
    }

    .app-my-invites-table thead {
        display: none;
    }

    .app-my-invites-table, .app-my-invites-table tbody, .app-my-invites-table tr, .app-my-invites-table th, .app-my-invites-table td {
        display: block;
        width: 100%;
    }

        .app-my-invites-table tbody tr {
            padding: 10px 13px;
            border-bottom: 1px solid #dce6f6;
        }

            .app-my-invites-table tbody tr:last-child {
                border-bottom: 0;
            }

            .app-my-invites-table tbody tr th, .app-my-invites-table tbody tr td {
                border: 0;
                padding: 5px 0;
            }

        .app-my-invites-table td::before {
            content: attr(data-label);
            display: inline-block;
            min-width: 105px;
            margin-right: 8px;
            color: #496383;
            font-weight: 650;
        }

        .app-my-invites-table td.app-my-invites-action-cell {
            text-align: right !important;
        }

            .app-my-invites-table td.app-my-invites-action-cell::before {
                display: none;
            }
}

.app-my-invites {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    padding: 4px 0 max(24px, env(safe-area-inset-bottom));
}

    .app-my-invites .app-screen-header {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 14px;
        min-width: 0;
        width: 100%;
        padding: 14px 18px;
        margin: 0 0 16px;
        border-radius: 12px;
        background: linear-gradient(90deg,#e5edf9 0%,#f2f6fd 48%,#fff 100%);
    }

    .app-my-invites .app-screen-icon {
        display: grid;
        place-items: center;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: #eaf2ff;
        color: #0865e7;
        font-size: 20px;
    }

    .app-my-invites .app-screen-copy {
        flex: 1 1 auto;
        min-width: 0;
    }

        .app-my-invites .app-screen-copy h1 {
            color: #082652;
            font-size: 22px;
            line-height: 1.25;
            font-weight: 750;
            margin: 0 0 3px;
        }

        .app-my-invites .app-screen-copy p {
            color: #496383;
            font-size: 13px;
            line-height: 1.4;
            margin: 0;
        }

    .app-my-invites .app-screen-actions {
        flex: 0 0 auto;
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .app-my-invites .app-screen-actions .app-header-action {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 7px;
            min-height: 40px;
            padding: 8px 13px;
            border-radius: 9px;
            border: 1px solid #b6c9e9;
            background: #fff;
            color: #082652;
            font-size: 13px;
            line-height: 1.2;
            font-weight: 700;
            white-space: nowrap;
            text-decoration: none;
        }

            .app-my-invites .app-screen-actions .app-header-action:hover {
                background: #eaf2ff;
                border-color: #0865e7;
            }

            .app-my-invites .app-screen-actions .app-header-action:focus-visible {
                outline: 3px solid #0865e7;
                outline-offset: 2px;
            }

    .app-my-invites .app-my-invites-content, .app-my-invites .app-my-invites-table-wrap {
        max-width: 100%;
        min-width: 0;
    }

    .app-my-invites .app-my-invites-table {
        table-layout: fixed;
        width: 100%;
        min-width: 0;
    }

        .app-my-invites .app-my-invites-table th:first-child {
            width: 33%;
        }

        .app-my-invites .app-my-invites-table th:nth-child(2) {
            width: 22%;
        }

        .app-my-invites .app-my-invites-table th:nth-child(3) {
            width: calc(45% - 100px);
        }

        .app-my-invites .app-my-invites-table th:last-child {
            width: 100px;
        }

@media (max-width:680px) {
    .app-my-invites .app-screen-header {
        gap: 10px;
        padding: 12px;
    }

    .app-my-invites .app-screen-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .app-my-invites .app-screen-copy h1 {
        font-size: 19px;
    }

    .app-my-invites .app-screen-actions .app-header-action {
        padding: 8px 10px;
    }

    .app-my-invites .app-my-invites-table th:first-child, .app-my-invites .app-my-invites-table th:nth-child(2), .app-my-invites .app-my-invites-table th:nth-child(3), .app-my-invites .app-my-invites-table th:last-child {
        width: 100%;
    }
}

@media (max-width:360px) {
    .app-my-invites .app-screen-header {
        flex-wrap: wrap;
    }

    .app-my-invites .app-screen-actions {
        margin-left: auto;
    }
}


/* === 06 / Visit history (compatibility) === */
.app-history-page {
    padding-bottom: max(20px,env(safe-area-inset-bottom));
    color: #082652;
}

    .app-history-page *, .app-history-page *::before, .app-history-page *::after {
        box-sizing: border-box;
    }

    .app-history-page .app-screen-header {
        display: flex;
        gap: 14px;
        padding: 14px 18px;
        margin: 0 0 16px;
        background: linear-gradient(90deg,#e5edf9 0%,#f2f6fd 48%,#fff 100%);
        border-radius: 12px;
    }

    .app-history-page .app-screen-icon, .app-history-section-icon {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 12px;
        background: #eaf2ff;
        color: #0865e7 !important;
        font-size: 19px;
    }

    .app-history-page .app-screen-copy {
        flex: 1;
        min-width: 0;
    }

        .app-history-page .app-screen-copy h1 {
            margin: 0 0 3px;
            font-size: 22px;
            line-height: 1.25;
            font-weight: 750;
            color: #082652;
        }

        .app-history-page .app-screen-copy p {
            margin: 0;
            font-size: 13px;
            color: #496383;
        }

    .app-history-page .app-screen-actions {
        margin-left: auto;
    }

        .app-history-page .app-screen-actions .app-header-action {
            display: inline-flex;
            gap: 8px;
            align-items: center;
            padding: 9px 13px;
            min-height: 42px;
            border: 1px solid #b6c9e9;
            background: #fff;
            border-radius: 9px;
            color: #082652;
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
        }

            .app-history-page .app-screen-actions .app-header-action:hover {
                background: #eaf2ff;
                border-color: #0865e7;
            }

.app-history-section {
    margin: 0 0 16px;
    padding: 17px 18px;
    background: #fff;
    border: 1px solid #c9dcfc;
    border-radius: 12px;
    min-width: 0;
}

.app-history-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
}

.app-history-section-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 16px;
    border-radius: 10px;
}

.app-history-section-head h2 {
    margin: 0 0 2px;
    color: #082652;
    font-size: 16px;
    font-weight: 750;
}

.app-history-section-head p {
    margin: 0;
    color: #496383;
    font-size: 12px;
}

.app-history-fields {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px 16px;
}

.app-history-field {
    min-width: 0;
}

    .app-history-field label {
        display: block;
        margin: 0 0 6px;
        color: #082652;
        font-size: 13px;
        font-weight: 700;
    }

.app-history-input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #b6c9e9;
    background: #f6f9fe;
    border-radius: 9px;
    color: #082652;
    font: inherit;
    font-size: 14px;
}

    .app-history-input[readonly] {
        background: #edf3fc;
    }

    .app-history-input:focus-visible {
        outline: 2px solid #0865e7;
        outline-offset: 1px;
    }

.app-history-search-row {
    display: flex;
    align-items: end;
    gap: 18px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 13px;
}

.app-history-search {
    flex: 1 1 260px;
    max-width: 460px;
}

.app-history-help {
    flex: 0 1 300px;
    font-size: 12px;
    color: #496383;
}

    .app-history-help summary {
        cursor: pointer;
        color: #0752bb;
        font-weight: 650;
    }

    .app-history-help p {
        margin: 6px 0;
    }

.app-history-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #c9dcfc;
    border-radius: 10px;
}

.app-history-table {
    width: 100%;
    border-collapse: collapse;
    color: #082652;
    font-size: 13px;
}

    .app-history-table th {
        padding: 12px;
        background: #edf3fc;
        text-align: left;
        font-weight: 750;
        white-space: nowrap;
    }

    .app-history-table td {
        padding: 12px;
        border-top: 1px solid #dce6f7;
        vertical-align: middle;
    }

.app-history-actions {
    min-width: 170px;
}

.app-history-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 2px 4px 2px 0;
    padding: 7px 10px;
    min-height: 36px;
    background: #f4f8ff;
    border: 1px solid #c9dcfc;
    border-radius: 8px;
    color: #0752bb;
    text-decoration: none;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

    .app-history-action:hover {
        border-color: #0865e7;
        background: #eaf2ff;
        text-decoration: none;
    }

.app-history-action--danger {
    color: #b72f45;
    background: #fffafa;
}

    .app-history-action--danger:hover {
        border-color: #b72f45;
        background: #fff0f2;
    }

.app-history-status {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.app-history-status--positive {
    background: #e6f7ed;
    color: #11643b;
}

.app-history-status--negative {
    background: #fff0f2;
    color: #a8203b;
}

.app-history-status--neutral {
    background: #eaf2ff;
    color: #0752bb;
}

.app-history-empty {
    color: #496383;
    font-size: 13px;
}

@media (max-width:750px) {
    .app-history-fields {
        grid-template-columns: 1fr;
    }

    .app-history-page .app-screen-header {
        padding: 12px;
        gap: 10px;
    }

    .app-history-page .app-screen-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .app-history-page .app-screen-copy h1 {
        font-size: 19px;
    }

    .app-history-section {
        padding: 13px;
    }

    .app-history-table thead {
        display: none;
    }

    .app-history-table tbody tr {
        display: block;
        padding: 10px;
        border-top: 1px solid #dce6f7;
    }

    .app-history-table td {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        justify-content: space-between;
        border: 0;
        padding: 6px 0;
    }

        .app-history-table td::before {
            content: attr(data-label);
            font-size: 12px;
            font-weight: 700;
            color: #496383;
        }

        .app-history-table td.app-history-actions {
            min-width: 0;
            justify-content: flex-end;
            flex-wrap: wrap;
        }

            .app-history-table td.app-history-actions::before {
                display: none;
            }
}

.app-history-page {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

    .app-history-page .app-screen-header {
        position: sticky;
        top: var(--app-sticky-header-offset,0px);
        z-index: 30;
        align-items: center;
        min-height: 74px;
        box-shadow: 0 4px 15px rgba(8,38,82,.04);
    }

    .app-history-page .app-history-section-head {
        justify-content: flex-start;
        text-align: left;
    }

        .app-history-page .app-history-section-head > div {
            min-width: 0;
        }

        .app-history-page .app-history-section-head h2, .app-history-page .app-history-section-head p {
            text-align: left;
        }

    .app-history-page .app-history-search-row .app-history-search {
        width: min(100%,460px);
        flex: 1 1 280px;
    }

    .app-history-page .app-history-field .app-history-input {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        line-height: 22px !important;
        background: #f6f9fe;
        border: 1px solid #b6c9e9;
        border-radius: 9px;
        box-shadow: none;
    }

    .app-history-page .app-history-field label {
        position: static !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        line-height: 1.4 !important;
        margin: 0 0 6px !important;
    }

    .app-history-page .app-history-table-wrap {
        overflow-x: auto;
    }

    .app-history-page .app-history-table {
        min-width: 640px;
    }

@media (max-width:750px) {
    .app-history-page .app-history-table {
        min-width: 0;
    }

    .app-history-page .app-screen-header {
        flex-wrap: wrap;
    }

    .app-history-page .app-screen-actions {
        margin-left: auto;
    }
}

.app-my-invites, .app-my-invites * {
    box-sizing: border-box;
}

    .app-my-invites .app-screen-header {
        position: sticky;
        top: var(--app-sticky-header-offset,0px);
        z-index: 30;
        box-shadow: 0 4px 15px rgba(8,38,82,.05);
    }

    .app-my-invites .app-my-invites-toolbar {
        gap: 12px;
    }

    .app-my-invites .app-my-invites-search {
        max-width: min(100%,440px);
    }

    .app-my-invites .app-my-invites-search-box input {
        background: #f9fbff;
    }

        .app-my-invites .app-my-invites-search-box input:focus {
            border-color: #0865e7;
            box-shadow: 0 0 0 3px rgba(8,101,231,.15);
            outline: none;
        }

    .app-my-invites .app-my-invites-view:focus-visible {
        outline: 3px solid #0865e7;
        outline-offset: 2px;
    }

    .app-my-invites .app-my-invites-table tbody tr[hidden] {
        display: none !important;
    }

@media (max-width:680px) {
    .app-my-invites .app-my-invites-search {
        max-width: 100%;
    }

    .app-my-invites .app-my-invites-table-wrap {
        overflow: hidden;
    }

    .app-my-invites .app-my-invites-table {
        width: 100%;
        min-width: 0;
    }

        .app-my-invites .app-my-invites-table th,
        .app-my-invites .app-my-invites-table td {
            overflow-wrap: anywhere;
        }
}


/* === 07 / Legacy checkpoint components (compatibility only) === */
.point-page {
    --point-navy: #082652;
    --point-blue: #0865e7;
    --point-border: #b6c9e9;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 10px 16px 40px;
    box-sizing: border-box;
    color: var(--point-navy);
}

    .point-page *, .point-page *::before, .point-page *::after {
        box-sizing: border-box;
    }

    .point-page .point-heading {
        position: sticky;
        top: var(--app-sticky-header-offset,0px);
        z-index: 110;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 12px;
        align-items: center;
        border: 1px solid #c9dcfc;
        border-radius: 12px;
        background: linear-gradient(90deg,#e5edf9,#f2f6fd 50%,#fff);
        padding: 12px 15px;
        box-shadow: 0 3px 12px rgba(8,38,82,.06);
    }

    .point-page .app-heading-main {
        display: flex;
        align-items: center;
        min-width: 0;
        gap: 12px;
    }

    .point-page .app-heading-icon {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 12px;
        background: #e6f0ff;
        color: #0865e7;
        font-size: 20px;
    }

    .point-page .app-heading-main h1 {
        font-size: 20px;
        font-weight: 750;
        color: #082652;
        margin: 0 0 3px;
    }

    .point-page .app-heading-main p {
        font-size: 13px;
        line-height: 1.3;
        color: #496383;
        margin: 0;
    }

    .point-page .point-header-actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-left: auto;
    }

    .point-page .app-header-action {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        min-height: 42px;
        gap: 8px;
        padding: 9px 15px;
        border: 1px solid #b6c9e9;
        border-radius: 9px;
        background: #fff;
        color: #082652;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.2;
        text-decoration: none;
        cursor: pointer;
        font-family: inherit;
    }

    .point-page .app-header-action--primary {
        color: #fff;
        background: #0865e7;
        border-color: #0865e7;
    }

        .point-page .app-header-action--primary:hover {
            color: #fff;
            background: #0752bb;
        }

    .point-page .point-danger-action {
        color: #fff;
        background: #bf2940;
        border-color: #bf2940;
    }

        .point-page .point-danger-action:hover {
            color: #fff;
            background: #a31d33;
        }

    .point-page .app-header-action:focus-visible {
        outline: 3px solid #0865e7;
        outline-offset: 2px;
    }

    .point-page .point-header-message {
        flex: 1 1 100%;
        border: 1px solid #b6c9e9;
        background: #fff;
        border-radius: 9px;
        padding: 10px 12px;
        color: #082652;
        font-size: 13px;
    }

        .point-page .point-header-message[hidden] {
            display: none;
        }

        .point-page .point-header-message.point-is-error {
            border-color: #dc97a2;
            color: #991b32;
            background: #fff7f8;
        }

        .point-page .point-header-message.point-is-choice {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
        }

    .point-page .point-body {
        padding: 10px 2px 55px;
        min-width: 0;
    }

    .point-page .point-form {
        display: grid;
        column-gap: 16px;
        row-gap: 12px;
    }

        .point-page .point-form > .point-section-title, .point-page .point-form > .point-field-group, .point-page .point-form > .point-day-access, .point-page .point-form > .text-center {
            grid-column: 1/-1;
        }

        .point-page .point-form > input[type=hidden] {
            display: none;
        }

    .point-page .point-section-title {
        font-size: 15px;
        font-weight: 750;
        color: #082652;
        border-bottom: 1px solid #dce6f7;
        padding: 14px 0 8px;
        margin: 10px 0 1px;
    }

    .point-page .input-container.ic1 {
        position: static;
        min-width: 0;
        height: auto;
        padding: 0;
        margin: 0;
        border: 0;
        background: none;
    }

    .point-page .point-label, .point-page .point-search-label {
        display: block;
        position: static;
        margin: 0 0 6px;
        padding: 0;
        font-size: 13px;
        font-weight: 700;
        color: #082652;
        transform: none;
        pointer-events: auto;
    }

    .point-page .point-input {
        display: block;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 44px;
        border: 1px solid #b6c9e9;
        border-radius: 9px;
        background: #f9fbff;
        color: #082652;
        padding: 10px 12px;
        font: inherit;
        font-size: 14px;
    }

        .point-page .point-input:focus {
            outline: 2px solid #0865e7;
            outline-offset: 1px;
            border-color: #0865e7;
            background: #fff;
        }

        .point-page .point-input[readonly] {
            background: #f0f3f8;
            color: #496383;
        }

    .point-page .point-validation {
        display: block;
        color: #a61d36;
        font-size: 12px;
    }

        .point-page .point-validation:empty {
            display: none;
        }

    .point-page .point-checkbox {
        width: 17px;
        height: 17px;
        accent-color: #0865e7;
        vertical-align: middle;
    }

    .point-page .point-form > div:not(.input-container):not(.point-field-group):not(.point-day-access):not(.text-center):not(.point-section-title) {
        min-width: 0;
    }

    .point-page .point-form label:not(.point-label):not(.point-search-label) {
        color: #082652;
        font-size: 13px;
    }

    .point-page .point-day-access {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        border-bottom: 1px solid #e4ecf8;
    }

    .point-page .point-qr-image {
        display: block;
        max-width: 220px;
        width: 100%;
        height: auto;
        border-radius: 9px;
        margin: 12px auto;
    }

    .point-page .point-table-wrap {
        width: 100%;
    }

    .point-page .point-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

        .point-page .point-table th {
            text-align: left;
            background: #edf4ff;
            color: #082652;
            padding: 12px;
            border-bottom: 1px solid #c9dcfc;
        }

        .point-page .point-table td {
            padding: 13px 12px;
            border-bottom: 1px solid #dfe8f5;
            color: #082652;
            overflow-wrap: anywhere;
        }

        .point-page .point-table tr[hidden] {
            display: none;
        }

    .point-page .point-search {
        max-width: 430px;
        margin-bottom: 15px;
    }

    .point-page .point-actions {
        white-space: nowrap;
    }

    .point-page .point-row-link {
        display: inline-block;
        color: #0752bb;
        padding: 6px 9px;
        border-radius: 7px;
        font-weight: 700;
        text-decoration: none;
    }

        .point-page .point-row-link:hover {
            background: #eaf2ff;
        }

    .point-page .point-row-link--danger {
        color: #b0233c;
    }

    .point-page .point-details {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 12px;
    }

    .point-page .point-detail {
        padding: 12px 14px;
        border: 1px solid #dce6f7;
        background: #f9fbff;
        border-radius: 10px;
        min-width: 0;
    }

        .point-page .point-detail dt {
            font-size: 12px;
            font-weight: 600;
            color: #496383;
        }

        .point-page .point-detail dd {
            margin: 4px 0 0;
            font-size: 14px;
            overflow-wrap: anywhere;
        }

    .point-page .point-warning {
        border: 1px solid #e3bd88;
        background: #fff9ed;
        border-radius: 9px;
        padding: 12px;
        color: #6c4313;
    }

@media (max-width:700px) {
    .point-page {
        padding: 8px 10px 60px;
    }

        .point-page .point-heading {
            padding: 10px;
        }

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

        .point-page .point-day-access {
            grid-template-columns: 1fr;
        }

        .point-page .point-details {
            grid-template-columns: 1fr;
        }

        .point-page .point-header-actions {
            width: 100%;
            justify-content: flex-end;
        }

        .point-page .app-header-action {
            padding: 8px 10px;
        }

        .point-page .point-table thead {
            display: none;
        }

        .point-page .point-table tr {
            display: block;
            border: 1px solid #dce6f7;
            border-radius: 9px;
            margin-bottom: 10px;
        }

        .point-page .point-table td {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            border: 0;
            padding: 6px 10px;
        }

            .point-page .point-table td:before {
                content: attr(data-label);
                color: #496383;
                font-weight: 600;
            }

        .point-page .point-actions {
            white-space: normal;
        }
}

.point-page .point-table-wrap {
    border: 1px solid #c9dcfc;
    border-radius: 10px;
    overflow-x: auto;
    background: #fff;
}

.point-page .point-table {
    min-width: 0;
}

    .point-page .point-table tbody tr:hover {
        background: #f8fbff;
    }

.point-page .point-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

    .point-page .point-actions .point-row-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: 6px 10px;
        border: 1px solid #c9dcfc;
        background: #f4f8ff;
        border-radius: 8px;
        color: #0752bb;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.25;
        text-decoration: none;
        white-space: nowrap;
    }

        .point-page .point-actions .point-row-link:hover {
            border-color: #0865e7;
            background: #eaf2ff;
        }

    .point-page .point-actions .point-row-link--danger {
        color: #a8203b;
        border-color: #ecc6cf;
        background: #fffafb;
    }

        .point-page .point-actions .point-row-link--danger:hover {
            background: #fff0f2;
            border-color: #b0233c;
        }

.point-page .point-search-label {
    margin-top: 10px;
}

.point-page .point-table td[data-label="Actions"] {
    min-width: 185px;
}

@media (max-width:700px) {
    .point-page .point-table-wrap {
        border: 0;
        background: transparent;
        overflow: visible;
    }

    .point-page .point-table tr {
        background: #fff;
    }

    .point-page .point-table td[data-label="Actions"] {
        min-width: 0;
    }

    .point-page .point-actions {
        justify-content: flex-end;
    }

        .point-page .point-actions::before {
            display: none;
        }
}

.point-page .point-form {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px 16px;
    align-items: start;
}

    .point-page .point-form > .point-section-title {
        font-size: 14px;
        margin: 7px 0 0;
        padding: 9px 0 7px;
    }

    .point-page .point-form .point-input {
        min-height: 40px;
        padding: 8px 11px;
    }

    .point-page .point-form .point-label {
        margin-bottom: 4px;
    }

    .point-page .point-form > div:not(.input-container):not(.point-field-group):not(.point-day-access):not(.point-qr-panels):not(.text-center) {
        align-self: center;
    }

.point-page .point-field-group {
    min-width: 0;
}

.point-page .point-day-access {
    padding: 7px 0;
    gap: 10px;
}

.point-page .point-qr-panels {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    align-items: stretch;
}

.point-page .point-qr-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #c9dcfc;
    border-radius: 12px;
    background: #fff;
    padding: 15px;
    gap: 12px;
}

.point-page .point-qr-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.point-page .point-qr-panel-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    background: #eaf2ff;
    border-radius: 9px;
    color: #0865e7;
}

.point-page .point-qr-panel-head h2 {
    font-size: 14px;
    line-height: 1.3;
    color: #082652;
    font-weight: 750;
    margin: 0;
}

.point-page .point-qr-panel-head p {
    font-size: 12px;
    color: #496383;
    margin: 3px 0 0;
}

.point-page .point-qr-preview {
    min-height: 176px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: #f9fbff;
    border: 1px solid #e1eafa;
    border-radius: 9px;
    overflow: hidden;
}

    .point-page .point-qr-preview .point-qr-image {
        display: block;
        width: 160px;
        height: 160px;
        max-width: 100%;
        max-height: 160px;
        object-fit: contain;
        margin: 0;
        border-radius: 0;
    }

.point-page .point-qr-empty {
    color: #58749c;
    font-size: 12px;
}

.point-page .point-qr-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    flex-wrap: wrap;
}

    .point-page .point-qr-actions .app-header-action {
        min-height: 38px;
    }

@media (max-width:750px) {
    .point-page .point-qr-panels {
        grid-template-columns: 1fr;
    }

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

.point-page .point-form > .point-section-title,
.point-page .point-form .point-field-group > .point-section-title {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 10px 0 0;
    min-width: 0;
    border: 1px solid #c9dcfc;
    border-radius: 11px;
    background: linear-gradient(90deg,#eef4fe,#f9fbff 85%);
    color: #082652;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.3;
}

.point-page .point-section-symbol {
    display: inline-grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #e5efff;
    color: #0865e7;
    font-size: 15px;
}

    .point-page .point-section-symbol i {
        color: #0865e7;
    }

.point-page .point-form > div:not(.input-container):not(.point-field-group):not(.point-day-access):not(.point-qr-panels):not(.text-center) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid #dce6f7;
    border-radius: 9px;
    background: #fff;
}

    .point-page .point-form > div:not(.input-container):not(.point-field-group):not(.point-day-access):not(.point-qr-panels):not(.text-center) > .point-validation {
        flex-basis: 100%;
    }

.point-page .point-form .point-checkbox {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    accent-color: #0865e7;
    margin: 0 2px 0 0;
}

.point-page .point-form label:has(> input[type=radio]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 35px;
    margin: 0 6px 5px 0;
    padding: 7px 10px;
    border: 1px solid #dce6f7;
    border-radius: 8px;
    background: #f9fbff;
    cursor: pointer;
    font-size: 13px;
}

    .point-page .point-form label:has(> input[type=radio]):has(input:checked) {
        background: #eaf2ff;
        border-color: #0865e7;
    }

    .point-page .point-form label:has(> input[type=radio]):focus-within {
        outline: 2px solid #0865e7;
        outline-offset: 2px;
    }

.point-page .point-form .input-container.ic1 {
    align-self: stretch;
}

.point-page .point-form .point-field-group {
    padding: 0;
}

    .point-page .point-form .point-field-group .point-section-title {
        margin-bottom: 10px;
    }

.point-page .point-form .point-day-access {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    padding: 8px 10px;
    margin-bottom: 7px;
    border: 1px solid #e1eafa;
    border-radius: 9px;
    background: #fff;
}

    .point-page .point-form .point-day-access .input-container.ic1 {
        margin: 0;
    }

.point-page .point-form .point-input {
    max-width: 100%;
}

.point-page .point-form > .app-header-action {
    justify-self: start;
}

@media (max-width:750px) {
    .point-page .point-form .point-day-access {
        grid-template-columns: 1fr;
    }

    .point-page .point-form > .point-section-title {
        padding: 9px 10px;
    }
}

.point-page .point-form > div:has(> input.point-checkbox[type="checkbox"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 9px;
    min-width: 0;
    min-height: 40px;
    padding: 8px 11px;
    margin: 0;
    border: 1px solid #dce6f7;
    border-radius: 9px;
    background: #f9fbff;
    color: #082652;
    cursor: pointer;
    transition: background-color .12s,border-color .12s;
}

.point-page .point-form > div:has(> input.point-checkbox[type="checkbox"]:checked) {
    border-color: #0865e7;
    background: #eaf2ff;
}

.point-page .point-form > div:has(> input.point-checkbox[type="checkbox"]):hover {
    border-color: #8fb8f6;
    background: #f1f7ff;
}

.point-page .point-form > div:has(> input.point-checkbox[type="checkbox"]):focus-within {
    outline: 2px solid #0865e7;
    outline-offset: 2px;
}

.point-page .point-form > div > input.point-checkbox[type="checkbox"] {
    position: static;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin: 0;
    accent-color: #0865e7;
    align-self: center;
}

    .point-page .point-form > div > input.point-checkbox[type="checkbox"] + label {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        font-size: 13px;
        line-height: 1.4;
        font-weight: 500;
        color: #082652;
        cursor: pointer;
        position: static;
        transform: none;
        text-align: left;
    }

.point-page .point-form > div:has(> input.point-checkbox[type="checkbox"]) > .point-validation {
    flex: 0 0 100%;
}

@media (prefers-reduced-motion:reduce) {
    .point-page .point-form > div:has(> input.point-checkbox[type="checkbox"]) {
        transition: none;
    }
}

.point-page .point-form > .point-camera-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 44px;
    padding: 8px;
    border: 1px solid #dce6f7;
    border-radius: 10px;
    background: #fff;
}

.point-page .point-form .point-camera-choice {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 36px;
    margin: 0;
    padding: 8px 11px;
    border: 1px solid #dce6f7;
    border-radius: 8px;
    background: #f9fbff;
    color: #082652;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
    position: static;
    transform: none;
    white-space: normal;
}

    .point-page .point-form .point-camera-choice:has(input:checked) {
        background: #eaf2ff;
        border-color: #0865e7;
    }

    .point-page .point-form .point-camera-choice:hover {
        border-color: #8fb8f6;
    }

    .point-page .point-form .point-camera-choice:focus-within {
        outline: 2px solid #0865e7;
        outline-offset: 2px;
    }

    .point-page .point-form .point-camera-choice > input.point-checkbox {
        position: static;
        flex: 0 0 17px;
        width: 17px;
        height: 17px;
        margin: 0;
        accent-color: #0865e7;
    }

.point-page .point-form .point-camera-options > .point-validation:empty {
    display: none;
}

.point-page .point-form .point-camera-options > .point-validation:not(:empty) {
    flex-basis: 100%;
}

@media (max-width:540px) {
    .point-page .point-form .point-camera-choice {
        flex: 1 1 160px;
    }
}

.point-page .point-form .point-field-group:has(.point-day-access),
.point-page .point-form .point-day-access,
.point-page .point-form .point-day-access > .input-container.ic1 {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

    .point-page .point-form .point-day-access > .input-container.ic1 {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        height: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .point-page .point-form .point-day-access .point-label {
        position: static;
        display: block;
        transform: none;
        margin: 0 0 5px;
        height: auto;
        width: auto;
        line-height: 1.3;
        font-size: 13px;
    }

    .point-page .point-form .point-day-access input.point-schedule-time,
    .point-page .point-form .point-day-access input.point-schedule-time[type="time"] {
        box-sizing: border-box;
        display: block;
        flex: 0 1 auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: 42px;
        min-height: 42px;
        max-height: 42px;
        margin: 0;
        padding: 7px 10px;
        border-radius: 9px;
        font-size: 16px;
        line-height: normal;
        text-align: left;
        -webkit-appearance: auto;
        appearance: auto;
    }

@media (max-width:750px) {
    .point-page .point-form .point-day-access {
        display: grid;
        grid-template-columns: minmax(0,1fr);
        gap: 10px;
        padding: 10px;
        margin-bottom: 8px;
    }
}

:root {
    --app-content-max-width: 1220px;
    --app-page-gutter: 20px;
    --app-page-navy: #082652;
    --app-page-blue: #0865e7;
    --app-page-border: #b6c9e9;
}

.app-layout-content,
.app-layout-content *,
.app-layout-content *::before,
.app-layout-content *::after {
    box-sizing: border-box;
}


/* === 08 / Site layout, typography and viewport conventions === */
.app-layout-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

    .app-layout-content > :is(div,main,section):not(.point-page):not(:where(.report-mode-modal,.report-overlay,#reportOverlay)) {
        box-sizing: border-box;
        display: block;
        width: calc(100% - (2 * var(--app-page-gutter)));
        min-width: 0;
        max-width: var(--app-content-max-width);
        margin-inline: auto;
    }

    /* Fixed dialogs and busy overlays must fill the viewport rather than follow
   the constrained page-container layout. Their visibility remains JS-controlled. */
    .app-layout-content > :is(.report-mode-modal,.report-overlay,#reportOverlay) {
        width: 100vw;
        max-width: none;
        margin-inline: 0;
    }

    .app-layout-content > .point-page {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 1440px;
        margin-inline: auto;
    }

    .app-layout-content :is(.app-menu,.app-invite,.app-invite-page,.app-edit-invite,.app-my-invites,.app-history-page,.app-history-section,.app-form-section,.app-form-grid,.app-edit-form-grid,.app-table-wrap,.app-screen-header,.app-heading,.point-form,.point-day-access,.point-field-group) {
        min-width: 0;
        max-width: 100%;
    }

    .app-layout-content :is(input,select,textarea,img,video,canvas) {
        max-width: 100%;
    }

    .app-layout-content :is(.app-heading--sticky,.point-heading) {
        max-width: 100%;
    }

@media (max-width:768px) {
    :root {
        --app-page-gutter: 12px;
    }

    .app-layout-content > :is(div,main,section):not(.point-page):not(:where(.report-mode-modal,.report-overlay,#reportOverlay)) {
        width: calc(100% - (2 * var(--app-page-gutter)));
        max-width: none;
    }

    .app-layout-content :is(.app-form-grid,.app-edit-form-grid,.app-history-fields) {
        grid-template-columns: minmax(0,1fr);
    }
}

@media (max-width:380px) {
    :root {
        --app-page-gutter: 10px;
    }
}

:where(.app-layout-content, .app-invite, .app-edit-invite, .app-invite-page, .app-form, .point-page) {
    --app-control-height: 44px;
}

:where(.app-invite, .app-edit-invite, .app-invite-page, .app-form, .point-page)
:is(.app-form-grid, .app-form-field, .app-form-section, .point-day-access, .point-field-group, .input-container) {
    min-width: 0;
    max-width: 100%;
}

:where(.app-invite, .app-edit-invite, .app-invite-page, .app-form, .point-page)
:is(input[type="time"], input[type="date"], input[type="datetime-local"]) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: var(--app-control-height);
    padding-inline: 10px;
    font-size: 16px;
    line-height: normal;
    -webkit-appearance: auto;
    appearance: auto;
}

    :where(.app-invite, .app-edit-invite, .app-invite-page, .app-form, .point-page)
    :is(input[type="time"], input[type="date"], input[type="datetime-local"])::-webkit-datetime-edit {
        min-width: 0;
        max-width: 100%;
    }

@media (max-width:768px) {
    :where(.app-invite, .app-edit-invite, .app-invite-page, .app-form, .point-page)
    :is(.app-form-grid, .app-edit-form-grid, .app-history-fields) {
        grid-template-columns: minmax(0,1fr);
    }

    :where(.app-invite, .app-edit-invite, .app-invite-page, .app-form, .point-page)
    :is(input[type="time"], input[type="date"], input[type="datetime-local"]) {
        font-size: 16px;
    }
}

/* Main menu: match the V2 page-top breathing room without the old
   extra 20px desktop-only gap. Keep this scoped to the menu container. */
.app-layout-content > .app-menu {
    padding-block-start: 12px;
}

@media (min-width: 769px) {
    .app-layout-content > .app-menu {
        padding-block-start: 16px;
    }
}


/* Consistent page-top breathing room; main menu and checkpoints retain their approved offsets */

@media (min-width:769px) {
    .app-layout-content > :is(.app-invite,.app-invite-page,.app-edit-invite,.app-my-invites,.app-history-page,.app-form,.app-screen):not(.point-page) {
        padding-block-start: 16px;
    }
}

@media (max-width:768px) {
    .app-layout-content > :is(.app-invite,.app-invite-page,.app-edit-invite,.app-my-invites,.app-history-page,.app-form,.app-screen):not(.point-page) {
        padding-block-start: 12px;
    }
}


/* Canonical portal heading typography (page-specific typography overrides end here). */

:root {
    --app-page-heading-size: 20px;
    --app-section-heading-size: 16px;
    --app-heading-description-size: 13px;
    --app-heading-weight: 750;
}


/* Page headers: accommodate direct h1 and headings inside copy wrappers. */

:is(.app-menu, .app-login, .app-invite, .app-invite-page, .app-edit-invite, .app-my-invites, .app-history-page, .app-form, .point-page)
:is(.app-heading, .app-login-heading, .app-screen-heading, .app-screen-header, .point-heading)
h1,
:is(.app-invite-page, .app-my-invites, .app-history-page)
.app-screen-copy h1,
.point-page .point-heading .app-heading-main h1 {
    font-size: var(--app-page-heading-size) !important;
    font-weight: var(--app-heading-weight) !important;
    line-height: 1.25 !important;
    color: #082652 !important;
    margin-block: 0 3px;
}

:is(.app-menu, .app-login, .app-invite, .app-invite-page, .app-edit-invite, .app-my-invites, .app-history-page, .app-form, .point-page)
:is(.app-heading, .app-login-heading, .app-screen-heading, .app-screen-header, .point-heading) p,
:is(.app-invite-page, .app-my-invites, .app-history-page)
.app-screen-copy > p,
.point-page .point-heading .app-heading-main p {
    font-size: var(--app-heading-description-size) !important;
    font-weight: 400;
    line-height: 1.4 !important;
    color: #496383;
}


/* Form section titles, not tile titles, labels or action copy. */

:is(.app-form, .app-invite, .app-invite-page, .app-edit-invite, .app-my-invites, .app-history-page, .point-page)
:is(.app-form-section-title, .app-section > h2, .app-my-invites-section-heading h2, .point-section-title, .point-qr-panel-head h2, .app-edit-section-head h2),
.point-page .point-form > .point-section-title,
.point-page .point-form .point-field-group > .point-section-title {
    font-size: var(--app-section-heading-size) !important;
    font-weight: var(--app-heading-weight) !important;
    line-height: 1.35 !important;
    color: #082652 !important;
}

@media (max-width: 540px) {
    :root {
        --app-page-heading-size: 18px;
        --app-section-heading-size: 15px;
    }
}


/* Stable viewport geometry between short and long pages.
   Preserve component-specific widths and header dimensions. */

@supports (scrollbar-gutter: stable) {
    html {
        scrollbar-gutter: stable;
    }
}

@media (min-width: 769px) {
    html {
        min-height: 100%;
    }

    body {
        min-height: 100vh;
    }
}


/* Administration: compact tools, shared sticky feedback/actions */


/* === 09 / Administration tools (compatibility) === */
.app-admin-tools .app-heading {
    flex-wrap: wrap;
}

.app-admin-tools .app-admin-feedback {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-basis: 100%;
    padding: 10px 13px;
    background: #f1f6ff;
    border: 1px solid #b6c9e9;
    border-radius: 9px;
    color: #082652;
    font-size: 13px;
}

    .app-admin-tools .app-admin-feedback[hidden] {
        display: none !important;
    }

    .app-admin-tools .app-admin-feedback strong {
        font-weight: 750;
    }

    .app-admin-tools .app-admin-feedback span {
        color: #496383;
    }

.app-admin-tools .app-form-section {
    max-width: 100%;
}

.app-admin-tools .app-form-field {
    min-width: 0;
}

.app-admin-tools .app-admin-textarea {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 88px;
    resize: vertical;
}

.app-admin-tools .app-admin-options {
    border: 0;
    padding: 0;
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin: 14px 0;
}

    .app-admin-tools .app-admin-options legend {
        font-size: 13px;
        font-weight: 700;
        color: #082652;
        margin-bottom: 8px;
    }

.app-admin-tools .app-admin-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid #b6c9e9;
    background: #f9fbff;
    border-radius: 10px;
    color: #082652;
    font-size: 13px;
    min-height: 42px;
    cursor: pointer;
}

    .app-admin-tools .app-admin-chip:has(input:checked) {
        background: #eaf2ff;
        border-color: #0865e7;
    }

    .app-admin-tools .app-admin-chip input {
        accent-color: #0865e7;
        margin: 0;
    }

    .app-admin-tools .app-admin-chip:focus-within {
        outline: 2px solid #0865e7;
        outline-offset: 2px;
    }

.app-admin-tools .app-admin-hint {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12px;
    color: #496383;
    margin: 12px 0 0;
}

    .app-admin-tools .app-admin-hint i {
        color: #0865e7;
    }

.app-admin-tools .app-admin-risk-confirm {
    margin-top: 18px;
    max-width: 100%;
}

.app-admin-tools .app-admin-server-message {
    padding: 10px 12px;
    margin: 10px 0;
    background: #eef5ff;
    border: 1px solid #b6c9e9;
    border-radius: 10px;
    color: #082652;
}

@media (max-width:650px) {
    .app-admin-tools .app-heading-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .app-admin-tools .app-admin-feedback {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Admin Devices: shared header and compact, searchable site tables */


/* === 10 / Device management (compatibility) === */
.app-device-page {
    width: min(100% - 24px,1220px);
    margin: 16px auto 32px;
    min-width: 0;
    color: #082652;
    box-sizing: border-box;
}

    .app-device-page *, .app-device-page *::before, .app-device-page *::after {
        box-sizing: border-box;
    }

    .app-device-page .app-heading {
        position: sticky;
        top: var(--app-sticky-header-offset,0px);
        z-index: 30;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        box-shadow: 0 5px 16px rgba(8,38,82,.06);
    }

        .app-device-page .app-heading h1 {
            font-size: 20px;
            font-weight: 750;
            line-height: 1.2;
            margin: 0 0 3px;
        }

        .app-device-page .app-heading p {
            font-size: 13px;
            line-height: 1.4;
            margin: 0;
        }

    .app-device-page .app-heading-icon {
        width: 42px;
        flex: 0 0 42px;
        height: 42px;
        font-size: 20px;
        border-radius: 12px;
    }

.app-device-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 16px 0;
}

.app-device-search {
    width: min(100%,420px);
    min-width: 0;
}

    .app-device-search label {
        display: block;
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 6px;
    }

.app-device-counter, .app-device-site-count {
    font-size: 12px;
    color: #496383;
    white-space: nowrap;
}

.app-device-site {
    margin: 16px 0 20px;
    min-width: 0;
}

.app-device-site-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border-radius: 10px;
    background: #eff5fe;
    color: #082652;
    margin-bottom: 8px;
}

    .app-device-site-heading i {
        color: #0865e7;
    }

    .app-device-site-heading h2 {
        font-size: 16px;
        font-weight: 750;
        margin: 0;
        flex: 1;
        min-width: 0;
    }

.app-device-table-wrap {
    overflow-x: auto;
    border: 1px solid #c9dcfc;
    border-radius: 10px;
    max-width: 100%;
}

.app-device-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .app-device-table th, .app-device-table td {
        padding: 11px 13px;
        text-align: left;
        border-bottom: 1px solid #e4ecfa;
        vertical-align: middle;
    }

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

    .app-device-table thead th {
        background: #f7faff;
        color: #496383;
        font-weight: 750;
    }

    .app-device-table tbody tr:hover {
        background: #f6f9ff;
    }

.app-device-row[hidden], .app-device-site[hidden], #deviceNoMatches[hidden] {
    display: none !important;
}

.app-device-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.app-device-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid #b6c9e9;
    border-radius: 8px;
    text-decoration: none !important;
    color: #0752bb;
    background: #fff;
    font-weight: 650;
}

    .app-device-action:hover, .app-device-action:focus-visible {
        border-color: #0865e7;
        background: #eaf2ff;
        color: #0752bb;
    }

.app-device-action--danger {
    color: #ae3046;
}

    .app-device-action--danger:hover, .app-device-action--danger:focus-visible {
        color: #ae3046;
        background: #fff0f3;
        border-color: #d6a0aa;
    }

.app-device-action:focus-visible {
    outline: 3px solid #0865e7;
    outline-offset: 2px;
}

.app-device-empty, .app-device-site-empty {
    padding: 18px;
    border: 1px dashed #c9dcfc;
    border-radius: 10px;
    background: #fafcff;
    color: #496383;
    font-size: 13px;
}

@media (max-width:650px) {
    .app-device-page {
        width: calc(100% - 24px);
        margin: 12px auto 24px;
    }

        .app-device-page .app-heading {
            padding: 10px;
            gap: 8px;
        }

            .app-device-page .app-heading h1 {
                font-size: 18px;
            }

            .app-device-page .app-heading p {
                font-size: 13px;
            }

        .app-device-page .app-heading-actions {
            margin-left: auto;
        }

    .app-device-toolbar {
        align-items: stretch;
    }

    .app-device-search {
        width: 100%;
    }

    .app-device-table-wrap {
        border: 0;
        overflow: visible;
    }

    .app-device-table, .app-device-table tbody, .app-device-table tr, .app-device-table td {
        display: block;
        width: 100%;
    }

        .app-device-table thead {
            display: none;
        }

        .app-device-table tr {
            border: 1px solid #c9dcfc;
            border-radius: 10px;
            margin-bottom: 9px;
            background: #fff;
            overflow: hidden;
        }

        .app-device-table td {
            display: flex;
            align-items: start;
            justify-content: space-between;
            gap: 12px;
            padding: 8px 11px;
            border-bottom: 1px solid #edf2fa;
            text-align: right;
            overflow-wrap: anywhere;
        }

            .app-device-table td::before {
                content: attr(data-label);
                font-size: 12px;
                font-weight: 700;
                color: #496383;
                flex: 0 0 90px;
                text-align: left;
            }

            .app-device-table td:last-child {
                border-bottom: 0;
            }

    .app-device-actions {
        justify-content: flex-end;
    }
}


/* Flagged and blocked records — shared module components */


/* === 11 / Blocked records (compatibility) === */
.app-blacklist {
    box-sizing: border-box;
    width: min(100% - 24px,1220px);
    margin: 16px auto 30px;
    color: #082652;
}

    .app-blacklist *, .app-blacklist *::before, .app-blacklist *::after {
        box-sizing: border-box;
    }

.app-blacklist__header {
    position: sticky;
    top: var(--app-sticky-header-offset,0px);
    z-index: 90;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: linear-gradient(90deg,#e5edf9,#f2f6fd 48%,#fff);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.app-blacklist__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    background: #e6f0ff;
    color: #0865e7;
    border-radius: 50%;
}

.app-blacklist__heading {
    min-width: 0;
    flex: 1 1 220px;
}

    .app-blacklist__heading h1 {
        margin: 0 0 3px;
        font-size: 20px;
        font-weight: 750;
        line-height: 1.2;
        color: #082652;
    }

    .app-blacklist__heading p {
        margin: 0;
        font-size: 13px;
        color: #496383;
    }

.app-blacklist__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
}

.app-blacklist__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
    padding: 9px 14px;
    border: 1px solid #b6c9e9;
    border-radius: 9px;
    min-height: 40px;
    font-size: 13px;
    font-weight: 700;
    color: #082652;
    background: #fff;
    text-decoration: none !important;
    cursor: pointer;
}

    .app-blacklist__button:hover {
        background: #eef4ff;
        color: #082652;
    }

.app-blacklist__button--primary {
    background: #0865e7;
    border-color: #0865e7;
    color: #fff;
}

    .app-blacklist__button--primary:hover {
        background: #0752bb;
        color: #fff;
    }

.app-blacklist__button--danger {
    background: #fff1f2;
    color: #ab243c;
    border-color: #e9b6c2;
}

    .app-blacklist__button--danger:hover {
        background: #ffe4e8;
        color: #ab243c;
    }

.app-blacklist__button:focus-visible, .app-blacklist__input:focus-visible {
    outline: 3px solid #0865e7;
    outline-offset: 2px;
}

.app-blacklist__notice {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: #082652;
    background: #fff;
    border: 1px solid #b6c9e9;
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 13px;
}

    .app-blacklist__notice[hidden] {
        display: none !important;
    }

.app-blacklist__notice--error {
    background: #fff2f4;
    color: #9a2037;
    border-color: #dda8b3;
}

.app-blacklist__notice--warning {
    background: #fffaf0;
    border-color: #dfc68c;
}

.app-blacklist__notice-text {
    flex: 1 1 210px;
}

.app-blacklist__search {
    margin: 0 0 12px;
    max-width: 400px;
}

.app-blacklist__label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 5px;
}

.app-blacklist__input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 43px;
    border: 1px solid #b6c9e9;
    border-radius: 10px;
    background: #f9fbff;
    color: #082652;
    font-size: 16px;
    padding: 10px 12px;
}

.app-blacklist__fields {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 13px;
    max-width: 900px;
}

.app-blacklist__field {
    min-width: 0;
}

.app-blacklist__field--full {
    grid-column: 1 / -1;
}

.app-blacklist__validation {
    color: #a6203c;
    font-size: 12px;
    display: block;
    margin-top: 4px;
}

    .app-blacklist__validation:empty {
        display: none;
    }

.app-blacklist__table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #d2deef;
    border-radius: 12px;
}

.app-blacklist__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .app-blacklist__table th {
        text-align: left;
        color: #082652;
        background: #edf3fb;
        font-weight: 750;
        padding: 12px;
        border-bottom: 1px solid #d2deef;
    }

    .app-blacklist__table td {
        padding: 11px 12px;
        border-bottom: 1px solid #e5ebf5;
        overflow-wrap: anywhere;
        vertical-align: middle;
    }

    .app-blacklist__table tbody tr:last-child td {
        border-bottom: 0;
    }

    .app-blacklist__table tbody tr:hover {
        background: #f9fbff;
    }

.app-blacklist__empty {
    text-align: center;
    padding: 22px;
    color: #496383;
}

.app-blacklist__fieldvalue {
    display: block;
    padding: 11px 12px;
    border-radius: 9px;
    background: #f9fbff;
    border: 1px solid #d2deef;
    min-height: 43px;
    overflow-wrap: anywhere;
}

@media (max-width:700px) {
    .app-blacklist {
        margin: 12px auto 24px;
    }

    .app-blacklist__fields {
        grid-template-columns: minmax(0,1fr);
    }

    .app-blacklist__table thead {
        display: none;
    }

    .app-blacklist__table, .app-blacklist__table tbody, .app-blacklist__table tr, .app-blacklist__table td {
        display: block;
        width: 100%;
    }

        .app-blacklist__table tr {
            padding: 8px 12px;
            border-bottom: 1px solid #d2deef;
        }

        .app-blacklist__table td {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            padding: 7px 0;
            border: 0;
        }

            .app-blacklist__table td::before {
                content: attr(data-label);
                font-size: 12px;
                color: #496383;
                font-weight: 700;
                flex: 0 0 40%;
            }

            .app-blacklist__table td > * {
                max-width: 60%;
            }

    .app-blacklist__heading h1 {
        font-size: 18px;
    }
}


/* Organisations module — reusable admin form and list patterns */


/* === 12 / Organisations (compatibility) === */
.app-organisations {
    width: 100%;
    max-width: 1220px;
    margin: 16px auto;
    padding: 0 12px;
    min-width: 0;
    color: #082652;
}

.app-org-header {
    position: sticky;
    top: var(--app-sticky-header-offset,0px);
    z-index: 30;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: linear-gradient(90deg,#e5edf9 0%,#f2f6fd 48%,#fff 100%);
    margin-bottom: 16px;
}

.app-org-header-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #e6f0ff;
    color: #0865e7;
    font-size: 19px;
}

.app-org-header-copy {
    flex: 1 1 170px;
    min-width: 0;
}

.app-org-header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 750;
    line-height: 1.2;
    color: #082652;
}

.app-org-header p {
    margin: 3px 0 0;
    font-size: 13px;
    color: #496383;
}

.app-org-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.app-org-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid #b6c9e9;
    border-radius: 9px;
    background: #fff;
    color: #082652 !important;
    text-decoration: none !important;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

    .app-org-btn:hover {
        background: #eaf2ff;
        border-color: #0865e7;
    }

.app-org-btn--primary {
    background: #0865e7;
    border-color: #0865e7;
    color: #fff !important;
}

    .app-org-btn--primary:hover {
        background: #0752bb;
        color: #fff !important;
    }

.app-org-btn--danger {
    background: #b82c42;
    border-color: #b82c42;
    color: #fff !important;
}

    .app-org-btn--danger:hover {
        background: #9b1e32;
        color: #fff !important;
    }

.app-org-btn:focus-visible, .app-org-search:focus-visible, .app-org-input:focus-visible {
    outline: 3px solid #0865e7;
    outline-offset: 2px;
}

.app-org-message {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #b6c9e9;
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 13px;
    color: #082652;
}

    .app-org-message[hidden], .app-org-empty[hidden] {
        display: none !important;
    }

.app-org-message--error {
    color: #a61d36;
    border-color: #dea4af;
    background: #fff5f6;
}

.app-org-message .app-org-actions {
    margin-left: auto;
}

.app-org-section {
    padding: 14px;
    border: 1px solid #d6e2f5;
    border-radius: 12px;
    background: #fff;
    max-width: 100%;
    min-width: 0;
}

.app-org-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 750;
    color: #082652;
}

    .app-org-section-title i {
        color: #0865e7;
    }

.app-org-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.app-org-field {
    min-width: 0;
}

.app-org-field--full {
    grid-column: 1/-1;
}

.app-org-label {
    display: block;
    margin: 0 0 5px;
    font-size: 13px;
    font-weight: 650;
    color: #082652;
}

.app-org-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px 12px;
    background: #f9fbff;
    border: 1px solid #b6c9e9;
    border-radius: 9px;
    color: #082652;
    font-size: 16px;
}

.app-org-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border: 1px solid #b6c9e9;
    border-radius: 9px;
    background: #f9fbff;
    color: #082652;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

    .app-org-checkbox:has(input:checked) {
        background: #eaf2ff;
        border-color: #0865e7;
    }

    .app-org-checkbox input {
        accent-color: #0865e7;
        margin: 0;
    }

.app-org-validation {
    display: block;
    font-size: 12px;
    color: #a61d36;
    margin-top: 5px;
}

    .app-org-validation:empty {
        display: none;
    }

.app-org-search {
    box-sizing: border-box;
    width: 100%;
    max-width: 360px;
    padding: 9px 12px;
    border: 1px solid #b6c9e9;
    border-radius: 9px;
    background: #f9fbff;
    color: #082652;
    font-size: 14px;
    margin-bottom: 12px;
}

.app-org-table-wrap {
    overflow-x: auto;
    border: 1px solid #d6e2f5;
    border-radius: 12px;
}

.app-org-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .app-org-table th {
        text-align: left;
        background: #f2f6fd;
        padding: 11px;
        color: #082652;
        font-weight: 750;
        white-space: nowrap;
    }

    .app-org-table td {
        padding: 10px 11px;
        border-top: 1px solid #e2eaf7;
        color: #082652;
    }

        .app-org-table td:last-child {
            white-space: nowrap;
        }

    .app-org-table tr[hidden] {
        display: none;
    }

.app-org-status {
    font-weight: 650;
    color: #24643d;
}

.app-org-status--inactive {
    color: #8f3c49;
}

@media (max-width:700px) {
    .app-organisations {
        margin: 12px auto;
        padding: 0 12px;
    }

    .app-org-header {
        padding: 11px 12px;
    }

        .app-org-header h1 {
            font-size: 18px;
        }

    .app-org-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .app-org-actions {
        justify-content: flex-end;
    }

    .app-org-table thead {
        display: none;
    }

    .app-org-table tbody tr {
        display: block;
        padding: 8px;
        border-bottom: 1px solid #d6e2f5;
    }

    .app-org-table td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        border: 0;
        padding: 5px 8px;
        white-space: normal !important;
    }

        .app-org-table td::before {
            content: attr(data-label);
            font-weight: 700;
            color: #496383;
        }

        .app-org-table td:last-child {
            justify-content: flex-end;
        }
}


/* Point Webhooks styles retained from prior module */


/* === 13 / Webhook configuration (compatibility) === */
.wh-page {
    box-sizing: border-box;
    width: min(100% - 24px,1220px);
    margin: 16px auto 36px;
    color: #082652;
}

    .wh-page * {
        box-sizing: border-box;
    }

.wh-heading {
    position: sticky;
    top: var(--app-sticky-header-offset,0px);
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: linear-gradient(90deg,#e5edf9,#f2f6fd 48%,#fff);
    border-radius: 12px;
    margin-bottom: 14px;
}

.wh-heading-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.wh-heading h1 {
    margin: 0;
    color: #082652;
    font-size: 20px;
    font-weight: 750;
}

.wh-heading p {
    margin: 2px 0 0;
    color: #496383;
    font-size: 13px;
}

.wh-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #eaf2ff;
    color: #0865e7;
}

.wh-actions, .wh-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wh-button {
    appearance: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    border: 1px solid #b6c9e9;
    background: #fff;
    border-radius: 9px;
    padding: 8px 13px;
    color: #082652 !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
}

    .wh-button:hover {
        background: #eaf2ff;
        border-color: #0865e7;
    }

    .wh-button.wh-primary {
        background: #0865e7;
        border-color: #0865e7;
        color: white !important;
    }

    .wh-button.wh-danger {
        color: #aa2030 !important;
        border-color: #e4b7bf;
    }

    .wh-button:focus-visible {
        outline: 2px solid #0865e7;
        outline-offset: 2px;
    }

.wh-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
}

    .wh-toolbar label, .wh-field label {
        font-size: 13px;
        font-weight: 650;
        color: #082652;
    }

    .wh-toolbar input {
        max-width: 370px;
    }

.wh-control {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 42px;
    padding: 9px 11px;
    border: 1px solid #b6c9e9;
    border-radius: 9px;
    background: #f9fbff;
    color: #082652;
    font-size: 14px;
}

    .wh-control:focus {
        outline: 2px solid #0865e7;
        outline-offset: 1px;
    }

.wh-form {
    max-width: 900px;
}

.wh-section {
    border: 1px solid #d1dff1;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    margin-bottom: 14px;
}

    .wh-section h2 {
        font-size: 16px;
        font-weight: 750;
        margin: 0 0 12px;
        display: flex;
        align-items: center;
        gap: 9px;
    }

        .wh-section h2 i {
            color: #0865e7;
        }

.wh-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.wh-field {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.wh-wide {
    grid-column: 1/-1;
}

.wh-error, .wh-validation {
    color: #aa2030;
    font-size: 13px;
}

    .wh-validation:empty {
        display: none;
    }

.wh-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #d1dff1;
    border-radius: 12px;
}

.wh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .wh-table th, .wh-table td {
        padding: 11px 12px;
        text-align: left;
        border-bottom: 1px solid #e5edf9;
        vertical-align: middle;
        overflow-wrap: anywhere;
    }

    .wh-table th {
        background: #f2f6fd;
        color: #082652;
        font-weight: 750;
    }

.wh-details {
    display: grid;
    grid-template-columns: minmax(100px,180px) 1fr;
    gap: 10px;
    font-size: 14px;
}

    .wh-details dt {
        color: #496383;
    }

    .wh-details dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

.wh-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding: 12px;
    border: 1px solid #c9dcfc;
    border-radius: 10px;
    background: #f5f9ff;
    font-size: 13px;
}

    .wh-inline [hidden] {
        display: none !important;
    }

.wh-feedback[hidden] {
    display: none !important;
}

.wh-feedback {
    width: 100%;
    font-size: 13px;
    color: #082652;
}

.wh-inline span {
    color: #496383;
}

@media (max-width:700px) {
    .wh-page {
        margin: 12px auto 28px;
    }

    .wh-heading {
        padding: 10px;
        gap: 9px;
    }

        .wh-heading h1 {
            font-size: 18px;
        }

    .wh-heading-main {
        flex: 1 1 100%;
    }

    .wh-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .wh-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .wh-table thead {
        display: none;
    }

    .wh-table tbody tr {
        display: block;
        border-bottom: 1px solid #d1dff1;
        padding: 8px;
    }

    .wh-table td {
        display: flex;
        justify-content: space-between;
        gap: 9px;
        border: 0;
        padding: 6px;
        min-width: 0;
    }

        .wh-table td:before {
            content: attr(data-label);
            font-weight: 650;
            color: #496383;
        }

        .wh-table td:last-child {
            justify-content: flex-end;
        }

            .wh-table td:last-child:before {
                display: none;
            }

    .wh-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

        .wh-toolbar input {
            max-width: none;
        }

    .wh-details {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}


/* Site areas: scoped styles appended to existing locked CSS */


/* === 14 / Site areas (compatibility) === */
.sa-page {
    box-sizing: border-box;
    width: calc(100% - 24px);
    max-width: 1220px;
    margin: 12px auto 28px;
    color: #082652;
    font-size: 14px;
}

    .sa-page * {
        box-sizing: border-box;
    }

.sa-heading {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    border: 1px solid #cbd9ed;
    border-radius: 12px;
    background: linear-gradient(100deg,#e5edf9,#fff);
}

.sa-heading-main {
    flex: 1 1 240px;
}

.sa-heading h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 750;
    color: #082652;
}

.sa-heading p {
    margin: 3px 0 0;
    color: #496383;
    font-size: 13px;
}

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

.sa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid #b6c9e9;
    border-radius: 9px;
    background: #fff;
    color: #082652;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

    .sa-btn:hover {
        background: #ecf3ff;
        text-decoration: none;
    }

.sa-btn-primary {
    background: #0865e7;
    color: #fff;
    border-color: #0865e7;
}

    .sa-btn-primary:hover {
        background: #0756c8;
        color: #fff;
    }

.sa-btn-danger {
    background: #b5203d;
    border-color: #b5203d;
    color: white;
}

    .sa-btn-danger:hover {
        background: #991a32;
        color: white;
    }

.sa-btn-danger-outline {
    color: #a22239;
    border-color: #e3b5bd;
}

.sa-content {
    min-width: 0;
}

.sa-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

    .sa-toolbar label, .sa-field label {
        font-weight: 650;
        font-size: 13px;
    }

    .sa-toolbar input, .sa-input {
        min-height: 42px;
        min-width: 0;
        max-width: 100%;
        padding: 8px 11px;
        border: 1px solid #b6c9e9;
        background: #f9fbff;
        color: #082652;
        border-radius: 9px;
        font-size: 16px;
    }

    .sa-toolbar input {
        width: 350px;
    }

.sa-count {
    margin-left: auto;
    color: #496383;
    font-size: 13px;
}

.sa-table-wrap {
    overflow-x: auto;
    border: 1px solid #d6e2f5;
    border-radius: 12px;
}

.sa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .sa-table th {
        background: #f2f6fd;
        color: #082652;
        text-align: left;
        font-weight: 750;
        padding: 10px 11px;
    }

    .sa-table td {
        padding: 10px 11px;
        border-top: 1px solid #e2eaf7;
        vertical-align: middle;
        overflow-wrap: anywhere;
    }

    .sa-table tr[hidden] {
        display: none;
    }

.sa-name {
    color: #0865e7;
    font-weight: 700;
}

.sa-row-actions {
    justify-content: flex-start;
}

.sa-section {
    padding: 14px;
    border: 1px solid #d6e2f5;
    background: #fff;
    border-radius: 12px;
}

    .sa-section h2 {
        font-size: 16px;
        font-weight: 750;
        margin: 0 0 14px;
    }

.sa-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.sa-field {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
}

.sa-wide {
    grid-column: 1/-1;
}

.sa-validation, .sa-error {
    font-size: 12px;
    color: #af213c;
}

    .sa-validation:empty {
        display: none;
    }

.sa-details {
    display: grid;
    grid-template-columns: minmax(100px,180px) minmax(0,1fr);
    gap: 12px;
    margin: 0;
}

    .sa-details dt {
        color: #496383;
        font-weight: 650;
    }

    .sa-details dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

.sa-feedback {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 100%;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: #f9fbff;
    border: 1px solid #cbd9ed;
    border-radius: 9px;
    font-size: 13px;
}

    .sa-feedback[hidden] {
        display: none !important;
    }

    .sa-feedback .sa-actions {
        margin-left: auto;
    }

.sa-warning {
    border-color: #e2b8c0;
    background: #fff6f7;
    color: #93233b;
}

.sa-error:empty {
    display: none;
}

@media (max-width:700px) {
    .sa-page {
        width: calc(100% - 24px);
    }

    .sa-heading {
        padding: 10px 12px;
    }

        .sa-heading h1 {
            font-size: 18px;
        }

    .sa-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .sa-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .sa-table thead {
        display: none;
    }

    .sa-table tbody tr {
        display: block;
        padding: 8px;
        border-bottom: 1px solid #d6e2f5;
    }

    .sa-table td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        border: 0;
        padding: 5px 8px;
    }

        .sa-table td:before {
            content: attr(data-label);
            color: #496383;
            font-weight: 700;
        }

        .sa-table td:last-child {
            display: block;
        }

            .sa-table td:last-child:before {
                display: none;
            }

    .sa-row-actions {
        justify-content: flex-end;
    }

    .sa-toolbar input {
        width: 100%;
    }

    .sa-details {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}


/* Site Areas: inline SVG icon, no external icon font required */

.sa-heading-main h1 {
    display: flex;
    align-items: center;
    gap: 11px;
}

.sa-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #e6f0ff;
    color: #0865e7;
}

    .sa-heading-icon svg {
        display: block;
        width: 23px;
        height: 23px;
        stroke: currentColor;
    }

@media (max-width:700px) {
    .sa-heading-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

        .sa-heading-icon svg {
            width: 21px;
            height: 21px;
        }
}


/* Site Areas: use the established sibling icon + heading-copy pattern. */

.sa-heading-main {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.sa-heading-copy {
    min-width: 0;
}

.sa-area-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #e6f0ff;
    color: #0865e7;
}

    .sa-area-icon svg {
        display: block;
        width: 23px;
        height: 23px;
        stroke: currentColor;
    }

@media (max-width:700px) {
    .sa-area-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

        .sa-area-icon svg {
            width: 21px;
            height: 21px;
        }
}


/* User Roles module: shared heading geometry and compact forms */


/* === 15 / User roles (compatibility) === */
.ur-page {
    box-sizing: border-box;
    max-width: 1220px;
    margin: 12px auto;
    padding: 0 16px;
    color: #082652;
}

.ur-heading {
    position: sticky;
    top: var(--app-sticky-header-offset,0px);
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: linear-gradient(90deg,#e5edf9,#f2f6fd 50%,#fff);
}

.ur-heading-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #e6f0ff;
    color: #0865e7;
}

.ur-heading-copy {
    flex: 1 1 160px;
    min-width: 0;
}

.ur-heading h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 750;
}

.ur-heading p {
    margin: 3px 0 0;
    font-size: 13px;
    color: #496383;
}

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

.ur-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid #b6c9e9;
    border-radius: 9px;
    background: #fff;
    color: #082652 !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
}

    .ur-btn:hover {
        background: #eaf2ff;
    }

.ur-btn-primary {
    background: #0865e7;
    border-color: #0865e7;
    color: #fff !important;
}

.ur-btn-danger {
    background: #b82c42;
    border-color: #b82c42;
    color: #fff !important;
}

.ur-btn-danger-outline {
    color: #a9283f !important;
    border-color: #d9a9b4;
}

.ur-inline {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #a9283f;
}

    .ur-inline[hidden] {
        display: none;
    }

.ur-content {
    min-width: 0;
}

.ur-section {
    padding: 14px 0 18px;
    border-bottom: 1px solid #dbe5f3;
}

    .ur-section h2 {
        font-size: 16px;
        font-weight: 750;
        margin: 0 0 12px;
    }

.ur-section-note {
    font-size: 13px;
    color: #496383;
    margin: -5px 0 12px;
}

.ur-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.ur-field {
    min-width: 0;
}

    .ur-field > label, .ur-toolbar > label {
        display: block;
        font-size: 13px;
        font-weight: 700;
        margin: 0 0 5px;
    }

.ur-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #b6c9e9;
    border-radius: 9px;
    background: #f9fbff;
    color: #082652;
    font-size: 16px;
}

.ur-error {
    display: block;
    font-size: 12px;
    color: #b82c42;
}

.ur-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.ur-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: #f9fbff;
    border: 1px solid #cbd9ee;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

    .ur-chip:has(input:checked) {
        border-color: #0865e7;
        background: #eaf2ff;
    }

    .ur-chip input {
        accent-color: #0865e7;
        width: 16px;
        height: 16px;
    }

.ur-toolbar {
    display: grid;
    grid-template-columns: auto minmax(160px,1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
}

    .ur-toolbar > label {
        margin: 0;
    }

.ur-count {
    font-size: 12px;
    color: #496383;
}

.ur-table-wrap {
    overflow-x: auto;
}

.ur-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .ur-table th {
        text-align: left;
        font-weight: 750;
        color: #082652;
        background: #eaf1fa;
    }

    .ur-table th, .ur-table td {
        padding: 10px 12px;
        border-bottom: 1px solid #dbe5f3;
    }

.ur-empty {
    font-size: 13px;
    color: #496383;
}

.ur-summary {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px;
    font-size: 14px;
}

    .ur-summary dt {
        color: #496383;
    }

    .ur-summary dd {
        margin: 0;
        font-weight: 700;
    }

.ur-warning {
    color: #9b3448;
    font-size: 13px;
}

.ur-page :focus-visible {
    outline: 3px solid #0865e7;
    outline-offset: 2px;
}

@media (max-width:700px) {
    .ur-page {
        padding: 0 12px;
    }

    .ur-heading {
        padding: 11px 12px;
    }

        .ur-heading h1 {
            font-size: 18px;
        }

    .ur-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .ur-toolbar {
        grid-template-columns: minmax(0,1fr) auto;
    }

        .ur-toolbar > label {
            grid-column: 1/-1;
        }

    .ur-table thead {
        display: none;
    }

    .ur-table tbody tr {
        display: block;
        border-bottom: 1px solid #cbd9ee;
        padding: 8px 0;
    }

    .ur-table td {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        border: 0;
        padding: 6px 8px;
    }

        .ur-table td::before {
            content: attr(data-label);
            font-weight: 700;
            color: #496383;
        }

    .ur-row-actions {
        justify-content: flex-end;
    }
}


/* User Roles V2: alignment with locked, shared portal geometry.
   Deliberately only overrides the previous User Roles block, without changing shared modules. */

.ur-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 1220px;
    margin: 12px auto 28px;
    padding: 0;
    color: #082652;
    font-size: 14px;
}

    .ur-page * {
        box-sizing: border-box;
    }

.ur-heading.app-org-header {
    position: sticky;
    top: var(--app-sticky-header-offset,0px);
    z-index: 30;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    margin: 0 0 14px;
    border: 1px solid #cbd9ed;
    border-radius: 12px;
    background: linear-gradient(90deg,#e5edf9 0%,#f2f6fd 48%,#fff 100%);
}

.ur-heading-icon.app-org-header-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #e6f0ff;
    color: #0865e7;
}

.ur-heading-icon svg {
    display: block;
    width: 23px;
    height: 23px;
    stroke: currentColor;
}

.ur-heading-copy.app-org-header-copy {
    flex: 1 1 175px;
    min-width: 0;
}

.ur-heading h1 {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 750;
}

.ur-heading p {
    font-size: 13px;
    line-height: 1.4;
}

.ur-actions.app-org-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.ur-btn {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 650;
    border-radius: 9px;
}

.ur-inline {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: flex-end;
    padding-top: 3px;
}

    .ur-inline:empty {
        display: none;
    }

    .ur-inline:not([hidden]):has(.validation-summary-errors) {
        justify-content: flex-start;
        color: #a9283f;
    }

.ur-content {
    width: 100%;
    min-width: 0;
}

.ur-section {
    padding: 13px 0 17px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #dce6f4;
    background: transparent;
}

    .ur-section:first-child {
        padding-top: 4px;
    }

    .ur-section h2 {
        font-size: 16px;
        font-weight: 750;
        margin: 0 0 10px;
        color: #082652;
    }

.ur-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    max-width: 920px;
}

.ur-field {
    min-width: 0;
}

    .ur-field > label {
        font-size: 13px;
        font-weight: 650;
        margin-bottom: 5px;
    }

.ur-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 42px;
    border: 1px solid #b6c9e9;
    border-radius: 9px;
    background: #f9fbff;
    color: #082652;
    font-size: 16px;
}

.ur-chips {
    gap: 8px;
    margin: 0 0 10px;
    align-items: flex-start;
}

.ur-chip {
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid #cbd9ee;
    border-radius: 9px;
    background: #f9fbff;
    color: #082652;
    font-size: 13px;
    line-height: 1.3;
}

    .ur-chip:has(input:checked) {
        background: #eaf2ff;
        border-color: #0865e7;
    }

    .ur-chip input {
        flex: none;
        accent-color: #0865e7;
        margin: 0;
    }

.ur-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 6px 0 12px;
}

    .ur-toolbar > label {
        font-size: 13px;
        font-weight: 650;
        margin: 0;
    }

    .ur-toolbar .ur-input {
        flex: 0 1 350px;
        max-width: 100%;
        width: 350px;
    }

.ur-count {
    margin-left: auto;
    font-size: 13px;
}

.ur-table-wrap {
    border: 1px solid #d6e2f5;
    border-radius: 12px;
    overflow-x: auto;
}

.ur-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .ur-table th {
        background: #f2f6fd;
        padding: 10px 11px;
        text-align: left;
        font-weight: 750;
    }

    .ur-table td {
        padding: 10px 11px;
        border-top: 1px solid #e2eaf7;
        border-bottom: 0;
        vertical-align: middle;
        overflow-wrap: anywhere;
    }

    .ur-table tr[hidden], .ur-empty[hidden], .ur-inline[hidden], .ur-btn[hidden] {
        display: none !important;
    }

.ur-row-actions {
    justify-content: flex-start;
}

.ur-warning {
    margin: 10px 0;
    color: #96243b;
    font-size: 13px;
}

.ur-summary {
    margin: 0;
    grid-template-columns: minmax(100px,180px) 1fr;
    gap: 10px;
}

@media (max-width:700px) {
    .ur-page {
        width: 100%;
        max-width: none;
        margin: 12px auto 24px;
        padding: 0;
    }

    .ur-heading.app-org-header {
        padding: 10px 12px;
        gap: 9px;
    }

    .ur-heading h1 {
        font-size: 18px;
    }

    .ur-heading-icon.app-org-header-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .ur-heading-icon svg {
        width: 21px;
        height: 21px;
    }

    .ur-actions.app-org-actions {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }

    .ur-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .ur-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

        .ur-toolbar .ur-input {
            width: 100%;
            flex: auto;
        }

    .ur-count {
        margin-left: 0;
    }

    .ur-table thead {
        display: none;
    }

    .ur-table tbody tr:not([hidden]) {
        display: block;
        padding: 8px;
        border-bottom: 1px solid #d6e2f5;
    }

    .ur-table td {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        border: 0;
        padding: 6px 8px;
        min-width: 0;
    }

        .ur-table td::before {
            content: attr(data-label);
            flex: none;
            font-weight: 650;
            color: #496383;
        }

        .ur-table td:last-child {
            justify-content: flex-end;
        }

            .ur-table td:last-child::before {
                display: none;
            }

    .ur-row-actions {
        justify-content: flex-end;
    }

    .ur-summary {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media (max-width:380px) {
    .ur-heading.app-org-header {
        padding: 9px 10px;
    }

    .ur-btn {
        padding: 6px 9px;
    }
}


/* User Roles: Points reference implementation. Reuse .point-page geometry and components. */


/* === 16 / Legacy user-role extensions (compatibility) === */
.point-page.ur-point-page .ur-point-section {
    margin: 0;
    padding: 2px 0 10px;
    border: 0;
    background: transparent;
}

    .point-page.ur-point-page .ur-point-section .point-section-title {
        margin: 8px 0 12px;
    }

.point-page.ur-point-page .ur-point-section-note {
    font-size: 13px;
    color: #496383;
    margin: 0 0 12px;
}

.point-page.ur-point-page .ur-point-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px 16px;
}

.point-page.ur-point-page .ur-point-field {
    min-width: 0;
}

    .point-page.ur-point-page .ur-point-field .point-label {
        display: block;
        margin-bottom: 6px;
    }

.point-page.ur-point-page .ur-point-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 12px;
}

.point-page.ur-point-page .ur-point-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid #b6c9e9;
    border-radius: 9px;
    background: #f9fbff;
    color: #082652;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

    .point-page.ur-point-page .ur-point-chip:has(input:checked) {
        background: #eaf2ff;
        border-color: #0865e7;
    }

    .point-page.ur-point-page .ur-point-chip input {
        width: 17px;
        height: 17px;
        accent-color: #0865e7;
        margin: 0;
    }

    .point-page.ur-point-page .ur-point-chip:focus-within {
        outline: 2px solid #0865e7;
        outline-offset: 1px;
    }

.point-page.ur-point-page .point-header-message {
    margin-top: 0;
}

    .point-page.ur-point-page .point-header-message[hidden] {
        display: none !important;
    }

.point-page.ur-point-page [hidden] {
    display: none !important;
}

.point-page.ur-point-page .ur-point-empty {
    color: #496383;
    font-size: 13px;
    padding: 10px 0;
}

.point-page.ur-point-page .point-search {
    max-width: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

    .point-page.ur-point-page .point-search .point-search-label {
        margin: 0;
    }

    .point-page.ur-point-page .point-search .point-input {
        max-width: 420px;
    }

.point-page.ur-point-page .ur-count {
    font-size: 12px;
    font-weight: 700;
    color: #496383;
    margin-left: auto;
}

.point-page.ur-point-page .point-table td .point-actions {
    justify-content: flex-start;
}

.point-page.ur-point-page .point-table .app-header-action {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12px;
}

.point-page.ur-point-page .point-details {
    display: grid;
    grid-template-columns: minmax(120px,220px) 1fr;
    gap: 0 12px;
    border-bottom: 1px solid #dce6f7;
    padding-bottom: 12px;
}

    .point-page.ur-point-page .point-details dt, .point-page.ur-point-page .point-details dd {
        margin: 0;
        padding: 10px;
        font-size: 13px;
    }

    .point-page.ur-point-page .point-details dt {
        color: #496383;
        font-weight: 700;
    }

.point-page.ur-point-page .point-warning {
    margin-top: 12px;
}

@media (max-width:700px) {
    .point-page.ur-point-page .ur-point-grid {
        grid-template-columns: 1fr;
    }

    .point-page.ur-point-page .point-search .point-input {
        max-width: none;
        flex: 1 1 100%;
    }

    .point-page.ur-point-page .point-table tr[hidden] {
        display: none !important;
    }

    .point-page.ur-point-page .point-details {
        grid-template-columns: 1fr;
    }

        .point-page.ur-point-page .point-details dd {
            padding-top: 0;
        }
}


/* User Roles V4: section geometry faithfully matches the approved Edit Checkpoint.
   Scoped overrides avoid altering any other module. */

.point-page.ur-point-page .ur-point-section {
    margin: 0;
    padding: 0 0 12px;
}

    .point-page.ur-point-page .ur-point-section + .ur-point-section {
        margin-top: 8px;
    }

    .point-page.ur-point-page .ur-point-section > .point-section-title {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 54px;
        margin: 9px 0 11px;
        padding: 9px 12px;
        border: 1px solid #c9dcfc;
        border-radius: 11px;
        background: linear-gradient(90deg,#eef4fe,#f9fbff 85%);
        font-size: 14px;
        font-weight: 750;
        line-height: 1.3;
        color: #082652;
    }

        .point-page.ur-point-page .ur-point-section > .point-section-title .point-section-symbol {
            display: inline-grid;
            place-items: center;
            flex: 0 0 32px;
            width: 32px;
            height: 32px;
            border-radius: 9px;
            background: #e5efff;
            color: #0865e7;
        }

        .point-page.ur-point-page .ur-point-section > .point-section-title svg {
            display: block;
            width: 18px;
            height: 18px;
        }

.point-page.ur-point-page .ur-point-field .point-label {
    margin-bottom: 6px;
}

.point-page.ur-point-page .ur-point-section-note {
    margin: 0 0 10px;
}

.point-page.ur-point-page .ur-point-chips--stacked {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

    .point-page.ur-point-page .ur-point-chips--stacked .ur-point-chip {
        width: 100%;
        justify-content: flex-start;
    }

.point-page.ur-point-page .ur-point-chip--row {
    display: flex;
    width: 100%;
    margin: 0 0 12px;
}

.point-page.ur-point-page .ur-point-chip {
    background: #fff;
    border-color: #dce6f7;
    font-weight: 500;
}

    .point-page.ur-point-page .ur-point-chip:has(input:checked) {
        background: #eaf2ff;
        border-color: #0865e7;
    }

@media (max-width:700px) {
    .point-page.ur-point-page .ur-point-section > .point-section-title {
        min-height: 53px;
    }
}


/* Working Sites module: Points-locked geometry and section components. */


/* === 17 / Legacy working-site extensions (compatibility) === */
.point-page.ws-page .ws-heading-copy h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 750;
    color: #082652;
}

.point-page.ws-page .ws-heading-copy p {
    margin: 3px 0 0;
    color: #496383;
    font-size: 13px;
}

.point-page.ws-page .ws-body {
    width: 100%;
    max-width: 100%;
    padding-top: 14px;
}

.point-page.ws-page .ws-section {
    margin: 0 0 14px;
}

    .point-page.ws-page .ws-section > .point-section-title {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 53px;
        margin: 0 0 12px;
        padding: 9px 12px;
        border: 1px solid #c9dcfc;
        border-radius: 11px;
        background: linear-gradient(90deg,#eef4fe,#f9fbff 85%);
        font-size: 16px;
        font-weight: 750;
        line-height: 1.3;
        color: #082652;
    }

        .point-page.ws-page .ws-section > .point-section-title .point-section-symbol {
            display: grid;
            place-items: center;
            flex: 0 0 32px;
            width: 32px;
            height: 32px;
            border-radius: 9px;
            background: #e5efff;
            color: #0865e7;
        }

        .point-page.ws-page .ws-section > .point-section-title svg {
            display: block;
        }

.point-page.ws-page .ws-field {
    min-width: 0;
    margin: 0 0 12px;
}

    .point-page.ws-page .ws-field .point-label {
        display: block;
        margin: 0 0 6px;
    }

    .point-page.ws-page .ws-field .point-input {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

.point-page.ws-page .ws-choice {
    margin: 0 0 8px;
}

.point-page.ws-page .ws-choice-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 10px;
    margin: 0 0 8px;
    border: 1px solid #dce6f7;
    border-radius: 9px;
    background: #fff;
    color: #082652;
    font-size: 13px;
    cursor: pointer;
}

    .point-page.ws-page .ws-choice-row:has(input:checked) {
        border-color: #0865e7;
        background: #eaf2ff;
    }

    .point-page.ws-page .ws-choice-row input {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        accent-color: #0865e7;
        margin: 0;
    }

.point-page.ws-page .ws-qr-image {
    display: block;
    max-width: 160px;
    width: 100%;
    height: auto;
    margin: 10px 0;
    border-radius: 6px;
}

.point-page.ws-page .ws-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 14px;
}

    .point-page.ws-page .ws-toolbar .point-label {
        margin: 0;
    }

    .point-page.ws-page .ws-toolbar .point-input {
        max-width: 420px;
        flex: 1;
        min-width: 160px;
    }

.point-page.ws-page .ws-count {
    margin-left: auto;
    color: #496383;
    font-size: 12px;
    font-weight: 700;
}

.point-page.ws-page .ws-table-wrap {
    overflow-x: auto;
    max-width: 100%;
}

.point-page.ws-page .ws-name {
    font-weight: 700;
}

.point-page.ws-page .ws-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

    .point-page.ws-page .ws-row-actions .app-header-action {
        min-height: 34px;
        padding: 6px 10px;
        font-size: 12px;
    }

.point-page.ws-page .ws-details {
    display: grid;
    grid-template-columns: minmax(120px,220px) 1fr;
    margin: 0;
    border-bottom: 1px solid #dce6f7;
}

    .point-page.ws-page .ws-details dt, .point-page.ws-page .ws-details dd {
        padding: 10px;
        margin: 0;
        font-size: 13px;
    }

    .point-page.ws-page .ws-details dt {
        color: #496383;
        font-weight: 700;
    }

.point-page.ws-page .ws-warning {
    color: #9b3c18;
    font-size: 13px;
    margin: 12px 0;
}

.point-page.ws-page .point-header-message[hidden], .point-page.ws-page [hidden] {
    display: none !important;
}

.point-page.ws-page .ws-decision {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex-basis: 100%;
}

@media (max-width:700px) {
    .point-page.ws-page .ws-heading-copy h1 {
        font-size: 18px;
    }

    .point-page.ws-page .ws-section > .point-section-title {
        font-size: 15px;
    }

    .point-page.ws-page .ws-details {
        grid-template-columns: 1fr;
    }

        .point-page.ws-page .ws-details dt {
            padding-bottom: 2px;
        }

        .point-page.ws-page .ws-details dd {
            padding-top: 2px;
        }

    .point-page.ws-page .ws-table thead {
        display: none;
    }

    .point-page.ws-page .ws-table tr {
        display: block;
        border: 1px solid #dce6f7;
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 8px;
    }

        .point-page.ws-page .ws-table tr[hidden] {
            display: none !important;
        }

    .point-page.ws-page .ws-table td {
        display: block;
        border: 0;
        padding: 6px;
    }

        .point-page.ws-page .ws-table td:before {
            content: attr(data-label);
            display: block;
            font-weight: 700;
            color: #496383;
            font-size: 12px;
            margin-bottom: 4px;
        }
}


/* Working Sites V2: compact QR panel and readable site directory.
   Visual-only changes; existing handler and site action bindings remain intact. */

.point-page.ws-page .ws-qr-panel {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    max-width: 580px;
    margin: 4px 0 12px;
    padding: 14px 16px;
    border: 1px solid #dce6f7;
    border-radius: 11px;
    background: #f9fbff;
}

.point-page.ws-page .ws-qr-details {
    flex: 1;
    min-width: 0;
}

.point-page.ws-page .ws-qr-label {
    color: #082652;
    font-size: 14px;
    font-weight: 750;
    margin: 1px 0 6px;
}

.point-page.ws-page .ws-qr-hint {
    font-size: 13px;
    color: #496383;
    margin: 0 0 15px;
    line-height: 1.45;
}

.point-page.ws-page .ws-qr-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.point-page.ws-page .ws-qr-preview {
    flex: 0 0 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 160px;
}

.point-page.ws-page .ws-qr-image {
    width: 160px;
    max-width: 160px;
    height: 160px;
    object-fit: contain;
    margin: 0;
    background: white;
}

.point-page.ws-page .ws-qr-placeholder {
    max-width: 140px;
    color: #496383;
    text-align: center;
    font-size: 12px;
}

.point-page.ws-page .ws-table-wrap {
    max-width: 900px;
}

.point-page.ws-page .ws-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

    .point-page.ws-page .ws-table th:first-child, .point-page.ws-page .ws-table td:first-child {
        width: 43%;
    }

    .point-page.ws-page .ws-table th:last-child, .point-page.ws-page .ws-table td:last-child {
        width: 57%;
    }

    .point-page.ws-page .ws-table th, .point-page.ws-page .ws-table td {
        padding: 10px 12px;
        vertical-align: middle;
    }

.point-page.ws-page .ws-row-actions {
    gap: 6px;
}

@media (max-width:700px) {
    .point-page.ws-page .ws-qr-panel {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 12px;
        padding: 12px;
    }

    .point-page.ws-page .ws-qr-preview {
        flex: 0 0 auto;
        justify-content: flex-start;
        min-height: 0;
    }

    .point-page.ws-page .ws-table {
        table-layout: auto;
    }

        .point-page.ws-page .ws-table td:first-child, .point-page.ws-page .ws-table td:last-child {
            width: auto;
        }
}


/* === 18 / Portal V2 reusable components (no module dependencies) === */


/* PORTAL V2 — PAGE-INDEPENDENT DESIGN SYSTEM */

:root {
    --app-v2-navy: #082652;
    --app-v2-blue: #0865e7;
    --app-v2-muted: #496383;
    --app-v2-border: #b6c9e9;
    --app-v2-soft-border: #c9dcfc;
    --app-v2-bg: #f9fbff;
    --app-v2-heading-gradient: linear-gradient(90deg, #e5edf9, #f2f6fd 50%, #fff);
    --app-v2-section-gradient: linear-gradient(90deg, #eef4fe, #f9fbff 85%);
}

.app-page, .app-page *, .app-page *::before, .app-page *::after {
    box-sizing: border-box;
}

.app-page {
    width: 100%;
    max-width: var(--app-content-max-width, 1220px);
    min-width: 0;
    margin-inline: auto;
    padding: 10px 16px 40px;
    color: var(--app-v2-navy);
}

    .app-page .app-page-header {
        position: sticky;
        top: var(--app-sticky-header-offset, 0px);
        z-index: 110;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 12px 15px;
        border: 1px solid var(--app-v2-soft-border);
        border-radius: 12px;
        background: var(--app-v2-heading-gradient);
        box-shadow: 0 3px 12px rgba(8, 38, 82, .06);
    }

    .app-page .app-page-header-main {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        flex: 1 1 190px;
    }

    .app-page .app-page-header-icon {
        display: grid;
        place-items: center;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: #e6f0ff;
        color: var(--app-v2-blue);
        font-size: 20px;
    }

        .app-page .app-page-header-icon svg {
            display: block;
            width: 23px;
            height: 23px;
            max-width: 100%;
        }

    .app-page .app-page-header-copy {
        min-width: 0;
    }

        .app-page .app-page-header-copy h1 {
            margin: 0 0 3px;
            font-size: 20px;
            font-weight: 750;
            line-height: 1.25;
            color: var(--app-v2-navy);
        }

        .app-page .app-page-header-copy p {
            margin: 0;
            font-size: 13px;
            line-height: 1.4;
            color: var(--app-v2-muted);
        }

    .app-page .app-page-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
        margin-left: auto;
    }

    .app-page .app-action {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        padding: 9px 15px;
        border: 1px solid var(--app-v2-border);
        border-radius: 9px;
        background: #fff;
        color: var(--app-v2-navy);
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.2;
        text-decoration: none;
        cursor: pointer;
    }

        .app-page .app-action:hover {
            background: #edf4ff;
            border-color: var(--app-v2-blue);
            color: var(--app-v2-navy);
        }

    .app-page .app-action--primary {
        background: var(--app-v2-blue);
        border-color: var(--app-v2-blue);
        color: #fff;
    }

        .app-page .app-action--primary:hover {
            background: #0752bb;
            color: #fff;
        }

    .app-page .app-action--danger {
        background: #bf2940;
        border-color: #bf2940;
        color: #fff;
    }

        .app-page .app-action--danger:hover {
            background: #a31d33;
            color: #fff;
        }

    .app-page .app-action--small {
        min-height: 34px;
        padding: 6px 10px;
        font-size: 12px;
    }

    .app-page :is(.app-action, .app-control, .app-row-action):focus-visible {
        outline: 3px solid var(--app-v2-blue);
        outline-offset: 2px;
    }

    .app-page .app-page-body {
        padding: 10px 2px 55px;
        min-width: 0;
    }

    .app-page .app-section {
        min-width: 0;
        margin: 0 0 14px;
    }

    .app-page .app-section-heading {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 53px;
        margin: 10px 0 12px;
        padding: 9px 12px;
        border: 1px solid var(--app-v2-soft-border);
        border-radius: 11px;
        background: var(--app-v2-section-gradient);
        font-size: 16px;
        font-weight: 750;
        line-height: 1.3;
        color: var(--app-v2-navy);
    }

    .app-page .app-section-icon {
        display: inline-grid;
        place-items: center;
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        border-radius: 9px;
        background: #e5efff;
        color: var(--app-v2-blue);
        font-size: 15px;
    }

        .app-page .app-section-icon svg {
            display: block;
            width: 18px;
            height: 18px;
        }

    .app-page .app-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
        align-items: start;
    }

    .app-page .app-field {
        min-width: 0;
    }

    .app-page .app-field--full {
        grid-column: 1 / -1;
    }

    .app-page .app-label {
        display: block;
        position: static;
        margin: 0 0 6px;
        color: var(--app-v2-navy);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.4;
    }

    .app-page .app-control {
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 44px;
        margin: 0;
        padding: 10px 12px;
        border: 1px solid var(--app-v2-border);
        border-radius: 9px;
        background: var(--app-v2-bg);
        color: var(--app-v2-navy);
        font: inherit;
        font-size: 14px;
        line-height: 1.4;
    }

        .app-page .app-control:focus {
            outline: 2px solid var(--app-v2-blue);
            outline-offset: 1px;
            border-color: var(--app-v2-blue);
            background: #fff;
        }

        .app-page .app-control[readonly] {
            background: #f0f3f8;
            color: var(--app-v2-muted);
        }

    .app-page :is(input[type="time"], input[type="date"], input[type="datetime-local"]).app-control {
        -webkit-appearance: auto;
        appearance: auto;
        min-width: 0;
        line-height: normal;
    }

    .app-page .app-validation {
        display: block;
        margin-top: 4px;
        color: #a61d36;
        font-size: 12px;
    }

        .app-page .app-validation:empty {
            display: none;
        }

    .app-page .app-choice-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px;
        min-width: 0;
        min-height: 40px;
        margin: 0;
        padding: 8px 11px;
        border: 1px solid #dce6f7;
        border-radius: 9px;
        background: var(--app-v2-bg);
        color: var(--app-v2-navy);
        font-size: 13px;
        cursor: pointer;
    }

        .app-page .app-choice-row:has(input:checked) {
            background: #eaf2ff;
            border-color: var(--app-v2-blue);
        }

        .app-page .app-choice-row:focus-within {
            outline: 2px solid var(--app-v2-blue);
            outline-offset: 2px;
        }

        .app-page .app-choice-row :is(input[type="checkbox"], input[type="radio"]) {
            flex: 0 0 17px;
            width: 17px;
            height: 17px;
            margin: 0;
            accent-color: var(--app-v2-blue);
        }

    .app-page .app-details {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin: 0;
    }

    .app-page .app-detail {
        min-width: 0;
        padding: 12px 14px;
        border: 1px solid #dce6f7;
        border-radius: 10px;
        background: var(--app-v2-bg);
    }

        .app-page .app-detail dt {
            color: var(--app-v2-muted);
            font-size: 12px;
            font-weight: 600;
        }

        .app-page .app-detail dd {
            margin: 4px 0 0;
            font-size: 14px;
            overflow-wrap: anywhere;
        }

    .app-page .app-search {
        width: 100%;
        max-width: 430px;
        margin: 10px 0 15px;
    }

    .app-page .app-table-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        border: 1px solid var(--app-v2-soft-border);
        border-radius: 10px;
        background: #fff;
    }

    .app-page .app-data-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: auto;
        font-size: 13px;
        color: var(--app-v2-navy);
    }

        .app-page .app-data-table th {
            padding: 12px;
            text-align: left;
            font-weight: 750;
            background: #edf4ff;
            border-bottom: 1px solid var(--app-v2-soft-border);
        }

        .app-page .app-data-table td {
            padding: 13px 12px;
            vertical-align: middle;
            border-bottom: 1px solid #dfe8f5;
            overflow-wrap: anywhere;
        }

        .app-page .app-data-table tbody tr:last-child td {
            border-bottom: 0;
        }

        .app-page .app-data-table tbody tr:hover {
            background: #f8fbff;
        }

        .app-page .app-data-table tr[hidden] {
            display: none !important;
        }


    /* Table action layouts must be applied inside a td, never to the td itself. */

    .app-page .app-table-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    .app-page .app-row-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: 6px 10px;
        border: 1px solid var(--app-v2-soft-border);
        border-radius: 8px;
        background: #f4f8ff;
        color: #0752bb;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.25;
        text-decoration: none;
        white-space: nowrap;
    }

        .app-page .app-row-action:hover {
            border-color: var(--app-v2-blue);
            background: #eaf2ff;
        }

    .app-page .app-row-action--danger {
        color: #a8203b;
        border-color: #ecc6cf;
        background: #fffafb;
    }

        .app-page .app-row-action--danger:hover {
            border-color: #b0233c;
            background: #fff0f2;
        }

    .app-page .app-inline-decision {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid var(--app-v2-border);
        border-radius: 9px;
        background: #fff;
        font-size: 13px;
    }

        .app-page .app-inline-decision[hidden] {
            display: none !important;
        }

    .app-page .app-inline-decision-actions {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
        margin-left: auto;
    }

@media (max-width: 768px) {
    .app-page {
        padding: 8px 12px 50px;
    }

        .app-page .app-fields, .app-page .app-details {
            grid-template-columns: minmax(0, 1fr);
        }

        .app-page .app-page-actions {
            justify-content: flex-end;
        }

        .app-page .app-table-wrap {
            border: 0;
            background: transparent;
            overflow: visible;
        }

        .app-page .app-data-table thead {
            display: none;
        }

        .app-page .app-data-table tbody tr {
            display: block;
            margin-bottom: 10px;
            border: 1px solid #dce6f7;
            border-radius: 9px;
            background: #fff;
            overflow: hidden;
        }

        .app-page .app-data-table td {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            padding: 8px 10px;
            border-bottom: 1px solid #edf2fa;
        }

            .app-page .app-data-table td:last-child {
                border-bottom: 0;
            }

            .app-page .app-data-table td::before {
                content: attr(data-label);
                color: var(--app-v2-muted);
                font-weight: 650;
                flex: 0 0 35%;
            }

            .app-page .app-data-table td.app-table-action-cell::before {
                display: none;
            }

        .app-page .app-table-actions {
            justify-content: flex-end;
        }
}

@media (max-width: 540px) {
    .app-page .app-page-header {
        padding: 10px;
    }

    .app-page .app-page-header-copy h1 {
        font-size: 18px;
    }

    .app-page .app-section-heading {
        font-size: 15px;
    }
}

@media (max-width: 380px) {
    .app-page {
        padding-inline: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-page .app-choice-row {
        transition: none;
    }
}


/* SAFARI: retain user pinch zoom; prevent automatic iOS input-focus zoom.
   Mobile focusable input/select/textarea text must compute to >=16px.
   This compatibility rule also covers pages not yet migrated to .app-page.
   Touchscreen landscape orientations are included. */

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    :is(.app-layout-content, .app-page)
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea) {
        font-size: 16px !important;
        min-width: 0;
        max-width: 100%;
    }
}

/* Portal V2: keep header validation and inline decisions on their own row. */
.app-page .app-page-header > :is(.app-inline-decision, .app-validation) {
    flex: 1 0 100%;
    min-width: 0;
}

.app-page .app-page-header > .app-validation.validation-summary-valid {
    display: none;
}

.app-page .app-page-header > .app-validation:empty {
    display: none;
}

.app-page .app-inline-decision:has(> .app-inline-decision-actions) {
    justify-content: space-between;
}

.app-page :is(.app-page-actions, .app-inline-decision-actions) > .app-action:last-child {
    flex-shrink: 0;
}

.app-page .app-detail img[width="160"] {
    display: block;
    width: 160px;
    height: 160px;
    max-width: 100%;
    object-fit: contain;
}

/* Portal V2 pages use a single set of gutters when hosted in the portal layout. */
.app-layout-content > :is(div, main, section).app-page {
    width: 100%;
    max-width: var(--app-content-max-width, 1220px);
}


/* Portal V2: reusable list links, counts and two-column desktop table geometry. */
.app-page .app-record-link {
    color: #0752bb;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

    .app-page .app-record-link:hover {
        text-decoration: underline;
    }

    .app-page .app-record-link:focus-visible {
        outline: 3px solid var(--app-v2-blue);
        outline-offset: 2px;
    }

.app-page .app-result-count {
    display: block;
    margin: 0 0 5px;
    color: var(--app-v2-muted);
    font-size: 12px;
}

.app-page .app-empty-state {
    color: var(--app-v2-muted);
    font-size: 13px;
}

    .app-page .app-empty-state[hidden] {
        display: none !important;
    }

@media (min-width: 769px) {
    .app-page .app-data-table--two-column th:first-child,
    .app-page .app-data-table--two-column td:first-child {
        width: 65%;
    }

    .app-page .app-data-table--two-column th:last-child,
    .app-page .app-data-table--two-column td:last-child {
        width: 35%;
    }
}

/* Portal V2 reusable list, query and feedback components (module-independent). */
.app-page .app-conditional-field {
    display: none;
}

.app-page .app-notice {
    margin: 10px 0 14px;
    padding: 11px 13px;
    border: 1px solid #c9dcfc;
    border-radius: 10px;
    background: #f3f8ff;
    color: #496383;
    font-size: 13px;
    line-height: 1.5;
}

.app-page .app-notice--warning,
.app-page .app-inline-decision.app-note--warning {
    border-color: #e3bd88;
    background: #fff9ed;
    color: #6c4313;
}

.app-page .app-inline-decision.app-note--danger {
    border-color: #dc97a2;
    background: #fff7f8;
    color: #991b32;
}

.app-page .app-search-toolbar {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

    .app-page .app-search-toolbar .app-search {
        flex: 1 1 260px;
        margin: 0;
        min-width: 0;
    }

.app-page .app-data-table .app-options-column {
    width: 260px;
    min-width: 220px;
    vertical-align: middle;
}

.app-page .app-data-table .app-table-details-row td {
    padding-top: 7px;
    padding-bottom: 12px;
    border-top: none;
    color: #496383;
    font-size: 12px;
}

.app-page .app-table-detail-line {
    display: block;
    margin: 0 0 4px;
}

.app-page mark {
    color: inherit;
    background: #fff3a3;
    border-radius: 2px;
    padding: 0 2px;
}

.app-page .app-mobile-only {
    display: none;
}

.app-page .app-record-card {
    border: 1px solid #c9dcfc;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 10px;
}

.app-page .app-record-card-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid #e6edf8;
}

    .app-page .app-record-card-row:last-child {
        border-bottom: 0;
    }

.app-page .app-record-card-label {
    flex: 0 0 34%;
    min-width: 0;
    color: #496383;
    font-size: 12px;
    font-weight: 700;
}

.app-page .app-record-card-value {
    min-width: 0;
    text-align: right;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.app-page .app-record-card-actions {
    padding: 10px 12px;
    border-bottom: 1px solid #e6edf8;
    font-size: 12px;
}

    .app-page .app-record-card-actions strong {
        display: block;
        margin-bottom: 8px;
    }

    .app-page .app-record-card-actions .app-table-actions {
        justify-content: flex-start;
    }

.app-page .app-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.78);
    padding: 20px;
}

.app-page .app-search-overlay-content {
    background: #fff;
    padding: 22px 26px;
    border: 1px solid #c9dcfc;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(8,38,82,.16);
    text-align: center;
}

.app-page .app-search-overlay-text {
    margin-top: 12px;
    color: #082652;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 992px) {
    .app-page .app-desktop-only {
        display: none;
    }

    .app-page .app-mobile-only {
        display: block;
    }
}

@media (max-width: 540px) {
    .app-page .app-search-toolbar .app-search {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Portal V2: reusable positive/negative record status (module-independent). */
.app-page .app-status {
    font-size: 13px;
    font-weight: 650;
}

.app-page .app-status--positive {
    color: #24643d;
}

.app-page .app-status--negative {
    color: #8f3c49;
}

/* Portal V2: report workspace compatibility and shared image-viewer display.
   Only applies when a report explicitly opts into the new neutral header components. */
.app-page .report-header.app-page-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
    padding: 12px 15px !important;
    min-height: 72px;
    border: 1px solid #c9dcfc;
    border-radius: 12px;
    background: linear-gradient(90deg, #e5edf9, #f2f6fd 50%, #fff);
    box-shadow: 0 3px 12px rgba(8,38,82,.06);
}

    .app-page .report-header.app-page-header .report-title {
        font-size: 20px !important;
        font-weight: 750 !important;
        color: #082652 !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .app-page .report-header.app-page-header .app-page-header-icon {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        background: #e6f0ff;
        color: #0865e7;
        border-radius: 12px;
    }

    .app-page .report-header.app-page-header .report-header-actions.app-page-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
        margin-left: auto;
        width: auto;
    }

.app-page .app-image-preview {
    display: block;
    width: min(250px, 100%);
    height: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
}

.app-page .app-image-caption {
    color: #496383;
    font-size: 13px;
    margin: 10px 0 0;
    font-weight: 650;
}

@media (max-width: 600px) {
    .app-page .report-header.app-page-header {
        padding: 10px !important;
    }

        .app-page .report-header.app-page-header .report-title {
            font-size: 18px !important;
        }

        .app-page .report-header.app-page-header .report-header-actions.app-page-actions {
            width: 100%;
            justify-content: flex-end;
        }
}


/* Portal V2: shared account and authentication layouts.
   Independent of any Razor filename or business module. */
.app-page.app-auth-page,
.app-layout-content > .app-page.app-auth-page {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
}

.app-page.app-auth-page--compact,
.app-layout-content > .app-page.app-auth-page--compact {
    max-width: 560px;
}

.app-auth-page .app-page-body {
    padding: 14px 2px 40px;
}

.app-auth-page .app-section {
    margin-bottom: 17px;
}

.app-auth-page .app-section-heading {
    margin-top: 0;
}

.app-auth-page .app-fields {
    margin-block: 4px 12px;
}

.app-auth-page .app-auth-password-group {
    display: grid;
    gap: 9px;
    align-content: start;
    min-width: 0;
}

    .app-auth-page .app-auth-password-group .app-choice-row {
        margin: 0;
    }

.app-auth-page .app-auth-list {
    margin: 8px 0 14px;
    padding-left: 25px;
    color: #082652;
    font-size: 14px;
    line-height: 1.6;
}

    .app-auth-page .app-auth-list li {
        margin: 5px 0;
    }

.app-auth-page .app-auth-lead {
    display: block;
    margin: 10px 0 6px;
    color: #082652;
    font-weight: 700;
}

.app-auth-page .app-auth-copy {
    margin: 6px 0 14px;
    color: #496383;
    font-size: 14px;
    line-height: 1.55;
}

.app-auth-page .app-notice .app-auth-list {
    margin-bottom: 0;
}

.app-auth-page .app-auth-guidance {
    margin-bottom: 14px;
}

.app-auth-page .app-choice-row {
    width: 100%;
}

.app-auth-page .app-page-actions > .app-action[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

.app-auth-page .app-page-header-icon:is(a):hover {
    color: #0752bb;
    background: #dbeaff;
    text-decoration: none;
}

.app-auth-page .app-validation[role="alert"]:empty,
.app-auth-page .app-validation.validation-summary-valid {
    display: none;
}

.app-auth-page .app-validation[role="alert"]:not(:empty) {
    border: 1px solid #dc97a2;
    background: #fff7f8;
    border-radius: 9px;
    padding: 9px 12px;
    margin-bottom: 12px;
}

.app-auth-page .app-validation[role="alert"] ul {
    margin: 0;
    padding-left: 20px;
}

@media (max-width: 768px) {
    .app-auth-page .app-page-body {
        padding-top: 12px;
    }

    .app-auth-page .app-auth-list {
        padding-left: 22px;
    }

    .app-auth-page .app-page-header-main {
        flex-basis: 180px;
    }

    .app-auth-page .app-page-actions {
        margin-left: auto;
        justify-content: flex-end;
    }
}
/* Keep the previously approved login layout, with Safari's 16px focus safeguard. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .app-login :is(input.app-login-input, select, textarea) {
        font-size: 16px !important;
    }
}

/* PORTAL V2 — Generic reading and informational content (module-independent). */
.app-page .app-reading-column {
    width: 100%;
    max-width: 1000px;
    min-width: 0;
}

.app-page .app-content-copy {
    color: var(--app-v2-muted, #496383);
    font-size: 14px;
    line-height: 1.6;
    margin: 8px 0 12px;
}

    .app-page .app-content-copy.app-content-lead {
        color: var(--app-v2-navy, #082652);
        font-weight: 700;
        margin: 12px 0 8px;
    }

.app-page .app-content-list {
    margin: 8px 0 17px;
    padding-left: 27px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--app-v2-navy, #082652);
}

    .app-page .app-content-list > li {
        padding-left: 2px;
        margin: 0 0 8px;
        overflow-wrap: anywhere;
    }

.app-page .app-content-illustration {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
}

    .app-page .app-content-illustration img {
        width: 90px;
        height: 90px;
        max-width: 100%;
        object-fit: contain;
    }

@media (max-width: 540px) {
    .app-page .app-content-list {
        padding-left: 23px;
    }

    .app-page .app-content-illustration {
        padding-top: 6px;
    }
}

/* PORTAL V2 — centered brand seal on the lower edge of shared heading bars.
   The existing page icon, text, and action buttons stay unchanged.
   The seal artwork is served from wwwroot/Images/idfavicon.png.
   This is decorative CSS only; it requires no Razor changes. */
:root {
    --app-heading-brand-image: url("../Images/idfavicon.png");
    --app-brand-seal-size: 52px;
    --app-brand-seal-overhang: 20px;
    --app-brand-artwork-size: 40px;
}

/* Only establish positioning where a header is not already sticky/positioned.
   :where() deliberately has zero specificity, allowing existing sticky rules to win. */
:where(.app-heading, .app-login-heading, .app-invite-page .app-screen-header) {
    position: relative;
}

/* Keep heading text and actions in their normal row. Reserve only enough room
   for the seal to overlap the bottom border without touching the description. */
:is( .app-page .app-page-header, .point-page .point-heading, .app-heading, .app-login-heading, .app-invite-page .app-screen-header, .app-my-invites .app-screen-header, .app-history-page .app-screen-header, .app-org-header, .app-blacklist__header, .sa-heading, .wh-heading, .ur-heading ) {
    padding-bottom: 32px !important;
    margin-bottom: 25px;
}

    :is( .app-page .app-page-header, .point-page .point-heading, .app-heading, .app-login-heading, .app-invite-page .app-screen-header, .app-my-invites .app-screen-header, .app-history-page .app-screen-header, .app-org-header, .app-blacklist__header, .sa-heading, .wh-heading, .ur-heading )::after {
        content: "";
        position: absolute;
        inset-inline-start: 50%;
        inset-block-start: auto;
        inset-block-end: calc(-1 * var(--app-brand-seal-overhang));
        transform: translateX(-50%);
        width: var(--app-brand-seal-size);
        height: var(--app-brand-seal-size);
        box-sizing: border-box;
        border: 2px solid #bed3f5;
        border-radius: 50%;
        background-color: #fff;
        background-image: var(--app-heading-brand-image);
        background-repeat: no-repeat;
        background-position: center;
        background-size: var(--app-brand-artwork-size, 40px) var(--app-brand-artwork-size, 40px);
        box-shadow: 0 0 0 4px #fff, 0 5px 12px rgba(8,38,82,.16), inset 0 0 0 3px #f2f7ff;
        z-index: 2;
        pointer-events: none;
    }

/* Compact sign-in pages need a little room before the first form field. */
.app-login .app-login-heading,
.app-page.app-auth-page .app-page-header {
    margin-bottom: 30px;
}

/* Legacy interactive report headings use !important shorthand declarations;
   override just their bottom spacing, leaving all report controls untouched. */
.app-page .report-header.app-page-header {
    padding-bottom: 32px !important;
    margin-bottom: 28px !important;
}

@media (max-width: 540px) {
    :root {
        --app-brand-seal-size: 52px;
        --app-brand-seal-overhang: 20px;
    }

    :is( .app-page .app-page-header, .point-page .point-heading, .app-heading, .app-login-heading, .app-invite-page .app-screen-header, .app-my-invites .app-screen-header, .app-history-page .app-screen-header, .app-org-header, .app-blacklist__header, .sa-heading, .wh-heading, .ur-heading )::after {
        background-size: var(--app-brand-artwork-size, 40px) var(--app-brand-artwork-size, 40px);
    }
}

/* Portal V2 — accessible clickable surface for the existing brand seal.
   The actual navigation link is attached only on authenticated pages by
   app-main-menu-badge.js. Public account pages keep the decorative seal. */
.app-main-menu-badge {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: calc(-1 * var(--app-brand-seal-overhang, 20px));
    transform: translateX(-50%);
    z-index: 5;
    display: block;
    box-sizing: border-box;
    inline-size: var(--app-brand-seal-size, 52px);
    block-size: var(--app-brand-seal-size, 52px);
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
}

    .app-main-menu-badge:hover {
        box-shadow: 0 0 0 5px rgba(8,101,231,.14);
    }

    .app-main-menu-badge:focus-visible {
        outline: 3px solid #0865e7;
        outline-offset: 6px;
    }

.app-main-menu-choice {
    flex: 0 0 100%;
    width: 100%;
    order: 10;
    margin-top: 7px;
    min-width: 0;
    flex-wrap: wrap;
}

    .app-main-menu-choice[hidden] {
        display: none !important;
    }

    .app-main-menu-choice .app-inline-decision-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
        margin-left: auto;
    }

@media (max-width: 540px) {
    .app-main-menu-choice .app-inline-decision-actions {
        flex-basis: 100%;
    }
}

/* Portal V2 — Main-menu brand seal is a REAL anchor on signed-in pages.
   The shared layout inserts it; keep the decorative ::after only on public pages. */
.app-layout-content .app-has-main-menu-badge::after {
    content: none !important;
    display: none !important;
}

.app-layout-content .app-has-main-menu-badge > .app-main-menu-badge {
    background-color: #fff;
    background-image: var(--app-heading-brand-image, url("../Images/idfavicon.png"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--app-brand-artwork-size, 40px) var(--app-brand-artwork-size, 40px);
    border: 2px solid #bed3f5;
    box-shadow: 0 0 0 4px #fff, 0 5px 12px rgba(8,38,82,.16), inset 0 0 0 3px #f2f7ff;
    z-index: 150;
}

    .app-layout-content .app-has-main-menu-badge > .app-main-menu-badge:hover {
        border-color: #0865e7;
        box-shadow: 0 0 0 5px rgba(8,101,231,.18), 0 6px 15px rgba(8,38,82,.2), inset 0 0 0 3px #f2f7ff;
    }

    .app-layout-content .app-has-main-menu-badge > .app-main-menu-badge:focus-visible {
        outline: 3px solid #0865e7;
        outline-offset: 6px;
    }

@media (max-width: 540px) {
    .app-layout-content .app-has-main-menu-badge > .app-main-menu-badge {
        background-size: var(--app-brand-artwork-size, 40px) var(--app-brand-artwork-size, 40px);
    }
}

/* Portal V2 — report heading seal compatibility.
   Legacy interactive reports style every direct header anchor as a full-width
   former logo row (and some hide them on mobile). A real menu seal is also
   a direct header anchor, so give ONLY that anchor explicit badge geometry.
   Keep the existing report controls, wizard, exports and scripts untouched. */
.app-layout-content .report-page .report-header.app-has-main-menu-badge > a.app-main-menu-badge {
    position: absolute !important;
    inset-inline-start: 50% !important;
    inset-inline-end: auto !important;
    inset-block-start: auto !important;
    inset-block-end: calc(-1 * var(--app-brand-seal-overhang, 20px)) !important;
    transform: translateX(-50%) !important;
    display: block !important;
    box-sizing: border-box !important;
    inline-size: var(--app-brand-seal-size, 52px) !important;
    block-size: var(--app-brand-seal-size, 52px) !important;
    width: var(--app-brand-seal-size, 52px) !important;
    height: var(--app-brand-seal-size, 52px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: var(--app-brand-seal-size, 52px) !important;
    max-height: var(--app-brand-seal-size, 52px) !important;
    flex: 0 0 var(--app-brand-seal-size, 52px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    text-decoration: none !important;
}

/* Portal V2: reusable section-grid, weekly time settings and QR cards.
   Neutral components: no module or Razor filename dependencies. */
.app-page .app-fields--sections > :is(.app-section-heading, .app-field--full, .app-validation) {
    grid-column: 1 / -1;
    min-width: 0;
}

.app-page .app-fields--sections > .app-section-heading {
    margin: 8px 0 0;
}

.app-page .app-fields--sections > .app-field--full > .app-section-heading {
    margin: 10px 0 12px;
}

.app-page .app-choice-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 8px;
    min-width: 0;
}

.app-page .app-camera-options {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 9px;
    min-width: 0;
}

    .app-page .app-camera-options > .app-choice-row {
        flex: 1 1 210px;
    }

    .app-page .app-camera-options > .app-validation:not(:empty) {
        flex-basis: 100%;
    }

.app-page .app-weekly-schedule {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

.app-page .app-schedule-day {
    min-width: 0;
    padding: 12px;
    border: 1px solid #dce6f7;
    border-radius: 10px;
    background: #fff;
}

.app-page .app-schedule-day-name {
    display: flex;
    align-items: center;
    min-height: 24px;
    margin: 0 0 10px;
    color: var(--app-v2-navy, #082652);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.3;
}

.app-page .app-schedule-times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

    .app-page .app-schedule-times .app-field {
        min-width: 0;
    }

.app-page .app-qr-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
    min-width: 0;
}

.app-page .app-qr-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 12px;
    padding: 15px;
    border: 1px solid #c9dcfc;
    border-radius: 12px;
    background: #fff;
}

.app-page .app-qr-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.app-page .app-qr-card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #eaf2ff;
    color: #0865e7;
}

    .app-page .app-qr-card-icon svg {
        display: block;
        width: 18px;
        height: 18px;
    }

.app-page .app-qr-card-head h2 {
    margin: 0;
    color: #082652;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.3;
}

.app-page .app-qr-card-head p {
    margin: 3px 0 0;
    color: #496383;
    font-size: 12px;
    line-height: 1.4;
}

.app-page .app-qr-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 176px;
    padding: 8px;
    border: 1px solid #e1eafa;
    border-radius: 9px;
    background: #f9fbff;
    overflow: hidden;
}

.app-page .app-qr-image {
    display: block;
    width: 160px;
    height: 160px;
    max-width: 100%;
    object-fit: contain;
}

.app-page .app-qr-placeholder {
    color: #58749c;
    font-size: 12px;
}

.app-page .app-qr-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

@media (max-width: 750px) {
    .app-page .app-weekly-schedule,
    .app-page .app-qr-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 540px) {
    .app-page .app-schedule-times {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .app-page .app-schedule-day {
        padding: 10px;
    }

    .app-page .app-qr-card {
        padding: 12px;
    }
}

/* Portal V2 — treat multi-row table records as one visual hover/focus unit.
   Each logical record owns its own tbody.app-record-group. This keeps the
   detail row and any rowspan action cell highlighted together. */
.app-page .app-data-table tbody.app-record-group > tr > td {
    transition: background-color .12s ease;
}

.app-page .app-data-table tbody.app-record-group:is(:hover, :focus-within) > tr > td {
    background-color: #f8fbff;
}
/* No divider within a single record; keep dividers between records. */
.app-page .app-data-table tbody.app-record-group > tr:first-child > td:not([rowspan]) {
    border-bottom: 0;
}

.app-page .app-data-table tbody.app-record-group:not(:last-of-type) > tr:last-child > td,
.app-page .app-data-table tbody.app-record-group:not(:last-of-type) > tr:first-child > td[rowspan] {
    border-bottom: 1px solid #dfe8f5;
}

@media (prefers-reduced-motion: reduce) {
    .app-page .app-data-table tbody.app-record-group > tr > td {
        transition: none;
    }
}

/* Portal V2 — uniform record-level highlighting for single-row Index tables.
   tbody row headers are data cells, not column headers; keep the blue
   header background exclusively in thead. */
.app-page .app-data-table tbody tr > th[scope="row"] {
    background-color: #fff;
    border-bottom: 1px solid #dfe8f5;
    vertical-align: middle;
    transition: background-color .12s ease;
}

.app-page .app-data-table tbody tr:last-child > th[scope="row"] {
    border-bottom: 0;
}

.app-page .app-data-table tbody tr:is(:hover, :focus-within) > th[scope="row"],
.app-page .app-data-table tbody tr:is(:hover, :focus-within) > td {
    background-color: #f8fbff;
}
/* Keep grouped records uniform even if their first column uses a row header. */
.app-page .app-data-table tbody.app-record-group:is(:hover, :focus-within) > tr > th[scope="row"] {
    background-color: #f8fbff;
}

@media (prefers-reduced-motion: reduce) {
    .app-page .app-data-table tbody tr > th[scope="row"] {
        transition: none;
    }
}

/* Portal V2: disabled action buttons must look disabled, not just ignore clicks. */
.app-page button.app-action:disabled,
.app-page button.app-action:disabled:hover,
.app-page button.app-action:disabled:active {
    background: #e8edf3;
    border-color: #cbd5e1;
    color: #748196;
    opacity: 1;
    box-shadow: none;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

/* Portal V2 — canonical iD badge, matched to the approved Login appearance.
   The artwork is the top layer so the dome treatment cannot wash out the logo. */
:root {
    --app-brand-seal-size: 54px;
    --app-brand-seal-overhang: 20px;
    --app-brand-seal-artwork-size: 43px;
}

@media (max-width: 540px) {
    :root {
        --app-brand-seal-size: 54px;
        --app-brand-seal-overhang: 20px;
    }
}

:is( .app-page .app-page-header, .point-page .point-heading, .app-heading, .app-login-heading, .app-invite-page .app-screen-header, .app-my-invites .app-screen-header, .app-history-page .app-screen-header, .app-org-header, .app-blacklist__header, .sa-heading, .wh-heading, .ur-heading )::after,
.app-layout-content .app-has-main-menu-badge > .app-main-menu-badge {
    box-sizing: border-box !important;
    width: var(--app-brand-seal-size) !important;
    height: var(--app-brand-seal-size) !important;
    inline-size: var(--app-brand-seal-size) !important;
    block-size: var(--app-brand-seal-size) !important;
    border: 1px solid #b8cff0 !important;
    border-radius: 50% !important;
    background-color: #fff !important;
    background-image: var(--app-heading-brand-image), radial-gradient(ellipse 92% 55% at 35% 12%, #fff 0%, #fff 48%, rgba(236,245,255,.65) 82%, transparent 100%), linear-gradient(160deg, #fff 10%, #f1f7ff 54%, #cfdef5 100%) !important;
    background-position: center, center, center !important;
    background-repeat: no-repeat !important;
    background-size: var(--app-brand-seal-artwork-size) var(--app-brand-seal-artwork-size), 100% 100%, 100% 100% !important;
    box-shadow: 0 0 0 3px #fff, 0 7px 14px rgba(8,38,82,.23), 0 2px 4px rgba(8,38,82,.10), inset 0 3px 3px rgba(255,255,255,1), inset 0 -5px 6px rgba(79,128,194,.25), inset 3px 0 5px rgba(255,255,255,.75) !important;
}
/* Report header anchors have legacy full-width rules; retain circular geometry. */
.app-layout-content .report-page .report-header.app-has-main-menu-badge > a.app-main-menu-badge {
    width: var(--app-brand-seal-size) !important;
    height: var(--app-brand-seal-size) !important;
    min-width: var(--app-brand-seal-size) !important;
    min-height: var(--app-brand-seal-size) !important;
    max-width: var(--app-brand-seal-size) !important;
    max-height: var(--app-brand-seal-size) !important;
    flex: 0 0 var(--app-brand-seal-size) !important;
}

/* Portal V2 — match the approved Login seal EXACTLY on every header.
   All headers now use idfavicon.png at 46px with contain sizing.
   Unify the actual asset and geometry. */
:root {
    --app-heading-brand-image: url("../Images/idfavicon.png");
    --app-brand-seal-size: 46px;
    --app-brand-seal-overhang: 22px;
}

@media (max-width: 540px) {
    :root {
        --app-brand-seal-size: 46px;
        --app-brand-seal-overhang: 22px;
    }
}

:is(.app-page .app-page-header, .point-page .point-heading, .app-heading, .app-login-heading, .app-invite-page .app-screen-header, .app-my-invites .app-screen-header, .app-history-page .app-screen-header, .app-org-header, .app-blacklist__header, .sa-heading, .wh-heading, .ur-heading)::after,
.app-layout-content .app-has-main-menu-badge > .app-main-menu-badge {
    width: 46px !important;
    height: 46px !important;
    inline-size: 46px !important;
    block-size: 46px !important;
    bottom: -22px !important;
    inset-block-end: -22px !important;
    background-image: url("../Images/idfavicon.png") !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #fff !important;
    border: 1.5px solid #b7d0f5 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 3px #fff, 0 6px 13px rgba(8,38,82,.23), inset 0 2px 4px rgba(255,255,255,.95), inset 0 -3px 5px rgba(67,114,187,.14) !important;
}

.app-layout-content .report-page .report-header.app-has-main-menu-badge > a.app-main-menu-badge {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    flex: 0 0 46px !important;
}

/* Portal V2 — epoxy resin dome finish, consistent on all iD heading badges.
   The translucent gloss sits over idfavicon.png without changing its scale. */
:is(.app-page .app-page-header, .point-page .point-heading, .app-heading, .app-login-heading, .app-invite-page .app-screen-header, .app-my-invites .app-screen-header, .app-history-page .app-screen-header, .app-org-header, .app-blacklist__header, .sa-heading, .wh-heading, .ur-heading)::after,
.app-layout-content .app-has-main-menu-badge > .app-main-menu-badge {
    background-image: radial-gradient(ellipse 90% 49% at 38% 6%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.55) 38%, rgba(255,255,255,.07) 84%, transparent 100%), linear-gradient(180deg, rgba(255,255,255,.22) 0%, transparent 44%, rgba(62,109,180,.08) 83%, rgba(49,91,156,.16) 100%), url("../Images/idfavicon.png") !important;
    background-size: 100% 100%, 100% 100%, contain !important;
    background-position: center, center, center !important;
    background-repeat: no-repeat !important;
    border: 1px solid #aac6ed !important;
    box-shadow: 0 0 0 3px #fff, 0 3px 4px rgba(8,38,82,.12), 0 9px 15px rgba(8,38,82,.25), inset 0 3px 3px rgba(255,255,255,.98), inset 0 -5px 7px rgba(45,91,166,.32), inset 2px 0 4px rgba(255,255,255,.75), inset -2px 0 3px rgba(65,112,178,.13) !important;
}


/* === 19 / Main menu: sticky heading and unobstructed account dropdown ===
   Scoped to the dashboard; other page headers and epoxy seal geometry remain unchanged. */
.app-layout-content .app-menu > .app-panel > .app-heading {
    position: sticky;
    top: var(--app-sticky-header-offset, 0px);
    z-index: 200;
    isolation: isolate;
    box-shadow: 0 5px 16px rgba(8, 38, 82, .09);
}

    /* The account menu must paint above the overlapping iD badge (z-index:150).
   Keep the badge's navigation and the menu's existing positioning intact. */
    .app-layout-content .app-menu > .app-panel > .app-heading .app-heading-actions,
    .app-layout-content .app-menu > .app-panel > .app-heading .app-header-info,
    .app-layout-content .app-menu > .app-panel > .app-heading .app-user-menu {
        position: relative;
        z-index: 210;
    }

    .app-layout-content .app-menu > .app-panel > .app-heading .app-user-dropdown {
        z-index: 220;
    }

/* Safari: don't clip the expanded menu within the sticky heading. */
.app-layout-content .app-menu > .app-panel > .app-heading {
    overflow: visible;
}

    /* Main menu dropdown stays above the centre seal within the sticky heading. */
    .app-layout-content .app-menu > .app-panel > .app-heading .app-user-menu {
        z-index: 210;
    }

    .app-layout-content .app-menu > .app-panel > .app-heading .app-user-dropdown {
        z-index: 220;
    }

/* === 20 / Canonical Login iD badge on every portal heading ===
   Final cascade override: remove epoxy light layers, use one image and geometry.
   Do not change Main menu sticky/dropdown stacking from section 19. */
:root {
    --app-heading-brand-image: url("../Images/idfavicon.png");
    --app-brand-seal-size: 46px;
    --app-brand-seal-overhang: 22px;
}

:is(.app-page .app-page-header, .point-page .point-heading, .app-heading, .app-login-heading, .app-invite-page .app-screen-header, .app-my-invites .app-screen-header, .app-history-page .app-screen-header, .app-org-header, .app-blacklist__header, .sa-heading, .wh-heading, .ur-heading)::after,
.app-layout-content .app-has-main-menu-badge > .app-main-menu-badge {
    width: 46px !important;
    height: 46px !important;
    inline-size: 46px !important;
    block-size: 46px !important;
    inset-block-end: -22px !important;
    background: #fff url("../Images/idfavicon.png") center / contain no-repeat !important;
    border: 1.5px solid #b7d0f5 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 3px #fff, 0 6px 13px rgba(8,38,82,.23), inset 0 2px 4px rgba(255,255,255,.95), inset 0 -3px 5px rgba(67,114,187,.14) !important;
}

/* === 21 / Main menu: breathing room below the centre iD badge ===
   Increase the separation from the first tile row only; keep the sticky
   heading, dropdown stacking, and badge geometry exactly as approved. */
.app-layout-content .app-menu > .app-panel > .app-heading {
    margin-bottom: 39px !important;
}


/* === 22 / PORTAL-WIDE INTER TYPOGRAPHY — approved Smart Home language ===
   Typography only. Preserve feature geometry, sticky headers, menu layering,
   tables, statuses, existing brand seal, and mobile control safeguards.
   The Smart Home-specific stylesheet remains responsible for its dashboard.
   Font weights: regular 400, medium 500, selective semibold 600.
   Use font size and space rather than weight to create visual hierarchy. */
:root {
    --app-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --app-font-regular: 400;
    --app-font-medium: 500;
    --app-font-semibold: 600;
    --app-page-heading-size: 24px;
    --app-section-heading-size: 19px;
    --app-heading-description-size: 14px;
    --app-heading-weight: 500;
}

:where(body) {
    font-family: var(--app-font-family);
}

:where(.app-layout-content, .app-login, .app-page, .point-page, .app-menu, .app-organisations, .app-blacklist, .wh-page, .sa-page, .ur-page) {
    font-family: var(--app-font-family);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
}

:where(.app-layout-content, .app-login, .app-page, .point-page, .app-menu)
:is(button, input, select, textarea) {
    font-family: inherit;
}

/* Legacy screens and V2 pages have different naming, but share the same scale. */
:is(.app-layout-content, .app-login, .app-page, .point-page)
:is(.app-heading h1, .app-login-heading h1, .app-screen-copy h1, .app-page-header-copy h1, .point-heading h1, .app-org-header h1, .app-blacklist__heading h1, .wh-heading h1, .sa-heading h1, .ur-heading h1, .report-title) {
    font-size: var(--app-page-heading-size) !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: -.025em;
    height: auto;
    overflow: visible;
}

:is(.app-layout-content, .app-login, .app-page, .point-page)
:is(.app-heading p, .app-login-heading p, .app-screen-copy p, .app-page-header-copy p, .point-heading p, .app-org-header p, .app-blacklist__heading p, .wh-heading p, .sa-heading p, .ur-heading p) {
    font-size: var(--app-heading-description-size) !important;
    font-weight: 400;
    line-height: 1.55 !important;
}

:is(.app-layout-content, .app-login, .app-page, .point-page)
:is(.app-section-heading, .app-form-section-title, .app-section > h2, .app-history-section-head h2, .app-my-invites-section-heading h2, .point-section-title, .point-qr-panel-head h2, .app-org-section-title, .app-device-site-heading h2, .wh-section h2, .sa-section h2, .ur-section h2, .app-dialog__title, .app-changes-dialog h2) {
    font-size: var(--app-section-heading-size) !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    letter-spacing: -.015em;
    height: auto;
}
/* Readable forms and informational copy; avoid bolding every field label. */
:is(.app-layout-content, .app-login, .app-page, .point-page)
:is(.app-label, .app-form-label, .point-label, .app-login-label, .app-org-label, .app-blacklist__label, .app-history-field label, .ur-field > label, .sa-field label, .wh-field label) {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

:is(.app-layout-content, .app-login, .app-page, .point-page)
:is(.app-control, .app-form-input, .app-login-input, .point-input, .app-org-input, .app-history-input, .wh-control, .sa-input, .ur-input) {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
}

:is(.app-layout-content, .app-login, .app-page, .point-page)
:is(.app-action, .app-header-action, .app-row-action, .app-login-submit, .app-org-btn, .app-blacklist__button, .wh-button, .sa-btn, .ur-btn, .app-device-action, .app-history-action, .app-dropdown-link) {
    font-weight: 500;
    line-height: 1.45;
}

:is(.app-layout-content, .app-login, .app-page, .point-page)
:is(.app-notice, .app-content-copy, .app-form-section-description, .app-auth-copy, .app-history-help, .app-inline-decision, .app-dialog__message) {
    font-size: 14px;
    line-height: 1.6;
}

/* Fixed 19px legacy line boxes clip Inter descenders. Let content determine height. */
.app-layout-content .app-tile-title {
    height: auto;
    min-height: 0;
    line-height: 1.5;
    font-size: 16px;
    font-weight: 500;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.app-layout-content .app-tile-description {
    height: auto;
    line-height: 1.55;
    font-size: 13px;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.app-layout-content .app-group-link-copy strong {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

.app-layout-content .app-group-link-copy small {
    font-size: 13px;
    line-height: 1.55;
}

.app-layout-content .app-user strong {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

.app-layout-content .app-group-count {
    font-weight: 500;
}

/* Tabular data stays compact enough for dense administrative tables. */
.app-layout-content :is(.app-data-table, .app-device-table, .app-history-table, .app-my-invites-table, .app-org-table, .point-table, .wh-table, .sa-table, .ur-table) {
    font-size: 13px;
    line-height: 1.5;
}

    .app-layout-content :is(.app-data-table, .app-device-table, .app-history-table, .app-my-invites-table, .app-org-table, .point-table, .wh-table, .sa-table, .ur-table) th {
        font-weight: 500;
        line-height: 1.45;
    }
/* Avoid changes to the main dashboard's deliberately approved tile and mobile stat rules. */
@media (max-width: 700px) {
    :root {
        --app-page-heading-size: 22px;
        --app-section-heading-size: 18px;
        --app-heading-description-size: 14px;
    }

    .app-layout-content .app-tile {
        height: auto;
        min-height: 92px;
    }
}

@media (max-width: 380px) {
    :root {
        --app-page-heading-size: 21px;
    }
}