:root{
  --sidebar-width:254px;--sidebar-collapsed-width:76px;--primary:#123a66;--primary-2:#184b84;
  --surface:#f2f6fb;--text:#23364d;--muted:#6a7a8c;--border:#d9e3ef;--danger:#b9323d;--success:#1d7a48;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:var(--cws-font-family,"Inter","Segoe UI",sans-serif);background:linear-gradient(180deg,#eef3f8 0%,#f6f9fc 100%);color:var(--text)}
a{text-decoration:none;color:inherit}.app-shell{display:flex;min-height:100vh}.main{min-width:0;flex:1;min-height:100vh}.content{padding:20px 20px 100px!important}
.sidebar{width:var(--sidebar-width);flex:0 0 auto;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:18px 14px;background:linear-gradient(180deg,#0a2f5c 0%,#0c2342 100%)!important;transition:width .25s ease,transform .25s ease;z-index:1100;overflow:auto}.sidebar.collapsed{width:var(--sidebar-collapsed-width)}
.brand{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:18px!important;min-height:70px}.brand-logo{width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#fff;flex:0 0 42px}.brand-text{min-width:0;color:#fff}.brand-text strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-text span{display:block;margin-top:3px;font-size:10.5px;color:rgba(255,255,255,.62);white-space:nowrap}.sidebar.collapsed .brand-text,.sidebar.collapsed .menu-text,.sidebar.collapsed .logout-text{display:none}.sidebar.collapsed .brand{justify-content:center;padding:9px}.sidebar-menu{display:flex;flex-direction:column;gap:7px}.menu-item,.logout-btn{display:flex;align-items:center;gap:12px;padding:0 13px;min-height:50px;color:#fff!important;border:1px solid transparent}.menu-icon,.logout-icon{width:26px;text-align:center;font-size:17px;flex:0 0 26px}.sidebar.collapsed .menu-item,.sidebar.collapsed .logout-btn{justify-content:center;padding:0}.sidebar-footer{margin-top:auto;padding-top:18px}
.topbar{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:16px}.topbar-left{display:flex;align-items:center;gap:16px;min-width:0}.page-title{min-width:0}.page-title h1{margin:0!important}.page-title p{margin:5px 0 0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw}.menu-toggle{display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;flex:0 0 auto}
.pms-profile-menu{position:relative}.pms-profile-trigger{display:flex;align-items:center;gap:9px;cursor:pointer}.pms-profile-avatar{display:flex;align-items:center;justify-content:center;font-weight:700}.pms-profile-dropdown{display:none;position:absolute;right:0;top:calc(100% + 9px);width:220px;background:#fff;padding:9px;border:1px solid var(--border);box-shadow:0 20px 40px rgba(10,34,64,.15);z-index:1300}.pms-profile-dropdown.show{display:block}.profile-dropdown-head{padding:10px 10px 12px;border-bottom:1px solid #e8edf3}.profile-dropdown-head span,.profile-dropdown-head small{display:block;color:var(--muted);font-size:11px}.profile-dropdown-head strong{display:block;margin:3px 0;font-size:13px}.pms-profile-dropdown a{display:block;padding:11px 10px;color:#a92e39;font-size:13px;font-weight:600}
.alert{padding:13px 16px;border-radius:14px;margin-bottom:16px;font-size:13px;font-weight:500;border:1px solid}.alert-success{background:#ecf9f1;color:#176f40;border-color:#ccebd8}.alert-error{background:#fff1f2;color:#a92e39;border-color:#f1c9cd}.alert-warning{background:#fff7e9;color:#9d6518;border-color:#f1dfbd}.alert-info{background:#edf6ff;color:#245c9d;border-color:#d2e6fa}
.stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px!important;margin-bottom:18px}.stat-card{min-height:92px!important;max-height:100px;padding:15px 16px!important;border-radius:18px!important;display:flex;justify-content:space-between;align-items:center}.stat-copy{min-width:0}.stat-title{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:600!important}.stat-value{display:block;margin-top:7px;font-size:20px;line-height:1.1;font-weight:600!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 42px}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card,.form-card,.table-card{padding:18px}.card-title,.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.card-title h3,.panel-head h3{margin:0!important}.card-title p,.panel-head p{margin:5px 0 0!important}.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;cursor:pointer;font-size:13px}.btn-sm{min-height:36px!important;padding:0 11px!important;border-radius:11px!important;font-size:12px}.btn-block{width:100%}.btn-danger{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;min-height:40px;padding:0 14px}.btn-success{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;min-height:40px;padding:0 14px}
.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.form-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.field{min-width:0}.field.full{grid-column:1/-1}.field label{display:block;margin-bottom:7px}.field .help{margin-top:5px;color:var(--muted);font-size:11px}.required:after{content:' *';color:#bb3340}.inline-check{display:flex;align-items:center;gap:8px;min-height:48px}.inline-check input{width:18px;height:18px}.money-preview{border-radius:16px;background:#edf5ff;border:1px solid #d7e8fa;padding:13px 15px}.money-preview span{display:block;color:#68788a;font-size:11px}.money-preview strong{display:block;margin-top:4px;color:#123a66;font-size:21px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid #e8edf3}
.filter-bar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:14px;margin-bottom:16px;box-shadow:0 8px 18px rgba(10,34,64,.05)}.filter-bar .filter-actions{display:flex;align-items:end;gap:8px}
.table-card{overflow:hidden}.table-wrap{overflow:auto}.table-wrap table{min-width:860px}.table-wrap.compact table{min-width:700px}tbody td{font-size:12.5px!important;vertical-align:middle}.primary-cell strong{display:block;font-weight:600}.primary-cell small{display:block;margin-top:3px;color:var(--muted)}.amount-positive{color:#1d7547;font-weight:600}.amount-danger{color:#b9323d;font-weight:600}.amount-muted{color:#6a7a8c}.table-actions{display:flex;gap:6px;white-space:nowrap}.empty-state{text-align:center;padding:36px 20px;color:var(--muted)}
.badge{display:inline-flex!important;align-items:center;justify-content:center}.badge-neutral{background:#edf2f7!important;color:#536477!important}.badge-blue{background:#e9f2ff!important;color:#245c9d!important}.badge-success{background:#e6f6ec!important;color:#1d7a48!important}.badge-warning{background:#fff6e8!important;color:#a76810!important}.badge-danger{background:#fff0f0!important;color:#b9323d!important}
.repeater{display:flex;flex-direction:column;gap:9px}.repeater-row{display:grid;grid-template-columns:1.2fr 1fr auto;gap:9px;align-items:end}.repeater-row .remove-row{height:48px;width:48px;border:1px solid #efd0d3;background:#fff1f2;color:#a92e39;border-radius:13px;cursor:pointer;font-size:17px}.section-divider{height:1px;background:#e8edf3;margin:16px 0}.muted{color:var(--muted)}.text-right{text-align:right}.nowrap{white-space:nowrap}.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mb-16{margin-bottom:16px}.mt-16{margin-top:16px}.hidden{display:none!important}
.summary-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:14px 0}.summary-item{background:#f8fbff;border:1px solid #e0e9f3;border-radius:14px;padding:11px}.summary-item span{display:block;font-size:10.5px;color:var(--muted);text-transform:uppercase}.summary-item strong{display:block;margin-top:5px;font-size:14px;color:#263b53}.summary-item.balance strong{color:#9d6518}
.bill-sheet{max-width:1100px;margin:0 auto;background:#fff;border-radius:22px;padding:28px;box-shadow:0 12px 30px rgba(10,34,64,.08)}.bill-head{display:flex;justify-content:space-between;gap:30px;padding-bottom:18px;border-bottom:2px solid #123a66}.bill-head h1{margin:0;color:#123a66;font-size:24px}.bill-meta{text-align:right}.bill-party{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:18px 0}.bill-total{margin-left:auto;width:min(420px,100%);margin-top:18px}.bill-total .row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #e9eef4}.bill-total .grand{font-size:17px;font-weight:700;color:#123a66}.print-actions{display:flex;justify-content:flex-end;gap:8px;margin:0 auto 14px;max-width:1100px}
.auth-bg{margin:0;min-height:100vh;background:linear-gradient(135deg,#004d95 0%,#0b63b8 100%)!important;display:flex;align-items:center;justify-content:center;padding:20px}.login-box{width:100%;max-width:420px;background:#fff;border-radius:20px;padding:32px 28px;box-shadow:0 20px 50px rgba(0,41,81,.22)}.login-box h1{margin:0 0 8px;font-size:28px;color:#0d1b2a;text-align:center}.login-box>p{margin:0 0 24px;font-size:14px;color:#667085;text-align:center}.login-box .field{margin-bottom:18px}.login-box input{background:#f8fbff!important}.login-message{margin:0 0 14px;padding:11px;border-radius:12px;background:#fff1f2;color:#a92e39;font-size:13px;text-align:center}
.mobile-bottom-nav{display:none}.sidebar-backdrop{display:none}
@media(max-width:1250px){.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.filter-bar{grid-template-columns:repeat(3,minmax(0,1fr))}.summary-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:980px){.sidebar{position:fixed;left:0;top:0;transform:translateX(-105%);width:274px!important}.sidebar.mobile-open{transform:translateX(0)}.sidebar-backdrop.show{display:block;position:fixed;inset:0;background:rgba(7,22,39,.45);z-index:1090}.content{padding:14px 12px 88px!important}.topbar{position:sticky}.pms-profile-name,.pms-profile-caret{display:none}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-2,.grid-3{grid-template-columns:1fr}.form-grid,.form-grid.cols-3,.form-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}.mobile-bottom-nav{position:fixed;left:10px;right:10px;bottom:10px;z-index:1050;display:grid;grid-template-columns:repeat(4,1fr);background:#0c294b;border-radius:18px;padding:7px;box-shadow:0 14px 30px rgba(7,24,45,.28)}.mobile-bottom-nav a{color:#fff;text-align:center;font-size:10px;padding:5px 2px}.mobile-bottom-nav span{display:block;font-size:16px;margin-bottom:2px}.bill-party{grid-template-columns:1fr}.bill-meta{text-align:left}}
@media(max-width:640px){.stats-grid{grid-template-columns:1fr 1fr}.stat-card{min-height:86px!important;padding:13px!important}.stat-value{font-size:17px}.form-grid,.form-grid.cols-3,.form-grid.cols-2{grid-template-columns:1fr}.filter-bar{grid-template-columns:1fr}.summary-strip{grid-template-columns:1fr 1fr}.repeater-row{grid-template-columns:1fr}.repeater-row .remove-row{width:100%}.topbar{padding:14px 12px!important}.page-title p{display:none}.bill-sheet{padding:16px;border-radius:16px}.bill-head{display:block}.bill-meta{margin-top:13px}.print-actions{padding:0 4px}.login-box{padding:24px 18px}}
@media print{body{background:#fff!important}.print-actions,.topbar,.sidebar,.mobile-bottom-nav,.sidebar-backdrop{display:none!important}.app-shell,.main,.content{display:block!important;padding:0!important;margin:0!important}.bill-sheet{box-shadow:none!important;border-radius:0!important;max-width:none!important;padding:0!important}.table-wrap{overflow:visible!important}thead th{background:#eee!important;color:#111!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}}

@media print {
  @page { size: A4 landscape; margin: 10mm; }
}

/* =========================================================
   Transport Vendor Portal - UI Alignment & Data Layout v1.1
   ========================================================= */

/* Keep every data control aligned to its grid cell. */
.form-card form,
.filter-bar,
.repeater,
.table-card {
  width:100%;
}

.form-card .field > input:not([type='checkbox']):not([type='radio']),
.form-card .field > select,
.form-card .field > textarea,
.filter-bar .field > input:not([type='checkbox']):not([type='radio']),
.filter-bar .field > select,
.filter-bar .field > textarea,
.repeater-row .field > input:not([type='checkbox']):not([type='radio']),
.repeater-row .field > select,
.repeater-row .field > textarea {
  display:block;
  width:100% !important;
  max-width:none !important;
}

/* Strong, even field rhythm across all forms. */
.form-grid {
  align-items:start;
  column-gap:16px !important;
  row-gap:15px !important;
}
.field {
  width:100%;
  min-width:0;
}
.field label {
  min-height:17px;
  margin-bottom:7px !important;
  line-height:1.25;
}
.field.full { grid-column:1/-1 !important; }
.field.span-2 { grid-column:span 2; }
.field.span-3 { grid-column:span 3; }

/* Text areas should feel like part of the same form, not small floating boxes. */
.form-card textarea {
  min-height:86px !important;
  resize:vertical;
}
.form-card .field.full textarea {
  width:100% !important;
}

/* Match calculated/summary blocks to normal field height and width. */
.money-preview {
  width:100%;
  min-height:48px;
  padding:10px 14px !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.money-preview span { line-height:1.25; }
.money-preview strong { margin-top:3px !important; }

/* Form cards: cleaner vertical spacing and aligned footer actions. */
.form-card,
.table-card,
.card {
  padding:20px !important;
}
.form-card .card-title,
.table-card .card-title {
  align-items:center;
}
.form-actions {
  min-height:60px;
  margin-top:18px !important;
  padding-top:14px !important;
  align-items:center;
}
.form-actions .btn {
  min-width:150px;
}
.section-divider { margin:20px 0 !important; }

/* Truck repeater follows the same column widths as the main form. */
.repeater { gap:12px !important; }
.repeater-row {
  grid-template-columns:minmax(260px,1.35fr) minmax(220px,1fr) 48px !important;
  gap:12px !important;
  align-items:end !important;
}
.repeater-row .remove-row {
  width:48px !important;
  min-width:48px;
  height:48px !important;
  margin:0;
}

/* Filters: compact, left-aligned controls instead of stretched / uneven empty columns. */
.filter-bar {
  display:flex !important;
  flex-wrap:wrap;
  align-items:flex-end !important;
  gap:12px !important;
  padding:14px 16px !important;
}
.filter-bar .field {
  flex:1 1 190px;
  max-width:260px;
}
.filter-bar .filter-actions {
  flex:0 0 auto;
  display:flex;
  align-items:center !important;
  gap:8px !important;
  min-height:48px;
  margin-left:2px;
}

/* Data tables: consistent vertical rhythm and embedded controls. */
.table-wrap {
  width:100%;
  border:1px solid #e3eaf2;
  border-radius:15px;
  background:#fff;
}
.table-wrap table { margin:0; }
thead th,
tbody td {
  vertical-align:middle !important;
}
.table-card tbody select,
.table-card tbody input:not([type='checkbox']):not([type='radio']) {
  width:100%;
  min-width:120px;
  min-height:38px !important;
  border-radius:10px !important;
  padding:0 10px !important;
}
.table-actions { align-items:center; }

/* Grid cards must align even when one side has less content. */
.grid-2,
.grid-3 { align-items:start; }
.grid-2 > .form-card,
.grid-2 > .table-card,
.grid-3 > .form-card,
.grid-3 > .table-card { width:100%; }

@media (max-width:1250px) {
  .field.span-3 { grid-column:1/-1; }
  .filter-bar .field { flex-basis:180px; max-width:240px; }
}

@media (max-width:980px) {
  .form-card,
  .table-card,
  .card { padding:16px !important; }
  .field.span-2,
  .field.span-3 { grid-column:1/-1; }
  .filter-bar .field { flex:1 1 calc(50% - 8px); max-width:none; }
  .filter-bar .filter-actions { flex:1 0 100%; margin-left:0; }
}

@media (max-width:640px) {
  .form-card,
  .table-card,
  .card { padding:14px !important; border-radius:18px !important; }
  .filter-bar { display:grid !important; grid-template-columns:1fr !important; }
  .filter-bar .field,
  .filter-bar .filter-actions { width:100%; max-width:none; }
  .filter-bar .filter-actions .btn { flex:1; }
  .repeater-row { grid-template-columns:1fr !important; }
  .repeater-row .remove-row { width:100% !important; }
  .form-actions { justify-content:stretch !important; }
  .form-actions .btn { width:100%; }
}

/* =========================================================
   v1.2 Compact Typography - approx. 15-20% smaller
   ========================================================= */
body{font-size:12.5px!important}
.page-title h1{font-size:17px!important}.page-title p{font-size:11px!important}
.brand-text strong{font-size:12px!important}.brand-text span{font-size:9px!important}
.menu-item,.logout-btn{font-size:13px!important}.menu-icon,.logout-icon{font-size:15px!important}
.pms-profile-name{font-size:12px!important}.profile-dropdown-head span,.profile-dropdown-head small{font-size:9.5px!important}.profile-dropdown-head strong,.pms-profile-dropdown a{font-size:11px!important}
.stat-title{font-size:9.5px!important}.stat-value{font-size:17px!important}.stat-icon{font-size:15px!important}
.card-title h3,.panel-head h3,.widget-head h3{font-size:15px!important}.card-title p,.panel-head p,.widget-head p{font-size:10.5px!important}
label,.field label{font-size:10.8px!important}.field .help,.money-preview span{font-size:9.5px!important}.money-preview strong{font-size:17px!important}
input:not([type='checkbox']):not([type='radio']),select,textarea{font-size:12px!important;min-height:44px!important}
.btn,.add-btn,.btn-primary,.export-btn,button[type='submit'],.action-btn-primary,.btn-secondary,.secondary-btn,.btn-light,.btn-outline,.action-btn-secondary{font-size:11px!important;min-height:40px!important}
.btn-sm{font-size:10.5px!important;min-height:32px!important}
thead th{font-size:10.3px!important;padding:11px 12px!important}tbody td{font-size:10.8px!important;padding:12px!important}.primary-cell small{font-size:9.5px!important}
.status,.badge,.pill{font-size:9.5px!important;padding:6px 9px!important}.alert{font-size:11px!important}
.summary-item span{font-size:9px!important}.summary-item strong{font-size:12px!important}
.bill-head h1{font-size:20px!important}.bill-total .grand{font-size:14px!important}
.login-box h1{font-size:23px!important}.login-box>p{font-size:12px!important}.login-message{font-size:11px!important}
.repeater-row .remove-row{font-size:14px!important}
@media(max-width:640px){.stat-value{font-size:15px!important}.mobile-bottom-nav a{font-size:9px!important}.mobile-bottom-nav span{font-size:14px!important}}
@media(max-width:980px){.mobile-bottom-nav{grid-template-columns:repeat(5,1fr)!important}}

/* =========================================================
   v1.3 Freight finance calculation blocks
   ========================================================= */
.calculation-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  width:100%;
  margin-top:2px;
}
.calc-box{
  min-width:0;
  padding:12px 14px;
  border:1px solid #dce6f1;
  border-radius:14px;
  background:#f8fbff;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.calc-box span{font-size:9.8px;font-weight:600;color:#526477;text-transform:uppercase;letter-spacing:.02em}
.calc-box strong{font-size:16px;font-weight:650;color:#0c2c50;line-height:1.2}
.calc-box small{font-size:9.2px;color:#748397;line-height:1.35}
@media(max-width:980px){.calculation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.calculation-grid{grid-template-columns:1fr}.calc-box{padding:11px 12px}}


/* =========================================================
   v1.4 Multi-point delivery / point charges
   ========================================================= */
.point-section{
  width:100%;
  border:1px solid #dce6f1;
  border-radius:15px;
  background:#fbfdff;
  padding:14px;
}
.point-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.point-section-head h4{margin:0;font-size:12px;font-weight:650;color:#163a67}
.point-section-head p{margin:2px 0 0;font-size:9.5px;color:#748397}
.point-count-badge{white-space:nowrap;font-size:10px;font-weight:650;color:#174b84;background:#eaf3ff;border:1px solid #cfe1f5;padding:6px 9px;border-radius:999px}
.point-list{display:flex;flex-direction:column;gap:9px}
.point-row{
  display:grid;
  grid-template-columns:minmax(220px,1.5fr) minmax(150px,.7fr) 42px;
  gap:10px;
  align-items:end;
}
.point-row .field{min-width:0}
.point-row .remove-point{width:42px!important;min-width:42px!important;height:44px!important;padding:0!important}
.point-empty{padding:10px 12px;border:1px dashed #cfdbe8;border-radius:12px;color:#738397;font-size:10px;background:#fff}
.point-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid #e6edf5}
.point-total{font-size:10px;color:#607287}.point-total strong{font-size:13px;color:#0c2c50;margin-left:4px}
.calculation-grid.v14{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1180px){.calculation-grid.v14{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.point-row{grid-template-columns:1fr 1fr 42px}.calculation-grid.v14{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.point-row{grid-template-columns:1fr}.point-row .remove-point{width:100%!important}.point-section-head,.point-footer{align-items:flex-start;flex-direction:column}.calculation-grid.v14{grid-template-columns:1fr}}