/*
 * IGS Typography System v2 — readable density without wasting workspace.
 *
 * Screen typography is semantic and density-aware.  The standard profile is
 * deliberately centred on 14px body/control text, 13px labels/table rows and
 * 12px captions.  Dense financial entry may reduce geometry, never ordinary
 * Persian screen text below the 12px dense-text floor.  Print/PDF typography
 * remains owned by the financial document output contract.
 */
:root {
  --igs-type-body: .875rem;          /* 14px */
  --igs-type-control: .875rem;       /* 14px */
  --igs-type-label: .8125rem;        /* 13px */
  --igs-type-table: .8125rem;        /* 13px */
  --igs-type-caption: .75rem;        /* 12px */
  --igs-type-dense: .75rem;          /* 12px minimum screen text */
  --igs-type-section: 1rem;          /* 16px */
  --igs-type-page: 1.2rem;           /* 19.2px */
  --igs-type-display: 1.375rem;      /* 22px */
  --igs-type-line: 1.7;
  --igs-type-line-dense: 1.55;
}

html[data-igs-ui-density="compact"] {
  --igs-type-body: .8125rem;         /* 13px */
  --igs-type-control: .8125rem;      /* 13px */
  --igs-type-label: .75rem;          /* 12px */
  --igs-type-table: .75rem;          /* 12px */
  --igs-type-caption: .75rem;        /* never below 12px */
  --igs-type-dense: .75rem;
  --igs-type-section: .9375rem;      /* 15px */
  --igs-type-page: 1.125rem;         /* 18px */
  --igs-type-display: 1.25rem;       /* 20px */
  --igs-type-line: 1.62;
  --igs-type-line-dense: 1.48;
}

html[data-igs-ui-density="readable"] {
  --igs-type-body: .9375rem;         /* 15px */
  --igs-type-control: .9375rem;      /* 15px */
  --igs-type-label: .875rem;         /* 14px */
  --igs-type-table: .875rem;         /* 14px */
  --igs-type-caption: .8125rem;      /* 13px */
  --igs-type-dense: .8125rem;        /* 13px */
  --igs-type-section: 1.0625rem;     /* 17px */
  --igs-type-page: 1.375rem;         /* 22px */
  --igs-type-display: 1.5rem;        /* 24px */
  --igs-type-line: 1.78;
  --igs-type-line-dense: 1.6;
}

@media screen {
  html[lang="fa"] body {
    font-size: var(--igs-type-body);
    line-height: var(--igs-type-line);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  /* Shared screen semantics. */
  html[lang="fa"] :is(button, input, select, textarea, trix-editor) {
    font-size: var(--igs-type-control);
  }
  html[lang="fa"] #content :is(label, .igs-ui-field__label, .commerce-field > label, .commerce-field > span) {
    font-size: var(--igs-type-label);
  }
  html[lang="fa"] #content :is(small, .help, .helptext, .form-row .help, .commerce-hint) {
    font-size: var(--igs-type-caption);
    line-height: var(--igs-type-line-dense);
  }

  /*
   * Readability guard for module-specific CSS loaded after the global layer.
   * Controls and ordinary tables use semantic sizes. Legacy micro-copy classes
   * may stay compact, but cannot force Persian screen text back below the 12px
   * floor. Financial composers intentionally override this later with Dense.
   */
  html[lang="fa"] #content :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, trix-editor) {
    font-size: var(--igs-type-control) !important;
  }
  html[lang="fa"] #content :is(
    small, .help, .helptext, .form-row .help,
    [class*="__eyebrow"], [class*="-eyebrow"],
    [class*="__caption"], [class*="-caption"],
    [class*="__hint"], [class*="-hint"],
    [class*="__help"], [class*="-help"],
    [class*="__meta"], [class*="-meta"],
    [class*="__note"], [class*="-note"],
    [class*="__status"], [class*="-status"],
    [class*="__badge"], [class*="-badge"]
  ):not(.material-symbols-outlined) {
    font-size: var(--igs-type-caption) !important;
    line-height: var(--igs-type-line-dense);
  }
  html[lang="fa"] #content table th {
    font-size: var(--igs-type-caption) !important;
    line-height: var(--igs-type-line-dense);
  }
  html[lang="fa"] #content table td {
    font-size: var(--igs-type-table) !important;
    line-height: var(--igs-type-line-dense);
  }
  html[lang="fa"] #content :is(h2, .igs-ui-section-title, .commerce-section__head h2) {
    font-size: var(--igs-type-section);
  }
  html[lang="fa"] :is(.igs-ui-page-header h1, .igs-list-head h1, .jango-dashboard__heading h1, .mydesk-hero h1) {
    font-size: var(--igs-type-page);
    line-height: 1.45;
  }
  html[lang="fa"] :is(.igs-ui-page-header p, .igs-list-head p, .jango-dashboard__heading p) {
    font-size: var(--igs-type-label);
    line-height: var(--igs-type-line);
  }

  /* Navigation/header: readable labels, compact geometry. */
  #nav-sidebar .irangs-nav-group__heading,
  #nav-sidebar .irangs-nav-item > :is(a, button),
  .irangs-global-header .irangs-header-tool__label,
  .irangs-context-switcher__trigger,
  .irangs-smart-breadcrumb__item {
    font-size: var(--igs-type-label);
  }
  #nav-sidebar .irangs-product-brand__version,
  .irangs-context-switcher__preferred {
    font-size: var(--igs-type-caption);
  }

  /* Canonical list tables: row height comes from padding, not oversized type. */
  .igs-list-table thead th,
  .igs-list-static-table th,
  .irangs-table th,
  .workspace-control__table th,
  .commerce-table th {
    font-size: var(--igs-type-caption);
    line-height: var(--igs-type-line-dense);
  }
  .igs-list-table .igs-list-data-row > :is(td, th),
  .igs-list-static-table td,
  .irangs-table td,
  .workspace-control__table td,
  .commerce-table td {
    font-size: var(--igs-type-table);
    line-height: var(--igs-type-line-dense);
  }
  .igs-list-table .igs-list-data-row > :is(td, th) { padding-block: 8px !important; }
  .igs-list-surface--entity .igs-list-data-row > :is(td, th) { padding-block: 9px !important; }
  .igs-list-surface--operational .igs-list-data-row > :is(td, th) { padding-block: 8px !important; }
  .igs-list-surface--transaction .igs-list-data-row > :is(td, th) { padding-block: 6px !important; }
  .igs-list-surface--configuration .igs-list-data-row > :is(td, th) { padding-block: 7px !important; }
  .igs-list-density--comfortable .igs-list-data-row > :is(td, th) { padding-block: 8px !important; }
  .igs-list-density--compact .igs-list-data-row > :is(td, th) {
    font-size: var(--igs-type-dense);
    padding-block: 5px !important;
  }
  html[data-igs-ui-density="readable"] .igs-list-density--comfortable .igs-list-data-row > :is(td, th) { padding-block: 9px !important; }
  .igs-list-tool-label,
  .igs-list-column-option,
  .igs-list-resultbar,
  .igs-list-column-picker__menu:empty::before,
  .igs-list-record-action,
  .igs-list-create-action {
    font-size: var(--igs-type-caption);
  }
  .igs-list-surface[data-igs-list-current-view="cards"] .igs-list-data-row > :is(td, th)::before {
    font-size: var(--igs-type-caption);
  }

  /* Runtime-marked form controls inherit the same readable scale. */
  html body [data-igs-ui-control="field"]:not([data-igs-field-kind="file"]) {
    font-size: var(--igs-type-control) !important;
    line-height: var(--igs-type-line-dense) !important;
  }
  html body [data-igs-ui-control="button"]:not(.material-symbols-outlined),
  html body .irangs-button,
  html body .igs-ui-button {
    font-size: var(--igs-type-label);
  }

  /*
   * Sales/Purchase composer: keep the compact 29–31px geometry but reverse the
   * old 9/10/11px text squeeze.  Standard/Compact stay at a 12px visual floor;
   * Readable moves the dense financial surface to 13px.
   */
  html body .commerce-document-composer .commerce-composer-fields .commerce-field > :is(span, label),
  html body .commerce-document-composer .commerce-hint,
  html body .commerce-document-composer .commerce-party-selection,
  html body .commerce-document-composer .commerce-bulk-adjustments > summary,
  html body .commerce-document-composer .commerce-button,
  html body .commerce-document-composer .commerce-line-table--composer th,
  html body .commerce-document-composer .commerce-line-total,
  html body .commerce-document-composer .commerce-composer-advanced > summary :is(strong, small),
  html body .commerce-document-composer .commerce-composer-totals :is(strong, dt, dd, small, p),
  html body .commerce-document-composer .commerce-calculation-state,
  html body .commerce-document-composer .igs-smart-related-result,
  html body .commerce-document-composer .igs-smart-related-action {
    font-size: var(--igs-type-dense) !important;
    line-height: var(--igs-type-line-dense);
  }
  html body .commerce-document-composer .commerce-composer-fields .commerce-field :is(input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), select),
  html body .commerce-document-composer .commerce-composer-fields .commerce-field textarea,
  html body .commerce-document-composer .igs-smart-related-input,
  html body .commerce-document-composer .commerce-product-finder input,
  html body .commerce-document-composer .commerce-line-table--composer :is(input, select) {
    font-size: var(--igs-type-dense) !important;
    line-height: 1.35 !important;
  }
  @media (min-width: 861px) {
    html body .commerce-document-composer .commerce-composer-fields .commerce-field :is(input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), select) {
      height: 31px !important;
      min-height: 31px !important;
    }
    html body .commerce-document-composer .commerce-line-table--composer :is(input, select) {
      height: 29px !important;
      min-height: 29px !important;
    }
    html body .commerce-document-composer .commerce-product-finder input { min-height: 30px; }
    html body .commerce-document-composer .commerce-section__head { min-height: 34px; }
    html body .commerce-document-composer .commerce-section__head h2 { font-size: var(--igs-type-label); }
    html body [data-document-composer-page] > .igs-ui-page-header p,
    html body [data-document-composer-page] .igs-ui-page-header__eyebrow { font-size: var(--igs-type-caption); }
  }

  /* Expense composer follows the same rule: compress spacing, not text. */
  html body .expense-composer .commerce-field,
  html body .expense-composer .commerce-field > :is(label, span),
  html body .expense-composer .expense-section-head p,
  html body .expense-composer .expense-category-trigger :is(strong, small),
  html body .expense-composer .expense-category-row,
  html body .expense-composer .expense-dynamic-group h3,
  html body .expense-composer .expense-empty-hint,
  html body .expense-composer .expense-advanced > summary :is(strong, small),
  html body .expense-composer .commerce-field :is(small),
  html body .expense-composer .errorlist {
    font-size: var(--igs-type-label) !important;
    line-height: var(--igs-type-line-dense);
  }
  html body .expense-composer .commerce-field :is(small),
  html body .expense-composer .errorlist,
  html body .expense-composer .expense-section-head p,
  html body .expense-composer .expense-category-trigger small {
    font-size: var(--igs-type-caption) !important;
  }
  html body .expense-composer .commerce-field :is(input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), select, textarea),
  html body .expense-composer .expense-category-menu__head input {
    font-size: var(--igs-type-label) !important;
  }
  @media (min-width: 861px) {
    html body .expense-composer .commerce-field :is(input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), select) {
      height: 32px !important;
      min-height: 32px !important;
    }
    html body .expense-composer .expense-section-head h2 { font-size: var(--igs-type-section); }
  }

  /* Existing dense history/settings tables had 9–11px text. */
  .igs-recurring-history table { font-size: var(--igs-type-table) !important; }
  .igs-recurring-history td small { font-size: var(--igs-type-caption) !important; }
  .workspace-control__identity p,
  .workspace-control__section-head p,
  .workspace-control__card-head p,
  .workspace-control__facts :is(dt, dd),
  .workspace-control__warnings > div,
  .workspace-control__empty,
  .workspace-control__nav a,
  .workspace-control__kpis small {
    font-size: var(--igs-type-caption) !important;
  }

  /* Avoid iOS input zoom on touch/mobile even when Compact is selected. */
  @media (max-width: 720px), (pointer: coarse) {
    html[lang="fa"] #content :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
      font-size: 16px !important;
    }
  }
}