/*!
 * Fresh Air — admin panel content on top of shell.css
 *
 * Colors come only from Bootstrap's --bs-* variables, so the light/dark
 * toggle shared with the rest of the site works here unchanged.
 */

/* TOTP setup QR: the PNG carries its own white quiet zone; keep the
   modules crisp when the browser scales it. */
.totp-qr {
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

/* Recovery codes: two columns, easy to read off and type. */
.totp-codes {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 0.25rem 1.5rem;
  padding: 0.75rem;
  /* Numbers inside: an outside "10." would run into the first column. */
  list-style-position: inside;
  font-size: 1.05rem;
  background: var(--bs-secondary-bg);
  border-radius: var(--bs-border-radius);
}

/* Two columns don't fit a 360 px phone with "10." */
@media (width < 400px) {
  .totp-codes { grid-template-columns: max-content; }
}

/* Subscription QR in the user card: black on white in dark mode too,
   with a white frame beyond the code's quiet zone; modules stay crisp. */
.admin-sub-qr {
  display: inline-block;
  padding: 0.5rem;
  background: #fff;
  border-radius: var(--bs-border-radius);
}
.admin-sub-qr img {
  display: block;
  image-rendering: pixelated;
}

/* ---------------------------------------------------------------
   Content
   --------------------------------------------------------------- */

.admin-stat-label {
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}

.admin-stat-value {
  margin: 0.25rem 0;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* Label … count rows on the overview */
.admin-kv {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-kv li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--nm-rule);
}

.admin-kv li:first-child { border-top: 0; }

/* A request under its count row (2FA resets): indented, no rule above;
   the email may be long, the date wraps below it on a narrow screen. */
.admin-kv li.admin-kv-sub {
  flex-wrap: wrap;
  gap: 0 1rem;
  padding: 0.125rem 0 0.375rem 1rem;
  border-top: 0;
}
.admin-kv li.admin-kv-sub a { min-width: 0; overflow-wrap: anywhere; }
.admin-kv li.admin-kv-hot {
  margin-bottom: 0.25rem;
  padding: 0.375rem 0.5rem 0.375rem 1rem;
  border-radius: var(--bs-border-radius);
  background: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.admin-toolbar > .form-control { flex: 1 1 16rem; }
.admin-toolbar > .form-select { flex: 0 1 12rem; }

.admin-table { --bs-table-bg: transparent; }
.admin-table th { font-weight: 600; white-space: nowrap; }
.admin-table td { white-space: nowrap; }
.admin-table .is-muted td { color: var(--bs-secondary-color); }

.admin-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
}

.plan-card.is-inactive { opacity: 0.65; }

.plan-price {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.admin-locked {
  padding-block: 3rem;
  text-align: center;
  color: var(--bs-secondary-color);
}

.admin-locked svg { margin-bottom: 0.75rem; }

/* ---------------------------------------------------------------
   Tables that don't fit become cards
   ---------------------------------------------------------------
   main.js adds .is-stacked when a table is wider than its container
   (phone, tablet, or a wide table like the servers' on a laptop): each
   row is then a card and each cell a "label — value" line, the label
   being the column header copied onto the cell as data-label. Message
   rows (one cell spanning the table) stay centered; the actions cell
   sits at the bottom of the card. */

.admin-table.is-stacked thead { display: none; }

.admin-table.is-stacked,
.admin-table.is-stacked tbody,
.admin-table.is-stacked tr,
.admin-table.is-stacked td {
  display: block;
  width: 100%;
}

.admin-table.is-stacked tr {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--nm-rule);
  border-radius: var(--bs-border-radius-lg);
}

.admin-table.is-stacked tr:last-child { margin-bottom: 0; }

/* The label floats left; the cell's content (text, flag + name, badges)
   flows together on the right. */
.admin-table.is-stacked td {
  display: flow-root;
  padding: 0.375rem 0;
  border: 0;
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
}

.admin-table.is-stacked td::before {
  content: attr(data-label);
  float: left;
  max-width: 45%;
  margin-right: 1rem;
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
  text-align: left;
}

.admin-table.is-stacked td[colspan] { text-align: center; }
.admin-table.is-stacked td[colspan]::before,
.admin-table.is-stacked td.text-end::before { content: none; }
.admin-table.is-stacked td.text-end {
  padding-top: 0.625rem;
  border-top: 1px solid var(--nm-rule);
}

/* «Обращения»: not closed yet stays lit until closed -- waiting for a
   reply brighter, answered paler; a bar on the left in both layouts. */
.admin-table tr.sup-row-waiting { --sup-row-bg: var(--bs-warning-bg-subtle); --sup-row-bar: var(--bs-warning); }
.admin-table tr.sup-row-answered { --sup-row-bg: var(--bs-success-bg-subtle); --sup-row-bar: var(--bs-success-border-subtle); }
.admin-table tr.sup-row-waiting > td,
.admin-table tr.sup-row-answered > td { background-color: var(--sup-row-bg); }
.admin-table:not(.is-stacked) tr.sup-row-waiting > td:first-child,
.admin-table:not(.is-stacked) tr.sup-row-answered > td:first-child { box-shadow: inset 4px 0 0 var(--sup-row-bar); }
.admin-table.is-stacked tr.sup-row-waiting,
.admin-table.is-stacked tr.sup-row-answered {
  background-color: var(--sup-row-bg);
  border-left: 4px solid var(--sup-row-bar);
}

/* «Обращения»: a video from the Telegram bot, and the 2FA field of
   «Уведомления в Telegram». */
.sup-video { max-width: 100%; }
.sup-video-player { display: block; max-width: min(100%, 480px); max-height: 360px; border-radius: .5rem; background: #000; }
.sup-tg-code { width: 10rem; }