:root {
  --navy: #081827;
  --navy-2: #0d2236;
  --navy-3: #14324d;
  --blue: #1688ed;
  --blue-dark: #0873d1;
  --blue-soft: #eaf5ff;
  --lime: #8bd91c;
  --ink: #172435;
  --ink-2: #34465b;
  --muted: #718096;
  --line: #e2e9f1;
  --line-2: #eef2f7;
  --surface: #ffffff;
  --bg: #f4f7fb;
  --red: #d83b4c;
  --amber: #dc8a08;
  --green: #4b9a28;
  --radius: 16px;
  --shadow: 0 12px 34px rgba(18, 40, 65, .055);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
body.app-body { padding-left: 238px; }

/* Navigation */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 238px; z-index: 30;
  display: flex; flex-direction: column;
  color: #d9e6f2;
  background: linear-gradient(180deg, #071625 0%, #0a1e31 100%);
  border-right: 1px solid rgba(255,255,255,.045);
}
.brand {
  height: 82px; flex: 0 0 82px; display: flex; align-items: center; gap: 11px;
  padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.065);
}
.brand-mark { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.035); }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand-copy { min-width: 0; }
.brand-copy strong { display: block; overflow: hidden; color: #fff; font-size: 13.5px; font-weight: 720; letter-spacing: -.015em; white-space: nowrap; text-overflow: ellipsis; }
.brand-copy small { display: block; overflow: hidden; margin-top: 3px; color: #718da5; font-size: 7.5px; font-weight: 750; letter-spacing: .115em; white-space: nowrap; text-overflow: ellipsis; }
.nav { flex: 1; overflow-y: auto; padding: 16px 12px 20px; scrollbar-width: thin; scrollbar-color: #2d4a64 transparent; }
.nav > a, .nav-group-toggle, .nav-group-items a {
  width: 100%; border: 0; color: #c5d4e1; background: transparent;
  display: flex; align-items: center; gap: 8px; border-radius: 9px; cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.nav-icon { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .82; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group-items .nav-icon { width: 15px; height: 15px; flex-basis: 15px; opacity: .7; }
.nav a:hover .nav-icon, .nav a.active .nav-icon, .nav-group-toggle:hover .nav-icon { opacity: 1; }
.nav > a { padding: 10px 12px; margin-bottom: 8px; font-size: 13px; font-weight: 650; }
.nav-group { margin: 4px 0; }
.nav-group-toggle { padding: 10px 12px; color: #aebfd0; font-size: 12.75px; font-weight: 650; text-align: left; }
.nav-group-toggle i { margin-left: auto; color: #6f8ba4; font-size: 20px; font-style: normal; transform: rotate(0); transition: transform .18s ease; }
.nav-group.open .nav-group-toggle i { transform: rotate(90deg); }
.nav-group-items { display: none; margin: 2px 0 9px; padding: 3px 0 3px 7px; }
.nav-group.open .nav-group-items { display: block; }
.nav-group-items a { padding: 8px 12px; margin: 2px 0; color: #90a8bc; font-size: 12.5px; font-weight: 520; }
.nav > a:hover, .nav-group-toggle:hover, .nav-group-items a:hover { color: #fff; background: rgba(255,255,255,.055); }
.nav a.active { color: #fff; background: linear-gradient(90deg, rgba(22,136,237,.25), rgba(22,136,237,.12)); box-shadow: inset 2px 0 0 #42a5f5; }
.nav-home { margin-bottom: 10px !important; }
.sidebar-user {
  flex: 0 0 auto; padding: 13px 14px 12px;
  border-top: 1px solid rgba(255,255,255,.075); background: rgba(0,0,0,.10);
}
.sidebar-user-profile { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 2px; }
.sidebar-user-profile > span:last-child { min-width: 0; }
.sidebar-user strong { display: block; color: #f6f9fc; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user small { display: block; color: #7895af; font-size: 10.5px; margin-top: 1px; }
.sidebar-user-actions { display: flex; align-items: center; gap: 5px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.055); }
.sidebar-user-actions a { padding: 5px 7px; color: #829cb2; border-radius: 7px; font-size: 10.5px; font-weight: 600; }
.sidebar-user-actions a:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar-user-actions .logout { margin-left: auto; color: #d9929a; }
.avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: inline-grid; place-items: center; background: #143553; color: #8fd528; font-size: 11px; font-weight: 800; }
.avatar.small { width: 31px; height: 31px; flex-basis: 31px; border-radius: 9px; background: var(--blue-soft); color: var(--blue-dark); }
.sidebar-scrim { display: none; }

/* Top bar */
.topbar {
  min-height: 62px; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 32px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px);
}
.top-left { min-width: 175px; display: flex; align-items: center; }
.top-left { gap: 12px; }
.topbar-context { display: flex; align-items: baseline; gap: 9px; }
.topbar-context > span { color: #90a0b1; font-size: 9px; font-weight: 800; letter-spacing: .105em; text-transform: uppercase; }
.crumb { font-size: 13.5px; font-weight: 700; color: #263a50; }
.topbar-actions { display: flex; align-items: center; gap: 13px; }
.topbar-date { padding-right: 13px; color: #7b8b9d; border-right: 1px solid #e7ecf2; font-size: 11.5px; font-weight: 560; }
.topbar-primary { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; color: #fff; background: #0f7fdc; border: 1px solid #0f7fdc; border-radius: 9px; box-shadow: 0 4px 11px rgba(15,127,220,.14); font-size: 11.5px; font-weight: 700; }
.topbar-primary:hover { background: #0871c5; border-color: #0871c5; }
.page-guide { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; }
.page-guide-label { margin-right: 3px; color: #8b99a9; font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.guide-step { min-width: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; color: #607286; border: 1px solid #e5ebf1; border-radius: 8px; background: #fafcfe; font-size: 9.5px; font-weight: 600; white-space: nowrap; }
.guide-step i { width: 17px; height: 17px; flex: 0 0 17px; display: inline-grid; place-items: center; color: #127acf; background: #e9f4fd; border-radius: 50%; font-size: 8px; font-style: normal; font-weight: 800; }
.menu-toggle { display: none; width: 38px; height: 38px; border: 0; border-radius: 10px; background: #f0f4f8; color: var(--ink); cursor: pointer; }

/* Tenant branding */
.branding-grid { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 20px; align-items: center; }
.branding-preview { height: 126px; display: grid; place-items: center; padding: 16px; overflow: hidden; border: 1px solid #dfe7ef; border-radius: 13px; background: linear-gradient(135deg,#071625,#0d2944); }
.branding-preview img { max-width: 100%; max-height: 92px; display: block; object-fit: contain; }
.branding-copy h3 { margin: 0 0 5px; font-size: 14px; }
.branding-copy p { max-width: 680px; margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.branding-copy input[type=file] { max-width: 520px; }
.company-secret-card { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(380px,.85fr); gap: 28px; align-items: center; margin-bottom: 16px; }
.company-secret-card .form-section-title { margin-bottom: 8px; }
.secret-card-copy p { margin: 0 0 5px; color: #52667b; font-size: 12.5px; }
.secret-card-copy small { color: #8593a2; font-size: 10.5px; }
.secret-form { padding: 13px; border: 1px solid #e4eaf1; border-radius: 12px; background: #fafcfe; }
.secret-form .actions { margin-top: 9px; }
.secret-form .ai-settings-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.secret-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; color: #986612; background: #fff6e5; border-radius: 99px; font-size: 9.5px; font-weight: 750; text-transform: uppercase; }
.secret-status.configured { color: #397d1f; background: #edf8e8; }

/* Layout and typography */
.content { width: min(100%, 1510px); margin: 0 auto; padding: 30px 32px 54px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 0 0 20px; }
.page-head h1 { margin: 0 0 5px; font-size: 24px; line-height: 1.18; font-weight: 720; letter-spacing: -.035em; color: #142236; }
.page-head p { margin: 0; color: var(--muted); font-size: 13px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.muted { color: var(--muted); }
.right { text-align: right; }

/* Cards */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.card, .panel {
  background: var(--surface); border: 1px solid rgba(214,224,235,.88); border-radius: var(--radius); box-shadow: var(--shadow);
}
.card { padding: 18px; }
.card h2, .card h3 { margin: 0 0 14px; font-size: 15px; font-weight: 700; }
.panel { overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 49px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 14px; font-weight: 700; }
.stat { padding: 17px 18px; box-shadow: none; }
.stat .label { color: var(--muted); font-size: 11.5px; font-weight: 650; }
.stat strong { display: block; margin-top: 4px; color: #102139; font-size: 25px; line-height: 1.15; font-weight: 720; letter-spacing: -.035em; }
.stat .trend { margin-top: 5px; color: #679054; font-size: 11px; }

/* Forms */
.toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; padding: 15px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(18,40,65,.035); }
.field { display: flex; flex: 1; min-width: 145px; flex-direction: column; gap: 5px; }
.field.compact { flex: 0 0 156px; }
.field label, label { color: #5b6e83; font-size: 10.5px; line-height: 1.2; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
input, select, textarea { width: 100%; min-height: 38px; padding: 8px 10px; color: #18293c; background: #fff; border: 1px solid #d8e1eb; border-radius: 9px; outline: none; transition: border .15s, box-shadow .15s; }
textarea { min-height: 92px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #61adeb; box-shadow: 0 0 0 3px rgba(22,136,237,.1); }
.form-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.form-section { margin: 0 0 17px; }
.form-section h3 { margin: 0 0 13px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.form-card.narrow { max-width: 680px; }
.settings-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); gap: 16px; align-items: start; }
.settings-card-head { margin-bottom: 16px; }
.settings-card-head h2 { margin-bottom: 3px; }
.settings-card-head p { margin: 0; font-size: 12px; color: var(--muted); }

/* Premium workflow surfaces */
.ai-extract-card { position: relative; overflow: hidden; margin-bottom: 16px; padding: 0; color: #eaf4ff; border: 0; background: linear-gradient(118deg,#0a2035 0%,#0c3153 56%,#0b4b76 100%); box-shadow: 0 18px 46px rgba(6,38,65,.16); }
.ai-extract-card:after { content: ""; position: absolute; width: 330px; height: 330px; right: -135px; top: -190px; border-radius: 50%; background: radial-gradient(circle,rgba(71,173,255,.34),rgba(71,173,255,0) 68%); pointer-events: none; }
.ai-extract-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.75fr); align-items: center; gap: 26px; padding: 22px 24px; }
.ai-copy { display: flex; align-items: flex-start; gap: 14px; }
.ai-symbol { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 11px; background: rgba(255,255,255,.09); color: #a8ddff; font-size: 17px; }
.ai-copy h2 { margin: 1px 0 4px; color: #fff; font-size: 16px; letter-spacing: -.015em; }
.ai-copy p { max-width: 650px; margin: 0; color: #a9bfd1; font-size: 12.5px; }
.ai-badge { display: inline-flex; margin-bottom: 6px; color: #91cdfb; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ai-upload { display: flex; align-items: end; gap: 9px; padding: 10px; border: 1px solid rgba(255,255,255,.11); border-radius: 12px; background: rgba(3,17,29,.25); }
.ai-upload .field { gap: 4px; }
.ai-upload label { color: #9fb8cb; }
.ai-upload input[type=file] { min-height: 38px; padding: 7px 9px; color: #d9e8f3; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.07); }
.ai-upload input[type=file]::file-selector-button { margin-right: 9px; padding: 5px 8px; color: #ddebF6; border: 0; border-radius: 6px; background: rgba(255,255,255,.10); cursor: pointer; }
.ai-upload .btn { flex: 0 0 auto; border-color: #279bf3; background: #1688ed; color: #fff; }
.extraction-note { margin: -3px 0 16px; padding: 10px 13px; border: 1px solid #cfe6f8; border-radius: 10px; background: #eff8ff; color: #37627f; font-size: 12px; }
.workflow-card { display:grid; grid-template-columns:minmax(230px,.55fr) minmax(0,1.45fr); gap:20px; align-items:center; margin-bottom:14px; padding:15px 17px; color:#dcebf7; background:linear-gradient(120deg,#0a2033,#0b2c47); border:1px solid #173b58; border-radius:13px; box-shadow:0 12px 28px rgba(9,30,48,.08); }
.workflow-intro strong,.workflow-intro span { display:block; }.workflow-intro strong { color:#fff; font-size:11.5px; }.workflow-intro span { margin-top:4px; color:#92aec4; font-size:9.5px; line-height:1.45; }
.workflow-steps { display:flex; align-items:center; justify-content:flex-end; gap:9px; }.workflow-steps > div { min-width:125px; display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid rgba(255,255,255,.09); border-radius:9px; background:rgba(255,255,255,.045); }.workflow-steps b { width:23px; height:23px; display:grid; flex:0 0 23px; place-items:center; color:#a9d7f8; background:#133a58; border-radius:7px; font-size:9px; }.workflow-steps strong,.workflow-steps small { display:block; }.workflow-steps strong { color:#eef7fd; font-size:9.5px; }.workflow-steps small { margin-top:1px; color:#829db2; font-size:8px; }.workflow-steps i { color:#55748c; font-style:normal; font-size:12px; }
.ratecon-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:14px 0 10px; }.ratecon-metrics > div { display:flex; align-items:center; justify-content:space-between; min-height:54px; padding:10px 13px; background:#fff; border:1px solid var(--line); border-radius:11px; }.ratecon-metrics span { color:#77889a; font-size:9.5px; font-weight:650; }.ratecon-metrics strong { color:#20364b; font-size:17px; }
.form-section-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 11px; border-bottom: 1px solid var(--line-2); }
.form-section-title h3 { margin: 0; padding: 0; border: 0; }
.form-section-title span { color: var(--muted); font-size: 11px; }
.choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.choice-card { display: flex; align-items: flex-start; gap: 11px; min-height: 76px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe; cursor: pointer; transition: border .15s,background .15s,box-shadow .15s; text-transform: none; letter-spacing: normal; }
.choice-card:hover { border-color: #bad9f1; background: #f7fbff; }
.choice-card:has(input:checked) { border-color: #7bbceb; background: #f1f8fe; box-shadow: 0 0 0 3px rgba(22,136,237,.06); }
.choice-card input { width: 17px; min-height: 17px; height: 17px; flex: 0 0 17px; margin: 2px 0 0; accent-color: var(--blue); }
.choice-card strong { display: block; color: #20344b; font-size: 12.5px; font-weight: 700; }
.choice-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 450; line-height: 1.35; }
.danger-zone { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:18px; border-color:#f1cfd3; background:#fffafb; }
.danger-zone h3 { margin:4px 0 4px; color:#8f2732; font-size:13px; }.danger-zone p { max-width:780px; margin:0; color:#7d6670; font-size:10.5px; line-height:1.5; }
.danger-zone-action { display:grid; gap:9px; min-width:260px; }.danger-zone-action label { display:flex; align-items:center; gap:7px; color:#795d64; font-size:9.5px; font-weight:600; text-transform:none; letter-spacing:0; }.danger-zone-action input[type=checkbox] { width:15px; height:15px; min-height:0; accent-color:#c23d49; }
.broker-form { margin-bottom: 16px; }
.broker-form .form-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.broker-address { color: #3e5369; line-height: 1.35; }
.broker-address small { display: block; color: var(--muted); font-size: 10.5px; }

/* Buttons */
.btn { min-height: 37px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 13px; border: 1px solid #dbe3ec; border-radius: 9px; background: #fff; color: #263b52; font-size: 12.5px; font-weight: 650; cursor: pointer; transition: .15s ease; }
.btn:hover { transform: translateY(-1px); border-color: #bfd0df; box-shadow: 0 4px 12px rgba(21,50,80,.07); }
.btn.primary { color: #fff; border-color: var(--blue); background: var(--blue); }
.btn.primary:hover { border-color: var(--blue-dark); background: var(--blue-dark); }
.btn.success { color: #fff; border-color: #66a931; background: #66a931; }
.btn.danger { color: #c23342; border-color: #ffd0d5; background: #fff4f5; }
.btn.wide { width: 100%; margin-top: 8px; }

/* Tables */
.table-wrap { overflow: auto; }
.table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.table th { padding: 10px 13px; text-align: left; color: #718095; background: #fafbfd; border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 730; letter-spacing: .055em; text-transform: uppercase; }
.table td { padding: 11px 13px; border-bottom: 1px solid var(--line-2); font-size: 13px; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fbfdff; }
.table td strong { font-size: 13px; font-weight: 680; }
.money { font-variant-numeric: tabular-nums; font-weight: 680; }
.empty { padding: 34px 24px; color: var(--muted); text-align: center; }

/* Status and notices */
.badge, .role-pill, .status { display: inline-flex; align-items: center; border-radius: 999px; font-weight: 720; }
.badge, .role-pill { padding: 4px 8px; color: #1571b8; background: #eaf5ff; font-size: 10px; }
.status { padding: 4px 8px; color: #526a80; background: #edf3f8; font-size: 9.5px; letter-spacing: .025em; text-transform: uppercase; }
.status.Delivered, .status.Paid, .status.Valid, .status.Imported { color: #438324; background: #edf9e8; }
.status.Active, .status.Completed, .status.Closed { color: #438324; background: #edf9e8; }
.status.OnRoad, .status.Invoiced, .status.Sent, .status.Extracting { color: #176fae; background: #eaf5ff; }
.status.InProgress, .status.Investigating, .status.Submitted { color: #176fae; background: #eaf5ff; }
.status.Canceled, .status.Expired, .status.Void, .status.Terminated, .status.Denied, .status.Failed { color: #be3443; background: #fff0f2; }
.status.AtShipper, .status.AtReceiver, .status.DueSoon { color: #9a6209; background: #fff6e5; }
.status.Scheduled, .status.Review { color: #9a6209; background: #fff6e5; }
.alert { margin: 12px 0; padding: 11px 13px; color: #365a78; background: #f3f9fe; border: 1px solid #dceaf6; border-radius: 10px; font-size: 12.5px; }
.alert.success { color: #447d28; background: #f0faeb; border-color: #d7edca; }
.alert.danger { color: #b42e3c; background: #fff2f3; border-color: #ffd6da; }
.alert.warning { color: #875b11; background: #fff8e8; border-color: #f4e2b5; }
.trace-details { margin-top: 7px; }
.trace-details summary { width: fit-content; color: #1477be; cursor: pointer; font-size: 10.5px; font-weight: 650; }
.trace-details pre { max-width: 800px; max-height: 330px; overflow: auto; margin: 8px 0 0; padding: 11px; color: #d8e5ef; background: #0b1928; border-radius: 8px; font: 10.5px/1.45 Consolas,"Courier New",monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.error-table td:nth-child(3) { min-width: 420px; white-space: normal; }
.log-page { max-width: 280px; display: block; overflow: hidden; text-overflow: ellipsis; }
.error-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.print-tip { align-self: center; color: #7b8b9c; font-size: 10.5px; }

/* Quick load status */
.mini-stat-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.mini-stat { min-height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }
.mini-stat span { color: #718297; font-size: 10.5px; font-weight: 650; }
.mini-stat strong { color: #14263a; font-size: 22px; font-variant-numeric: tabular-nums; }
.quick-status-panel .panel-head { align-items: flex-end; }
.quick-filter-head { display:grid; grid-template-columns:minmax(280px,1fr) auto; align-items:end; gap:18px; padding:16px 18px 13px; border-bottom:1px solid var(--line); }
.quick-filter-head > div { min-width:0; }
.quick-filter-head h2 { margin:0; font-size:14px; }.quick-filter-head p { margin:3px 0 0; color:#8190a1; font-size:10px; }
.quick-filter-form { display:grid; grid-template-columns:210px 156px 156px auto auto; align-items:end; gap:7px; min-width:0; }.quick-filter-form .field { min-width:0; }.quick-filter-form .field.compact { min-width:0; }.quick-filter-form input,.quick-filter-form select { width:100%; padding:7px 9px; font-size:11px; }.quick-filter-form > .btn { white-space:nowrap; }
.quick-status-table td { vertical-align: middle; }
.table-sub { display: block; margin-top: 3px; color: #8291a1; font-size: 9.5px; font-weight: 550; }
.route-compact { min-width: 215px; display: flex; align-items: center; gap: 7px; color: #708196; font-size: 11px; white-space: nowrap; }
.route-compact i { color: #98a8b7; font-style: normal; }
.route-compact strong { color: #273b50; font-weight: 680; }
.quick-status-form { min-width: 230px; display: flex; align-items: center; gap: 7px; }
.quick-status-form select { min-width: 145px; padding: 7px 30px 7px 9px; font-size: 11px; font-weight: 650; }

/* Settlement work queue */
.settlement-history-head { display:grid; grid-template-columns:minmax(260px,1fr) auto; gap:18px; align-items:end; }
.settlement-history-head h2 { margin:0 0 3px; }.settlement-history-head p { margin:0; font-size:10px; }
.settlement-history-filter { display:grid; grid-template-columns:190px 175px 135px auto; gap:7px; align-items:end; }
.settlement-history-filter .field { min-width:0; }.settlement-history-filter input,.settlement-history-filter select { width:100%; padding:7px 9px; font-size:10.5px; }.settlement-history-filter .btn { white-space:nowrap; }
.settlement-history-actions { display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; }
.settlement-history-foot { display:flex; justify-content:space-between; gap:12px; padding:9px 14px; color:#8593a1; border-top:1px solid #edf1f5; font-size:9.5px; }.settlement-history-foot a { color:#1677bd; font-weight:650; }
.settlement-note-card { margin-top:12px; }.settlement-note-card textarea { min-height:120px; resize:vertical; }.settlement-create-actions { justify-content:flex-end; margin-top:12px; }

/* Operational workspaces - shared visual language with Support */
.workspace-layout { display:grid; grid-template-columns:minmax(300px,.60fr) minmax(0,1.40fr); gap:16px; align-items:start; }
.workspace-create-card { position:sticky; top:78px; }
.workspace-create-form { display:grid; gap:12px; margin-top:16px; }
.workspace-create-form textarea { min-height:105px; }
.form-grid.two-compact { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.workspace-tip { display:flex; align-items:center; gap:9px; margin-top:17px; padding-top:14px; border-top:1px solid #edf1f5; }
.workspace-tip > span { width:34px; height:34px; display:grid; flex:0 0 34px; place-items:center; color:#7fcb27; background:#102d47; border-radius:9px; font-size:10px; font-weight:800; }
.workspace-tip strong,.workspace-tip small { display:block; }.workspace-tip strong { color:#35495d; font-size:10.5px; }.workspace-tip small { margin-top:1px; color:#8392a1; font-size:9.5px; line-height:1.4; }
.workspace-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:10px; }
.workspace-metrics > div { display:flex; align-items:center; justify-content:space-between; min-height:58px; padding:10px 13px; background:#fff; border:1px solid var(--line); border-radius:11px; }
.workspace-metrics span { color:#76879a; font-size:9.5px; font-weight:650; }.workspace-metrics strong { color:#1f354b; font-size:17px; font-variant-numeric:tabular-nums; }
.workspace-metrics .metric-warning strong { color:#b26e08; }.workspace-metrics .resolved { background:#f8fafc; }
.workspace-list-card { padding:0; overflow:hidden; }
.workspace-list-head { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 19px 13px; }
.workspace-list-head h2 { margin:0; font-size:14px; }.workspace-list-head p { margin:3px 0 0; color:#8190a1; font-size:10px; }
.workspace-search { min-width:330px; display:flex; gap:6px; }.workspace-search input,.workspace-search select { min-width:0; padding:7px 9px; font-size:11px; }.workspace-search input { flex:1; }
.driver-search { min-width:470px; }.driver-search select { width:145px; flex:0 0 145px; }.driver-search input { min-width:220px; }
.workspace-tabs { display:flex; gap:5px; padding:0 19px 12px; border-bottom:1px solid #edf1f5; }
.workspace-tab { padding:6px 9px; color:#718397; border-radius:7px; font-size:10px; font-weight:680; }.workspace-tab:hover { background:#f2f6f9; }.workspace-tab.active { color:#0f72bd; background:#eaf5fe; }
.record-list { display:grid; }
.record-row { display:grid; grid-template-columns:38px minmax(230px,1fr) minmax(95px,.22fr) auto minmax(215px,auto); gap:11px; align-items:center; min-height:76px; padding:12px 17px; border-bottom:1px solid #edf1f5; transition:background .15s ease; }
.record-row:last-child { border-bottom:0; }.record-row:hover { background:#f9fbfd; }
.record-icon { width:34px; height:34px; display:grid; place-items:center; color:#1674b9; background:#e8f4fd; border-radius:9px; font-size:9px; font-weight:800; letter-spacing:.02em; }.record-icon.danger { color:#b73543; background:#fff0f2; }
.record-main { min-width:0; }.record-main > div { display:flex; align-items:center; gap:7px; min-width:0; }.record-main strong { overflow:hidden; color:#26394d; font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }
.record-main small { display:block; margin-top:4px; overflow:hidden; color:#8492a2; font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }.record-main p { max-width:700px; margin:5px 0 0; overflow:hidden; color:#697b8e; font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.record-badge { padding:3px 6px; color:#65788c; background:#eef3f7; border-radius:99px; font-size:8px; font-weight:750; text-transform:uppercase; }.record-badge.danger { color:#b52c3b; background:#fff0f1; }
.record-meta span,.record-meta strong { display:block; }.record-meta span { color:#8b98a6; font-size:8.5px; }.record-meta strong { margin-top:2px; color:#43586c; font-size:10.5px; }.text-warning { color:#a66b0e !important; }
.record-action { display:flex; align-items:center; justify-content:flex-end; gap:6px; }.record-action select,.record-action input { min-width:0; padding:7px 28px 7px 8px; font-size:10.5px; }.record-action select { min-width:118px; }.record-action .money-input { width:82px; padding-right:8px; }
.workspace-empty { padding:48px 20px; }

/* Company SMTP */
.smtp-settings-card { margin-bottom: 16px; padding: 22px; }
.smtp-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(330px,.62fr); gap: 28px; align-items: start; margin-bottom: 18px; padding-bottom: 17px; border-bottom: 1px solid #e8edf2; }
.smtp-heading p { max-width: 720px; margin: 3px 0 0; color: #627488; font-size: 12px; }
.smtp-port-tip { display: grid; gap: 3px; padding: 11px 13px; color: #496078; background: #f5f9fc; border: 1px solid #e2eaf1; border-radius: 10px; }
.smtp-port-tip strong { color: #263b50; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.smtp-port-tip span { font-size: 11px; font-weight: 650; }
.smtp-port-tip small { color: #7f8fa0; font-size: 9.5px; line-height: 1.4; }
.smtp-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.smtp-check { min-height: 62px; display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 10px 12px; border: 1px solid #dfe7ef; border-radius: 9px; background: #fafcfe; cursor: pointer; }
.smtp-check input { width: 16px !important; height: 16px; flex: 0 0 16px; margin: 0 !important; }
.smtp-check strong, .smtp-check small { display: block; }
.smtp-check strong { color: #334a61; font-size: 11px; }
.smtp-check small { margin-top: 2px; color: #8190a0; font-size: 9.5px; }

/* Support center */
.support-layout { display: grid; grid-template-columns: minmax(300px,.64fr) minmax(0,1.36fr); gap: 16px; align-items: start; }
.support-create-card { position: sticky; top: 78px; }
.support-create-form { display: grid; gap: 12px; margin-top: 16px; }
.support-create-form textarea { min-height: 150px; }
.support-contact-note { display: flex; align-items: center; gap: 9px; margin-top: 17px; padding-top: 14px; border-top: 1px solid #edf1f5; }
.support-contact-note > span { width: 34px; height: 34px; display: grid; place-items: center; color: #7fcb27; background: #102d47; border-radius: 9px; font-size: 9px; font-weight: 800; }
.support-contact-note strong, .support-contact-note small { display: block; }
.support-contact-note strong { color: #35495d; font-size: 10.5px; }
.support-contact-note small { margin-top: 1px; color: #8392a1; font-size: 9.5px; }
.support-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-bottom: 10px; }
.support-metrics > div { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 10px 13px; background: #fff; border: 1px solid var(--line); border-radius: 11px; }
.support-metrics span { color: #76879a; font-size: 9.5px; font-weight: 650; }
.support-metrics strong { color: #1f354b; font-size: 17px; }
.support-metrics .resolved { background: #f8fafc; }
.support-list-card { padding: 0; overflow: hidden; }
.support-list-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 19px 13px; }
.support-list-head h2 { margin: 0; font-size: 14px; }
.support-list-head p { margin: 3px 0 0; color: #8190a1; font-size: 10px; }
.support-search { min-width: 300px; display: flex; gap: 6px; }
.support-search input { min-width: 0; padding: 7px 9px; font-size: 11px; }
.support-tabs { display: flex; gap: 5px; padding: 0 19px 12px; border-bottom: 1px solid #edf1f5; }
.support-tab { padding: 6px 9px; color: #718397; border-radius: 7px; font-size: 10px; font-weight: 680; }
.support-tab:hover { background: #f2f6f9; }
.support-tab.active { color: #0f72bd; background: #eaf5fe; }
.ticket-list { display: grid; }
.ticket-row { display: grid; grid-template-columns: 46px minmax(0,1fr) auto 58px; gap: 11px; align-items: center; min-height: 70px; padding: 12px 18px; border-bottom: 1px solid #edf1f5; transition: background .15s ease; }
.ticket-row:last-child { border-bottom: 0; }
.ticket-row:hover { background: #f9fbfd; }
.ticket-id { color: #7d8b9a; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ticket-main { min-width: 0; }
.ticket-main > div { display: flex; align-items: center; gap: 7px; }
.ticket-main strong { overflow: hidden; color: #26394d; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.ticket-main small { display: block; margin-top: 4px; overflow: hidden; color: #8492a2; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.priority { padding: 3px 6px; color: #65788c; background: #eef3f7; border-radius: 99px; font-size: 8px; font-weight: 750; text-transform: uppercase; }
.priority-Urgent { color: #b52c3b; background: #fff0f1; }.priority-High { color: #a1660b; background: #fff5e4; }
.ticket-status { display: inline-flex; padding: 4px 7px; color: #536b80; background: #edf3f7; border-radius: 99px; font-size: 8.5px; font-weight: 760; letter-spacing: .025em; text-transform: uppercase; }
.ticket-status-Open { color: #9a650e; background: #fff5e4; }.ticket-status-Replied { color: #176fae; background: #eaf5ff; }.ticket-status-Answered { color: #6554b5; background: #f0edff; }.ticket-status-Resolved { color: #4c7e37; background: #eef8ea; }
.ticket-open { color: #1680d1; font-size: 9.5px; font-weight: 680; text-align: right; }
.support-empty { padding: 48px 20px; }
.back-link { display: inline-block; margin-bottom: 9px; color: #167cc7; font-size: 10px; font-weight: 650; }
.ticket-title-line { display: flex; align-items: center; gap: 9px; }
.ticket-title-line h1 { margin: 0; }
.ticket-number { color: #8291a1; font-size: 11px; font-weight: 750; }
.ticket-detail-head p { margin: 6px 0 0; }
.ticket-detail-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(320px,.55fr); gap: 16px; align-items: start; }
.conversation-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid #edf1f5; }
.conversation-head h2 { margin: 0; font-size: 14px; }.conversation-head span { color: #8291a0; font-size: 9.5px; }
.conversation-thread { display: grid; gap: 10px; margin-top: 15px; }
.conversation-message { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; padding: 13px; border: 1px solid #e5ebf1; border-radius: 11px; background: #fbfcfd; }
.conversation-message.support-reply { border-color: #dcecf9; background: #f5faff; }
.message-avatar { width: 34px; height: 34px; display: grid; place-items: center; color: #1774b9; background: #e5f3fd; border-radius: 9px; font-size: 9px; font-weight: 800; }
.conversation-message header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.conversation-message header strong { color: #2b4055; font-size: 10.5px; }.conversation-message header span { color: #8a98a7; font-size: 8.5px; }
.message-body { margin-top: 7px; color: #4e6074; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.ticket-side { display: grid; gap: 13px; }.reply-card textarea { min-height: 170px; margin: 12px 0 10px; }
.ticket-summary h3 { margin: 0 0 12px; font-size: 12px; }.ticket-summary dl { display: grid; grid-template-columns: 85px minmax(0,1fr); gap: 9px; margin: 0; font-size: 10.5px; }
.ticket-summary dt { color: #8795a4; }.ticket-summary dd { margin: 0; color: #405469; font-weight: 650; }
.resolved-card { text-align: center; }.resolved-card > span { width: 38px; height: 38px; display: grid; place-items: center; margin: 0 auto 8px; color: #4c922e; background: #edf8e8; border-radius: 50%; font-size: 18px; }.resolved-card h2 { margin: 0; font-size: 13px; }.resolved-card p { margin: 5px 0 0; color: #7e8e9e; font-size: 10.5px; }

/* First-run IT access */
.initialize-card { width: min(500px,100%); }
.it-credential-box { margin: 17px 0; padding: 15px; border: 1px solid #d6e7f4; border-radius: 12px; background: #f5faff; }
.it-credential-box > span { display: block; margin-bottom: 10px; color: #1677bd; font-size: 8.5px; font-weight: 800; letter-spacing: .1em; }
.it-credential-box > div { display: grid; grid-template-columns: 125px minmax(0,1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid #e3edf5; }
.it-credential-box small { color: #8190a1; font-size: 9.5px; }.it-credential-box strong { color: #25394e; font: 650 11px/1.4 "Segoe UI",Arial,sans-serif; overflow-wrap: anywhere; }
.it-credential-box p { margin: 10px 0 0 !important; color: #7d8c9c; font-size: 9.5px !important; }
.it-admin-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; padding: 15px 17px; }
.it-admin-strip h3 { margin: 2px 0 3px; font-size: 12px; }.it-admin-strip p { margin: 0; color: #7d8d9d; font-size: 10.5px; }.it-admin-state { display: flex; align-items: center; gap: 8px; }
.it-inline-credentials { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; padding: 12px 14px; color: #4b6176; background: #f1f8fd; border: 1px solid #d6e8f5; border-radius: 10px; font-size: 10.5px; }.it-inline-credentials code { padding: 5px 7px; color: #0d5f9d; background: #fff; border: 1px solid #d8e5ef; border-radius: 6px; font-size: 11px; }.it-inline-credentials span { color: #7e8e9e; }

/* Dispatch */
.week-board { display: grid; grid-template-columns: repeat(7,minmax(170px,1fr)); gap: 9px; overflow: auto; }
.day-col { min-height: 250px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.day-head { position: sticky; top: 0; padding: 11px; background: #fff; border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
.day-head strong { display: block; font-size: 12px; }
.day-head span { color: var(--muted); font-size: 10.5px; }
.load-chip { margin: 8px; padding: 9px; border: 1px solid #e2eaf2; border-left: 3px solid var(--blue); border-radius: 8px; background: #fbfdff; font-size: 11px; }
.load-chip strong { font-size: 12px; }
.route { color: #435c75; font-size: 12px; }
.kpi-bar { height: 6px; overflow: hidden; background: #e9f0f6; border-radius: 99px; }
.kpi-bar i { display: block; height: 100%; background: linear-gradient(90deg,var(--blue),var(--lime)); }

/* Invoice packet */
.packet-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(330px,.55fr); gap: 16px; align-items: start; }
.invoice-sheet { padding: 28px; }
.invoice-brand { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.invoice-brand h2 { margin: 0; font-size: 25px; }
.invoice-company { max-width: 520px; margin-top: 5px; font-size: 11px; }
.invoice-meta { text-align: right; }
.invoice-meta strong { display: block; font-size: 16px; }
.invoice-meta span { color: var(--muted); font-size: 12px; }
.invoice-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; padding: 20px 0; }
.invoice-details h4 { margin: 0 0 5px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.invoice-total { display: flex; justify-content: flex-end; padding-top: 18px; border-top: 1px solid var(--line); }
.invoice-total div { min-width: 230px; display: flex; justify-content: space-between; font-size: 17px; }
.packet-check { display: grid; gap: 8px; margin-bottom: 14px; }
.packet-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; }
.packet-item.ok { border-color: #d7eccb; background: #f5fbf1; }
.packet-item.missing { border-color: #f3ddbb; background: #fffaf1; }
.packet-item strong { font-size: 12px; }
.packet-item span { color: var(--muted); font-size: 11px; }

/* Official business documents */
.document-actions { max-width: 1100px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 auto 14px; }
.document-actions .actions { align-items: center; }
.document-actions .muted { font-size: 10.5px; }
.business-document { width: 100%; max-width: 1100px; margin: 0 auto; padding: 34px 38px 30px; color: #152333; background: #fff; border: 1px solid #dce4ec; border-radius: 8px; box-shadow: 0 16px 42px rgba(18,40,65,.07); font-size: 12px; }
.invoice-document { max-width: none; }
.document-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.document-company { display: flex; align-items: flex-start; gap: 15px; max-width: 68%; color: #4a5a6b; font-size: 10.5px; line-height: 1.55; }
.document-company > div > strong { display: block; margin: 2px 0 4px; color: #111f2f; font-size: 15px; letter-spacing: -.01em; }
.document-logo { width: 68px; height: 68px; flex: 0 0 68px; display: block; object-fit: cover; border-radius: 5px; }
.document-registration { margin-top: 3px; color: #6d7b89; font-size: 9.5px; }
.document-title { min-width: 220px; text-align: right; }
.document-title h2 { margin: 0 0 7px; color: #132638; font-size: 25px; line-height: 1; font-weight: 760; letter-spacing: .045em; }
.document-title > strong { display: block; color: #142436; font-size: 14px; font-variant-numeric: tabular-nums; }
.document-status { display: inline-flex; margin-top: 7px; padding: 3px 7px; color: #42566b; border: 1px solid #dbe3eb; border-radius: 3px; background: #f7f9fb; font-size: 8.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.document-status.draft { color:#a3680c; border-color:#ecd7ae; background:#fff8e9; }
.document-status.paid { color:#397b22; border-color:#cfe4c5; background:#f0f8ec; }
.document-status.partial { color:#946207; border-color:#ead8b5; background:#fff8e9; }
.locked-note { display:flex; align-items:center; gap:9px; padding:11px 12px; color:#697b8d; border:1px solid #e4eaf0; border-radius:9px; background:#f9fbfc; font-size:11px; }
.locked-note strong { color:#3f5266; font-size:10px; text-transform:uppercase; }
.account-identity { min-height: 63px; padding: 10px 12px; border: 1px solid #e4eaf0; border-radius: 9px; background: #f8fafc; }
.account-identity > span { display: block; color: #728397; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; }
.account-identity > strong { display: block; margin-top: 3px; color: #32485e; font-size: 11.5px; }
.account-identity > small { display: block; margin-top: 2px; color: #95a1ad; font-size: 8.5px; }
.document-rule { height: 3px; margin: 21px 0 23px; background: linear-gradient(90deg,#1688ed 0 23%,#dfe7ef 23% 100%); }
.document-party-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(310px,.85fr); gap: 42px; margin-bottom: 25px; color: #536579; line-height: 1.55; }
.document-label { margin-bottom: 6px; color: #6b7b8c; font-size: 8.5px; font-weight: 800; letter-spacing: .1em; }
.document-party-name { display: block; margin-bottom: 3px; color: #132235; font-size: 14px; }
.document-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 18px; padding: 13px 15px; background: #f7f9fb; border: 1px solid #e5ebf1; border-radius: 5px; }
.document-meta div { display: flex; justify-content: space-between; gap: 12px; }
.document-meta span { color: #728194; font-size: 9.5px; }
.document-meta strong { color: #1c2b3c; font-size: 10.5px; text-align: right; }
.document-section { margin-top: 25px; }
.document-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.document-section-title span { color: #17283b; font-size: 12px; font-weight: 750; }
.document-section-title small { color: #7a8998; font-size: 9.5px; }
.document-table { width: 100%; border-collapse: collapse; color: #2e4053; font-size: 10.5px; }
.document-table th { padding: 9px 9px; color: #5e7083; background: #f4f7fa; border-top: 1px solid #dfe6ed; border-bottom: 1px solid #dfe6ed; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.document-table td { padding: 10px 9px; border-bottom: 1px solid #e9eef3; vertical-align: top; }
.document-table .right { text-align: right; }
.document-empty { color: #758595; font-style: italic; }
.document-totals { width: 330px; margin: 19px 0 0 auto; }
.document-totals > div { display: flex; justify-content: space-between; gap: 25px; padding: 5px 1px; color: #526376; font-size: 11px; }
.document-totals strong { color: #18283a; font-variant-numeric: tabular-nums; }
.document-totals .document-total-due { margin-top: 7px; padding: 10px 11px; color: #102439; background: #eef6fd; border-top: 2px solid #1688ed; font-size: 12px; font-weight: 800; }
.document-totals .document-total-due strong { font-size: 16px; }
.document-notes { margin-top: 24px; padding: 12px 14px; color: #47596c; background: #fafbfc; border: 1px solid #e6ebf0; border-radius: 4px; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; }
.document-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 32px; padding-top: 12px; color: #778696; border-top: 1px solid #dfe6ed; font-size: 9.5px; }
.document-footer strong { color: #4a5c70; }
.settlement-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin: 5px 0 25px; border: 1px solid #dfe6ed; border-radius: 5px; overflow: hidden; }
.settlement-summary > div { min-height: 68px; padding: 12px 14px; border-right: 1px solid #e5ebf1; }
.settlement-summary > div:nth-child(4) { border-right: 0; }
.settlement-summary span { display: block; margin-bottom: 6px; color: #718195; font-size: 8.5px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.settlement-summary strong { color: #1a2a3c; font-size: 15px; font-variant-numeric: tabular-nums; }
.settlement-summary .net { grid-column: 1/-1; min-height: 61px; display: flex; align-items: center; justify-content: space-between; padding: 11px 15px; color: #fff; background: #102a43; border: 0; }
.settlement-summary .net span { margin: 0; color: #b8d1e7; font-size: 9.5px; }
.settlement-summary .net strong { color: #fff; font-size: 22px; }
.invoice-notes-input { min-height: 150px; }

/* Broker directory + same-page Rate Con broker review */
.broker-directory-card { margin-bottom: 16px; overflow: hidden; }
.broker-directory-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.7fr); align-items: end; gap: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.broker-directory-head h3, .broker-inline-head h3 { margin: 4px 0 5px; color: #172a3d; font-size: 15px; }
.broker-directory-head p, .broker-inline-head p { max-width: 680px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.broker-directory-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.broker-directory-results { display: grid; gap: 8px; padding-top: 12px; }
.broker-directory-empty { padding: 12px 13px; color: #77889a; border: 1px dashed #d7e0e9; border-radius: 9px; background: #fafcfd; font-size: 10.5px; }
.broker-directory-result { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 11px 12px; border: 1px solid #e1e8ef; border-radius: 10px; background: #fff; }
.broker-directory-result strong { display: block; color: #193047; font-size: 11.5px; }
.broker-directory-result span, .broker-directory-result small { display: block; margin-top: 2px; color: #708295; font-size: 9.5px; line-height: 1.4; }
.directory-result-action { display: flex; align-items: center; gap: 9px; }
.directory-result-action .directory-ready, .directory-result-action .directory-review { margin: 0; padding: 4px 7px; border-radius: 999px; font-size: 8.5px; font-weight: 750; }
.directory-result-action .directory-ready { color: #347139; background: #edf7eb; }
.directory-result-action .directory-review { color: #98680a; background: #fff5df; }
.broker-inline-review { margin-top: 14px; border-color: #bedcf3; background: linear-gradient(180deg,#fbfdff,#f7fbfe); box-shadow: 0 10px 30px rgba(19,82,132,.06); }
.broker-inline-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 13px; border-bottom: 1px solid #deebf5; }
.broker-match-badge { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; font-size: 8.5px; font-weight: 800; letter-spacing: .03em; }
.broker-match-badge.matched { color: #247242; background: #e9f7ee; }
.broker-match-badge.new { color: #92630a; background: #fff3db; }
.broker-source-address { display: flex; align-items: baseline; gap: 12px; margin: 12px 0 0; padding: 9px 11px; color: #687c90; border-radius: 8px; background: #eef5fa; font-size: 9.5px; }
.broker-source-address strong { flex: 0 0 auto; color: #3b556c; font-size: 8.5px; text-transform: uppercase; letter-spacing: .06em; }
.broker-inline-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin-top: 13px; }
.broker-inline-grid .span-2 { grid-column: span 2; }
.broker-inline-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.broker-inline-actions small { max-width: 560px; color: #73869a; font-size: 9.5px; line-height: 1.4; }

/* Authentication */
.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 26px; background: radial-gradient(circle at 78% 14%,#153f62 0,#081a2b 38%,#050f19 76%); }
.auth-shell { width: min(920px,100%); min-height: 570px; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(390px,.92fr); overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: #fff; box-shadow: 0 34px 100px rgba(0,0,0,.36); }
.auth-brand-panel { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 36px 38px; overflow: hidden; color: #dbe9f4; background: linear-gradient(145deg,#071827,#0a2943 57%,#0b3657); }
.auth-brand-panel:after { content:""; position:absolute; width:400px; height:400px; right:-225px; top:-180px; border-radius:50%; background:radial-gradient(circle,rgba(32,150,241,.34),rgba(32,150,241,0) 70%); pointer-events:none; }
.auth-brand-top { position: relative; z-index:1; display:flex; align-items:center; gap:12px; color:#8eacc4; font-size:10px; font-weight:750; letter-spacing:.095em; text-transform:uppercase; }
.auth-brand-top img { width:54px; height:54px; display:block; object-fit:contain; border:1px solid rgba(255,255,255,.10); border-radius:14px; background:rgba(255,255,255,.04); }
.auth-brand-copy { position: relative; z-index:1; max-width:420px; }
.auth-kicker { color:#62b9f6; font-size:9px; font-weight:800; letter-spacing:.13em; }
.auth-brand-copy h2 { margin:9px 0 10px; color:#fff; font-size:30px; line-height:1.08; letter-spacing:-.035em; }
.auth-brand-copy p { max-width:410px; margin:0; color:#9eb5c8; font-size:13px; line-height:1.6; }
.auth-feature-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }
.auth-feature-row span { padding:6px 9px; color:#bcd0df; border:1px solid rgba(255,255,255,.10); border-radius:8px; background:rgba(255,255,255,.04); font-size:9.5px; font-weight:650; }
.auth-brand-panel > small { position:relative; z-index:1; color:#69869e; font-size:9.5px; }
.auth-form-panel { display:flex; flex-direction:column; justify-content:center; padding:46px 44px; background:#fff; }
.auth-form-panel h1, .auth-reset-card h1 { margin:7px 0 7px; color:#142437; font-size:27px; letter-spacing:-.035em; }
.auth-form-panel > p { margin-bottom:21px; font-size:12.5px; }
.login-form { display:grid; gap:13px; }
.auth-form-links { margin-top:-3px; text-align:right; }
.auth-form-links a, .auth-foot a, .auth-back { color:#147dce; font-size:11.5px; font-weight:650; }
.auth-foot { margin:21px 0 0 !important; padding-top:17px; color:#8996a5 !important; border-top:1px solid #edf1f5; font-size:10.5px !important; text-align:center; }
.auth-mobile-logo { display:none; }
.auth-reset-card { width:min(460px,100%); padding:34px 36px; background:#fff; border:1px solid rgba(255,255,255,.15); border-radius:22px; box-shadow:0 30px 90px rgba(0,0,0,.32); }
.auth-reset-brand { display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.auth-reset-brand img { width:42px; height:42px; display:block; object-fit:contain; border-radius:10px; }
.auth-reset-brand strong { display:block; color:#17283b; font-size:12.5px; }
.auth-reset-brand small { display:block; margin-top:1px; color:#8492a1; font-size:9.5px; }
.auth-reset-card > p { margin-bottom:20px; font-size:12.5px; }
.auth-reset-card form { display:grid; gap:12px; }
.auth-back { display:inline-block; margin-top:20px; }
.auth-card { width: min(410px,100%); padding: 29px; background: #fff; border-radius: 20px; box-shadow: 0 28px 85px rgba(0,0,0,.28); }
.auth-logo { width: 154px; height: 94px; display: block; margin: 0 auto 18px; object-fit: contain; object-position: center; border-radius: 11px; }
.auth-card h1 { margin: 5px 0 6px; font-size: 24px; letter-spacing: -.025em; }
.auth-card p { margin: 0 0 17px; }
.auth-card label { display: block; margin: 11px 0; }
.auth-card label input { margin-top: 6px; }
.auth-help { margin-top: 15px !important; text-align: center; font-size: 12px !important; }
.auth-help a { color: var(--blue); }
.eyebrow { color: var(--blue); font-size: 9.5px; font-weight: 800; letter-spacing: .14em; }

.split { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.dashboard-split { align-items: start; }
.attention-panel { overflow: hidden; }
.attention-head { padding-bottom: 12px; }
.attention-head span { display: block; margin-top: 3px; color: #8291a2; font-size: 9.5px; font-weight: 500; }
.attention-list { padding: 5px 0; }
.attention-item { display: grid; grid-template-columns: 8px minmax(0,1fr) auto 16px; align-items: center; gap: 10px; min-height: 68px; padding: 12px 14px; color: #1f3448; border-bottom: 1px solid #edf1f5; text-decoration: none; transition: background .15s ease; }
.attention-item:last-child { border-bottom: 0; }
.attention-item:hover { background: #f8fbfd; }
.attention-indicator { width: 7px; height: 7px; border-radius: 50%; background: #4c9ee8; box-shadow: 0 0 0 4px rgba(76,158,232,.10); }
.attention-item.warning .attention-indicator { background: #e6a229; box-shadow: 0 0 0 4px rgba(230,162,41,.11); }
.attention-item.danger .attention-indicator { background: #e04f5f; box-shadow: 0 0 0 4px rgba(224,79,95,.10); }
.attention-copy { min-width: 0; }
.attention-copy strong { display: block; color: #172a3d; font-size: 11px; line-height: 1.3; }
.attention-copy small { display: block; margin-top: 3px; color: #77889a; font-size: 9.5px; line-height: 1.45; }
.attention-count { min-width: 29px; padding: 4px 7px; color: #344c62; border: 1px solid #dde5ed; border-radius: 999px; background: #f7f9fb; font-size: 10px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.attention-arrow { color: #92a0ae; font-size: 14px; }
.attention-item:hover .attention-arrow { color: #1688ed; transform: translateX(1px); }
.attention-clear { display: flex; align-items: center; gap: 11px; padding: 20px 16px; }
.attention-clear-icon { display: inline-grid; width: 28px; height: 28px; place-items: center; color: #347c39; border-radius: 50%; background: #edf8eb; font-size: 12px; font-weight: 800; }
.attention-clear strong { display: block; color: #294334; font-size: 11px; }
.attention-clear small { display: block; margin-top: 2px; color: #7d8d86; font-size: 9.5px; }
.print-only { display: none; }

@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2,1fr); }
  .form-grid { grid-template-columns: repeat(2,1fr); }
  .packet-grid, .settings-grid, .company-secret-card { grid-template-columns: 1fr; }
  .week-board { grid-template-columns: repeat(7,180px); }
  .ai-extract-inner { grid-template-columns: 1fr; }
  .workflow-card { grid-template-columns:1fr; }.workflow-steps { justify-content:flex-start; overflow-x:auto; padding-bottom:2px; }
  .broker-form .form-grid { grid-template-columns: repeat(2,1fr); }
  .broker-directory-head { grid-template-columns: 1fr; align-items: stretch; }
  .broker-inline-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .smtp-heading, .ticket-detail-grid { grid-template-columns: 1fr; }
  .record-row { grid-template-columns:38px minmax(0,1fr) auto; }.record-meta { display:none; }.record-action { grid-column:2/-1; justify-content:flex-start; }.record-row > .status { grid-column:3; grid-row:1; }
  .quick-filter-head { grid-template-columns:1fr; align-items:stretch; }.quick-filter-form { grid-template-columns:minmax(180px,1fr) 130px 130px auto auto; }.quick-filter-form .field { min-width:0; }
  .settlement-history-head { grid-template-columns:1fr; align-items:stretch; }.settlement-history-filter { grid-template-columns:minmax(180px,1fr) 175px 135px auto; }
  .smtp-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .page-guide { justify-content: flex-start; overflow-x: auto; }
  .page-guide-label { display: none; }
}

@media (max-width: 760px) {
  body.app-body { padding-left: 0; }
  .sidebar { width: min(286px,86vw); transform: translateX(-102%); transition: transform .2s ease; box-shadow: none; }
  .sidebar.open { transform: none; box-shadow: 18px 0 50px rgba(2,13,24,.28); }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 25; background: rgba(3,15,27,.42); }
  .sidebar-scrim.show { display: block; }
  .menu-toggle { display: inline-grid; place-items: center; }
  .topbar { min-height: 58px; padding: 0 12px; }
  .topbar-context > span, .topbar-date { display: none; }
  .page-guide { display: none; }
  .topbar-primary { padding: 7px 10px; }
  .content { padding: 19px 13px 34px; }
  .page-head { margin-bottom: 16px; }
  .page-head h1 { font-size: 21px; }
  .page-head p { font-size: 12.5px; }
  .top-user span:not(.avatar) { display: none; }
  .top-user { padding: 4px; }
  .grid, .grid.two, .form-grid, .split, .invoice-details { grid-template-columns: 1fr; }
  .secret-form .ai-settings-grid { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; }
  .field.compact { flex: 1 1 45%; }
  .table th, .table td { padding: 10px; }
  .invoice-sheet { padding: 19px; }
  .ai-extract-inner { padding: 18px; gap: 16px; }
  .ai-upload { align-items: stretch; flex-direction: column; }
  .ai-copy { gap: 10px; }
  .choice-grid, .broker-form .form-grid, .branding-grid { grid-template-columns: 1fr; }
  .broker-directory-search, .broker-directory-result, .broker-inline-grid { grid-template-columns: 1fr; }
  .broker-inline-grid .span-2 { grid-column: auto; }
  .broker-directory-result { align-items: stretch; }
  .directory-result-action { justify-content: space-between; }
  .broker-inline-head, .broker-inline-actions, .broker-source-address { align-items: flex-start; flex-direction: column; }
  .danger-zone { align-items:stretch; flex-direction:column; }.danger-zone-action { min-width:0; }
  .workflow-card { padding:14px; }.workflow-steps { align-items:stretch; flex-direction:column; overflow:visible; }.workflow-steps > div { min-width:0; }.workflow-steps i { display:none; }.ratecon-metrics { grid-template-columns:1fr; }
  .mini-stat-row, .support-metrics, .workspace-metrics, .smtp-grid { grid-template-columns: 1fr 1fr; }
  .support-layout { grid-template-columns: 1fr; }.support-create-card { position: static; }.support-list-head { align-items: stretch; flex-direction: column; }.support-search { min-width: 0; }.ticket-row { grid-template-columns: 42px minmax(0,1fr) auto; }.ticket-open { display: none; }.conversation-message header { align-items: flex-start; flex-direction: column; gap: 2px; }
  .workspace-layout { grid-template-columns:1fr; }.workspace-create-card { position:static; }.workspace-list-head { align-items:stretch; flex-direction:column; }.workspace-search { min-width:0; }.workspace-search select { max-width:125px; }.driver-search { min-width:0; }.driver-search select { width:125px; flex:0 0 125px; }.driver-search input { min-width:0; }.record-row { grid-template-columns:36px minmax(0,1fr) auto; padding:12px; }.record-main small,.record-main p { white-space:normal; }.record-action { flex-wrap:wrap; }.maintenance-action select { flex:1 1 125px; }
  .quick-filter-form { grid-template-columns:1fr 1fr; }.quick-filter-form .field,.quick-filter-form .field.compact { min-width:0; }.quick-filter-form .field:first-child { grid-column:1 / -1; }
  .settlement-history-filter { grid-template-columns:1fr 1fr; }.settlement-history-filter .field:first-of-type { grid-column:1 / -1; }.settlement-history-foot { align-items:flex-start; flex-direction:column; }
  .business-document { padding: 22px 18px; }
  .document-header, .document-actions, .document-footer { align-items: flex-start; flex-direction: column; }
  .document-title { min-width: 0; text-align: left; }
  .document-party-grid { grid-template-columns: 1fr; gap: 18px; }
  .settlement-summary { grid-template-columns: repeat(2,1fr); }
  .settlement-summary > div:nth-child(2) { border-right: 0; }
  .document-company { max-width: 100%; }
  .auth-body { padding: 14px; }
  .auth-shell { min-height: 0; display:block; border-radius:20px; }
  .auth-brand-panel { display:none; }
  .auth-form-panel { padding:30px 24px 28px; }
  .auth-mobile-logo { display:flex; align-items:center; gap:10px; margin-bottom:27px; }
  .auth-mobile-logo img { width:42px; height:42px; object-fit:contain; border-radius:10px; }
  .auth-mobile-logo strong { color:#17283b; font-size:12.5px; }
  .auth-reset-card { padding:29px 24px; }
}

@media print {
  @page { size: Letter; margin: .45in; }
  body.app-body { padding: 0; background: #fff; }
  .sidebar, .topbar, .sidebar-scrim, .no-print { display: none !important; }
  .content { width: 100%; max-width: none; padding: 0; }
  .card, .panel { border: 0; box-shadow: none; }
  .print-only { display: block; }
  .table-wrap { overflow: visible; }
  .packet-grid { display: block; }
  .packet-side { display: none; }
  .business-document { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; color: #000; font-size: 9pt; }
  .document-logo { width: 56px; height: 56px; flex-basis: 56px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .document-rule, .document-meta, .document-table th, .settlement-summary .net, .document-totals .document-total-due { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .document-section { break-inside: avoid; }
  .document-table tr { break-inside: avoid; }
  .document-footer { margin-top: 24px; }
}