/* ============================================
   MOBILE RESPONSIVE - GLOBAL STANDARDS
   ============================================
   
   This file defines mobile-responsive standards
   applied across ALL pages of the app.
   
   Breakpoints (from Bootstrap):
   - XS: 0px (mobile first, default)
   - SM: 576px (large phones)
   - MD: 768px (tablets)
   - LG: 992px (desktops)
   - XL: 1200px (large desktops)
   ============================================ */

/* ========================================
   PREVENT HORIZONTAL SCROLLING
   ======================================== */

html,
body {
    overflow-x: hidden;
}

/* ========================================
   MOBILE EDGE SPACING - 5px Standard
   ======================================== */

/* Apply 5px padding to containers on mobile devices (below 768px) */
@media (max-width: 767.98px) {
    /* ===== CRITICAL: Override Bootstrap Padding Utilities ===== */
    /* These utilities (.py-*, .px-*, .p-*) are used throughout the HTML
       and have high specificity. We need to override them on mobile. */

    /* Override all horizontal padding utilities */
    .px-1,
    .px-2,
    .px-3,
    .px-4,
    .px-5,
    .pl-1,
    .pl-2,
    .pl-3,
    .pl-4,
    .pl-5,
    .pr-1,
    .pr-2,
    .pr-3,
    .pr-4,
    .pr-5 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Override Bootstrap containers */
    .container,
    .container-fluid {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    /* All sections and main content wrappers */
    section,
    main,
    .section,
    .content-wrapper {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Rows need negative margin to compensate for column padding */
    .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }

    /* Columns should have 5px padding */
    [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Cards and panels */
    .card,
    .panel {
        margin-left: 5px !important;
        margin-right: 5px !important;
    }

    /* Modals and dialogs */
    .modal-dialog {
        margin-left: 5px !important;
        margin-right: 5px !important;
    }

    /* Alerts and notifications */
    .alert {
        margin-left: 5px !important;
        margin-right: 5px !important;
    }

    /* Page-specific sections */
    .welcome-section,
    .pricing-packages-section,
    .test-options-section,
    .email-verification-warning {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Ensure nested containers don't double the padding */
    .container .container,
    .container-fluid .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ========================================
   SECTION TITLE SPACING OPTIMIZATION
   ======================================== */

/* Reduce top margin/padding for section titles on mobile */
@media (max-width: 767.98px) {

    /* Override Bootstrap vertical padding utilities */
    .py-1,
    .py-2,
    .py-3,
    .py-4,
    .py-5,
    .pt-1,
    .pt-2,
    .pt-3,
    .pt-4,
    .pt-5 {
        padding-top: 0.5rem !important;
    }

    .py-1,
    .py-2,
    .py-3,
    .py-4,
    .py-5,
    .pb-1,
    .pb-2,
    .pb-3,
    .pb-4,
    .pb-5 {
        padding-bottom: 0.5rem !important;
    }

    /* Section titles immediately after headers/navbars */
    .section-title,
    h2.section-title,
    .test-options-section h2,
    .pricing-packages-section h2 {
        margin-top: 0.5rem !important;
        margin-bottom: 1rem !important;
        padding-top: 0 !important;
    }

    /* Reduce spacing in section wrappers */
    .test-options-section .container,
    .pricing-packages-section .container {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Specific fix for "Τι θέλεις να κάνεις σήμερα" section */
    .test-options-section {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .test-options-section .text-center {
        margin-bottom: 1.5rem !important;
    }

    /* Welcome section spacing */
    .welcome-section,
    .practice-screen,
    .selector-section,
    .login-container,
    .register-container,
    .email-verification-warning {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Reduce spacing in pricing section */
    .pricing-packages-section {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/* ========================================
   NAVBAR MOBILE ADJUSTMENTS
   ======================================== */

@media (max-width: 991.98px) {

    /* Navbar container */
    .navbar .container,
    .navbar .container-fluid {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Navbar brand */
    .navbar-brand {
        margin-left: 0 !important;
    }

    /* Navbar toggler */
    .navbar-toggler {
        margin-right: 0 !important;
    }

    /* Collapsed navbar menu */
    .navbar-collapse {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* ========================================
   FOOTER MOBILE ADJUSTMENTS
   ======================================== */

@media (max-width: 767.98px) {

    /* Footer container */
    .footer .container,
    .footer .container-fluid,
    .container-fluid.bg-dark {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Footer sections */
    .footer .row>div {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* ========================================
   TYPOGRAPHY MOBILE ADJUSTMENTS
   ======================================== */

@media (max-width: 767.98px) {

    /* Reduce heading sizes on mobile for better fit */
    .section-title,
    h2.section-title {
        font-size: 1.5rem !important;
    }

    h1 {
        font-size: 1.6rem !important;
    }

    .display-4 {
        font-size: 2rem !important;
    }

    .lead {
        font-size: 1rem !important;
    }
}

/* ========================================
   BUTTON MOBILE ADJUSTMENTS
   ======================================== */

@media (max-width: 767.98px) {

    /* Full-width buttons on mobile */
    .btn-lg,
    .btn-block {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }

    /* Icon sizing in buttons */
    .btn i {
        font-size: 1rem !important;
    }
}

/* ========================================
   CARD MOBILE ADJUSTMENTS
   ======================================== */

@media (max-width: 767.98px) {

    /* Card spacing */
    .card {
        margin-bottom: 1rem !important;
    }

    /* Card body padding */
    .card-body {
        padding: 1rem !important;
    }

    /* Modern cards */
    .modern-card .card-body {
        padding: 1.5rem !important;
    }
}

/* ========================================
   MODAL MOBILE ADJUSTMENTS
   ======================================== */

@media (max-width: 767.98px) {

    /* Modal content */
    .modal-content {
        margin: 5px !important;
    }

    /* Modal body padding */
    .modal-body {
        padding: 1rem !important;
    }

    /* Modal header */
    .modal-header {
        padding: 1rem !important;
    }

    /* Modal footer */
    .modal-footer {
        padding: 0.75rem !important;
    }
}

/* ========================================
   FORM MOBILE ADJUSTMENTS
   ======================================== */

@media (max-width: 767.98px) {

    /* Form controls */
    .form-control {
        font-size: 1rem !important;
    }

    /* Form groups */
    .form-group {
        margin-bottom: 1rem !important;
    }

    /* Select dropdowns */
    select.form-control {
        font-size: 1rem !important;
    }
}

/* ========================================
   TABLE MOBILE ADJUSTMENTS
   ======================================== */

@media (max-width: 767.98px) {

    /* Make tables scrollable on mobile */
    .table-responsive {
        margin-left: 5px !important;
        margin-right: 5px !important;
    }

    /* Table cell padding */
    .table td,
    .table th {
        padding: 0.5rem !important;
        font-size: 0.875rem !important;
    }
}

/* ========================================
   UTILITY CLASSES FOR MOBILE
   ======================================== */

/* Mobile-only padding utilities */
@media (max-width: 767.98px) {
    .mobile-p-0 {
        padding: 0 !important;
    }

    .mobile-px-5 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .mobile-py-5 {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .mobile-m-0 {
        margin: 0 !important;
    }

    .mobile-mx-5 {
        margin-left: 5px !important;
        margin-right: 5px !important;
    }

    .mobile-my-5 {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
}

/* ========================================
   PRINT STYLES (Maintain for all devices)
   ======================================== */

@media print {

    /* Reset padding for print */
    .container,
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}