/* ============================================
   RSL Smart Table Component
   Version: 1.0.0
   Description: Premium data table with sorting, filtering,
   pagination, export, and full accessibility support
   ============================================ */

/* ===========================================
   CSS Custom Properties
   =========================================== */
:root {
    /* Core colors */
    --rsl-table-bg: #ffffff;
    --rsl-table-border: #e2e8f0;
    --rsl-table-header-bg: #f8fafc;
    --rsl-table-header-text: #1e293b;
    --rsl-table-row-hover: #f1f5f9;
    --rsl-table-row-stripe: #fafbfc;
    --rsl-table-text: #334155;
    --rsl-table-text-muted: #64748b;

    /* Selection */
    --rsl-table-selected-bg: rgba(110, 123, 255, 0.1);
    --rsl-table-selected-border: #6E7BFF;

    /* Sorting */
    --rsl-table-sort-active: #6E7BFF;
    --rsl-table-sort-indicator: #94a3b8;

    /* Filters */
    --rsl-table-filter-bg: #ffffff;
    --rsl-table-filter-border: #d1d5db;
    --rsl-table-filter-focus: #6E7BFF;

    /* Export button */
    --rsl-table-export-bg: #10b981;
    --rsl-table-export-hover: #059669;

    /* Status colors */
    --rsl-table-status-success: #10b981;
    --rsl-table-status-warning: #f59e0b;
    --rsl-table-status-error: #ef4444;
    --rsl-table-status-info: #3b82f6;

    /* Spacing */
    --rsl-table-cell-padding: 0.875rem 1rem;
    --rsl-table-header-padding: 1rem;
    --rsl-table-border-radius: 8px;

    /* Shadows */
    --rsl-table-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --rsl-table-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ===========================================
   Dark Mode Variables
   =========================================== */
[data-theme="dark"] {
    --rsl-table-bg: #1e293b;
    --rsl-table-border: #334155;
    --rsl-table-header-bg: #0f172a;
    --rsl-table-header-text: #f1f5f9;
    --rsl-table-row-hover: #334155;
    --rsl-table-row-stripe: #1a2332;
    --rsl-table-text: #e2e8f0;
    --rsl-table-text-muted: #94a3b8;
    --rsl-table-selected-bg: rgba(110, 123, 255, 0.2);
    --rsl-table-filter-bg: #0f172a;
    --rsl-table-filter-border: #475569;
}

/* Dark mode - ensure white text on blue buttons */
[data-theme="dark"] .rsl-smart-table-btn-export,
[data-theme="dark"] .rsl-smart-table-btn-export:hover,
[data-theme="dark"] .rsl-smart-table-scope-btn.active,
[data-theme="dark"] .rsl-smart-table-pagination button.active,
[data-theme="dark"] .rsl-smart-table-selection-bar .rsl-smart-table-btn {
    color: #ffffff !important;
}

/* ===========================================
   Smart Table Container
   =========================================== */
.rsl-smart-table-container {
    position: relative;
    background: var(--rsl-table-bg);
    border: 1px solid var(--rsl-table-border);
    border-radius: var(--rsl-table-border-radius);
    box-shadow: var(--rsl-table-shadow);
    overflow: hidden;
}

/* ===========================================
   Table Toolbar
   =========================================== */
.rsl-smart-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--rsl-table-header-bg);
    border-bottom: 1px solid var(--rsl-table-border);
}

.rsl-smart-table-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 200px;
}

.rsl-smart-table-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ===========================================
   Global Search
   =========================================== */
.rsl-smart-table-search {
    position: relative;
    flex: 1;
    max-width: 320px;
}

.rsl-smart-table-search input {
    width: 100%;
    padding: 0.625rem 1rem 0.625rem 2.5rem;
    border: 1px solid var(--rsl-table-filter-border);
    border-radius: 6px;
    background: var(--rsl-table-filter-bg);
    color: var(--rsl-table-text);
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rsl-smart-table-search input:focus {
    outline: none;
    border-color: var(--rsl-table-filter-focus);
    box-shadow: 0 0 0 3px rgba(110, 123, 255, 0.15);
}

.rsl-smart-table-search input::placeholder {
    color: var(--rsl-table-text-muted);
}

.rsl-smart-table-search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rsl-table-text-muted);
    pointer-events: none;
    font-size: 0.875rem;
}

.rsl-smart-table-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--rsl-table-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    display: none;
    line-height: 1;
}

.rsl-smart-table-search-clear:hover {
    color: var(--rsl-table-text);
    background: rgba(0, 0, 0, 0.05);
}

.rsl-smart-table-search.has-value .rsl-smart-table-search-clear {
    display: block;
}

/* ===========================================
   Toolbar Buttons
   =========================================== */
.rsl-smart-table-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--rsl-table-border);
    border-radius: 6px;
    background: var(--rsl-table-bg);
    color: var(--rsl-table-text);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.rsl-smart-table-btn:hover {
    background: var(--rsl-table-row-hover);
    border-color: var(--rsl-table-sort-active);
}

.rsl-smart-table-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(110, 123, 255, 0.15);
}

.rsl-smart-table-btn i {
    font-size: 0.875rem;
}

/* Export Button - Accent Style */
.rsl-smart-table-btn-export {
    background: var(--rsl-table-export-bg);
    border-color: var(--rsl-table-export-bg);
    color: white;
}

.rsl-smart-table-btn-export:hover {
    background: var(--rsl-table-export-hover);
    border-color: var(--rsl-table-export-hover);
}

/* Button with dropdown */
.rsl-smart-table-btn-dropdown {
    position: relative;
}

.rsl-smart-table-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: var(--rsl-table-bg);
    border: 1px solid var(--rsl-table-border);
    border-radius: 6px;
    box-shadow: var(--rsl-table-shadow-hover);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s;
}

.rsl-smart-table-btn-dropdown.open .rsl-smart-table-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rsl-smart-table-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border: none;
    background: none;
    color: var(--rsl-table-text);
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.rsl-smart-table-dropdown-item:hover {
    background: var(--rsl-table-row-hover);
}

.rsl-smart-table-dropdown-item:first-child {
    border-radius: 5px 5px 0 0;
}

.rsl-smart-table-dropdown-item:last-child {
    border-radius: 0 0 5px 5px;
}

.rsl-smart-table-dropdown-divider {
    height: 1px;
    margin: 0.25rem 0;
    background: var(--rsl-table-border);
}

/* Export Dropdown Header */
.rsl-smart-table-dropdown-header {
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rsl-table-header-text);
    opacity: 0.7;
}

/* Export Scope Buttons */
.rsl-smart-table-export-scope {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem 0.5rem;
}

.rsl-smart-table-scope-btn {
    flex: 1;
    justify-content: center;
    padding: 0.5rem 0.25rem !important;
    font-size: 0.75rem !important;
    border-radius: 4px;
    border: 1px solid var(--rsl-table-border) !important;
    transition: all 0.15s;
}

.rsl-smart-table-scope-btn:hover {
    background: var(--rsl-table-row-hover);
}

.rsl-smart-table-scope-btn.active {
    background: var(--rsl-table-sort-active);
    border-color: var(--rsl-table-sort-active) !important;
    color: white;
}

.rsl-smart-table-scope-btn i {
    font-size: 0.75rem;
}

/* ===========================================
   Column Visibility Panel
   =========================================== */
.rsl-smart-table-columns-panel {
    padding: 0.5rem;
}

.rsl-smart-table-column-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
}

.rsl-smart-table-column-toggle:hover {
    background: var(--rsl-table-row-hover);
}

.rsl-smart-table-column-toggle input {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--rsl-table-sort-active);
}

.rsl-smart-table-column-toggle label {
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--rsl-table-text);
}

/* ===========================================
   Table Wrapper (for scroll)
   =========================================== */
.rsl-smart-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===========================================
   Main Table Styles
   =========================================== */
table[data-rsl-smart-table],
.rsl-smart-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    color: var(--rsl-table-text);
}

/* ===========================================
   Table Header
   =========================================== */
table[data-rsl-smart-table] thead,
.rsl-smart-table thead {
    background: var(--rsl-table-header-bg);
}

table[data-rsl-smart-table] thead th,
.rsl-smart-table thead th {
    padding: var(--rsl-table-header-padding);
    text-align: left;
    font-weight: 600;
    color: var(--rsl-table-header-text);
    border-bottom: 2px solid var(--rsl-table-border);
    white-space: nowrap;
    position: relative;
    user-select: none;
}

/* Sortable Headers */
table[data-rsl-smart-table] thead th[data-sortable],
.rsl-smart-table thead th[data-sortable] {
    cursor: pointer;
    padding-right: 2rem;
    transition: background 0.15s, color 0.15s;
}

table[data-rsl-smart-table] thead th[data-sortable]:hover,
.rsl-smart-table thead th[data-sortable]:hover {
    background: rgba(110, 123, 255, 0.08);
}

table[data-rsl-smart-table] thead th[data-sortable]:focus,
.rsl-smart-table thead th[data-sortable]:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--rsl-table-sort-active);
}

/* Sort Icons */
table[data-rsl-smart-table] thead th[data-sortable]::after,
.rsl-smart-table thead th[data-sortable]::after {
    content: '\f0dc'; /* fas fa-sort */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--rsl-table-sort-indicator);
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
}

table[data-rsl-smart-table] thead th[data-sortable]:hover::after,
.rsl-smart-table thead th[data-sortable]:hover::after {
    opacity: 1;
}

/* Sort Active States */
table[data-rsl-smart-table] thead th[data-sort="asc"]::after,
.rsl-smart-table thead th[data-sort="asc"]::after {
    content: '\f0de'; /* fas fa-sort-up */
    color: var(--rsl-table-sort-active);
    opacity: 1;
}

table[data-rsl-smart-table] thead th[data-sort="desc"]::after,
.rsl-smart-table thead th[data-sort="desc"]::after {
    content: '\f0dd'; /* fas fa-sort-down */
    color: var(--rsl-table-sort-active);
    opacity: 1;
}

table[data-rsl-smart-table] thead th[data-sort],
.rsl-smart-table thead th[data-sort] {
    color: var(--rsl-table-sort-active);
}

/* Multi-sort indicator */
table[data-rsl-smart-table] thead th[data-sort-order]::before,
.rsl-smart-table thead th[data-sort-order]::before {
    content: attr(data-sort-order);
    position: absolute;
    right: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.625rem;
    background: var(--rsl-table-sort-active);
    color: white;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* ===========================================
   Column Filters (in header)
   =========================================== */
.rsl-smart-table-filter {
    margin-top: 0.5rem;
}

.rsl-smart-table-filter input,
.rsl-smart-table-filter select {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--rsl-table-filter-border);
    border-radius: 4px;
    background: var(--rsl-table-filter-bg);
    color: var(--rsl-table-text);
    font-size: 0.75rem;
}

.rsl-smart-table-filter input:focus,
.rsl-smart-table-filter select:focus {
    outline: none;
    border-color: var(--rsl-table-filter-focus);
    box-shadow: 0 0 0 2px rgba(110, 123, 255, 0.15);
}

/* ===========================================
   Table Body
   =========================================== */
table[data-rsl-smart-table] tbody tr,
.rsl-smart-table tbody tr {
    border-bottom: 1px solid var(--rsl-table-border);
    transition: background 0.15s;
}

table[data-rsl-smart-table] tbody tr:hover,
.rsl-smart-table tbody tr:hover {
    background: var(--rsl-table-row-hover);
}

/* Striped rows */
table[data-rsl-smart-table][data-striped] tbody tr:nth-child(even),
.rsl-smart-table[data-striped] tbody tr:nth-child(even) {
    background: var(--rsl-table-row-stripe);
}

table[data-rsl-smart-table][data-striped] tbody tr:nth-child(even):hover,
.rsl-smart-table[data-striped] tbody tr:nth-child(even):hover {
    background: var(--rsl-table-row-hover);
}

/* Selected rows */
table[data-rsl-smart-table] tbody tr.rsl-row-selected,
.rsl-smart-table tbody tr.rsl-row-selected {
    background: var(--rsl-table-selected-bg) !important;
    box-shadow: inset 3px 0 0 var(--rsl-table-selected-border);
}

/* Table cells */
table[data-rsl-smart-table] tbody td,
.rsl-smart-table tbody td {
    padding: var(--rsl-table-cell-padding);
    vertical-align: middle;
}

/* Last row no border */
table[data-rsl-smart-table] tbody tr:last-child,
.rsl-smart-table tbody tr:last-child {
    border-bottom: none;
}

/* ===========================================
   Selection Checkbox Column
   =========================================== */
table[data-rsl-smart-table] th.rsl-select-col,
table[data-rsl-smart-table] td.rsl-select-col,
.rsl-smart-table th.rsl-select-col,
.rsl-smart-table td.rsl-select-col {
    width: 3rem;
    text-align: center;
    padding-left: 1rem;
    padding-right: 0.5rem;
}

.rsl-smart-table-checkbox {
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
    accent-color: var(--rsl-table-sort-active);
}

/* Select all checkbox styling */
.rsl-smart-table-select-all {
    position: relative;
}

.rsl-smart-table-select-all.indeterminate::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.5rem;
    height: 2px;
    background: var(--rsl-table-sort-active);
    pointer-events: none;
}

/* ===========================================
   Sticky Header
   =========================================== */

/* When table is in a scrollable container, make header sticky */
table[data-rsl-smart-table][data-sticky-header] thead,
.rsl-smart-table[data-sticky-header] thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--rsl-table-header-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Container with sticky header - make wrapper scrollable */
.rsl-smart-table-container[data-sticky-header] .rsl-smart-table-wrapper {
    max-height: 500px;
    overflow-y: auto;
}

.rsl-smart-table-container[data-sticky-header] table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--rsl-table-header-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Ensure header cells have background for sticky to look correct */
.rsl-smart-table-container[data-sticky-header] table thead th {
    background: var(--rsl-table-header-bg);
}

/* ===========================================
   Table Footer / Info Bar
   =========================================== */
.rsl-smart-table-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    background: var(--rsl-table-header-bg);
    border-top: 1px solid var(--rsl-table-border);
    font-size: 0.8125rem;
    color: var(--rsl-table-text-muted);
}

.rsl-smart-table-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rsl-smart-table-info-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.rsl-smart-table-info-count {
    font-weight: 600;
    color: var(--rsl-table-text);
}

/* Page size selector */
.rsl-smart-table-page-size {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rsl-smart-table-page-size select {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--rsl-table-filter-border);
    border-radius: 4px;
    background: var(--rsl-table-filter-bg);
    color: var(--rsl-table-text);
    font-size: 0.8125rem;
    cursor: pointer;
}

.rsl-smart-table-page-size select:focus {
    outline: none;
    border-color: var(--rsl-table-filter-focus);
}

/* ===========================================
   Pagination (integrated)
   =========================================== */
.rsl-smart-table-pagination {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.rsl-smart-table-pagination button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border: 1px solid var(--rsl-table-border);
    border-radius: 4px;
    background: var(--rsl-table-bg);
    color: var(--rsl-table-text);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s;
}

.rsl-smart-table-pagination button:hover:not(:disabled) {
    background: var(--rsl-table-row-hover);
    border-color: var(--rsl-table-sort-active);
}

.rsl-smart-table-pagination button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(110, 123, 255, 0.15);
}

.rsl-smart-table-pagination button.active {
    background: var(--rsl-table-sort-active);
    border-color: var(--rsl-table-sort-active);
    color: white;
    font-weight: 600;
}

.rsl-smart-table-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rsl-smart-table-pagination-ellipsis {
    padding: 0 0.5rem;
    color: var(--rsl-table-text-muted);
}

/* ===========================================
   Selection Info Bar
   =========================================== */
.rsl-smart-table-selection-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: var(--rsl-table-selected-bg);
    border-bottom: 1px solid var(--rsl-table-selected-border);
}

.rsl-smart-table-selection-bar.visible {
    display: flex;
}

.rsl-smart-table-selection-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--rsl-table-sort-active);
    font-weight: 500;
}

.rsl-smart-table-selection-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ===========================================
   Empty State
   =========================================== */
.rsl-smart-table-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--rsl-table-text-muted);
}

.rsl-smart-table-empty-icon {
    font-size: 3rem;
    opacity: 0.5;
    margin-bottom: 1rem;
}

.rsl-smart-table-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--rsl-table-text);
    margin-bottom: 0.5rem;
}

.rsl-smart-table-empty-message {
    font-size: 0.875rem;
}

/* ===========================================
   Loading State
   =========================================== */
.rsl-smart-table-loading {
    position: relative;
    min-height: 200px;
}

.rsl-smart-table-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

[data-theme="dark"] .rsl-smart-table-loading::after {
    background: rgba(15, 23, 42, 0.8);
}

.rsl-smart-table-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--rsl-table-border);
    border-top-color: var(--rsl-table-sort-active);
    border-radius: 50%;
    animation: rsl-table-spin 0.8s linear infinite;
}

@keyframes rsl-table-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===========================================
   Search Highlight
   =========================================== */
.rsl-highlight {
    background: #fef08a;
    color: #854d0e;
    padding: 0.125rem 0.25rem;
    border-radius: 2px;
}

[data-theme="dark"] .rsl-highlight {
    background: #854d0e;
    color: #fef9c3;
}

/* ===========================================
   Data Type Formatting
   =========================================== */
td[data-type="number"],
td[data-type="currency"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

td[data-type="date"] {
    white-space: nowrap;
}

/* Currency formatting */
.rsl-currency {
    font-weight: 500;
}

.rsl-currency-positive {
    color: var(--rsl-table-status-success);
}

.rsl-currency-negative {
    color: var(--rsl-table-status-error);
}

/* Status badges */
.rsl-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.rsl-status-badge::before {
    content: '';
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: currentColor;
}

.rsl-status-badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--rsl-table-status-success);
}

.rsl-status-badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--rsl-table-status-warning);
}

.rsl-status-badge-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--rsl-table-status-error);
}

.rsl-status-badge-info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--rsl-table-status-info);
}

/* ===========================================
   Column Resize Handle
   =========================================== */
.rsl-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s;
}

.rsl-resize-handle:hover,
.rsl-resize-handle.resizing {
    background: var(--rsl-table-sort-active);
}

/* ===========================================
   Responsive Card Mode
   =========================================== */
@media (max-width: 768px) {
    /* Toolbar stacks */
    .rsl-smart-table-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .rsl-smart-table-toolbar-left,
    .rsl-smart-table-toolbar-right {
        width: 100%;
    }

    .rsl-smart-table-search {
        max-width: none;
    }

    .rsl-smart-table-toolbar-right {
        justify-content: flex-start;
    }

    /* Card mode */
    table[data-rsl-smart-table][data-responsive="card"] thead,
    .rsl-smart-table[data-responsive="card"] thead {
        display: none;
    }

    table[data-rsl-smart-table][data-responsive="card"] tbody,
    .rsl-smart-table[data-responsive="card"] tbody {
        display: block;
    }

    table[data-rsl-smart-table][data-responsive="card"] tbody tr,
    .rsl-smart-table[data-responsive="card"] tbody tr {
        display: block;
        margin: 0.75rem;
        padding: 1rem;
        border: 1px solid var(--rsl-table-border);
        border-radius: 8px;
        background: var(--rsl-table-bg);
        box-shadow: var(--rsl-table-shadow);
    }

    table[data-rsl-smart-table][data-responsive="card"] tbody td,
    .rsl-smart-table[data-responsive="card"] tbody td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        padding: 0.5rem 0;
        border: none;
        border-bottom: 1px solid var(--rsl-table-border);
        text-align: left;
    }

    table[data-rsl-smart-table][data-responsive="card"] tbody td:last-child,
    .rsl-smart-table[data-responsive="card"] tbody td:last-child {
        border-bottom: none;
    }

    table[data-rsl-smart-table][data-responsive="card"] tbody td::before,
    .rsl-smart-table[data-responsive="card"] tbody td::before {
        content: attr(data-label);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--rsl-table-header-text);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        opacity: 0.8;
    }

    /* Hide select column in card mode */
    table[data-rsl-smart-table][data-responsive="card"] .rsl-select-col,
    .rsl-smart-table[data-responsive="card"] .rsl-select-col {
        display: none;
    }

    /* Footer adjustments */
    .rsl-smart-table-footer {
        flex-direction: column;
        text-align: center;
    }

    .rsl-smart-table-pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ===========================================
   Print Styles
   =========================================== */
@media print {
    .rsl-smart-table-toolbar,
    .rsl-smart-table-footer,
    .rsl-smart-table-selection-bar,
    .rsl-select-col {
        display: none !important;
    }

    .rsl-smart-table-container {
        border: none;
        box-shadow: none;
    }

    table[data-rsl-smart-table] tbody tr,
    .rsl-smart-table tbody tr {
        page-break-inside: avoid;
    }

    table[data-rsl-smart-table] thead,
    .rsl-smart-table thead {
        display: table-header-group;
    }
}

/* ===========================================
   Reduced Motion
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    .rsl-smart-table-spinner {
        animation: none;
    }

    .rsl-smart-table-dropdown,
    .rsl-smart-table-btn,
    table[data-rsl-smart-table] tbody tr,
    .rsl-smart-table tbody tr {
        transition: none;
    }
}

/* ===========================================
   Focus Visible (Keyboard Nav)
   =========================================== */
.rsl-smart-table-btn:focus-visible,
.rsl-smart-table-search input:focus-visible,
.rsl-smart-table-filter input:focus-visible,
.rsl-smart-table-filter select:focus-visible,
.rsl-smart-table-pagination button:focus-visible,
table[data-rsl-smart-table] thead th[data-sortable]:focus-visible {
    outline: 2px solid var(--rsl-table-sort-active);
    outline-offset: 2px;
}

/* Grid Navigation - Cell Focus */
table[data-rsl-smart-table] th.rsl-cell-focused,
table[data-rsl-smart-table] td.rsl-cell-focused,
.rsl-smart-table th.rsl-cell-focused,
.rsl-smart-table td.rsl-cell-focused {
    outline: 2px solid var(--rsl-table-sort-active);
    outline-offset: -2px;
    background: rgba(110, 123, 255, 0.1);
}

[data-theme="dark"] table[data-rsl-smart-table] th.rsl-cell-focused,
[data-theme="dark"] table[data-rsl-smart-table] td.rsl-cell-focused,
[data-theme="dark"] .rsl-smart-table th.rsl-cell-focused,
[data-theme="dark"] .rsl-smart-table td.rsl-cell-focused {
    background: rgba(110, 123, 255, 0.2);
}

/* Table focus indicator */
table[data-rsl-smart-table]:focus,
.rsl-smart-table:focus {
    outline: 2px solid var(--rsl-table-sort-active);
    outline-offset: 2px;
}

table[data-rsl-smart-table]:focus:not(:focus-visible),
.rsl-smart-table:focus:not(:focus-visible) {
    outline: none;
}

/* ===========================================
   Quick Filter Chips
   =========================================== */
.rsl-smart-table-quick-filters {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.rsl-smart-table-quick-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--rsl-table-border);
    border-radius: 9999px;
    background: var(--rsl-table-bg);
    color: var(--rsl-table-text);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.rsl-smart-table-quick-filter:hover {
    background: var(--rsl-table-row-hover);
    border-color: var(--rsl-table-sort-active);
}

.rsl-smart-table-quick-filter:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(110, 123, 255, 0.15);
}

.rsl-smart-table-quick-filter.active {
    background: var(--rsl-table-sort-active);
    border-color: var(--rsl-table-sort-active);
    color: white;
}

.rsl-smart-table-quick-filter i {
    font-size: 0.6875rem;
}

/* Colored chips */
.rsl-quick-filter-colored {
    border-color: var(--chip-color, var(--rsl-table-border));
    color: var(--chip-color, var(--rsl-table-text));
}

.rsl-quick-filter-colored:hover {
    background: color-mix(in srgb, var(--chip-color, var(--rsl-table-sort-active)) 10%, transparent);
}

.rsl-quick-filter-colored.active {
    background: var(--chip-color, var(--rsl-table-sort-active));
    border-color: var(--chip-color, var(--rsl-table-sort-active));
    color: white;
}

/* Clear filter button */
.rsl-quick-filter-clear {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

.rsl-quick-filter-clear:hover {
    background: #ef4444;
    color: white;
}

/* ===========================================
   Row Actions Column
   =========================================== */
table[data-rsl-smart-table] th.rsl-actions-col,
table[data-rsl-smart-table] td.rsl-actions-col,
.rsl-smart-table th.rsl-actions-col,
.rsl-smart-table td.rsl-actions-col {
    width: auto;
    white-space: nowrap;
    text-align: center;
}

.rsl-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.rsl-row-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--rsl-table-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.rsl-row-action-btn:hover {
    background: var(--rsl-table-row-hover);
    color: var(--rsl-table-text);
}

.rsl-row-action-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(110, 123, 255, 0.15);
}

/* Action button variants */
.rsl-row-action-view:hover {
    color: var(--rsl-table-status-info);
    background: rgba(59, 130, 246, 0.1);
}

.rsl-row-action-edit:hover {
    color: var(--rsl-table-status-warning);
    background: rgba(245, 158, 11, 0.1);
}

.rsl-row-action-delete:hover {
    color: var(--rsl-table-status-error);
    background: rgba(239, 68, 68, 0.1);
}

.rsl-row-action-copy:hover {
    color: var(--rsl-table-sort-active);
    background: rgba(110, 123, 255, 0.1);
}

.rsl-row-action-download:hover {
    color: var(--rsl-table-status-success);
    background: rgba(16, 185, 129, 0.1);
}

.rsl-row-action-archive:hover {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

/* ===========================================
   Toast Notifications
   =========================================== */
.rsl-smart-table-toast {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    background: var(--rsl-table-bg);
    border: 1px solid var(--rsl-table-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 0.8125rem;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s, transform 0.3s;
}

.rsl-smart-table-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.rsl-smart-table-toast i {
    font-size: 1rem;
}

/* Toast variants */
.rsl-toast-success {
    border-left: 3px solid var(--rsl-table-status-success);
}

.rsl-toast-success i {
    color: var(--rsl-table-status-success);
}

.rsl-toast-error {
    border-left: 3px solid var(--rsl-table-status-error);
}

.rsl-toast-error i {
    color: var(--rsl-table-status-error);
}

.rsl-toast-warning {
    border-left: 3px solid var(--rsl-table-status-warning);
}

.rsl-toast-warning i {
    color: var(--rsl-table-status-warning);
}

.rsl-toast-info {
    border-left: 3px solid var(--rsl-table-status-info);
}

.rsl-toast-info i {
    color: var(--rsl-table-status-info);
}

/* ===========================================
   Conditional Formatting
   =========================================== */

/* Cell badges */
.rsl-cell-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.rsl-badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--rsl-table-status-success);
}

.rsl-badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--rsl-table-status-warning);
}

.rsl-badge-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--rsl-table-status-error);
}

.rsl-badge-info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--rsl-table-status-info);
}

.rsl-badge-neutral {
    background: rgba(100, 116, 139, 0.1);
    color: var(--rsl-table-text-muted);
}

.rsl-badge-primary {
    background: rgba(110, 123, 255, 0.1);
    color: var(--rsl-table-sort-active);
}

/* Cell icons */
.rsl-cell-icon {
    margin-right: 0.375rem;
    font-size: 0.875rem;
}

/* Progress bars */
.rsl-cell-progress {
    position: relative;
    width: 100%;
    min-width: 80px;
    height: 20px;
    background: var(--rsl-table-border);
    border-radius: 4px;
    overflow: hidden;
}

.rsl-progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.rsl-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--rsl-table-text);
    text-shadow: 0 0 2px var(--rsl-table-bg);
}

/* Heat map colors for conditional formatting */
.rsl-heat-low {
    background: rgba(16, 185, 129, 0.2);
}

.rsl-heat-medium {
    background: rgba(245, 158, 11, 0.2);
}

.rsl-heat-high {
    background: rgba(239, 68, 68, 0.2);
}

/* Dark mode adjustments for conditional formatting */
[data-theme="dark"] .rsl-cell-progress {
    background: var(--rsl-table-border);
}

[data-theme="dark"] .rsl-progress-text {
    text-shadow: 0 0 2px var(--rsl-table-bg);
}

/* ===========================================
   Row Actions in Card Mode
   =========================================== */
@media (max-width: 768px) {
    table[data-rsl-smart-table][data-responsive="card"] .rsl-actions-col,
    .rsl-smart-table[data-responsive="card"] .rsl-actions-col {
        display: flex;
        justify-content: flex-start;
        padding-top: 0.75rem;
        margin-top: 0.5rem;
        border-top: 1px dashed var(--rsl-table-border);
    }

    table[data-rsl-smart-table][data-responsive="card"] .rsl-actions-col::before,
    .rsl-smart-table[data-responsive="card"] .rsl-actions-col::before {
        display: none;
    }

    .rsl-smart-table-quick-filters {
        width: 100%;
        justify-content: flex-start;
        margin-top: 0.5rem;
    }
}

/* ===========================================
   Inline Editing
   =========================================== */
.rsl-editing {
    padding: 0 !important;
    background: var(--rsl-table-selected-bg);
}

.rsl-inline-edit-input {
    width: 100%;
    height: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--rsl-table-sort-active);
    border-radius: 0;
    background: var(--rsl-table-bg);
    color: var(--rsl-table-text);
    font-size: inherit;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}

.rsl-inline-edit-input:focus {
    border-color: var(--rsl-table-sort-active);
    box-shadow: inset 0 0 0 1px var(--rsl-table-sort-active);
}

/* Inline edit hint */
table[data-inline-editing] tbody td {
    cursor: text;
}

table[data-inline-editing] tbody td:hover:not(.rsl-select-col):not(.rsl-actions-col):not(.rsl-expand-col):not(.rsl-editing) {
    background: var(--rsl-table-row-hover);
    outline: 1px dashed var(--rsl-table-border);
    outline-offset: -1px;
}

/* ===========================================
   Summary/Totals Row
   =========================================== */
.rsl-summary-row {
    background: var(--rsl-table-header-bg);
    border-top: 2px solid var(--rsl-table-border);
    font-weight: 600;
}

.rsl-summary-cell {
    padding: var(--rsl-table-cell-padding);
    color: var(--rsl-table-header-text);
}

.rsl-summary-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rsl-table-text-muted);
    margin-right: 0.25rem;
}

.rsl-summary-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--rsl-table-sort-active);
}

/* Dark mode summary */
[data-theme="dark"] .rsl-summary-row {
    background: var(--rsl-table-header-bg);
}

[data-theme="dark"] .rsl-summary-value {
    color: #a5b4fc;
}

/* ===========================================
   Row Expansion
   =========================================== */
.rsl-expand-col {
    width: 40px;
    text-align: center;
    padding: 0.5rem !important;
}

.rsl-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--rsl-table-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.rsl-expand-btn:hover {
    background: var(--rsl-table-row-hover);
    color: var(--rsl-table-sort-active);
}

.rsl-expand-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(110, 123, 255, 0.15);
}

.rsl-expand-btn i {
    font-size: 0.75rem;
    transition: transform 0.2s;
}

.rsl-row-expanded {
    background: var(--rsl-table-selected-bg) !important;
}

.rsl-row-expanded .rsl-expand-btn {
    color: var(--rsl-table-sort-active);
}

/* Expanded row panel */
.rsl-expanded-row {
    background: var(--rsl-table-row-stripe);
}

.rsl-expanded-content {
    padding: 1.5rem !important;
    border-left: 3px solid var(--rsl-table-sort-active);
}

.rsl-expanded-details {
    animation: rsl-expand-in 0.2s ease-out;
}

@keyframes rsl-expand-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rsl-expanded-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.rsl-expanded-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rsl-expanded-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rsl-table-text-muted);
}

.rsl-expanded-value {
    font-size: 0.9375rem;
    color: var(--rsl-table-text);
    word-break: break-word;
}

/* Dark mode expansion */
[data-theme="dark"] .rsl-expanded-row {
    background: rgba(110, 123, 255, 0.05);
}

[data-theme="dark"] .rsl-expanded-content {
    border-left-color: var(--rsl-table-sort-active);
}

/* Hide expand column in card mode */
@media (max-width: 768px) {
    table[data-rsl-smart-table][data-responsive="card"] .rsl-expand-col,
    .rsl-smart-table[data-responsive="card"] .rsl-expand-col {
        display: none;
    }

    table[data-rsl-smart-table][data-responsive="card"] .rsl-expanded-row,
    .rsl-smart-table[data-responsive="card"] .rsl-expanded-row {
        display: block;
        margin: -0.5rem 0.75rem 0.75rem;
        padding: 0;
        border: none;
    }

    table[data-rsl-smart-table][data-responsive="card"] .rsl-expanded-content,
    .rsl-smart-table[data-responsive="card"] .rsl-expanded-content {
        border-radius: 0 0 8px 8px;
        border: 1px solid var(--rsl-table-border);
        border-top: none;
    }

    /* Summary row in card mode */
    .rsl-summary-row {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1rem;
        margin: 0.75rem;
        border-radius: 8px;
        background: var(--rsl-table-header-bg);
    }

    .rsl-summary-cell {
        flex: 1 1 auto;
        min-width: 100px;
    }

    .rsl-summary-cell.rsl-select-col,
    .rsl-summary-cell.rsl-actions-col,
    .rsl-summary-cell.rsl-expand-col {
        display: none;
    }
}

/* ==========================================
   Column Resizing
   ========================================== */

.rsl-resizable {
    position: relative;
    padding-right: 18px !important; /* Make room for grip handle */
}

/* Grip handle container - ALWAYS VISIBLE */
.rsl-column-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 16px;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background-color 0.2s ease;
}

/* The grip dots pattern (2x3 dots) - Always visible */
.rsl-column-resize-handle::before {
    content: '';
    width: 6px;
    height: 14px;
    background-image: radial-gradient(circle, #999 1.5px, transparent 1.5px);
    background-size: 4px 5px;
    background-position: center;
    opacity: 0.6;
    transition: opacity 0.2s ease, background-image 0.2s ease;
}

/* Hover state - grip becomes more prominent */
.rsl-column-resize-handle:hover::before,
.rsl-column-resize-handle:focus::before {
    background-image: radial-gradient(circle, var(--rsl-table-sort-active, #6E7BFF) 1.5px, transparent 1.5px);
    opacity: 1;
}

/* Hover background highlight */
.rsl-column-resize-handle:hover,
.rsl-column-resize-handle:focus {
    background: rgba(110, 123, 255, 0.1);
}

/* Focus state for accessibility */
.rsl-column-resize-handle:focus {
    outline: 2px solid var(--rsl-table-sort-active, #6E7BFF);
    outline-offset: -2px;
}

/* Active resizing state */
.rsl-resizing-active {
    background: rgba(110, 123, 255, 0.2) !important;
}

.rsl-resizing-active::before {
    background-image: radial-gradient(circle, var(--rsl-table-sort-active, #6E7BFF) 2px, transparent 2px) !important;
    opacity: 1 !important;
}

/* Table in resizing mode */
.rsl-smart-table.rsl-resizing {
    user-select: none;
    cursor: col-resize;
}

.rsl-smart-table.rsl-resizing * {
    cursor: col-resize !important;
}

/* Separator line between header and grip */
.rsl-resizable::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--rsl-table-border, #dee2e6);
    opacity: 0.5;
    pointer-events: none;
}

/* Dark mode adjustments */
[data-theme="dark"] .rsl-column-resize-handle::before {
    background-image: radial-gradient(circle, #666 1.5px, transparent 1.5px);
}

[data-theme="dark"] .rsl-column-resize-handle:hover::before,
[data-theme="dark"] .rsl-column-resize-handle:focus::before {
    background-image: radial-gradient(circle, var(--rsl-table-sort-active, #6E7BFF) 1.5px, transparent 1.5px);
}

[data-theme="dark"] .rsl-resizable::after {
    background: rgba(255, 255, 255, 0.2);
}

/* ==========================================
   Column Reordering
   ========================================== */

.rsl-reorderable {
    cursor: move;
    user-select: none;
}

.rsl-reorderable:active {
    cursor: move;
}

/* Being dragged - faded and has dashed outline */
.rsl-dragging {
    opacity: 0.4;
    background: var(--rsl-table-row-hover, #f0f0f0) !important;
    outline: 2px dashed var(--rsl-table-sort-active, #6E7BFF);
    outline-offset: -2px;
}

/* Column cells that are being dragged in the body */
.rsl-smart-table tbody td {
    transition: transform 0.15s ease;
}

/* Drop indicator line - shows exact drop position */
.rsl-column-drop-indicator {
    position: absolute;
    width: 3px;
    background: var(--rsl-table-sort-active, #6E7BFF);
    z-index: 100;
    pointer-events: none;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(110, 123, 255, 0.5);
}

/* Arrow indicators on drop line */
.rsl-column-drop-indicator::before,
.rsl-column-drop-indicator::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.rsl-column-drop-indicator::before {
    top: -6px;
    border-bottom: 8px solid var(--rsl-table-sort-active, #6E7BFF);
}

.rsl-column-drop-indicator::after {
    bottom: -6px;
    border-top: 8px solid var(--rsl-table-sort-active, #6E7BFF);
}

/* Drop indicator - left side */
.rsl-drag-over-left {
    position: relative;
}
.rsl-drag-over-left::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--rsl-table-sort-active, #6E7BFF);
    z-index: 10;
}

/* Drop indicator - right side */
.rsl-drag-over-right {
    position: relative;
}
.rsl-drag-over-right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--rsl-table-sort-active, #6E7BFF);
    z-index: 10;
}

/* ==========================================
   Frozen/Pinned Columns
   ========================================== */

.rsl-frozen-wrapper {
    position: relative;
    overflow-x: auto;
}

.rsl-has-frozen-columns {
    border-collapse: separate;
    border-spacing: 0;
}

.rsl-frozen-column {
    background: var(--rsl-table-bg, #fff);
}

.rsl-frozen-left {
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.rsl-frozen-right {
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}

thead .rsl-frozen-column {
    background: var(--rsl-table-header-bg, #f8f9fa);
    z-index: 3 !important;
}

[data-theme="dark"] .rsl-frozen-column {
    background: var(--rsl-table-bg, #1e1e1e);
}

[data-theme="dark"] thead .rsl-frozen-column {
    background: var(--rsl-table-header-bg, #2d2d2d);
}

[data-theme="dark"] .rsl-frozen-left,
[data-theme="dark"] .rsl-frozen-right {
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
}

/* Dark mode column reordering */
[data-theme="dark"] .rsl-dragging {
    background: var(--rsl-table-row-hover, #333) !important;
    outline-color: var(--rsl-table-sort-active, #8E9BFF);
}

[data-theme="dark"] .rsl-column-drop-indicator {
    background: var(--rsl-table-sort-active, #8E9BFF);
    box-shadow: 0 0 10px rgba(142, 155, 255, 0.6);
}

[data-theme="dark"] .rsl-column-drop-indicator::before {
    border-bottom-color: var(--rsl-table-sort-active, #8E9BFF);
}

[data-theme="dark"] .rsl-column-drop-indicator::after {
    border-top-color: var(--rsl-table-sort-active, #8E9BFF);
}

/* ==========================================
   Bulk Actions Bar
   ========================================== */

.rsl-bulk-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    animation: slideDown 0.3s ease;
}

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

.rsl-bulk-selection-count {
    font-size: 0.95rem;
}

.rsl-bulk-selection-count strong {
    font-size: 1.1rem;
    font-weight: 700;
}

.rsl-bulk-actions-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rsl-bulk-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rsl-bulk-action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.rsl-bulk-action-btn:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

.rsl-bulk-action-danger {
    background: rgba(220, 53, 69, 0.9);
    border-color: rgba(220, 53, 69, 0.8);
}

.rsl-bulk-action-danger:hover {
    background: #dc3545;
}

.rsl-bulk-clear {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
}

/* Bulk Status Dropdown */
.rsl-bulk-status-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    background: white;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 150px;
    z-index: 100;
    overflow: hidden;
}

.rsl-bulk-status-option {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    text-align: left;
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.rsl-bulk-status-option:hover {
    background: #f0f0f0;
}

[data-theme="dark"] .rsl-bulk-status-dropdown {
    background: #2d2d2d;
}

[data-theme="dark"] .rsl-bulk-status-option {
    color: #e0e0e0;
}

[data-theme="dark"] .rsl-bulk-status-option:hover {
    background: #3d3d3d;
}

/* ==========================================
   Saved Views
   ========================================== */

.rsl-saved-views-container {
    display: flex;
    gap: 0.5rem;
    margin-right: 0.5rem;
}

.rsl-saved-views-list {
    min-width: 200px;
}

.rsl-saved-view-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.rsl-saved-view-item:hover {
    background: var(--rsl-table-row-hover, #f8f9fa);
}

.rsl-saved-view-item span {
    flex: 1;
}

.rsl-saved-view-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.rsl-saved-view-delete:hover {
    background: #fee2e2;
    color: #dc3545;
}

.rsl-saved-view-reset {
    border-top: 1px solid var(--rsl-table-border, #e2e8f0);
    color: var(--rsl-table-sort-active, #6E7BFF);
    font-weight: 500;
}

.rsl-saved-view-reset i {
    margin-right: 0.5rem;
}

.rsl-saved-views-empty {
    padding: 1rem;
    text-align: center;
    color: #999;
    font-style: italic;
}

[data-theme="dark"] .rsl-saved-view-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .rsl-saved-view-delete:hover {
    background: rgba(220, 53, 69, 0.2);
}

/* ==========================================
   Full Page Mode
   ========================================== */

.rsl-full-page-mode {
    border-radius: 0;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
}

.rsl-full-page-mode .rsl-smart-table-wrapper {
    border-radius: 0;
}

.rsl-full-page-btn {
    width: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rsl-full-page-btn i {
    font-size: 1rem;
}

[data-theme="dark"] .rsl-full-page-mode {
    background: var(--rsl-table-bg, #1e1e1e) !important;
}

/* ==========================================
   Responsive Adjustments
   ========================================== */

@media (max-width: 768px) {
    /* Column resize hidden on mobile */
    .rsl-column-resize-handle {
        display: none;
    }

    /* Bulk actions bar stacks on mobile */
    .rsl-bulk-actions-bar {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .rsl-bulk-actions-buttons {
        justify-content: center;
    }

    /* Saved views dropdown adjustments */
    .rsl-saved-views-container {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Full page has less padding on mobile */
    .rsl-full-page-mode {
        padding: 10px !important;
    }

    /* Frozen columns disabled on mobile card view */
    .rsl-smart-table[data-responsive="card"] .rsl-frozen-column {
        position: static !important;
        left: auto !important;
        right: auto !important;
        box-shadow: none !important;
    }
}

/* Print styles */
@media print {
    .rsl-bulk-actions-bar,
    .rsl-column-resize-handle,
    .rsl-full-page-btn,
    .rsl-saved-views-container {
        display: none !important;
    }

    .rsl-frozen-column {
        position: static !important;
        box-shadow: none !important;
    }

    .rsl-full-page-mode {
        position: static !important;
        width: 100% !important;
        height: auto !important;
    }
}