/* Sender infrastructure page (super admins). Colors come from the .app-shell tokens in app_shell.css. */
.infra-app { overflow: hidden; }
.infra-main {
  grid-column: 2;
  min-height: 0;
  overflow-y: auto;
  margin: 8px 8px 8px 0;
  border-radius: 14px;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--border), 0 18px 48px rgba(0, 0, 0, .35);
}
html.has-bg .infra-main { background: var(--work); }
/* Full width (Safouan 2026-11-13): lines and bands run to the panel edges; text keeps the --gutter inset. */
.infra-wrap { --gutter: 32px; box-sizing: border-box; padding: 24px var(--gutter) 56px; display: flex; flex-direction: column; gap: 36px; }
.infra-head h1 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; }
.infra-meta { margin-top: 2px; color: var(--muted); font-size: 13px; }
.infra-meta2 { margin: -6px 0 12px; color: var(--faint); font-size: 13px; }
.infra-section h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
/* A section that folds (Needs action): the title row toggles it; an arrow shows the state */
.infra-fold > summary { list-style: none; cursor: pointer; }
.infra-fold > summary::-webkit-details-marker { display: none; }
.infra-fold > summary h2::before { content: "▾" / ""; display: inline-block; width: 16px; color: var(--muted); }
.infra-fold:not([open]) > summary h2::before { content: "▸" / ""; }
.infra-fold:not([open]) > summary h2 { margin-bottom: 0; }
.infra-sub-h { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.infra-faint { color: var(--faint); font-weight: 400; }
.infra-key { color: var(--text); font-weight: 600; }
.infra-prob, .infra-tbl td.infra-prob { color: var(--warning); font-weight: 700; }
.infra-tip { border-bottom: 1px dotted var(--muted); cursor: help; }
.infra-small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); white-space: normal; }

/* Header figures: no boxes */
.infra-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.infra-kpi { padding: 0 0 0 18px; border-left: 1px solid var(--border); }
.infra-kpi:first-child { padding-left: 0; border-left: 0; }
.infra-kpi b { display: block; font-size: 28px; line-height: 34px; font-weight: 600; }
.infra-kpi b small { margin-left: 4px; font-size: 14px; font-weight: 400; color: var(--faint); }
.infra-kpi span { font-size: 13px; color: var(--muted); }

/* Tables and lists: no frame; a line under the header row and between rows */
.infra-tw { overflow-x: auto; }
.infra-tbl { width: 100%; border-collapse: collapse; }
.infra-tbl th {
  padding: 8px 14px; background: none; border-bottom: 1px solid var(--border-strong);
  color: var(--text-secondary); font-size: 12px; font-weight: 700; text-align: right; white-space: nowrap;
}
.infra-tbl td {
  padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text-secondary);
  font-weight: 400; text-align: right; white-space: nowrap;
}
.infra-tbl tr:last-child td { border-bottom: 0; }
.infra-tbl .l { text-align: left; }
.infra-tbl th:last-child, .infra-tbl td:last-child { padding-right: 16px; }
.infra-tbl th.infra-cb, .infra-tbl td.infra-cb { width: 20px; padding-right: 0; }
.infra-tbl tbody tr:not([hidden]):hover td { background: var(--surface-hover); }
.infra-tbl input[type="checkbox"] { width: 14px; height: 14px; margin: 0; vertical-align: middle; accent-color: var(--accent); cursor: pointer; }
.infra-tbl .infra-key { font-weight: 600; }
/* Group rows (a root, a provider): a light band, bold name; child rows hang under it on a guide line */
.infra-tbl .infra-tree:not(.infra-sub) td { background: var(--panel); }
.infra-tbl tr.infra-tree[data-root-id] td { color: var(--text); font-weight: 600; }
.infra-tbl tr.infra-tree[data-root-id] .infra-key { font-size: 15px; font-weight: 700; }
.infra-tbl tr.infra-dom td:nth-child(2) { position: relative; padding-left: 32px; }
.infra-tbl tr.infra-dom td:nth-child(2)::before { content: ""; position: absolute; left: 17px; top: 0; bottom: 0; border-left: 2px solid var(--border-strong); }
.infra-root-tag { margin-left: 8px; padding: 1px 6px; border: 1px solid var(--border-strong); border-radius: 5px; font-size: 11px; font-weight: 600; color: var(--muted); }
.infra-tree[aria-expanded] { cursor: pointer; }
.infra-empty { padding: 24px 14px !important; text-align: center !important; color: var(--muted); }
/* The why line takes the cell's width and truncates; it does not widen the table */
.infra-why { display: block; max-width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 600; color: var(--warning); }
.infra-tbl td.infra-lane { white-space: normal; overflow-wrap: anywhere; }
.infra-warmup .infra-sc { display: inline-flex; align-items: center; gap: 10px; }
.infra-spark { display: block; flex: none; }
.infra-spark rect { fill: var(--faint); }
.infra-spark rect.is-hot { fill: var(--warning); }
/* Period figures: the page renders one span per period; only the selected period shows */
[data-period="yesterday"] [data-p]:not([data-p="yesterday"]),
[data-period="7d"] [data-p]:not([data-p="7d"]),
[data-period="30d"] [data-p]:not([data-p="30d"]) { display: none; }

/* Tree: a chevron per row; a closed row hides its descendants */
.infra-chev { display: inline-block; width: 16px; color: var(--muted); }
.infra-chev::before { content: "▸"; }
.infra-tree[aria-expanded="true"] .infra-chev::before { content: "▾"; }
.infra-indent { display: inline-block; width: 16px; }
.infra-indent2 { display: inline-block; width: 48px; }

/* Needs action: one list, a line above, between, and below items; count, title and detail on one line */
.infra-needs { border-top: 1px solid var(--border); }
.infra-need {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.infra-need-line { display: block; flex: 1 1 0; margin: 0; min-width: 0; font-size: 14px; color: var(--text-secondary); }
.infra-need-n { margin-right: 8px; font-weight: 700; white-space: nowrap; }
.infra-need-n.bad { color: var(--danger); }
.infra-need-n.warn { color: var(--warning); }
.infra-need-t { margin-right: 8px; font-weight: 600; color: var(--text); }
.infra-need-c { color: var(--muted); }
.infra-btn { min-width: 148px; justify-content: center; }
.infra-need-form { margin: 0; }

/* Domain state: dot and word. Ready green, Not ready red, Needs activation amber, In warmup and Paused and Rest grey. */
.infra-state { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.infra-state i { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--muted); }
.infra-state.is-ready { color: var(--text-secondary); }
.infra-state.is-ready i { background: var(--accent); border-color: var(--accent); }
.infra-state.is-activation { color: var(--text-secondary); }
.infra-state.is-activation i { border-color: var(--warning); }
.infra-state.is-not-ready { color: var(--text-secondary); }
.infra-state.is-not-ready i { background: var(--danger); border-color: var(--danger); }
.infra-state.is-warmup i, .infra-state.is-paused i, .infra-state.is-rest i { background: var(--muted); }

/* Domains: tabs, period, search, the table box */
.infra-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.infra-tools-end { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.infra-seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); }
.infra-seg-btn {
  height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border: 0; border-radius: 7px; background: none;
  color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.infra-seg-btn:hover { color: var(--text); }
.infra-seg-btn[aria-pressed="true"] { background: var(--selection); color: var(--text); }
.infra-seg-btn b { margin-left: 4px; font-weight: 400; color: var(--faint); }
.infra-seg-btn[aria-pressed="true"] b { color: var(--text-secondary); }
.infra-search {
  width: 240px; max-width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px;
}
.infra-table-box { min-height: 0; }
.infra-dom.is-selected td { background: var(--selection); }
.infra-domain-link { color: var(--text); font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 600; text-decoration: none; }
.infra-domain-link:hover { text-decoration: underline; }

/* Table head: the selection bar replaces the column names while a row is selected */
.infra-tbl thead th { height: 44px; }
.infra-tbl thead th.infra-cb { position: relative; z-index: 3; } /* the bar anchors here */
.infra-tbl thead.has-sel th { background: var(--selection); }
.infra-tbl thead.has-sel .infra-bulk-in { display: flex; }
.infra-tbl thead.has-sel th.hcol { color: transparent; } /* labels hidden, cells kept: the columns keep their width and the tint */
.infra-tbl thead.has-sel th.hcol > * { visibility: hidden; }
.infra-bulk-in { display: none; position: absolute; top: 0; bottom: 0; left: 100%; margin-left: 8px; white-space: nowrap; color: var(--text); align-items: center; gap: 8px; min-height: 28px; font-size: 13px; font-weight: 600; }
.infra-bulk-in .ui-button { height: 26px; padding: 0 10px; font-size: 12px; }

/* Desktop: the head stays on top while the page scrolls; the box clips instead of scrolling */
@media (min-width: 1100px) {
  .infra-table-box { overflow: clip; }
  .infra-table-box .infra-tw { overflow: visible; }
  .infra-table-box thead th { position: sticky; top: 0; z-index: 2; background: var(--bg); } /* opaque: rows scroll under it */
  html.has-bg .infra-table-box thead th { background: var(--work); backdrop-filter: blur(18px); } /* the page panel tint, as the Inbox header */
  .infra-table-box thead th.infra-cb { position: sticky; }
}

/* Domain panel: a dialog on the right; the close button sits outside the frame */
.infra-drawer {
  position: fixed; inset: 0 0 0 auto; box-sizing: border-box; width: 456px; max-width: 100vw; height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0; border-left: 1px solid var(--border-strong); background: var(--bg); color: var(--text);
  box-shadow: var(--shadow); overflow-y: auto;
}
.infra-drawer::backdrop { background: rgba(3, 5, 8, .62); }
.infra-drawer-x { position: absolute; top: 16px; right: 16px; z-index: 1; }
.infra-panel { box-sizing: border-box; min-height: 100%; padding: 20px 22px 32px; display: flex; flex-direction: column; gap: 22px; }
.infra-panel-head { padding-right: 40px; }
.infra-panel .infra-tbl th, .infra-panel .infra-tbl td { padding-left: 8px; padding-right: 8px; }
.infra-panel-name { margin: 0; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.infra-panel-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-secondary); }
/* The 4 panel numbers: one line, no frames */
.infra-strip { display: flex; justify-content: space-between; gap: 12px; margin: 0; }
.infra-strip > div { min-width: 0; }
.infra-strip dt { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.infra-strip dd { margin: 2px 0 0; font-size: 20px; line-height: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.infra-strip small { display: block; font-size: 11px; color: var(--faint); }
.infra-chart-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.infra-chart-h .infra-sub-h { margin: 0; }
.infra-series svg { display: block; width: 100%; height: auto; }
.infra-chart[data-mode="health"] [data-series="refused"], .infra-chart[data-mode="refused"] [data-series="health"] { display: none; }
.infra-bar { fill: var(--faint); }
.infra-bar.is-hot { fill: var(--warning); }
.infra-axis-line { stroke: var(--border-strong); }
.infra-threshold { stroke: var(--text-secondary); stroke-width: 1; stroke-dasharray: 4 4; }
.infra-axis { font-size: 11px; fill: var(--muted); font-family: inherit; }
.infra-chart-empty { margin: 0; padding: 24px 0; color: var(--muted); font-size: 13px; }
.infra-dates { display: flex; justify-content: space-between; margin-top: 2px; font-size: 12px; color: var(--muted); }

/* Confirm dialog: a reason is required for Pause, Resume and Rest */
.infra-confirm-reason { display: block; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.infra-confirm-reason input {
  display: block; box-sizing: border-box; width: 100%; height: 32px; margin-top: 6px; padding: 0 10px; border: 1px solid var(--border-strong);
  border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-weight: 400; font-size: 13px;
}
.infra-confirm h2 { font-size: 16px; line-height: 1.4; }
.infra-confirm p { margin: 8px 0 0; color: var(--text-secondary); }

@media (max-width: 1023px) {
  .infra-main { grid-column: 1; grid-row: 2; }
  .infra-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .infra-kpi:nth-child(3) { padding-left: 0; border-left: 0; }
}

@media (max-width: 639px) {
  .infra-app { min-width: 0; }
  .infra-wrap { --gutter: 16px; padding: 16px var(--gutter) 40px; gap: 28px; }
  .infra-need { align-items: flex-start; }
  .infra-btn { min-width: 0; }
  .infra-tools-end { width: 100%; }
  .infra-search { width: 100%; }
  .infra-drawer { width: 100%; }
  .infra-panel { padding: 16px; }
  .infra-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sortable headers (table_sort_controller.js): the arrow shows the order; an unsorted column shows a faint double arrow. */
.infra-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.infra-sort:hover, th[aria-sort] .infra-sort { color: var(--text); }
.infra-sort::after { content: "↕" / ""; width: 1em; color: var(--faint); font-size: 11px; text-align: center; }
th[aria-sort="descending"] .infra-sort::after { content: "↓" / ""; color: var(--text); }
th[aria-sort="ascending"] .infra-sort::after { content: "↑" / ""; color: var(--text); }
.infra-sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

/* Edge to edge: page tables and the Needs action list span the panel; the first and last cells keep the page inset. */
.infra-section .infra-tw, .infra-section .infra-table-box, .infra-needs { margin-inline: calc(-1 * var(--gutter)); }
.infra-section .infra-table-box .infra-tw { margin-inline: 0; }
.infra-section .infra-tbl :is(th, td):first-child { padding-left: var(--gutter); }
.infra-section .infra-tbl :is(th, td):last-child { padding-right: var(--gutter); }
.infra-need { padding-inline: var(--gutter); }
.infra-need-go { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.infra-need-go:hover { background: var(--surface-hover); }
.infra-need-go:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.infra-need-arrow { color: var(--muted); }
.infra-need-go:hover .infra-need-arrow { color: var(--text); }

/* Fixed columns (principles.md): opening, filtering, or sorting rows never moves a column. Each table sets its column widths in a
   colgroup; the column without a class takes the rest; a cell that does not fit ends in "…" (its title holds the full text). The last
   column also holds the page gutter. Under min-width the table scrolls in its box. */
.infra-fixed { table-layout: fixed; }
.infra-fixed td { overflow: hidden; text-overflow: ellipsis; }
.infra-tbl.infra-fixed :is(th, td) { padding-inline: 10px; }
.infra-fixed td.infra-lane { white-space: nowrap; }
.infra-tbl.infra-fixed .infra-cb { padding-right: 0; }
.infra-fixed .infra-why { max-width: none; white-space: normal; }
.infra-fixed col { width: var(--w, auto); }
.infra-fixed col:last-child { width: calc(var(--w) + var(--gutter) - 10px); }
.infra-dtbl { min-width: 1040px; }
.infra-ptbl { min-width: 1060px; }
.infra-c-cb { --w: calc(var(--gutter) + 14px); }
.infra-c-lane { --w: 90px; }
.infra-c-state { --w: 156px; }
.infra-c-mb { --w: 90px; }
.infra-c-warmup { --w: 138px; }
.infra-c-refused { --w: 78px; }
.infra-c-rate { --w: 74px; }
.infra-c-complaints { --w: 92px; }
.infra-c-ready { --w: 118px; }
.infra-c-sends { --w: 138px; }