.mobile-topbar {
    min-height: 48px;
}

.mobile-main {
    padding-top: 0.25rem;
    min-height: calc(100vh - 48px);
    background-color: #f8f9fa;
}

.mobile-page {
    max-width: 100%;
}

.mobile-session-card {
    transition: background-color 0.1s ease;
}

.mobile-session-card:active {
    background-color: #f1f3f5;
}

/* Prevent iOS Safari from auto-zooming when an input is focused.
   Anything below ~16px triggers the zoom; bump form controls explicitly. */
.mobile-page input,
.mobile-page textarea,
.mobile-page select,
.mobile-page .k-input,
.mobile-page .k-textbox,
.mobile-page .k-textarea {
    font-size: 16px !important;
}

/* Make Telerik windows behave like full-screen sheets on small screens. */
@media (max-width: 600px) {
    .k-window {
        max-width: 100vw !important;
    }
    .k-window-content {
        padding: 0.75rem !important;
    }
}

/* Slightly larger touch targets for the small Telerik buttons we use. */
.mobile-page .k-button.k-button-sm {
    min-height: 36px;
}

/* Tighten card padding on phones without losing readability. */
.mobile-page .card-body {
    padding: 0.75rem;
}