:root{
    --navy:#0a2a5e;        /* deep brand blue */
    --navy-2:#0f3a7d;      /* mid blue */
    --royal:#1457c4;       /* accent royal */
    --steel:#5b7299;       /* muted slate */
    --gold:#c79a3a;        /* accent */
    --ink:#1a2233;
    --line:#dfe4ec;
    --line-2:#eef1f6;
    --bg:#f4f6fa;
    --paper:#ffffff;
    --ok:#137a48;
    --okbg:#e7f5ee;
    --warn:#a23b3b;
    --shadow:0 1px 3px rgba(15,38,80,.08),0 6px 24px rgba(15,38,80,.06);
    --radius:10px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);background:var(--bg);font-size:14px;line-height:1.45;
  }
  /* Belt & suspenders: tell every browser to preserve colors when saving as PDF.
     Applied unconditionally (outside @media print) AND to pseudo-elements,
     because some browsers cache the rule from the initial paint. */
  html, body, .sheet, .sheet *, .sheet *::before, .sheet *::after{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
    color-adjust:exact !important;
  }
  /* Foreground SVG fill used inside colored elements. SVG renders as content
     (not background), so it prints even when "Background graphics" is unchecked
     in the browser's print dialog — the most common cause of color loss. */
  .sheet .bg-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
  .sheet .bg-fg{position:relative;z-index:1}
  .app{display:grid;grid-template-columns:280px 1fr;min-height:100vh}

  /* ---------- Sidebar ---------- */
  .sidebar{
    background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);
    color:#dce6f6;padding:18px 16px;display:flex;flex-direction:column;gap:14px;
  }
  .sb-logo{display:flex;align-items:center;justify-content:center;padding:6px 4px 12px;border-bottom:1px solid rgba(255,255,255,.12)}
  .sb-logo .plate{background:#fff;border-radius:8px;padding:10px 12px;width:100%;display:flex;justify-content:center}
  .sb-logo img{max-width:190px;height:auto}
  /* LG's refreshed logo (2026-06-24) is a wider aspect ratio than ACCO's;
     bump the sidebar max-width when an LG user is signed in so the rendered
     height visually matches what ACCO users see in their sidebar. */
  body.org-lg .sb-logo img{max-width:220px}
  .sb-logo .fallback{font-weight:700;letter-spacing:.5px;color:#fff;font-size:18px}
  .sb-new{
    background:var(--gold);color:#1a1300;border:0;border-radius:8px;
    padding:10px 12px;font-weight:700;cursor:pointer;font-size:14px;width:100%;
  }
  .sb-new:hover{filter:brightness(1.05)}
  .sb-title{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#9db4d8;margin:4px 0 2px}
  .sb-list{display:flex;flex-direction:column;gap:6px;overflow-y:auto;flex:1}
  .sb-item{
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
    border-radius:8px;padding:9px 10px;cursor:pointer;transition:.12s;
  }
  .sb-item:hover{background:rgba(255,255,255,.12)}
  .sb-item.active{background:rgba(255,255,255,.16);border-color:var(--gold)}
  .sb-item .qn{font-weight:700;color:#fff;font-size:13px}
  .sb-item .meta{font-size:11px;color:#a9bcdc;margin-top:2px}
  .sb-empty{font-size:12px;color:#90a6cb;font-style:italic;padding:8px 4px}

  /* ---------- Main ---------- */
  .main{padding:64px 26px 60px;overflow-y:auto;position:relative}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
  .topbar h1{font-size:20px;margin:0;color:var(--navy);letter-spacing:.2px}
  .topbar .actions{display:flex;gap:8px;flex-wrap:wrap}
  button.btn{border:0;border-radius:8px;padding:9px 14px;font-weight:600;cursor:pointer;font-size:13px}
  .btn-primary{background:var(--navy);color:#fff}
  .btn-primary:hover{background:var(--navy-2)}
  .btn-gold{background:var(--gold);color:#1a1300}
  .btn-ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
  .btn-ghost:hover{background:var(--line-2)}
  .btn-danger{background:#fff;color:var(--warn);border:1px solid #eccaca}
  .btn-danger:hover{background:#fbeeee}

  .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
  .card h2{font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--steel);margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line-2)}

  .grid{display:grid;gap:12px 14px}
  .g2{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:1fr 1fr 1fr}
  .g4{grid-template-columns:repeat(4,1fr)}
  /* justify-content:flex-end pins the input to the bottom of each cell so
     rows with mixed label lengths (e.g. "Commodity" vs "Total piece count
     (should equal …)") still line their inputs up across the grid. */
  label.fld{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--steel);font-weight:600;justify-content:flex-end}
  label.fld span.lbl{display:flex;align-items:center;gap:6px;min-height:16px}
  input,select,textarea{
    font-family:inherit;font-size:13.5px;color:var(--ink);
    border:1px solid var(--line);border-radius:7px;padding:8px 9px;background:#fff;width:100%;
  }
  input:focus,select:focus,textarea:focus{outline:2px solid rgba(20,87,196,.25);border-color:var(--royal)}
  textarea{resize:vertical;min-height:54px}
  .inline-unit{display:flex;gap:6px}
  .inline-unit input{flex:1}
  .inline-unit select{width:86px;flex:none}

  .hint{font-size:11px;color:var(--steel);font-weight:500}

  /* equipment + dims rows */
  .repeat-row{display:grid;gap:8px;align-items:end;margin-bottom:8px}
  .eq-row{grid-template-columns:1fr 110px 40px}
  .dim-row{grid-template-columns:80px repeat(3,1fr) 80px 1fr 80px 40px}
  .row-x{background:#fff;border:1px solid var(--line);color:var(--warn);border-radius:7px;height:36px;cursor:pointer;font-weight:700}
  .row-x:hover{background:#fbeeee}
  .add-row{background:var(--line-2);border:1px dashed var(--steel);color:var(--navy);border-radius:7px;padding:8px;cursor:pointer;font-weight:600;font-size:12.5px;width:100%}
  .add-row:hover{background:#e7ecf4}
  .calc-out{font-size:12px;color:var(--navy);font-weight:700;background:var(--line-2);border-radius:7px;padding:8px 10px;margin-top:4px}

  /* service line items table */
  .lines{width:100%;border-collapse:collapse}
  .lines th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--steel);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
  .lines td{padding:6px 6px;border-bottom:1px solid var(--line-2);vertical-align:top}
  .lines .col-svc{min-width:180px;max-width:300px;width:300px}
  .lines .col-svc select{max-width:100%;text-overflow:ellipsis}
  .lines .col-num{width:92px}
  .lines .col-tot{width:110px}
  /* "Payable" column combines the on/off toggle and the cost amount input so
     the internal cost sits right next to the customer Total. Amber tint marks
     it as internal-only at a glance. vertical-align:middle keeps the $ input
     aligned with the Total amount regardless of how tall the row gets (Rate
     column gets a calc-row select for chargeable lines, which is what makes
     this row variable-height). */
  .lines .col-pay{width:150px;text-align:center;background:#fffbe5;vertical-align:middle}
  .lines tr:hover td.col-pay{background:#fff5cc}
  .lines .col-pay .pay-row{display:flex;flex-direction:row;align-items:center;gap:6px;justify-content:flex-end}
  .lines .col-pay .pay-row .pay-toggle{flex:0 0 auto}
  .lines .col-pay .pay-row input[type="number"]{flex:1;min-width:0;padding:6px 8px;font-size:12.5px;text-align:right;background:#fff;border:1px solid #f0c98b;color:#5a3a00;font-weight:700;border-radius:5px;font-variant-numeric:tabular-nums}
  .lines .col-pay .pay-row input[type="number"]:focus{outline:2px solid rgba(201,115,38,.25);border-color:#c97326}
  .lines .col-pay .pay-row .pay-dash{flex:1;color:#b89559;font-weight:700;font-size:13px;letter-spacing:.5px;text-align:right;padding-right:6px}
  .lines .col-x{width:34px}
  .lines .col-grip{width:22px;padding-left:4px;padding-right:0}
  .lines .drag-handle{cursor:grab;color:#9aa4b2;font-size:16px;line-height:1;user-select:none;display:inline-block;padding:8px 2px}
  .lines .drag-handle:active{cursor:grabbing}
  .lines tr.dragging{opacity:.4}
  .lines tr.drop-above td{box-shadow:inset 0 2px 0 var(--brand,#1f6feb)}
  .lines tr.drop-below td{box-shadow:inset 0 -2px 0 var(--brand,#1f6feb)}
  .lines input,.lines select{padding:7px 8px}
  /* Per-line "Flat vs Per chargeable" picker + optional minimum-fee input,
     shown beneath the rate cell when the quote mode supports chargeable
     billing (Air / Ocean LCL). Kept compact so the table doesn't widen. */
  /* Calc-type select sits directly under the Rate input. */
  .lines .calc-row{display:flex;gap:4px;margin-top:4px;align-items:center;font-size:11px;color:var(--steel)}
  .lines .calc-row select{flex:1;min-width:0;padding:5px 6px;font-size:11.5px;background:#fbfcfe;color:var(--navy);font-weight:600;border-radius:5px}
  .lines .calc-row[data-disabled="true"]{opacity:.45;pointer-events:none}
  .lines .calc-row .min-tag{font-size:9.5px;letter-spacing:.3px;text-transform:uppercase;font-weight:700;color:var(--steel);padding:0 2px}
  /* Calc-mode pill toggle ("Single" | "Greater of") — compact variant sized
     for the Rate column. Mirrors .mode-pill visual but smaller padding/font. */
  .lines .calc-mode-pills{display:flex;gap:4px;margin-bottom:4px}
  .lines .calc-mode-pills .cm-pill{flex:1;text-align:center;border:1px solid var(--line);background:#fff;color:var(--steel);font-weight:700;font-size:10.5px;letter-spacing:.3px;text-transform:uppercase;padding:4px 6px;border-radius:5px;cursor:pointer;user-select:none;line-height:1.2}
  .lines .calc-mode-pills .cm-pill:hover{border-color:var(--royal);background:#fbfcfe}
  .lines .calc-mode-pills .cm-pill.active{background:var(--navy);color:#fff;border-color:var(--navy)}
  /* Greater-of dual-leg block — two stacked rate+basis pairs, separated by
     a small "or whichever is greater" tag for clarity. */
  .lines .gof-block{display:flex;flex-direction:column;gap:6px}
  .lines .gof-leg{display:flex;flex-direction:column;gap:4px}
  .lines .gof-leg input[type=number]{text-align:right}
  .lines .gof-or{font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;font-weight:800;color:var(--steel);text-align:center;padding:1px 0}
  /* Total cell — winner/alt sublines in greater_of mode. The winner gets a
     subtle bold/dark treatment; the alt is muted. */
  .lines .lt-sub.lt-win{color:var(--navy);font-weight:700}
  .lines .lt-sub.lt-alt{color:var(--steel);opacity:.75;font-style:italic}
  /* Greater-of qty cell — read-only "1,000 LB" style display, no input. */
  .lines .gof-qty{text-align:right;font-weight:700;color:var(--navy);font-size:12.5px;padding:8px 4px;background:#f3f6fb;border:1px solid var(--line);border-radius:6px;letter-spacing:.3px}

  /* Phone row — country code + number + extension stacked horizontally.
     Country code is a select with international dial codes (e.g. "+1 USA",
     "+52 Mexico") so it needs more room than the old +1-only text input
     to show the selected country without truncation. Use minmax for the
     phone column so cramped containers don't squeeze the number field
     below usable width. */
  .phone-row{display:grid;grid-template-columns:160px minmax(140px,1fr) 80px;gap:6px;align-items:stretch}
  .phone-row .phone-cc{font-weight:700;color:var(--navy);letter-spacing:.2px;padding-left:8px;padding-right:4px;text-overflow:ellipsis}
  .phone-row .phone-ext{text-align:center}
  /* On narrow containers (quote contact phone sits in a 2-col grid that
     collapses below ~640px), stack the country code on its own row so the
     phone number has full width. */
  @media (max-width:720px){
    .phone-row{grid-template-columns:1fr 80px;grid-template-areas:"cc cc" "num ext";gap:6px}
    .phone-row .phone-cc{grid-area:cc}
    .phone-row .phone-num{grid-area:num}
    .phone-row .phone-ext{grid-area:ext}
  }
  /* "Minimum charge" row — gated behind the "Minimum Charge Applies" toggle.
     When the box is unchecked we only show the checkbox (compact). When
     checked, the labelled $-input + hint reveal beneath it. */
  .lines .min-charge-row{margin:0 0 10px;background:#fff8ed;border:1px solid #f0c98b;border-left:4px solid #c97326;border-radius:7px;padding:10px 14px;display:flex;align-items:center;gap:12px;max-width:560px;flex-wrap:wrap}
  .lines .min-charge-row .mcr-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;font-weight:700;color:#8a4b00;letter-spacing:.2px;user-select:none}
  .lines .min-charge-row .mcr-toggle input[type=checkbox]{width:16px;height:16px;accent-color:#c97326;cursor:pointer}
  .lines .min-charge-row .mcr-toggle span{white-space:nowrap}
  .lines .min-charge-row .mcr-field{display:flex;align-items:center;gap:10px;flex:1;min-width:240px}
  .lines .min-charge-row .mcr-lbl{font-size:12px;font-weight:700;color:#8a4b00;letter-spacing:.3px;white-space:nowrap;display:flex;align-items:center;gap:6px}
  .lines .min-charge-row .mcr-lbl::before{content:"⚖";font-size:14px;color:#c97326}
  .lines .min-charge-row .currency{font-size:16px;font-weight:800;color:#8a4b00}
  .lines .min-charge-row .mcr-field input{flex:1;min-width:160px;padding:10px 14px;font-size:15px;text-align:right;background:#fff;border:1px solid #e5c587;color:var(--navy);font-weight:700;border-radius:6px}
  .lines .min-charge-row .mcr-field input:focus{outline:2px solid rgba(201,115,38,.3);border-color:#c97326}
  .lines .min-charge-row .mcr-hint{font-size:11px;color:#8a4b00;opacity:.85;font-style:italic;flex-basis:100%}
  /* Total cell aligns vertically with the Payable amount on the same row.
     vertical-align lives on the td (set via .col-tot below); .line-total itself
     no longer needs the old padding-top:14px nudge that used to fake centering. */
  .lines .col-tot{vertical-align:middle}
  .line-total{font-weight:700;color:var(--navy);text-align:right}
  .line-total .lt-sub{display:block;font-size:10.5px;font-weight:600;color:var(--steel);margin-top:2px;letter-spacing:.3px}
  .pay-toggle{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
  .pay-toggle input{width:auto}
  .payable-note{background:#fff8ec;border:1px solid #f0e0bf;border-radius:7px;padding:8px 10px;margin:2px 0 4px}
  .payable-note .pl-head{font-size:11px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;display:flex;align-items:center;gap:6px}
  .payable-note .pl-grid{display:grid;grid-template-columns:160px 1fr;gap:8px}
  .internal-badge{font-size:10px;background:var(--gold);color:#1a1300;border-radius:4px;padding:1px 5px;font-weight:700}

  /* Quote totals row — receivable (customer-facing, navy) on the left,
     internal profit summary (amber, marked "Not on quote") on the right. */
  .totals-row{display:flex;justify-content:flex-end;align-items:stretch;gap:14px;margin-top:14px;flex-wrap:wrap}
  .grand{display:flex;justify-content:flex-end;margin-top:10px}
  .grand .box{background:var(--navy);color:#fff;border-radius:8px;padding:10px 18px;font-weight:700;font-size:16px;display:flex;gap:18px;align-items:center}
  .grand .box small{font-weight:500;opacity:.8;font-size:12px}
  .totals-row .grand{margin-top:0}
  .totals-row .grand .box{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 20px;font-size:22px;min-width:260px}
  .totals-row .grand .box small{font-size:11px;letter-spacing:.6px;text-transform:uppercase;opacity:.78}
  .totals-row .grand .box .tag{font-size:10px;font-weight:600;background:rgba(255,255,255,.12);padding:3px 8px;border-radius:999px;letter-spacing:.4px;text-transform:uppercase}
  .totals-row .internal-box{background:#fff7e8;border:1px solid #f0c98b;border-radius:8px;padding:14px 20px;min-width:260px;display:flex;flex-direction:column;gap:6px}
  .totals-row .internal-box .lock{font-size:10px;font-weight:700;color:#8a4b00;letter-spacing:.5px;text-transform:uppercase;display:flex;align-items:center;gap:5px}
  .totals-row .internal-box .lbl{font-size:11px;color:#8a4b00;letter-spacing:.5px;text-transform:uppercase;font-weight:700;opacity:.85}
  .totals-row .internal-box .ip-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px;color:#5a3a00}
  .totals-row .internal-box .ip-grid .k{font-weight:600}
  .totals-row .internal-box .ip-grid .v{text-align:right;font-weight:700;color:#5a3a00;font-variant-numeric:tabular-nums}
  .totals-row .internal-box .ip-profit{margin-top:6px;padding-top:8px;border-top:1px solid #e5be7a;font-size:18px;font-weight:800;color:#7a3b00;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .totals-row .internal-box .ip-profit .ip-margin{font-size:11px;font-weight:600;color:#8a4b00;opacity:.85}

  .mode-pills{display:flex;gap:8px}
  .mode-pill{flex:1;text-align:center;border:1px solid var(--line);border-radius:8px;padding:10px;cursor:pointer;font-weight:700;color:var(--steel);background:#fff;transition:background .12s,color .12s,border-color .12s}
  /* LG-only mode pills (Customs Clearance / DAP) — hidden for ACCO users,
     revealed when applyBrand stamps body.org-lg on sign-in. */
  .mode-pill.lg-only-mode{display:none}
  body.org-lg .mode-pill.lg-only-mode{display:block}
  .mode-pill:hover{border-color:var(--royal);background:#fbfcfe}
  .mode-pill.active{background:var(--navy);color:#fff;border-color:var(--navy)}
  /* Ocean FCL/LCL sub-toggle pills use a lighter blue when active so they're
     visually distinct from the main mode picker — agents can see at a glance
     that this is a sub-selection of Ocean, not the top-level mode. */
  #oceanSubtypeRow .mode-pill{font-size:13px;padding:8px 10px}
  #oceanSubtypeRow .mode-pill.active{background:#dceefc;color:#0a2a5e;border-color:#1457c4;box-shadow:inset 0 0 0 1px #1457c4}
  #oceanSubtypeRow .mode-pill.active:hover{background:#c9e0fa}

  .hidden{display:none !important}

  /* ---------- Document / Preview ---------- */
  /* ===================== STORAGE BILLING CALENDAR (LG only) =====================
     Two-column layout (calendar grid + day panel). Status colors mirror the
     mockup: amber=active, green=billed, red=overdue, gray=cleared. */
  .stg-tabs{display:flex;gap:4px}
  .stg-tab{padding:6px 12px;border-radius:6px;font-size:12.5px;cursor:pointer;color:var(--steel);border:1px solid transparent;background:transparent}
  .stg-tab.active{background:#fff;color:var(--navy);border-color:var(--line)}
  .stg-tab:not(.active):hover{background:rgba(255,255,255,.5)}
  .stg-alert{background:#fdecec;border:1px solid #f7c1c1;color:#791f1f;padding:8px 12px;border-radius:8px;font-size:12.5px;margin:6px 0 12px;font-weight:600}
  .stg-split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:14px;margin-top:8px}
  @media (max-width:900px){ .stg-split{grid-template-columns:1fr} }

  .stg-cal-col{min-width:0}
  .stg-nav{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .stg-month-lbl{font-weight:700;font-size:14px;color:var(--navy);min-width:150px;text-align:center}
  .stg-navbtn{padding:4px 10px;border-radius:6px;cursor:pointer;color:var(--navy);border:1px solid var(--line);background:#fff;font-size:13px;font-weight:700}
  .stg-navbtn:hover{background:#f3f6fb}
  .stg-today-btn{margin-left:auto;padding:4px 10px;border-radius:6px;font-size:12px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--steel)}
  .stg-today-btn:hover{background:#f3f6fb;color:var(--navy)}

  .stg-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;background:#f3f6fb;border-radius:8px;padding:6px;border:1px solid var(--line)}
  .stg-dow{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--steel);text-align:center;padding:2px 0 4px;font-weight:700}
  .stg-day{min-height:56px;background:#fff;border-radius:6px;padding:4px 5px;cursor:pointer;border:1px solid transparent;position:relative;overflow:hidden}
  .stg-day:hover{border-color:var(--line)}
  .stg-day.selected{border-color:var(--royal);background:#eef4ff}
  /* "Today" indicator — always visible so agents can spot the current day
     even when a different day is the active selection. The day number gets
     a solid royal pill so it stands out against neighbors without hiding
     the day's status dots or record count. Selection (royal border +
     tinted background) still wins visually when today happens to be
     selected — the two styles compose. */
  .stg-day.today{background:#f3f6fb;box-shadow:inset 0 0 0 1px var(--royal)}
  .stg-day.today .stg-daynum{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:18px;height:18px;padding:0 5px;border-radius:999px;
    background:var(--royal);color:#fff;font-weight:700;line-height:1
  }
  .stg-day.today.selected{background:#dceefc}
  .stg-day.other{opacity:.35;cursor:default}
  .stg-day.other:hover{border-color:transparent}
  .stg-daynum{font-size:11px;color:var(--steel);font-weight:600}
  .stg-day-dots{display:flex;gap:3px;margin-top:3px;flex-wrap:wrap}
  .stg-dot{display:inline-block;width:7px;height:7px;border-radius:50%}
  .stg-dot.ov{background:#e24b4a}
  .stg-dot.ac{background:#ef9f27}
  .stg-dot.bi{background:#97c459}
  .stg-dot.cl{background:#b4b2a9}
  .stg-count{font-size:9.5px;color:var(--steel);margin-top:1px;line-height:1}

  .stg-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
  .stg-strip .stg-day{min-height:78px}

  .stg-dayonly{background:#f3f6fb;border:1px solid var(--line);border-radius:8px;padding:16px;text-align:center;font-size:13px;color:var(--navy)}

  .stg-legend{display:flex;gap:14px;margin-top:8px;font-size:11px;color:var(--steel);align-items:center;flex-wrap:wrap}
  .stg-legend span{display:inline-flex;align-items:center;gap:4px}

  .stg-side{min-width:0}
  .stg-panel{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 14px;box-shadow:var(--shadow)}
  .stg-panel-hd{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line-2)}
  .stg-panel-title{font-weight:700;font-size:13.5px;color:var(--navy)}
  .stg-panel-count{font-size:11px;color:var(--steel);margin-left:auto}
  .stg-panel-empty{color:var(--steel);font-size:12.5px;padding:16px 0;text-align:center}
  .stg-panel-body{max-height:520px;overflow-y:auto}

  .stg-row{padding:9px 2px;border-top:1px solid var(--line-2)}
  .stg-row:first-child{border-top:none}
  .stg-row-top{display:flex;align-items:baseline;gap:6px}
  .stg-row-rec{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:var(--steel);font-weight:600}
  .stg-row-status{margin-left:auto}
  /* Owner badge — appears in the row header ONLY when an admin/viewer is
     looking at another employee's storage record (or "All employees").
     Small pill so it doesn't compete with the shipment header. */
  .stg-owner-badge{
    font-size:10.5px;padding:1px 8px;border-radius:999px;
    background:#eef4ff;color:var(--navy);border:1px solid #cfe0fb;font-weight:600
  }
  .stg-status-pill{font-size:10.5px;padding:2px 8px;border-radius:999px;font-weight:600}
  .stg-status-pill.ac{background:#fdefd6;color:#7a4b06}
  .stg-status-pill.bi{background:#e7f5ee;color:#1f6a35}
  .stg-status-pill.cl{background:#eef1f6;color:#5b7299}
  .stg-status-pill.ov{background:#fdecec;color:#791f1f}
  /* "Partial" — some receivings billed, others not. Blue tint to read as
     "in progress" rather than red-alarm or green-done. */
  .stg-status-pill.pa{background:#e0ecff;color:#0f3a7d}
  .stg-dot.pa{background:#3579d3}
  .stg-row-client{font-weight:700;font-size:13px;color:var(--navy);margin-top:2px}
  .stg-row-meta{font-size:11.5px;color:var(--steel);margin-top:2px}
  .stg-row-notes{font-size:11.5px;color:#334;margin-top:4px;padding:5px 8px;background:#f3f6fb;border-radius:5px}
  .stg-row-actions{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
  .stg-iconbtn{background:#fff;border:1px solid var(--line);border-radius:5px;padding:3px 9px;cursor:pointer;color:var(--steel);font-size:11.5px}
  .stg-iconbtn:hover{background:#f3f6fb;color:var(--navy);border-color:var(--royal)}

  /* Full-viewport backdrop; the card centers inside it and caps its own
     height so the body scrolls internally when a shipment has many
     receiving records. Header + actions stay pinned so Save is always
     reachable without zooming out. */
  .stg-modal{position:fixed;inset:0;background:rgba(10,42,94,.35);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;box-sizing:border-box}
  .stg-modal.hidden{display:none}
  .stg-modal-card{background:#fff;border-radius:12px;width:min(600px,100%);box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:calc(100vh - 32px);min-height:0;display:flex;flex-direction:column;overflow:hidden}
  /* Header pinned via flex — the scrollable body sits between it and the
     pinned action row so both Cancel and Save Entry are always visible. */
  .stg-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .stg-modal-body{padding:14px 20px;overflow-y:auto;flex:1 1 auto;min-height:0}
  .stg-modal-title{font-weight:700;color:var(--navy);font-size:16px}
  .stg-modal-x{background:transparent;border:0;font-size:18px;color:var(--steel);cursor:pointer;padding:2px 6px;border-radius:4px}
  .stg-modal-x:hover{background:#f3f6fb;color:var(--navy)}
  .stg-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .stg-form-grid .stg-full{grid-column:1 / -1}
  .stg-recv-hd{display:flex;align-items:center;justify-content:space-between;margin:14px 0 6px}
  .stg-recv-add{background:#fff;border:1px solid var(--royal);color:var(--royal);border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;font-weight:600}
  .stg-recv-add:hover{background:#eef4ff}
  .stg-recv-row{background:#fafbfd;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px}
  .stg-recv-row-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .stg-recv-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--steel);font-weight:700}
  .stg-recv-rm{background:transparent;border:1px solid var(--line);color:#8a1c13;border-radius:5px;padding:2px 8px;font-size:11.5px;cursor:pointer}
  .stg-recv-rm:hover{background:#fdecec;border-color:#f7c1c1}
  .stg-recv-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .stg-recv-grid .stg-full{grid-column:1 / -1}
  .stg-recv-cell{min-width:0}
  .stg-summary{margin-top:6px;padding:8px 10px;background:#eef4ff;border:1px solid #cfe0fb;border-radius:6px;color:var(--navy);font-size:12.5px;font-weight:600}
  .stg-summary:empty{display:none}
  /* Multi-receiving detail list in the day panel — one card per receiving
     under the shipment with its own status pill and per-record action
     buttons. */
  .stg-recv-list{margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
  .stg-recv-item{padding:6px 0;border-bottom:1px dashed var(--line-2)}
  .stg-recv-item:last-child{border-bottom:none}
  .stg-recv-item-hd{display:flex;align-items:center;gap:8px;justify-content:space-between}
  .stg-recv-item-meta{font-size:11.5px;color:#334;margin-top:2px}
  .stg-recv-item-actions{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap}
  .stg-recv-act{padding:2px 8px !important;font-size:11px !important}
  .stg-recv-rec{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:var(--steel);font-weight:600}
  .stg-row-summary{font-weight:600;color:var(--navy)}
  /* Shipment totals — labeled per-package-type roll-up shown above the
     one-line summary for multi-record shipments. Tinted background so the
     block reads as "shipment-level" info distinct from per-receiving rows. */
  .stg-totals{margin-top:6px;padding:8px 10px;background:#f3f6fb;border:1px solid var(--line-2);border-radius:6px}
  .stg-totals-hd{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--steel);font-weight:700;margin-bottom:4px}
  .stg-totals-row{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--navy);padding:1px 0}
  .stg-totals-row span:first-child{color:#334;font-weight:500}
  .stg-totals-num{font-variant-numeric:tabular-nums;font-weight:700}
  .stg-totals-wt{border-top:1px dashed var(--line);margin-top:4px;padding-top:4px}
  /* Bulk shipment-level buttons — accent them so agents can spot the
     "does it to all records" action apart from per-record buttons. */
  .stg-bulk-btn{border-color:var(--royal) !important;color:var(--royal) !important;font-weight:600}
  .stg-bulk-btn:hover{background:#eef4ff !important}
  .stg-lbl{font-size:10.5px;color:var(--steel);text-transform:uppercase;letter-spacing:.3px;font-weight:700;display:block;margin-bottom:3px}
  .stg-modal-card input, .stg-modal-card select, .stg-modal-card textarea{
    width:100%;box-sizing:border-box;font-size:13px;padding:7px 9px;border:1px solid var(--line);border-radius:6px;font-family:inherit
  }
  .stg-modal-card textarea{resize:vertical;min-height:56px}
  .stg-modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--line);background:#fafbfd;flex:0 0 auto}
  .stg-delete-btn{margin-right:auto}
  .btn-danger{background:#d64545;color:#fff}
  .btn-danger:hover{background:#b83a3a}

  /* ===================== TRUCKING DIRECTORY (LG only) =====================
     Shared team-wide company list. Card-per-row layout so long lists stay
     scannable — search, category/region selects, and tag chips filter live. */
  .tru-alert{background:#eef4ff;border:1px solid #cfe0fb;color:#0f3a7d;padding:8px 12px;border-radius:8px;font-size:12.5px;margin:6px 0 12px;font-weight:600}
  .tru-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 10px;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:8px}
  .tru-toolbar input[type="text"],.tru-toolbar input:not([type]){flex:1 1 240px;min-width:200px;padding:8px 10px;border-radius:6px;border:1px solid var(--line);font-size:13px}
  .tru-toolbar select{padding:8px 10px;border-radius:6px;border:1px solid var(--line);background:#fff;font-size:13px}
  .tru-tag-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
  .tru-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:#f3f6fb;border:1px solid var(--line);color:var(--navy);font-size:11.5px;cursor:pointer;user-select:none;font-weight:600}
  .tru-chip:hover{background:#eef4ff}
  .tru-chip.active{background:var(--royal);color:#fff;border-color:var(--royal)}
  .tru-chip-n{font-size:10px;opacity:.7;font-weight:500}
  .tru-clear-btn{background:transparent;border:1px solid var(--line);color:var(--steel);padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px}
  .tru-clear-btn:hover{background:#f3f6fb;color:var(--navy)}
  .tru-list-hd{display:flex;align-items:center;gap:8px;margin:8px 4px 6px;font-size:12px;color:var(--steel)}
  .tru-active{color:var(--navy);font-weight:600}
  .tru-list{display:grid;grid-template-columns:1fr;gap:8px}
  @media (min-width: 1100px){ .tru-list{grid-template-columns:1fr 1fr} }
  .tru-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 14px;cursor:pointer;transition:box-shadow .12s,border-color .12s}
  .tru-card:hover{border-color:var(--royal);box-shadow:0 3px 10px rgba(20,87,196,.08)}
  .tru-card-hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
  .tru-card-name{font-weight:700;font-size:14px;color:var(--navy)}
  .tru-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .tru-cat-pill{font-size:10.5px;padding:2px 8px;border-radius:999px;background:#eef4ff;color:var(--royal);font-weight:600}
  .tru-region{font-size:11px;color:var(--steel);padding:1px 7px;background:#f3f6fb;border-radius:999px}
  .tru-region-more{background:transparent;color:var(--steel);padding:1px 4px;font-style:italic}
  /* View-mode read-only region pill in the modal — matches how tags render. */
  .tru-region-pill{font-size:10.5px;padding:1px 8px;border-radius:999px;background:#e0ecff;color:#0f3a7d;font-weight:600}
  /* Small hint text used next to labels (e.g. Regions field intro). */
  .tru-hint{font-weight:500;color:var(--steel);text-transform:none;letter-spacing:0;font-size:10.5px;margin-left:6px}
  .tru-tag-row{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
  .tru-tag-pill{font-size:10.5px;padding:1px 7px;border-radius:999px;background:#fdefd6;color:#7a4b06;font-weight:600}
  .tru-contact{margin-top:5px;font-size:12px;color:#334}
  .tru-muted{color:var(--steel);font-size:11px}
  .tru-notes-preview{margin-top:4px;font-size:11.5px;color:#334;font-style:italic}
  .tru-empty{padding:32px 12px;text-align:center;color:var(--steel);font-size:13px;background:#fff;border:1px dashed var(--line);border-radius:8px}

  .tru-modal{position:fixed;inset:0;background:rgba(10,42,94,.35);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;box-sizing:border-box}
  .tru-modal.hidden{display:none}
  .tru-modal-card{background:#fff;border-radius:12px;width:min(640px,100%);box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:calc(100vh - 32px);min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .tru-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .tru-modal-body{padding:14px 20px;overflow-y:auto;flex:1 1 auto;min-height:0}
  .tru-modal-title{font-weight:700;color:var(--navy);font-size:16px}
  .tru-modal-x{background:transparent;border:0;font-size:18px;color:var(--steel);cursor:pointer;padding:2px 6px;border-radius:4px}
  .tru-modal-x:hover{background:#f3f6fb;color:var(--navy)}
  .tru-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .tru-form-grid .tru-full{grid-column:1 / -1}
  .tru-lbl{font-size:10.5px;color:var(--steel);text-transform:uppercase;letter-spacing:.3px;font-weight:700;display:block;margin-bottom:3px}
  .tru-modal-card input,.tru-modal-card select,.tru-modal-card textarea{width:100%;box-sizing:border-box;font-size:13px;padding:7px 9px;border:1px solid var(--line);border-radius:6px;font-family:inherit}
  .tru-modal-card textarea{resize:vertical;min-height:60px}
  .tru-modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--line);background:#fafbfd;flex:0 0 auto}
  .tru-delete-btn{margin-right:auto}
  .tru-tag-select{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#fafbfd;min-height:40px}
  .tru-tag-select .tru-chip{padding:3px 10px}
  .tru-add-tag{flex:0 0 140px;padding:4px 8px !important;font-size:11.5px !important;border:1px dashed var(--line) !important;background:transparent !important}
  .tru-recv-hd{display:flex;align-items:center;justify-content:space-between;margin:14px 0 6px}
  .tru-recv-add{background:#fff;border:1px solid var(--royal);color:var(--royal);border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;font-weight:600}
  .tru-recv-add:hover{background:#eef4ff}
  .tru-recv-row{background:#fafbfd;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px}
  .tru-recv-row-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .tru-recv-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--steel);font-weight:700}
  .tru-recv-rm{background:transparent;border:1px solid var(--line);color:#8a1c13;border-radius:5px;padding:2px 8px;font-size:11.5px;cursor:pointer}
  .tru-recv-rm:hover{background:#fdecec;border-color:#f7c1c1}
  .tru-recv-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .tru-recv-grid .tru-full{grid-column:1 / -1}
  .tru-recv-cell{min-width:0}
  .tru-audit{margin-top:14px;padding-top:10px;border-top:1px dashed var(--line);font-size:10.5px;color:var(--steel);text-align:right}
  /* Office card — one per office location. Nests contact rows inside. */
  .tru-office-card{background:#f8fafd;border:1.5px solid #cfdbe8;border-radius:8px;padding:12px 14px;margin-bottom:10px}
  .tru-office-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--line-2)}
  .tru-office-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--navy);font-weight:700}
  .tru-office-contacts-hd{margin-top:12px;padding-top:8px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;align-items:center}
  .tru-office-contacts-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--steel);font-weight:700}
  .tru-contact-row{background:#fff;border:1px solid var(--line);border-radius:6px;padding:8px 10px;margin-top:8px}
  /* View-mode office cards read as static blocks — inputs strip themselves
     via the existing view-mode CSS. Keep the card container visible so
     each office is still clearly delineated. */
  .tru-modal-card.view-mode .tru-office-card{background:#fff;border-color:var(--line-2)}
  .tru-modal-card.view-mode .tru-contact-row{border-color:var(--line-2)}
  /* Card-list office tag chip — shown next to the first-office info on
     the list to distinguish "one office" vs "multi-office" companies. */
  .tru-office-tag{display:inline-block;font-size:10.5px;padding:1px 8px;border-radius:999px;background:#e6ecf5;color:var(--navy);font-weight:600;margin-right:6px}
  /* =====================================================================
     View-mode detail rendering — replaces the disabled-input layout with
     a clean data-card. Empty fields are omitted entirely by the render
     path so no orphan labels or placeholder ghosts leak through.
     ===================================================================== */
  .tru-detail-block{background:#fff;border:1px solid var(--line-2);border-radius:6px;padding:10px 14px;margin-bottom:10px}
  .tru-detail-row{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:4px 0;border-bottom:1px dashed var(--line-2)}
  .tru-detail-row:last-child{border-bottom:none}
  .tru-detail-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--steel);font-weight:700;align-self:baseline}
  .tru-detail-val{font-size:14px;color:var(--ink);font-weight:600;word-break:break-word}
  .tru-detail-contact{background:#fff;border:1px solid var(--line-2);border-radius:6px;padding:10px 14px;margin-bottom:8px}
  .tru-detail-name{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:4px}
  .tru-detail-line{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--ink);padding:2px 0;line-height:1.5}
  .tru-detail-line span{font-weight:500}
  .tru-detail-note{margin-top:6px;padding:6px 8px;background:#f8fafd;border-left:2px solid var(--line);font-size:12px;color:#334;font-style:italic}
  .tru-office-empty{opacity:.7}
  /* Belt-and-suspenders: kill any residual placeholder text on disabled
     inputs anywhere in the modal so nothing reads as "sample data". */
  .tru-modal-card.view-mode input:disabled::placeholder,
  .tru-modal-card.view-mode textarea:disabled::placeholder{color:transparent !important}
  /* Multi-value phone/email rows inside a contact card. Each row is
     label + input + optional remove-button; the "+ Add" button sits
     directly under the last row. */
  .tru-multi-row{margin-bottom:6px}
  .tru-multi-inline{display:flex;gap:6px;align-items:center}
  .tru-multi-inline input{flex:1 1 auto;min-width:0}
  .tru-multi-rm{background:transparent;border:1px solid var(--line);color:#8a1c13;border-radius:5px;padding:4px 8px;font-size:11.5px;cursor:pointer;flex:0 0 auto}
  .tru-multi-rm:hover{background:#fdecec;border-color:#f7c1c1}
  .tru-add-multi{background:#fff;border:1px dashed var(--royal);color:var(--royal);border-radius:6px;padding:3px 10px;font-size:11.5px;cursor:pointer;font-weight:600;margin-top:2px}
  .tru-add-multi:hover{background:#eef4ff}
  /* =====================================================================
     View / Edit visual modes — two clear looks so agents know at a
     glance whether they're reading or editing.

     - EDIT mode: white body, chunky borders on inputs, blue focus rings,
       chips look clickable, "Editing" pill next to title, prominent
       Save button.
     - VIEW mode: soft-gray body, inputs render as plain readable text
       (no borders), chips render as static pills, "View only" pill next
       to title, prominent Edit button.
     ===================================================================== */

  /* Header pills — the mode indicator right next to the modal title. */
  .tru-editing-badge, .tru-viewing-badge{
    display:none;margin-left:10px;padding:2px 10px;border-radius:999px;
    font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
    vertical-align:middle
  }
  .tru-editing-badge{background:var(--gold);color:#3a2600}
  .tru-viewing-badge{background:#e6ecf5;color:var(--navy)}
  .tru-modal-card:not(.view-mode) .tru-editing-badge{display:inline-flex;align-items:center}
  .tru-modal-card.view-mode      .tru-viewing-badge{display:inline-flex;align-items:center}

  /* ---------- VIEW mode ---------- */
  .tru-modal-card.view-mode .tru-modal-body{background:#f5f7fa}
  /* Read-only fields: strip the input chrome, render as plain readable
     text so nothing invites a click. Values stay dark; labels dim. */
  .tru-modal-card.view-mode input:disabled,
  .tru-modal-card.view-mode select:disabled,
  .tru-modal-card.view-mode textarea:disabled{
    background:transparent !important;border:0 !important;padding:2px 0 4px !important;
    color:var(--ink) !important;opacity:1;cursor:default;font-weight:600;font-size:14px;
    -webkit-appearance:none;appearance:none
  }
  .tru-modal-card.view-mode textarea:disabled{white-space:pre-wrap}
  .tru-modal-card.view-mode select:disabled{padding-right:0 !important;background-image:none}
  .tru-modal-card.view-mode .tru-lbl{color:var(--steel);font-weight:700;opacity:1;font-size:10px}
  /* Contact rows sit on the neutral body — no chunky border needed */
  .tru-modal-card.view-mode .tru-recv-row{
    background:#fff;border:1px solid var(--line-2);padding:10px 12px
  }
  /* Chip pickers: pure display, no border, static pills already handle it */
  .tru-modal-card.view-mode .tru-tag-select{
    background:transparent;border:0;padding:2px 0;min-height:0
  }

  /* ---------- EDIT mode ---------- */
  .tru-modal-card:not(.view-mode) .tru-modal-body{background:#fff}
  /* All the fillable controls get a heavier border + a clear focus ring
     so it's obvious they're waiting for input. */
  .tru-modal-card:not(.view-mode) input:not(:disabled),
  .tru-modal-card:not(.view-mode) select:not(:disabled),
  .tru-modal-card:not(.view-mode) textarea:not(:disabled){
    background:#fff;border:1.5px solid #b9c2d1;color:var(--ink);font-weight:500;
    transition:border-color .12s,box-shadow .12s
  }
  .tru-modal-card:not(.view-mode) input:not(:disabled):hover,
  .tru-modal-card:not(.view-mode) select:not(:disabled):hover,
  .tru-modal-card:not(.view-mode) textarea:not(:disabled):hover{border-color:var(--steel)}
  .tru-modal-card:not(.view-mode) input:not(:disabled):focus,
  .tru-modal-card:not(.view-mode) select:not(:disabled):focus,
  .tru-modal-card:not(.view-mode) textarea:not(:disabled):focus{
    border-color:var(--royal);outline:none;box-shadow:0 0 0 3px rgba(20,87,196,.18)
  }
  /* Labels in edit mode: dark navy, bold — reads as a form heading */
  .tru-modal-card:not(.view-mode) .tru-lbl{color:var(--navy);font-weight:700;opacity:1}
  /* Contact rows in edit mode: chunkier border + tinted background so
     each contact card reads as its own editable block */
  .tru-modal-card:not(.view-mode) .tru-recv-row{
    background:#f5f9ff;border:1.5px solid #cfdbe8;padding:12px 14px
  }
  .tru-modal-card:not(.view-mode) .tru-recv-lbl{color:var(--royal)}
  /* Chip pickers: obvious click target — chunky container + clear
     hover cue on individual chips */
  .tru-modal-card:not(.view-mode) .tru-tag-select{
    background:#f8fafd;border:1.5px solid #cfdbe8;padding:8px 10px
  }
  .tru-modal-card:not(.view-mode) .tru-chip{border:1.5px solid var(--line);font-weight:600}
  .tru-modal-card:not(.view-mode) .tru-chip:hover{
    background:#eef4ff;border-color:var(--royal);cursor:pointer
  }
  .tru-modal-card:not(.view-mode) .tru-add-tag:focus{
    border-color:var(--royal) !important;background:#fff !important
  }
  /* Section headers ("Contacts", "Regions / locations") get a stronger
     underline in edit mode so the form's structure is obvious */
  .tru-modal-card:not(.view-mode) .tru-recv-hd{
    border-bottom:1.5px solid var(--line);padding-bottom:6px
  }
  .tru-modal-card:not(.view-mode) .tru-recv-hd .tru-lbl{font-size:12px}

  /* Save button — extra emphasis so agents can spot the primary action */
  #truSaveBtn{padding:8px 22px;font-weight:700;font-size:13.5px}
  #truEditBtn{padding:8px 22px;font-weight:700;font-size:13.5px}

  .doc-wrap{display:none}
  .preview-mode .doc-wrap{display:block;background:#5a6477;min-height:100vh;padding:30px 0}
  .preview-mode .app{display:none}
  .preview-mode .user-bar-top{display:none !important}
  .preview-bar{
    position:fixed;top:0;left:0;right:0;height:54px;background:var(--navy);color:#fff;
    display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.2)
  }
  .preview-bar .pv-actions{display:flex;gap:8px}
  .preview-mode .doc-wrap{padding-top:80px}

  .sheet{
    width:8.5in;min-height:11in;background:#fff;margin:0 auto;padding:0.5in 0.55in;
    box-shadow:0 8px 30px rgba(0,0,0,.25);color:#1a2233;font-size:12px;
    display:flex;flex-direction:column;
  }
  /* Push any direct child marked .grow to fill the remaining height. */
  .sheet > .grow{flex:1 0 auto}
  .d-head{display:grid;grid-template-columns:1.3fr 1.6fr 1fr;align-items:center;gap:10px;border-bottom:3px solid var(--navy);padding-bottom:8px}
  .d-head .d-logo img{max-width:200px;height:auto}
  .d-head .d-logo .fallback{font-weight:800;color:var(--navy);font-size:20px}
  .d-center{text-align:center;line-height:1.5}
  .d-center .co{font-weight:800;color:var(--navy);font-size:15px;letter-spacing:.3px}
  .d-center .ln{font-size:11px;color:#334}
  .d-meta{text-align:right;font-size:11px}
  .d-meta .qno{font-size:18px;font-weight:800;color:var(--navy)}
  .d-meta .ml{color:#445}

  .d-title{text-align:center;font-size:16px;font-weight:800;letter-spacing:2px;color:var(--navy);text-transform:uppercase;margin:6px 0 4px;display:flex;justify-content:center;align-items:baseline;gap:14px;flex-wrap:wrap}
  .d-title .qn{font-size:16px;font-weight:800;color:var(--navy);letter-spacing:.5px;background:#f3f6fb;border:1px solid var(--line);border-radius:6px;padding:3px 12px}

  .d-info{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:6px}
  .d-info .cell{display:grid;grid-template-columns:120px 1fr;border-bottom:1px solid var(--line-2)}
  .d-info .cell:nth-child(odd){border-right:1px solid var(--line-2)}
  .d-info .k{position:relative;background:#f3f6fb;padding:3px 8px;font-weight:700;color:var(--steel);font-size:10.5px;text-transform:uppercase;letter-spacing:.3px}
  .d-info .v{padding:3px 8px}
  /* Belt-and-suspenders: agent-entered values must NEVER inherit uppercase
     from any ancestor (e.g., parent .d-title or stray print rules). The label
     column (.k) keeps its uppercase styling; the value column (.v) and the
     container detail rows stay exactly as the agent typed them. */
  .d-info .v, .d-info .v *,
  .d-cont-blk .hd, .d-cont-blk .hd *,
  .d-cont-blk .bd .row > div:not(.k){
    text-transform: none !important;
  }
  /* Total box — open up the space between the word "Total" and the amount so
     they read as two distinct chunks instead of a smushed run-on. */
  .d-grand .gb .gb-lbl{margin-right:18px;letter-spacing:.8px;opacity:.92}
  .d-grand .gb .gb-amt{font-variant-numeric:tabular-nums;letter-spacing:.3px}

  table.d-lines{width:100%;border-collapse:collapse;margin-top:2px}
  table.d-lines th{position:relative;background:var(--navy);color:#fff;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;padding:5px 8px;text-align:left}
  table.d-lines th.r,table.d-lines td.r{text-align:right}
  table.d-lines td{padding:4px 8px;border-bottom:1px solid var(--line-2);font-size:11.5px}
  table.d-lines tr:nth-child(even) td{background:#fafbfd}
  .d-grand{display:flex;justify-content:flex-end;margin-top:8px}
  .d-grand .gb{position:relative;background:var(--navy);color:#fff;padding:8px 20px;border-radius:6px;font-weight:800;font-size:14px;overflow:hidden}

  /* Observations block on the printed quote — wrapped in a bordered card
     so it reads as a distinct section even when it lands alone on a
     second page. Header bar acts as a visual anchor; body has enough
     padding to avoid looking like floating body text. */
  .d-notes{
    margin-top:12px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
    page-break-inside:avoid;
    break-inside:avoid;
  }
  .d-notes .nt{
    display:block;
    background:#f3f6fb;
    padding:6px 12px;
    font-weight:800;
    color:var(--navy);
    text-transform:uppercase;
    letter-spacing:.5px;
    font-size:10.5px;
    border-bottom:1px solid var(--line);
  }
  /* Body — everything after the header label. Padding + line-height so a
     long observation renders as a readable paragraph, not squished text. */
  .d-notes-body{padding:8px 12px;font-size:11px;color:#1a2233;line-height:1.5}
  .d-validity{position:relative;margin-top:10px;display:inline-block;background:var(--okbg);color:var(--ok);border:1px solid #bfe3ce;border-radius:6px;padding:6px 12px;font-weight:700;font-size:11px;overflow:hidden}

  /* Footer flows at the bottom of the sheet via flex (margin-top:auto). On
     multi-page quotes it naturally lands at the end of the last page. The
     absolute positioning that used to overlap the Observations is gone. */
  .d-foot{margin-top:auto;padding-top:8px;border-top:2px solid var(--navy);text-align:center;font-size:10px;color:#456;page-break-inside:avoid}
  .d-foot .co{font-weight:800;color:var(--navy);font-size:11px}

  @media (max-width:980px){
    .app{grid-template-columns:1fr}
    .sidebar{order:2}
    .g3,.g4{grid-template-columns:1fr 1fr}
  }

  /* ---------- Sidebar tabs ---------- */
  .sb-tabs{display:flex;flex-direction:column;gap:3px;background:rgba(0,0,0,.18);padding:5px;border-radius:8px}
  .sb-tab{text-align:left;padding:9px 12px;border-radius:6px;font-size:13px;font-weight:700;cursor:pointer;color:#9db4d8;letter-spacing:.3px;display:flex;align-items:center;gap:9px;transition:background .12s,color .12s}
  .sb-tab::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;flex-shrink:0}
  .sb-tab.active{background:var(--gold);color:#1a1300}
  .sb-tab.active::before{background:#1a1300;opacity:.85}
  .sb-tab:not(.active):hover{background:rgba(255,255,255,.06);color:#fff}
  .sb-item .ce{font-size:10.5px;color:#9db4d8;margin-top:2px}

  /* ---------- Tracker dashboard KPIs ---------- */
  .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px}
  /* KPI banners marked .kpi-click double as quick-filter buttons. Cursor +
     subtle hover lift signals interactivity without redesigning the card.
     .kpi-active styles the currently-filtered banner so the agent can see
     at a glance which bucket the table is showing. */
  /* Four-banner quick-filter row above the quote list. Mirrors the tracker
     KPI grid styling but caps at 4 columns and tightens vertical rhythm so it
     sits cleanly between the card header and the search toolbar. Collapses
     to 2 cols on tablets and 1 col on phones. */
  .quote-kpi-banners{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
  @media (max-width:1000px){
    .quote-kpi-banners{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:560px){
    .quote-kpi-banners{grid-template-columns:1fr}
  }
  .kpi.kpi-click{cursor:pointer;transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease}
  .kpi.kpi-click:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(20,87,196,.12);border-color:var(--royal)}
  .kpi.kpi-active{box-shadow:0 0 0 2px var(--royal) inset;background:#eef4ff}
  .kpi.kpi-active.ok{background:#e7f6ec;box-shadow:0 0 0 2px #2f9e4a inset}
  .kpi.kpi-active.alert{background:#fdecec;box-shadow:0 0 0 2px var(--warn) inset}
  /* Tracker dashboard: nine KPIs in TWO rows — 5 on top, 4 below. To make
     both rows fill the same full width with no gaps, we use a 20-column
     base grid (LCM of 4 and 5). The first 5 cards span 4 columns each
     (5 x 4 = 20), the next 4 cards span 5 columns each (4 x 5 = 20). Every
     card in a row is identical width; both rows are the same total width;
     nothing left orphaned. Drops to 3 / 2 / 1 columns on narrower screens
     so the layout stays balanced down to mobile. */
  #trackerView .kpi-grid{grid-template-columns:repeat(20,minmax(0,1fr));gap:12px}
  #trackerView .kpi-grid > .kpi:nth-child(-n+5){grid-column:span 4}
  #trackerView .kpi-grid > .kpi:nth-child(n+6) {grid-column:span 5}
  @media (max-width:1100px){
    #trackerView .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    #trackerView .kpi-grid > .kpi:nth-child(-n+5),
    #trackerView .kpi-grid > .kpi:nth-child(n+6){grid-column:auto}
  }
  @media (max-width:760px){
    #trackerView .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:480px){
    #trackerView .kpi-grid{grid-template-columns:1fr}
  }
  .kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:flex-start;min-height:78px}
  .kpi .lbl{font-size:10.5px;color:var(--steel);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
  .kpi .val{font-size:22px;font-weight:800;color:var(--navy);margin-top:4px;line-height:1.1}
  .kpi.alert .val{color:var(--warn)}
  .kpi.ok .val{color:var(--ok)}
  .kpi .sub{font-size:10.5px;color:var(--steel);margin-top:2px}

  /* ---------- Status pills ---------- */
  .st{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.3px;padding:2px 8px;border-radius:99px;border:1px solid;text-transform:uppercase;line-height:1.5;white-space:nowrap}
  .st-prep   {background:#eef1f6;border-color:#cdd5e2;color:#465a82}
  .st-sent   {background:#e7f1ff;border-color:#b9d2f7;color:#1457c4}
  .st-await  {background:#fff8ec;border-color:#f0e0bf;color:#a07d24}
  .st-follow {background:#fef0e4;border-color:#f3c899;color:#a25b1f}
  .st-won    {background:#e7f5ee;border-color:#bfe3ce;color:#137a48}
  .st-lost   {background:#fde4e4;border-color:#e8a3a3;color:#a23b3b}
  .st-cancel {background:#f0f0f0;border-color:#cfcfcf;color:#666}

  /* ---------- Tracker filter bar + table ---------- */
  .tr-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:10px}
  .tr-toolbar .fld{min-width:140px;margin:0}
  .tr-toolbar .grow{flex:1;min-width:200px}
  .tr-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
  /* Sticky action column on the tracker table — always visible when scrolled. */
  table.tr-tbl th:last-child,
  table.tr-tbl td:last-child{
    position:sticky !important;
    right:0;
    background:#fff;
    box-shadow:-3px 0 6px -2px rgba(11,36,71,.08);
    z-index:2;
  }
  /* The header is BOTH top-sticky and right-sticky, with the top-stick from the
     general th rule. Bump its z-index above the body's right-sticky cells. */
  table.tr-tbl th:last-child{
    background:#f3f6fb;
    z-index:4;
    color:var(--navy);
    text-align:center;
    padding:8px 10px;
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.4px;
  }
  table.tr-tbl tr:hover td:last-child{background:#fbfcfe}
  /* Per-row action cell sits flush right with comfortable spacing. */
  table.tr-tbl td.tr-actions{padding:4px 8px;text-align:right;white-space:nowrap}
  /* Make the Quote ID column visibly clickable when linked to a saved quote. */
  table.tr-tbl td.qid-linked{cursor:pointer}
  table.tr-tbl td.qid-linked input{color:#0f3a7d;font-weight:700;cursor:pointer}
  table.tr-tbl td.qid-linked::before{content:"↗";color:#1457c4;font-weight:800;margin-right:4px}
  table.tr-tbl{border-collapse:collapse;width:100%;min-width:1280px;font-size:12px;table-layout:fixed}
  table.tr-tbl th{background:#f3f6fb;color:var(--navy);font-size:10px;text-transform:uppercase;letter-spacing:.3px;padding:5px 6px 5px 6px;text-align:left;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.tr-tbl th .resizer{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;user-select:none;z-index:3}
  table.tr-tbl th .resizer:hover,table.tr-tbl th .resizer.active{background:rgba(20,87,196,.25)}
  table.tr-tbl td{padding:2px 4px;border-bottom:1px solid var(--line-2);vertical-align:middle;overflow:hidden}
  table.tr-tbl tr:hover td{background:#fbfcfe}
  table.tr-tbl tr:hover td.manual{background:#fff5cc}
  table.tr-tbl input,table.tr-tbl select{padding:3px 5px;font-size:12px;border:1px solid transparent;background:transparent;border-radius:4px;width:100%;box-sizing:border-box}
  /* Date inputs have a built-in calendar picker that adds horizontal chrome;
     trim their internal padding a touch further so the date columns don't
     bloat the row. */
  table.tr-tbl input[type="date"]{padding:3px 3px;font-size:11.5px}
  table.tr-tbl input:hover,table.tr-tbl select:hover{border-color:var(--line);background:rgba(255,255,255,.6)}
  table.tr-tbl input:focus,table.tr-tbl select:focus{background:#fff;border-color:var(--royal);outline:none;box-shadow:0 0 0 2px rgba(20,87,196,.15)}
  table.tr-tbl .ro{padding:4px 6px;color:var(--steel);font-weight:600;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.tr-tbl .auto{background:#f3f6fb;color:var(--navy);font-weight:700}
  /* Manual-entry cells get a subtle pale-yellow tint so agents can tell at a glance
     which columns they're expected to fill in (matches the Excel template's intent). */
  table.tr-tbl .manual{background:#fffbe5}
  table.tr-tbl .row-x{height:28px;padding:0 8px;background:#fff;border:1px solid var(--line);color:var(--warn);border-radius:5px;cursor:pointer;font-weight:700;font-size:12px;width:auto}
  table.tr-tbl .row-x:hover{background:#fbeeee}
  body.col-resizing{cursor:col-resize !important;user-select:none}
  body.col-resizing *{cursor:col-resize !important;user-select:none !important}
  .tr-empty{padding:30px;text-align:center;color:var(--steel);font-style:italic}
  /* Cell fills used by the Next Action / Days Await coloring rules. Both
     paint the whole cell (background + text) so they're as obvious as Excel
     conditional formatting. .tr-late wins over the .auto blue-grey because it
     appears later in the stylesheet (same specificity). */
  .tr-late{background:#fde4e4 !important;color:#a23b3b;font-weight:800}
  .tr-yellow{background:#fff8d6 !important;color:#8a6a00;font-weight:800}
  .tr-amber{background:#fff4e6 !important;color:#a07d24;font-weight:700}
  .breakdown{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
  .breakdown .bk{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px}
  .breakdown .bk h3{font-size:12px;text-transform:uppercase;color:var(--steel);letter-spacing:.5px;margin:0 0 10px}
  .breakdown .bk .row{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:5px 0;border-bottom:1px solid var(--line-2);font-size:12.5px}
  .breakdown .bk .row:last-child{border-bottom:0}
  .breakdown .bk .row .n{color:var(--steel);font-variant-numeric:tabular-nums}
  .breakdown .bk .row .v{font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;min-width:90px;text-align:right}
  .sb-item .pill-row{margin-top:4px}

  /* ---------- Client standard charges (per shipment mode) ---------- */
  .std-charges-tabs{display:flex;gap:4px;background:var(--line-2);padding:3px;border-radius:8px;margin-bottom:12px}
  .std-tab{flex:1;text-align:center;padding:8px 10px;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;color:var(--steel);user-select:none}
  .std-tab.active{background:var(--navy);color:#fff}
  .std-tab:not(.active):hover{background:#fff}
  /* LG-only Standard Charges tab (Customs Clearance) — hidden for ACCO,
     shown when applyBrand stamps body.org-lg on sign-in. */
  .std-tab.lg-only-std-tab{display:none}
  body.org-lg .std-tab.lg-only-std-tab{display:block}
  .std-empty{padding:18px;text-align:center;color:var(--steel);font-style:italic;font-size:12.5px}

  /* Standard-charge named templates strip (client profile, Task #26).
     Sits under the mode tabs and shows the selected-template dropdown +
     New / Rename / Delete buttons. */
  .std-template-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#f3f6fb;border:1px solid var(--line);border-radius:7px;padding:8px 10px;margin-bottom:10px}
  .std-template-strip .sts-lbl{font-size:11px;font-weight:800;color:var(--steel);text-transform:uppercase;letter-spacing:.5px}
  .std-template-strip .sts-select{padding:6px 10px;font-size:12.5px;background:#fff;color:var(--navy);font-weight:700;border:1px solid var(--line);border-radius:6px;min-width:160px;cursor:pointer}
  .std-template-strip .sts-btn{padding:6px 10px;font-size:11.5px;font-weight:700;background:#fff;color:var(--navy);border:1px solid var(--line);border-radius:6px;cursor:pointer;white-space:nowrap}
  .std-template-strip .sts-btn:hover:not(:disabled){background:var(--line-2);border-color:var(--royal)}
  .std-template-strip .sts-btn:disabled{opacity:.4;cursor:not-allowed}
  .std-template-strip .sts-btn.sts-danger{color:var(--warn);border-color:#e8c5c0}
  .std-template-strip .sts-btn.sts-danger:hover:not(:disabled){background:#fbeeee;color:#a8261c}
  .std-template-strip .sts-hint{flex-basis:100%;font-size:10.5px;color:var(--steel);font-style:italic;letter-spacing:.2px}

  /* Inline picker banner on the quote form when the linked client has
     2+ templates for the current mode (Task #26). */
  .std-tpl-picker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff8ed;border:1px solid #f0c98b;border-left:4px solid #c97326;border-radius:7px;padding:10px 14px;margin-bottom:10px}
  .std-tpl-picker.hidden{display:none}
  .std-tpl-picker .stp-icon{font-size:16px}
  .std-tpl-picker .stp-msg{flex:1;font-size:12.5px;color:#8a4b00;font-weight:600;min-width:240px}
  .std-tpl-picker .stp-select{padding:6px 10px;font-size:13px;background:#fff;color:var(--navy);font-weight:700;border:1px solid #e5c587;border-radius:6px;min-width:160px;cursor:pointer}
  .std-tpl-picker .stp-apply{padding:7px 14px;font-size:12.5px;font-weight:800;background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:6px;cursor:pointer;text-transform:uppercase;letter-spacing:.3px}
  .std-tpl-picker .stp-apply:hover{background:#0a2a5e}
  .std-tpl-picker .stp-dismiss{padding:7px 12px;font-size:11.5px;font-weight:700;background:#fff;color:#8a4b00;border:1px solid #e5c587;border-radius:6px;cursor:pointer}
  .std-tpl-picker .stp-dismiss:hover{background:#fff3e0}

  /* ---------- Client autocomplete (in quote) ---------- */
  .cli-ac .it{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
  .cli-ac .it .nm{font-weight:700;color:var(--ink)}
  .cli-ac .it .ct{font-size:11px;color:var(--steel)}
  .cli-ac .add-new{padding:8px 10px;background:var(--line-2);border-top:1px solid var(--line);color:var(--navy);font-weight:700;font-size:12px;cursor:pointer;text-align:center}
  .cli-ac .add-new:hover{background:#e7ecf4}

  /* ---------- HAZMAT ---------- */
  .hazmat-row{display:flex;align-items:center;gap:14px;background:#fff4e6;border:1px solid #f3c899;padding:10px 14px;border-radius:8px;margin-top:12px}
  .hazmat-row label{display:flex;align-items:center;gap:8px;font-weight:700;color:#a23b3b;cursor:pointer;font-size:13px}
  .hazmat-row input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#a23b3b;margin:0}
  .hazmat-row .hint{margin-left:auto;color:#a23b3b;opacity:.8}
  /* HAZMAT aircraft eligibility — Air-only, shown when Hazmat is checked. */
  .hazmat-aircraft-row{background:#fff7e8;border:1px solid #f0c98b;border-radius:10px;padding:16px;margin-top:12px}
  .hae-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
  .hae-title{font-size:12.5px;font-weight:800;color:#8a4b00;letter-spacing:.5px;text-transform:uppercase}
  .hae-required{color:#a23b3b;margin-left:2px}
  .hae-hint{font-size:11.5px;color:#8a4b00;opacity:.85;font-weight:500;font-style:italic}
  .hae-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media (max-width:600px){ .hae-cards{grid-template-columns:1fr} }
  /* Shared card skeleton — per-option color comes from the variants below. */
  .hae-card{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:2px solid var(--hae-border,#dfe5ee);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s,transform .15s;user-select:none}
  .hae-card input[type=radio]{position:absolute;opacity:0;pointer-events:none}
  .hae-card-icon{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--hae-icon-bg,#f0f3f8);color:var(--hae-icon-fg,#5a6477);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;transition:background .15s,color .15s}
  .hae-card-body{flex:1;min-width:0}
  .hae-card-title{font-size:14.5px;font-weight:800;color:var(--hae-title,#1a2330);letter-spacing:.2px;line-height:1.2}
  .hae-card-sub{font-size:11.5px;color:var(--hae-sub,#5a6477);opacity:.85;margin-top:4px;font-weight:500;line-height:1.35}
  .hae-check{display:none;width:28px;height:28px;border-radius:50%;background:var(--hae-check-bg,#5a6477);color:#fff;font-size:15px;font-weight:900;align-items:center;justify-content:center;flex-shrink:0;line-height:1;box-shadow:0 2px 6px var(--hae-check-shadow,rgba(0,0,0,.18))}
  .hae-card:has(input:checked) .hae-check{display:flex}
  /* Cargo Aircraft Only — restrictive, amber-orange theme. */
  .hae-card.cargo-only{--hae-border:#f0c98b;--hae-icon-bg:#fff4e6;--hae-icon-fg:#a8521a;--hae-title:#8a4b00;--hae-sub:#8a4b00;--hae-check-bg:#c97326;--hae-check-shadow:rgba(201,115,38,.32)}
  .hae-card.cargo-only:hover{border-color:#c97326;background:#fff8ee;transform:translateY(-1px);box-shadow:0 4px 12px rgba(201,115,38,.15)}
  .hae-card.cargo-only:has(input:checked){border-color:#c97326;background:#fff4e0;box-shadow:0 4px 14px rgba(201,115,38,.25)}
  .hae-card.cargo-only:has(input:checked) .hae-card-icon{background:#c97326;color:#fff}
  /* Passenger Aircraft OK — less restrictive, green theme. */
  .hae-card.passenger-ok{--hae-border:#bfe2c5;--hae-icon-bg:#e9f6ec;--hae-icon-fg:#1f7a3a;--hae-title:#1a5a2a;--hae-sub:#1a5a2a;--hae-check-bg:#1f7a3a;--hae-check-shadow:rgba(31,122,58,.32)}
  .hae-card.passenger-ok:hover{border-color:#1f7a3a;background:#eef9f0;transform:translateY(-1px);box-shadow:0 4px 12px rgba(31,122,58,.15)}
  .hae-card.passenger-ok:has(input:checked){border-color:#1f7a3a;background:#e6f6e9;box-shadow:0 4px 14px rgba(31,122,58,.25)}
  .hae-card.passenger-ok:has(input:checked) .hae-card-icon{background:#1f7a3a;color:#fff}
  .insurance-row{display:flex;align-items:center;gap:14px;background:#eef3ff;border:1px solid #b9d2f7;padding:10px 14px;border-radius:8px;margin-top:8px;flex-wrap:wrap}
  .insurance-row label{display:flex;align-items:center;gap:8px;font-weight:700;color:#1457c4;cursor:pointer;font-size:13px}
  .insurance-row input[type=checkbox],.insurance-row input[type=radio]{width:17px;height:17px;cursor:pointer;accent-color:#1457c4;margin:0}
  .insurance-row .hint{margin-left:auto;color:#1457c4;opacity:.8}
  .insurance-row .lbl-strong{font-weight:800;color:#0f3a7d;letter-spacing:.3px}
  /* ---------- Insurance calc panel (in Services card) ---------- */
  .ins-calc-panel{background:#eef3ff;border:1px solid #b9d2f7;border-radius:8px;padding:14px;margin-top:14px}
  .ins-calc-panel h3{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:#1457c4;margin:0 0 6px;display:flex;align-items:center;gap:8px}
  .ins-calc-panel h3::after{content:"AUTO";font-size:9.5px;background:var(--royal);color:#fff;border-radius:4px;padding:2px 6px;letter-spacing:.4px;font-weight:700}
  .ins-calc-panel .formula{font-size:11px;color:#1457c4;font-weight:600;margin-bottom:10px}
  .ins-calc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
  .ins-calc-breakdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .ins-calc-breakdown .item{background:#fff;border:1px solid var(--line);border-radius:6px;padding:8px;text-align:center}
  .ins-calc-breakdown .item.final{background:var(--navy);color:#fff;border-color:var(--navy)}
  .ins-calc-breakdown .ilbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;opacity:.85}
  .ins-calc-breakdown .ival{font-size:15px;font-weight:800;margin-top:3px}
  .ins-override-status{margin-top:10px;background:#fff8d6;border:1px solid #f0e0bf;color:#8a6a00;border-radius:6px;padding:8px 12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .ins-override-status button{background:#fff;border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-weight:700;color:var(--navy);cursor:pointer;font-size:11.5px}
  .ins-override-status button:hover{background:var(--line-2)}
  .ins-prompt-line{margin-top:10px;font-size:12px;color:#1457c4;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .ins-prompt-line button{background:#fff;border:1px solid #b9d2f7;border-radius:6px;padding:6px 10px;font-weight:700;color:#1457c4;cursor:pointer;font-size:11.5px}
  /* Insurance PAYABLE subsection (vendor cost) inside the insurance calc panel. */
  .ins-payable-wrap{margin-top:14px;padding-top:12px;border-top:1px dashed #b9d2f7}
  .ins-payable-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .ins-payable-title{font-size:13px;font-weight:800;color:#1457c4;text-transform:uppercase;letter-spacing:.5px}
  .ins-payable-title-row .hint{color:#1457c4;opacity:.8;font-weight:500;margin-left:auto}
  .ins-payable-result{margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px 12px;display:flex;gap:24px;flex-wrap:wrap;font-size:12.5px}
  .ins-payable-result b{color:var(--navy)}
  .ins-payable-result .pay{color:#a23b3b}

  /* Insurance badge on the customer PDF — same neutral pattern as HAZMAT. */
  .d-insurance{position:relative;display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.3px;padding:4px 10px;border-radius:5px;border:1px solid #cfcfcf;background:#f0f0f0;color:#555;overflow:hidden}
  .d-insurance.incl{border-color:#bfe3ce;background:#e7f5ee;color:#137a48;font-weight:700}
  /* Internal-only quote info card — visually distinct so agents know it never
     prints on the customer PDF. */
  .internal-card{background:#fffbe5;border-color:#f0e0bf}
  .internal-card h2{color:#8a6a00;display:flex;align-items:center;gap:8px}
  .internal-card h2::after{content:"INTERNAL ONLY";font-size:9.5px;background:var(--gold);color:#1a1300;border-radius:4px;padding:2px 6px;letter-spacing:.4px}
  .d-hazmat{margin:8px 0;background:#fdecec;border:1px solid #d29a9a;color:#a23b3b;border-radius:5px;padding:4px 10px;font-weight:600;letter-spacing:.3px;font-size:10.5px;display:inline-block}

  /* ---------- Per-container cargo block ---------- */
  /* overflow:visible lets the absolutely-positioned packaging dropdown panel
     extend below the container card on Ocean FCL quotes. The previous
     overflow:hidden clipped the panel until the first checkbox was ticked
     (Task #1, Sept 2026 — Michael's bug report). */
  .cont-block{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;background:#fbfcfe;overflow:visible}
  /* Container header: full-width banner with the container number + remove
     button. Cleaner than floating "Container 1" next to the inputs at the
     bottom of the cell. */
  .cont-block .ch-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#eaf0fb;border-bottom:1px solid var(--line);padding:8px 14px}
  .cont-block .ch-banner .ttl{font-weight:800;color:var(--navy);font-size:13px;letter-spacing:.4px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
  .cont-block .ch-banner .ttl::before{content:"📦";font-size:14px}
  .cont-block .ch-banner .row-x{border:1px solid #f5c2c2;background:#fff;color:#9b1c1c;border-radius:6px;padding:4px 10px;font-weight:700;font-size:12px;cursor:pointer}
  .cont-block .ch-banner .row-x:hover:not(:disabled){background:#fde8e8}
  .cont-block .ch{padding:12px 14px 0 14px}
  .cont-block .ch-fields{display:grid;grid-template-columns:1.4fr 110px 1fr;gap:10px}
  .cont-cargo{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
  .cont-cargo .sb-title{margin-bottom:6px}
  .cap-warn{margin-top:8px;background:#fde4e4;border:1px solid #e8a3a3;color:#a23b3b;border-radius:6px;padding:6px 10px;font-size:12px;font-weight:600}
  .cap-info{margin-top:6px;background:var(--line-2);border:1px solid var(--line);color:var(--navy);border-radius:6px;padding:6px 10px;font-size:11.5px;font-weight:600}

  /* ---------- Air chargeable weight ---------- */
  .air-calc{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
  .air-calc .ac{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px;text-align:center}
  .air-calc .ac.chg{background:var(--navy);color:#fff;border-color:var(--navy)}
  .air-calc .ac .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;opacity:.75;font-weight:700}
  .air-calc .ac .val{font-weight:800;font-size:17px;margin-top:4px}

  /* ---------- LCL chargeable basis (Ocean LCL only) ---------- */
  .lcl-calc{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
  .lcl-opt{cursor:pointer;position:relative;display:block}
  .lcl-opt input[type=radio]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
  .lcl-card{background:#fff;border:2px solid var(--line);border-radius:8px;padding:10px;text-align:center;transition:border-color .12s,background .12s,color .12s}
  .lcl-opt:hover .lcl-card{border-color:var(--royal)}
  .lcl-opt input[type=radio]:checked + .lcl-card{background:var(--navy);color:#fff;border-color:var(--navy)}
  .lcl-card .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;opacity:.85}
  .lcl-card .val{font-size:17px;font-weight:800;margin-top:4px}
  .lcl-card .pick{font-size:9.5px;letter-spacing:.4px;margin-top:6px;opacity:.7;text-transform:uppercase;font-weight:700}
  .lcl-opt input[type=radio]:checked + .lcl-card .pick{opacity:1}
  .lcl-opt input[type=radio]:checked + .lcl-card .pick::before{content:"✓ "}

  /* ---------- Autocomplete ---------- */
  .ac-wrap{position:relative}
  .ac-wrap .ac-clear{position:absolute;top:50%;right:8px;transform:translateY(-50%);border:none;background:transparent;color:var(--steel);font-size:18px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:50%;display:none}
  .ac-wrap .ac-clear:hover{background:var(--line-2);color:#a8261c}
  .ac-wrap.has-value .ac-clear{display:block}
  .ac-wrap.has-value > input{padding-right:32px}
  .ac-list{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:7px;box-shadow:0 6px 18px rgba(0,0,0,.10);max-height:240px;overflow-y:auto;z-index:30;margin-top:2px}
  .ac-list .it{padding:8px 10px;cursor:pointer;font-size:12.5px;border-bottom:1px solid var(--line-2);line-height:1.3}
  .ac-list .it:hover{background:var(--line-2)}
  .ac-list .it:last-child{border-bottom:0}
  .ac-list .ld{padding:8px 10px;font-size:12px;color:var(--steel);font-style:italic}

  /* ---------- Dual-company header on PDF ---------- */
  .d-head-2{border-bottom:3px solid var(--navy);padding-bottom:10px}
  .d-head-2 .row1{display:grid;grid-template-columns:1fr 1.7fr 1fr;gap:14px;align-items:center}
  .d-head-2 .l-blk{text-align:center}
  .d-head-2 .l-blk img{max-width:165px;max-height:72px;height:auto;display:block;margin:0 auto}
  .d-head-2 .l-blk .role{font-size:9px;color:var(--steel);text-transform:uppercase;letter-spacing:.6px;margin-top:4px;font-weight:700}
  .d-head-2 .l-blk .fmc{font-size:9.5px;color:var(--navy);font-weight:700;margin-top:1px}
  .d-head-2 .l-blk .aci-text{font-weight:800;color:var(--navy);font-size:13px;letter-spacing:.3px;line-height:1.15;border:1.5px solid var(--navy);border-radius:6px;padding:10px 8px;display:inline-block;min-width:150px}
  .d-head-2 .center{text-align:center;line-height:1.4}
  .d-head-2 .center .co{font-weight:800;color:var(--navy);font-size:14.5px;letter-spacing:.3px}
  .d-head-2 .center .ln{font-size:10.5px;color:#334}
  .d-head-2 .row2{display:flex;justify-content:flex-end;align-items:baseline;gap:14px;margin-top:8px;font-size:11px;color:#445}
  .d-head-2 .row2 .qno{font-size:17px;font-weight:800;color:var(--navy)}

  /* ---------- Per-container cargo on PDF ---------- */
  .d-cont-blk{border:1px solid var(--line);border-radius:6px;margin-top:4px;overflow:hidden;page-break-inside:avoid}
  .d-cont-blk .hd{position:relative;background:#f3f6fb;padding:6px 10px;font-weight:800;color:var(--navy);font-size:11.5px;letter-spacing:.3px}
  /* The fg() helper wraps both header halves in a single .bg-fg span — so
     the flex layout needs to live inside .bg-fg, not on .hd, otherwise the
     two halves run together ("…40' HQCommodity: Petroleum Products").
     Gap gives a minimum separation even when both halves are short. */
  .d-cont-blk .hd .bg-fg{display:flex;justify-content:space-between;align-items:baseline;gap:24px;width:100%}
  .d-cont-blk .bd{padding:8px 10px;font-size:11px;display:grid;grid-template-columns:1fr 1fr;gap:5px 14px}
  .d-cont-blk .bd .row{display:grid;grid-template-columns:110px 1fr;gap:6px}
  .d-cont-blk .bd .k{color:var(--steel);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.3px;padding-top:1px}

  /* ---------- Air chargeable weight on PDF ---------- */
  .d-air{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
  .d-air .ac{border:1px solid var(--line);border-radius:6px;padding:7px;text-align:center}
  .d-air .ac.chg{background:var(--navy);color:#fff;border-color:var(--navy)}
  .d-air .ac .lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;opacity:.8;font-weight:700}
  .d-air .ac .val{font-weight:800;font-size:14px;margin-top:2px}

  /* ---------- Print ---------- */
  @media print{
    /* Force every browser to honor the on-screen colors/backgrounds when
       saving as PDF. Without this, Chrome/Edge strip backgrounds by default
       and the quote prints washed-out. */
    *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;color-adjust:exact !important}
    /* margin:0 on @page tells Chrome/Edge to suppress the browser-injected
       headers (date/time) and footers (URL + page number). The user can still
       force them on in the print dialog, but the default for our output is
       clean. We then re-introduce the page margins inside .sheet via padding
       so content doesn't run edge-to-edge. */
    @page{size:Letter;margin:0}
    /* Body + html stay white in print so any "page background" the browser
       might show below short content is invisible (was showing as grey). */
    html,body{background:#fff !important;margin:0 !important;padding:0 !important}
    .app{display:none !important}
    .user-bar-top{display:none !important}
    .preview-bar{display:none !important}
    .preview-mode .doc-wrap{display:block !important;background:#fff !important;min-height:0 !important;padding:0 !important}
    .doc-wrap,.preview-mode .doc-wrap{min-height:0 !important;padding:0 !important;background:#fff !important}
    /* Sheet gets the margin back as inner padding (matches the 0.35in we
       used before via @page) and a min-height that fills the page so the
       white background covers any gap between content end and page bottom.
       Drop the flex layout so the browser can paginate naturally on
       multi-page quotes. */
    .sheet{box-shadow:none !important;margin:0 !important;width:auto !important;min-height:10.5in !important;padding:0.3in !important;display:block !important;background:#fff !important}
    .d-foot{margin-top:14px}
    .lines,table.d-lines tr,.d-info{page-break-inside:auto}
    .d-cont-blk,.d-air,.d-grand,.d-validity,.d-notes{page-break-inside:avoid}
  }

  /* ============ AUTH: login screen, user bar, modal, manage users ============ */
  /* Login screen: full-bleed building photo, with a navy gradient overlay
     so the white sign-in card stays readable in bright sun or at night. The
     photo file lives at ./login-building.jpg in the deployed site root —
     drop the building shot into the deploy/ folder before redeploying. */
  #loginScreen{position:fixed;inset:0;background:
      linear-gradient(135deg, rgba(11,36,71,.78) 0%, rgba(25,55,109,.65) 100%),
      url("./login-building.jpg") center/cover no-repeat,
      linear-gradient(135deg,#0b2447 0%,#19376d 100%);
    background-blend-mode:normal,normal,normal;
    display:none;align-items:center;justify-content:center;z-index:9000;padding:24px}
  #loginScreen.show{display:flex}
  .login-card{background:#fff;border-radius:14px;padding:34px 38px;width:100%;max-width:420px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
  .login-card h1{margin:0 0 6px 0;color:#0b2447;font-size:22px;letter-spacing:.3px}
  .login-card .sub{color:#5a6b85;font-size:13px;margin-bottom:22px}
  .login-card label{display:block;font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin:14px 0 6px}
  .login-card input{width:100%;padding:11px 12px;border:1px solid #d0d7e2;border-radius:8px;font-size:14px;background:#fbfcfe}
  .login-card input:focus{outline:none;border-color:#1f6feb;background:#fff}
  .login-card .err{display:none;background:#fde8e8;color:#9b1c1c;border:1px solid #f5c2c2;padding:10px 12px;border-radius:8px;margin-top:14px;font-size:13px}
  .login-card .err.show{display:block}
  .login-card .btn-login{margin-top:18px;width:100%;padding:12px;border:none;border-radius:8px;background:#0b2447;color:#fff;font-weight:700;font-size:14px;cursor:pointer;letter-spacing:.4px}
  .login-card .btn-login:hover{background:#19376d}
  .login-card .btn-ms-login{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:13px 14px;margin-top:8px;border:1px solid #2f2f2f;border-radius:8px;background:#2f2f2f;color:#fff;font-weight:600;font-size:14px;cursor:pointer;transition:background .12s,border-color .12s}
  .login-card .btn-ms-login:hover{background:#000;border-color:#000}
  .login-card .btn-ms-login:disabled{opacity:.6;cursor:wait}
  .login-card .btn-ms-login svg{width:20px;height:20px;flex-shrink:0}
  .login-card .seed-hint{margin-top:18px;padding:10px 12px;border:1px dashed #c8d0dc;background:#f7f9fc;border-radius:8px;font-size:11.5px;color:#5a6b85;line-height:1.5}
  .login-card .seed-hint b{color:#0b2447}

  /* User bar in main header */
  .user-bar{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--steel)}
  /* Fixed top-right user bar — primary placement (Phase A). */
  .user-bar-top{position:fixed;top:12px;right:18px;z-index:80;background:#fff;border:1px solid #dde3ee;border-radius:10px;padding:6px 10px 6px 14px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--steel);box-shadow:0 2px 10px rgba(11,36,71,.08);max-width:calc(100vw - 40px)}
  .user-bar-top .ub-info{display:flex;flex-direction:column;line-height:1.2;min-width:0;max-width:200px}
  .user-bar-top .ub-info .user-name{font-weight:700;color:var(--navy);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .user-bar-top .ub-info .ub-email{font-size:10.5px;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @media (max-width:760px){
    .user-bar-top .ub-info{max-width:120px}
    .user-bar-top .ub-info .ub-email{display:none}
  }
  .user-bar .user-name{font-weight:700;color:var(--navy)}
  .role-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.6px;padding:3px 8px;border-radius:999px;text-transform:uppercase}
  .role-badge.admin{background:#fde9c8;color:#8a4b00;border:1px solid #f0c98b}
  .role-badge.viewer{background:#e5d6f0;color:#5a2c91;border:1px solid #cab1e0}
  .role-badge.agent{background:#dceefc;color:#1457c4;border:1px solid #b9d2f7}
  .user-bar .btn-thin{padding:5px 11px;font-size:12px;border-radius:6px;cursor:pointer;border:1px solid #cfd6e2;background:#fff;color:var(--navy)}
  .user-bar .btn-thin:hover{background:#f5f7fb}

  /* Modal (password change + manage users dialogs) */
  .modal-bg{position:fixed;inset:0;background:rgba(11,36,71,.45);display:none;align-items:center;justify-content:center;z-index:8500;padding:24px}
  .modal-bg.show{display:flex}
  .modal-card{background:#fff;border-radius:12px;padding:26px 30px;width:100%;max-width:480px;box-shadow:0 14px 40px rgba(0,0,0,.3)}
  .modal-card h2{margin:0 0 6px 0;color:var(--navy);font-size:18px}
  .modal-card .sub{color:#5a6b85;font-size:13px;margin-bottom:16px}
  .modal-card label{display:block;font-size:12px;font-weight:700;color:#374151;margin:10px 0 5px}
  .modal-card input,.modal-card select{width:100%;padding:9px 11px;border:1px solid #d0d7e2;border-radius:7px;font-size:14px;background:#fbfcfe}
  .modal-card .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
  .modal-card .err{display:none;background:#fde8e8;color:#9b1c1c;border:1px solid #f5c2c2;padding:9px 11px;border-radius:7px;margin-top:10px;font-size:13px}
  .modal-card .err.show{display:block}

  /* Manage users panel */
  #usersView .users-table{width:100%;border-collapse:collapse;margin-top:8px}
  #usersView .users-table th{font-size:11px;text-transform:uppercase;color:var(--steel);text-align:left;padding:8px;border-bottom:1px solid var(--line)}
  #usersView .users-table td{padding:8px;border-bottom:1px solid var(--line-2);font-size:13px;vertical-align:middle}
  #usersView .users-table .u-inactive{opacity:.55}
  #usersView .user-actions{display:flex;gap:6px;flex-wrap:wrap}
  #usersView .btn-mini{padding:4px 9px;font-size:11px;border-radius:6px;cursor:pointer;border:1px solid #cfd6e2;background:#fff;color:var(--navy)}
  #usersView .btn-mini.danger{border-color:#f5c2c2;color:#9b1c1c}
  #usersView .btn-mini:hover{background:#f5f7fb}

  /* ============ HOME / DASHBOARD ============ */
  .home-hero{position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#0b2447 0%,#19376d 55%,#3d6cb2 100%);min-height:200px;display:flex;align-items:flex-end;padding:28px 32px;margin-bottom:22px;box-shadow:0 4px 16px rgba(11,36,71,.18)}
  .home-hero.has-image{background-size:cover;background-position:center 40%}
  .home-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,36,71,.15) 0%,rgba(11,36,71,.65) 100%);z-index:1}
  .home-hero-content{position:relative;z-index:2;color:#fff;max-width:760px}
  .home-hero-eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;opacity:.85;margin-bottom:6px}
  .home-hero-title{font-size:28px;font-weight:800;margin:0 0 4px 0;letter-spacing:.3px;text-shadow:0 2px 6px rgba(0,0,0,.3)}
  .home-hero-sub{font-size:13.5px;opacity:.92;letter-spacing:.2px}

  .home-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:22px}
  @media (max-width:1100px){ .home-kpis{grid-template-columns:repeat(3,1fr)} }
  @media (max-width:600px){ .home-kpis{grid-template-columns:repeat(2,1fr)} }
  .home-kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
  .home-kpi::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--brand,#1f6feb)}
  .home-kpi.k-open::before{background:#1f6feb}
  .home-kpi.k-sent::before{background:#3b82f6}
  .home-kpi.k-won::before{background:#16a34a}
  .home-kpi.k-lost::before{background:#dc2626}
  .home-kpi.k-followup::before{background:#d97706}
  .home-kpi.k-total::before{background:var(--gold,#c79a3a)}
  .home-kpi .k-lbl{font-size:11px;font-weight:700;color:var(--steel);text-transform:uppercase;letter-spacing:.6px}
  .home-kpi .k-val{font-size:24px;font-weight:800;color:var(--navy);line-height:1.1}
  .home-kpi .k-sub{font-size:11px;color:var(--steel)}

  .home-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
  @media (max-width:900px){ .home-row{grid-template-columns:1fr} }

  .home-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:16px}
  .home-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px}
  .home-card-head h2{margin:0;font-size:15px;color:var(--navy);letter-spacing:.2px}
  .home-list .h-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13px;cursor:pointer}
  .home-list .h-row:last-child{border-bottom:none}
  .home-list .h-row:hover{background:#f7f9fc;border-radius:6px;padding-left:6px;padding-right:6px}
  .home-list .h-main{display:flex;flex-direction:column;min-width:0;flex:1}
  .home-list .h-title{font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .home-list .h-meta{font-size:11.5px;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .home-list .h-side{font-size:12px;color:var(--navy);font-weight:600;text-align:right;white-space:nowrap}
  .home-list .h-empty{padding:14px;color:var(--steel);font-style:italic;font-size:13px;text-align:center}
  .home-list .followup-pill{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:6px}
  .home-list .followup-pill.overdue{background:#fde8e8;color:#9b1c1c}
  .home-list .followup-pill.soon{background:#fef3c7;color:#92400e}
  .home-list .followup-pill.future{background:#dcfce7;color:#166534}

  /* Packaging type picker — a dropdown-style multi-select. The button shows
     the current selection summary; clicking opens a checkbox panel. */
  .pkg-picker{position:relative;margin-bottom:14px}
  .pkg-picker-lbl{display:block;font-size:11px;font-weight:700;color:var(--steel);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
  .pkg-picker-select{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--steel);font-weight:500;transition:border-color .12s}
  .pkg-picker-select:hover{border-color:var(--brand,#1f6feb)}
  .pkg-picker-select.has-selection{color:var(--navy);font-weight:700}
  .pkg-picker-select.is-open{border-color:var(--brand,#1f6feb);box-shadow:0 0 0 3px rgba(31,111,235,.12)}
  .pkg-picker-chevron{color:var(--steel);font-size:14px;transition:transform .15s}
  .pkg-picker-select.is-open .pkg-picker-chevron{transform:rotate(180deg)}
  .pkg-picker-panel{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:8px;margin-top:4px;padding:6px;max-height:340px;overflow-y:auto;z-index:30;box-shadow:0 8px 24px rgba(11,36,71,.12)}
  .pkg-picker-panel label{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--navy);font-weight:600}
  .pkg-picker-panel label:hover{background:#f5f9ff}
  .pkg-picker-panel input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand,#1f6feb);cursor:pointer;flex-shrink:0;margin:0}
  .pkg-picker-panel .pkg-other-btn{display:block;width:100%;text-align:left;padding:9px 12px;border:1px dashed var(--brand,#1f6feb);border-radius:6px;background:#fff;color:var(--brand,#1f6feb);cursor:pointer;font-weight:700;margin-top:6px;font-size:13px}
  .pkg-picker-panel .pkg-other-btn:hover{background:#f5f9ff}
  .pkg-picker-section{padding:6px 12px 4px;font-size:10.5px;font-weight:700;color:var(--steel);text-transform:uppercase;letter-spacing:.5px;border-top:1px solid var(--line-2);margin-top:4px}

  /* Package totals validation banner — red when group sums don't match. */
  .pkg-totals-banner{margin-top:10px;padding:10px 14px;border-radius:8px;font-size:13px;font-weight:600;line-height:1.45;background:#fde8e8;border:1px solid #f5c2c2;color:#9b1c1c}
  .pkg-totals-banner.ok{background:#e7f5ee;border-color:#bfe3ce;color:#137a48}
  .pkg-totals-banner b{font-weight:800}

  /* Per-package-type group cards */
  .pkg-group{background:#fbfcfe;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-top:10px;position:relative}
  .pkg-group .pg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:10px;flex-wrap:wrap}
  .pkg-group .pg-ttl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:800;color:var(--navy);letter-spacing:.2px}
  .pkg-group .pg-ttl .pg-type-badge{display:inline-block;padding:3px 9px;background:#1457c4;color:#fff;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
  /* "Change type" inline select — lets the agent rename a group's packaging
     type without losing the dims, weights, and piece counts already entered. */
  .pkg-group .pg-change-type{padding:4px 8px;font-size:11px;border:1px solid var(--line);background:#fbfcfe;color:var(--steel);border-radius:6px;font-weight:600;cursor:pointer;max-width:180px}
  .pkg-group .pg-change-type:hover{border-color:var(--royal,#1457c4);color:var(--royal,#1457c4)}
  .pkg-group .pg-change-type:focus{outline:2px solid rgba(20,87,196,.25);border-color:var(--royal,#1457c4)}
  .pkg-group .pg-remove{padding:5px 10px;font-size:11px;border:1px solid #f5c2c2;background:#fff;color:#9b1c1c;border-radius:6px;cursor:pointer;font-weight:700}
  .pkg-group .pg-remove:hover{background:#fde8e8}
  .pkg-group .pg-dim-head{font-size:11px;color:var(--steel);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin:12px 0 6px}
  .pkg-picker-empty{padding:14px;text-align:center;color:var(--steel);font-style:italic;font-size:13px;background:#fbfcfe;border:1px dashed var(--line);border-radius:10px;margin-top:10px}

  /* Labeled "Back to list" button — sits left-most in the form topbar actions */
  .btn-back-list{background:#fff;color:var(--navy);border:1px solid var(--line);padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:700;font-size:13px}
  .btn-back-list:hover{background:#f5f9ff;border-color:var(--brand,#1f6feb)}

  /* Multi-select service picker (checkbox list) */
  #svcPickerList label{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:13px}
  #svcPickerList label:hover{background:#f5f9ff}
  #svcPickerList input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand,#1f6feb);cursor:pointer;flex-shrink:0}
  #svcPickerList .picker-section{font-size:10.5px;font-weight:700;color:var(--steel);text-transform:uppercase;letter-spacing:.6px;padding:8px 10px 4px}

  /* Tracker row → quote navigation buttons */
  .tr-actions{white-space:nowrap;text-align:right;padding-right:8px !important}
  .btn-link-quote{background:#dceefc;color:#0f3a7d;border:1px solid #b9d2f7;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:6px;cursor:pointer;margin-right:4px;letter-spacing:.2px;white-space:nowrap}
  .btn-link-quote:hover{background:#b9d2f7;color:#0a2a5e}
  .btn-new-quote-tr{background:#fff;color:var(--navy);border:1px dashed #cfd6e2;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:6px;cursor:pointer;margin-right:4px;white-space:nowrap}
  .btn-new-quote-tr:hover{background:#f5f9ff;border-color:var(--brand,#1f6feb)}

  /* View-only mode: lock all inputs/buttons inside cards. Edit/Save/Delete
     buttons in the form topbar are toggled via .edit-only / .view-only classes
     so the right ones show for the current mode. */
  .view-mode .card input,
  .view-mode .card select,
  .view-mode .card textarea,
  .view-mode .card button,
  .view-mode .card .mode-pill,
  .view-mode .card .drag-handle,
  .view-mode .card .std-tab,
  .view-mode .card .row-x,
  .view-mode .card .pkg-picker-select,
  .view-mode .card .pkg-picker-panel{ pointer-events:none }
  .view-mode .card .pkg-picker-panel{ opacity:.5 }
  .view-mode .card input,
  .view-mode .card select,
  .view-mode .card textarea{
    background-color:#f7f9fc !important;
    border-color:#e3e8f0 !important;
    color:#3b4a5e
  }
  .view-mode .card input[readonly], .view-mode .card input:disabled{ background-color:#eef2f7 !important }
  .view-mode .card button.add-row, .view-mode .card button.row-x, .view-mode .card .drag-handle{ opacity:.35 }
  .view-mode .view-only-banner{display:flex}
  .view-only-banner{display:none;align-items:center;gap:10px;background:#fef3c7;border:1px solid #f0c98b;color:#8a4b00;padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:13px;font-weight:600}
  .view-only-banner .vob-lbl{flex:1}
  /* Toggle Save/Delete/Cancel vs Edit by mode */
  #quoteFormPanel .edit-only, #clientFormPanel .edit-only{display:inline-block}
  #quoteFormPanel.view-mode .edit-only, #clientFormPanel.view-mode .edit-only{display:none}
  /* View-only admin (role-viewer): hide every write affordance. The user
     can still browse the entire app and switch the View-as filter, but no
     save/edit/delete/new button is visible. RLS on Supabase blocks writes
     server-side too — this is the UX layer. */
  body.role-viewer #sbNewBtn,
  body.role-viewer #quoteFormPanel .view-only,
  body.role-viewer #clientFormPanel .view-only,
  body.role-viewer #quoteFormPanel .edit-only,
  body.role-viewer #clientFormPanel .edit-only,
  body.role-viewer .btn-danger,
  body.role-viewer #quoteListPanel .topbar .btn-primary,
  body.role-viewer #clientListPanel .topbar .btn-primary,
  body.role-viewer #trackerView .topbar .btn-primary,
  body.role-viewer #usersView .btn-mini,
  body.role-viewer .row-x,
  body.role-viewer .add-row{display:none !important}
  /* Viewer-mode read-only banner so it's obvious you can't edit. */
  body.role-viewer #quoteFormPanel .view-only-banner .vob-lbl::after,
  body.role-viewer #clientFormPanel .view-only-banner .vob-lbl::after{content:" — view-only admin"}
  #quoteFormPanel .view-only, #clientFormPanel .view-only{display:none}
  #quoteFormPanel.view-mode .view-only, #clientFormPanel.view-mode .view-only{display:inline-block}

  /* List panels for Quotes / Clients tabs */
  .topbar .title-row{display:flex;align-items:center;gap:10px;min-width:0}
  .btn-back{padding:6px 11px;font-size:16px;line-height:1;font-weight:700}
  .list-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
  .list-search{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:#fbfcfe}
  .list-search:focus{outline:none;border-color:var(--brand,#1f6feb);background:#fff}
  .list-table-wrap{overflow-x:auto}
  .list-table{width:100%;border-collapse:collapse;font-size:13px}
  .list-table th{font-size:11px;text-transform:uppercase;color:var(--steel);text-align:left;padding:10px 10px;border-bottom:1px solid var(--line);font-weight:700;letter-spacing:.4px;white-space:nowrap}
  .list-table th.r{text-align:right}
  .list-table td{padding:11px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
  .list-table td.r{text-align:right;font-weight:700;color:var(--navy)}
  .list-table tr.lt-row{cursor:pointer;transition:background .1s}
  .list-table tr.lt-row:hover{background:#f5f9ff}
  .list-table tr.lt-row td:first-child{font-weight:700;color:var(--navy)}
  .list-table .lt-empty{padding:24px;text-align:center;color:var(--steel);font-style:italic}
  .list-table .th-owner,.list-table .td-owner{display:none}
  .list-table.show-owner .th-owner,.list-table.show-owner .td-owner{display:table-cell}
  .list-table th.th-actions{text-align:right;white-space:nowrap}
  .list-table td.lt-actions{text-align:right;white-space:nowrap;width:1%}
  .list-table td.lt-actions .lt-act{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:#fff;color:var(--navy);font-weight:700;font-size:12px;padding:6px 10px;border-radius:6px;cursor:pointer;margin-left:6px;transition:background .12s,border-color .12s,color .12s}
  .list-table td.lt-actions .lt-act:hover{background:#f5f9ff;border-color:var(--brand,#1f6feb);color:var(--brand,#1f6feb)}
  .list-table td.lt-actions .lt-act.lt-del{color:#a8261c}
  .list-table td.lt-actions .lt-act.lt-del:hover{background:#fdecea;border-color:#a8261c;color:#a8261c}
  /* Expiring-in pill: red 0-7 days, yellow 8-14, green 15+, gray when no
     validUntil is set. Color drives at-a-glance prioritization in the
     quote list — the sort puts soonest expirations at the top. */
  .list-table .lt-exp{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.2px;padding:4px 9px;border-radius:999px;white-space:nowrap;text-transform:uppercase}
  .list-table .lt-exp-red   {background:#fde2e1;color:#9b1c1c;border:1px solid #f3b5b3}
  .list-table .lt-exp-yellow{background:#fef3c7;color:#8a4b00;border:1px solid #f0d28b}
  .list-table .lt-exp-green {background:#dcfce7;color:#166534;border:1px solid #a7eabd}
  .list-table .lt-exp-none  {background:#eef1f6;color:#5a6b85;border:1px solid #d8dde6}
  /* Bulk-export protection for non-admin agents — disable text selection on
     the client list (only on Clients, not Quotes) so a click-and-drag can't
     scoop up the whole address book. Buttons + Action column stay clickable.
     The real protection is server-side RLS (agents only ever load their own
     clients); this is a defense-in-depth UX nudge against casual exports. */
  body.role-agent #clientListBody td:not(.lt-actions){
    user-select:none;-webkit-user-select:none;-ms-user-select:none;
  }
  body.role-agent #clientListBody td:not(.lt-actions) *{
    user-select:none;-webkit-user-select:none;-ms-user-select:none;
  }

  /* Welcome banner on quotes view */
  .welcome-banner{background:linear-gradient(135deg,#eef3ff 0%,#dceefc 100%);border:1px solid #b9d2f7;border-radius:10px;padding:12px 14px;margin-bottom:14px}
  .welcome-banner .wb-title{font-size:13px;font-weight:700;color:#0b2447}
  .welcome-banner .wb-stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;font-size:12px;color:#1457c4}
  .welcome-banner .wb-stats b{color:#0b2447}

  /* Owner column + "View as" admin filter */
  .owner-filter{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fdf4dc;border:1px solid #f0c98b;border-radius:8px;margin-bottom:10px;font-size:12px;color:#8a4b00}
  .owner-filter select{padding:4px 8px;border:1px solid #d8b87b;border-radius:6px;background:#fff;font-size:12px}
  .sb-item .owner-tag{display:inline-block;font-size:10px;color:#5a6b85;margin-top:2px;font-style:italic}

  /* ============ QUOTE STATUS BAR (in quote editor) ============
     Sits between the topbar and the Shipment mode card. Shows the current
     status pill in view mode; swaps to a dropdown + optional notes field
     in edit mode. Reuses the .st-* pill palette already used by the tracker. */
  .quote-status-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fbfcfe;border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:14px}
  .quote-status-bar .qs-label{font-size:11px;font-weight:700;color:var(--steel);text-transform:uppercase;letter-spacing:.5px}
  .quote-status-bar .qs-pill{font-size:11px;font-weight:800;letter-spacing:.3px;padding:4px 12px;border-radius:99px;border:1px solid;text-transform:uppercase;line-height:1.5}
  .quote-status-bar select{padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:13px;font-weight:600;color:var(--navy);min-width:180px;cursor:pointer}
  .quote-status-bar select:focus{outline:2px solid rgba(20,87,196,.25);border-color:var(--royal)}
  .quote-status-bar .qs-changed{font-size:11px;color:var(--steel);font-style:italic;margin-left:auto}
  /* Won/Lost notes textarea — appears below the dropdown row when relevant. */
  .quote-status-bar .qs-notes-wrap{flex-basis:100%;display:none}
  .quote-status-bar .qs-notes-wrap.show{display:block}
  .quote-status-bar .qs-notes-wrap label{display:block;font-size:11px;font-weight:700;color:var(--steel);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
  .quote-status-bar .qs-notes-wrap textarea{width:100%;min-height:54px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-family:inherit;font-size:13px;background:#fff;resize:vertical}
  /* View mode: hide the select, show the pill. Edit mode: opposite. */
  #quoteFormPanel.view-mode .quote-status-bar select{display:none}
  #quoteFormPanel:not(.view-mode) .quote-status-bar .qs-pill{display:none}
  /* Notes never editable in view mode — but in view mode the pill carries the
     status, and notes if any are shown as static text below it. */
  #quoteFormPanel.view-mode .quote-status-bar .qs-notes-wrap textarea{background:#f7f9fc;border-color:#e3e8f0;color:#3b4a5e;pointer-events:none}

  /* Status filter dropdown on the quote list toolbar. */
  .list-toolbar .qs-filter{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--steel);font-weight:600}
  .list-toolbar .qs-filter select{padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:#fbfcfe;font-size:13px;color:var(--navy);font-weight:600;cursor:pointer;min-width:160px}
  .list-toolbar .qs-filter select:focus{outline:none;border-color:var(--brand,#1f6feb);background:#fff}

  /* ============ HOME ACTION CARDS (Phase 2 Feature 1) ============
     "What needs your attention" section — each card is a count + label that
     navigates to a filtered list when clicked. Color of the left bar matches
     urgency (red overdue, amber due-today, blue awaiting, etc.). */
  .home-actions-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:16px}
  .home-actions-card .home-card-head{margin-bottom:12px}
  .home-actions-card .ha-hint{font-size:11.5px;color:var(--steel);font-style:italic}
  .home-action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
  .home-action{background:#fbfcfe;border:1px solid var(--line);border-left:4px solid var(--brand,#1f6feb);border-radius:10px;padding:14px 16px;cursor:pointer;transition:background .12s,box-shadow .12s,transform .12s;position:relative}
  .home-action:hover{background:#fff;box-shadow:0 4px 12px rgba(11,36,71,.08);transform:translateY(-1px)}
  .home-action.disabled{cursor:default;opacity:.55}
  .home-action.disabled:hover{background:#fbfcfe;box-shadow:none;transform:none}
  .home-action .ha-count{font-size:28px;font-weight:800;color:var(--navy);line-height:1.05}
  .home-action .ha-label{font-size:12.5px;font-weight:700;color:var(--ink);text-transform:none;letter-spacing:.2px;margin-top:4px}
  .home-action .ha-sub{font-size:11px;color:var(--steel);margin-top:2px}
  .home-action .ha-arrow{position:absolute;top:14px;right:14px;font-size:13px;color:var(--steel);opacity:0;transition:opacity .12s,transform .12s}
  .home-action:not(.disabled):hover .ha-arrow{opacity:1;transform:translateX(2px)}
  /* Urgency variants — color the left bar + count text. */
  .home-action.ha-overdue   {border-left-color:#a23b3b}
  .home-action.ha-overdue .ha-count{color:#a23b3b}
  .home-action.ha-due-today {border-left-color:#c97326}
  .home-action.ha-due-today .ha-count{color:#a8521a}
  .home-action.ha-pending   {border-left-color:#5b7299}
  .home-action.ha-awaiting  {border-left-color:#1457c4}
  .home-action.ha-awaiting .ha-count{color:#1457c4}
  .home-action.ha-warning   {border-left-color:#a07d24;background:#fffbeb}
  .home-action.ha-warning .ha-count{color:#8a6a00}
  .home-action.ha-won       {border-left-color:#1f7a3a}
  .home-action.ha-won .ha-count{color:#137a48}
  .home-action.ha-lost      {border-left-color:#a23b3b}
  .home-action.ha-lost .ha-count{color:#a23b3b}
  /* All-clear empty state when every card is zero. */
  .home-actions-clear{padding:24px;text-align:center;color:var(--steel);font-style:italic;background:#f7fbf7;border:1px dashed #bfe3ce;border-radius:10px}
  .home-actions-clear b{color:#137a48;font-style:normal}

  /* Tracker linkage chip on the quote status bar (Phase 2 Feature 2). */
  .quote-status-bar .qs-tracker{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;letter-spacing:.2px;border:1px solid;cursor:default}
  .quote-status-bar .qs-tracker.linked{background:#e7f5ee;color:#137a48;border-color:#bfe3ce;cursor:pointer}
  .quote-status-bar .qs-tracker.linked:hover{background:#d6ecdf}
  .quote-status-bar .qs-tracker.unlinked{background:#fef3c7;color:#8a4b00;border-color:#f0c98b}

  /* Tracker row missing-field warnings (Phase 2 Feature 2). Tints the cell
     amber when a required-ish field (customer / service / amount) is blank
     so agents notice the gap without it blocking save. The manual class
     stays — this just stacks on top for the empty case. */
  table.tr-tbl .tr-missing{background:#fff4d6 !important;position:relative}
  table.tr-tbl .tr-missing input,
  table.tr-tbl .tr-missing select{background:transparent}
  table.tr-tbl .tr-missing::after{content:"⚠";position:absolute;top:4px;right:4px;font-size:10px;color:#a07d24;pointer-events:none}

  /* ============ ADVANCED FILTERS (Phase 2 Feature 5) ============
     Collapsible panel below the quote/client/tracker list toolbar. Shown via
     a "More filters ▾" toggle so the common case (text search + status) stays
     uncluttered. The .adv-grid lays out the inputs in a responsive grid. */
  .adv-toggle{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);border-radius:7px;background:#fbfcfe;font-size:12.5px;color:var(--navy);font-weight:600;cursor:pointer;white-space:nowrap}
  .adv-toggle:hover{background:#fff;border-color:var(--brand,#1f6feb)}
  .adv-toggle.active{background:#eef3ff;border-color:#b9d2f7;color:#1457c4}
  .adv-toggle .chev{transition:transform .15s}
  .adv-toggle.active .chev{transform:rotate(180deg)}
  .adv-toggle .badge{background:#1457c4;color:#fff;font-size:10px;font-weight:800;padding:1px 6px;border-radius:99px;margin-left:4px;letter-spacing:.2px}
  .adv-filters{background:#fbfcfe;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:12px}
  .adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
  .adv-grid .fld{margin:0}
  /* Range fields (two inputs + "to" separator) need more room than a single
     input — span two grid tracks so date pickers + their text don't truncate. */
  .adv-grid .fld-range{grid-column:span 2;min-width:0}
  @media (max-width:520px){ .adv-grid .fld-range{grid-column:span 1} }
  .adv-grid .fld span.lbl{font-size:11px;font-weight:700;color:var(--steel);text-transform:uppercase;letter-spacing:.4px}
  .adv-grid .fld input,.adv-grid .fld select{padding:7px 9px;font-size:12.5px}
  .adv-range{display:flex;gap:6px;align-items:center}
  .adv-range input{flex:1;min-width:0}
  .adv-range .dash{font-size:11px;color:var(--steel);font-weight:600;flex-shrink:0}
  .adv-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;align-items:center;flex-wrap:wrap}
  .adv-actions .adv-applied{font-size:11.5px;color:var(--steel);font-style:italic;margin-right:auto}
  .adv-reset{padding:8px 14px;border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer}
  .adv-reset:hover{background:var(--line-2);border-color:var(--steel)}

  /* ============ MISSING INFO BANNER (Phase 2 Feature 6) ============
     Advisory list of fields that LOOK empty / wrong but don't block save.
     Sits between the status bar and the Shipment mode card on the editor;
     toggles open on click of the summary row. Each list item is clickable to
     scroll the relevant input into view + flash it. */
  .missing-info-bar{background:#fffbeb;border:1px solid #f0d28b;border-radius:10px;margin-bottom:14px;overflow:hidden}
  .missing-info-bar.ok{background:#f0fbf3;border-color:#bfe3ce}
  .missing-info-bar .mi-summary{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;user-select:none;font-size:13px;font-weight:600;color:#8a4b00}
  .missing-info-bar.ok .mi-summary{color:#137a48;cursor:default}
  .missing-info-bar .mi-summary .mi-icon{font-size:15px;line-height:1}
  .missing-info-bar .mi-summary .mi-spacer{flex:1}
  .missing-info-bar .mi-summary .mi-chev{font-size:13px;transition:transform .15s}
  .missing-info-bar.open .mi-summary .mi-chev{transform:rotate(180deg)}
  .missing-info-bar .mi-list{display:none;border-top:1px solid #f0d28b;padding:8px 0;background:#fffefa}
  .missing-info-bar.open .mi-list{display:block}
  .missing-info-bar .mi-item{display:flex;align-items:center;gap:10px;padding:7px 18px;font-size:13px;color:#5a3a00;cursor:pointer;border-left:3px solid transparent}
  .missing-info-bar .mi-item:hover{background:#fff4d6;border-left-color:#c97326}
  .missing-info-bar .mi-item.severity-warning{color:#a07d24}
  .missing-info-bar .mi-item.severity-warning::before{content:"⚠";color:#a07d24;font-size:13px}
  .missing-info-bar .mi-item.severity-missing::before{content:"○";color:#c97326;font-size:14px;line-height:1}
  /* Briefly flash a field that the user clicked to. */
  .mi-flash{box-shadow:0 0 0 3px rgba(201,115,38,.35) !important;transition:box-shadow .25s}

  /* Status-column missing badge on the quote list. */
  .lt-mi-badge{display:inline-block;margin-left:6px;font-size:10px;font-weight:800;padding:2px 6px;border-radius:99px;background:#fef3c7;color:#8a4b00;border:1px solid #f0d28b;letter-spacing:.2px;vertical-align:middle}
  .lt-mi-badge::before{content:"⚠ ";font-size:9px}

  /* Pre-PDF "missing info" modal — Review / Proceed / Cancel buttons. */
  .mi-modal-list{max-height:280px;overflow-y:auto;background:#fffefa;border:1px solid #f0d28b;border-radius:7px;padding:6px 0;margin:14px 0}
  .mi-modal-list .mi-item{display:flex;align-items:center;gap:9px;padding:7px 14px;font-size:13px;color:#5a3a00;border-left:3px solid transparent}
  .mi-modal-list .mi-item.severity-warning{color:#a07d24}
  .mi-modal-list .mi-item.severity-warning::before{content:"⚠";color:#a07d24;font-size:13px}
  .mi-modal-list .mi-item.severity-missing::before{content:"○";color:#c97326;font-size:14px;line-height:1}
  .modal-card .modal-actions .btn-amber{background:#c97326;color:#fff;border:none;padding:9px 16px;border-radius:7px;font-weight:700;font-size:13px;cursor:pointer}
  .modal-card .modal-actions .btn-amber:hover{background:#a8521a}

  /* ============ CUSTOMER HISTORY PANEL (Phase 2 Feature 4) ============
     Lives at the bottom of the client profile card stack. Two sections:
     a stat tile grid up top, then a compact list of every quote tied to
     this client (newest first, clickable to open). */
  .client-history-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
  .ch-stat{background:#fbfcfe;border:1px solid var(--line);border-radius:8px;padding:10px 12px}
  .ch-stat-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--steel);font-weight:700}
  .ch-stat-val{font-size:20px;font-weight:800;color:var(--navy);margin-top:3px;line-height:1.1}
  .ch-stat-sub{font-size:10.5px;color:var(--steel);margin-top:2px}
  .ch-summary{background:#f7fbff;border:1px solid #dceefc;border-radius:8px;padding:10px 14px;margin-bottom:12px;display:flex;flex-direction:column;gap:6px;font-size:12.5px}
  .ch-summary-lbl{font-weight:700;color:#1457c4;font-size:11px;text-transform:uppercase;letter-spacing:.4px;margin-right:6px}
  .ch-pill{display:inline-block;background:#fff;border:1px solid #b9d2f7;color:#0f3a7d;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px;margin-right:5px;margin-top:2px}
  .ch-empty{padding:18px;text-align:center;color:var(--steel);font-style:italic;font-size:13px;background:#fbfcfe;border:1px dashed var(--line);border-radius:8px}
  .ch-table{width:100%;border-collapse:collapse;font-size:12.5px}
  .ch-table th{font-size:10.5px;text-transform:uppercase;color:var(--steel);text-align:left;padding:8px 8px;border-bottom:1px solid var(--line);font-weight:700;letter-spacing:.3px;white-space:nowrap}
  .ch-table th.r{text-align:right}
  .ch-table td{padding:8px 8px;border-bottom:1px solid var(--line-2);vertical-align:middle}
  .ch-table td.r{text-align:right;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
  .ch-table tr.ch-row{cursor:pointer;transition:background .1s}
  .ch-table tr.ch-row:hover{background:#f5f9ff}