:root{
  --bg: #0b1220;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.09);
  --text: #e8eefc;
  --muted: rgba(232,238,252,.72);
  --line: rgba(255,255,255,.12);
  --accent: #6ea8fe;
  --accent2:#7ee787;
  --danger:#ff6b6b;
  --warn:#ffd166;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

html,body{height:100%; background: radial-gradient(1200px 600px at 10% 10%, rgba(110,168,254,.18), transparent 55%),
radial-gradient(900px 500px at 90% 10%, rgba(126,231,135,.12), transparent 55%),
var(--bg); color:var(--text); margin:0;}

a{color:inherit}

.container{max-width:1100px; margin:0 auto; padding:28px 18px;}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px;}
.brand{display:flex; align-items:center; gap:12px;}
.logo{width:38px; height:38px; border-radius:12px; background: linear-gradient(135deg,var(--accent),#b197fc); box-shadow: var(--shadow);}
.h1{font-size:18px; font-weight:700; letter-spacing:.2px}
.sub{color:var(--muted); font-size:13px}

.grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:16px;}
@media (max-width: 900px){ .grid{grid-template-columns:1fr} }
/* Index: ép 1 cột để Result nằm dưới Query */
.grid-vertical { grid-template-columns: 1fr !important; }

/* Tăng khoảng cách giữa Email/Username */
.row-gap-lg { gap: 18px !important; }
/* Fix index: 2 ô input không chồng, không tràn ngang */
.form-2col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.form-2col > div{
  min-width: 0;           /* quan trọng: cho phép co lại */
}

.form-2col .input{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;           /* quan trọng: tránh tràn */
}

/* Mobile: 1 cột */
@media (max-width: 520px){
  .form-2col{ grid-template-columns: 1fr; }
}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.card-h{padding:14px 16px; border-bottom:1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.06), transparent); display:flex; align-items:center; justify-content:space-between}
.card-b{padding:16px}
.row{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* quan trọng: không tràn */
  gap:12px;
  align-items:start;
}
@media (max-width: 520px){
  .row{ grid-template-columns: 1fr; }
}

/* cho phép các item con co lại, tránh input tràn ngang */
.row > div{ min-width:0; }

.label{font-size:12px; color:var(--muted); margin-bottom:6px}
.input{width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--line); background: rgba(255,255,255,.04); color:var(--text); outline:none}
.input{
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}
.input:focus{border-color: rgba(110,168,254,.55); box-shadow:0 0 0 4px rgba(110,168,254,.12)}
.btn{cursor:pointer; border:none; border-radius:12px; padding:11px 14px; color:#06101d; font-weight:700; background: linear-gradient(135deg,var(--accent),#b197fc)}
.btn:hover{filter:brightness(1.05)}
.btn2{cursor:pointer; border:1px solid var(--line); border-radius:12px; padding:10px 14px; color:var(--text); background: rgba(255,255,255,.04)}
.btnDanger{background: linear-gradient(135deg,var(--danger),#ff9f9f); color:#1b0b0b}
.btnLight{background: linear-gradient(135deg,var(--accent2),#9fffc7); color:#1b0b0b}
.pill{display:inline-flex; gap:8px; align-items:center; padding:7px 10px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,.04); font-size:12px; color:var(--muted)}
.kpi{display:flex; gap:8px; flex-wrap:wrap}
.kpi b{color:var(--text)}
.hr{height:1px; background:var(--line); margin:12px 0}

.table{width:100%; border-collapse:separate; border-spacing:0 10px}
.table th{font-size:12px; color:var(--muted); text-align:left; padding:0 10px}
.table td{background:var(--card2); border:1px solid var(--line); padding:10px; font-size:13px}
.table td:first-child{border-top-left-radius:12px; border-bottom-left-radius:12px}
.table td:last-child{border-top-right-radius:12px; border-bottom-right-radius:12px}
.small{font-size:12px; color:var(--muted)}
.toast{margin-top:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background: rgba(255,255,255,.05)}
.sidebar{display:flex; gap:10px; flex-wrap:wrap}
.tab{padding:9px 12px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,.04); cursor:pointer; font-size:13px}
.tab.active{background: linear-gradient(135deg, rgba(110,168,254,.25), rgba(177,151,252,.20)); border-color: rgba(110,168,254,.35)}
.modal-backdrop{position:fixed; inset:0; background: rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; padding:16px}
.modal{max-width:720px; width:100%; background: rgba(15,23,42,.92); border:1px solid var(--line); border-radius:18px; box-shadow: var(--shadow); overflow:hidden}
.modal .card-h{border-bottom:1px solid var(--line)}
.modal-backdrop.show{display:flex}


#kpi { display: none !important; }

    /* Danh sách email hiển thị gọn như “cards” */
    .mail-list { display: flex; flex-direction: column; gap: 12px; }
    .mail-item { border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 12px; background: #fff; }
    .mail-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
    .mail-from { font-weight: 700; }
    .mail-subject { font-weight: 600; }
    .mail-body { white-space: pre-wrap; line-height: 1.5; }
    .mail-meta { font-size: 12px; opacity: .7; }

    /* Modal: form fields không chồng lên nhau */
#modalBody .row { grid-template-columns: 1fr !important; } /* nếu admin.js dùng .row */
#modalBody .label { margin-top: 10px; }
#modalBody .input, 
#modalBody select.input, 
#modalBody textarea.input { display:block; width:100%; }

#modalBody > * + * { margin-top: 12px; } /* nếu admin.js append trực tiếp các div */
#modalBody .form { display:flex; flex-direction:column; gap:12px; } /* nếu có class form */
/* ===== Dashboard modal form: 2 cột, có gap, không tràn ===== */

/* Bảo vệ: modal không vượt màn hình ngang */
.modal{
  max-width: 920px;
  width: min(920px, calc(100vw - 32px));
}

#modalBody{
  overflow-x: hidden; /* tránh tràn ngang */
}

/* Nếu admin.js dùng .row để layout field -> chuyển thành 2 cột */
#modalBody .row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  align-items: start;
}

/* Nếu admin.js không dùng .row mà append trực tiếp các block -> vẫn ổn */
#modalBody > *{
  min-width: 0;
}

/* Field wrapper phải co được để không đẩy cột phải ra ngoài */
#modalBody .row > div,
#modalBody .field,
#modalBody .form-field{
  min-width: 0;
}

/* Input/select/textarea không được vượt container */
#modalBody .input,
#modalBody select.input,
#modalBody textarea.input{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* Label spacing trong modal */
#modalBody .label{
  margin: 10px 0 6px;
  display: block;
}

/* Mobile: về 1 cột để dễ nhìn */
@media (max-width: 720px){
  #modalBody .row{ grid-template-columns: 1fr; }
}
/* ===== Modal layout: 2 cột, có khoảng cách, không tràn ===== */

/* modal không vượt màn hình */
.modal{
  max-width: 920px;
  width: min(920px, calc(100vw - 32px));
}

/* tránh tràn ngang làm cột phải bị "ẩn" */
#modalBody{ overflow-x: hidden; }

/* trong modal: tăng khoảng cách và đảm bảo 2 cột co được */
#modalBody .row{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px 18px !important;
}

/* các field wrappers phải co lại được */
#modalBody .row > div{ min-width: 0; }

/* input/textarea/select trong modal không được vượt cột */
#modalBody .input,
#modalBody select.input,
#modalBody textarea.input{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* label trong modal có spacing rõ */
#modalBody .label{ margin: 10px 0 6px; display:block; }

/* Mobile: modal về 1 cột */
@media (max-width: 720px){
  #modalBody .row{ grid-template-columns: 1fr !important; }
}
#modalBody .pill{
  max-width: 100%;
  white-space: normal;
}
option{
  background:grey;
}