/* ================== GLOBAL / THEME ================== */

/* Nền toàn site bằng pseudo-element để không bị lớp khác đè */
html, body { height: 100%; overflow-x: hidden; }
body {
  color: #212529;
  font-family: 'Segoe UI', sans-serif;
  /* fallback nếu ảnh chưa tải */
  background-color: #f8f9fa;
}
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background: url("/Flight/images/background.jpg") center/cover no-repeat;
  z-index: -1;
}

/* Tuỳ chọn: lớp phủ nhẹ cho vùng wrapper nếu cần nổi card hơn */
.page-bg-overlay::before{
  content:"";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.0), rgba(255,255,255,0.15)),
    url("/Flight/images/background.jpg");
  background-position: center;
  background-size: cover;
  z-index: -1;
}
/* Light login */
body{ 
  background-color:#f3f6fb; 
  color:#111; font-family:'Roboto',sans-serif; }
.login-container{
  max-width:400px; margin:10vh auto;  padding:30px; border-radius:12px;
  border:1px solid #e5e7eb; box-shadow:0 12px 28px rgba(2,8,23,.10);
}
.form-control{ background:#fff; border:1px solid #e5e7eb; color:#111; }
.form-control:focus{ box-shadow:none; background:#fff; border-color:#94a3b8; }
.btn-pro{ background-color:#0ea5e9; color:#fff; border:0; }
.btn-pro:hover{ background-color:#e5cf0e; }
.error-message{ color:#dc2626; font-size:.95em; text-align:center; margin-top:10px; }



/* === THEME SWITCHER — LIGHT === */
.ts-wrap{position:fixed; top:14px; right:14px; z-index:1000}

/* Gear */
.ts-gear{
  width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid #e5e7eb; background:#ffffff; color:#111827;
  box-shadow:0 6px 20px rgba(2,8,23,.08); cursor:pointer;
}

/* Popover (hộp menu) */
.ts-pop{
  position:absolute; top:48px; right:0; min-width:240px;
  background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; padding:8px;
  box-shadow:0 18px 42px rgba(2,8,23,.08); display:none; color:#111827;
}
.ts-pop::before{
  content:""; position:absolute; top:-8px; right:16px; width:14px; height:14px;
  background:#ffffff; border-left:1px solid #e5e7eb; border-top:1px solid #e5e7eb; transform:rotate(45deg);
}

/* Option */
.ts-item{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; color:#111827; background:transparent;
  border:0; text-align:left; cursor:pointer; position:relative;
}
.ts-item:hover{ background:#f3f4f6 }                  /* hover xám nhạt */
.ts-item[data-active="1"]{ background:#eaf2ff; }       /* active xanh nhạt */

.ts-ico{
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid #cbd5e1; background:#fff;
}
.ts-item[data-active="1"] .ts-ico{ border-color:#93c5fd; box-shadow:0 0 0 2px rgba(147,197,253,.45) inset; }

.ts-item .bi{ font-size:16px; line-height:1 }
.ts-item[data-value="auto"]  .ts-ico .bi{ color:#7c3aed }  /* tím */
.ts-item[data-value="light"] .ts-ico .bi{ color:#f59e0b }  /* vàng */
.ts-item[data-value="dark"]  .ts-ico .bi{ color:#475569 }  /* xám xanh */

.ts-text{ flex:1; font-weight:600 }
.ts-check{ opacity:0; color:#2563eb }                 /* dấu check xanh */
.ts-item[data-active="1"] .ts-check{ opacity:1 }
/* ===== Flat style primary button ===== */
button.btn.btn-pro {
  display:block;
  width:100%;
  padding:.75rem 1rem;
  border:none;
  border-radius:10px;
  background-color:#0d74ff;   /* xanh chính */
  color:#fff !important;
  font-weight:600;
  font-size:1rem;
  text-align:center;
  letter-spacing:.3px;

  box-shadow:0 2px 4px rgba(0,0,0,.08);
  transition:background-color .2s ease, box-shadow .2s ease, transform .1s ease;
}

button.btn.btn-pro:hover {
  background-color:#0b5ed7;   /* xanh đậm hơn khi hover */
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

button.btn.btn-pro:active {
  background-color:#0a58ca;
  transform:translateY(1px);
  box-shadow:0 2px 6px rgba(0,0,0,.16) inset;
}

button.btn.btn-pro:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px rgba(13,116,255,.4);
}

button.btn.btn-pro:disabled {
  background-color:#9cbff9;
  color:#f1f5f9 !important;
  cursor:not-allowed;
  box-shadow:none;
}

/* Desktop: place login card bottom-right */
@media (min-width: 992px){
  .login-container{
    position: fixed;
    right: 24px;
    bottom: calc(24px + 64px); /* 24px gap + ~footer height */
    margin: 0;
    width: min(420px, calc(100% - 48px));
    max-width: 420px;
    background: rgba(255,255,255,.88);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 12px 28px rgba(2,8,23,.18);
    border:1px solid rgba(229,231,235,.9);
  }
  /* Desktop random backgrounds (from /assets/background/Desktop) */
  body.desk-1::before{
    background-image: url("/assets/background/Desktop/bg1-1x.jpg");
    background-image: -webkit-image-set(
      url("/assets/background/Desktop/bg1-1x.avif") type("image/avif") 1x,
      url("/assets/background/Desktop/bg1-1_5x.avif") type("image/avif") 1.5x,
      url("/assets/background/Desktop/bg1-2x.avif") type("image/avif") 2x,
      url("/assets/background/Desktop/bg1-1x.webp") type("image/webp") 1x,
      url("/assets/background/Desktop/bg1-1_5x.webp") type("image/webp") 1.5x,
      url("/assets/background/Desktop/bg1-2x.webp") type("image/webp") 2x,
      url("/assets/background/Desktop/bg1-1x.jpg") type("image/jpeg") 1x,
      url("/assets/background/Desktop/bg1-1_5x.jpg") type("image/jpeg") 1.5x,
      url("/assets/background/Desktop/bg1-2x.jpg") type("image/jpeg") 2x
    );
    background-image: image-set(
      url("/assets/background/Desktop/bg1-1x.avif") type("image/avif") 1x,
      url("/assets/background/Desktop/bg1-1_5x.avif") type("image/avif") 1.5x,
      url("/assets/background/Desktop/bg1-2x.avif") type("image/avif") 2x,
      url("/assets/background/Desktop/bg1-1x.webp") type("image/webp") 1x,
      url("/assets/background/Desktop/bg1-1_5x.webp") type("image/webp") 1.5x,
      url("/assets/background/Desktop/bg1-2x.webp") type("image/webp") 2x,
      url("/assets/background/Desktop/bg1-1x.jpg") type("image/jpeg") 1x,
      url("/assets/background/Desktop/bg1-1_5x.jpg") type("image/jpeg") 1.5x,
      url("/assets/background/Desktop/bg1-2x.jpg") type("image/jpeg") 2x
    );
  }
  body.desk-2::before{
    background-image: url("/assets/background/Desktop/bg2-1x.jpg");
    background-image: -webkit-image-set(
      url("/assets/background/Desktop/bg2-1x.avif") type("image/avif") 1x,
      url("/assets/background/Desktop/bg2-1_5x.avif") type("image/avif") 1.5x,
      url("/assets/background/Desktop/bg2-2x.avif") type("image/avif") 2x,
      url("/assets/background/Desktop/bg2-1x.webp") type("image/webp") 1x,
      url("/assets/background/Desktop/bg2-1_5x.webp") type("image/webp") 1.5x,
      url("/assets/background/Desktop/bg2-2x.webp") type("image/webp") 2x,
      url("/assets/background/Desktop/bg2-1x.jpg") type("image/jpeg") 1x,
      url("/assets/background/Desktop/bg2-1_5x.jpg") type("image/jpeg") 1.5x,
      url("/assets/background/Desktop/bg2-2x.jpg") type("image/jpeg") 2x
    );
    background-image: image-set(
      url("/assets/background/Desktop/bg2-1x.avif") type("image/avif") 1x,
      url("/assets/background/Desktop/bg2-1_5x.avif") type("image/avif") 1.5x,
      url("/assets/background/Desktop/bg2-2x.avif") type("image/avif") 2x,
      url("/assets/background/Desktop/bg2-1x.webp") type("image/webp") 1x,
      url("/assets/background/Desktop/bg2-1_5x.webp") type("image/webp") 1.5x,
      url("/assets/background/Desktop/bg2-2x.webp") type("image/webp") 2x,
      url("/assets/background/Desktop/bg2-1x.jpg") type("image/jpeg") 1x,
      url("/assets/background/Desktop/bg2-1_5x.jpg") type("image/jpeg") 1.5x,
      url("/assets/background/Desktop/bg2-2x.jpg") type("image/jpeg") 2x
    );
  }
  body.desk-3::before{
    background-image: url("/assets/background/Desktop/bg3-1x.jpg");
    background-image: -webkit-image-set(
      url("/assets/background/Desktop/bg3-1x.avif") type("image/avif") 1x,
      url("/assets/background/Desktop/bg3-1_5x.avif") type("image/avif") 1.5x,
      url("/assets/background/Desktop/bg3-2x.avif") type("image/avif") 2x,
      url("/assets/background/Desktop/bg3-1x.webp") type("image/webp") 1x,
      url("/assets/background/Desktop/bg3-1_5x.webp") type("image/webp") 1.5x,
      url("/assets/background/Desktop/bg3-2x.webp") type("image/webp") 2x,
      url("/assets/background/Desktop/bg3-1x.jpg") type("image/jpeg") 1x,
      url("/assets/background/Desktop/bg3-1_5x.jpg") type("image/jpeg") 1.5x,
      url("/assets/background/Desktop/bg3-2x.jpg") type("image/jpeg") 2x
    );
    background-image: image-set(
      url("/assets/background/Desktop/bg3-1x.avif") type("image/avif") 1x,
      url("/assets/background/Desktop/bg3-1_5x.avif") type("image/avif") 1.5x,
      url("/assets/background/Desktop/bg3-2x.avif") type("image/avif") 2x,
      url("/assets/background/Desktop/bg3-1x.webp") type("image/webp") 1x,
      url("/assets/background/Desktop/bg3-1_5x.webp") type("image/webp") 1.5x,
      url("/assets/background/Desktop/bg3-2x.webp") type("image/webp") 2x,
      url("/assets/background/Desktop/bg3-1x.jpg") type("image/jpeg") 1x,
      url("/assets/background/Desktop/bg3-1_5x.jpg") type("image/jpeg") 1.5x,
      url("/assets/background/Desktop/bg3-2x.jpg") type("image/jpeg") 2x
    );
  }
}