﻿/*
 * AffectedReports page responsive styles.
 * Mirrors the DocumentGeneralResult.css pattern: desktop columns hidden on mobile,
 * replaced by a single combined column with labelled fields.
 */

/* Responsive: hide desktop columns on mobile, show single combined column */
@media (max-width: 950px) {
    .k-grid td.desktop-col,
    .k-grid th.desktop-col {
        display: none !important;
    }

    .k-grid td.mobile-combined-col,
    .k-grid th.mobile-combined-col {
        display: table-cell !important;
        width: 100% !important;
    }

    .k-grid table {
        table-layout: auto !important;
    }

    /* Hide column header row on mobile — the combined column has its own labels */
    #gridAffectedReports .k-grid-header,
    #gridAffectedReports thead,
    #gridAffectedReports .k-table-thead {
        display: none !important;
    }

    /* Allow grid content to expand vertically to fit stacked rows */
    #gridAffectedReports .k-grid-content,
    #gridAffectedReports .k-table-wrap {
        height: auto !important;
        max-height: none !important;
    }
}

/* Responsive: hide mobile combined column on desktop, show desktop columns */
@media (min-width: 951px) {
    .k-grid td.mobile-combined-col,
    .k-grid th.mobile-combined-col {
        display: none !important;
    }

    .k-grid td.desktop-col,
    .k-grid th.desktop-col {
        display: table-cell !important;
        width: auto !important;
    }
}

/* Column header: allow text wrapping and vertically center */
#gridAffectedReports .k-grid-header th,
#gridAffectedReports .k-table-thead th {
    white-space: normal !important;
    overflow: hidden !important;
    vertical-align: middle !important;
}

#gridAffectedReports .k-grid-header th .k-cell-inner,
#gridAffectedReports .k-table-thead th .k-cell-inner {
    margin: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

#gridAffectedReports .k-grid-header th .k-cell-inner .k-link,
#gridAffectedReports .k-table-thead th .k-cell-inner .k-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
    width: 100%;
}

