/* What Tailwind classes cannot reach: markup ActiveAdmin generates, and components used across many pages.
   Unlayered, so these beat any utility on the same element. Linked from app/views/active_admin/_html_head.html.erb. */

/* ---- the main menu ------------------------------------------------------ */

/* The gem draws submenu links as blocks, which stacks an icon over its label. */
#main-menu li li > a {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}

/* ---- index tables that draw their own rows ------------------------------- */

/* Accounts are cards and logs a timeline: the table stays underneath for scopes and
   pagination, its chrome hidden. */
#index_table_accounts thead,
#index_table_logs thead {
  display: none;
}

#index_table_accounts,
#index_table_accounts tbody,
#index_table_accounts tr,
#index_table_accounts td,
#index_table_logs,
#index_table_logs tbody,
#index_table_logs tr,
#index_table_logs td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
}

#index_table_accounts tr + tr {
  margin-top: 1rem;
}

/* Each card has its own frame, so the collection box would be a second border around it. */
.paginated-collection:has(#index_table_accounts) {
  border: 0;
  border-radius: 0;
}

.paginated-collection:has(#index_table_accounts) .paginated-collection-pagination {
  padding-inline: 0;
}

/* A fixed width keeps the badges in one column down the journal; long names ellipsise. */
#index_table_logs .badge {
  overflow: hidden;
  flex: none;
  justify-content: center;
  width: 12rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.account-journal .badge {
  overflow: hidden;
  min-width: 0;
  font-size: 0.62rem;
  text-overflow: ellipsis;
}

/* ---- badges ------------------------------------------------------------- */

/* status_tag only colours the statuses it knows; these take their colour from data-tone. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A badge that is also the control for the thing it reports. */
.badge-action {
  cursor: pointer;
  text-decoration: none;
}

/* Filled per tone: the border is currentColor too, so inverting the text would take it along. */
.badge-action[data-tone="ok"]:hover     { color: #fff; border-color: #059669; background: #059669; }
.badge-action[data-tone="danger"]:hover { color: #fff; border-color: #be123c; background: #be123c; }

.badge[data-tone="ok"]     { color: #059669; background: #05966914; }
.badge[data-tone="warn"]   { color: #b45309; background: #b4530914; }
.badge[data-tone="danger"] { color: #be123c; background: #be123c14; }
.badge[data-tone="info"]   { color: #0284c7; background: #0284c714; }
.badge[data-tone="muted"]  { color: #6b7280; background: #6b728014; }

/* ---- followups and intros: table_for cells ------------------------------ */

/* A row a chatter already acted on is tinted until the conversation moves again. */
tr.followup-done td { background: #05966914; opacity: .6; }
/* One line per buyer: tight cells, nothing wraps, the actions grouped at the end. */
.followup-table th, .followup-table td { padding: .4rem .6rem; white-space: nowrap; vertical-align: middle; font-size: .85rem; }
.followup-table td[data-column="spent"], .followup-table th[data-column="spent"] { text-align: right; font-variant-numeric: tabular-nums; }
.followup-table td:last-child, .followup-table td:nth-last-child(2) { width: 1%; }
/* Intros: every column as narrow as its content, the message taking the rest and wrapping. */
.intro-table th, .intro-table td { padding: .6rem .6rem; vertical-align: top; font-size: .85rem; }
.intro-table td[data-column="visitor"] { white-space: nowrap; width: 1%; }

/* ---- settings cards ----------------------------------------------------- */

.settings-section { padding: 1.1rem 1.5rem 1.25rem; border: 1px solid #6b728040; border-radius: .75rem;
                    background: #6b72800d; }
.settings-section h3 { font-size: 1.1rem; font-weight: 600; margin: 0 -1.5rem .9rem; padding: 0 1.5rem .8rem;
                       border-bottom: 1px solid #6b728033; }
.settings-section p { font-size: .8rem; margin-bottom: .5rem; }
.settings-grid { border-collapse: collapse; font-size: .85rem; }
.settings-grid th { padding: 0 1rem .4rem 0; text-align: left; font-size: .7rem; font-weight: 600; text-transform: uppercase;
                    letter-spacing: .04em; opacity: .6; }
.settings-grid td { padding: .35rem 1rem .35rem 0; border-top: 1px solid #ffffff14; }