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

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

.tracking-page {
  padding-top: 150px;
  padding-bottom: 90px;
  background:#0a0a0a;
}
[data-theme="light"] .tracking-page{
  background:linear-gradient(to bottom, #c63800 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 !important;
  opacity:1;
  transition:color 0.3s ease;
}
[data-theme="dark"] #tracking-subtitle{
  color:#ffffff !important;
}
[data-theme="light"] #tracking-subtitle{
  color:#ffffff !important;
}
.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: 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: baseline;
  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-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: var(--accent-color);
  border-color: var(--accent-color);
}

.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;
}
@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, var(--accent-color), transparent 90%);
  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:18px 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:var(--accent-color); }
.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:8px 32px 8px 10px; background:var(--background-color); color:var(--heading-color); margin-right:16px; 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-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; }
.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; }
@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) !important; border-radius:12px !important; overflow:hidden; box-shadow:0 4px 20px rgba(198,56,0,0.15) !important; }
.leaflet-control-layers-expanded{ background:#ffffff !important; padding:8px 12px !important; }
.leaflet-control-layers label{ font-weight:700 !important; color:#0f172a !important; font-size:13px !important; }
.leaflet-control-layers-selector{ accent-color:var(--accent-color) !important; }
.leaflet-control-layers-toggle{ background-color:var(--accent-color) !important; }
[data-theme="dark"] .leaflet-control-layers-expanded{ background:#1e293b !important; }
[data-theme="dark"] .leaflet-control-layers label{ color:#f8fafc !important; }



.brand-map-btn{ width:40px !important; height:40px !important; border-radius:50% !important; border:1px solid rgba(198,56,0,0.12) !important; background:rgba(255,255,255,0.95) !important; backdrop-filter:blur(8px) !important; box-shadow:0 4px 16px rgba(0,0,0,0.08) !important; color:var(--accent-color) !important; transition:all 0.25s ease !important; }
.brand-map-btn:hover{ transform:translateY(-1px) !important; box-shadow:0 6px 20px rgba(0,0,0,0.12) !important; border-color:var(--accent-color) !important; }
.brand-map-btn.active{ background:var(--accent-color) !important; color:#fff !important; border-color:var(--accent-color) !important; box-shadow:0 4px 16px rgba(198,56,0,0.25) !important; }
.leaflet-control-zoom a{ width:32px !important; height:32px !important; line-height:1 !important; border-radius:50% !important; background:rgba(255,255,255,0.95) !important; backdrop-filter:blur(8px) !important; border:1px solid rgba(198,56,0,0.12) !important; box-shadow:0 4px 16px rgba(0,0,0,0.08) !important; transition:all 0.25s ease !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.leaflet-control-zoom a:hover{ transform:translateY(-1px); background:var(--accent-color) !important; color:#fff !important; border-color:var(--accent-color) !important; }

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


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