/* Sổ Nhà Trọ — giao diện lấy nguyên từ app Nhà Trọ 187 NSHL (nền giấy kem, xanh than, đồng thau, đỏ gạch; có sáng/tối/tự động).
   Phần đầu là bản gốc của 187; phần "Bổ sung" ở cuối là các lớp riêng của Sổ Nhà Trọ. */
:root{
  --paper:#FAF5E9;
  --paper-2:#F1E8D4;
  --card:#FFFDF8;
  --ink:#22241F;
  --ink-soft:#5B5A4E;
  --navy:#16233B;
  --navy-2:#1F3050;
  --brass:#B8863B;
  --brass-dark:#8C6526;
  --brass-light:#E6C989;
  --brick:#A8442B;
  --brick-dark:#8A3722;
  --green-ok:#2F6B4F;
  --green-bg:#E3EFE6;
  --line:#DCCFAE;
  --danger:#B23A3A;
  --danger-bg:#F6E4E1;
  --brass-accent:#E6C989;
  --paper-glow:#FFFCF5;
  --shadow: 0 1px 2px rgba(22,35,59,.06), 0 4px 16px rgba(22,35,59,.06);
  --radius: 10px;
}
/* ===== Giao diện tối =====
   Chỉ đổi GIÁ TRỊ của đúng các biến màu ở trên — mọi thành phần trong app đều
   tham chiếu qua biến, không hardcode màu, nên đổi ở đây là tự động lan ra toàn bộ
   giao diện mà không phải sửa từng chỗ một. */
:root[data-theme="dark"]{
  --paper:#181A20;
  --paper-2:#20232B;
  --card:#22252D;
  --ink:#EDE9DD;
  --ink-soft:#A8A398;
  --navy:#0F1826;
  --navy-2:#18243A;
  --brass:#C99A4E;
  /* brass-dark/brass-light là CẶP nền+chữ của huy hiệu nhỏ (badge) — tự đủ tương
     phản với NHAU, không phụ thuộc nền trang, nên đảo vai trò cho hợp nền tối:
     nền huy hiệu tối hơn, chữ trên đó sáng hơn. brass-dark còn được dùng làm MÀU
     CHỮ trực tiếp trên --paper/--card (section-title, ghi chú...) nên cũng phải
     đủ sáng để đọc được trên nền giấy tối. */
  --brass-dark:#D9AE66;
  --brass-light:#4A3B1F;
  /* Biến RIÊNG cho chữ đặt trực tiếp trên nền navy (room-num, cloud-indicator...) —
     navy vẫn tối ở cả 2 theme nên giữ nguyên 1 màu sáng, không đổi theo theme. */
  --brass-accent:#E6C989;
  --paper-glow:transparent;
  --brick:#D9694A;
  --brick-dark:#B23A3A;
  --green-ok:#5FAE85;
  --green-bg:#1E3128;
  --line:#3A3E48;
  --danger:#E06666;
  --danger-bg:#3A2323;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.35);
}
/* In ra giấy LUÔN sáng, bất kể đang bật chế độ tối trên màn hình — giấy in nền tối
   vừa tốn mực vừa không khớp với giấy thật. */
/* Phiếu thu & bản xem hợp đồng LUÔN mô phỏng giấy thật — nền sáng cố định dù app
   đang bật giao diện tối. Nhưng chỉ đổi nền thôi thì CHỮ bên trong (đang dùng biến
   --ink/--ink-soft/--brick... đã bị giao diện tối đổi thành màu sáng) sẽ bị "chữ
   sáng trên nền sáng" → mờ gần như biến mất. Khoá lại TOÀN BỘ biến màu về đúng
   giá trị sáng ngay trong phạm vi 2 khung này, để mọi phần tử con tự động ăn theo. */
[data-theme="dark"] .receipt,
[data-theme="dark"] .ct-preview,
[data-theme="dark"] .contract-doc{
  --paper:#FAF5E9; --paper-2:#F1E8D4; --card:#FFFDF8; --ink:#22241F; --ink-soft:#5B5A4E;
  --navy:#16233B; --navy-2:#1F3050; --brass:#B8863B; --brass-dark:#8C6526; --brass-light:#E6C989;
  --brass-accent:#E6C989;
  --brick:#A8442B; --brick-dark:#8A3722; --green-ok:#2F6B4F; --green-bg:#E3EFE6; --line:#DCCFAE;
  --danger:#B23A3A; --danger-bg:#F6E4E1;
}
@media print{
  :root[data-theme="dark"]{
    --paper:#FAF5E9; --paper-2:#F1E8D4; --card:#FFFDF8; --ink:#22241F; --ink-soft:#5B5A4E;
    --navy:#16233B; --navy-2:#1F3050; --brass:#B8863B; --brass-dark:#8C6526; --brass-light:#E6C989;
    --brass-accent:#E6C989;
    --brick:#A8442B; --brick-dark:#8A3722; --green-ok:#2F6B4F; --green-bg:#E3EFE6; --line:#DCCFAE;
    --danger:#B23A3A; --danger-bg:#F6E4E1;
  }
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1200px 500px at 10% -10%, var(--paper-glow) 0%, transparent 60%),
    var(--paper);
  color:var(--ink);
  font-family:'Be Vietnam Pro', -apple-system, sans-serif;
  font-size:14px;
  line-height:1.45;
  min-height:100vh;
}
.mono{font-family:'JetBrains Mono', ui-monospace, monospace;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:14px;}
a{color:inherit;}

/* ---------- Login ---------- */
#loginScreen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-card{
  width:100%; max-width:380px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:36px 30px 30px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.login-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:repeating-linear-gradient(90deg, var(--brass) 0 14px, var(--brick) 14px 28px);
}
.login-seal{
  display:block; width:138px; height:auto; margin:2px auto 16px;
  filter:drop-shadow(0 3px 6px rgba(22,35,59,.16));
}
.login-card h1{font-size:19px; text-align:center; margin:0 0 2px; color:var(--ink); font-weight:800;}
.login-card p.sub{text-align:center; color:var(--ink-soft); margin:0 0 22px; font-size:12.5px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em;}
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--brass-accent); border-color:var(--brass);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 16px; border-radius:8px; border:1px solid transparent; font-weight:600; font-size:13.5px;
  transition:transform .05s ease, filter .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:hover{filter:brightness(1.15);}
.btn-brass{background:var(--brass); color:#2A1D06;}
.btn-brass:hover{filter:brightness(1.06);}
.btn-outline{background:transparent; border-color:var(--line); color:var(--ink);}
.btn-outline:hover{background:var(--paper-2);}
.btn-danger{background:var(--danger); color:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:6px 10px; font-size:12px; border-radius:6px;}
.err-msg{color:var(--danger); font-size:12.5px; margin-top:8px; text-align:center; min-height:16px;}
.hint{font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:16px;}
.forgot-link{display:block; text-align:center; margin-top:12px; font-size:12.5px; color:var(--brass-dark); text-decoration:underline; cursor:pointer; background:none; border:none;}
.btn-logout{background:var(--brick); color:#fff; font-weight:700; padding:9px 16px;}
.btn-logout:hover{background:var(--brick-dark);}

/* ---------- App shell ---------- */
#appScreen{display:none; min-height:100vh; flex-direction:column;}
header.topbar{
  background:var(--navy); color:#EFE7D3; padding:12px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border-bottom:3px solid var(--brass);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:15px; letter-spacing:.02em;}
.brand .seal-mini{
  height:34px; padding:0 9px; border-radius:9px; background:var(--card);
  border:1px solid var(--brass); display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,.22);
}
.brand .seal-mini img{height:21px; width:auto; display:block;}
.cloud-indicator{display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:4px 9px; border-radius:20px; background:rgba(255,255,255,.1); color:#c9c2ab; white-space:nowrap;}
.cloud-indicator.syncing{background:rgba(184,134,59,.25); color:var(--brass-accent);}
.cloud-indicator.synced{background:rgba(47,107,79,.25); color:#8fd6ac;}
.cloud-indicator.error{background:rgba(168,68,43,.3); color:#ffb3a3;}
.theme-toggle-btn{
  width:30px; height:30px; border-radius:8px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:#EFE7D3; font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:0;
}
.theme-toggle-btn:active{background:rgba(255,255,255,.18);}
.theme-choice-btn{border:1.5px solid var(--line); background:var(--card); color:var(--ink);}
.theme-choice-btn.active{border-color:var(--brass); background:var(--brass-light); color:var(--brass-dark); font-weight:700;}
.theme-toggle-btn{position:relative;}
.notif-badge{
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px;
  border-radius:8px; background:var(--brick); color:#fff; font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center; line-height:1; border:1.5px solid var(--navy);
}
@keyframes bell-ring{0%,100%{transform:rotate(0);}20%{transform:rotate(14deg);}40%{transform:rotate(-12deg);}60%{transform:rotate(8deg);}80%{transform:rotate(-6deg);}}
.theme-toggle-btn.ringing{animation:bell-ring .6s ease-in-out 2;}
.cloud-indicator .dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0;}
.cloud-indicator.syncing .dot{animation:pulse-dot 1s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:.3;}}
.month-picker{display:flex; align-items:center; gap:6px; margin-left:auto;}
.month-picker select{background:var(--navy-2); color:#fff; border:1px solid #3a4a6b; border-radius:7px; padding:7px 10px;}
.topbar .btn{padding:8px 12px; font-size:12.5px;}

nav.tabs{
  display:flex; gap:2px; background:var(--paper-2); padding:0 12px; overflow-x:auto; border-bottom:1px solid var(--line);
}
nav.tabs button{
  background:none; border:none; padding:12px 14px; font-weight:600; font-size:13px; color:var(--ink-soft);
  border-bottom:3px solid transparent; white-space:nowrap;
}
nav.tabs button.active{color:var(--ink); border-bottom-color:var(--brick);}
nav.tabs button:hover{color:var(--ink);}

main{flex:1; padding:16px; max-width:1100px; width:100%; margin:0 auto;}
footer.appfoot{text-align:center; color:var(--ink-soft); font-size:11px; padding:16px 10px; opacity:.7; line-height:1.7;}
footer.appfoot .foot-line{display:block;}

.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:14px; box-shadow:var(--shadow);}
.panel h2{margin:0 0 4px; font-size:16px; color:var(--ink);}
.panel .desc{color:var(--ink-soft); font-size:12.5px; margin:0 0 14px;}

.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:14px;}
.stat{background:var(--paper-2); border:1px solid var(--line); border-radius:9px; padding:10px 12px;}
.stat .lbl{font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; margin-bottom:3px;}
.stat .val{font-size:17px; font-weight:700; color:var(--ink);}
.stat.good .val{color:var(--green-ok);}
.stat.bad .val{color:var(--brick);}

.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
.toolbar input[type=text], .toolbar input[type=search]{padding:8px 10px; border:1px solid var(--line); border-radius:7px; min-width:160px;}
.spacer{flex:1;}

/* room accordion */
/* KHÔNG dùng overflow:hidden ở đây — nó vô hiệu hoá position:sticky của .room-head */
.room-card{border:1px solid var(--line); border-radius:9px; margin-bottom:8px; background:var(--card);}
/* Trước đây dùng opacity:.6 cho cả khối — độ mờ này trộn với màu NỀN, nên trên nền
   tối chữ vốn đã sáng lại bị kéo về gần màu nền hơn nhiều so với trên nền sáng,
   khiến phòng trống gần như biến mất ở giao diện tối. Đổi sang giảm độ nổi bật bằng
   chính các biến màu (ink-soft, line) — luôn đọc được ở cả 2 giao diện như nhau. */
.room-card.inactive{}
.room-card.inactive .room-total, .room-card.inactive .note{color:var(--ink-soft);}
.room-card.inactive .room-head{background:var(--paper-2);}
.room-head{display:flex; align-items:center; gap:10px; padding:11px 12px; cursor:pointer; user-select:none; position:sticky; top:0; z-index:4; background:var(--card); border-bottom:1px solid transparent; border-radius:8px 8px 0 0;}
.room-card.open .room-head{border-bottom-color:var(--line); box-shadow:0 2px 4px rgba(22,35,59,.05);}
/* Khi hàng phòng đang bị ghim ở mép trên, làm nó nổi rõ hơn để dễ nhận ra */
.room-card.open .room-head{background:var(--card); box-shadow:0 3px 10px rgba(22,35,59,.10);}
.room-card:not(.open){overflow:hidden;}
.room-head:hover{background:var(--paper-2);}
.room-num{
  width:34px;height:34px;border-radius:8px;background:var(--navy); color:var(--brass-accent); font-weight:800;
  display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;
}
.room-card.inactive .room-num{background:#9a9384;}
.room-num.contract-warn{background:#D9791E !important; color:#fff;}
.room-num.contract-expired{background:var(--brick) !important; color:#fff;}
.room-mid{flex:1; min-width:0;}
.room-mid .note{font-size:11.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.room-total{font-weight:700; color:var(--ink); font-size:14.5px; white-space:nowrap; width:fit-content; max-width:100%;}
.room-total.urgent-yellow{color:#946200; background:#FFF3CD; padding:2px 7px; border-radius:5px;}
.room-total.urgent-red{color:#fff; background:var(--brick); padding:2px 7px; border-radius:5px;}
.urgent-yellow{color:#946200; background:#FFF3CD; padding:2px 7px;}
.urgent-red{color:#fff; background:var(--brick); padding:2px 7px;}
.pill{display:inline-block; font-weight:700; font-size:11.5px; padding:3px 10px; border-radius:20px; white-space:nowrap; line-height:1.4;}
.pill-red{background:var(--brick); color:#fff;}
.pill-yellow{background:#FFF3CD; color:#946200;}
.pill-muted{background:var(--paper-2); color:var(--ink-soft); font-weight:600;}
.pill-green{background:var(--green-bg); color:var(--green-ok);}
.month-highlight{color:var(--brick); font-weight:800;}
.text-center{text-align:center !important;}
.paid-pill{font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:20px; white-space:nowrap;}
.paid-pill.yes{background:var(--green-bg); color:var(--green-ok);}
.paid-pill.no{background:var(--danger-bg); color:var(--danger);}
.chev{transition:transform .15s ease; color:var(--ink-soft); flex-shrink:0;}
.room-card.open .chev{transform:rotate(90deg);}
.room-body{display:none; border-top:1px solid var(--line); padding:14px; background:var(--paper-2);}
.room-card.open .room-body{display:block;}

.form-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px 12px;}
.form-grid .f label{display:block; font-size:11px; color:var(--ink-soft); margin-bottom:4px; font-weight:600;}
.form-grid .f input, .form-grid .f select{width:100%; padding:10px 11px; font-size:15px; border:1px solid var(--line); border-radius:6px;}
/* Ô ngày: chữ nhỏ làm 3 ô dd/mm/yyyy và nút lịch bé tí, rất khó bấm.
   Cho bằng cỡ chữ như trang dangky.html và phóng to nút mở lịch. */
.form-grid .f input[type="date"]{min-height:44px; font-size:15px; line-height:1.2;}
.form-grid .f input[type="date"]::-webkit-calendar-picker-indicator{
  width:22px; height:22px; padding:2px; cursor:pointer; opacity:.7;
}
.form-grid .f input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1;}
.form-grid .f.span2{grid-column:span 2;}
.section-title{font-size:11.5px; font-weight:700; color:var(--brass-dark); text-transform:uppercase; letter-spacing:.05em; margin:14px 0 8px; border-bottom:1px dashed var(--line); padding-bottom:4px;}
.section-title:first-child{margin-top:0;}
.breakdown{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); font-size:12.5px;}
.breakdown span b{color:var(--ink);}

.checkbox-row{display:flex; align-items:center; gap:8px;}
.checkbox-row input{width:auto;}

.sticky-actions{
  position:sticky; bottom:0; background:var(--paper); border-top:1px solid var(--line); padding:10px 0; margin-top:10px;
  display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap;
}

/* tables */
table.data{width:100%; border-collapse:collapse; font-size:12.5px;}
table.data th{background:var(--navy); color:#EFE7D3; text-align:left; padding:8px 9px; font-weight:600; white-space:nowrap;}
table.data td{padding:7px 9px; border-bottom:1px solid var(--line); white-space:nowrap;}
table.data tr:nth-child(even) td{background:var(--paper-2);}
table.data tfoot td{font-weight:700; background:var(--paper-2); border-top:2px solid var(--brass);}
.table-wrap{overflow-x:auto; border-radius:8px; border:1px solid var(--line); position:relative;}
.table-wrap table.data{border:none;}
.table-wrap table.data th.sticky-col{position:sticky; left:0; z-index:3; background:var(--navy);}
.table-wrap table.data td.sticky-col{position:sticky; left:0; z-index:2; background:var(--card); box-shadow:2px 0 5px rgba(22,35,59,.08);}

/* receipts */
.receipt{
  background:#fffef9; border:1px dashed var(--ink-soft); border-radius:6px; padding:16px; max-width:480px; margin:0 auto 18px;
  position:relative;
}
/* Phiếu thu mô phỏng TỜ GIẤY THẬT — luôn hiển thị như bản in dù app đang ở chế độ
   tối, không chỉ riêng cái nền. Khoá lại TOÀN BỘ biến màu về giá trị sáng ngay tại
   đây; mọi phần tử con (bảng, ghi chú, khối QR...) đang tham chiếu qua var(--ink),
   var(--ink-soft)... sẽ tự động thừa hưởng đúng màu sáng, không cần sửa từng chỗ.
   Thiếu bước này thì chữ "trắng" của chế độ tối in trên nền trắng gần như biến mất. */
[data-theme="dark"] .receipt{
  --paper:#FAF5E9; --paper-2:#F1E8D4; --card:#FFFDF8; --ink:#22241F; --ink-soft:#5B5A4E;
  --navy:#16233B; --navy-2:#1F3050; --brass:#B8863B; --brass-dark:#8C6526; --brass-light:#E6C989;
  --brass-accent:#E6C989; --brick:#A8442B; --brick-dark:#8A3722; --green-ok:#2F6B4F; --green-bg:#E3EFE6;
  --line:#DCCFAE; --danger:#B23A3A; --danger-bg:#F6E4E1;
  color:var(--ink);
}
.receipt-header{display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--navy); padding-bottom:8px; margin-bottom:8px;}
/* Logo thay cho 2 dòng "NHÀ TRỌ 187 / Phòng số N".
   Cao 44px để cân với khối tháng + hạn đóng bên phải. Số phòng vẫn còn ở dòng
   "Tổng tiền phòng N" ngay bên dưới nên không mất thông tin. */
.receipt-header .rlogo{display:flex; align-items:center; flex-shrink:0;}
.receipt-header .rlogo img{height:44px; width:auto; display:block;}
.receipt-header .rname{font-weight:800; color:var(--navy); font-size:15px;}
.receipt-header .rroom{font-size:13px; color:var(--ink-soft);}
.receipt-header .rdate{font-size:11.5px; color:var(--ink-soft); text-align:right;}
.receipt-header .rmonth-big{color:var(--brick); font-weight:800; font-size:15px;}
.receipt-total-hero{font-weight:800; font-size:15px; margin-bottom:8px; padding-bottom:6px; border-bottom:1px dashed var(--line); display:flex; justify-content:space-between; align-items:baseline;}
.receipt-total-hero .hero-label{color:var(--brick);}
.receipt-total-hero .room-num-big{font-size:24px; font-weight:900; margin:0 2px; display:inline-block;}
.receipt-total-hero .amt{color:var(--brick); font-size:19px;}
table.receipt-tbl{width:100%; border-collapse:collapse; font-size:12px;}
table.receipt-tbl th{text-align:left; border-bottom:1px solid var(--ink); padding:4px 3px; font-size:11px;}
table.receipt-tbl td{padding:4px 3px; border-bottom:1px dotted var(--line); vertical-align:top;}
table.receipt-tbl thead th:nth-child(1), table.receipt-tbl tbody td:nth-child(1){text-align:center;}
table.receipt-tbl thead th:nth-child(3), table.receipt-tbl tbody td:nth-child(3){text-align:center;}
table.receipt-tbl thead th:nth-child(4), table.receipt-tbl tbody td:nth-child(4){text-align:center;}
table.receipt-tbl thead th:nth-child(5), table.receipt-tbl tbody td:nth-child(5){text-align:center;}
table.receipt-tbl thead th:nth-child(6), table.receipt-tbl tbody td:nth-child(6){text-align:right;}
table.receipt-tbl tfoot td{font-weight:800; border-top:2px solid var(--navy); border-bottom:none; font-size:13.5px; color:var(--navy);}
table.receipt-tbl tfoot td:last-child{text-align:right;}
/* Dòng nợ cũ: chỉ xuất hiện khi phòng còn thiếu tiền tháng trước. Tách khỏi dòng
   "Tổng cộng" của riêng tháng này để khách vẫn thấy rõ 2 khoản là khác nhau,
   rồi mới đến dòng tổng cuối cùng phải đóng (gồm cả nợ). */
table.receipt-tbl tfoot tr.debt-row td{font-weight:700; font-size:12px; color:var(--brick); border-top:1px dashed var(--line);}
table.receipt-tbl tfoot tr.debt-total-row td{font-weight:800; font-size:14.5px; color:var(--brick); border-top:2px solid var(--brick);}
table.receipt-tbl tfoot tr.debt-total-row td:last-child{text-align:right;}
.receipt-note{font-size:10.5px; color:var(--ink-soft); margin-top:8px; white-space:pre-wrap; line-height:1.5;}
.qr-block{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); display:flex; gap:12px; align-items:center;}
.qr-block img{width:110px; height:110px; border-radius:6px; border:1px solid var(--line); flex-shrink:0; background:#fff;}
.qr-block .qr-text{font-size:12.5px; color:var(--ink-soft); line-height:1.55;}
.qr-block .qr-text b{color:var(--navy); font-size:14px;}
.qr-caption{font-size:11px; color:var(--brass-dark); font-weight:700; margin-top:4px;}
.stamp{
  position:absolute; top:14px; right:16px; width:74px; height:74px; border:3px solid var(--brick); border-radius:50%;
  color:var(--brick); display:flex; align-items:center; justify-content:center; text-align:center; font-weight:800;
  font-size:10.5px; transform:rotate(-14deg); opacity:.85; line-height:1.15; letter-spacing:.02em;
}

/* misc */
.badge{display:inline-block; background:var(--brass-light); color:var(--brass-dark); font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:20px;}
.empty-state{text-align:center; padding:40px 20px; color:var(--ink-soft);}
.modal-overlay{position:fixed; inset:0; background:rgba(22,20,15,.5); display:none; align-items:center; justify-content:center; z-index:100; padding:16px;}
.modal-overlay.show{display:flex;}
.modal-box{background:var(--card); border-radius:14px; padding:22px; max-width:440px; width:100%; box-shadow:var(--shadow); max-height:88vh; overflow-y:auto;}
.modal-box h3{margin:0 0 4px; color:var(--ink);}
.modal-box .desc{color:var(--ink-soft); font-size:12.5px; margin-bottom:16px;}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:18px;}
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--navy); color:#fff; padding:10px 18px;
  border-radius:8px; font-size:13px; box-shadow:var(--shadow); z-index:200; opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.toast.show{opacity:1;}

.img-viewer-overlay{
  position:fixed; inset:0; background:rgba(10,12,10,.94); z-index:300;
  display:none; flex-direction:column;
}
.img-viewer-overlay.show{display:flex;}
.img-viewer-toolbar{
  flex-shrink:0; display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:rgba(0,0,0,.5); color:#fff;
}
.img-viewer-toolbar button{
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:6px; padding:7px 12px; font-size:14px; font-weight:700; min-width:40px;
}
.img-viewer-toolbar button:hover{background:rgba(255,255,255,.22);}
.img-viewer-toolbar span{font-size:13px; font-weight:700; min-width:48px; text-align:center;}
.img-viewer-scroll{
  flex:1; overflow:auto; display:flex; align-items:center; justify-content:center;
  -webkit-overflow-scrolling:touch; touch-action:pinch-zoom pan-x pan-y;
}
.img-viewer-scroll img{
  max-width:none; transition:transform .15s ease; transform-origin:center center;
  cursor:zoom-in;
}

/* ===== HỢP ĐỒNG ===== */
#contractPrint{display:none;}
.ct-preview{max-height:52vh; overflow:auto; border:1px solid var(--line); border-radius:8px; background:#fff; margin-top:10px;}
.contract-doc{font-family:"Times New Roman",Times,serif; font-size:13.5px; line-height:1.45; color:#000; background:#fff; padding:16px 18px; text-align:justify;}
.contract-doc p{margin:0 0 6px;}
.contract-doc h1{font-size:16.5px; font-weight:700; text-align:center; margin:8px 0 12px; letter-spacing:.3px;}
.contract-doc .ct-center{text-align:center;}
.contract-doc .ct-bold{font-weight:700;}
.contract-doc .ct-dieu{font-weight:700; margin-top:9px; text-align:left;}
.contract-doc .ct-ind{margin-left:22px;}
.contract-doc .bl{display:inline-block; min-width:110px; border-bottom:1px dotted #444; vertical-align:baseline;}
.contract-doc .bl-lg{min-width:190px;}
.contract-doc .bl-xl{min-width:330px;}
/* Khối QR nổi bên phải, chữ chảy vòng quanh bên trái — đúng như bản Word gốc.
   Chữ "↑" thay cho mũi tên vẽ tay trong bản gốc. */
.contract-doc .ct-qr-float{float:right; width:132px; margin:0 0 8px 14px; text-align:center;}
.contract-doc .ct-qr-float img{width:100%; height:auto; display:block; border:2px solid #000; border-radius:3px;}
.contract-doc .ct-qr-cap{border:1.4px solid #2E6DA4; border-radius:6px; padding:5px 6px 6px; margin-top:5px; font-size:10px; font-weight:700; line-height:1.28; color:#1B4A73; background:#EAF2FB; text-align:center;}
.contract-doc .ct-qr-cap .arrow{display:block; font-size:13px; line-height:1; margin-bottom:2px;}
.contract-doc .ct-clear{clear:both;}
.contract-doc .ct-sign{width:100%; margin-top:16px; border-collapse:collapse; text-align:center;}
.contract-doc .ct-sign td{width:50%; padding:8px 6px 62px; vertical-align:top;}

@page{size:A4; margin:12mm 14mm;}
@media print{
  /* Khi in hợp đồng: giấu toàn bộ giao diện, chỉ để lại tờ hợp đồng */
  body.print-contract > *{display:none !important;}
  body.print-contract > #contractPrint{display:block !important;}
  body.print-contract .contract-doc{padding:0; font-size:12.5pt; line-height:1.35;}
  body.print-contract .contract-doc p{margin:0 0 5pt;}
  body.print-contract .contract-doc h1{font-size:15pt; margin:6pt 0 10pt;}
  .contract-doc .ct-qr-float, .contract-doc .ct-sign{page-break-inside:avoid;}
  header.topbar, nav.tabs, .no-print, footer.appfoot{display:none !important;}
  body{background:#fff;}
  main{max-width:none; padding:0;}
  .receipt{page-break-after:always; border:1px solid #999; box-shadow:none;}
  .receipt:last-child{page-break-after:auto;}

  /* ===== Phiếu thu khi in giấy thật (KHÔNG ảnh hưởng bản xem trên màn hình) =====
     (A) Trên màn hình .receipt giới hạn max-width:480px cho gọn, nhưng khổ giấy A4
     (đã khai ở @page phía trên) rộng hơn nhiều — giữ nguyên 480px thì phiếu in ra
     chỉ chiếm hơn nửa trang, hai bên trống rất nhiều. Mở hết cỡ giấy cho đỡ phí. */
  .receipt{max-width:100%; padding:20px 24px;}

  /* (B) Tăng nhẹ cỡ chữ so với bản xem màn hình — trên giấy in, cỡ chữ tương đương
     màn hình bị nhỏ hơn cảm giác thật (chữ nhỏ, nhất là phần ghi chú), tăng lên cho
     dễ đọc, đặc biệt với khách lớn tuổi. */
  .receipt-header .rmonth-big{font-size:17px;}
  .receipt-header .rdate{font-size:13px;}
  .receipt-total-hero{font-size:17px;}
  .receipt-total-hero .amt{font-size:22px;}
  .receipt-total-hero .room-num-big{font-size:25px;}
  table.receipt-tbl{font-size:13.5px;}
  table.receipt-tbl th{font-size:12.5px;}
  table.receipt-tbl tfoot td{font-size:15.5px;}
  table.receipt-tbl tfoot tr.debt-row td{font-size:13.5px;}
  table.receipt-tbl tfoot tr.debt-total-row td{font-size:16.5px;}
  .receipt-note{font-size:12px;}
  .qr-block img{width:130px; height:130px;}
  .qr-block .qr-text{font-size:14px;}
  .qr-block .qr-text b{font-size:16px;}
  .qr-caption{font-size:12.5px;}
}
@media (max-width:640px){
  .form-grid{grid-template-columns:repeat(2,1fr);}
  /* iOS tự phóng to trang khi ô nhập có cỡ chữ dưới 16px -> đặt đúng 16px */
  .form-grid .f input, .form-grid .f select{font-size:16px;}
  .form-grid .f input[type="date"]{font-size:16px; min-height:46px;}
  /* Ngày sinh / ngày cấp cho chiếm trọn 1 hàng để đủ chỗ gõ */
  .form-grid .f:has(input[type="date"]){grid-column:span 2;}
  .stat-row{grid-template-columns:repeat(2,1fr);}
  main{padding:10px;}
  .modal-box{padding:16px; max-width:100%;}
  table.data{font-size:11.5px;}
  table.data th, table.data td{padding:6px 7px;}
  .receipt{padding:12px;}
  .login-card{padding:28px 18px 22px;}
}
@media (max-width:400px){
  .stat-row{grid-template-columns:1fr 1fr;}
  .stat .val{font-size:15px;}
  header.topbar{padding:10px 12px;}
  .brand{font-size:13.5px;}
  .month-picker select{padding:6px 8px; font-size:12.5px;}
  nav.tabs button{padding:10px 11px; font-size:12px;}
}

/* ===================== Bổ sung cho Sổ Nhà Trọ ===================== */
:root{
  /* tên biến cũ của Sổ Nhà Trọ trỏ về bảng màu 187, để mã cũ không bị vỡ màu */
  --bad:var(--danger); --bad-bg:var(--danger-bg); --good:var(--green-ok); --good-bg:var(--green-bg);
  --warn:#946200; --warn-bg:#FFF3CD; --accent:var(--brass); --select:var(--paper-2); --brand:var(--navy);
}
:root[data-theme="dark"]{ --warn:#E3B04B; --warn-bg:#3A2E12; }
.hidden{display:none!important}
.muted{color:var(--ink-soft)}
.small{font-size:12.5px}
.right{text-align:right}
.center{text-align:center}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stack>*+*{margin-top:12px}
h2{font-size:16px}
h3{font-size:14.5px;margin:0 0 6px}
.desc{color:var(--ink-soft);font-size:12.5px;margin:0 0 12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px}
@media (max-width:560px){.grid2,.grid3{grid-template-columns:1fr}}
.check{display:flex;align-items:center;gap:8px;margin:6px 0;cursor:pointer}
.check input{width:20px;height:20px}
.err{color:var(--danger);font-size:12.5px;min-height:18px;margin:6px 0}
.btn-sm.btn-dark,.btn-dark{background:var(--navy);border-color:var(--navy);color:#fff}
.pill.good{background:var(--green-bg);color:var(--green-ok)}
.pill.warn{background:#FFF3CD;color:#946200}
:root[data-theme="dark"] .pill.warn{background:#3A2E12;color:#E3B04B}
.pill.bad{background:var(--danger-bg);color:var(--danger)}
.pill.grey{background:var(--paper-2);color:var(--ink-soft);font-weight:600}
.tabs{}
nav.tabs button .badge{background:var(--brick);color:#fff;margin-left:4px}
.field>label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);min-height:42px}
.field .hint{font-size:11.5px;color:var(--ink-soft);margin-top:3px;text-align:left}
input.check-box,table.data td input.check-box{width:22px;height:22px;min-height:0;padding:0;flex:none}
table.data td input{width:100px;border:1px solid var(--line);border-radius:6px;padding:7px 8px;background:var(--card);color:var(--ink)}
table.data td input.narrow{width:84px}
table.data td input.tiny{width:58px}
table.data tr.done td{background:var(--green-bg)}
table.data tr.bad td{background:var(--danger-bg)}
table.data td.sticky,table.data th.sticky{position:sticky;left:0;z-index:2;font-weight:800}
table.data td.sticky{background:var(--card);color:var(--brick)}
table.data th.sticky{background:var(--navy);z-index:3}
.inv-lines{width:100%;border-collapse:collapse;font-size:13px}
.inv-lines td{padding:6px 4px;border-bottom:1px dotted var(--line);vertical-align:top}
.inv-lines td:last-child{text-align:right;white-space:nowrap}
.inv-lines tr.total td{font-weight:800;font-size:15px;color:var(--brick);border-top:2px solid var(--navy);border-bottom:0}
.inv-lines tr.grp td{background:var(--brass-light);color:var(--brass-dark);font-weight:700;font-size:12px}
.note{background:var(--brass-light);color:var(--brass-dark);border-radius:7px;padding:8px 10px;font-size:12.5px;font-weight:600}
.note.warn{background:var(--danger-bg);color:var(--danger)}
.qr-box{text-align:center}
.qr-box img{width:200px;height:200px;image-rendering:pixelated;background:#fff;padding:6px;border-radius:8px;border:1px solid var(--line)}
.viewer{position:fixed;inset:0;background:rgba(10,12,10,.94);z-index:300;display:flex;align-items:center;justify-content:center}
.viewer img{max-width:96vw;max-height:84vh}
.viewer .vclose{position:absolute;top:12px;right:14px;font-size:30px;color:#fff;background:none;border:0;cursor:pointer}
.txlist{display:flex;flex-direction:column}
.txrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 0;border-top:1px solid var(--line)}
.txrow:first-child{border-top:0}
.txrow .amt{font-weight:800;font-size:15px}
.txrow .when{font-size:12px;color:var(--ink-soft)}
.txrow .body{flex-basis:100%;word-break:break-word}
.txrow .acts{display:flex;gap:8px;flex-basis:100%}
.brand .seal-text{height:34px;min-width:34px;padding:0 9px;border-radius:9px;background:var(--card);border:1px solid var(--brass);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:var(--navy);flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.22)}
.topbar .who{font-size:12.5px;color:#c9c2ab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.topbar select{background:var(--navy-2);color:#fff;border:1px solid #3a4a6b;border-radius:7px;padding:7px 10px;max-width:48vw}
.login-seal-text{display:flex;width:96px;height:96px;margin:2px auto 16px;border-radius:22px;background:var(--navy);color:var(--brass-accent);align-items:center;justify-content:center;font-weight:800;font-size:34px;border:3px solid var(--brass);filter:drop-shadow(0 3px 6px rgba(22,35,59,.16))}
#printArea{display:none}
@media print{
  body>*:not(#printArea){display:none!important}
  #printArea{display:block!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* nút .btn không kèm biến thể = nút viền (giống btn-outline) */
.btn:not(.btn-primary):not(.btn-brass):not(.btn-danger):not(.btn-logout):not(.btn-dark):not(.btn-outline){background:transparent;border-color:var(--line);color:var(--ink)}
.btn:not(.btn-primary):not(.btn-brass):not(.btn-danger):not(.btn-logout):not(.btn-dark):not(.btn-outline):hover{background:var(--paper-2)}
.btn:disabled{opacity:.55;cursor:default}
.pill-red{background:var(--brick);color:#fff}
.err-msg{min-height:18px}