/* ============================================================================
   F19  CLEAR THE STUCK QUEUES
   Folded folders on Files, the File it form, Verify and Reject in the order
   drawer, the supplier orders to check, and the quiet "doing these yourself"
   group on Orders. Tokens only, from app.css, so both themes work.
   ============================================================================ */

/* ---------------------------------------------------------------- Files */

/* A file row with a button on the end. The name keeps its ellipsis; the
   button never shrinks, so "File it" is always whole and always in the same
   place down the list. */
ul.files li.f19-row{align-items:center}
ul.files li.f19-row .f19-act{flex:none;margin-left:auto}
ul.files li.f19-row small{flex:1 1 auto}
.f19-by{flex:none;font-style:normal;font-size:11px;color:var(--lime-dim);white-space:nowrap;
  max-width:34%;overflow:hidden;text-overflow:ellipsis}

/* TICK SEVERAL, FILE THEM ONCE. The bar sits over the tray and says what it
   is for until something is ticked, then becomes the buttons. */
.f19-tick{flex:none;width:16px;height:16px;margin:0;accent-color:var(--lime);cursor:pointer;align-self:center}
.f19-batch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 6px;padding:6px 10px;
  border:1px dashed var(--line);border-radius:var(--r);font-size:12px;color:var(--ink-3)}
.f19-batch.on{border-style:solid;border-color:var(--lime);background:var(--lime-ghost);color:var(--ink)}
.f19-batch [data-f19n]{margin-right:auto}
.f19-batch .btn[hidden]{display:none}
.f19-names{margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:12px;max-height:180px;overflow:auto}
.f19-names li{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f19-names small{color:var(--ink-3)}

/* FOLDED FOLDERS. A folder shows its name, the client and how many files,
   and opens on a tap. The page was 16,800px tall with every one open. */
.cab.f19-fold > .cab-h{cursor:pointer;user-select:none;border-bottom-color:transparent}
.cab.f19-fold > .cab-h:hover h3{color:var(--lime)}
.cab.f19-fold > .cab-h:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
.cab.f19-fold:not(.f19-open) > .draw,
.cab.f19-fold:not(.f19-open) > .cab-gap{display:none}
.cab.f19-fold.f19-open > .cab-h{border-bottom-color:var(--line)}
.cab.f19-fold{margin-bottom:0}
.cab.f19-fold:not(.f19-open) > .cab-h{padding:9px 14px}
.f19-folders{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px;align-items:start}
.f19-folders > .cab.f19-open{grid-column:1/-1}
.f19-folders > .cab:not(.f19-open) > .cab-h h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%}
.f19-chev{display:inline-block;width:0;height:0;border-left:5px solid var(--ink-3);
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .15s ease;align-self:center;flex:none}
.cab.f19-open .f19-chev{transform:rotate(90deg)}

/* THE FILE IT FORM. */
.f19-src{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}
.f19-src .btn{flex:none}
.f19-frm .x-note{margin:0}
.f19-where{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.f19-where legend{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px;padding:0}
.f19-frm label.f19-opt{flex-direction:row;align-items:flex-start;gap:9px;padding:10px 11px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);cursor:pointer;
  text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--ink)}
.f19-frm label.f19-opt input{width:auto;margin-top:2px;flex:none}
.f19-frm label.f19-opt span{display:flex;flex-direction:column;gap:3px;min-width:0}
.f19-frm label.f19-opt b{font-weight:700}
.f19-frm label.f19-opt small{font-size:11px;color:var(--ink-3);line-height:1.4}
.f19-frm label.f19-opt:has(input:checked){border-color:var(--lime);background:var(--lime-ghost)}
.f19-pane[hidden]{display:none}
.f19-jobs{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.f19-jh{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:2px 0}
.f19-job{display:flex;gap:10px;align-items:baseline;text-align:left;width:100%;padding:8px 10px;
  border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);font:inherit;
  font-size:12.5px;cursor:pointer;min-width:0}
.f19-job span:last-child{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Why a job is offered under "Looks like", under its address. */
.f19-job .f19-jt{display:flex;flex-direction:column;gap:1px}
.f19-job .f19-jt small{font-size:10.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
.f19-job .mono{flex:none;font-weight:700}
.f19-job:hover{border-color:var(--ink-3)}
.f19-job.on{border-color:var(--lime);background:var(--lime-ghost)}

/* --------------------------------------------------------------- Orders */

/* Verify and Reject at the top of the order drawer. */
.f19-po{border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:var(--r);
  background:var(--panel-2);padding:12px 14px 4px;margin:0 0 16px}
.f19-po h4{margin-top:0}
.f19-po p{font-size:12.5px;line-height:1.5;color:var(--ink-2);margin:0 0 8px}
.f19-po p b{color:var(--ink)}
.f19-why{margin:4px 0 10px}
.f19-why[hidden]{display:none}

/* A supplier order to check. Its note is information he typed in, not a
   warning, so it is not in the red box the reader's flags use. */
.f19-sup{border-left-color:var(--warn)}
.f19-note{font-size:11.5px;line-height:1.45;color:var(--ink-2);background:var(--panel-2);
  border-radius:4px;padding:7px 10px}
.f19-supsec > .sec-h{margin-top:26px}

/* "You're doing these yourself": folded, quiet, at the bottom. The cards keep
   their picker, but lose the red box: nothing about them is wrong. */
.f19-quiet{margin:26px 0 0;border:1px dashed var(--line);border-radius:var(--r);padding:10px 14px;background:var(--ground)}
.f19-quiet summary{cursor:pointer;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)}
.f19-quiet summary b{color:var(--ink-2);font-size:13px}
.f19-quiet[open] summary{margin-bottom:12px}
.f19-quiet .po-card{border-left-color:var(--line);opacity:.85}
.f19-quiet .po-flag{background:var(--panel-2);color:var(--ink-3)}

@media(max-width:1100px){
  .f19-folders{grid-template-columns:1fr}
}
@media(max-width:700px){
  .f19-where{grid-template-columns:1fr}
  ul.files li.f19-row{flex-wrap:wrap;row-gap:2px}
  ul.files li.f19-row .fname{max-width:calc(100% - 90px)}
  ul.files.inbox li.f19-row .fname{max-width:calc(100% - 120px)}
  ul.files li.f19-row small{order:3;flex-basis:100%}
  .f19-by{order:4;max-width:100%}
  .f19-quiet{padding:9px 12px}
}