/* Global mobile / responsive helpers — portal, admin, auth pages */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

/* Visible keyboard focus (mouse users keep clean UI) */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex='-1'])):focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

.dark :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex='-1'])):focus-visible {
    outline-color: #818cf8;
}

@media (max-width: 1023px) {
    main,
    .portal-main-content {
        min-width: 0;
    }

    main .overflow-x-auto,
    main table {
        max-width: 100%;
    }

    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 767px) {
    main input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
    main select,
    main textarea,
    .redcrm-auth-form input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
    .redcrm-auth-form select,
    .redcrm-auth-form textarea {
        font-size: 16px;
    }

    main button.remove-row,
    main .travel-tab {
        min-height: 40px;
    }

    /* Touch targets — WCAG 2.5.5 friendly (44×44) */
    #mobileNavBtn,
    #portal_alerts_btn,
    #themeToggle,
    #portal_sidebar_toggle,
    #acct_btn,
    #hdr_create_btn {
        min-height: 44px;
        min-width: 44px;
    }

    main a.inline-flex.h-9.w-9,
    main button.inline-flex.h-9.w-9 {
        min-height: 44px;
        min-width: 44px;
    }

    /* Tighter header on very small phones */
    header h1 + p {
        display: none;
    }
}

/* Horizontal action strips (invoice edit mobile rail, etc.) */
.redcrm-mobile-action-strip {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.redcrm-mobile-action-strip::-webkit-scrollbar {
    display: none;
}

.redcrm-mobile-action-strip > * {
    flex-shrink: 0;
    scroll-snap-align: start;
}

/* Modals / drawers — safe area on notched devices */
@supports (padding: max(0px)) {
    .redcrm-modal-safe,
    #mobileNav aside {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    header.sticky {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}

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