/*!
 * TrackAWAS – trackawas-frontend.css
 * Version:    1.7.8
 * Copyright:  © 2025 Alexia Technology Sdn Bhd. All rights reserved.
 *             Powered by Alexia Technology Sdn Bhd.
 *             Brought to you by Dr Shawn Peh and Dr Amanda Chan.
 * License:    GPL-2.0+
 * Link:       https://alexiatechnology.com/trackawas
 *
 * Fonts loaded via wp_enqueue_style — not @import — for caching plugin compatibility.
 * Breakpoints: >900px desktop · 641-900px tablet · ≤640px mobile · ≤380px small phone.
 */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
    --aw-bg:           #f5f7fb;
    --aw-surface:      #ffffff;
    --aw-surface-2:    #f2f4f8;
    --aw-surface-3:    #e8ecf4;
    --aw-border:       rgba(15,23,60,0.08);
    --aw-border-med:   rgba(15,23,60,0.14);
    --aw-ink:          #0d1324;
    --aw-ink-2:        #3d4966;
    --aw-ink-3:        #8892aa;
    --aw-accent:       #2d54e8;
    --aw-accent-soft:  rgba(45,84,232,0.08);
    --aw-accent-mid:   rgba(45,84,232,0.16);
    --aw-green:        #059669;
    --aw-green-soft:   rgba(5,150,105,0.08);
    --aw-amber:        #d97706;
    --aw-amber-soft:   rgba(217,119,6,0.08);
    --aw-red:          #dc2626;
    --aw-red-soft:     rgba(220,38,38,0.08);
    --aw-orange:       #ea580c;
    --aw-orange-soft:  rgba(234,88,12,0.08);
    --aw-ui:           'Outfit', sans-serif;
    --aw-mono:         'JetBrains Mono', monospace;
    --aw-r:            10px;
    --aw-r-lg:         16px;
    --aw-r-xl:         22px;
    --aw-shadow-sm:    0 1px 3px rgba(15,23,60,0.06), 0 1px 2px rgba(15,23,60,0.04);
    --aw-shadow:       0 4px 16px rgba(15,23,60,0.08), 0 1px 4px rgba(15,23,60,0.04);
    --aw-shadow-lg:    0 12px 40px rgba(15,23,60,0.10), 0 2px 8px rgba(15,23,60,0.05);
    --aw-panel-w:      360px;
    --aw-ease:         cubic-bezier(0.16,1,0.3,1);
    --aw-dur:          0.22s;
}

/* ── Reset ── */
.tawas-wrapper *, .tawas-wrapper *::before, .tawas-wrapper *::after { box-sizing: border-box; margin: 0; padding: 0; }
.tawas-wrapper { font-family: var(--aw-ui); color: var(--aw-ink); line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* ── Shell ── */
.tawas-container { position: relative; display: flex; width: 100%; height: var(--tawas-height, 680px); background: var(--aw-surface); border-radius: var(--aw-r-xl); overflow: hidden; box-shadow: var(--aw-shadow-lg), 0 0 0 1px var(--aw-border); }

/* ── Map ── */
/* Leaflet requires an explicit height — do NOT use height:100% here as that
   breaks when WordPress themes reset ancestor heights to auto. Instead we
   mirror the container's --tawas-height custom property directly on the
   map element itself so Leaflet always measures a real pixel value. */
#tawas-map { flex: 1; min-width: 0; z-index: 1;
    height: var(--tawas-height, 680px); }
/* Leaflet injects .leaflet-container — ensure it fills #tawas-map */
#tawas-map .leaflet-container { width: 100% !important; height: 100% !important; }
.tawas-container .leaflet-control-zoom { border: none !important; box-shadow: var(--aw-shadow) !important; border-radius: var(--aw-r) !important; overflow: hidden; }
.tawas-container .leaflet-control-zoom a { width: 36px !important; height: 36px !important; line-height: 36px !important; background: var(--aw-surface) !important; color: var(--aw-ink-2) !important; border-bottom: 1px solid var(--aw-border) !important; font-size: 16px !important; transition: background var(--aw-dur) !important; }
.tawas-container .leaflet-control-zoom a:hover { background: var(--aw-surface-2) !important; }
.tawas-container .leaflet-control-zoom-out { border-bottom: none !important; }
.tawas-container .leaflet-bar { border: none !important; }
.tawas-container .leaflet-control-attribution { background: rgba(255,255,255,0.9) !important; backdrop-filter: blur(6px); font-size: 10px !important; color: var(--aw-ink-3) !important; border-radius: 4px !important; padding: 2px 6px !important; }

/* GPS marker */
.tawas-user-icon { position: relative; }
.tawas-dot { width: 14px; height: 14px; background: var(--aw-accent); border-radius: 50%; border: 2.5px solid #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; box-shadow: 0 2px 8px rgba(45,84,232,0.4); }
.tawas-pulse { width: 36px; height: 36px; background: var(--aw-accent); border-radius: 50%; opacity: 0.18; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: tawas-pulse 2.5s ease-out infinite; }
@keyframes tawas-pulse { 0%{transform:translate(-50%,-50%) scale(0.4);opacity:0.5} 100%{transform:translate(-50%,-50%) scale(2.8);opacity:0} }
.tawas-flag { font-size: 22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }

/* ── Panel ── */
.tawas-panel { width: var(--aw-panel-w); min-width: var(--aw-panel-w); height: 100%; background: var(--aw-surface); border-left: 1px solid var(--aw-border); display: flex; flex-direction: column; overflow: hidden; z-index: 10; flex-shrink: 0; }
.tawas-panel-header { padding: 16px 18px 12px; border-bottom: 1px solid var(--aw-border); flex-shrink: 0; }
.tawas-logo { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; min-width: 0; }
.tawas-logo-mark { width: 30px; height: 30px; background: var(--aw-accent); border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tawas-logo-mark svg { width: 17px; height: 17px; fill: #fff; }
.tawas-logo-text { flex: 1; min-width: 0; overflow: hidden; }
.tawas-logo-name { font-size: 13px; font-weight: 600; color: var(--aw-ink); letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tawas-logo-sub  { font-size: 10px; color: var(--aw-ink-3); font-weight: 400; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tawas-gps-pill  { display: flex; align-items: center; gap: 5px; padding: 4px 9px; background: var(--aw-accent-soft); border: 1px solid var(--aw-accent-mid); border-radius: 20px; font-size: 10px; font-weight: 500; color: var(--aw-accent); cursor: pointer; white-space: nowrap; transition: background var(--aw-dur); flex-shrink: 0; }
.tawas-gps-pill:hover { background: var(--aw-accent-mid); }
.tawas-gps-dot-live { width: 6px; height: 6px; background: var(--aw-accent); border-radius: 50%; animation: aw-blink 2s ease-in-out infinite; }
@keyframes aw-blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* Status chip */
.tawas-status { display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 8px; font-size: 11px; font-weight: 500; background: var(--aw-surface-2); color: var(--aw-ink-2); transition: all var(--aw-dur); min-width: 0; }
.tawas-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--aw-ink-3); flex-shrink: 0; transition: background var(--aw-dur); }
.tawas-status--success { background: var(--aw-green-soft); color: var(--aw-green); }
.tawas-status--success .tawas-status-dot { background: var(--aw-green); }
.tawas-status--error   { background: var(--aw-red-soft);   color: var(--aw-red); }
.tawas-status--error   .tawas-status-dot { background: var(--aw-red); }
.tawas-status--info    { background: var(--aw-accent-soft); color: var(--aw-accent); }
.tawas-status--info    .tawas-status-dot { background: var(--aw-accent); animation: aw-blink 1.5s ease-in-out infinite; }
.tawas-status--warning { background: var(--aw-amber-soft); color: var(--aw-amber); }
.tawas-status--warning .tawas-status-dot { background: var(--aw-amber); }

/* Panel body */
.tawas-panel-body { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: var(--aw-border) transparent; min-height: 0; }
.tawas-panel-body::-webkit-scrollbar { width: 3px; }
.tawas-panel-body::-webkit-scrollbar-thumb { background: var(--aw-border-med); border-radius: 2px; }

.aw-label { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--aw-ink-3); margin-bottom: 6px; display: block; }

/* Fields */
.aw-field { display: flex; align-items: stretch; background: var(--aw-surface); border: 1.5px solid var(--aw-border-med); border-radius: var(--aw-r); overflow: hidden; transition: border-color var(--aw-dur), box-shadow var(--aw-dur); min-height: 40px; }
.aw-field:focus-within { border-color: var(--aw-accent); box-shadow: 0 0 0 3px var(--aw-accent-soft); }
.aw-field-icon { padding: 0 11px; color: var(--aw-ink-3); font-size: 13px; flex-shrink: 0; display: flex; align-items: center; }
.aw-field input { flex: 1; min-width: 0; background: none; border: none; outline: none; padding: 9px 10px 9px 0; font-family: var(--aw-ui); font-size: 13px; color: var(--aw-ink); }
.aw-field input::placeholder { color: var(--aw-ink-3); }
.aw-search-btn { background: var(--aw-accent); border: none; cursor: pointer; padding: 0 14px; color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--aw-dur); min-width: 44px; }
.aw-search-btn:hover { background: #1e3fc0; }

/* Authority bar */
.aw-authority { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: var(--aw-surface-2); border: 1px solid var(--aw-border); border-radius: var(--aw-r); }
.aw-authority-icon { width: 32px; height: 32px; background: var(--aw-amber-soft); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.aw-authority-text { flex: 1; min-width: 0; }
.aw-authority-name { font-size: 11px; font-weight: 600; color: var(--aw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-authority-sub  { font-size: 10px; color: var(--aw-ink-3); margin-top: 1px; }
.aw-speed-limit    { text-align: right; flex-shrink: 0; }
.aw-speed-limit-val  { font-family: var(--aw-mono); font-size: 18px; font-weight: 500; color: var(--aw-amber); line-height: 1; }
.aw-speed-limit-unit { font-size: 9px; color: var(--aw-ink-3); text-transform: uppercase; letter-spacing: 0.05em; }

/* Metrics */
.aw-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.aw-metric { background: var(--aw-surface-2); border-radius: var(--aw-r); padding: 9px 11px; border: 1px solid var(--aw-border); transition: border-color var(--aw-dur); }
.aw-metric.alert { border-color: var(--aw-red); background: var(--aw-red-soft); }
.aw-metric-label { font-size: 9px; font-weight: 500; color: var(--aw-ink-3); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 3px; }
.aw-metric-val { font-family: var(--aw-mono); font-size: 16px; font-weight: 500; color: var(--aw-ink); line-height: 1; transition: color var(--aw-dur); }
.aw-metric-val.over-limit { color: var(--aw-red); }

/* Route bar */
.aw-route-bar { display: flex; border: 1px solid var(--aw-border); border-radius: var(--aw-r); overflow: hidden; }
.aw-route-seg { flex: 1; padding: 9px 10px; text-align: center; border-right: 1px solid var(--aw-border); min-width: 0; }
.aw-route-seg:last-child { border-right: none; }
.aw-route-seg-val { font-family: var(--aw-mono); font-size: 13px; font-weight: 500; color: var(--aw-ink); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-route-seg-lbl { font-size: 9px; color: var(--aw-ink-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }

/* Progress */
.aw-progress { padding: 11px 12px; background: var(--aw-surface-2); border: 1px solid var(--aw-border); border-radius: var(--aw-r); }
.aw-progress-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.aw-progress-title { font-size: 11px; font-weight: 600; color: var(--aw-ink-2); }
.aw-progress-pct { font-family: var(--aw-mono); font-size: 12px; font-weight: 500; color: var(--aw-accent); }
.aw-track { position: relative; height: 5px; background: var(--aw-surface-3); border-radius: 10px; overflow: visible; margin-bottom: 5px; }
.aw-fill { height: 100%; background: linear-gradient(90deg, var(--aw-accent), #6b94fa); border-radius: 10px; width: 0%; transition: width 1.2s var(--aw-ease); position: relative; }
.aw-fill::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background: #fff; border: 2.5px solid var(--aw-accent); border-radius: 50%; box-shadow: var(--aw-shadow-sm); transition: opacity 0.3s; }
.aw-fill[style*="width: 0"]::after { opacity: 0; }
.aw-fill[style*="width:0"]::after  { opacity: 0; }
.aw-notches { position: absolute; inset: 0; pointer-events: none; }
.aw-notch { position: absolute; top: -4px; width: 1.5px; height: 13px; background: rgba(255,255,255,0.9); transform: translateX(-50%); border-radius: 1px; }
.aw-notch[data-p="25"] { left: 25%; }
.aw-notch[data-p="50"] { left: 50%; }
.aw-notch[data-p="75"] { left: 75%; }
.aw-progress-eta { font-size: 10px; color: var(--aw-ink-3); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Checkpoint cards */
.aw-checkpoints { display: flex; flex-direction: column; gap: 5px; }
.aw-cp { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--aw-r); transition: all var(--aw-dur) var(--aw-ease); }
.aw-cp:hover { box-shadow: var(--aw-shadow-sm); border-color: var(--aw-border-med); }
.aw-cp.state-active { border-color: rgba(45,84,232,0.3);  background: var(--aw-accent-soft); }
.aw-cp.state-done   { border-color: rgba(5,150,105,0.3);  background: var(--aw-green-soft);  }
.aw-cp.state-early  { border-color: rgba(217,119,6,0.3);  background: var(--aw-amber-soft);  }
.aw-cp.state-late   { border-color: rgba(234,88,12,0.3);  background: var(--aw-orange-soft); }
.aw-cp.state-missed { border-color: rgba(220,38,38,0.3);  background: var(--aw-red-soft);    }
.aw-cp-ring { width: 38px; height: 38px; border-radius: 50%; background: var(--aw-surface-2); border: 1.5px solid var(--aw-border-med); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--aw-dur); }
.aw-cp.state-done   .aw-cp-ring { background: var(--aw-green);  border-color: var(--aw-green);  }
.aw-cp.state-early  .aw-cp-ring { background: var(--aw-amber);  border-color: var(--aw-amber);  }
.aw-cp.state-late   .aw-cp-ring { background: var(--aw-orange); border-color: var(--aw-orange); }
.aw-cp.state-missed .aw-cp-ring { background: var(--aw-red);    border-color: var(--aw-red);    }
.aw-cp.state-active .aw-cp-ring { background: var(--aw-accent); border-color: var(--aw-accent); }
.aw-cp-pct { font-family: var(--aw-mono); font-size: 11px; font-weight: 500; color: var(--aw-ink-2); transition: color var(--aw-dur); }
.aw-cp.state-done .aw-cp-pct, .aw-cp.state-early .aw-cp-pct,
.aw-cp.state-late .aw-cp-pct, .aw-cp.state-missed .aw-cp-pct,
.aw-cp.state-active .aw-cp-pct { color: #fff; }
.aw-cp-body { flex: 1; min-width: 0; }
.aw-cp-name { font-size: 11px; font-weight: 600; color: var(--aw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.aw-cp-dist { font-size: 10px; color: var(--aw-ink-3); }
.aw-cp-eta { text-align: right; flex-shrink: 0; }
.aw-cp-eta-time { font-family: var(--aw-mono); font-size: 13px; font-weight: 500; color: var(--aw-ink); line-height: 1; margin-bottom: 2px; transition: color var(--aw-dur); }
.aw-cp-eta-rel  { font-size: 9px; color: var(--aw-ink-3); white-space: nowrap; }
.aw-cp.state-done   .aw-cp-eta-time { color: var(--aw-green);  }
.aw-cp.state-early  .aw-cp-eta-time { color: var(--aw-amber);  }
.aw-cp.state-late   .aw-cp-eta-time { color: var(--aw-orange); }
.aw-cp.state-active .aw-cp-eta-time { color: var(--aw-accent); }

/* Timer */
.aw-timer { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: var(--aw-surface-2); border: 1px solid var(--aw-border); border-radius: var(--aw-r); }
.aw-timer-label { font-size: 10px; color: var(--aw-ink-3); font-weight: 500; }
#tawas-elapsed { font-family: var(--aw-mono); font-size: 18px; font-weight: 500; color: var(--aw-accent); letter-spacing: 0.02em; }

/* Footer buttons */
.tawas-panel-footer { padding: 12px 16px; border-top: 1px solid var(--aw-border); display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; }
.aw-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 12px; border: none; border-radius: var(--aw-r); font-family: var(--aw-ui); font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--aw-dur) var(--aw-ease); min-height: 44px; }
.aw-btn-start { background: var(--aw-accent); color: #fff; box-shadow: 0 4px 14px rgba(45,84,232,0.28); }
.aw-btn-start:hover  { background: #1e3fc0; box-shadow: 0 6px 20px rgba(45,84,232,0.38); transform: translateY(-1px); }
.aw-btn-start:active { transform: translateY(0); }
.aw-btn-stop { background: var(--aw-red-soft); color: var(--aw-red); border: 1.5px solid rgba(220,38,38,0.22); display: none; }
.aw-btn-stop:hover { background: var(--aw-red); color: #fff; }

/* ── Copyright footer ── */
.tawas-footer {
    padding: 8px 16px;
    border-top: 1px solid var(--aw-border);
    text-align: center;
    flex-shrink: 0;
}
.tawas-footer-text {
    font-size: 9px;
    color: var(--aw-ink-3);
    line-height: 1.5;
}
.tawas-footer-text a { color: var(--aw-ink-3); text-decoration: none; }
.tawas-footer-text a:hover { color: var(--aw-accent); }

/* Alert overlay */
.tawas-alert-overlay { position: absolute; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(13,19,36,0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 20px; }
.tawas-alert-box { max-width: 360px; width: 100%; background: var(--aw-surface); border-radius: var(--aw-r-lg); padding: 24px 20px; border: 1px solid var(--aw-border-med); box-shadow: var(--aw-shadow-lg); animation: aw-pop 0.28s var(--aw-ease); text-align: center; }
@keyframes aw-pop { from{transform:scale(0.88) translateY(16px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
.aw-alert-icon-wrap { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 14px; }
.tawas-alert--success .aw-alert-icon-wrap { background: var(--aw-green-soft); }
.tawas-alert--warning .aw-alert-icon-wrap { background: var(--aw-amber-soft); }
.tawas-alert--danger  .aw-alert-icon-wrap { background: var(--aw-red-soft);   }
.tawas-alert--info    .aw-alert-icon-wrap { background: var(--aw-accent-soft); }
#tawas-alert-title { font-size: 16px; font-weight: 700; color: var(--aw-ink); margin-bottom: 7px; letter-spacing: -0.01em; }
#tawas-alert-body  { font-size: 12px; color: var(--aw-ink-2); line-height: 1.65; margin-bottom: 20px; }
.aw-alert-dismiss { display: block; width: 100%; padding: 11px; background: var(--aw-accent); color: #fff; border: none; border-radius: var(--aw-r); font-family: var(--aw-ui); font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--aw-dur); min-height: 44px; }
.aw-alert-dismiss:hover { background: #1e3fc0; }

/* Journey log */
.tawas-journey-log { margin-top: 20px; background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--aw-r-lg); overflow: hidden; box-shadow: var(--aw-shadow-sm); }
.tawas-journey-log-header { padding: 12px 18px; border-bottom: 1px solid var(--aw-border); font-size: 13px; font-weight: 600; color: var(--aw-ink); }
.tawas-log-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tawas-log-table th { padding: 7px 12px; text-align: left; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--aw-ink-3); border-bottom: 1px solid var(--aw-border); background: var(--aw-surface-2); }
.tawas-log-table td { padding: 9px 12px; border-bottom: 1px solid var(--aw-border); color: var(--aw-ink-2); font-family: var(--aw-mono); font-size: 11px; }
.tawas-log-table tr:last-child td { border-bottom: none; }
.tawas-log-table tr:hover td { background: var(--aw-surface-2); }
.aw-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-family: var(--aw-ui); font-size: 10px; font-weight: 600; }
.aw-badge--completed { background: var(--aw-green-soft);  color: var(--aw-green);  }
.aw-badge--active    { background: var(--aw-accent-soft); color: var(--aw-accent); }
.aw-badge--aborted   { background: var(--aw-red-soft);    color: var(--aw-red);    }
.aw-badge--pending   { background: var(--aw-amber-soft);  color: var(--aw-amber);  }
.tawas-notice { padding: 22px; background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--aw-r-lg); font-size: 14px; color: var(--aw-ink-2); text-align: center; }

/* ── Speed limit change animations ── */
@keyframes aw-speed-change { 0%{transform:scale(1);color:var(--aw-amber)} 25%{transform:scale(1.25);color:var(--aw-accent)} 60%{transform:scale(1.1);color:var(--aw-accent)} 100%{transform:scale(1);color:var(--aw-amber)} }
.aw-speed-changed { animation: aw-speed-change 1.2s var(--aw-ease) forwards; }
@keyframes aw-rule-pulse { 0%{border-color:var(--aw-border);background:var(--aw-surface-2)} 30%{border-color:var(--aw-accent);background:var(--aw-accent-soft)} 100%{border-color:var(--aw-border);background:var(--aw-surface-2)} }
.aw-rule-entered { animation: aw-rule-pulse 2s var(--aw-ease) forwards; }

/* ══════════════════════════════════════
   TABLET  641px – 900px
══════════════════════════════════════ */
@media (max-width: 900px) {
    :root { --aw-panel-w: 290px; }
    .tawas-container { height: 560px; }
    .tawas-logo-sub { display: none; }
    .aw-speed-limit-val { font-size: 15px; }
    .aw-cp-eta-time { font-size: 12px; }
    .aw-cp-eta-rel  { display: none; }
    .aw-metric-val  { font-size: 14px; }
    .aw-route-bar { flex-wrap: wrap; }
    .aw-route-seg { flex: 0 0 50%; border-bottom: 1px solid var(--aw-border); }
    .aw-route-seg:nth-child(2) { border-right: none; }
    .aw-route-seg:last-child   { flex: 0 0 100%; border-bottom: none; border-right: none; }
    #tawas-elapsed { font-size: 16px; }
}

/* ══════════════════════════════════════
   MOBILE  ≤ 640px
══════════════════════════════════════ */
@media (max-width: 640px) {
    .tawas-container { flex-direction: column; height: auto; border-radius: var(--aw-r-lg); }
    #tawas-map { width: 100%; height: 55vw !important; min-height: 200px !important; max-height: 320px !important; flex: none; border-radius: var(--aw-r-lg) var(--aw-r-lg) 0 0; }
    .tawas-panel { width: 100%; min-width: 0; height: auto; border-left: none; border-top: 1px solid var(--aw-border); border-radius: 0 0 var(--aw-r-lg) var(--aw-r-lg); }
    .tawas-panel-body { max-height: 50vh; min-height: 180px; padding: 12px 14px; gap: 10px; }
    .tawas-logo-sub { display: block; }
    .aw-checkpoints { display: flex; flex-direction: column; }
    .aw-cp-eta-time { font-size: 12px; }
    .aw-cp-eta-rel  { display: block; }
    .aw-metrics { grid-template-columns: 1fr 1fr; }
    .aw-metric-val { font-size: 15px; }
    .aw-route-bar { flex-wrap: wrap; }
    .aw-route-seg { flex: 0 0 50%; }
    .aw-route-seg:nth-child(2) { border-right: none; }
    .aw-route-seg:last-child   { flex: 0 0 100%; border-top: 1px solid var(--aw-border); border-right: none; }
    .aw-field input { font-size: 12px; padding: 8px 8px 8px 0; }
    .tawas-alert-overlay { padding: 14px; }
    .tawas-alert-box { padding: 20px 16px; }
    #tawas-alert-title { font-size: 15px; }
    #tawas-elapsed { font-size: 16px; }
    .tawas-journey-log { overflow-x: auto; }
    .tawas-log-table { min-width: 480px; }
}

/* ══════════════════════════════════════
   SMALL PHONE  ≤ 380px
══════════════════════════════════════ */
@media (max-width: 380px) {
    #tawas-map { min-height: 180px !important; max-height: 260px !important; height: 52vw !important; }
    .tawas-panel-body { padding: 10px 12px; gap: 8px; }
    .tawas-logo-name { font-size: 12px; }
    .tawas-logo-sub  { display: none; }
    .aw-cp { padding: 8px 10px; gap: 8px; }
    .aw-cp-ring { width: 32px; height: 32px; }
    .aw-cp-pct  { font-size: 10px; }
    .aw-cp-name { font-size: 10px; }
    .aw-cp-dist { display: none; }
    .aw-cp-eta-time { font-size: 11px; }
    .aw-cp-eta-rel  { display: none; }
    .aw-route-seg { flex: 0 0 100%; border-right: none; border-bottom: 1px solid var(--aw-border); }
    .aw-route-seg:last-child { border-bottom: none; }
    .aw-metric { padding: 7px 9px; }
    .aw-metric-val { font-size: 13px; }
    .tawas-panel-footer { padding: 10px 12px; }
    .aw-btn { padding: 10px; font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════
   ADDRESS AUTOCOMPLETE SUGGESTIONS DROPDOWN
   v1.2.1 — added for both start and destination fields
══════════════════════════════════════════════════════════════ */

/* Wrapper holds the input + the absolutely-positioned dropdown */
.aw-suggest-wrap {
    position: relative;
    margin-bottom: 10px;
}
.aw-suggest-wrap .aw-field {
    margin-bottom: 0; /* wrapper provides the margin */
}

/* Dropdown list */
.tawas-suggestions {
    display: none;            /* shown by JS */
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 9999;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    background: var(--aw-surface);
    border: 1.5px solid var(--aw-accent-mid);
    border-radius: var(--aw-r);
    box-shadow: var(--aw-shadow-lg);
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--aw-border) transparent;
    /* Smooth entrance */
    animation: aw-drop-in 0.14s var(--aw-ease);
}
.tawas-suggestions::-webkit-scrollbar       { width: 3px; }
.tawas-suggestions::-webkit-scrollbar-thumb { background: var(--aw-border-med); border-radius: 2px; }

@keyframes aw-drop-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Each suggestion row */
.tawas-suggest-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    transition: background var(--aw-dur);
    border-bottom: 1px solid var(--aw-border);
}
.tawas-suggest-item:last-child { border-bottom: none; }
.tawas-suggest-item:hover,
.tawas-suggest-item--active {
    background: var(--aw-accent-soft);
}

/* Pin icon */
.tawas-suggest-icon {
    font-size: 14px;
    flex-shrink: 0;
    padding-top: 1px;
    opacity: 0.7;
}

/* Text block */
.tawas-suggest-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tawas-suggest-primary {
    font-size: 12px;
    font-weight: 600;
    color: var(--aw-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tawas-suggest-secondary {
    font-size: 10px;
    color: var(--aw-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "No results" empty state (added by JS if needed) */
.tawas-suggest-empty {
    padding: 12px;
    font-size: 12px;
    color: var(--aw-ink-3);
    text-align: center;
}

/* Loading spinner row */
.tawas-suggest-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    font-size: 12px;
    color: var(--aw-ink-3);
}
.tawas-suggest-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--aw-border-med);
    border-top-color: var(--aw-accent);
    border-radius: 50%;
    animation: aw-spin 0.7s linear infinite;
}
@keyframes aw-spin { to { transform: rotate(360deg); } }

/* ── Responsive ── */
/* On tablet the panel is narrower — keep dropdown readable */
@media (max-width: 900px) {
    .tawas-suggest-primary   { font-size: 11px; }
    .tawas-suggest-secondary { font-size: 9px; }
    .tawas-suggestions       { max-height: 200px; }
}

/* On mobile the dropdown sits above other content naturally */
@media (max-width: 640px) {
    .tawas-suggestions {
        max-height: 180px;
        /* On stacked layout ensure it doesn't clip out of the panel */
        position: absolute;
        left: 0; right: 0;
    }
}

/* ══════════════════════════════════════════════════════════════
   EKIN SPOTTER CAMERAS — v1.3.0
══════════════════════════════════════════════════════════════ */

/* Ekin camera cards */
.aw-ekin-list { display: flex; flex-direction: column; gap: 5px; }

.aw-ekin-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--aw-surface);
    border: 1px solid var(--aw-border);
    border-left: 3px solid #ff6b00;
    border-radius: var(--aw-r);
    transition: all var(--aw-dur) var(--aw-ease);
}
.aw-ekin-card:hover { box-shadow: var(--aw-shadow-sm); }

.aw-ekin-card--upcoming {
    border-left-color: var(--aw-accent);
    background: var(--aw-accent-soft);
}

.aw-ekin-card--warning {
    border-left-color: var(--aw-amber);
    background: var(--aw-amber-soft);
    animation: aw-ekin-pulse 2s ease-in-out infinite;
}

.aw-ekin-card--approaching {
    border-left-color: var(--aw-red);
    background: var(--aw-red-soft);
    animation: aw-ekin-pulse 1.2s ease-in-out infinite;
}
@keyframes aw-ekin-pulse {
    0%,100% { box-shadow: none; }
    50%      { box-shadow: 0 0 0 3px rgba(220,38,38,0.18); }
}

.aw-ekin-card--passed {
    border-left-color: var(--aw-green);
    background: var(--aw-green-soft);
    opacity: 0.7;
}

.aw-ekin-icon {
    font-size: 16px;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: rgba(255,107,0,0.1);
    border: 1px solid rgba(255,107,0,0.25);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aw-ekin-card--passed    .aw-ekin-icon { background: var(--aw-green-soft); border-color: rgba(5,150,105,0.3); }
.aw-ekin-card--approaching .aw-ekin-icon { background: var(--aw-red-soft); border-color: rgba(220,38,38,0.3); }

.aw-ekin-body { flex: 1; min-width: 0; }
.aw-ekin-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--aw-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.aw-ekin-meta {
    font-size: 10px;
    color: var(--aw-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aw-ekin-right { text-align: right; flex-shrink: 0; }
.aw-ekin-dist {
    font-family: var(--aw-mono);
    font-size: 12px;
    font-weight: 500;
    color: #ff6b00;
    line-height: 1;
    margin-bottom: 2px;
}
.aw-ekin-card--upcoming    .aw-ekin-dist { color: var(--aw-accent); }
.aw-ekin-card--warning     .aw-ekin-dist { color: var(--aw-amber);  }
.aw-ekin-card--approaching .aw-ekin-dist { color: var(--aw-red);    }
.aw-ekin-card--passed      .aw-ekin-dist { color: var(--aw-green);  }
.aw-ekin-eta {
    font-family: var(--aw-mono);
    font-size: 10px;
    color: var(--aw-ink-3);
    white-space: nowrap;
}

/* "No cameras" state */
.aw-ekin-none {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--aw-green-soft);
    border: 1px solid rgba(5,150,105,0.2);
    border-radius: var(--aw-r);
    font-size: 12px;
    font-weight: 500;
    color: var(--aw-green);
}
.aw-ekin-none-icon { font-size: 14px; flex-shrink: 0; }

/* Ekin note inside a checkpoint card */
.aw-cp-ekin-note {
    font-size: 10px;
    color: #ff6b00;
    font-weight: 500;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive */
@media (max-width: 900px) {
    .aw-ekin-meta { display: none; }
}
@media (max-width: 380px) {
    .aw-ekin-card { padding: 7px 9px; gap: 7px; }
    .aw-ekin-icon { width: 24px; height: 24px; font-size: 12px; }
    .aw-ekin-name { font-size: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   LANGUAGE PICKER  — v1.4.0
══════════════════════════════════════════════════════════════ */
.tawas-lang-picker {
    display: flex;
    gap: 4px;
    padding: 0 0 10px;
    flex-wrap: wrap;
}

.tawas-lang-btn {
    padding: 4px 9px;
    background: var(--aw-surface-2);
    border: 1.5px solid var(--aw-border-med);
    border-radius: 6px;
    font-family: var(--aw-ui);
    font-size: 11px;
    font-weight: 600;
    color: var(--aw-ink-3);
    cursor: pointer;
    transition: all var(--aw-dur);
    line-height: 1.4;
    min-width: 36px;
    text-align: center;
}
.tawas-lang-btn:hover {
    border-color: var(--aw-accent);
    color: var(--aw-accent);
    background: var(--aw-accent-soft);
}
.tawas-lang-btn--active {
    background: var(--aw-accent);
    border-color: var(--aw-accent);
    color: #fff;
}
.tawas-lang-btn--active:hover {
    background: #1e3fc0;
    color: #fff;
}

@media (max-width: 380px) {
    .tawas-lang-btn { font-size: 10px; padding: 3px 7px; min-width: 30px; }
}

/* ══════════════════════════════════════════════════════════════
   LANGUAGE SELECTOR — v1.4.0
   Four pill buttons: EN · BM · 中文 · த
══════════════════════════════════════════════════════════════ */

.tawas-lang-selector {
    display: flex;
    gap: 3px;
    align-items: center;
    flex-shrink: 0;
}

.tawas-lang-btn {
    padding: 3px 7px;
    background: var(--aw-surface-2);
    border: 1px solid var(--aw-border-med);
    border-radius: 5px;
    font-family: var(--aw-ui);
    font-size: 10px;
    font-weight: 600;
    color: var(--aw-ink-3);
    cursor: pointer;
    transition: all var(--aw-dur);
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.tawas-lang-btn:hover {
    background: var(--aw-accent-soft);
    border-color: var(--aw-accent-mid);
    color: var(--aw-accent);
}
.tawas-lang-btn--active {
    background: var(--aw-accent);
    border-color: var(--aw-accent);
    color: #fff;
}

/* Compact on tablet — hide GPS pill text, keep just the dot */
@media (max-width: 900px) {
    .tawas-lang-btn { padding: 2px 5px; font-size: 9px; }
}

/* On mobile, keep selector visible but very compact */
@media (max-width: 640px) {
    .tawas-lang-selector { gap: 2px; }
    .tawas-lang-btn { padding: 2px 5px; font-size: 9px; }
}

/* ══════════════════════════════════════════════════════════════
   EKIN STRUCTURED ALERT (6-line format) — v1.5.0
══════════════════════════════════════════════════════════════ */

#tawas-alert-body { text-align: left; }

.tawas-ekin-alert-body {
    width: 100%;
    font-size: 12px;
    line-height: 1.5;
}

.tawas-ekin-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    margin-bottom: 3px;
    color: var(--aw-ink-2);
}

/* Number badge */
.tawas-ekin-num {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--aw-surface-3);
    border: 1px solid var(--aw-border-med);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--aw-ink-3);
    font-family: var(--aw-mono);
    margin-top: 1px;
}

.tawas-ekin-text { flex: 1; min-width: 0; }

/* Bold rows (1, 5, 6) */
.tawas-ekin-row--bold { font-weight: 600; color: var(--aw-ink); }
.tawas-ekin-row--bold .tawas-ekin-num {
    background: var(--aw-accent-mid);
    border-color: var(--aw-accent);
    color: var(--aw-accent);
}

/* Highlighted rows (1, 5) — soft blue tint */
.tawas-ekin-row--highlight {
    background: var(--aw-accent-soft);
    border: 1px solid var(--aw-accent-mid);
}

/* Warning row (6 — speeding) */
.tawas-ekin-row--warn {
    background: var(--aw-red-soft);
    border: 1px solid rgba(220,38,38,0.2);
    color: var(--aw-red);
}
.tawas-ekin-row--warn .tawas-ekin-num {
    background: rgba(220,38,38,0.15);
    border-color: rgba(220,38,38,0.4);
    color: var(--aw-red);
}

/* OK row (6 — compliant) */
.tawas-ekin-row--ok {
    background: var(--aw-green-soft);
    border: 1px solid rgba(5,150,105,0.2);
    color: var(--aw-green);
}
.tawas-ekin-row--ok .tawas-ekin-num {
    background: rgba(5,150,105,0.15);
    border-color: rgba(5,150,105,0.4);
    color: var(--aw-green);
}

/* Strong tags inside alert body */
.tawas-ekin-alert-body strong {
    font-weight: 700;
    color: inherit;
}

/* ══════════════════════════════════════════════════════════════
   PASSIVE AUTO-ROUTE — v1.5.1
   Orange dashed polyline distinguishes auto-route from manual.
══════════════════════════════════════════════════════════════ */

/* Status chip variant for passive routing info */
.tawas-status--passive {
    background: var(--aw-orange-soft);
    color: var(--aw-orange);
}
.tawas-status--passive .tawas-status-dot {
    background: var(--aw-orange);
    animation: aw-blink 1.5s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════
   NEXT EKIN CAMERA HIGHLIGHT — v1.6.8
   The nearest upcoming camera card is visually distinguished.
══════════════════════════════════════════════════════════════ */
.aw-ekin-card--next {
    border: 2px solid var(--aw-accent) !important;
    background: var(--aw-accent-soft) !important;
}
.aw-ekin-card--next .aw-ekin-name {
    color: var(--aw-accent);
    font-weight: 700;
}
.aw-ekin-card--next .aw-ekin-icon::after {
    content: ' NEXT';
    font-size: 9px;
    font-weight: 700;
    color: var(--aw-accent);
    letter-spacing: 0.06em;
    vertical-align: super;
}

/* ── Passive EKIN widget (always visible) ─────────────────────────── */
.aw-passive-ekin {
  background: var(--aw-surface);
  border: 1.5px solid var(--aw-border);
  border-left: 4px solid var(--aw-accent);
  border-radius: var(--aw-radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.aw-passive-state {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--aw-ink2);
}
.aw-passive-state--searching { color: var(--aw-ink3); font-style: italic; }
.aw-passive-state--none      { color: var(--aw-green); }
.aw-passive-state--found     { flex-direction: column; align-items: stretch; gap: 8px; }
.aw-passive-icon { font-size: 18px; flex-shrink: 0; }

.aw-passive-cam-row {
  display: flex; align-items: center; gap: 10px;
}
.aw-passive-cam-body { flex: 1; min-width: 0; }
.aw-passive-cam-name {
  font-size: 14px; font-weight: 700; color: var(--aw-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aw-passive-cam-meta { font-size: 11.5px; color: var(--aw-ink3); margin-top: 2px; }
.aw-passive-cam-dist {
  font-family: var(--aw-mono);
  font-size: 15px; font-weight: 700;
  color: var(--aw-accent); white-space: nowrap; flex-shrink: 0;
}

/* Mini milestone progress bar */
.aw-passive-milestones { margin-top: 4px; }
.aw-passive-ms-track {
  position: relative; height: 8px;
  background: var(--aw-bg);
  border-radius: 4px; overflow: visible;
  margin-bottom: 4px;
}
.aw-passive-ms-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--aw-accent), #f97316);
  transition: width .6s ease;
  position: absolute; top: 0; left: 0;
}
.aw-passive-ms-mark {
  position: absolute; top: -3px;
  width: 2px; height: 14px;
  background: var(--aw-border);
  transform: translateX(-1px);
}
.aw-passive-ms-mark span {
  position: absolute; top: 16px; left: 50%;
  transform: translateX(-50%);
  font-size: 9px; color: var(--aw-ink3);
  white-space: nowrap;
}
.aw-passive-ms-label {
  font-size: 10.5px; color: var(--aw-ink3); text-align: right;
}

/* ── Idle timeout overlay ─────────────────────────────────────────── */
.tawas-idle-overlay {
  position: absolute;
  inset: 0;
  z-index: 1300;
  background: rgba(13,19,36,.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tawas-fade-in .3s ease;
}
@keyframes tawas-fade-in {
  from { opacity: 0; } to { opacity: 1; }
}
.tawas-idle-box {
  background: var(--aw-surface);
  border-radius: 18px;
  padding: 28px 24px 22px;
  max-width: 300px;
  width: calc(100% - 48px);
  text-align: center;
  box-shadow: 0 12px 48px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.tawas-idle-icon  { font-size: 40px; line-height: 1; }
.tawas-idle-title {
  font-size: 20px; font-weight: 800;
  color: var(--aw-ink); margin: 0;
}
.tawas-idle-body  {
  font-size: 13px; color: var(--aw-ink2);
  line-height: 1.55; margin: 0;
}
.tawas-idle-meta  {
  font-size: 12px; color: var(--aw-ink3);
  background: var(--aw-bg);
  border-radius: 8px; padding: 6px 12px;
  width: 100%; box-sizing: border-box;
}
.tawas-idle-resume {
  width: 100%; justify-content: center;
  margin-top: 4px; font-size: 14px;
}
.tawas-idle-dismiss {
  background: none; border: none; cursor: pointer;
  font-size: 12px; color: var(--aw-ink3);
  text-decoration: underline; padding: 4px;
  font-family: inherit;
}
.tawas-idle-dismiss:hover { color: var(--aw-red); }