/* File: /home2/acoliar2/581tutors/public/assets/css/responsive.css */

/* ==========================================
   581 Tutors - Responsive Design
   Phase 8: Frontend Development
   Mobile-First Approach
   ========================================== */

/* ==========================================
   Breakpoints
   ========================================== */
/*
   xs: < 576px (Mobile)
   sm: >= 576px (Mobile landscape)
   md: >= 768px (Tablet)
   lg: >= 992px (Desktop)
   xl: >= 1200px (Large Desktop)
   xxl: >= 1400px (Extra Large Desktop)
*/

/* ==========================================
   Base Mobile Styles (< 576px)
   ========================================== */

/* Typography adjustments for mobile */
@media (max-width: 575.98px) {
    html {
        font-size: 14px;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.125rem; }
    h6 { font-size: 1rem; }
    
    /* Container padding */
    .container,
    .container-fluid {
        padding: 0 1rem;
    }
    
    /* Grid adjustments */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
    
    /* Button adjustments */
    .btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
    
    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
    
    /* Card adjustments */
    .card-body {
        padding: 1rem;
    }
    
    /* Form adjustments */
    .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Table responsive */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Hide elements on mobile */
    .d-none-mobile {
        display: none !important;
    }
}

/* ==========================================
   Small devices (>= 576px)
   ========================================== */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
    
    .grid-sm-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-sm-3 { grid-template-columns: repeat(3, 1fr); }
    
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
}

/* ==========================================
   Medium devices (>= 768px) - Tablets
   ========================================== */
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
    
    .container {
        max-width: 720px;
    }
    
    /* Grid responsive */
    .grid-md-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-md-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-md-4 { grid-template-columns: repeat(4, 1fr); }
    
    /* Display utilities */
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
    
    /* Navigation adjustments */
    .navbar-collapse {
        display: flex !important;
        flex-direction: row;
    }
    
    /* Card grid */
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================
   Large devices (>= 992px) - Desktops
   ========================================== */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
    
    /* Grid responsive */
    .grid-lg-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-lg-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-lg-4 { grid-template-columns: repeat(4, 1fr); }
    
    /* Display utilities */
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
    
    /* Card grid */
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Dashboard layouts */
    .dashboard-grid {
        grid-template-columns: 250px 1fr;
    }
}

/* ==========================================
   Extra large devices (>= 1200px)
   ========================================== */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    /* Grid responsive */
    .grid-xl-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-xl-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-xl-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-xl-5 { grid-template-columns: repeat(5, 1fr); }
    
    /* Display utilities */
    .d-xl-none { display: none !important; }
    .d-xl-block { display: block !important; }
    .d-xl-flex { display: flex !important; }
    
    /* Card grid */
    .card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================
   Component-Specific Responsive Styles
   ========================================== */

/* Navigation */
@media (max-width: 991.98px) {
    .navbar {
        flex-wrap: wrap;
    }
    
    .navbar-collapse {
        display: none;
        width: 100%;
        flex-direction: column;
    }
    
    .navbar-collapse.show {
        display: flex;
    }
    
    .navbar-nav {
        flex-direction: column;
        width: 100%;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
    }
    
    .navbar-toggler {
        display: block;
    }
}

@media (min-width: 992px) {
    .navbar-toggler {
        display: none;
    }
}

/* Sidebar */
@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: -300px;
        width: 300px;
        height: 100vh;
        transition: left 0.3s ease;
        z-index: 1000;
    }
    
    .sidebar.show {
        left: 0;
    }
    
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        z-index: 999;
    }
    
    .sidebar-overlay.show {
        display: block;
    }
}

/* Modals */
@media (max-width: 767.98px) {
    .modal {
        width: 95%;
        max-width: 95%;
    }
    
    .modal-content {
        max-height: 90vh;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }
}

/* Tables */
@media (max-width: 767.98px) {
    /* Stack table cells on mobile */
    .table-responsive-stack thead {
        display: none;
    }
    
    .table-responsive-stack tbody,
    .table-responsive-stack tr,
    .table-responsive-stack td {
        display: block;
        width: 100%;
    }
    
    .table-responsive-stack tr {
        margin-bottom: 1rem;
        border: 1px solid var(--gray-200);
        border-radius: 0.5rem;
        padding: 1rem;
    }
    
    .table-responsive-stack td {
        text-align: right;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--gray-100);
    }
    
    .table-responsive-stack td:last-child {
        border-bottom: none;
    }
    
    .table-responsive-stack td::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        color: var(--gray-700);
    }
}

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

/* Cards */
@media (max-width: 575.98px) {
    .card-horizontal {
        flex-direction: column;
    }
    
    .card-horizontal .card-img {
        width: 100%;
        height: 200px;
    }
}

/* Buttons */
@media (max-width: 575.98px) {
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .btn-group .btn:last-child {
        margin-bottom: 0;
    }
}

/* Dashboard */
@media (max-width: 991.98px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-sidebar {
        display: none;
    }
    
    .dashboard-sidebar.mobile-show {
        display: block;
    }
}

/* ==========================================
   Touch Device Optimizations
   ========================================== */

/* Increase tap targets for touch devices */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .nav-link,
    .form-control,
    .custom-control-label {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .btn:hover,
    .card:hover,
    a:hover {
        transform: none;
    }
    
    /* Add active states for better feedback */
    .btn:active {
        transform: scale(0.98);
    }
}

/* ==========================================
   Print Styles
   ========================================== */

@media print {
    /* Hide non-essential elements */
    .no-print,
    .navbar,
    .sidebar,
    .btn,
    .alert,
    .modal,
    .tooltip,
    .popover {
        display: none !important;
    }
    
    /* Optimize for printing */
    body {
        background: white;
        color: black;
        font-size: 12pt;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
    }
    
    /* Expand elements */
    .card,
    .table {
        page-break-inside: avoid;
    }
    
    /* Show links */
    a[href]:after {
        content: " (" attr(href) ")";
    }
}

/* ==========================================
   Accessibility - Reduced Motion
   ========================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================
   Dark Mode Support (Future-ready)
   ========================================== */

@media (prefers-color-scheme: dark) {
    .dark-mode-auto {
        /* Dark mode styles would go here */
        /* Implement when needed */
    }
}

/* ==========================================
   High DPI / Retina Display
   ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
    /* High-resolution optimizations */
    .logo,
    .icon {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ==========================================
   Landscape Orientation
   ========================================== */

@media (max-width: 767.98px) and (orientation: landscape) {
    /* Optimize for landscape on mobile */
    .modal {
        max-height: 90vh;
    }
    
    .full-height-mobile {
        min-height: auto;
    }
    
    /* Reduce vertical spacing */
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* ==========================================
   Utility Classes - Responsive Spacing
   ========================================== */

/* Hide/Show utilities */
.visible-xs { display: none !important; }
@media (max-width: 575.98px) {
    .visible-xs { display: block !important; }
    .hidden-xs { display: none !important; }
}

.visible-sm { display: none !important; }
@media (min-width: 576px) and (max-width: 767.98px) {
    .visible-sm { display: block !important; }
    .hidden-sm { display: none !important; }
}

.visible-md { display: none !important; }
@media (min-width: 768px) and (max-width: 991.98px) {
    .visible-md { display: block !important; }
    .hidden-md { display: none !important; }
}

.visible-lg { display: none !important; }
@media (min-width: 992px) {
    .visible-lg { display: block !important; }
    .hidden-lg { display: none !important; }
}

/* ==========================================
   Performance - Reduce Layout Shifts
   ========================================== */

/* Prevent content jumping */
.img-fluid {
    max-width: 100%;
    height: auto;
}

.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-ratio-1-1 {
    aspect-ratio: 1 / 1;
}

/* Skeleton loading states */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--gray-200) 25%,
        var(--gray-100) 50%,
        var(--gray-200) 75%
    );
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}