/* Tabulator Theme — shadcn/Zinc design tokens. Overrides tabulator_simple.min.css. */
/* Kill ALL vertical cell/column borders from base theme */
.tabulator .tabulator-header .tabulator-col,
.tabulator .tabulator-header .tabulator-col.tabulator-frozen,
.tabulator-row .tabulator-cell,
.tabulator-row .tabulator-cell.tabulator-frozen,
.tabulator-row.tabulator-group {
  border-right: none !important;
  border-left: none !important;
}

/* Container */
.tabulator {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-background);
  color: var(--color-foreground);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  overflow: hidden;
  width: 100%;
}

/* Header */
.tabulator .tabulator-header {
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
}

.tabulator .tabulator-header .tabulator-col {
  background: var(--color-background);
  border-right: none;
  border-bottom: none;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: var(--space-2) var(--space-4);
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-muted-foreground);
  white-space: nowrap;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
  background: var(--color-muted);
  cursor: pointer;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter {
  color: var(--color-muted-foreground);
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter .tabulator-arrow {
  border-top-color: var(--color-muted-foreground);
  border-bottom-color: var(--color-muted-foreground);
}

.tabulator .tabulator-header .tabulator-col[aria-sort="ascending"] .tabulator-col-sorter .tabulator-arrow,
.tabulator .tabulator-header .tabulator-col[aria-sort="descending"] .tabulator-col-sorter .tabulator-arrow {
  border-top-color: var(--color-foreground);
  border-bottom-color: var(--color-foreground);
}

/* Table holder — override Tabulator's inline height so the table auto-sizes */
.tabulator .tabulator-tableholder {
  background: var(--color-background);
  height: auto !important;
  min-height: 0;
}

/* Rows */
.tabulator-row {
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);
}

.tabulator-row {
  min-height: auto !important;
  height: auto !important;
}

.tabulator-row .tabulator-cell {
  height: auto !important;
  overflow: visible !important;
}

.tabulator-row.tabulator-row-even {
  background: var(--color-bg-muted);
}

/* The current instructor's own students are surfaced first and tinted with a
   primary accent (left bar) so they stand out from the rest of the list. */
.tabulator-row.own-student,
.tabulator-row.own-student.tabulator-row-even {
  box-shadow: inset 3px 0 0 var(--color-link);
}

/* LLM-processed proofs whose paid amount differs from the seminar price by more
   than 5% need review. Keep the warning visible alongside own-student accents. */
.tabulator-row.payment-mismatch,
.tabulator-row.payment-mismatch.tabulator-row-even {
  background: color-mix(in srgb, var(--color-warning) 14%, var(--color-background));
}

.tabulator-row.payment-mismatch:hover {
  background: color-mix(in srgb, var(--color-warning) 20%, var(--color-background));
}

.payment-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  white-space: nowrap;
}

.payment-cell__amount {
  color: var(--color-muted-foreground);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}

.payment-cell__amount--mismatch {
  color: var(--color-warning);
  font-weight: var(--font-weight-semibold);
}

/* Payment state on the row: nothing paid is the NEUTRAL default (no tint --
   before a seminar most rows are unpaid, and tinting them all would drown the
   list), yellow = part of the money is in, green = settled. Tints are faint so
   a long list stays readable; the payment cell and the action icon repeat the
   state for anyone who cannot rely on colour alone. Tinting the row (rather
   than an edge bar) leaves the left accent free for the own-student marker and
   survives horizontal scroll. A free seminar gets no tint either. */
.tabulator-row.payment-partial,
.tabulator-row.payment-partial.tabulator-row-even {
  background: color-mix(in srgb, var(--color-warning) 16%, var(--color-background));
}

.tabulator-row.payment-paid,
.tabulator-row.payment-paid.tabulator-row-even {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-background));
}

.payment-cell__partial {
  color: var(--color-warning);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.payment-cell__unpaid {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabulator-row.tabulator-selectable:hover,
.tabulator-row:hover {
  background: var(--color-accent);
}

.tabulator-row.tabulator-selected,
.tabulator-row.tabulator-selected.tabulator-row-even {
  background: var(--color-accent);
}

.tabulator-row.tabulator-selected:hover {
  background: var(--color-muted);
}

/* Cells */
.tabulator-row .tabulator-cell {
  padding: var(--space-2) var(--space-4);
  color: var(--color-foreground);
  vertical-align: middle;
  border-right: none;
  line-height: var(--line-height-tight);
}


.tabulator-row .tabulator-cell a:not(.btn) {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.tabulator-row .tabulator-cell a:not(.btn):hover {
  color: var(--color-link);
  text-decoration: underline;
}

/* Responsive collapse toggle — clean chevron style */
.tabulator-row .tabulator-cell.tabulator-row-header {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-1);
  border-right: none;
  cursor: pointer;
}

.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-muted-foreground);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle:hover {
  background: var(--color-muted);
}

/* Hide default SVG icons, use CSS chevron */
.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle svg {
  display: none;
}

.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open::after {
  transform: rotate(45deg);
}
/* Responsive collapse — expanded detail on mobile */
.tabulator-row .tabulator-responsive-collapse {
  background: var(--color-muted);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
}

.tabulator-row .tabulator-responsive-collapse table {
  font-size: var(--font-size-sm);
  width: 100%;
}

.tabulator-row .tabulator-responsive-collapse table td {
  padding: var(--space-2) var(--space-3);
  color: var(--color-foreground);
}

.tabulator-row .tabulator-responsive-collapse table td:first-child {
  font-weight: var(--font-weight-medium);
  color: var(--color-muted-foreground);
  white-space: nowrap;
  padding-right: var(--space-4);
}

/* Placeholder (empty state) */
.tabulator .tabulator-tableholder .tabulator-placeholder {
  padding: var(--space-8);
}

.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
  color: var(--color-muted-foreground);
  font-size: var(--font-size-sm);
}

/* Row selection checkboxes */
.tabulator input[type="checkbox"].tabulator-row-select-checkbox {
  width: 16px;
  height: 16px;
  min-width: 16px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  display: inline-block;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  margin: 0;
}

.tabulator input[type="checkbox"].tabulator-row-select-checkbox:hover {
  border-color: var(--color-primary);
}

.tabulator input[type="checkbox"].tabulator-row-select-checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.tabulator input[type="checkbox"].tabulator-row-select-checkbox:checked::after {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid var(--color-primary-foreground);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.tabulator input[type="checkbox"].tabulator-row-select-checkbox:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* Search input */
.smart-table-search {
  display: inline-flex;
  align-items: center;
}

.smart-table-search input {
  border: 1px solid var(--color-border);
  background: var(--color-background);
  border-radius: var(--radius-md);
  height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-foreground);
  font-family: var(--font-family-base);
  min-width: 220px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.smart-table-search input:hover {
  border-color: var(--color-border-strong);
}

.smart-table-search input:focus {
  outline: none;
  border-color: var(--color-ring);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.smart-table-search input::placeholder {
  color: var(--color-muted-foreground);
}

/* Toolbar */
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.table-toolbar__left,
.table-toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Mobile */
@media (max-width: 767px) {
  .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    padding: var(--space-2) var(--space-3);
  }

   .tabulator-row.tabulator-row-even {
     background: var(--color-background);
   }

  .tabulator-row .tabulator-cell {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
  }

  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .table-toolbar__left,
  .table-toolbar__right {
    width: 100%;
    flex-direction: column;
  }



   /* Row layout — chevron + main column side by side */
   .tabulator-row {
     display: flex !important;
     flex-wrap: wrap;
     align-items: center;
   }

   .tabulator-row .tabulator-cell:not(.tabulator-row-header) {
     flex: 1;
     min-width: 0;
   }

   .tabulator-row .tabulator-responsive-collapse {
     flex-basis: 100%;
   }
  .smart-table-search input {
    width: 100%;
    min-width: 0;
  }
}


/* Loading state — shown while Tabulator initializes */
.smart-table-loading .tabulator {
  opacity: 0;
}

.smart-table-loading::after {
  content: '';
  display: block;
  height: 120px;
  background:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 100% 40px, 33.33% 40px;
  border-radius: var(--radius-lg);
  opacity: 0.4;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.15; }
}