/* เรือเจริญ Typography v184
   Shared semantic type scale. Visual-only: no data, permissions, or calculations. */

:root {
  --type-caption: 11px;
  --type-meta: 12px;
  --type-label: 13px;
  --type-body: 14px;
  --type-subheading: 16px;
  --type-heading: 18px;
  --type-page-title: 22px;
  --type-kpi: clamp(24px, 3cqi, 32px);
  --type-kpi-compact: clamp(20px, 2.4cqi, 25px);
  --leading-tight: 1.25;
  --leading-heading: 1.35;
  --leading-body: 1.5;
}

body { font-size: 100%; }
#app,
#login-screen,
.modal-overlay,
.pu-overlay,
.mapp-sheet-layer {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

#app h1,
.modal-overlay h1 { font-size: var(--type-page-title); line-height: var(--leading-tight); }
#app h2,
.modal-overlay h2 { font-size: var(--type-heading); line-height: var(--leading-heading); }
#app h3,
.modal-overlay h3 { font-size: var(--type-subheading); line-height: var(--leading-heading); }
#app small,
.modal-overlay small,
.pu-overlay small,
.mapp-sheet-layer small { font-size: var(--type-meta); line-height: var(--leading-body); }

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

/* Page titles */
.mapp-page-title strong,
.uix-users-hero-copy strong,
.emp-page-header > div:first-child,
.edp-name {
  font-size: var(--type-page-title) !important;
  line-height: var(--leading-tight) !important;
}

/* Card and major section headings */
.card-title,
.sales-month-title,
.sales-category-title,
.iai-toolbar > div > strong,
.user-mgmt-header > div:first-child > div:first-child,
#line-oa-card > div:first-child,
.pu-sheet-title,
.pu-qty-name,
.modal h2,
.wsc-title {
  font-size: var(--type-heading) !important;
  line-height: var(--leading-heading) !important;
}

/* Sub-headings and record names */
.cost-card-name,
.iai-ai-head strong,
.iai-level-heading strong,
.iai-section-head strong,
.iai-item-head strong,
.iai-trend-head strong,
.pi-section,
.pi-name,
.emp-card-name,
.sales-date-title,
.ud-name,
.ro-name {
  font-size: var(--type-subheading) !important;
  line-height: var(--leading-heading) !important;
}

/* Standard body copy and controls */
#app button:not(.fin-month-btn):not(.mapp-record-button):not(.mapp-sheet-close),
#app input,
#app select,
#app textarea,
.modal button,
.modal input,
.modal select,
.modal textarea,
.fin-row,
.stock-table td,
.users-table td,
.pg-label,
.perm-row-label,
.log-msg,
.menu-nm,
.menu-sales,
.uix-perm-card > header strong,
.uix-perm-row > span,
.iai-ai-box > p,
.iai-item,
.iai-advice p,
.iai-method {
  font-size: var(--type-body) !important;
  line-height: var(--leading-body) !important;
}

/* Labels */
.mc-label,
.fin-label,
.be-kpi > span,
.be-result > span,
.sales-kpi-label,
.sales-month-stat-label,
.psum-lbl,
.ssb-label,
.wsc-row-label,
.wsc-net-label,
.ptl-lbl,
.edp-info-label,
.pu-field label,
.mfg label,
.form-group label,
.iai-toolbar label,
.iai-metrics span,
.menu-rank {
  font-size: var(--type-label) !important;
  line-height: var(--leading-heading) !important;
}

/* Table headers and supporting metadata */
.stock-table th,
.users-table th,
.pg-header,
.sales-section-label,
.pu-grid-label,
.mapp-section-label,
.mapp-page-title small,
.uix-users-hero-copy span,
.iai-toolbar > div > small,
.iai-section-head small,
.iai-level-heading small,
.iai-readonly small,
.fai-readonly small,
.edp-sub,
.ud-role,
.ro-desc,
.log-time,
.receive-log-time,
.dayoff-month-label,
.import-zone-sub,
.pi-meta,
.cost-meta,
.uix-user-meta,
.mapp-sheet-row small {
  font-size: var(--type-meta) !important;
  line-height: var(--leading-body) !important;
}

/* Captions, badges, and compact status text */
.mc-sub,
.uix-users-hero-copy small,
.uix-users-summary span,
.uix-status,
.uix-self-account,
.uix-perm-card > header span,
.uix-perm-card > header em,
.uix-perm-control strong,
.role-badge,
.status-pill,
.col-cat-badge,
.emp-status-pill,
.emp-wage-badge,
.log-type-pill,
.receive-badge,
.sdn-readonly-badge,
.iai-status,
.iai-item-head small,
.iai-level-card > header small,
.iai-level-card li span,
.iai-level-card footer,
.iai-equation,
.iai-ai-box > small,
.sales-source,
.sales-top-qty,
.pi-unit-price,
.pu-qty-last {
  font-size: var(--type-caption) !important;
  line-height: var(--leading-heading) !important;
}

.bar-l,
.perm-user-name,
.perm-role-tag,
.perm-user-header,
.perm-lock-icon,
.iai-kpi small,
.iai-trend-head > span,
.wp-sub,
.wp-section-label {
  font-size: var(--type-caption) !important;
  line-height: var(--leading-heading) !important;
}

.cost-ingredient-row {
  font-size: var(--type-meta) !important;
  line-height: var(--leading-body) !important;
}

/* Primary and secondary numeric hierarchy */
.mc-val,
#fin-profit-total,
.be-kpi > strong,
.sales-kpi-value,
.ptl-val,
.wsc-net-value,
.uix-users-summary b {
  font-size: var(--type-kpi) !important;
  line-height: var(--leading-tight) !important;
  font-variant-numeric: tabular-nums;
}

.fin-val,
.be-result > strong,
.sales-month-stat-value,
.psum-val,
.ssb-val,
.wsc-row-val,
.edp-info-val,
.cost-card-cost,
.pi-total,
.iai-kpi strong {
  font-size: var(--type-kpi-compact) !important;
  line-height: var(--leading-tight) !important;
  font-variant-numeric: tabular-nums;
}

/* Keep navigation compact while matching each navigation level. */
.app-logo { font-size: var(--type-subheading) !important; }
.app-logo span,
#nav-toggle,
#shop-navigation .tab,
.uix-users-nav button,
.iai-mode-btn,
.iai-filter,
.filter-btn { font-size: var(--type-label) !important; }
.nav-heading { font-size: var(--type-subheading) !important; }
#nav-search,
#shop-navigation .nav-tools button,
#mobile-nav .mob-tab .tab-label,
#mobile-nav .mapp-record-label { font-size: var(--type-meta) !important; }

/* Login follows the same hierarchy as the application. */
.login-logo h1 { font-size: var(--type-page-title) !important; line-height: var(--leading-tight); }
.login-logo p,
.login-error,
.login-hint { font-size: var(--type-body) !important; line-height: var(--leading-body); }
.btn-login { font-size: var(--type-subheading) !important; }

@media (max-width: 736px) {
  :root {
    --type-heading: 17px;
    --type-page-title: 21px;
    --type-kpi: clamp(23px, 7vw, 28px);
    --type-kpi-compact: clamp(19px, 5.5vw, 23px);
  }

  .card-title { align-items: flex-start; gap: 8px; }
  .stock-table td,
  .users-table td,
  .uix-perm-row > span,
  .pi-meta,
  .cost-meta { font-size: var(--type-label) !important; }
}

@media print {
  :root {
    --type-body: 12px;
    --type-subheading: 14px;
    --type-heading: 16px;
    --type-page-title: 18px;
    --type-kpi: 24px;
    --type-kpi-compact: 20px;
  }
}