/* ==========================================================================
   IDS-ML UNIFIED TYPOGRAPHY DESIGN SYSTEM
   Standardized Font Scale, Font Families, Line Heights & Control Sizes
   File: static/css/typography.css
   ========================================================================== */

:root {
  /* ==========================================
     1. FONT FAMILIES
     Hỗ trợ tối ưu tiếng Việt có dấu & monospace
     ========================================== */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Đồng bộ hóa các biến CSS cục bộ từ các trang riêng lẻ về chuẩn chung */
  --font-primary: var(--font-family-base);
  --font-body: var(--font-family-base);
  --font-display: var(--font-family-heading);
  --font-mono: var(--font-family-mono);
  --d-font-main: var(--font-family-base);
  --d-font-mono: var(--font-family-mono);
  --u-font-main: var(--font-family-base);
  --u-font-mono: var(--font-family-mono);
  --ud-font: var(--font-family-base);
  --ud-mono: var(--font-family-mono);
  --r-font-main: var(--font-family-base);
  --r-font-mono: var(--font-family-mono);
  --r-font-display: var(--font-family-heading);
  --rc-font-main: var(--font-family-base);
  --rc-font-mono: var(--font-family-mono);
  --rc-font: var(--font-family-base);
  --rc-mono: var(--font-family-mono);
  --m-font-main: var(--font-family-base);
  --m-font-mono: var(--font-family-mono);
  --t-font-main: var(--font-family-base);
  --t-font-mono: var(--font-family-mono);
  --mt-mono: var(--font-family-mono);
  --ioc-font-sans: var(--font-family-base);
  --ioc-font-mono: var(--font-family-mono);
  --auto-font-sans: var(--font-family-base);
  --auto-font-mono: var(--font-family-mono);
  --rep-font-mono: var(--font-family-mono);
  --waf-font: var(--font-family-base);
  --waf-font-mono: var(--font-family-mono);
  --st-font: var(--font-family-base);
  --st-font-mono: var(--font-family-mono);

  /* ==========================================
     2. FONT SIZE SCALE (Đơn vị rem chuẩn hóa)
     ========================================== */
  --fs-h1: 2rem;         /* 32px: Tiêu đề trang chính (H1) */
  --fs-h2: 1.5rem;       /* 24px: Tiêu đề phân mục, modal title (H2) */
  --fs-h3: 1.25rem;      /* 20px: Card header, sub-section (H3) */
  --fs-h4: 1rem;         /* 16px: Tiêu đề nhỏ (H4) */
  --fs-h5: 1rem;         /* 16px: Tiêu đề nhỏ (H5) */
  --fs-h6: 1rem;         /* 16px: Tiêu đề nhỏ (H6) */

  --fs-body: 1rem;       /* 16px: Nội dung chính, đoạn văn */
  --fs-base: 1rem;       /* 16px: Mặc định chuẩn */
  --fs-control: 1rem;    /* 16px: Input, button, select (Tối thiểu 1rem) */

  --fs-caption: 0.875rem;/* 14px: Chữ phụ, caption, bảng dữ liệu, nhãn phụ */
  --fs-sm: 0.875rem;     /* 14px: Đồng bộ class .small */
  --fs-xs: 0.75rem;      /* 12px: Tag siêu nhỏ, badge trạng thái */

  --fs-kpi: 2rem;        /* 32px: Số liệu KPI chuẩn */
  --fs-lg: 1.25rem;      /* 20px */
  --fs-xl: 1.5rem;       /* 24px */

  /* ==========================================
     3. LINE HEIGHT SCALE
     ========================================== */
  --lh-tight: 1.25;
  --lh-heading: 1.35;
  --lh-base: 1.6;        /* Chuẩn line-height 1.6 cho body */
  --lh-body: 1.6;
  --lh-controls: 1.5;
  --lh-caption: 1.5;
}

/* ==========================================
   4. BASE ELEMENTS & BODY
   ========================================== */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family-base) !important;
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  color: var(--text-primary);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   5. HEADINGS (H1 - H6)
   ========================================== */
h1, .h1 {
  font-family: var(--font-family-heading) !important;
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-heading) !important;
  color: var(--text-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-family: var(--font-family-heading) !important;
  font-size: var(--fs-h2) !important;
  line-height: var(--lh-heading) !important;
  color: var(--text-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-family: var(--font-family-heading) !important;
  font-size: var(--fs-h3) !important;
  line-height: var(--lh-heading) !important;
  color: var(--text-heading);
  font-weight: 600;
}

h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: var(--font-family-heading) !important;
  font-size: 1rem !important;
  line-height: var(--lh-heading) !important;
  color: var(--text-heading);
  font-weight: 600;
}

/* Tiêu đề trang & tiêu đề thẻ Card */
.pagetitle h1 {
  font-family: var(--font-family-heading) !important;
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-heading) !important;
  color: var(--text-heading);
  font-weight: 700;
}

.card-title {
  font-family: var(--font-family-heading) !important;
  font-size: var(--fs-h3) !important;
  line-height: var(--lh-heading) !important;
  color: var(--text-heading);
  font-weight: 600;
}

/* ==========================================
   6. BẢNG DỮ LIỆU & CHỮ PHỤ (0.875rem = 14px)
   ========================================== */
table,
.table,
.dataTable-table,
.dataTables_wrapper,
.table td,
.table th,
th,
td {
  font-size: var(--fs-caption) !important;
  line-height: var(--lh-caption);
}

.dataTables_wrapper {
  font-size: var(--fs-caption) !important;
}

small,
.small,
caption,
figcaption,
.text-muted,
.form-text,
.breadcrumb,
.help-block,
.dataTables_info {
  font-size: var(--fs-caption) !important;
  line-height: var(--lh-caption);
}

/* ==========================================
   7. INPUT, BUTTON, SELECT (Tối thiểu 1rem = 16px)
   ========================================== */
.form-control,
.form-select,
.form-floating > .form-control,
.form-floating > .form-select,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
.select2-dropdown,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
  font-family: var(--font-family-base) !important;
  font-size: var(--fs-control) !important;
  line-height: var(--lh-controls) !important;
}

.btn,
.button,
button:not(.btn-sm):not(.btn-xs):not(.badge):not(.btn-close) {
  font-family: var(--font-family-base) !important;
  font-size: var(--fs-control) !important;
  line-height: var(--lh-controls);
}

/* Nút nhỏ chuyên dụng cho thao tác dòng (.btn-sm) theo thang 0.875rem */
.btn-sm,
.btn-group-sm > .btn {
  font-size: var(--fs-caption) !important;
  line-height: 1.4;
}

/* Đảm bảo độ tương phản chữ rõ nét khi hover các nút Outline */
.btn-outline-info:hover {
  color: #040711 !important;
  background-color: #0dcaf0 !important;
  border-color: #0dcaf0 !important;
}
.btn-outline-warning:hover {
  color: #040711 !important;
}

/* ==========================================
   8. CODE & MONOSPACE
   ========================================== */
code,
kbd,
samp,
pre,
.font-monospace,
.mono,
.badge-mono,
pre code {
  font-family: var(--font-family-mono) !important;
  font-size: 0.875rem !important;
}

/* ==========================================
   9. SIDEBAR, HEADER & MODAL
   ========================================== */
.sidebar,
.sidebar-nav,
.sidebar-nav .nav-link {
  font-family: var(--font-family-base) !important;
  font-size: var(--fs-base) !important;
}

.sidebar-nav .nav-content a {
  font-size: var(--fs-caption) !important;
}

.sidebar-nav .nav-heading {
  font-size: var(--fs-caption) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.modal-title {
  font-family: var(--font-family-heading) !important;
  font-size: var(--fs-h2) !important;
  line-height: var(--lh-heading) !important;
}

.modal-body {
  font-size: var(--fs-base) !important;
  line-height: var(--lh-base);
}

/* ==========================================
   10. CHUẨN HÓA CÁC CLASS TIỆN ÍCH TYPOGRAPHY
   ========================================== */
.fs-1 { font-size: var(--fs-h1) !important; }
.fs-2 { font-size: var(--fs-h2) !important; }
.fs-3 { font-size: var(--fs-h3) !important; }
.fs-4 { font-size: 1rem !important; }
.fs-5 { font-size: 1rem !important; }
.fs-6 { font-size: 1rem !important; }
.fs-caption { font-size: var(--fs-caption) !important; }
.fs-base { font-size: var(--fs-base) !important; }

/* KPI counter numbers: chuẩn hóa thống nhất 2rem */
.kpi-value,
.stat-value,
.stat-number,
.metric-value {
  font-size: var(--fs-kpi) !important;
  font-weight: 700;
  line-height: 1.2;
}

/* ==========================================
   11. THEME-AWARE TYPOGRAPHY COLORS & WCAG COMPLIANCE
   ========================================== */
.text-primary, .t-text { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted, .text-black-50 { color: var(--text-muted) !important; }

[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-black,
[data-bs-theme="dark"] .text-body {
  color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-black-50 {
  color: var(--text-muted) !important;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1,
[data-bs-theme="dark"] .h2,
[data-bs-theme="dark"] .h3,
[data-bs-theme="dark"] .h4,
[data-bs-theme="dark"] .h5,
[data-bs-theme="dark"] .h6 {
  color: var(--text-heading) !important;
}