/* Responsive Table Enhancements for AntDesign Blazor
 *
 * This CSS provides UX polish on top of AntBlazor's built-in responsive features.
 * AntBlazor already provides: ScrollX, ScrollY, Responsive, Size properties.
 *
 * USAGE INSTRUCTIONS:
 *
 * Use AntDesign Blazor's built-in responsive properties:
 *
 * <Table TItem="YourType"
 *        DataSource="yourData"
 *        ScrollX="800px"         @* Built-in horizontal scroll *@
 *        Size="@TableSize.Small" @* Built-in compact sizing *@
 *        Responsive>             @* Built-in responsive mode (< 960px) *@
 *
 * COLUMN HIDING (requires custom logic with @media or JS):
 * AntBlazor doesn't have built-in breakpoint-based column hiding, so you'd need to:
 * 1. Use @code with JSInterop to detect screen size
 * 2. Conditionally render columns based on viewport
 *
 * Example:
 * @if (!isMobile) {
 *     <PropertyColumn Property="x => x.Profession" Title="Profession" />
 * }
 *
 * The CSS below enhances the built-in features with better mobile UX.
 */

/* Mobile UX enhancements (complements AntBlazor's built-in features) */
@media (max-width: 768px) {
    /* Make action buttons more touch-friendly and compact */
    .ant-table .ant-btn-sm,
    .ant-table .ant-btn {
        padding: 4px 8px;
        font-size: 12px;
        min-height: 32px; /* Better touch target */
    }

    /* Make tags more compact on mobile */
    .ant-table .ant-tag {
        font-size: 12px;
        padding: 2px 6px;
        margin: 2px;
    }

    /* Reduce checkbox column width on mobile */
    .ant-table-selection-column {
        width: 40px !important;
    }

    /* Make search inputs full width on mobile */
    .ant-input-affix-wrapper,
    .ant-input {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Better spacing for page headers on mobile */
    .ant-page-header {
        padding: 12px 0;
    }
}

/* Tablet enhancements */
@media (max-width: 1024px) and (min-width: 769px) {
    .ant-table .ant-btn {
        font-size: 13px;
    }
}