/*
 * Chế độ tối, tự bật theo thiết lập của hệ điều hành.
 *
 * Vì sao viết CSS thuần thay vì thêm lớp dark: của Tailwind vào từng thẻ:
 * giao diện đang dùng Tailwind bản CDN biên dịch trong trình duyệt, thêm biến
 * thể dark: vào hàng trăm chỗ sẽ phình mã và dễ sót. Ở đây chỉ đảo lại một số
 * bề mặt chính, nạp SAU Tailwind nên thắng về thứ tự.
 *
 * Không có công tắc bật/tắt thủ công — theo đúng yêu cầu là bám thiết lập hệ
 * thống. Người dùng đổi giao diện máy thì trang đổi theo ngay, không cần tải lại.
 */

@media (prefers-color-scheme: dark) {

  :root {
    /* Cho trình duyệt biết để tự chỉnh thanh cuộn, ô nhập, menu ngữ cảnh. */
    color-scheme: dark;
  }

  body {
    background-color: #0b1220 !important;
    color: #e2e8f0 !important;
  }

  /* Hai khối mờ trang trí ở nền: giảm độ chói để không loá trong nền tối. */
  body > div[class*="blur-["] {
    opacity: 0.18 !important;
  }

  /* ---------- Thanh trên cùng ---------- */

  header {
    background-color: rgba(15, 23, 42, 0.82) !important;
    border-bottom-color: rgba(148, 163, 184, 0.16) !important;
  }

  /* ---------- Thẻ nội dung ---------- */

  .glass-card {
    background-color: rgba(15, 23, 42, 0.72) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  }

  .glass-card:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  }

  /* ---------- Chữ ---------- */

  .text-brand-navy { color: #93b4d8 !important; }
  .text-slate-800 { color: #e2e8f0 !important; }
  .text-slate-500 { color: #94a3b8 !important; }
  .text-slate-400 { color: #7c8ba1 !important; }
  .text-slate-300 { color: #55637a !important; }

  /* ---------- Đường kẻ ---------- */

  [class*="border-slate-200"] { border-color: rgba(148, 163, 184, 0.16) !important; }
  [class*="border-dashed"] { border-color: rgba(148, 163, 184, 0.22) !important; }
  .bg-slate-300 { background-color: rgba(148, 163, 184, 0.3) !important; }

  /* ---------- Nền phụ ---------- */

  .bg-slate-50\/70,
  .bg-slate-100\/70,
  .bg-slate-100\/80,
  .bg-slate-100 { background-color: rgba(148, 163, 184, 0.08) !important; }

  .odd\:bg-slate-50\/70:nth-child(odd) { background-color: rgba(148, 163, 184, 0.06) !important; }

  .bg-brand-navy\/5 { background-color: rgba(147, 180, 216, 0.1) !important; }
  .bg-white\/70,
  .bg-white\/80,
  .bg-white\/85 { background-color: rgba(15, 23, 42, 0.72) !important; }

  /* Thẻ từng nguồn đối chiếu */
  #sources-panel > article {
    background-color: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
  }

  /* ---------- Nhãn nhấn mạnh ---------- */

  .bg-brand-redLight { background-color: rgba(227, 24, 55, 0.18) !important; }
  .text-brand-red { color: #ff6b7f !important; }
  .text-brand-redDark { color: #ff8fa0 !important; }

  /* ---------- Khối thông báo ---------- */

  .bg-sky-50 { background-color: rgba(56, 189, 248, 0.12) !important; }
  .text-sky-700 { color: #7dd3fc !important; }
  .text-sky-500 { color: #38bdf8 !important; }

  .bg-amber-50 { background-color: rgba(245, 158, 11, 0.14) !important; }
  .text-amber-800 { color: #fcd34d !important; }
  .bg-amber-100 { background-color: rgba(245, 158, 11, 0.22) !important; }
  .hover\:bg-amber-200:hover { background-color: rgba(245, 158, 11, 0.3) !important; }

  .bg-red-50,
  .bg-red-50\/80 { background-color: rgba(239, 68, 68, 0.14) !important; }
  .text-red-700 { color: #fca5a5 !important; }
  .text-red-800 { color: #fca5a5 !important; }
  .bg-red-200 { background-color: rgba(239, 68, 68, 0.25) !important; }
  .text-red-600 { color: #f87171 !important; }
  .border-red-300 { border-color: rgba(239, 68, 68, 0.35) !important; }

  /* ---------- Ô nhập ---------- */

  #lookup-input {
    background-color: rgba(148, 163, 184, 0.1) !important;
    color: #e2e8f0 !important;
  }

  #lookup-input::placeholder { color: #64748b !important; }

  #lookup-input:focus {
    background-color: rgba(15, 23, 42, 0.9) !important;
    border-color: #ff6b7f !important;
  }

  /* ---------- Bản đồ ---------- */

  /* Ô bản đồ raster chỉ có bản sáng. Đảo màu rồi xoay tông là cách
     phổ biến để có bản tối mà không phải đổi nhà cung cấp; chữ trên bản đồ vẫn
     đọc được, chỉ hơi lệch tông so với bản tối gốc. */
  .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9);
  }

  /* Bản đồ tĩnh dự phòng cũng vậy. */
  img.js-map-fallback { filter: invert(0.88) hue-rotate(180deg); }

  .js-map { background-color: #16213a !important; }

  .leaflet-control-zoom a {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .leaflet-control-attribution {
    background-color: rgba(15, 23, 42, 0.8) !important;
    color: #94a3b8 !important;
  }

  .leaflet-control-attribution a { color: #93b4d8 !important; }

  .leaflet-popup-content-wrapper,
  .leaflet-popup-tip {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
  }

  /* ---------- Logo ---------- */

  /* Logo Mắt Bão là chữ sẫm trên nền trong suốt, chìm hẳn trên nền tối. */
  header img[alt="Mắt Bão"] { filter: brightness(0) invert(1) opacity(0.92); }

  /* ---------- Vá sau đợt soi tương phản ---------- */

  /* Chữ gradient: các lớp .text-gradient dùng bg-clip-text nên màu nằm ở CHỐT
     GRADIENT, không phải ở thuộc tính color — quy tắc text-* ở trên không với
     tới. Địa chỉ IPv6 dùng from-brand-navy (#003366) nên chìm hẳn trên nền tối. */
  .from-brand-navy { --tw-gradient-from: #7dd3fc !important; }
  .to-blue-500 { --tw-gradient-to: #60a5fa !important; }
  .from-brand-red { --tw-gradient-from: #ff6b7f !important; }
  .to-brand-accent { --tw-gradient-to: #fbbf24 !important; }
  .to-brand-redDark { --tw-gradient-to: #e04b60 !important; }
  .from-brand-redLight { --tw-gradient-from: rgba(227, 24, 55, 0.35) !important; }

  /* Icon trong bảng thông tin dùng token có độ mờ (text-brand-navy/70), tên lớp
     khác với .text-brand-navy nên không khớp quy tắc phía trên → icon vô hình. */
  .text-brand-navy\/70 { color: rgba(147, 180, 216, 0.75) !important; }
  .text-brand-navy\/5,
  .bg-brand-navy\/5 { background-color: rgba(147, 180, 216, 0.1) !important; }

  /* Nhãn "Hạ tầng Mắt Bão" nền gradient đỏ nhạt + chữ đỏ đậm → gần như tàng hình. */
  .text-brand-redDark { color: #ffa8b4 !important; }

  /* Huy hiệu trạng thái nguồn và nhãn trên bản đồ. */
  .text-amber-700 { color: #fcd34d !important; }
  .text-slate-600 { color: #a8b4c4 !important; }
  .bg-white\/85 { background-color: rgba(15, 23, 42, 0.85) !important; }
  .border-red-200 { border-color: rgba(239, 68, 68, 0.35) !important; }

  /* Hai cặp do chính file này đặt mà chưa đạt AA. */
  .text-slate-300 { color: #94a3b8 !important; }
  #lookup-input::placeholder { color: #8b98ab !important; }

  /* Cửa sổ nhỏ và nút đóng của Leaflet. */
  .leaflet-tooltip {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
  }
  .leaflet-tooltip-top::before { border-top-color: #1e293b !important; }
  .leaflet-popup-close-button { color: #cbd5e1 !important; }
  .leaflet-popup-close-button:hover { color: #ffffff !important; }
  .leaflet-disabled { opacity: 0.45 !important; }

  /* !important ở các quy tắc màu chữ giết luôn trạng thái rê chuột. Trả lại
     bằng cách khai báo hover với độ ưu tiên cao hơn. */
  a.hover\:text-brand-red:hover,
  .hover\:text-brand-red:hover { color: #ff8fa0 !important; }
  .hover\:text-brand-redDark:hover { color: #ffb3bf !important; }
  .btn-copy:hover,
  .hover\:text-white:hover { color: #ffffff !important; }
  .hover\:bg-brand-red:hover { background-color: #e31837 !important; }

  /* Thẻ nguồn cũng dùng <header>; bộ chọn phần tử trần ở trên với tới chúng và
     áp nền của thanh điều hướng. Trả lại nền đúng. */
  #sources-panel article > header {
    background-color: rgba(147, 180, 216, 0.1) !important;
    border-bottom-color: rgba(148, 163, 184, 0.16) !important;
  }
}