/* Base layout */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('images/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.container {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  text-align: center;
  width: 280px;
}

.logo-title { margin-bottom: 20px; }

.logo {
  max-width: 270px;
  max-height: 100px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Input */
.input-section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 3px;
  margin-top: 20px;
  flex-direction: column;
}

.input-container {
  position: relative;
  width: 90%;
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
}

input {
  padding: 10px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

input:focus { border-color: #007BFF; }

input:focus + label,
input:valid + label {
  transform: translateY(-20px);
  font-size: 11px;
  color: #007BFF;
}

label {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: white;
  padding: 0 5px;
  transition: 0.3s;
  font-size: 16px;
  color: #aaa;
  pointer-events: none;
}

/* Suggestions */
#suggestions {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  background-color: white;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 1000;
  width: 260px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  display: none;
  font-size: 16px;
}

#suggestions div {
  padding: 5px;
  cursor: pointer;
  font-size: 16px;
}

#suggestions div:hover { background-color: #f0f0f0; }

/* Result */
#result { display: none; margin-top: 20px; }
#result p { margin: 0; font-size: 1.2em; }

.small-text { font-size: 14px !important; color: gray; }

/* Map button */
.map-button-container { text-align: center; margin-top: 40px; margin-bottom: 20px; }

.map-button {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background-color: #007BFF;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
}

.map-button:hover { background-color: #0056b3; }

.pointing-hand-image { margin-right: 10px; width: 24px; height: 24px; }

/* Footer */
footer { margin-top: 60px; }

.footer-content p {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}


.small-button {
  margin: 5px 0;
  display: inline-block;
  padding: 5px 8px;
  background-color: #007BFF;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 17px;
  font-weight: bold;
}

.small-button:hover { background-color: #0056b3; }

.footer-content p:first-of-type { /* "Created by: Thien Quang VU" */
  font-size: 13px;
  font-weight: 500;  
}

.footer-content p:last-of-type {  /* "(CTY AM Shift)" */
  font-size: 12px;
  font-style: italic; /* tùy chọn */
}

/* Popup  */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.popup {
  background-color: #fff;
  width: 270px;
  max-height: 450px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 15px;
}

.popup h2 { margin: 10px 0; font-size: 18px; text-align: center; }

.popup-content { flex: 1; overflow-y: auto; max-height: 350px; padding: 10px; }

.run-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.run-table th, .run-table td { border: 1px solid #ccc; padding: 8px; text-align: center; }

.popup-close {
  padding: 10px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
  text-align: center;
}

.popup-close:hover { background-color: #0056b3; }

/* ================== State dropdown (custom combobox) ================== */
.state-picker {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* căn giữa dưới tiêu đề */
  margin: 8px 0 20px 0;     /* tren - phai - duoi - trai */
  position: relative;
}

.combo {
  position: relative;
  min-width: 220px;
  font-size: 14px; /* base font for component */
}

.combo-trigger {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  user-select: none;
  font-size: 15px; /* Size nut */
}

.combo-trigger:focus {
  outline: none;
  border-color: #007BFF;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
}

.combo-list {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  max-height: 200px;  /* cuộn dọc */
  overflow-y: auto;   /* cuộn dọc */
  z-index: 1500;
}

.combo.open .combo-list { display: block; }

.combo-option {
  padding: 10px 12px;  /* đệm lớn*/
  cursor: pointer;
  text-align: center;
  font-size: 17px;     /* size chữ NSW, ACT, */
  line-height: 1.25;
}

.combo-option:hover,
.combo-option[aria-selected="true"] {
  background: #f0f0f0;
}

/* ================== Data loaded toast ================== */
.data-toast {
  display: none;              /* chỉ hiện trong 1 khoảng thời gian */
  margin: 6px auto 10px;
  padding: 6px 10px;
  max-width: 220px;
  border: 1px solid #c3e6cb;
  background: #d4edda;
  color: #155724;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
}

.data-toast .check {
  font-weight: bold;
  margin-right: 6px;
  color: #2e7d32; /* xanh đậm */
}

/* Trạng thái lỗi cho toast */
.data-toast.error {
  display: none;
  border-color: #f5c2c7;
  background: #f8d7da;
  color: #842029;
}
.data-toast .cross {
  font-weight: bold;
  margin-right: 6px;
  color: #842029;
}

/* ================== Data progress bar ================== */
.data-progress {
  display: none;            /* hiện khi đang tải */
  margin: 6px auto 8px;     /* dưới dropdown, trên toast/input */
  width: 90%;
  height: 6px;
  background: #e9ecef;
  border-radius: 999px;
  overflow: hidden;
}

.data-progress-bar {
  height: 100%;
  width: 0%;
  background: #28a745;      /* xanh */
  transition: width 0.15s linear;
}

/* Indeterminate khi không biết tổng dung lượng */
.data-progress-bar.indeterminate {
  position: relative;
  width: 30%;
  animation: progress-indeterminate 1.1s infinite linear;
}

@keyframes progress-indeterminate {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(30%);   }
  100% { transform: translateX(100%);  }
}


/* =====================
   Animations (added 1,2,3,4,5,8)
   ===================== */

/* 1) Combo open/close */
.combo-list { transform-origin: top center; transform: translateY(-6px) scale(.98); opacity: 0; }
.combo.open .combo-list { animation: comboIn .18s ease-out forwards; }
@keyframes comboIn { to { transform: translateY(0) scale(1); opacity: 1; } }

/* 2) Suggestions fade + stagger */
/* 3) Progress bar fill & glow */
.data-progress-bar { box-shadow: 0 0 0 rgba(40,167,69,0); }
.data-progress-bar:not(.indeterminate) { transition: width .15s linear, box-shadow .2s ease; }
.data-progress-bar:not(.indeterminate)[style*="width"] { box-shadow: 0 0 10px rgba(40,167,69,.25); }

/* 4) Toast slide-in */
.data-toast { transform: translateY(-8px); opacity: 0; }
.data-toast[style*="display: block"] { animation: toastIn .22s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes toastIn { to { transform:none; opacity:1; } }

/* 5) Result card lift-in */
#result { will-change: transform, opacity; transform: translateY(6px); opacity: 0; }
#result[style*="display: block"] { animation: resIn .2s ease-out forwards; }
@keyframes resIn { to { transform:none; opacity:1; } }

/* 8) Floating label caret shimmer */
.input-group { position: relative; }
.input-group label { position: relative; }
.input-group input:focus + label::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: linear-gradient(90deg, transparent, #007BFF, transparent);
  animation: caretSweep .8s linear;
}
@keyframes caretSweep { from { transform: translateX(-100%);} to { transform: translateX(100%);} }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* === Combo trigger caret (dropdown arrow) === */
.combo-trigger{ position: relative; padding-right: 2rem; }
.combo-trigger::after{
  content: "";
  position: absolute;
  top: 50%;
  right: .75rem;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-60%) rotate(45deg);
  opacity: .7;
  transition: transform .16s ease, opacity .16s ease;
  pointer-events: none; /* decorative */
}
.combo:hover .combo-trigger::after{ opacity: .9; }
.combo.open .combo-trigger::after{
  transform: translateY(-40%) rotate(-135deg);
}


/* =====================
   Focus-visible (a11y) — (2)
   ===================== */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid #007BFF;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Emphasize key interactive controls */
.combo-trigger:focus-visible,
input:focus-visible,
button:focus-visible,
.small-button:focus-visible,
.map-button:focus-visible,
.popup-close:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,123,255,0.20);
}


/* =====================
   Toast progress bar — (8)
   ===================== */
.data-toast { position: relative; overflow: hidden; }
.data-toast::after{
  content:""; position: absolute; left:0; bottom:0; height:3px; width:100%;
  background: currentColor;
  transform: scaleX(1); transform-origin: left;
  animation: toastTimer 3s linear forwards; /* match TOAST_DURATION_MS = 3000 */
}
/* Error toast uses 3000ms in JS */
.data-toast.error::after { animation-duration: 3s; }
@keyframes toastTimer { to { transform: scaleX(0); } }