/* Wide triage table: use the full main column instead of the default
 * .page max-width (64rem). Horizontal scroll remains on .table-wrap when
 * columns still overflow on smaller screens. */
.page.billing-admin-page {
 max-width: none;
 display: flex;
 flex-direction: column;
 gap: 16px;
 min-height: 100%;
}

.billing-admin-toolbar {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
}

.billing-admin-toolbar .field {
 flex: 1 1 180px;
 max-width: 280px;
}

.billing-admin-summary {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.billing-admin-summary-stats {
 display: flex;
 flex-wrap: wrap;
 gap: 16px;
}

.billing-admin-summary .message {
 max-width: 52rem;
}

.billing-admin-lookup-banner {
 display: flex;
 flex-direction: column;
 gap: 8px;
 max-width: 52rem;
}

.billing-admin-lookup-details {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.billing-admin-lookup-details[hidden] {
 display: none;
}

.billing-admin-lookup-details-bar {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
}

.billing-admin-lookup-md {
 margin: 0;
 white-space: pre-wrap;
 overflow-x: auto;
 font-family: var(
  --font-mono,
  ui-monospace,
  monospace
 );
 font-size: 12px;
 line-height: 1.5;
 padding: 8px 10px;
 border-radius: var(--radius-sm);
 background: color-mix(
  in srgb,
  var(--foreground) 4%,
  transparent
 );
}

.billing-admin-stat {
 display: flex;
 gap: 6px;
 align-items: baseline;
}

.billing-admin-stat-value {
 font-size: 1.25rem;
 font-weight: 600;
}

.billing-admin-available-slot,
.billing-admin-filter-slot,
.billing-admin-columns-slot {
 flex: 0 0 auto;
}

.billing-admin-columns-spacer {
 display: inline-block;
 width: 16px;
 height: 16px;
 flex: 0 0 16px;
}

.billing-admin-filter-btn.is-active {
 border-color: var(--foreground);
 background: var(--muted);
}

.billing-admin-filter-empty {
 color: var(--muted-foreground);
}

.billing-admin-table-host {
 min-width: 0;
}

.billing-admin-table-host
 .table-row-click {
 cursor: pointer;
}

.billing-admin-table-host
 .table-row-click:hover
 td {
 background: var(--muted);
}

.billing-admin-table-host
 .table-row-click:focus-visible {
 outline: 2px solid
  var(--ring, var(--foreground));
 outline-offset: -2px;
}

.pm-set-yes,
.pm-set-no {
 display: inline-flex;
}

.pm-set-yes {
 color: #16a34a;
}

.pm-set-no {
 color: var(--destructive);
}

.table-section td {
 background: var(--muted);
}

.billing-payments-date-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
}

.billing-payments-date {
 font-weight: 600;
}

.billing-payments-view-plan {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 white-space: nowrap;
 color: var(--primary);
 text-decoration: none;
}

.billing-payments-view-plan:hover {
 text-decoration: underline;
}

.billing-payments-day-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 margin: 16px 0 8px;
}

.billing-payments-day-head h2 {
 margin: 0;
 font-size: var(--text-lg);
}

.billing-payments-status-error {
 color: var(--destructive);
}

.billing-payments-note {
 margin-bottom: 8px;
}

.billing-payments-toolbar {
 display: flex;
 justify-content: flex-end;
 align-items: center;
}

.billing-payments-range {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--muted-foreground);
 font-size: 14px;
}

.billing-payments-range-select {
 width: auto;
}

.billing-payments-pm {
 display: inline-flex;
 align-items: center;
 gap: 6px;
}

.table td.billing-payments-pm-col {
 max-width: 9rem;
 white-space: normal;
}

.billing-payments-pm-cell {
 position: relative;
 display: flex;
 align-items: flex-start;
 gap: 6px;
 min-width: 0;
 max-width: 9rem;
}

.billing-payments-pm-name {
 white-space: normal;
 overflow-wrap: anywhere;
 word-break: break-word;
}

.billing-payments-pm-zoom {
 display: none;
 position: absolute;
 top: -8px;
 right: -8px;
 width: 22px;
 height: 22px;
 padding: 0;
 border: 1px solid var(--border);
 border-radius: 999px;
 background: var(--card);
 color: var(--foreground);
 box-shadow: 0 2px 8px
  rgba(0, 0, 0, 0.12);
 align-items: center;
 justify-content: center;
 cursor: pointer;
}

.billing-payments-pm-cell.is-selected
 .billing-payments-pm-zoom,
.billing-payments-pm-cell.is-open
 .billing-payments-pm-zoom,
.billing-payments-pm-cell:focus-within
 .billing-payments-pm-zoom {
 display: inline-flex;
}

.billing-payments-pm-zoom:focus-visible {
 outline: 2px solid
  var(--ring, var(--foreground));
 outline-offset: 2px;
}

.billing-payments-pm-popover {
 padding: 12px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(
  --popover,
  var(--card)
 );
 color: var(--foreground);
 box-shadow: 0 8px 24px
  rgba(0, 0, 0, 0.18);
 font-size: 13px;
}

.billing-payments-pm-popover-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 margin-bottom: 8px;
}

.billing-payments-pm-popover-title {
 font-weight: 600;
}

.billing-payments-pm-popover-close {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 24px;
 height: 24px;
 margin: 0;
 padding: 0;
 border: 0;
 border-radius: var(--radius-sm);
 background: transparent;
 color: inherit;
 cursor: pointer;
}

.billing-payments-pm-popover-close:hover {
 background: var(--muted);
}

.billing-payments-pm-popover-list {
 margin: 0;
 padding-left: 1.15em;
}

.billing-payments-pm-popover-list
 li
 + li {
 margin-top: 4px;
}