/* Статичні сторінки: вхід, 2FA, помилки. Кольори — як у темі робочої області (HotelTheme.cs).
   Mobile-first: базові стилі — для телефона, ширші екрани — у @media наприкінці. */

:root {
  --brand-primary: #3f7d66;
  --brand-primary-contrast: #ffffff;
  --brand-accent: #96beaa;

  --color-text: #1f2d27;
  --color-muted: #5b6b64;
  --color-bg: #ffffff;
  --color-bg-soft: #eaf3ef;
  --color-border: #d6e2dc;
  --color-error: #b3261e;
  --color-error-bg: #fdecea;
  --color-info: #1f4f7a;
  --color-info-bg: #e8f1fa;

  --font-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 8px;
  --space: 1rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg-soft);
}

a {
  color: var(--brand-primary);
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* ── Картка входу ───────────────────────────────────────── */

.auth-page {
  flex: 1 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem var(--space);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 1.5rem 1.25rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(31 45 39 / 8%);
}

.auth-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
}

.auth-card__brand {
  font-weight: 700;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

.auth-card__title {
  font-size: 1.5rem;
}

.auth-card__footer {
  margin: 1rem 0 0;
  text-align: center;
}

.page-message__meta {
  color: var(--color-muted);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

/* ── Перемикач мови ─────────────────────────────────────── */

.language-switcher {
  display: inline-flex;
  gap: 0.25rem;
  margin: 0;
}

.language-switcher__option {
  min-width: 44px;
  min-height: 36px;
  padding: 0.25rem 0.5rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-primary);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.language-switcher__option--current {
  color: var(--brand-primary-contrast);
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* ── Форми й кнопки ─────────────────────────────────────── */

.form {
  display: grid;
  gap: 1rem;
}

.form__field {
  display: grid;
  gap: 0.35rem;
}

.form__field label {
  font-weight: 600;
}

.form__field input {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.form__field input:focus {
  border-color: var(--brand-primary);
}

.form__check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Підказка під полем: формат, наслідки, як на сторінці входу про спільний комп'ютер. */
.form__hint {
  margin: -0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.form__field .form__hint {
  margin: 0;
}

/* «Мій обліковий запис»: підписи й значення в один стовпчик на телефоні. */
.account-facts {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 0.35rem 1rem;
  margin: 0 0 1.25rem;
}

.account-facts dt {
  font-weight: 600;
}

.account-facts dd {
  margin: 0;
  overflow-wrap: break-word;
}

/* На телефоні підпис над значенням: інакше довгий підпис стискає значення до переносу посеред слова. */
@media (max-width: 480px) {
  .account-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }

  .account-facts dd {
    margin-bottom: 0.6rem;
  }
}

.account-links {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.account-links .button {
  text-align: center;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  font: inherit;
  font-weight: 600;
  color: var(--brand-primary);
  text-decoration: none;
  cursor: pointer;
  background: var(--color-bg);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius);
}

.button--primary {
  color: var(--brand-primary-contrast);
  background: var(--brand-primary);
}

.button--primary:hover {
  filter: brightness(0.92);
}

.button--block {
  width: 100%;
}

.alert {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
}

.alert--error {
  color: var(--color-error);
  background: var(--color-error-bg);
}

.alert--info {
  color: var(--color-info);
  background: var(--color-info-bg);
}

/* ── Налаштування 2FA ───────────────────────────────────── */

.steps {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}

.qr-code {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0.75rem 0;
  image-rendering: pixelated;
}

.shared-key {
  display: grid;
  gap: 0.25rem;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.shared-key code {
  font-size: 1rem;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 1rem 0 1.5rem;
  padding: 1rem;
  list-style: none;
  background: var(--color-bg-soft);
  border-radius: var(--radius);
}

/* ── Помилка Blazor ─────────────────────────────────────── */

#blazor-error-ui {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  color: var(--color-text);
  background: #fff4ce;
  box-shadow: 0 -1px 4px rgb(0 0 0 / 20%);
}

#blazor-error-ui .dismiss {
  position: absolute;
  right: 1rem;
  cursor: pointer;
}

@media (min-width: 768px) {
  :root {
    --space: 1.5rem;
  }

  .auth-page {
    align-items: center;
  }

  .auth-card {
    padding: 2.5rem 2rem;
  }
}

.preparation-page { max-width: 1000px; padding: 20px; margin: auto; }
.preparation-nav { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; margin-bottom:8px; }
.preparation-nav__logout { margin-left:auto; }
.preparation-nav__logout .button { min-height:40px; padding:0.35rem 1rem; }
.preparation-page .form { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.preparation-page label { display:flex; flex-direction:column; gap:6px; }
.preparation-card { background:white; border:1px solid #ccd9d5; border-radius:8px; margin:12px 0; padding:16px; }
.preparation-card--overdue { border-left:5px solid #ad4313; }
.preparation-page input,.preparation-page select { max-width:100%; min-height:42px; }
@media(max-width:600px) { .preparation-page { padding:12px; } .preparation-page label { width:100%; } }

.preparation-state { display:inline-block; padding:3px 10px; border:1px solid; border-radius:12px; }
.preparation-state--ready { color:#15533e; background:#daf0e5; }
.preparation-state--pending { color:#785400; background:#fff0c2; }
.preparation-state--cancelled { color:#535b59; background:#edf0ef; }
/* «Робота на сьогодні» (D-080): причина — значок, текст і колір, а не лише колір. */
.today-section { margin: 20px 0 28px; }
.today-section h2 small { font-weight: 400; color: var(--color-muted); font-size: 0.9rem; }
.today-card { background:white; border:1px solid #ccd9d5; border-radius:8px; margin:12px 0; padding:14px 16px; }
.today-card--arrivaltoday { border-left:5px solid #b3261e; }
.today-card--departuretoday { border-style:dashed; background:transparent; color:var(--color-muted); }
.today-card__head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.today-card__head h3 { margin:0; font-size:1.1rem; }
.today-card__meta { margin:6px 0 0; color:var(--color-muted); font-size:0.95rem; }
.today-reason { display:inline-block; padding:3px 10px; border:1px solid; border-radius:12px; font-size:0.85rem; font-weight:600; white-space:nowrap; }
.today-reason--arrivaltoday { color:#8c1d18; background:#fdecea; }
.today-reason--afterdeparture { color:#785400; background:#fff0c2; }
.today-reason--stayover { color:#1f4f7a; background:#e8f1fa; }
.today-reason--departuretoday { color:#535b59; background:#edf0ef; }
.today-reason--awaitinginspection { color:#4a2f8a; background:#efe9fb; }
.today-note { margin:8px 0 0; padding:6px 8px; background:#f5f7f6; border-left:3px solid #ccd9d5; }
.today-block { margin:6px 0 0; color:#8c1d18; }
.today-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.today-actions .button { flex:1 1 140px; min-height:48px; }
.today-empty { padding:12px; text-align:center; color:var(--color-muted); }


/* Рахунок на оплату й акт (FR-DOC-008): аркуш А4 на екрані й чистий друк без кнопок і тла. */
.document-page { width: 100%; max-width: 210mm; margin: 0 auto; padding: 16px; }
.document-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; color: var(--color-muted); }
.document { position: relative; background: #fff; color: #000; border: 1px solid var(--color-border); padding: 15mm; font-size: 11pt; line-height: 1.4; overflow-wrap: anywhere; }
.document h1 { font-size: 15pt; margin: 14pt 0 8pt; text-align: center; }
.document h2 { font-size: 11pt; margin: 0; font-weight: 400; color: #333; }
.document p { margin: 2pt 0; }
.document-party { margin-bottom: 8pt; }
.document-name { font-weight: 700; }
.document-table { overflow-x: auto; margin: 10pt 0; }
.document-lines { width: 100%; min-width: 120mm; border-collapse: collapse; }
/* break-word, а не anywhere: інакше таблиця стискає вузькі колонки й рве «Кількість» і «послуга» посеред слова. */
.document-lines th, .document-lines td { border: 1px solid #000; padding: 3pt 5pt; vertical-align: top; text-align: left; overflow-wrap: break-word; }
.document-lines th { white-space: nowrap; }
.document-lines tr { break-inside: avoid; }
.document-lines .document-number { text-align: right; white-space: nowrap; }
.document-total { font-weight: 700; text-align: right; }
.document-signatures { display: flex; flex-wrap: wrap; gap: 20mm; margin-top: 18pt; break-inside: avoid; }
.document-signature { flex: 1 1 60mm; }
.document-sign-line { margin-top: 18pt !important; border-top: 1px solid #000; padding-top: 2pt; min-height: 14pt; }
/* Анульований документ позначено й на друку: колір тут не єдиний носій змісту — є слово. */
.document-annulled { border: 3px solid var(--color-error); color: var(--color-error); font-size: 16pt; font-weight: 700; text-align: center; padding: 4pt; margin-bottom: 10pt !important; letter-spacing: 2pt; }
@media (max-width: 600px) { .document-page { padding: 8px; } .document { padding: 12px; font-size: 10pt; } .document-lines th, .document-lines td { padding: 2pt 3pt; } }
@page { size: A4; margin: 15mm; }
@media print {
  body { background: #fff; display: block; min-height: 0; }
  .no-print { display: none !important; }
  .document-page { max-width: none; padding: 0; }
  .document { border: 0; padding: 0; }
  .document-table { overflow: visible; }
  .document-annulled { color: #000; border-color: #000; }
}

/* Документи гостя (FR-GDOC-001…005): підтвердження бронювання й реєстраційна картка — той самий аркуш, що й рахунок. */
.guest-doc-panel { margin-bottom: 12px; }
.guest-doc-copy { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0; }
.guest-doc-copied { font-weight: 700; color: var(--color-success, #1b5e20); }
.guest-doc-text { display: block; width: 100%; min-height: 12rem; margin: 8px 0; font: inherit; }
.guest-doc-text[hidden] { display: none; }
.guest-doc + .guest-doc, .guest-doc-divider + .guest-doc { margin-top: 12px; }
.guest-doc-divider { margin: 16px 0 0; font-weight: 700; text-align: center; }
.guest-doc-ended { color: #555; }
.guest-doc-list { margin: 6pt 0; padding-left: 16pt; }
.guest-doc-sums { margin: 8pt 0 8pt auto; border-collapse: collapse; }
.guest-doc-sums td { padding: 1pt 0 1pt 12pt; }
.guest-doc-terms { white-space: pre-line; }
.guest-doc-contacts { margin-top: 10pt; color: #333; }
.guest-card h1 { margin-top: 8pt; }
.guest-card-stay th, .guest-card-fields th { width: 40%; white-space: normal !important; }
.guest-card-fields td { height: 22pt; }
.guest-card-hint { margin-top: 10pt !important; font-weight: 700; }
.guest-card-privacy { margin-top: 10pt; font-size: 9pt; white-space: pre-line; }
.guest-card-rules { margin-top: 8pt !important; }
@media print {
  .guest-doc-divider { break-before: page; }
}

/* Аварійний пакет (FR-BCP-001…003): аркуш А4; на телефоні таблиці стають картками з підписами колонок. */
.pack { background: #fff; color: #000; border: 1px solid var(--color-border); padding: 12mm; font-size: 10pt; line-height: 1.35; overflow-wrap: break-word; }
.pack h1 { font-size: 15pt; margin: 0 0 4pt; }
.pack h2 { font-size: 12pt; margin: 12pt 0 4pt; border-bottom: 2px solid #000; padding-bottom: 2pt; }
.pack h3 { font-size: 10.5pt; margin: 8pt 0 3pt; }
.pack p { margin: 2pt 0; }
.pack-meta { color: #333; }
.pack-warning { border: 2px solid #000; padding: 4pt 6pt; margin: 6pt 0 !important; font-weight: 700; }
.pack-hint { color: #333; font-size: 9pt; }
.pack-empty { color: #333; font-style: italic; }
.pack-table { width: 100%; border-collapse: collapse; margin: 3pt 0; }
.pack-table th, .pack-table td { border: 1px solid #000; padding: 2pt 4pt; text-align: left; vertical-align: top; }
.pack-table th { background: #eee; }
.pack-table tr { break-inside: avoid; }
.pack-number { text-align: right; white-space: nowrap; }
/* Позначка — жирним шрифтом і словом, тож читається й на чорно-білому друку. */
.pack-mark { font-weight: 700; }
.pack-week th, .pack-week td { text-align: center; }
.pack-week th:first-child, .pack-week td:first-child { text-align: left; }
.pack-day--occupied, .pack-day--blocked { font-weight: 700; }
.pack-manual { break-before: page; }
.pack-manual-table { table-layout: fixed; }
.pack-manual-table td { height: 22pt; }
@media (max-width: 600px) {
  .pack { padding: 12px; border: 0; }
  .pack-cards thead { display: none; }
  .pack-cards, .pack-cards tbody, .pack-cards tr, .pack-cards td { display: block; width: 100%; }
  .pack-cards tr { border: 1px solid #000; margin-bottom: 6pt; padding: 3pt 5pt; }
  .pack-cards td { border: 0; padding: 1pt 0; display: flex; gap: 8px; justify-content: space-between; }
  .pack-cards td::before { content: attr(data-label); font-weight: 700; flex: 0 0 40%; }
  .pack-cards .pack-number { text-align: left; }
  .pack-week, .pack-manual-table { font-size: 8.5pt; }
  .pack-week th, .pack-week td { padding: 2pt; overflow-wrap: anywhere; }
  /* Заголовки аркуша ручного запису дрібніше, щоб слова не рвалися посередині. */
  .pack-manual-table th { padding: 2pt 1pt; font-size: 7pt; overflow-wrap: normal; hyphens: auto; }
}
@media print { .pack { border: 0; padding: 0; } }

/* Попередження про вихід через бездіяльність (SEC-009) — створює js/session-idle.js. */
.session-idle {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 2000;
    max-width: 560px; margin: 0 auto; padding: 12px 16px;
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
    background: #fff8e1; color: #3e2723; border: 2px solid #f57f17; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.session-idle p { margin: 0; flex: 1 1 240px; }
.session-idle__button {
    font: inherit; font-weight: 600; padding: 8px 16px; cursor: pointer;
    background: #1565c0; color: #fff; border: 0; border-radius: 6px;
}
.session-idle__button:focus-visible { outline: 3px solid #0d47a1; outline-offset: 2px; }
@media print { .session-idle { display: none; } }