/* ============================================
   Responsive CSS - Media Queries
   CMS UI Prototype
   Breakpoints:
     Mobile:  < 768px
     Tablet:  768px - 1199px
     Desktop: 1200px+
   ============================================ */

/* --- Mobile First Base (applies to all sizes) --- */

.container {
    width: 100%;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* --- Mobile (< 768px) --- */
@media screen and (max-width: 767px) {
    /* Typography scaling */
    h1 {
        font-size: var(--font-size-2xl);
    }

    h2 {
        font-size: var(--font-size-xl);
    }

    h3 {
        font-size: var(--font-size-lg);
    }

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

    /* Container */
    .container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }

    /* Navigation */
    .nav-top {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-menu {
        flex-direction: column;
        gap: 0;
    }

    .nav-toggle {
        display: block;
    }

    .nav-menu.is-open {
        display: flex;
    }

    .nav-menu:not(.is-open) {
        display: none;
    }

    /* Header */
    .site-header {
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    .site-header .logo {
        text-align: center;
    }

    /* Country selector */
    .country-selector {
        justify-content: center;
    }

    /* Sidebar - stack below content */
    .layout-with-sidebar {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        order: -1;
        margin-bottom: var(--spacing-md);
    }

    .main-content {
        width: 100%;
    }

    /* Admin sidebar */
    .admin-layout {
        flex-direction: column;
    }

    .admin-sidebar {
        width: 100%;
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-gray-200);
    }

    .admin-sidebar.is-collapsed {
        display: none;
    }

    .admin-sidebar-toggle {
        display: block;
    }

    .admin-main {
        width: 100%;
        margin-left: 0;
    }

    /* Tables become scrollable */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 600px;
    }

    /* Cards */
    .card-grid {
        grid-template-columns: 1fr;
    }

    /* Product grid */
    .product-grid {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .site-footer .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .site-footer .footer-links {
        justify-content: center;
    }

    /* Modals */
    .modal-dialog {
        width: 95%;
        margin: var(--spacing-sm);
        max-height: 90vh;
    }

    .modal-dialog.modal-lg {
        width: 95%;
    }

    /* Forms */
    .form-row {
        flex-direction: column;
    }

    .form-row .form-group {
        width: 100%;
    }

    .form-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .form-actions .btn {
        width: 100%;
    }

    /* Dashboard widgets */
    .dashboard-widgets {
        grid-template-columns: 1fr;
    }

    /* Tabs - scrollable */
    .tabs-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    .tab-item {
        flex-shrink: 0;
    }

    /* Banner carousel */
    .carousel {
        height: 250px;
    }

    .carousel-caption {
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm);
    }

    /* Pagination */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: var(--font-size-xs);
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Image upload */
    .image-upload-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Notification */
    .notification {
        left: var(--spacing-sm);
        right: var(--spacing-sm);
        width: auto;
    }

    /* Spacing adjustments */
    .section {
        padding: var(--spacing-lg) 0;
    }

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

/* --- Tablet (768px - 1199px) --- */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    /* Typography */
    h1 {
        font-size: var(--font-size-3xl);
    }

    /* Container */
    .container {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

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

    .grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Navigation - horizontal but compact */
    .nav-toggle {
        display: none;
    }

    .nav-menu {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .nav-menu a {
        font-size: var(--font-size-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    /* Layout with sidebar */
    .layout-with-sidebar {
        flex-direction: row;
    }

    .sidebar {
        width: 220px;
        flex-shrink: 0;
    }

    .main-content {
        flex: 1;
        min-width: 0;
    }

    /* Admin layout */
    .admin-layout {
        flex-direction: row;
    }

    .admin-sidebar {
        width: 220px;
    }

    .admin-sidebar-toggle {
        display: none;
    }

    .admin-main {
        margin-left: 220px;
        width: calc(100% - 220px);
    }

    /* Product grid */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Card grid */
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Dashboard widgets */
    .dashboard-widgets {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer grid */
    .site-footer .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Modal */
    .modal-dialog {
        width: 80%;
        max-width: 700px;
    }

    .modal-dialog.modal-lg {
        width: 85%;
        max-width: 900px;
    }

    /* Banner carousel */
    .carousel {
        height: 350px;
    }

    /* Image upload */
    .image-upload-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Tables */
    .table-responsive {
        overflow-x: auto;
    }

    /* Spacing */
    .section {
        padding: var(--spacing-xl) 0;
    }

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

/* --- Desktop (1200px+) --- */
@media screen and (min-width: 1200px) {
    /* Container */
    .container {
        max-width: var(--container-max-width);
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    /* Navigation */
    .nav-toggle {
        display: none;
    }

    .nav-menu {
        display: flex;
        gap: var(--spacing-sm);
    }

    /* Layout with sidebar */
    .layout-with-sidebar {
        flex-direction: row;
    }

    .sidebar {
        width: var(--sidebar-width);
        flex-shrink: 0;
    }

    .main-content {
        flex: 1;
        min-width: 0;
    }

    /* Admin layout */
    .admin-layout {
        flex-direction: row;
    }

    .admin-sidebar {
        width: var(--sidebar-width);
        position: fixed;
        top: var(--admin-header-height);
        left: 0;
        bottom: 0;
        overflow-y: auto;
        border-right: 1px solid var(--color-gray-200);
    }

    .admin-sidebar-toggle {
        display: none;
    }

    .admin-main {
        margin-left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
    }

    /* Product grid */
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Card grid */
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Grid */
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    /* Dashboard widgets */
    .dashboard-widgets {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Footer grid */
    .site-footer .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Modal */
    .modal-dialog {
        width: 600px;
    }

    .modal-dialog.modal-lg {
        width: 900px;
    }

    .modal-dialog.modal-sm {
        width: 400px;
    }

    /* Banner carousel */
    .carousel {
        height: 450px;
    }

    /* Image upload */
    .image-upload-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Spacing */
    .section {
        padding: var(--spacing-2xl) 0;
    }

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

/* --- Print Styles --- */
@media print {
    body {
        color: var(--color-black);
        background: var(--color-white);
    }

    .nav-top,
    .nav-toggle,
    .admin-sidebar,
    .site-footer,
    .carousel,
    .pagination,
    .btn,
    .notification,
    .modal-backdrop {
        display: none !important;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    a {
        color: var(--color-black);
        text-decoration: underline;
    }

    .card {
        box-shadow: none;
        border: 1px solid var(--color-gray-300);
    }

    img {
        max-width: 100% !important;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }

    table {
        page-break-inside: avoid;
    }
}

/* --- 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;
    }

    .carousel {
        animation: none;
    }
}

/* --- High Contrast Mode Support --- */
@media (forced-colors: active) {
    .btn {
        border: 1px solid ButtonText;
    }

    .card {
        border: 1px solid CanvasText;
    }

    .form-control {
        border: 1px solid CanvasText;
    }
}