/* ============================================================================
   /cp/ — simplified account cabinet. Loaded after brand.css.
   ========================================================================== */

/* Greeting */
.greeting { display: flex; flex-direction: column; gap: var(--bv-sp-1); }
.greeting h1 { font-size: clamp(22px, 18px + 1vw, 26px); }
.greeting__sub { font-size: var(--bv-fs-base); color: var(--bv-ink-faint); }

/* "N days left" card */
.stat-card { gap: var(--bv-sp-2); padding: var(--bv-sp-6); border-radius: var(--bv-r-lg); }
.stat-card__label {
  font-size: var(--bv-fs-sm);
  font-weight: 600;
  color: var(--bv-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.stat-card__value {
  font-family: var(--bv-font-display);
  font-size: var(--bv-fs-stat);
  font-weight: 600;
  line-height: 1.1;
  color: var(--bv-ink-faint); /* no subscription */
}
.stat-card__value.is-ok     { color: var(--bv-ok); }
.stat-card__value.is-warn   { color: var(--bv-warn-strong); }
.stat-card__value.is-danger { color: var(--bv-danger); }
.stat-card__caption { font-size: var(--bv-fs-sm); color: var(--bv-ink-soft); }
.stat-card .btn-renew { margin-top: 10px; }

/* Device count badge */
.count-pill {
  font-size: var(--bv-fs-sm);
  font-weight: 700;
  color: var(--bv-ink-soft);
  background: var(--bv-bg);
  border: 1px solid var(--bv-line);
  padding: 6px 14px;
  border-radius: var(--bv-r-pill);
  white-space: nowrap;
}

/* List rows: transaction history and devices */
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bv-sp-3);
  background: var(--bv-bg);
  border: 1px solid var(--bv-line);
  border-radius: var(--bv-r-sm);
  padding: 14px 16px;
  transition: border-color var(--bv-dur-fast) ease;
}
.list-row:hover { border-color: var(--bv-line-strong); }
.list-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.list-row__title {
  font-size: var(--bv-fs-base);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-row__meta { font-size: var(--bv-fs-xs); color: var(--bv-ink-faint); }
.list-row__amount { flex-shrink: 0; font-size: var(--bv-fs-md); font-weight: 700; }
.list-row__amount.is-credit { color: var(--bv-ok); }

/* Devices slightly larger, with a bigger radius */
.device-row { border-radius: var(--bv-r-md); }
.device-row .list-row__title { font-size: var(--bv-fs-md); font-weight: 700; }
.device-row__actions { display: flex; align-items: center; gap: var(--bv-sp-2); flex-shrink: 0; }

/* Login blocks (.auth-box, .email-box, .tg-alt) live in brand.css —
   shared with the onboarding page. */

/* Renewal period chips: three equal columns; the discount badge is a
   floating pill on the top corner (otherwise it does not fit in the chip). */
.period-row { display: flex; gap: 10px; padding-top: 10px; }
.chip--period {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 6px 12px;
}
.chip--period .chip__label { font-size: var(--bv-fs-base); font-weight: 700; white-space: nowrap; }
.chip--period .chip__price { font-size: var(--bv-fs-xs); color: var(--bv-ink-faint); white-space: nowrap; }
.chip--period.is-active .chip__price { color: var(--bv-accent-ink); opacity: 0.85; }
.chip__badge {
  position: absolute;
  top: -11px; right: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--bv-surface);
  background: var(--bv-ok);
  padding: 2px 7px;
  border-radius: var(--bv-r-pill);
  border: 2px solid var(--bv-accent-ink);
  white-space: nowrap;
}

/* Narrow panel: periods wrap into a column (container query with a
   media-query fallback for older browsers). */
@media (max-width: 380px) { .period-row { flex-direction: column; } }
@supports (container-type: inline-size) {
  .card.sheet { container-type: inline-size; }
  @container (max-width: 340px) { .period-row { flex-direction: column; } }
}

/* Payment method — chip row with a description */
.chip--method {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 14px 18px;
}
.chip--method .chip__name { font-size: var(--bv-fs-md); font-weight: 700; }
.chip--method .chip__desc { font-size: var(--bv-fs-xs); font-weight: 400; color: var(--bv-ink-faint); }
.chip--method.is-active { background: var(--bv-danger-bg); border-color: var(--bv-accent); color: var(--bv-ink); }

/* Label above a field group */
.field-label {
  display: block;
  font-size: var(--bv-fs-sm);
  font-weight: 600;
  color: var(--bv-ink-faint);
  margin-bottom: 10px;
}

/* "Connection link + Copy" row lives in brand.css (shared with onboarding) */

/* "Unlink all" confirmation strip */
.confirm-strip {
  display: flex;
  align-items: center;
  gap: var(--bv-sp-3);
  flex-wrap: wrap;
  background: var(--bv-danger-bg);
  border-radius: var(--bv-r-sm);
  padding: 12px 16px;
  font-size: var(--bv-fs-sm);
  color: var(--bv-danger-ink);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .page-header { padding: 14px; gap: 10px; }
}

/* --- Contextual refinements of brand.css components --- */

/* Header: "Log out" more prominent than a regular link-muted */
.page-header .link-muted { font-size: var(--bv-fs-base); font-weight: 600; color: var(--bv-ink-mute); }

/* Typography inside cards */
.card h1 { font-size: clamp(22px, 18px + 1vw, 26px); }
.card h2 { font-size: var(--bv-fs-panel); }
.card p { font-size: var(--bv-fs-md); color: var(--bv-ink-soft); }

/* Stat card footer: balance + history link */
.stat-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: var(--bv-sp-2);
  flex-wrap: wrap;
  font-size: var(--bv-fs-xs);
}
.stat-card__more { margin-top: var(--bv-sp-2); }

/* Quick-amount chip row */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* "Done" note in the renewal panel */
.done-note { font-weight: 600; color: var(--bv-ok); }

/* Device limit warning */
.limit-hint { font-size: var(--bv-fs-xs); color: var(--bv-warn-strong); }