/* 
    Daily Stock Mobile Optimization
    This file handles the responsive layout for the Stock Manager on phone sizes.
*/

@media screen and (max-width: 768px) {
    /* 1. Header Adjustments */
    .admin-header {
        flex-direction: column;
        height: auto !important;
        padding: 10px 15px !important;
        gap: 10px;
        align-items: stretch !important;
        border-bottom: 1px solid #f1f5f9;
        margin-bottom: 5px !important;
    }

    .admin-title {
        font-size: 1.2rem !important;
        margin: 0 !important;
    }

    .badge-cat {
        font-size: 0.6rem !important;
    }

    .header-info {
        text-align: left;
    }

    .header-actions {
        flex-direction: column;
        gap: 8px !important;
        width: 100%;
    }

    /* Date inputs and Search to full width */
    .header-actions > div {
        width: 100% !important;
        height: 36px !important; /* Slightly shorter */
    }

    .premium-date-input, .side-search-input {
        font-size: 0.8rem !important;
    }

    .location-picker, .location-picker select {
        width: 100% !important;
        height: 36px !important;
    }

    .btn-refresh {
        width: 100%;
        height: 36px !important;
        justify-content: center;
        font-size: 0.75rem !important;
    }

    /* 2. Transform Action Pills into Premium Glassmorphism Bottom Nav */
    .pipeline-dashboard {
        position: fixed !important;
        bottom: 25px !important;
        left: 20px !important;
        right: 20px !important;
        z-index: 2000 !important;
        background: rgba(15, 23, 42, 0.7) !important; /* Dark Translucent */
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        padding: 8px 12px !important;
        margin: 0 !important;
        border-radius: 40px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
        display: flex !important;
        align-items: center !important;
        height: 65px !important;
    }

    .pill-group, .pipeline-dashboard > div {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important; /* Align tabs to left */
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* THE FAB (+ BUTTON) */
    .request-pill, .dispatch-pill {
        position: fixed !important;
        bottom: 25px !important;
        right: 20px !important;
        width: 65px !important;
        height: 65px !important;
        border-radius: 50% !important;
        background: #D4AF37 !important; /* Gold */
        box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 2001 !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .request-pill .pill-icon, .dispatch-pill .pill-icon {
        font-size: 2.2rem !important;
        color: #1e293b !important;
        margin: 0 !important;
    }

    .request-pill .pill-text, .dispatch-pill .pill-text {
        display: none !important; /* Icon only FAB */
    }

    /* THE TABS (In the bar) */
    .pipeline-pill:not(.request-pill):not(.dispatch-pill) {
        flex: 1 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 5px 0 !important;
        height: 100% !important;
        gap: 2px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        transition: 0.2s !important;
    }

    .pipeline-pill.pulsing {
        animation: none !important; /* Disable pulsing glow for cleaner nav */
    }

    .pipeline-pill.pulsing .pill-icon {
        color: #10b981 !important; /* Green for ready items */
        filter: drop-shadow(0 0 5px #10b981);
    }

    .pipeline-pill.critical-glow .pill-icon {
        color: #ef4444 !important; /* Red for low stock */
        filter: drop-shadow(0 0 5px #ef4444);
    }

    .pill-icon {
        font-size: 1.4rem !important;
        margin: 0 !important;
    }

    .pill-text {
        text-align: center !important;
    }

    .pill-title {
        font-size: 0.55rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        color: inherit !important;
    }

    .pill-sub, .pill-badge {
        display: none !important; /* Hide details in nav bar */
    }

    /* Adjust main layout to make room for FAB and Bar */
    .admin-container {
        padding-bottom: 110px !important;
    }

    /* Special case: If we only have the FAB (Main Store), hide the empty bar */
    .pipeline-dashboard:has(.dispatch-pill:only-child) {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        pointer-events: none !important;
    }
    .pipeline-dashboard:has(.dispatch-pill:only-child) .dispatch-pill {
        pointer-events: auto !important;
    }

    /* 3. Grid/Table Visibility & Scrolling */
    .admin-container {
        padding-bottom: 100px !important; /* Add space for bottom nav */
        display: flex !important;
        flex-direction: column !important;
    }

    .daily-stock-grid-wrap {
        display: block !important;
        padding: 15px !important;
        background: #f8fafc !important;
        flex: 1 !important;
        min-height: 400px !important;
    }

    .table-scroll {
        overflow: visible !important;
    }

    /* Hide the table header */
    .premium-table-v2 thead {
        display: none;
    }

    /* Transform table into list of cards */
    .premium-table-v2, 
    .premium-table-v2 tbody, 
    .premium-table-v2 tr, 
    .premium-table-v2 td {
        display: block;
        width: 100%;
    }

    .premium-table-v2 tr {
        background: #fff;
        margin-bottom: 15px;
        border-radius: 16px;
        padding: 15px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        border: 1px solid #e2e8f0;
        position: relative;
    }

    /* Zebra striping off for cards */
    .premium-table-v2 tbody tr:nth-child(even) {
        background: #fff !important;
    }

    /* Hide the index column on mobile */
    .premium-table-v2 td:first-child {
        display: none;
    }

    /* Style individual cells as rows in the card */
    .premium-table-v2 td {
        border: none !important;
        padding: 8px 0 !important;
        text-align: left !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.85rem;
    }

    /* The Product Name Cell - Special Header Style for the card */
    .premium-table-v2 td:nth-child(2) {
        display: block !important;
        border-bottom: 1px solid #f1f5f9 !important;
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }

    .premium-table-v2 td:nth-child(2) .item-cell {
        width: 100%;
    }

    .premium-table-v2 td:nth-child(2) .name-row {
        font-size: 0.95rem !important;
        margin-bottom: 4px;
    }

    /* Label generation for mobile data rows using nth-child to avoid touching Razor code */
    .premium-table-v2 td:nth-child(3)::before { content: "Opening"; }
    .premium-table-v2 td:nth-child(4)::before { content: "Purchase/Adj"; }
    .premium-table-v2 td:nth-child(5)::before { content: "Prepped"; }
    .premium-table-v2 td:nth-child(6)::before { content: "From Store"; }
    .premium-table-v2 td:nth-child(7)::before { content: "Sales"; }
    .premium-table-v2 td:nth-child(8)::before { content: "To Store"; }
    .premium-table-v2 td:nth-child(9)::before { content: "Damages"; }
    .premium-table-v2 td:nth-child(10)::before { content: "Theo. Closing"; }
    .premium-table-v2 td:nth-child(11)::before { content: "Actual"; }
    .premium-table-v2 td:nth-child(12)::before { content: "Variance"; }
    .premium-table-v2 td:nth-child(13)::before { content: "Closing Value"; }

    .premium-table-v2 td::before {
        font-weight: 700;
        color: #64748b;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-right: 10px;
    }

    /* Specific Cell Styling */
    .premium-table-v2 td:nth-child(10) { /* Theoretical Closing */
        background: #f1f5f9;
        margin: 10px -15px;
        padding: 10px 15px !important;
        border-top: 1px solid #e2e8f0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        font-weight: 800;
    }

    .premium-table-v2 td:nth-child(11) { /* Actual Input */
        padding: 12px 0 !important;
    }

    .premium-table-v2 td:nth-child(11) input {
        width: 80px !important;
        height: 36px !important;
        font-size: 0.9rem !important;
        text-align: center !important;
    }

    .premium-table-v2 td:nth-child(12) { /* Variance */
        font-weight: 700;
    }

    /* Empty State */
    .empty-state {
        padding: 30px 15px !important;
    }

    /* Hide less important columns on small screens to reduce clutter */
    /* (You can uncomment if you want to hide specific columns like Opening or Closing Value) */
    /* 
    .premium-table-v2 td:nth-child(3),
    .premium-table-v2 td:nth-child(13) {
        display: none;
    } 
    */

    /* 4. Stock Take Modal Optimization (Inventory Setup) */
    .details-loader-overlay .premium-list-card {
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        border-radius: 0 !important;
        padding: 15px !important;
    }

    .details-loader-overlay .premium-list-card h2 {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
    }

    /* Modal Search and Filter controls */
    .details-loader-overlay .premium-list-card > div:nth-child(2) {
        flex-direction: column;
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    /* Group Pills - keep horizontal but tidy */
    .hide-scrollbar {
        padding: 5px 10px !important;
    }

    .pill-item {
        font-size: 0.65rem !important;
        padding: 6px 12px !important;
    }

    /* Transform Audit Table inside Modal */
    .premium-table thead {
        display: none;
    }

    .premium-table, .premium-table tbody, .premium-table tr, .premium-table td {
        display: block;
        width: 100%;
    }

    .premium-table tr {
        background: #fff;
        margin-bottom: 12px;
        border-radius: 12px;
        padding: 12px;
        border: 1px solid #e2e8f0;
    }

    .premium-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0 !important;
        border: none !important;
    }

    /* Product Name row in Modal Card */
    .premium-table td:nth-child(1) {
        display: block !important;
        border-bottom: 1px solid #f1f5f9 !important;
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
    }

    /* Labels for Audit Modal */
    .premium-table td:nth-child(2)::before { content: "System Qty"; }
    .premium-table td:nth-child(3)::before { content: "Counted"; }
    .premium-table td:nth-child(4)::before { content: "Variance"; }

    .premium-table td::before {
        font-weight: 700;
        color: #64748b;
        font-size: 0.7rem;
        text-transform: uppercase;
    }

    /* Modal Footer Buttons */
    .details-loader-overlay .premium-list-card > div:last-child {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding-top: 15px !important;
    }

    .details-loader-overlay .premium-list-card > div:last-child > div {
        width: 100% !important;
    }
}