/*
 * Wonder Platform - Responsive Design
 * Mobile and tablet optimizations
 * Version: 1.0
 */

/* ============================================
   TABLET (768px - 1024px)
   ============================================ */

@media (max-width: 1024px) {
    /* Reduce padding on containers */
    .container, .container-fluid {
        padding: 0 var(--space-md);
    }

    /* Card adjustments */
    .card-header, .card-body, .card-footer {
        padding: var(--space-md);
    }

    /* Grid adjustments */
    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Typography scale down */
    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }

    /* Button adjustments */
    .btn {
        padding: 0.625rem 1.25rem;
        font-size: var(--text-xs);
    }
}

/* ============================================
   MOBILE (< 768px)
   ============================================ */

@media (max-width: 768px) {
    /* Base font size adjustment */
    html {
        font-size: 14px;
    }

    /* Reduce spacing */
    .container, .container-fluid {
        padding: 0 var(--space-sm);
    }

    /* Card stack vertically */
    .card-header, .card-body, .card-footer {
        padding: var(--space-sm);
    }

    /* Grid to single column */
    .grid-cols-2, .grid-cols-3 {
        grid-template-columns: 1fr;
    }

    /* Flex direction changes */
    .flex-mobile-col {
        flex-direction: column;
    }

    /* Typography mobile */
    h1 { font-size: var(--text-xl); }
    h2 { font-size: var(--text-lg); }
    h3 { font-size: var(--text-base); }

    /* Full width buttons on mobile */
    .btn-mobile-full {
        width: 100%;
    }

    /* Table responsive */
    .data-table {
        font-size: var(--text-sm);
    }

    .data-table th,
    .data-table td {
        padding: 0.5rem;
    }

    /* Hide on mobile */
    .hide-mobile {
        display: none !important;
    }

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

/* ============================================
   MOBILE - LANDSCAPE
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    .card {
        margin-bottom: var(--space-sm);
    }
}

/* ============================================
   LARGE SCREENS (> 1920px)
   ============================================ */

@media (min-width: 1920px) {
    /* Increase container max-width */
    .container {
        max-width: 2560px;
    }

    /* Scale up typography slightly */
    html {
        font-size: 18px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    /* Force light theme for printing */
    :root {
        --bg-primary: #ffffff;
        --bg-secondary: #f8f9fa;
        --text-primary: #1a1a1a;
        --border-subtle: #e0e0e0;
    }

    /* Hide non-essential elements */
    .no-print {
        display: none !important;
    }

    /* Remove shadows and effects */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Ensure backgrounds print */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}