/* ============================================
        TABLES.CSS - Tabellstiler
   ============================================ */

/* === BASE TABLE === */
.table {
  width: 100%;
  margin-bottom: 0;
  color: var(--color-text);
}

.table th {
  border-bottom: 2px solid var(--color-gray-light);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background-color: var(--color-sidebar-bg) !important;
  font-size: var(--font-size-xs);
  padding: var(--spacing-md);
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  transition: background-color var(--transition-normal),
              color var(--transition-normal),
              border-color var(--transition-normal);
}

.table td {
  vertical-align: middle;
  border-bottom: 1px solid var(--color-gray-dark);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xs);
  color: var(--color-text);
  padding: var(--spacing-md);
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  transition: color var(--transition-normal),
              border-color var(--transition-normal);
}

.table th:last-child,
.table td:last-child {
  border-right: none !important;
}

.table-hover tbody tr:hover {
  background-color: rgba(0, 100, 177, 0.05);
  transition: background-color var(--transition-fast);
}

[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: rgba(74, 158, 255, 0.1);
}

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

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: rgba(255, 255, 255, 0.03);
}

/* === TABLE RESPONSIVE WRAPPER === */
.table-responsive {
  overflow-x: auto;     
  overflow-y: visible; 
}

.table-responsive .table {
  font-size: var(--font-size-xs);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-gray-medium);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: border-color var(--transition-normal);
}

/* === TABLE BUTTONS === */
.table .btn {
  font-size: var(--font-size-xs);
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-white);
  transition: all var(--transition-fast);
}

.table .btn:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* === DROPDOWN FIX FOR TABLES === */
.table-responsive .dropdown-menu {
  position: fixed !important;
  z-index: 9999;
}

/* === DETAIL TABLE LABELS (for detail pages) === */
.detail-label {
  width: 200px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background-color: var(--color-gray-medium);
  transition: background-color var(--transition-normal),
              color var(--transition-normal);
}

/* Row headers should match td styling, not column headers */
.table tbody th[scope="row"] {
  background-color: transparent !important;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  border-bottom: 1px solid var(--color-gray-dark);
  border-top: none !important;
  width: 30%;
}



/* === SORT === */
.sort-header {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.sort-header:hover {
    color: inherit;
    text-decoration: none;
}

.sort-header.active {
    color: inherit;
    font-weight: var(--font-weight-medium);
}

.sort-icon {
    width: 1.0rem;
    height: 1.0rem;
}