/* ==========================================================================
   MODULE: MOBILE UI - GPSTRACKING APP
   --------------------------------------------------------------------------
   01. Shared mobile tokens (Bootstrap uses a 16px root in this application)
   02. Navigation and touch targets
   03. Page headings, forms and dialogs
   ========================================================================== */

@media (max-width: 768px) {
    .app-shell {
        --color-primary: #007bb5;
        --color-primary-hover: #006494;
        --color-text-main: #243746;
        --color-border: #e1e8ee;
        --space-mobile-gutter: 0.75rem;
        --size-mobile-control: 2.25rem;
        --radius-mobile-control: 0.5rem;
        --radius-mobile-card: 0.75rem;
        color: var(--color-text-main, #243746);
    }

    /* Keep the existing 50px navbar and map offsets in sync. */
    .app-shell .navbar-mobile {
        padding-right: max(0.5rem, env(safe-area-inset-right));
        padding-left: max(0.5rem, env(safe-area-inset-left));
    }

    .app-shell .nav-group-left,
    .app-shell .nav-group-right {
        gap: 0.25rem;
    }

    .app-shell .nav-group-left {
        flex-shrink: 1;
        min-width: 0;
    }

    .app-shell .nav-brand-link {
        min-width: 0;
    }

    .app-shell .nav-brand-logo {
        max-width: 100%;
    }

    .app-shell .nav-action-btn {
        flex-shrink: 0;
        width: var(--size-mobile-control, 2.75rem);
        height: var(--size-mobile-control, 2.75rem);
        min-height: var(--size-mobile-control, 2.75rem);
    }

    .app-shell .sidebar-nav-item,
    .app-shell .submenu-item,
    .app-shell .sidebar-logout-btn {
        min-height: var(--size-mobile-control, 2.75rem);
        font-size: 0.875rem;
    }

    .app-shell .sidebar-footer {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    .app-shell .maintenance-page,
    .app-shell .registration-page,
    .app-shell .container-fluid.profile-page,
    .app-shell .container-fluid.employer-page {
        padding: 4rem var(--space-mobile-gutter, 0.75rem) 1.5rem;
    }

    .app-shell .maintenance-page__header,
    .app-shell .registration-page__header {
        align-items: stretch;
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .app-shell .maintenance-page__title,
    .app-shell .registration-page__title,
    .app-shell .profile-header__title,
    .app-shell .employer-header__title,
    .app-shell .report-card .card-title {
        color: var(--color-text-main, #243746);
        font-size: 1.25rem;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .app-shell .maintenance-page__description,
    .app-shell .registration-page__description {
        margin-bottom: 0;
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .app-shell .admin-toolbar,
    .app-shell .modal-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Keep destructive, export and secondary actions' semantic colors. */
    .app-shell .btn {
        min-height: var(--size-mobile-control, 2.75rem);
        font-size: 0.875rem;
        line-height: 1.4;
        white-space: normal;
    }

    .app-shell .maintenance-item__icon-button,
    .app-shell .registration-icon-button,
    .app-shell .report-sidebar__close-btn,
    .app-shell .profile-avatar-btn,
    .app-shell .btn-toggle-password {
        min-width: var(--size-mobile-control, 2.75rem);
        min-height: var(--size-mobile-control, 2.75rem);
    }

    .app-shell .profile-nav-link,
    .app-shell .employer-btn-reset,
    .app-shell .employer-btn-submit {
        min-height: var(--size-mobile-control, 2.75rem);
    }

    .app-shell .form-control,
    .app-shell .form-select,
    .app-shell .select2-selection--single,
    .app-shell .select2-selection--multiple {
        min-height: var(--size-mobile-control, 2.75rem);
        border-radius: var(--radius-mobile-control, 0.5rem);
    }

    .app-shell .select2-selection--single .select2-selection__arrow {
        top: 50%;
        transform: translateY(-50%);
    }

    .app-shell .btn-close {
        box-sizing: border-box;
        flex-shrink: 0;
        width: var(--size-mobile-control, 2.75rem);
        height: var(--size-mobile-control, 2.75rem);
        padding: 0.75rem;
        background-size: 0.875rem;
    }

    .app-shell .btn:focus-visible,
    .app-shell .nav-action-btn:focus-visible,
    .app-shell .sidebar-nav-item:focus-visible,
    .app-shell .submenu-item:focus-visible,
    .app-shell .btn-close:focus-visible,
    .app-shell .form-control:focus-visible,
    .app-shell .form-select:focus-visible,
    .app-shell .profile-nav-link:focus-visible,
    .app-shell .profile-avatar-btn:focus-visible,
    .app-shell .btn-toggle-password:focus-visible {
        outline: 2px solid var(--color-primary, #007bb5);
        outline-offset: 2px;
    }

    .app-shell .modal-header {
        gap: 0.5rem;
    }

    .app-shell .modal-title {
        min-width: 0;
        font-size: 1.125rem;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .app-shell .modal-footer {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    .app-shell .report-container {
        min-width: 0;
    }
}