/**
 * DataTable Component Styles
 * Reusable styles for the DataTable Vue component
 *
 * @version 1.0.2
 */

/* ==========================================================================
   Container
   ========================================================================== */

.datatable {
    /* Internal color tokens - override these in theme files
     * Aligned with Calendar component for visual consistency.
     * Base values optimized for visibility across Light/Design themes:
     * - Hover state: 10% context background
     * - Selected state: 16% context background
     * - Selected+hover: 20% context background
     * Theme-specific overrides:
     * - Dark theme: 12%/20%/24% for better visibility on gray surfaces (see dark.css)
     * - Contrast theme: 15%/25%/30% for maximum accessibility (see contrast.css)
     */
    --datatable-header-bg: var(--color-shell-surface, var(--color-surface-primary-variant));
    --datatable-row-bg: var(--color-surface-primary);
    --datatable-row-hover-bg: color-mix(in srgb, var(--color-context-background) 10%, var(--datatable-row-bg));
    --datatable-row-selected-bg: color-mix(in srgb, var(--color-context-background) 16%, var(--datatable-row-bg));
    --datatable-row-selected-hover-bg: color-mix(in srgb, var(--color-context-background) 20%, var(--datatable-row-bg));
    --datatable-row-hover-accent: color-mix(in srgb, var(--color-context-background) 50%, transparent);

    display: flex;
    flex-direction: column;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    margin: 1px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    border: 1px solid var(--color-border-shell);
    border-radius: 0;
    background-color: var(--color-surface-primary);
    min-height: 0;
}

/* ==========================================================================
   Loading Overlay
   ========================================================================== */

.datatable__loading-overlay {
    position: absolute;
    inset: 0;
    background-color: color-mix(in srgb, var(--color-surface-primary) 80%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.datatable__loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.datatable__loading-spinner {
    width: 2rem;
    height: 2rem;
    color: var(--color-context-background);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.datatable__loading-spinner circle {
    opacity: 0.25;
}

.datatable__loading-spinner path {
    opacity: 0.75;
}

.datatable__loading-text {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* ==========================================================================
   Scroll Container
   ========================================================================== */

.datatable__scroll-container {
    flex: 1;
    overflow: auto;
    width: 100%;
    position: relative;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    touch-action: pan-y pinch-zoom;
    scrollbar-gutter: stable;
    background-color: var(--datatable-row-bg);
    /* Flex column layout: table takes natural height, grid-lines fills remainder */
    display: flex;
    flex-direction: column;
    /* Performance: Isolate paint/layout for efficient resize handling */
    contain: layout style;
}

/* Grid lines element - fills empty space below table with row separator pattern */
.datatable__grid-lines {
    flex: 1;
    min-height: 0;
    pointer-events: none;
    background-color: var(--datatable-row-bg);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(3rem - 1px),
        var(--color-border) calc(3rem - 1px),
        var(--color-border) 3rem
    );
    /* Performance: Isolate paint calculations from table hover effects */
    contain: strict;
}

/* ==========================================================================
   Table
   ========================================================================== */

.datatable__table {
    min-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--datatable-row-bg);
    /* Don't grow - let grid-lines element fill remaining space */
    flex: 0 0 auto;
}

/* ==========================================================================
   Table Header
   ========================================================================== */

.datatable__thead {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--datatable-header-bg);
}

.datatable__header-row {
    height: 3rem;
    max-height: 3rem;
}

/* Checkbox column header */
.datatable__th-checkbox {
    position: relative;
    width: 2.5rem;
    min-width: 2.5rem;
    padding-left: 0.75rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
    background-color: var(--datatable-header-bg);
    /* Row separator line drawn OVER background via box-shadow */
    box-shadow: inset 0 -1px 0 var(--color-border);
}

.datatable__th-checkbox-indicator {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 0.125rem;
    background-color: var(--color-context-background);
}

/* Data column header */
.datatable__th {
    padding: 0.875rem 0.75rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
    box-sizing: border-box;
    position: relative;
    background-color: var(--datatable-header-bg);
    /* Row separator line drawn OVER background via box-shadow */
    box-shadow: inset 0 -1px 0 var(--color-border);
    user-select: none;
}

.datatable__th--sortable {
}

.datatable__th--sortable:hover {
    background-color: var(--datatable-row-bg);
}

.datatable__th-content {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.datatable__th-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sort icons - inherit color from header text for consistency across themes/states */
.datatable__sort-icon {
    flex-shrink: 0;
    font-size: 0.875rem;
    line-height: 1;
    color: inherit;
}

.datatable__sort-icon--inactive {
    opacity: 0;
    transition: opacity 100ms ease;
}

.datatable__th:hover .datatable__sort-icon--inactive {
    opacity: 1;
}

/* Resize handle - thin line indicator with wide hit area */
.datatable__resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 40;
    background: transparent;
}

/* Visual indicator line using pseudo-element */
.datatable__resize-handle::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background-color: var(--color-border);
    border-radius: 1px;
    opacity: 0;
    transition: opacity 100ms ease, background-color 100ms ease;
}

/* Show subtle indicator on header hover */
.datatable__th:hover .datatable__resize-handle::after {
    opacity: 1;
}

/* Accent color on handle hover/active */
.datatable__resize-handle:hover::after,
.datatable__resize-handle:active::after {
    opacity: 1;
    background-color: var(--color-context-background);
}

/* Filler column header - auto-width absorbs remaining space without pushing fixed columns */
.datatable__th-filler {
    width: auto;
    min-width: 0;
    box-sizing: border-box;
    background-color: var(--datatable-header-bg);
    /* Row separator line drawn OVER background via box-shadow */
    box-shadow: inset 0 -1px 0 var(--color-border);
}

/* ==========================================================================
   Table Body
   ========================================================================== */

.datatable__tbody {
    background-color: transparent;
}

/* Data row */
.datatable__row {
    height: 3rem;
    max-height: 3rem;
    transition: background-color 100ms ease, box-shadow 100ms ease;
    cursor: default;
    box-shadow: inset 3px 0 0 0 transparent;
}

/* Hover only when NOT in keyboard navigation mode */
.datatable:not(.datatable--keyboard-mode) .datatable__row:hover {
    background-color: var(--datatable-row-hover-bg);
    box-shadow: inset 3px 0 0 0 var(--datatable-row-hover-accent);
}

.datatable__row:focus-visible {
    outline: none;
    background-color: var(--datatable-row-hover-bg);
    box-shadow: inset 3px 0 0 0 var(--color-context-background);
}

.datatable__row--selected {
    background-color: var(--datatable-row-selected-bg);
}

.datatable:not(.datatable--keyboard-mode) .datatable__row--selected:hover {
    background-color: var(--datatable-row-selected-hover-bg);
}

.datatable__row--selected:focus-visible {
    outline: none;
    background-color: var(--datatable-row-selected-hover-bg);
    box-shadow: inset 3px 0 0 0 var(--color-context-background);
}

/* Active row (keyboard navigation) */
.datatable__row--active {
    background-color: var(--datatable-row-hover-bg);
    box-shadow: inset 3px 0 0 0 var(--color-context-background);
}

.datatable__row--active .datatable__td-checkbox {
    background-color: var(--datatable-row-hover-bg);
}

.datatable__row--active.datatable__row--selected {
    background-color: var(--datatable-row-selected-hover-bg);
}

.datatable__row--active.datatable__row--selected .datatable__td-checkbox {
    background-color: var(--datatable-row-selected-hover-bg);
}

/* Checkbox cell - uses same variables as rows
   Transition matches row for smooth hover. Theme-switch transitions are
   disabled via .theme-switching class (see theme.js). */
.datatable__td-checkbox {
    position: relative;
    width: 2.5rem;
    min-width: 2.5rem;
    padding-left: 0.75rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
    background-color: var(--datatable-row-bg);
    /* Row separator line drawn OVER background via box-shadow */
    box-shadow: inset 0 -1px 0 var(--color-border);
    transition: background-color 100ms ease;
}

.datatable:not(.datatable--keyboard-mode) .datatable__row:hover .datatable__td-checkbox {
    background-color: var(--datatable-row-hover-bg);
}

/* Selected state - base */
.datatable__row--selected .datatable__td-checkbox {
    background-color: var(--datatable-row-selected-bg);
}

/* Selected+hover/focus state - slightly stronger (matches row behavior) */
.datatable:not(.datatable--keyboard-mode) .datatable__row--selected:hover .datatable__td-checkbox,
.datatable__row--selected:focus-visible .datatable__td-checkbox {
    background-color: var(--datatable-row-selected-hover-bg);
}

.datatable__td-checkbox-indicator {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 0.125rem;
    background-color: var(--color-context-background);
}

/* Data cell hover/selected/active states - match checkbox for uniform appearance */
.datatable:not(.datatable--keyboard-mode) .datatable__row:hover .datatable__td,
.datatable:not(.datatable--keyboard-mode) .datatable__row:hover .datatable__td-filler,
.datatable:not(.datatable--keyboard-mode) .datatable__row:hover .datatable__td-actions {
    background-color: var(--datatable-row-hover-bg);
}

.datatable__row--selected .datatable__td,
.datatable__row--selected .datatable__td-filler,
.datatable__row--selected .datatable__td-actions {
    background-color: var(--datatable-row-selected-bg);
}

.datatable:not(.datatable--keyboard-mode) .datatable__row--selected:hover .datatable__td,
.datatable:not(.datatable--keyboard-mode) .datatable__row--selected:hover .datatable__td-filler,
.datatable:not(.datatable--keyboard-mode) .datatable__row--selected:hover .datatable__td-actions,
.datatable__row--selected:focus-visible .datatable__td,
.datatable__row--selected:focus-visible .datatable__td-filler,
.datatable__row--selected:focus-visible .datatable__td-actions {
    background-color: var(--datatable-row-selected-hover-bg);
}

.datatable__row--active .datatable__td,
.datatable__row--active .datatable__td-filler,
.datatable__row--active .datatable__td-actions {
    background-color: var(--datatable-row-hover-bg);
}

.datatable__row--active.datatable__row--selected .datatable__td,
.datatable__row--active.datatable__row--selected .datatable__td-filler,
.datatable__row--active.datatable__row--selected .datatable__td-actions {
    background-color: var(--datatable-row-selected-hover-bg);
}

/* Data cell */
.datatable__td {
    white-space: nowrap;
    padding: 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    overflow: hidden;
    height: 3rem;
    max-height: 3rem;
    box-sizing: border-box;
    vertical-align: middle;
    background-color: var(--datatable-row-bg);
    /* Row separator line drawn OVER background via box-shadow */
    box-shadow: inset 0 -1px 0 var(--color-border);
    transition: background-color 100ms ease;
}

/* Prevent vertical stacking in cells to maintain single-line rows */
.datatable__td > [class*="flex-col"] {
    flex-direction: row;
    gap: 0.25rem;
    align-items: baseline;
}

.datatable__td-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Filler cell - auto-width absorbs remaining space without pushing fixed columns */
.datatable__td-filler {
    width: auto;
    min-width: 0;
    box-sizing: border-box;
    background-color: var(--datatable-row-bg);
    /* Row separator line drawn OVER background via box-shadow */
    box-shadow: inset 0 -1px 0 var(--color-border);
    transition: background-color 100ms ease;
}

/* ==========================================================================
   Checkbox
   ========================================================================== */

.datatable__checkbox {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    margin-top: -0.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1px solid var(--color-border);
    accent-color: var(--color-context-background);
}

.datatable__checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-context-background);
}

/* ==========================================================================
   Empty & Error States
   ========================================================================== */

.datatable__state-row {
    height: 6rem;
    /* Transparent to show grid lines behind empty/error message */
    background-color: transparent;
}

.datatable__state-cell {
    text-align: center;
    padding: 2rem;
    /* Transparent to show grid lines behind the centered message */
    background-color: transparent;
}

.datatable__state-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.datatable__state-icon {
    width: 2rem;
    height: 2rem;
}

.datatable__state-icon--empty {
    color: var(--color-text-secondary);
    opacity: 0.5;
}

.datatable__state-icon--error {
    color: #ef4444;
}

.datatable__state-text {
    color: var(--color-text-secondary);
}

.datatable__state-text--error {
    color: #ef4444;
}

/* ==========================================================================
   Pagination Footer - Common
   ========================================================================== */

.datatable__footer {
    flex-shrink: 0;
    height: 3rem;
    display: flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: var(--datatable-header-bg);
    border-top: 1px solid var(--color-border);
    z-index: 20;
    box-sizing: border-box;
}

/* Desktop footer */
.datatable__footer--desktop {
    display: none;
}

@media (min-width: 640px) {
    .datatable__footer--desktop {
        display: flex;
    }
}

/* Mobile footer */
.datatable__footer--mobile {
    display: flex;
}

@media (min-width: 640px) {
    .datatable__footer--mobile {
        display: none;
    }
}

/* ==========================================================================
   Pagination - Range Text
   ========================================================================== */

.datatable__range {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.datatable__range-text {
    margin: 0;
    font-size: var(--form-label-font-size);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.datatable__range-text--selected {
    font-weight: 500;
    color: var(--color-context-background);
}

.datatable__range-value {
    font-weight: 500;
    color: var(--color-text-primary);
}

/* ==========================================================================
   Pagination - Navigation
   ========================================================================== */

.datatable__nav-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.datatable__nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.datatable__nav--desktop {
    gap: 0.25rem;
}

.datatable__nav--mobile {
    gap: 0.125rem;
}

.datatable__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--color-text-primary);
    border: none;
    border-radius: 0.25rem;
    transition: background-color 100ms ease;
}

.datatable__nav-btn--desktop {
    width: 2.5rem;
    height: 2.5rem;
}

.datatable__nav-btn--mobile {
    width: 2.5rem;
    height: 2.5rem;
}

.datatable__nav-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.datatable__nav-btn:not(:disabled):hover {
    background-color: var(--datatable-row-hover-bg);
}

.datatable__nav-btn:focus {
    outline: none;
}

.datatable__nav-btn-icon {
    font-size: 1.25rem; /* 20px */
}

.datatable__nav-btn-icon--mobile {
    font-size: 1.25rem; /* 20px */
}

.datatable__nav-page-info {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    font-size: var(--form-label-font-size);
    color: var(--color-text-secondary);
    white-space: nowrap;
    user-select: none;
}

.datatable__nav-page-info--mobile {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.datatable__nav-page-value {
    font-weight: 500;
    color: var(--color-text-primary);
}

/* ==========================================================================
   Pagination - Page Size Selector
   ========================================================================== */

.datatable__pagesize {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.datatable__pagesize-wrapper {
    position: relative;
    display: inline-block;
}

.datatable__pagesize-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: var(--form-control-min-height);
    padding-left: 0.75rem;
    padding-right: 2.25rem;
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--form-label-font-size);
    background-color: var(--color-input-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    background-image: none !important;
    text-indent: 0.01px;
    text-overflow: '';
}

/* Remove native dropdown arrow in IE/Edge */
.datatable__pagesize-select::-ms-expand {
    display: none;
}

.datatable__pagesize-select--mobile {
    padding-left: 0.5rem;
    padding-right: 2rem;
    font-size: var(--form-label-font-size);
}

.datatable__pagesize-select:focus {
    outline: none;
    border-color: var(--color-text-secondary);
}

.datatable__pagesize-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    pointer-events: none;
    font-size: 1.25rem;
    line-height: 1;
}

.datatable__pagesize-icon--mobile {
    right: 0.5rem;
}

/* ==========================================================================
   Context Menu (Desktop Only)
   ========================================================================== */

.datatable__context-menu {
    position: fixed;
    z-index: 9999;
    min-width: 12rem;
    padding: 0.25rem 0;
    background-color: var(--color-surface-primary);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.datatable__context-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    background-color: transparent;
    border: none;
    text-align: left;
    transition: background-color 100ms ease;
}

.datatable__context-menu-item:hover:not(:disabled) {
    background-color: var(--datatable-row-hover-bg, color-mix(in srgb, var(--color-context-background) 10%, var(--color-surface-primary)));
}

.datatable__context-menu-item:focus {
    outline: none;
    background-color: var(--datatable-row-hover-bg, color-mix(in srgb, var(--color-context-background) 10%, var(--color-surface-primary)));
}

.datatable__context-menu-item--disabled {
    color: var(--color-text-secondary);
    opacity: 0.5;
    cursor: not-allowed;
}

.datatable__context-menu-icon {
    flex-shrink: 0;
    width: 1rem;
    font-size: 1rem;
    color: var(--color-text-secondary);
}

.datatable__context-menu-item:hover:not(:disabled) .datatable__context-menu-icon {
    color: var(--color-context-background);
}

.datatable__context-menu-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.datatable__context-menu-divider {
    height: 1px;
    margin: 0.25rem 0;
    background-color: var(--color-border);
}

/* ==========================================================================
   Mobile Actions Column (Kebab Menu)
   Visible only on mobile portrait view (< 640px)
   ========================================================================== */

/* Header cell for actions column */
.datatable__th-actions {
    width: 2.75rem;
    min-width: 2.75rem;
    max-width: 2.75rem;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--datatable-header-bg);
    /* Row separator line drawn OVER background via box-shadow */
    box-shadow: inset 0 -1px 0 var(--color-border);
}

/* Data cell for actions column */
.datatable__td-actions {
    width: 2.75rem;
    min-width: 2.75rem;
    max-width: 2.75rem;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--datatable-row-bg);
    /* Row separator line drawn OVER background via box-shadow */
    box-shadow: inset 0 -1px 0 var(--color-border);
    transition: background-color 100ms ease;
    text-align: center;
    vertical-align: middle;
}

/* Kebab menu button - touch-friendly size */
.datatable__actions-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    transition: color 100ms ease, background-color 100ms ease;
    border-radius: 0.25rem;
}

.datatable__actions-btn:hover {
    color: var(--color-text-primary);
    background-color: var(--datatable-row-hover-bg);
}

.datatable__actions-btn:focus {
    outline: none;
    color: var(--color-context-background);
}

.datatable__actions-btn:active {
    color: var(--color-context-background);
}

/* Kebab icon (three vertical dots) */
.datatable__actions-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* Hide actions column on desktop (>= 640px) */
@media (min-width: 640px) {
    .datatable__th-actions,
    .datatable__td-actions {
        display: none;
    }
}

/* ==========================================================================
   Mobile Responsive - Consistent Column Sizing
   On mobile (<640px), all columns follow the same flexible sizing rules:
   - No sticky positioning (checkbox column scrolls with table)
   - No fixed widths (columns size to content and available space)
   - Table constrained to 100% width (no horizontal overflow)
   ========================================================================== */

@media (max-width: 639px) {
    /* Table constrained to container width - no overflow */
    .datatable__table {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        table-layout: fixed;
    }

    /* Prevent horizontal scrolling strictly, maintain flex column layout */
    .datatable__scroll-container {
        overflow-x: hidden;
        /* Ensure flex layout still works for grid-lines on mobile */
        display: flex;
        flex-direction: column;
    }

    /* Grid lines on mobile - ensure full width */
    .datatable__grid-lines {
        width: 100%;
    }

    /* Checkbox column - not sticky, fixed width for checkbox content.
       Uses position: relative as positioning context for the absolute checkbox input.
       Matches desktop width (2.5rem) exactly. */
    .datatable__th-checkbox,
    .datatable__td-checkbox {
        position: relative;
        width: 2.5rem !important;
        min-width: 2.5rem !important;
        max-width: 2.5rem !important;
    }

    /* Data columns - override ALL inline width styles to allow flexible sizing,
       UNLESS the column is explicitly marked as fixed (e.g. avatar column).
       Uses !important because inline styles have higher specificity. */
    .datatable__th:not(.datatable__col--fixed),
    .datatable__td:not(.datatable__col--fixed) {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Actions column - fixed width for kebab button */
    .datatable__th-actions,
    .datatable__td-actions {
        width: 2.75rem !important;
        min-width: 0 !important;
        max-width: 2.75rem !important;
    }

    /* Filler column - collapse to zero in constrained layout */
    .datatable__th-filler,
    .datatable__td-filler {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0;
    }
}

/* ==========================================================================
   iPad / Tablet Touch Devices (> 639px)
   Prevents horizontal swiping on touch devices with larger screens (e.g., iPad Pro)
   Uses pointer:coarse to detect touch-primary input devices.
   ========================================================================== */

@media (pointer: coarse) and (min-width: 640px) {
    /* Prevent horizontal scroll on touch tablets - vertical scroll only.
     * This fixes unwanted horizontal swiping on iPad Pro and similar devices
     * where the screen width exceeds the mobile breakpoint. */
    .datatable__scroll-container {
        overflow-x: hidden;
        /* Reinforce vertical-only touch action for larger touch devices */
        touch-action: pan-y pinch-zoom;
        /* Maintain flex layout for grid-lines */
        display: flex;
        flex-direction: column;
    }

    /* Table constrained to container width on tablets */
    .datatable__table {
        width: 100%;
        max-width: 100%;
    }

    /* Grid lines on tablets - ensure full width */
    .datatable__grid-lines {
        width: 100%;
    }
}