/* Shared modal follows the portal's Inter, MDI and colour tokens. */
.driver-history-modal{width:min(880px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);padding:0;border:1px solid var(--line,#dce5ec);border-radius:14px;color:var(--ink,#0B172A);background:var(--surface,#fff);font-family:Inter,system-ui,sans-serif;box-shadow:0 24px 80px #0d1d2d35;overflow:hidden}.driver-history-modal[open]{display:flex;flex-direction:column}.driver-history-modal::backdrop{background:#0d1d2d99;backdrop-filter:blur(3px)}.driver-history-modal *{box-sizing:border-box}.driver-history-modal p,.driver-history-modal h2,.driver-history-modal h3{margin:0}.driver-history-modal button,.driver-history-modal input{font:inherit}.driver-history-modal button{cursor:pointer;touch-action:manipulation}.driver-history-modal button:disabled{opacity:.45;cursor:default}.driver-history-modal button:focus-visible,.driver-history-modal input:focus-visible{outline:3px solid #b9d8ff;outline-offset:2px}.driver-history-modal [hidden]{display:none!important}
.dh-header{flex:none;display:flex;align-items:center;gap:16px;padding:25px 28px;border-bottom:1px solid var(--line,#dce5ec)}.dh-avatar{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:11px;background:#e9f2ff;color:var(--primary,#1570EF);font-size:26px}.dh-header>div{min-width:0;flex:1}.dh-eyebrow{color:#1570EF;font-size:10px;font-weight:800;letter-spacing:.12em;line-height:1.5}.dh-header h2{margin:4px 0!important;font-size:23px;line-height:1.25;letter-spacing:-.035em;overflow-wrap:anywhere}.dh-subtitle{color:var(--muted,#667085);font-size:12px;line-height:1.5}.driver-history-modal .dh-close{width:40px;height:40px;min-height:40px;padding:0;margin:0;line-height:1;flex:none;align-self:center;display:grid;place-items:center;border:1px solid var(--line,#dce5ec);border-radius:8px;background:white;color:#526c80;font-size:21px}.dh-close svg{display:block}.dh-close:hover{background:#F7F9FC}
.dh-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px 28px 28px;background:var(--background,#F7F9FC)}.dh-filter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:14px;align-items:end;margin:0 0 22px}.dh-filter label{display:grid;gap:8px;min-width:0;font-size:12px;font-weight:650;color:#526a7d}.dh-filter input{width:100%;min-width:0;max-width:100%;height:44px;padding:0 12px;border:1px solid #d2dde6;border-radius:8px;background:white;color:var(--ink,#0B172A);font-size:14px;-webkit-appearance:none}.dh-button{width:auto;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:1px solid transparent;border-radius:8px;font-size:13px!important;font-weight:650!important;line-height:1.4}.dh-button i{font-size:19px}.dh-primary{background:var(--primary,#1570EF);color:white;box-shadow:0 3px 8px #0d63ce18}.dh-primary:hover{background:var(--primary-dark,#084fa8)}.dh-secondary{background:white;color:#28465e;border-color:#d2dde6}.dh-secondary:hover{background:#f8fafc}
.dh-summary{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}.dh-summary>div{display:flex;align-items:center;gap:14px;padding:18px 20px;background:white;border:1px solid var(--line,#dce5ec);border-radius:10px}.dh-summary>div>i{width:42px;height:42px;display:grid;place-items:center;flex:none;border-radius:9px;background:#e9f2ff;color:#1570EF;font-size:23px}.dh-summary>div:last-child>i{background:#e9f8f1;color:#138052}.dh-summary small{display:block;color:#718292;font-size:9px;letter-spacing:.08em;font-weight:750}.dh-summary strong{display:block;margin-top:5px;font-size:24px;letter-spacing:-.04em;line-height:1.2}.dh-status{color:#667085;font-size:12px;line-height:1.6;min-height:19px}.dh-status.dh-error{padding:12px;border:1px solid #efc4c4;border-radius:8px;background:#fff2f2;color:#a52d2d}.dh-day{margin:24px 0 11px!important;font-size:12px;font-weight:650;text-transform:capitalize;color:#526a7d}.dh-trip{background:white;border:1px solid var(--line,#dce5ec);border-radius:10px;margin-bottom:12px;overflow:hidden}.dh-trip>header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #edf1f4}.dh-vehicle{display:flex;gap:10px;align-items:center;flex:1;min-width:0}.dh-vehicle>i{font-size:22px;color:#66839b;flex:none}.dh-vehicle span{min-width:0}.dh-vehicle b{display:block;font-size:13px;line-height:1.5;overflow-wrap:anywhere}.dh-vehicle small{display:block;color:#718292;font-size:11px;margin-top:2px;letter-spacing:.03em}.dh-type{font-size:10px;font-weight:650;padding:5px 8px;border:1px solid #d5dfe7;border-radius:6px;background:#f5f7f9;color:#607385;white-space:nowrap}.dh-business{border-color:#b9dfcf;background:#effaf5;color:#16714d}.dh-private{border-color:#efd5ad;background:#fff8ed;color:#a46109}.dh-distance{font-size:16px;white-space:nowrap;letter-spacing:-.02em}.dh-distance small{font-size:11px;font-weight:500;color:#718292}
.dh-route{display:grid;gap:18px;padding:20px}.dh-route>div{display:grid;grid-template-columns:43px 10px minmax(0,1fr);gap:14px;position:relative}.dh-route time{font-size:12px;color:#60778b;padding-top:3px;font-variant-numeric:tabular-nums}.dh-route small,.dh-purpose small{display:block;font-size:9px;font-weight:750;letter-spacing:.08em;color:#718292;line-height:1.5}.dh-route p{font-size:13px;font-weight:550;color:#253f55;line-height:1.6;overflow-wrap:anywhere;margin-top:3px!important}.dh-point{width:8px;height:8px;border:2px solid #3282dc;border-radius:50%;margin-top:5px;z-index:1;background:white}.dh-route>div:last-child .dh-point{background:#173750;border-color:#173750}.dh-route>div:first-child:after{content:'';position:absolute;top:14px;bottom:-23px;left:60px;border-left:1px dashed #b9c9d6}.dh-purpose{display:flex;gap:10px;align-items:flex-start;padding:13px 20px;background:#fbfcfd;border-top:1px solid #edf1f4}.dh-purpose>i{font-size:18px;color:#7a91a4}.dh-purpose p{font-size:12px;color:#526a7d;line-height:1.6;margin-top:3px!important;overflow-wrap:anywhere}.dh-empty{text-align:center;padding:38px 24px;background:white;border:1px solid var(--line,#dce5ec);border-radius:10px;margin-top:16px}.dh-empty>span{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 15px;border-radius:12px;background:#e9f2ff;color:#1570EF;font-size:27px}.dh-empty h3{font-size:16px;margin-bottom:8px!important}.dh-empty p{max-width:400px;margin:5px auto!important;font-size:12px;line-height:1.7;color:#718292}.dh-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;padding:16px 28px;border-top:1px solid var(--line,#dce5ec);background:white}.dh-footer>button{margin-left:auto}.dh-footer nav{display:flex;align-items:center;gap:12px}.dh-footer nav button{padding:8px;width:40px}.dh-footer nav span{font-size:12px;color:#667085}.dh-loading{display:grid;gap:14px;margin-top:20px}.dh-loading span{height:150px;border:1px solid #e1e8ee;background:#fff;border-radius:10px}
@media(max-width:600px){.driver-history-modal{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:12px}.dh-header{padding:18px 16px;gap:11px}.dh-avatar{width:40px;height:40px;font-size:23px}.dh-header h2{font-size:20px}.dh-eyebrow{font-size:9px}.dh-scroll{padding:18px 14px}.dh-filter{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.dh-filter input{font-size:16px;padding:0 8px}.dh-filter>button{grid-column:1/-1}.dh-summary{gap:10px}.dh-summary>div{padding:14px 12px;gap:9px}.dh-summary>div>i{width:30px;height:34px;font-size:20px}.dh-summary small{font-size:8px}.dh-summary strong{font-size:20px}.dh-trip>header{padding:14px;flex-wrap:wrap;gap:10px}.dh-vehicle{flex-basis:calc(100% - 95px)}.dh-type{order:3}.dh-distance{margin-left:auto}.dh-route{padding:18px 14px}.dh-purpose{padding:12px 14px}.dh-footer{padding:12px 14px max(12px,env(safe-area-inset-bottom))}.dh-footer nav{gap:7px}.dh-footer nav span{font-size:11px}}
@media(max-width:360px){.dh-summary>div>i{display:none}.dh-avatar{display:none}.dh-route>div{grid-template-columns:39px 8px minmax(0,1fr);gap:10px}.dh-route>div:first-child:after{left:52px}.dh-route p{font-size:12px}}
/* Reset global dialog margins so the action and date controls share a baseline. */
.driver-history-modal .dh-filter{align-items:end;padding:0}
.driver-history-modal .dh-filter>label{margin:0;padding:0;line-height:18px;align-self:end}
.driver-history-modal .dh-filter>button{height:44px;min-height:44px;margin:0;padding:0 16px;align-self:end}
.driver-history-modal .dh-filter input{margin:0;height:44px;min-height:44px}