.jdf-slot { display:inline-block; }
.jdf-slot[data-jdf-slot="route"] { display:grid; gap:4px; }
.driver-job-route .jdf-route-stop,.customer-order-route .jdf-route-stop,.jdf-route-stop { display:flex; flex-wrap:nowrap; align-items:center; gap:8px; }
.driver-job-route .jdf-route-place,.customer-order-route .jdf-route-place,.jdf-route-place { display:inline; min-width:0; white-space:normal; overflow-wrap:anywhere; color:#586079; font-size:12px; font-weight:400; }
.jdf-route-stop:first-child .jdf-route-place { color:#28344f; }
.jdf-route-stop .jdf-alert { display:inline-flex; align-items:center; flex-shrink:0; margin-left:auto; padding:2px 7px; min-height:21px; border:1px solid transparent; border-radius:999px; box-shadow:none; font:600 10px/1.5 "Titillium Web",Arial,sans-serif; text-transform:none; letter-spacing:normal; cursor:help; white-space:nowrap; }
.jdf-route-stop .jdf-alert-icon { justify-content:center; flex:0 0 24px; width:24px; height:24px; min-height:24px; padding:0; border-radius:50%; }
.jdf-alert-icon svg { display:block; width:14px; height:14px; stroke-width:1.75; }
.jdf-route-stop .jdf-alert.jdf-alert-3 { background:#fff1df; color:#a95411; }
.jdf-route-stop .jdf-alert.jdf-alert-2 { background:#fcf4dd; color:#886321; }
.jdf-route-stop .jdf-alert.jdf-alert-1 { background:#eef1fb; color:#535c99; }
/* Keep the 24px hit area while making the visible alert circle more subtle. */
.jdf-route-stop .jdf-alert.jdf-alert-icon { box-sizing:border-box; border-width:2px; background-clip:padding-box; }
.jdf-slot .jdf-notification { display:inline-flex; align-items:center; justify-content:center; padding:0; width:34px; height:34px; border:1px solid transparent; border-radius:50%; font:inherit; cursor:pointer; box-shadow:none; }
.jdf-notification svg { display:block; width:22px; height:22px; }
.jdf-slot .jdf-notification.jdf-notified { background:#e7f4ed; color:#258153; }
.jdf-slot .jdf-notification.jdf-none { background:#f0f2f7; color:#69758c; }
.jdf-slot .jdf-notification.jdf-unknown { background:#fcf1df; color:#9d722c; }
.jdf-slot .jdf-notification:hover,.jdf-route-stop .jdf-alert:hover { border-color:currentColor; }
.jdf-slot button:focus-visible,.jdf-popup button:focus-visible { outline:3px solid #959ee5; outline-offset:3px; }
.jdf-loading,.jdf-quiet { display:inline-block; width:34px; color:#9199ab; text-align:center; }
.jdf-popup { position:fixed; inset:auto; box-sizing:border-box; margin:0; padding:0; width:360px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain; z-index:1000002; border:1px solid #dfe2ee; border-radius:13px; background:#fff; box-shadow:0 10px 32px #20234626; color:#4e5875; font:13px/1.5 "Titillium Web",Arial,sans-serif; text-align:left; overflow-wrap:anywhere; }
.jdf-popup[hidden] { display:none; }
.jdf-popup-head { position:relative; padding:14px 48px 14px 16px; background:#f7f8fc; border-bottom:1px solid #e4e7f1; }
.jdf-popup-head strong { display:block; margin-top:4px; color:#343c8c; font-size:15px; font-weight:600; }
.jdf-popup-eyebrow { display:block; color:#7f88a2; font-size:11px; }
.jdf-popup .jdf-close { position:absolute; right:12px; top:14px; display:flex; align-items:center; justify-content:center; width:27px; height:27px; padding:0; border:1px solid #dfe3ef; border-radius:50%; background:#fff; color:#6f7d9e; cursor:pointer; }
.jdf-close svg { display:block; width:16px; height:16px; }
.jdf-popup-content { padding:16px; }
.jdf-popup-text { margin:0 0 12px; white-space:pre-wrap; }
.jdf-alert-due { margin-bottom:12px; }
.jdf-alert-due strong { display:block; margin-top:3px; color:#343c61; font-size:14px; font-weight:600; }
.jdf-checked-at { margin:0 0 10px; }
.jdf-timing-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.jdf-timing-controls[hidden] { display:none; }
.jdf-timing-feedback { color:#7d87a2; font-size:11px; }
.jdf-popup .jdf-timing-refresh { flex-shrink:0; white-space:nowrap; }
.jdf-timing-refresh:disabled { opacity:.65; cursor:wait; }
.jdf-alert-history { margin-top:14px; padding-top:12px; border-top:1px solid #e9ecf4; }
.jdf-alert-history > summary { color:#343c8c; font-size:12px; cursor:pointer; }
.jdf-alert-history > summary:focus-visible { outline:3px solid #959ee5; outline-offset:3px; }
.jdf-popup .jdf-alert-history > .jdf-dates { margin-top:12px; }
.jdf-popup-foot { margin:14px 0 0; padding-top:12px; border-top:1px solid #e9ecf4; color:#7d87a2; font-size:11px; }
.jdf-note-entry + .jdf-note-entry { margin-top:14px; padding-top:14px; border-top:1px solid #e9ecf4; }
.jdf-note-entry strong { display:block; margin-bottom:8px; color:#333c61; font-size:12px; }
.jdf-note-meta { color:#7d87a2; font-size:11px; }
.jdf-note-text { margin:10px 0; padding:12px; background:#f7f8fc; border-radius:6px; white-space:pre-wrap; overflow-wrap:anywhere; }
/* The site-wide dl style floats labels beside values. Keep each timestamp
   beneath its label so longer due-time labels have the same left edge. */
.jdf-popup .jdf-dates { display:grid; grid-template-columns:minmax(0,1fr); gap:3px; margin:0; padding:0; }
.jdf-popup .jdf-dates dt { float:none; clear:none; margin:12px 0 0; padding:0; color:#7d87a2; font-size:11px; font-weight:400; }
.jdf-popup .jdf-dates dt:first-child { margin-top:0; }
.jdf-popup .jdf-dates dd { float:none; margin:0; padding:0; min-width:0; overflow:visible; color:#343c61; font-size:13px; text-align:left; }
.jdf-popup .jdf-retry { padding:6px 12px; border:1px solid #dce0ef; border-radius:7px; background:#fff; color:#343c8c; font:inherit; cursor:pointer; }