/* =========================================================================
   redesign.css — Giao diện SÁNG + THOÁNG cho Ezmail.pro
   Link SAU style.css để override. Không cần đổi JS (giữ nguyên mọi ID/class).
   ========================================================================= */
:root{
  --ground:#eef1f8; --surface:#ffffff; --surface-2:#f6f8fd;
  --ink:#0e1729; --muted:#5b6b88; --faint:#8291ad;
  --border:#e2e7f1; --border-strong:#d2d9e8;
  --accent:#3b5bdb; --accent-ink:#2942b8; --accent-soft:#e7ecff;
  --ok:#0f9d76; --ok-soft:#dbf5ec; --danger:#e0466a;
  --radius:16px; --radius-sm:11px;
  --shadow:0 1px 2px rgba(16,28,55,.05),0 12px 30px -14px rgba(16,28,55,.16);
  --mono:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
}

/* ---------- Nền + khung ---------- */
html,body{background:var(--ground)!important}
body{color:var(--ink)!important;font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;
  letter-spacing:-.01em}
.container{background:transparent!important;box-shadow:none!important;padding:8px 16px 32px!important;
  max-width:1080px!important;margin:0 auto!important}

/* ---------- Thanh giám sát server (CPU/RAM/Disk/Temp/API) ----------
   Giữ nền TỐI cho riêng thanh này: JS tô giá trị màu neon (xanh/vàng/đỏ),
   nền tối mới đọc rõ. Bo tròn, gọn, căn giữa như một màn hình monitor nhỏ. */
.system-stats{
  display:flex!important;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px 12px!important;width:fit-content!important;max-width:100%;
  margin:16px auto 0!important;padding:8px 18px!important;
  background:#0e1729!important;color:#cfd8ea!important;
  border:1px solid #22304d!important;border-radius:999px!important;
  box-shadow:var(--shadow)!important;
  font-family:var(--mono)!important;font-size:12.5px!important;letter-spacing:.02em}
.system-stats > span{white-space:nowrap;margin:0!important}
/* dấu gạch phân cách "|" -> mờ */
.system-stats > span:nth-child(even){color:#31405f!important}
.system-stats .usage-value{font-weight:700}

/* Hàng tiêu đề: căn giữa, thoáng */
.container > .flex.justify-between{display:block!important;text-align:center;margin:22px 0 4px!important}
#emailTitle{font-size:clamp(22px,3.4vw,30px)!important;font-weight:800!important;color:var(--ink)!important;
  letter-spacing:-.02em;margin:0 auto 2px!important;word-break:break-all}

/* ---------- Thẻ nhập email (hero) ---------- */
.email-input-group{background:var(--surface)!important;border:1px solid var(--border)!important;
  border-radius:var(--radius)!important;box-shadow:var(--shadow)!important;
  max-width:640px!important;margin:18px auto 0!important;padding:20px!important;
  flex-direction:column!important;align-items:stretch!important;gap:14px!important}

.email-input-wrapper{display:flex!important;align-items:stretch!important;
  background:var(--surface-2)!important;border:1px solid var(--border)!important;
  border-radius:var(--radius-sm)!important;overflow:hidden;width:100%}
#emailPrefix{background:transparent!important;border:0!important;color:var(--ink)!important;
  font-family:var(--mono)!important;font-size:16px!important;font-weight:600!important;
  padding:13px 14px!important;flex:1!important;min-width:0!important}
#emailPrefix:focus{box-shadow:none!important;outline:none!important}
#emailPrefix::placeholder{color:var(--faint)!important;font-family:'Inter',sans-serif!important;font-weight:500}
#emailDomain{background:transparent!important;border:0!important;border-left:1px solid var(--border)!important;
  color:var(--accent-ink)!important;font-family:var(--mono)!important;font-weight:700!important;
  border-radius:0!important;padding:13px 34px 13px 14px!important;
  background-image:url('data:image/svg+xml;utf8,<svg fill="%233b5bdb" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>')!important;
  background-repeat:no-repeat!important;background-position:right 10px center!important}

/* ---------- Nút ---------- */
.button-group{display:flex!important;flex-wrap:wrap;gap:10px!important;width:100%;margin:0!important;justify-content:center}
.action-btn,#readMailBtn{flex:1 1 auto;min-width:140px;justify-content:center!important;
  padding:12px 16px!important;font-size:14px!important;font-weight:650!important;border-radius:11px!important;
  border:1px solid var(--border-strong)!important;box-shadow:none!important}
#readMailBtn{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}
#readMailBtn:hover{background:var(--accent-ink)!important}
#generateMailBtn{background:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important}
#generateMailBtn:hover{background:#1c2942!important}
#copyMailBtn,#deleteAllMailBtn,#storedEmailsBtn{background:var(--surface)!important;color:var(--ink)!important}
#copyMailBtn:hover,#deleteAllMailBtn:hover,#storedEmailsBtn:hover{background:var(--surface-2)!important}
#copyMailBtn svg path,#deleteAllMailBtn svg path,#storedEmailsBtn svg path{fill:var(--muted)!important}
.relative.inline-block{width:100%;display:flex!important;justify-content:center}
#storedEmailsBtn{min-width:180px}
#storedEmailsDropdown{background:var(--surface)!important;color:var(--ink)!important;
  border:1px solid var(--border)!important;box-shadow:var(--shadow)!important}
#storedEmailsDropdown div{color:var(--ink)!important;padding:9px 12px!important}
#storedEmailsDropdown div:hover{background:var(--surface-2)!important}

/* ---------- Marquee (thông báo chạy) ---------- */
.marquee-container{max-width:1080px;margin:24px auto 0!important;
  background:var(--accent-soft)!important;border:1px solid var(--border)!important;box-shadow:none!important}
.marquee-text{color:var(--accent-ink)!important;text-shadow:none!important;font-size:14.5px!important}

/* ---------- Bảng email ---------- */
.overflow-x-auto{max-width:1080px;margin:22px auto 0}
.email-table{background:var(--surface)!important;border:1px solid var(--border)!important;
  border-radius:var(--radius)!important;box-shadow:var(--shadow)!important;overflow:hidden}
.email-table th{background:var(--surface-2)!important;color:var(--muted)!important;
  text-transform:uppercase;font-size:12px!important;letter-spacing:.04em;font-weight:700!important;
  border-bottom:1px solid var(--border)!important;padding:12px 16px!important}
.email-table td{color:var(--ink)!important;border-bottom:1px solid var(--border)!important;
  padding:14px 16px!important;font-size:14px}
.email-table tr:not(.unseen) td{background:var(--surface)!important}
.email-table tr.unseen td{background:color-mix(in srgb,var(--accent-soft) 55%,#fff)!important;font-weight:600}
.email-table tr:hover td{background:var(--surface-2)!important}
.email-table .column-subject{color:var(--ink)!important;font-weight:650}
.email-table .column-from{color:var(--muted)!important}
.email-table .column-date{color:var(--faint)!important;font-variant-numeric:tabular-nums}
.email-table .column-code{font-family:var(--mono)!important;font-weight:800!important;color:var(--ok)!important;letter-spacing:.05em}
.email-table .view-btn{background:var(--accent)!important;color:#fff!important;border-radius:9px!important;
  padding:7px 12px!important;font-size:13px!important;box-shadow:none!important}
.email-table .view-btn::before,.email-table .delete-btn::before{display:none!important}
.email-table .view-btn:hover{background:var(--accent-ink)!important;transform:none!important}
.email-table .delete-btn{background:var(--surface-2)!important;border:1px solid var(--border-strong)!important;
  border-radius:9px!important;padding:7px 10px!important;box-shadow:none!important}
.email-table .delete-btn:hover{background:#fdecef!important;border-color:var(--danger)!important;transform:none!important}
.email-table .delete-btn svg path{fill:var(--danger)!important}

/* ---------- Hộp thư trống ---------- */
.inbox-empty-msg{background:var(--surface)!important;padding:40px 24px!important}
.emptyInboxTitle{color:var(--ink)!important;font-weight:750!important;font-size:18px!important}
.inbox-empty-msg p{color:var(--muted)!important;margin:6px auto!important;max-width:60ch}

/* ---------- Popup xem mail ---------- */
#popup{background:rgba(14,23,41,.5)!important}
#popup > div,#html-container{background:var(--surface)!important;color:var(--ink)!important;
  border:1px solid var(--border)!important;border-radius:var(--radius)!important;box-shadow:var(--shadow)!important}
.close-btn{color:var(--muted)!important}
.close-btn:hover{color:var(--danger)!important}

/* ---------- Ô quảng cáo (Google AdSense) ---------- */
.ad-slot{max-width:760px;margin:26px auto;min-height:100px;display:grid;place-items:center;text-align:center;
  border:1.5px dashed var(--border-strong);border-radius:14px;color:var(--faint);
  background:repeating-linear-gradient(135deg,transparent,transparent 12px,rgba(91,107,136,.06) 12px,rgba(91,107,136,.06) 24px)}
.ad-slot b{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ad-slot span{font-size:12.5px}
.ad-slot.rect{max-width:360px;min-height:250px}

/* ---------- Footer sáng ---------- */
footer{background:var(--surface-2)!important;color:var(--muted)!important;
  border-top:1px solid var(--border)!important;box-shadow:none!important}
footer::before{background:linear-gradient(90deg,var(--accent),var(--ok))!important}
footer .current{color:var(--accent)!important}
footer a{color:var(--accent)!important}

/* =========================================================================
   GIAO DIỆN SÁNG TOÀN TRANG (redesign.css được link trong header.php)
   Cả thanh nav lẫn nội dung đều sáng, sạch như mockup.
   ========================================================================= */

/* Nền trang sáng dù body có class .bg-gray-900 (Tailwind) */
body{background:var(--ground)!important;color:var(--ink)!important}

/* ---------- Thanh nav trên cùng: SÁNG + dính (sticky) ---------- */
header.bg-gray-900{
  background:color-mix(in srgb,var(--surface) 88%,transparent)!important;
  backdrop-filter:saturate(1.3) blur(10px);
  color:var(--ink)!important;border-bottom:1px solid var(--border)!important;box-shadow:none!important;
  position:sticky;top:0;z-index:40}
header.bg-gray-900 > .container{background:transparent!important;box-shadow:none!important;
  padding-top:10px!important;padding-bottom:10px!important;max-width:1080px!important}
/* Tên thương hiệu */
header .text-xl.font-bold{color:var(--ink)!important;font-weight:800!important;letter-spacing:-.02em}
/* Link menu — GỌN: ẩn icon SVG, chỉ còn chữ (như mockup) */
header nav svg{display:none!important}
#mobileMenu svg{display:none!important}
header nav a,header nav button{color:var(--muted)!important;font-weight:600!important;
  padding:8px 11px!important;border-radius:9px!important;background:none!important;border:0!important;
  font-size:14.5px!important;cursor:pointer;display:inline-flex!important;align-items:center}
header nav a:hover,header nav button:hover{color:var(--ink)!important;background:var(--surface-2)!important}
/* bỏ khoảng cách icon cũ (ml-2) khi icon đã ẩn */
header nav a span,header nav button span{margin-left:0!important}
/* Logo: icon nhỏ gọn + chữ vừa phải (cân đối, không to lố) */
header a.hover\:text-white{gap:8px!important}
header a.hover\:text-white svg{width:26px!important;height:26px!important}
header .brand-name{font-size:16px!important;font-weight:750!important;letter-spacing:-.02em}
header .brand-name span{font-weight:750!important}
/* Recolor icon SVG: đổi CHÍNH XÁC các path màu trắng -> xám (giữ nguyên cấu trúc icon) */
header [stroke="#ffffff"],header [stroke="#FFFFFF"],header [stroke="#fff"],header [stroke="white"]{stroke:var(--muted)!important}
header [fill="#ffffff"],header [fill="#FFFFFF"],header [fill="#fff"],header [fill="white"]{fill:var(--muted)!important}
/* Logo (link về trang chủ) -> màu nhấn */
header a[href="../"] [stroke="#ffffff"],header a[href="../"] [stroke="white"]{stroke:var(--accent)!important}
header a[href="../"] [fill="#FFFFFF"]{fill:var(--accent)!important}
/* Nút toggle mobile */
#menuToggle [fill="white"],#menuToggle [fill="#fff"]{fill:var(--ink)!important}
/* Nút Đăng nhập dạng nút filled (như mockup) */
header nav a[href="/login"]{background:var(--accent)!important;color:#fff!important;
  padding:9px 16px!important;font-weight:650!important;border-radius:10px!important}
header nav a[href="/login"]:hover{background:var(--accent-ink)!important;color:#fff!important}
/* Menu mobile sáng */
#mobileMenu{background:var(--surface)!important;border-top:1px solid var(--border)!important}
#mobileMenu a{color:var(--muted)!important}
#mobileMenu a:hover{color:var(--ink)!important}
/* Dropdown avatar (đã là bg-white) giữ nguyên */

/* ---------- Thẻ nội dung tối -> sáng (scope trong .container/main/section/form) ---------- */
:is(.container,main,section,form) :is(.bg-gray-900,.bg-gray-800,.bg-gray-700,.bg-gray-600){
  background:var(--surface)!important;border:1px solid var(--border)!important}
:is(.container,main,section) .bg-gray-50{background:var(--surface-2)!important}

/* Chữ nội dung -> tối, đọc được trên nền sáng */
:is(.container,main,section) :is(.text-white,.text-gray-100,.text-gray-200,.text-gray-300){color:var(--ink)!important}
:is(.container,main,section) :is(.text-gray-400,.text-gray-500,.text-gray-600){color:var(--muted)!important}
/* Icon SVG trắng trong nội dung -> xám đậm cho thấy rõ */
:is(.container,main,section) :is([stroke="#ffffff"],[stroke="#FFFFFF"]){stroke:var(--ink)!important}
:is(.container,main,section) :is([fill="#ffffff"],[fill="#FFFFFF"]){fill:var(--ink)!important}

/* Input/textarea/select tối -> sáng */
:is(.container,main,section,form) :is(input,textarea,select).bg-gray-700,
:is(.container,main,section,form) :is(input,textarea,select).bg-gray-800{
  background:var(--surface-2)!important;color:var(--ink)!important;border:1px solid var(--border-strong)!important}

/* Bảng tối chung (vd trang Log) -> sáng */
:is(.container,main,section) table.bg-gray-800,
:is(.container,main,section) .bg-gray-800 table{background:var(--surface)!important}