/* ==========================================================================
   CRM 3T · custom-theme.css — lớp GHI ĐÈ (override layer) cho Bootstrap 5.3
   --------------------------------------------------------------------------
   Thứ tự nạp (partials/head.ejs, dùng chung layouts/main.ejs + layouts/auth.ejs):
     1. /public/vendor/bootstrap/css/bootstrap.min.css   Bootstrap 5.3.3 (tự host, không CDN)
     2. /public/vendor/bootstrap-icons/…                 Bootstrap Icons
     3. [Google Font tùy cấu hình]
     4. /public/css/app.css                              thành phần chung + màn hình nghiệp vụ
     5. /public/css/shell.css                            khung: navbar kính mờ, sidebar, biến bố cục
                                                         (--app-header-h, --app-sidebar-w…)
     6. /public/css/custom-theme.css   ← TỆP NÀY         token màu + biến Bootstrap + utility
     7. <style id="theme-vars">                          biến từ CSDL (cau_hinh.giao_dien): --app-primary,
                                                         --app-primary-rgb, --app-sidebar-bg(-rgb), --app-font…
                                                         PHẢI đứng sau mọi tệp CSS.
     (layouts/auth.ejs nạp thêm /public/css/auth.css sau cùng — trang đăng nhập có bộ --auth-* riêng.)

   Quy ước:
   - Token thương hiệu (--navy-*) trỏ về biến CSDL bằng var() có fallback → đổi màu ở
     "Hệ thống › Cấu hình › Giao diện" là đủ, không sửa CSS.
   - Chỉ token, biến Bootstrap và utility dùng lại được — KHÔNG selector theo trang/màn hình.
   - Màu nhấn đỏ/cam (--danger-accent #ef4444, --warning-accent #f59e0b) chỉ dùng cho viền, thanh,
     icon và nền badge nhạt. Chữ luôn ≥ 4.5:1: dùng cặp --*-soft-bg / --*-soft-text
     (chữ trắng trên #ef4444 chỉ 3.76:1; nền đặc có chữ trắng dùng --danger-solid #dc2626 = 4.83:1).
     Viền cam #f59e0b (2.15:1 trên nền trắng) luôn đi kèm nhãn chữ — không phải tín hiệu duy nhất.
   - Chế độ tối: [data-bs-theme='dark'] trên <html> (cấu hình che_do) — chỉ đổi token.
   - Không đổi font-family (font lấy từ cấu hình qua --app-font).
   ========================================================================== */

/* ---------- 1. Token ---------- */
:root {
  /* Thương hiệu – theo cấu hình giao diện, fallback = bảng màu 3T */
  --navy-dark: var(--app-sidebar-bg, #0f172a);
  --navy-dark-rgb: var(--app-sidebar-bg-rgb, 15, 23, 42);
  --navy-primary: var(--app-primary, #1e3a8a);
  --navy-primary-rgb: var(--app-primary-rgb, 30, 58, 138);
  --navy-accent: #60a5fa; /* chỉ báo active/focus trên nền navy (7:1) */

  /* Bề mặt & chữ */
  --bg-milky: #f8fafc;
  --card-bg: #ffffff;
  --border-color: #e2e8f0;
  --border-strong: #cbd5e1; /* viền ô nhập: rõ hơn đường chia */
  --text-ink: #0f172a;
  --text-muted: #64748b; /* 4.76:1 trên trắng, 4.55:1 trên --bg-milky */
  --table-head-color: #475569;

  /* Màu nhấn trạng thái (viền, thanh, icon) */
  --danger-accent: #ef4444;
  --danger-accent-rgb: 239, 68, 68;
  --danger-solid: #dc2626;
  --warning-accent: #f59e0b;
  --warning-accent-rgb: 245, 158, 11;

  /* Cặp nền nhạt + chữ đậm cho badge/nhãn (đều ≥ 6:1) */
  --danger-soft-bg: #fee2e2;
  --danger-soft-text: #991b1b;
  --warning-soft-bg: #fef3c7;
  --warning-soft-text: #92400e;
  --info-soft-bg: #dbeafe;
  --info-soft-text: #1e40af;
  --success-soft-bg: #dcfce7;
  --success-soft-text: #166534;
  --muted-soft-bg: #f1f5f9;
  --muted-soft-text: #475569;

  /* Hình khối */
  --radius-card: 1rem;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-card-hover: 0 10px 24px -8px rgba(15, 23, 42, 0.16), 0 2px 6px -2px rgba(15, 23, 42, 0.08);
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Bootstrap: utility *-primary (text/bg/border/link) theo màu chủ đạo */
  --bs-primary-rgb: var(--navy-primary-rgb);
  --bs-focus-ring-color: rgba(var(--navy-primary-rgb), 0.25);
}

/* Chế độ sáng: biến Bootstrap dùng token. KHÔNG đổi --bs-body-bg (ô nhập, dropdown, modal,
   tiêu đề bảng dính dùng nó) — nền trang đặt riêng ở body bên dưới. */
:root:not([data-bs-theme='dark']),
[data-bs-theme='light'] {
  --bs-body-color: var(--text-ink);
  --bs-body-color-rgb: 15, 23, 42;
  --bs-border-color: var(--border-color);
  --bs-link-color-rgb: var(--navy-primary-rgb);
  --bs-link-hover-color-rgb: var(--navy-dark-rgb);
  --bs-primary-text-emphasis: color-mix(in srgb, var(--navy-primary) 70%, #000);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--navy-primary) 10%, #fff);
  --bs-primary-border-subtle: color-mix(in srgb, var(--navy-primary) 30%, #fff);
}

[data-bs-theme='dark'] {
  --bg-milky: #181b1f;
  --card-bg: #212529; /* = --bs-body-bg tối: bảng/ô nhập trong thẻ liền màu */
  --border-color: #343a40;
  --border-strong: #495057;
  --text-ink: #e2e8f0;
  --text-muted: #94a3b8;
  --table-head-color: #adb5bd;

  --danger-soft-bg: #3b1d20;
  --danger-soft-text: #fca5a5;
  --warning-soft-bg: #3a2b0c;
  --warning-soft-text: #fcd34d;
  --info-soft-bg: #172b4d;
  --info-soft-text: #93c5fd;
  --success-soft-bg: #123020;
  --success-soft-text: #86efac;
  --muted-soft-bg: #2b3035;
  --muted-soft-text: #cbd5e1;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 10px 24px -8px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.4);

  /* app.css ép --bs-link-color = màu chủ đạo cho cả 2 chế độ: trả lại màu link tối của Bootstrap */
  --bs-link-color: #6ea8fe;
  --bs-link-hover-color: #8bb9fe;
}

/* ---------- 2. Nền trang ---------- */
/* Độ ưu tiên thấp (0,0,1): body.auth-body (auth.css) giữ nền riêng của trang đăng nhập. */
body {
  background-color: var(--bg-milky);
}

/* ---------- 3. Thành phần Bootstrap ---------- */
.card {
  --bs-card-bg: var(--card-bg);
  --bs-card-border-color: var(--border-color);
}

/* .card.rounded-4: góc trong (card-header/ảnh) khớp góc ngoài */
.card.rounded-4 {
  --bs-card-border-radius: var(--radius-card);
  --bs-card-inner-border-radius: calc(var(--radius-card) - var(--bs-border-width));
}

/* Ô nhập sáng: viền rõ hơn đường chia; :where() giữ độ ưu tiên thấp để :focus/.is-invalid thắng */
:where(:root:not([data-bs-theme='dark'])) :is(.form-control, .form-select, .input-group-text) {
  border-color: var(--border-strong);
}

.form-check-input:checked,
.form-check-input[type='checkbox']:indeterminate {
  background-color: var(--navy-primary);
  border-color: var(--navy-primary);
}

.form-check-input:focus {
  border-color: rgba(var(--navy-primary-rgb), 0.5);
  box-shadow: 0 0 0 0.25rem rgba(var(--navy-primary-rgb), 0.25);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--navy-primary);
  --bs-dropdown-link-active-color: var(--app-on-primary, #fff);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--navy-primary);
  --bs-nav-pills-link-active-color: var(--app-on-primary, #fff);
}

.list-group {
  --bs-list-group-active-bg: var(--navy-primary);
  --bs-list-group-active-border-color: var(--navy-primary);
  --bs-list-group-active-color: var(--app-on-primary, #fff);
}

.pagination {
  --bs-pagination-active-bg: var(--navy-primary);
  --bs-pagination-active-border-color: var(--navy-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--navy-primary-rgb), 0.25);
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--navy-primary);
}

[data-bs-theme='dark'] .progress,
[data-bs-theme='dark'] .progress-stacked {
  --bs-progress-bar-bg: var(--navy-accent);
}

/* Bảng dày đặc: hàng thoáng hơn, tiêu đề cột đậm, tương phản cao.
   :where() = độ ưu tiên 0 → <thead class="table-dark|table-light"> vẫn dùng màu của Bootstrap. */
:where(.table > thead) {
  --bs-table-color: var(--table-head-color);
}

.table > thead > tr > th {
  font-weight: 600;
}

.table:not(.table-sm) > :not(caption) > * > * {
  padding-block: 0.625rem;
}

/* ---------- 4. Utility màu Bootstrap ---------- */
/* Viền nhấn (vd .border-start.border-4.border-danger) dùng màu nhấn — chỉ viền, chữ giữ nguyên */
.border-danger {
  border-color: rgba(var(--danger-accent-rgb), var(--bs-border-opacity, 1)) !important;
}

.border-warning {
  border-color: rgba(var(--warning-accent-rgb), var(--bs-border-opacity, 1)) !important;
}

/* .link-primary của Bootstrap đổi sang xanh #0a58ca khi hover: giữ tông navy */
.link-primary:hover,
.link-primary:focus {
  color: rgba(var(--navy-dark-rgb), var(--bs-link-opacity, 1)) !important;
  text-decoration-color: rgba(var(--navy-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

/* Nền tối: chữ/viền navy không đọc được → dùng xanh sáng (#60a5fa: 6:1 trên #212529) */
[data-bs-theme='dark'] .text-primary,
[data-bs-theme='dark'] .link-primary,
[data-bs-theme='dark'] .link-primary:hover,
[data-bs-theme='dark'] .link-primary:focus {
  color: var(--navy-accent) !important;
  text-decoration-color: var(--navy-accent) !important;
}

[data-bs-theme='dark'] .border-primary {
  border-color: var(--navy-accent) !important;
}

/* Nút viền chủ đạo trên nền tối: chữ/viền xanh sáng; hover vẫn nền navy chữ trắng */
[data-bs-theme='dark'] .btn-outline-primary {
  --bs-btn-color: var(--navy-accent);
  --bs-btn-border-color: var(--navy-accent);
}

/* ---------- 5. Utility riêng (dùng chung mọi màn hình) ---------- */
.text-navy {
  color: var(--navy-primary) !important;
}

[data-bs-theme='dark'] .text-navy {
  color: var(--navy-accent) !important;
}

.bg-navy {
  background-color: var(--navy-dark) !important;
  color: #f1f5f9;
}

.bg-milky {
  background-color: var(--bg-milky) !important;
}

.min-w-0 {
  min-width: 0 !important;
}

/* Thẻ nổi nhẹ khi rê chuột/focus: .card.border-0.shadow-sm.rounded-4.card-lift */
.card-lift {
  box-shadow: var(--shadow-card);
  transition:
    transform 0.2s var(--ease-out),
    box-shadow 0.2s var(--ease-out);
}

.card-lift:hover,
.card-lift:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover) !important; /* thắng .shadow-sm (!important) */
}

/* Badge nhạt: nền --*-soft-bg + chữ --*-soft-text (AA), viền mảnh cùng tông cho rõ trên nền trắng */
.badge-soft-danger,
.badge-soft-warning,
.badge-soft-info,
.badge-soft-success,
.badge-soft-muted {
  color: var(--soft-text);
  background-color: var(--soft-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soft-text) 18%, transparent);
  font-weight: 600;
}

.badge-soft-danger {
  --soft-bg: var(--danger-soft-bg);
  --soft-text: var(--danger-soft-text);
}

.badge-soft-warning {
  --soft-bg: var(--warning-soft-bg);
  --soft-text: var(--warning-soft-text);
}

.badge-soft-info {
  --soft-bg: var(--info-soft-bg);
  --soft-text: var(--info-soft-text);
}

.badge-soft-success {
  --soft-bg: var(--success-soft-bg);
  --soft-text: var(--success-soft-text);
}

.badge-soft-muted {
  --soft-bg: var(--muted-soft-bg);
  --soft-text: var(--muted-soft-text);
}

/* ---------- 6. Giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  .card-lift {
    transition: none;
  }

  .card-lift:hover,
  .card-lift:focus-visible {
    transform: none;
  }
}

/* Dấu phê duyệt dùng chung trên màn hình và bản in. */
.approval-stamp { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; border: 3px double var(--stamp-color, #b91c1c); border-radius: 7px; padding: 10px 18px; color: var(--stamp-color, #b91c1c); background: transparent; text-align: center; transform: rotate(-5deg); width: max-content; max-width: 100%; break-inside: avoid; }
.approval-stamp strong { font-size: 18px; letter-spacing: 1.5px; line-height: 1.3; }
.approval-stamp span { font-size: 12px; font-weight: 600; display: block; }
.approval-stamp .approval-signature { display: block; width: 130px; height: 65px; max-width: 100%; object-fit: contain; }
.drawing-stamp-sample { color: var(--drawing-stamp-color); border: 2px solid currentColor; text-align: center; font-family: Georgia, 'Times New Roman', serif; background: #fff; }
.drawing-stamp-company { border-bottom: 1px solid currentColor; font-size: 14px; padding: 8px; font-weight: bold; text-transform: uppercase; }
.drawing-stamp-company small { display: block; font-weight: normal; font-size: 10px; }
.drawing-stamp-sample > strong { display: block; font-size: 21px; padding: 12px 5px 5px; }
.drawing-stamp-columns { display: flex; margin-top: 8px; border-top: 1px solid currentColor; }
.drawing-stamp-columns > div { flex: 1; min-width: 0; min-height: 110px; padding: 6px 3px; font-size: 12px; }
.drawing-stamp-columns > div + div { border-left: 1px solid currentColor; }
.vt-print-signatures .approval-stamp { margin: 22px auto 0; padding: 8px 10px; }
.vt-print-signatures .approval-stamp strong { font-size: 16px; }
@media print { .approval-stamp { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }

.tc-print-approval { display:flex; justify-content:flex-end; padding: 2mm 5mm 4mm; }
.tc-print-approval .approval-stamp { padding: 5px 12px; gap: 2px; }
.tc-print-approval .approval-stamp strong { font-size: 15px; }
.tc-print-approval .approval-stamp span { font-size: 10px; }
.tc-print-approval-missing { font-size: 8pt; color: #64748b; margin: 2mm 0; }