/*
 * 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;
}
table.ListingTable .FloatingHeader th {
  background: var(--color-bg);
}

/* ─── 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;
}