/* =========================================================
   JOneS Global Typography System v4 - 2026-09-05

   This file is intentionally a BASE layer, not a page override layer.
   Load order:
     Bootstrap -> app.css -> typography.css -> page css -> shell-ux.css

   Rules here define a readable hierarchy without forcing every table,
   paragraph, label or modal to the same size. Page CSS is allowed to
   make dense reports smaller or important content larger.
   ========================================================= */

:root {
  --j-font-sans: "Prompt", "Sarabun", system-ui, -apple-system, "Segoe UI", sans-serif;

  --j-text-2xs: 11px;
  --j-text-xs: 12px;
  --j-text-sm: 13px;
  --j-text-base: 14px;
  --j-text-md: 15px;
  --j-text-lg: 16px;
  --j-text-xl: 18px;
  --j-text-2xl: 21px;
  --j-text-stat: 24px;

  --j-weight-regular: 400;
  --j-weight-medium: 500;
  --j-weight-semibold: 600;
  --j-weight-bold: 700;

  --j-leading-tight: 1.3;
  --j-leading-normal: 1.5;
  --j-leading-relaxed: 1.6;

  --j-ink: #173852;
  --j-ink-strong: #102f49;
  --j-muted: #60758a;
  --j-muted-soft: #7b8da0;

  /* Shared component aliases. Individual modules may override them. */
  --asset-font-caption: var(--j-text-xs);
  --asset-font-small: var(--j-text-sm);
  --asset-font-body: var(--j-text-base);
  --asset-font-section: var(--j-text-lg);
  --asset-font-title: var(--j-text-xl);
  --asset-font-number: var(--j-text-stat);
}

html { font-size: 16px; }

body {
  font-family: var(--j-font-sans);
  font-size: var(--j-text-base);
  font-weight: var(--j-weight-regular);
  line-height: var(--j-leading-normal);
  color: var(--j-ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

strong,
b,
.fw-bold,
.fw-bolder { font-weight: var(--j-weight-bold); }
.fw-semibold { font-weight: var(--j-weight-semibold); }
.fw-medium { font-weight: var(--j-weight-medium); }
.fw-normal { font-weight: var(--j-weight-regular); }

/* =========================================================
   Headings
   These are defaults only. Scoped page selectors loaded after this file
   may deliberately use another size for reports, cards or dashboards.
   ========================================================= */
h1, .h1 {
  color: var(--j-ink-strong);
  font-size: var(--j-text-2xl);
  font-weight: var(--j-weight-bold);
  line-height: var(--j-leading-tight);
}

h2, .h2 {
  color: var(--j-ink-strong);
  font-size: var(--j-text-xl);
  font-weight: var(--j-weight-bold);
  line-height: 1.35;
}

h3, .h3 {
  color: var(--j-ink-strong);
  font-size: var(--j-text-lg);
  font-weight: var(--j-weight-semibold);
  line-height: 1.4;
}

h4, .h4,
h5, .h5 {
  color: var(--j-ink);
  font-size: var(--j-text-md);
  font-weight: var(--j-weight-semibold);
  line-height: 1.4;
}

h6, .h6 {
  color: var(--j-ink);
  font-size: var(--j-text-base);
  font-weight: var(--j-weight-semibold);
  line-height: 1.4;
}

/* =========================================================
   Shared page hierarchy
   Only named application components are normalized here. Generic
   p/li/td/th/label elements are intentionally NOT forced.
   ========================================================= */
body :where(
  .asset-page-title,
  .as-ph-title,
  .page-title,
  .drug-topline h1,
  .users-page-title,
  .settings-page-title,
  .dashboard-title,
  .dash-title
) {
  color: var(--j-ink-strong);
  font-size: var(--j-text-xl);
  font-weight: var(--j-weight-bold);
  line-height: 1.35;
}

body :where(
  .modal-title,
  .asset-form-section-title,
  .panel-title,
  .section-title,
  .card-title,
  .mf-title,
  .drug-section-title,
  .users-section-title,
  .sys-section-title,
  .as-table-card-title,
  .asset-panel-title
) {
  font-size: var(--j-text-lg);
  font-weight: var(--j-weight-semibold);
  line-height: 1.4;
}

body :where(
  .asset-row-name,
  .asset-mobile-card-name,
  .ui-mobile-card-name,
  .sys-card-name,
  .drug-card-title,
  .drug-item-name,
  .member-name,
  .user-name,
  .as-name
) {
  color: var(--j-ink);
  font-size: var(--j-text-base);
  font-weight: var(--j-weight-semibold);
  line-height: 1.45;
}

body :where(
  .form-label,
  .mf-label,
  .asset-field-label,
  .drug-field-label,
  .filter-label,
  .table-label,
  .field-label,
  .asset-stat-label,
  .as-stat-lbl
) {
  font-size: var(--j-text-sm);
  font-weight: var(--j-weight-medium);
  line-height: 1.4;
}

small,
.small,
.form-text,
.invalid-feedback,
.valid-feedback {
  font-size: var(--j-text-xs);
  line-height: var(--j-leading-normal);
}

body :where(
  .asset-row-meta,
  .asset-result-info,
  .as-tbl-info,
  .asset-form-section-subtitle,
  .users-page-subtitle,
  .settings-page-subtitle
) {
  color: var(--j-muted);
  font-size: var(--j-text-xs);
  font-weight: var(--j-weight-regular);
  line-height: 1.5;
}

/* =========================================================
   Forms / buttons
   Use application classes instead of the raw <button> selector so
   icon buttons and special controls can keep their own intended size.
   ========================================================= */
.btn,
.asset-app-btn,
.ph-btn,
.form-control,
.form-select,
.input-group-text,
.smart-select-button,
.smart-select-option {
  font-family: var(--j-font-sans);
  font-size: var(--j-text-sm);
  line-height: 1.4;
}

.btn,
.asset-app-btn,
.ph-btn { font-weight: var(--j-weight-semibold); }

.form-control,
.form-select,
.smart-select-button,
.smart-select-option { font-weight: var(--j-weight-regular); }

/* =========================================================
   Dense data defaults
   Only Bootstrap/shared application tables are targeted. Custom report
   tables such as .lgo-table keep their own 11-12px document typography.
   ========================================================= */
.table,
.asset-data-table,
.drug-table,
.users-table,
.as-table {
  font-size: var(--j-text-sm);
}

.table thead th,
.asset-data-table thead th,
.drug-table thead th,
.users-table thead th,
.as-table thead th {
  color: #35536f;
  font-size: var(--j-text-xs);
  font-weight: var(--j-weight-semibold);
  line-height: 1.4;
}

.table tbody td,
.asset-data-table tbody td,
.drug-table tbody td,
.users-table tbody td,
.as-table tbody td {
  font-size: var(--j-text-sm);
  font-weight: var(--j-weight-regular);
  line-height: 1.5;
}

/* =========================================================
   Badges / chips
   ========================================================= */
.badge,
.dt-badge,
.asset-badge,
.drug-badge,
.status-badge,
.as-tag,
.as-cnt-badge,
kbd {
  font-size: var(--j-text-2xs);
  font-weight: var(--j-weight-semibold);
  line-height: 1.2;
}

/* =========================================================
   KPI / important numbers
   ========================================================= */
body :where(
  .asset-stat-number,
  .as-stat-val,
  .stat-v,
  .asset-kpi-value,
  .drug-kpi-value,
  .asset-new-kpi strong,
  .anh-kpi-body strong,
  .kpi-value,
  .dashboard-kpi-value,
  .asset-dashboard-value,
  .asset-dashboard-mini-value,
  .total-val
) {
  font-size: var(--j-text-stat);
  font-weight: var(--j-weight-bold);
  line-height: 1.15;
}

/* =========================================================
   SweetAlert / system overlays
   ========================================================= */
.sw-html,
.swal2-html-container {
  font-size: var(--j-text-base);
  font-weight: var(--j-weight-regular);
  line-height: 1.55;
}

.swal2-title {
  font-size: var(--j-text-xl);
  font-weight: var(--j-weight-bold);
}

.error-code {
  font-family: var(--j-font-sans);
  font-size: clamp(4.5rem, 18vw, 7.5rem);
  font-weight: var(--j-weight-medium);
  line-height: 1;
}

.jones-loader-title {
  font-size: var(--j-text-lg);
  font-weight: var(--j-weight-semibold);
}
.jones-loader-subtitle,
.jones-loader-foot {
  font-size: var(--j-text-xs);
  font-weight: var(--j-weight-regular);
}

/* =========================================================
   Tablet/mobile
   Compact spacing belongs in page CSS. Text remains readable and page
   rules loaded after this stylesheet may refine dense components.
   ========================================================= */
@media (max-width: 1099.98px) {
  body { font-size: var(--j-text-base); }

  h1, .h1 { font-size: var(--j-text-xl); }
  h2, .h2 { font-size: var(--j-text-lg); }

  body :where(
    .asset-page-title,
    .as-ph-title,
    .page-title,
    .drug-topline h1,
    .users-page-title,
    .settings-page-title,
    .dashboard-title,
    .dash-title
  ) {
    font-size: 17px;
  }
}