#ph-jobportal .ph-l{min-width:0}
#ph-jobportal .ph-titlerow{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
#ph-jobportal .ph-sub{margin-top:4px}
#ph-jobportal .appr{display:flex;align-items:center;gap:11px;padding:7px 13px;border-radius:var(--r-sm);background:linear-gradient(180deg,#1c2a22,#16231c);border:1px solid var(--green-l);box-shadow:var(--sh-xs)}
#ph-jobportal .appr-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:rgba(134,204,114,.14);color:var(--green);border:1px solid var(--green-l)}
#ph-jobportal .appr-ic .ic{width:16px;height:16px;stroke-width:2.2}
#ph-jobportal .appr-k{font-size:9.5px;text-transform:uppercase;letter-spacing:1px;color:var(--green);font-weight:800;line-height:1.4}
#ph-jobportal .appr-v{font-size:13px;font-weight:700;color:var(--text);letter-spacing:.2px}

#page-jobportal{padding:0;overflow:hidden}
#page-jobportal.active{display:flex;flex-direction:column}
#page-jobportal .jp-tabwrap{flex-shrink:0;background:#15181d;border-bottom:1px solid var(--border);padding:0 24px;overflow-x:auto}
#page-jobportal .jp-tabwrap .tabs{margin-bottom:0;border-bottom:none}
#page-jobportal .jp-scroll{flex:1;overflow-y:auto;padding:20px 24px 44px}

#page-jobportal .dash{display:grid;grid-template-columns:300px minmax(0,1fr) 332px;gap:16px;align-items:start}
#page-jobportal .dash-full{grid-column:1 / -1}
#page-jobportal .col{display:flex;flex-direction:column;gap:16px;min-width:0}
/* ── Financials tab: two-column layout so it fits the screen (owner: "don't make me
   scroll the financial tab"). P&L across the top; wide code table left, labor+bills right.
   In jpfin-fit the columns area is the only scroll region — the page itself never scrolls. */
/* FULL SCREEN ON BIG MONITORS (Ryan, 2026-08-19: "financials page needs to take up full
   screen on large monitors"). The 1360px cap centred the content and left a dead band down
   the right of a curved 34" — the widgets simply get the room now. */
.jpfin-wrap{padding:20px 24px;max-width:none;margin:0}
.jpfin-cols{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:stretch}
.jpfin-col{min-width:0;display:flex;flex-direction:column}
/* !important: the cards carry inline margin-bottom:16px — the column's LAST card must sit
   flush so both columns truly end on the same line. */
.jpfin-col > .card:last-child{margin-bottom:0!important}
@media (max-width:1000px){ .jpfin-cols{grid-template-columns:1fr} }
/* The two columns END LEVEL (Ryan, 2026-08-19): the code table sets the height, and the
   right column splits it ~50/50 — Field Labor stretches DOWN to the halfway line, Vendor
   Bills ends flush with the table's bottom; each scrolls inside itself when longer. */
@media (min-width:1001px){
  /* Every widget has a FLOOR so it stays readable (Ryan: "the boxes are too small make
     them larger"); the columns still stretch so both end on the same line. The code table
     is the tallest because it is the one with the most rows to show. */
  .jpfin-col:first-child > .card{flex:1 1 auto;min-height:540px}
  .jpfin-col:last-child > .card{flex:1 1 0;min-height:330px;overflow-y:auto}
}
/* Small-LAPTOP P&L (Ryan, 2026-08-19): thinner header tiles so more of Budget-vs-actual
   and Vendor bills is on screen. The tile markup carries inline styles, hence !important. */
@media (max-height:820px){
  .jpfin-pnl{padding:12px 16px 12px;margin-bottom:10px!important}
  .jpfin-pnl-t{font-size:14px!important;margin-bottom:1px!important}
  .jpfin-pnl-s{margin-bottom:8px!important}
  .jpfin-tile{padding:6px 10px!important}
  .jpfin-tile-l{margin-bottom:1px!important}
  .jpfin-tile-v{font-size:15px!important}
  .jpfin-tile-s{font-size:10px!important;margin-top:1px!important}
  .jpfin-cat{margin-top:8px!important;padding-top:8px!important}
}
@media (min-width:1001px) and (min-height:640px){
  #page-jobportal.jpfin-fit .jp-scroll{overflow:hidden;display:flex;flex-direction:column;min-height:0}
  #page-jobportal.jpfin-fit #jp-cost{flex:1;min-height:0;display:flex;flex-direction:column}
  #page-jobportal.jpfin-fit .jpfin-wrap{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:8px}
  /* REAL-SIZED WIDGETS, PAGE SCROLLS (Ryan, 2026-08-19, second pass: "I want financial
     page widgets to be larger ok I have to scroll within that page on small screen and
     large screen same thing with field labor the boxes are too small make them larger and
     it's ok if that page scrolls but I want widgets not one large widget scroll").
     The previous pass locked the columns to the viewport, which met "not one big scroll"
     but paid for it by shrinking every card until Field Labor was a letterbox. The lock is
     gone: the PAGE scrolls, each card gets a generous floor height, and the two columns
     still stretch to end on the same line. No inner scroll container to fight. */
  #page-jobportal.jpfin-fit .jp-scroll{overflow-y:auto}
  #page-jobportal.jpfin-fit .jpfin-wrap{overflow:visible}
  #page-jobportal.jpfin-fit .jpfin-cols{flex:0 0 auto;overflow:visible;align-content:stretch}
  /* Give the code table the width — it is the widget being read. */
  #page-jobportal.jpfin-fit .jpfin-cols{grid-template-columns:1.55fr 1fr}
}
/* ── One-page Dashboard (jpd-fit, set while the Dashboard tab is active) ──────────
   The dashboard fills the viewport with no page scroll; the Activity Feed is the
   ONLY region that scrolls when it grows. Weather sits above the feed (middle),
   Location above Messages (right). Narrow screens fall back to normal scrolling. */
#page-jobportal.jpd-fit .jp-scroll{overflow:hidden;display:flex;flex-direction:column;min-height:0}
#page-jobportal.jpd-fit #jp-dash{flex:1;min-height:0;display:flex;flex-direction:column}
#page-jobportal.jpd-fit #jp-dash > .dash{flex:1;min-height:0;grid-template-rows:auto minmax(0,1fr);align-items:stretch}
#page-jobportal.jpd-fit .dash .col{min-height:0;overflow:hidden}
#page-jobportal.jpd-fit .dash .col-mid{display:flex;flex-direction:column}
#page-jobportal.jpd-fit .act-card{flex:1;min-height:0;display:flex;flex-direction:column}
#page-jobportal.jpd-fit .act-card .act-scroll{flex:1;min-height:0;overflow-y:auto}
/* Bottom edges of all three columns align exactly: each column has ONE flexible card that
   absorbs the leftover height — Team (left), the Activity Feed (middle, its body scrolls),
   and Location (right, its MAP grows). Message stays compact so it never needs scrolling. */
#page-jobportal.jpd-fit .dash .col-left > .card:last-child{flex:1;min-height:0;overflow-y:auto}
#page-jobportal.jpd-fit .dash .loc-card{flex:1;min-height:0;display:flex;flex-direction:column}
#page-jobportal.jpd-fit .dash .loc-card .loc-map{flex:1;min-height:170px}
#page-jobportal.jpd-fit .dash .col > .card:last-child{min-height:0;overflow-y:auto}
#page-jobportal.jpd-fit #jp-msg{min-height:64px;height:64px}
/* Job Identity & Status is CAPPED so Team & Job Access always keeps room on the one-page dashboard
   (Ryan, 2026-09-16: "make the widget smaller so portal access had space to actually be viewed").
   The identity card takes its natural height up to 58% of the column and scrolls its own overflow
   past that — the top fields (client, job #, status) stay in view; the Team card keeps a 150px floor
   and grows into the space freed. Only in true one-page-fit mode (a tall, wide screen); the short/
   narrow fallback still page-scrolls with both cards at natural height. */
@media (min-width:901px) and (min-height:820px){
  #page-jobportal.jpd-fit .dash .col-left{min-height:0}
  #page-jobportal.jpd-fit .dash .col-left > .card:first-child{flex:0 1 auto;min-height:0;max-height:58%;overflow-y:auto}
  #page-jobportal.jpd-fit .dash .col-left > .card:last-child{flex:1 1 auto;min-height:150px}
}
#page-jobportal .loc-map{position:relative;border-radius:10px;overflow:hidden;min-height:150px}
#page-jobportal .loc-map .mapph{height:100%;min-height:150px;margin:0}
/* Small screens (narrow OR short): one-page fit can't hold the cards' minimum sizes,
   so fall back to normal page scrolling rather than squeezing/clipping content. */
@media (max-width:900px), (max-height:819px){
  #page-jobportal.jpd-fit .jp-scroll{overflow-y:auto;display:block}
  #page-jobportal.jpd-fit .dash .col{overflow:visible}
  #page-jobportal.jpd-fit .dash .col > .card:last-child{overflow-y:visible}
  #page-jobportal.jpd-fit .dash .loc-card{flex:none}
  #page-jobportal.jpd-fit .dash .col-left > .card:last-child{flex:none}
  #page-jobportal.jpd-fit .act-card{flex:none}
  #page-jobportal.jpd-fit .act-card .act-scroll{overflow:visible}
}
/* Small-LAPTOP band (Chromebook ~1366x768 / 1280x800): the one-page fit above stands down
   and the page scrolls, but the three columns still END LEVEL (Ryan, 2026-08-19: "Team &
   job access" and the Activity Feed stopped short of Messages' bottom edge). The grid rows
   already stretch; each column's LAST card grows to the tallest column's height, and the
   Message card spends its extra height on the message box instead of dead space. */
@media (min-width:901px) and (max-height:819px){
  #page-jobportal.jpd-fit .dash .col > .card:last-child{flex:1 1 auto}
  #page-jobportal.jpd-fit .dash .col-left > .card:last-child{flex:1 1 auto}
  #page-jobportal.jpd-fit .dash .col-right > .card:last-child{display:flex;flex-direction:column}
  #page-jobportal.jpd-fit .dash .col-right > .card:last-child .fld:has(> #jp-msg){flex:1;display:flex;flex-direction:column}
  #page-jobportal.jpd-fit #jp-msg{height:auto;flex:1}
}
#page-jobportal .widget{padding:18px;margin-bottom:0}
#page-jobportal .wh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}
#page-jobportal .wh-l{display:flex;align-items:center;gap:10px;min-width:0}
#page-jobportal .wh-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue-m);border:1px solid var(--blue-l);flex-shrink:0}
#page-jobportal .wh-ic .ic{width:16px;height:16px}
#page-jobportal .wh-t{font-size:13.5px;font-weight:700;letter-spacing:.2px;color:var(--text)}
#page-jobportal .wh-actions{display:flex;align-items:center;gap:7px;flex-shrink:0}
#page-jobportal .fin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
#page-jobportal .amt-profit{color:var(--money)}
#page-jobportal .amt-neg{color:var(--red)}
#page-jobportal .idrow{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border-2);gap:12px}
#page-jobportal .idrow:last-of-type{border-bottom:none}
#page-jobportal .idrow .k{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
#page-jobportal .idrow .v{font-size:13px;color:var(--text);font-weight:600;text-align:right}
#page-jobportal .prog-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text3);font-weight:600;margin-top:8px}
/* Job Identity & Status (col-left's FIRST card) reads LARGER in a TIGHTER footprint, so
   Team & Job Access below it gets more room (Ryan, 2026-09-17: "shrink job identity & status …
   text larger … you should have room to shrink it while also increasing text size"). Scoped to
   that one card so no other widget's rows change. The tighter rows + smaller card padding offset
   the bigger type, so the card is shorter overall and the Team card (flex:1) absorbs the room. */
#page-jobportal .dash .col-left > .card:first-child{padding:15px 16px}
#page-jobportal .dash .col-left > .card:first-child .wh{margin-bottom:11px}
#page-jobportal .dash .col-left > .card:first-child .wh-t{font-size:15px}
#page-jobportal .dash .col-left > .card:first-child .idrow{padding:6px 0}
#page-jobportal .dash .col-left > .card:first-child .idrow .k{font-size:12px}
#page-jobportal .dash .col-left > .card:first-child .idrow .v{font-size:14.5px}
#page-jobportal .dash .col-left > .card:first-child .prog-meta{font-size:12px;margin-top:6px}
#page-jobportal .avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;color:#fff;background:linear-gradient(150deg,#37b3c0,#1b7d89);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 3px 8px rgba(31,126,138,.35);flex-shrink:0;letter-spacing:.3px}
#page-jobportal .team-list{margin:-6px -6px 0}
#page-jobportal .tm-name{font-size:13px;font-weight:600;color:var(--text)}
#page-jobportal .tm-scope{font-size:11px;color:var(--text3);margin-top:1px}
#page-jobportal .tl-date{display:flex;align-items:center;gap:10px;margin:4px 0 10px}
#page-jobportal .tl-date::before,#page-jobportal .tl-date::after{content:'';height:1px;background:var(--border-2);flex:1}
#page-jobportal .tl-date span{font-size:11px;text-transform:uppercase;letter-spacing:.8px;font-weight:700;color:var(--text3);padding:3px 11px;background:var(--gray-l);border:1px solid var(--border-2);border-radius:20px;white-space:nowrap}
#page-jobportal .tl-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-2)}
#page-jobportal .tl-item:last-child{border-bottom:none;padding-bottom:0}
#page-jobportal .tl-ic{width:48px;height:48px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
#page-jobportal .tl-ic .ic{width:20px;height:20px}
#page-jobportal .tl-ic .dt-doc-ext{font-size:11px}
#page-jobportal .tl-ic-img{padding:0;overflow:hidden;background:#0d0f13;border:1px solid var(--border)}
#page-jobportal .tl-ic-img img{width:100%;height:100%;object-fit:cover;display:block}
#page-jobportal .ti-doc{background:var(--blue-soft);color:var(--blue-m);border:1px solid var(--blue-l)}
#page-jobportal .ti-img{background:rgba(201,167,99,.12);color:var(--gold);border:1px solid rgba(201,167,99,.28)}
#page-jobportal .ti-log{background:var(--amber-l);color:var(--amber);border:1px solid rgba(224,166,70,.28)}
#page-jobportal .ti-co{background:var(--money-l);color:var(--money);border:1px solid rgba(84,211,162,.28)}
#page-jobportal .tl-body{flex:1;min-width:0}
#page-jobportal .tl-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
#page-jobportal .tl-title{font-size:14.5px;line-height:1.35;font-weight:600;color:var(--text)}
#page-jobportal .tl-meta{font-size:12.5px;color:var(--text3);margin-top:3px}
#page-jobportal .tl-amt{font-size:12.5px;font-weight:700;color:var(--money);background:var(--money-l);border:1px solid rgba(84,211,162,.25);padding:2px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0}
#page-jobportal .cmp-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
#page-jobportal .cmp-ack{font-size:11.5px;color:var(--money);font-weight:600;opacity:0;transition:opacity .2s;white-space:nowrap}
#page-jobportal .cmp-ack.show{opacity:1}
#page-jobportal .loc-addr{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--text);font-weight:500;margin-bottom:12px;line-height:1.45}
#page-jobportal .loc-addr .ic{color:var(--blue-m);margin-top:1px}
#page-jobportal .mapph{position:relative;height:172px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border-2);background:radial-gradient(120% 120% at 60% 35%,#1d2a33 0%,#141a20 80%)}
#page-jobportal .mapph::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 25px,rgba(255,255,255,.035) 25px 26px),repeating-linear-gradient(90deg,transparent 0 25px,rgba(255,255,255,.035) 25px 26px)}
#page-jobportal .mapph::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(47,154,166,.20) 39% 41%,transparent 42%),linear-gradient(58deg,transparent 60%,rgba(47,154,166,.13) 61% 62.5%,transparent 63%)}
#page-jobportal .mapph .pin{position:absolute;top:47%;left:58%;transform:translate(-50%,-100%);color:var(--blue-m);filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));z-index:1}
#page-jobportal .mapph .pin .ic{width:26px;height:26px;stroke-width:2}
#page-jobportal .mapph .map-tag{position:absolute;left:10px;bottom:9px;font-size:9.5px;text-transform:uppercase;letter-spacing:.8px;font-weight:700;color:var(--text3);background:rgba(13,16,20,.7);border:1px solid var(--border-2);padding:3px 8px;border-radius:6px;z-index:1}
#page-jobportal .loc-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.loc-actions .btn{flex:1 1 auto;justify-content:center;white-space:nowrap}
#page-jobportal a.btn{text-decoration:none}
#page-jobportal .wx-loc{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text2);font-weight:600;margin-bottom:6px}
#page-jobportal .wx-loc .ic{width:15px;height:15px;color:var(--blue-m)}
@media (max-width:900px){ #page-jobportal .dash{grid-template-columns:1fr} }