/*
 * TRT Diary mobileccs2.0
 *
 * Release hardening layer loaded after the existing mobile experience. The
 * base layer supplies the application shell and page-specific treatments;
 * this layer enforces the shared mobile contract across every page without
 * changing the desktop cascade.
 */

html.mobile-experience {
    --mobile-release-gutter: clamp(0.75rem, 4vw, 1.25rem);
    --mobile-release-control-height: 2.875rem;
}

html.mobile-experience,
html.mobile-experience body {
    max-width: 100vw;
    overflow-x: clip;
}

html.mobile-experience :where(
    main, section, article, aside, header, footer, nav, form, fieldset,
    .app-main, .app-content-container, .home-main, .public-main,
    .sample-shell, .auth-shell, .register-shell, .reset-shell, .magic-shell
) {
    min-width: 0;
    max-width: 100%;
}

html.mobile-experience :where(
    h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, legend, button, a,
    th, td, figcaption, small, strong, span
) {
    overflow-wrap: anywhere;
}

html.mobile-experience :where(img, video, canvas, iframe, embed, object) {
    max-width: 100%;
}

html.mobile-experience :where(input, select, textarea, button) {
    max-width: 100%;
}

html.mobile-experience :where(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']), select, textarea) {
    width: 100%;
    min-width: 0;
    min-height: var(--mobile-release-control-height);
}

html.mobile-experience :where(button, [role='button'], input[type='button'], input[type='submit'], input[type='reset']) {
    min-height: var(--mobile-release-control-height);
}

/* A page may contain a genuinely wide data table; keep it usable without
 * allowing it to widen the document or move the whole viewport sideways. */
html.mobile-experience :where(table) {
    max-width: 100%;
}

html.mobile-experience :where(.mobile-table-region, .mobile-scroll-table, [data-mobile-table]) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

html.mobile-experience :where(pre, code, .font-mono, .text-mono) {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Inline desktop grids and action rows collapse safely on phones. Existing
 * page-specific rules can opt back into a two-column layout where it fits. */
@media (max-width: 767px) {
    html.mobile-experience :where(
        [style*='grid-template-columns'],
        .grid, .dashboard-grid, .profile-dynamic-grid, .profile-dynamic-results,
        .food-grid, .food-layout, .reports-grid, .labs-grid, .settings-grid,
        .form-grid, .form-row, .action-row, .button-row
    ) {
        min-width: 0;
    }

    html.mobile-experience :where(.app-content-container, .home-main, .public-main, .sample-shell) {
        padding-inline: max(var(--mobile-release-gutter), env(safe-area-inset-left, 0px)) max(var(--mobile-release-gutter), env(safe-area-inset-right, 0px));
    }

    html.mobile-experience :where(.mobile-page-head-actions, .action-row, .button-row) {
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
    }

    html.mobile-experience :where(.mobile-page-head-actions > *, .action-row > *, .button-row > *) {
        min-width: min(100%, 9rem);
        max-width: 100%;
    }

    html.mobile-experience :where(.modal, [role='dialog'], dialog) {
        max-width: 100vw;
    }

    html.mobile-experience :where(.modal-content, .modal-panel, [role='dialog'] > *, dialog > *) {
        max-width: calc(100vw - 1rem);
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (any-pointer: coarse) {
    html.mobile-experience :where(.app-content-container, .home-main, .public-main, .sample-shell) {
        padding-inline: max(1.25rem, env(safe-area-inset-left, 0px)) max(1.25rem, env(safe-area-inset-right, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    html.mobile-experience * {
        scroll-behavior: auto !important;
    }
}