/**
 * MangaMAC - Responsive Styles
 * Mobile-First Responsive Design
 */

/* ============================================
   Breakpoints
   ============================================ */
/* 
   xs: 0-575px (Mobile)
   sm: 576px-767px (Mobile Landscape)
   md: 768px-991px (Tablet)
   lg: 992px-1199px (Desktop)
   xl: 1200px+ (Large Desktop)
*/

/* ============================================
   Mobile First (Default: xs)
   ============================================ */

/* Grid adjustments for mobile */
.grid-2,
.grid-3,
.grid-4 {
    grid-template-columns: 1fr;
}

/* Navigation for mobile */
.nav-menu {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    flex-direction: column;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
}

.nav-menu.active {
    display: flex;
}

.menu-toggle {
    display: flex;
}

/* Card adjustments */
.card-img {
    height: 250px;
}

/* Typography adjustments */
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

/* ============================================
   Small Devices (sm: 576px+)
   ============================================ */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
    
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .card-img {
        height: 280px;
    }
    
    h1 { font-size: 2.25rem; }
}

/* ============================================
   Medium Devices (md: 768px+)
   ============================================ */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
    
    /* Show desktop navigation */
    .nav-menu {
        display: flex;
        position: static;
        flex-direction: row;
        padding: 0;
        border: none;
        box-shadow: none;
        background: transparent;
    }
    
    .menu-toggle {
        display: none;
    }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .card-img {
        height: 300px;
    }
    
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
}

/* ============================================
   Large Devices (lg: 992px+)
   ============================================ */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .card-img {
        height: 320px;
    }
}

/* ============================================
   Extra Large Devices (xl: 1200px+)
   ============================================ */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .card-img {
        height: 350px;
    }
}

/* ============================================
   Responsive Utilities
   ============================================ */

/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 992px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: block;
}

@media (min-width: 768px) {
    .show-mobile {
        display: none !important;
    }
}

/* Show only on tablet */
.show-tablet {
    display: none;
}

@media (min-width: 768px) and (max-width: 991px) {
    .show-tablet {
        display: block !important;
    }
}

/* Show only on desktop */
.show-desktop {
    display: none;
}

@media (min-width: 992px) {
    .show-desktop {
        display: block !important;
    }
}

/* ============================================
   Responsive Text Alignment
   ============================================ */
@media (max-width: 767px) {
    .text-mobile-center {
        text-align: center;
    }
    
    .text-mobile-left {
        text-align: left;
    }
    
    .text-mobile-right {
        text-align: right;
    }
}

/* ============================================
   Responsive Spacing
   ============================================ */
@media (max-width: 767px) {
    .container,
    .container-fluid {
        padding: 0 var(--spacing-sm);
    }
    
    .p-mobile-1 { padding: var(--spacing-sm); }
    .p-mobile-2 { padding: var(--spacing-md); }
    
    .mt-mobile-1 { margin-top: var(--spacing-sm); }
    .mt-mobile-2 { margin-top: var(--spacing-md); }
    
    .mb-mobile-1 { margin-bottom: var(--spacing-sm); }
    .mb-mobile-2 { margin-bottom: var(--spacing-md); }
}

/* ============================================
   Responsive Manga Reader
   ============================================ */
@media (max-width: 767px) {
    .manga-reader {
        padding: 0;
    }
    
    .manga-page {
        width: 100%;
        height: auto;
    }
    
    .reader-controls {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: var(--spacing-md);
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(10px);
    }
}

/* ============================================
   Responsive Forms
   ============================================ */
@media (max-width: 767px) {
    .form-row {
        flex-direction: column;
    }
    
    .form-group {
        width: 100%;
    }
    
    .btn {
        width: 100%;
    }
}

/* ============================================
   Responsive Cards
   ============================================ */
@media (max-width: 575px) {
    .card {
        margin-bottom: var(--spacing-md);
    }
    
    .card-body {
        padding: var(--spacing-md);
    }
}

/* ============================================
   Responsive Modal
   ============================================ */
@media (max-width: 767px) {
    .modal-content {
        width: 95%;
        margin: var(--spacing-md);
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: var(--spacing-md);
    }
}

/* ============================================
   Responsive Tables
   ============================================ */
@media (max-width: 767px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        font-size: 0.875rem;
    }
    
    th, td {
        padding: var(--spacing-sm);
    }
}

/* ============================================
   Responsive Admin Panel
   ============================================ */
@media (max-width: 991px) {
    .admin-sidebar {
        position: fixed;
        left: -250px;
        top: 70px;
        bottom: 0;
        width: 250px;
        transition: left 0.3s ease;
        z-index: var(--z-fixed);
    }
    
    .admin-sidebar.active {
        left: 0;
    }
    
    .admin-content {
        margin-left: 0;
    }
}

/* ============================================
   Responsive Footer
   ============================================ */
@media (max-width: 767px) {
    .footer {
        padding: var(--spacing-lg) 0;
    }
    
    .footer-links {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

/* ============================================
   Touch Device Optimizations
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .btn,
    .nav-link,
    a {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .hover-lift:hover,
    .hover-scale:hover,
    .hover-glow:hover {
        transform: none;
        box-shadow: none;
    }
    
    /* Simplify animations on touch devices */
    .card:hover {
        transform: none;
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .header,
    .footer,
    .nav-menu,
    .btn,
    .sidebar {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .container {
        max-width: 100%;
    }
    
    a {
        text-decoration: underline;
    }
}

/* ============================================
   Landscape Orientation
   ============================================ */
@media (max-width: 767px) and (orientation: landscape) {
    .header {
        padding: var(--spacing-sm) 0;
    }
    
    .logo {
        font-size: 1.5rem;
    }
    
    .user-avatar {
        width: 35px;
        height: 35px;
    }
}

/* ============================================
   High DPI Displays
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Optimize images for retina displays */
    .card-img,
    .manga-page,
    .cover-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}