/* Shared type roles for the document and embedded module shadow roots. */
:root,
:host {
  --font-ui: "Helvetica Neue", Helvetica, Arial, "Aphaw Myanmar", sans-serif;
  --ui-font: var(--font-ui);
}

@media screen {
  :root,
  :host {
    --type-page-title-size: 18px;
    --type-section-title-size: 15px;
    --type-panel-title-size: 15px;
    --type-subheading-size: 13px;
    --type-body-size: 13px;
    --type-control-size: 12px;
    --type-field-size: 13px;
    --type-date-size: 13px;
    --weight-date: 500;
    --type-label-size: 12px;
    --type-helper-size: 11px;
    --type-unit-size: 11px;
    --type-table-header-size: 11px;
    --type-table-body-size: 13px;
    --type-total-size: 18px;
    --type-stock-size: 20px;
    --type-metric-size: 24px;
    --ui-table-body-size: var(--type-table-body-size);
    --ui-dashboard-number-size: var(--type-metric-size);
    --ui-dashboard-context-size: var(--type-helper-size);
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-table-body: 400;
    --weight-semibold: 600;
    --weight-bold: 600;
    --line-height-ui: 1.8;
    --line-height-compact: 1.65;
  }
}

/* Layered important type rules outrank legacy per-module overrides without
   changing layout, colours, icon sizes, or the separate print layouts. */
@layer aphaw-typography {
  @media screen {
    :host,
    * {
      font-family: var(--font-ui) !important;
      font-stretch: normal !important;
      font-optical-sizing: none !important;
      font-synthesis: none !important;
      font-kerning: normal !important;
      font-feature-settings: normal !important;
      font-variant-numeric: lining-nums tabular-nums !important;
      letter-spacing: 0 !important;
    }

    body,
    :host {
      font-size: var(--type-body-size) !important;
      font-weight: var(--weight-regular) !important;
      line-height: var(--line-height-ui) !important;
    }

    /* Text wrappers inherit their role instead of reviving legacy module sizes.
       Decorative spans and icon buttons keep their own sizing. */
    :where(p, a, div, section, article, aside, form, fieldset,
           span:not([aria-hidden="true"]), strong, b, em, small,
           code, time, output, dt, dd, li) {
      font-size: inherit !important;
      font-weight: inherit !important;
      line-height: inherit !important;
    }

    strong,
    b {
      font-weight: var(--weight-medium) !important;
    }

    h1,
    #activeViewTitle,
    .page-head h2,
    .page-title {
      font-size: var(--type-page-title-size) !important;
      font-weight: var(--weight-semibold) !important;
      line-height: var(--line-height-ui) !important;
    }

    h2,
    .panel-head h2,
    form h2,
    .book-page h2 {
      font-size: var(--type-panel-title-size) !important;
      font-weight: var(--weight-semibold) !important;
      line-height: var(--line-height-ui) !important;
    }

    h3,
    h4,
    form h3,
    .section-title h3 {
      font-size: var(--type-subheading-size) !important;
      font-weight: var(--weight-semibold) !important;
      line-height: var(--line-height-ui) !important;
    }

    label,
    label > span,
    legend,
    summary,
    .field-label,
    .receivable-total-box > span,
    .delivery-run-date-field > span {
      font-size: var(--type-label-size) !important;
      font-weight: var(--weight-medium) !important;
      line-height: var(--line-height-ui) !important;
    }

    input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="reset"]):not([type="submit"])),
    select,
    textarea,
    .app-combobox-option {
      font-size: var(--type-field-size) !important;
      font-weight: var(--weight-regular) !important;
      line-height: var(--line-height-compact) !important;
    }

    input::placeholder,
    textarea::placeholder {
      font: inherit !important;
      letter-spacing: 0 !important;
    }

    select option,
    select optgroup {
      font-family: inherit !important;
      font-size: inherit !important;
      line-height: inherit !important;
    }

    select option { font-weight: var(--weight-regular) !important; }
    select optgroup { font-weight: var(--weight-semibold) !important; }

    input::-webkit-textfield-decoration-container {
      font: inherit !important;
      font-variant-numeric: lining-nums tabular-nums !important;
    }

    input::-webkit-datetime-edit,
    input::-webkit-datetime-edit-fields-wrapper,
    input::-webkit-datetime-edit-day-field,
    input::-webkit-datetime-edit-month-field,
    input::-webkit-datetime-edit-year-field,
    input::-webkit-datetime-edit-week-field,
    input::-webkit-datetime-edit-hour-field,
    input::-webkit-datetime-edit-minute-field,
    input::-webkit-datetime-edit-second-field,
    input::-webkit-datetime-edit-millisecond-field,
    input::-webkit-datetime-edit-text {
      font: inherit !important;
      font-feature-settings: normal !important;
      font-variant-numeric: lining-nums tabular-nums !important;
      letter-spacing: 0 !important;
      padding: 0 !important;
    }

    input::-webkit-datetime-edit-ampm-field {
      font: inherit !important;
      font-feature-settings: normal !important;
      font-variant-numeric: lining-nums tabular-nums !important;
      letter-spacing: 0 !important;
      padding: 0 !important;
    }

    input::-webkit-datetime-edit-meridiem-field {
      font: inherit !important;
      font-feature-settings: normal !important;
      font-variant-numeric: lining-nums tabular-nums !important;
      letter-spacing: 0 !important;
      padding: 0 !important;
    }

    /* Safari uses a separate value element instead of the editable segments. */
    input::-webkit-date-and-time-value {
      font-family: var(--font-ui) !important;
      font-size: inherit !important;
      font-weight: inherit !important;
      font-style: normal !important;
      font-stretch: normal !important;
      font-optical-sizing: none !important;
      font-feature-settings: normal !important;
      font-variant-numeric: lining-nums tabular-nums !important;
      line-height: inherit !important;
      letter-spacing: 0 !important;
      margin-inline-start: 0 !important;
      padding: 0 !important;
      text-align: start;
    }

    /* Vendor rules stay separate so unsupported selectors cannot discard the
       equivalent rule for another browser. Do not hide native picker buttons. */
    input::file-selector-button {
      font-family: var(--font-ui) !important;
      font-size: var(--type-control-size) !important;
      font-weight: var(--weight-semibold) !important;
      font-variant-numeric: lining-nums tabular-nums !important;
      line-height: var(--line-height-compact) !important;
      letter-spacing: 0 !important;
    }

    input::-webkit-file-upload-button {
      font-family: var(--font-ui) !important;
      font-size: var(--type-control-size) !important;
      font-weight: var(--weight-semibold) !important;
      font-variant-numeric: lining-nums tabular-nums !important;
      line-height: var(--line-height-compact) !important;
      letter-spacing: 0 !important;
    }

    input:autofill {
      font-family: var(--font-ui) !important;
      font-size: var(--type-field-size) !important;
      font-weight: var(--weight-regular) !important;
      font-variant-numeric: lining-nums tabular-nums !important;
    }

    input:-webkit-autofill {
      font-family: var(--font-ui) !important;
      font-size: var(--type-field-size) !important;
      font-weight: var(--weight-regular) !important;
      font-variant-numeric: lining-nums tabular-nums !important;
    }

    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    button:not([class]) {
      font-size: var(--type-control-size) !important;
      font-weight: var(--weight-semibold) !important;
      line-height: var(--line-height-compact) !important;
    }

    :is(.primary, .secondary, .ghost, .danger, .new-action, .subtab,
        .delivery-tabs button, .plastics-view-tab, .purchase-status-tab,
        .segmented-view-tab, .finished-product-tab, .finance-view-tab,
        .purchase-catalog-tabs button, .filter-drawer-toggle,
        .detail-history-toggle, .product-archive-button,
        .app-decision-dialog footer button, .period-apply, .period-cancel,
        .context-menu button, button[type="submit"]):not(
        :is(.icon-button, .tool-icon, .filter-icon-button, .trash-button,
            .edit-button, .row-button, .delete-action-button,
            .utility-icon-button, .filter-action-button, .header-mounted-control,
            .header-proxy-control, .header-cloud-status,
            .purchase-selection-actions-button)) {
      font-size: var(--type-control-size) !important;
      font-weight: var(--weight-semibold) !important;
      line-height: var(--line-height-compact) !important;
    }

    .unified-period-summary,
    .module-period-summary,
    .header-period-summary,
    .plastics-period-display,
    .purchase-period-display,
    .module-period-mode,
    .purchase-period-mode,
    .plastics-period-mode,
    input:is([type="date"], [type="month"], [type="week"],
             [type="time"], [type="datetime-local"]) {
      font-size: var(--type-date-size) !important;
      font-weight: var(--weight-date) !important;
      line-height: var(--line-height-compact) !important;
    }

    .unified-calendar-title,
    .unified-calendar-month,
    .unified-period-range-summary,
    .unified-period-range-summary :is(strong, output, b) {
      font-size: var(--type-body-size) !important;
      font-weight: var(--weight-medium) !important;
    }

    .calendar-day {
      font-size: var(--type-body-size) !important;
      font-weight: var(--weight-regular) !important;
    }

    .calendar-day:is(.selected, .range-start, .range-end) {
      font-weight: var(--weight-semibold) !important;
    }

    .calendar-weekdays > span {
      font-size: var(--type-helper-size) !important;
      font-weight: var(--weight-medium) !important;
    }

    .unified-period-presets button {
      font-size: var(--type-control-size) !important;
      font-weight: var(--weight-medium) !important;
    }

    .settings-sidebar .tab,
    .settings-sidebar .tab > span:not([aria-hidden="true"]),
    .run-stop-head strong,
    .delivery-customer-name,
    .inventory-card-heading > span,
    #rawEntrySelected > strong,
    #payableSummarySelectedMeta > strong,
    .carry-banner strong,
    .fact strong {
      font-size: var(--type-body-size) !important;
      font-weight: var(--weight-medium) !important;
      line-height: var(--line-height-ui) !important;
    }

    .nav-group-title,
    .settings-section-label,
    .settings-section-head .settings-section-label,
    .unified-period-presets > strong {
      font-size: var(--type-helper-size) !important;
      font-weight: var(--weight-semibold) !important;
      line-height: var(--line-height-ui) !important;
    }

    .layout-mode-label,
    .sidebar-user-copy > strong {
      font-size: var(--type-control-size) !important;
      font-weight: var(--weight-medium) !important;
    }

    .sidebar-user-avatar {
      font-size: var(--type-control-size) !important;
      font-weight: var(--weight-semibold) !important;
    }

    table thead :is(th, td),
    .detail-table-head,
    .receivable-invoice-columns {
      font-size: var(--type-table-header-size) !important;
      font-weight: var(--weight-semibold) !important;
      line-height: var(--line-height-ui) !important;
    }

    table tbody :is(td, th),
    table tfoot :is(td, th),
    .detail-table-row,
    .run-stop-item,
    .run-table-item {
      font-size: var(--type-table-body-size) !important;
      font-weight: var(--weight-table-body) !important;
      line-height: var(--line-height-ui) !important;
    }

    table :is(td, th) :is(strong, b),
    .fact strong,
    .roll-entry strong,
    .delivery-usd,
    .delivery-date {
      font-size: inherit !important;
      font-weight: var(--weight-medium) !important;
      line-height: var(--line-height-ui) !important;
    }

    small,
    .sub,
    .hint,
    .form-hint,
    .field-help,
    .ledger-secondary,
    .closing-note,
    .order-optional,
    .raw-entry-reference,
    .inventory-card-location,
    .inventory-card-heading > .inventory-card-location,
    .product-archived-label,
    .finished-product-packing-ratio,
    .dashboard-period-label,
    .dashboard-period-caption,
    .dashboard-period-change,
    .dashboard-trend-indicator,
    .dashboard-trend-percent,
    .dashboard-trend-reference,
    .dashboard-subtitle,
    .dashboard-scope,
    .fact > span,
    .summary-strip span,
    .planned-total > span,
    .ledger-total > span,
    .delivery-summary-item > span,
    .sidebar-user-copy > small,
    .sidebar-copyright,
    .settings-section-head p,
    .team-directory-head p,
    .section-title > small,
    .panel-head p,
    .app-combobox-empty,
    .app-combobox-hint,
    .erp-pagination,
    .invoice-pagination-total,
    .invoice-pagination-size,
    .invoice-pagination-size > span,
    .invoice-pagination-size select,
    .invoice-pagination-page {
      font-size: var(--type-helper-size) !important;
      font-weight: var(--weight-regular) !important;
      line-height: var(--line-height-ui) !important;
    }

    .dashboard-metric > span:not(.dashboard-period-label),
    .report-metric > span:not(.dashboard-period-label),
    .finance-metric > span:not(.dashboard-period-label),
    .finished-product-summary-card > span:not(.dashboard-period-label),
    .finance-position-total > span:not(.dashboard-period-label),
    .finance-breakdown-grid section > span:not(.dashboard-period-label),
    .finance-report-metrics section > span:not(.dashboard-period-label),
    .badge,
    .status-badge,
    .pill,
    .status-pill {
      font-size: var(--type-control-size) !important;
      font-weight: var(--weight-medium) !important;
      line-height: var(--line-height-ui) !important;
    }

    .cloud-status-popover,
    .cloud-status-popover > span,
    .run-stop-destination,
    .delivery-list-count,
    .delivery-run-toolbar > span,
    .delivery-product-line {
      font-size: var(--type-control-size) !important;
      font-weight: var(--weight-regular) !important;
      line-height: var(--line-height-ui) !important;
    }

    .cloud-status-popover > strong {
      font-size: var(--type-control-size) !important;
      font-weight: var(--weight-semibold) !important;
    }

    .invoice-pagination-size select {
      min-inline-size: 64px !important;
    }

    .summary-strip :is(strong, b),
    .planned-total strong,
    .ledger-total strong,
    .closing-carry strong,
    .receivable-total-box b,
    #payableSelectedOrderSummary strong,
    #rawEntryAutomaticBalance strong {
      font-size: var(--type-total-size) !important;
      font-weight: var(--weight-medium) !important;
      line-height: var(--line-height-compact) !important;
    }

    .summary-strip :is(#totalQty, #totalAmount) {
      font-size: var(--type-total-size) !important;
      font-weight: var(--weight-medium) !important;
      line-height: var(--line-height-compact) !important;
    }

    .inventory-card > strong,
    .finished-product-summary-card > strong,
    .delivery-summary-item > strong {
      font-size: var(--type-stock-size) !important;
      font-weight: var(--weight-medium) !important;
      line-height: 1.4 !important;
    }

    .dashboard-metric > strong,
    .report-metric > strong,
    .finance-metric > strong,
    .finance-position-total > strong,
    .finance-breakdown-grid section > strong,
    .finance-report-metrics section > strong,
    .metrics > div > strong {
      font-size: var(--type-metric-size) !important;
      font-weight: var(--weight-medium) !important;
      line-height: 1.4 !important;
    }

    .dashboard-attention strong {
      font-size: var(--type-stock-size) !important;
      font-weight: var(--weight-medium) !important;
    }

    .invoice-pack-quantity :is(em, i),
    .finance-metric em,
    .finished-product-summary-units b {
      font-style: normal !important;
    }

    /* PDF export captures a screen-rendered clone. Keep its physical point
       sizes instead of applying the workspace's compact type roles. */
    :is(body.printing-invoice .invoice-sheet, .invoice-pdf-document) {
      font-size: 10pt !important;
      line-height: 1.55 !important;
    }

    :is(body.printing-invoice .invoice-sheet, .invoice-pdf-document) .invoice-brand h2 {
      font-size: 16pt !important;
      line-height: 1.5 !important;
    }

    :is(body.printing-invoice .invoice-sheet, .invoice-pdf-document) :is(
        .invoice-brand p, .invoice-brand small, .invoice-meta-grid span,
        .invoice-meta-grid b, .invoice-section-title) {
      font-size: 9pt !important;
      line-height: 1.5 !important;
    }

    :is(body.printing-invoice .invoice-sheet, .invoice-pdf-document) :is(
        .invoice-customer-card > span, .invoice-customer-card > strong,
        .invoice-customer-details dt, .invoice-customer-details dd) {
      font-size: 9pt !important;
      line-height: 1.6 !important;
    }

    :is(body.printing-invoice .invoice-sheet, .invoice-pdf-document) .invoice-table :is(th, td) {
      font-size: 10pt !important;
      line-height: 1.6 !important;
    }

    :is(body.printing-invoice .invoice-sheet, .invoice-pdf-document) .invoice-grand-total :is(span, strong) {
      font-size: 12pt !important;
      line-height: 1.6 !important;
    }

    :is(body.printing-invoice .invoice-sheet, .invoice-pdf-document) :is(strong, b) {
      font-weight: revert-layer !important;
    }

    .dashboard-metric .invoice-pack-quantity em,
    .report-metric .invoice-pack-quantity em,
    .finished-product-summary-units b {
      font-size: var(--type-stock-size) !important;
      font-weight: var(--weight-medium) !important;
      line-height: 1.4 !important;
    }

    .finished-product-summary-units em,
    .invoice-pack-quantity small,
    .dashboard-currency-unit {
      font-size: var(--type-unit-size) !important;
      font-weight: var(--weight-regular) !important;
      font-style: normal !important;
      line-height: var(--line-height-ui) !important;
    }

  }
}