th.rotate {
  /* Something you can count on */
  height: 100px;
  white-space: nowrap;
}

th.rotate > div {
  transform:
    /* Magic Numbers */
    translate(0px, 25px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 40px;
}
th.rotate > div > span {
  padding: 5px 5px;
  text-transform: none;
}

div.rotate {
    transform:rotate(270deg);
    transform-origin: "bottom-right";
}

.table > tbody > tr> td {
  text-transform: none;
}
/* Dashboard tables (tables.js). */
.kpi-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-4) 0 -1px; padding: 0 0 0 var(--space-2);
  list-style: none; position: relative; z-index: 1; }
.kpi-tabs > li > a { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4);
  padding: var(--space-2) var(--space-3); background: var(--muted); color: var(--muted-foreground);
  border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.kpi-tabs > li > a:hover, .kpi-tabs > li > a:focus { text-decoration: none; color: var(--foreground); }
.kpi-tabs > li.active > a { background: var(--card); color: var(--foreground); border-bottom-color: var(--card); }
.kpi { display: flex; align-items: baseline; gap: var(--space-1); font-size: 24px; font-weight: 600; line-height: 1.2; }
.kpi-value { font-variant-numeric: tabular-nums; }
.table-stack .table-panel { margin-top: 0; }
.table-panel-actions { display: flex; gap: var(--space-1); }
.table-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3);
  background: var(--muted); padding: 10px 12px; border-radius: var(--radius); }
.table-filters .form-control { width: auto; min-width: 140px; max-width: 200px; }
.table-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  min-height: 1.75rem; margin-bottom: var(--space-2); color: var(--muted-foreground); }
.table-chip { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--secondary);
  color: var(--secondary-foreground); padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.table-chip .close { float: none; font-size: 1.1em; color: inherit; opacity: .8; }
.table-notice { color: var(--foreground); }
.table-filters .table-length { margin-left: auto; min-width: 0; }
.table-filters [name=modified] { min-width: 190px; }
.table-scroll { overflow-x: auto; }
.table-scroll.table-loading tbody { opacity: .5; }
.table-scroll thead th { position: sticky; top: 0; background: var(--card); }
.table-actions { white-space: nowrap; text-align: right; }
.table-actions .table-action { margin-left: var(--space-2); }
.table-actions-lead { text-align: left; }
.table-actions-lead .table-action { margin: 0 var(--space-2) 0 0; }
tr.row-access-org > td { background: color-mix(in oklch, var(--info) 10%, transparent); }
tr.row-access-pass > td { background: color-mix(in oklch, var(--warning) 12%, transparent); }
/* One height for every toolbar control; Bootstrap's input-sm, btn-sm and bootstrap-select disagree. */
.table-filters { align-items: center; }
.table-filters .form-control,
.table-filters .btn,
.table-filters .bootstrap-select > .btn {
  height: 34px; padding-block: 0; padding-inline: var(--space-3);
  font-size: 13px; line-height: 32px; box-sizing: border-box;
}
.table-filters .btn { display: inline-flex; align-items: center; gap: var(--space-1); }
.table-filters .form-control[readonly] { background: var(--card); cursor: pointer; }
.table-filters .bootstrap-select > .btn.bs-placeholder,
.table-filters .bootstrap-select > .btn.bs-placeholder .filter-option { color: var(--foreground); }
/* Wide screens keep the toolbar on one line; inputs shrink rather than wrap. */
@media (min-width: 1200px) {
  .table-filters { flex-wrap: nowrap; }
  .table-filters .form-control { flex: 0 1 200px; min-width: 100px; }
  .table-filters [name=modified] { min-width: 160px; }
  .table-filters .btn-group, .table-panel-actions { flex-shrink: 0; }
  .table-filters .form-control.table-length { flex: 0 0 auto; }
}