.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{border:1px solid var(--line);padding:5px 7px;text-align:center;white-space:nowrap}
thead th{background:var(--head);color:var(--ink);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
thead tr.sub th{background:var(--subhead);font-size:10px;color:var(--muted)}
tbody tr:nth-child(even){background:var(--stripe)}
td.input-cell{padding:0}
td.input-cell input{border:none;border-radius:0;background:transparent;text-align:center;padding:6px 4px;direction:ltr}
td.input-cell input:focus{outline:2px solid var(--accent);outline-offset:-2px}
td.input-cell select{border:none;border-radius:0;background:var(--panel2);color:var(--ink);text-align:left;padding:6px 4px;width:100%;font:inherit}
td.input-cell select:focus{outline:2px solid var(--accent);outline-offset:-2px}
/* Native dropdown list must follow the theme — otherwise dark-mode options render as light text on white */
td.input-cell select option{background:var(--panel2);color:var(--ink)}
td.tank{text-align:left;min-width:190px}
/* Fuel Tank Database: rows are clickable (open edit modal), like the Fleet table.
   All values are centred in their cells (inherits the default th,td centring). */
#fuelTankTable th:first-child,#fuelTankTable td:first-child{width:34px}
/* Fuel Tank DB + Refuelling Log: even column widths when there's room; on narrow
   screens they revert to content-sized (auto) and the .tablewrap scrolls horizontally.
   The "#" and ✕ utility columns stay narrow so the data columns share the rest evenly. */
@media(min-width:720px){
  #fuelTankTable,#fuelLogDays .tablewrap table{table-layout:fixed;width:100%}
  #fuelLogDays .tablewrap table th:first-child,#fuelLogDays .tablewrap table td:first-child{width:34px}
  #fuelLogDays .tablewrap table th.no-print,#fuelLogDays .tablewrap table td.no-print{width:44px}
  #fuelTankTable td.tank,#fuelLogDays .tablewrap table td.tank{min-width:0}
}
/* ---- The collapsible lift block on OFP ----
   Exactly one of .fold and .stub is visible at a time. The default (expanded) hides the
   stub; adding .ops-collapsed to #fuelSections swaps them. Nothing is added or removed —
   see the comment on FOLD_CLASS for why this is a class and not a rebuild. */
#fuelSections .fuelTable .stub{display:none}
#fuelSections.ops-collapsed .fuelTable .fold{display:none}
#fuelSections.ops-collapsed .fuelTable th.stub,
#fuelSections.ops-collapsed .fuelTable td.stub{display:table-cell}
/* The group headers double as the fold control. The chevron is the only thing announcing
   that a header is pressable, so it is not decorative — but it is screen-only, since a
   printout has nothing to press. */
#fuelSections .fuelTable th.foldable{cursor:pointer}
#fuelSections .fuelTable th.foldable:hover{color:var(--accent)}
#fuelSections .fuelTable th.foldable .foldchev{font-size:10px;opacity:.75}
#fuelSections .fuelTable th.stub{cursor:pointer;color:var(--accent);font-size:15px;padding:0 4px}
#fuelSections .fuelTable td.stub{cursor:pointer;text-align:center;font-weight:700}
#fuelSections .fuelTable th.stub:hover{background:var(--ro)}
/* Fleet Database: keep each editable cell wide enough that its value can't be clipped
   on narrow screens (REG e.g. "LN-OGE", BEM e.g. "1372"). The .tablewrap scrolls
   horizontally instead of cropping. */
#fleetTable td.input-cell input{min-width:56px}
#fleetTable td:nth-child(3) input{min-width:78px}
/* Fuel Log per-day per-tank summary block under each day's table */
.fuelsum{margin-top:10px}
.fuelsum table{width:auto;min-width:260px;font-size:14px}
.fuelsum td,.fuelsum th{text-align:left}
.fuelsum td.num,.fuelsum th.num{text-align:right}
.fuelsum .empty{color:var(--muted);font-size:12px;padding:4px 2px}
/* Transfer ticks in the day summary. A ticked row is struck through and muted: "already
   handed over to the secondary program", so what remains legible is what is still
   outstanding. DAY TOTAL strikes only when every row above it has.
   The struck text stays on --muted rather than fading toward the panel — it is still a
   figure the pilot may need to read back, so it is dimmed, not hidden. */
/* THIS TABLE SHRINKS TO ITS CONTENT. `.fuelsum table` is width:auto against the global
   table{width:100%} for that reason — it is a small readout beside a full-width log, not
   another full-width table, and it stays on the left where the pilot's eye already is.
   So NO CELL IN HERE MAY DECLARE A PERCENTAGE WIDTH. A percentage on a cell in an
   auto-layout table is resolved against the containing block, which drags the whole table
   out to fill the window — the tick column was briefly `width:1%`, meaning "as narrow as
   possible", and did exactly the opposite. Size this column with a length or not at all. */
.fuelsum th.chk,.fuelsum td.chk{white-space:nowrap;text-align:center;padding-right:4px}
.fuelsum th.chk{color:var(--muted)}
.fuelsum tfoot td.chk{color:var(--good);font-weight:800}
/* An UNTICKED tick has no text in it, so anything that lets content set the height collapses
   it to a 6px sliver — padding and border only. It has to hold its box whether it is showing
   a ✓ or nothing, so the height is EXPLICIT and the glyph is centred into it by flex rather
   than by a line-height that an empty button never gets to apply.
   The size is the target: 36 x 27 is in line with the app's other in-table controls and is
   meant to be hit with gloves on, not aimed at.

   vertical-align is the second half of that and is just as load-bearing: an inline-level box
   is placed on the text BASELINE by default, and an inline-flex box with no content takes
   its baseline from its own bottom edge while one containing a ✓ takes it from the glyph.
   So an empty tick hangs lower than a ticked one and the row silently changes height as the
   pilot presses it. Aligning to middle takes the box off the baseline entirely, which is the
   only way its own content stops being able to move the row. */
.fuelchk{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  height:27px;min-width:36px;padding:0 8px;font-size:14px;font-weight:800;
  cursor:pointer;background:var(--panel2);color:var(--good);
  border:1px solid var(--line);border-radius:6px}
.fuelchk:hover{border-color:var(--accent);background:var(--btnhover)}
.fuelchk:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.fuelchk.on{background:var(--goodbg);border-color:var(--good)}
.fuelsum tr.done td{text-decoration:line-through;color:var(--muted)}
.fuelsum tr.done td.chk{text-decoration:none;color:var(--good)}
@media print{
  /* On paper the tick is a record of what was transferred, so the column prints — but as a
     bare glyph, since a button's chrome means nothing on a page. */
  .fuelchk{border:none!important;background:none!important;padding:0!important;
    min-width:0!important;height:auto!important;color:#000!important}
  .fuelsum tr.done td{color:#000!important}
}