/* Tracking page — minimal, professional, matches site theme */

.tracking-page-body {
  min-height: 100vh;
}

.tracking-page {
  position: relative;
  padding-top: 150px;
  padding-bottom: 90px;
  background:#0a0a0a;
}

/* User pages use an absolutely positioned colour overlay for the hero.
   Keep actual page content above it; otherwise the overlay hides the welcome
   message and live statistics while the table below remains visible. */
.tracking-page > .container,
.tracking-page > .tracking-card {
  position: relative;
  z-index: 2;
}

.tracking-page .tracking-hero-overlay {
  z-index: 0;
  pointer-events: none;
}
[data-theme="light"] .tracking-page{
  background:linear-gradient(to bottom, #f97316 42vh, #f8fafc 42vh);
}

.welcome-customer{ font-size:1.45rem; color:#ffffff; margin-top:14px; font-weight:800; }
@media (max-width:991.98px){ .welcome-customer{ font-size:1.15rem; } }
.tracking-page .section-title{
  background:transparent;
  padding:48px 24px;
  border-radius:14px;
  margin-bottom:32px;
}
#tracking-subtitle{
  color:#ffffff;
  opacity:1;
  transition:color 0.3s ease;
}
[data-theme="dark"] #tracking-subtitle{
  color:#ffffff;
}
[data-theme="light"] #tracking-subtitle{
  color:#ffffff;
}
.tracking-page:has(#tracking-subtitle) .section-title p:not(#tracking-subtitle),
.tracking-page .section-title h2{
  color:#f8fafc;
}
.tracking-page .section-title h2:before,
.tracking-page .section-title h2:after {
  display: none;
}

.tracking-card {
  max-width: 1080px;
  margin: 0 auto;
  background: var(--surface-color);
  border: none;
  border-radius: 14px;
  padding: 12px 32px 32px;
  box-shadow: none;
}

.tracking-input-group {
  display: flex;
  align-items:center;
  gap: 10px;
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 999px;
  padding: 6px 6px 6px 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.tracking-input-group:focus-within {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 85%);
}

.tracking-input-group > i {
  color: var(--accent-color);
  font-size: 1.2rem;
}

.tracking-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--heading-color);
  font-size: 1rem;
  padding: 8px 0;
  outline: none;
}

.tracking-input::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.tracking-submit {
  border: 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s, transform 0.2s;
}

.tracking-submit:hover {
  background: color-mix(in srgb, var(--accent-color), #000 14%);
  transform: translateY(-1px);
}

.tracking-error,
.tracking-notfound {
  color: #dc2626;
  font-size: 0.95rem;
  margin: 14px 2px 0;
}

[data-theme="dark"] .tracking-error,
[data-theme="dark"] .tracking-notfound {
  color: #f87171;
}

.tracking-result {
  margin-top: 26px;
}

.tracking-result-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 1.05rem;
  flex-wrap:wrap;
}
.tracking-last-update{ font-size:0.8rem; color:var(--default-color); margin-left:4px; white-space:nowrap; }
.tracking-result-head .tracking-last-update{margin-left:auto}
.tracking-result-head .result-meta{display:contents}
.tracking-result-head .tracking-save{margin-left:0}
.tracking-result-head .tracking-refresh{margin-left:0}

.tracking-result-head .tracking-code-label {
  color: var(--default-color);
}

.tracking-result-head strong {
  color: var(--heading-color);
  letter-spacing: 0.03em;
}

.tracking-live {
  margin-left: 10px;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}

.tracking-refresh {
  margin-left: 8px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items:center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 8px;
  background: transparent;
  color: var(--nav-color);
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, transform 0.3s;
}

.tracking-refresh:hover {
  color: #24292f;
  border-color: #24292f;
}

.tracking-refresh:active {
  transform: rotate(180deg);
}

.tracking-save {
  position: relative;
  margin-left: auto;
}

.save-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 168px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 6px;
  display: none;
  z-index: 20;
}

.tracking-save.open .save-menu {
  display: block;
}

.save-menu button {
  display: flex;
  align-items:center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--default-color);
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.save-menu button:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.table-responsive::-webkit-scrollbar{display:none}
@media (max-width:767px){
  .tracking-table{ font-size:0.72rem; min-width:640px; }
  .tracking-table th, .tracking-table td{ padding:6px 8px; white-space:nowrap; }
  .tracking-table .status-badge{ font-size:0.68rem; padding:3px 8px; }
}

.tracking-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--background-color);
  border-radius: 10px;
  overflow: hidden;
}

.tracking-table th,
.tracking-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  vertical-align: top;
  white-space: nowrap;
}

.tracking-table thead th {
  background: color-mix(in srgb, #6e809c, transparent 88%);
  color: var(--heading-color);
  font-weight: 700;
  white-space: nowrap;
}

.tracking-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--default-color), transparent 95%);
}

.tracking-table tbody tr:last-child td {
  border-bottom: 0;
}

.tracking-table .status-cell {
  font-weight: 600;
  vertical-align:middle;
}

.status-badge {
  display: inline-flex;
  align-items:center;
  justify-content:center;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  width:auto;
  max-width:none;
  vertical-align:middle;
}

.status-green   { background: rgba(34, 197, 94, 0.16);  color: #15803d; border:1px solid rgba(34,197,94,0.25); }
.status-blue    { background: rgba(59, 130, 246, 0.14); color: #1d4ed8; border:1px solid rgba(59,130,246,0.25); }
.status-yellow  { background: rgba(234, 179, 8, 0.18);  color: #92400e; border:1px solid rgba(234,179,8,0.3); }
.status-orange  { background: rgba(249, 115, 22, 0.16); color: #9a3412; border:1px solid rgba(249,115,22,0.3); }
.status-darkblue{ background: rgba(30, 64, 175, 0.14); color: #1e3a8a; border:1px solid rgba(30,64,175,0.25); }
.status-purple  { background: rgba(124, 58, 237, 0.14); color: #6d28d9; border:1px solid rgba(124,58,237,0.25); }
.status-red     { background: rgba(239, 68, 68, 0.15);  color: #b91c1c; border:1px solid rgba(239,68,68,0.25); }
.status-neutral { background: color-mix(in srgb, var(--default-color), transparent 88%); color: var(--default-color); border:1px solid transparent; }

[data-theme="dark"] .status-green   { background: rgba(34, 197, 94, 0.20);  color: #4ade80; }
[data-theme="dark"] .status-blue    { background: rgba(59, 130, 246, 0.20); color: #60a5fa; }
[data-theme="dark"] .status-yellow  { background: rgba(234, 179, 8, 0.20);  color: #facc15; }
[data-theme="dark"] .status-orange  { background: rgba(249, 115, 22, 0.20); color: #fb923c; }
[data-theme="dark"] .status-darkblue{ background: rgba(30, 64, 175, 0.22); color: #93c5fd; }
[data-theme="dark"] .status-purple  { background: rgba(124, 58, 237, 0.22); color: #c4b5fd; }
[data-theme="dark"] .status-red     { background: rgba(239, 68, 68, 0.22);  color: #f87171; }

.tracking-toolbar{ display:flex; align-items:center; gap:10px; margin:10px 0 14px; flex-wrap:wrap; }
.toolbar-search{ flex:1; min-width:220px; display:flex; align-items:center; gap:8px; background:var(--background-color); border:1px solid color-mix(in srgb,var(--default-color),transparent 80%); border-radius:999px; padding:8px 14px; }
.toolbar-search i{ color:#24292f; }
.toolbar-search input{ flex:1; border:0; background:transparent; outline:0; color:var(--heading-color); }
.toolbar-select{ border:1px solid color-mix(in srgb,var(--default-color),transparent 80%); border-radius:999px; padding:6px 28px 6px 10px; font-size:0.85rem; background:var(--background-color); color:var(--heading-color); margin-right:0; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:12px 8px; }
.toolbar-clear{ width:36px; height:36px; border-radius:999px; border:1px solid color-mix(in srgb,var(--default-color),transparent 80%); background:transparent; cursor:pointer; color:var(--default-color); display:flex; align-items:center; justify-content:center; }
.toolbar-clear i{ color:inherit; }
.toolbar-count{ font-size:0.85rem; color:var(--default-color); }
.tracking-mapbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.tracking-mapbar .toolbar-search{flex:0 1 50%;max-width:560px;min-width:220px;margin:0}
.tracking-mapbar .toolbar-search input{min-width:0}
#tracking-map-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}
#tracking-map-actions:empty{display:none}
#tracking-map-actions .hero-map-ctrl{position:static;display:flex;gap:8px}
@media (max-width:575px){.tracking-mapbar{flex-wrap:nowrap} .tracking-mapbar .toolbar-search{flex:1 1 auto;min-width:0} #tracking-map-actions{gap:6px} #tracking-map-actions .brand-map-btn{width:26px;height:26px;font-size:11px}}
.tracking-stats-bar{display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:4px 0 18px;padding:0;background:transparent;border:none}
.tracking-stats-bar > div{flex:1 1 0;min-width:0;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;text-align:left;padding:6px 10px;border-radius:14px;background:color-mix(in srgb, #6e809c, transparent 94%);border:1px solid color-mix(in srgb, currentColor, transparent 88%);box-shadow:0 4px 16px rgba(15,23,42,.05)}
[data-theme="light"] .tracking-stats-bar > div{background:#ffffff}
.stat-ico{width:42px;height:42px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px}
.stat-ico.i-total{background:rgba(100,116,139,.14);color:#64748b}
.stat-ico.i-pending{background:rgba(202,138,4,.14);color:#ca8a04}
.stat-ico.i-route{background:rgba(124,58,237,.13);color:#7c3aed}
.stat-ico.i-done{background:rgba(22,163,74,.13);color:#16a34a}
[data-theme="dark"] .stat-ico.i-total{background:rgba(148,163,184,.16);color:#94a3b8}
[data-theme="dark"] .stat-ico.i-pending{background:rgba(202,138,4,.2);color:#facc15}
[data-theme="dark"] .stat-ico.i-route{background:rgba(124,58,237,.22);color:#c4b5fd}
[data-theme="dark"] .stat-ico.i-done{background:rgba(22,163,74,.2);color:#4ade80}
.stat-txt{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-width:0}
.tracking-stats-bar > div strong{font-size:16px;font-weight:800;color:var(--heading-color);line-height:1.1}
.tracking-stats-bar > div span[data-i18n]{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--default-color);white-space:nowrap}
@media (max-width:575px){.tracking-stats-bar{gap:10px 6px;padding:0} .stat-ico{width:42px;height:42px;font-size:18px} .stat-ico i{line-height:1} .tracking-stats-bar > div strong{font-size:16px} .tracking-stats-bar > div span[data-i18n]{font-size:8px}}
.tracking-table th.sortable{ cursor:pointer; user-select:none; }
.tracking-table th.sorted{ color:var(--accent-color); }
.tracking-table tr.clickable{ cursor:pointer; }
.tracking-table tr.clickable:hover{ background:color-mix(in srgb,var(--accent-color),transparent 94%); }
.tracking-table tr.selected{ background:color-mix(in srgb,var(--accent-color),transparent 88%); }
.tracking-detail{ margin-top:16px; font-size:0.82rem; }
.detail-card{ background:var(--background-color); border:1px solid color-mix(in srgb,var(--default-color),transparent 85%); border-radius:12px; padding:14px; position:relative; font-size:0.82rem; }
.detail-card h4{ font-size:0.92rem; }
.detail-close{ position:absolute; top:10px; right:10px; border:0; background:transparent; font-size:1.2rem; cursor:pointer; color:var(--heading-color); }
.detail-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; margin:10px 0; }
.detail-grid div{ display:flex; flex-direction:column; gap:3px; font-size:0.8rem; }
.detail-grid strong{ font-size:0.7rem; color:var(--default-color); }
.road-timeline{ display:flex; justify-content:space-between; align-items:flex-start; position:relative; padding:18px 8px 10px; margin-top:14px; border-top:1px solid color-mix(in srgb,var(--default-color),transparent 90%); gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.road-step{ flex:1; min-width:72px; display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; z-index:1; }
.road-step:not(:last-child)::after{ content:""; position:absolute; top:7px; left:50%; width:100%; height:4px; background:color-mix(in srgb,var(--default-color),transparent 88%); z-index:-1; }
.road-step.done:not(:last-child)::after{ background:var(--road-color, var(--accent-color)); }
.road-step .dot{ width:16px; height:16px; border-radius:50%; border:3px solid color-mix(in srgb,var(--default-color),transparent 70%); background:var(--surface-color); box-sizing:border-box; }
.road-step.done .dot{ background:var(--road-color, var(--accent-color)); border-color:var(--road-color, var(--accent-color)); }
.road-step.active .dot{ background:var(--road-color, var(--accent-color)); border-color:var(--road-color, var(--accent-color)); box-shadow:0 0 0 4px color-mix(in srgb,var(--road-color, var(--accent-color)),transparent 75%); }
.road-step .rlabel{ font-size:0.68rem; line-height:1.2; text-align:center; color:var(--default-color); font-weight:500; }
.road-step.done .rlabel,.road-step.active .rlabel{ color:var(--heading-color); font-weight:700; }
.detail-timeline{ display:none; }
.tracking-map{ height:380px; border-radius:12px; margin-top:16px; border:none; }
.hero-map-ctrl{position:absolute;top:12px;right:12px;z-index:800}
.leaflet-control-attribution{opacity:0;pointer-events:none;user-select:none}
.veh-pin{ background:transparent; border:0; display:flex; flex-direction:column; align-items:center; }
.veh-pin.offset-below{ flex-direction:column-reverse; }
.veh-pin.offset-left{ flex-direction:row; align-items:center; gap:6px; }
.veh-pin.offset-right{ flex-direction:row-reverse; align-items:center; gap:6px; }
.veh-pin .pin-label{ background:var(--accent-color); color:var(--contrast-color); font-size:0.7rem; font-weight:700; padding:4px 10px; border-radius:6px; text-align:center; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,0.25); display:inline-flex; align-items:center; justify-content:center; min-width:0; min-height:20px; box-sizing:border-box; transition: all 0.35s cubic-bezier(0.4,0,0.2,1); }
.veh-pin .pin-wrap{ position:relative; width:14px; height:14px; margin:4px auto 0; }
.veh-pin .pin-dot{ width:10px; height:10px; background:var(--accent-color); border:2px solid #fff; border-radius:50%; position:absolute; left:2px; top:2px; box-shadow:0 1px 4px rgba(0,0,0,0.3); z-index:2; }
.veh-pin .pin-pulse{ position:absolute; left:0; top:0; width:14px; height:14px; border-radius:50%; animation:pulse 1.8s infinite; z-index:1; opacity:0.7; }
.veh-pin .pin-wrap{position:absolute;left:50%;bottom:0;transform:translateX(-50%);margin:0}
.veh-pin .pin-label{position:absolute;bottom:18px;left:50%;transform:translateX(-50%)}
.veh-pin.offset-below .pin-label{top:calc(100% + 4px);bottom:auto}
.veh-pin.offset-left .pin-label{left:auto;right:calc(50% + 12px);top:35px;bottom:auto;transform:translateY(-50%)}
.veh-pin.offset-right .pin-label{right:auto;left:calc(50% + 12px);top:35px;bottom:auto;transform:translateY(-50%)}
.veh-pin.cluster-dot{display:none}
.veh-pin.cluster-dot .pin-wrap{margin:0;position:relative;left:auto;bottom:auto;transform:none;width:22px;height:22px}
.veh-pin.cluster-dot .pin-dot{background:var(--accent-color);border-color:#fff;width:16px;height:16px;left:3px;top:3px}
.veh-pin.cluster-dot .pin-pulse{background:var(--accent-color);width:22px;height:22px}
.far-cluster .veh-pin{display:none}
.far-cluster .veh-pin.cluster-dot{display:flex}
@keyframes pulse{ 0%{ transform:scale(0.6); opacity:0.7; } 70%{ transform:scale(1.5); opacity:0; } 100%{ transform:scale(1.5); opacity:0; } }
@media (max-width: 575px) {
  .tracking-card {
    padding: 22px;
  }
  .tracking-input-group {
    flex-wrap: wrap;
  }
  .tracking-submit {
    width: 100%;
  }
  .tracking-result-head{ flex-wrap:wrap; gap:8px; }
  .save-menu{ left:50%; right:auto; transform:translateX(-50%); min-width:160px; }
}
@media (max-width:767px){
  .tracking-table{ font-size:0.72rem; min-width:640px; }
  .tracking-table th, .tracking-table td{ padding:6px 8px; white-space:nowrap; }
  .tracking-table .status-badge{ font-size:0.68rem; padding:3px 8px; }
  .tracking-result-head{ gap:8px; }
}



.leaflet-control-layers{ border:1px solid var(--accent-color); border-radius:12px; overflow:hidden; box-shadow:0 4px 20px rgba(249,115,22,0.15); }
.leaflet-control-layers-expanded{ background:#ffffff; padding:8px 12px; }
.leaflet-control-layers label{ font-weight:700; color:#0f172a; font-size:13px; }
.leaflet-control-layers-selector{ accent-color:var(--accent-color); }
.leaflet-control-layers-toggle{ background-color:var(--accent-color); }
[data-theme="dark"] .leaflet-control-layers-expanded{ background:#1e293b; }
[data-theme="dark"] .leaflet-control-layers label{ color:#f8fafc; }



.brand-map-btn{ width:30px; height:30px; border-radius:50%; border:1px solid rgba(36,41,47,0.16); background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); box-shadow:none; color:#24292f; transition:all 0.25s ease; }
.brand-map-btn:hover{ transform:translateY(-1px); box-shadow:none; }
.brand-map-btn.active{ background:#24292f; color:#fff; border-color:#24292f; box-shadow:none; }
.leaflet-control-zoom a{ width:32px; height:32px; line-height:1; border-radius:50%; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); border:1px solid rgba(36,41,47,0.16); box-shadow:none; color:#24292f; transition:all 0.25s ease; display:flex; align-items:center; justify-content:center; }
.leaflet-control-zoom a:hover{ transform:translateY(-1px); background:#24292f; color:#fff; border-color:#24292f; }

[data-theme="dark"] .leaflet-control-zoom a{ background:#1e293b; color:#fff; border-color:rgba(255,255,255,0.12); }


.leaflet-bar{ border:none; background:transparent; box-shadow:none; }
.leaflet-control-zoom.leaflet-bar{ border:none; background:transparent; box-shadow:none; }


@media (max-width: 767px) {
  .tracking-page .container{min-width:0;max-width:100%}
  .tracking-card{min-width:0;max-width:100%;padding:16px 12px}
  .tracking-result{min-width:0;max-width:100%}
  .tracking-result-head{flex-wrap:wrap;row-gap:8px}
  .tracking-last-update{white-space:normal}
  .tracking-live{margin-left:0}
  .tracking-save{margin-left:0}
  .tracking-toolbar{min-width:0;gap:8px}
  .toolbar-search{min-width:0}
  .toolbar-select{margin-right:0;max-width:100%}
  .table-responsive{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .tracking-table{min-width:640px}
  .tracking-detail{min-width:0}
  .tracking-map{height:280px}
}
@media (max-width: 575px) {
  .tracking-card{padding:14px 10px}
  .detail-grid{grid-template-columns:1fr 1fr}
  .tracking-result-head{font-size:clamp(9px,3vw,12px);gap:4px;justify-content:center;text-align:center}
  .tracking-result-head .tracking-code-label{display:block;white-space:nowrap}
  .tracking-result-head strong{white-space:nowrap}
  .tracking-result-head .toolbar-select{padding:3px 20px 3px 7px;font-size:inherit;min-width:0}
  .tracking-result-head .toolbar-clear{width:24px;height:24px;flex-shrink:0}
  .tracking-result-head .tracking-refresh{width:24px;height:24px;margin-left:0;font-size:0.8rem}
  .tracking-result-head .result-meta{flex-basis:100%;display:flex;align-items:center;justify-content:center;gap:6px;margin:2px 0 0}
  .tracking-result-head .result-meta .tracking-last-update{margin-left:0;font-size:0.72rem}
  .tracking-result-head .toolbar-count{font-size:inherit;white-space:nowrap}
  .tracking-result-head .toolbar-count{font-size:0.75rem}
  #tracking-map-actions .brand-map-btn{width:26px;height:26px;font-size:11px}
}