/* Personal cabinet. Everything is scoped to .cabinet and to its own class names:
 * no rule here reaches into the report that the host's renderer draws inside .cabinet-report.
 * Light: the app theme tokens, with the same values as fallbacks.
 * Dark: body.tg-dark (Telegram) or body.vk-dark (VK) set by the host; the dark palette is
 * spelled out here, so it does not depend on the host stylesheet.
 * data-theme="light|dark" on the cabinet root overrides both. */
.cabinet {
  --cb-bg: var(--bg, #FBF9F6);
  --cb-card: var(--card, #F2ECE4);
  --cb-ink: var(--ink, #2B2A28);
  --cb-muted: var(--muted, #6E655C);
  --cb-line: var(--line, #E2D9CE);
  --cb-accent: var(--terra, #8A6F5C);
  --cb-accent-deep: var(--terra-deep, #755C4B);
  --cb-link: #6B5444;
  --cb-danger: #A6462B;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 48rem;
  min-width: 0;
  margin: 0 auto;
  padding: 18px;
  color: var(--cb-ink);
  font: inherit;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
body.tg-dark .cabinet,
body.vk-dark .cabinet,
body .cabinet[data-theme="dark"] {
  --cb-bg: #1C1B18; --cb-card: #2A2924; --cb-ink: #F0EDE8; --cb-muted: #A69C8F; --cb-line: #3A3830;
  --cb-accent: #8A6F5C; --cb-accent-deep: #755C4B; --cb-link: #D9C3B0; --cb-danger: #E7A08A; color-scheme: dark;
}
/* After the dark rule on purpose: an explicit light theme wins over the host dark class. */
body .cabinet[data-theme="light"] {
  --cb-bg: #FBF9F6; --cb-card: #F2ECE4; --cb-ink: #2B2A28; --cb-muted: #6E655C; --cb-line: #E2D9CE;
  --cb-accent: #8A6F5C; --cb-accent-deep: #755C4B; --cb-link: #6B5444; --cb-danger: #A6462B; color-scheme: light;
}

.cabinet [hidden] { display: none; }
.cabinet .cabinet-title { margin: 0 0 14px; font: inherit; font-size: 22px; font-weight: 700; line-height: 1.3; }
.cabinet .cabinet-title:focus-visible,
.cabinet .cabinet-report-title:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 3px; border-radius: 4px; }
.cabinet .cabinet-view { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }

.cabinet .cabinet-list { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; margin: 0; padding: 0; list-style: none; }
.cabinet .cabinet-item {
  display: flex; align-items: center; box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 12px 14px;
  font: inherit; font-size: 16px; text-align: left; color: var(--cb-ink); background: var(--cb-card);
  border: 1.5px solid var(--cb-line); border-radius: var(--r-sm, 12px); cursor: pointer;
}
.cabinet .cabinet-item:hover { border-color: var(--cb-accent); }
.cabinet .cabinet-item:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 2px; border-color: var(--cb-accent); }

.cabinet .cabinet-secondary,
.cabinet .cabinet-back {
  display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; margin: 0; padding: 8px 2px;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--cb-link); background: transparent; border: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
/* Decorative arrow: the second declaration gives it empty alt text where supported, so the name stays «К списку отчётов». */
.cabinet .cabinet-back::before { content: "\2190\00A0"; content: "\2190\00A0" / ""; text-decoration: none; display: inline-block; }
.cabinet .cabinet-secondary:hover,
.cabinet .cabinet-back:hover { color: var(--cb-ink); }
.cabinet .cabinet-secondary:focus-visible,
.cabinet .cabinet-back:focus-visible { outline: 2px solid var(--cb-ink); outline-offset: 2px; border-radius: 6px; }
.cabinet .cabinet-back:disabled { opacity: .55; cursor: not-allowed; }

.cabinet .cabinet-report-title { margin: 0; font: inherit; font-size: 18px; font-weight: 700; line-height: 1.35; }
.cabinet .cabinet-report {
  box-sizing: border-box; width: 100%; min-width: 0; padding: 14px 16px; background: var(--cb-card); color: var(--cb-ink);
  border: 1px solid var(--cb-line); border-radius: var(--r-md, 16px);
}
.cabinet .cabinet-report:empty { display: none; }

.cabinet .cabinet-mail { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; }
.cabinet .cabinet-send {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 48px;
  margin: 0; padding: 13px 20px; font: inherit; font-weight: 600; color: #fff; background: var(--cb-accent);
  border: 0; border-radius: 999px; cursor: pointer;
}
.cabinet .cabinet-send:hover { background: var(--cb-accent-deep); }
.cabinet .cabinet-send:focus-visible { outline: 2px solid var(--cb-ink); outline-offset: 2px; }
.cabinet .cabinet-send:disabled { opacity: .55; cursor: not-allowed; }
.cabinet[aria-busy="true"] .cabinet-send { cursor: progress; }

.cabinet .cabinet-notice,
.cabinet .cabinet-mail-note { margin: 0; font-size: 14px; color: var(--cb-muted); }
.cabinet .cabinet-status { margin: 12px 0 0; font-size: 14px; color: var(--cb-ink); }
/* Empty, the status region stays in the accessibility tree but takes no room. */
.cabinet .cabinet-status:empty { margin: 0; }
.cabinet .cabinet-error { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--cb-danger); }
.cabinet .cabinet-error::before { content: "! "; }