:root {
  --brand: #0033a0;
  --brand-strong: #0047c6;
  --brand-soft: #e9f0ff;
  --ink: #101c31;
  --muted: #6f7c92;
  --line: #d6dfec;
  --panel: #ffffff;
  --page: #f3f6fb;
  --sidebar: #061527;
  --sidebar-panel: #102238;
  --sidebar-text: #f5f8ff;
  --sidebar-muted: #97a8bf;
  --success: #06986b;
  --purple: #6d48c7;
  --danger: #d3384a;
  --warning: #c58a15;
  --freight-sidebar-width: 246px;
}

html, body { min-height: 100%; }

body {
  color: var(--ink) !important;
  background: var(--page) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  letter-spacing: 0 !important;
}

button, input, select, textarea { font: inherit; letter-spacing: 0; }
.app { background: var(--page) !important; }

@media (min-width: 981px) {
  .app { grid-template-columns: var(--freight-sidebar-width) minmax(0,1fr) !important; }
  .sidebar { width: var(--freight-sidebar-width) !important; min-width: var(--freight-sidebar-width) !important; }
}

.sidebar {
  gap: 0 !important;
  padding: 22px 16px 18px !important;
  color: var(--sidebar-text) !important;
  background: var(--sidebar) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 8px 0 24px rgba(5,20,39,.12) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}

.sideBrand {
  align-items: flex-start !important;
  gap: 15px !important;
  margin: 0 !important;
  padding: 4px 12px 18px !important;
  text-align: left !important;
  border: 0 !important;
}

.sideBrand::before, .sideBrand::after { display: none !important; }
.sideBrand .logo { width: 150px !important; height: 46px !important; margin: 0 !important; justify-content: flex-start !important; }
.sideBrand .logo img { width: 150px !important; max-width: 150px !important; max-height: 46px !important; object-fit: contain !important; }
.sideBrand h1 { width: auto !important; margin: 0 !important; color: #fff !important; font-size: 21px !important; line-height: 1.18 !important; font-weight: 850 !important; text-align: left !important; }
.sideBrand h1::after { content: "FREIGHT RECONCILIATION"; display: block; margin-top: 8px; color: var(--sidebar-muted); font-size: 10px; line-height: 1; font-weight: 500; }

.sideIntelligence {
  display: grid;
  gap: 10px;
  margin: 4px 12px 24px;
  color: #1f7cff;
  font-size: 11px;
  font-weight: 700;
}

.sideIntelligence i {
  position: relative;
  display: block;
  height: 2px;
  background: #0a58d5;
}

.sideIntelligence i::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #0a58d5;
  border-right: 2px solid #0a58d5;
  transform: translateY(-50%) rotate(45deg);
}

.navSectionTitle {
  margin: 0 12px 12px;
  color: var(--sidebar-muted);
  font-size: 10px;
  font-weight: 650;
}

.nav {
  flex: 1 1 auto !important;
  gap: 4px !important;
  margin: 0 -16px !important;
  padding: 0 0 14px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.nav > button,
.nav .navParent,
.accountNav {
  position: relative;
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0,1fr) 18px !important;
  align-items: center !important;
  gap: 11px !important;
  margin: 0 !important;
  padding: 9px 18px !important;
  color: var(--sidebar-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  cursor: pointer;
}

.nav > button::before,
.nav .navParent::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: transparent;
}

.nav > button:hover,
.nav .navParent:hover,
.accountNav:hover { color: #fff !important; background: rgba(255,255,255,.055) !important; }

.nav > button.active,
.nav > button[aria-current="page"] {
  color: #fff !important;
  background: var(--sidebar-panel) !important;
}

.nav > button.active::before,
.nav > button[aria-current="page"]::before { background: #0967ff; }

.nav button > img,
.accountNav > img,
.sideHelp > img {
  width: 23px;
  height: 23px;
  filter: invert(72%) sepia(11%) saturate(744%) hue-rotate(175deg) brightness(92%);
}

.nav > button.active > img,
.nav > button:hover > img,
.nav .navParent:hover > img,
.accountNav:hover > img { filter: brightness(0) invert(1); }

.navCopy { min-width: 0; display: grid; gap: 3px; }
.navCopy b { overflow: hidden; color: inherit; font-size: 14px; line-height: 1.1; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.navCopy small { color: var(--sidebar-muted); font-size: 10px; line-height: 1.1; font-weight: 500; }
.navArrow, .navCaret { justify-self: end; color: inherit; font-size: 25px; line-height: 1; }

.navGroup { flex: 0 0 auto; margin: 0 !important; }
.navGroup .navChildren { background: rgba(255,255,255,.025); }
.navGroup:has(.navChildren .active) > .navParent { color: #fff !important; background: var(--sidebar-panel) !important; }
.navGroup:has(.navChildren .active) > .navParent::before { background: #0967ff; }
.nav button.navSub,
.nav button.navLeaf {
  min-height: 34px !important;
  margin: 0 !important;
  padding: 7px 20px 7px 62px !important;
  color: #879ab4 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

.nav button.navLeaf { padding-left: 74px !important; }
.nav button.navSub::before, .nav button.navLeaf::before { left: 45px !important; width: 7px !important; background: #526981 !important; }
.nav button.navLeaf::before { left: 57px !important; }
.nav button.navSub:hover, .nav button.navLeaf:hover { color: #fff !important; background: rgba(255,255,255,.04) !important; }
.nav button.navSub.active, .nav button.navLeaf.active { color: #fff !important; background: rgba(0,51,160,.28) !important; }

#overviewNavGroup > .navChildren {
  position: relative;
  margin: 2px 10px 5px 42px !important;
  padding: 4px 0 5px 12px !important;
  background: transparent !important;
  border-left: 1px solid rgba(125,158,199,.38);
}
#overviewNavGroup > .navChildren::before {
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 10px;
  height: 1px;
  background: rgba(125,158,199,.38);
}
#overviewNavGroup button.routeNavChild {
  width: calc(100% - 4px) !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(125,158,199,.18) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.035) !important;
  color: #9fb2ca !important;
}
#overviewNavGroup button.routeNavChild::before { display: none !important; }
#overviewNavGroup button.routeNavChild:hover { color: #fff !important; background: rgba(255,255,255,.075) !important; }
#overviewNavGroup button.routeNavChild.active {
  color: #fff !important;
  border-color: rgba(50,116,255,.5) !important;
  background: rgba(13,61,151,.72) !important;
  box-shadow: 0 6px 16px rgba(0,23,76,.22) !important;
}

.sideMeta {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
}

.accountNav {
  width: 100% !important;
  min-height: 50px !important;
  margin-bottom: 8px !important;
  padding-inline: 12px !important;
}

.sideHelp {
  min-height: 48px;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 12px;
  color: var(--sidebar-muted);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
}

.sideHelp small { font-size: 10px; }

.accountCard {
  min-height: 66px;
  display: grid !important;
  grid-template-columns: 40px minmax(0,1fr) 26px;
  align-items: center;
  gap: 10px;
  padding: 10px 8px !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  line-height: 1.2 !important;
}

.accountAvatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #0646bc;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 750;
}

.accountIdentity { min-width: 0; display: grid; gap: 5px; }
.accountIdentity b { overflow: hidden; color: #fff !important; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.accountIdentity small { overflow: hidden; color: var(--sidebar-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.accountLinks { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.accountLinks a { width: 26px !important; height: 26px; display: grid !important; place-items: center; padding: 0 !important; background: transparent !important; }
.accountLinks img { width: 18px; height: 18px; filter: invert(72%) sepia(11%) saturate(744%) hue-rotate(175deg) brightness(92%); }
.accountLinks a:hover img { filter: brightness(0) invert(1); }

.sidebarCollapseToggle {
  top: 102px !important;
  width: 30px !important;
  height: 36px !important;
  color: var(--brand) !important;
  background: #fff !important;
  border-color: var(--line) !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 18px rgba(16,28,49,.16) !important;
}

.main { min-width: 0; padding: 0 22px 32px !important; background: var(--page) !important; }
.workspaceTabsShell { display: none !important; }
.workspaceTabs { min-height: 62px !important; }

.page { color: var(--ink); }
.page > .grid { gap: 12px !important; }
.card, .metric, .analyticsCard, .fuelPanel, .carrier, .step, .tableWrap {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  box-shadow: 0 5px 16px rgba(16,28,49,.055) !important;
}

.card .card, .fuelPanel .card { box-shadow: none !important; }
.metric { min-height: 116px; padding: 17px 18px !important; }
.metric::before { width: 4px !important; background: var(--brand) !important; }
.metric .l { color: var(--muted) !important; font-size: 12px !important; }
.metric .v { color: var(--ink) !important; font-size: 30px !important; }
.hd { min-height: 58px; padding: 13px 17px !important; background: #fff !important; border-bottom: 1px solid var(--line) !important; }
.hd h2 { color: var(--ink) !important; font-size: 16px !important; }
.body { padding: 16px !important; }
.tag, .pill, .badge, .status { border-radius: 999px !important; }
.tag { color: #154ca7 !important; background: var(--brand-soft) !important; border: 1px solid #c5d6f4 !important; }

.btn, button.btn, input[type="button"], input[type="submit"] {
  min-height: 40px;
  color: #fff !important;
  background: var(--brand) !important;
  border: 1px solid var(--brand) !important;
  border-radius: 5px !important;
  box-shadow: 0 4px 10px rgba(0,51,160,.12) !important;
}

.btn:hover, button.btn:hover { background: #002983 !important; border-color: #002983 !important; }
.linkBtn { color: var(--brand) !important; }
input, select, textarea { color: var(--ink) !important; background: #fff !important; border-color: #c7d2e2 !important; border-radius: 5px !important; }
input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(0,51,160,.12) !important; }

.tableWrap { overflow: auto !important; }
table { color: var(--ink) !important; }
th { color: #53647c !important; background: #f1f4f9 !important; font-weight: 750 !important; }
td { color: var(--ink) !important; }
th, td { border-color: #e5ebf3 !important; }
tbody tr:hover td { background: #f8faff; }
.note { color: #53647c !important; background: #f6f8fc !important; border: 1px solid var(--line) !important; border-radius: 5px !important; }
.ok, .success { color: var(--success) !important; background: #e8f7f1 !important; }
.warn { color: #8e6207 !important; background: #fff6de !important; }
.bad, .danger { color: var(--danger) !important; background: #fff0f2 !important; }
.barFill { background: var(--brand) !important; }

@media (max-width: 1180px) and (min-width: 981px) {
  :root { --freight-sidebar-width: 214px; }
  .sidebar { padding-inline: 12px !important; }
  .nav { margin-inline: -12px !important; }
  .nav > button, .nav .navParent { grid-template-columns: 30px minmax(0,1fr) 15px !important; padding-inline: 14px !important; }
  .sideBrand h1 { font-size: 18px !important; }
}

@media (max-width: 980px) {
  .sidebar { position: relative !important; width: 100% !important; height: auto !important; min-height: auto; border-radius: 0 !important; }
  .sideBrand { align-items: center !important; text-align: center !important; }
  .sideBrand .logo { justify-content: center !important; }
  .sideBrand h1 { text-align: center !important; }
  .sideIntelligence, .navSectionTitle { display: none; }
  .nav { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; margin: 0 !important; gap: 6px !important; }
  .nav > button, .nav .navParent { background: rgba(255,255,255,.04) !important; border-radius: 5px !important; }
  .navGroup { grid-column: 1 / -1; }
  .navGroup .navChildren { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .nav button.navSub, .nav button.navLeaf { padding-left: 24px !important; }
  .nav button.navSub::before, .nav button.navLeaf::before { display: none; }
  .sideMeta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .accountCard { grid-column: 1 / -1; }
  .main { padding: 14px !important; }
}

@media (max-width: 620px) {
  .nav { grid-template-columns: 1fr !important; }
  .navGroup .navChildren { grid-template-columns: 1fr; }
  .sideMeta { grid-template-columns: 1fr; }
  .accountCard { grid-column: auto; }
  .main { padding: 10px !important; }
}