:root {
  --ink: #10202c;
  --muted: #687781;
  --paper: #f5f7f4;
  --card: #ffffff;
  --navy: #0b1620;
  --green: #39d98a;
  --green-dark: #137b53;
  --amber: #f5a623;
  --red: #dc5a5a;
  --line: #dde4df;
  --shadow: 0 12px 36px rgba(16, 32, 44, .08);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, .btn:focus-visible, .tab:focus-visible, .edit-btn:focus-visible, .remove-btn:focus-visible, .login-role:focus-visible, .demo-pill:focus-visible, .shortcut-card:focus-visible, .notification-bell:focus-visible, .theme-toggle:focus-visible {
  outline: 3px solid rgba(57,217,138,.45);
  outline-offset: 2px;
}
.shell { min-height: 100vh; }
.topbar {
  height: 76px; padding: 0 clamp(20px, 4vw, 58px); display: flex; align-items: center;
  justify-content: space-between; background: var(--navy); color: white;
}
.brand { display: flex; gap: 12px; align-items: center; font: 800 20px "Manrope"; letter-spacing: -.5px; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--green); display: grid; place-items: center; color: var(--navy); }
.brand-mark svg { width: 20px; }
.userbox { display: flex; align-items: center; gap: 13px; }
.user-meta { text-align: right; line-height: 1.25; }
.user-meta small { display: block; color: #aebac0; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.avatar { width: 38px; height: 38px; background: #243540; border: 1px solid #3f505a; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.icon-btn { border: 0; background: transparent; color: #aebac0; padding: 8px; }
.notification-bell { position: relative; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #dbe6e0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 16px rgba(0,0,0,.12); transition: .15s; }
.notification-bell svg { width: 19px; height: 19px; }
.notification-bell:hover { background: rgba(255,255,255,.16); color: white; transform: translateY(-1px); }
.notification-bell.has-unread { color: white; background: rgba(255,255,255,.14); }
.notification-bell span { position: absolute; right: -6px; top: -6px; min-width: 20px; height: 20px; border-radius: 20px; background: #e5484d; color: white; display: grid; place-items: center; font-size: 10px; font-weight: 900; border: 2px solid var(--navy); box-shadow: 0 4px 12px rgba(229,72,77,.35); }
.shadow-pill { border: 1px solid #ffd37a; background: #fff2cf; color: #7a4a00; border-radius: 999px; min-height: 34px; padding: 0 12px; font-weight: 900; font-size: 11px; box-shadow: 0 6px 16px rgba(122,74,0,.12); }
.shadow-pill:hover { background: #ffe5a8; transform: translateY(-1px); }
.theme-toggle { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #dbe6e0; border-radius: 999px; min-height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 16px rgba(0,0,0,.12); transition: .15s; }
.theme-toggle span { font-size: 16px; line-height: 1; }
.theme-toggle small { color: inherit; font-size: 11px; white-space: nowrap; }
.theme-toggle:hover { background: rgba(255,255,255,.16); color: white; transform: translateY(-1px); }
.login-theme-row { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.login-theme { color: var(--ink); background: #edf6f1; border-color: #bfd7ca; box-shadow: 0 4px 12px rgba(16,32,44,.07); }
.login-theme:hover { color: var(--ink); background: #dcf3e7; }
.page { max-width: 1240px; margin: auto; padding: 40px clamp(18px, 4vw, 48px) 70px; }
.eyebrow { color: var(--green-dark); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 9px; }
h1, h2, h3 { font-family: "Manrope"; margin: 0; letter-spacing: -.03em; }
h1 { font-size: clamp(30px, 4vw, 43px); line-height: 1.08; }
h2 { font-size: 21px; }
p { color: var(--muted); line-height: 1.55; }
.heading-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 30px; }
.heading-row p { margin: 9px 0 0; }
.heading-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.btn { border: 1px solid transparent; border-radius: 10px; padding: 11px 16px; font-weight: 800; transition: .15s; display: inline-flex; align-items: center; gap: 8px; justify-content: center; box-shadow: 0 5px 14px rgba(16,32,44,.10); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(16,32,44,.16); }
.btn:active { transform: translateY(0); box-shadow: 0 3px 9px rgba(16,32,44,.12); }
.btn-primary { background: linear-gradient(135deg, var(--green), #22c77a); color: var(--navy); border-color: #1fb56d; }
.btn-primary:hover { background: linear-gradient(135deg, #4de89a, #19b86d); }
.btn-dark { background: linear-gradient(135deg, var(--navy), #193140); color: white; border-color: #253d4c; }
.btn-dark:hover { background: linear-gradient(135deg, #142b3a, #24485b); }
.btn-ghost { background: #dcefe5; color: #0d5f3f; border-color: #9dd2b7; }
.btn-ghost:hover { background: #c8ead7; border-color: var(--green-dark); color: #083f2a; }
.btn-danger { background: #f8d1cc; color: #8b2424; border-color: #e9a7a0; }
.btn-danger:hover { background: #f5bdb5; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 2px 7px rgba(16,32,44,.03); }
.login-screen { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--navy); }
.login-story { position: relative; padding: 58px clamp(36px, 7vw, 110px); display: flex; flex-direction: column; justify-content: space-between; color: white; overflow: hidden; }
.login-story:after { content: ""; position: absolute; width: 460px; height: 460px; border: 1px solid #30414c; border-radius: 50%; right: -220px; bottom: -160px; box-shadow: 0 0 0 80px rgba(57,217,138,.035), 0 0 0 160px rgba(57,217,138,.025); }
.login-story h1 { max-width: 600px; font-size: clamp(42px, 6vw, 72px); margin-top: auto; margin-bottom: 20px; }
.login-story h1 em { color: var(--green); font-style: normal; }
.login-story p { color: #adbac1; max-width: 510px; font-size: 18px; }
.signal { display: flex; align-items: end; gap: 5px; height: 34px; margin-bottom: 24px; }
.signal i { display: block; width: 7px; border-radius: 4px; background: var(--green); }
.signal i:nth-child(1) { height: 10px; }.signal i:nth-child(2) { height: 18px; }.signal i:nth-child(3) { height: 27px; }.signal i:nth-child(4) { height: 34px; }
.login-panel { background: #fbfcfa; border-radius: 28px 0 0 28px; display: grid; place-items: center; padding: 36px; z-index: 1; }
.login-card { width: min(420px, 100%); }
.invite-screen { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at top left,rgba(57,217,138,.14),transparent 42%),var(--paper); }.invite-card { width:min(520px,100%); padding:34px; }.invite-card h1 { margin:22px 0 8px; }.invite-card form { margin-top:22px; }.invite-card .btn { width:100%; text-align:center; }.invite-card > small { display:block; margin-top:18px; color:var(--muted); }.invite-username { margin:18px 0; padding:13px 15px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--card) 88%,var(--green) 12%); }.invite-username span,.invite-username strong { display:block; }.invite-username span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }.invite-username strong { color:var(--ink); overflow-wrap:anywhere; }
.login-card h2 { font-size: 31px; margin-bottom: 8px; }
.login-card > p { margin: 0 0 30px; }
.login-role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: -12px 0 22px; }
.login-role { min-height: 72px; text-align: left; border: 1px solid #bfcfc7; background: #f7fbf8; border-radius: 10px; padding: 10px; color: var(--ink); transition: .15s; box-shadow: 0 2px 8px rgba(16,32,44,.04); }
.login-role:hover { border-color: var(--green-dark); background: #eefaf3; transform: translateY(-1px); }
.login-role strong, .login-role small { display: block; }
.login-role strong { font-size: 11px; }.login-role small { color: var(--muted); font-size: 9px; margin-top: 4px; line-height: 1.3; }
.login-role.active { border-color: var(--green-dark); background: #effaf4; box-shadow: 0 0 0 2px rgba(19,123,83,.08); }
.field { margin-bottom: 17px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; background: white; border: 1px solid #ccd6d0; border-radius: 10px; padding: 12px 13px; outline: 0; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-dark); box-shadow: 0 0 0 3px rgba(57,217,138,.13); }
.login-card .btn { width: 100%; margin-top: 8px; padding: 13px; }
.demo-accounts { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 19px; }
.demo-accounts > span { color: var(--muted); font-size: 12px; }
.demo-pills { display: flex; gap: 8px; margin-top: 10px; }
.demo-pill { flex: 1; text-align: left; border: 1px solid #a9d4ba; background: #effaf4; border-radius: 10px; padding: 10px 11px; color: var(--ink); transition: .15s; }
.demo-pill:hover { background: #d9f4e5; transform: translateY(-1px); }
.demo-pill strong { display: block; font-size: 12px; }.demo-pill small { color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.company-filter { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 22px; margin-bottom: 18px; min-width: 0; }
.company-filter-copy { display: flex; align-items: center; gap: 16px; min-width: 0; }
.company-filter-copy .eyebrow { margin-bottom: 3px; }
.company-filter-copy p { margin: 3px 0 0; font-size: 13px; }
.filter-icon { width: 45px; height: 45px; border-radius: 12px; display: grid; place-items: center; background: #dcf8ea; color: var(--green-dark); font-size: 25px; font-weight: 800; }
.company-select { width: min(250px, 100%); min-width: 0; margin: 0; flex: 1 1 210px; }
.company-select select, .company-select input { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.dashboard-selectors { display: flex; align-items: end; justify-content: flex-end; gap: 10px; min-width: 0; flex: 1 1 430px; }
.home-hero { display: flex; justify-content: space-between; align-items: end; gap: 28px; padding: 28px; margin-bottom: 18px; background: linear-gradient(135deg, #ffffff 0%, #f1faf5 100%); }
.home-hero p { max-width: 660px; margin-bottom: 0; }
.home-actions { display: flex; align-items: end; gap: 10px; flex: 0 0 auto; }
.shortcut-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 24px; }
.shortcut-card { border: 1px solid #b9d8c8; background: linear-gradient(135deg, #ffffff, #f0fbf5); color: var(--ink); text-align: left; padding: 18px; min-height: 132px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; box-shadow: 0 8px 22px rgba(16,32,44,.08); transition: .15s; }
.shortcut-card:hover { transform: translateY(-3px); border-color: var(--green-dark); box-shadow: 0 14px 30px rgba(16,32,44,.15); background: linear-gradient(135deg, #ffffff, #ddf8e9); }
.shortcut-card span { color: var(--green-dark); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.shortcut-card strong { display: block; font: 800 20px "Manrope"; letter-spacing: -.03em; margin: 10px 0 8px; }
.shortcut-card small { color: var(--muted); line-height: 1.35; }
.shortcut-card.attention { background: linear-gradient(135deg, #fff8e8, #fff0d1); border-color: #e4b457; box-shadow: 0 8px 22px rgba(137,86,7,.12); }
.shortcut-card.attention:hover { background: linear-gradient(135deg, #fff4d9, #ffe4a8); border-color: #c98205; }
.home-grid { margin-top: 20px; }
.shipment-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.shipment-strip div { background: #f3f6f4; border-radius: 12px; padding: 13px; }
.shipment-strip span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.shipment-strip strong { display: block; font: 800 24px "Manrope"; margin-top: 5px; }
.compact-table table { font-size: 13px; }
.update-queue { display: grid; gap: 10px; }
.update-queue article { border: 1px solid var(--line); border-radius: 12px; padding: 13px; background: #fbfcfb; }
.update-queue strong, .update-queue small, .update-queue span { display: block; }
.update-queue strong { font: 800 17px "Manrope"; }
.update-queue small { color: var(--muted); margin-top: 3px; }
.update-queue span { color: var(--ink); font-size: 12px; margin-top: 9px; font-weight: 700; }
.route-stack { display: grid; gap: 10px; }
.route-summary-card { display: flex; align-items: center; justify-content: space-between; gap: 15px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fbfcfb; }
.route-summary-card strong, .route-summary-card small { display: block; }
.route-summary-card small { color: var(--muted); margin-top: 3px; }
.route-summary-card b { min-width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #dcf8ea; color: var(--green-dark); font: 800 19px "Manrope"; }
.notification-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr); gap: 20px; align-items: start; }
.notification-list { display: grid; gap: 10px; }
.notification-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fbfcfb; }
.notification-card.clickable { cursor: pointer; transition: .15s; }
.notification-card.clickable:hover { transform: translateY(-1px); border-color: #a7dabc; box-shadow: 0 8px 20px rgba(16,32,44,.08); }
.notification-card.unread { background: #f0fbf5; border-color: #b8e7cd; box-shadow: inset 4px 0 0 var(--green); }
.notification-main h3 { font-size: 17px; margin-top: 6px; }
.notification-main p { margin: 6px 0; font-size: 14px; }
.notification-main small { color: var(--muted); }
.notification-type { color: var(--green-dark); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .09em; }
.notification-actions { flex: 0 0 auto; }
.read-pill { background: #edf2ef; color: var(--muted); border-radius: 20px; padding: 7px 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.notification-prefs { position: sticky; top: 18px; }
.notification-prefs form { display: grid; gap: 10px; margin-top: 18px; }
.preference-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfb; }
.preference-row strong, .preference-row small { display: block; }
.preference-row small { color: var(--muted); margin-top: 3px; line-height: 1.35; }
.preference-row input { width: 19px; height: 19px; accent-color: var(--green-dark); flex: 0 0 auto; }
.browser-alert-btn { width: 100%; margin: 12px 0 7px; }
.browser-alert-note { color: var(--muted); font-size: 12px; line-height: 1.4; }
.notification-load-detail { display: grid; gap: 10px; margin: 12px 0; }
.notification-load-detail div { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: #f8faf8; }
.notification-load-detail span, .notification-load-detail strong { display: block; }
.notification-load-detail span { color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; }
.table-sub { display: block; color: var(--muted); margin-top: 2px; }
.stat { padding: 20px; }
.stat-label { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.stat-value { font: 800 30px "Manrope"; margin-top: 8px; }
.stat-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.load-list { display: grid; gap: 13px; }
.load-card { padding: 22px; display: grid; grid-template-columns: minmax(0, 2fr) .55fr auto; gap: 24px; align-items: center; }
.load-card.spotlight { box-shadow: 0 0 0 3px rgba(57,217,138,.34), 0 14px 34px rgba(16,32,44,.14); border-color: var(--green-dark); }
.load-id { display: flex; align-items: center; gap: 10px; font-weight: 800; font-family: "Manrope"; }
.booking-kicker { color: var(--green-dark); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 3px; }
.booking-id { font-size: 22px; letter-spacing: -.02em; }
.table-company { font: 800 17px "Manrope"; color: var(--ink); }
.table-booking, .history-booking { font: 400 14px "DM Sans"; color: var(--ink); }
.review-booking-label { display: block; color: var(--green-dark); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.review-booking { display: block; font: 800 18px "Manrope"; letter-spacing: -.02em; margin: 2px 0 4px; white-space: nowrap; }
.date-chip { padding: 5px 8px; background: #edf2ef; border-radius: 6px; color: var(--muted); font: 600 11px "DM Sans"; }
.route { display: flex; align-items: center; gap: 11px; margin-top: 12px; font-weight: 600; }
.route-line { height: 1px; width: 28px; background: #aab8b1; position: relative; }
.route-line:after { content: ""; width: 5px; height: 5px; border-top: 1px solid #7b8c83; border-right: 1px solid #7b8c83; position: absolute; right: 0; top: -2px; transform: rotate(45deg); }
.load-meta { color: var(--muted); font-size: 13px; }
.load-meta strong { color: var(--ink); display: block; margin-top: 3px; }
.movement-pill { display: inline-flex; align-items: center; background: #e8f1ec; color: #37614d; border-radius: 20px; padding: 4px 8px; font-size: 10px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.shipping-brief { display: grid; grid-template-columns: .6fr 1fr 1.5fr .45fr; gap: 12px; border-top: 1px solid #edf0ee; margin-top: 15px; padding-top: 12px; }
.shipping-brief small, .shipping-brief strong { display: block; }
.shipping-brief small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.shipping-brief strong { font-size: 12px; margin-top: 3px; }
.deadline-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.deadline-row span { background: #f2f5f2; border-radius: 6px; padding: 5px 7px; color: var(--muted); font-size: 10px; }
.deadline-row b { color: var(--ink); margin-left: 3px; }
.badge { font-size: 11px; padding: 6px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; display: inline-flex; }
.badge-pending { background: #fff1d8; color: #895607; }
.badge-completed { background: #dcf8ea; color: #126643; }
.badge-missed { background: #fbe5e3; color: #9b3434; }
.badge-cancelled { background: #e8eaec; color: #58636b; }
.update-actions { min-width: 180px; text-align: right; }
.status-note { margin-top: 7px; font-size: 12px; color: var(--muted); max-width: 220px; }
.grid-2 { display: grid; grid-template-columns: 1.3fr .7fr; gap: 20px; }
.panel { padding: 23px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 21px; gap: 15px; }
.panel-head p { margin: 4px 0 0; font-size: 13px; }
.reason-row { margin: 17px 0; }
.reason-meta { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 7px; }
.bar { height: 8px; border-radius: 10px; background: #edf1ee; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 10px; background: var(--green-dark); }
.ai-card { background: var(--navy); color: white; border: 0; position: relative; overflow: hidden; }
.ai-card:after { content: "✦"; position: absolute; right: 18px; top: 11px; font-size: 80px; color: rgba(57,217,138,.08); }
.ai-card p { color: #acbac1; }.ai-card .btn { position: relative; z-index: 1; }
.ai-result { border-top: 1px solid #2c3d47; margin-top: 20px; padding-top: 19px; }
.ai-result h3 { font-size: 17px; color: var(--green); }
.ai-result ul { color: #d4dadd; padding-left: 19px; font-size: 13px; line-height: 1.5; }
.analysis-controls { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 17px 20px; margin-bottom: 18px; }
.period-tabs { display: inline-flex; gap: 3px; padding: 5px; border-radius: 18px; background: rgba(255,255,255,.46); border: 1px solid rgba(255,255,255,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 28px rgba(16,32,44,.10); backdrop-filter: blur(18px) saturate(150%); }
.period-tabs button { border: 1px solid transparent; background: transparent; color: rgba(16,32,44,.66); border-radius: 14px; padding: 9px 16px; font-weight: 800; transition: .15s; box-shadow: none; }
.period-tabs button:hover { background: rgba(255,255,255,.34); color: var(--ink); }
.period-tabs button.active { background: rgba(255,255,255,.86); color: var(--ink); border-color: rgba(255,255,255,.82); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px rgba(16,32,44,.12); }
.analysis-selectors { display: flex; gap: 10px; }
.analysis-selectors .field { min-width: 200px; margin: 0; }
.analysis-scope-row { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:25px 2px 12px; }
.analysis-scope { display: flex; align-items: baseline; gap: 9px; }
.analysis-scope span { color: var(--green-dark); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.analysis-scope strong { font: 800 21px "Manrope"; }
.analysis-kpis { display: grid; grid-template-columns: repeat(auto-fit,minmax(205px,1fr)); gap: 13px; margin-bottom: 18px; }
.indicator-edit-btn { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:18px; padding:8px 13px; font-size:11px; font-weight:800; box-shadow:var(--shadow); }
.indicator-edit-btn.active { background:var(--navy); color:white; border-color:var(--navy); }
.indicator-editor { margin-bottom:14px; padding:20px; }
.indicator-editor-head { display:flex; align-items:start; justify-content:space-between; gap:18px; margin-bottom:16px; }.indicator-editor-head h2 { font-size:18px; }.indicator-editor-head p { margin:4px 0 0; font-size:12px; }
.text-btn { border:0; background:transparent; color:var(--green-dark); font-weight:800; padding:4px; white-space:nowrap; }
.indicator-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; }
.indicator-option { display:flex; align-items:center; gap:10px; min-width:0; border:1px solid var(--line); border-radius:10px; padding:11px 12px; background:#f8faf8; cursor:pointer; transition:.15s; }
.indicator-option:hover { border-color:#9ccab2; transform:translateY(-1px); }.indicator-option.selected { border-color:#79c59d; background:#eaf8f0; }
.indicator-option input { accent-color:var(--green-dark); }.indicator-option span { display:flex; min-width:0; flex:1; justify-content:space-between; gap:8px; }.indicator-option strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }.indicator-option small { color:var(--muted); font-weight:800; }
.analysis-kpis.empty-selection { display:block; }.indicator-empty { text-align:center; padding:30px; }.indicator-empty p { margin:5px 0 15px; }
.analysis-kpi { position: relative; overflow: hidden; padding: 20px; }
.analysis-kpi:before { content:""; position:absolute; inset: 0 auto 0 0; width: 4px; background: #91a09a; }
.analysis-kpi.good:before { background: var(--green); }.analysis-kpi.bad:before { background: var(--red); }.analysis-kpi.warn:before { background: var(--amber); }
.analysis-kpi span,.analysis-kpi small { display:block; color:var(--muted); }.analysis-kpi span { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.analysis-kpi strong { display:block; margin:7px 0 2px; font:800 31px "Manrope"; }.analysis-kpi small { font-size:12px; }
.analysis-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:18px; margin-bottom:18px; }
.analysis-grid.lower { grid-template-columns:1fr 1fr; }
.donut-wrap { display:flex; align-items:center; justify-content:center; gap:30px; min-height:230px; }
.donut { width:168px; height:168px; border-radius:50%; display:grid; place-items:center; position:relative; flex:0 0 auto; }
.donut:after { content:""; position:absolute; width:108px; height:108px; border-radius:50%; background:white; }
.donut > div { position:relative; z-index:1; text-align:center; }.donut strong,.donut span { display:block; }.donut strong { font:800 32px "Manrope"; }.donut span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.chart-legend { min-width:125px; display:grid; gap:12px; }.chart-legend div { display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:8px; font-size:12px; }.chart-legend i { width:8px; height:8px; border-radius:50%; }.chart-legend span { color:var(--muted); }
.trend-chart { min-height:230px; display:flex; align-items:stretch; gap:5px; padding:12px 4px 0; border-bottom:1px solid var(--line); overflow-x:auto; }
.trend-column { min-width:18px; flex:1; display:grid; grid-template-rows:1fr 22px; gap:5px; align-items:end; text-align:center; }
.trend-bars { height:100%; display:flex; align-items:end; justify-content:center; gap:2px; }.trend-bars i { width:min(9px,42%); min-height:2px; border-radius:4px 4px 0 0; }
.trend-completed { background:var(--green-dark); }.trend-missed { background:var(--red); }.trend-column > span { color:var(--muted); font-size:9px; }
.mini-legend { display:flex; justify-content:flex-end; gap:14px; margin-top:12px; color:var(--muted); font-size:11px; }.mini-legend span { display:flex; align-items:center; gap:5px; }.mini-legend i { width:8px; height:8px; border-radius:2px; }.mini-legend .green { background:var(--green-dark); }.mini-legend .red { background:var(--red); }
.reason-danger i { background:var(--red); }
.carrier-comparison { display:grid; gap:2px; }.carrier-row { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:12px 0; border-bottom:1px solid #edf0ee; }.carrier-row strong,.carrier-row small { display:block; }.carrier-row small { color:var(--muted); margin-top:3px; }
.rate-pill { background:#edf1ee; color:var(--muted); border-radius:20px; padding:6px 9px; font-size:11px; font-weight:800; white-space:nowrap; }.rate-pill.good { background:#dcf8ea; color:#126643; }.rate-pill.bad { background:#fbe5e3; color:#9b3434; }
.action-plan { margin-top:18px; padding:26px; border-color:#b9c9c0; background:linear-gradient(135deg,#fff 0,#f3faf6 100%); }
.action-plan.ready { border-color:#83caa5; }
.action-plan-head { display:flex; align-items:start; justify-content:space-between; gap:20px; }.action-plan-head p { margin:5px 0 0; }.analysis-ready { background:#dcf8ea; color:#126643; border-radius:20px; padding:7px 11px; font-size:11px; font-weight:800; }
.insight-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; margin-top:23px; }
.insight-card { border:1px solid var(--line); border-top:4px solid var(--amber); border-radius:12px; padding:18px; background:white; }.insight-card.high { border-top-color:var(--red); }.insight-card.positive { border-top-color:var(--green-dark); }
.insight-top { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.07em; }.insight-top strong { color:var(--ink); }.insight-card h3 { margin-top:13px; font-size:18px; }.insight-card p { font-size:13px; margin:6px 0 14px; }
.next-action { padding:11px 12px; border-radius:8px; background:#f2f5f3; font-size:12px; }.next-action b,.next-action span { display:block; }.next-action b { color:var(--green-dark); margin-bottom:3px; font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.analysis-note { margin-top:16px; color:var(--muted); font-size:11px; }
.pareto-section { margin-top: 24px; }
.pareto-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:0 2px 14px; }
.pareto-heading h2 { margin-top:4px; }.pareto-heading p { margin:5px 0 0; max-width:760px; }
.privacy-chip { flex:0 0 auto; border:1px solid #9ed2b8; background:#e8f8ef; color:#126643; border-radius:20px; padding:7px 11px; font-size:11px; font-weight:800; }
.pareto-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.pareto-panel { min-width:0; }
.pareto-chart { display:grid; gap:14px; }
.pareto-row { display:grid; grid-template-columns:22px minmax(0,1fr) 42px; gap:9px; align-items:center; }
.pareto-rank { width:22px; height:22px; display:grid; place-items:center; border-radius:7px; background:#eef2ef; color:var(--muted); font-size:10px; font-weight:900; }
.pareto-main { min-width:0; }.pareto-meta { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; font-size:11px; }
.pareto-meta strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.pareto-meta span { color:var(--muted); white-space:nowrap; }
.pareto-track { height:9px; border-radius:9px; background:linear-gradient(90deg,#edf1ee 0 79.5%,#d7ded9 79.5% 80.5%,#edf1ee 80.5%); position:relative; }
.pareto-track i { display:block; height:100%; border-radius:9px; background:linear-gradient(90deg,var(--green-dark),var(--green)); }
.pareto-track b { position:absolute; top:-3px; width:2px; height:15px; border-radius:2px; background:var(--navy); transform:translateX(-1px); }
.pareto-cumulative { text-align:right; font:800 12px "Manrope"; }.pareto-cumulative small { display:block; color:var(--muted); font:700 8px Inter; text-transform:uppercase; letter-spacing:.05em; }
.pareto-key { display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:18px; padding-top:13px; border-top:1px solid var(--line); color:var(--muted); font-size:9px; }
.pareto-key span { display:flex; align-items:center; gap:5px; }.pareto-key i { width:12px; height:5px; border-radius:4px; background:var(--green-dark); }.pareto-key b { width:2px; height:10px; background:var(--navy); }.pareto-key strong { margin-left:auto; color:var(--muted); }
.private-ai-note { display:flex; gap:12px; align-items:start; margin-top:20px; padding:14px 16px; border:1px solid #b9d9c8; border-radius:11px; background:rgba(220,248,234,.58); }
.private-ai-note > span { width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--green-dark); color:white; font-size:18px; }
.private-ai-note strong { font-size:12px; }.private-ai-note p { margin:3px 0 0; font-size:11px; color:var(--muted); }
.toolbar { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 18px; align-items: center; }
.ops-nav { display: inline-flex; gap: 3px; background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.62); border-radius: 20px; padding: 5px; margin: -7px 0 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 12px 32px rgba(16,32,44,.10); backdrop-filter: blur(20px) saturate(155%); }
.ops-nav button { border: 1px solid transparent; background: transparent; color: rgba(16,32,44,.66); border-radius: 15px; padding: 9px 15px; font-weight: 800; transition: .15s; box-shadow: none; }
.ops-nav button:hover { background: rgba(255,255,255,.34); color: var(--ink); transform: translateY(-1px); }
.ops-nav button.active { background: rgba(255,255,255,.88); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 9px 22px rgba(16,32,44,.13); border-color: rgba(255,255,255,.84); }
.history-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 17px; }
.history-summary .card { padding: 17px 20px; display: flex; justify-content: space-between; align-items: center; }
.history-summary span { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.history-summary strong { font: 800 25px "Manrope"; }
.history-panel { padding: 22px; }
.history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.search-box { flex: 1; max-width: 650px; position: relative; }
.search-box span { position: absolute; left: 13px; top: 9px; font-size: 20px; color: var(--muted); }
.search-box input { width: 100%; border: 1px solid #ccd6d0; border-radius: 10px; padding: 11px 13px 11px 39px; outline: 0; }
.search-box input:focus { border-color: var(--green-dark); box-shadow: 0 0 0 3px rgba(57,217,138,.13); }
.history-result-label { color: var(--muted); font-size: 12px; margin: 18px 0 6px; }
.history-table td { vertical-align: top; }
.bulk-toolbar { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #f5f8f6; color: var(--muted); font-size: 12px; }
.bulk-toolbar.active { background: #eefaf4; border-color: #a9d9bd; color: var(--ink); }
.bulk-select-all { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); }
.bulk-toolbar input, .select-col input { width: 18px; height: 18px; accent-color: var(--green-dark); }
.bulk-toolbar span strong { color: var(--ink); }
.bulk-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.select-col { width: 42px; text-align: center; }
.edit-btn:disabled, .remove-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.date-stack { font-size: 11px; line-height: 1.55; white-space: nowrap; color: var(--muted); }
.dispatch-review-table td { vertical-align: top; }
.tabs { display: flex; gap: 3px; background: rgba(255,255,255,.44); border: 1px solid rgba(255,255,255,.62); border-radius: 18px; padding: 5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 8px 22px rgba(16,32,44,.08); backdrop-filter: blur(18px) saturate(150%); }
.tab { border: 1px solid transparent; background: transparent; padding: 8px 13px; border-radius: 14px; color: rgba(16,32,44,.66); font-weight: 800; transition: .15s; box-shadow: none; }
.tab:hover { background: rgba(255,255,255,.34); color: var(--ink); }
.tab.active { background: rgba(255,255,255,.88); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 7px 18px rgba(16,32,44,.11); border-color: rgba(255,255,255,.84); }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--line); }
td { padding: 13px; border-bottom: 1px solid #edf0ee; }
.import-zone { border: 1.5px dashed #b9c7bf; background: #f9fbf9; border-radius: 12px; padding: 20px; text-align: center; }
.import-zone input { display: none; }
.import-zone p { margin: 7px 0 13px; font-size: 13px; }
.dispatch-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }
.dispatch-upload-card { padding: 27px; position: relative; }
.dispatch-upload-card > p { max-width: 650px; }
.step-number { position: absolute; right: 24px; top: 22px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #dcf8ea; color: var(--green-dark); font-weight: 800; }
.dispatch-drop { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 23px; cursor: pointer; transition: .2s; }
.dispatch-drop:hover { border-color: var(--green-dark); background: #f3fbf6; }
.dispatch-drop.loading { opacity: .7; pointer-events: none; }
.upload-error { margin-top: 14px; border: 1px solid #e6a09a; background: #fff1ef; color: #873a34; border-radius: 11px; padding: 14px 15px; }
.upload-error strong, .upload-error small { display: block; }
.upload-error p { color: #873a34; margin: 5px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.upload-error small { opacity: .78; }
.revision-note { margin-top: 13px; border-radius: 10px; padding: 11px 13px; background: #eef5f1; color: var(--muted); font-size: 12px; line-height: 1.45; }
.revision-note strong { color: var(--ink); }
.upload-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #dcf8ea; color: var(--green-dark); font-size: 24px; margin-bottom: 13px; }
.dispatch-guide { box-shadow: none; }
.check-list { list-style: none; margin: 23px 0; padding: 0; display: grid; gap: 20px; }
.check-list li { display: flex; gap: 11px; align-items: start; }
.check-list li > span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #dcf8ea; color: var(--green-dark); font-size: 12px; font-weight: 800; }
.check-list strong, .check-list small { display: block; }
.check-list small { color: var(--muted); margin-top: 3px; }
.template-link { text-decoration: none; width: 100%; }
.workflow-strip { display: flex; align-items: center; justify-content: center; margin-top: 24px; padding: 18px; }
.workflow-strip > i { width: 70px; height: 1px; background: #cbd5cf; margin: 0 16px; }
.workflow-step { display: flex; gap: 10px; align-items: center; color: var(--muted); }
.workflow-step b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #dfe5e1; }
.workflow-step.active b { background: var(--navy); color: white; }
.workflow-step span, .workflow-step small { display: block; }.workflow-step small { font-size: 11px; }
.dispatch-stats { margin-top: 0; }
.dispatch-date-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 18px; padding: 17px 20px; border-radius: 13px; background: var(--navy); color: white; }
.dispatch-date-banner > div { display: grid; gap: 3px; }
.dispatch-date-banner span { color: #aebac0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.dispatch-date-banner strong { color: var(--green); font: 800 21px "Manrope"; letter-spacing: -.02em; }
.attention-stat { border-color: #efc876; background: #fffbf2; }
.notice { border: 1px solid #efc876; background: #fff8e9; border-radius: 11px; padding: 13px 16px; color: #6f531b; margin-bottom: 18px; font-size: 13px; }
.review-ready { color: var(--green-dark); background: #dcf8ea; border-radius: 20px; padding: 6px 10px; font-size: 12px; font-weight: 700; }
.match-chip { display: inline-block; padding: 5px 8px; border-radius: 20px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.match-chip.matched { background: #dcf8ea; color: #126643; }
.match-chip.new { background: #fff1d8; color: #895607; }
.match-chip.unassigned { background: #fff1d8; color: #895607; }
.match-chip.assigned { background: #dcf8ea; color: #126643; }
.driver-assignment-select { display: block; width: 100%; min-width: 190px; margin-top: 7px; border: 1px solid #e0b95e; background: #fffaf0; border-radius: 8px; padding: 8px 9px; color: var(--ink); font-size: 12px; font-weight: 700; }
.manager-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.logistics-users-panel { margin-bottom: 20px; }
.logistics-user-form { grid-template-columns: 1fr 1fr 1fr auto; }
.logistics-user-form .field:first-child { grid-column: auto; }
.manager-grid.single { grid-template-columns: minmax(0, 820px); }
.manager-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; margin-bottom: 18px; background: #f4f7f5; border-radius: 12px; }
.manager-form .field:first-child { grid-column: 1 / -1; }
.manager-form .btn { align-self: end; min-height: 42px; }
.manager-list { display: grid; gap: 8px; }
.manager-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid #edf0ee; }
.manager-row strong, .manager-row small { display: block; }
.manager-row small { color: var(--muted); margin-top: 3px; }
.manager-counts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.manager-counts span { background: #edf2ef; color: var(--muted); padding: 5px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.admin-badge { display:inline-block; margin-left:6px; padding:3px 7px; border-radius:12px; background:#dcf8ea; color:#126643; font-size:9px; text-transform:uppercase; letter-spacing:.05em; vertical-align:middle; }
.admin-rights-toggle { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#f8faf8; cursor:pointer; }.admin-rights-toggle input { accent-color:var(--green-dark); }.admin-rights-toggle span,.admin-rights-toggle strong,.admin-rights-toggle small { display:block; }.admin-rights-toggle small { color:var(--muted); margin-top:2px; font-size:10px; }
.remove-btn { border: 1px solid #e8aaa3; background: #f8d1cc; color: #8b2424; border-radius: 7px; padding: 7px 9px; font-weight: 900; font-size: 11px; transition: .15s; box-shadow: 0 3px 9px rgba(155,52,52,.12); }
.remove-btn:hover { background: #f3b9b1; transform: translateY(-1px); }
.edit-btn { border: 1px solid #9ed1b4; background: #d7f3e3; color: #0d5f3f; border-radius: 7px; padding: 7px 9px; font-weight: 900; font-size: 11px; white-space: nowrap; transition: .15s; box-shadow: 0 3px 9px rgba(19,123,83,.10); }
.edit-btn:hover { background: #bff0d3; transform: translateY(-1px); }
.row-actions { display: flex; gap: 5px; }
.access-note { border-radius: 9px; padding: 11px 13px; background: #f1f5f2; color: var(--muted); font-size: 12px; line-height: 1.45; }
.dispatch-register { margin-top: 22px; }
.load-filter-grid { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)) auto; gap: 10px; align-items: end; padding: 15px; margin-bottom: 14px; border-radius: 11px; background: #f3f6f4; }
.load-filter-grid .field { margin: 0; }
.clear-filters { min-height: 42px; white-space: nowrap; }
.load-actions { margin-top: 7px; }
.booking-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 20px; align-items: start; }
.booking-pdf-drop { margin: 0 0 17px; min-height: 150px; cursor: pointer; transition: .2s; }
.booking-pdf-drop:hover { border-color: var(--green-dark); background: #f3fbf6; }
.booking-pdf-drop.loading { opacity: .72; pointer-events: none; }
.booking-email-form textarea { resize: vertical; min-height: 210px; }
.booking-result { margin-top: 16px; border: 1px solid #b9d8c8; border-radius: 12px; padding: 14px 15px; background: #f0fbf5; color: var(--ink); }
.booking-result p { margin: 5px 0 8px; font-size: 13px; }
.booking-result ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.booking-result.updated { border-color: #efc876; background: #fff8e9; }
.automation-list { margin: 0; padding-left: 20px; display: grid; gap: 16px; }
.automation-list li::marker { color: var(--green-dark); font-weight: 900; }
.automation-list strong, .automation-list small { display: block; }
.automation-list small { color: var(--muted); margin-top: 3px; line-height: 1.4; }
.webhook-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 15px; background: #f4f8f5; margin-bottom: 18px; }
.webhook-card span, .webhook-card strong, .webhook-card small { display: block; }
.webhook-card span { color: var(--green-dark); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.webhook-card strong { font: 800 15px "Manrope"; margin: 5px 0; overflow-wrap: anywhere; }
.webhook-card small { color: var(--muted); line-height: 1.45; }
.wide-modal { width: min(760px, 100%); }
.edit-load-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.manual-load-modal { max-height: calc(100vh - 36px); overflow-y: auto; }
.manual-load-modal .modal-head p { margin: 5px 0 0; font-size: 13px; }
.manual-load-grid .field label small { color: var(--muted); font-weight: 500; }
.form-error { min-height: 18px; color: #9b3434; font-size: 12px; margin-top: 4px; white-space: pre-wrap; }
.load-driver-select { display: grid; gap: 5px; margin-top: 13px; }
.load-driver-select span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.load-driver-select select { min-width: 165px; border: 1px solid #c9d5ce; border-radius: 8px; padding: 8px; background: white; color: var(--ink); font-size: 12px; }
.confirm-bar { position: sticky; bottom: 14px; margin-top: 18px; background: var(--navy); color: white; border-radius: 14px; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 20px; box-shadow: 0 12px 32px rgba(11,22,32,.22); }
.confirm-bar small { display: block; color: #aebac0; margin-top: 3px; }
.confirmation-page { max-width: 970px; }
.success-card { text-align: center; padding: 44px clamp(24px, 7vw, 70px); }
.success-mark { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--green); color: var(--navy); display: grid; place-items: center; font-size: 30px; font-weight: 900; }
.success-card > p { max-width: 650px; margin: 13px auto 28px; }
.confirmation-metrics { display: grid; grid-template-columns: repeat(4, 1fr); background: #f1f4f1; border-radius: 13px; margin: 25px 0; }
.confirmation-metrics div { padding: 18px 10px; border-right: 1px solid #dbe2dd; }
.confirmation-metrics div:last-child { border: 0; }
.confirmation-metrics strong, .confirmation-metrics span { display: block; }
.confirmation-metrics strong { font: 800 26px "Manrope"; }.confirmation-metrics span { font-size: 11px; color: var(--muted); }
.published-list { text-align: left; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; }
.published-list div { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; font-size: 13px; }
.published-list span { color: var(--muted); }.published-list strong { text-align: right; }
.success-actions { display: flex; justify-content: center; gap: 9px; margin-top: 26px; }
.link-flow { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 25px 10px; }
.link-flow div { display: flex; gap: 9px; align-items: center; }.link-flow div > b { color: var(--green-dark); }
.link-flow span, .link-flow small { display: block; }.link-flow small { color: var(--muted); }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; background: rgba(4,12,18,.6); display: grid; place-items: center; padding: 18px; }
.modal { width: min(510px, 100%); background: white; border-radius: 17px; padding: 25px; box-shadow: var(--shadow); }
.modal-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 23px; }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 19px; }
.choice-row.three-choice { grid-template-columns: 1fr 1fr 1fr; }
.choice { border: 1px solid #bfcfc7; border-radius: 11px; background: #f7fbf8; padding: 14px; font-weight: 800; transition: .15s; box-shadow: 0 3px 10px rgba(16,32,44,.05); }
.choice:hover { border-color: var(--green-dark); background: #eefaf4; transform: translateY(-1px); }
.choice.selected.neutral { border-color: #6f7f89; background: #eef2f4; color: #30414c; }
.choice.selected.good { border-color: var(--green-dark); background: #e9f8f0; color: var(--green-dark); }
.choice.selected.bad { border-color: var(--red); background: #fcedeb; color: #9b3434; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.toast { position: fixed; z-index: 30; left: 50%; top: 18px; transform: translate(-50%, -90px); background: var(--navy); color: white; border-radius: 10px; padding: 12px 18px; box-shadow: var(--shadow); transition: .25s; font-size: 13px; }
.toast.show { transform: translate(-50%, 0); }
.empty { text-align: center; padding: 45px; color: var(--muted); }
.mobile-only { display: none; }

[data-theme="dark"] {
  --ink: #edf7f3;
  --muted: #a8bab4;
  --paper: #071019;
  --card: #101b24;
  --navy: #050b12;
  --green: #4ae69b;
  --green-dark: #67e5a8;
  --amber: #f8bd55;
  --red: #ff7a70;
  --line: #263844;
  --shadow: 0 16px 42px rgba(0,0,0,.42);
}
[data-theme="dark"] body { background: radial-gradient(circle at top left, rgba(57,217,138,.08), transparent 34%), var(--paper); }
[data-theme="dark"] .topbar,
[data-theme="dark"] .login-screen,
[data-theme="dark"] .ai-card,
[data-theme="dark"] .dispatch-date-banner,
[data-theme="dark"] .confirm-bar,
[data-theme="dark"] .toast { background: #050b12; }
[data-theme="dark"] .card,
[data-theme="dark"] .modal,
[data-theme="dark"] .login-panel { background: var(--card); border-color: var(--line); }
[data-theme="dark"] .login-story:after { border-color: #233643; box-shadow: 0 0 0 80px rgba(74,230,155,.04), 0 0 0 160px rgba(74,230,155,.025); }
[data-theme="dark"] .login-story p,
[data-theme="dark"] .user-meta small,
[data-theme="dark"] .dispatch-date-banner span,
[data-theme="dark"] .confirm-bar small,
[data-theme="dark"] .ai-card p { color: #9eb0ac; }
[data-theme="dark"] .avatar { background: #162633; border-color: #314653; }
[data-theme="dark"] .icon-btn { color: #b9c8c5; }
[data-theme="dark"] .icon-btn:hover { color: #ffffff; }
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .notification-bell { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #e1ebe8; }
[data-theme="dark"] .login-theme { background: #152733; border-color: #2d4654; color: var(--ink); }
[data-theme="dark"] .login-theme:hover { background: #1b3340; color: #ffffff; }
[data-theme="dark"] .shadow-pill { background: #3b2a10; border-color: #a97822; color: #ffd98c; box-shadow: 0 6px 16px rgba(0,0,0,.28); }
[data-theme="dark"] .shadow-pill:hover { background: #4a3514; color: #fff1cd; }
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .search-box input,
[data-theme="dark"] .driver-assignment-select,
[data-theme="dark"] .load-driver-select select { background: #0c1720; border-color: #334752; color: var(--ink); }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #7f938e; }
[data-theme="dark"] .login-role,
[data-theme="dark"] .demo-pill,
[data-theme="dark"] .choice { background: #0f1b24; border-color: #334752; color: var(--ink); box-shadow: none; }
[data-theme="dark"] .login-role:hover,
[data-theme="dark"] .login-role.active,
[data-theme="dark"] .demo-pill:hover,
[data-theme="dark"] .choice:hover { background: #132634; border-color: var(--green-dark); }
[data-theme="dark"] .choice.selected.neutral { background: #162632; color: #dbe7e3; border-color: #60717b; }
[data-theme="dark"] .choice.selected.good { background: #103021; color: #8df0bc; border-color: #5ddfa0; }
[data-theme="dark"] .choice.selected.bad { background: #331a1c; color: #ffb0aa; border-color: #ff8178; }
[data-theme="dark"] .home-hero,
[data-theme="dark"] .shortcut-card,
[data-theme="dark"] .action-plan { background: linear-gradient(135deg, #101b24 0%, #0c2019 100%); }
[data-theme="dark"] .shortcut-card { border-color: #2c4d3f; box-shadow: 0 10px 26px rgba(0,0,0,.24); }
[data-theme="dark"] .shortcut-card:hover { background: linear-gradient(135deg, #142430, #0f2d22); box-shadow: 0 14px 32px rgba(0,0,0,.34); }
[data-theme="dark"] .shortcut-card.attention,
[data-theme="dark"] .attention-stat,
[data-theme="dark"] .notice,
[data-theme="dark"] .booking-result.updated,
[data-theme="dark"] .match-chip.unassigned,
[data-theme="dark"] .match-chip.new,
[data-theme="dark"] .badge-pending { background: #332613; color: #ffd899; border-color: #785321; }
[data-theme="dark"] .shortcut-card.attention:hover { background: #3d2c14; }
[data-theme="dark"] .shipment-strip div,
[data-theme="dark"] .update-queue article,
[data-theme="dark"] .route-summary-card,
[data-theme="dark"] .bulk-toolbar,
[data-theme="dark"] .notification-card,
[data-theme="dark"] .preference-row,
[data-theme="dark"] .notification-load-detail div,
[data-theme="dark"] .booking-result,
[data-theme="dark"] .webhook-card,
[data-theme="dark"] .manager-form,
[data-theme="dark"] .load-filter-grid,
[data-theme="dark"] .import-zone,
[data-theme="dark"] .revision-note,
[data-theme="dark"] .access-note,
[data-theme="dark"] .confirmation-metrics,
[data-theme="dark"] .next-action { background: #0c1720; border-color: var(--line); }
[data-theme="dark"] .notification-card.unread { background: #102a20; border-color: #2d8059; box-shadow: inset 4px 0 0 var(--green); }
[data-theme="dark"] .bulk-toolbar.active { background: #102a20; border-color: #39795d; color: var(--ink); }
[data-theme="dark"] .notification-card.clickable:hover { border-color: #4aa879; box-shadow: 0 10px 24px rgba(0,0,0,.28); }
[data-theme="dark"] .booking-pdf-drop:hover { background: #10251d; border-color: var(--green-dark); }
[data-theme="dark"] .filter-icon,
[data-theme="dark"] .route-summary-card b,
[data-theme="dark"] .step-number,
[data-theme="dark"] .upload-icon,
[data-theme="dark"] .check-list li > span,
[data-theme="dark"] .analysis-ready,
[data-theme="dark"] .review-ready,
[data-theme="dark"] .match-chip.matched,
[data-theme="dark"] .match-chip.assigned,
[data-theme="dark"] .badge-completed { background: #123522; color: #8cf0bc; }
[data-theme="dark"] .btn-dark { background: linear-gradient(135deg, #162737, #254254); border-color: #3a5968; color: white; }
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .edit-btn { background: #123522; border-color: #3c8b62; color: #9cf4c6; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .edit-btn:hover { background: #16462c; color: #d8ffea; }
[data-theme="dark"] .btn-danger,
[data-theme="dark"] .remove-btn { background: #3b1d20; border-color: #88433f; color: #ffb3ad; }
[data-theme="dark"] .btn-danger:hover,
[data-theme="dark"] .remove-btn:hover { background: #4a2327; }
[data-theme="dark"] .period-tabs,
[data-theme="dark"] .ops-nav,
[data-theme="dark"] .tabs { background: rgba(17,31,41,.68); border-color: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 32px rgba(0,0,0,.22); }
[data-theme="dark"] .period-tabs button,
[data-theme="dark"] .ops-nav button,
[data-theme="dark"] .tab { color: #a9bbb6; }
[data-theme="dark"] .period-tabs button:hover,
[data-theme="dark"] .ops-nav button:hover,
[data-theme="dark"] .tab:hover { background: rgba(255,255,255,.07); color: #ffffff; }
[data-theme="dark"] .period-tabs button.active,
[data-theme="dark"] .ops-nav button.active,
[data-theme="dark"] .tab.active { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.16); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 22px rgba(0,0,0,.28); }
[data-theme="dark"] th { color: #9caeaa; border-bottom-color: var(--line); }
[data-theme="dark"] td,
[data-theme="dark"] .manager-row,
[data-theme="dark"] .carrier-row,
[data-theme="dark"] .published-list,
[data-theme="dark"] .confirmation-metrics div,
[data-theme="dark"] .shipping-brief { border-color: var(--line); }
[data-theme="dark"] .table-company,
[data-theme="dark"] .table-booking,
[data-theme="dark"] .history-booking,
[data-theme="dark"] .load-meta strong,
[data-theme="dark"] .deadline-row b,
[data-theme="dark"] .insight-top strong,
[data-theme="dark"] .revision-note strong { color: var(--ink); }
[data-theme="dark"] .date-chip,
[data-theme="dark"] .deadline-row span,
[data-theme="dark"] .read-pill,
[data-theme="dark"] .rate-pill,
[data-theme="dark"] .manager-counts span,
[data-theme="dark"] .badge-cancelled { background: #192633; color: #aebfbb; }
[data-theme="dark"] .movement-pill { background: #142f25; color: #9cefc2; }
[data-theme="dark"] .badge-missed,
[data-theme="dark"] .rate-pill.bad { background: #3a1d20; color: #ffaaa4; }
[data-theme="dark"] .rate-pill.good { background: #123522; color: #8cf0bc; }
[data-theme="dark"] .bar { background: #192633; }
[data-theme="dark"] .donut:after { background: var(--card); }
[data-theme="dark"] .insight-card { background: #0c1720; border-color: var(--line); }
[data-theme="dark"] .privacy-chip,
[data-theme="dark"] .private-ai-note { background:#102a22; color:#9ce2bd; border-color:#285946; }
[data-theme="dark"] .private-ai-note p { color:#a6b7b1; }
[data-theme="dark"] .pareto-rank { background:#17272c; }
[data-theme="dark"] .pareto-track { background:linear-gradient(90deg,#17272c 0 79.5%,#3c4d50 79.5% 80.5%,#17272c 80.5%); }
[data-theme="dark"] .pareto-track b,
[data-theme="dark"] .pareto-key b { background:#d7e4df; }
[data-theme="dark"] .indicator-option { background:#111e27; }[data-theme="dark"] .indicator-option.selected { background:#102a22; border-color:#39795d; }
[data-theme="dark"] .admin-rights-toggle { background:#111e27; }[data-theme="dark"] .admin-badge { background:#103426; color:#9ce2bd; }
[data-theme="dark"] .upload-error,
[data-theme="dark"] .form-error,
[data-theme="dark"] .login-error { background: transparent; color: #ffaba5; border-color: #86413d; }
[data-theme="dark"] .upload-error { background: #321c1d; }
[data-theme="dark"] .upload-error p { color: #ffb5af; }
[data-theme="dark"] .workflow-strip > i,
[data-theme="dark"] .route-line { background: #40545f; }
[data-theme="dark"] .workflow-step b { background: #263742; color: #d9e6e2; }
[data-theme="dark"] .workflow-step.active b { background: var(--green); color: #071019; }
[data-theme="dark"] .success-mark,
[data-theme="dark"] .btn-primary { color: #06120d; }

@media (max-width: 1050px) {
  .company-filter { align-items: stretch; flex-direction: column; }
  .dashboard-selectors { width: 100%; justify-content: stretch; }
  .company-select { width: auto; }
  .home-hero { align-items: stretch; flex-direction: column; }
  .home-actions { width: 100%; }
  .shortcut-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 850px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-story { min-height: 280px; padding: 32px; }
  .login-story h1 { font-size: 42px; margin-top: 60px; }
  .login-panel { border-radius: 26px 26px 0 0; padding: 42px 24px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .dispatch-grid { grid-template-columns: 1fr; }
  .booking-grid { grid-template-columns: 1fr; }
  .analysis-grid,.analysis-grid.lower { grid-template-columns:1fr; }
  .pareto-grid { grid-template-columns:1fr; }
  .analysis-controls { align-items:stretch; flex-direction:column; }
  .analysis-selectors { width:100%; }.analysis-selectors .field { flex:1; }
  .analysis-kpis { grid-template-columns:1fr 1fr; }
  .manager-grid { grid-template-columns: 1fr; }
  .load-filter-grid { grid-template-columns: 1fr 1fr 1fr; }
  .load-card { grid-template-columns: 1fr auto; }
  .load-card .load-meta { display: none; }
  .shipment-strip { grid-template-columns: repeat(2, 1fr); }
  .notification-layout { grid-template-columns: 1fr; }
  .notification-prefs { position: static; }
}
@media (max-width: 560px) {
  .topbar { height: 66px; padding: 0 16px; }
  .topbar-theme { width: 38px; padding: 0; justify-content: center; }
  .topbar-theme small { display: none; }
  .user-meta { display: none; }
  .page { padding-top: 28px; }
  .heading-row { align-items: start; flex-direction: column; }
  .heading-row .btn { width: 100%; }
  .stats { grid-template-columns: 1fr 1fr; gap: 9px; }
  .stat { padding: 15px; }.stat-value { font-size: 24px; }
  .load-card { grid-template-columns: 1fr; gap: 15px; }
  .update-actions { text-align: left; }.update-actions .btn { width: 100%; }
  .route { font-size: 14px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .company-filter { align-items: stretch; flex-direction: column; }
  .company-select { width: 100%; }
  .dashboard-selectors { width: 100%; align-items: stretch; flex-direction: column; }
  .demo-pills { flex-direction: column; }
  .login-role-grid { grid-template-columns: 1fr; }
  .login-role { min-height: auto; }
  .login-story h1 { font-size: 36px; }
  .login-story p { font-size: 15px; }
  .home-hero { padding: 20px; }
  .home-actions { align-items: stretch; flex-direction: column; }
  .shortcut-grid { grid-template-columns: 1fr; }
  .shortcut-card { min-height: 108px; }
  .workflow-strip > i { width: 20px; margin: 0 7px; }
  .workflow-step small { display: none; }
  .confirm-bar { align-items: stretch; flex-direction: column; }
  .dispatch-date-banner { align-items: flex-start; flex-direction: column; gap: 5px; }
  .confirmation-metrics { grid-template-columns: 1fr 1fr; }
  .confirmation-metrics div:nth-child(2) { border-right: 0; }
  .confirmation-metrics div:nth-child(-n+2) { border-bottom: 1px solid #dbe2dd; }
  .success-actions { flex-direction: column; }
  .link-flow { align-items: start; flex-direction: column; }
  .link-flow > i { transform: rotate(90deg); margin-left: 12px; }
  .shipping-brief { grid-template-columns: 1fr 1fr; }
  .history-summary { grid-template-columns: 1fr; }
  .history-toolbar { align-items: stretch; flex-direction: column; }
  .manager-form { grid-template-columns: 1fr; }
  .logistics-user-form { grid-template-columns: 1fr; }
  .load-filter-grid, .edit-load-grid { grid-template-columns: 1fr; }
  .manager-form .field:first-child { grid-column: auto; }
  .search-box { max-width: none; }
  .analysis-selectors,.action-plan-head { flex-direction:column; }
  .analysis-scope-row,.indicator-editor-head { align-items:stretch; flex-direction:column; }
  .pareto-heading { align-items:start; flex-direction:column; }
  .analysis-selectors .field { width:100%; }
  .insight-grid { grid-template-columns:1fr; }
  .donut-wrap { flex-direction:column; }
  .choice-row.three-choice { grid-template-columns: 1fr; }
  .notification-card { align-items: stretch; flex-direction: column; }
  .notification-actions .btn { width: 100%; }
  .ops-nav { max-width: 100%; overflow-x: auto; }
  .ops-nav button { white-space: nowrap; }
}