/*
 * /assets/css/responsive.css
 * Responsive Styles for FexZoh Marketplace
 * Mobile-First Adjustments
*/

/* --- 1. Tablet & Small Desktop (max-width: 992px) --- */
@media (max-width: 992px) {
    /* Dashboard Layout */
    .dashboard-wrapper {
        flex-direction: column;
    }
    .dashboard-sidebar {
        width: 100%;
        height: auto;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .sidebar-header {
        border-bottom: none;
    }
    .sidebar-header p { display: none; }
    .sidebar-nav {
        flex-grow: 0;
    }
    .sidebar-nav ul {
        display: flex;
        padding: 0;
    }
    .sidebar-nav ul li a {
        border-left: none;
        border-bottom: 4px solid transparent;
        padding: 15px;
    }
     .sidebar-nav ul li.active a {
        border-left-color: transparent;
        border-bottom-color: #16a085;
    }
    .dashboard-content {
        width: 100%;
    }

    /* Layout Grids */
    .cart-container,
    .checkout-layout,
    .product-details-container {
        grid-template-columns: 1fr;
    }
    .order-summary {
        grid-row: 1; /* Moves summary to top on checkout */
    }
}

/* --- 2. Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
    /* General Content */
    .page-container, .content-wrapper {
        padding: 20px 15px;
    }

    /* Mobile Navigation */
    .nav-links-container {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width: 80%;
        height: 100vh;
        background: #fff;
        z-index: 1000;
        padding: 80px 30px;
        transform: translateX(100%);
        transition: transform 350ms ease-out;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }
    .nav-links-container[data-visible="true"] {
        transform: translateX(0%);
    }
    .nav-links-container ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .nav-links-container ul a {
        font-size: 18px;
    }

    .mobile-nav-toggle {
        display: block;
        position: relative; /* Changed from absolute for easier management */
        z-index: 1001;
        background: transparent;
        border: 0;
        cursor: pointer;
        padding: 10px;
    }
    .mobile-nav-toggle .icon-bar {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--text-color);
        margin: 5px 0;
        transition: transform 0.3s ease;
    }
    /* Hamburger animation to "X" */
    .mobile-nav-toggle[aria-expanded="true"] .icon-bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .mobile-nav-toggle[aria-expanded="true"] .icon-bar:nth-child(2) {
        opacity: 0;
    }
    .mobile-nav-toggle[aria-expanded="true"] .icon-bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }


    /* Homepage */
    .hero-section { padding: 60px 15px; }
    .hero-content { padding: 25px; }
    .hero-content h1 { font-size: 32px; }
    .hero-content p { font-size: 16px; }
    .hero-content form { flex-direction: column; gap: 10px; }
    .hero-content form .btn, .hero-content form input {
        border-radius: 6px !important;
    }

    /* Forms */
    .form-container, .modern-form {
        padding: 20px;
    }

    /* Dashboard */
    .dashboard-header { padding: 15px; }
    .dashboard-main-content { padding: 20px; }
    .sidebar-nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    .sidebar-nav ul li a {
        padding: 10px;
        font-size: 14px;
    }
    
    /* Tables */
    /* A better approach for mobile tables: Block display */
    .table-container {
        box-shadow: none;
        border-top: 1px solid var(--border-color);
    }
    table, thead, tbody, th, td, tr {
        display: block;
    }
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    tr {
        border: 1px solid var(--border-color);
        margin-bottom: 15px;
        border-radius: var(--border-radius);
        overflow: hidden;
    }
    td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        text-align: right;
    }
    td:before {
        position: absolute;
        left: 10px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        content: attr(data-label); /* Use data-label for headers */
    }
    /* You'll need to add data-label attributes to your td elements in PHP */
    /* Example: <td data-label="Price">$10.00</td> */

    .action-links {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }
}

/* --- Utility for screen readers --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}