/* ============================================================
   client_v2.css — Client Portal visual parity with the Admin Portal
   Phase 1 (2026-10-12): site-wide defaults. Loaded by partial/header.inc.php
   after custom.css / adminlte.css. Scoped to html.vf-client (set in the header).
   Tokens mirror the admin list pages: navy header #1a3a63, estimate blue
   #0062A6, invoice green #336633, button green #2f5e34, hover blue #0069d9.
   ============================================================ */
html.vf-client{
  --vf-navy:#1a3a63; --vf-blue:#0062A6; --vf-green:#336633; --vf-btn:#2f5e34; --vf-hover:#0069d9;
  --vf-bg:#f4f6f9; --vf-text:#1f2933; --vf-muted:#7c8a99; --vf-line:#e4e9ef; --vf-line2:#eceef0;
  --vf-card:#ffffff; --vf-radius:8px; --vf-shadow:0 1px 2px rgba(16,24,40,.06);
}

/* ---------- page canvas ---------- */
html.vf-client body{font-family:Roboto,"Segoe UI",Arial,sans-serif;color:var(--vf-text);}
html.vf-client .MainContainer.content-wrapper{background:var(--vf-bg);}
html.vf-client .ContentArea{padding-bottom:16px;}                 /* 16px above the grey footer */
html.vf-client .ContentHeader + .ContentArea{padding-top:16px;}   /* 16px under the blue band */
html.vf-client .ContentHeader h1{font-weight:700;letter-spacing:.01em;}

/* ---------- buttons: sentence case (vf-ui.js), green, blue hover ---------- */
html.vf-client .btn,
html.vf-client input[type="submit"].btn,
html.vf-client input[type="button"].btn,
html.vf-client button.btn{
  border-radius:6px;font-size:13px;font-weight:700;line-height:1;padding:0 14px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  text-transform:none;letter-spacing:0;border:0;box-shadow:none;transition:background-color .15s,color .15s;
}
html.vf-client .btn-success,html.vf-client .btn-primary,html.vf-client .btn-info,
html.vf-client .btn.SearchBtn,html.vf-client .btn.CreateBtn,html.vf-client .btn.btn-default:not(.btn-reset){
  background:var(--vf-btn);color:#fff;
}
html.vf-client .btn-success:hover,html.vf-client .btn-primary:hover,html.vf-client .btn-info:hover,
html.vf-client .btn-success:focus,html.vf-client .btn-primary:focus{
  background:var(--vf-hover);color:#fff;
}
html.vf-client .btn-secondary,html.vf-client .btn-danger,html.vf-client .btn.ResetBtn{background:#5b6672;color:#fff;}
html.vf-client .btn-secondary:hover,html.vf-client .btn-danger:hover{background:#3f4953;color:#fff;}
html.vf-client .btn-sm{height:28px;font-size:12px;padding:0 10px;}
html.vf-client .btn-lg{height:38px;font-size:14px;padding:0 18px;}
/* Export buttons bright blue, as in admin */
html.vf-client .vf-export,html.vf-client .btn[value^="Export" i]{background:#1a73e8 !important;color:#fff !important;}
html.vf-client .vf-export:hover{background:#1557b0 !important;}

/* ---------- forms ---------- */
html.vf-client .form-control,html.vf-client select.form-control,html.vf-client input.form-control{
  border:1px solid rgba(0,0,0,.15);border-radius:4px;font-size:14px;height:38px;background:#fff;color:var(--vf-text);box-shadow:none;
}
html.vf-client textarea.form-control{height:auto;}
html.vf-client .form-control:focus{border-color:#7fb0e6;box-shadow:0 0 0 3px rgba(26,115,232,.12);}
html.vf-client label,html.vf-client .col-form-label{font-size:13px;font-weight:600;color:#3b4654;}

/* ---------- tables (list pages, detail grids) ---------- */
html.vf-client .table{background:var(--vf-card);border-collapse:separate;border-spacing:0;font-size:13px;}
html.vf-client .table thead th,
html.vf-client .table .thead-dark th,
html.vf-client #ResortTable .table .thead-dark th,
html.vf-client #MDashTable.content .table .thead-dark th{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff;
  padding:11px 12px;border:0;border-bottom:1px solid rgba(255,255,255,.12);vertical-align:middle;white-space:nowrap;
}
/* keep the per-module header colour convention: estimates blue, invoices green, others navy */
html.vf-client .table thead th{background:var(--vf-navy) !important;}
html.vf-client .table.blue-striped thead th,html.vf-client .bluehead .table thead th{background:var(--vf-blue) !important;}
html.vf-client .table.green-striped thead th,html.vf-client .greenhead .table thead th{background:var(--vf-green) !important;}
html.vf-client .table tbody td,html.vf-client .table tbody th{
  padding:10px 12px;border:0;border-top:1px solid var(--vf-line2);color:var(--vf-text);background:#fff;vertical-align:middle;
}
/* no tan / green / blue stripes — white rows, soft hover */
html.vf-client .table-striped tbody tr:nth-of-type(odd),
html.vf-client .table-striped tbody tr:nth-of-type(odd) td,
html.vf-client #ResortTable .table-striped tbody tr:nth-of-type(2n+1),
html.vf-client .table.blue-striped tbody tr:nth-of-type(odd) td,
html.vf-client .table.green-striped tbody tr:nth-of-type(odd) td{background:#fff;}
html.vf-client .table tbody tr:hover td{background:var(--vf-bg);}
html.vf-client .table tbody td a{color:#0a5aa8;font-weight:600;text-decoration:none;}
html.vf-client .table tbody td a:hover{text-decoration:underline;}
html.vf-client .table tfoot td,html.vf-client .table tr.total td{font-weight:700;background:#f7f9fb;}
html.vf-client #ResortTable,html.vf-client #MDashTable,html.vf-client #ManagePrdTable,html.vf-client .content.table-responsive{
  background:var(--vf-card);border:1px solid var(--vf-line);border-radius:var(--vf-radius);box-shadow:var(--vf-shadow);overflow:auto;
}
html.vf-client #ResortTable .table,html.vf-client #MDashTable .table{margin-bottom:0;}
/* status colouring used by some rows (shipped = green row): keep as a soft tint */
html.vf-client .table tbody tr.shipped td,html.vf-client .table tbody tr.Shipped td{background:#e6f4ea;}

/* row action icons -> buttons look */
html.vf-client .table td .fa,html.vf-client .table td .fas,html.vf-client .table td img[onclick]{opacity:.85;}
html.vf-client .table td a .fa:hover{color:var(--vf-hover);}

/* ---------- cards ---------- */
html.vf-client .Card{background:var(--vf-card);border:1px solid var(--vf-line);border-radius:var(--vf-radius);box-shadow:var(--vf-shadow);overflow:hidden;margin-bottom:16px;}
html.vf-client .CardHeader,html.vf-client .Card .CardHeader{background:#fff;border-bottom:1px solid #eef1f4;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;}
html.vf-client .CardTitle,html.vf-client .Card .CardHeader h3.CardTitle{margin:0;font-size:14px;font-weight:700;color:var(--vf-text);text-transform:none;letter-spacing:0;padding-left:10px;border-left:3px solid var(--vf-navy);line-height:1.2;}
html.vf-client .Card .CardHeader h3.CardTitle.BlueLine{border-left-color:#0a5aa8;}
html.vf-client .Card .CardHeader h3.CardTitle.GreenLine{border-left-color:#1c7a43;}
html.vf-client .Card .CardHeader h3.CardTitle.RedLine{border-left-color:#c0392b;}
html.vf-client .CardBody{padding:16px;}
html.vf-client .CardMoreLink a{font-size:11px;font-weight:600;padding:5px 10px;border-radius:6px;background:#e3edfb;color:#0a5aa8;text-decoration:none;display:inline-block;}
html.vf-client .CardMoreLink a:hover{background:#d2e3f8;}

/* ---------- detail-page summary strip (Client | Invoice ID | Status) ---------- */
html.vf-client .CustomerInfoLine{
  background:#fff;color:var(--vf-text);border:1px solid var(--vf-line);border-left:4px solid var(--vf-blue);
  border-radius:var(--vf-radius);padding:12px 16px;font-size:13px;margin-bottom:16px;box-shadow:var(--vf-shadow);
}
html.vf-client .CustomerInfoLine strong{color:var(--vf-text);}
html.vf-client .greenhead ~ .CustomerInfoLine,html.vf-client body:has(.greenhead) .CustomerInfoLine{border-left-color:var(--vf-green);}
html.vf-client #InvoiceTable.content,html.vf-client #EstimateTable.content{
  background:var(--vf-card);border:1px solid var(--vf-line);border-radius:var(--vf-radius);box-shadow:var(--vf-shadow);overflow:auto;margin-bottom:16px;
}
html.vf-client #InvoiceTable .table,html.vf-client #EstimateTable .table{margin-bottom:0;}
/* the key/value grid on detail pages: label rows (tr.thead-light th) in light grey, values in white */
html.vf-client #InvoiceTable .table tr.thead-light th,html.vf-client #EstimateTable .table tr.thead-light th,
html.vf-client .table tbody tr.thead-light th{
  background:#f7f9fb;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--vf-muted);
  padding:8px 12px;border-top:1px solid var(--vf-line2);
}
/* header strips carry an inline colour (blue/green !important) - neutralise, keep colour as the left accent */
html.vf-client .CustomerInfoLine[style]{background:#fff !important;}
html.vf-client .CustomerInfoLine[style*="#689a69"],html.vf-client .CustomerInfoLine[style*="green"]{border-left-color:var(--vf-green);}

/* ---------- filter / action bar on list pages ---------- */
html.vf-client .MainDashboardFilter{margin:0 0 16px;padding:12px 16px;list-style:none;background:#fff;border:1px solid var(--vf-line);border-radius:var(--vf-radius);box-shadow:var(--vf-shadow);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end;}
html.vf-client .MainDashboardFilter li{margin:0;padding:0;float:none;}
html.vf-client .MainDashboardFilter .form-control{min-width:200px;height:34px;font-size:13px;}
html.vf-client .MainDashboardFilter .DashboardSearch input,html.vf-client .MainDashboardFilter input[type="text"]{
  height:34px;border:1px solid rgba(0,0,0,.15);border-radius:4px;padding:0 10px;font-size:13px;min-width:220px;
}
html.vf-client .search-category-btn,html.vf-client input.search-category-btn{
  background:var(--vf-btn);color:#fff;border:0;border-radius:6px;font-size:13px;font-weight:700;height:32px;padding:0 14px;
  text-transform:none;letter-spacing:0;cursor:pointer;transition:background-color .15s;
}
html.vf-client .search-category-btn:hover{background:var(--vf-hover);color:#fff;}
html.vf-client .search-category-btn[value="Reset" i]{background:#5b6672;}
html.vf-client .search-category-btn[value="Reset" i]:hover{background:#3f4953;}
html.vf-client .ContentArea > .container-fluid > .row:first-child form{margin:0 0 16px;}
html.vf-client .ContentArea > .container-fluid > .row:first-child .col-3 form .search-category-btn{height:34px;}
/* column toggles row (Lead Time / Payment Terms / ...) */
html.vf-client .ResortData{background:#fff;border:1px solid var(--vf-line);border-radius:var(--vf-radius);padding:10px 16px;margin:0 0 16px;list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;}
html.vf-client .ResortData li{margin:0;}

/* ---------- misc ---------- */
html.vf-client a{color:#0a5aa8;}
html.vf-client .checkbox label,html.vf-client .form-check-label{font-weight:500;}
html.vf-client .pagination .page-link{border-radius:6px;margin:0 2px;color:var(--vf-text);border-color:var(--vf-line);}
html.vf-client .pagination .active .page-link{background:var(--vf-navy);border-color:var(--vf-navy);color:#fff;}
html.vf-client .alert{border-radius:var(--vf-radius);}
html.vf-client .modal-content{border-radius:var(--vf-radius);}
html.vf-client .modal-header{background:#fff;border-bottom:1px solid var(--vf-line);}

/* ---------- form cards (profile, addresses, password, 2FA) ---------- */
html.vf-client .Card .CardBody form .form-group{margin-bottom:12px;}
html.vf-client .Card .CardBody .col-form-label{text-align:right;}
html.vf-client .required,html.vf-client span.required{color:#c0392b;}

/* ---------- client dashboard (admin v2 theme via body:has(.StaticValueBox)) ---------- */
html.vf-client body:has(.StaticValueBox) .ContentArea{padding-bottom:16px;}
html.vf-client body:has(.StaticValueBox) .StaticBox .value p{white-space:normal;overflow:visible;text-overflow:clip;}
html.vf-client .sb-v2 .EqualBox{min-width:160px;}
html.vf-client .StaticBox.BgShipment{--od-accent:#0e8a8a;}
html.vf-client .StaticBox.BgOverdue{--od-accent:#c0392b;}
@media (max-width:1399px){ html.vf-client .sb-v2 .col-lg-2{flex:0 0 33.333%;max-width:33.333%;} }
/* icons for the two client-only tiles (same 44px tinted square as the admin tiles) */
html.vf-client .InfoBoxTop.sb-v2 .BgShipment::before{background-color:#e3f4f4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20a2.4 2.4 0 0 0 2 1 2.4 2.4 0 0 0 2-1 2.4 2.4 0 0 1 2-1 2.4 2.4 0 0 1 2 1 2.4 2.4 0 0 0 2 1 2.4 2.4 0 0 0 2-1 2.4 2.4 0 0 1 2-1 2.4 2.4 0 0 1 2 1 2.4 2.4 0 0 0 2 1 2.4 2.4 0 0 0 2-1'/%3E%3Cpath d='M4 18 2 12h20l-2 6'/%3E%3Cpath d='M5 12V7h14v5'/%3E%3Cpath d='M10 7V4h4v3'/%3E%3C/svg%3E");}
html.vf-client .InfoBoxTop.sb-v2 .BgOverdue::before{background-color:#fdeaea;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");}
html.vf-client .InfoBoxTop.sb-v2 .StaticBox .icon{display:none;}

/* ---------- phase-1 follow-ups (after live review) ---------- */
/* no vertical cell borders (admin lists have none) */
html.vf-client .table-bordered td,html.vf-client .table-bordered th,
html.vf-client #ManagePrdTable .table-bordered td,html.vf-client #ResortTable .table-bordered td,
html.vf-client #ResortTable.content .table-bordered th,html.vf-client #InvoiceTable .table-bordered td,
html.vf-client #InvoiceTable .table-bordered th,html.vf-client #MDashTable .table-bordered td{border-left:0;border-right:0;}
/* create button row aligns with the filter bar */
html.vf-client .ContentArea > .container-fluid > .row:first-child{align-items:center;}
/* id-scoped header colours so the module colour wins over the generic navy */
html.vf-client #InvoiceTable .table .thead-dark th,html.vf-client #InvoiceTable.content .table .thead-dark th{background:var(--vf-navy) !important;}
html.vf-client #ResortTable.greenhead .table .thead-dark th,html.vf-client #ResortTable.greenhead .table thead th{background:var(--vf-green) !important;}
html.vf-client #ResortTable.bluehead .table .thead-dark th,html.vf-client #ResortTable.bluehead .table thead th{background:var(--vf-blue) !important;}
html.vf-client .CustomerInfoLine.vf-green{border-left-color:var(--vf-green);}
/* dark label bands on form cards (statement, landed cost...) -> light field labels */
html.vf-client .LabelTitle{background:#f7f9fb !important;color:var(--vf-muted) !important;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--vf-line2);}

/* ======================================================================
   Client dashboard redesign (2026-10-12) — cd-* components
   ====================================================================== */
html.vf-client .cd-area .container-fluid{display:flex;flex-direction:column;gap:8px;} /* VF 2026-10-15: card spacing matched to the admin dashboard (8px between rows, 14px between columns, 16px under the KPI tiles) */
html.vf-client .cd-area .Card.cd-card{margin:0 !important;}
html.vf-client .cd-muted{color:#6b7785;font-size:12px;}
html.vf-client .cd-red{color:#b42318 !important;}
html.vf-client .cd-pill{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;line-height:1.4;}
html.vf-client .cd-p-blue{background:#e3edfb;color:#0a5aa8;}html.vf-client .cd-p-green{background:#e6f4ea;color:#1c7a43;}html.vf-client .cd-p-amber{background:#fdf1e0;color:#9a5b0a;}html.vf-client .cd-p-red{background:#fdeaea;color:#b42318;}html.vf-client .cd-p-grey{background:#eef1f4;color:#4b5563;}
html.vf-client .cd-btn{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 14px;border-radius:6px;border:0;font-size:13px;font-weight:700;color:#fff !important;background:#2f5e34;text-decoration:none !important;white-space:nowrap;}
html.vf-client .cd-btn:hover{background:#0069d9;color:#fff;}
html.vf-client .cd-btn-ghost{background:#fff;color:#1f2933 !important;border:1px solid #d5dbe3;}
html.vf-client .cd-btn-ghost:hover{background:#f4f6f9;color:#1f2933 !important;}
/* VF 2026-10-15: client dashboard - light buttons (Statement, Download, Continue, Track shipment, Documents) use the landed-cost "+ Add Expense" style */
html.vf-client .cd-area .cd-btn-ghost{background:#e3f2fb;color:#0a6ea8 !important;border:1px solid #9ccbe6;border-radius:8px;font-weight:700;}
html.vf-client .cd-area .cd-btn-ghost:hover,html.vf-client .cd-area .cd-btn-ghost:focus-visible{background:#cfe7f7;border-color:#0a6ea8;color:#0a6ea8 !important;}
html.vf-client .cd-btn-sm{height:28px;padding:0 10px;}
html.vf-client .cd-empty{padding:18px;color:#6b7785;font-size:13px;}
html.vf-client .cd-more{padding:8px 18px 12px;font-size:12px;font-weight:600;}
/* grids */
html.vf-client .cd-grid-32{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);row-gap:8px;column-gap:14px;align-items:start;}
html.vf-client .cd-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px;column-gap:14px;}
html.vf-client .cd-grid-21{display:grid;grid-template-columns:minmax(0,calc((100% - 28px) * 2 / 3 + 14px)) minmax(0,calc((100% - 28px) / 3));row-gap:8px;column-gap:14px;}
html.vf-client .cd-col{display:flex;flex-direction:column;gap:8px;}
@media (max-width:1100px){html.vf-client .cd-grid-32,html.vf-client .cd-grid-21{grid-template-columns:minmax(0,1fr);}html.vf-client .cd-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:700px){html.vf-client .cd-grid-3{grid-template-columns:minmax(0,1fr);}}
/* KPI cards */
html.vf-client .cd-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:8px;}
@media (max-width:1100px){html.vf-client .cd-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}
html.vf-client .cd-kpi{display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:#fff;border:1px solid #e4e9ef;border-top:3px solid #0a6ea8;border-radius:10px;box-shadow:0 1px 2px rgba(16,24,40,.05);text-decoration:none !important;color:#1f2933 !important;transition:box-shadow .15s,transform .15s;}
html.vf-client .cd-kpi:hover{box-shadow:0 4px 12px rgba(16,24,40,.08);transform:translateY(-1px);}
html.vf-client .cd-kpi-blue{border-top-color:#0a6ea8;}html.vf-client .cd-kpi-green{border-top-color:#1c7a43;}html.vf-client .cd-kpi-amber{border-top-color:#c2760c;}html.vf-client .cd-kpi-red{border-top-color:#c0392b;}
html.vf-client .cd-kpi-l{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b7785;}
html.vf-client .cd-kpi-v{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:30px;font-weight:700;line-height:1;color:#1f2933;}
html.vf-client .cd-kpi-s{color:#6b7785;font-size:12px;}
html.vf-client .cd-kpi-link{font-size:12px;font-weight:600;color:#0a5aa8;margin-top:6px;}
/* pipeline */
html.vf-client .cd-stages{padding:18px 18px 6px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;}
@media (max-width:900px){html.vf-client .cd-stages{grid-template-columns:repeat(2,minmax(0,1fr));}}
html.vf-client .cd-stage{display:block;padding:14px 14px 12px;border-radius:8px;background:#f7f9fb;border:1px solid #e4e9ef;text-decoration:none !important;color:#1f2933 !important;transition:border-color .15s,background .15s;}
html.vf-client .cd-stage:hover{border-color:#9fb8d6;background:#f0f5fb;}
html.vf-client .cd-stage-on{background:#e6f4ea;border-color:#cfe6d6;}
html.vf-client .cd-stage-on:hover{background:#dcefe2;border-color:#9fcdb0;}
html.vf-client .cd-stage-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#6b7785;}
html.vf-client .cd-stage-on .cd-stage-l{color:#1c7a43;}
html.vf-client .cd-stage-v{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:24px;font-weight:700;margin-top:4px;}
html.vf-client .cd-stage-s{color:#6b7785;font-size:12px;}
html.vf-client .cd-bar{margin:8px 18px 16px;display:flex;height:8px;border-radius:4px;overflow:hidden;background:#eef1f4;}
/* to do */
html.vf-client .cd-sec{font-size:10.5px;font-weight:700;color:#7c8a99;text-transform:uppercase;letter-spacing:.05em;padding:12px 18px 4px;background:#fbfcfd;}
html.vf-client .cd-task{display:flex;gap:14px;padding:14px 18px;border-top:1px solid #eef1f4;align-items:flex-start;}
html.vf-client .cd-sec + .cd-task{border-top:0;}
html.vf-client .cd-ic{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
html.vf-client .cd-ic-blue{background:#e3edfb;color:#0a5aa8;}html.vf-client .cd-ic-red{background:#fdeaea;color:#b42318;}html.vf-client .cd-ic-green{background:#e6f4ea;color:#1c7a43;}html.vf-client .cd-ic-amber{background:#fdf1e0;color:#9a5b0a;}
html.vf-client .cd-task-b{flex:1;min-width:0;}
html.vf-client .cd-task-t{font-size:13px;font-weight:600;}
html.vf-client .cd-task-a{display:flex;gap:6px;flex-shrink:0;}
/* next shipment */
html.vf-client .cd-ns{padding:16px 18px;}
html.vf-client .cd-ns-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
html.vf-client .cd-ns-t{font-size:15px;font-weight:700;}
html.vf-client .cd-ns-d{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:22px;font-weight:700;color:#1c7a43;white-space:nowrap;}
html.vf-client .cd-steps{display:flex;align-items:flex-start;margin-top:18px;position:relative;}
html.vf-client .cd-steps-line{position:absolute;left:10%;right:10%;top:9px;height:2px;background:#e4e9ef;}
html.vf-client .cd-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;position:relative;min-width:0;}
html.vf-client .cd-dot{width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid #d5dbe3;box-sizing:content-box;}
html.vf-client .cd-step.done .cd-dot{background:#1c7a43;border-color:#cfe6d6;}
html.vf-client .cd-step.now .cd-dot{background:#0a6ea8;border-color:#cfe0f5;}
html.vf-client .cd-step-l{font-size:11px;font-weight:600;color:#1f2933;text-align:center;}
html.vf-client .cd-step-s{font-size:10.5px;color:#6b7785;text-align:center;}
html.vf-client .cd-ns-a{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap;}
/* lists */
html.vf-client .cd-list .cd-row{display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid #eef1f4;font-size:13px;}
html.vf-client .cd-list .cd-row:first-child{border-top:0;}
html.vf-client .cd-row-b{flex:1;min-width:0;}
html.vf-client .cd-row-b > a{font-weight:600;}
/* the hidden theme marker must not take space; keep admin-theme card listing rules happy */
html.vf-client .StaticValueBox[hidden]{display:none !important;}
html.vf-client body:has(.StaticValueBox) .cd-area .Card .CardHeader{padding:12px 16px;}
/* KPI tile icons (44px tinted square, top-right, same style as the admin tiles) */
html.vf-client .cd-kpi{position:relative;padding-right:76px;}
html.vf-client .cd-kpi::before{content:"";position:absolute;top:16px;right:18px;width:44px;height:44px;border-radius:10px;background-position:center;background-repeat:no-repeat;background-size:22px 22px;}
html.vf-client .cd-kpi-blue::before{background-color:#e8f3fa;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a6ea8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h5'/%3E%3C/svg%3E");}
html.vf-client .cd-kpi-green::before{background-color:#e6f4ea;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c7a43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.3 7 12 12l8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");}
html.vf-client .cd-kpi-amber::before{background-color:#fdf1e0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2760c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3Cpath d='M6 15h4'/%3E%3C/svg%3E");}
html.vf-client .cd-kpi-red::before{background-color:#fdeaea;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");}
/* right column stretches so the Shipments card bottom-aligns with To do */
html.vf-client .cd-grid-32{align-items:stretch;}
html.vf-client .cd-col > .Card.cd-card:last-child{flex:1 1 auto;display:flex;flex-direction:column;}
html.vf-client .cd-col > .Card.cd-card:last-child > .cd-list{flex:1;}
/* coloured top ribbon on the recent-lists cards, matching the title accent */
html.vf-client .Card.cd-rib,html.vf-client body:has(.StaticValueBox) .Card.cd-rib{border-top:3px solid #0a6ea8 !important;}
html.vf-client body:has(.StaticValueBox) .Card.cd-rib-blue{border-top-color:#0a6ea8 !important;}
html.vf-client body:has(.StaticValueBox) .Card.cd-rib-blue .CardTitle::before{background:#0a6ea8 !important;}
html.vf-client body:has(.StaticValueBox) .Card.cd-rib-green{border-top-color:#1c7a43 !important;}
html.vf-client body:has(.StaticValueBox) .Card.cd-rib-green .CardTitle::before{background:#1c7a43 !important;}
html.vf-client body:has(.StaticValueBox) .Card.cd-rib-orange{border-top-color:#c2760c !important;}
html.vf-client .Card .CardHeader h3.CardTitle.OrangeLine{border-left-color:#c2760c;}
html.vf-client body:has(.StaticValueBox) .CardTitle.OrangeLine::before{background:#c2760c;width:3px;height:18px;top:3px;transform:translateY(-9px);}
/* by product category: donut + ranked list */
html.vf-client .cd-cat{padding:12px 16px 16px;}
html.vf-client .cd-cat-sum{display:flex;justify-content:space-between;font-size:12px;color:#6b7785;padding:6px 2px 10px;border-bottom:1px solid #eef1f4;margin-bottom:8px;}
html.vf-client .cd-cat-sum b{color:#1f2933;}
html.vf-client .cd-cat-row{padding:7px 2px;}
html.vf-client .cd-cat-top{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;margin-bottom:4px;gap:8px;}
html.vf-client .cd-cat-top i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px;vertical-align:-1px;}
html.vf-client .cd-cat-amt{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:700;white-space:nowrap;}
html.vf-client .cd-cat-amt em{font-style:normal;font-weight:600;color:#6b7785;font-family:Inter,sans-serif;margin-left:6px;}
html.vf-client .cd-cat-bar{height:6px;border-radius:4px;background:#eef1f4;overflow:hidden;}
html.vf-client .cd-cat-bar div{height:6px;border-radius:4px;}
html.vf-client .cd-cat-hero{padding:6px 2px 12px;}
html.vf-client .cd-cat-total{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:30px;font-weight:700;line-height:1.1;margin:4px 0 2px;}
html.vf-client .cd-cat-strip{display:flex;height:14px;border-radius:7px;overflow:hidden;background:#eef1f4;margin:0 2px 6px;}
html.vf-client .cd-cat-strip div{height:14px;min-width:3px;}
html.vf-client .cd-cat-strip div + div{border-left:2px solid #fff;}
/* monthly purchases chart fills its card (no gap under the legend) */
html.vf-client .cd-grid-21{align-items:stretch;}
html.vf-client .cd-grid-21 > .Card.cd-card{display:flex;flex-direction:column;}
html.vf-client .cd-chart-body{flex:1;display:flex;padding:12px 12px 8px;min-height:0;}
html.vf-client .cd-chart{flex:1;min-height:300px;width:100%;}
/* monthly purchases: stats strip */
html.vf-client .cd-mp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-bottom:1px solid #eef1f4;}
html.vf-client .cd-mp-stats > div{padding:14px 16px;border-right:1px solid #eef1f4;}
html.vf-client .cd-mp-stats > div:last-child{border-right:0;}
html.vf-client .cd-mp-v{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:20px;font-weight:700;line-height:1.3;margin:2px 0;}
@media (max-width:900px){html.vf-client .cd-mp-stats{grid-template-columns:repeat(2,minmax(0,1fr));}}


/* ── VF 2026-10-12: Profile pages (pf-*) ─────────────────────────────── */
html.vf-client .pf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px;align-items:start}
html.vf-client .pf-grid > .Card,html.vf-client .pf-col > .Card{margin-bottom:0 !important}
html.vf-client .pf-col{display:flex;flex-direction:column;gap:12px}
html.vf-client .pf-id{display:flex;align-items:center;gap:14px;padding:18px 18px 14px}
html.vf-client .pf-avatar{width:56px;height:56px;border-radius:14px;background:#0a5aa8;color:#fff;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 56px}
html.vf-client .pf-name{font-size:16px;font-weight:700;color:#1f2933;line-height:1.2}
html.vf-client .pf-sub{font-size:12px;color:#6b7785;margin-top:3px}
html.vf-client .pf-facts{padding:0 18px 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
html.vf-client .pf-fact .cd-kpi-l{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#6b7785;margin-bottom:2px}
html.vf-client .pf-fact .pf-v{font-size:13px;color:#1f2933;font-weight:500;word-break:break-word}
html.vf-client .pf-fact.wide{grid-column:1 / -1}
html.vf-client .pf-links{display:flex;flex-direction:column}
html.vf-client .pf-link{display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid #eef1f4;text-decoration:none;color:inherit}
html.vf-client .pf-link:first-child{border-top:0}
html.vf-client .pf-link:hover{background:#f7f9fb;text-decoration:none}
html.vf-client .pf-link .cd-ic{flex:0 0 32px;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}
html.vf-client .pf-link-b{flex:1;min-width:0}
html.vf-client .pf-link-t{font-size:13px;font-weight:600;color:#1f2933}
html.vf-client .pf-link .cd-muted{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.vf-client .pf-link .pf-arrow{color:#9aa5b1;font-size:16px}
html.vf-client .pf-form{padding:16px 18px 18px}
html.vf-client .pf-f2{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
html.vf-client .pf-f2 .pf-field.wide{grid-column:1 / -1}
html.vf-client .pf-field label.pf-l{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6b7785;margin:0 0 5px}
html.vf-client .pf-field label.pf-l .required{color:#c0392b;margin-left:2px}
html.vf-client .pf-field .form-control{height:38px;font-size:13px;border:1px solid #d5dbe2;border-radius:6px;padding:6px 10px;color:#1f2933}
html.vf-client .pf-field textarea.form-control{height:auto;min-height:64px}
html.vf-client .pf-field .form-control:focus{border-color:#0a6ea8;box-shadow:0 0 0 3px rgba(10,110,168,.12)}
html.vf-client .pf-field .form-control-feedback{font-size:12px;color:#c0392b;margin-top:3px}
html.vf-client .pf-hint{font-size:12px;color:#6b7785;margin:0 0 12px}
html.vf-client .pf-email{display:grid;grid-template-columns:28px 86px minmax(0,1fr);gap:10px;align-items:center;padding:8px 0;border-top:1px solid #eef1f4}
html.vf-client .pf-hint + .pf-email{border-top:0;padding-top:0}
html.vf-client .pf-email .pf-l{margin:0;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6b7785}
html.vf-client .pf-email input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:#1c7a43;cursor:pointer}
html.vf-client .pf-email .form-control-feedback{grid-column:3;font-size:12px;color:#c0392b}
html.vf-client .pf-switch{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:8px;background:#f7f9fb;margin-top:14px;font-size:13px;color:#1f2933}
html.vf-client .pf-switch input{width:18px;height:18px;margin:0;accent-color:#1c7a43;cursor:pointer}
html.vf-client .pf-switch .cd-muted{font-size:12px}
html.vf-client .pf-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:1px solid #eef1f4}
html.vf-client .pf-actions .cd-muted{font-size:12px;margin-right:auto}
html.vf-client .pf-actions .btn{height:36px;padding:0 18px;font-size:13px;font-weight:700;border-radius:6px}
@media (max-width:992px){html.vf-client .pf-grid{grid-template-columns:1fr} html.vf-client .pf-f2{grid-template-columns:1fr}}
html.vf-client .pf-nav .pf-link.active{background:#e8f3fa}
html.vf-client .pf-nav .pf-link.active .pf-link-t{color:#0a5aa8}
html.vf-client .pf-narrow{max-width:720px}
html.vf-client .pf-addr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;padding:16px 18px}
html.vf-client .pf-addr{position:relative;border:1px solid #e4e9ef;border-radius:8px;padding:14px 14px 12px;background:#fff;display:flex;flex-direction:column;gap:6px}
html.vf-client .pf-addr.is-default{border-color:#1c7a43;box-shadow:inset 0 0 0 1px #1c7a43}
html.vf-client .pf-addr-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
html.vf-client .pf-addr-name{font-size:13px;font-weight:700;color:#1f2933}
html.vf-client .pf-addr-lines{font-size:12.5px;color:#4b5563;line-height:1.45}
html.vf-client .pf-addr-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding-top:8px;border-top:1px solid #eef1f4;font-size:12px}
html.vf-client .pf-addr-foot label{display:flex;align-items:center;gap:6px;margin:0;cursor:pointer;color:#4b5563}
html.vf-client .pf-addr-foot input[type=radio]{width:16px;height:16px;margin:0;accent-color:#1c7a43}
html.vf-client .pf-addr-ops a{color:#0a5aa8;font-weight:600;margin-left:10px}
html.vf-client .pf-addr-ops a.danger{color:#b42318}
html.vf-client .pf-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid #e4e9ef;border-radius:8px;background:#f7f9fb;margin-bottom:14px}
html.vf-client .pf-toggle b{font-size:13px;color:#1f2933}
html.vf-client .pf-toggle .cd-muted{font-size:12px}
html.vf-client .pf-toggle input{width:20px;height:20px;margin:0;accent-color:#1c7a43;cursor:pointer}
html.vf-client .pf-rules{margin:0 0 14px;padding:0;list-style:none;font-size:12px;color:#6b7785;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
html.vf-client .pf-rules li::before{content:"\2022";color:#0a6ea8;margin-right:6px}



/* ── VF 2026-10-12: List pages (ls-*) — estimates / invoices ───────────────── */
html.vf-client .ls-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:12px}
html.vf-client .ls-tile{display:block;background:#fff;border:1px solid #d8d8d8;border-radius:8px;padding:12px 14px;text-decoration:none;color:inherit;position:relative;overflow:hidden}
html.vf-client .ls-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ls-accent,#0a6ea8)}
html.vf-client .ls-tile:hover{text-decoration:none;box-shadow:0 2px 6px rgba(16,24,40,.08)}
html.vf-client .ls-tile.active{border-color:var(--ls-accent,#0a6ea8);box-shadow:inset 0 0 0 1px var(--ls-accent,#0a6ea8)}
html.vf-client .ls-tile .cd-kpi-l{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b7785;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.vf-client .ls-tile .ls-v{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-size:22px;font-weight:700;line-height:1.1;color:#1f2933}
html.vf-client .ls-tile .cd-muted{font-size:11.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.vf-client .ls-blue{--ls-accent:#0a6ea8}html.vf-client .ls-green{--ls-accent:#1c7a43}html.vf-client .ls-amber{--ls-accent:#c2760c}html.vf-client .ls-red{--ls-accent:#c0392b}html.vf-client .ls-grey{--ls-accent:#7c8a99}
html.vf-client .ls-card{margin-bottom:0 !important}
html.vf-client .ls-card .CardHeader{flex-wrap:wrap;gap:8px}
html.vf-client .ls-tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
html.vf-client .ls-search{display:flex;align-items:center;gap:0;border:1px solid #d5dbe2;border-radius:6px;background:#fff;height:34px;overflow:hidden}
html.vf-client .ls-search input{border:0;outline:0;height:32px;width:220px;padding:0 10px;font-size:13px;color:#1f2933;background:transparent}
html.vf-client .ls-search button{border:0;background:#f1f4f7;height:32px;padding:0 12px;font-size:12px;font-weight:700;color:#1f2933;cursor:pointer;border-left:1px solid #d5dbe2}
html.vf-client .ls-search button:hover{background:#e6ebf0}
html.vf-client .ls-search a.ls-clear{display:flex;align-items:center;height:32px;padding:0 10px;font-size:12px;color:#6b7785;text-decoration:none;border-left:1px solid #d5dbe2}
html.vf-client .ls-tools select{height:34px;font-size:12.5px;border:1px solid #d5dbe2;border-radius:6px;padding:0 8px;background:#fff;color:#1f2933;max-width:230px}
html.vf-client .ls-tools .cd-btn{height:34px;display:inline-flex;align-items:center;padding:0 14px;font-size:12.5px;font-weight:700;border-radius:6px}
html.vf-client .ls-count{font-size:12px;color:#6b7785;margin-left:8px;font-weight:500}
html.vf-client .ls-wrap{overflow:auto}
html.vf-client table.ls-t{width:100%;border-collapse:collapse;font-size:13px;margin:0}
html.vf-client table.ls-t th{background:#1a3a63;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:10px 14px;text-align:left;white-space:nowrap}
html.vf-client table.ls-t th a{color:#fff;text-decoration:none}
html.vf-client table.ls-t th a:hover{text-decoration:underline}
html.vf-client table.ls-t td{padding:10px 14px;border-top:1px solid #eef1f4;vertical-align:middle;color:#1f2933}
html.vf-client table.ls-t tbody tr:hover td{background:#f7f9fb}
html.vf-client table.ls-t td.r,html.vf-client table.ls-t th.r{text-align:right}
html.vf-client table.ls-t td.num{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;font-weight:600;white-space:nowrap}
html.vf-client table.ls-t td.num.neg{color:#b42318}
html.vf-client table.ls-t td.id a{font-weight:700;color:#0a5aa8}
html.vf-client table.ls-t td.sub{font-size:12px;color:#6b7785}
html.vf-client table.ls-t .cd-pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
html.vf-client .ls-ops{display:flex;gap:4px;justify-content:flex-end}
html.vf-client .ls-ops a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:#4b5563;background:#f1f4f7;text-decoration:none}
html.vf-client .ls-ops a:hover{background:#e3edfb;color:#0a5aa8}
html.vf-client .ls-ops a.danger:hover{background:#fdeaea;color:#b42318}
html.vf-client .ls-ops svg{width:15px;height:15px}
html.vf-client .ls-empty{padding:28px;text-align:center;color:#6b7785;font-size:13px}
html.vf-client .ls-pager{margin-top:12px}



/* ── VF 2026-10-12: Detail pages (dv-*) — invoice / estimate ───────────────── */
html.vf-client .dv-page .Card.cd-card{margin-bottom:0 !important}
html.vf-client .dv-head{padding-bottom:4px}
html.vf-client .dv-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 16px 10px}
html.vf-client .dv-title{font-size:20px;font-weight:700;color:#1f2933;display:flex;align-items:center;gap:10px;line-height:1.2}
html.vf-client .dv-title .cd-pill{font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
html.vf-client .dv-sub{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:6px;font-size:12.5px;color:#4b5563}
html.vf-client .dv-sub b{color:#6b7785;font-weight:600;margin-right:3px}
html.vf-client .dv-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
html.vf-client .dv-actions .cd-btn{height:34px;display:inline-flex;align-items:center;gap:6px;padding:0 14px;font-size:12.5px;font-weight:700;border-radius:6px;text-decoration:none;line-height:1;cursor:pointer}
html.vf-client .dv-actions .cd-btn svg{width:15px;height:15px}
html.vf-client .dv-actions input.cd-btn{font-family:inherit}
html.vf-client .dv-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0;border-top:1px solid #e9edf1;margin:4px 0 0}
html.vf-client .dv-kpi{padding:12px 16px;border-right:1px solid #e9edf1;min-width:0}
html.vf-client .dv-kpi:last-child{border-right:0}
html.vf-client .dv-kpi .cd-kpi-l{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b7785;margin-bottom:3px;white-space:nowrap}
html.vf-client .dv-kpi-v{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-size:18px;font-weight:700;line-height:1.15;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.vf-client .dv-kpi-v.dv-kpi-s{font-family:inherit;font-size:13px;font-weight:600;display:flex;align-items:center;gap:4px}
html.vf-client .dv-kpi-fx{grid-column:span 2}
html.vf-client .dv-green{color:#1c7a43 !important}
html.vf-client .dv-red{color:#c0392b !important}
html.vf-client .dv-approve{margin:0 16px 12px;border:1px solid #f3d8a3;background:#fff8ea;border-radius:8px;padding:10px 14px}
html.vf-client .dv-approve-l{display:flex;align-items:center;gap:10px;font-size:14px;color:#1f2933;cursor:pointer;margin:0}
html.vf-client .dv-approve-l input{width:18px;height:18px;margin:0;accent-color:#c2760c}
html.vf-client .dv-approve .cd-muted{font-size:12px;margin:4px 0 0 28px}
html.vf-client .dv-approve img{margin:4px 0}
html.vf-client .dv-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:900px){html.vf-client .dv-grid2{grid-template-columns:1fr}}
html.vf-client .dv-kvs{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;padding:4px 16px 12px}
@media (max-width:600px){html.vf-client .dv-kvs{grid-template-columns:1fr}}
html.vf-client .dv-kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #eef1f4;font-size:12.5px;min-width:0}
html.vf-client .dv-kv .dv-k{color:#6b7785;white-space:nowrap}
html.vf-client .dv-kv .dv-v{color:#1f2933;font-weight:600;text-align:right;overflow-wrap:anywhere}
html.vf-client .dv-kv .dv-v.dv-none{color:#9aa5b1;font-weight:400}
html.vf-client .dv-slots{padding:0 16px 14px}
html.vf-client table.dv-slot-t th{padding:7px 10px;font-size:10.5px}
html.vf-client table.dv-slot-t td{padding:7px 10px;font-size:12.5px}
html.vf-client .dv-items .CardHeader{flex-wrap:wrap;gap:8px}
html.vf-client .dv-items .CardTitle .cd-muted{font-size:13px;font-weight:500}
html.vf-client ul.dv-chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 0 auto;padding:0}
html.vf-client ul.dv-chips li{margin:0}
html.vf-client ul.dv-chips label{display:inline-flex;align-items:center;gap:5px;border:1px solid #d5dbe2;border-radius:999px;background:#fff;padding:3px 10px 3px 7px;font-size:11.5px;font-weight:600;color:#4b5563;cursor:pointer;margin:0;white-space:nowrap}
html.vf-client ul.dv-chips label:hover{border-color:#0a6ea8;color:#0a6ea8}
html.vf-client ul.dv-chips input{margin:0;width:13px;height:13px;accent-color:#0a6ea8}
html.vf-client .dv-tw{overflow:auto;max-height:620px;scrollbar-width:thin;border-top:1px solid #e9edf1}
html.vf-client .dv-tw::-webkit-scrollbar{height:8px;width:8px}
html.vf-client .dv-tw::-webkit-scrollbar-thumb{background:#c6ced8;border-radius:8px}
html.vf-client table.dv-t th{position:sticky;top:0;z-index:2;padding:9px 10px;font-size:10.5px}
html.vf-client table.dv-t td{padding:8px 10px;font-size:12.5px;vertical-align:middle;line-height:1.3}
html.vf-client table.dv-t td.c,html.vf-client table.dv-t th.c{text-align:center}
html.vf-client table.dv-t td.dv-mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-size:12px;white-space:nowrap}
html.vf-client table.dv-t td.dv-code{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-size:12px;font-weight:700;color:#0a5aa8;white-space:nowrap}
html.vf-client table.dv-t td.dv-desc{min-width:220px}
html.vf-client table.dv-t td.dv-spec{min-width:160px;font-size:12px;color:#4b5563}
html.vf-client table.dv-t img.dv-img{width:60px;height:60px;object-fit:contain;border:1px solid #e9edf1;border-radius:6px;background:#fff}
html.vf-client table.dv-t td.dv-bar{position:relative}
html.vf-client table.dv-t td.dv-bar .barline{height:2px;background:#0000ff;opacity:1;border-radius:0;margin:3px 0 0 auto;max-width:100%}
html.vf-client table.dv-t tr.dv-total td{background:#f3f6f9;border-top:2px solid #d5dbe2;font-weight:600}
html.vf-client table.dv-t tr.dv-total td.dv-words{font-size:12px;color:#4b5563;white-space:normal}
html.vf-client table.dv-t tbody tr.dv-total:hover td{background:#f3f6f9}
html.vf-client .dv-foot{padding:8px 16px 12px;font-size:12px}
html.vf-client .dv-terms-b{padding:4px 16px 16px;font-size:12px;line-height:1.55;color:#4b5563;max-height:360px;overflow:auto;scrollbar-width:thin}
html.vf-client .dv-terms-b br{content:"";display:block;margin-bottom:6px}
html.vf-client .dv-modals .modal-content{border-radius:10px}
html.vf-client .dv-modals .modal-header h4{font-size:15px;font-weight:700}
html.vf-client .dv-modals .modal-footer .btn-green{min-width:80px}
html.vf-client table.dv-t td.dv-pack{min-width:150px;font-size:12px;color:#4b5563}
html.vf-client table.dv-t td.dv-nowrap{white-space:nowrap}
html.vf-client .dv-approve-multi{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px}
html.vf-client .dv-approve-multi .dv-approve-note{flex-basis:100%;margin-left:0}
html.vf-client .dv-err{color:#c0392b;font-size:12px;font-weight:600}
html.vf-client .dv-chk{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#4b5563;margin:0;cursor:pointer;white-space:nowrap}
html.vf-client .dv-chk input{margin:0;width:14px;height:14px;accent-color:#0a6ea8}
html.vf-client .dv-comment .CardHeader{flex-wrap:wrap;gap:8px}
html.vf-client .dv-comment .CardHeader .dv-chk{margin-left:auto}
html.vf-client .dv-comment-b{padding:4px 16px 14px;display:flex;flex-direction:column;gap:10px}
html.vf-client .dv-comment-b textarea{width:100%;min-height:118px;border:1px solid #d5dbe2;border-radius:8px;padding:10px 12px;font-size:13px;font-family:inherit;color:#1f2933;resize:vertical;background:#fff}
html.vf-client .dv-comment-b textarea:focus{outline:0;border-color:#0a6ea8;box-shadow:0 0 0 3px rgba(10,110,168,.12)}
html.vf-client .dv-comment-empty{padding:28px 16px}
html.vf-client .dv-btns,html.vf-client .dv-items-bar{display:flex;gap:8px;flex-wrap:wrap}
html.vf-client .dv-items-bar{padding:0 16px 14px}
html.vf-client .dv-btns .cd-btn,html.vf-client .dv-items-bar .cd-btn{height:34px;display:inline-flex;align-items:center;padding:0 14px;font-size:12.5px;font-weight:700;border-radius:6px;font-family:inherit;cursor:pointer}
html.vf-client table.dv-t input.dv-qty{width:84px;border:1px solid #d5dbe2;border-radius:6px;padding:5px 8px;font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;text-align:right;background:#fff;color:#1f2933}
html.vf-client table.dv-t input.dv-qty:focus{outline:0;border-color:#0a6ea8;box-shadow:0 0 0 3px rgba(10,110,168,.12)}
html.vf-client table.dv-t td.dv-revq{min-width:150px}
html.vf-client table.dv-t td.dv-revq .dv-chk{display:flex;margin-bottom:4px}
html.vf-client table.dv-t td.dv-revq input.dv-qty{width:100%;margin-top:2px}
html.vf-client table.dv-t td.dv-revst .cd-pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
html.vf-client table.dv-t th.dv-delh{white-space:nowrap}
html.vf-client table.dv-t th.dv-delh input{vertical-align:middle;margin:0 6px 0 0;accent-color:#c0392b}
html.vf-client table.dv-t th.dv-delh i{cursor:pointer;color:#ffb4a8;font-size:13px}
html.vf-client table.dv-t th.dv-delh i:hover{color:#fff}
html.vf-client table.dv-t td.coldeletedata input{width:15px;height:15px;accent-color:#c0392b;margin:0}
html.vf-client .dv-sub span{white-space:nowrap}
html.vf-client .dv-kpi-v{white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip}
html.vf-client .dv-kpis{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}

/* ── VF 2026-10-13: Estimates list (ls2-*) — admin "Manage Estimates" look on the client portal ── */
html.vf-client .ContentHeader .container-fluid{position:relative}
html.vf-client .ls-hdr-btn{position:absolute;right:16px;top:50%;transform:translateY(-50%);margin:0}
html.vf-client .ls-hdr-btn .cd-btn{height:34px;display:inline-flex;align-items:center;padding:0 14px;font-size:12.5px;font-weight:700;border-radius:6px;cursor:pointer}
html.vf-client .ls2-page .ilr-kpis{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0}
html.vf-client .ls2-page .ilr-kpi-v{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-size:24px}
html.vf-client .ls2-page .ilr-card{margin:0;border-top-color:#0a6ea8}
html.vf-client .ls2-page .ilr-form select{min-width:160px}
html.vf-client .ls2-panel{background:#fff;border:1px solid #d8d8d8;border-radius:8px;padding:0 0 12px;margin:0}
html.vf-client .ls2-panel .inv-panel-head{display:flex;align-items:baseline;gap:10px;padding:14px 16px 8px}
html.vf-client .ls2-panel .inv-panel-head h3{font-size:15px;font-weight:700;margin:0;color:#1f2933}
html.vf-client .ls2-count{font-size:12.5px;color:#6b7785}
html.vf-client .ls2-panel .tile-ribbon{margin:0 16px 10px;border-radius:6px;padding:8px 12px;font-size:12.5px}
html.vf-client .ls2-panel .tile-ribbon.status-good{background:#e5f4ea;color:#1e6b3a;border:1px solid #a8d7b8}
html.vf-client .ls2-panel .tile-ribbon.status-warning{background:#fff4e0;color:#7a4a00;border:1px solid #efc172}
html.vf-client .ls2-tw{overflow:auto;scrollbar-width:thin;padding:0 16px}
html.vf-client table.ls2-t{width:100%;border-collapse:collapse;margin:0}
html.vf-client table.ls2-t thead th{background:#1a3a63;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:10px 12px;text-align:left;white-space:nowrap;border:0}
html.vf-client table.ls2-t thead th a{color:#fff;text-decoration:none}
html.vf-client table.ls2-t thead th a:hover{text-decoration:underline}
html.vf-client table.ls2-t thead th.r,html.vf-client table.ls2-t td.r{text-align:right}
html.vf-client table.ls2-t tbody td{padding:10px 12px;font-size:13px;color:#1f2933;vertical-align:middle;border-top:1px solid #eef1f4}
html.vf-client table.ls2-t td.ls2-num{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;font-weight:600;white-space:nowrap}
html.vf-client table.ls2-t a.ls2-id{font-weight:700;color:#0a5aa8;text-decoration:none}
html.vf-client table.ls2-t .ilr-ops{justify-content:flex-end}
html.vf-client .ls2-panel .ilr-pager{margin:12px 16px 0;padding-top:12px}
html.vf-client .ls2-panel .ilr-pager ul{margin:0}

/* VF 2026-10-13: Executive Snapshot header buttons share one size */
html.vf-client .es-head-a .cd-btn{min-width:100px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;box-sizing:border-box}

/* VF 2026-10-13: profile action buttons share one size */
html.vf-client .pf-actions .btn{height:36px !important;min-width:130px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;line-height:1;box-sizing:border-box}

/* VF 2026-10-13: "+ Add Address" as a light-blue button, hover blue */
html.vf-client .pf-addbtn a{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:6px;background:#e8f3fa;color:#08517c !important;font-size:12.5px;font-weight:700;text-decoration:none !important;transition:background-color .15s,color .15s}
html.vf-client .pf-addbtn a:hover,html.vf-client .pf-addbtn a:focus{background:#0069d9;color:#fff !important}

/* VF 2026-10-13: detail pages - equal 12px spacing between all cards (the estimate page wraps its cards in a form, which had no gap) */
html.vf-client .dv-page > .container-fluid{display:flex;flex-direction:column;gap:12px}
html.vf-client .dv-page #frmDetails{display:flex;flex-direction:column;gap:12px}
html.vf-client .dv-page .dv-grid2{gap:12px}
html.vf-client .dv-page .Card.cd-card{margin:0 !important}

/* VF 2026-10-13: line-item column toggles sit on their own row under the card header */
html.vf-client .dv-chipbar{display:flex;align-items:center;gap:8px;padding:8px 16px 10px;border-top:1px solid #eef1f4}
html.vf-client .dv-chipbar ul.dv-chips{margin:0}
html.vf-client .dv-chipbar::before{content:"Show columns";font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6b7785;margin-right:4px}

/* VF 2026-10-13: chip row - equal padding top/bottom, Container Capacity at the right in light blue */
html.vf-client .dv-chipbar{padding:10px 16px}
html.vf-client .dv-chipbar .dv-chip-right{margin-left:auto}
html.vf-client .dv-chipbar input.dv-btn-lb{height:30px;padding:0 14px;border:0;border-radius:6px;background:#e8f3fa;color:#08517c;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:background-color .15s,color .15s}
html.vf-client .dv-chipbar input.dv-btn-lb:hover,html.vf-client .dv-chipbar input.dv-btn-lb:focus{background:#0069d9;color:#fff}

/* VF 2026-10-13: no "Show columns" label; Container Capacity dark green */
html.vf-client .dv-chipbar::before{content:none}
html.vf-client .dv-chipbar input.dv-btn-lb{background:#336633;color:#fff}
html.vf-client .dv-chipbar input.dv-btn-lb:hover,html.vf-client .dv-chipbar input.dv-btn-lb:focus{background:#0069d9;color:#fff}

/* VF 2026-10-13: detail pages - navy ribbon, light-blue Download PDF, striped line items */
html.vf-client .Card.cd-rib-navy,html.vf-client body:has(.StaticValueBox) .Card.cd-rib-navy{border-top-color:#1a3a63 !important}
html.vf-client .dv-actions a.dv-btn-lb2{background:#e8f3fa;color:#08517c !important;border:0}
html.vf-client .dv-actions a.dv-btn-lb2:hover,html.vf-client .dv-actions a.dv-btn-lb2:focus{background:#0069d9;color:#fff !important}
html.vf-client table.dv-t tbody tr:nth-child(even):not(.dv-total) td{background:#f6f8fa}
html.vf-client table.dv-t tbody tr:not(.dv-total):hover td{background:#eef5fb}

/* VF 2026-10-13: detail tables match the admin estimate table (inset 18px, admin blue header, soft stripe) */
html.vf-client .dv-tw{margin:0 18px 4px;border-top:0;border-radius:8px}
html.vf-client table.dv-t thead th{background:#0a6ea8}
html.vf-client table.dv-t tbody tr:nth-child(even):not(.dv-total) td{background:#fff}
html.vf-client table.dv-t tbody tr:nth-child(odd):not(.dv-total) td{background:#f8fafc}
html.vf-client table.dv-t tbody tr:not(.dv-total):hover td{background:#d6ecff}
html.vf-client .dv-tw{width:calc(100% - 36px) !important;max-width:none !important;box-sizing:border-box}

/* VF 2026-10-13: row progress bars in the table blue */
html.vf-client table.dv-t td.dv-bar .barline{background:#0000ff;opacity:1}

/* VF 2026-10-13: comment card buttons light blue, hover blue */
html.vf-client .dv-comment .dv-btns .cd-btn{background:#e8f3fa !important;color:#08517c !important;border:0 !important;transition:background-color .15s,color .15s}
html.vf-client .dv-comment .dv-btns .cd-btn:hover,html.vf-client .dv-comment .dv-btns .cd-btn:focus{background:#0069d9 !important;color:#fff !important}


/* VF 2026-10-13: detail table row text matches admin (Roboto 13px) */
html.vf-client table.dv-t td,html.vf-client table.dv-t td.dv-mono,html.vf-client table.dv-t td.dv-desc,html.vf-client table.dv-t td.dv-spec,html.vf-client table.dv-t td.dv-pack{font-family:Roboto,"Helvetica Neue",Arial,sans-serif;font-size:13px;font-weight:400;color:#292b2c}
html.vf-client table.dv-t td.dv-code{font-family:Roboto,"Helvetica Neue",Arial,sans-serif;font-size:13px;font-weight:700;color:#0a5aa8}
html.vf-client table.dv-t tr.dv-total td{font-weight:600}

html.vf-client table.dv-t td.dv-ctn{font-weight:700;color:#0a5aa8 !important}
html.vf-client table.dv-t td#GrandCTNQTY{font-weight:700;color:#0a5aa8 !important;text-align:right}
html.vf-client table.dv-t td#GrandTTLVOL{text-align:right}
html.vf-client .cd-btn.dv-btn-dg{background:#336633 !important;color:#fff !important;border-color:#336633 !important}
html.vf-client .cd-btn.dv-btn-dg:hover{background:#0069d9 !important;border-color:#0069d9 !important;color:#fff !important}
html.vf-client .cd-btn.dv-btn-lb3{background:#e8f3fa !important;color:#08517c !important;border-color:#e8f3fa !important}
html.vf-client .cd-btn.dv-btn-lb3:hover{background:#0069d9 !important;border-color:#0069d9 !important;color:#fff !important}
html.vf-client .dv-footrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:6px 16px 10px}
html.vf-client .dv-footrow .dv-foot{padding:0}
html.vf-client .dv-footrow .dv-items-bar{padding:0;margin-left:auto;display:flex;gap:8px}
html.vf-client .dv-items .dv-tw{margin-bottom:4px !important}
html.vf-client .dv-footrow{padding-top:2px}
html.vf-client .dv-items .CardHeader{display:flex;align-items:center;justify-content:space-between}
html.vf-client .dv-items .CardHeader .dv-chip-right{margin-left:auto}
html.vf-client .dv-chipbar{justify-content:flex-start}
html.vf-client .dv-comment-b textarea{margin-top:10px}
html.vf-client .dv-hdr-btns{display:inline-flex;align-items:center;gap:8px}
html.vf-client .dv-footrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
html.vf-client .dv-footrow .dv-items-bar{margin:0;justify-self:center}

/* VF 2026-10-14: invoice list balance due */
.ls2-t td.ls2-neg{color:#b42318;font-weight:700}
.ls2-t td.ls2-neg .ilr-cur{color:#b42318}

/* VF 2026-10-14: client invoice list - dark green ribbon + table header (matches admin invoices) */
html.vf-client body:has(#invoicesListPanel) .ilr-card{border-top-color:#336633 !important}
html.vf-client body:has(#invoicesListPanel) table.ls2-t thead th{background:#336633 !important}

/* VF 2026-10-14: client estimate list - blue table header (matches the page band) */
html.vf-client body:has(#estimatesListPanel) table.ls2-t thead th{background:#0f5f9e !important}

/* VF 2026-10-14: client invoice list - green square before the Invoices card label */
html.vf-client body:has(#invoicesListPanel) #invoicesListPanel .inv-panel-head h3::before{content:"";display:inline-block;width:10px;height:10px;background:#336633;border-radius:2px;margin-right:10px;vertical-align:middle;position:relative;top:-1px}

/* VF 2026-10-14: client estimate list - blue square before the Estimates card label (page band blue) */
html.vf-client body:has(#estimatesListPanel) #estimatesListPanel .inv-panel-head h3::before{content:"";display:inline-block;width:10px;height:10px;background:#0f5f9e;border-radius:2px;margin-right:10px;vertical-align:middle;position:relative;top:-1px}

/* VF 2026-10-15: executive snapshot - when there is little data the bottom row (Recent activity / Shipment Schedule) stretches down to the footer instead of leaving an empty band */
html.vf-client .es-page .container-fluid{min-height:calc(100vh - 202px);}
html.vf-client .es-page .es-grid2{flex:1 1 auto;align-items:stretch;}
html.vf-client .es-grid2 > .es-calcard{align-self:stretch;} /* VF 2026-10-15: calendar card ends level with Recent activity */

/* VF 2026-10-15: Create Estimate button in the Estimates card header (dark green, blue hover) */
.ls2-head-btn .cd-btn.vf-ce-btn{background:#336633 !important;border-color:#336633 !important;color:#fff !important;height:32px;transition:background-color .15s}
.ls2-head-btn .cd-btn.vf-ce-btn:hover,.ls2-head-btn .cd-btn.vf-ce-btn:focus{background:#0069d9 !important;border-color:#0069d9 !important;color:#fff !important}

/* VF 2026-10-15: client dashboard "Due to Reorder" card */
.crd-card{margin-top:8px !important}
.crd-head{gap:12px}
.crd-head-l{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.crd-hint{font-size:12px;color:#7c8a99}
.crd-more a::after{content:none !important;background:none !important}
.crd-ce.cd-btn{background:#336633 !important;color:#fff !important;height:30px;font-size:12.5px;transition:background-color .15s}
.crd-ce.cd-btn:hover,.crd-ce.cd-btn:focus{background:#0069d9 !important;color:#fff !important}
.crd-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,1.5fr) auto;gap:14px;align-items:center;padding:12px 16px;border-bottom:1px solid #edf0f3;font-size:13px;color:#1f2933}
.crd-row:last-child{border-bottom:0}
.crd-headrow{font:700 10.5px Roboto,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#7c8a99;padding-top:8px;padding-bottom:8px;background:#f7f9fb}
.crd-sub{font-size:12px;color:#52606d;margin-top:3px}
.crd-strong{font-weight:600;color:#1f2933}
.crd-link{font-weight:700;color:#0a5a9c !important;text-decoration:none}
.crd-link:hover{text-decoration:underline}
.crd-pill{display:inline-block;font-weight:700;font-size:11.5px;padding:3px 10px;border-radius:999px;white-space:nowrap}
.crd-pill.late{background:#fdebd3;color:#8a4b0f}
.crd-pill.soon{background:#dbeafe;color:#0a4d8c}
.crd-pill.ok{background:#e6f4ea;color:#1c7a43}
.crd-go{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:6px;background:#e8f3fa;color:#08517c !important;font:600 12.5px Roboto,sans-serif;text-decoration:none !important;white-space:nowrap;transition:background-color .15s}
.crd-go:hover{background:#0069d9;color:#fff !important}
.crd-foot{padding:9px 16px;font-size:12px;color:#52606d;border-top:1px solid #edf0f3;line-height:1.6;background:#fafbfc}
@media (max-width:900px){.crd-row{grid-template-columns:minmax(0,1fr) auto}.crd-row>.crd-x{display:none}}