/* Icon action buttons - view, edit, delete - shared by all three shells.
   Its own file because the admin/portal shell loads admin/css/main.css and
   the Inbox loads inbox.css, with nothing in common: putting these rules in
   either one would have meant a second copy in the other, and two copies is
   how the two halves of a product start looking like two products.

   Written against the --sm-* tokens with --aw-* fallbacks, so one rule
   works under both token sets (see the style guide: same palette, two
   prefixes for historical reasons). */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--sm-muted-foreground, var(--aw-text-muted, #71717a));
  cursor: pointer;
  text-decoration: none;
  line-height: 0;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.icon-btn .icon {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
}

.icon-btn:hover,
.icon-btn:focus-visible {
  background: var(--sm-muted, var(--aw-panel-muted, #f4f4f5));
  color: var(--sm-foreground, var(--aw-text, #09090b));
}

.icon-btn:focus-visible {
  outline: 2px solid var(--accent, #fbc711);
  outline-offset: 2px;
}

/* Delete sits quiet until you reach for it - red on hover rather than a
   permanently red row of bins shouting for attention. */
.icon-btn--danger:hover,
.icon-btn--danger:focus-visible {
  background: var(--sm-destructive-bg, #fef2f1);
  color: var(--sm-destructive, #cc372d);
  border-color: var(--sm-destructive, #cc372d);
}

/* The armed state: confirm.js has swapped the bin for a tick and this
   click is the one that actually deletes. Solid, not subtle - it must not
   look like the same button it was a moment ago. */
.icon-btn--confirming,
.icon-btn--confirming:hover,
.icon-btn--confirming:focus-visible {
  background: var(--sm-destructive, #cc372d);
  border-color: var(--sm-destructive, #cc372d);
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .icon-btn--danger:hover,
  .icon-btn--danger:focus-visible {
    background: #350f0c;
    color: #f34236;
    border-color: #f34236;
  }
  .icon-btn--confirming,
  .icon-btn--confirming:hover,
  .icon-btn--confirming:focus-visible {
    background: #f34236;
    border-color: #f34236;
    color: #1a0908;
  }
}

:root[data-theme="dark"] .icon-btn--danger:hover,
:root[data-theme="dark"] .icon-btn--danger:focus-visible {
  background: #350f0c;
  color: #f34236;
  border-color: #f34236;
}
:root[data-theme="dark"] .icon-btn--confirming,
:root[data-theme="dark"] .icon-btn--confirming:hover,
:root[data-theme="dark"] .icon-btn--confirming:focus-visible {
  background: #f34236;
  border-color: #f34236;
  color: #1a0908;
}

/* A row of actions in a table cell. Nowrap so "edit delete" never breaks
   across two lines in a narrow column. */
.icon-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  white-space: nowrap;
}

/* Each destructive action is its own <form> (CSRF token, own action URL),
   and a form is block-level by default - which would stack the buttons
   vertically inside .icon-actions. */
.icon-actions form {
  display: inline-flex;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .icon-btn { transition: none; }
}

/* Tooltips for the icon buttons.

   Native title= tooltips can't be styled at all - the browser draws its own
   box, at its own delay, in its own colours. These are drawn from the
   aria-label the button already needs, so there's one source of words for
   both a screen reader and a sighted user, and the label can't drift from
   the tooltip.

   Panel-coloured with an outline and a pill shape, matching the badges, so
   a tooltip reads as part of this interface rather than the browser's. */
.icon-btn { position: relative; }

.icon-btn[aria-label]::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--sm-panel, var(--aw-panel, #fff));
  color: var(--sm-foreground, var(--aw-text, #09090b));
  border: 1px solid var(--sm-border, var(--aw-border, #e4e4e7));
  box-shadow: 0 1px 2px rgba(24, 24, 40, .06), 0 6px 16px -10px rgba(24, 24, 40, .25);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

.icon-btn:hover::after,
.icon-btn:focus-visible::after {
  opacity: 1;
}

/* The armed delete's label is a full sentence ("Confirm: Delete 'x'? This
   can't be undone."), which would run off a narrow screen on one line. */
.icon-btn--confirming[aria-label]::after {
  white-space: normal;
  width: max-content;
  max-width: 16rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .icon-btn[aria-label]::after { transition: none; }
}