/* Mobile-first responsive design */

        /* Force table to use fixed layout for better control on desktop */
        @media (min-width: 768px) {
            .min-w-full {
                table-layout: fixed;
                width: 100%;
            }
        }

        /* Mobile: Allow tables to scroll horizontally */
        @media (max-width: 767px) {
            .overflow-x-auto {
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch;
            }

            .min-w-full {
                min-width: 600px;
            }
        }

        /* Ensure all table rows have consistent fixed height */
        #top-sales-trough-tbody tr,
        #bottom-sales-trough-tbody tr,
        #shortest-weeks-tbody tr,
        #longest-weeks-tbody tr {
            height: 48px;
        }

        /* All cells: no wrap, show ellipsis */
        #top-sales-trough-tbody td,
        #bottom-sales-trough-tbody td,
        #shortest-weeks-tbody td,
        #longest-weeks-tbody td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
            cursor: help;
        }

        /* Hide Factory column (2nd column) from all main tables */
        #top-sales-trough-tbody td:nth-child(2),
        #bottom-sales-trough-tbody td:nth-child(2),
        #shortest-weeks-tbody td:nth-child(2),
        #longest-weeks-tbody td:nth-child(2),
        thead th:nth-child(2) {
            display: none !important;
        }

        /* Remove ellipsis from DPCI column (1st column) */
        #top-sales-trough-tbody td:nth-child(1),
        #bottom-sales-trough-tbody td:nth-child(1),
        #shortest-weeks-tbody td:nth-child(1),
        #longest-weeks-tbody td:nth-child(1) {
            white-space: normal !important;
            overflow: visible !important;
            text-overflow: clip !important;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        /* Set specific column widths using percentage */
        #top-sales-trough-tbody td:nth-child(1),
        #bottom-sales-trough-tbody td:nth-child(1),
        #shortest-weeks-tbody td:nth-child(1),
        #longest-weeks-tbody td:nth-child(1) {
            width: 15%;
            /* DPCI */
        }

        #top-sales-trough-tbody td:nth-child(2),
        #bottom-sales-trough-tbody td:nth-child(2),
        #shortest-weeks-tbody td:nth-child(2),
        #longest-weeks-tbody td:nth-child(2) {
            width: 16%;
            /* Factory */
        }

        #top-sales-trough-tbody td:nth-child(3),
        #bottom-sales-trough-tbody td:nth-child(3),
        #shortest-weeks-tbody td:nth-child(3),
        #longest-weeks-tbody td:nth-child(3) {
            width: 27%;
            /* Program */
        }

        #top-sales-trough-tbody td:nth-child(4),
        #bottom-sales-trough-tbody td:nth-child(4),
        #shortest-weeks-tbody td:nth-child(4),
        #longest-weeks-tbody td:nth-child(4) {
            width: 28%;
            /* Item */
        }

        #top-sales-trough-tbody td:nth-child(5),
        #bottom-sales-trough-tbody td:nth-child(5),
        #shortest-weeks-tbody td:nth-child(5),
        #longest-weeks-tbody td:nth-child(5) {
            width: 14%;
            /* STR % / Weeks */
        }

        /* Apply same widths to header cells */
        thead th:nth-child(1) {
            width: 15%;
        }

        thead th:nth-child(2) {
            width: 16%;
        }

        thead th:nth-child(3) {
            width: 27%;
        }

        thead th:nth-child(4) {
            width: 28%;
        }

        thead th:nth-child(5) {
            width: 14%;
        }

        /* Program Tables Styling */
        #top-programs-tbody tr,
        #bottom-programs-tbody tr {
            min-height: 48px;
            height: auto;
        }

        #top-programs-tbody td,
        #bottom-programs-tbody td {
            position: relative;
        }

        /* Ellipsis and cursor help only for numeric columns (Total EOH, Total Sales, STR %) */
        #top-programs-tbody td:nth-child(3),
        #top-programs-tbody td:nth-child(4),
        #top-programs-tbody td:nth-child(5),
        #bottom-programs-tbody td:nth-child(3),
        #bottom-programs-tbody td:nth-child(4),
        #bottom-programs-tbody td:nth-child(5) {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: help;
        }

        /* Allow text wrapping for Program and Factory columns */
        #top-programs-tbody td:nth-child(1),
        #top-programs-tbody td:nth-child(2),
        #bottom-programs-tbody td:nth-child(1),
        #bottom-programs-tbody td:nth-child(2) {
            white-space: normal;
            word-wrap: break-word;
            overflow-wrap: break-word;
            line-height: 1.3;
            padding-top: 0.5rem !important;
            padding-bottom: 0.5rem !important;
            cursor: default;
        }

        /* Program table specific styling */
        .program-table {
            table-layout: fixed !important;
        }

        .program-table thead th {
            white-space: normal !important;
        }

        /* Hide Factory column (2nd column) from program tables */
        #top-programs-tbody td:nth-child(2),
        #bottom-programs-tbody td:nth-child(2),
        .program-table thead th:nth-child(2) {
            display: none !important;
        }

        /* Desktop: Remove horizontal scroll from table containers */
        @media (min-width: 768px) {
            .overflow-x-auto {
                overflow-x: hidden !important;
            }
        }

        /* Tooltip on hover - disabled on mobile */
        @media (min-width: 768px) {

            #top-sales-trough-tbody td:hover::after,
            #bottom-sales-trough-tbody td:hover::after,
            #shortest-weeks-tbody td:hover::after,
            #longest-weeks-tbody td:hover::after {
                content: attr(title);
                position: absolute;
                left: 0;
                top: 100%;
                z-index: 1000;
                background: rgba(0, 0, 0, 0.9);
                color: white;
                padding: 8px 12px;
                border-radius: 6px;
                white-space: normal;
                max-width: 300px;
                font-size: 12px;
                line-height: 1.4;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
                pointer-events: none;
            }

            /* Tooltip only for numeric columns in program tables */
            #top-programs-tbody td:nth-child(3):hover::after,
            #top-programs-tbody td:nth-child(4):hover::after,
            #top-programs-tbody td:nth-child(5):hover::after,
            #bottom-programs-tbody td:nth-child(3):hover::after,
            #bottom-programs-tbody td:nth-child(4):hover::after,
            #bottom-programs-tbody td:nth-child(5):hover::after {
                content: attr(title);
                position: absolute;
                left: 0;
                top: 100%;
                z-index: 1000;
                background: rgba(0, 0, 0, 0.9);
                color: white;
                padding: 8px 12px;
                border-radius: 6px;
                white-space: normal;
                max-width: 300px;
                font-size: 12px;
                line-height: 1.4;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
                pointer-events: none;
            }
        }

        /* Mobile optimizations */
        @media (max-width: 640px) {
            body {
                padding: 0.75rem !important;
            }

            h1 {
                font-size: 1.5rem !important;
            }

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

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

            .text-lg {
                font-size: 1rem !important;
            }
        }