/* Keep interaction paint separate from layout transforms, state arrows and
   loading animations. Important rules in this layer also cover later skins. */
@layer alfares-control-interactions {
  :root {
    --alfares-control-on-primary: #fff;
    --alfares-control-palette-primary: var(--my-shell-primary, var(--auth-primary, var(--p-blue, var(--blue-700, #2563eb))));
  }

  :is(body[data-auth-screen="login"], body.mysite-register-body) {
    --alfares-control-palette-primary: var(--auth-primary, var(--my-shell-primary, var(--p-blue, var(--blue-700, #2563eb))));
  }

  html[data-my-theme="green"] :is(body[data-auth-screen="login"], body.mysite-register-body),
  html[data-my-theme="dark"] :is(body[data-auth-screen="login"], body.mysite-register-body),
  html[data-my-theme="orange"] :is(body[data-auth-screen="login"], body.mysite-register-body) {
    --alfares-control-on-primary: #071423;
  }

  :is(
    button, input[type="button"], input[type="submit"], input[type="reset"], input[type="image"],
    a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick],
    .btn, .square-tool, .erp-tree-node, .kt-profile-list-item,
    .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row,
    .my-report-summary-icon, .my-document-money-icon,
    .icon, .fa, .fas, .far, .bi
  ) {
    --alfares-control-primary: var(--alfares-control-palette-primary);
    transition-property: box-shadow, background-color, color, border-color !important;
    transition-duration: .12s !important;
    transition-timing-function: ease-out !important;
  }

  :is(
    button, input[type="button"], input[type="submit"], input[type="reset"], input[type="image"],
    a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick],
    .btn, .square-tool, .erp-tree-node, .kt-profile-list-item,
    .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row,
    .my-report-summary-icon, .my-document-money-icon,
    .icon, .fa, .fas, .far, .bi
  ):hover:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) {
    box-shadow: none !important;
  }

  :is(
    button, input[type="button"], input[type="submit"], input[type="reset"], input[type="image"],
    a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick],
    .btn, .square-tool, .erp-tree-node, .kt-profile-list-item,
    .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row,
    .my-report-summary-icon, .my-document-money-icon,
    .icon, .fa, .fas, .far, .bi
  ):active:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *) {
    background-color: var(--alfares-control-primary) !important;
    background-image: none !important;
    border-color: var(--alfares-control-primary) !important;
    color: var(--alfares-control-on-primary) !important;
    -webkit-text-fill-color: var(--alfares-control-on-primary) !important;
    box-shadow: none !important;
  }

  :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row)
    :is(.icon, .fa, .fas, .far, .bi):hover {
    box-shadow: none !important;
  }

  :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row)
    :is(i, svg, span, strong, small, label) {
    transition-property: color, fill, stroke !important;
  }

  :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row):active:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *)
    :is(i, svg, span, strong, small, label):not(.preview-mini-pill, .template-badge, .template-tag, .dashboard-switcher__current-badge):not(:is(.preview-mini-pill, .template-badge, .template-tag, .dashboard-switcher__current-badge, .template-entry-preview-canvas, .template-entry-content) *) {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }

  /* Badges keep their own contrasting foreground and painted surface. */
  :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row):active:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *)
    :is(.preview-mini-pill, .template-badge, .template-tag, .dashboard-switcher__current-badge),
  :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row):active:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *)
    :is(.preview-mini-pill, .template-badge, .template-tag, .dashboard-switcher__current-badge) * {
    -webkit-text-fill-color: currentColor !important;
  }

  /* A miniature report and its white caption surface retain their own paint. */
  :is(.template-entry, .mng-template-card):active:not([aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *)
    :is(.template-entry-preview-canvas, .template-entry-content),
  :is(.template-entry, .mng-template-card):active:not([aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *)
    :is(.template-entry-preview-canvas, .template-entry-content) * {
    -webkit-text-fill-color: currentColor !important;
  }

  :is(.surface-summary-row, .template-entry, .mng-template-card):active:not([aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *)
    button:not(:active) {
    -webkit-text-fill-color: currentColor !important;
  }

  :is(.template-entry, .mng-template-card):active:not([aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *)
    :is(.template-entry-content .mng-template-card__meta, .template-entry-content .mng-template-card__meta span) {
    color: var(--template-ink, #172033) !important;
    -webkit-text-fill-color: currentColor !important;
  }

  .surface-summary-row:active:not([aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *)
    :is(.surface-summary-title, .surface-summary-sub) {
    color: var(--alfares-control-on-primary) !important;
    -webkit-text-fill-color: var(--alfares-control-on-primary) !important;
  }

  /* Known painted icon surfaces share the pressed control's contrast palette. */
  :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn):active:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *)
    :is(.business-type-card__label, .auth-advanced-icon, .report-owned-menu__icon, .nav-popover__icon, .official-action__icon, .mng-right-toolbelt-action__icon) {
    background-color: var(--alfares-control-primary) !important;
    background-image: none !important;
    color: var(--alfares-control-on-primary) !important;
    -webkit-text-fill-color: var(--alfares-control-on-primary) !important;
  }

  :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row):active:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *)
    svg:not(.template-entry-preview-canvas *) :is([fill]:not([fill="none"]):not([fill^="url("])) {
    fill: currentColor !important;
  }

  :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row):active:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):not([aria-busy="true"] *)
    svg:not(.template-entry-preview-canvas *) :is([stroke]:not([stroke="none"]):not([stroke^="url("])) {
    stroke: currentColor !important;
  }

  :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row)
    :is(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):hover,
  :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [onclick], .btn, .square-tool, .erp-tree-node, .kt-profile-list-item, .template-entry, .mng-template-card, .preview-structure-card, .surface-summary-row):is(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled):hover,
  [aria-busy="true"] :is(button, a[href], [role="button"], .btn):hover {
    box-shadow: none !important;
  }

  /* Pointer tilt used to move controls together with their parent card. */
  [data-tilt] {
    --tilt-x: 0deg !important;
    --tilt-y: 0deg !important;
  }
}