/*
 * DOTE.CRM UI foundation — maintainable RTL surface contract.
 *
 * This file is the stable home for shared tokens, safe primitives and new
 * data-ui contracts. Legacy app.css/control.css remain compatible and the
 * existing crm-ui-system.css remains the visual compatibility layer during
 * the migration. New reusable rules must prefer these tokens, logical
 * properties and data-ui hooks instead of page-specific overrides.
 */

@layer crm.tokens, crm.foundation, crm.components, crm.utilities, crm.overrides;

@layer crm.tokens {
  :root {
    --crm-color-bg: #f6f8fc;
    --crm-color-surface: #ffffff;
    --crm-color-surface-soft: #f8faff;
    --crm-color-surface-tint: #f2f5ff;
    --crm-color-ink: #1b2740;
    --crm-color-ink-soft: #394862;
    --crm-color-muted: #78849a;
    --crm-color-border: #e4e9f1;
    --crm-color-border-strong: #d5deea;
    --crm-color-primary: #6257df;
    --crm-color-primary-strong: #4b41c2;
    --crm-color-primary-soft: #eeecff;
    --crm-color-success: #1c9a78;
    --crm-color-warning: #b97817;
    --crm-color-danger: #c3485c;
    --crm-color-info: #2f78a7;

    /* Legacy app.css aliases. Values intentionally preserve the current UI. */
    --crm-legacy-bg: #f7f8fc;
    --crm-legacy-surface: #ffffff;
    --crm-legacy-surface-soft: #f4f3ff;
    --crm-legacy-line: #e8e9f2;
    --crm-legacy-text: #17263a;
    --crm-legacy-muted: #777b96;
    --crm-legacy-primary: #123a63;
    --crm-legacy-primary-dark: #0a2949;
    --crm-legacy-primary-soft: #e8f0f8;
    --crm-legacy-success: #1d956a;
    --crm-legacy-danger: #d94d64;
    --crm-legacy-warning: #d38a18;
    --crm-legacy-shadow: 0 14px 36px rgba(35, 39, 84, .08);
    --bg: var(--crm-legacy-bg);
    --surface: var(--crm-legacy-surface);
    --surface-soft: var(--crm-legacy-surface-soft);
    --line: var(--crm-legacy-line);
    --text: var(--crm-legacy-text);
    --muted: var(--crm-legacy-muted);
    --primary: var(--crm-legacy-primary);
    --primary-dark: var(--crm-legacy-primary-dark);
    --primary-soft: var(--crm-legacy-primary-soft);
    --success: var(--crm-legacy-success);
    --danger: var(--crm-legacy-danger);
    --warning: var(--crm-legacy-warning);
    --shadow: var(--crm-legacy-shadow);

    /* Legacy control.css aliases. */
    --crm-control-primary: #123a63;
    --crm-control-soft: #e8f0f8;
    --crm-control-line: #e3e8ef;
    --crm-control-bg: #f5f7fa;
    --control-primary: var(--crm-control-primary);
    --control-soft: var(--crm-control-soft);
    --control-line: var(--crm-control-line);
    --control-bg: var(--crm-control-bg);

    /* Compatibility aliases for the current shared visual layer. */
    --crm-ink: var(--crm-color-ink);
    --crm-ink-soft: var(--crm-color-ink-soft);
    --crm-muted: var(--crm-color-muted);
    --crm-border: var(--crm-color-border);
    --crm-border-strong: var(--crm-color-border-strong);
    --crm-surface: var(--crm-color-surface);
    --crm-surface-soft: var(--crm-color-surface-soft);
    --crm-surface-tint: var(--crm-color-surface-tint);
    --crm-primary: var(--crm-color-primary);
    --crm-primary-deep: var(--crm-color-primary-strong);
    --crm-primary-wash: var(--crm-color-primary-soft);
    --crm-teal: var(--crm-color-success);

    --crm-space-1: 4px;
    --crm-space-2: 8px;
    --crm-space-3: 12px;
    --crm-space-4: 16px;
    --crm-space-5: 20px;
    --crm-space-6: 24px;
    --crm-space-7: 32px;

    /* Shared type scale. Components opt in; legacy page typography stays intact. */
    --crm-font-family-persian: Vazirmatn, Tahoma, Arial, sans-serif;
    --crm-font-xs: 0.75rem;
    --crm-font-sm: 0.8125rem;
    --crm-font-body: 0.875rem;
    --crm-font-lead: 1rem;
    --crm-font-title: 1.25rem;
    --crm-font-display: 1.5rem;
    --crm-line-tight: 1.45;
    --crm-line-body: 1.75;

    --crm-radius-sm: 10px;
    --crm-radius-md: 14px;
    --crm-radius-lg: 18px;
    --crm-control-min-height: 40px;
    --crm-control-height-compact: 36px;
    --crm-control-height-touch: 44px;
    --crm-focus-color: rgba(98, 87, 223, .72);
    --crm-focus-ring: 0 0 0 3px rgba(98, 87, 223, .22);
    --crm-disabled-opacity: .58;
    --crm-control-gap: var(--crm-space-2);
    --crm-shadow-sm: 0 5px 16px rgba(33, 47, 79, .045);
    --crm-shadow-md: 0 14px 34px rgba(33, 47, 79, .09);
    --crm-motion-fast: 140ms;
    --crm-motion-standard: 180ms;
    --crm-motion-overlay: 220ms;
    --crm-motion-ease-standard: cubic-bezier(.2, .65, .3, 1);
    --crm-motion-ease-enter: cubic-bezier(.16, 1, .3, 1);
    --crm-motion-ease-exit: cubic-bezier(.4, 0, 1, 1);
    --crm-motion-distance-small: 2px;
    --crm-content-max: 1440px;
  }
}

@layer crm.foundation {
  @media screen {
    .crm-ui-surface,
    .crm-ui-surface *,
    .crm-ui-surface *::before,
    .crm-ui-surface *::after {
      box-sizing: border-box;
    }

    .crm-ui-surface {
      min-inline-size: 0;
      color: var(--crm-color-ink);
      text-rendering: optimizeLegibility;
    }

    .crm-ui-surface :where(img, svg, video, canvas) {
      max-inline-size: 100%;
    }

    .crm-ui-surface :where(button, input, select, textarea) {
      font: inherit;
    }

    .crm-ui-surface :where(button, [role='button'], a) {
      -webkit-tap-highlight-color: transparent;
    }

    .crm-ui-surface :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
      outline: 3px solid var(--crm-focus-color);
      outline-offset: 2px;
    }

    .crm-ui-surface :where(main, section, article, aside, form, fieldset, .panel, .table-card, .content-wrap, .control-content) {
      min-inline-size: 0;
    }

    .crm-ui-surface :where(code, pre, kbd, samp, [dir='ltr'], [data-direction='ltr']) {
      direction: ltr;
      unicode-bidi: plaintext;
    }

    .crm-ui-surface :where(pre, code, kbd, samp) {
      text-align: start;
    }
  }
}

@layer crm.components {
  @media screen {
    .crm-ui-surface :where([data-ui-container]) {
      container-type: inline-size;
      container-name: crm-surface;
    }

    .crm-ui-surface :where([data-ui-grid]) {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
      gap: var(--crm-space-4);
      min-inline-size: 0;
    }

    .crm-ui-surface :where([data-ui-stack]) {
      display: grid;
      gap: var(--crm-space-3);
      min-inline-size: 0;
    }

    .crm-ui-surface :where([data-ui-cluster]) {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--crm-space-2);
      min-inline-size: 0;
    }

    .crm-ui-surface :where([data-ui-scroll='x']) {
      max-inline-size: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-inline: contain;
      scrollbar-gutter: stable;
    }

    .crm-ui-surface :where([data-ui-scroll='both']) {
      max-inline-size: 100%;
      overflow: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
    }

    .crm-ui-surface :where([data-ui-surface]) {
      border: 1px solid var(--crm-color-border);
      border-radius: var(--crm-radius-md);
      background: var(--crm-color-surface);
      box-shadow: var(--crm-shadow-sm);
    }

    @container crm-surface (max-width: 680px) {
      .crm-ui-surface :where([data-ui-grid~='compact']) {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--crm-space-3);
      }

      .crm-ui-surface :where([data-ui-cluster~='stack-small']) {
        align-items: stretch;
        flex-direction: column;
      }
    }
  }
}

@layer crm.utilities {
  @media screen {
    .crm-ui-surface :where(.ui-visually-hidden) {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }

    .crm-ui-surface :where(.ui-text-muted) {
      color: var(--crm-color-muted);
    }

    .crm-ui-surface :where(.ui-bidi-safe) {
      unicode-bidi: plaintext;
    }

    .crm-ui-surface :where(.ui-no-shrink) {
      flex: 0 0 auto;
    }

    .crm-ui-surface :where([data-ui-text='caption']) {
      font-size: var(--crm-font-xs);
      line-height: var(--crm-line-body);
    }

    .crm-ui-surface :where([data-ui-text='body']) {
      font-size: var(--crm-font-body);
      line-height: var(--crm-line-body);
    }

    .crm-ui-surface :where([data-ui-text='lead']) {
      font-size: var(--crm-font-lead);
      line-height: var(--crm-line-body);
    }

    .crm-ui-surface :where([data-ui-text='title']) {
      font-size: var(--crm-font-title);
      line-height: var(--crm-line-tight);
    }

    .crm-ui-surface :where([data-ui-text='display']) {
      font-size: var(--crm-font-display);
      line-height: var(--crm-line-tight);
    }
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  .crm-ui-surface :where(*, *::before, *::after) {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}

/* P1 shared component contract: low-specificity, RTL-safe, legacy-compatible. */
@media screen {
  .crm-ui-surface :where(.button, .control-button) {
    min-block-size: var(--crm-control-min-height);
    max-inline-size: 100%;
  }

  .crm-ui-surface :where(.panel, .control-card, .table-card) {
    min-inline-size: 0;
  }

  .crm-ui-surface :where(.form-grid, .control-form-grid, .toolbar, .control-actions, .form-actions) {
    min-inline-size: 0;
  }

  .crm-ui-surface :where(.table-card, .permission-table-wrap, .lead-results-table) {
    max-inline-size: 100%;
    overscroll-behavior-inline: contain;
  }

  .crm-ui-surface :where(.table-card > table, .permission-table-wrap > table, .lead-results-table table) {
    max-inline-size: none;
  }
}