@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root { --ink:#12221f; --muted:#6f807b; --line:#dce6e2; --surface:#f4f8f6; --lime:#c9ef67; --deep:#17352d; }
* { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { margin:0; min-width:320px; overflow-x:hidden; font-family:'DM Sans',sans-serif; background:var(--surface); color:var(--ink); } button,input,select { font:inherit; } h1,h2 { font-family:'Space Grotesk',sans-serif; }
.atlas-shell { min-height:100vh; display:flex; } .atlas-sidebar { width:248px; background:var(--deep); color:#fff; padding:30px 20px; } .brand { font:700 27px 'Space Grotesk',sans-serif; letter-spacing:.16em; color:var(--lime); margin:0 14px 58px; } .atlas-sidebar nav { display:grid; gap:7px; } .atlas-sidebar a { color:#bbcbc5; text-decoration:none; padding:12px 14px; border-radius:10px; font-size:14px; } .atlas-sidebar a:hover { background:#285044; color:#fff; }
.atlas-main { width:100%; padding:56px clamp(24px,6vw,90px); max-width:1440px; } .page-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:42px; } .eyebrow { color:#5f7d73; font-size:11px; letter-spacing:.15em; font-weight:700; } h1 { margin:8px 0; font-size:42px; letter-spacing:-.04em; } .page-heading p { margin:0; color:var(--muted); } .status-pill { background:#e7f4cf; color:#42621c; border-radius:30px; padding:9px 14px; font-size:12px; font-weight:600; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; } .metric-card,.panel { background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:0 10px 35px rgba(16,45,36,.04); } .metric-card { display:grid; gap:18px; min-height:160px; } .metric-card span,.metric-card small { color:var(--muted); font-size:13px; } .metric-card strong { font:600 38px 'Space Grotesk'; } .metric-card.accent { background:var(--deep); color:#fff; } .metric-card.accent span,.metric-card.accent small { color:#bbcbc5; } .panel { max-width:760px; } .panel h2 { margin:12px 0 8px; } .panel p { color:var(--muted); line-height:1.7; } .primary-button { border:0; border-radius:10px; padding:12px 17px; background:var(--deep); color:#fff; font:600 13px 'DM Sans'; } .empty-state { text-align:center; max-width:none; padding:90px 24px; } .empty-icon { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; margin:auto; background:var(--lime); font-size:26px; } @media(max-width:900px){.atlas-sidebar{width:190px}.metric-grid{grid-template-columns:repeat(2,1fr)}}
.tenant-label { color:#90aaa0; font-size:11px; margin:-40px 14px 34px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.topbar { display:flex; justify-content:space-between; align-items:center; gap:18px; border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:42px; }.topbar strong { display:block; margin-top:5px; font-size:14px; }.user-menu { display:flex; align-items:center; gap:18px; font-size:13px; color:var(--muted); }.link-button,.table-action { border:0; background:none; color:#49695f; cursor:pointer; font:inherit; }.link-button:hover,.table-action:hover { color:var(--ink); text-decoration:underline; }
.metric-grid.compact { grid-template-columns:repeat(2,1fr); max-width:50%; margin-top:-12px; }.dashboard-columns { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }.panel-heading h2 { margin:8px 0 0; }.panel-heading a { color:#507267; font-size:13px; }.data-list { display:grid; }.data-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); }.data-row:last-child { border-bottom:0; }.data-row div { display:grid; gap:5px; }.data-row span { color:var(--muted); font-size:12px; }.badge { display:inline-block; width:max-content; background:#edf3ef; color:#486359; border-radius:20px; padding:5px 9px; font-size:11px; white-space:nowrap; }.badge.success { background:#e7f4cf; color:#42621c; }.badge.muted { background:#eef0ef; color:#7b8783; }
.toolbar { display:flex; gap:10px; margin-bottom:18px; }.toolbar input,.toolbar select { border:1px solid var(--line); border-radius:10px; background:#fff; padding:11px 13px; font:inherit; color:var(--ink); }.toolbar input { min-width:280px; }.secondary-button { border:1px solid var(--line); border-radius:10px; background:#fff; padding:10px 15px; color:var(--ink); cursor:pointer; }.table-panel { max-width:none; overflow:auto; }.table-panel table { width:100%; border-collapse:collapse; font-size:13px; }.table-panel th { text-align:left; color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:0 12px 13px; white-space:nowrap; }.table-panel td { padding:15px 12px; border-top:1px solid var(--line); vertical-align:middle; white-space:nowrap; }.table-panel td:first-child { min-width:170px; }.subline { display:block; color:var(--muted); font-size:12px; margin-top:4px; white-space:normal; }.table-action { margin-left:10px; font-size:12px; }
.drawer-backdrop { position:fixed; inset:0; background:rgba(18,34,31,.35); z-index:20; display:flex; justify-content:flex-end; }.drawer { background:#fff; height:100%; width:min(520px,100%); padding:42px; overflow:auto; position:relative; }.drawer.wide { width:min(760px,100%); }.drawer .close { position:absolute; right:25px; top:22px; border:0; background:none; font-size:28px; color:var(--muted); cursor:pointer; }.drawer h2 { margin:10px 0 28px; }.form-note { display:flex; align-items:center; gap:5px; margin:-12px 0 18px; color:var(--muted); font-size:12px; }.required-mark { color:#c5533e; font-weight:800; }.required-label { color:var(--ink) !important; }.optional-label { display:inline-block; margin-left:5px; padding:2px 6px; border-radius:999px; background:#eef4f1; color:#6f8980; font-size:10px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:20px; }.field { display:grid; gap:7px; }.field label { font-size:12px; color:var(--muted); }.field input,.field select { width:100%; border:1px solid var(--line); border-radius:9px; padding:10px 11px; font:inherit; color:var(--ink); background:#fff; }.field input:focus,.field select:focus { outline:3px solid rgba(137,184,117,.22); border-color:#78a992; }.full-field { grid-column:1/-1; }.credential-card { display:grid; gap:14px; margin-top:30px; padding:20px; border:1px solid #d7e5df; border-radius:16px; background:linear-gradient(145deg,#f6faf8,#edf5f1); }.credential-card h3 { margin:4px 0 0; font-size:20px; }.credential-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }.success-box { background:#edf8ee; color:#2e7040; border:1px solid #bde1c3; border-radius:10px; padding:12px 14px; font-size:13px; }.error-box { background:#fff0ed; color:#9c3d2b; border:1px solid #f3c7bd; border-radius:10px; padding:12px 14px; margin:14px 0; font-size:13px; }.loading { color:var(--muted); padding:40px 0; }.callout { max-width:760px; }.settings-list { max-width:760px; display:grid; gap:22px; }.settings-list div { display:grid; gap:6px; padding-bottom:18px; border-bottom:1px solid var(--line); }.settings-list div:last-child { border:0; padding:0; }
.login-shell { min-height:100vh; background:var(--surface); display:grid; place-items:center; padding:24px; }.login-card { width:min(430px,100%); background:#fff; border:1px solid var(--line); border-radius:22px; padding:42px; box-shadow:0 20px 60px rgba(16,45,36,.08); }.brand.dark { color:var(--deep); margin:0 0 38px; }.login-card h1 { font-size:34px; margin:10px 0; }.login-card > p { color:var(--muted); margin-bottom:28px; }.login-card form { display:grid; gap:15px; }.login-card small { display:block; color:var(--muted); font-size:11px; margin-top:22px; }.full { width:100%; margin-top:7px; } @media(max-width:900px){.atlas-main{padding:28px 20px}.topbar{margin-bottom:28px}.dashboard-columns{grid-template-columns:1fr}.metric-grid.compact{max-width:none}.atlas-sidebar{width:200px}} @media(max-width:620px){.atlas-shell{display:block}.atlas-sidebar{width:100%; padding:18px}.brand{margin:0 0 15px}.tenant-label{margin:-5px 0 15px}.atlas-sidebar nav{display:flex; overflow:auto; gap:4px}.atlas-sidebar a{white-space:nowrap;padding:9px}.page-heading{display:block}.page-heading .primary-button{margin-top:18px}.metric-grid,.metric-grid.compact{grid-template-columns:1fr}.toolbar{flex-wrap:wrap}.toolbar input{min-width:0;width:100%}.form-grid{grid-template-columns:1fr}.full-field{grid-column:auto}.drawer{padding:30px 22px}}
.match-map { height: 480px; border-radius: 12px; overflow: hidden; margin: 12px 0 10px; }
.map-legend { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:12px; color:var(--muted); font-size:12px; }
.legend-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
.legend-dot.gps { background:#2e8b57; } .legend-dot.matched { background:#d46a3a; }
.muted { color:var(--muted); }
.validation-summary { background:#fff0ed; color:#9c3d2b; border:1px solid #f3c7bd; border-radius:10px; padding:10px 14px 10px 30px; margin:0 0 14px; font-size:13px; }

/* Atlas 2026 visual system */
:root { --ink:#102638; --muted:#647786; --line:#dce6eb; --surface:#f4f7f9; --lime:#72d6c9; --deep:#102f44; --brand:#0f7f7a; --sky:#39a9db; --warm:#ffb35c; }
body { background:var(--surface); color:var(--ink); }
.atlas-sidebar { width:236px; flex:0 0 236px; min-height:100vh; height:100vh; position:sticky; top:0; overflow-y:auto; padding:24px 18px; background:linear-gradient(180deg,#102f44,#0b2435); }
.atlas-main { width:calc(100% - 236px); max-width:1800px; padding:36px clamp(24px,4vw,64px) 64px; }
.page-heading { margin-bottom:32px; }.eyebrow { color:#4f7f87; font-size:10px; }.page-heading h1 { font-size:40px; }
.panel,.metric-card { border-color:var(--line); box-shadow:0 10px 35px rgba(16,47,68,.04); }
.primary-button { background:var(--brand); box-shadow:0 7px 18px rgba(15,127,122,.16); cursor:pointer; }.primary-button:hover { background:#0b706c; }
.secondary-button { cursor:pointer; }.status-pill { background:#e2f5f2; color:#16736d; }
.field input:focus,.field select:focus { outline:3px solid rgba(57,169,219,.16); border-color:var(--sky); }
.success-box { margin:14px 0; background:#e9f8f4; color:#176e63; border-color:#b9e5da; }
.metric-card.accent { background:linear-gradient(135deg,var(--deep),#15506b); }

.brand-block { display:flex; align-items:center; gap:11px; padding:0 8px 20px!important; color:#fff!important; text-decoration:none; }
.brand-block:hover { background:transparent!important; }.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:linear-gradient(145deg,#40c9bc,#27a7d5); color:#082537; font:800 20px 'Space Grotesk'; }
.brand-block strong { display:block; font:700 18px 'Space Grotesk'; letter-spacing:.11em; }.brand-block small { display:block; color:#85a4b3; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.atlas-sidebar .tenant-label { margin:0 10px 22px; padding:10px 12px; border:1px solid rgba(255,255,255,.08); border-radius:10px; color:#9db6c3; background:rgba(255,255,255,.03); }
.main-nav { display:grid!important; gap:4px!important; }.nav-label { margin:18px 11px 5px; color:#688b9b; font-size:9px; font-weight:700; letter-spacing:.15em; }
.main-nav a { display:flex; align-items:center; gap:11px; color:#b9cbd5; padding:10px 12px; border-radius:10px; font-size:13px; }.main-nav a:hover { background:rgba(255,255,255,.08); color:#fff; }
.main-nav a.active { background:linear-gradient(90deg,rgba(61,197,185,.22),rgba(61,197,185,.07)); color:#fff; box-shadow:inset 2px 0 #49d2c5; }.nav-icon { width:20px; text-align:center; color:#71acbb; font-size:15px; }.main-nav a.active .nav-icon { color:#64ddd0; }
.user-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:#dff3f2; color:var(--brand); font-weight:700; }
.mobile-menu-toggle,.mobile-menu-close,.mobile-menu-backdrop { display:none; }

/* Weekplanning */
.planning-heading { align-items:center; }.week-switcher { display:flex; align-items:stretch; gap:8px; }.icon-button,.week-button { border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:12px; cursor:pointer; }.icon-button { width:44px; font-size:20px; }
.week-button { display:grid; grid-template-columns:auto auto; align-items:center; gap:0 8px; padding:7px 16px; }.week-button small { grid-row:1/3; writing-mode:vertical-rl; font-size:8px; letter-spacing:.12em; color:var(--muted); }.week-button strong { font:700 20px 'Space Grotesk'; line-height:1; }.week-button span { font-size:10px; color:var(--muted); }
.planning-toolbar { max-width:none; display:flex; align-items:end; gap:20px; margin-bottom:16px; padding:16px 20px; }.planning-period { display:grid; gap:4px; margin-right:auto; }.planning-period span { color:var(--muted); font-size:12px; }.planning-search { width:260px; }
.planning-board { max-width:none; padding:0; overflow:auto; }.planning-grid { min-width:1230px; }.planning-row { display:grid; grid-template-columns:190px repeat(7,minmax(145px,1fr)); border-bottom:1px solid var(--line); }.planning-row:last-child { border-bottom:0; }.planning-header-row { position:sticky; top:0; z-index:3; background:#f8fafb; }
.vehicle-cell { position:sticky; left:0; z-index:2; display:grid; align-content:center; gap:5px; min-height:138px; padding:16px 18px; background:#fff; border-right:1px solid var(--line); }.vehicle-cell strong { font:700 16px 'Space Grotesk'; letter-spacing:.04em; }.vehicle-cell span,.vehicle-cell small { color:var(--muted); font-size:11px; }.header-cell { z-index:4; min-height:78px; background:#f8fafb; }
.day-header { min-height:78px; display:grid; grid-template-columns:1fr auto; align-content:center; gap:2px 6px; padding:12px 14px; border-right:1px solid var(--line); text-transform:capitalize; }.day-header span { color:var(--muted); font-size:11px; font-weight:600; }.day-header strong { grid-row:1/3; grid-column:2; font:700 27px 'Space Grotesk'; }.day-header small { color:#91a0aa; font-size:10px; }.day-header.today { background:#eaf7f6; box-shadow:inset 0 3px var(--brand); }
.planning-cell { min-height:138px; padding:11px; border-right:1px solid var(--line); background:#fbfcfd; transition:.2s; }.planning-cell.assigned { background:#f0faf8; }.planning-cell.saving { opacity:.55; pointer-events:none; }.driver-select { width:100%; border:1px solid #d7e2e7; border-radius:9px; padding:8px; background:#fff; color:var(--ink); font:600 11px 'DM Sans'; }.planning-cell.assigned .driver-select { border-color:#8ed4ca; }
.assignment-meta { display:flex; align-items:center; gap:6px; min-height:25px; color:#1b746b; font-size:10px; }.assignment-meta small { margin-left:auto; color:var(--muted); }.assignment-meta.free { color:#84939c; }.status-dot { width:6px; height:6px; border-radius:50%; background:#2db6a6; }.assignment-meta.free .status-dot { background:#c8d2d7; }
.planning-job { width:100%; display:flex; gap:6px; align-items:center; margin-top:5px; padding:6px 7px; border:0; border-radius:7px; background:#e8f3fb; color:#215d7b; text-align:left; cursor:pointer; font-size:9px; }.planning-job strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.more-jobs { display:block; margin-top:5px; color:var(--muted); font-size:9px; }
.planning-legend { display:flex; gap:22px; margin:14px 4px; color:var(--muted); font-size:11px; }.legend-swatch { display:inline-block; width:9px; height:9px; margin-right:6px; border-radius:3px; background:#dbe3e7; }.legend-swatch.assigned { background:#73cfbf; }.legend-swatch.job { background:#9dcdec; }

/* Route and toll */
.route-state { display:flex; align-items:center; gap:8px; padding:9px 13px; border-radius:99px; background:#e8f7f3; color:#167467; font-size:12px; font-weight:700; }.route-state>span { width:8px; height:8px; border-radius:50%; background:#24b29c; box-shadow:0 0 0 4px rgba(36,178,156,.12); }.route-state.processing { background:#fff5e7; color:#9b650f; }.route-state.processing>span { background:#efaa38; }
.compact-stats { grid-template-columns:repeat(4,1fr); }.route-panel { max-width:none; }.route-panel .map-legend { margin:0; }.map-stage { position:relative; min-height:480px; border-radius:14px; overflow:hidden; background:#e8eef1; }.trip-map { height:480px; }.map-loading { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; background:rgba(244,247,249,.82); color:var(--muted); font-size:12px; }
.spinner { display:inline-block; width:30px; height:30px; border:3px solid #d8e4e8; border-top-color:var(--brand); border-radius:50%; animation:spin .8s linear infinite; }.spinner.small { width:15px; height:15px; border-width:2px; }@keyframes spin { to { transform:rotate(360deg); } }
.inline-notice,.processing-note { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0 0; padding:10px 12px; border-radius:9px; background:#f2f6f8; color:var(--muted); font-size:12px; }.processing-note { justify-content:flex-start; }.admin-detail { max-width:none; margin-top:18px; }.processing-panel { display:flex; align-items:center; gap:18px; max-width:none; }.processing-panel h2,.processing-panel p { margin:0; }
.toll-summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px; }.toll-amount { display:grid; gap:8px; padding:24px; border:1px solid var(--line); border-radius:18px; background:#fff; }.toll-amount span,.toll-amount small { color:var(--muted); font-size:12px; }.toll-amount strong { font:700 34px 'Space Grotesk'; }.toll-amount.confirmed { border-top:4px solid #29b39e; }.toll-amount.possible { border-top:4px solid var(--warm); }.toll-amount.total { color:#fff; border:0; border-top:4px solid #42cde0; background:linear-gradient(135deg,#102f44,#15566f); }.toll-amount.total span,.toll-amount.total small { color:#bfd5df; }
.toll-details { max-width:none; display:grid; grid-template-columns:repeat(3,1fr); padding:0; }.toll-details div { display:grid; gap:7px; padding:20px 24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.toll-details div:nth-child(3n) { border-right:0; }.toll-details div:nth-last-child(-n+3) { border-bottom:0; }.toll-details span { color:var(--muted); font-size:11px; }.toll-details strong { font-size:14px; }

/* Financial dashboard */
.finance-filters { max-width:none; display:grid; grid-template-columns:repeat(6,minmax(130px,1fr)); align-items:end; gap:13px; padding:18px; }.clear-filters { grid-column:1/-1; justify-self:start; }.finance-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:18px 0; }
.toll-filters { grid-template-columns:repeat(5,minmax(150px,1fr)); }.table-actions { display:flex; gap:8px; }
.finance-kpi { display:grid; gap:8px; padding:22px; border:1px solid var(--line); border-radius:17px; background:#fff; box-shadow:0 10px 35px rgba(16,47,68,.04); }.finance-kpi span,.finance-kpi small { color:var(--muted); font-size:12px; }.finance-kpi strong { font:700 29px 'Space Grotesk'; }.finance-kpi.revenue { border-top:3px solid var(--sky); }.finance-kpi.toll { border-top:3px solid var(--warm); }.finance-kpi.margin { border-top:3px solid #2db6a6; }.finance-kpi.negative { border-top-color:#dc765e; }
.finance-breakdown { max-width:none; padding:0; overflow:hidden; }.finance-panel-heading { align-items:center; padding:20px 22px 0; }.segment-control { display:flex; padding:3px; border-radius:10px; background:#edf2f4; }.segment-control button { border:0; padding:8px 11px; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; font:600 11px 'DM Sans'; }.segment-control button.active { background:#fff; color:var(--ink); box-shadow:0 2px 7px rgba(16,47,68,.1); }
.table-scroll { overflow:auto; }.finance-breakdown table { width:100%; border-collapse:collapse; font-size:13px; }.finance-breakdown th { padding:11px 18px; background:#f8fafb; color:var(--muted); text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }.finance-breakdown td { padding:15px 18px; border-top:1px solid var(--line); white-space:nowrap; }.positive-value { color:#147b6e; font-weight:700; }.negative-value { color:#b84d36; font-weight:700; }.empty-table { padding:50px; text-align:center; color:var(--muted); }.finance-footnotes { display:flex; gap:10px; margin-top:12px; }.finance-footnotes span { padding:8px 12px; border-radius:99px; background:#e9eff2; color:var(--muted); font-size:11px; }

@media(max-width:1100px){.finance-filters{grid-template-columns:repeat(3,1fr)}.finance-kpis{grid-template-columns:repeat(2,1fr)}.compact-stats{grid-template-columns:repeat(2,1fr)}.toll-details{grid-template-columns:repeat(2,1fr)}.toll-details div:nth-child(3n){border-right:1px solid var(--line)}.toll-details div:nth-child(2n){border-right:0}.toll-details div:nth-last-child(-n+3){border-bottom:1px solid var(--line)}.toll-details div:nth-last-child(-n+2){border-bottom:0}}
@media(max-width:900px){.atlas-sidebar{width:190px;flex-basis:190px}.atlas-main{width:calc(100% - 190px)}.toll-summary-grid{grid-template-columns:1fr}.finance-panel-heading{display:block}.segment-control{margin-top:14px;overflow:auto}}
@media(max-width:620px){
  .atlas-shell{display:block}
  .atlas-sidebar{position:fixed;inset:0 auto 0 0;width:min(86vw,340px);height:100dvh;min-height:100dvh;z-index:50;padding:22px 18px;transform:translateX(-105%);transition:transform .22s ease;box-shadow:12px 0 32px rgba(5,27,40,.24)}
  .atlas-sidebar.is-open{transform:translateX(0)}
  .mobile-menu-backdrop{display:block;position:fixed;inset:0;z-index:40;border:0;background:rgba(7,27,39,.48);padding:0}
  .mobile-menu-close{display:grid;place-items:center;position:absolute;right:12px;top:12px;width:40px;height:40px;border:0;border-radius:10px;background:rgba(255,255,255,.1);color:#fff;font-size:28px;line-height:1;cursor:pointer}
  .mobile-menu-toggle{display:grid;gap:4px;width:42px;height:42px;padding:11px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}.mobile-menu-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:var(--deep)}
  .brand-block{padding-right:48px!important}.nav-label{display:block;margin-top:16px}.main-nav{display:grid!important;overflow:visible!important;gap:4px!important}.main-nav a{min-height:42px;padding:10px 12px;white-space:normal}.main-nav a.active{box-shadow:inset 2px 0 #49d2c5}
  .atlas-main{width:100%;padding:20px 16px 42px}.topbar{justify-content:flex-start;margin:0 -16px 26px;padding:0 16px 16px;gap:10px}.topbar>div:nth-child(2){margin-right:auto}.topbar .eyebrow{font-size:8px;letter-spacing:.1em}.topbar strong{max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-menu{gap:8px}.user-menu>span:not(.user-avatar){display:none}.user-menu .link-button{padding:8px 4px;font-size:12px}
  .page-heading{margin-bottom:24px}.page-heading h1{font-size:32px;line-height:1.08}.page-heading p{line-height:1.5}.page-heading .form-actions{margin-top:16px}.form-actions{display:flex;flex-wrap:wrap;gap:8px}.form-actions .primary-button,.form-actions .secondary-button{flex:1 1 130px;min-height:44px}.primary-button,.secondary-button{min-height:44px}
  .metric-card,.panel{border-radius:14px;padding:18px}.metric-card{min-height:132px;gap:12px}.metric-card strong{font-size:32px}.dashboard-columns{gap:14px}.data-row{align-items:flex-start;padding:13px 0}.data-row>div:last-child{align-items:flex-end}.badge{white-space:normal;text-align:center}
  .toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}.toolbar input{grid-column:1/-1;width:100%;min-height:44px}.toolbar select,.toolbar button{min-width:0;width:100%;min-height:44px}
  .table-panel{padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-panel table{min-width:640px}.table-panel th{padding:13px 12px}.table-panel td{padding:13px 12px}.table-panel:after{content:'Veeg horizontaal om alle kolommen te zien';display:block;padding:9px 14px;color:var(--muted);font-size:11px;border-top:1px solid var(--line)}
  .drawer{width:100%;padding:28px 18px 36px}.drawer.wide{width:100%}.drawer .close{right:14px;top:15px}.form-grid{gap:12px}.field input,.field select{min-height:44px}.empty-state{padding:54px 18px}.map-stage,.trip-map,.match-map{height:320px;min-height:320px}.inline-notice,.processing-note{align-items:flex-start;flex-direction:column}.processing-panel{align-items:flex-start;flex-direction:column}
  .planning-toolbar{align-items:stretch;flex-direction:column}.planning-search{width:100%}.finance-filters{grid-template-columns:1fr}.finance-kpis,.compact-stats,.toll-details{grid-template-columns:1fr}.toll-details div,.toll-details div:nth-child(2n),.toll-details div:nth-child(3n){border-right:0;border-bottom:1px solid var(--line)}.toll-details div:last-child{border-bottom:0}.planning-legend,.finance-footnotes{overflow:auto;white-space:nowrap}.finance-panel-heading{padding:18px 18px 0}.finance-breakdown th,.finance-breakdown td{padding-left:14px;padding-right:14px}.segment-control{width:100%}
}

@media(min-width:621px){.mobile-menu-toggle,.mobile-menu-close,.mobile-menu-backdrop{display:none!important}}

/* Professional per-trip invoice */
.toll-print-document { display:none; }
.trip-invoice { max-width:980px; margin:0 auto; padding:48px 54px 36px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 18px 60px rgba(16,47,68,.08); color:#173043; }
.invoice-header { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:30px; border-bottom:2px solid #16384d; }
.invoice-brand { display:flex; align-items:center; gap:13px; }.invoice-logo { display:grid; place-items:center; width:47px; height:47px; border-radius:13px; background:linear-gradient(145deg,#40c9bc,#27a7d5); color:#09283a; font:800 24px 'Space Grotesk'; }
.invoice-brand strong { display:block; font:800 21px 'Space Grotesk'; letter-spacing:.16em; }.invoice-brand small { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
.invoice-title { display:grid; justify-items:end; gap:4px; text-align:right; }.invoice-title h1 { margin:0; font:700 34px 'Space Grotesk'; }.invoice-title>strong { color:#456170; font-size:13px; letter-spacing:.05em; }
.invoice-status { display:inline-flex; margin-top:7px; padding:6px 10px; border-radius:99px; background:#e6f6f2; color:#14766d; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }.invoice-status.review { background:#fff1dc; color:#995e08; }
.invoice-parties { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:34px; padding:30px 0; }.invoice-parties strong { display:block; margin:7px 0 5px; font-size:15px; }.invoice-parties p { margin:2px 0; color:var(--muted); font-size:12px; line-height:1.5; }.invoice-address { white-space:pre-line; }
.invoice-label { color:#62808e; font-size:9px; font-weight:800; letter-spacing:.14em; }.invoice-parties dl { display:grid; grid-template-columns:auto 1fr; align-content:start; gap:8px 15px; margin:0; font-size:11px; }.invoice-parties dt { color:var(--muted); }.invoice-parties dd { margin:0; text-align:right; font-weight:700; }
.invoice-route { display:grid; grid-template-columns:1fr 70px 1fr; align-items:center; padding:22px 25px; border-radius:13px; background:#f2f7f8; }.route-point { display:flex; align-items:flex-start; gap:12px; }.route-point>span { display:grid; place-items:center; flex:0 0 29px; height:29px; border-radius:50%; background:#163d51; color:#fff; font-size:11px; font-weight:800; }.route-point.destination>span { background:#19a397; }.route-point small { display:block; color:#6f8995; font-size:8px; font-weight:800; letter-spacing:.12em; }.route-point strong { display:block; margin:4px 0; font-size:12px; }.route-point p { margin:0; color:var(--muted); font-size:10px; }.route-line { position:relative; height:1px; background:#9bc8c5; }.route-line span { position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1px solid #4ba9a2; border-right:1px solid #4ba9a2; transform:rotate(45deg); }
.invoice-trip-meta { display:grid; grid-template-columns:repeat(4,1fr); margin:20px 0 32px; border:1px solid var(--line); border-radius:12px; }.invoice-trip-meta div { display:grid; gap:5px; padding:14px 16px; border-right:1px solid var(--line); }.invoice-trip-meta div:last-child { border:0; }.invoice-trip-meta span,.classification-grid span { color:var(--muted); font-size:9px; }.invoice-trip-meta strong { font-size:12px; }
.invoice-section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:13px; }.invoice-section-heading h2 { margin:0; font:700 17px 'Space Grotesk'; }.classification-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:32px; }.classification-grid>div { display:grid; gap:6px; min-height:90px; padding:14px; border:1px solid var(--line); border-radius:11px; background:#fbfcfd; }.classification-grid strong { font-size:12px; }.classification-grid small { color:#7d929c; font-size:9px; line-height:1.35; }
.invoice-lines table { width:100%; border-collapse:collapse; font-size:11px; }.invoice-lines th { padding:10px 12px; background:#16384d; color:#fff; text-align:left; font-size:8px; text-transform:uppercase; letter-spacing:.1em; }.invoice-lines th:not(:first-child),.invoice-lines td:not(:first-child) { text-align:right; }.invoice-lines td { padding:15px 12px; border-bottom:1px solid var(--line); }.invoice-lines td strong,.invoice-lines td small { display:block; }.invoice-lines td small { margin-top:4px; color:var(--muted); font-size:9px; }
.invoice-totals { width:min(390px,100%); margin:14px 0 30px auto; }.invoice-totals>div { display:flex; justify-content:space-between; padding:8px 12px; font-size:11px; }.invoice-totals>div span { color:var(--muted); }.invoice-totals .grand-total { margin-top:5px; padding:13px 12px; border-radius:9px; background:#e8f6f3; color:#0b645e; font-size:15px; }.invoice-totals .grand-total span { color:#317f79; font-weight:700; }
.invoice-footer { padding-top:18px; border-top:1px solid var(--line); color:#708590; font-size:9px; line-height:1.55; }.invoice-footer p { margin:0 0 8px; }.invoice-footer>div { display:flex; justify-content:space-between; margin-top:15px; padding-top:11px; border-top:1px solid #e7edef; text-transform:uppercase; letter-spacing:.06em; }.invoice-review { padding:8px 10px; border-radius:7px; background:#fff3e3; color:#8e5b14; }

@media(max-width:760px){.trip-invoice{padding:28px 20px;border-radius:13px}.invoice-header,.invoice-section-heading{display:block}.invoice-title{justify-items:start;margin-top:24px;text-align:left}.invoice-parties{grid-template-columns:1fr}.invoice-route{grid-template-columns:1fr;gap:14px}.route-line{width:1px;height:24px;margin-left:14px}.invoice-trip-meta,.classification-grid{grid-template-columns:1fr 1fr}.invoice-trip-meta div:nth-child(2){border-right:0}.invoice-trip-meta div:nth-child(-n+2){border-bottom:1px solid var(--line)}.invoice-footer>div{display:grid;gap:4px}}

@media print {
  @page { size:A4; margin:11mm; }
  body { background:#fff!important; }
  .atlas-sidebar,.topbar,.no-print,.mobile-menu-backdrop { display:none!important; }
  .toll-screen { display:none!important; }
  .toll-print-document { display:block!important; }
  .atlas-main { width:100%!important; max-width:none!important; padding:0!important; }
  .trip-invoice { width:100%; max-width:none; margin:0; padding:10mm 11mm 7mm; border:0; border-radius:0; box-shadow:none; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .invoice-header { padding-bottom:7mm; }.invoice-parties { padding:7mm 0; }.invoice-trip-meta { margin:5mm 0 7mm; }.classification-grid { margin-bottom:7mm; }
  .invoice-footer { break-inside:avoid; }.invoice-route,.invoice-trip-meta,.classification-grid,.invoice-lines table,.invoice-totals { break-inside:avoid; }
}