/* ===== JOBS (Daily Assignments) =====
   ONE ASSIGNMENT IS ONE TABLE ROW. CUSTOMER, LOCATION and SOLD EQUIP each divide their own
   cell into stacked lines — three for CUSTOMER and SOLD EQUIP, two for LOCATION — and it is
   this stylesheet that divides them, not the table.

   That is deliberate and it is the whole trick. The tab was built with three table rows per
   assignment tied together by rowspan, and a spanned cell that ends up TALLER than the rows
   it covers has to give its surplus height to one of them. Browsers disagree about which:
   Chrome shares it out, WebKit — an iPad — gives all of it to the last row. So a job with a
   four-point checklist came out evenly ruled on a PC and lopsided on the tablet, COMPANY and
   BIGBAGS sitting in a box twice the height of the lines above. There is no CSS that settles
   that argument, so the argument is not had: no cell in this table spans anything, and every
   stack splits its own height with grid rows that are equal by declaration.

   THE height:1px ON THE STACK CELLS IS LOAD-BEARING AND IS NOT A TYPO. A stack fills its cell
   with height:100%, and a percentage height only resolves against a parent whose own height
   is definite — a table cell sized by its row is not. 1px cannot shrink anything: a specified
   height on a table cell is a MINIMUM, and the row is still as tall as the tallest thing in
   it. It is there to be a number for the 100% to resolve against, nothing more. */

/* The table is wider than a tablet on purpose — eight columns, five of them free text — so it
   scrolls inside its .tablewrap rather than squeezing the checklist into a strip. */
#jobsDays .jobTable{table-layout:fixed;min-width:1030px}
#jobsDays col.c-no{width:36px}
#jobsDays col.c-cust{width:194px}
#jobsDays col.c-loc{width:132px}
#jobsDays col.c-desc{width:170px}
#jobsDays col.c-chk{width:230px}
/* Label plus a count: a straps or bigbags figure is one or two digits, and the label beside
   it is the seven characters of BIGBAGS. Sized for exactly that and no wider. */
#jobsDays col.c-sold{width:100px}
#jobsDays col.c-rmk{width:132px}
#jobsDays col.c-act{width:44px}

#jobsDays td.job-no{font-weight:700;color:var(--muted);vertical-align:top;padding-top:8px}

/* ---- a stack of labelled lines: CUSTOMER and SOLD EQUIP ----
   A two-column grid — the label, then the box — with three rows of equal height that grow
   together as the assignment grows. minmax keeps each line comfortable when the row is short
   and lets all three share the height evenly when something else in the row is tall. */
#jobsDays td.job-stack-cell{padding:0;vertical-align:top;height:1px}
#jobsDays .jobstack{display:grid;grid-template-columns:62px 1fr;
  grid-template-rows:repeat(3,minmax(34px,1fr));height:100%}
/* The labels. Styled like a sub-header, not like data: they name the box beside them and are
   not something the pilot fills in. Right-aligned and vertically centred, so each word sits
   against the box it belongs to and level with what is written in it. */
#jobsDays .jobstack-lab{display:flex;align-items:center;justify-content:flex-end;
  background:var(--subhead);color:var(--muted);font-size:10px;text-transform:uppercase;
  letter-spacing:.4px;padding:0 6px 0 3px;border-right:1px solid var(--line)}
/* A rule between the lines — items 3 to 6 are the second and third label/box pairs. */
#jobsDays .jobstack>:nth-child(n+3){border-top:1px solid var(--line)}
#jobsDays input.jobstack-val{width:100%;height:100%;border:none;border-radius:0;
  background:transparent;color:var(--ink);font:inherit;padding:0 7px;text-align:left}
#jobsDays input.jobstack-val:focus{outline:2px solid var(--accent);outline-offset:-2px}
/* The SOLD EQUIP counts are the exception to the left rule above: they sit in a box sized to
   a one- or two-digit figure, where centred is what looks placed rather than adrift. */
#jobsDays .job-sold input.jobstack-val{text-align:center;padding:0 2px}
/* The spinner arrows a number box grows on hover would take a third of a box this narrow and
   squash the figure the moment the pointer passed over it. They are no use on a tablet anyway
   — the counts are typed, not nudged — so they go here and only here. */
#jobsDays .job-sold input.jobstack-val::-webkit-outer-spin-button,
#jobsDays .job-sold input.jobstack-val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#jobsDays .job-sold input.jobstack-val{-moz-appearance:textfield;appearance:textfield}

/* ---- DESCRIPTION and RMK ----
   Three lines tall, so they hold a textarea rather than a one-line input. It fills its cell
   and can be dragged taller; it may not be dragged WIDER, which would push the column out and
   misalign everything beside it. */
#jobsDays td.job-area-cell{padding:0;vertical-align:top;height:1px}
#jobsDays textarea.job-area{display:block;width:100%;height:100%;min-height:102px;
  border:none;border-radius:0;background:transparent;color:var(--ink);
  font:inherit;padding:6px 5px;resize:vertical;white-space:pre-wrap}
#jobsDays textarea.job-area:focus{outline:2px solid var(--accent);outline-offset:-2px}
#jobsDays textarea.job-area::placeholder,#jobsDays input::placeholder{color:var(--muted);opacity:.7}

/* ---- LOCATION: LZ over SITE ----
   Two boxes sharing the one cell, split by a rule so they read as two lines rather than as
   one field with a stray border. They divide the cell's height between them, so the pair
   fills it however tall the assignment grows.
   Each names itself with placeholder text, which disappears the moment something is typed —
   so an empty column reads LZ / SITE and a filled one reads as the pilot's own words. */
#jobsDays td.job-loc-cell{padding:0;vertical-align:top;height:1px}
#jobsDays .joblocs{display:flex;flex-direction:column;height:100%;min-height:102px}
#jobsDays input.job-loc-line{flex:1 1 0;width:100%;min-height:39px;
  border:none;border-radius:0;background:transparent;color:var(--ink);
  font:inherit;padding:6px 7px;text-align:left}
#jobsDays input.job-loc-line+input.job-loc-line{border-top:1px solid var(--line)}
#jobsDays input.job-loc-line:focus{outline:2px solid var(--accent);outline-offset:-2px}
/* The placeholder is doing a label's job here, so it is set in small caps like the labels in
   CUSTOMER rather than looking like faded data. */
#jobsDays input.job-loc-line::placeholder{font-size:10px;text-transform:uppercase;
  letter-spacing:.4px;color:var(--muted);opacity:.8}

/* ---- the checklist cell ----
   Its contents wrap onto as many lines as the points need, so this one cell opts out of the
   table-wide white-space:nowrap. */
#jobsDays td.job-chk-cell{white-space:normal;text-align:left;vertical-align:top;padding:5px 6px}
.joblist{display:flex;flex-direction:column;gap:4px}
.jobitem{display:flex;align-items:center;gap:5px}
.jobitem input.job-item-text{flex:1;min-width:0;padding:4px 6px;font-size:12px;
  background:var(--panel2);border:1px solid var(--line);border-radius:5px;text-align:left}
.jobitem input.job-item-text:focus{outline:2px solid var(--accent);outline-offset:-1px}
/* A ticked point is struck through and dimmed, so what stays legible is what is still
   outstanding — the same reading the fuel log's transferred rows get. */
.jobitem.done input.job-item-text{text-decoration:line-through;color:var(--muted)}
/* The tick. A button styled and announced as a checkbox (see jobs.js). Its box has to stand
   whether it holds a ✓ or nothing, so the size is explicit and the glyph is centred by flex
   rather than by a line-height an empty button never gets to apply; vertical-align:middle
   takes it off the text baseline so its own contents cannot change the row's height. */
.jobchk{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  flex:none;width:30px;height:27px;padding:0;font-size:14px;font-weight:800;
  cursor:pointer;background:var(--panel2);color:var(--good);
  border:1px solid var(--line);border-radius:6px}
.jobchk:hover{border-color:var(--accent);background:var(--btnhover)}
.jobchk:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.jobchk.on{background:var(--goodbg);border-color:var(--good)}
.jobitem-x{flex:none;padding:2px 6px;font-size:11px;line-height:1.6;cursor:pointer;
  background:transparent;color:var(--muted);border:1px solid transparent;border-radius:5px}
.jobitem-x:hover{color:var(--bad);border-color:var(--line);background:var(--btnhover)}
.joblist-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.jobitem-add{padding:3px 9px;font-size:11px}
.joblist-prog{font-size:11px;color:var(--muted);font-weight:700}
/* Every point on the job ticked — the one thing the pilot is looking for before lifting. */
.joblist-prog.all{color:var(--good)}

/* ---- the day's readout under its table ---- */
.jobsum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px}
.jobsum-cap{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px}
.jobsum-item{display:inline-flex;align-items:baseline;gap:6px}
.jobsum-item.sep{margin-left:6px;padding-left:14px;border-left:1px solid var(--line)}
.jobsum-lab{color:var(--muted)}
.jobsum-val{font-weight:700;color:var(--ink)}

@media print{
  /* On paper this is the day's job sheet: the boxes are the record, so their chrome goes and
     what was typed stays. A textarea prints its own value; it just needs to stop looking like
     a form field and stop being scrollable at its on-screen height. */
  #jobsDays textarea.job-area,#jobsDays input.jobstack-val,
  #jobsDays input.job-loc-line,.jobitem input.job-item-text{
    border:none!important;background:none!important;color:#000!important;
    resize:none!important;overflow:visible!important}
  /* The rules BETWEEN the stacked lines stay — on paper they are what says these are separate
     entries and not one run-on answer — while everything else a form field carries goes. */
  #jobsDays .jobstack>:nth-child(n+3){border-top:1px solid #999!important}
  #jobsDays .jobstack-lab{border-right:1px solid #999!important;color:#000!important;
    background:none!important}
  #jobsDays input.job-loc-line+input.job-loc-line{border-top:1px solid #999!important}
  /* The tick is a record of what was made ready, so it prints — as a bare glyph, since a
     button's chrome means nothing on a page. An empty one still prints its box, so an
     unticked point does not read as an absent one. */
  .jobchk{background:none!important;color:#000!important;border:1px solid #000!important;
    width:14px!important;height:14px!important;font-size:11px!important}
  .jobitem.done input.job-item-text{color:#000!important}
  .joblist-prog,.jobsum-val{color:#000!important}
}