/*!
 * Fresh Air — customer cabinet content, on top of shell.css
 *
 * Phone first: everything stacks in one column and stays inside 360 px;
 * wider screens get the key's QR beside the link and facts side by side.
 *
 * The look is the public pages' (tokens.css, site.css: fonts, colors,
 * buttons, cards, the backdrop on <main>). shell.css is shared with the
 * admin panel, so the cabinet's own touches to the shell live here --
 * the admin panel doesn't load this file.
 */

/* Bootstrap's "subtle" primary (the active menu item, own messages in a
   ticket) in the accent's wash instead of its blue. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-primary-bg-subtle: var(--fa-wash-lime);
  --bs-primary-border-subtle: var(--fa-lime-line);
}

/* ---------- shell: header tag, menu, the sidebar's foot ---------- */

.app-tag {
  font: 500 0.66rem/1 var(--fa-mono);
  letter-spacing: 0.18em;
  color: var(--fa-lime-ink);
}

.app-nav-title {
  font: 500 0.66rem/1 var(--fa-mono);
  letter-spacing: 0.24em;
  color: var(--fa-dim);
}

.app-nav-link {
  border-radius: 12px;
  color: var(--fa-mut);
}
.app-nav-link:hover { background: var(--fa-wash-lime); color: var(--fa-ink); }
.app-nav-link.active {
  background: var(--fa-wash-lime);
  box-shadow: inset 2px 0 0 var(--fa-lime-ink);
  color: var(--fa-ink);
}
.app-nav-link.active svg { color: var(--fa-lime-ink); }
/* Unread replies: the count in the accent, not Bootstrap's red. */
.app-nav-link [data-support-badge] {
  background: var(--fa-lime) !important;
  color: var(--fa-on-lime) !important;
  font: 500 0.7rem/1 var(--fa-mono);
}

#meLevel {
  font: 500 0.66rem/1.6 var(--fa-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fa-lime-ink) !important;
}

/* ---------- status badges (widgets.js badge) ----------
   One set across the cabinet: ok -- paid, active, paid out; wait -- under
   way; muted -- closed, expired, over; warn -- something went wrong. */
.cab-badge {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 500 0.66rem/1.2 var(--fa-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cab-badge-ok { background: var(--fa-wash-lime); border-color: var(--fa-lime-line); color: var(--fa-lime-ink); }
.cab-badge-wait { border-color: var(--fa-cyan-line); color: var(--fa-cyan); }
.cab-badge-muted { border-color: var(--fa-line); color: var(--fa-dim); }
.cab-badge-warn { border-color: var(--fa-warn); color: var(--fa-warn); }

/* «Показать все (N)» / «Свернуть» under a folded history list. */
.cab-fold {
  margin-top: 0.5rem;
  padding: 0.25rem 0;
  font: 500 0.7rem/1.2 var(--fa-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

/* «/ 6 месяцев» after a price stays in one piece in a narrow card. */
.pricing-price [data-period] { white-space: nowrap; }

/* A plan that can't be ordered yet (pay.js, is-closed): plainly inactive,
   not a working button that merely doesn't respond. */
.pricing-card [data-order].is-closed:disabled {
  background: transparent;
  background-image: none;
  border-color: var(--fa-line);
  box-shadow: none;
  color: var(--fa-dim);
  opacity: 1;
}

/* The sidebar's foot: email and level, "Выйти" beside them on a phone. */
.app-me {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.cab-section:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 60rem;
}

.cab-card .card-body { padding: 1.25rem; }

@media (width >= 768px) {
  .cab-card .card-body { padding: 1.5rem; }
}

/* Banners: text, then the action; the action wraps under on a phone. */
.cab-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0;
}

.cab-level {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--fa-lime-line);
  border-radius: 999px;
  font: 500 0.66rem/1.2 var(--fa-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fa-lime-ink);
}

.cab-facts {
  display: grid;
  gap: 1rem;
}

@media (width >= 576px) {
  .cab-facts { grid-template-columns: 2fr 1fr; }
}

.cab-fact-label {
  margin-bottom: 0.25rem;
  font: 500 0.66rem/1.3 var(--fa-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fa-dim);
}

/* The key: link + app button, QR beside it from md up. */
.cab-key {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (width >= 768px) {
  .cab-key { flex-direction: row; align-items: flex-start; }
}

.cab-key-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* Black on white in dark mode too, with a white frame beyond the code's
   own quiet zone; modules stay crisp when scaled. */
.cab-qr {
  flex: none;
  align-self: flex-start;
  padding: 0.5rem;
  background: #fff;
  border-radius: var(--bs-border-radius);
}

.cab-qr img {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.cab-steps {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0;
  padding-left: 1.25rem;
}

.cab-steps > li::marker { font-weight: 600; }

.cab-hist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cab-hist-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.125rem 1rem;
  align-items: center;
  padding: 0.75rem 0;
  border-top: 1px solid var(--nm-rule);
}

.cab-hist-item:first-child { border-top: 0; padding-top: 0; }
.cab-hist-item .cab-badge { grid-column: 2; grid-row: 1 / span 2; }

.cab-faq {
  padding: 0.75rem 0;
  border-top: 1px solid var(--nm-rule);
}

.cab-faq:first-of-type { border-top: 0; padding-top: 0; }
.cab-faq summary { cursor: pointer; font-weight: 600; }

details > summary { cursor: pointer; }

.cab-support-data {
  margin: 0;
  padding: 0.75rem;
  white-space: pre-wrap;
  background: var(--bs-secondary-bg);
  border-radius: var(--bs-border-radius);
}

/* Recovery codes, shown once: two columns from the smallest phone up. */
.cab-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.5rem;
  margin: 0 0 1.25rem;
  padding-left: 1.75rem;
  font-size: 1rem;
}

/* «Попутный ветер»: the totals two by two on a phone, in a row from md. */
.tw-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (width >= 768px) {
  .tw-facts { grid-template-columns: repeat(4, 1fr); }
}

.tw-code-name {
  font-family: var(--bs-font-monospace);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.tw-date { min-width: 10rem; }