.vip-subscribers-page .badge {
    min-height: 0;
}

.vip-subscribers-page .sidebar-card,
.vip-subscribers-page .main-card {
    border: 1px solid var(--color-border, #e4e4ee);
    border-radius: .5rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05);
}

.vip-subscribers-page .table {
    --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), .001);
}

.vip-subscribers-page .form-control,
.vip-subscribers-page .form-select,
.vip-subscribers-page select.form-control,
.vip-subscribers-page select.form-select {
    width: 100% !important;
    min-width: 0;
    font-size: 1rem !important;
}

.vip-subscribers-page textarea.form-control {
    min-height: 0;
}

.vip-subscribers-page .form-floating > .form-control,
.vip-subscribers-page .form-floating > .form-control-plaintext {
    padding-right: .75rem !important;
    padding-left: .75rem !important;
}

.vip-subscribers-page .form-floating > label {
    left: 1px;
}

.vip-subscribers-page .table-sort-button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-transform: inherit;
}

.vip-subscribers-page .main-card > .table-responsive {
    max-height: calc(100dvh - 12.5rem);
    border: 1px solid var(--color-border, #e4e4ee);
    border-radius: .375rem;
    overflow-y: auto;
}

.vip-subscribers-page .main-card thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
    background: var(--color-surface-muted, #f0f0f3);
}

@media (max-width: 575.98px) {
    .vip-subscribers-page .main-card {
        padding: .75rem !important;
    }
}

/* Design parity for the subscriber table (2026-09-12).
   The design scrolls the table body under a sticky head inside a bordered, rounded box rather than
   letting the page grow, so the toolbar above stays put however many subscribers load. */
.vip-subscriber-table-scroll {
  max-height: calc(100dvh - 12.5rem);
  overflow-y: auto;
}

/* The name cell is a link in the design. It opens the details drawer here rather than navigating,
   so it is a button that has to be stripped back to look like the design's link. */
.subscriber-name-link {
  border: 0;
  background: none;
  line-height: 1.35;
  text-align: left;
}

/* The page-scoped rule near the top of this file forces every control to `width: 100% !important`
   so the sidebar form fields fill their column. Three controls are exceptions because they share a
   line with something else, and they have to match that importance to win.
   Channel stays a select because VM18 makes it business-editable; at full width it was the widest
   thing in its row and pushed the table past its container. */
.vip-subscribers-page .subscriber-channel-select.form-select,
.vip-subscribers-page select.subscriber-channel-select {
  width: auto !important;
  min-width: 7.5rem;
  display: inline-block;
}

/* The business and group selects sit inline with the group title in the design's one-line toolbar. */
.vip-subscribers-page .vip-toolbar-select.form-select,
.vip-subscribers-page select.vip-toolbar-select {
  width: auto !important;
  min-width: 9rem;
  max-width: 15rem;
}

/* Four icon actions on one line. They were four text buttons wrapping four rows high in a 92px
   column, which is what made every row 197px tall. */
.subscriber-row-actions {
  gap: 0.75rem;
}

.subscriber-row-actions > .btn {
  flex: 0 0 auto;
  line-height: 1;
}

/* A disabled icon button still has to read as disabled once the button chrome is gone. */
.subscriber-row-actions > .btn:disabled {
  opacity: 0.4;
}

/* The design's toolbar buttons are 0.75rem, smaller than btn-sm, so the whole header fits one line
   next to the group title. */
.vip-toolbar-btn {
  font-size: 0.75rem;
}

/* The design fixes the search at 250px so it never grows into the group actions beside it. */
.vip-subscriber-search {
  width: 250px;
}

@media (max-width: 575.98px) {
  .vip-subscriber-search {
    width: 100%;
  }
}