/* ============================================================================
   Attachment Button (Phase 7.2)
   ----------------------------------------------------------------------------
   Polished icon-button used in transaction toolbars and on standalone forms.
   Uses the existing CSS variables from tailwind-input.css (:root tokens) so
   it stays in sync with light/dark mode automatically.

   States (via modifier classes from AtqAttachmentButton.razor.cs):
     atq-attachment-btn               base
     atq-attachment-btn--has-files    count > 0 (icon tinted, badge visible)
     atq-attachment-btn--open         popup currently open (active ring)
     atq-attachment-btn--disabled     greyed out

   Modifiers also flip on hover/focus naturally.
   ============================================================================ */

.atq-attachment-btn {
  /* Layout — height tracks the density var (--field-height) so the button is
     always the same size as the other action buttons in the toolbar (atq-btn). */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;                            /* matches atq-btn gap-1.5 */
  height: var(--field-height, 1.65rem);     /* same as atq-btn */
  min-width: var(--field-height, 1.65rem);  /* square min when icon-only */
  padding: 0 0.625rem;                      /* slightly tighter than atq-btn px-3 */

  /* Look */
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-sm, 0.25rem); /* matches atq-btn rounded */
  background: var(--color-surface, #ffffff);
  color: var(--color-text-secondary, #475569);
  font-size: 0.875rem;                       /* matches atq-btn text-sm */
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* Motion */
  transition: color 120ms ease, background-color 120ms ease,
              border-color 120ms ease, box-shadow 120ms ease,
              transform 120ms ease;
}

/* Icon — circular tinted wrapper that scales with the button height so it
   stays visually proportional in compact / normal / comfortable densities. */
.atq-attachment-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:  calc(var(--field-height, 1.65rem) - 8px);
  height: calc(var(--field-height, 1.65rem) - 8px);
  border-radius: 999px;
  background: rgba(var(--color-primary-rgb, 59 130 246) / 0.10);
  color: var(--color-primary, #3b82f6);
  font-size: 0.75rem;
  transition: background-color 120ms ease, color 120ms ease;
}

.atq-attachment-btn__icon > i {
  /* Slight angle gives the paperclip a more "clipped" look */
  transform: rotate(-12deg);
  transition: transform 200ms ease;
}

.atq-attachment-btn__label {
  font-weight: 500;
  white-space: nowrap;
}

/* ── Hover & focus ──────────────────────────────────────────────────────── */
.atq-attachment-btn:hover {
  background: var(--color-surface-raised, #f8fafc);
  border-color: rgba(var(--color-primary-rgb, 59 130 246) / 0.35);
  color: var(--color-text-primary, #0f172a);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .06);
}
.atq-attachment-btn:hover .atq-attachment-btn__icon {
  background: rgba(var(--color-primary-rgb, 59 130 246) / 0.18);
  color: var(--color-primary-hover, #2563eb);
}
.atq-attachment-btn:hover .atq-attachment-btn__icon > i {
  transform: rotate(0deg);
}

.atq-attachment-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59 130 246) / 0.25);
}

.atq-attachment-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ── Has files (count > 0) ──────────────────────────────────────────────── */
.atq-attachment-btn--has-files .atq-attachment-btn__icon {
  background: rgba(var(--color-primary-rgb, 59 130 246) / 0.18);
  color: var(--color-primary, #3b82f6);
}

/* ── Popup open (active state) ─────────────────────────────────────────── */
.atq-attachment-btn--open {
  background: var(--color-surface-raised, #f8fafc);
  border-color: var(--color-primary, #3b82f6);
  color: var(--color-text-primary, #0f172a);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59 130 246) / 0.18);
}
.atq-attachment-btn--open .atq-attachment-btn__icon {
  background: var(--color-primary, #3b82f6);
  color: var(--color-primary-text, #ffffff);
}

/* ── Disabled ───────────────────────────────────────────────────────────── */
.atq-attachment-btn--disabled,
.atq-attachment-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}
.atq-attachment-btn--disabled:hover,
.atq-attachment-btn[disabled]:hover {
  background: var(--color-surface, #ffffff);
  border-color: var(--color-border, #e2e8f0);
  color: var(--color-text-secondary, #475569);
  transform: none;
  box-shadow: none;
}

/* ── Count badge ───────────────────────────────────────────────────────── */
.atq-attachment-btn__badge {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-primary, #3b82f6);
  color: var(--color-primary-text, #ffffff);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--color-surface, #ffffff);
  /* Subtle pop-in when the badge first appears or the number changes */
  animation: atq-attachment-badge-pop 180ms ease-out;
}

@keyframes atq-attachment-badge-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* Slightly larger pill when the count overflows ("99+") */
.atq-attachment-btn__badge[data-count="99+"] {
  padding: 0 6px;
  font-size: 10px;
}

/* ── RTL mirror — flip the paperclip so it leans the same way visually ──── */
[dir="rtl"] .atq-attachment-btn__icon > i {
  transform: rotate(12deg) scaleX(-1);
}
[dir="rtl"] .atq-attachment-btn:hover .atq-attachment-btn__icon > i {
  transform: rotate(0deg) scaleX(-1);
}

/* ── Dark mode ─────────────────────────────────────────────────────────── */
body.dark .atq-attachment-btn__badge {
  box-shadow: 0 0 0 2px var(--color-surface, #0f172a);
}