/*
 * DOTE.CRM interaction and motion contract, P5.0/P5.1.
 * Loaded after shared and route styles. It standardizes small interaction
 * feedback without replacing component layout, business state, or native UI.
 */

@media screen {
  .crm-ui-surface:not(.control-body) :is(
    .button,
    .icon-button,
    .note-icon-button,
    .lead-row-action,
    .plf-submit,
    [data-ui-component='button']
  ),
  .crm-ui-surface.control-body :is(
    .control-button,
    .icon-button,
    .note-icon-button,
    .lead-row-action,
    [data-ui-component='button']
  ) {
    transition-duration: var(--crm-motion-fast, 140ms);
    transition-timing-function: var(--crm-motion-ease-standard, cubic-bezier(.2, .65, .3, 1));
  }

  .crm-ui-surface:not(.control-body) :is(
    .nav-item,
    .nav-group-toggle,
    .nav-group-toggle .nav-group-chevron
  ),
  .crm-ui-surface.control-body :is(
    .control-nav-group-toggle,
    .control-nav-group-toggle .control-nav-chevron,
    .control-nav > a,
    .control-nav-submenu a
  ) {
    transition-duration: var(--crm-motion-fast, 140ms);
    transition-timing-function: var(--crm-motion-ease-standard, cubic-bezier(.2, .65, .3, 1));
  }

  .crm-ui-surface :is(
    .nav-group-chevron,
    .control-nav-chevron,
    .invoice-collapsible-chevron,
    .accounting-payables-caret,
    .customer-call-filter-toggle,
    .native-filter-chevron,
    .sales-collapsible-summary > i,
    .workspace-switcher-chevron
  ) {
    font-size: 0;
    line-height: 0;
    transform: none;
    transition: none;
  }

  .crm-ui-surface :is(
    .nav-group-chevron,
    .control-nav-chevron,
    .invoice-collapsible-chevron,
    .accounting-payables-caret,
    .native-filter-chevron,
    .sales-collapsible-summary > i,
    .workspace-switcher-chevron
  ) {
    display: inline-grid;
    place-items: center;
    flex: 0 0 14px;
    inline-size: 14px;
    block-size: 14px;
  }

  /* Keep the tappable 28px customer-filter control; only its inner glyph changes. */
  .crm-ui-surface :is(
    .nav-group-chevron,
    .control-nav-chevron,
    .invoice-collapsible-chevron,
    .accounting-payables-caret,
    .customer-call-filter-toggle,
    .native-filter-chevron,
    .sales-collapsible-summary > i,
    .workspace-switcher-chevron
  )::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5.5 7.5 4.5 4.5 4.5-4.5' stroke='%23766fce' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    display: block;
    inline-size: 14px;
    block-size: 14px;
    border: 0;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform var(--crm-motion-standard, 180ms) var(--crm-motion-ease-standard, cubic-bezier(.2, .65, .3, 1));
  }

  .crm-ui-surface .native-filter-chevron {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--crm-color-primary, #6257df);
  }

  .crm-ui-surface.control-body .control-nav-group-toggle .control-nav-chevron {
    font-size: 0;
    line-height: 0;
    transform: none;
    transition: none;
  }

  .crm-ui-surface :is(
    .nav-group[open] .nav-group-chevron,
    .control-nav-group[open] .control-nav-chevron,
    .invoice-collapsible[open] .invoice-collapsible-chevron,
    .accounting-payables-panel[open] .accounting-payables-caret,
    .customer-call-filters[open] .customer-call-filter-toggle,
    .native-excel-filters[open] .native-filter-chevron,
    .sales-filter-panel[open] .sales-collapsible-summary > i,
    .sales-bulk-panel[open] .sales-collapsible-summary > i
  ) {
    font-size: 0;
    line-height: 0;
    transform: none;
    transition: none;
  }

  .crm-ui-surface :is(
    .nav-group[open] .nav-group-chevron,
    .control-nav-group[open] .control-nav-chevron,
    .invoice-collapsible[open] .invoice-collapsible-chevron,
    .accounting-payables-panel[open] .accounting-payables-caret,
    .customer-call-filters[open] .customer-call-filter-toggle,
    .native-excel-filters[open] .native-filter-chevron,
    .sales-filter-panel[open] .sales-collapsible-summary > i,
    .sales-bulk-panel[open] .sales-collapsible-summary > i
  )::before {
    transform: rotate(180deg);
  }

  .crm-ui-surface details > summary::marker {
    color: var(--crm-color-primary, #6257df);
  }

  /* Native disclosure stays intact; capable browsers animate its content without JS. */
  @supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    .crm-ui-surface details {
      interpolate-size: allow-keywords;
    }

    .crm-ui-surface details::details-content {
      interpolate-size: allow-keywords;
      block-size: 0;
      overflow: clip;
      opacity: 0;
      transition:
        block-size var(--crm-motion-standard, 180ms) var(--crm-motion-ease-standard, cubic-bezier(.2, .65, .3, 1)),
        opacity var(--crm-motion-fast, 140ms) var(--crm-motion-ease-standard, cubic-bezier(.2, .65, .3, 1)),
        content-visibility var(--crm-motion-standard, 180ms) allow-discrete;
    }

    .crm-ui-surface details[open]::details-content {
      block-size: auto;
      opacity: 1;
    }

    @starting-style {
      .crm-ui-surface details[open]::details-content {
        block-size: 0;
        opacity: 0;
      }
    }
  }

  .crm-ui-surface :where(
    a[href],
    button:not(:disabled),
    [role='button'],
    [role='tab'],
    summary,
    [tabindex]:not([tabindex='-1'])
  ):focus-visible {
    outline: 2px solid var(--crm-focus-color, #6257df);
    outline-offset: 2px;
  }

  .crm-ui-surface :where(
    .button.primary:not(:disabled):not([aria-disabled='true']):not(.is-disabled),
    .control-button.primary:not(:disabled):not([aria-disabled='true']):not(.is-disabled),
    .plf-submit:not(:disabled),
    [data-ui-component='button'][data-ui-emphasis='primary']:not(:disabled):not([aria-disabled='true'])
  ) {
    transition-property: transform, color, background-color, border-color, box-shadow, opacity;
    transition-duration: var(--crm-motion-fast, 140ms);
  }

  .crm-ui-surface :where(
    .icon-button:not(.danger):not(:disabled):not([aria-disabled='true']),
    .note-icon-button:not(.danger):not(:disabled):not([aria-disabled='true']),
    .lead-row-action:not(.danger):not(:disabled):not([aria-disabled='true'])
  ) {
    transition-duration: var(--crm-motion-fast, 140ms);
  }
}

@media screen and (hover: hover) and (pointer: fine) {
  .crm-ui-surface :where(
    .button.primary:not(:disabled):not([aria-disabled='true']):not(.is-disabled),
    .control-button.primary:not(:disabled):not([aria-disabled='true']):not(.is-disabled),
    .plf-submit:not(:disabled),
    [data-ui-component='button'][data-ui-emphasis='primary']:not(:disabled):not([aria-disabled='true'])
  ):is(:hover, :focus-visible) {
    transform: translateY(calc(-1 * var(--crm-motion-distance-small, 2px)));
  }

  .crm-ui-surface :where(
    .icon-button:not(.danger):not(:disabled):not([aria-disabled='true']),
    .note-icon-button:not(.danger):not(:disabled):not([aria-disabled='true']),
    .lead-row-action:not(.danger):not(:disabled):not([aria-disabled='true'])
  ):is(:hover, :focus-visible) {
    color: var(--crm-primary-deep, #4b41c2);
    border-color: #c9c5f5;
    background-color: var(--crm-primary-wash, #eeecff);
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  .crm-ui-surface :where(
    .button.primary,
    .control-button.primary,
    .plf-submit,
    [data-ui-component='button'][data-ui-emphasis='primary']
  ):is(:hover, :focus-visible, :active) {
    transform: none !important;
  }

  .crm-ui-surface :is(
    .nav-group-chevron::before,
    .control-nav-chevron::before,
    .invoice-collapsible-chevron::before,
    .accounting-payables-caret::before,
    .customer-call-filter-toggle::before,
    .native-filter-chevron::before,
    .sales-collapsible-summary > i::before,
    .workspace-switcher-chevron::before
  ),
  .crm-ui-surface details::details-content {
    transition: none;
  }
}

@media screen and (forced-colors: active) {
  .crm-ui-surface :where(
    a[href],
    button:not(:disabled),
    [role='button'],
    [role='tab'],
    summary,
    [tabindex]:not([tabindex='-1'])
  ):focus-visible {
    outline-color: Highlight;
  }
}