/*
 * RoomUpItalia Professional v1 — Responsive Core
 * Ambito: sito pubblico, autenticazione, workspace dei 5 profili e pannello Admin.
 * Strategia: mobile-first per viewport reali, indipendente da marca/modello del dispositivo.
 * Breakpoint principali: 1024 / 820 / 640 / 480 / 360 px.
 * Questo file viene caricato dopo il runtime del Builder per essere l'ultima rete di sicurezza responsive.
 */

:root {
    --rui-responsive-gutter: clamp(12px, 3.8vw, 20px);
    --rui-responsive-touch: 44px;
    --rui-responsive-radius: 10px;
}

html,
body {
    max-width: 100%;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

:is(.layout, .layout--full, .layout__main, main, .owner-workspace-shell__workspace,
    .owner-workspace-shell__layout, .owner-workspace-shell__main,
    .admin-shell__workspace, .admin-shell__layout, .admin-shell__main) {
    min-width: 0;
}

@media (max-width: 1024px) {
    :is(.layout__main, .owner-workspace-shell__main, .admin-shell__main) > * {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 820px) {
    html {
        min-width: 0;
        width: 100%;
        scroll-padding-top: 110px;
    }

    body {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    @supports not (overflow: clip) {
        body {
            overflow-x: hidden;
        }
    }

    :is(main, .layout__main, .owner-workspace-shell__main, .admin-shell__main) {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    :is(main, .layout__main, .owner-workspace-shell__main, .admin-shell__main) > * {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }

    :is(h1, h2, h3, h4, p, li, dd, dt, label, legend, td, th, a, strong, small, span) {
        overflow-wrap: anywhere;
    }

    pre,
    code {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    fieldset,
    form,
    form > * {
        min-width: 0;
        max-width: 100%;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        width: 100%;
        max-width: 100%;
        min-height: var(--rui-responsive-touch);
        font-size: 16px;
    }

    textarea {
        min-height: 112px;
    }

    :is(button, .btn, .button, [role="button"], input[type="submit"], input[type="button"]) {
        min-height: var(--rui-responsive-touch);
        touch-action: manipulation;
    }

    /* Griglie di contenuto: una colonna su smartphone/tablet portrait. */
    main :is(
        .form-grid,
        .auth-form-grid,
        .settings-grid,
        .account-grid,
        .identity-field-grid,
        .identity-form-grid,
        .identity-review-grid,
        .identity-detail-grid,
        .identity-document-grid,
        .identity-live-quality__grid,
        .identity-practice-summary__grid,
        .professional-form-grid,
        .professional-stat-grid,
        .professional-dashboard-grid,
        .professional-detail-grid,
        .professional-insight-grid,
        .professional-integration-grid,
        .professional-organization-grid,
        .professional-check-grid,
        .owner-property-grid,
        .owner-form-grid,
        .owner-amenity-grid,
        .owner-media-grid,
        .owner-listing-workflow-grid,
        .visit-field-grid,
        .visit-detail-grid,
        .visit-feedback-choice-grid,
        .support-layout,
        .support-form__grid,
        .seo-grid,
        .admin-statistics-grid,
        .admin-chat-flag-grid,
        .admin-chat-settings__grid,
        .admin-calendar-detail-grid,
        .admin-sponsors-card-grid,
        .admin-sponsor-detail-grid,
        .admin-sponsors-form-grid,
        .admin-user-form-grid,
        .admin-guide-form-grid,
        .admin-location-form-grid,
        .admin-review-setting-grid,
        .admin-partner-offer-form__grid,
        .performance-grid,
        .cadastral-fields-grid,
        .cadastral-choice-grid,
        .sponsor-registration-grid,
        .helpdesk-kpi-grid,
        .helpdesk-dashboard-columns,
        .rui-checkbox-grid,
        .checkbox-grid
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Righe azioni: mai oltre il viewport. */
    main :is(
        .form-actions,
        .settings-actions,
        .professional-form-actions,
        .professional-row-actions,
        .professional-header-actions,
        .tenant-workspace-page__actions,
        .tenant-workspace-inline-actions,
        .owner-page-header-actions,
        .owner-property-form__actions,
        .owner-launch-cta__actions,
        .owner-listing-workflow-card__actions,
        .visit-form-actions,
        .visit-response-actions,
        .visit-integration-actions,
        .identity-actions,
        .identity-wizard-actions,
        .identity-camera-actions,
        .registration-otp-actions,
        .admin-form-actions,
        .admin-user-actions,
        .admin-users-filter-actions,
        .admin-locations-actions,
        .admin-location-form-actions,
        .admin-tools-actions,
        .admin-chat-report__actions,
        .admin-calendar-actions,
        .admin-dashboard-toolbar__actions,
        .listing-preview-banner__actions,
        .listing-travel-times__actions
    ) {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        min-width: 0;
        max-width: 100%;
    }

    /* Tabelle: scroll interno, mai scroll dell'intera pagina. */
    :is(
        .table-responsive,
        .admin-table-wrapper,
        .admin-users-table-wrapper,
        .admin-sponsors-table-wrap,
        .admin-tools-table-wrap,
        .admin-statistics-table-wrap,
        .admin-location-table-wrap,
        .admin-calendar-table-wrap,
        .professional-integration-table-wrap,
        .cadastral-admin-table-wrap
    ) {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    main table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    main table :is(th, td) {
        white-space: normal;
    }

    /* Dialog e overlay. */
    :is(dialog, .modal, .modal-content, [class*="__modal"], [class*="-modal"]) {
        max-width: calc(100vw - (var(--rui-responsive-gutter) * 2));
        max-height: calc(100dvh - (var(--rui-responsive-gutter) * 2));
    }

    /* Header pubblico. */
    .site-header {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 10px;
        padding: 10px max(var(--rui-responsive-gutter), env(safe-area-inset-right, 0px)) 10px max(var(--rui-responsive-gutter), env(safe-area-inset-left, 0px));
    }

    .site-logo {
        min-width: 0;
    }

    .site-logo img {
        width: auto;
        max-width: min(210px, 58vw);
        height: auto;
        max-height: 44px;
    }

    .site-nav {
        width: 100%;
        min-width: 0;
        gap: 6px;
        padding: 2px 0 4px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .site-nav::-webkit-scrollbar {
        display: none;
    }

    .site-nav > a,
    .site-nav > details {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .site-nav > a {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        padding: 7px 10px;
    }

    .mobile-header-actions {
        min-width: 0;
        gap: 6px;
    }

    .mobile-header-search__form {
        min-width: 0;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
    }

    .mobile-header-search__form input {
        min-width: 0;
    }

    .account-context-switcher,
    .account-context-switcher__toggle {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .account-context-switcher__menu {
        right: 0;
        left: auto;
        width: min(360px, calc(100vw - (var(--rui-responsive-gutter) * 2)));
        max-width: 100%;
    }

    /* Workspace Professional v1: header + menu mobile compatti e contenuto fluido. */
    .rui-builder-private-workspace .owner-workspace-shell,
    .owner-workspace-shell {
        --ows-mobile-header-height: 98px;
        display: block !important;
        width: 100%;
        min-width: 0;
        min-height: 100dvh;
        background: var(--rui-builder-background, #ffffff);
    }

    .owner-workspace-header {
        position: sticky;
        top: var(--roomup-env-height, 0px) !important;
        z-index: 120;
        width: 100%;
        min-width: 0;
        height: var(--ows-mobile-header-height) !important;
        min-height: var(--ows-mobile-header-height) !important;
        padding: 0 max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px));
        background: #fff;
    }

    .owner-workspace-header__brand {
        width: auto;
        min-width: 0;
        height: 58px;
        padding: 7px 2px;
    }

    .owner-workspace-header__brand img {
        width: auto !important;
        max-width: min(164px, 48vw) !important;
        height: auto;
        max-height: 44px;
        object-fit: contain;
    }

    .owner-workspace-header__actions {
        min-width: 0;
        height: 58px;
        gap: 3px;
        padding: 5px 0;
    }

    .owner-workspace-header__icon {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .owner-workspace-header__user {
        width: 40px;
        min-width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .owner-workspace-header__user-copy,
    .owner-workspace-header__chevron {
        display: none !important;
    }

    .owner-workspace-header__contexts {
        top: 58px;
        left: max(10px, env(safe-area-inset-left, 0px));
        right: max(10px, env(safe-area-inset-right, 0px));
        height: 40px;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 6px;
        padding: 3px 0 5px;
    }

    .owner-workspace-header__contexts > strong {
        font-size: 9px;
    }

    .owner-workspace-header__contexts > div {
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .owner-workspace-header__contexts > div::-webkit-scrollbar {
        display: none;
    }

    .owner-workspace-header__context {
        min-height: 30px;
        padding: 5px 9px;
        font-size: 10px;
    }

    .owner-workspace-sidebar {
        position: sticky !important;
        top: calc(var(--roomup-env-height, 0px) + var(--ows-mobile-header-height)) !important;
        z-index: 2000;
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
        min-height: 58px;
        padding: 6px max(8px, env(safe-area-inset-right, 0px)) 6px max(8px, env(safe-area-inset-left, 0px));
        overflow: visible !important;
        border-right: 0;
        border-bottom: 1px solid var(--rui-builder-border, #dce2ea);
        background: #fff;
    }

    .account-workspace-sidebar__collapse,
    .account-workspace-sidebar__desktop-nav,
    .owner-workspace-sidebar__help {
        display: none !important;
    }

    .account-workspace-mobile-menu {
        display: block !important;
        width: min(240px, calc(100vw - 16px));
        max-width: 100%;
    }

    .account-workspace-mobile-menu__toggle {
        width: 100%;
        max-width: 100%;
        min-height: 44px;
    }

    .account-workspace-mobile-menu__panel {
        left: 0;
        width: min(620px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - var(--roomup-env-height, 0px) - var(--ows-mobile-header-height) - 58px - env(safe-area-inset-bottom, 0px));
    }

    .rui-builder-private-workspace .owner-workspace-shell__workspace,
    .owner-workspace-shell__workspace {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        background: var(--rui-builder-background, #ffffff);
    }

    .rui-builder-private-workspace .owner-workspace-shell__main,
    .owner-workspace-shell__main {
        width: 100% !important;
        min-width: 0;
        max-width: 100% !important;
        padding: 14px var(--rui-responsive-gutter) 24px !important;
        overflow-x: clip;
        background: var(--rui-builder-background, #ffffff);
    }

    .rui-builder-page-runtime,
    [data-rui-layout-block="content"] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .owner-workspace-shell--listing-search .listing-search-page,
    .owner-workspace-shell--listing-search.is-sidebar-collapsed .listing-search-page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Ricerca annunci e mappe. */
    :is(.listing-search-page, .listing-search-layout, .listing-results-column,
        .listing-map-column, .listing-search-form, .listing-search-form__fields,
        .listing-results, .listing-result-group, .listing-grid, .map-panel) {
        min-width: 0;
        max-width: 100%;
    }

    :is(.listing-search-layout, .listing-search-form__fields, .listing-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    :is(#listingMap, .listing-map, .leaflet-container) {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 300px;
        max-height: 60dvh;
    }

    /* Chat: nessun pannello può forzare una larghezza desktop. */
    :is(.chat-page, .chat-thread-page, .chat-thread, .chat-conversation-list,
        .chat-composer, .chat-composer__row, .admin-chat-page, .admin-chat-review-thread) {
        min-width: 0;
        max-width: 100%;
    }

    .chat-composer__row {
        flex-wrap: wrap;
    }

    .chat-composer__row textarea,
    .chat-composer__row input {
        flex: 1 1 100%;
    }

    .chat-message__bubble,
    .chat-message__body {
        max-width: min(88vw, 100%);
        overflow-wrap: anywhere;
    }

    /* Admin: sidebar off-canvas e area contenuti a piena larghezza. */
    .page-admin-shell .admin-shell {
        width: 100%;
        min-width: 0;
    }

    .page-admin-shell .admin-sidebar {
        width: min(320px, 88vw);
        max-width: calc(100vw - 28px);
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    }

    .page-admin-shell .admin-shell__workspace {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin-left: 0 !important;
    }

    .page-admin-shell .admin-topbar {
        width: 100%;
        min-width: 0;
        padding: 9px max(var(--rui-responsive-gutter), env(safe-area-inset-right, 0px)) 9px max(var(--rui-responsive-gutter), env(safe-area-inset-left, 0px));
    }

    .page-admin-shell .admin-topbar__page {
        min-width: 0;
        flex: 1 1 auto;
    }

    .page-admin-shell .admin-topbar__titles {
        min-width: 0;
    }

    .page-admin-shell .admin-topbar__titles h1 {
        font-size: clamp(18px, 5vw, 24px);
        line-height: 1.15;
    }

    .page-admin-shell .admin-topbar__titles p,
    .page-admin-shell .admin-profile-menu__identity,
    .page-admin-shell .admin-profile-menu__chevron {
        display: none;
    }

    .page-admin-shell .admin-topbar__actions {
        flex: 0 0 auto;
        gap: 5px;
    }

    .page-admin-shell .admin-shell__main,
    .page-admin-shell .layout__main.admin-shell__main {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 14px var(--rui-responsive-gutter) 24px;
        overflow-x: clip;
    }

    .page-admin-shell .admin-shell__footer {
        flex-wrap: wrap;
        gap: 8px;
        padding: 14px var(--rui-responsive-gutter) max(14px, env(safe-area-inset-bottom, 0px));
    }

    /* Auth e registrazione. */
    .auth-page {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 18px var(--rui-responsive-gutter) 36px;
    }

    .auth-layout,
    .auth-form-grid,
    .account-type-grid,
    .auth-form-grid--two,
    .auth-form-grid--phone,
    .auth-form-grid--phone-otp {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .auth-card--form,
    .auth-login-card,
    .auth-complete-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .registration-selected-profile {
        min-width: 0;
        max-width: 100%;
    }

    /* Footer e contenuti lunghi. */
    .site-footer {
        width: 100%;
        max-width: 100%;
        padding-right: max(var(--rui-responsive-gutter), env(safe-area-inset-right, 0px));
        padding-left: max(var(--rui-responsive-gutter), env(safe-area-inset-left, 0px));
    }
}

@media (max-width: 640px) {
    :root {
        --rui-responsive-gutter: 14px;
    }

    :is(main, .layout__main, .owner-workspace-shell__main, .admin-shell__main) h1 {
        font-size: clamp(25px, 8vw, 32px);
        line-height: 1.12;
    }

    :is(main, .layout__main, .owner-workspace-shell__main, .admin-shell__main) h2 {
        line-height: 1.18;
    }

    :is(.card, .panel, [class*="__card"], [class*="-card"]) {
        max-width: 100%;
    }

    .rui-builder-private-workspace :is(.card, .panel, [class*="__card"], [class*="-card"]) {
        border-radius: min(var(--rui-builder-card-radius, 10px), 12px);
    }

    .mobile-header-search__form {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .mobile-header-search__submit {
        display: none;
    }

    .owner-workspace-header__contexts > strong {
        display: none;
    }

    .owner-workspace-header__contexts {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-workspace-mobile-menu {
        width: min(220px, calc(100vw - 16px));
    }

    .account-workspace-mobile-menu__panel {
        width: calc(100vw - 16px);
    }

    .page-admin-shell .admin-topbar {
        gap: 8px;
    }

    .page-admin-shell .admin-topbar__menu-toggle,
    .page-admin-shell .admin-topbar__notification,
    .page-admin-shell .admin-profile-menu__toggle {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0;
    }

    .auth-intro h1,
    .auth-login-card h1,
    .auth-complete-card h1 {
        font-size: clamp(28px, 9vw, 38px);
    }
}

@media (max-width: 480px) {
    :root {
        --rui-responsive-gutter: 12px;
    }

    .environment-banner {
        padding: 5px 10px;
        font-size: 10px;
        line-height: 1.25;
    }

    .site-header {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .site-logo img {
        max-width: min(170px, 53vw);
        max-height: 40px;
    }

    .site-nav > a {
        min-height: 38px;
        padding: 6px 8px;
        font-size: 13px;
    }

    .owner-workspace-shell,
    .rui-builder-private-workspace .owner-workspace-shell {
        --ows-mobile-header-height: 92px;
    }

    .owner-workspace-header__brand,
    .owner-workspace-header__actions {
        height: 54px;
    }

    .owner-workspace-header__brand img {
        max-width: min(148px, 45vw) !important;
        max-height: 40px;
    }

    .owner-workspace-header__icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .owner-workspace-header__user {
        width: 38px;
        min-width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .owner-workspace-header__contexts {
        top: 54px;
        height: 38px;
    }

    .owner-workspace-header__context {
        min-height: 28px;
        padding: 4px 8px;
        font-size: 9.5px;
    }

    .owner-workspace-sidebar {
        min-height: 54px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .account-workspace-mobile-menu__toggle {
        min-height: 42px;
        padding: 7px 11px;
        font-size: 14px;
    }

    .account-workspace-mobile-menu__panel {
        max-height: calc(100dvh - var(--roomup-env-height, 0px) - var(--ows-mobile-header-height) - 54px - env(safe-area-inset-bottom, 0px));
        padding: 8px;
    }

    main :is(
        .form-actions,
        .settings-actions,
        .professional-form-actions,
        .professional-row-actions,
        .professional-header-actions,
        .tenant-workspace-page__actions,
        .tenant-workspace-inline-actions,
        .owner-page-header-actions,
        .owner-property-form__actions,
        .owner-launch-cta__actions,
        .visit-form-actions,
        .visit-response-actions,
        .identity-actions,
        .identity-wizard-actions,
        .identity-camera-actions,
        .registration-otp-actions,
        .admin-form-actions,
        .admin-user-actions,
        .admin-users-filter-actions,
        .admin-locations-actions,
        .admin-location-form-actions
    ) > :is(a, button, .btn, .button, input[type="submit"]) {
        width: 100%;
        max-width: 100%;
    }

    .auth-page {
        padding-top: 14px;
    }

    .auth-card--form,
    .auth-login-card,
    .auth-complete-card {
        padding: 16px;
        border-radius: 14px;
    }

    .account-type-option__content {
        padding: 13px;
        border-radius: 12px;
    }

    .registration-selected-profile {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .registration-selected-profile button {
        width: 100%;
    }

    .page-admin-shell .admin-shell__main,
    .page-admin-shell .layout__main.admin-shell__main,
    .rui-builder-private-workspace .owner-workspace-shell__main,
    .owner-workspace-shell__main {
        padding-top: 12px !important;
        padding-right: 12px !important;
        padding-left: 12px !important;
    }
}

@media (max-width: 360px) {
    :root {
        --rui-responsive-gutter: 10px;
    }

    .site-logo img {
        max-width: 145px;
    }

    .mobile-header-search-toggle,
    .header-notification-link,
    .owner-workspace-header__icon,
    .owner-workspace-header__user {
        transform: scale(.94);
        transform-origin: center;
    }

    .owner-workspace-header__brand img {
        max-width: 132px !important;
    }

    .account-workspace-mobile-menu {
        width: min(210px, calc(100vw - 12px));
    }

    .account-workspace-mobile-menu__panel {
        width: calc(100vw - 12px);
        max-width: calc(100vw - 12px);
    }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 980px) {
    .account-workspace-mobile-menu__panel,
    .page-admin-shell .admin-sidebar {
        max-height: calc(100dvh - 8px);
        overflow-y: auto;
    }

    :is(#listingMap, .listing-map, .leaflet-container) {
        min-height: 220px;
        max-height: 72dvh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .owner-workspace-shell,
    .owner-workspace-sidebar,
    .account-workspace-mobile-menu__panel,
    .admin-sidebar {
        scroll-behavior: auto;
    }
}

/* v318 — Menu mobile uniforme per tutti i profili.
 * Le intestazioni di gruppo vengono rimosse dal markup condiviso; il pannello
 * mobile è una lista unica, coerente con l'esperienza Inquilino approvata.
 */
@media (max-width: 820px) {
    .account-workspace-mobile-menu__panel {
        gap: 4px;
    }

    .account-workspace-mobile-menu__item {
        width: 100%;
        min-width: 0;
    }

    /* Compatibilità con eventuali pagine legacy che usano ancora il menu owner precedente. */
    .page-owner-single-menu .account-toolbar__main-menu-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .page-owner-single-menu .account-toolbar__main-menu-title {
        display: none !important;
    }

    .page-owner-single-menu .account-toolbar__main-menu-section {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
}

/* v320 — Profili autorizzati: componente desktop più leggibile e stabile.
 * Mantiene invariato il comportamento mobile introdotto nelle versioni precedenti.
 * I profili eccedenti restano raggiungibili tramite scorrimento orizzontale interno.
 */
@media (min-width: 821px) {
    .owner-workspace-header__actions {
        gap: 12px;
    }

    .owner-workspace-header__contexts {
        width: auto;
        min-width: 0;
        max-width: min(52vw, 520px);
        min-height: 54px;
        flex: 0 1 auto;
        display: inline-grid;
        grid-template-rows: auto minmax(0, 1fr);
        align-content: center;
        justify-items: start;
        padding: 6px 10px 7px;
        border-radius: 12px;
        overflow: hidden;
    }

    .owner-workspace-header__contexts > strong {
        margin: 0 0 5px;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
    }

    .owner-workspace-header__contexts > div {
        min-width: 0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .owner-workspace-header__contexts > div::-webkit-scrollbar {
        display: none;
    }

    .owner-workspace-header__contexts form {
        flex: 0 0 auto;
        margin: 0;
    }

    .owner-workspace-header__context {
        min-height: 28px;
        flex: 0 0 auto;
        padding: 5px 11px;
        border-radius: 7px;
        font-size: 10px;
        line-height: 1;
        white-space: nowrap;
    }
}

@media (min-width: 821px) and (max-width: 1100px) {
    .owner-workspace-header__actions {
        gap: 8px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .owner-workspace-header__contexts {
        width: auto;
        min-width: 0;
        max-width: min(42vw, 360px);
        flex: 0 1 auto;
    }

    .owner-workspace-header__user {
        min-width: 145px;
    }
}

/* v529 — Il selettore profilo mobile vive nell'icona account, non in una seconda riga header. */
@media (max-width: 820px) {
    .rui-builder-private-workspace .owner-workspace-shell,
    .owner-workspace-shell {
        --ows-mobile-header-height: 58px;
    }

    .owner-workspace-header__contexts {
        top: calc(var(--ows-mobile-header-height) - 2px);
        right: max(8px, env(safe-area-inset-right, 0px));
        left: auto;
        width: min(310px, calc(100vw - 16px));
        height: auto;
        max-height: min(420px, calc(100dvh - var(--roomup-env-height, 0px) - var(--ows-mobile-header-height) - 12px));
        display: none;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 12px;
        overflow-y: auto;
        border: 1px solid var(--rui-builder-border, #dce2ea);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 16px 38px rgba(15, 35, 70, .16);
    }

    .owner-workspace-header__contexts.is-mobile-open {
        display: grid;
    }

    .owner-workspace-header__contexts > strong {
        display: block;
        margin: 0;
        font-size: 11px;
    }

    .owner-workspace-header__contexts > div {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        width: 100%;
        overflow: visible;
    }

    .owner-workspace-header__contexts form,
    .owner-workspace-header__context {
        width: 100%;
    }

    .owner-workspace-header__context {
        min-height: 40px;
        justify-content: flex-start;
        padding: 9px 12px;
        font-size: 12px;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .rui-builder-private-workspace .owner-workspace-shell,
    .owner-workspace-shell {
        --ows-mobile-header-height: 54px;
    }

    .owner-workspace-header__contexts {
        top: calc(var(--ows-mobile-header-height) - 1px);
    }
}

/* v600 — Header mobile e selettore profilo sempre in primo piano. */
@media (max-width: 820px) {
    .rui-builder-private-workspace .owner-workspace-header,
    .owner-workspace-header {
        z-index: 2200 !important;
        background: #fff;
        box-shadow: 0 4px 14px rgba(15, 35, 70, .08);
    }

    .rui-builder-private-workspace .owner-workspace-sidebar,
    .owner-workspace-sidebar {
        z-index: 2100 !important;
        background: #fff;
    }

    .owner-workspace-header__contexts {
        z-index: 2300 !important;
    }

    .owner-workspace-shell.is-context-menu-open .owner-workspace-header__contexts {
        width: min(310px, calc(100vw - 128px));
        max-width: calc(100vw - 128px);
    }

    .owner-workspace-shell.is-context-menu-open .account-workspace-mobile-menu {
        width: 108px;
        max-width: 108px;
    }

    .owner-workspace-shell.is-context-menu-open .account-workspace-mobile-menu__toggle {
        width: 108px;
        max-width: 108px;
        justify-content: flex-start;
        gap: 8px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .owner-workspace-shell.is-context-menu-open .account-workspace-mobile-menu__badge,
    .owner-workspace-shell.is-context-menu-open .account-workspace-mobile-menu__chevron {
        display: none;
    }
}

@media (max-width: 360px) {
    .owner-workspace-shell.is-context-menu-open .owner-workspace-header__contexts {
        width: calc(100vw - 122px);
        max-width: calc(100vw - 122px);
    }

    .owner-workspace-shell.is-context-menu-open .account-workspace-mobile-menu,
    .owner-workspace-shell.is-context-menu-open .account-workspace-mobile-menu__toggle {
        width: 102px;
        max-width: 102px;
    }
}


/* v601 — Gutter mobile globale: contenuto leggibile senza effetto "zoom" ai bordi.
 * Solo viewport <= 820px. Header, menu, overlay e componenti fullscreen restano invariati.
 */
@media (max-width: 820px) {
    :root {
        --rui-mobile-page-gutter: clamp(12px, 3.6vw, 16px);
    }

    .layout.layout--full > .layout__main,
    .page-admin-shell .admin-shell__main,
    .page-admin-shell .layout__main.admin-shell__main {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        padding-right: max(var(--rui-mobile-page-gutter), env(safe-area-inset-right, 0px)) !important;
        padding-left: max(var(--rui-mobile-page-gutter), env(safe-area-inset-left, 0px)) !important;
    }

    .layout__main > .listing-search-page,
    .layout__main > .listing-detail-page,
    .layout__main > .rui-builder-page-runtime,
    .layout__main > [data-rui-layout-block="content"] {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* v606 - I wrapper principali devono includere il proprio padding nella larghezza disponibile. */
    :is(
        .listing-search-page,
        .listing-detail-page,
        .tenant-workspace-page,
        .chat-workspace-page,
        .notification-page,
        .owner-plan-v2,
        .owner-support-v2,
        .owner-properties-page,
        .owner-property-form,
        .rui-builder-page-runtime
    ) {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    :root {
        --rui-mobile-page-gutter: 10px;
    }
}

/* ========================================================================== 
   v620 - Menu mobile uniforme tra Owner, Tenant, Delegate, PM e Agency.
   Override finale del responsive condiviso; desktop invariato.
   ========================================================================== */
@media (max-width: 820px) {
    .owner-workspace-shell:not(.is-context-menu-open) .account-workspace-mobile-menu,
    .rui-builder-private-workspace .owner-workspace-shell:not(.is-context-menu-open) .account-workspace-mobile-menu {
        width: min(244px, calc(100vw - 20px)) !important;
        max-width: min(244px, calc(100vw - 20px)) !important;
    }

    .owner-workspace-shell:not(.is-context-menu-open) .account-workspace-mobile-menu__toggle,
    .rui-builder-private-workspace .owner-workspace-shell:not(.is-context-menu-open) .account-workspace-mobile-menu__toggle {
        width: 100% !important;
        min-height: 50px !important;
        padding: 8px 14px !important;
        font-size: 15px !important;
    }
}

/* ========================================================================== 
   v629 - Global private-workspace mobile KPI card layout.
   Applies the same hierarchy to metric cards with icon/title/value/description:
   icon left, title bold at right, centered value below, compact description last.
   Admin remains governed by the separate Admin Template Builder.
   ========================================================================== */
@media (max-width: 720px) {
    .rui-builder-private-workspace :is(
        .ruod-status-card,
        .owner-support-v2__summary article,
        .opv2-summary-card,
        .owner-visits-summary article
    ) {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-rows: auto;
        gap: 0 8px;
        align-items: center;
        min-width: 0;
    }

    .rui-builder-private-workspace :is(
        .ruod-status-icon,
        .owner-support-v2__summary-icon,
        .owner-visits-summary__icon
    ),
    .rui-builder-private-workspace .opv2-summary-card > img {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        justify-self: center;
        width: 34px;
        min-width: 34px;
        height: 34px;
        margin: 0;
    }

    .rui-builder-private-workspace :is(
        .ruod-status-copy,
        .owner-support-v2__summary article > div,
        .opv2-summary-card > div,
        .owner-visits-summary article > div
    ) {
        grid-column: 2;
        grid-row: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        gap: 2px;
        align-items: center;
        min-width: 0;
        width: 100%;
    }

    .rui-builder-private-workspace .ruod-status-copy > small,
    .rui-builder-private-workspace .owner-support-v2__summary article > div > small,
    .rui-builder-private-workspace .opv2-summary-card > div > span,
    .rui-builder-private-workspace .owner-visits-summary article > div > span {
        grid-row: 1;
        display: block;
        width: 100%;
        margin: 0;
        overflow: visible;
        color: var(--rui-text, #0f2d6b);
        font-size: clamp(0.68rem, 2.65vw, 0.79rem);
        font-weight: 800;
        line-height: 1.08;
        text-align: left;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .rui-builder-private-workspace .ruod-status-copy > strong,
    .rui-builder-private-workspace .owner-support-v2__summary article > div > strong,
    .rui-builder-private-workspace .opv2-summary-card > div > strong,
    .rui-builder-private-workspace .owner-visits-summary article > div > strong {
        grid-row: 2;
        display: block;
        width: 100%;
        margin: 1px 0 0;
        color: var(--rui-text, #0f2d6b);
        font-size: clamp(1.16rem, 5.1vw, 1.42rem);
        font-weight: 900;
        line-height: 1;
        text-align: center;
    }

    .rui-builder-private-workspace .ruod-status-copy > span,
    .rui-builder-private-workspace .owner-support-v2__summary article > div > span,
    .rui-builder-private-workspace .opv2-summary-card > div > small,
    .rui-builder-private-workspace .owner-visits-summary article > div > small {
        grid-row: 3;
        display: -webkit-box;
        width: 100%;
        margin: 1px 0 0;
        overflow: hidden;
        color: var(--rui-muted, #667895);
        font-size: clamp(0.54rem, 2.1vw, 0.64rem);
        font-weight: 500;
        line-height: 1.12;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}

@media (max-width: 360px) {
    .rui-builder-private-workspace :is(
        .ruod-status-card,
        .owner-support-v2__summary article,
        .opv2-summary-card,
        .owner-visits-summary article
    ) {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 0 6px;
    }

    .rui-builder-private-workspace :is(
        .ruod-status-icon,
        .owner-support-v2__summary-icon,
        .owner-visits-summary__icon
    ),
    .rui-builder-private-workspace .opv2-summary-card > img {
        width: 30px;
        min-width: 30px;
        height: 30px;
    }

    .rui-builder-private-workspace .ruod-status-copy > small,
    .rui-builder-private-workspace .owner-support-v2__summary article > div > small,
    .rui-builder-private-workspace .opv2-summary-card > div > span,
    .rui-builder-private-workspace .owner-visits-summary article > div > span {
        font-size: 0.63rem;
    }

    .rui-builder-private-workspace .ruod-status-copy > strong,
    .rui-builder-private-workspace .owner-support-v2__summary article > div > strong,
    .rui-builder-private-workspace .opv2-summary-card > div > strong,
    .rui-builder-private-workspace .owner-visits-summary article > div > strong {
        font-size: 1.1rem;
    }

    .rui-builder-private-workspace .ruod-status-copy > span,
    .rui-builder-private-workspace .owner-support-v2__summary article > div > span,
    .rui-builder-private-workspace .opv2-summary-card > div > small,
    .rui-builder-private-workspace .owner-visits-summary article > div > small {
        font-size: 0.5rem;
    }
}

/* ========================================================================== 
   v632 - Dashboard Proprietario mobile: KPI 3-righe leggibili.
   Solo i cinque KPI .ruod-status-card; nessun effetto sugli altri componenti.
   Riga 1: titolo intero. Riga 2: icona + numero. Riga 3: descrizione intera.
   ========================================================================== */
@media (max-width: 720px) {
    .rui-builder-private-workspace .ruod-status-card {
        display: grid;
        grid-template-columns: 30px auto minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: 7px;
        row-gap: 5px;
        align-items: center;
        align-content: center;
        min-width: 0;
        padding: 10px 9px;
    }

    .rui-builder-private-workspace .ruod-status-card > .ruod-status-icon {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        align-self: center;
        width: 30px;
        min-width: 30px;
        height: 30px;
        margin: 0;
    }

    .rui-builder-private-workspace .ruod-status-card > .ruod-status-copy {
        display: contents;
    }

    .rui-builder-private-workspace .ruod-status-card .ruod-status-copy > small {
        grid-column: 1 / -1;
        grid-row: 1;
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0;
        overflow: visible;
        color: var(--rui-text, #0f2d6b);
        font-size: clamp(0.58rem, 2.55vw, 0.72rem);
        font-weight: 800;
        line-height: 1.05;
        text-align: center;
        text-overflow: clip;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
    }

    .rui-builder-private-workspace .ruod-status-card .ruod-status-copy > strong {
        grid-column: 2;
        grid-row: 2;
        display: block;
        width: auto;
        min-width: 0;
        margin: 0;
        justify-self: start;
        align-self: center;
        color: var(--ruod-blue, #0f45a6);
        font-size: clamp(1.24rem, 5.25vw, 1.52rem);
        font-weight: 900;
        line-height: 1;
        text-align: left;
    }

    .rui-builder-private-workspace .ruod-status-card .ruod-status-copy > span {
        grid-column: 1 / -1;
        grid-row: 3;
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0;
        overflow: visible;
        color: var(--rui-muted, #667895);
        font-size: clamp(0.52rem, 2.2vw, 0.64rem);
        font-weight: 500;
        line-height: 1.05;
        text-align: center;
        text-overflow: clip;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
        -webkit-box-orient: initial;
        -webkit-line-clamp: initial;
    }
}

@media (max-width: 360px) {
    .rui-builder-private-workspace .ruod-status-card {
        grid-template-columns: 27px auto minmax(0, 1fr);
        column-gap: 5px;
        row-gap: 4px;
        padding: 9px 7px;
    }

    .rui-builder-private-workspace .ruod-status-card > .ruod-status-icon {
        width: 27px;
        min-width: 27px;
        height: 27px;
    }

    .rui-builder-private-workspace .ruod-status-card .ruod-status-copy > small {
        font-size: 0.52rem;
    }

    .rui-builder-private-workspace .ruod-status-card .ruod-status-copy > span {
        font-size: 0.47rem;
    }
}

/* ========================================================================== 
   v633 - Template Builder privato: metrica mobile standard riutilizzabile.
   Regola condivisa per KPI presenti e futuri: titolo; icona + valore; descrizione.
   Le classi .rui-mobile-metric-card* sono il contratto canonico per nuovi componenti.
   Admin escluso: usa il proprio Template Builder.
   ========================================================================== */
@media (max-width: 720px) {
    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card,
        .ruod-status-card,
        .opv2-summary-card,
        .owner-visits-summary article,
        .owner-support-v2__summary article,
        .owner-plan-v2__metric
    ) {
        display: grid;
        grid-template-columns: 32px auto minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: 7px;
        row-gap: 5px;
        align-items: center;
        align-content: center;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    /* I wrapper testuali esistenti diventano trasparenti alla griglia comune. */
    .rui-builder-private-workspace :is(
        .ruod-status-card > .ruod-status-copy,
        .opv2-summary-card > div,
        .owner-visits-summary article > div,
        .owner-support-v2__summary article > div
    ) {
        display: contents;
    }

    /* Riga 1: titolo completo, mai spezzato lettera per lettera. */
    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card__title,
        .ruod-status-card .ruod-status-copy > small,
        .opv2-summary-card > div > span,
        .owner-visits-summary article > div > span,
        .owner-support-v2__summary article > div > small,
        .owner-plan-v2__metric-label
    ) {
        grid-column: 1 / -1;
        grid-row: 1;
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        overflow: visible;
        color: var(--rui-text, #0f2d6b);
        font-size: clamp(0.58rem, 2.4vw, 0.72rem);
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -0.01em;
        text-align: center;
        text-overflow: clip;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
    }

    /* Riga 2: icona a sinistra e valore subito alla sua destra. */
    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card__icon,
        .ruod-status-icon,
        .owner-visits-summary__icon,
        .owner-support-v2__summary-icon,
        .owner-plan-v2__metric-icon
    ),
    .rui-builder-private-workspace .opv2-summary-card > img {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        align-self: center;
        width: 32px;
        min-width: 32px;
        height: 32px;
        min-height: 32px;
        margin: 0;
    }

    .rui-builder-private-workspace .owner-plan-v2__metric-icon img {
        width: 18px;
        height: 18px;
    }

    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card__value,
        .ruod-status-card .ruod-status-copy > strong,
        .opv2-summary-card > div > strong,
        .owner-visits-summary article > div > strong,
        .owner-support-v2__summary article > div > strong,
        .owner-plan-v2__metric > strong
    ) {
        grid-column: 2;
        grid-row: 2;
        display: block;
        width: auto;
        min-width: 0;
        margin: 0;
        justify-self: start;
        align-self: center;
        color: var(--rui-text, #0f2d6b);
        font-size: clamp(1.18rem, 5vw, 1.48rem);
        font-weight: 900;
        line-height: 1;
        text-align: left;
        white-space: nowrap;
    }

    .rui-builder-private-workspace .owner-plan-v2__metric > strong.owner-plan-v2__metric-word {
        font-size: clamp(0.95rem, 4vw, 1.2rem);
    }

    /* Riga 3: descrizione. Una riga; font ridotto prima di troncare. */
    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card__description,
        .ruod-status-card .ruod-status-copy > span,
        .opv2-summary-card > div > small,
        .owner-visits-summary article > div > small,
        .owner-support-v2__summary article > div > span,
        .owner-plan-v2__metric > small
    ) {
        grid-column: 1 / -1;
        grid-row: 3;
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        overflow: visible;
        color: var(--rui-muted, #667895);
        font-size: clamp(0.50rem, 2.05vw, 0.63rem);
        font-weight: 500;
        line-height: 1.08;
        text-align: center;
        text-overflow: clip;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
        -webkit-box-orient: initial;
        -webkit-line-clamp: initial;
    }

    /* Eventuale CTA delle metriche del Piano resta sotto la descrizione. */
    .rui-builder-private-workspace .owner-plan-v2__metric > a,
    .rui-builder-private-workspace .rui-mobile-metric-card__action {
        grid-column: 1 / -1;
        grid-row: 4;
        width: 100%;
        margin: 1px 0 0;
        text-align: center;
        white-space: nowrap;
    }
}

@media (max-width: 360px) {
    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card,
        .ruod-status-card,
        .opv2-summary-card,
        .owner-visits-summary article,
        .owner-support-v2__summary article,
        .owner-plan-v2__metric
    ) {
        grid-template-columns: 28px auto minmax(0, 1fr);
        column-gap: 5px;
        row-gap: 4px;
    }

    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card__title,
        .ruod-status-card .ruod-status-copy > small,
        .opv2-summary-card > div > span,
        .owner-visits-summary article > div > span,
        .owner-support-v2__summary article > div > small,
        .owner-plan-v2__metric-label
    ) {
        font-size: 0.52rem;
        text-align: left;
    }

    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card__icon,
        .ruod-status-icon,
        .owner-visits-summary__icon,
        .owner-support-v2__summary-icon,
        .owner-plan-v2__metric-icon
    ),
    .rui-builder-private-workspace .opv2-summary-card > img {
        width: 28px;
        min-width: 28px;
        height: 28px;
        min-height: 28px;
    }

    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card__value,
        .ruod-status-card .ruod-status-copy > strong,
        .opv2-summary-card > div > strong,
        .owner-visits-summary article > div > strong,
        .owner-support-v2__summary article > div > strong,
        .owner-plan-v2__metric > strong
    ) {
        font-size: 1.08rem;
    }

    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card__description,
        .ruod-status-card .ruod-status-copy > span,
        .opv2-summary-card > div > small,
        .owner-visits-summary article > div > small,
        .owner-support-v2__summary article > div > span,
        .owner-plan-v2__metric > small
    ) {
        font-size: 0.46rem;
        text-align: left;
    }
}

/* ========================================================================== 
   v634 - Mobile Owner: griglia Immobili 2x2 stabile.
   Mantiene lo standard metrico v633, ma evita il primo KPI a tutta larghezza.
   ========================================================================== */
@media (max-width: 720px) {
    .rui-builder-private-workspace .opv2-summary {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch;
    }

    .rui-builder-private-workspace .opv2-summary > .opv2-summary-card,
    .rui-builder-private-workspace .opv2-summary > .opv2-summary-card:first-child {
        grid-column: auto !important;
        width: auto;
        min-width: 0;
        max-width: 100%;
        height: 100%;
    }

    .rui-builder-private-workspace .opv2-summary-card > div > small {
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        text-align: center;
        line-height: 1.12;
    }
}

@media (max-width: 360px) {
    .rui-builder-private-workspace .opv2-summary {
        gap: 8px !important;
    }

    .rui-builder-private-workspace .opv2-summary-card > div > small {
        font-size: 0.44rem;
    }
}

/* ========================================================================== 
   v635 - Template Builder privato: gruppo icona + valore centrato su mobile.
   Mantiene il contratto metrico v633 per Dashboard, Immobili, Visite, Piano,
   Supporto e per le future .rui-mobile-metric-card.
   ========================================================================== */
@media (max-width: 720px) {
    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card,
        .ruod-status-card,
        .opv2-summary-card,
        .owner-visits-summary article,
        .owner-support-v2__summary article,
        .owner-plan-v2__metric
    ) {
        grid-template-columns: minmax(0, 1fr) 32px auto minmax(0, 1fr);
    }

    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card__icon,
        .ruod-status-icon,
        .owner-visits-summary__icon,
        .owner-support-v2__summary-icon,
        .owner-plan-v2__metric-icon
    ),
    .rui-builder-private-workspace .opv2-summary-card > img {
        grid-column: 2;
        justify-self: start;
    }

    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card__value,
        .ruod-status-card .ruod-status-copy > strong,
        .opv2-summary-card > div > strong,
        .owner-visits-summary article > div > strong,
        .owner-support-v2__summary article > div > strong,
        .owner-plan-v2__metric > strong
    ) {
        grid-column: 3;
        justify-self: start;
    }
}

@media (max-width: 360px) {
    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card,
        .ruod-status-card,
        .opv2-summary-card,
        .owner-visits-summary article,
        .owner-support-v2__summary article,
        .owner-plan-v2__metric
    ) {
        grid-template-columns: minmax(0, 1fr) 28px auto minmax(0, 1fr);
    }
}

/* ========================================================================== 
   v647 - KPI mobile grandi: riferimento canonico Immobili.
   Fonte grafica: Proprietario > Immobili, box Totale immobili / Pubblicati /
   Bozze / Sospesi. Questo e' il contratto mobile riutilizzabile per i KPI
   grandi del Template Builder privato: 2 colonne, titolo sopra, gruppo
   icona + valore centrato, descrizione sotto. Dashboard e Visite usano lo
   stesso componente visivo. Desktop invariato.
   ========================================================================== */
@media (max-width: 720px) {
    .rui-builder-private-workspace :is(
        .opv2-summary,
        .owner-visits-summary--three,
        .ruod-status-grid
    ) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card,
        .opv2-summary-card,
        .owner-visits-summary--three > article,
        .ruod-status-card
    ) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 34px max-content minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        column-gap: 8px !important;
        row-gap: 7px !important;
        align-items: center !important;
        align-content: center !important;
        min-width: 0 !important;
        min-height: 104px !important;
        max-width: 100% !important;
        padding: 12px 10px !important;
        overflow: hidden !important;
    }

    .rui-builder-private-workspace :is(
        .opv2-summary-card > div,
        .owner-visits-summary--three > article > div,
        .ruod-status-card > .ruod-status-copy
    ) {
        display: contents !important;
    }

    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card__title,
        .opv2-summary-card > div > span,
        .owner-visits-summary--three > article > div > span,
        .ruod-status-card .ruod-status-copy > small
    ) {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        color: var(--rui-text, #0f2d6b) !important;
        font-size: clamp(0.78rem, 3.35vw, 0.92rem) !important;
        font-weight: 900 !important;
        line-height: 1.08 !important;
        letter-spacing: -0.01em !important;
        text-align: center !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card__icon,
        .owner-visits-summary--three .owner-visits-summary__icon,
        .ruod-status-card > .ruod-status-icon
    ),
    .rui-builder-private-workspace .opv2-summary-card > img {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        align-self: center !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        flex: 0 0 34px !important;
        margin: 0 !important;
    }

    .rui-builder-private-workspace :is(
        .owner-visits-summary--three .owner-visits-summary__icon img,
        .ruod-status-card > .ruod-status-icon img
    ) {
        width: 18px !important;
        height: 18px !important;
    }

    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card__value,
        .opv2-summary-card > div > strong,
        .owner-visits-summary--three > article > div > strong,
        .ruod-status-card .ruod-status-copy > strong
    ) {
        grid-column: 3 !important;
        grid-row: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        justify-self: start !important;
        align-self: center !important;
        width: auto !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        color: var(--rui-text, #0f2d6b) !important;
        font-size: clamp(1.28rem, 5.5vw, 1.6rem) !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-align: left !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }

    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card__description,
        .opv2-summary-card > div > small,
        .owner-visits-summary--three > article > div > small,
        .ruod-status-card .ruod-status-copy > span
    ) {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        position: static !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        color: var(--rui-muted, #667895) !important;
        font-size: clamp(0.64rem, 2.7vw, 0.78rem) !important;
        font-weight: 500 !important;
        line-height: 1.15 !important;
        letter-spacing: normal !important;
        text-align: center !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        -webkit-box-orient: initial !important;
        -webkit-line-clamp: initial !important;
    }

    /* Con un numero dispari di KPI, l'ultimo conserva la stessa larghezza
       degli altri ma viene centrato nella seconda colonna virtuale. */
    .rui-builder-private-workspace .owner-visits-summary--three > article:last-child:nth-child(odd),
    .rui-builder-private-workspace .ruod-status-grid > .ruod-status-card:last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
        width: calc(50% - 5px) !important;
        justify-self: center !important;
    }
}

@media (max-width: 360px) {
    .rui-builder-private-workspace :is(
        .opv2-summary,
        .owner-visits-summary--three,
        .ruod-status-grid
    ) {
        gap: 8px !important;
    }

    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card,
        .opv2-summary-card,
        .owner-visits-summary--three > article,
        .ruod-status-card
    ) {
        grid-template-columns: minmax(0, 1fr) 30px max-content minmax(0, 1fr) !important;
        column-gap: 6px !important;
        row-gap: 6px !important;
        min-height: 96px !important;
        padding: 10px 8px !important;
    }

    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card__title,
        .opv2-summary-card > div > span,
        .owner-visits-summary--three > article > div > span,
        .ruod-status-card .ruod-status-copy > small
    ) {
        font-size: 0.69rem !important;
        text-align: center !important;
    }

    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card__icon,
        .owner-visits-summary--three .owner-visits-summary__icon,
        .ruod-status-card > .ruod-status-icon
    ),
    .rui-builder-private-workspace .opv2-summary-card > img {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        flex-basis: 30px !important;
    }

    .rui-builder-private-workspace :is(
        .owner-visits-summary--three .owner-visits-summary__icon img,
        .ruod-status-card > .ruod-status-icon img
    ) {
        width: 16px !important;
        height: 16px !important;
    }

    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card__value,
        .opv2-summary-card > div > strong,
        .owner-visits-summary--three > article > div > strong,
        .ruod-status-card .ruod-status-copy > strong
    ) {
        height: 30px !important;
        min-height: 30px !important;
        font-size: 1.22rem !important;
    }

    .rui-builder-private-workspace :is(
        .rui-mobile-metric-card__description,
        .opv2-summary-card > div > small,
        .owner-visits-summary--three > article > div > small,
        .ruod-status-card .ruod-status-copy > span
    ) {
        font-size: 0.56rem !important;
        text-align: center !important;
    }

    .rui-builder-private-workspace .owner-visits-summary--three > article:last-child:nth-child(odd),
    .rui-builder-private-workspace .ruod-status-grid > .ruod-status-card:last-child:nth-child(odd) {
        width: calc(50% - 4px) !important;
    }
}



/* ========================================================================== 
   v649 - Regola globale: mai testo UI spezzato lettera per lettera su mobile.
   Le frasi restano orizzontali, dentro il proprio contenitore e sopra gli
   elementi decorativi. Token tecnici/chat possono spezzarsi solo se privi di
   punti naturali di interruzione, senza usare word-break: break-all.
   ========================================================================== */
@media (max-width: 820px) {
    :is(
        h1, h2, h3, h4, h5, h6,
        p, li, dt, dd, legend, label,
        td, th, a, button, [role="button"],
        strong, em, small, span
    ) {
        min-width: 0;
        max-width: 100%;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    :is(button, .button, .btn, [role="button"], a[class*="button"], a[class*="btn"]) {
        box-sizing: border-box;
        max-width: 100%;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    /* Contenuti tecnici o generati dall'utente: restano nel box senza
       trasformare le normali frasi dell'interfaccia in colonne di lettere. */
    :is(pre, code, kbd, samp, .chat-message__bubble, .chat-message__body, .cadastral-summary-list dd) {
        max-width: 100%;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
    }
}

/* ========================================================================== 
   v651 - Contratto mobile anti-overflow del Template Builder privato.
   Le pagine non devono creare scroll orizzontale: contenitori, card e form
   devono restringersi entro il viewport; quando serve gli elementi vanno a capo.
   Componenti che richiedono un layout specifico definiscono il proprio wrapping.
   ========================================================================== */
@media (max-width: 820px) {
    html,
    body,
    .layout,
    .layout--full,
    .layout__main,
    .owner-workspace-shell__workspace,
    .owner-workspace-shell__layout,
    .owner-workspace-shell__main,
    .rui-builder-private-workspace {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    @supports not (overflow: clip) {
        html,
        body,
        .layout,
        .layout--full,
        .layout__main,
        .owner-workspace-shell__workspace,
        .owner-workspace-shell__layout,
        .owner-workspace-shell__main,
        .rui-builder-private-workspace {
            overflow-x: hidden !important;
        }
    }

    .rui-builder-private-workspace :is(
        main,
        section,
        article,
        form,
        fieldset,
        header,
        footer,
        aside,
        nav
    ) {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }

    .rui-builder-private-workspace main :is(
        div,
        dl,
        ul,
        ol
    ) {
        min-width: 0;
        max-width: 100%;
    }

    .rui-builder-private-workspace main :is(
        [class*="__actions"],
        [class$="-actions"],
        [class*="__controls"],
        [class$="-controls"],
        [class*="__toolbar"],
        [class$="-toolbar"],
        [class*="__filters"],
        [class$="-filters"]
    ) {
        min-width: 0;
        max-width: 100%;
    }

    .rui-builder-private-workspace main :is(
        [class*="__actions"],
        [class$="-actions"],
        [class*="__controls"],
        [class$="-controls"],
        [class*="__toolbar"],
        [class$="-toolbar"],
        [class*="__filters"],
        [class$="-filters"]
    ) > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Utility canonica per componenti nuovi o esistenti che devono sostituire
       uno strip orizzontale con elementi adattivi e a capo. */
    .rui-mobile-wrap-no-scroll {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: visible !important;
    }

    .rui-mobile-wrap-no-scroll > * {
        min-width: 0 !important;
        max-width: 100% !important;
        flex-shrink: 1 !important;
    }
}


/* ========================================================================== 
   v652 - Contratto globale mobile: i controlli dei form non possono superare
   la larghezza del box che li contiene, inclusi date/select con larghezze
   intrinseche imposte dal browser mobile.
   ========================================================================== */
@media (max-width: 820px) {
    .rui-builder-private-workspace :is(
        form,
        fieldset,
        label,
        [class*="__field"],
        [class$="-field"],
        [class*="__fields"],
        [class$="-fields"],
        [class*="__form"],
        [class$="-form"]
    ) {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }

    .rui-builder-private-workspace :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
        select,
        textarea
    ) {
        box-sizing: border-box !important;
        width: 100%;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .rui-builder-private-workspace input[type="date"],
    .rui-builder-private-workspace input[type="datetime-local"],
    .rui-builder-private-workspace input[type="time"] {
        inline-size: 100%;
        min-inline-size: 0 !important;
        max-inline-size: 100% !important;
    }
}