* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, sans-serif; background: #F8FAFC; color: #0F172A; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 13.5px; padding: 8px 11px; border: 1px solid #CBD5E1; border-radius: 8px; width: 100%; box-sizing: border-box; }
label { font-size: 12px; font-weight: 600; color: #475569; display: block; margin: 12px 0 4px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: 8px; padding: 9px 14px; font-size: 12.5px; font-weight: 600; }
.btn-primary { background: #1E3A8A; color: #fff; }
.btn-secondary { background: #F1F5F9; color: #334155; border: 1px solid #E2E8F0; }
.btn-danger { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.btn-success { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }
.btn-ghost { background: rgba(255,255,255,0.12); color: #fff; }
.btn-block { width: 100%; padding: 10px 0; margin-top: 18px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.profile-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.profile-card { background: #fff; border-radius: 16px; padding: 32px; width: 380px; max-width: 100%; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border: 1px solid #E2E8F0; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.brand-icon { color: #1E3A8A; }
.brand-sub { color: #64748B; font-size: 13px; margin: 6px 0 18px; }
.brand-sub-inline { font-weight: 400; font-size: 11px; opacity: 0.75; margin-left: 8px; }

.topbar { background: #1E3A8A; color: #fff; padding: 14px 20px; }
.topbar-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.topbar-actions { display: flex; gap: 10px; }

/* ---- Điều hướng: nhóm ứng dụng (sidebar dọc) + tab con (thanh ngang trong từng nhóm) ---- */
.app-shell { max-width: 1400px; margin: 0 auto; display: flex; align-items: flex-start; }

.sidebar { width: 232px; flex-shrink: 0; background: #fff; border-right: 1px solid #E2E8F0; min-height: calc(100vh - 61px); position: sticky; top: 0; }
.sidebar-inner { display: flex; flex-direction: column; gap: 3px; padding: 16px 10px; }
.sidebar-group-btn { display: flex; align-items: center; gap: 11px; text-align: left; border: none; background: none; border-radius: 9px; padding: 11px 12px; font-size: 13px; font-weight: 600; color: #475569; width: 100%; }
.sidebar-group-btn:hover { background: #F1F5F9; }
.sidebar-group-btn.active { background: #EFF6FF; color: #1E3A8A; }
.sidebar-group-btn .sg-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar-group-btn .sg-label { line-height: 1.25; }

.content-wrap { flex: 1; min-width: 0; }

.subtabbar { background: #fff; border-bottom: 1px solid #E2E8F0; }
.subtabbar-inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 4px; padding: 0 20px; overflow-x: auto; }
.tab-btn { background: none; border: none; padding: 13px 14px; font-size: 13.5px; color: #64748B; font-weight: 500; border-bottom: 2.5px solid transparent; white-space: nowrap; }
.tab-btn.active { color: #1E3A8A; font-weight: 700; border-bottom-color: #1E3A8A; }

.container { max-width: 1200px; margin: 0 auto; padding: 20px 20px 60px; }

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; min-height: auto; border-right: none; border-bottom: 1px solid #E2E8F0; position: static; }
  .sidebar-inner { flex-direction: row; overflow-x: auto; padding: 8px 10px; }
  .sidebar-group-btn { white-space: nowrap; width: auto; }
}

.card { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; }
.card-pad { padding: 16px; }

.grid-2col { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; }
@media (max-width: 800px) { .grid-2col { grid-template-columns: 1fr; } }

.project-list-item { text-align: left; border: none; cursor: pointer; border-radius: 8px; padding: 9px 10px; background: transparent; border-left: 3px solid transparent; width: 100%; }
.project-list-item.active { background: #EFF6FF; border-left-color: #1E3A8A; }
.project-list-item .pname { font-size: 13px; font-weight: 600; }
.project-list-item .pmeta { font-size: 11px; color: #94A3B8; margin-top: 2px; }

table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
thead tr { background: #F8FAFC; color: #64748B; text-align: left; }
th { padding: 9px 10px; font-weight: 600; white-space: nowrap; }
td { padding: 8px 10px; border-top: 1px solid #F1F5F9; }

/* Giai đoạn 10.2: các bảng trong cây "Bộ hồ sơ" (1 <table> riêng cho mỗi nhánh Công văn/Hợp
   đồng/Báo giá/Hóa đơn/...) trước đây để trình duyệt tự tính bề rộng cột theo nội dung — vì
   mỗi bảng có nội dung "Số hiệu" dài/ngắn khác nhau, các cột Trạng thái/Ngày/Hạn/... của các
   bảng xếp chồng lên nhau bị lệch không thẳng hàng. Nay ép `table-layout: fixed` + cùng 1 bộ
   tỉ lệ % cột cố định qua <colgroup> (renderBoHoSoColgroupHtml() trong app.js) cho mọi bảng
   trong cây — luôn thẳng hàng bất kể nội dung dài ngắn. */
.boho-table { table-layout: fixed; }
.boho-table td { overflow-wrap: break-word; word-break: break-word; }

.badge { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; display: inline-block; }
.badge-amber { background: #FEF3C7; color: #B45309; }
.badge-blue { background: #DBEAFE; color: #1D4ED8; }
.badge-green { background: #DCFCE7; color: #15803D; }
.badge-red { background: #FEE2E2; color: #B91C1C; }
.badge-purple { background: #F3E8FF; color: #6B21A8; }
/* Giai đoạn 3.9: badge bấm được (VD đổi trạng thái nghiệm thu ngay trong bảng) — reset lại
   viền/nền mặc định của <button> để trông giống hệt badge tĩnh, chỉ thêm viền mờ khi hover
   để gợi ý bấm được. */
.badge-btn { border: none; font: inherit; }
.badge-btn:hover { box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.12) inset; }
/* Giai đoạn 3.11: <select> đổi trạng thái nghiệm thu (3 trạng thái, không còn bấm-để-đổi
   nhị-phân được nữa) — trông giống badge, màu nền/chữ set inline theo trạng thái đang chọn. */
.badge-select { font-size: 11.5px; font-weight: 700; padding: 3px 20px 3px 9px; border-radius: 999px; width: auto; border: 1px solid transparent; cursor: pointer; }

/* Giai đoạn 3.11: sort chung theo cột cho mọi bảng — tiêu đề cột bấm được đổi con trỏ +
   không cho chọn chữ khi bấm nhiều lần, mũi tên chỉ chiều sort hiện tại. */
.sort-ind { font-size: 10px; opacity: 0.6; margin-left: 2px; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: #1E3A8A; }

.progress-bar { width: 100%; height: 7px; background: #E2E8F0; border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; }

.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.modal-box { background: #fff; border-radius: 14px; width: 460px; max-width: 100%; max-height: 88vh; overflow-y: auto; padding: 22px; }
.modal-box.wide { width: 560px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-title { font-weight: 700; font-size: 15.5px; }
.modal-close { border: none; background: none; cursor: pointer; color: #94A3B8; font-size: 18px; }

.toast { position: fixed; top: 16px; right: 16px; padding: 10px 16px; border-radius: 8px; font-size: 13px; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 2100; max-width: 340px; }
.toast-info { background: #1E3A8A; }
.toast-success { background: #15803D; }
.toast-warn { background: #B45309; }
.toast-error { background: #B91C1C; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 10px; }
.stat-icon { border-radius: 10px; padding: 9px; background: #EFF6FF; font-size: 16px; }
.stat-icon.warn { background: #FEF2F2; }
.stat-label { font-size: 11.5px; color: #64748B; }
.stat-value { font-size: 17px; font-weight: 700; }
.stat-value.warn { color: #DC2626; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.toolbar .spacer { flex: 1; }

/* Gộp các nút nhập liệu (Thêm trực tiếp / Thêm theo lô Excel / Tải mẫu) của từng bảng
   (Định mức, Đề xuất vật tư, Nhân công, Ghi công, Chi phí khác) vào 1 nút xổ menu — đỡ rối
   toolbar khi nhiều nút cùng lúc. Xem toolbarMenu()/toggleDropdown() trong app.js. */
.dropdown { position: relative; display: inline-block; }
.dropdown-caret { font-size: 9px; opacity: 0.75; margin-left: 1px; }
.dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; background: #fff; border: 1px solid #E2E8F0; border-radius: 10px; box-shadow: 0 10px 28px rgba(15,23,42,0.16); padding: 6px; min-width: 230px; }
.dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: none; padding: 9px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: #334155; text-decoration: none; box-sizing: border-box; }
.dropdown-item:hover { background: #F1F5F9; }

.empty-state { padding: 40px; text-align: center; color: #94A3B8; font-size: 13.5px; }

/* Ô chọn ngày dùng chung (chữ dd-mm-yyyy + lịch bấm chọn) — xem dateFieldHtml()/
   openDatePicker() trong app.js. .date-picker-pop dùng position:fixed và được append thẳng
   vào <body> (không nằm trong .modal-box) để không bị .modal-box{overflow-y:auto} cắt mất
   khi ô ngày nằm gần cuối modal. */
.date-field { position: relative; display: flex; align-items: stretch; gap: 6px; }
.date-field-input { flex: 1; cursor: pointer; }
.date-field-btn { flex: 0 0 auto; width: 38px; padding: 0; border: 1px solid #CBD5E1; border-radius: 8px; background: #F8FAFC; cursor: pointer; font-size: 15px; line-height: 1; }
.date-field-btn:hover { background: #F1F5F9; }
.date-picker-pop { position: fixed; z-index: 2000; width: 232px; background: #fff; border: 1px solid #E2E8F0; border-radius: 10px; box-shadow: 0 10px 28px rgba(15,23,42,0.18); padding: 10px; }
.dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-title { font-size: 12.5px; font-weight: 700; color: #1E293B; }
.dp-nav { width: 26px; height: 26px; border: none; background: none; border-radius: 6px; font-size: 15px; color: #475569; cursor: pointer; }
.dp-nav:hover { background: #F1F5F9; }
.dp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 10.5px; color: #94A3B8; font-weight: 600; margin-bottom: 2px; }
.dp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-day { border: none; background: none; border-radius: 6px; padding: 5px 0; font-size: 12px; color: #334155; cursor: pointer; }
.dp-day:hover { background: #F1F5F9; }
.dp-day.today { font-weight: 700; color: #1E3A8A; }
.dp-day.selected { background: #1E3A8A; color: #fff; font-weight: 700; }
.dp-footer { margin-top: 6px; text-align: center; border-top: 1px solid #F1F5F9; padding-top: 6px; }
.dp-today-btn { border: none; background: none; color: #1E3A8A; font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 4px 8px; }
.dp-today-btn:hover { text-decoration: underline; }

.pill-toggle { display: flex; gap: 8px; margin-bottom: 4px; }
.pill-toggle button { flex: 1; padding: 8px 0; }

/* Giai đoạn 6.2 (bổ sung): biểu đồ dự phóng Dòng tiền (cashForecastCard() trong app.js) —
   anh Phương yêu cầu biểu đồ hiện chi tiết giá trị/thời gian, mặc định (không cần di chuột)
   THAY VÌ chỉ có tooltip title mặc định của trình duyệt (ẩn, chậm hiện, không có trên di
   động). Mỗi cột nay có nhãn giá trị rút gọn LUÔN HIỂN THỊ phía trên + nhãn ngày bắt đầu kỳ
   rút gọn phía dưới, cộng thêm tooltip tự vẽ (không phải title) hiện đầy đủ khoảng ngày + số
   tiền chưa rút gọn khi di chuột — tự vẽ bằng CSS :hover, không cần thư viện/JS thêm. */
.cash-bar-wrap { position: relative; flex: 1; min-width: 16px; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.cash-bar-value { font-size: 8.5px; font-weight: 600; color: #475569; white-space: nowrap; margin-bottom: 2px; line-height: 1; }
.cash-bar-value.negative { color: #DC2626; }
.cash-bar { width: 100%; border-radius: 2px 2px 0 0; }
.cash-bar-date { font-size: 8px; color: #94A3B8; white-space: nowrap; margin-top: 4px; line-height: 1; transform: rotate(-40deg); transform-origin: top center; }
.cash-bar-tooltip { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: #1E293B; color: #fff; font-size: 11px; line-height: 1.5; white-space: nowrap; padding: 6px 9px; border-radius: 7px; box-shadow: 0 6px 16px rgba(15,23,42,0.25); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.1s; z-index: 40; }
.cash-bar-wrap:hover .cash-bar-tooltip { opacity: 1; visibility: visible; }

.warn-box { display: flex; gap: 6px; align-items: flex-start; padding: 10px; border-radius: 8px; font-size: 12px; margin-top: 8px; }
.warn-box.amber { background: #FEF3C7; color: #92400E; }
.warn-box.purple { background: #FAF5FF; color: #6B21A8; }
.warn-box.red { background: #FEF2F2; color: #B91C1C; }

.note-italic { font-size: 12px; color: #475569; font-style: italic; margin-top: 5px; }
.muted { color: #94A3B8; }
.small { font-size: 11.5px; }
.mono { font-family: monospace; }

details summary { font-size: 11.5px; color: #94A3B8; cursor: pointer; }

/* Giai đoạn 3.10: trước đây nút "In/Xuất PDF" ở Bảng giá gọi thẳng window.print() nên in
   nguyên màn hình app (sidebar, thanh trên cùng...) — nay #print-quote-root (ngoài #app,
   xem index.html) được đổ đúng nội dung báo giá ngay trước khi in (xem printCostingQuote()
   trong app.js), ẩn mặc định và chỉ hiện + là thứ DUY NHẤT hiện khi in. */
#print-quote-root { display: none; }
@media print {
  #app, #modal-root, #picker-root, #toast-root { display: none !important; }
  #print-quote-root { display: block !important; }
  /* Anh Phương yêu cầu bỏ phần header/footer TRÌNH DUYỆT tự thêm khi in (tiêu đề trang
     "SignaOps — SRT | ADVTECH" lấy từ <title> + URL ở đầu trang, ngày in + số trang ở cuối
     trang) — đây KHÔNG phải nội dung của #print-quote-root (khối đó chỉ chứa đúng bảng báo
     giá, đã ẩn hết phần còn lại của app từ Giai đoạn 3.10 ở trên), mà là phần Chrome/Edge tự
     vẽ thêm ngoài nội dung trang khi in, không tắt được bằng cách ẩn phần tử HTML nào cả.
     Cách duy nhất chặn được (không cần người dùng tự bỏ tick "Tiêu đề và chân trang" trong
     hộp thoại in mỗi lần) là đặt margin trang in = 0 — khi đó trình duyệt hết chỗ để vẽ
     header/footer nên tự bỏ qua. Khối in đã tự có padding riêng (xem printCostingQuote()
     trong app.js) nên không bị nội dung dính sát mép giấy dù bỏ margin trang. */
  @page { size: auto; margin: 0; }
}