/* ========= TL Tracker – Frontend Theme (scoped) ========= */
.tlx{
  --tl-bg:#ffffff;
  --tl-soft:#f9fafb;
  --tl-border:#e5e7eb;
  --tl-text:#0f172a;
  --tl-muted:#64748b;
  --tl-primary:#2563eb;      /* brand */
  --tl-accent:#22c55e;       /* good */
  --tl-radius:14px;
  --tl-shadow:0 10px 26px rgba(2,6,23,.08);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color:var(--tl-text);
}

.tlx a{ color:var(--tl-primary); text-decoration:none }
.tlx a:hover{ text-decoration:underline }

/* Card */
.tlx .tl-card{
  background:var(--tl-bg);
  border:1px solid var(--tl-border);
  border-radius:var(--tl-radius);
  padding:1.25rem;
  box-shadow:var(--tl-shadow);
}

/* Track form */
.tlx .tl-track-form{margin:1rem 0;display:flex;gap:.6rem;flex-wrap:wrap}
.tlx .tl-track-form input[type=text]{
  padding:.7rem .9rem; min-width:280px; border:1px solid var(--tl-border); border-radius:10px; outline:none;
}
.tlx .tl-track-form input[type=text]:focus{ border-color:var(--tl-primary); box-shadow:0 0 0 3px rgba(37,99,235,.15) }
.tlx .tl-track-form button{
  padding:.7rem 1rem; border:1px solid var(--tl-primary); background:var(--tl-primary); color:#fff; border-radius:10px; cursor:pointer;
}
.tlx .tl-track-form button:hover{ filter:brightness(.96) }

/* Header line (tracking / route / started) */
.tlx .tl-card > div:first-child{ row-gap:.5rem }
.tlx code{ background:rgba(2,6,23,.05); padding:.15rem .35rem; border-radius:6px }

/* Progress Timeline */
.tlx .tl-timeline{ margin:1.25rem 0 .75rem; }
.tlx .tl-timeline .bar{ height:10px; background:var(--tl-soft); border-radius:999px; position:relative; overflow:hidden; }
.tlx .tl-timeline .bar .fill{
  position:absolute; inset:0 auto 0 0; width:0;
  background:linear-gradient(90deg, var(--tl-primary), var(--tl-accent));
  border-radius:999px; transition:width .6s ease;
}
.tlx .tl-steps{ display:flex; justify-content:space-between; gap:.75rem; margin-top:.65rem }
.tlx .tl-step{ text-align:center; font-size:.92rem; flex:1; color:var(--tl-muted); position:relative }
.tlx .tl-step .dot{
  width:14px; height:14px; border-radius:999px; display:inline-block; margin-bottom:.35rem;
  background:#fff; border:2px solid var(--tl-border);
  box-shadow:0 0 0 3px #fff inset;
}
.tlx .tl-step.done{ color:#0f172a }
.tlx .tl-step.done .dot{ background:var(--tl-accent); border-color:var(--tl-accent) }
.tlx .tl-step.active{ color:#0f172a; font-weight:600 }
.tlx .tl-step.active .dot{
  background:var(--tl-primary); border-color:var(--tl-primary);
  box-shadow:0 0 0 4px rgba(37,99,235,.18);
}

/* ================== Travel history (FedEx-like) ================== */
.tlx .tl-history2{ margin-top:1.25rem }
.tlx .tl-history2 .sort{ display:flex; justify-content:flex-end; font-size:.9rem; margin:.25rem 0 .6rem; color:var(--tl-muted) }

/* Day groups */
.tlx .tl-history2 .date-block{
  border:1px solid var(--tl-border); border-radius:10px; overflow:hidden; margin-bottom:1rem; background:var(--tl-bg);
}
.tlx .tl-history2 .date-head{
  background:var(--tl-soft); padding:.8rem 1rem; font-weight:700; letter-spacing:.2px
}

/* Rows grid with a single continuous vertical line */
.tlx .tl-history2 .rows{
  --timew: 130px;
  --linew: 26px;
  --placew: 240px;
  position:relative;
}
.tlx .tl-history2 .rows:before{
  content:""; position:absolute;
  left: calc(var(--timew) + var(--linew) / 2);
  top:10px; bottom:10px; width:2px; background:var(--tl-border);
}
.tlx .tl-history2 .row{
  display:grid;
  grid-template-columns: var(--timew) var(--linew) 1fr var(--placew);
  gap:.6rem; padding:.9rem 1rem; align-items:start;
  border-top:1px solid var(--tl-border);
}
.tlx .tl-history2 .row:first-child{ border-top:1px solid var(--tl-border) }

.tlx .tl-history2 .time{ white-space:nowrap; color:var(--tl-text) }
.tlx .tl-history2 .mid{ position:relative; height:100% }

/* Dot styles (over the continuous line) */
.tlx .tl-history2 .dot{
  position:absolute; left:50%; transform:translateX(-50%);
  top:.5rem; width:12px; height:12px; border-radius:999px;
  background:#94a3b8; border:2px solid var(--tl-bg);
  box-shadow:0 0 0 2px var(--tl-border);
  z-index:1;
}
.tlx .tl-history2 .dot.is-done{
  background:var(--tl-accent);
  box-shadow:0 0 0 2px var(--tl-border);
}
.tlx .tl-history2 .dot.is-final{
  width:14px; height:14px;
  background:#fff; border-color:var(--tl-primary);
  box-shadow:0 0 0 2px var(--tl-primary);
}

/* Text columns */
.tlx .tl-history2 .status .title{ font-weight:700; margin-bottom:.15rem }
.tlx .tl-history2 .status .details{ color:var(--tl-muted) }
.tlx .tl-history2 .place{ white-space:nowrap; color:var(--tl-text); text-transform:uppercase; letter-spacing:.2px }

/* Subtle muted helper text */
.tlx .tl-muted{ color:var(--tl-muted) }

/* Responsive */
@media (max-width: 920px){
  .tlx .tl-history2 .rows{ --placew: 200px }
}
@media (max-width: 820px){
  .tlx .tl-history2 .rows{ --timew: 110px; --placew: 1fr }
  .tlx .tl-history2 .row{ grid-template-columns: var(--timew) var(--linew) 1fr; }
  .tlx .tl-history2 .place{ grid-column:3; margin-top:.15rem; color:var(--tl-muted) }
}
@media (max-width: 520px){
  .tlx .tl-step span{ font-size:.82rem }
  .tlx .tl-history2 .rows{ --timew: 92px; --linew: 22px }
  .tlx .tl-history2 .row{ padding:.8rem .85rem }
  .tlx .tl-track-form input[type=text]{ min-width:220px }
}

/* === Center the tracking form (hard override) === */
.tlx .tl-track-form{
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;  /* center input + button */
  align-items: center;
  gap: .6rem;
  margin: 1rem 0;
  width: 100%;                          /* span row, center children */
}
.tlx .tl-track-form input[type="text"]{
  width: auto !important;               /* beat themes that set width:100% */
  min-width: 280px;
  max-width: 100%;
  flex: 0 0 auto;
}
.tlx .tl-track-form button{
  display: inline-block !important;     /* avoid block/100% buttons */
  white-space: nowrap;
  flex: 0 0 auto;
}



/* Dark mode */
@media (prefers-color-scheme: dark){
  .tlx{
    --tl-bg:#0b1220;
    --tl-soft:#0f172a;
    --tl-border:#1f2a44;
    --tl-text:#e5e7eb;
    --tl-muted:#9aa4b2;
    --tl-shadow:0 10px 26px rgba(0,0,0,.45);
  }
  .tlx code{ background:#111a2d }
  .tlx .tl-track-form input[type=text]{ background:#0f172a; color:var(--tl-text) }
}

/* === TL Tracker: slightly smaller text (strong overrides) === */
.tlx{ font-size:0.94rem !important; }                  /* global body inside tracker */
.tlx .tl-step{ font-size:.82rem !important; }          /* timeline step labels */
.tlx .tl-history2 .sort{ font-size:.82rem !important; }
.tlx .tl-history2 .time,
.tlx .tl-history2 .place{ font-size:.9rem !important; }
.tlx .tl-history2 .status .title{ font-size:.92rem !important; }
.tlx .tl-history2 .status .details,
.tlx .tl-muted,
.tlx code{ font-size:.85rem !important; }