/* Central interaction standard. Component CSS owns shape/material; this layer owns hover behavior. */
:root {
  --interaction-hover-duration: 150ms;
  --interaction-hover-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --interaction-hover-y: -1.5px;
  --interaction-click-y: -2px;
  --interaction-click-border: rgba(10, 132, 255, 0.16);
  --interaction-click-border-dark: rgba(255, 255, 255, 0.16);
  --interaction-click-tint: rgba(10, 132, 255, 0.08);
  --interaction-click-tint-dark: rgba(0, 0, 0, 0.16);
  --interaction-click-surface: rgba(10, 132, 255, 0.065);
  --interaction-click-surface-dark: rgba(34, 34, 40, 0.72);
  --ui-density-gap: 0.88;
  --ui-density-pad: 0.9;
  --ui-control-height: 40px;
  --ui-control-height-large: 46px;
  --ui-control-radius: 14px;
  --ui-date-selector-height: 44px;
  --ui-date-selector-radius: 15px;
  --ui-date-selector-surface-light: color-mix(in srgb, var(--paper-panel, #fffefa) 86%, var(--paper-accent) 4%);
  --ui-date-selector-surface-dark: color-mix(in srgb, rgba(255, 255, 255, 0.12) 68%, var(--paper-panel));
  --ui-date-selector-line-light: color-mix(in srgb, var(--paper-line-strong, #a9aca5) 44%, var(--paper-line, #d5d5ce));
  --ui-date-selector-line-dark: rgba(255, 255, 255, 0.16);
  --ui-control-pad-y: 8px;
  --ui-control-pad-x: 13px;
  --ui-panel-pad: 19px;
  --ui-panel-gap: 14px;
  --ui-glass-control-light: var(--paper-control, rgba(255, 255, 255, 0.64));
  --ui-glass-control-dark: rgba(120, 120, 128, 0.22);
  --ui-glass-line-light: rgba(60, 60, 67, 0.1);
  --ui-glass-line-dark: rgba(255, 255, 255, 0.11);
  --ui-glass-shadow-light: inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 0 0 1px var(--ui-glass-line-light);
  --ui-glass-shadow-dark: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px var(--ui-glass-line-dark);
}

:root body :is(
  [data-interaction="hover-only"]
) {
  transition:
    color var(--interaction-hover-duration) ease,
    background var(--interaction-hover-duration) ease,
    border-color var(--interaction-hover-duration) ease,
    box-shadow var(--interaction-hover-duration) ease,
    transform var(--interaction-hover-duration) var(--interaction-hover-ease) !important;
}

:root body :is(
  [data-interaction="hover-only"]
):where(:hover, :focus-visible, [data-tooltip-open="true"]) {
  transform: translateY(var(--interaction-hover-y)) !important;
}

:root body :is(
  button[data-action]:not(.provider-date-selector-trigger):not(.provider-modal-backdrop):not(.mobile-menu-backdrop):not(.provider-section-group-toggle):not(.paper-company-card-hit-area):not(.provider-integration-option):not(.credential-expiration-day):not(.credential-secret-toggle):not(.provider-resource-signal):not(.request-runner-optional-heading-toggle):not(.provider-dropdown-select-clear):not(.event-wizard-progress-main):not(.event-wizard-progress-add):not(.provider-dropdown-select-button.has-clear-action),
  [role="button"]:not(.provider-resource-row-summary)
):not(:disabled):not([aria-disabled="true"]) {
  transition:
    background var(--interaction-hover-duration) ease,
    border-color var(--interaction-hover-duration) ease,
    box-shadow var(--interaction-hover-duration) ease,
    filter var(--interaction-hover-duration) ease,
    transform var(--interaction-hover-duration) var(--interaction-hover-ease),
    opacity var(--interaction-hover-duration) ease !important;
}

:root body :is(
  button[data-action]:not(.provider-date-selector-trigger):not(.provider-modal-backdrop):not(.mobile-menu-backdrop):not(.provider-section-group-toggle):not(.paper-company-card-hit-area):not(.provider-integration-option):not(.credential-expiration-day):not(.credential-secret-toggle):not(.provider-resource-signal):not(.request-runner-optional-heading-toggle):not(.provider-dropdown-select-clear):not(.event-wizard-progress-main):not(.event-wizard-progress-add):not(.provider-dropdown-select-button.has-clear-action),
  [role="button"]:not(.provider-resource-row-summary)
):where(:hover):not(:disabled):not([aria-disabled="true"]) {
  box-shadow:
    var(--ui-glass-shadow-light),
    inset 0 0 0 1px var(--interaction-click-border) !important;
  transform: translateY(var(--interaction-click-y)) !important;
}

:root body :is(
  button[data-action]:not(.provider-date-selector-trigger):not(.provider-modal-backdrop):not(.mobile-menu-backdrop):not(.provider-section-group-toggle):not(.paper-company-card-hit-area):not(.provider-integration-option):not(.credential-expiration-day):not(.credential-secret-toggle):not(.provider-resource-signal):not(.request-runner-optional-heading-toggle):not(.provider-dropdown-select-clear):not(.event-wizard-progress-main):not(.event-wizard-progress-add):not(.provider-dropdown-select-button.has-clear-action),
  [role="button"]:not(.provider-resource-row-summary)
):where(:focus-visible, :focus-within):not(:hover):not(:disabled):not([aria-disabled="true"]) {
  box-shadow:
    var(--ui-glass-shadow-light),
    inset 0 0 0 1px var(--interaction-click-border) !important;
  transform: none !important;
}

:root[data-color-scheme="dark"] body :is(
  button[data-action]:not(.provider-date-selector-trigger):not(.provider-modal-backdrop):not(.mobile-menu-backdrop):not(.provider-section-group-toggle):not(.paper-company-card-hit-area):not(.provider-integration-option):not(.credential-expiration-day):not(.credential-secret-toggle):not(.provider-resource-signal):not(.request-runner-optional-heading-toggle):not(.provider-dropdown-select-clear):not(.event-wizard-progress-main):not(.event-wizard-progress-add):not(.provider-dropdown-select-button.has-clear-action),
  [role="button"]:not(.provider-resource-row-summary)
):where(:hover):not(:disabled):not([aria-disabled="true"]) {
  box-shadow:
    var(--ui-glass-shadow-dark),
    inset 0 0 0 1px var(--interaction-click-border-dark) !important;
}

:root[data-color-scheme="dark"] body :is(
  button[data-action]:not(.provider-date-selector-trigger):not(.provider-modal-backdrop):not(.mobile-menu-backdrop):not(.provider-section-group-toggle):not(.paper-company-card-hit-area):not(.provider-integration-option):not(.credential-expiration-day):not(.credential-secret-toggle):not(.provider-resource-signal):not(.request-runner-optional-heading-toggle):not(.provider-dropdown-select-clear):not(.event-wizard-progress-main):not(.event-wizard-progress-add):not(.provider-dropdown-select-button.has-clear-action),
  [role="button"]:not(.provider-resource-row-summary)
):where(:focus-visible, :focus-within):not(:hover):not(:disabled):not([aria-disabled="true"]) {
  box-shadow:
    var(--ui-glass-shadow-dark),
    inset 0 0 0 1px var(--interaction-click-border-dark) !important;
  transform: none !important;
}

:root body :is(
  .theme-toggle,
  .mobile-menu-toggle
):where(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
  background: var(--interaction-click-surface) !important;
}

:root[data-color-scheme="dark"] body :is(
  .theme-toggle,
  .mobile-menu-toggle
):where(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
  background: var(--interaction-click-surface-dark) !important;
}

:root body .credential-expiration-day[data-selected="true"]:where(:hover, :focus-visible) {
  background-color: transparent !important;
  background-image: linear-gradient(135deg, rgba(32, 151, 255, 0.98), rgba(91, 208, 145, 0.94)) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    inset 0 -10px 18px rgba(10, 132, 255, 0.14) !important;
  transform: translateY(-1px) !important;
}

:root[data-color-scheme="dark"] body .credential-expiration-day[data-selected="true"]:where(:hover, :focus-visible) {
  background-color: transparent !important;
  background-image: linear-gradient(135deg, rgba(87, 214, 145, 1), rgba(40, 158, 255, 0.98)) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    inset 0 -10px 18px rgba(10, 132, 255, 0.16) !important;
  transform: translateY(-1px) !important;
}

:root body .paper-company-card-hit-area,
:root body .paper-company-card-hit-area:where(:hover, :focus-visible, :focus-within, :active) {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

:root body .provider-list-expand {
  display: grid;
  will-change: grid-template-rows, opacity, transform;
}

:root body .provider-list-expand-content {
  min-height: 0;
}

:root body :is(.provider-modal-backdrop, .mobile-menu-backdrop):where(:hover, :focus-visible) {
  box-shadow: none !important;
  transform: none !important;
}

@media (hover: none) {
  :root body :is(
    [data-interaction="hover-only"],
    button[data-action]:not(.provider-modal-backdrop):not(.mobile-menu-backdrop):not(.provider-section-group-toggle):not(.paper-company-card-hit-area):not(.provider-integration-option):not(.credential-secret-toggle):not(.provider-resource-signal):not(.request-runner-optional-heading-toggle):not(.provider-dropdown-select-clear):not(.event-wizard-progress-main):not(.event-wizard-progress-add):not(.provider-dropdown-select-button.has-clear-action),
    [role="button"]:not(.provider-resource-row-summary)
  ):where(:hover, :focus-visible, :focus-within) {
    transform: none !important;
  }
}

/* Global density and control family. Loaded after the visual system. */
:root body :is(
  .mobile-menu-toggle
) {
  box-sizing: border-box !important;
  min-height: var(--ui-control-height) !important;
  border-radius: var(--ui-control-radius) !important;
  padding: var(--ui-control-pad-y) var(--ui-control-pad-x) !important;
  font-size: clamp(12px, 0.93em, 15px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em;
  box-shadow: var(--ui-glass-shadow-light) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.35) !important;
  backdrop-filter: blur(20px) saturate(1.35) !important;
}

:root body :is(
  .mobile-menu-toggle
) {
  background: var(--ui-glass-control-light) !important;
}

:root[data-color-scheme="dark"] body :is(
  .mobile-menu-toggle
) {
  box-shadow: var(--ui-glass-shadow-dark) !important;
}

:root[data-color-scheme="dark"] body :is(
  .mobile-menu-toggle
) {
  background: var(--ui-glass-control-dark) !important;
}

/* Date selection is a shared field surface, intentionally distinct from compact icon controls. */
:root body .provider-date-selector-trigger {
  box-sizing: border-box !important;
  min-height: var(--ui-date-selector-height) !important;
  border: 1px solid var(--ui-date-selector-line-light) !important;
  border-radius: var(--ui-date-selector-radius) !important;
  padding: 6px 7px 6px 8px !important;
  background: var(--ui-date-selector-surface-light) !important;
  box-shadow:
    var(--ui-glass-shadow-light),
    0 1px 3px rgba(60, 60, 67, 0.06) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.22) !important;
  backdrop-filter: blur(18px) saturate(1.22) !important;
  transition:
    background var(--interaction-hover-duration) ease,
    border-color var(--interaction-hover-duration) ease,
    box-shadow var(--interaction-hover-duration) ease,
    transform var(--interaction-hover-duration) var(--interaction-hover-ease) !important;
}

:root body .provider-date-selector-trigger:where(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--paper-accent) 36%, var(--ui-date-selector-line-light)) !important;
  background: color-mix(in srgb, var(--ui-date-selector-surface-light) 90%, var(--paper-accent) 10%) !important;
  box-shadow:
    var(--ui-glass-shadow-light),
    0 7px 16px rgba(10, 132, 255, 0.1) !important;
  transform: translateY(-1px) !important;
}

:root body .provider-date-selector[data-open="true"] .provider-date-selector-trigger {
  border-color: color-mix(in srgb, var(--paper-accent) 48%, var(--ui-date-selector-line-light)) !important;
  background: color-mix(in srgb, var(--ui-date-selector-surface-light) 86%, var(--paper-accent) 14%) !important;
  box-shadow:
    var(--ui-glass-shadow-light),
    0 8px 18px rgba(10, 132, 255, 0.12) !important;
}

:root body .provider-date-selector.is-compact .provider-date-selector-trigger {
  min-height: 34px !important;
  padding: 3px 5px 3px 6px !important;
}

:root[data-color-scheme="dark"] body .provider-date-selector-trigger {
  border-color: var(--ui-date-selector-line-dark) !important;
  background: var(--ui-date-selector-surface-dark) !important;
  box-shadow:
    var(--ui-glass-shadow-dark),
    0 1px 3px rgba(0, 0, 0, 0.18) !important;
}

:root[data-color-scheme="dark"] body .provider-date-selector-trigger:where(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--paper-accent) 46%, var(--ui-date-selector-line-dark)) !important;
  background: color-mix(in srgb, var(--ui-date-selector-surface-dark) 86%, var(--paper-accent) 14%) !important;
  box-shadow:
    var(--ui-glass-shadow-dark),
    0 8px 18px rgba(0, 0, 0, 0.24) !important;
}

:root[data-color-scheme="dark"] body .provider-date-selector[data-open="true"] .provider-date-selector-trigger {
  border-color: color-mix(in srgb, var(--paper-accent) 58%, var(--ui-date-selector-line-dark)) !important;
  background: color-mix(in srgb, var(--ui-date-selector-surface-dark) 80%, var(--paper-accent) 20%) !important;
  box-shadow:
    var(--ui-glass-shadow-dark),
    0 9px 20px rgba(0, 0, 0, 0.28) !important;
}

:root body button[data-action].provider-integration-option.is-active,
:root body button[data-action].provider-integration-option.is-active:where(:hover, :focus, :focus-visible, :focus-within) {
  border-color: transparent !important;
  background: rgba(10, 132, 255, 0.055) !important;
  background-clip: border-box !important;
  color: var(--ink) !important;
  outline: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(10, 132, 255, 0.46),
    0 6px 14px rgba(10, 132, 255, 0.055) !important;
  transition: transform var(--interaction-hover-duration) var(--interaction-hover-ease) !important;
}

:root[data-color-scheme="dark"] body button[data-action].provider-integration-option.is-active,
:root[data-color-scheme="dark"] body button[data-action].provider-integration-option.is-active:where(:hover, :focus, :focus-visible, :focus-within) {
  background: rgba(10, 132, 255, 0.105) !important;
  color: var(--ink) !important;
  box-shadow:
    inset 0 0 0 1px rgba(90, 200, 250, 0.48),
    0 8px 18px rgba(10, 132, 255, 0.075) !important;
}

:root body .provider-integration-row.is-active,
:root body .provider-integration-row.is-active:where(:hover, :focus-within) {
  border-color: transparent !important;
  background: rgba(10, 132, 255, 0.055) !important;
  background-clip: border-box !important;
  color: var(--ink) !important;
  outline: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(10, 132, 255, 0.46),
    0 6px 14px rgba(10, 132, 255, 0.055) !important;
}

:root[data-color-scheme="dark"] body .provider-integration-row.is-active,
:root[data-color-scheme="dark"] body .provider-integration-row.is-active:where(:hover, :focus-within) {
  background: rgba(10, 132, 255, 0.105) !important;
  box-shadow:
    inset 0 0 0 1px rgba(90, 200, 250, 0.48),
    0 8px 18px rgba(10, 132, 255, 0.075) !important;
}

:root body .provider-integration-row button[data-action].provider-integration-option,
:root body .provider-integration-row button[data-action].provider-integration-option:where(:hover, :focus, :focus-visible, :focus-within),
:root body .provider-integration-row button[data-action].provider-integration-option.is-active,
:root body .provider-integration-row button[data-action].provider-integration-option.is-active:where(:hover, :focus, :focus-visible, :focus-within) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}

:root body .provider-integration-assignment.provider-select-field {
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
}

:root body .provider-integration-assignment.provider-select-field > span {
  padding-left: 0 !important;
}

:root body :is(.dashboard-topbar, .provider-page-panel, .provider-create-modal, .login-card) {
  gap: var(--ui-panel-gap) !important;
  padding: var(--ui-panel-pad) !important;
}

:root body .login-card {
  min-height: min(500px, calc(100dvh - 96px)) !important;
  padding-top: 34px !important;
}

:root body :is(.dashboard-main, .provider-page-content, .provider-page-menu, .provider-requests-list, .provider-request-header-editor, .provider-create-form, .login-form, .auth-actions) {
  gap: calc(1rem * var(--ui-density-gap)) !important;
}

:root body .request-setup-flow-section {
  padding: calc(14px * var(--ui-density-pad)) !important;
}

:root body .credential-expiration-day {
  min-height: 30px !important;
  border-radius: 11px !important;
  padding: 5px 0 !important;
  font-size: 13px !important;
}

:root body .credential-secret-toggle {
  min-height: 28px !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 10px !important;
}

:root body .credential-secret-toggle:where(:hover, :focus-visible):not(:disabled) {
  transform: translateY(-50%) !important;
}

:root body .credential-secret-toggle:active:not(:disabled) {
  transform: translateY(-50%) scale(0.96) !important;
}

:root body :is(
  .stored-credential-input-stack[data-credential-type="password"],
  .stored-credential-input-stack[data-credential-type="certificate"]
) {
  gap: 5px !important;
}

:root body :is(
  .stored-credential-input-stack[data-credential-type="password"],
  .stored-credential-input-stack[data-credential-type="certificate"]
) .provider-control-field {
  gap: 4px !important;
}

:root body :is(
  .stored-credential-input-stack[data-credential-type="password"],
  .stored-credential-input-stack[data-credential-type="certificate"]
) .credential-ttl-composer {
  gap: 4px !important;
}

:root body :is(
  .stored-credential-input-stack[data-credential-type="password"],
  .stored-credential-input-stack[data-credential-type="certificate"]
) .credential-ttl-unit-grid {
  gap: 6px !important;
}

:root body .request-header-line {
  min-height: 44px !important;
  border-radius: 14px !important;
  padding: 10px 13px !important;
  font-size: 15px !important;
}

:root body .workspace-heading h2 {
  font-size: clamp(25px, 3vw, 28px) !important;
}

:root body .login-title {
  font-size: clamp(31px, 7vw, 34px) !important;
}

@media (min-width: 721px) {
  :root body .app-shell {
    padding: 24px !important;
  }

  :root body .dashboard-topbar {
    height: 70px !important;
  }

  :root body .dashboard-main {
    gap: 18px !important;
    padding-top: 20px !important;
  }
}

@media (max-width: 720px) {
  :root body {
    --ui-panel-pad: 17px;
    --ui-control-height: 38px;
    --ui-control-height-large: 44px;
    --ui-control-pad-y: 8px;
    --ui-control-pad-x: 12px;
  }

  :root body .app-shell {
    padding-inline: 22px !important;
  }

  :root body :is(.dashboard-topbar, .provider-page-panel, .provider-create-modal, .login-card) {
    border-radius: 24px !important;
  }

  /*
   * Safari zooms editable controls with text below 16px on focus. Keep that
   * browser behavior off by default; a deliberately exceptional control can
   * opt in with data-allow-mobile-focus-zoom.
   */
  :root body [data-mobile-focus-zoom-control]:not([data-allow-mobile-focus-zoom]) {
    font-size: 16px !important;
  }

}

:root body .provider-create-modal.provider-stored-credential-create-modal :is(
  .stored-credential-input-stack[data-credential-type="password"],
  .stored-credential-input-stack[data-credential-type="certificate"]
) {
  gap: 2px !important;
  min-height: 198px !important;
}

:root body .provider-create-modal.provider-stored-credential-create-modal :is(
  .stored-credential-input-stack[data-credential-type="password"],
  .stored-credential-input-stack[data-credential-type="certificate"]
) .provider-control-field {
  gap: 3px !important;
}

:root body .provider-create-modal.provider-stored-credential-create-modal :is(
  .stored-credential-input-stack[data-credential-type="password"],
  .stored-credential-input-stack[data-credential-type="certificate"]
) .credential-ttl-composer {
  gap: 3px !important;
}

:root body .provider-create-modal.provider-stored-credential-create-modal :is(
  .stored-credential-input-stack[data-credential-type="password"],
  .stored-credential-input-stack[data-credential-type="certificate"]
) .credential-ttl-unit {
  gap: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
  :root body :is(
    [data-interaction="hover-only"],
    button[data-action]:not(.provider-modal-backdrop):not(.mobile-menu-backdrop):not(.provider-section-group-toggle):not(.paper-company-card-hit-area):not(.provider-integration-option):not(.credential-secret-toggle):not(.provider-resource-signal):not(.request-runner-optional-heading-toggle):not(.provider-dropdown-select-clear):not(.event-wizard-progress-main):not(.event-wizard-progress-add):not(.provider-dropdown-select-button.has-clear-action),
    [role="button"]:not(.provider-resource-row-summary)
  ) {
    transition: none !important;
  }

  :root body :is(
    [data-interaction="hover-only"],
    button[data-action]:not(.provider-modal-backdrop):not(.mobile-menu-backdrop):not(.provider-section-group-toggle):not(.paper-company-card-hit-area):not(.provider-integration-option):not(.credential-secret-toggle):not(.provider-resource-signal):not(.request-runner-optional-heading-toggle):not(.provider-dropdown-select-clear):not(.event-wizard-progress-main):not(.event-wizard-progress-add):not(.provider-dropdown-select-button.has-clear-action),
    [role="button"]:not(.provider-resource-row-summary)
  ):where(:hover, :focus-visible, :focus-within) {
    transform: none !important;
  }
}

:root body button[data-action].provider-compact-action-button {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  max-height: var(--ui-control-height) !important;
  min-width: 0 !important;
  border-radius: var(--ui-control-radius) !important;
  padding: var(--ui-control-pad-y) var(--ui-control-pad-x) !important;
  font-size: clamp(12px, 0.93em, 15px) !important;
  font-weight: 520 !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
}