/**
 * Mobile-First Common Styles
 * Standardized mobile CSS for all pages in the system
 * Applied globally via base.html
 */

@media (max-width: 768px) {
    /* ============================================
       LAYOUT & CONTAINERS
       ============================================ */
    
    .container-fluid:not(.navbar-inner), .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    .card-header {
        padding: 0.75rem 1rem !important;
    }
    
    /* ============================================
       TYPOGRAPHY
       ============================================ */
    
    h1 {
        font-size: 1.75rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
    
    h4 {
        font-size: 1.125rem !important;
    }
    
    h5, h6 {
        font-size: 1rem !important;
    }
    
    /* ============================================
       BUTTONS - WCAG 2.1 AA Compliant Touch Targets
       ============================================ */
    
    .btn {
        min-height: 48px !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .btn-lg {
        min-height: 52px !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    .btn-sm {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.625rem 0.875rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Button rows and groups: side by side, wrapping onto the next line only
       when they don't fit. (They used to be forced into one full-width button
       per line, which made headers and filter bars several screens tall.) */
    .btn-group,
    .d-flex.gap-2 {
        flex-wrap: wrap !important;
    }

    /* Room at the bottom of every page for the round + button */
    main {
        padding-bottom: 5.5rem !important;
    }
    
    /* ============================================
       FORM CONTROLS - iOS Zoom Prevention
       ============================================ */
    
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea {
        font-size: 16px !important; /* Prevent iOS zoom */
        min-height: 50px !important;
    }
    
    .form-control-sm, .form-select-sm {
        font-size: 16px !important;
        min-height: 44px !important;
    }
    
    .form-control-lg, .form-select-lg {
        min-height: 54px !important;
        padding: 0.875rem 1.25rem !important;
    }
    
    textarea.form-control {
        min-height: 100px !important;
    }
    
    .form-label {
        font-size: 0.875rem !important;
        margin-bottom: 0.375rem !important;
    }
    
    /* ============================================
       SPACING & GRID
       ============================================ */
    
    .row.g-3 {
        row-gap: 1rem !important;
    }
    
    .row.g-2 {
        row-gap: 0.75rem !important;
    }
    
    /* Column spacing */
    .col-12 {
        margin-bottom: 0.75rem;
    }
    
    /* ============================================
       BADGES & PILLS
       ============================================ */
    
    .badge {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.625rem !important;
    }
    
    .badge.fs-6 {
        font-size: 0.875rem !important;
    }
    
    /* ============================================
       TABLES - Basic Responsive
       ============================================ */
    
    .table {
        font-size: 0.875rem !important;
    }
    
    .table td, .table th {
        padding: 0.5rem 0.25rem !important;
    }
    
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* ============================================
       ALERTS & MESSAGES
       ============================================ */
    
    .alert {
        font-size: 0.875rem !important;
        padding: 0.75rem 1rem !important;
    }
    
    .alert ul {
        font-size: 0.875rem !important;
        padding-left: 1.25rem !important;
        margin-bottom: 0 !important;
    }
    
    /* ============================================
       MODALS
       ============================================ */
    
    .modal-header {
        padding: 1rem !important;
    }
    
    .modal-body {
        padding: 1rem !important;
    }
    
    .modal-footer {
        padding: 0.75rem 1rem !important;
    }
    
    .modal-title {
        font-size: 1.25rem !important;
    }
    
    /* ============================================
       DROPDOWNS
       ============================================ */
    
    .dropdown-menu {
        font-size: 0.875rem !important;
    }
    
    .dropdown-item {
        padding: 0.625rem 1rem !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* ============================================
       PAGINATION
       ============================================ */
    
    .pagination .page-link {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    /* ============================================
       UTILITY CLASSES
       ============================================ */
    
    /* Hide on mobile */
    .d-none-mobile {
        display: none !important;
    }
    
    /* Full width on mobile */
    .w-100-mobile {
        width: 100% !important;
    }
    
    /* Text sizing */
    .small, small {
        font-size: 0.8125rem !important;
    }
    
    /* Icon sizing */
    .fa-lg {
        font-size: 1.25rem !important;
    }
    
    .fa-2x {
        font-size: 1.75rem !important;
    }
    
    .fa-3x {
        font-size: 2.25rem !important;
    }
    
    /* ============================================
       NAVBAR & SIDEBAR ADJUSTMENTS
       ============================================ */
    
    /* Navbar - Consistent layout for all pages */
    .navbar {
        padding: 0.25rem 0.5rem !important;
        height: 48px !important;
    }
    
    .navbar-inner {
        padding: 0 0.25rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        height: 100% !important;
    }
    
    /* Left section - Sidebar toggle (order: 1) */
    #sidebarToggle {
        min-height: 40px !important;
        min-width: 40px !important;
        padding: 0.25rem !important;
        margin: 0 !important;
        margin-right: 0.25rem !important;
        flex-shrink: 0 !important;
        order: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #sidebarToggle i {
        font-size: 1.25rem !important;
    }
    
    /* Center section - Brand (order: 2, always visible) */
    .navbar-brand {
        font-size: 1.05rem !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-grow: 1 !important;
        order: 2 !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.35rem !important;
        color: white !important;
    }
    
    .navbar-brand i {
        font-size: 1.25rem !important;
        opacity: 1 !important;
        visibility: visible !important;
        color: white !important;
    }
    
    /* Right section - User dropdown (order: 3, always visible) */
    .navbar-toggler {
        display: none !important;
    }
    
    /* User dropdown nav - always visible, right-aligned */
    .navbar-inner > .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        order: 3 !important;
        margin: 0 !important;
    }
    
    .navbar-inner > .navbar-nav .nav-item.dropdown {
        position: relative !important;
    }
    
    .navbar-inner > .navbar-nav .dropdown-toggle {
        padding: 0.25rem 0.4rem !important;
        min-height: 40px !important;
        font-size: 0.875rem !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        color: white !important;
    }
    
    .navbar-inner > .navbar-nav .dropdown-menu {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        top: 100% !important;
        margin-top: 0.5rem !important;
        min-width: 150px !important;
    }
    
    /* Hide fullscreen button on mobile */
    #fullscreenBtn {
        display: none !important;
    }
    
    /* Sidebar navigation */
    .sidebar .nav-link {
        padding: 0.75rem 1rem !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        font-size: 0.875rem !important;
    }
    
    .sidebar .nav-link i {
        font-size: 1rem !important;
        width: 1.5rem !important;
        margin-right: 0.5rem !important;
    }
    
    .sidebar h6 {
        font-size: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        margin-top: 0.5rem !important;
    }
    
    /* ============================================
       LIST GROUP
       ============================================ */
    
    .list-group-item {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* ============================================
       BREADCRUMB
       ============================================ */
    
    .breadcrumb {
        font-size: 0.875rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    .breadcrumb-item {
        font-size: 0.875rem !important;
    }
}

/* ============================================
   PHONES (up to 576px): COMPACT PAGE HEADERS
   The coloured header of a page takes a few lines at most, so the page
   itself starts on the first screen.
   ============================================ */

@media (max-width: 576px) {
    .page-header,
    .page-hero,
    .report-header,
    .eod-header {
        padding: 0.9rem 1rem !important;
        margin-bottom: 0.9rem !important;
    }

    .page-header h1, .page-header h2,
    .page-hero h1, .page-hero h2,
    .report-header h1, .report-header h2,
    .eod-header h1, .eod-header h2 {
        font-size: 1.3rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.15rem !important;
    }

    .page-header p,
    .page-hero p,
    .report-header p,
    .eod-header p {
        font-size: 0.8rem !important;
        margin-bottom: 0 !important;
    }

    .page-header .btn,
    .page-hero .btn,
    .report-header .btn,
    .eod-header .btn {
        min-height: 42px !important;
        padding: 0.45rem 0.85rem !important;
        font-size: 0.85rem !important;
    }
}

/* ============================================
   MOBILE LANDSCAPE (480px - 768px)
   ============================================ */

@media (min-width: 480px) and (max-width: 768px) {
    .container-fluid:not(.navbar-inner), .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    h2 {
        font-size: 1.625rem !important;
    }
    
    .btn {
        padding: 0.75rem 1.25rem !important;
    }
}

/* ============================================
   EXTRA SMALL DEVICES (< 375px)
   ============================================ */

@media (max-width: 374px) {
    .container-fluid:not(.navbar-inner), .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.25rem !important;
    }
    
    .btn {
        padding: 0.625rem 0.875rem !important;
    }
    
    .card-body {
        padding: 0.75rem !important;
    }
}