/* Modern minimalist tables: horizontal lines only, subtle colors, good spacing, responsive */

:root {
  --table-bg: #ffffff;
  --table-text: #2f3640;
  --table-muted: #6b7280;
  --table-border: #e5e7eb; /* subtle gray */
  --table-hover: #f9fafb;
  --table-header-bg: #f8fafc;
}

/* Base table overrides (Bootstrap/DataTables friendly) */
.table {
  width: 100%;
  background-color: var(--table-bg);
  color: var(--table-text);
  border-collapse: separate;
  border-spacing: 0;
}

.table > :not(caption) > * > * {
  padding: 0.875rem 1rem; /* comfortable spacing */
  background-color: transparent;
  box-shadow: none;
}

/* Headers */
.table thead th {
  font-weight: 600;
  color: var(--table-text);
  background: var(--table-header-bg);
  border-bottom: 1px solid var(--table-border);
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* Body rows: only horizontal separators */
.table tbody td {
  border-top: 1px solid var(--table-border);
  border-left: none !important;
  border-right: none !important;
}

.table tbody tr:first-child td {
  border-top-width: 1px;
}

/* Remove all vertical lines from bordered/striped variants */
.table-bordered > :not(caption) > * {
  border-width: 0;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 0 1px 0; /* only bottom border */
  border-color: var(--table-border);
}

/* Hover state */
.table-hover > tbody > tr:hover {
  --bs-table-accent-bg: var(--table-hover);
  color: inherit;
}

/* Muted helpers */
.table .text-muted { color: var(--table-muted) !important; }

/* Compact variant */
.table.table-compact > :not(caption) > * > * {
  padding: 0.5rem 0.75rem;
}

/* DataTables adjustments */
.dataTables_wrapper .dataTables_filter input[type="search"] {
  border-radius: 8px;
  border: 1px solid var(--table-border);
  padding: 0.375rem 0.75rem;
}
.dataTables_wrapper .dataTables_length select {
  border-radius: 8px;
  border: 1px solid var(--table-border);
  padding: 0.25rem 0.5rem;
}

/* Responsive helpers for tight screens */
@media (max-width: 576px) {
  .table thead { display: none; }
  .table tbody tr {
    display: block;
    border-bottom: 1px solid var(--table-border);
    margin-bottom: 0.75rem;
  }
  .table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    border-top: none;
  }
  .table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--table-muted);
  }
}



/* Dark mode support: match app's implementation */
/* Explicit dark selectors used by the app */
html[data-theme='dark'],
html.dark-theme,
body.dark-theme,
.dark-theme,
.dark-style,
.theme-dark,
.layout-menu-dark {
  --table-bg: #2a2a2a;
  --table-text: #e5e7eb;
  --table-muted: #9ca3af;
  --table-border: #3a3a3a;
  --table-hover: #333333;
  --table-header-bg: #242424;
}

/* Optional explicit light selectors */
html[data-theme='light'],
html.light-theme,
body.light-theme,
.light-theme,
.light-style,
.theme-light {
  --table-bg: #ffffff;
  --table-text: #2f3640;
  --table-muted: #6b7280;
  --table-border: #e5e7eb;
  --table-hover: #f9fafb;
  --table-header-bg: #f8fafc;
}

/* Respect system preference only when app hasn't explicitly set data-theme */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]),
  html[data-theme='theme-default'] {
    --table-bg: #2a2a2a;
    --table-text: #e5e7eb;
    --table-muted: #9ca3af;
    --table-border: #3a3a3a;
    --table-hover: #333333;
    --table-header-bg: #242424;
  }
}