/**
 * Employee Dashboard Mobile-Responsive Styles
 * Optimizes dashboard interface for mobile devices
 */

/* ============================================
   Navigation - Mobile Layout
   ============================================ */
@media (max-width: 768px) {
    /* Only prevent page-wide horizontal overflow */
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* ================================================
       NAVIGATION BAR HEADER - Move user info to right
       Target ONLY the top bar, NOT the dropdown menu
       ================================================ */

    /* The main header flex container (NOT the menu dropdown) */
    nav > div > div.flex.justify-between {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    /* Right section with user info + hamburger (in header, not dropdown) */
    nav > div > div.flex > div.flex.items-center.md\:hidden {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        margin-left: auto !important;
    }

    /* ================================================
       MOBILE MENU DROPDOWN - Hide manager-only sections for employees
       Hide sections that come after Employee Cash Management
       BUT keep Suppliers, Expenses, and Logout visible
       ================================================ */

    /* Hide all sections after cash-receiving by default */
    .md\:hidden.border-t a[href$="/employee/cash-receiving"][class*="pl-6"] ~ div,
    .md\:hidden.border-t a[href$="/employee/cash-receiving"][class*="pl-6"] ~ a {
        display: none !important;
    }

    /* EXCEPTIONS: Show employee-accessible items */
    /* Inventory section header (for all employees+) */
    .md\:hidden.border-t a[href$="/employee/cash-receiving"][class*="pl-6"] ~ div[class*="text-gray-400"][class*="uppercase"] {
        display: block !important;
    }

    /* Suppliers link (employee+) - Higher specificity to override hiding rule */
    .md\:hidden.border-t a[href$="/employee/cash-receiving"][class*="pl-6"] ~ a[href$="/suppliers"][class*="block"][class*="pl-6"] {
        display: block !important;
    }

    /* Expenses link (employee+) - Higher specificity to override hiding rule */
    .md\:hidden.border-t a[href$="/employee/cash-receiving"][class*="pl-6"] ~ a[href$="/expenses"][class*="block"][class*="pl-6"] {
        display: block !important;
    }

    /* CRITICAL: Always show logout link for ALL authenticated users */
    /* Higher specificity to override the hiding rule */
    .md\:hidden.border-t a[href$="/employee/cash-receiving"][class*="pl-6"] ~ a[href$="/logout"][class*="block"][class*="text-red-600"] {
        display: block !important;
    }

    /* Show HR separator before logout - Higher specificity */
    .md\:hidden.border-t a[href$="/employee/cash-receiving"][class*="pl-6"] ~ hr.my-2 {
        display: block !important;
    }
}

/* ============================================
   Mobile Container - Prevent horizontal scroll
   ============================================ */
@media (max-width: 768px) {
    /* Main container full width on mobile */
    main {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .max-w-7xl {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ============================================
   Stats Cards - Full Width Mobile Layout
   ============================================ */
@media (max-width: 768px) {
    /* Stack ALL grids in single column */
    .grid,
    div[class*="grid"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        width: 100% !important;
    }

    /* Make stat cards more compact on mobile */
    .grid > div,
    div[class*="grid"] > div {
        padding: 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Adjust stat card font sizes for mobile */
    .text-3xl,
    .text-4xl {
        font-size: 1.5rem !important;
    }

    .text-2xl {
        font-size: 1.25rem !important;
    }

    .text-xl {
        font-size: 1.125rem !important;
    }
}

/* ============================================
   Recent Activity Table - Mobile Card Layout
   ============================================ */
@media (max-width: 768px) {
    /* Hide table header on mobile */
    table.w-full thead {
        display: none !important;
    }

    /* Convert table to card layout */
    table.w-full,
    table.w-full tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Each row becomes a card */
    table.w-full tbody tr {
        display: block !important;
        margin-bottom: 1rem !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 0.5rem !important;
        padding: 1rem !important;
        background: white !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }

    /* Each cell becomes a labeled row */
    table.w-full tbody td {
        display: block !important;
        text-align: left !important;
        padding: 0.5rem 0 !important;
        border: none !important;
    }

    /* Add labels before each cell */
    table.w-full tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.75rem;
        text-transform: uppercase;
    }

    /* Adjust status badges for mobile */
    table.w-full tbody td span.px-2 {
        display: inline-block !important;
        margin-top: 0.25rem !important;
    }
}

/* ============================================
   Page Layout - Mobile Spacing
   ============================================ */
@media (max-width: 768px) {
    /* Reduce padding on main containers */
    .min-h-screen .py-8 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .min-h-screen .max-w-7xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Reduce margins */
    .mb-8 {
        margin-bottom: 1rem !important;
    }

    .mb-6 {
        margin-bottom: 0.75rem !important;
    }

    /* Page titles smaller on mobile */
    h1.text-3xl {
        font-size: 1.5rem !important; /* 24px */
        line-height: 1.3 !important;
    }

    h2.text-2xl {
        font-size: 1.25rem !important; /* 20px */
    }

    /* Adjust button sizes for mobile */
    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}