/* guest.voit.eu page styles on top of midnight.css and app.css.
   Colours and fonts come from midnight/bootstrap tokens; the page accent is --app.
   --acc is a local alias for the accent that the Wi-Fi page overrides. */

/* ---------- Public app: fluid centred column ---------- */
.app {
  --acc: var(--app);
  width: 100%; max-width: 34rem; min-height: 100vh; min-height: 100dvh; margin: 0 auto;
  display: flex; flex-direction: column;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 35rem) {
  .app { border-inline: 1px solid var(--bs-border-color); }
}
.apphead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 20px; border-bottom: 1px solid var(--bs-border-color);
  background: color-mix(in srgb, var(--bs-tertiary-bg) 90%, transparent);
}
.appmain { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 28px 20px 24px; }
.appmain-center { justify-content: center; gap: 24px; }
/* midnight's .shead is a 220px + 1fr grid; inside the narrow public column it stacks instead */
.appmain .shead { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.appmain .shead h1 { font-size: clamp(2rem, 8vw, 2.75rem); overflow-wrap: anywhere; }
.apphero, .appcol { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.apphero .shead { margin-bottom: 0; }
.appfoot { align-items: center; padding: 16px 20px 24px; font-size: 12px; color: var(--bs-tertiary-color); display: flex; justify-content: space-between; gap: 12px; }
.appfoot a { color: var(--bs-secondary-color); }
.shead h1 .hl { color: var(--app); }
.alert svg { flex-shrink: 0; }

/* Desktop: two columns (hero left, interactive content right), no phone-width column */
@media (min-width: 64rem) {
  .app { max-width: none; border-inline: 0; }
  .apphead, .appfoot { padding-inline: max(2rem, calc((100% - 76rem) / 2)); }
  .apphead { padding-block: 12px; }
  .appmain {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    column-gap: clamp(3rem, 7vw, 7rem); align-items: center; align-content: center;
    padding: 4rem max(2rem, calc((100% - 76rem) / 2));
  }
  .appmain .shead h1, .appmain.hero-bg h1, .adm .hero-bg h1 { font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -0.03em; }
  .appmain .shead .sub { font-size: 1.0625rem; max-width: 30em; }
  .appmain-center .apphero { align-items: flex-start; }
}

/* PIN */
.pinbox { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.pinbox span {
  height: 56px; border-radius: 10px; border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg);
  display: flex; align-items: center; justify-content: center;
}
.pinbox span.is-filled { border-color: color-mix(in srgb, var(--acc) 60%, var(--bs-border-color)); }
.pinbox span.is-filled::after { content: ""; width: 12px; height: 12px; border-radius: 99px; background: var(--acc); }
.pinbox span.is-current { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); }
.pinbox.err span { border-color: color-mix(in srgb, var(--bs-danger) 70%, var(--bs-border-color)); background: color-mix(in srgb, var(--bs-danger) 8%, var(--bs-tertiary-bg)); }
.pinbox.err span.is-filled::after { background: var(--bs-danger); }
.keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.key {
  font: inherit; font-family: var(--bs-font-monospace); font-size: 24px; font-weight: 600;
  height: 60px; border-radius: 12px; border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); color: var(--bs-body-color);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.key:hover { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--bs-tertiary-bg)); }
.key.ghost { background: transparent; border-color: transparent; color: var(--bs-secondary-color); font-size: 13px; }
.key.ghost:hover { color: var(--acc); }

/* Session timer */
.timer {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg);
  font-family: var(--bs-font-monospace); font-size: 13px; font-weight: 600; color: var(--bs-body-color);
}
.timer svg { color: var(--acc); }
.timer.low { border-color: color-mix(in srgb, var(--bs-danger) 55%, var(--bs-border-color)); color: var(--bs-danger); }
.timer.low svg { color: var(--bs-danger); }
.session-bar { display: flex; align-items: center; gap: 8px; }
.session-bar .logout-form .btn { min-height: 32px; white-space: nowrap; }
.session-bar .btn { padding-inline: .6rem; font-size: 12px; }
.tbarline { height: 3px; background: var(--bs-border-color); }
.tbarline i { display: block; height: 100%; background: var(--acc); }
.tbarline.low i { background: var(--bs-danger); }
/* Width steps set by the template (doors) and assets/app.js (countdown bar) */
.w-0 { width: 0%; }
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }

/* Panels */
.panel { background: var(--bs-tertiary-bg); border: 1px solid color-mix(in srgb, var(--acc) 22%, var(--bs-border-color)); border-radius: 14px; padding: 18px; }
.phd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.phd h2 { margin: 0; font-family: var(--bs-font-monospace); font-size: 14px; font-weight: 700; color: var(--acc); letter-spacing: 0; line-height: 1.4; }
.phd span { font-family: var(--bs-font-monospace); font-size: 12px; color: var(--bs-tertiary-color); }

/* Validity windows */
.win { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--bs-border-color); }
.win:first-of-type { border-top: 0; padding-top: 0; }
.win svg { color: var(--bs-secondary-color); flex-shrink: 0; }
.win div { flex: 1; min-width: 0; }
.win strong { display: block; font-size: 14.5px; font-weight: 600; }
.win em { display: block; font-style: normal; font-size: 12.5px; color: var(--bs-secondary-color); }

/* Status list */
.stat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.st {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px;
  border-radius: 10px; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
}
.st .sd { width: 22px; height: 22px; border-radius: 99px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.st.ok .sd { background: color-mix(in srgb, var(--bs-success) 18%, transparent); color: var(--bs-success); }
.st.err { border-color: color-mix(in srgb, var(--bs-danger) 50%, var(--bs-border-color)); }
.st.err .sd { background: color-mix(in srgb, var(--bs-danger) 18%, transparent); color: var(--bs-danger); }
.st b { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.st em { display: block; font-style: normal; font-family: var(--bs-font-monospace); font-size: 11px; color: var(--bs-secondary-color); line-height: 1.3; }
.st.ok em { color: var(--bs-success); }
.st.err em { color: var(--bs-danger); }
.stat > .st.full { grid-column: 1 / -1; }

/* Door buttons */
.doors { display: flex; flex-direction: column; gap: 12px; }
.door {
  font: inherit; text-align: left; width: 100%; cursor: pointer;
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 96px; padding: 16px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--acc) 45%, var(--bs-border-color));
  background: color-mix(in srgb, var(--acc) 10%, var(--bs-tertiary-bg)); color: var(--bs-body-color);
}
.door:hover { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 15%, var(--bs-tertiary-bg)); }
.door .dic { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--acc); color: var(--bs-dark); }
.door b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.door em { display: block; font-style: normal; font-family: var(--bs-font-monospace); font-size: 12.5px; color: var(--bs-secondary-color); margin-top: 4px; }
.door .ds {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px;
  font-family: var(--bs-font-monospace); font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); white-space: nowrap;
}
.door.busy { border-color: var(--acc); }
.door.busy .dic { background: color-mix(in srgb, var(--acc) 20%, var(--bs-tertiary-bg)); color: var(--acc); }
.door.busy .ds { border-color: var(--acc); color: var(--acc); }
.door.open { border-color: var(--bs-success); background: color-mix(in srgb, var(--bs-success) 12%, var(--bs-tertiary-bg)); }
.door.open .dic { background: var(--bs-success); color: var(--bs-dark); }
.door.open .ds { background: var(--bs-success); border-color: var(--bs-success); color: var(--bs-dark); }
.door.open em { color: var(--bs-success); }
.door.jammed { border-color: var(--bs-warning); background: color-mix(in srgb, var(--bs-warning) 12%, var(--bs-tertiary-bg)); }
.door.jammed .dic { background: var(--bs-warning); color: var(--bs-dark); }
.door.jammed .ds { background: var(--bs-warning); border-color: var(--bs-warning); color: var(--bs-dark); }
.door.jammed em { color: var(--bs-warning); }
.door:disabled { cursor: not-allowed; border-color: var(--bs-border-color); background: var(--bs-tertiary-bg); color: var(--bs-tertiary-color); }
.door:disabled .dic { background: var(--bs-secondary-bg); color: var(--bs-tertiary-color); }
.door:disabled .ds { border-color: color-mix(in srgb, var(--bs-danger) 50%, var(--bs-border-color)); color: var(--bs-danger); }
.spin { animation: acc-spin 0.9s linear infinite; }
@keyframes acc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

.big-ico { width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center; }

/* ---------- Admin ---------- */
.navbar .nav-link .sno { margin-right: .35em; padding: 0; background: none; font-size: .75em; opacity: .8; }
.navbar .nav-link .sno::before { content: none; }
.adm {
  --acc: var(--app);
  min-height: 100vh; background: var(--bs-body-bg); color: var(--bs-body-color);
  font-family: var(--bs-body-font-family); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Page titles in the hero-bg header: override midnight's display-size clamp */
.hero-bg h1, .adm .hero-bg h1 { font-size: clamp(2rem, 8vw, 2.75rem); line-height: 1.05; letter-spacing: -0.03em; }
.adm .hero-bg .shead { margin-bottom: 0; }
.inline-form { margin: 0; padding: 0; border: 0; }
.logout-form { margin: 0; padding: 0; border: 0; background: none; }
.who-profile { display: flex; align-items: center; gap: 12px; }
.who-profile .av { width: 32px; height: 32px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-size: 13px; background: color-mix(in srgb, var(--app) 20%, var(--bs-body-bg)); color: var(--app); }
.who-logout { background: none; border: 0; padding: 0; font: inherit; color: var(--bs-secondary-color); cursor: pointer; }
.who-logout:hover, .who-logout:focus-visible { color: var(--bs-body-color); }
.hstack-16 { display: flex; gap: 16px; align-items: center; }
.link-muted { font-size: 13px; color: var(--bs-secondary-color); text-decoration: none; }
.p-honest { margin: 0; font-size: 14px; }
.pb-14 { padding-bottom: 14px; }
.qr-sm { width: 120px; height: 120px; padding: 8px; }
.icon-access { background: color-mix(in srgb, var(--app) 14%, var(--bs-body-bg)); border: 1px solid color-mix(in srgb, var(--app) 30%, var(--bs-border-color)); color: var(--app); }

/* Toggle rows */
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.toggle b { display: block; font-weight: 600; }
.toggle em { display: block; font-style: normal; font-size: 13px; color: var(--bs-secondary-color); }
.toggle + .toggle { border-top: 1px solid var(--bs-border-color); padding-top: 18px; }

/* Week grid and legend */
.week { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); gap: 4px; font-family: var(--bs-font-monospace); font-size: 11px; color: var(--bs-tertiary-color); }
.week .c { height: 14px; border-radius: 3px; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); }
.week .c.r { background: color-mix(in srgb, var(--acc) 70%, var(--bs-tertiary-bg)); border-color: var(--acc); }
.week .c.s { background: color-mix(in srgb, var(--bs-indigo) 65%, var(--bs-tertiary-bg)); border-color: var(--bs-indigo); }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: var(--bs-secondary-color); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; }
.legend-recurring { background: var(--app); }
.legend-oneoff { background: var(--bs-indigo); }

/* Log list */
.loglist { display: flex; flex-direction: column; }
.loglist .li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--bs-border-color); font-size: 13.5px; }
.loglist .li:first-child { border-top: 0; padding-top: 0; }
.loglist .li time { font-family: var(--bs-font-monospace); font-size: 12px; color: var(--bs-tertiary-color); }

/* Pills and event rows */
.pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--bs-font-monospace); font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.pill.live { border-color: color-mix(in srgb, var(--bs-success) 50%, var(--bs-border-color)); color: var(--bs-success); }
.pill.err { border-color: color-mix(in srgb, var(--bs-danger) 55%, var(--bs-border-color)); background: color-mix(in srgb, var(--bs-danger) 12%, transparent); color: var(--bs-danger); }
.ev { display: inline-flex; align-items: center; gap: 8px; font-family: var(--bs-font-monospace); font-size: 12.5px; }
.ev i { width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ev.ok { color: var(--bs-success); } .ev.ok i { background: color-mix(in srgb, var(--bs-success) 15%, transparent); }
.ev.door { color: var(--acc); } .ev.door i { background: color-mix(in srgb, var(--acc) 15%, transparent); }
.ev.err { color: var(--bs-danger); } .ev.err i { background: color-mix(in srgb, var(--bs-danger) 15%, transparent); }
.ev.info { color: var(--bs-secondary-color); } .ev.info i { background: var(--bs-secondary-bg); }
.ev.wl { color: var(--bs-success); } .ev.wl i { background: color-mix(in srgb, var(--bs-success) 15%, transparent); }
.ev.tg { color: var(--bs-secondary-color); } .ev.tg i { background: var(--bs-secondary-bg); }

/* ---------- Guest Wi-Fi ---------- */
.wifi { --acc: var(--bs-success); }
.wifibar { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--bs-success) 35%, var(--bs-border-color)); background: color-mix(in srgb, var(--bs-success) 7%, var(--bs-tertiary-bg)); color: var(--bs-body-color); text-decoration: none; }
.wifibar:hover { border-color: var(--bs-success); color: var(--bs-body-color); }
.wifibar .wi { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bs-success) 16%, var(--bs-tertiary-bg)); color: var(--bs-success); }
.wifibar div { flex: 1; min-width: 0; }
.wifibar b { display: block; font-size: 15px; font-weight: 600; }
.wifibar em { display: block; font-style: normal; font-family: var(--bs-font-monospace); font-size: 12px; color: var(--bs-secondary-color); }
.wifibar.on em { color: var(--bs-success); }
.wifibar .arr { color: var(--bs-secondary-color); font-family: var(--bs-font-monospace); }
.wifibar.wait { border-style: dashed; background: var(--bs-tertiary-bg); }
.wifibar.wait .wi { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: st; }
.steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14.5px; line-height: 1.5; color: var(--bs-body-color); counter-increment: st; }
.steps li::before { content: counter(st); width: 32px; height: 32px; border-radius: 99px; display: flex; align-items: center; justify-content: center; font-family: var(--bs-font-monospace); font-size: 13px; font-weight: 700; background: color-mix(in srgb, var(--acc) 16%, var(--bs-tertiary-bg)); color: var(--acc); }
.steps li b { color: var(--bs-body-color); font-weight: 600; }
.steps code { font-family: var(--bs-font-monospace); font-size: 13px; color: var(--acc); }

/* ---------- Telegram preview ---------- */
.tgprev { border-radius: 12px; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.tgprev .tgh { display: flex; align-items: center; gap: 10px; font-family: var(--bs-font-monospace); font-size: 12px; color: var(--bs-secondary-color); }
.tgprev .tgh i { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--app) 18%, var(--bs-body-bg)); color: var(--app); font-style: normal; }
.tgmsg { align-self: flex-start; max-width: 100%; background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); border-radius: 4px 12px 12px 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; color: var(--bs-body-color); }
.tgmsg b { color: var(--app); }
.tgmsg span { display: block; color: var(--bs-body-color); }
.tgmsg time { display: block; text-align: right; font-family: var(--bs-font-monospace); font-size: 11px; color: var(--bs-tertiary-color); margin-top: 4px; }

/* ---------- Text utilities ---------- */
.text-18-wrap { font-size: 18px; color: var(--bs-body-color); overflow-wrap: anywhere; }
.text-a2 { color: var(--bs-success); }
.text-access { color: var(--app); }
.text-co { color: var(--bs-danger); }
.text-dim { color: var(--bs-tertiary-color); }
.text-dim-12 { font-size: 12px; color: var(--bs-tertiary-color); }
.text-muted-13 { font-size: 13px; color: var(--bs-secondary-color); }
.text-tx { color: var(--bs-body-color); }
.text-tx-bold { color: var(--bs-body-color); font-weight: 600; }