/**
 * Mobile Responsive Stylesheet - İngilizce Atölyem
 * Version: 1.0
 * Purpose: Comprehensive mobile responsiveness with app-like feel
 * Breakpoints: 1024px (tablet), 768px (large mobile), 480px (small mobile)
 */

/* ============================================
   GLOBAL MOBILE OPTIMIZATIONS
   ============================================ */

/* Prevent horizontal scroll globally */
html {
    overflow-x: hidden !important;
    max-width: 100vw;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

/* Responsive media elements */
img,
video,
iframe,
embed,
object {
    max-width: 100% !important;
    height: auto !important;
}

/* Word breaking for long text/URLs */
.admin-main,
.glass-card,
.modal-body,
.panel-card,
.teacher-item,
.user-row {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Touch-friendly tap targets (minimum 44x44px) */
@media (max-width: 768px) {

    button,
    a,
    input[type="submit"],
    input[type="button"],
    .btn,
    .btn-sm,
    .tab-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }

    /* Smooth scrolling for app-like feel */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    /* Disable text selection for app-like feel (optional) */
    * {
        -webkit-tap-highlight-color: rgba(37, 99, 235, 0.1);
    }
}

/* ============================================
   TABLET OPTIMIZATIONS (max-width: 1024px)
   ============================================ */

@media (max-width: 1024px) {

    /* Reduce container padding */
    .container {
        padding: 0 15px;
    }

    /* Dashboard grids - 2 columns on tablet */
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    /* Content grid - stack on tablet */
    .content-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ============================================
   ADMIN PANEL MOBILE (max-width: 1024px)
   ============================================ */

@media (max-width: 1024px) {

    /* Admin sidebar - transform to mobile drawer */
    .admin-sidebar {
        position: fixed;
        left: -250px;
        top: 0;
        height: 100vh;
        width: 250px;
        z-index: 9999;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }

    .admin-sidebar.active {
        left: 0;
    }

    /* Admin main content - full width on mobile */
    .admin-main {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 15px !important;
    }

    /* Hamburger menu is created by JavaScript in mobile-nav.js */
    /* Removed .admin-main::before to prevent conflicts */

    /* Overlay for sidebar */
    body::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    body.admin-sidebar-open::after {
        opacity: 1;
        visibility: visible;
    }

    /* Adjust admin heading - removed margin-left since hamburger is positioned absolutely */
    .admin-main h1 {
        margin-left: 0;
    }
}

/* ============================================
   MOBILE OPTIMIZATIONS (max-width: 768px)
   ============================================ */

@media (max-width: 768px) {
    /* ===== GLOBAL ===== */

    /* Hero section - single column */
    .hero {
        padding-top: 100px;
        min-height: auto;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
        margin: 0 auto 2rem auto;
    }

    .hero-image {
        order: -1;
        /* Show image before text on mobile */
        margin-bottom: 2rem;
    }

    .hero-image img {
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        max-height: 300px;
        object-fit: cover;
    }

    /* ===== HEADER / NAVIGATION ===== */

    /* Public header */
    header {
        padding: 0.75rem 0;
    }

    nav {
        flex-wrap: wrap;
    }

    .logo {
        font-size: 1.2rem;
    }

    /* Teacher/Student panel hamburger button - ensure visibility */
    .ia-hamburger-btn {
        display: block !important;
        background: none;
        border: none;
        color: #334155;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 8px;
        margin-right: 10px;
        min-width: 44px;
        min-height: 44px;
    }

    .ia-hamburger-btn:hover {
        color: #2563eb;
    }

    /* Navigation links - hamburger menu */
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: white;
        flex-direction: column;
        padding: 80px 20px 20px;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        z-index: 9999;
        transition: right 0.3s ease;
        gap: 0;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links li {
        width: 100%;
        padding: 0;
        margin-bottom: 5px;
    }

    .nav-links a {
        display: block;
        padding: 15px;
        border-radius: 8px;
        transition: background 0.2s;
    }

    .nav-links a:hover {
        background: #f1f5f9;
    }

    /* Dropdown menu - toggle on mobile with click */
    .dropdown-menu {
        position: static;
        visibility: hidden;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 0;
        min-width: auto;
        background: transparent;
        transition: all 0.3s ease;
    }

    /* Show dropdown when parent has active class */
    .nav-links li.dropdown-active .dropdown-menu {
        visibility: visible !important;
        opacity: 1 !important;
        max-height: 500px !important;
        padding: 10px 0 10px 20px !important;
        display: block !important;
    }

    /* Make dropdown links fully clickable */
    .dropdown-menu a {
        position: relative !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
        display: block !important;
        padding: 14px 16px !important;
        background: #f8fafc !important;
        margin-bottom: 6px !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(37, 99, 235, 0.2) !important;
        touch-action: manipulation !important;
        color: #002333 !important;
        font-weight: 500 !important;
    }

    .dropdown-menu a:active {
        background: #e2e8f0;
    }

    /* Make dropdown parent clickable */
    .nav-links>li>a {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(37, 99, 235, 0.1);
    }

    /* Header buttons - stack */
    .nav-links .btn-login,
    .nav-links .btn-register {
        width: 100%;
        text-align: center;
        justify-content: center;
        margin-top: 10px;
    }

    /* Sub-header (quick-nav) */
    .sub-header {
        top: 60px;
        padding: 8px 0;
    }

    .quick-nav {
        justify-content: flex-start;
        padding: 5px 10px;
    }

    .quick-nav a {
        padding: 8px 15px;
        font-size: 0.85rem;
    }

    /* ===== GRIDS & LAYOUTS ===== */

    /* Dashboard grids - single column */
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-bottom: 20px;
    }

    /* Services grid - single column */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        /* Increased from 15px */
    }

    /* Service cards - enhanced for mobile */
    .service-card {
        padding: 25px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%);
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .service-card:active {
        transform: scale(0.98);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    .service-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Content grid - single column */
    .content-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Homework grid - single column */
    .hw-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* ===== CARDS ===== */

    .glass-card,
    .panel-card {
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 12px;
    }

    .stat-card {
        padding: 20px;
    }

    /* ===== TABLES ===== */

    /* Table containers - horizontal scroll */
    .admin-main table,
    .panel-card table,
    table {
        font-size: 0.8rem;
    }

    .admin-main table th,
    .admin-main table td,
    .panel-card table th,
    .panel-card table td {
        padding: 10px 12px !important;
    }

    /* Ensure table wrapper has scroll */
    div[style*="overflow-x: auto"] {
        -webkit-overflow-scrolling: touch;
    }

    /* Hide non-critical table columns on mobile */
    .admin-main table th:nth-child(1),
    .admin-main table td:nth-child(1) {
        /* Keep ID visible but smaller */
        font-size: 0.7rem;
    }

    /* ===== FORMS ===== */

    /* Form groups - stack */
    .form-group {
        margin-bottom: 15px;
    }

    .form-control {
        width: 100% !important;
        font-size: 16px;
        /* Prevent iOS zoom on focus */
        padding: 12px;
    }

    /* Inline forms - stack */
    .panel-header form {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .panel-header form input,
    .panel-header form select,
    .panel-header form button {
        width: 100% !important;
        min-width: auto !important;
    }

    /* Filter forms in admin */
    .panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .panel-header>div {
        width: 100%;
    }

    /* ===== TABS ===== */

    .tab-nav,
    .tabs-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding-bottom: 5px;
    }

    .tab-nav::-webkit-scrollbar,
    .tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        font-size: 0.85rem;
        padding: 10px 15px;
        white-space: nowrap;
    }

    /* ===== MODALS ===== */

    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10% auto;
        padding: 20px;
    }

    .modal-box {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90vh;
    }

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

    .modal-body {
        padding: 20px;
    }

    .modal-title {
        font-size: 1.2rem;
    }

    /* Modal actions - stack */
    .modal-actions {
        flex-direction: column;
        gap: 10px;
    }

    .modal-actions a,
    .modal-actions button {
        width: 100%;
        justify-content: center;
    }

    /* ===== BUTTONS ===== */

    .btn {
        padding: 12px 20px;
        font-size: 0.95rem;
    }

    .btn-sm {
        padding: 10px 15px;
        font-size: 0.85rem;
    }

    /* Button groups - wrap or stack */
    .panel-header>div:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    /* ===== FOOTER ===== */

    footer {
        padding: 2rem 0;
        margin-top: 3rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* ===== ADMIN SPECIFIC ===== */

    /* Admin main padding adjustment */
    .admin-main {
        padding: 60px 15px 15px !important;
    }

    /* Teacher list items */
    .teacher-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Request items */
    .req-item {
        padding: 12px;
    }

    .req-actions {
        flex-wrap: wrap;
    }
}

/* ============================================
   SMALL MOBILE OPTIMIZATIONS (max-width: 480px)
   ============================================ */

@media (max-width: 480px) {

    /* Further reduce padding */
    .container {
        padding: 0 10px;
    }

    .admin-main {
        padding: 60px 10px 10px !important;
    }

    .glass-card,
    .panel-card {
        padding: 15px;
    }

    /* Hero text size */
    .hero h1 {
        font-size: 1.75rem;
    }

    .hero p {
        font-size: 0.95rem;
    }

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

    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .stat-info h3 {
        font-size: 1.5rem;
    }

    .stat-info p {
        font-size: 0.85rem;
    }

    /* Tables - even smaller */
    table {
        font-size: 0.75rem;
    }

    .admin-main table th,
    .admin-main table td {
        padding: 8px 10px !important;
    }

    /* Buttons - full width */
    .btn,
    .btn-primary,
    .btn-outline {
        width: 100%;
        justify-content: center;
    }

    /* Modal - full screen feel */
    .modal-content,
    .modal-box {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    /* Tab buttons - smaller */
    .tab-btn {
        font-size: 0.8rem;
        padding: 8px 12px;
    }

    /* Form inputs - larger for touch */
    .form-control {
        padding: 14px;
        font-size: 16px;
    }
}

/* ============================================
   ADMIN SIDEBAR TOGGLE FUNCTIONALITY
   ============================================ */

/* This requires minimal JavaScript to toggle .active class */
/* Add this script to admin pages:

<script>
document.addEventListener('DOMContentLoaded', function() {
    const sidebar = document.querySelector('.admin-sidebar');
    const hamburger = document.querySelector('.admin-main::before');
    
    // Create hamburger button
    if (window.innerWidth <= 1024 && sidebar) {
        const btn = document.createElement('button');
        btn.className = 'admin-hamburger';
        btn.innerHTML = '<i class="fas fa-bars"></i>';
        btn.style.cssText = 'position:fixed;top:15px;left:15px;z-index:1000;background:#2563eb;color:white;width:44px;height:44px;border-radius:8px;border:none;cursor:pointer;box-shadow:0 4px 10px rgba(37,99,235,0.3);font-size:1.2rem;';
        document.body.appendChild(btn);
        
        btn.addEventListener('click', function() {
            sidebar.classList.toggle('active');
            document.body.classList.toggle('admin-sidebar-open');
        });
        
        // Close on overlay click
        document.body.addEventListener('click', function(e) {
            if (e.target === document.body && sidebar.classList.contains('active')) {
                sidebar.classList.remove('active');
                document.body.classList.remove('admin-sidebar-open');
            }
        });
    }
});
</script>

*/

/* ============================================
   PUBLIC HEADER HAMBURGER TOGGLE
   ============================================ */

/* This requires minimal JavaScript to toggle .active class on .nav-links */
/* Add this script to public pages:

<script>
document.addEventListener('DOMContentLoaded', function() {
    const navLinks = document.querySelector('.nav-links');
    
    if (window.innerWidth <= 768 && navLinks) {
        // Create hamburger button
        const btn = document.createElement('button');
        btn.className = 'nav-hamburger';
        btn.innerHTML = '<i class="fas fa-bars"></i>';
        btn.style.cssText = 'background:none;border:none;font-size:1.5rem;color:var(--text-color);cursor:pointer;padding:8px;';
        
        const nav = document.querySelector('nav');
        nav.appendChild(btn);
        
        btn.addEventListener('click', function() {
            navLinks.classList.toggle('active');
        });
        
        // Close on link click
        navLinks.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', function() {
                navLinks.classList.remove('active');
            });
        });
    }
});
</script>

*/

/* ============================================
   APP-LIKE ENHANCEMENTS
   ============================================ */

@media (max-width: 768px) {

    /* Disable pull-to-refresh on mobile browsers */
    body {
        overscroll-behavior-y: contain;
    }

    /* Safe area insets for notched devices (iPhone X+) */
    @supports (padding: max(0px)) {
        body {
            padding-left: max(0px, env(safe-area-inset-left));
            padding-right: max(0px, env(safe-area-inset-right));
        }

        .admin-main,
        .container {
            padding-left: max(15px, env(safe-area-inset-left));
            padding-right: max(15px, env(safe-area-inset-right));
        }
    }

    /* Smooth animations for app-like feel */
    * {
        transition-duration: 0.2s;
        transition-timing-function: ease-out;
    }

    /* Card hover effects - disabled on mobile for performance */
    .service-card:hover,
    .hw-card:hover {
        transform: none;
    }

    /* Focus styles for accessibility */
    button:focus,
    a:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }
}

/* ============================================
   LANDSCAPE MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {

    /* Reduce vertical padding in landscape */
    .hero {
        padding-top: 80px;
        min-height: 60vh;
    }

    .admin-main {
        padding-top: 50px !important;
    }

    /* Modals - reduce height */
    .modal-content,
    .modal-box {
        max-height: 85vh;
    }
}

/* ============================================
   PRINT STYLES (Preserve existing)
   ============================================ */

@media print {

    /* Hide navigation and sidebars */
    .admin-sidebar,
    .ia-sidebar,
    header,
    .nav-hamburger,
    .admin-hamburger {
        display: none !important;
    }

    /* Full width for content */
    .admin-main {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Ensure tables print properly */
    table {
        page-break-inside: avoid;
    }
}