.table {
  --wv-table-border-color: rgba(var(--wv-rgb-content-theme, var(--wv-border-color-rgb)), 0.3);
  --wv-table-border-width: 1rpx;
  --wv-table-border-style: solid;
  --wv-table-border: var(--wv-table-border-style) var(--wv-table-border-width) var(--wv-table-border-color);
  
  --wv-table-cell-padding: var(--wv-padding-default, 24rpx);

  display: table;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: transparent;

  table-layout: fixed;
}

.table[class*="wv-theme"]:not(.theme-vars-only) {
  background: unset !important;
  color: unset !important; 
  filter: unset !important;
}



.table .thead { display: table-header-group; filter: unset; }
.table .tbody { display: table-row-group; filter: brightness(130%); }

.table .tr {
  --wv-table-tr-stripe-filter: brightness(70%);

  display: table-row;
}
.tr:not(.inactivable):not(.disabled):not([disabled]):active,
.tr:not(.inactivable):not(.disabled):not([disabled]).actived {
  filter: brightness(85%);
}
.tr.selected {
  filter: brightness(120%);
}

.table .th {
  --wv-table-th-bg-color: rgba(var(--wv-rgb-theme, var(--wv-theme-light-rgb, 248,249,250)), calc(var(--wv-rgb-alpha-theme, 1)));
  --wv-table-th-text-color: rgba(var(--wv-rgb-content-theme, var(--wv-font-color-dark-rgb, 33,37,41)), var(--wv-rgb-alpha-theme, 1));
  
  display: table-cell;
  vertical-align: middle;
  word-break: break-word;
  font-weight: bold;
  text-align: left;
  padding: var(--wv-table-cell-padding);
  background: var(--wv-table-th-bg-color);
  color: var(--wv-table-th-text-color);
  border-bottom: var(--wv-table-border);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table .td {
  --wv-table-td-bg-color: rgba(var(--wv-rgb-theme, var(--wv-theme-light-rgb, 248,249,250)), calc(var(--wv-rgb-alpha-theme, 1)));
  --wv-table-td-text-color: rgba(var(--wv-rgb-content-theme, var(--wv-font-color-dark-rgb, 33,37,41)), var(--wv-rgb-alpha-theme, 1));
  
  display: table-cell;
  vertical-align: middle;
  word-break: break-word;
  padding: var(--wv-table-cell-padding);
  background: var(--wv-table-td-bg-color);
  color: var(--wv-table-td-text-color);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Preset grid columns */
.table.cols-1 .tr { width: 100%; }
.table.cols-2 .tr { width: 100%; }
.table.cols-3 .tr { width: 100%; }
.table.cols-4 .tr { width: 100%; }
.table.cols-5 .tr { width: 100%; }
.table.cols-6 .tr { width: 100%; }
.table.cols-7 .tr { width: 100%; }
.table.cols-8 .tr { width: 100%; }

.table[class*="cols-"] .th,
.table[class*="cols-"] .td {
  width: auto; 
}

.table.bordered {
  border: var(--wv-table-border);
}

.table.bordered .th,
.table.bordered .td {
  border: var(--wv-table-border);
}

.table.bordered-h .tr {
  border-bottom: var(--wv-table-border);
}

.table.bordered-v .td, 
.table.bordered-v .th {
  border-right: var(--wv-table-border);
}
.table.bordered-v .td:last-child, 
.table.bordered-v .th:last-child {
  border-right: none;
}

/* Combined convenient classes */
.table.all-borders {
  border: var(--wv-table-border);
}
.table.all-borders .th,
.table.all-borders .td {
  border-bottom: var(--wv-table-border);
  border-right: var(--wv-table-border);
}
.table.all-borders .th:last-child,
.table.all-borders .td:last-child {
  border-right: none;
}
.table.all-borders .tr:last-child .td {
  border-bottom: none;
}

/* Striped table rows */
.table.striped .tr:nth-child(even) {
  filter: var(--wv-table-tr-stripe-filter);
}

/* Scrollable table for horizontal overflow */
.table.scroll-x {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table.scroll-x .tr {
  width: auto;
}
.table.scroll-x .td,
.table.scroll-x .th {
  white-space: nowrap;
}

/* Cell alignment options */
.table.text-left .td,
.table.text-left .th { text-align: left; }
.table.text-center .td,
.table.text-center .th { text-align: center; }
.table.text-right .td,
.table.text-right .th { text-align: right; }

/* Row-level alignment control */
.tr.text-left .td,
.tr.text-left .th { text-align: left; }
.tr.text-center .td,
.tr.text-center .th { text-align: center; }
.tr.text-right .td,
.tr.text-right .th { text-align: right; }

/* Cell-level alignment */
.td.text-left, .th.text-left { text-align: left; }
.td.text-center, .th.text-center { text-align: center; }
.td.text-right, .th.text-right { text-align: right; }

/* Cell padding size classes */
.table.mini { --wv-table-cell-padding: var(--wv-padding-mini, 8rpx); }
.table.small { --wv-table-cell-padding: var(--wv-padding-small, 16rpx); }
.table.default { --wv-table-cell-padding: var(--wv-padding-default, 24rpx); }
.table.large { --wv-table-cell-padding: var(--wv-padding-large, 32rpx); }
.table.huge { --wv-table-cell-padding: var(--wv-padding-huge, 48rpx); }

/* No padding option */
.table.no-padding { --wv-table-cell-padding: 0; }

/* Cell-level padding adjustments */
.td.padding-mini, .th.padding-mini { padding: var(--wv-padding-mini, 8rpx); }
.td.padding-small, .th.padding-small { padding: var(--wv-padding-small, 16rpx); }
.td.padding-default, .th.padding-default { padding: var(--wv-padding-default, 24rpx); }
.td.padding-large, .th.padding-large { padding: var(--wv-padding-large, 32rpx); }
.td.padding-huge, .th.padding-huge { padding: var(--wv-padding-huge, 48rpx); }
.td.no-padding, .th.no-padding { padding: 0; }

/* Vertical alignment for cells */
.td.align-top, .th.align-top { vertical-align: top; }
.td.align-middle, .th.align-middle { vertical-align: middle; }
.td.align-bottom, .th.align-bottom { vertical-align: bottom; }

/* Row-level vertical alignment control */
.tr.align-top .td,
.tr.align-top .th { vertical-align: top; }
.tr.align-middle .td,
.tr.align-middle .th { vertical-align: middle; }
.tr.align-bottom .td,
.tr.align-bottom .th { vertical-align: bottom; }

/* Optional: Fixed header */
.table.fixed-header {
  max-height: 500rpx;
  overflow-y: auto;
}
.table.fixed-header .thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--wv-table-th-bg-color);
}

/* Text wrapping controls for different levels */
/* Table level wrapping control */
.table.nowrap .td,
.table.nowrap .th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table.wrap .td,
.table.wrap .th {
  white-space: normal;
  word-break: break-word;
}

/* Row level wrapping control */
.table .tr.nowrap .td,
.table .tr.nowrap .th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table .tr.wrap .td,
.table .tr.wrap .th {
  white-space: normal;
  word-break: break-word;
}

/* Cell level wrapping control */
.table .td.nowrap,
.table .th.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table .td.wrap,
.table .th.wrap {
  white-space: normal;
  word-break: break-word;
}

/* 3D dimension effect for tables and rows */
.table.dimension .tr {
  box-shadow: 0 1px 0px rgba(190, 187, 185, 0.5) inset, 0 1px 0 rgba(252, 252, 252, 0.5);
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(0, 0, 0, 0.02) 100%
  );
}

.table .tr.dimension,
.table.dimension .tr.thead {
  box-shadow: 0 1px 0px rgba(190, 187, 185, 0.5) inset, 0 1px 0 rgba(252, 252, 252, 0.5);
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
}

.table.dimension .tr.thead .th,
.table .tr.dimension .th {
  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
}

.table.dimension .tr .td,
.table .tr.dimension .td {
  position: relative;
}

.table.dimension .tr .td::after,
.table .tr.dimension .td::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(0, 0, 0, 0.02) 100%
  );
}

/* Darker shadow for alternating rows in striped tables */
.table.dimension.striped .tr:nth-child(even) {
  box-shadow: 0 1px 0px rgba(160, 157, 155, 0.6) inset, 0 1px 0 rgba(252, 252, 252, 0.5);
}