/* JP Forwarding customer portal: builds on the website's styles.css (same colours, fonts, header, footer) */
.portal{background:var(--tint)}
.portal--admin .wrap{max-width:1380px}
.portal .header{background:rgba(255,255,255,.98)}
.topbar__label{font-weight:700;color:#fff;letter-spacing:.04em;text-transform:uppercase;font-size:.78rem;margin-right:auto}
.portal--admin .topbar__in{justify-content:space-between}
.portal--admin .topbar__links{width:100%;justify-content:flex-end}
.pagehead--portal{padding:40px 0 34px}
.pagehead--portal h1{font-size:clamp(1.6rem,3.6vw,2.4rem);margin-bottom:.25em}
.pagehead--portal .lead{font-size:1.02rem}
.pagehead__row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;position:relative;z-index:1}
.pagehead__actions{display:flex;gap:10px;flex-wrap:wrap}
.pagehead__actions .btn--outline{color:#fff;border-color:rgba(255,255,255,.75)}
.pagehead__actions .btn--outline:hover{background:#fff;color:var(--navy)}
.psection{padding:28px 0 64px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.pcard--pad{padding:26px}
.pcard + .pcard{margin-top:20px}
.pcard__head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 22px;border-bottom:1px solid var(--line)}
.pcard__head h2{font-size:1.15rem;margin:0}
.alert{padding:12px 16px;border-radius:10px;margin:0 0 16px;font-weight:600;font-size:.95rem}
.alert--ok{background:#e9f7ef;color:#155d33;border:1px solid #bfe5cd}
.alert--error{background:#fdecea;color:#8a1c12;border:1px solid #f5c2bc}
.alert--info{background:#eef4f8;color:var(--navy);border:1px solid #cfdde7}
/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 20px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink)}
.stat strong{font-size:1.7rem;color:var(--orange-d);line-height:1}
.stat span{color:var(--muted);font-size:.92rem;font-weight:600}
.stat--navy{background:var(--navy);border-color:var(--navy)}
.stat--navy strong{color:#fff}.stat--navy span{color:#cfdbe4}
/* toolbar */
.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs a{padding:8px 14px;border-radius:999px;background:var(--tint);color:var(--navy);text-decoration:none;font-weight:700;font-size:.9rem}
.tabs a[aria-current=page]{background:var(--navy);color:#fff}
.tabs a small{font-weight:600;opacity:.75;margin-left:4px}
.search{display:flex;gap:8px;flex:1 1 260px;max-width:420px}
.search input,.search select,.input{font:inherit;font-size:16px;padding:9px 12px;border:1.5px solid #cfd8de;border-radius:10px;background:#fff;width:100%;min-width:0;color:var(--ink)}
.search input:focus,.input:focus{border-color:var(--orange);outline:3px solid rgba(223,96,0,.2);outline-offset:0}
.search .btn{flex:none}
/* shipments table */
.tablewrap{overflow-x:auto}
.stable{width:100%;border-collapse:collapse;font-size:.93rem}
.stable th{text-align:left;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:11px 12px;border-bottom:2px solid var(--line);white-space:nowrap;background:#fbfcfd}
.stable td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
.stable tbody tr:hover{background:#fffaf5}
.stable .core{font-weight:700;color:var(--navy);white-space:nowrap}
.stable .eta{font-weight:800;color:var(--orange-d);white-space:nowrap}
.stable .date{white-space:nowrap}
.stable .sub{display:block;color:var(--muted);font-size:.84rem;font-weight:400}
.stable a.rowlink{color:var(--navy);text-decoration:none}
.stable a.rowlink:hover{color:var(--orange-d);text-decoration:underline}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;letter-spacing:.02em}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.8rem;font-weight:700;white-space:nowrap}
.badge--origin{background:#eef2f5;color:#3a4b57}
.badge--water{background:#e6f0fb;color:#0b4f8a}
.badge--arrived{background:#fff1e6;color:#a84800}
.badge--hold{background:#fdecea;color:#8a1c12}
.badge--done{background:#e9f7ef;color:#155d33}
.pill{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--tint);font-size:.78rem;font-weight:700;color:var(--muted)}
.pill--new{background:#e9f7ef;color:#155d33}.pill--update{background:#fff1e6;color:#a84800}.pill--error{background:#fdecea;color:#8a1c12}
/* detail */
.detailgrid>.pcard{margin-top:0}
.portal .nav ul a,.portal .nav__cta{white-space:nowrap}
.nowrap{white-space:nowrap}
.detailgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:start}
.keyfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid var(--line)}
.keyfacts div{padding:18px 20px;border-right:1px solid var(--line)}
.keyfacts div:last-child{border-right:0}
.keyfacts small,.facts dt{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.keyfacts strong{display:block;font-size:1.12rem;color:var(--navy);margin-top:3px;overflow-wrap:anywhere}
.keyfacts .is-eta strong{color:var(--orange-d);font-size:1.3rem}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin:0;padding:22px}
.facts dd{margin:3px 0 0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.steps{display:grid;grid-template-columns:repeat(5,1fr);list-style:none;margin:0;padding:22px 22px 26px;counter-reset:s}
.steps li{position:relative;text-align:center;font-size:.82rem;font-weight:700;color:var(--muted);padding-top:30px}
.steps li::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #cfd8de;z-index:1}
.steps li::after{content:"";position:absolute;top:13px;left:-50%;width:100%;height:3px;background:#cfd8de}
.steps li:first-child::after{display:none}
.steps li.is-done{color:var(--navy)}
.steps li.is-done::before{background:var(--orange);border-color:var(--orange)}
.steps li.is-done::after{background:var(--orange)}
.steps li.is-now::before{box-shadow:0 0 0 5px rgba(223,96,0,.2)}
.timeline{list-style:none;margin:0;padding:18px 22px 22px}
.timeline li{position:relative;padding:0 0 18px 26px;border-left:2px solid var(--line);margin-left:6px}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--navy)}
.timeline li:first-child::before{border-color:var(--orange);background:var(--orange)}
.timeline time{display:block;font-size:.82rem;color:var(--muted);font-weight:700}
.timeline strong{display:block;color:var(--navy);font-weight:700}
.timeline span{display:block;color:var(--muted);font-size:.9rem}
.backlink{display:inline-flex;gap:6px;align-items:center;color:#fff;text-decoration:none;font-weight:700;margin-bottom:10px;position:relative}
.backlink:hover{color:var(--orange-l)}
/* auth */
.authwrap{max-width:460px;margin:0 auto}
.authcard{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);padding:34px}
.authcard h2{font-size:1.45rem;margin-bottom:.2em}
.authcard .fgrid{grid-template-columns:1fr;margin:18px 0}
.authcard .links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.92rem;margin-top:16px}
.check{display:flex!important;align-items:center;gap:10px!important;font-weight:600}
.check input{width:20px!important;height:20px;accent-color:var(--orange-d)}
.formactions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fgrid--3{grid-template-columns:repeat(3,1fr)}
.fgrid--4{grid-template-columns:repeat(4,1fr)}
.fgrid .hint{font-weight:400;color:var(--muted);font-size:.82rem}
fieldset.fs{border:0;padding:0;margin:0 0 6px}
fieldset.fs legend{font-weight:800;color:var(--navy);font-size:1rem;margin-bottom:4px}
.codebox{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--navy);color:#fff;padding:12px 14px;border-radius:10px;overflow-wrap:anywhere;font-size:.9rem}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--orange-d);font-weight:700;cursor:pointer;text-decoration:underline}
.linkbtn--danger{color:#a11d12}
.btn--danger{background:#a11d12;border-color:#a11d12}
.btn--danger:hover{background:#7d150d;border-color:#7d150d}
.inline{display:inline}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.footer--slim{padding-top:0}
.footer--slim .footer__base{margin-top:0;border-top:0}
.diff{font-size:.82rem;color:var(--muted)}
.diff b{color:var(--ink)}
.mapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px 14px;margin:14px 0}
.mapgrid label{display:grid;gap:4px;font-size:.84rem;font-weight:700;color:var(--navy)}
.mapgrid select{width:100%;font:inherit;font-size:15px;padding:7px 9px;border:1.5px solid #cfd8de;border-radius:8px}
.mapgrid label.is-mapped select{border-color:var(--orange)}
@media (max-width:960px){
  .detailgrid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .fgrid--3,.fgrid--4{grid-template-columns:1fr 1fr}
}
/* phones: shipment rows become cards; PO, container, ETD, ETA always visible */
@media (max-width:760px){
  .psection{padding:18px 0 48px}
  .pagehead--portal{padding:28px 0 24px}
  .pagehead__actions{width:100%}
  .pagehead__actions .btn{flex:1 1 auto}
  .keyfacts{grid-template-columns:1fr 1fr}
  .keyfacts strong,.keyfacts .is-eta strong{font-size:1.05rem}
  .keyfacts div:nth-child(2){border-right:0}
  .keyfacts div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .facts{grid-template-columns:1fr}
  .steps{padding:18px 8px 22px}
  .steps li{font-size:.7rem}
  .toolbar{padding:12px}
  .search{max-width:none;flex-wrap:wrap}
  .search select{max-width:none!important;flex:1 1 40%}
  .search input[type=search]{flex:1 1 55%}
  .stable--cards thead{display:none}
  .stable--cards,.stable--cards tbody,.stable--cards tr{display:block;width:100%}
  .stable--cards tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:14px 14px 12px;border-bottom:1px solid var(--line);position:relative}
  .stable--cards td{display:block;padding:0;border:0}
  .stable--cards td[data-label]::before{content:attr(data-label);display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
  .stable--cards td.c-po{grid-column:1/2;font-size:1.05rem}
  .stable--cards td.c-status{grid-column:2/3;text-align:right}
  .stable--cards td.c-status::before{display:none!important}
  .stable--cards td.c-more{grid-column:1/-1;font-size:.86rem;color:var(--muted)}
  .stable--cards td.c-more::before{display:none!important}
  .stable--cards td.c-hide-sm{display:none}
  .fgrid--3,.fgrid--4{grid-template-columns:1fr}
  .authcard{padding:24px 20px}
}
@media (max-width:640px){
  .portal .topbar__in{justify-content:center}
  .stats{gap:10px}
  .stat{padding:12px}
  .stat strong{font-size:1.4rem}
}
@media print{
  .topbar,.header,.footer,.toolbar,.pagehead__actions,.navtoggle{display:none!important}
  .portal{background:#fff}
  .pagehead{background:#fff;color:var(--navy);padding:0}
  .pagehead h1,.pagehead .lead{color:var(--navy)}
}

/* v2: port / terminal milestones */
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;max-width:220px}
.chip{display:inline-block;padding:2px 7px;border-radius:6px;font-size:.72rem;font-weight:800;white-space:nowrap;letter-spacing:.01em;line-height:1.5}
.chip--hold{background:#c62828;color:#fff;box-shadow:0 0 0 2px rgba(198,40,40,.18)}
.chip--ok{background:#e9f7ef;color:#155d33}
.chip--avail{background:#002336;color:#fff}
.chip--done{background:#e9f7ef;color:#155d33}
.chip--lfd{background:#eef2f5;color:#3a4b57}
.chip--lfd-soon{background:#fff1e6;color:#a84800;box-shadow:inset 0 0 0 1px #f2b98a}
.stable tr.has-hold td:first-child{box-shadow:inset 4px 0 0 #c62828}
.stable tr.has-hold{background:#fff7f6}
.holdalert{background:#c62828;color:#fff;border-radius:12px;padding:14px 18px;margin:0 0 16px;font-size:.98rem;line-height:1.45}
.holdalert a{color:#fff;font-weight:800}
.portpanel{margin-top:20px}
.portgrid{display:grid;grid-template-columns:repeat(5,1fr)}
.ptile{padding:16px 18px;border-right:1px solid var(--line)}
.ptile:last-child{border-right:0}
.ptile small{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.ptile strong{display:block;font-size:1.15rem;margin-top:3px;color:var(--navy)}
.ptile span{display:block;font-size:.84rem;color:var(--muted);margin-top:2px}
.ptile--ok strong{color:#155d33}
.ptile--ok strong::before{content:"✓ "}
.ptile--wait strong{color:#8795a1;font-weight:700}
.ptile--hold{background:#fdecea}
.ptile--hold strong{color:#c62828;font-weight:900}
.ptile--hold span{color:#8a1c12}
.ptile--warn strong{color:#a84800}
.fs--port select.is-hold{border-color:#c62828;color:#c62828;font-weight:800}
.quickms{display:grid;gap:10px}
.quickms__btns{display:flex;flex-wrap:wrap;gap:6px}
.btn--ok{background:#1e7a45;border-color:#1e7a45}
.btn--ok:hover{background:#155d33;border-color:#155d33}
@media (max-width:960px){.portgrid{grid-template-columns:repeat(3,1fr)}.ptile:nth-child(3){border-right:0}.ptile:nth-child(-n+3){border-bottom:1px solid var(--line)}}
@media (max-width:760px){
  .stable--cards td.c-status .chips{justify-content:flex-end;margin-left:auto}
  .portgrid{grid-template-columns:1fr 1fr}
  .ptile{border-right:0;border-bottom:1px solid var(--line)}
  .ptile:nth-child(odd){border-right:1px solid var(--line)}
  .ptile:nth-child(3){border-right:1px solid var(--line)}
  .ptile:last-child{border-bottom:0}
}
.portal--admin .stats{grid-template-columns:repeat(5,1fr)}
.stat--hold{background:#c62828;border-color:#c62828}
.stat--hold strong{color:#fff}.stat--hold span{color:#ffe1de}
@media (max-width:960px){.portal--admin .stats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.portal--admin .stats{grid-template-columns:1fr 1fr}}
.portal--admin .stable{font-size:.9rem}
.portal--admin .stable td{padding:11px 10px}
.portal--admin .stable .chips{max-width:190px}
@media (min-width:761px){.portal--admin .stable td.c-more{min-width:190px}}
@media (max-width:1500px){.portal--admin .c-hide-md{display:none}}

/* v2.1: customer's own reference + notes thread */
.detailgrid--refs{grid-template-columns:1fr 1.25fr}
.refform{display:grid;grid-template-columns:1fr 1fr auto;gap:10px 12px;align-items:end;margin:10px 0 6px}
.refform label{display:grid;gap:5px;font-weight:700;font-size:.9rem;color:var(--navy)}
.refform input,.noteform textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;font-size:1rem;background:#fff;color:inherit}
.refform input:focus,.noteform textarea:focus{border-color:var(--orange);outline:3px solid rgba(223,96,0,.2);outline-offset:0}
.notes{list-style:none;margin:12px 0;padding:0;display:grid;gap:10px}
.note{border-radius:12px;padding:10px 14px;background:#f4f6f8;border-left:4px solid #b9c4cd}
.note--staff{background:#fff7f0;border-left-color:var(--orange)}
.note--removed{opacity:.7}
.note__meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.84rem}
.note__meta strong{color:var(--navy)}
.note__meta time{color:var(--muted)}
.note__body{margin:4px 0 0;white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.note__body--removed{font-style:italic;color:var(--muted)}
.note__del{display:block;text-align:right;margin-top:2px}
.noteform{margin-top:6px}
.noteform__row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}
.empty--sm{padding:14px 10px}
.stable .sub--ref{color:#0b5c8a;font-weight:600}
.stable .sub--notes{color:var(--orange-d);font-weight:700;font-size:.78rem}
.chip--note{background:#0b5c8a;color:#fff;text-decoration:none;margin-top:4px}
a.chip{text-decoration:none}
.auditlist li{margin:2px 0;overflow-wrap:anywhere}
@media (max-width:960px){.detailgrid--refs{grid-template-columns:1fr}}
@media (max-width:640px){.refform{grid-template-columns:1fr}.refform .btn{width:100%}}

/* v2.1: shipment number = row link, container next to it */
.stable td.c-ship .rowlink{font-size:1rem}
.stable .c-inline-cont{display:none;font-size:.86rem;color:var(--ink,#14212b);font-weight:600;margin-left:8px}
@media (max-width:760px){.stable--cards td.c-ship{grid-column:1/2}.stable .c-inline-cont{display:block;margin:2px 0 0}.stable--cards td.c-ref{grid-column:1/-1}}
.h1-cont{font-size:.55em;font-weight:700;color:inherit;opacity:.85;margin-left:10px;letter-spacing:.02em;white-space:nowrap}
@media (max-width:760px){.search #ref{flex:1 1 100%;max-width:none!important;order:3}}
@media (max-width:760px){.stable--cards td.c-status{grid-row:1}}
.check input{flex:0 0 20px}

/* v2.2: e-mail preferences + per-shipment mute */
.prefs{border:0;margin:6px 0 0;padding:0;display:grid;gap:2px}
.prefs .check{padding:9px 0;border-bottom:1px solid #e6ebef;font-weight:600;line-height:1.3;margin:0}
.prefs .check input{flex:0 0 22px;width:22px!important;height:22px}
.prefs__off{margin-top:6px!important;border-bottom:0!important;color:#a11d12}
.prefs.is-alloff .prefs__item{color:#8a959d}
.h4{font-size:1rem;margin:0 0 4px}
.mutelist{list-style:none;padding:0;margin:8px 0 0}
.mutelist li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #e6ebef;flex-wrap:wrap}
.mutebar{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.mutebar > div{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 220px}
.mutebar.is-muted{background:#fff6ec;border-color:#f0c79c}
.prefgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 14px}
.prefgrid .check{font-weight:500;padding:5px 0;border:0;font-size:.92rem}
.prefsum{font-size:.85rem;color:#55636e}
.prefcard{padding:12px 0 14px;border-top:1px solid #e6ebef}
.prefcard:first-of-type{border-top:0}
.prefcard .prefs{display:contents}
.auditlist{padding-left:18px;margin:6px 0 0}
.portlinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:22px}
.portlinks__h{margin:6px 0 10px}
.portlink{display:flex;flex-direction:column;gap:4px;margin:0}
.portlink strong{color:var(--navy);font-size:1.05rem}
.portlink__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.extlink{color:inherit;text-decoration:underline;text-decoration-color:rgba(223,96,0,.6);text-underline-offset:2px}
.linkedit.is-off{opacity:.65}
.lfdcell{font-weight:600;white-space:nowrap}
.lfdcell--soon{color:#b85400;background:#fff1e0;border-radius:4px;padding:1px 5px;font-weight:700}
.lfdcell--late{color:#fff;background:#c62828;border-radius:4px;padding:1px 5px;font-weight:700}
.lfdcell--done{color:var(--muted);font-weight:500}
.stable td.c-port{min-width:110px;max-width:170px;line-height:1.3}
.stable td.c-lfd .sub{display:block;font-size:.75rem;color:var(--muted)}
@media (max-width:760px){
  .stable--cards td.c-port{grid-column:1/-1}
  .stable--cards td.c-lfd{grid-column:1/2}
  .stable--cards td.c-pick{grid-column:2/3}
  .stable td.c-port{max-width:none}
}
.mutedrow{margin:-6px 0 12px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.mutedrow .linkbtn{font-size:inherit}
@media (min-width:761px){
  .stable td,.stable th{padding-left:9px;padding-right:9px}
  .stable td.c-more{max-width:210px;white-space:normal}
  .portal--admin .stable td.c-more{min-width:0;max-width:210px}
  .stable td.c-status{max-width:200px}
  .stable td.c-lfd,.stable td.c-pick{white-space:nowrap}
}
.portal--customer .wrap{max-width:1320px}

/* v2.3: JP office columns (Invoice # / done, DO sent, Entry #), sortable heads, Deleted bin, report schedule */
.th-office{background:#fff4ec;color:#8a3d00}
.stable td.c-office{white-space:nowrap;background:#fffaf6}
.officecell{display:flex;align-items:center;gap:6px}
.officein{width:7.2em;padding:5px 7px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:.86rem;background:#fff}
.officein:focus{outline:2px solid #DF6000;outline-offset:0;border-color:#DF6000}
.officechk{display:inline-flex;align-items:center;gap:5px;font-size:.84rem;color:var(--muted);cursor:pointer;padding:3px 7px;border-radius:999px;border:1px solid var(--line);background:#fff;white-space:nowrap}
.officechk input{width:16px;height:16px;margin:0;accent-color:#1B7F3B}
.officechk.is-on{color:#1B7F3B;border-color:#9fd3ae;background:#eaf7ee;font-weight:700}
.c-entry .officein{width:10.2em}
td.is-saving{opacity:.6}
td.is-saved .officein,td.is-saved .officechk{box-shadow:0 0 0 2px #9fd3ae}
td.is-error .officein,td.is-error .officechk{box-shadow:0 0 0 2px #e57373}
.js .stable--office.is-live ~ * .nojs-only, .js #bulk .nojs-only{display:none}
a.sorthead{color:inherit;text-decoration:none;white-space:nowrap}
a.sorthead:hover{text-decoration:underline}
a.sorthead.is-active{color:#fff;text-decoration:none}
.stable th[aria-sort]{background:#002336;color:#fff}   /* v2.4: the sorted column's head is navy so it's easy to spot */
.sortsel{max-width:190px}
.fs--office{border-color:#f3c9a8;background:#fffaf6}
.check--field{align-self:end;padding-bottom:10px}
.delform{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.trashacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.schedgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px}
.schedgrid label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:.9rem}
.schedgrid label[hidden]{display:none}
.prefcard--sched{margin-top:-6px;border-top:0}
.repform .formactions{margin-top:4px}
@media (max-width:760px){
  .schedgrid{grid-template-columns:1fr 1fr}
  .stable--cards td.c-office{background:transparent;white-space:normal}
  .stable--cards td.c-inv{grid-column:1/-1}
  .stable--cards td.c-do{grid-column:1/-1}
  .stable--cards td.c-entry{grid-column:1/-1}
  .officein{width:100%;max-width:220px;font-size:16px}
  .stable--cards td.c-entry .officein{max-width:none}
  .search .sortsel{flex:1 1 100%;max-width:none!important;order:4}
  .trashacts{grid-column:1/-1}
}
.cdialog{position:fixed;inset:0;background:rgba(0,35,54,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000}
.cdialog__box{background:#fff;border-radius:14px;max-width:420px;width:100%;padding:22px 22px 18px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.cdialog__msg{margin:0 0 18px;font-size:1rem;line-height:1.45;color:#14212b}
.cdialog__btns{display:flex;gap:10px;justify-content:flex-end}
@media (max-width:640px){.cdialog{align-items:flex-end}.cdialog__btns .btn{flex:1}}
.portal--admin .toolbar .search{flex-wrap:wrap}
.portal--admin .toolbar .search select.input{min-width:150px}
.schedgrid{align-items:end}
.schedgrid select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;font-weight:400;background:#fff;color:inherit;min-height:44px}

/* v2.4: team list links, Contacts, E-mail customers */
.stable--office a.reflink{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.stable--office a.reflink:hover{color:var(--orange,#DF6000)}
.stable--office a.c-inline-cont{color:var(--muted);text-decoration:none}
.copybar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line);background:#fafbfc}
.copybar__btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copybar__show{flex:1 1 100%}.copybar__show summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--navy)}
.copybar__show textarea{width:100%;margin:8px 0 4px;font-size:.85rem}
.cstat{display:inline-block;padding:2px 8px;border-radius:6px;font-size:.78rem;font-weight:700}
.cstat--active{background:#e9f7ef;color:#155d33}.cstat--invited{background:#fff1e6;color:#a84800}.cstat--disabled{background:#eceff1;color:#5b6b78}
.muted{color:var(--muted)}
.bc-choice{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:14px 0}
.bc-choice legend{font-weight:700;padding:0 6px}
.bc-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 16px;max-height:280px;overflow:auto}
.bc-choices .check{font-weight:500}
[data-broadcast-compose] > label{display:block;margin:14px 0}
[data-broadcast-compose] textarea{width:100%;font-family:inherit}
.mailpreview{border:1px solid var(--line);border-left:4px solid #DF6000;border-radius:10px;padding:16px 18px;margin:12px 0;background:#fff;max-width:680px}
.inline-form{display:inline-block}
.toolbar .search--wide{max-width:none;flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px}
.toolbar .search--wide input[type=search]{flex:1 1 260px;min-width:0}
@media (max-width:760px){
  .stable--contacts td.c-po,.stable--contacts td[data-label="E-mail"]{grid-column:1/-1}
  .stable--contacts td{min-width:0;overflow-wrap:anywhere}
  .stable--contacts td[data-label]::before{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
[data-broadcast-compose] input[type=file]{display:block;margin-top:6px;font-size:.9rem}

/* v2.4.1: team "All shipments" list fits a laptop screen (1280-1366 px) without sideways scrolling.
   Tighter padding, slightly smaller text, Invoice # stacked over "done", narrow DO / Entry cells, wrapping
   terminal / carrier text. Below ~1200 px the table scrolls sideways as a fallback. Phones keep the card layout. */
@media (min-width:1200px){
  .portal--admin .wrap{max-width:none;padding-left:16px;padding-right:16px}
}
@media (min-width:761px){
  .portal--admin .stable--fit{font-size:.8rem;table-layout:auto;line-height:1.3}
  .portal--admin .stable--fit th{font-size:.64rem;letter-spacing:.03em;padding:8px 5px;white-space:normal;line-height:1.2;vertical-align:bottom}
  .portal--admin .stable--fit th .hint{display:block;font-weight:600}
  .portal--admin .stable--fit td{padding:7px 5px}
  .portal--admin .stable--fit td:first-child,.portal--admin .stable--fit th:first-child{padding-left:8px;padding-right:2px;width:18px}
  .portal--admin .stable--fit td.c-ship .rowlink{font-size:.86rem}
  .portal--admin .stable--fit .sub{font-size:.72rem}
  .portal--admin .stable--fit td.c-cust{white-space:normal;min-width:70px;max-width:120px}
  .portal--admin .stable--fit td.c-ref{max-width:110px;overflow-wrap:anywhere}
  .portal--admin .stable--fit td.c-cont .mono,.portal--admin .stable--fit td.c-cont a{font-size:.76rem}
  .portal--admin .stable--fit .badge{font-size:.68rem;padding:2px 7px}
  .portal--admin .stable--fit td.c-status{max-width:118px;min-width:92px}
  .portal--admin .stable--fit .chips{max-width:118px;gap:3px;margin-top:4px}
  .portal--admin .stable--fit .chip{font-size:.64rem;padding:1px 5px}
  /* office cells: invoice # input above the "done" tick, narrow DO + Entry */
  .portal--admin .stable--fit td.c-office{white-space:normal}
  .portal--admin .stable--fit .officecell{flex-direction:column;align-items:flex-start;gap:3px}
  .portal--admin .stable--fit .officein{width:6.6em;padding:3px 5px;font-size:.76rem}
  .portal--admin .stable--fit .c-entry .officein{width:7.4em}
  .portal--admin .stable--fit .officechk{font-size:.72rem;padding:1px 6px;gap:3px}
  .portal--admin .stable--fit .officechk input{width:13px;height:13px}
  .portal--admin .stable--fit td.c-do .officechk__txt{white-space:nowrap}
  .portal--admin .stable--fit td.c-do .sub{max-width:80px;overflow-wrap:anywhere}
  /* terminal / dates / carrier */
  .portal--admin .stable--fit td.c-port{min-width:58px;max-width:96px;white-space:normal;overflow-wrap:anywhere;hyphens:auto}
  .portal--admin .stable--fit td.c-lfd,.portal--admin .stable--fit td.c-pick,.portal--admin .stable--fit td.date,.portal--admin .stable--fit td.eta{white-space:nowrap}
  .portal--admin .stable--fit td.c-more{min-width:0;max-width:150px;white-space:normal;overflow-wrap:anywhere;font-size:.76rem}
  .portal--admin .stable--fit th[aria-sort] a,.portal--admin .stable--fit th a.sorthead{white-space:normal}
  /* filter row: dropdowns side by side, search on the same line when there is room */
  .portal--admin .toolbar .search--wide{flex-wrap:wrap;align-items:center}
  .portal--admin .toolbar .search--wide select.input{flex:0 1 auto;width:auto;min-width:140px;max-width:220px!important}
  .portal--admin .toolbar .search--wide select.sortsel{max-width:250px!important}
  .portal--admin .toolbar .search--wide input[type=search]{flex:1 1 240px}
}
@media (min-width:761px) and (max-width:1199px){
  .portal--admin .stable--fit{min-width:1160px}   /* fallback: scroll sideways on small laptops / tablets */
}