/* =========================================================
   ALEA Mobile V1
   Global responsive hardening for phone / small tablet UI.
   Loaded last so it can safely correct legacy page CSS.
   ========================================================= */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

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

body {
    overflow-wrap: break-word;
}

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

input,
select,
textarea,
button {
    max-width: 100%;
}

a,
button,
input,
select,
textarea,
summary {
    touch-action: manipulation;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    -webkit-appearance: none;
}

:focus-visible {
    outline: 2px solid var(--accent, #9A8979);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ---------------------------------------------------------
   App shell / backoffice
   --------------------------------------------------------- */
@media (max-width: 820px) {
    html,
    body {
        overflow-x: hidden;
    }

    body.app-body {
        padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .app-header {
        min-width: 0;
        padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
    }

    .app-header > * {
        min-width: 0;
    }

    .brand {
        flex: 0 0 auto;
    }

    .account-menu-wrap {
        min-width: 0;
    }

    .account-menu-trigger,
    .account-menu > summary {
        min-width: 44px !important;
        min-height: 44px !important;
        justify-content: flex-end;
    }

    .account-menu-avatar {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
    }

    .account-menu-popover {
        position: fixed !important;
        top: 76px !important;
        right: max(12px, env(safe-area-inset-right, 0px)) !important;
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        width: auto !important;
        max-height: calc(100dvh - 96px - env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .mobile-nav {
        height: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        padding-left: env(safe-area-inset-left, 0px) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
    }

    .mobile-nav a {
        min-width: 0;
        min-height: 52px;
        padding: 4px 2px 8px;
        line-height: 1.15;
    }

    .page,
    .client-activity-page,
    .upgrade-page,
    .availability-page,
    .agenda-page {
        max-width: 100%;
    }

    /* 16px prevents Safari from auto-zooming form fields. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    input[type="checkbox"],
    input[type="radio"] {
        min-width: 18px;
        min-height: 18px;
    }

    .primary-action,
    .settings-primary-action,
    .settings-drawer-cancel,
    .settings-inline-action,
    .client-history-filter-button,
    .client-history-filter-clear,
    .upgrade-request-button,
    .availability-back,
    .agenda-availability-button,
    .agenda-share-button,
    .agenda-print-button,
    .agenda-week-notify-button,
    .agenda-duplicate-button {
        min-height: 44px;
    }

    .field,
    .client-field,
    .settings-field,
    .availability-field,
    .location-form-grid > *,
    .form-grid > *,
    .form-grid-main > *,
    .form-grid-payment > * {
        min-width: 0;
    }

    .field input,
    .field select,
    .field textarea,
    .client-field input,
    .client-field select,
    .client-field textarea,
    .settings-field input,
    .settings-field select,
    .settings-field textarea,
    .availability-field input,
    .availability-field select,
    .availability-field textarea {
        width: 100%;
        min-width: 0;
    }

    .settings-drawer-panel,
    .client-drawer,
    .agenda-drawer {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .settings-drawer-body,
    .client-drawer-scroll,
    .agenda-drawer-body {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .settings-drawer-footer,
    .client-drawer-footer,
    .agenda-drawer-footer {
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    }

    .client-history-filters {
        align-items: stretch !important;
    }

    .client-history-filter-field {
        flex: 1 1 150px;
        min-width: 0;
    }

    .client-history-filter-field select {
        width: 100%;
        min-width: 0 !important;
        min-height: 44px;
    }

    .client-activity-actions a {
        min-height: 44px;
        padding: 0 14px;
    }

    .client-activity-row,
    .client-row,
    .settings-list-item,
    .location-row-v22 {
        min-width: 0;
    }

    .settings-page-head,
    .clients-heading,
    .client-activity-head,
    .availability-head,
    .upgrade-head {
        min-width: 0;
    }
}

@media (max-width: 600px) {
    .page {
        width: calc(100% - 24px) !important;
        padding-top: 28px !important;
    }

    .page-heading,
    .settings-page-head,
    .clients-heading,
    .availability-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }

    .page-heading > *,
    .settings-page-head > *,
    .clients-heading > *,
    .availability-head > * {
        min-width: 0;
    }

    .page-heading h1,
    .settings-page-head h1,
    .clients-heading h1,
    .availability-head h1,
    .client-activity-head h1,
    .upgrade-head h1 {
        font-size: clamp(36px, 11vw, 48px) !important;
        line-height: 1 !important;
    }

    .page-heading .primary-action,
    .settings-page-head .settings-primary-action,
    .professionals-page-actions,
    .clients-heading .primary-action {
        width: 100%;
    }

    .page-heading .primary-action,
    .settings-primary-action,
    .clients-heading .primary-action {
        justify-content: center;
    }

    .service-row,
    .service-row-refined {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    .service-row .row-actions,
    .service-row-refined .row-actions,
    .service-row-actions-refined {
        grid-column: 1 !important;
        grid-row: auto !important;
        width: 100%;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        flex-wrap: wrap;
    }

    .service-price,
    .service-status-refined {
        grid-column: 1 !important;
    }

    .settings-list-row,
    .settings-list-item,
    .location-row-v22 {
        align-items: flex-start !important;
    }

    .settings-list-row {
        flex-direction: column;
        gap: 10px;
        padding: 18px 0;
    }

    .settings-list-side,
    .location-row-side-v23 {
        max-width: 100%;
    }

    .client-kpis {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .client-kpi {
        min-width: 0;
        padding: 14px !important;
    }

    .client-activity-page,
    .upgrade-page {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .client-activity-actions {
        width: 100%;
    }

    .client-activity-actions a {
        flex: 1 1 auto;
        justify-content: center;
    }

    .client-activity-row {
        grid-template-columns: 76px minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 16px 0 !important;
    }

    .client-activity-main,
    .client-activity-value,
    .activity-status {
        min-width: 0;
    }

    .client-history-filter-button,
    .client-history-filter-clear {
        flex: 1 1 calc(50% - 6px);
    }

    .upgrade-current-meta,
    .upgrade-term-prices {
        grid-template-columns: 1fr !important;
    }

    .upgrade-addon > strong {
        white-space: normal !important;
    }
}

/* ---------------------------------------------------------
   Agenda — phone operation is touch-first.
   --------------------------------------------------------- */
@media (max-width: 820px) {
    .agenda-page {
        width: calc(100% - 20px) !important;
        padding-top: 22px !important;
    }

    .agenda-toolbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .agenda-title-block,
    .agenda-week-nav,
    .agenda-view-controls,
    .agenda-toolbar-actions,
    .agenda-share-actions,
    .agenda-print-actions {
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-self: stretch !important;
        min-width: 0;
    }

    .agenda-title-block h1 {
        font-size: clamp(36px, 11vw, 45px) !important;
    }

    .agenda-week-nav {
        display: grid !important;
        grid-template-columns: 44px auto minmax(0, 1fr) 44px;
        align-items: center;
        gap: 6px !important;
    }

    .agenda-week-nav strong {
        min-width: 0 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px !important;
    }

    .agenda-nav-button,
    .agenda-today-button {
        min-width: 44px !important;
        height: 44px !important;
    }

    .agenda-today-button {
        padding: 0 10px !important;
    }

    .agenda-view-controls {
        justify-content: flex-start !important;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .agenda-view-controls::-webkit-scrollbar,
    .agenda-segmented::-webkit-scrollbar {
        display: none;
    }

    .agenda-segmented {
        flex: 0 0 auto;
    }

    .agenda-segmented a {
        min-height: 42px !important;
        padding: 0 13px !important;
        font-size: 12px !important;
    }

    .agenda-interval-control {
        flex: 0 0 auto;
    }

    .agenda-toolbar-actions,
    .agenda-print-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .agenda-share-actions {
        display: block !important;
    }

    .agenda-toolbar-actions > *,
    .agenda-print-actions > *,
    .agenda-share-button {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    .agenda-staff-filter {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 7px !important;
        align-items: stretch !important;
    }

    .agenda-staff-filter .agenda-filter-select,
    .agenda-filter-select {
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
    }

    .agenda-calendar-wrap,
    .agenda-month-view {
        max-width: 100%;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .agenda-calendar-week,
    .agenda-calendar-day,
    .agenda-month-weekdays,
    .agenda-month-grid {
        scroll-snap-type: x proximity;
    }

    .agenda-compact-filters {
        top: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .agenda-filter-field,
    .agenda-filter-clear {
        width: 100% !important;
        min-width: 0 !important;
    }

    .agenda-filter-clear {
        min-height: 44px;
        border: 1px solid var(--line) !important;
        border-radius: 8px;
        background: var(--surface) !important;
    }

    .agenda-share-overlay {
        padding:
            max(10px, env(safe-area-inset-top, 0px))
            max(10px, env(safe-area-inset-right, 0px))
            max(10px, env(safe-area-inset-bottom, 0px))
            max(10px, env(safe-area-inset-left, 0px)) !important;
    }

    .agenda-share-dialog {
        width: 100% !important;
        max-height: calc(100dvh - 20px) !important;
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .agenda-share-card {
        min-height: 0 !important;
        padding: 24px 16px !important;
    }

    .agenda-share-identity {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .agenda-share-company-identity {
        width: 100%;
        min-width: 0 !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .agenda-share-company-logo {
        object-position: left center !important;
    }

    .agenda-share-session {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 16px !important;
    }

    .agenda-share-dialog-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .agenda-share-dialog-actions > * {
        width: 100%;
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .agenda-week-nav {
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    }

    .agenda-today-button {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }

    .agenda-week-nav strong {
        grid-column: 2;
        grid-row: 1;
    }

    .agenda-week-nav .agenda-nav-button:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    .agenda-week-nav .agenda-nav-button:last-child {
        grid-column: 3;
        grid-row: 1;
    }

    .agenda-compact-card {
        grid-template-columns: 68px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .agenda-compact-side {
        grid-column: 2;
        min-width: 0 !important;
        justify-content: flex-start !important;
    }

    .agenda-compact-day-head {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 8px !important;
    }

    .agenda-compact-add {
        min-height: 44px !important;
        padding: 0 12px !important;
    }
}

/* ---------------------------------------------------------
   Client portal
   --------------------------------------------------------- */
@media (max-width: 800px) {
    .cp-body {
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: hidden;
    }

    .cp-shell {
        width: 100% !important;
        padding:
            max(18px, env(safe-area-inset-top, 0px))
            max(16px, env(safe-area-inset-right, 0px))
            max(40px, env(safe-area-inset-bottom, 0px))
            max(16px, env(safe-area-inset-left, 0px)) !important;
    }

    .cp-header {
        gap: 16px !important;
        margin-bottom: 20px !important;
    }

    .cp-brand {
        width: 100%;
    }

    .cp-company {
        flex: 1;
    }

    .cp-nav {
        margin-left: -4px;
        margin-right: -4px;
        padding: 4px;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

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

    .cp-nav a {
        flex: 0 0 auto;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0 14px !important;
        scroll-snap-align: start;
        font-size: 13px !important;
    }

    .cp-card {
        min-width: 0;
        padding: 18px !important;
        border-radius: 17px !important;
    }

    .cp-title {
        font-size: clamp(34px, 10vw, 42px) !important;
    }

    .cp-item {
        gap: 10px !important;
    }

    .cp-item-main {
        width: 100%;
    }

    .cp-item-title {
        overflow-wrap: anywhere;
    }

    .cp-actions {
        width: 100%;
    }

    .cp-button,
    .cp-button-secondary,
    .cp-button-danger,
    .cp-login-button,
    .cp-cancel-button {
        min-height: 44px;
    }

    .cp-input,
    .cp-select,
    .cp-textarea,
    .cp-time-row input {
        min-height: 44px;
        font-size: 16px !important;
    }

    .cp-login-shell {
        width: 100% !important;
        min-height: 100vh;
        min-height: 100dvh;
        padding:
            max(28px, env(safe-area-inset-top, 0px))
            max(16px, env(safe-area-inset-right, 0px))
            max(32px, env(safe-area-inset-bottom, 0px))
            max(16px, env(safe-area-inset-left, 0px)) !important;
    }

    .cp-login-card {
        padding: 24px 20px !important;
        border-radius: 20px !important;
    }

    .cp-code {
        letter-spacing: .12em !important;
    }

    .cp-company-card {
        min-width: 0;
    }

    .cp-availability-row {
        padding: 10px 0;
        border-bottom: 1px solid var(--portal-line);
    }

    .cp-time-row {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .cp-card {
        padding: 16px !important;
    }

    .cp-next {
        padding: 16px !important;
    }

    .cp-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .cp-actions > *,
    .cp-item > .cp-button,
    .cp-company-card .cp-button,
    .cp-company-card .cp-button-secondary {
        width: 100%;
    }

    .cp-company-card {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .cp-check-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---------------------------------------------------------
   Public registration / reschedule response
   --------------------------------------------------------- */
@media (max-width: 650px) {
    .register-body {
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: hidden;
    }

    .register-shell {
        width: 100% !important;
        padding:
            max(24px, env(safe-area-inset-top, 0px))
            max(14px, env(safe-area-inset-right, 0px))
            max(46px, env(safe-area-inset-bottom, 0px))
            max(14px, env(safe-area-inset-left, 0px)) !important;
    }

    .register-identity {
        width: 100%;
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .register-company-identity {
        width: 100%;
        justify-content: flex-start !important;
        text-align: left;
    }

    .register-company-logo {
        object-position: left center !important;
    }

    .register-card {
        width: 100%;
        margin-top: 24px !important;
        padding: 24px 18px !important;
        border-radius: 14px !important;
    }

    .register-card input:not([type="checkbox"]):not([type="radio"]),
    .register-card select,
    .register-card textarea {
        min-height: 44px;
        font-size: 16px !important;
    }

    .register-options label {
        min-height: 44px !important;
        padding: 7px 13px !important;
        line-height: 1.3 !important;
    }

    .register-submit,
    .register-whatsapp-button {
        min-height: 48px !important;
        font-size: 13px !important;
    }

    .reschedule-response-comparison {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .reschedule-response-arrow {
        transform: rotate(90deg);
        justify-self: center;
    }

    .reschedule-response-time-option {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .reschedule-response-time-option .register-submit,
    .reschedule-response-time-option input[type="submit"] {
        width: 100% !important;
    }
}

/* ---------------------------------------------------------
   Availability / rescheduling management
   --------------------------------------------------------- */
@media (max-width: 720px) {
    .availability-page {
        width: calc(100% - 24px) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .availability-layout,
    .availability-date-grid,
    .reschedule-summary,
    .reschedule-target,
    .reschedule-recommendation {
        min-width: 0;
    }

    .availability-card {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .availability-date-grid {
        grid-template-columns: 1fr !important;
    }

    .availability-row {
        align-items: flex-start !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .availability-row-actions {
        width: 100%;
        justify-content: flex-start !important;
        flex-wrap: wrap;
    }

    .reschedule-summary,
    .reschedule-target,
    .reschedule-recommendation,
    .reschedule-alternative {
        grid-template-columns: 1fr !important;
    }

    .reschedule-actions,
    .reschedule-actions-buttons {
        align-items: stretch !important;
        flex-direction: column !important;
        width: 100%;
    }

    .reschedule-actions-buttons > *,
    .reschedule-actions > input,
    .reschedule-actions > a {
        width: 100%;
        min-height: 44px;
    }
}

/* ---------------------------------------------------------
   Login / error
   --------------------------------------------------------- */
@media (max-width: 680px) {
    .login-body {
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: hidden;
    }

    .login-shell,
    .login-main {
        max-width: 100%;
    }

    .login-shell {
        padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: max(28px, env(safe-area-inset-bottom, 0px)) !important;
    }

    .login-panel {
        max-width: 100%;
    }

    .login-field input,
    .login-field select,
    .login-field textarea {
        min-height: 46px;
        font-size: 16px !important;
    }

    .error-page {
        width: 100%;
        padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: max(60px, env(safe-area-inset-bottom, 0px)) !important;
    }

    .error-content h1 {
        font-size: clamp(42px, 13vw, 56px) !important;
        overflow-wrap: anywhere;
    }
}

/* Very narrow devices (320px class). */
@media (max-width: 360px) {
    .app-header {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .brand {
        font-size: 36px !important;
    }

    .page,
    .agenda-page {
        width: calc(100% - 16px) !important;
    }

    .mobile-nav a {
        font-size: 9px !important;
    }

    .cp-shell,
    .cp-login-shell,
    .register-shell {
        padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
    }

    .cp-card,
    .cp-login-card,
    .register-card {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .client-kpis {
        grid-template-columns: 1fr !important;
    }
}

/* Short landscape phones: keep overlays and login usable. */
@media (max-height: 520px) and (orientation: landscape) {
    .account-menu-popover,
    .agenda-share-dialog,
    .settings-drawer-panel,
    .client-drawer,
    .agenda-drawer {
        max-height: 100dvh !important;
        overflow-y: auto !important;
    }

    .cp-login-shell,
    .register-shell {
        padding-top: 16px !important;
    }
}

/* Agenda V2: keep the primary action compact and secondary actions in one menu. */
@media (max-width: 820px) {
    .agenda-toolbar {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 14px 10px !important;
    }

    .agenda-title-block {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: stretch !important;
    }

    .agenda-toolbar-actions {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        display: flex !important;
        grid-template-columns: none !important;
        width: auto !important;
        gap: 8px !important;
    }

    .agenda-toolbar-actions > * {
        width: auto !important;
        min-width: 0 !important;
    }

    .agenda-week-nav {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-self: stretch !important;
    }

    .agenda-view-controls {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        justify-self: stretch !important;
    }

    .agenda-quick-week-button {
        width: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        font-size: 0 !important;
    }

    .agenda-quick-week-button span { font-size: 21px !important; }

    .agenda-tools-menu > summary {
        width: 44px !important;
        padding: 0 !important;
        font-size: 0 !important;
    }

    .agenda-tools-menu > summary span { font-size: 12px !important; }
    .agenda-tools-popover { width: calc(100vw - 24px) !important; }

    .agenda-tools-popover .agenda-staff-filter {
        display: flex !important;
        grid-template-columns: none !important;
        align-items: center !important;
    }

    .agenda-tools-popover .agenda-filter-select { height: 42px !important; }
}


/* Beta mobile hardening: company/professional navigation and services */
@media (max-width: 820px) {
    .account-menu-popover {
        top: auto !important;
        bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        right: max(12px, env(safe-area-inset-right, 0px)) !important;
        width: auto !important;
        max-height: min(72dvh, 620px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        z-index: 140 !important;
    }

    .app-body .ux-theme-fab {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        left: 12px !important;
        bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 130 !important;
    }

    .service-row-link {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "main status" "price status" !important;
        column-gap: 12px !important;
        row-gap: 7px !important;
        min-width: 0 !important;
    }

    .service-main-refined { grid-area: main !important; min-width: 0 !important; }
    .service-price-refined {
        grid-area: price !important;
        width: max-content !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }
    .service-status-refined { grid-area: status !important; }
}


/* =========================================================
   Company / professional mobile header + More sheet (v2)
   Kept in mobile-v1.css so it is always included by Publish.
   ========================================================= */
@media (max-width: 820px) {
    body.app-body {
        padding-bottom: 0 !important;
    }

    .app-header {
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px 16px !important;
        padding: 16px max(18px, env(safe-area-inset-right, 0px)) 13px max(18px, env(safe-area-inset-left, 0px)) !important;
        background: color-mix(in srgb, var(--surface, #fcfbf9) 94%, transparent) !important;
        border-bottom: 1px solid var(--line, #e7e2da) !important;
        backdrop-filter: blur(16px) !important;
        overflow: visible !important;
    }

    .app-header .brand {
        display: inline-flex !important;
        order: 1 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        font-size: 38px !important;
    }

    .app-header .account-menu-wrap {
        display: flex !important;
        order: 2 !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        margin-left: auto !important;
        position: static !important;
    }

    .app-header .desktop-nav { display: none !important; }

    .app-header .mobile-nav {
        order: 3 !important;
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        display: flex !important;
        flex: 1 0 100% !important;
        width: 100% !important;
        height: auto !important;
        min-height: 46px !important;
        gap: 7px !important;
        grid-template-columns: none !important;
        padding: 1px 0 3px !important;
        border: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch;
    }

    .app-header .mobile-nav::-webkit-scrollbar { display: none !important; }

    .app-header .mobile-nav a {
        position: relative !important;
        display: inline-flex !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 9px 12px !important;
        border-radius: 999px !important;
        color: var(--muted, #74706a) !important;
        font: 500 13px/1 Inter, Arial, sans-serif !important;
        white-space: nowrap !important;
        text-decoration: none !important;
    }

    .app-header .mobile-nav a:hover,
    .app-header .mobile-nav a.active {
        background: color-mix(in srgb, var(--accent, #9a8979) 11%, var(--surface, #fff)) !important;
        color: var(--accent, #9a8979) !important;
    }

    .app-header .mobile-nav a.active::after { display: none !important; content: none !important; }
    .app-header .mobile-nav-mark { display: none !important; }

    /* Same language treatment as the client portal, mobile only. */
    .account-mobile-language-options {
        display: inline-flex !important;
        align-items: center !important;
        gap: 2px !important;
        padding: 4px !important;
        border: 1px solid var(--line, #e7e2da) !important;
        border-radius: 999px !important;
        background: var(--surface, #fff) !important;
        box-shadow: 0 8px 24px rgba(38, 33, 29, .05) !important;
    }

    .account-mobile-language-options a {
        display: grid !important;
        place-items: center !important;
        min-width: 40px !important;
        min-height: 36px !important;
        padding: 0 9px !important;
        border-radius: 999px !important;
        color: var(--muted, #74706a) !important;
        text-decoration: none !important;
        font: 600 12px/1 Inter, Arial, sans-serif !important;
        letter-spacing: .02em !important;
    }

    .account-mobile-language-options a.is-active {
        background: var(--accent, #9a8979) !important;
        color: #fff !important;
    }

    /* Mobile opens the account content through the More navigation item. */
    .account-menu > summary,
    .account-menu-trigger { display: none !important; }

    .account-menu:not([open]) .account-menu-popover,
    .account-menu:not([open]) .account-menu-scrim { display: none !important; }

    .account-menu[open] .account-menu-scrim {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 9980 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(22, 19, 16, .42) !important;
        backdrop-filter: blur(4px) !important;
    }

    .account-menu[open] .account-menu-popover {
        display: block !important;
        position: fixed !important;
        z-index: 9990 !important;
        top: auto !important;
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        right: max(12px, env(safe-area-inset-right, 0px)) !important;
        bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        max-width: 560px !important;
        max-height: min(82dvh, 680px) !important;
        margin: 0 auto !important;
        padding: 20px !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
        border: 1px solid var(--line, #e7e2da) !important;
        border-radius: 24px !important;
        background: var(--surface, #fcfbf9) !important;
        color: var(--ink, #2f2c29) !important;
        box-shadow: 0 28px 80px rgba(24, 20, 17, .25) !important;
    }

    .account-menu-sheet-head {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 18px !important;
        padding-bottom: 5px !important;
    }

    .account-menu-close {
        display: grid !important;
        place-items: center !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: var(--surface-soft, #f1eee9) !important;
        color: var(--muted, #74706a) !important;
        font: 400 24px/1 Inter, Arial, sans-serif !important;
        cursor: pointer !important;
    }

    .account-menu-identity strong { font-size: 15px !important; }
    .account-menu-identity span { margin-top: 3px !important; font-size: 12px !important; }
    .account-menu-section { margin-top: 18px !important; }
    .account-menu-label { font-size: 10px !important; }

    .account-menu-section > a,
    .account-menu-action,
    .account-menu-logout {
        min-height: 46px !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 -8px !important;
        padding: 11px 10px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    /* Language is already visible at the top of the mobile header. */
    .account-menu-language { display: none !important; }

    html.account-menu-open,
    html.account-menu-open body { overflow: hidden !important; }

    .app-body .ux-theme-fab {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        left: 14px !important;
        bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important;
        z-index: 120 !important;
    }
}

@media (max-width: 390px) {
    .app-header { padding-left: 14px !important; padding-right: 14px !important; }
    .app-header .brand { font-size: 35px !important; }
    .account-mobile-language-options a { min-width: 36px !important; min-height: 34px !important; padding: 0 7px !important; }
    .app-header .mobile-nav a { padding-left: 10px !important; padding-right: 10px !important; font-size: 12px !important; }
}

/* Client activity pages v2 — keep status/value aligned on phones. */
@media (max-width: 600px) {
    .client-activity-upcoming-page .client-activity-row,
    .client-activity-history-page .client-activity-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px 14px !important;
    }

    .client-activity-upcoming-page .client-activity-date,
    .client-activity-history-page .client-activity-date {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .client-activity-upcoming-page .client-activity-main,
    .client-activity-history-page .client-activity-main {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }

    .client-activity-upcoming-page .activity-status {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: start;
    }

    .client-activity-history-page .client-activity-value {
        grid-column: 1 !important;
        grid-row: 3 !important;
        text-align: left !important;
    }

    .client-activity-history-page .activity-status {
        grid-column: 2 !important;
        grid-row: 1 / span 3 !important;
        align-self: start;
    }
}