vs-datatable 1.0.0 → 1.1.0

package/src/styles/base_OLD.scss

@@ -1,1089 +0,0 @@
-/* ===========================================
-   VsDataTable - Base Styles (Library Independent)
-   =========================================== */
-
-/* CSS Custom Properties for Easy Customization */
-:root {
-  /* Colors */
-  --vs-primary: #007bff;
-  --vs-secondary: #6c757d;
-  --vs-success: #28a745;
-  --vs-danger: #dc3545;
-  --vs-warning: #ffc107;
-  --vs-info: #17a2b8;
-  --vs-light: #f8f9fa;
-  --vs-dark: #343a40;
-  --vs-gray-800: #495057;
-
-  /* Table Colors */
-  --vs-table-bg: #ffffff;
-  --vs-table-border: #dee2e6;
-  --vs-table-header-bg: #f8f9fa;
-  --vs-table-header-color: #495057;
-  --vs-table-hover-bg: #f5f5f5;
-  --vs-table-stripe-bg: #fafafa;
-
-  /* Typography */
-  --vs-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-    sans-serif;
-  --vs-font-size: 14px;
-  --vs-font-size-sm: 12px;
-  --vs-font-size-lg: 16px;
-  --vs-font-weight-normal: 400;
-  --vs-font-weight-bold: 600;
-
-  /* Spacing */
-  --vs-spacing-xs: 4px;
-  --vs-spacing-sm: 8px;
-  --vs-spacing-md: 16px;
-  --vs-spacing-lg: 24px;
-  --vs-spacing-xl: 32px;
-
-  /* Border Radius */
-  --vs-border-radius: 4px;
-  --vs-border-radius-sm: 2px;
-  --vs-border-radius-lg: 8px;
-
-  /* Shadows */
-  --vs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-  --vs-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --vs-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
-
-  /* Transitions */
-  --vs-transition: all 0.2s ease-in-out;
-  --vs-transition-fast: all 0.15s ease-in-out;
-
-  /* Z-index */
-  --vs-z-dropdown: 1000;
-  --vs-z-sticky: 1020;
-  --vs-z-fixed: 1030;
-  --vs-z-modal: 1040;
-  --vs-z-popover: 1050;
-  --vs-z-tooltip: 1060;
-}
-
-/* ===========================================
-   VsDataTable - Utility Classes (SCSS Generated)
-   =========================================== */
-
-// Spacing scale map
-$spacing-scale: (
-  xs: var(--vs-spacing-xs),
-  sm: var(--vs-spacing-sm),
-  md: var(--vs-spacing-md),
-  lg: var(--vs-spacing-lg),
-  xl: var(--vs-spacing-xl)
-);
-
-// Legacy number mapping (for classes like vs-m-2)
-$legacy-spacing: (
-  2: var(--vs-spacing-sm),
-  5: var(--vs-spacing-lg)
-);
-
-// Color map
-$colors: (
-  primary: var(--vs-primary),
-  secondary: var(--vs-secondary),
-  success: var(--vs-success),
-  danger: var(--vs-danger),
-  warning: var(--vs-warning),
-  info: var(--vs-info),
-  light: var(--vs-light),
-  dark: var(--vs-dark)
-);
-
-// Mixin to generate spacing utilities
-@mixin generate-spacing-utilities($property, $prefix, $directions: null) {
-  @if $directions {
-    @each $dir-key, $dir-property in $directions {
-      @each $size, $value in $spacing-scale {
-        @if $dir-key == 'x' {
-          .#{$prefix}#{$dir-key}-#{$size} {
-            #{$property}-left: $value !important;
-            #{$property}-right: $value !important;
-          }
-        } @else if $dir-key == 'y' {
-          .#{$prefix}#{$dir-key}-#{$size} {
-            #{$property}-top: $value !important;
-            #{$property}-bottom: $value !important;
-          }
-        } @else {
-          .#{$prefix}#{$dir-key}-#{$size} {
-            #{$dir-property}: $value !important;
-          }
-        }
-      }
-    }
-  } @else {
-    @each $size, $value in $spacing-scale {
-      .#{$prefix}-#{$size} {
-        #{$property}: $value !important;
-      }
-    }
-  }
-}
-
-// Mixin to generate legacy spacing utilities
-@mixin generate-legacy-spacing($property, $prefix, $directions: null) {
-  @if $directions {
-    @each $dir-key, $dir-property in $directions {
-      @each $number, $value in $legacy-spacing {
-        .#{$prefix}#{$dir-key}-#{$number} {
-          #{$dir-property}: $value !important;
-        }
-      }
-    }
-  } @else {
-    @each $number, $value in $legacy-spacing {
-      .#{$prefix}-#{$number} {
-        #{$property}: $value !important;
-      }
-    }
-  }
-}
-
-// Mixin to generate color utilities
-@mixin generate-color-utilities($property, $prefix) {
-  @each $color, $value in $colors {
-    .#{$prefix}-#{$color} {
-      #{$property}: $value !important;
-    }
-  }
-}
-
-// Generate Margin Utilities
-@include generate-spacing-utilities(margin, 'vs-m');
-@include generate-spacing-utilities(margin, 'vs-m', (
-  't': margin-top,
-  'b': margin-bottom,
-  'l': margin-left,
-  'r': margin-right
-));
-
-// Generate Directional Margin Utilities
-@include generate-spacing-utilities(margin, 'vs-m', (
-  'x': (margin-left, margin-right),
-  'y': (margin-top, margin-bottom)
-));
-
-// Generate Padding Utilities
-@include generate-spacing-utilities(padding, 'vs-p');
-@include generate-spacing-utilities(padding, 'vs-p', (
-  't': padding-top,
-  'b': padding-bottom,
-  'l': padding-left,
-  'r': padding-right
-));
-
-// Generate Directional Padding Utilities
-@include generate-spacing-utilities(padding, 'vs-p', (
-  'x': (padding-left, padding-right),
-  'y': (padding-top, padding-bottom)
-));
-
-// Generate Legacy Spacing Utilities (as requested)
-@include generate-legacy-spacing(margin, 'vs-m');
-@include generate-legacy-spacing(margin, 'vs-m', (
-  'l': margin-left,
-  'b': margin-bottom
-));
-@include generate-legacy-spacing(margin, 'vs-m', (
-  'x': (margin-left, margin-right)
-));
-@include generate-legacy-spacing(padding, 'vs-p', (
-  '': padding
-));
-
-// Auto margin utilities
-.vs-mx-auto {
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-
-.vs-my-auto {
-  margin-top: auto !important;
-  margin-bottom: auto !important;
-}
-
-.vs-ml-auto { margin-left: auto !important; }
-.vs-mr-auto { margin-right: auto !important; }
-.vs-mt-auto { margin-top: auto !important; }
-.vs-mb-auto { margin-bottom: auto !important; }
-
-// Typography Utilities
-$font-sizes: (
-  xs: var(--vs-font-size-sm),
-  sm: var(--vs-font-size-sm),
-  base: var(--vs-font-size),
-  lg: var(--vs-font-size-lg),
-  xl: var(--vs-font-size-lg)
-);
-
-@each $size, $value in $font-sizes {
-  .vs-text-#{$size} {
-    font-size: $value !important;
-  }
-}
-
-.vs-font-normal { font-weight: var(--vs-font-weight-normal) !important; }
-.vs-font-bold { font-weight: var(--vs-font-weight-bold) !important; }
-
-.vs-text-left { text-align: left !important; }
-.vs-text-center { text-align: center !important; }
-.vs-text-right { text-align: right !important; }
-
-.vs-uppercase { text-transform: uppercase !important; }
-.vs-lowercase { text-transform: lowercase !important; }
-.vs-capitalize { text-transform: capitalize !important; }
-
-// Color Utilities
-@include generate-color-utilities(color, 'vs-text');
-@include generate-color-utilities(background-color, 'vs-bg');
-
-// Display Utilities
-$displays: none, inline, inline-block, block, flex, inline-flex, grid, table;
-
-@each $display in $displays {
-  .vs-d-#{$display} {
-    display: #{$display} !important;
-  }
-}
-
-// Flexbox Utilities
-.vs-flex-row { flex-direction: row !important; }
-.vs-flex-row-reverse { flex-direction: row-reverse !important; }
-.vs-flex-column { flex-direction: column !important; }
-.vs-flex-column-reverse { flex-direction: column-reverse !important; }
-
-$justify: (
-  start: flex-start,
-  end: flex-end,
-  center: center,
-  between: space-between,
-  around: space-around
-);
-
-@each $key, $value in $justify {
-  .vs-justify-#{$key} {
-    justify-content: #{$value} !important;
-  }
-}
-
-$align: (
-  start: flex-start,
-  end: flex-end,
-  center: center,
-  baseline: baseline,
-  stretch: stretch
-);
-
-@each $key, $value in $align {
-  .vs-align-#{$key} {
-    align-items: #{$value} !important;
-  }
-}
-
-.vs-flex-wrap { flex-wrap: wrap !important; }
-.vs-flex-nowrap { flex-wrap: nowrap !important; }
-.vs-flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
-
-.vs-flex-1 { flex: 1 1 0% !important; }
-.vs-flex-auto { flex: 1 1 auto !important; }
-.vs-flex-none { flex: none !important; }
-
-// Border Radius Utilities
-$border-radius: (
-  sm: var(--vs-border-radius-sm),
-  rounded: var(--vs-border-radius),
-  lg: var(--vs-border-radius-lg),
-  full: 50%
-);
-
-@each $key, $value in $border-radius {
-  .vs-rounded-#{$key} {
-    border-radius: #{$value} !important;
-  }
-}
-
-// Directional border radius
-.vs-rounded-top { 
-  border-top-left-radius: var(--vs-border-radius) !important;
-  border-top-right-radius: var(--vs-border-radius) !important;
-}
-.vs-rounded-bottom { 
-  border-bottom-left-radius: var(--vs-border-radius) !important;
-  border-bottom-right-radius: var(--vs-border-radius) !important;
-}
-.vs-rounded-left { 
-  border-top-left-radius: var(--vs-border-radius) !important;
-  border-bottom-left-radius: var(--vs-border-radius) !important;
-}
-.vs-rounded-right { 
-  border-top-right-radius: var(--vs-border-radius) !important;
-  border-bottom-right-radius: var(--vs-border-radius) !important;
-}
-
-// Shadow Utilities
-$shadows: (
-  none: none,
-  sm: var(--vs-shadow-sm),
-  shadow: var(--vs-shadow),
-  lg: var(--vs-shadow-lg)
-);
-
-@each $key, $value in $shadows {
-  .vs-shadow-#{$key} {
-    box-shadow: #{$value} !important;
-  }
-}
-
-// Position Utilities
-$positions: static, relative, absolute, fixed, sticky;
-
-@each $position in $positions {
-  .vs-position-#{$position} {
-    position: #{$position} !important;
-  }
-}
-
-// Overflow Utilities
-$overflows: auto, hidden, visible, scroll;
-
-@each $overflow in $overflows {
-  .vs-overflow-#{$overflow} {
-    overflow: #{$overflow} !important;
-  }
-}
-
-// Width & Height Utilities
-.vs-w-auto { width: auto !important; }
-.vs-w-full { width: 100% !important; }
-.vs-w-screen { width: 100vw !important; }
-.vs-w-50 { width: 50% !important; }
-.vs-w-100 { width: 100% !important; }
-
-.vs-h-auto { height: auto !important; }
-.vs-h-full { height: 100% !important; }
-.vs-h-screen { height: 100vh !important; }
-.vs-h-50 { height: 50% !important; }
-.vs-h-100 { height: 100% !important; }
-
-// Visibility Utilities
-.vs-visible { visibility: visible !important; }
-.vs-invisible { visibility: hidden !important; }
-
-// Cursor Utilities
-$cursors: auto, pointer, default, not-allowed;
-
-@each $cursor in $cursors {
-  .vs-cursor-#{$cursor} {
-    cursor: #{$cursor} !important;
-  }
-}
-
-// Border Utilities
-.vs-border { border: 1px solid var(--vs-table-border) !important; }
-.vs-border-top { border-top: 1px solid var(--vs-table-border) !important; }
-.vs-border-bottom { border-bottom: 1px solid var(--vs-table-border) !important; }
-.vs-border-left { border-left: 1px solid var(--vs-table-border) !important; }
-.vs-border-right { border-right: 1px solid var(--vs-table-border) !important; }
-
-// Z-index Utilities
-$z-indices: (
-  dropdown: var(--vs-z-dropdown),
-  sticky: var(--vs-z-sticky),
-  fixed: var(--vs-z-fixed),
-  modal: var(--vs-z-modal),
-  popover: var(--vs-z-popover),
-  tooltip: var(--vs-z-tooltip)
-);
-
-@each $key, $value in $z-indices {
-  .vs-z-#{$key} {
-    z-index: #{$value} !important;
-  }
-}
-
-// inline-block-level 
-.vs-d-inline {
-  display: inline !important;
-}
-
-.vs-d-block {
-  display: block !important;
-}
-
-.vs-d-inline-block {
-  display: inline-block !important;
-}
-
-.vs-d-flex {
-  display: flex !important;
-}
-
-// Transition Utilities
-.vs-transition { transition: var(--vs-transition) !important; }
-.vs-transition-fast { transition: var(--vs-transition-fast) !important; }
-.vs-transition-none { transition: none !important; }
-
-/* Reset and Base Styles */
-.vs-datatable {
-  font-family: var(--vs-font-family);
-  font-size: var(--vs-font-size);
-  line-height: 1.5;
-  color: var(--vs-dark);
-  background-color: var(--vs-table-bg);
-  box-sizing: border-box;
-
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-}
-
-/* Table Container */
-.vs-table-container {
-  position: relative;
-  background-color: var(--vs-table-bg);
-  border: 1px solid var(--vs-table-border);
-  border-radius: var(--vs-border-radius);
-  overflow: hidden;
-  box-shadow: var(--vs-shadow-sm);
-}
-
-/* Table Styles */
-.vs-table {
-  width: 100%;
-  margin: 0;
-  border-collapse: separate;
-  border-spacing: 0;
-  background-color: var(--vs-table-bg);
-
-  thead {
-    background-color: var(--vs-table-header-bg);
-
-    th {
-      padding: var(--vs-spacing-md);
-      font-weight: var(--vs-font-weight-bold);
-      color: var(--vs-table-header-color);
-      text-align: left;
-      vertical-align: middle;
-      border-bottom: 2px solid var(--vs-table-border);
-      position: relative;
-      user-select: none;
-
-      &:first-child {
-        border-top-left-radius: var(--vs-border-radius);
-      }
-
-      &:last-child {
-        border-top-right-radius: var(--vs-border-radius);
-      }
-    }
-  }
-
-  tbody {
-    tr {
-      transition: var(--vs-transition-fast);
-      border-bottom: 1px solid var(--vs-table-border);
-
-      &:hover {
-        background-color: var(--vs-table-hover-bg);
-      }
-
-      &:nth-child(even) {
-        background-color: var(--vs-table-stripe-bg);
-      }
-
-      &:last-child {
-        border-bottom: none;
-      }
-
-      td {
-        padding: var(--vs-spacing-md);
-        vertical-align: middle;
-        border-right: 1px solid var(--vs-table-border);
-
-        &:last-child {
-          border-right: none;
-        }
-      }
-    }
-  }
-}
-
-/* Sortable Headers */
-.vs-sortable {
-  cursor: pointer;
-  position: relative;
-
-  &:hover {
-    background-color: rgba(var(--vs-primary), 0.1);
-  }
-
-  .vs-sort-icons {
-    display: inline-flex;
-    flex-direction: column;
-    margin-left: var(--vs-spacing-sm);
-    vertical-align: middle;
-
-    .vs-sort-icon {
-      font-size: 10px;
-      line-height: 1;
-      color: var(--vs-secondary);
-      transition: var(--vs-transition-fast);
-      margin: -8px 0;
-
-      &.vs-sort-asc,
-      &.vs-sort-desc {
-        color: var(--vs-primary);
-      }
-    }
-
-    .vs-sort-icon svg {
-      fill: #e3e3e3; // default color
-    }
-
-    .vs-sort-icon.vs-active svg {
-      fill: currentColor; // use inherited text color when active
-    }
-  }
-
-  .vs-sort-priority {
-    display: inline-block;
-    background-color: var(--vs-primary);
-    color: white;
-    font-size: 10px;
-    padding: 2px 6px;
-    border-radius: var(--vs-border-radius-sm);
-    margin-left: var(--vs-spacing-sm);
-    font-weight: var(--vs-font-weight-bold);
-  }
-}
-
-/* Loading State */
-.vs-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--vs-spacing-xl);
-  color: var(--vs-secondary);
-
-  .vs-spinner {
-    width: 20px;
-    height: 20px;
-    border: 2px solid var(--vs-table-border);
-    border-top: 2px solid var(--vs-primary);
-    border-radius: 50%;
-    animation: vs-spin 1s linear infinite;
-    margin-right: var(--vs-spacing-sm);
-  }
-}
-
-@keyframes vs-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* No Data State */
-.vs-no-data {
-  text-align: center;
-  padding: var(--vs-spacing-xl);
-  color: var(--vs-secondary);
-
-  .vs-no-data-icon {
-    width: 60px;
-    height: 60px;
-    margin: 0 auto var(--vs-spacing-md);
-    opacity: 0.5;
-  }
-
-  .vs-no-data-message {
-    font-size: var(--vs-font-size-lg);
-    font-weight: var(--vs-font-weight-bold);
-    margin-bottom: var(--vs-spacing-sm);
-  }
-
-  .vs-no-data-description {
-    font-size: var(--vs-font-size-sm);
-    color: var(--vs-secondary);
-  }
-}
-
-/* Search Component */
-.vs-search {
-  position: relative;
-  margin-bottom: var(--vs-spacing-md);
-
-  .vs-search-input {
-    width: 100%;
-    padding: var(--vs-spacing-sm) var(--vs-spacing-md);
-    padding-left: 50px;
-    border: 1px solid var(--vs-table-border);
-    border-radius: var(--vs-border-radius);
-    font-size: var(--vs-font-size);
-    transition: var(--vs-transition-fast);
-
-    &:focus {
-      outline: none;
-      border-color: var(--vs-primary);
-      box-shadow: 0 0 0 2px rgba(var(--vs-primary), 0.25);
-    }
-  }
-
-  .vs-search-icon {
-    position: absolute;
-    left: var(--vs-spacing-md);
-    top: 50%;
-    transform: translateY(-50%);
-    color: var(--vs-secondary);
-    pointer-events: none;
-  }
-}
-
-/* Pagination */
-.vs-pagination {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--vs-spacing-sm);
-  margin-top: var(--vs-spacing-md);
-
-  .vs-pagination-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 32px;
-    height: 32px;
-    padding: 0 var(--vs-spacing-sm);
-    border: 1px solid var(--vs-table-border);
-    background-color: var(--vs-table-bg);
-    color: var(--vs-dark);
-    text-decoration: none;
-    border-radius: var(--vs-border-radius);
-    font-size: var(--vs-font-size-sm);
-    transition: var(--vs-transition-fast);
-    cursor: pointer;
-
-    &:hover:not(:disabled) {
-      background-color: var(--vs-table-hover-bg);
-      border-color: var(--vs-primary);
-    }
-
-    &.vs-active {
-      background-color: var(--vs-primary);
-      border-color: var(--vs-primary);
-      color: white;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-
-  .vs-pagination-ellipsis {
-    color: var(--vs-secondary);
-    padding: 0 var(--vs-spacing-sm);
-  }
-}
-
-.vs-layout-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  width: 100%;
-  gap: 1rem;
-
-  .vs-layout-start,
-  .vs-layout-end {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-}
-
-/* On small screens (e.g. < 768px) stack vertically */
-@media (max-width: 768px) {
-  .vs-layout-row {
-    flex-direction: column;
-    align-items: stretch;
-
-    .vs-layout-start,
-    .vs-layout-end {
-      justify-content: flex-start;
-      width: 100%;
-    }
-  }
-}
-
-.export-dropdown {
-  position: relative;
-  display: inline-block;
-}
-
-.export-btn {
-  background: #2d6cdf;
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.export-menu {
-  display: none; /* hidden by default */
-  position: absolute;
-  right: 0;
-  margin-top: 0.25rem;
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  list-style: none;
-  padding: 0;
-  min-width: 160px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  z-index: 1;
-
-  flex-direction: column; /* stacked layout */
-}
-
-.export-menu li {
-  width: 100%;
-}
-
-.export-menu button {
-  background: none;
-  border: none;
-  width: 100%;
-  padding: 0.75rem 1rem;
-  text-align: left;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.export-menu button:hover {
-  background: #f5f5f5;
-}
-
-/* Show dropdown when .active is toggled */
-.export-menu.active {
-  display: flex;
-}
-
-/* Row Selection */
-.vs-checkbox {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-
-  input[type='checkbox'] {
-    width: 16px;
-    height: 16px;
-    margin: 0;
-    cursor: pointer;
-    accent-color: var(--vs-primary);
-  }
-
-  label {
-    margin: 0;
-    cursor: pointer;
-    font-size: var(--vs-font-size-sm);
-  }
-}
-
-.vs-footer-left {
-  display: flex;
-  align-items: center;
-  gap: 12px; /* spacing between items */
-}
-
-.vs-divider {
-  width: 1px;
-  height: 20px;
-  background-color: #ccc; /* light gray divider */
-}
-
-.vs-rows-per-page {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  color: #495057;
-}
-
-.vs-items-dropdown {
-  padding: 6px 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  background-color: white;
-  font-size: 14px;
-}
-
-/* Extended Row Design */
-.vs-expand-column {
-  width: 40px;
-  text-align: center;
-}
-
-.vs-expand-btn {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  font-size: 1.1rem;
-}
-
-.vs-row-expanded {
-  background: #f9f9f9;
-}
-
-/* Extended Row Loader */
-.vs-table tbody tr.vs-row-expanded td.vs-expanded-cell {
-  padding: 0 !important;
-  vertical-align: top !important;
-  border-right: none;
-}
-
-.vs-expanded-content {
-  padding: var(--vs-spacing-md);
-  background-color: #ededed;
-}
-
-.vs-loader-bar {
-  width: 100%;
-  height: 4px;
-  background: #e5e7eb;
-  overflow: hidden;
-  position: relative;
-  border-radius: 2px;
-  top: 0; /* lock to td top */
-  left: 0;
-  margin: 0;
-}
-
-.vs-loader-bar-inner {
-  width: 40%;
-  height: 100%;
-  background: var(--vs-primary);
-  position: absolute;
-  left: -40%;
-  animation: loader-slide 1.2s infinite linear;
-  border-radius: 2px;
-}
-
-@keyframes loader-slide {
-  0% {
-    left: -40%;
-  }
-  50% {
-    left: 60%;
-  }
-  100% {
-    left: 100%;
-  }
-}
-
-/* Column Filter Design */
-.vs-filter-dropdown {
-  background: #fff;
-  border: 1px solid #ddd;
-  padding: 0.75rem;
-  border-radius: 6px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
-  min-width: 200px;
-}
-.vs-filter-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  margin-top: 0.75rem;
-}
-.vs-input {
-  padding: 0.35rem 0.5rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-.vs-operator-select {
-  padding: 0.35rem 0.5rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  gap: 0.55rem;
-}
-.vs-btn {
-  padding: 0.35rem 0.75rem;
-  border-radius: 4px;
-  cursor: pointer;
-}
-.vs-btn-primary {
-  background: #2d6cdf;
-  color: #fff;
-  border: none;
-}
-.vs-btn-secondary {
-  background: #f5f5f5;
-  border: 1px solid #ccc;
-}
-// .vs-filter-range,
-// .vs-filter-date {
-//   display: flex;
-//   gap: 0.5rem;
-//   align-items: center;
-// }
-
-.vs-column-filter {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  cursor: pointer;
-}
-.vs-column-filter.is-active {
-  background-color: rgba(41, 128, 185, 0.06);
-  color: var(--vs-primary, #2d6cdf);
-}
-.vs-header-content {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .vs-table-container {
-    overflow-x: auto;
-  }
-
-  .vs-table {
-    min-width: 600px;
-  }
-
-  .vs-pagination {
-    flex-wrap: wrap;
-    gap: var(--vs-spacing-xs);
-
-    .vs-pagination-button {
-      min-width: 28px;
-      height: 28px;
-      font-size: 12px;
-    }
-  }
-}
-
-/* Utility Classes */
-.vs-text-center {
-  text-align: center;
-}
-.vs-text-left {
-  text-align: left;
-}
-.vs-text-right {
-  text-align: right;
-}
-.vs-text-muted {
-  color: var(--vs-secondary);
-}
-.vs-text-primary {
-  color: var(--vs-primary);
-}
-.vs-text-success {
-  color: var(--vs-success);
-}
-.vs-text-danger {
-  color: var(--vs-danger);
-}
-.vs-text-warning {
-  color: var(--vs-warning);
-}
-
-.vs-bg-primary {
-  background-color: var(--vs-primary);
-}
-.vs-bg-success {
-  background-color: var(--vs-success);
-}
-.vs-bg-danger {
-  background-color: var(--vs-danger);
-}
-.vs-bg-warning {
-  background-color: var(--vs-warning);
-}
-.vs-bg-light {
-  background-color: var(--vs-light);
-}
-
-.vs-border {
-  border: 1px solid var(--vs-table-border);
-}
-.vs-border-top {
-  border-top: 1px solid var(--vs-table-border);
-}
-.vs-border-bottom {
-  border-bottom: 1px solid var(--vs-table-border);
-}
-.vs-border-left {
-  border-left: 1px solid var(--vs-table-border);
-}
-.vs-border-right {
-  border-right: 1px solid var(--vs-table-border);
-}
-
-.vs-rounded {
-  border-radius: var(--vs-border-radius);
-}
-.vs-rounded-sm {
-  border-radius: var(--vs-border-radius-sm);
-}
-.vs-rounded-lg {
-  border-radius: var(--vs-border-radius-lg);
-}
-
-.vs-shadow {
-  box-shadow: var(--vs-shadow);
-}
-.vs-shadow-sm {
-  box-shadow: var(--vs-shadow-sm);
-}
-.vs-shadow-lg {
-  box-shadow: var(--vs-shadow-lg);
-}
-
-/* Animation Classes */
-.vs-fade-in {
-  animation: vs-fade-in 0.3s ease-in-out;
-}
-
-@keyframes vs-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.vs-slide-in {
-  animation: vs-slide-in 0.3s ease-in-out;
-}
-
-@keyframes vs-slide-in {
-  from {
-    transform: translateX(-20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}