/* =========================================================
   ARQAAMY BUTTON INTERACTION GEOMETRY V2
   Global design rule: every button is one visual surface.
   Prevent browser/touch focus layers from appearing as a
   second square inside/around rounded Arqaamy buttons.
   ========================================================= */

:root{
  --arq-press-ring: color-mix(in srgb, var(--primary, var(--accent, #486ddb)) 42%, transparent);
}

/* Normalize actual button controls without changing component colors/sizing. */
:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
){
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent !important;
  touch-action:manipulation;
  background-clip:padding-box;
}

/* The same interaction geometry also applies to link/custom button surfaces. */
:where(
  .btn,
  [role="button"],
  .action-btn,
  .table-toolbar-btn,
  .topbar-icon-btn,
  .company-trigger,
  .customer-choice-chip,
  .customer-selection-preview-badge,
  .customer-preview-option,
  .customer-preview-device-btn,
  .quick-mini-btn,
  .admin-icon-btn,
  .arq-mobile-action-btn,
  .simple-focus-action,
  .simple-focus-icon-btn
){
  -webkit-tap-highlight-color:transparent !important;
  touch-action:manipulation;
  background-clip:padding-box;
}

/* Decorative press/hover layers must always use the button's own geometry. */
:where(
  button,
  .btn,
  [role="button"],
  .action-btn,
  .table-toolbar-btn,
  .topbar-icon-btn,
  .company-trigger,
  .customer-choice-chip,
  .customer-selection-preview-badge,
  .customer-preview-option,
  .customer-preview-device-btn,
  .quick-mini-btn,
  .admin-icon-btn,
  .arq-mobile-action-btn,
  .simple-focus-action,
  .simple-focus-icon-btn
)::before,
:where(
  button,
  .btn,
  [role="button"],
  .action-btn,
  .table-toolbar-btn,
  .topbar-icon-btn,
  .company-trigger,
  .customer-choice-chip,
  .customer-selection-preview-badge,
  .customer-preview-option,
  .customer-preview-device-btn,
  .quick-mini-btn,
  .admin-icon-btn,
  .arq-mobile-action-btn,
  .simple-focus-action,
  .simple-focus-icon-btn
)::after{
  border-radius:inherit;
}

/* Mouse/touch must never leave a second browser focus layer behind. */
:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  [role="button"]
):focus:not(:focus-visible){
  outline:0 !important;
  box-shadow:none;
}

.btn:focus:not(:focus-visible),
.btn-check:focus + .btn:not(:focus-visible){
  outline:0 !important;
  box-shadow:none !important;
}

/* Keyboard focus stays accessible, but follows the rounded button shape. */
:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  [role="button"]
):focus-visible{
  outline:0 !important;
  box-shadow:0 0 0 2px var(--arq-press-ring);
}

/* Touch devices should show only the component's own :active feedback. */
@media (hover:none) and (pointer:coarse){
  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .btn,
    [role="button"]
  ):focus,
  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .btn,
    [role="button"]
  ):focus-visible{
    outline:0 !important;
    box-shadow:none !important;
  }

  .btn:focus,
  .btn-check:focus + .btn{
    outline:0 !important;
    box-shadow:none !important;
  }
}