/*
 * CommitteeResults page responsive styles.
 * All layout rules are in this external file (not scoped .cshtml.css) so changes
 * take effect immediately without rebuilding the scoped CSS bundle.
 */

/* Responsive: hide desktop columns on mobile, show single combined column */
@media (max-width: 768px) {
    .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 */
    #gridCommitteeResults .k-grid-header,
    #gridCommitteeResults thead,
    #gridCommitteeResults .k-table-thead {
        display: none !important;
    }

    /* Allow grid content to expand vertically to fit stacked rows */
    #gridCommitteeResults .k-grid-content,
    #gridCommitteeResults .k-table-wrap {
        height: auto !important;
        max-height: none !important;
    }
}

/* Responsive: hide mobile combined column on desktop, show desktop columns */
@media (min-width: 769px) {
    .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 */
#gridCommitteeResults .k-grid-header th,
#gridCommitteeResults .k-table-thead th {
    white-space: normal !important;
    overflow: hidden !important;
    vertical-align: middle !important;
}

#gridCommitteeResults .k-grid-header th .k-cell-inner,
#gridCommitteeResults .k-table-thead th .k-cell-inner {
    margin: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

#gridCommitteeResults .k-grid-header th .k-cell-inner .k-link,
#gridCommitteeResults .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%;
}

#gridCommitteeResults .k-grid-header th .k-column-title,
#gridCommitteeResults .k-table-thead th .k-column-title {
    display: block !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    min-width: 0 !important;
    text-align: center !important;
}

/* Sort icon: vertically centered, pushed to right */
#gridCommitteeResults .k-grid-header th .k-cell-inner .k-link .k-sort-icon,
#gridCommitteeResults .k-table-thead th .k-cell-inner .k-link .k-sort-icon {
    flex-shrink: 0;
    align-self: center;
    margin-left: auto;
    margin-right: 2px;
}

/* Row hover: light grey background for all rows */
#gridCommitteeResults .k-grid-table tr:hover > td,
#gridCommitteeResults .k-grid-table tr:hover > .k-table-td,
#gridCommitteeResults .k-table-row:hover > td,
#gridCommitteeResults .k-table-row:hover > .k-table-td,
#gridCommitteeResults .k-state-hover > td,
#gridCommitteeResults .k-state-hover > .k-table-td {
    background-color: #f0f0f0 !important;
}