/* ========================================================================
   AURORA — Bảng kê Chi phí Đích danh (XN Tư Vấn)
   Dựng theo Claude Design "Giao diện Aurora.dc.html".

   NGUYÊN TẮC: phần khung tĩnh giữ nguyên inline style copy thẳng từ design
   (đảm bảo khớp từng pixel). File CSS này CHỈ lo những thứ inline style
   không làm được: keyframes, :hover, :focus, bảng do JS dựng, responsive.
   ======================================================================== */
/* Bề rộng tối đa của nội dung giữa trang.
   Bản thiết kế gốc để 1240px; anh Nam thấy màn rộng còn thừa nhiều chỗ nên
   nới lên 1600px — bảng kê 11 cột cũng đỡ phải cuộn ngang. Sửa 1 chỗ này là
   toàn bộ header + thân trang + trang quản trị giãn theo. */
:root{--maxw:1600px}

*,*::before,*::after{box-sizing:border-box}

/* hidden phải luôn thắng — nhiều phần tử có display:grid/flex đặt sẵn,
   độ ưu tiên cao hơn [hidden] mặc định của trình duyệt */
[hidden]{display:none !important}

body{
  margin:0;background:#e1e6fa;color:#1f2033;
  font-family:Tahoma,Geneva,sans-serif;font-size:13.5px;line-height:1.5;
}
button,input,select{font-family:inherit;color:inherit}
a{color:#6366f1;text-decoration:none}
a:hover{color:#4f46e5}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em}
::selection{background:#ddd9fd}
:focus{outline:none}
:focus-visible{outline:2px solid #818cf8;outline-offset:2px}
button[disabled]{opacity:.45;cursor:not-allowed}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes aur{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ---- Nền chung: gradient cực quang phủ kín màn hình ----
   Đặt ở lớp fixed phía sau thay vì background-attachment:fixed vì bảng kê
   dài ~600 dòng, trang cao 5.000px+ → fixed khiến trình duyệt vẽ lại toàn
   bộ gradient mỗi lần cuộn, rất giật trên máy văn phòng. */
.aur-page{position:relative;min-height:100vh}
.aur-page::before{
  content:'';position:fixed;inset:0;z-index:-1;
  background:linear-gradient(168deg,#d8f2e9 0%,#e1e6fa 40%,#ece0f4 74%,#fae6ef 100%);
}

/* ================= HOVER (inline style không làm được) ================= */
.hv-soft:hover  {border-color:#c7c9f7 !important;color:#4f46e5;background:#f8f8fe}
.hv-danger:hover{border-color:#fbcfe8 !important;color:#db2777;background:#fef7fa}
.hv-aur:hover   {background-position:100% 50%}
.hv-card:hover  {border-color:#c7c9f7 !important}
/* Thẻ đã chọn file có viền hồng — khi rà chuột giữ tông hồng cho nhất quán,
   không nhảy sang tím như thẻ chưa chọn. */
.drop-zone.is-on:hover{border-color:#e88ec0 !important}
.hv-x:hover     {border-color:#fbcfe8 !important;color:#db2777}
.fc-in:focus    {border-color:#818cf8;box-shadow:0 0 0 3px rgba(129,140,248,.18)}

/* ================= BẢNG (do app.js dựng, phải style bằng CSS) =================
   Mọi giá trị lấy đúng từ design: header indigo #4f46e5, viền ngoài #9691b0,
   kẻ ô #a5a1bd, chữ hoa 10.5px giãn chữ .09em. */
.tbl-wrap{overflow-x:auto;margin:0 18px 20px}
.tbl-wrap table{width:100%;border-collapse:collapse;border:1px solid #9691b0}

.tbl-wrap thead th{
  text-align:center;padding:12px;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:#4f46e5;
  border-right:1px solid rgba(255,255,255,.22);
  vertical-align:middle;white-space:nowrap;
  position:sticky;top:0;z-index:2;
}
/* Cột STT theo spec: hẹp 46px, đệm trái 16px, đệm phải 8px */
.tbl-wrap thead th:first-child{padding:12px 8px 12px 16px;width:46px}
.tbl-wrap thead th:last-child{padding-right:22px;border-right:0}

.tbl-wrap tbody td{
  padding:13px 12px;font-size:12.5px;vertical-align:middle;
  border-bottom:1px solid #a5a1bd;border-right:1px solid #a5a1bd;
}
.tbl-wrap tbody td:first-child{padding:13px 8px 13px 16px;color:#6c6e84;text-align:center}
.tbl-wrap tbody td:last-child{padding-right:22px;border-right:0}

/* Tiêu đề dài của tab "Cần kiểm tra" (7 cột) phải cho xuống dòng, nếu để
   white-space:nowrap thì tổng bề rộng nhãn vượt khung → cột cuối bị cắt. */
#t-check thead th{white-space:normal}
#t-check thead th:first-child,#t-check thead th:nth-child(2){white-space:nowrap}

/* Ghi chú nhỏ dưới bảng */
.tbl-note{margin:-14px 0 0;padding:0 22px 18px;font-size:11.5px;color:#696b80}
.tbl-wrap tbody tr:hover{background:#f4f4fb}

/* Cột văn bản dài xuống dòng; cột số canh phải, chữ số đều bề ngang */
td.txt{text-align:left;white-space:normal;min-width:210px}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Dòng nhóm dự án + dòng tổng — nền #f3f4fc như dòng "Tổng cộng" của design */
tr.g-row td{background:#f3f4fc;font-weight:700;font-size:13px;border-top:1px solid #b9b7cf;color:#1f2033}
tr.g-row td:first-child{color:#1f2033}
tr.t-row td{background:#f3f4fc;font-weight:700;font-size:14px;border-top:1px solid #b9b7cf;padding-top:15px;padding-bottom:15px}
/* Ô tổng tiền cuối dòng TỔNG CỘNG tô gradient như design */
tr.t-row td:last-child{
  font-size:16px;
  background-image:linear-gradient(100deg,#0d9488,#6366f1,#db2777);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
tr.warn td{background:#fff5db}
tr.warn:hover td{background:#fff8e6}
tr.err  td{background:#fdf0f6}
tr.err:hover td{background:#fce7f0}

/* ================= NHÃN TRẠNG THÁI ================= */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.4}
.b-ok    {background:#effcf7;color:#0f766e}
.b-info  {background:#eef2ff;color:#4f46e5}
.b-warn  {background:#fdf4e7;color:#b45309}
.b-nb    {background:#f4f4f8;color:#5f6178}
.b-ngoai {background:#fdf0f6;color:#db2777}

/* ================= NÚT NHỎ trong thẻ "Cần xác nhận" ================= */
.admin-btn{
  height:29px;padding:0 12px;margin-left:6px;
  border:1px solid #d8d5e6;background:#fff;border-radius:8px;
  font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;
}
.admin-btn:hover{border-color:#818cf8;color:#4f46e5}
.admin-btn-ok   {background:#effcf7;border-color:#a7f3d5;color:#0f766e}
.admin-btn-del  {background:#fdf0f6;border-color:#fbcfe8;color:#db2777}
.admin-btn-reset{background:#fff}

/* Nút dùng chung ở khối do JS dựng (nút "Xóa toàn bộ lựa chọn đã lưu") */
.btn{
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;
  border:1px solid #d8d5e6;background:#fff;border-radius:10px;
  font-size:12.5px;font-weight:700;cursor:pointer;transition:all .15s;
}
.btn:hover{border-color:#c7c9f7;color:#4f46e5}

/* ================= TAB ================= */
.tab-pane{display:none}
.tab-pane.active{display:block}

/* ================= NHẬT KÝ XỬ LÝ ================= */
#log{
  margin-top:12px;max-height:220px;overflow:auto;
  padding:12px 14px;border-radius:12px;
  background:#fbfbfe;border:1px solid #e3e1ee;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;line-height:1.7;white-space:pre-wrap;
}
#log .li {color:#5f6178}
#log .lok{color:#0f766e}
#log .lw {color:#b45309}
#log .le {color:#db2777;font-weight:700}

/* ================= TRANG QUẢN TRỊ ================= */
.admin-section{
  background:rgba(255,255,255,.97);border:1px solid #c7c0dd;
  border-radius:16px;padding:20px 0;margin-top:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(31,32,51,.05),0 6px 16px -8px rgba(31,32,51,.16);
}
.admin-section h3{font-size:15px;padding:0 22px;margin-bottom:14px}
.badge-admin   {display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#eef2ff;color:#4f46e5}
.badge-active  {display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#effcf7;color:#0f766e}
.badge-pending {display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#fdf4e7;color:#b45309}
.badge-rejected{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#fdf0f6;color:#db2777}

/* ================= RESPONSIVE =================
   4 mốc 1024 / 768 / 480 / 360. Nguyên tắc: bảng luôn cuộn ngang bên trong
   .tbl-wrap, KHÔNG để trang tràn ngang (số tiền dài dễ làm vỡ layout). */
@media (max-width:1024px){
  .r-hd{padding:11px 18px !important}
  .r-main{padding:26px 18px 70px !important}
  .r-title{font-size:27px !important}
  .r-guide{grid-template-columns:repeat(2,1fr) !important}
  .r-setup{grid-template-columns:1fr !important}
  .r-setup > .r-upload{grid-column:auto !important}
  .r-files{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media (max-width:768px){
  .r-title{font-size:23px !important}
  .r-files{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .r-hd{flex-wrap:wrap !important;gap:10px !important}
  .r-hd-title{width:100%;order:-1}
  .r-user{padding-left:0 !important;border-left:0 !important}
  .r-tabs{gap:14px !important;padding:0 16px !important}
  .tbl-wrap{margin:0 12px 16px}
  .r-pad{padding-left:16px !important;padding-right:16px !important}
}
@media (max-width:480px){
  body{font-size:13px}
  .r-main{padding:20px 12px 60px !important}
  .r-hd{padding:10px 12px !important}
  .r-title{font-size:20px !important}
  .r-guide{grid-template-columns:1fr !important}
  .r-files{grid-template-columns:1fr !important}
  .r-period{grid-template-columns:1fr !important}
  .r-run{padding:14px !important}
  .r-run > button{width:100%;justify-content:center}
  .r-modal{padding:12px !important}
  .r-modal-box{max-height:88vh !important}
  .r-authpad{padding:22px !important}
  .r-resulthd{padding:16px !important}
}
@media (max-width:360px){
  .r-actions{width:100%}
  .r-actions > button{flex:1;justify-content:center}
}

/* Nút con mắt xem mật khẩu */
.pw-eye:hover{color:#4f46e5 !important;background:#f2f1fd !important}
/* Thẻ file tải nhầm loại — giữ tông đỏ khi rà chuột, không nhảy sang tím */
.drop-zone.is-err:hover{border-color:#c62025 !important}