/* HMS-348 — Add-Ons admin (Figma 600:30424 / 600:36123)
   All colors via var(--wa-*) theme tokens only. */

/* Page column */
.add-ons {
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Header / title */
.add-ons__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.add-ons__title {
  margin: 0;
  font-size: var(--wa-font-size-2xl);
  font-weight: var(--wa-font-weight-semibold);
}

/* Tabs */
.add-ons__tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
  overflow-x: auto;
}

.add-ons__tab {
  padding: 0.5rem 1rem;
  color: var(--wa-color-neutral-on-quiet);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  cursor: pointer;
}

.add-ons__tab--active {
  color: var(--wa-color-brand-on-quiet);
  border-bottom: 2px solid var(--wa-color-brand-on-quiet);
}

/* KPIs — one connected section with dividers (HMS-743) */
.add-ons__kpis {
  display: flex;
  background: var(--wa-color-surface-raised, #fff);
  border: 1px solid var(--wa-color-surface-border, #e2e8f0);
  border-radius: var(--wa-border-radius-m, 0.5rem);
  overflow: hidden;
}

/* KPI cell — divider comes from the section, not its own border (HMS-743) */
.add-ons__kpi {
  flex: 1;
  position: relative;
  padding: var(--wa-space-m, 1rem) var(--wa-space-l, 1.25rem);
  border: 0;
  border-radius: 0;
  min-width: 0;
}

.add-ons__kpi + .add-ons__kpi {
  border-left: 1px solid var(--wa-color-surface-border, #e2e8f0);
}

.add-ons__kpi-label {
  margin: 0;
  font-size: var(--wa-font-size-m, 1rem);
  font-weight: var(--wa-font-weight-semibold, 600);
  color: var(--wa-color-neutral-on-quiet);
}

.add-ons__kpi-value {
  margin: 0.25rem 0;
  font-size: var(--wa-font-size-xl);
  font-weight: var(--wa-font-weight-bold);
  line-height: 1.2;
}

.add-ons__kpi-sub {
  margin: 0;
  font-size: var(--wa-font-size-xs);
  color: var(--wa-color-neutral-on-quiet);
}

/* Icon pins top-right of the cell; the label/value/sub stack stays clear of it */
.add-ons__kpi-icon {
  position: absolute;
  top: var(--wa-space-m, 1rem);
  right: var(--wa-space-l, 1.25rem);
  background: var(--wa-color-neutral-fill-quiet);
  padding: 0.5rem;
  border-radius: var(--wa-border-radius-s);
  color: var(--wa-color-neutral-on-quiet);
}

/* Card */
.add-ons__card {
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  padding: 1rem 1.25rem;
}

/* Banner — Revenue Report button wraps below the text on small screens */
.add-ons__banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  background: var(--wa-color-brand-fill-quiet);
  border-radius: var(--wa-border-radius-m);
  padding: 0.75rem 1rem;
}

.add-ons__banner-body {
  flex: 1 1 30rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.add-ons__banner-body i {
  color: var(--wa-color-neutral-on-quiet);
}

.add-ons__revenue {
  flex-shrink: 0;
  margin-left: auto;
  font-weight: var(--wa-font-weight-semibold);
}

/* Table */
.add-ons__table {
  width: 100%;
  border-collapse: collapse;
}

.add-ons__table thead th {
  font-size: var(--wa-font-size-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wa-color-neutral-on-quiet);
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
  padding: 0.6rem 0.5rem;
  text-align: left;
}

.add-ons__table td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
  vertical-align: middle;
}

/* Name cell */
.add-ons__name {
  font-weight: var(--wa-font-weight-semibold);
}

/* HMS-1189 — long names wrap onto more lines inside a narrower column
   instead of one 26rem ellipsized line (HMS-644), so the whole table fits
   the desktop card without a horizontal scroll. */
.add-ons__name {
  min-width: 10rem;
  max-width: 16rem;
}
.add-ons__name-text {
  display: block;
  overflow-wrap: anywhere;
}

/* HMS-1189 — outrank `.admin-table-wrap table { min-width: max-content }`
   (0,1,1) so auto layout shrinks wrappable columns to the wrap width. The
   wrap still scrolls on narrow screens once the columns hit min-content. */
.admin-table-wrap .add-ons__table {
  min-width: 0;
}

/* Scope pill */
.add-ons__scope {
  display: inline-flex;
  align-items: center;
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: var(--wa-font-size-xs);
  font-weight: var(--wa-font-weight-semibold);
  max-width: 10rem;
  white-space: normal;
  line-height: 1.3;
}

/* Badge */
.add-ons__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--wa-font-size-xs);
  font-weight: var(--wa-font-weight-semibold);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}

.add-ons__badge--active {
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
}

/* HMS-743 — Draft reads blue-gray, distinct from the neutral Inactive */
.add-ons__badge--draft {
  background: #e8eef4;
  color: #3d5266;
}

.add-ons__badge--inactive {
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
}

/* Edit link */
.add-ons__edit {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-brand-on-quiet);
  text-decoration: none;
}

.add-ons__edit:hover {
  text-decoration: underline;
}

/* Actions cell — buttons stay on one line, evenly spaced */
.add-ons__actions {
  display: flex;
  gap: var(--wa-space-xs, 0.5rem);
  align-items: center;
  white-space: nowrap;
}

/* HMS-1189 — at laptop widths the Edit and Activate/Deactivate buttons stack
   so the Actions column is one button wide and Booked/Status stay visible. */
@media (max-width: 89.9rem) {
  .add-ons__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* When the table overflows its wrap the Actions column pins to the right
   edge instead of scrolling out of view — same convention as
   booking_management.css, booking_overrides.css and block_list.css. */
.add-ons__table th:last-child,
.add-ons__table td:last-child {
  position: sticky;
  right: 0;
  background: var(--wa-color-surface-raised);
  box-shadow: -1px 0 0 var(--wa-color-surface-border);
}

/* Empty state */
.add-ons__empty {
  padding: 2rem;
  text-align: center;
  color: var(--wa-color-neutral-on-quiet);
}

/* Footer */
.add-ons__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
}

.add-ons__per-page {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.add-ons__count {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-neutral-on-quiet);
}

.add-ons__pages {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.add-ons__pages .series-nav {
  display: flex;
  gap: var(--wa-space-2xs, 2px);
  align-items: center;
}

.add-ons__pages .series-nav a {
  min-width: 2rem;
  text-align: center;
  padding: var(--wa-space-2xs, 2px) var(--wa-space-xs);
  border-radius: var(--wa-border-radius-m);
  color: var(--wa-color-text-normal);
  text-decoration: none;
  font-size: var(--wa-font-size-s);
}

.add-ons__pages .series-nav a[href]:hover {
  background: var(--wa-color-surface-lowered);
}

.add-ons__pages .series-nav a[aria-current="page"] {
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
}

.add-ons__pages .series-nav a[aria-disabled]:not([aria-current="page"]) {
  opacity: 0.4;
  cursor: default;
}

/* Dialog (singular — from _dialogs.html.erb) */
.add-on-dialog {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Figma 600:18272 — the deactivate confirm drops the wa-dialog header; the
   ban icon, bold title, warn callout and centered buttons all live in the
   body column, same shape as the open-block-listings deactivate dialog. */
.add-on-dialog--confirm {
  gap: var(--wa-space-l);
  text-align: center;
}

.add-on-dialog__confirm-icon {
  align-self: center;
  font-size: var(--wa-font-size-3xl);
  color: var(--wa-color-danger);
}

.add-on-dialog__confirm-title {
  align-self: center;
  margin: 0;
  font-size: var(--wa-font-size-l);
  font-weight: var(--wa-font-weight-semibold);
}

/* Figma draws the whole message as one bordered pink callout — subject line,
   body copy, and the red units-sold warning all inside it. */
.add-on-dialog__callout {
  width: 100%;
  text-align: left;
  background: var(--wa-color-danger-fill-quiet);
  border: var(--wa-border-width-m) solid var(--wa-color-danger);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m);
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-xs);
}
.add-on-dialog__callout p { margin: 0; }

.add-on-dialog__subject {
  font-weight: 700;
}

.add-on-dialog__body {
  color: var(--wa-color-text-quiet);
}

.add-on-dialog__warning {
  color: var(--wa-color-danger);
}

.add-on-dialog__footer {
  display: flex;
  justify-content: center;
  gap: var(--wa-space-s);
}

/* HMS-747 — wide create dialog: ~70rem wide. wa-dialog has no `panel` part;
   it sizes the inner <dialog> from the --width custom property on the host. */
wa-dialog.add-on-dialog--wide {
  --width: min(70rem, 94vw);
}

wa-dialog.add-on-dialog--wide::part(header) {
  border-bottom: 1px solid var(--wa-color-surface-border, #e2e8f0);
  padding-bottom: var(--wa-space-m, 1rem);
}

wa-dialog.add-on-dialog--wide::part(footer) {
  border-top: 1px solid var(--wa-color-surface-border, #e2e8f0);
  padding-top: var(--wa-space-m, 1rem);
  justify-content: center;
}

wa-dialog.add-on-dialog--wide [slot="footer"] {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  gap: var(--wa-space-s, 0.75rem);
}

.add-on-dialog__intro {
  margin: 0;
  color: var(--wa-color-text-quiet);
}

.add-on-dialog__info {
  display: flex;
  gap: var(--wa-space-xs, 0.5rem);
  align-items: center;
  background: var(--wa-color-brand-fill-quiet, #eff6ff);
  border-left: 3px solid var(--wa-color-brand-border-loud, #1e40af);
  padding: var(--wa-space-s, 0.75rem) var(--wa-space-m, 1rem);
  font-size: var(--wa-font-size-s, 0.875rem);
  margin: 0;
}

.add-on-dialog__info i {
  color: var(--wa-color-brand-fill-loud, #2563eb);
}

.add-on-dialog form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.add-on-dialog .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem 1.25rem;
}

.add-on-dialog .row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Form controls (wa-select/wa-input) must be allowed to shrink inside the
   dialog's grid tracks or they force horizontal overflow. */
.add-on-dialog .row > *,
.add-on-dialog .row--3 > * {
  min-width: 0;
}

.add-on-dialog__price {
  display: grid;
  grid-template-columns: 1fr 7rem;
  gap: 0.875rem 1.25rem;
  align-items: end;
}

.add-on-dialog__price > * { min-width: 0; }

.add-on-dialog__dates {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.add-on-dialog__dates legend {
  padding: 0;
  color: var(--wa-form-control-label-color, var(--wa-color-text-normal));
  font-weight: var(--wa-form-control-label-font-weight, var(--wa-font-weight-semibold));
  line-height: var(--wa-form-control-label-line-height, var(--wa-line-height-condensed));
  margin-block-end: 0.5em;
}

/* The two date wa-inputs sit inside a wrapper styled as ONE WA input — same
   border, background and height as its neighbours — with a focus-within ring
   so it reads as a single "Availability Dates" field. */
.add-on-dialog__dates-inputs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.25rem;
  box-sizing: border-box;
  min-height: var(--wa-form-control-height);
  background-color: var(--wa-form-control-background-color, #fff);
  border-style: var(--wa-form-control-border-style, solid);
  border-width: var(--wa-form-control-border-width, 1px);
  border-color: var(--wa-form-control-border-color, #cbd5e1);
  border-radius: var(--wa-form-control-border-radius, 0.375rem);
  padding-inline: 0.5rem;
}

.add-on-dialog__dates-inputs:focus-within {
  outline: var(--wa-focus-ring);
  outline-offset: var(--wa-focus-ring-offset, 2px);
}

.add-on-dialog__dates wa-input {
  outline: none;
}

.add-on-dialog__dates wa-input::part(base) {
  height: calc(var(--wa-form-control-height) - 2 * var(--wa-form-control-border-width, 1px));
  border: 0;
  box-shadow: none;
  background: transparent;
  padding-inline: 0.5rem;
  outline: none;
}

.add-on-dialog__dates-inputs > * { min-width: 0; }

.add-on-dialog__dates-sep {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s, 0.875rem);
}

/* The date wa-inputs carry real labels so the inner <input> gets an
   accessible name, but the legend already labels the pair visually — the
   rendered form-control-label would double up inside the single box. Clip
   rather than display:none, which would take the accessible name with it. */
.add-on-dialog__dates wa-input::part(form-control-label) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Create-dialog labels read a touch heavier, matching the Figma mock. */
.add-on-dialog wa-input::part(form-control-label),
.add-on-dialog wa-select::part(form-control-label),
.add-on-dialog wa-textarea::part(form-control-label),
.add-on-dialog__dates legend {
  font-weight: var(--wa-font-weight-semibold);
}

/* Under 80rem the dates column needs extra room or the native date
   placeholders clip; under 45rem the row stacks anyway. */
@media (min-width: 45.01rem) and (max-width: 80rem) {
  .add-on-dialog .row--3 {
    grid-template-columns: 1fr 1.4fr 1fr;
  }
}

/* Responsive: 4 across → 2 per row under 45rem, 1 per row under 30rem */
@media (max-width: 45rem) {
  .add-ons__kpis {
    flex-wrap: wrap;
  }

  .add-ons__kpi {
    flex: 1 1 45%;
  }

  /* Row heads sit at the section's left edge; wrapped rows get a top edge */
  .add-ons__kpi:nth-child(odd) {
    border-left: 0;
  }

  .add-ons__kpi:nth-child(n + 3) {
    border-top: 1px solid var(--wa-color-surface-border, #e2e8f0);
  }

  .add-on-dialog .row--3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 30rem) {
  .add-ons__kpi {
    flex: 1 1 100%;
    border-left: 0;
    border-top: 1px solid var(--wa-color-surface-border, #e2e8f0);
  }

  .add-ons__kpi:first-child {
    border-top: 0;
  }

  /* Tabs wrap to multiple lines instead of clipping mid-word. */
  .add-ons__tabs {
    flex-wrap: wrap;
  }

  /* Dialog field rows stack to a single column so nothing overflows
     the ~22rem panel on phones. */
  .add-on-dialog .row,
  .add-on-dialog .row--3 {
    grid-template-columns: 1fr;
  }
}