/**
 * TutorKita - Mobile & Tablet Responsive Styles
 * Handles responsive design for mobile and tablet devices
 */

/* ========== CSS Variables for Mobile ========== */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);

    /* Soft 3-Color Palette */
    --soft-sky: #87CEEB;
    --soft-sky-light: #e0f4ff;
    --soft-navy: #2c3e50;
    --soft-mint: #48c9b0;
    --soft-mint-light: #d5f5f0;
}

/* ========== TOUCH OPTIMIZATION ========== */
*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent;
}

/* Prevent iOS zoom on input focus */
input,
select,
textarea {
    font-size: 16px !important;
    touch-action: manipulation;
}

/* ========== MOBILE HEADER (Show on mobile/tablet) ========== */
.mobile-header {
    display: none;
}

/* ========== TABLET STYLES (768px - 1024px) ========== */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    /* Main content adjustment for tablet */
    .main-content {
        margin-left: 0 !important;
        padding: 20px !important;
    }

    /* Sidebar - slide out on tablet */
    .sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        width: 280px;
        height: 100vh;
        z-index: 9999;
        transition: left 0.3s ease;
    }

    .sidebar.open {
        left: 0;
    }

    /* Sidebar overlay */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .sidebar-overlay.active,
    .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    /* Show mobile menu toggle on tablet */
    .mobile-menu-toggle {
        display: flex !important;
    }

    /* Stats grid - 2 columns on tablet */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }

    /* Cards layout */
    .card {
        margin-bottom: 15px;
    }

    .card-header {
        padding: 15px;
    }

    .card-body {
        padding: 15px;
    }

    /* Tables - responsive on tablet */
    .table-responsive,
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Page header */
    .page-header {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
    }

    .page-title {
        font-size: 1.5rem;
    }

    /* Modal adjustments */
    .modal {
        max-width: 90%;
        margin: 20px auto;
    }

    /* Welcome banner */
    .welcome-banner {
        padding: 25px;
    }
}

/* ========== MOBILE STYLES (Below 768px) ========== */
@media screen and (max-width: 767px) {

    /* Mobile Header - Show */
    .mobile-header {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        padding-top: var(--safe-area-top);
        background: white;
        border-bottom: 1px solid var(--border-color);
        z-index: 9990;
        align-items: center;
        justify-content: space-between;
        padding-left: 15px;
        padding-right: 15px;
        box-shadow: var(--shadow-sm);
    }

    .mobile-header .menu-toggle {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-primary);
        border: none;
        border-radius: var(--radius-md);
        font-size: 1.5rem;
        color: var(--text-primary);
        cursor: pointer;
    }

    .mobile-logo {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-user {
        display: flex;
        align-items: center;
    }

    /* Sidebar - hidden by default on mobile */
    .sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        width: 85%;
        max-width: 300px;
        height: 100vh;
        z-index: 9999;
        transition: left 0.3s ease;
        padding-top: 20px;
        padding-bottom: 100px !important;
        /* Extra padding for bottom reachability */
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        overflow-y: auto !important;
        /* Re-enable scroll */
        -webkit-overflow-scrolling: touch;
    }

    .sidebar.open {
        left: 0;
    }

    /* Sidebar overlay */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .sidebar-overlay.active,
    .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    /* Main content - full width on mobile */
    .main-content {
        margin-left: 0 !important;
        padding: 15px !important;
        padding-top: 80px !important;
        padding-bottom: 30px !important;
    }

    /* Show mobile menu toggle */
    .mobile-menu-toggle {
        display: flex !important;
    }

    /* Stats grid - single column on mobile */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    /* Stat cards - smaller on mobile */
    .stat-card {
        padding: 15px;
    }

    .stat-icon {
        font-size: 2rem;
        width: 50px;
        height: 50px;
    }

    .stat-value {
        font-size: 1.8rem;
    }

    /* Cards - full width */
    .card {
        border-radius: var(--radius-lg);
        margin-bottom: 15px;
    }

    .card-header {
        padding: 15px;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .card-header .btn {
        width: 100%;
    }

    .card-body {
        padding: 15px;
    }

    /* Page header - mobile */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 15px;
        background: var(--bg-secondary);
        margin: -15px -15px 15px -15px;
        border-radius: 0;
        box-shadow: var(--shadow-sm);
    }

    .page-title {
        font-size: 1.3rem;
    }

    /* Tables - scrollable on mobile */
    .table-responsive,
    .table-container {
        border-radius: var(--radius-md);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table {
        min-width: 600px;
    }

    .table th,
    .table td {
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    /* Modal - full width on mobile */
    .modal-overlay {
        padding: 15px;
        align-items: center;
        /* Ensure vertical centering */
        justify-content: center;
    }

    .modal {
        width: 90% !important;
        max-width: 90% !important;
        max-height: 85vh !important;
        border-radius: var(--radius-xl) !important;
        margin: 0 !important;
        /* Managed by flexbox parent */
    }

    .modal-header {
        padding: 15px 20px;
    }

    .modal-body {
        padding: 20px;
        max-height: 60vh;
        overflow-y: auto;
    }

    .modal-footer {
        padding: 15px 20px;
    }

    /* Buttons - larger touch targets */
    .btn {
        min-height: 44px;
        padding: 10px 18px;
    }

    .btn-sm {
        min-height: 38px;
    }

    /* Form controls */
    .form-control {
        min-height: 44px;
        padding: 10px 14px;
    }

    /* Welcome banner - mobile */
    .welcome-banner {
        padding: 20px;
        flex-direction: column;
        text-align: center;
    }

    .welcome-banner h1 {
        font-size: 1.5rem;
    }
}

/* ========== SMALL MOBILE (Below 480px) ========== */
@media screen and (max-width: 480px) {
    .main-content {
        padding: 10px !important;
        padding-top: 75px !important;
    }

    .card {
        border-radius: var(--radius-md);
    }

    .card-header,
    .card-body {
        padding: 12px;
    }

    .stat-card {
        padding: 12px;
    }

    .stat-icon {
        font-size: 1.8rem;
        width: 45px;
        height: 45px;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .btn {
        font-size: 0.9rem;
    }
}

/* ========== BUTTON PRESS EFFECTS ========== */
.btn:active,
button:active {
    transform: scale(0.97);
}

/* ========== FOCUS STATES ========== */
.btn:focus-visible,
.form-control:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}