/* ─── Typography System — Vitadoc ERP ─────────────────────────────────────── */

:root {
  /* Font family */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Scale */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;

  /* Weight */
  --font-regular:  400;
  --font-medium:   500;   /* labels, table headers, form labels */
  --font-semibold: 600;   /* headings, page titles, section titles */

  /* Line height */
  --leading-tight:  1.25;
  --leading-normal: 1.5;  /* body default */

  /* Text colors */
  --text-primary:   #111827;
  --text-secondary: #6b7280;
  --text-muted:     #9ca3af;
  --text-disabled:  #d1d5db;
  --text-inverse:   #ffffff;
}

/* ─── Base reset ────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  font-family: var(--font-sans);
}

body {
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Semantic roles ────────────────────────────────────────────────────────── */

/* Page title — dùng đầu mỗi trang module */
.typo-page-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

/* Section title — dùng phân nhóm trong trang */
.typo-section-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

/* Card / Panel title */
.typo-card-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

/* Form label / table column header */
.typo-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}

/* Body / cell content */
.typo-body {
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}

/* Secondary info — sub-text, hints */
.typo-secondary {
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* Caption / metadata — timestamps, IDs */
.typo-caption {
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* ─── Ant Design overrides ──────────────────────────────────────────────────── */

/* Table column headers */
.ant-table-thead > tr > th {
  font-size: var(--text-xs) !important;
  font-weight: var(--font-semibold) !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Table body cells */
.ant-table-tbody > tr > td {
  font-size: var(--text-sm) !important;
  font-weight: var(--font-regular) !important;
  line-height: var(--leading-normal) !important;
  color: var(--text-primary) !important;
}

/* Form labels */
.ant-form-item-label > label {
  font-size: var(--text-sm) !important;
  font-weight: var(--font-medium) !important;
  color: var(--text-primary) !important;
}

/* Modal title */
.ant-modal-title {
  font-size: var(--text-base) !important;
  font-weight: var(--font-semibold) !important;
}

/* Drawer title */
.ant-drawer-title {
  font-size: var(--text-base) !important;
  font-weight: var(--font-semibold) !important;
}

/* Card title */
.ant-card-head-title {
  font-size: var(--text-base) !important;
  font-weight: var(--font-semibold) !important;
}

/* Descriptions label */
.ant-descriptions-item-label {
  font-size: var(--text-sm) !important;
  font-weight: var(--font-medium) !important;
  color: var(--text-secondary) !important;
}

/* Menu items */
.ant-menu-item,
.ant-menu-submenu-title {
  font-size: var(--text-sm) !important;
}

/* Tabs */
.ant-tabs-tab {
  font-size: var(--text-sm) !important;
  font-weight: var(--font-medium) !important;
}

/* Buttons */
.ant-btn {
  font-size: var(--text-sm) !important;
  font-weight: var(--font-medium) !important;
}

/* Input, Select placeholder */
.ant-input::placeholder,
.ant-select-selection-placeholder {
  color: var(--text-muted) !important;
  font-size: var(--text-sm);
}

/* ─── Responsive table ──────────────────────────────────────────────────────── */

.ant-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tablet (≤1024px): compact padding */
@media (max-width: 1024px) {
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    padding: 10px 12px !important;
  }
}

/* Mobile (≤768px): tighter padding, smaller font */
@media (max-width: 768px) {
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    padding: 8px 10px !important;
    font-size: var(--text-xs) !important;
    white-space: nowrap;
  }

  /* Toolbar: stack filters vertically */
  .page-toolbar {
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px;
  }

  .page-toolbar .ant-space {
    flex-wrap: wrap;
  }
}

/* Small mobile (≤480px) */
@media (max-width: 480px) {
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    padding: 6px 8px !important;
  }

  .ant-pagination {
    font-size: var(--text-xs) !important;
  }

  .ant-pagination .ant-pagination-options {
    display: none;
  }
}
/* ─── Reconciliation Print Styles ─────────────────────────────────────────── */

/* Hide print area on screen */
#reconciliation-print-area {
  display: none;
}

@media print {
  /* Hide the entire app */
  body > *:not(#reconciliation-print-area) {
    display: none !important;
  }

  /* Show print area */
  #reconciliation-print-area {
    display: block !important;
    font-family: 'Times New Roman', Times, serif;
    font-size: 11pt;
    color: #000;
    background: #fff;
    padding: 15mm 20mm 15mm 20mm;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Quốc hiệu */
  .rp-national-header {
    text-align: center;
    margin-bottom: 6px;
    font-size: 11pt;
    line-height: 1.6;
  }

  /* Tiêu đề */
  .rp-title-block {
    text-align: center;
    margin: 8px 0 14px;
  }

  .rp-main-title {
    font-size: 14pt;
    font-weight: bold;
    text-transform: uppercase;
  }

  .rp-sub-title {
    font-size: 13pt;
    font-weight: bold;
    text-transform: uppercase;
  }

  /* Mở đầu */
  .rp-opening {
    margin: 8px 0 6px;
    font-size: 11pt;
  }

  /* Bảng thông tin các bên */
  .rp-info-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 10.5pt;
    margin-bottom: 8px;
  }

  .rp-info-table td {
    padding: 3px 6px;
    border: 1px solid #666;
    vertical-align: top;
    word-wrap: break-word;
  }

  .rp-info-right {
    text-align: right;
    white-space: nowrap;
  }

  /* Văn bản dẫn nhập */
  .rp-intro {
    margin: 2px 0;
    font-size: 10.5pt;
  }

  /* Bảng chi tiết giao dịch */
  .rp-detail-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 9pt;
    margin-bottom: 0;
    page-break-inside: auto;
  }

  .rp-detail-table th {
    background: #222;
    color: #fff;
    padding: 4px 6px;
    border: 1px solid #222;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rp-detail-table td {
    padding: 3px 6px;
    border: 1px solid #aaa;
    vertical-align: top;
    word-wrap: break-word;
    overflow: hidden;
  }

  .rp-detail-table tbody tr:nth-child(even) td {
    background: #f5f5f5;
  }

  .rp-detail-table tbody tr {
    page-break-inside: avoid;
  }

  .rp-detail-total td {
    border-top: 1.5px solid #000;
    font-weight: bold;
    background: #f0f0f0;
  }

  .rp-detail-table code {
    font-family: 'Courier New', monospace;
    font-size: 8.5pt;
  }

  /* Bảng tổng kết tài chính */
  .rp-tax-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10.5pt;
    margin-top: 0;
    margin-bottom: 8px;
  }

  .rp-tax-table td {
    padding: 3px 8px;
    border: 1px solid #666;
  }

  .rp-tax-num {
    text-align: right;
    width: 180px;
    white-space: nowrap;
  }

  .rp-tax-total td {
    font-weight: bold;
  }

  /* Ghi chú */
  .rp-note {
    font-size: 10pt;
    margin: 6px 0;
    padding: 4px 8px;
    border: 1px dashed #aaa;
    background: #fffbf0;
  }

  /* Kết luận */
  .rp-conclusion {
    font-size: 10pt;
    margin: 4px 0;
  }

  /* Chữ ký */
  .rp-signatures {
    display: flex;
    justify-content: space-around;
    margin-top: 24px;
  }

  .rp-signature-block {
    text-align: center;
    width: 220px;
  }

  .rp-signature-title {
    font-weight: bold;
    font-size: 11pt;
  }

  .rp-signature-sub {
    font-size: 9pt;
    color: #333;
    font-style: italic;
    margin: 4px 0 52px;
  }

  .rp-signature-line {
    border-top: 1px solid #333;
    margin: 0 20px;
  }

  /* Page settings */
  @page {
    size: A4;
    margin: 0;
  }
}