/*
 * tables.css — ListingTable and all data table variants
 */

/* ─── Base Table ─────────────────────────────────────────────────────────── */

table.ListingTable {
  width: 100%;
  display: table;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-collapse: collapse;
  /* border-radius: 0; */
}

table.ListingTable.Natural,
table.ListingTable.natural {
  width: auto;
}

table.ListingTable.Natural th,
table.ListingTable.natural th {
  padding-left: 0.2em;
  padding-right: 0.2em;
}

/* ─── Cells ──────────────────────────────────────────────────────────────── */

/* Tailwind v4 resets img to display:block and max-width:100%; row action icons are <img> tags inside td */
table.ListingTable td img {
  display: inline-block;
  vertical-align: middle;
  max-width: none;
  /* prevent Tailwind shrinking icons to the cell's narrow computed width */
  height: auto;
}

table.ListingTable tr td {
  font-size: var(--font-size-base);
  padding: 3px 6px;
  text-align: right;
  border-bottom: 1px solid var(--color-border);
}

table.ListingTable tr th {
  font-size: var(--font-size-base);
  font-weight: 600;
  text-align: center;
  vertical-align: bottom;
  padding: 3px 6px;
  background-color: var(--color-heading-bg);
  color: var(--color-heading-text);
  border-bottom: 1px solid var(--color-border);
  letter-spacing: 0.02em;
  /* white-space: nowrap; */
}

table.ListingTable tr td.RowHeader {
  text-align: left;
  white-space: nowrap;
}

/* ─── Alignment Utilities ────────────────────────────────────────────────── */

table.ListingTable tr td.LeftAligned,
table.ListingTable tr th.LeftAligned {
  text-align: left;
  padding-left: 4px;
}

table.ListingTable tr td.RightAligned,
table.ListingTable tr th.RightAligned {
  text-align: right;
  padding-right: 4px;
}

table.ListingTable tr td.CenterAligned,
table.ListingTable tr th.CenterAligned {
  text-align: center;
}

table.ListingTable tr.ColumnData td.LeftAligned {
  padding-left: 20px;
}

table.ListingTable tr.ColumnData td.RightAligned {
  padding-right: 30px;
}

/* ─── Border Utilities ───────────────────────────────────────────────────── */

table.ListingTable tr th.TopLine,
table.ListingTable tr td.TopLine {
  border-top: 1px solid var(--color-border);
}

table.ListingTable tr th.LeftLine,
table.ListingTable tr td.LeftLine {
  border-left: 1px solid var(--color-border);
}

table.ListingTable tr th.RightLine,
table.ListingTable tr td.RightLine {
  border-right: 1px solid var(--color-border);
}

table.ListingTable tr th.SideLine,
table.ListingTable tr td.SideLine {
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}

table.ListingTable tr th.NoLine,
table.ListingTable tr td.NoLine {
  border-bottom: none;
}

/* ─── Alternating Rows ───────────────────────────────────────────────────── */

table.ListingTable tbody tr:nth-child(even):not(.IgnoreAlternate) td {
  background-color: var(--color-row-even);
}

table.ListingTable tbody tr:nth-child(even):not(.IgnoreAlternate) td.Alternate {
  background-color: var(--color-row-alt);
}

table.ListingTable tbody tr:nth-child(odd):not(.IgnoreAlternate) td.Alternate {
  background-color: var(--color-row-even);
}

table.ListingTable thead tr th.Alternate {
  background-color: var(--color-row-even);
}

table.ListingTable thead tr td.ColGroupLight {
  background-color: var(--color-row-even);
}

table.ListingTable thead tr td.ColGroupDark {
  background-color: var(--color-row-alt);
}

/* ─── Colored Row Variants ───────────────────────────────────────────────── */
/* When adding a new color, modify functions.php - getColors() */

table.ListingTable tbody tr.purpleRow td {
  background-color: var(--row-purple-odd);
}

table.ListingTable tbody tr.purpleRow:nth-child(even) td {
  background-color: var(--row-purple-even);
}

table.ListingTable tbody tr.blueRow td {
  background-color: var(--row-blue-odd);
}

table.ListingTable tbody tr.blueRow:nth-child(even) td {
  background-color: var(--row-blue-even);
}

table.ListingTable tbody tr.redRow td {
  background-color: var(--row-red-odd);
}

table.ListingTable tbody tr.redRow:nth-child(even) td {
  background-color: var(--row-red-even);
}

table.ListingTable tbody tr.orangeRow td {
  background-color: var(--row-orange-odd);
}

table.ListingTable tbody tr.orangeRow:nth-child(even) td {
  background-color: var(--row-orange-even);
}

table.ListingTable tbody tr.yellowRow td {
  background-color: var(--row-yellow-odd);
}

table.ListingTable tbody tr.yellowRow:nth-child(even) td {
  background-color: var(--row-yellow-even);
}

table.ListingTable tbody tr.greenRow td {
  background-color: var(--row-green-odd);
}

table.ListingTable tbody tr.greenRow:nth-child(even) td {
  background-color: var(--row-green-even);
}

/* ─── Projection Totals — projected vs actual cell colour ───────────────── */

td.projected-value {
  color: var(--color-projected-text);
}

/* ─── Row Semantic States ────────────────────────────────────────────────── */

table.ListingTable tr.SubHeading td {
  font-weight: 600;
  padding-top: 6px;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-heading-bg);
}

table.ListingTable tr.SubHeading.NoBold td {
  font-weight: normal;
  padding-top: 6px;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-heading-bg);
}

table.ListingTable tr.Total td {
  border-top: 2px solid var(--color-border);
  font-weight: 600;
}

table.ListingTable tr.SubTotal td {
  border-top: 1px solid var(--color-border);
}

table.ListingTable tr.Total td.NoLine,
table.ListingTable tr.SubTotal td.NoLine {
  border-top: none;
}

table.ListingTable tr.Hover:hover td {
  background-color: #e2e8f0 !important;
}

table.ListingTable tr.Link {
  cursor: pointer;
}

table.ListingTable tr.Link:hover td {
  background-color: var(--color-accent) !important;
  color: #fff;
}

/* ─── Sort Controls ──────────────────────────────────────────────────────── */

table.ListingTable tr th.sort {
  cursor: pointer;
  text-decoration: underline;
}

table.ListingTable tr th.sort:hover {
  text-decoration: none;
}

table.ListingTable tr th.sort.asc {
  background: url(../../../images/sort-asc.png) bottom right no-repeat;
  padding-right: 14px;
}

table.ListingTable tr th.sort.desc {
  background: url(../../../images/sort-desc.png) bottom right no-repeat;
  padding-right: 14px;
}

/* ─── Inline Form Rows ───────────────────────────────────────────────────── */

table.ListingTable tr.Form td {
  margin: 0;
  padding: 2px 0;
}

table.ListingTable tr.Form td.Buttons {
  padding-top: 6px;
  padding-right: 4px;
}

table.ListingTable tr.Form.QuickAdd td {
  background-color: var(--color-quick-add);
}

table.ListingTable tr.Form.QuickFilter td {
  background-color: var(--color-quick-filter);
}

table.ListingTable tr.Form.QuickFilter .filterLink {
  padding: 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: normal;
}

table.ListingTable tr.Form td input:not([type=checkbox]):not([type=radio]),
table.ListingTable tr.Form td select,
table.ListingTable tr.Form td textarea {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  width: 100%;
  margin: 0;
  padding: 3px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

table.ListingTable tr.Form td input[type=checkbox],
table.ListingTable tr.Form td input[type=radio] {
  display: inline-block;
  float: none;
  vertical-align: middle;
}

table.ListingTable tr.Form td:has(> input[type=checkbox]),
table.ListingTable tr.Form td:has(> input[type=radio]) {
  text-align: center;
}

table.ListingTable tr.Form td input:focus,
table.ListingTable tr.Form td select:focus,
table.ListingTable tr.Form td textarea:focus {
  outline: none;
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

table.ListingTable tr.Form div.group {
  float: none;
}

/* Inline form icon buttons */
table.ListingTable tr.Form td input.search[type=submit] {
  cursor: pointer;
  background: url('../../../images/zoom.png') center center no-repeat;
  border: none;
  width: 16px;
}

table.ListingTable tr.Form td input.clear[type=button] {
  cursor: pointer;
  background: url('../../../images/eraser.png') center center no-repeat;
  border: none;
  width: 16px;
}

table.ListingTable tr.Form td input.add[type=submit] {
  cursor: pointer;
  background: url('../../../images/add.png') center center no-repeat;
  border: none;
  width: 16px;
}

/* ─── Legend Color Swatch ────────────────────────────────────────────────── */

table.ListingTable tr td div.LegendColor {
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 8px;
  border-style: solid;
  vertical-align: bottom;
}

/* ─── Floating (Sticky) Header ───────────────────────────────────────────── */

table.ListingTable .FloatingHeader {
  background: var(--color-bg);
  opacity: 0.9;
  z-index: 10000;
}


/* ─── Link count badge ───────────────────────────────────────────────────── */

table.ListingTable td a[count] {
  position: relative;
}

table.ListingTable td a[count]::before {
  content: attr(count);
  display: inline-block;
  text-align: center;
  background: rgba(84, 84, 84, 0.8);
  font-size: 8px;
  font-weight: bold;
  width: 12px;
  height: 12px;
  line-height: 12px;
  vertical-align: middle;
  color: #fff;
  border-radius: 6px;
  position: absolute;
  top: -3px;
  right: -3px;
}

/* ─── Detail Tab ─────────────────────────────────────────────────────────── */

td.detailtab {
  cursor: pointer;
}

/* ─── Column header helper icon ──────────────────────────────────────────── */

thead th span.helper::after {
  content: '';
  display: inline-block;
  vertical-align: text-top;
  margin-left: 5px;
  width: 16px;
  height: 16px;
  background: url(../../../images/help.png) center center no-repeat;
}