/* TRACK&TRACE (reference/maxoptra-ui/22, 23). Real CSS pixels (screenshot px x 1.63), 12 px type. */

.tt { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; font-size: 12px; }
.tt button, .tt input, .tt select { font-size: 12px; }
.tt-top { flex: none; background: #FAFAFA; padding: 19px 8px 15px; }
.tt-top1 { display: flex; align-items: center; margin-bottom: 14px; }
.tt-top .spacer { flex: 1; }
.tt-segs { display: flex; background: #EEE; border-radius: 4px; padding: 2px; gap: 0; }
.tt-seg { height: 24px; padding: 0 11px; border: 0; border-radius: 3px; background: none; color: #444; display: inline-flex; align-items: center; gap: 5px; }
.tt-seg.on { background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.tt-pill { height: 24px; padding: 0 10px; border: 1px solid #C9DFF7; border-radius: 3px; background: #EAF4FE; color: #2283FF; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; cursor: pointer; }
.tt-pill:hover { background: #DDEBFB; }
.tt-filters { display: flex; align-items: flex-end; gap: 17px; }
.tt-filters[hidden], .tt-search[hidden], .tt-tools[hidden], .tt-body[hidden] { display: none; }
.tt-fld { display: flex; flex-direction: column; gap: 6px; }
.tt-fld label { color: #222; font-size: 12px; }
.tt-sel.placeholder { color: #B5B5B5; }
.tt-sel { width: 199px; height: 28px; background-color: #fff; border-color: #E4E4E4; border-radius: 3px; color: #222; }
.tt-dategrp { display: flex; align-items: stretch; height: 28px; border: 1px solid #E4E4E4; border-radius: 3px; background: #fff; }
.tt-dategrp > button { width: 24px; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #222; }
.tt-dategrp > button:hover { background: #F2F2F2; }
.tt-dategrp .tt-datebox { width: 112px; border: 0; border-left: 1px solid #E4E4E4; border-right: 1px solid #E4E4E4; border-radius: 0; }
.tt-acts { display: flex; gap: 10px; align-items: center; }
.tt-btn { height: 26px; padding: 0 11px; border: 1px solid #E4E4E4; border-radius: 3px; background: #fff; color: #222; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.05); text-decoration: none; }
.tt-btn:hover { background: #F7F7F7; }
.tt-split { display: flex; }
.tt-split > :first-child { border-radius: 3px 0 0 3px; }
.tt-split > :last-child { border-radius: 0 3px 3px 0; border-left: 0; padding: 0 8px; }

.tt-tools { flex: none; display: flex; align-items: center; height: 38px; padding: 0 8px; background: #fff; }
.tt-tools .spacer { flex: 1; }
.tt-expall, .tt-tool { background: none; border: 0; color: #222; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 6px; border-radius: 3px; }
.tt-expall:hover:not(:disabled), .tt-tool:hover { background: #F2F2F2; }
.tt-tool { margin-left: 14px; }
.tt-expall:disabled { color: #BDBDBD; }

.tt-body { flex: 1; min-height: 0; overflow: auto; background: #fff; }
.tt-none { text-align: center; color: var(--muted); padding: 60px 0; }

/* the grey run line */
.tt-group { border-top: 1px solid #E4E4E4; }
.tt-run { display: flex; align-items: center; height: 36px; padding: 0 8px; background: var(--run-head); gap: 8px; position: sticky; top: 0; z-index: 3; }
.tt-run .spacer { flex: 1; }
.tt-caret { background: none; border: 0; color: #444; padding: 0; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.tt-who { flex: 0 1 710px; min-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-link { color: var(--blue-link); text-decoration: none; }
.tt-link:hover { text-decoration: underline; }
.tt-runs { flex: 0 0 auto; color: #111; white-space: nowrap; }
.tt-bar { display: flex; width: 240px; height: 24px; flex: none; background: var(--tt-grey); }
.tt-bar i { display: block; min-width: 0; }
.tt-bar .green { background: var(--tt-green); } .tt-bar .orange { background: var(--tt-amber); } .tt-bar .blue { background: var(--tt-blue); }
.tt-bar .red { background: var(--tt-red); } .tt-bar .grey { background: var(--tt-grey); }
.tt-pct { white-space: nowrap; color: #111; }
.tt-rbtns { display: flex; gap: 10px; align-items: center; }
.tt-rbtn { height: 24px; padding: 0 10px; border: 1px solid #E4E4E4; border-radius: 3px; background: #fff; color: #222; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; }
.tt-rbtn:hover { background: #F7F7F7; }
.tt-rbtn.on { color: var(--blue); border-color: #B9D6FF; }
.tt-run .tt-split > :last-child { padding: 0 7px; }

/* stop table */
.tt-tablewrap { overflow-x: auto; }
.tt-table { width: 100%; min-width: 1800px; border-collapse: collapse; table-layout: fixed; font-size: 12px; background: #fff; }
.tt-table col.w-location { width: 9.6%; } .tt-table col.w-orders { width: 9.9%; }
.tt-table col.w-items, .tt-table col.w-completion, .tt-table col.w-window, .tt-table col.w-status, .tt-table col.w-arrival, .tt-table col.w-departure, .tt-table col.w-job, .tt-table col.w-mileage, .tt-table col.w-driving { width: 8.9%; }
.tt-table col.w-client { width: 9%; } .tt-table col.w-postcode, .tt-table col.w-units { width: 6%; }
.tt-table th { background: #FAFAFA; text-align: left; font-weight: 400; color: #111; padding: 0 8px; height: 21px; border-bottom: 1px solid #EDEDED; white-space: nowrap; }
.tt-table th.c-location { padding-left: 37px; }
.tt-table td { padding: 0 8px; height: 28px; border-bottom: 1px solid #F0F0F0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #111; }
.tt-table td.c-location { padding-left: 6px; }
.tt-table td.c-location > * { vertical-align: middle; }
.tt-table td.c-location .dbadge { margin-right: 14px; }
.tt-table td.c-location > .ic { display: inline-block; margin: 0 14px 0 0; color: #222; }
.tt-loc { display: inline-block; max-width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.tt-ocell { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tt-icons { display: inline-flex; gap: 13px; margin-right: 2px; }
.tt-ic { background: none; border: 0; padding: 0; color: #111; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 3px; }
.tt-ic:hover { background: rgba(0,0,0,.08); }
.tt-table td.green { background: var(--tt-green); } .tt-table td.orange { background: var(--tt-amber); } .tt-table td.red { background: var(--tt-red); } .tt-table td.blue { background: var(--tt-blue); }
.tt-table td.planned { color: #8A8A8A; }
.tt-table td.green, .tt-table td.orange, .tt-table td.red, .tt-table td.blue { border-bottom-color: rgba(255,255,255,.7); }
.tt-warn { color: #D9363E; display: inline-flex; vertical-align: middle; margin-right: 5px; }
.tt-warn .ic { display: inline-block; }
.tt-runlabel td { background: #F6F6F6; color: #555; height: 24px; font-weight: 700; }
.tt-totals td { border-top: 1px solid #E4E4E4; border-bottom: 1px solid #E4E4E4; height: 26px; }
.tt-orders-pop .tt-op { display: flex; gap: 4px; align-items: center; padding: 3px 0; } .tt-op-st { margin-left: auto; color: var(--muted-2); padding-left: 16px; }

.tt-map { height: 340px; border-bottom: 1px solid #E4E4E4; }
.tt-pin { width: 24px; height: 24px; border-radius: 4px; background: var(--blue); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 1px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); font-size: 11px; } .tt-pin.fail { background: var(--danger); }

/* Search mode */
.tt-search { padding: 4px 0 8px; } .tt-sbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tt-sres { max-height: 60vh; overflow: auto; }

@media (max-width: 1700px) {
  .tt-sel { width: 160px; }
  .tt-who { flex-basis: 420px; }
}
@media (max-width: 1500px) {
  .tt-who { flex-basis: 300px; }
  .tt-bar { width: 180px; }
}