/*
 * Account tables: one quiet table on top of ui-table. Served as a plain file after bento-ui.css (no build).
 *
 * Markup patterns for ERB and JS tables:
 * - Frame: .ui-table-wrap > table.ui-table. Number grids that must scroll on phones add .ui-table-wrap-scroll;
 *   the row-link controller pins the first column (data-pin-first) and sets data-overflow-left/right.
 *   Every cell (body, header, pinned column) shares one surface: --ui-table-surface.
 * - Toolbar above a table: .ui-table-toolbar > .ui-list-count (left) + controls (right). Footer: .ui-table-footer.
 * - First cell: .ui-cell-title (+ 16px favicon) and optional .ui-cell-meta. Long free text: .ui-cell-clamp
 *   (wraps, two lines max; add a title attribute with the full text).
 * - Numbers: td.ui-num. Thresholds are text color on the value, never a filled cell:
 *   .ui-num-warning / .ui-num-danger / .ui-num-success, plus .ui-num-pill for a faint tint when severe.
 *   A count with its rate in one cell: <span class="ui-num-pair"><span>12</span><span class="ui-num-secondary">0.2%</span></span>.
 * - Row actions: no buttons on every row. Wrap them in .ui-row-actions; they appear on row hover/focus with a
 *   mouse and stay visible with a touch (coarse) pointer. Prefer one "…" menu: td.ui-table-actions > .ui-row-actions >
 *   details.ui-row-menu (summary.ui-icon-btn.ui-btn-sm + .ui-menu.ui-row-menu-panel with .ui-menu-item buttons).
 *   In ERB, render "account/shared/menu_button" inside .ui-row-actions instead. To keep actions next to
 *   the name, wrap the first cell's content in .ui-cell-with-actions.
 * - Notes: .ui-row-note-indicator is a small always-visible icon button beside the value when a row has a note.
 * - Lists that act like rows (li): add .ui-list-row to get the same hover fill and .ui-row-actions reveal.
 */

.ui-root .ui-table-wrap {
  --ui-table-surface: var(--bento-surface);
  background-color: var(--ui-table-surface);
}

/* Header: sentence case, subtle, hairline below; sort icons show on hover or when active. */
.ui-root .ui-table th {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--bento-weight-medium);
  color: var(--bento-fg-subtle);
  background-color: var(--ui-table-surface, var(--bento-surface));
}

.ui-root .ui-th-sort {
  color: inherit;
}

.ui-root .ui-th-sort::after {
  opacity: 0;
  transition: opacity var(--bento-duration-fast) var(--bento-easing);
}

.ui-root th:hover .ui-th-sort::after,
.ui-root .ui-th-sort:focus-visible::after,
.ui-root th[aria-sort="ascending"] .ui-th-sort::after,
.ui-root th[aria-sort="descending"] .ui-th-sort::after {
  opacity: 1;
}

@media (pointer: coarse) {
  .ui-root .ui-th-sort::after {
    opacity: 1;
  }
}

/* Pinned first column: same surface as the body, a hairline and the frame's edge shade only while scrolled. */
.ui-root .ui-table-wrap[data-pin-first] .ui-table :is(th, td):first-child {
  background-color: var(--ui-table-surface, var(--bento-surface));
  box-shadow: none;
}

.ui-root .ui-table-wrap[data-pin-first][data-overflow-left] .ui-table :is(th, td):first-child {
  box-shadow: inset -1px 0 0 var(--bento-border-subtle);
}

.ui-root .ui-table-wrap[data-pin-first] .ui-table tbody tr:not(.ui-table-empty):not(.ui-table-skeleton):hover > td:first-child {
  box-shadow: inset 0 0 0 999px var(--bento-fill-hover);
}

.ui-root .ui-table-wrap[data-pin-first][data-overflow-left] .ui-table tbody tr:not(.ui-table-empty):not(.ui-table-skeleton):hover > td:first-child {
  box-shadow: inset -1px 0 0 var(--bento-border-subtle), inset 0 0 0 999px var(--bento-fill-hover);
}

/* An open row menu lifts its pinned cell above the next rows' pinned cells and the sticky header. */
.ui-root .ui-table-wrap[data-pin-first] .ui-table td:first-child:has(.ui-row-menu[open]) {
  z-index: 4;
}

/* Toolbar and footer, aligned with the table's cell padding. */
.ui-root .ui-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: 48px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bento-border-subtle);
}

.ui-root .ui-table-toolbar > :last-child:not(:first-child) {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ui-root .ui-table-footer {
  display: flex;
  justify-content: center;
  padding: 6px 12px;
  border-top: 1px solid var(--bento-border-subtle);
}

@media (min-width: 640px) {
  .ui-root :is(.ui-card, .report-breakdowns-panel) .ui-table-toolbar {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Numbers and thresholds. */
.ui-root .ui-num-warning {
  color: var(--bento-warning);
  font-weight: var(--bento-weight-medium);
}

.ui-root .ui-num-danger {
  color: var(--bento-danger);
  font-weight: var(--bento-weight-medium);
}

.ui-root .ui-num-success {
  color: var(--bento-success);
  font-weight: var(--bento-weight-medium);
}

.ui-root .ui-num-pill {
  display: inline-block;
  padding: 1px 6px;
  margin: -1px -6px;
  border-radius: var(--bento-radius-sm);
  background-color: color-mix(in srgb, currentColor 11%, transparent);
}

.ui-root .ui-num-pair {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.ui-root .ui-num-secondary {
  min-width: 3.25em;
  text-align: right;
  font-size: var(--bento-text-caption);
  line-height: var(--bento-leading-caption);
  font-variant-numeric: tabular-nums;
  color: var(--bento-fg-subtle);
}

.ui-root .ui-num-secondary:is(.ui-num-warning, .ui-num-danger, .ui-num-success) {
  font-weight: var(--bento-weight-medium);
}

.ui-root .ui-num-secondary.ui-num-warning { color: var(--bento-warning); }
.ui-root .ui-num-secondary.ui-num-danger { color: var(--bento-danger); }
.ui-root .ui-num-secondary.ui-num-success { color: var(--bento-success); }

/* Long free text inside a cell wraps and clamps instead of widening the table. */
.ui-root .ui-cell-clamp {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Dashboard problematic tables: the reasons row reads as part of the row above it. */
.ui-root .ui-table tr[data-reasons-row] > td {
  height: auto;
  padding-top: 0;
  border-top: 0;
}

/* Row actions: hidden until the row is hovered or focused on pointer devices, always visible on touch. */
.ui-root .ui-cell-with-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
}

.ui-root .ui-row-actions {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  transition: opacity var(--bento-duration-fast) var(--bento-easing);
}

.ui-root .ui-cell-with-actions > .ui-row-actions {
  margin-left: auto;
}

.ui-root .ui-table td:has(> .ui-cell-with-actions),
.ui-root .ui-table td.ui-table-actions {
  padding-top: 4px;
  padding-bottom: 4px;
}

@media not all and (pointer: coarse) {
  .ui-root :is(tr, .ui-list-row):not(:hover):not(:focus-within):not(:has(.ui-row-menu[open])) .ui-row-actions {
    opacity: 0;
  }
}

.ui-root .ui-list-row {
  transition: background-color var(--bento-duration-fast) var(--bento-easing);
}

.ui-root .ui-list-row:hover {
  background-color: var(--bento-fill-hover);
}

.ui-root .ui-table td.ui-table-actions .ui-row-actions .ui-icon-btn {
  opacity: 1;
}

.ui-root .ui-row-menu {
  position: relative;
  display: inline-flex;
}

.ui-root .ui-row-menu > summary {
  list-style: none;
}

.ui-root .ui-row-menu > summary::-webkit-details-marker {
  display: none;
}

.ui-root .ui-row-menu-panel {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  visibility: hidden;
}

.ui-root .ui-row-menu-panel[data-placed] {
  visibility: visible;
}

.ui-root .ui-row-note-indicator {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--bento-radius-sm);
  background: transparent;
  color: var(--bento-accent);
  cursor: pointer;
}

.ui-root .ui-row-note-indicator[hidden] {
  display: none;
}

.ui-root .ui-row-note-indicator:hover {
  background-color: var(--bento-fill-hover);
}

.ui-root .ui-row-note-indicator:focus-visible {
  outline: none;
  box-shadow: var(--bento-focus-ring);
}

.ui-root .ui-row-tracked {
  color: var(--bento-accent);
}

/* Breakdowns */
.ui-root .report-breakdowns-panel > .ui-table-wrap,
.ui-root .breakdown-table-container > .ui-table-wrap {
  border: 0;
  border-radius: 0;
}

.ui-root .report-breakdowns-panel {
  border-top: 1px solid var(--bento-border-subtle);
  border-bottom-left-radius: var(--bento-radius-lg);
  border-bottom-right-radius: var(--bento-radius-lg);
  overflow: hidden;
}

.ui-root .breakdown-table-scroll-container {
  max-height: 600px;
}

.ui-root .breakdown-table-scroll-container .ui-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  user-select: none;
}

.ui-root .breakdown-table-scroll-container[data-pin-first] .ui-table th:first-child {
  z-index: 3;
}

.ui-root .breakdown-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-root .breakdown-table td:first-child {
  padding-right: 8px;
}

.ui-root .breakdown-col-resize {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
}

.ui-root .breakdown-col-resize:hover {
  background-color: var(--bento-fill-active);
}

.ui-root .breakdown-value {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--bento-fg);
  cursor: pointer;
}

.ui-root .breakdown-value:hover {
  color: var(--bento-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ui-root .breakdown-value:focus-visible {
  outline: none;
  border-radius: var(--bento-radius-sm);
  box-shadow: var(--bento-focus-ring);
}

@media (max-width: 639px) {
  .ui-root .breakdown-table-scroll-container {
    max-height: none;
  }

  .ui-root .breakdown-col-resize {
    display: none;
  }

  .ui-root .report-breakdowns-card .ui-tab {
    min-height: 44px;
  }
}

/* A table right under its card toolbar shares the toolbar's divider. */
.ui-root .ui-card > .ui-table-toolbar + .ui-table-wrap {
  border-top: 0;
}

/* Phone cards: keep the title clear of the row's top-right actions button. */
@media (max-width: 639px) {
  .ui-root .ui-table tr:has(> td.ui-table-actions) > td:first-child {
    padding-right: 40px;
  }
}