/* LMS UI U1 — safe foundation layer. Components migrate in later controlled patches. */
html[data-lms-design-system] {
  /*
   * Compatibility bridge for legacy app.css/rtl.css font variables.
   * The old RTL layer applies --third-font with !important; mapping the
   * legacy variables here keeps the central typography contract effective
   * without editing the legacy stylesheet or adding another !important.
   */
  --main-font: var(--lms-font-family);
  --second-font: var(--lms-font-family);
  --third-font: var(--lms-font-family);
  --forth-font: var(--lms-font-family);
  --fifth-font: var(--lms-font-family);
  --dana-font: var(--lms-font-family);
  --khaton-font: var(--lms-font-family);
  --bottun-font: var(--lms-font-family);
  --title-font: var(--lms-font-family);
  --yekan-font: var(--lms-font-family);
  --vazirmatn: var(--lms-font-family);

  font-family: var(--lms-font-family);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

html[data-lms-design-system] body,
html[data-lms-design-system] button,
html[data-lms-design-system] input,
html[data-lms-design-system] select,
html[data-lms-design-system] textarea {
  font-family: var(--lms-font-family);
}

html[data-lms-design-system] body {
  min-inline-size: 0;
  color: var(--lms-color-text-primary);
  font-family: var(--lms-font-family);
  font-size: max(var(--lms-font-size-body-sm), 0.875rem);
  line-height: var(--lms-line-height-body);
}

html[data-lms-design-system] :where(h1, h2, h3, h4, h5, h6) {
  line-height: var(--lms-line-height-heading);
  text-wrap: balance;
}

html[data-lms-design-system] :where(p, li, dd, dt, label, input, select, textarea, button) {
  overflow-wrap: anywhere;
}

html[data-lms-design-system] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--lms-color-focus-ring);
  outline-offset: 2px;
  box-shadow: var(--lms-shadow-focus);
}

html[data-lms-design-system] :where(button, [role="button"], input, select, textarea):disabled,
html[data-lms-design-system] :where(button, [role="button"])[aria-disabled="true"] {
  cursor: not-allowed;
}

html[data-lms-design-system] ::selection {
  color: var(--lms-color-text-inverse);
  background: var(--lms-color-brand-700);
}

html[data-lms-design-system] .lms-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html[data-lms-design-system] .lms-sr-only-focusable:focus,
html[data-lms-design-system] .lms-sr-only-focusable:focus-visible {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}


/* U12 responsive data-surface contract: the wrapper owns horizontal scroll, never the page body. */
html[data-lms-design-system] .lms-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

html[data-lms-design-system] .lms-table-scroll > table {
  width: 100%;
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  html[data-lms-design-system] {
    scroll-behavior: auto !important;
  }

  html[data-lms-design-system] *,
  html[data-lms-design-system] *::before,
  html[data-lms-design-system] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


@media (forced-colors: active) {
  html[data-lms-design-system] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

  html[data-lms-design-system] :where(button, [role="button"], input, select, textarea):disabled,
  html[data-lms-design-system] :where(button, [role="button"])[aria-disabled="true"] {
    color: GrayText;
    border-color: GrayText;
    opacity: 1;
  }

  html[data-lms-design-system] .lms-skip-link:focus-visible {
    color: CanvasText;
    background: Canvas;
    border: 2px solid Highlight;
  }
}

@media print {
  html[data-lms-design-system] {
    color-scheme: light;
  }
}