/* เรือเจริญ Mobile Typography v187
   A readable, consistent mobile scale. Visual-only: no data or calculation changes. */

@media (max-width: 736px) {
  :root {
    --type-caption: 12px;
    --type-meta: 13px;
    --type-label: 14px;
    --type-body: 15px;
    --type-subheading: 17px;
    --type-heading: 19px;
    --type-page-title: 22px;
    --type-kpi: clamp(22px, 6.4vw, 28px);
    --type-kpi-compact: clamp(20px, 5.7vw, 24px);
  }

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

  /* iOS does not zoom form fields whose text is at least 16px. */
  #app input,
  #app select,
  #app textarea,
  .modal-overlay input,
  .modal-overlay select,
  .modal-overlay textarea,
  .pu-overlay input,
  .pu-overlay select,
  .pu-overlay textarea,
  .mapp-sheet-layer input,
  .mapp-sheet-layer select,
  .mapp-sheet-layer textarea {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  #app button,
  .modal-overlay button,
  .pu-overlay button,
  .mapp-sheet-layer button {
    line-height: 1.35 !important;
  }

  .mapp-page-title strong,
  .uix-users-hero-copy strong,
  .emp-page-header > div:first-child,
  .edp-name {
    font-size: var(--type-page-title) !important;
  }

  .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,
  .mapp-sheet-head h2 {
    font-size: var(--type-heading) !important;
  }

  .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,
  .mapp-sheet-row strong {
    font-size: var(--type-subheading) !important;
  }

  /* Small supporting text stays readable without competing with content. */
  .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,
  .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: 1.45 !important;
  }

  .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,
  .sales-section-label {
    font-size: var(--type-meta) !important;
  }

  .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;
  }

  /* Dense 3-column dashboard cards need a compact numeric scale. */
  .dash-widget .mc {
    min-width: 0;
    padding-inline: 9px !important;
  }

  .dash-widget .mc-val {
    font-size: clamp(19px, 5vw, 22px) !important;
    line-height: 1.22 !important;
    white-space: nowrap;
    letter-spacing: -0.02em;
  }

  .dash-widget .mc-val > span {
    display: block;
    width: fit-content;
    margin: 4px 0 0 !important;
    font-size: var(--type-caption) !important;
    letter-spacing: 0;
  }

  .mc-val,
  .fin-val,
  #fin-profit-total,
  .be-kpi > strong,
  .be-result > strong,
  .sales-kpi-value,
  .sales-month-stat-value,
  .psum-val,
  .ssb-val,
  .wsc-row-val,
  .wsc-net-value,
  .ptl-val,
  .edp-info-val,
  .cost-card-cost,
  .pi-total,
  .iai-kpi strong {
    font-variant-numeric: tabular-nums;
  }

  /* Keep the fixed navigation compact; page content receives the larger scale. */
  #mobile-nav .mob-tab .tab-label,
  #mobile-nav .mapp-record-label {
    font-size: 12px !important;
  }

  .app-logo span { font-size: 15px !important; }
  .mapp-sheet-row { min-height: 58px; }
}

@media (max-width: 360px) {
  :root {
    --type-page-title: 21px;
    --type-heading: 18px;
  }

  .dash-widget .mc { padding-inline: 7px !important; }
  .dash-widget .mc-val { font-size: clamp(18px, 5vw, 19.5px) !important; }
}