/* ============================================================================
   F30  PAYMENT SCHEDULE, PROFIT AND LOSS, PROFIT BY JOB
   Tokens only, from app.css, so both themes work. The print page is the one
   place with fixed colours: paper is white whatever the screen's theme. The
   phone rules sit at the width app.css already folds at (700px).
   ============================================================================ */

/* -------------------------------------------------------- Payment schedule */
.f30-h{margin-top:18px}
.f30-sched{margin:0 0 12px}
.f30-sub{margin:4px 0 8px;font-size:13px;color:var(--ink-2);line-height:1.45}
.f30-sub b{color:var(--ink)}
.f30-parts{border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);overflow:hidden;margin:0 0 6px}
.f30-part{padding:10px 12px;border-top:1px solid var(--line)}
.f30-part:first-child{border-top:0}
.f30-gone{opacity:.6}
.f30-p1{display:flex;align-items:baseline;gap:10px}
.f30-pn{flex:none;font-size:11.5px;color:var(--ink-3);min-width:42px}
.f30-pf{flex:1 1 auto;min-width:0;font-size:13px;color:var(--ink);line-height:1.4}
.f30-pf small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.f30-pamt{flex:none;font-size:13.5px;font-weight:600;white-space:nowrap}
.f30-p2{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:6px 0 0 52px}
.f30-ps{flex:1 1 200px;min-width:0;font-size:12px;color:var(--ink-2);line-height:1.4}
.f30-pa{flex:none;margin-left:auto}
.f30-note{color:var(--ink-2)}
.f30-warn{border-color:var(--warn) !important;color:var(--warn) !important}

/* ----------------------------------------------------------- Profit and loss */
.f30-pl-head{margin:0 0 12px;font-size:13px;color:var(--ink-2);line-height:1.5}
.f30-pl-head b{color:var(--ink);font-size:15px}
.f30-pl-asof{font-size:12px;color:var(--ink-3)}
.f30-pl-t{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--panel-2);font-size:13px}
.f30-pl-t td,.f30-pl-t th{padding:7px 12px;border-top:1px solid var(--line);vertical-align:baseline;text-align:left;color:var(--ink)}
.f30-pl-t td.num{text-align:right;white-space:nowrap;width:1%}
.f30-pl-t small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.f30-pl-sec th{background:var(--panel-3);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.f30-pl-line td:first-child{padding-left:26px}
.f30-pl-grp td{background:var(--panel)}
.f30-pl-tc td{border-top:2px solid var(--line)}
.f30-pl-tot td{background:var(--panel-3);font-size:14px}
.f30-pl-foot{margin:8px 0 0}
.f30-pl-btns{display:flex;gap:8px;margin-top:14px}
.f30-neg{color:var(--crit)}

/* ------------------------------------------------------- Money: Profit by job */
.f30-byjob > .sec-h{margin-top:26px}
.f30-tb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.f30-sum{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 4px;font-size:12.5px;color:var(--ink-2)}
.f30-sum b{color:var(--ink)}

/* ------------------------------------------------------------------ print */
/* Present only while a profit and loss is open: printing then gives that
   page alone, black on white, and nothing else of the console. */
#f30PrintPage{display:none}
@media print{
  body.f30-has-print > *:not(#f30PrintPage){display:none !important}
  body.f30-has-print{background:#fff !important}
  body.f30-has-print #f30PrintPage{display:block !important;padding:0;color:#111;background:#fff;
    font:12px/1.45 -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
  #f30PrintPage .f30-pl-head,#f30PrintPage .f30-pl-head b,#f30PrintPage .f30-pl-asof,#f30PrintPage .x-note{color:#111}
  #f30PrintPage .f30-pl-t{background:#fff;border:1px solid #999}
  #f30PrintPage .f30-pl-t td,#f30PrintPage .f30-pl-t th{color:#111;border-top:1px solid #ccc;background:#fff}
  #f30PrintPage .f30-pl-t small{color:#444}
  #f30PrintPage .f30-pl-sec th{background:#eee;color:#222}
  #f30PrintPage .f30-pl-tot td{background:#eee}
  #f30PrintPage .f30-neg{color:#a00}
  #f30PrintPage .mono{font-family:ui-monospace,Menlo,monospace}
}

/* ------------------------------------------------------------------ phone */
@media(max-width:700px){
  .f30-part{padding:10px}
  .f30-p2{margin-left:0}
  .f30-pa{flex:1 1 100%;margin-left:0}
  .f30-pa .btn{width:100%;min-height:42px}
  .f30-pl-t{font-size:12.5px}
  .f30-pl-t td,.f30-pl-t th{padding:7px 9px}
  .f30-pl-line td:first-child{padding-left:16px}
  .f30-pl-btns .btn{flex:1 1 0;min-height:42px}
  .f30-tb .seg{width:100%}
}