/* Mobile dashboard navigation: role drawers, submenu touch targets, safe areas. */
@media (max-width: 767px) {
    .admin-dashboard-shell aside,
    .patient-mobile-sidebar {
        padding-top: env(safe-area-inset-top, 0px);
    }

    .admin-dashboard-shell .admin-sidebar-menu,
    .patient-sidebar-scroll {
        padding-bottom: max(1.5rem, calc(env(safe-area-inset-bottom, 0px) + 1rem)) !important;
        scrollbar-width: none;
    }

    .admin-dashboard-shell .admin-sidebar-menu::-webkit-scrollbar,
    .patient-sidebar-scroll::-webkit-scrollbar {
        display: none;
    }

    .admin-dashboard-shell .admin-sidebar-menu a,
    .patient-side-menu > li > a {
        min-height: 44px !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        line-height: 1.15 !important;
    }

    .admin-dashboard-shell .admin-sidebar-menu a:focus-visible,
    .patient-side-menu > li > a:focus-visible {
        outline: 2px solid #0ea5e9;
        outline-offset: 2px;
    }

    .admin-dashboard-shell .admin-sidebar-menu a > div,
    .patient-side-menu > li > a > div {
        min-width: 0;
        flex: 1 1 auto;
    }

    .admin-dashboard-shell .admin-sidebar-menu a > span:last-child,
    .patient-side-menu > li > a > span:not(:first-child),
    .patient-side-menu > li > a > div > span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-dashboard-shell .admin-sidebar-menu a [class*="ml-auto"],
    .patient-side-menu > li > a [class*="ml-auto"] {
        flex-shrink: 0;
    }

    .admin-dashboard-shell aside > div:first-child h2 {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-dashboard-shell .admin-sidebar-account .flex {
        flex-wrap: wrap;
    }

    .admin-dashboard-shell #admin-main-scroll {
        padding-bottom: max(0.375rem, env(safe-area-inset-bottom, 0px)) !important;
    }

    body #patient-tab-stack > div[x-show] > .relative.overflow-hidden.rounded-2xl:first-child button,
    body #patient-tab-stack > div[x-show] > .relative.overflow-hidden.rounded-2xl:first-child input,
    body #patient-tab-stack > div[x-show] > .relative.overflow-hidden.rounded-2xl:first-child select {
        min-height: 44px !important;
    }

    .kms-mobile-scroll-hint {
        position: relative;
    }

    .kms-mobile-scroll-hint::after {
        content: "";
        position: absolute;
        inset: 0 0 0 auto;
        width: 2.25rem;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.96));
    }

    [data-role-control-matrix] th,
    [data-role-control-matrix] td {
        padding: 0.75rem 0.85rem;
        white-space: nowrap;
    }

    [data-role-control-matrix] td:first-child,
    [data-role-control-matrix] th:first-child {
        max-width: 10.5rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}