/* =============================================================================
   BlocHost Design System - Tables
   Table components and variants
   ============================================================================= */

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

table {
  width: 100%;
  margin-bottom: var(--spacing-3);
  vertical-align: top;
  border-color: var(--border-color);
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: var(--text-muted);
  text-align: left;
}

th {
  font-weight: var(--font-weight-semibold);
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

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

.table {
  width: 100%;
  margin-bottom: var(--spacing-3);
  color: var(--text-primary);
  vertical-align: top;
  border-color: var(--border-color);
}

.table > :not(caption) > * > * {
  padding: 0.75rem;
  background-color: transparent;
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px transparent;
}

.table > tbody {
  vertical-align: inherit;
}

.table > thead {
  vertical-align: bottom;
}

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

/* Striped rows */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(0, 0, 0, 0.02);
}

.table-striped-columns > :not(caption) > tr > :nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Hover effect */
.table-hover > tbody > tr:hover > * {
  background-color: rgba(0, 0, 0, 0.04);
}

/* Dark table */
.table-dark {
  color: var(--color-white);
  background-color: var(--color-dark);
  border-color: #373b3e;
}

.table-dark > :not(caption) > * > * {
  border-color: #373b3e;
}

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

.table-bordered {
  border: 1px solid var(--border-color);
}

.table-bordered > :not(caption) > * {
  border-width: 1px 0;
}

.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
}

/* Borderless table */
.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0;
}

.table-borderless > :not(:first-child) {
  border-top-width: 0;
}

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

.table-sm > :not(caption) > * > * {
  padding: 0.375rem;
}

/* =========================================================================
   Table Row Colors
   ========================================================================= */

.table-primary {
  color: #664400;
  background-color: var(--color-primary-light);
}

.table-secondary {
  color: #41464b;
  background-color: #e2e3e5;
}

.table-success {
  color: #0f5132;
  background-color: #d1e7dd;
}

.table-danger {
  color: #842029;
  background-color: #f8d7da;
}

.table-warning {
  color: var(--color-warning-text);
  background-color: #fff3cd;
}

.table-info {
  color: #055160;
  background-color: #cff4fc;
}

.table-light {
  color: #636464;
  background-color: #fefefe;
}

.table-dark {
  color: var(--color-white);
  background-color: var(--color-dark);
}

/* =========================================================================
   Active Row
   ========================================================================= */

.table-active {
  background-color: rgba(0, 0, 0, 0.04);
}

/* =========================================================================
   Responsive Tables
   ========================================================================= */

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 767.98px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 991.98px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 1199.98px) {
  .table-responsive-xl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================================
   Table Wrapper with Shadow
   ========================================================================= */

.table-container {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.table-container .table {
  margin-bottom: 0;
}

.table-container .table > :not(caption) > *:last-child > * {
  border-bottom-width: 0;
}

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

.table-sortable th {
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transition-fast);
}

.table-sortable th:hover {
  background-color: var(--color-light);
}

.table-sortable th .sort-icon {
  display: inline-block;
  margin-left: 0.25rem;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.table-sortable th:hover .sort-icon {
  opacity: 1;
}

.table-sortable th[data-sort="asc"] .sort-icon::after {
  content: "↑";
}

.table-sortable th[data-sort="desc"] .sort-icon::after {
  content: "↓";
}

/* =========================================================================
   Drag and Drop Table Rows
   ========================================================================= */

.drag-handle {
  cursor: grab;
  text-align: center;
  vertical-align: middle;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.drag-handle:hover {
  color: var(--text-primary);
}

.drag-handle:active {
  cursor: grabbing;
}

.sortable-row {
  transition: background-color var(--transition-fast);
}

.sortable-ghost {
  opacity: 0.5;
  background-color: var(--color-light) !important;
}

.sortable-chosen {
  background-color: #e3f2fd !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sortable-drag {
  background-color: var(--color-white) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: rotate(2deg);
}

/* =========================================================================
   Data Table Enhancements
   ========================================================================= */

.datatable {
  width: 100%;
}

.datatable thead th {
  background-color: var(--color-light);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--text-secondary);
}

.datatable tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.datatable .actions {
  text-align: right;
  white-space: nowrap;
}

.datatable .actions .btn {
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-sm);
}

/* =========================================================================
   Table Empty State
   ========================================================================= */

.table-empty {
  text-align: center;
  padding: var(--spacing-5);
  color: var(--text-muted);
}

.table-empty-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-3);
  opacity: 0.5;
}

.table-empty-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-2);
}

.table-empty-description {
  font-size: var(--font-size-sm);
  max-width: 400px;
  margin: 0 auto;
}

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

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-3);
  border-top: 1px solid var(--border-color);
}

.table-pagination-info {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.table-pagination-controls {
  display: flex;
  gap: var(--spacing-2);
}

/* =========================================================================
   BlocHost Specific Table Styles
   ========================================================================= */

/* Units Table */
.units-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.units-table thead {
  background: var(--color-light);
  border-bottom: 2px solid var(--border-color-light);
}

.units-table th {
  padding: 0.75rem;
  text-align: left;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.units-table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-color-light);
  vertical-align: middle;
  color: var(--text-primary);
}

.units-table tr:last-child td {
  border-bottom: none;
}

.units-table tbody tr:hover {
  background: var(--color-light);
}

.units-table .unit-number {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.units-table .unit-beds,
.units-table .unit-baths {
  text-align: center;
  font-weight: var(--font-weight-semibold);
}

.units-table .unit-sqft {
  text-align: right;
}

.units-table .unit-price {
  text-align: right;
  font-weight: var(--font-weight-semibold);
  color: var(--color-success);
  font-size: var(--font-size-base);
}

/* Mobile responsive table */
@media (max-width: 768px) {
  .units-table {
    font-size: var(--font-size-sm);
  }

  .units-table th,
  .units-table td {
    padding: 0.5rem 0.25rem;
    white-space: nowrap;
  }

  .units-table th {
    font-size: var(--font-size-xs);
  }

  .units-table .unit-price {
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 480px) {
  .units-table th,
  .units-table td {
    padding: 0.375rem 0.1875rem;
    font-size: var(--font-size-xs);
  }
}