/* Iran Azmun shared UI foundation — UIBASE-03..10 */
:root {
  color-scheme: light;

  --ds-color-bg: #eef4f8;
  --ds-color-page: #f8fbfd;
  --ds-color-surface: #ffffff;
  --ds-color-surface-subtle: #f1f7fa;
  --ds-color-text: #17263c;
  --ds-color-muted: #667085;
  --ds-color-line: #d7e1ea;
  --ds-color-line-strong: #c7d4e1;
  --ds-color-primary: #0f766e;
  --ds-color-primary-hover: #0b5f59;
  --ds-color-primary-soft: #d9f4ef;
  --ds-color-success: #08785d;
  --ds-color-success-soft: #e0f3eb;
  --ds-color-warning: #9a6500;
  --ds-color-warning-soft: #fff2d7;
  --ds-color-danger: #b42318;
  --ds-color-danger-soft: #fee4e2;
  --ds-color-focus: #0f766e;

  --ds-font-family: "Dana", "Vazirmatn", Tahoma, Arial, sans-serif;
  --ds-font-xs: 0.75rem;
  --ds-font-sm: 0.875rem;
  --ds-font-md: 1rem;
  --ds-font-lg: 1.125rem;
  --ds-font-xl: clamp(1.25rem, 1.5vw, 1.5rem);

  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;

  --ds-radius-sm: 0.5rem;
  --ds-radius-md: 0.75rem;
  --ds-radius-lg: 1rem;
  --ds-radius-xl: 1.25rem;
  --ds-radius-pill: 999px;
  --ds-shadow-sm: 0 8px 20px rgba(16, 24, 40, 0.05);
  --ds-shadow-lg: 0 18px 50px rgba(23, 38, 60, 0.12);
  --ds-focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.22);

  --ds-z-base: 1;
  --ds-z-sticky: 20;
  --ds-z-dropdown: 80;
  --ds-z-drawer: 120;
  --ds-z-toast: 160;
  --ds-z-modal: 200;

  --ds-breakpoint-mobile: 30rem;
  --ds-breakpoint-tablet: 48rem;
  --ds-breakpoint-desktop: 64rem;
  --ds-control-height: 2.75rem;
  --ds-page-gutter: clamp(1rem, 3vw, 2rem);

  /* Compatibility aliases while page-level CSS is migrated incrementally. */
  --bg: var(--ds-color-bg);
  --page: var(--ds-color-page);
  --surface: var(--ds-color-surface);
  --surface-2: var(--ds-color-surface-subtle);
  --soft: var(--ds-color-surface-subtle);
  --text: var(--ds-color-text);
  --ink: var(--ds-color-text);
  --muted: var(--ds-color-muted);
  --line: var(--ds-color-line);
  --line-strong: var(--ds-color-line-strong);
  --primary: var(--ds-color-primary);
  --primary-dark: var(--ds-color-primary-hover);
  --primary-soft: var(--ds-color-primary-soft);
  --safe: var(--ds-color-success);
  --warning: var(--ds-color-warning);
  --danger: var(--ds-color-danger);
  --shadow: var(--ds-shadow-lg);
  --shadow-soft: var(--ds-shadow-lg);
  --shadow-card: var(--ds-shadow-sm);
  font-family: var(--ds-font-family);
}

html {
  min-inline-size: 20rem;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-block-size: 100vh;
  min-block-size: 100dvh;
  overflow-wrap: anywhere;
  font-family: var(--ds-font-family);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

img,
svg,
video,
canvas {
  max-inline-size: 100%;
}

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

button,
[role="button"],
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
[role="button"] {
  touch-action: manipulation;
}

:where(button, a[href], input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--ds-color-focus);
  outline-offset: 3px;
  box-shadow: var(--ds-focus-ring);
}

:where(button, input, select, textarea):disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select {
  min-block-size: var(--ds-control-height) !important;
}

button,
[role="button"],
.primary,
.secondary,
.quiet,
.icon-button,
.icon-btn {
  min-block-size: var(--ds-control-height) !important;
  min-inline-size: var(--ds-control-height) !important;
}

:where(input, textarea, select)[aria-invalid="true"] {
  border-color: var(--ds-color-danger) !important;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14);
}

.form-error,
[role="alert"] {
  color: var(--ds-color-danger);
}

.notice[role="status"],
[aria-live="polite"] {
  overflow-wrap: anywhere;
}

/* Progressive custom-select enhancement. The native control stays as the data source. */
select.ds-native-select {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  min-block-size: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ds-select {
  position: relative;
  display: block;
  inline-size: 100%;
  color: var(--ds-color-text);
}

.ds-select.is-open {
  z-index: var(--ds-z-dropdown);
}

.ds-select__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  inline-size: 100%;
  min-block-size: var(--ds-control-height);
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--ds-color-line-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
  text-align: right;
}

.ds-select__button::after {
  content: "";
  inline-size: 0.55rem;
  block-size: 0.55rem;
  flex: 0 0 auto;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

.ds-select.is-open .ds-select__button::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.ds-select__list {
  position: absolute;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline: 0;
  z-index: var(--ds-z-dropdown);
  display: grid;
  gap: 0.2rem;
  max-block-size: min(18rem, 45vh);
  margin: 0;
  padding: 0.4rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ds-color-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-shadow-lg);
  list-style: none;
}

.ds-select__option {
  display: flex;
  align-items: center;
  inline-size: 100%;
  min-block-size: var(--ds-control-height);
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-color-text);
  text-align: right;
}

.ds-select__option:hover,
.ds-select__option:focus-visible,
.ds-select__option[aria-selected="true"] {
  background: var(--ds-color-primary-soft);
  color: var(--ds-color-primary-hover);
}

.ds-select__option:disabled {
  opacity: 0.45;
}

dialog {
  max-inline-size: calc(100% - 2rem);
  max-block-size: calc(100dvh - 2rem);
  overscroll-behavior: contain;
}

dialog::backdrop {
  background: rgba(15, 28, 44, 0.5);
  backdrop-filter: blur(2px);
}

.table-wrap,
.panel,
.main-panel,
.workspace main,
.content,
.screen {
  min-inline-size: 0;
}

.table-wrap {
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ds-z-drawer) - 1);
  border: 0;
  background: rgba(15, 28, 44, 0.42);
}

.admin-layout:not(.menu-open) .menu-backdrop {
  display: none;
}

@media (min-width: 48.8125rem) {
  .menu-backdrop {
    display: none !important;
  }
}

@media (max-width: 48rem) {
  :root {
    --ds-page-gutter: 1rem;
  }

  dialog {
    inline-size: calc(100% - 1rem) !important;
    max-inline-size: calc(100% - 1rem) !important;
    max-block-size: calc(100dvh - 1rem) !important;
    border-radius: var(--ds-radius-lg) !important;
  }

  .editor-form {
    max-block-size: calc(100dvh - 1rem) !important;
    padding: var(--ds-space-4) !important;
  }

  .dialog-actions {
    position: sticky;
    inset-block-end: calc(-1 * var(--ds-space-4));
    z-index: var(--ds-z-sticky);
    margin-inline: calc(-1 * var(--ds-space-4));
    padding: var(--ds-space-4) !important;
    padding-block-end: calc(var(--ds-space-4) + env(safe-area-inset-bottom));
    background: var(--ds-color-surface);
    box-shadow: 0 -8px 20px rgba(16, 24, 40, 0.06);
  }

  .dialog-actions > button {
    flex: 1 1 8rem;
  }

  .section-head,
  .options-head {
    align-items: stretch !important;
    flex-direction: column;
    gap: var(--ds-space-3);
  }

  .section-head > button,
  .options-head > button {
    inline-size: 100%;
  }

  .item-actions {
    inline-size: 100%;
  }

  .item-actions > button {
    flex: 1 1 7rem;
  }

  .filters,
  .filters.compact,
  .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .span-2,
  .wide {
    grid-column: auto !important;
  }

  .login-card {
    padding: var(--ds-space-5) !important;
    border-radius: var(--ds-radius-xl) !important;
  }

  .topbar,
  .workspace header {
    min-block-size: 4.5rem;
    block-size: auto !important;
  }

  .content {
    padding-inline: var(--ds-space-4) !important;
  }
}

@media (max-width: 24.375rem) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--ds-space-2) !important;
  }

  .stat {
    padding: var(--ds-space-3) !important;
  }

  .stat strong {
    font-size: 1.45rem !important;
  }

  .user-box,
  .account {
    gap: var(--ds-space-2) !important;
  }

  .user-box > span,
  .account small {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  :where(button, a, input, select, textarea):focus-visible {
    outline: 3px solid CanvasText;
  }
}