/**
 * ============================================================================
 * TK-DATAGRID-THEMES.CSS
 * ============================================================================
 *
 * Theme integration layer for TkDataGrid components.
 * Maps existing theme variables to grid-specific CSS custom properties.
 * Supports all 4 themes: light (default), dark, blue, gunmetal.
 *
 * IMPORTANT: This file should be imported after definitions.css in main.css
 *
 * Agent: 30 of 32
 * Component: CSS & Theming System
 * Last Updated: 2026-01-28
 * ============================================================================
 */

/* =============================================================================
   GRID CSS CUSTOM PROPERTIES
   =============================================================================
   These variables extend the base theme system with grid-specific tokens.
   They automatically inherit from the appropriate theme based on data-theme.
   ============================================================================= */

:root {
    /* ---------------------------------------------------------------------
       GRID DIMENSIONS - Compact Airtable-style density
       --------------------------------------------------------------------- */
    --tk-grid-header-height: 32px;
    --tk-grid-row-height: 32px;
    --tk-grid-footer-height: 28px;
    --tk-grid-toolbar-height: 40px;
    --tk-grid-cell-padding-x: 8px;
    --tk-grid-cell-padding-y: 4px;
    --tk-grid-border-radius: 8px;
    --tk-grid-checkbox-width: 36px;
    --tk-grid-row-number-width: 44px;
    --tk-grid-expander-width: 28px;
    --tk-grid-resize-handle-width: 5px;
    --tk-grid-radius-sm: 4px;
    --tk-grid-line-height: 1.4;
    --tk-grid-pill-radius: 12px;

    /* ---------------------------------------------------------------------
       GRID LINES - Subtle internal borders only
       --------------------------------------------------------------------- */
    --tk-grid-line-color: rgba(255, 255, 255, 0.08);
    --tk-grid-header-line-color: rgba(255, 255, 255, 0.12);

    /* ---------------------------------------------------------------------
       TYPOGRAPHY - Compact sizes
       --------------------------------------------------------------------- */
    --tk-grid-font-family: var(--font-family, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    --tk-grid-font-size: 13px;
    --tk-grid-font-size-sm: 12px;
    --tk-grid-font-size-xs: 11px;
    --tk-grid-font-mono: var(--font-mono, 'SF Mono', 'Fira Code', Consolas, monospace);
    --tk-grid-header-font-weight: 400;
    --tk-grid-header-font-size: 13px;

    /* ---------------------------------------------------------------------
       TRANSITIONS
       --------------------------------------------------------------------- */
    --tk-grid-transition-fast: 0.1s ease;
    --tk-grid-transition-normal: 0.15s ease;
    --tk-grid-transition-slow: 0.2s ease;
    --tk-grid-transition-spring: 0.25s cubic-bezier(0.16, 1, 0.3, 1);

    /* ---------------------------------------------------------------------
       Z-INDEX LAYERS
       --------------------------------------------------------------------- */
    --tk-grid-z-cell: 1;
    --tk-grid-z-frozen: 2;
    --tk-grid-z-header: 10;
    --tk-grid-z-header-frozen: 11;
    --tk-grid-z-resizer: 15;
    --tk-grid-z-dropdown: 100;
    --tk-grid-z-modal: 1000;
    --tk-grid-z-overlay: 1001;

    /* ---------------------------------------------------------------------
       SHADOWS
       --------------------------------------------------------------------- */
    --tk-grid-shadow-frozen: 2px 0 4px rgba(0, 0, 0, 0.08);
    --tk-grid-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);
    --tk-grid-shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --tk-grid-shadow-focus: 0 0 0 3px var(--primary-bg-light);
}

/* =============================================================================
   LIGHT THEME (Default)
   ============================================================================= */
:root,
[data-theme="light"] {
    /* Grid Container */
    --tk-grid-bg: var(--bg-surface, #ffffff);
    --tk-grid-bg-alt: var(--bg-surface-hover, #f9fafb);
    --tk-grid-border: var(--border-color, #e1e4ea);
    --tk-grid-border-light: rgba(0, 0, 0, 0.08);
    --tk-grid-line-color: rgba(0, 0, 0, 0.08);
    --tk-grid-header-line-color: rgba(0, 0, 0, 0.12);

    /* Header */
    --tk-grid-header-bg: transparent;
    --tk-grid-header-border: var(--border-color, #e1e4ea);
    --tk-grid-header-text: var(--text-secondary, #6c757d);
    --tk-grid-header-hover: var(--bg-surface-hover, #f0f0f0);

    /* Overlay */
    --tk-grid-overlay-bg: rgba(0, 0, 0, 0.5);

    /* Rows */
    --tk-grid-row-bg: var(--bg-surface, #ffffff);
    --tk-grid-row-bg-alt: rgba(0, 0, 0, 0.02);
    --tk-grid-row-hover: var(--grid-row-hover, rgba(46, 80, 144, 0.06));
    --tk-grid-row-selected: var(--grid-row-selected, rgba(46, 80, 144, 0.12));
    --tk-grid-row-active: rgba(46, 80, 144, 0.08);
    --tk-grid-row-border: var(--border-color, #e1e4ea);

    /* Cells */
    --tk-grid-cell-focus: rgba(46, 80, 144, 0.15);
    --tk-grid-cell-editing-bg: var(--bg-surface, #ffffff);
    --tk-grid-cell-editing-shadow: inset 0 0 0 2px var(--primary-color);

    /* Text */
    --tk-grid-text-primary: var(--text-primary, #212529);
    --tk-grid-text-secondary: var(--text-secondary, #6c757d);
    --tk-grid-text-muted: var(--text-tertiary, #9aa5b1);
    --tk-grid-text-placeholder: var(--text-tertiary, #9aa5b1);

    /* Interactive */
    --tk-grid-accent: var(--primary-color, #2e5090);
    --tk-grid-accent-hover: var(--primary-gradient-end, #3d68b0);
    --tk-grid-accent-light: var(--primary-bg-light, rgba(46, 80, 144, 0.1));

    /* Status Colors */
    --tk-grid-danger: var(--color-danger, #dc2626);
    --tk-grid-danger-bg: var(--color-danger-bg, #fee2e2);
    --tk-grid-danger-hover: #b91c1c;
    --tk-grid-warning: var(--color-warning, #f59e0b);
    --tk-grid-warning-bg: var(--color-warning-bg, #fef3c7);
    --tk-grid-success: var(--color-success, #10b981);
    --tk-grid-success-bg: var(--color-success-bg, #d1fae5);
    --tk-grid-info: var(--color-info, #3b82f6);
    --tk-grid-info-bg: var(--color-info-bg, #eff6ff);

    /* Scrollbar */
    --tk-grid-scrollbar-thumb: var(--border-color, #dee2e6);
    --tk-grid-scrollbar-thumb-hover: var(--text-tertiary, #9aa5b1);
    --tk-grid-scrollbar-track: transparent;

    /* Search Highlight */
    --tk-grid-search-match: rgba(254, 240, 138, 0.5);
    --tk-grid-search-current: rgba(251, 146, 60, 0.5);

    /* Pill/Tag Colors */
    --tk-grid-pill-bg: var(--bg-surface-hover, #f0f0f0);
    --tk-grid-pill-text: var(--text-secondary, #6c757d);

    /* Select Chevron */
    --tk-grid-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* =============================================================================
   DARK THEME
   ============================================================================= */
[data-theme="dark"] {
    /* Grid Container */
    --tk-grid-bg: var(--bg-surface, #161b22);
    --tk-grid-bg-alt: var(--bg-surface-hover, #21262d);
    --tk-grid-border: var(--border-color, #30363d);
    --tk-grid-border-light: rgba(255, 255, 255, 0.08);
    --tk-grid-line-color: rgba(255, 255, 255, 0.08);
    --tk-grid-header-line-color: rgba(255, 255, 255, 0.15);

    /* Overlay */
    --tk-grid-overlay-bg: rgba(0, 0, 0, 0.6);

    /* Header */
    --tk-grid-header-bg: var(--bg-surface-hover, #21262d);
    --tk-grid-header-border: var(--border-color, #30363d);
    --tk-grid-header-text: var(--text-secondary, #8b949e);
    --tk-grid-header-hover: var(--bg-surface-active, #30363d);

    /* Rows */
    --tk-grid-row-bg: var(--bg-surface, #161b22);
    --tk-grid-row-bg-alt: rgba(255, 255, 255, 0.02);
    --tk-grid-row-hover: var(--grid-row-hover, rgba(56, 139, 253, 0.08));
    --tk-grid-row-selected: var(--grid-row-selected, rgba(56, 139, 253, 0.15));
    --tk-grid-row-active: rgba(56, 139, 253, 0.1);
    --tk-grid-row-border: var(--border-color, #30363d);

    /* Cells */
    --tk-grid-cell-focus: rgba(56, 139, 253, 0.2);
    --tk-grid-cell-editing-bg: var(--bg-surface, #161b22);
    --tk-grid-cell-editing-shadow: inset 0 0 0 2px var(--primary-color);

    /* Text */
    --tk-grid-text-primary: var(--text-primary, #e6edf3);
    --tk-grid-text-secondary: var(--text-secondary, #8b949e);
    --tk-grid-text-muted: var(--text-tertiary, #484f58);
    --tk-grid-text-placeholder: var(--text-tertiary, #484f58);

    /* Interactive */
    --tk-grid-accent: var(--primary-color, #58a6ff);
    --tk-grid-accent-hover: var(--primary-gradient-end, #238636);
    --tk-grid-accent-light: var(--primary-bg-light, rgba(56, 139, 253, 0.15));

    /* Status Colors */
    --tk-grid-danger: var(--color-danger, #f87171);
    --tk-grid-danger-bg: var(--color-danger-bg, rgba(239, 68, 68, 0.12));
    --tk-grid-danger-hover: #f87171;
    --tk-grid-warning: var(--color-warning, #fbbf24);
    --tk-grid-warning-bg: var(--color-warning-bg, rgba(245, 158, 11, 0.12));
    --tk-grid-success: var(--color-success, #34d399);
    --tk-grid-success-bg: var(--color-success-bg, rgba(16, 185, 129, 0.12));
    --tk-grid-info: var(--color-info, #58a6ff);
    --tk-grid-info-bg: var(--color-info-bg, rgba(56, 139, 253, 0.12));

    /* Scrollbar */
    --tk-grid-scrollbar-thumb: var(--border-color, #30363d);
    --tk-grid-scrollbar-thumb-hover: var(--text-tertiary, #484f58);
    --tk-grid-scrollbar-track: transparent;

    /* Search Highlight */
    --tk-grid-search-match: rgba(250, 204, 21, 0.3);
    --tk-grid-search-current: rgba(251, 146, 60, 0.4);

    /* Pill/Tag Colors */
    --tk-grid-pill-bg: var(--bg-surface-active, #30363d);
    --tk-grid-pill-text: var(--text-secondary, #8b949e);

    /* Select Chevron */
    --tk-grid-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238b949e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");

    /* Shadows - Darker for dark theme */
    --tk-grid-shadow-frozen: 2px 0 6px rgba(0, 0, 0, 0.3);
    --tk-grid-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.4);
    --tk-grid-shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* =============================================================================
   BLUE THEME
   ============================================================================= */
[data-theme="blue"] {
    /* Grid Container */
    --tk-grid-bg: var(--bg-surface, #1e293b);
    --tk-grid-bg-alt: var(--bg-surface-hover, #334155);
    --tk-grid-border: var(--border-color, #334155);
    --tk-grid-border-light: rgba(255, 255, 255, 0.05);
    --tk-grid-line-color: rgba(255, 255, 255, 0.06);
    --tk-grid-header-line-color: rgba(255, 255, 255, 0.1);

    /* Overlay */
    --tk-grid-overlay-bg: rgba(0, 0, 0, 0.55);

    /* Header */
    --tk-grid-header-bg: var(--bg-surface-hover, #334155);
    --tk-grid-header-border: var(--border-color, #334155);
    --tk-grid-header-text: var(--text-secondary, #94a3b8);
    --tk-grid-header-hover: rgba(96, 165, 250, 0.1);

    /* Rows */
    --tk-grid-row-bg: var(--bg-surface, #1e293b);
    --tk-grid-row-bg-alt: rgba(255, 255, 255, 0.02);
    --tk-grid-row-hover: var(--grid-row-hover, rgba(59, 130, 246, 0.08));
    --tk-grid-row-selected: var(--grid-row-selected, rgba(59, 130, 246, 0.15));
    --tk-grid-row-active: rgba(59, 130, 246, 0.1);
    --tk-grid-row-border: var(--border-color, #334155);

    /* Cells */
    --tk-grid-cell-focus: rgba(96, 165, 250, 0.2);
    --tk-grid-cell-editing-bg: var(--bg-surface, #1e293b);
    --tk-grid-cell-editing-shadow: inset 0 0 0 2px var(--primary-color);

    /* Text */
    --tk-grid-text-primary: var(--text-primary, #f1f5f9);
    --tk-grid-text-secondary: var(--text-secondary, #94a3b8);
    --tk-grid-text-muted: var(--text-tertiary, #64748b);
    --tk-grid-text-placeholder: var(--text-tertiary, #64748b);

    /* Interactive */
    --tk-grid-accent: var(--primary-color, #60a5fa);
    --tk-grid-accent-hover: var(--primary-gradient-end, #6366f1);
    --tk-grid-accent-light: var(--primary-bg-light, rgba(37, 99, 235, 0.2));

    /* Status Colors */
    --tk-grid-danger: var(--color-danger, #f87171);
    --tk-grid-danger-bg: var(--color-danger-bg, rgba(239, 68, 68, 0.15));
    --tk-grid-danger-hover: #f87171;
    --tk-grid-warning: var(--color-warning, #fbbf24);
    --tk-grid-warning-bg: var(--color-warning-bg, rgba(245, 158, 11, 0.15));
    --tk-grid-success: var(--color-success, #34d399);
    --tk-grid-success-bg: var(--color-success-bg, rgba(16, 185, 129, 0.15));
    --tk-grid-info: var(--color-info, #60a5fa);
    --tk-grid-info-bg: var(--color-info-bg, rgba(59, 130, 246, 0.15));

    /* Scrollbar */
    --tk-grid-scrollbar-thumb: var(--border-color, #475569);
    --tk-grid-scrollbar-thumb-hover: var(--text-tertiary, #64748b);
    --tk-grid-scrollbar-track: transparent;

    /* Search Highlight */
    --tk-grid-search-match: rgba(250, 204, 21, 0.25);
    --tk-grid-search-current: rgba(251, 146, 60, 0.35);

    /* Pill/Tag Colors */
    --tk-grid-pill-bg: rgba(96, 165, 250, 0.15);
    --tk-grid-pill-text: var(--text-secondary, #94a3b8);

    /* Select Chevron */
    --tk-grid-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");

    /* Shadows */
    --tk-grid-shadow-frozen: 2px 0 6px rgba(0, 0, 0, 0.25);
    --tk-grid-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.35);
    --tk-grid-shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
}

/* =============================================================================
   GUNMETAL THEME
   ============================================================================= */
[data-theme="gunmetal"] {
    /* Grid Container */
    --tk-grid-bg: var(--bg-surface, #2b2f38);
    --tk-grid-bg-alt: var(--bg-surface-hover, #404652);
    --tk-grid-border: var(--border-color, rgba(255, 255, 255, 0.15));
    --tk-grid-border-light: rgba(255, 255, 255, 0.08);
    --tk-grid-line-color: rgba(255, 255, 255, 0.07);
    --tk-grid-header-line-color: rgba(255, 255, 255, 0.12);

    /* Overlay */
    --tk-grid-overlay-bg: rgba(0, 0, 0, 0.6);

    /* Header */
    --tk-grid-header-bg: var(--bg-surface-hover, #404652);
    --tk-grid-header-border: var(--border-color, rgba(255, 255, 255, 0.15));
    --tk-grid-header-text: var(--text-secondary, #aeb5bc);
    --tk-grid-header-hover: rgba(255, 255, 255, 0.05);

    /* Rows */
    --tk-grid-row-bg: var(--bg-surface, #2b2f38);
    --tk-grid-row-bg-alt: rgba(255, 255, 255, 0.02);
    --tk-grid-row-hover: var(--grid-row-hover, rgba(255, 255, 255, 0.04));
    --tk-grid-row-selected: var(--grid-row-selected, rgba(255, 255, 255, 0.08));
    --tk-grid-row-active: rgba(255, 255, 255, 0.06);
    --tk-grid-row-border: var(--border-color, rgba(255, 255, 255, 0.1));

    /* Cells */
    --tk-grid-cell-focus: rgba(209, 213, 219, 0.15);
    --tk-grid-cell-editing-bg: var(--bg-surface, #2b2f38);
    --tk-grid-cell-editing-shadow: inset 0 0 0 2px var(--primary-color);

    /* Text */
    --tk-grid-text-primary: var(--text-primary, #f3f4f6);
    --tk-grid-text-secondary: var(--text-secondary, #aeb5bc);
    --tk-grid-text-muted: var(--text-tertiary, #6e7681);
    --tk-grid-text-placeholder: var(--text-tertiary, #6e7681);

    /* Interactive */
    --tk-grid-accent: var(--primary-color, #64748b);
    --tk-grid-accent-hover: var(--primary-gradient-end, #334155);
    --tk-grid-accent-light: var(--primary-bg-light, rgba(255, 255, 255, 0.1));

    /* Status Colors */
    --tk-grid-danger: var(--color-danger, #f87171);
    --tk-grid-danger-bg: var(--color-danger-bg, rgba(239, 68, 68, 0.12));
    --tk-grid-danger-hover: #fca5a5;
    --tk-grid-warning: var(--color-warning, #fbbf24);
    --tk-grid-warning-bg: var(--color-warning-bg, rgba(245, 158, 11, 0.12));
    --tk-grid-success: var(--color-success, #34d399);
    --tk-grid-success-bg: var(--color-success-bg, rgba(16, 185, 129, 0.12));
    --tk-grid-info: var(--color-info, #94a3b8);
    --tk-grid-info-bg: var(--color-info-bg, rgba(148, 163, 184, 0.12));

    /* Scrollbar */
    --tk-grid-scrollbar-thumb: rgba(255, 255, 255, 0.15);
    --tk-grid-scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
    --tk-grid-scrollbar-track: transparent;

    /* Search Highlight */
    --tk-grid-search-match: rgba(250, 204, 21, 0.25);
    --tk-grid-search-current: rgba(251, 146, 60, 0.35);

    /* Pill/Tag Colors */
    --tk-grid-pill-bg: rgba(255, 255, 255, 0.1);
    --tk-grid-pill-text: var(--text-secondary, #aeb5bc);

    /* Select Chevron */
    --tk-grid-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23aeb5bc' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");

    /* Shadows - Sharp for metallic feel */
    --tk-grid-shadow-frozen: 2px 0 6px rgba(0, 0, 0, 0.4);
    --tk-grid-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.5);
    --tk-grid-shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

/* =============================================================================
   GLOBAL GRID STYLES
   =============================================================================
   These apply the theme variables to all TkDataGrid components consistently.
   ============================================================================= */

/* Grid Container Global Styling */
.tk-datagrid,
.tk-data-grid {
    font-family: var(--tk-grid-font-family);
    font-size: var(--tk-grid-font-size);
    color: var(--tk-grid-text-primary);
    background: var(--tk-grid-bg);
    border-color: var(--tk-grid-border);
}

/* Scrollbar Styling for All Grid Elements */
.tk-datagrid ::-webkit-scrollbar,
.tk-data-grid ::-webkit-scrollbar,
.tk-datagrid-body-wrapper::-webkit-scrollbar,
.tk-grid-scroll-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.tk-datagrid ::-webkit-scrollbar-track,
.tk-data-grid ::-webkit-scrollbar-track,
.tk-datagrid-body-wrapper::-webkit-scrollbar-track,
.tk-grid-scroll-container::-webkit-scrollbar-track {
    background: var(--tk-grid-scrollbar-track);
}

.tk-datagrid ::-webkit-scrollbar-thumb,
.tk-data-grid ::-webkit-scrollbar-thumb,
.tk-datagrid-body-wrapper::-webkit-scrollbar-thumb,
.tk-grid-scroll-container::-webkit-scrollbar-thumb {
    background: var(--tk-grid-scrollbar-thumb);
    border-radius: 4px;
}

.tk-datagrid ::-webkit-scrollbar-thumb:hover,
.tk-data-grid ::-webkit-scrollbar-thumb:hover,
.tk-datagrid-body-wrapper::-webkit-scrollbar-thumb:hover,
.tk-grid-scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--tk-grid-scrollbar-thumb-hover);
}

.tk-datagrid ::-webkit-scrollbar-corner,
.tk-data-grid ::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox Scrollbar */
.tk-datagrid,
.tk-data-grid,
.tk-datagrid-body-wrapper,
.tk-grid-scroll-container {
    scrollbar-width: thin;
    scrollbar-color: var(--tk-grid-scrollbar-thumb) var(--tk-grid-scrollbar-track);
}

/* =============================================================================
   FOCUS STATES
   =============================================================================
   Consistent focus indicators across all themes.
   ============================================================================= */

.tk-datagrid:focus,
.tk-data-grid:focus {
    outline: none;
    border-color: var(--tk-grid-accent);
    box-shadow: var(--tk-grid-shadow-focus);
}

.tk-datagrid:focus-visible,
.tk-data-grid:focus-visible,
.tk-grid-cell:focus-visible,
.tk-column-header:focus-visible {
    outline: 2px solid var(--tk-grid-accent);
    outline-offset: -2px;
}

/* =============================================================================
   SELECTION STATES
   =============================================================================
   Consistent selection styling across all themes.
   ============================================================================= */

::selection {
    background-color: var(--tk-grid-accent);
    color: white;
}

::-moz-selection {
    background-color: var(--tk-grid-accent);
    color: white;
}

/* =============================================================================
   ANIMATIONS
   =============================================================================
   Grid-specific animations that respect reduced motion preferences.
   ============================================================================= */

@keyframes tk-grid-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes tk-grid-slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tk-grid-slideUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tk-grid-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes tk-grid-spin {
    to { transform: rotate(360deg); }
}

@keyframes tk-grid-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes tk-grid-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .tk-datagrid *,
    .tk-data-grid * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =============================================================================
   PRINT STYLES
   =============================================================================
   Optimized printing for grid content.
   ============================================================================= */

@media print {
    .tk-datagrid,
    .tk-data-grid {
        border: 1px solid #000;
        background: #fff !important;
        color: #000 !important;
    }

    .tk-datagrid-toolbar,
    .tk-datagrid-footer,
    .tk-grid-toolbar,
    .tk-grid-footer,
    .tk-column-resizer,
    .tk-column-menu-btn,
    .tk-add-column-btn {
        display: none !important;
    }

    .tk-datagrid-body-wrapper,
    .tk-grid-scroll-container {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    .tk-datagrid-row {
        page-break-inside: avoid;
    }

    .tk-grid-header,
    .tk-datagrid-header {
        position: static !important;
    }
}

/* =============================================================================
   HIGH CONTRAST MODE
   =============================================================================
   Accessibility enhancements for high contrast displays.
   ============================================================================= */

@media (prefers-contrast: high) {
    .tk-datagrid,
    .tk-data-grid {
        border-width: 2px;
    }

    .tk-datagrid-row.selected {
        outline: 2px solid var(--tk-grid-accent);
        outline-offset: -2px;
    }

    .tk-grid-cell:focus,
    .tk-grid-cell.active {
        outline-width: 3px;
    }

    .tk-column-resizer:hover,
    .tk-column-resizer.resizing {
        background: var(--tk-grid-accent);
        width: 6px;
    }
}

/* =============================================================================
   RTL (Right-to-Left) SUPPORT
   =============================================================================
   Styles for RTL language layouts.
   ============================================================================= */

[dir="rtl"] .tk-datagrid,
[dir="rtl"] .tk-data-grid,
.tk-datagrid[dir="rtl"],
.tk-data-grid[dir="rtl"] {
    direction: rtl;
}

[dir="rtl"] .tk-grid-cell,
[dir="rtl"] .tk-column-header {
    border-right: none;
    border-left: 1px solid var(--tk-grid-border);
}

[dir="rtl"] .tk-grid-cell.frozen,
[dir="rtl"] .tk-column-header.frozen {
    left: auto;
    right: 0;
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.08);
}

[dir="rtl"] .tk-column-resizer {
    right: auto;
    left: 0;
}

[dir="rtl"] .tk-cell-number,
[dir="rtl"] .tk-cell-currency {
    text-align: left;
}

/* =============================================================================
   PHASE 3.5 NUCLEAR OPTION - GLOBAL GRID STYLING
   =============================================================================
   These rules bypass scoped CSS isolation to ensure grid styling always works.
   Added 2026-02-03 to fix CSS not reaching browser due to stale CSS bundle.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   ROW AND CELL GRID LINES
   ----------------------------------------------------------------------------- */

/* TkGridBody rows (.tk-datagrid-row) - horizontal grid lines */
.tk-datagrid .tk-datagrid-row {
    min-height: var(--tk-grid-row-height, 32px);
    height: var(--tk-grid-row-height, 32px);
    border-bottom: 1px solid var(--tk-grid-line-color, rgba(255, 255, 255, 0.08));
    display: flex;
    align-items: stretch;
    background: var(--tk-grid-row-bg);
    transition: background-color var(--tk-grid-transition-fast, 0.1s ease);
}

.tk-datagrid .tk-datagrid-row:last-child {
    border-bottom: none;
}

/* Cell vertical grid lines */
.tk-datagrid .tk-datagrid-cell {
    border-right: 1px solid var(--tk-grid-line-color, rgba(255, 255, 255, 0.08));
    padding: var(--tk-grid-cell-padding-y, 4px) var(--tk-grid-cell-padding-x, 8px);
    display: flex;
    align-items: center;
    overflow: hidden;
    min-width: 0;
}

.tk-datagrid .tk-datagrid-cell:last-child {
    border-right: none;
}

/* TkGridRow cells (.tk-grid-cell) - vertical grid lines */
.tk-datagrid .tk-grid-cell,
.tk-data-grid .tk-grid-cell {
    border-right: 1px solid var(--tk-grid-line-color, rgba(255, 255, 255, 0.08));
}

.tk-datagrid .tk-grid-cell:last-child,
.tk-data-grid .tk-grid-cell:last-child {
    border-right: none;
}

/* -----------------------------------------------------------------------------
   HEADER STYLING
   ----------------------------------------------------------------------------- */

.tk-datagrid .tk-grid-header-row {
    height: var(--tk-grid-header-height, 32px);
    min-height: var(--tk-grid-header-height, 32px);
    display: flex;
    align-items: stretch;
    background: var(--tk-grid-header-bg);
    border-bottom: 1px solid var(--tk-grid-header-line-color, rgba(255, 255, 255, 0.12));
}

.tk-datagrid .tk-grid-header-cell,
.tk-datagrid .tk-column-header {
    font-size: var(--tk-grid-header-font-size, 12px);
    font-weight: var(--tk-grid-header-font-weight, 500);
    color: var(--tk-grid-header-text);
    text-transform: none;
    border-right: 1px solid var(--tk-grid-line-color, rgba(255, 255, 255, 0.08));
}

.tk-datagrid .tk-grid-header-cell:last-child,
.tk-datagrid .tk-column-header:last-child {
    border-right: none;
}

/* -----------------------------------------------------------------------------
   FOOTER STYLING
   ----------------------------------------------------------------------------- */

.tk-datagrid .tk-datagrid-footer {
    min-height: var(--tk-grid-footer-height, 28px);
    padding: 4px 8px;
    font-size: var(--tk-grid-font-size-sm, 12px);
    color: var(--tk-grid-text-secondary);
    background: var(--tk-grid-header-bg);
    border-top: 1px solid var(--tk-grid-header-line-color, rgba(255, 255, 255, 0.12));
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* -----------------------------------------------------------------------------
   ROW HOVER EFFECT
   ----------------------------------------------------------------------------- */

.tk-datagrid .tk-datagrid-row:hover {
    background: var(--tk-grid-row-hover, rgba(255, 255, 255, 0.03));
}

/* -----------------------------------------------------------------------------
   SELECTED ROW STYLING
   ----------------------------------------------------------------------------- */

.tk-datagrid .tk-datagrid-row.tk-datagrid-row-selected,
.tk-datagrid .tk-datagrid-row.selected {
    background: var(--tk-grid-row-selected, rgba(56, 139, 253, 0.15));
}

/* -----------------------------------------------------------------------------
   SCROLLBAR GUTTER FIX FOR COLUMN ALIGNMENT
   ----------------------------------------------------------------------------- */

/* Reserve space for scrollbar to prevent header/body misalignment */
.tk-datagrid .tk-datagrid-body-wrapper,
.tk-datagrid .tk-datagrid-body,
.tk-datagrid .tk-grid-body {
    scrollbar-gutter: stable;
}

.tk-datagrid .tk-grid-header {
    scrollbar-gutter: stable;
    padding-right: 0; /* Let scrollbar-gutter handle the space */
}

/* Fallback for browsers without scrollbar-gutter support */
@supports not (scrollbar-gutter: stable) {
    .tk-datagrid .tk-grid-header {
        padding-right: 8px; /* Standard scrollbar width */
    }
}

/* -----------------------------------------------------------------------------
   CHECKBOX COLUMN ALIGNMENT FIX
   ----------------------------------------------------------------------------- */

/* Ensure consistent checkbox width between header and body */
.tk-datagrid .tk-datagrid-checkbox-cell,
.tk-datagrid .tk-header-checkbox-cell {
    width: var(--tk-grid-checkbox-width, 36px);
    min-width: var(--tk-grid-checkbox-width, 36px);
    max-width: var(--tk-grid-checkbox-width, 36px);
    flex-shrink: 0;
    justify-content: center;
}

/* Row number column consistency */
.tk-datagrid .tk-datagrid-row-number-cell {
    width: var(--tk-grid-row-number-width, 44px);
    min-width: var(--tk-grid-row-number-width, 44px);
    max-width: var(--tk-grid-row-number-width, 44px);
    flex-shrink: 0;
    justify-content: center;
    color: var(--tk-grid-text-muted);
    font-size: var(--tk-grid-font-size-xs, 11px);
}