/* Reusable interface components */

/* Sun/moon theme toggle. Sits in the eyebrow line of every header. */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--primary-deep);
  /* The eyebrow is uppercase with wide tracking – the glyph must not inherit it. */
  font-size: 1rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.theme-toggle:hover {
  border-color: var(--primary);
  background: var(--surface-strong);
}

.brand-logo {
  display: block;
  width: min(245px, 30vw);
  height: auto;
  border: 0;
  box-shadow: none;
  /* The logo is dark blue with no light outline – on a dark background it needs
     its own light plate to stay legible. In the light theme all three are no-ops. */
  padding: var(--logo-pad);
  border-radius: var(--logo-radius);
  background: var(--logo-bg);
  filter: drop-shadow(0 5px 10px rgba(16, 41, 104, 0.12));
  object-fit: contain;
}

.brand-logo-large {
  width: 100%;
  justify-self: end;
}
.header-logo {
  position: static;
  width: clamp(128px, 17vw, 176px);
  flex: 0 0 auto;
  align-self: center;
  /* Pushes the logo to the right edge, where it stands on its own. */
  margin-left: auto;
}

/* Carries the save state only. The online indicator was removed: the app works
   fully offline, so the network state told the user nothing. */
.status-group {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.status-text {
  min-width: 0;
  overflow-wrap: anywhere;
  /* Was #a9b8c8 on a light ground: 2.02:1, unreadable in daylight. This is the
     only feedback that the entry is safely stored, so it has to survive sun. */
  color: var(--muted);
}

.tab {
  padding: 0.72rem 0.9rem;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}
.tab.is-active {
  border-bottom-color: var(--primary);
  background: transparent;
  color: var(--primary-deep);
}

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(35, 48, 61, 0.06);
  font-weight: 700;
}
.button:hover {
  background: var(--surface-soft);
}
.button-primary {
  border-color: var(--primary-deep);
  background: linear-gradient(180deg, var(--primary), var(--primary-deep));
  color: var(--on-primary);
}
.button-primary:hover {
  background: linear-gradient(180deg, var(--primary-hover), var(--primary-deep));
}
.button-danger {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}
/* Small buttons are used for probe switching and the pump start/stop controls –
   both are pressed in the field, so they keep the 44 px touch-target size. */
.button-small {
  min-height: 44px;
  padding: 0.46rem 0.85rem;
  font-size: 0.88rem;
}
.file-button {
  cursor: pointer;
}

.mode-card {
  min-height: 230px;
  display: grid;
  gap: 0.65rem;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(160deg, var(--surface), var(--panel-alt));
  color: var(--ink);
  box-shadow: 0 12px 28px rgba(24, 52, 135, 0.08);
  text-align: left;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.mode-card:hover,
.mode-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 18px 34px rgba(24, 52, 135, 0.15);
}
.mode-card-kicker {
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mode-card strong {
  color: var(--primary-deep);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
}
.mode-card > span:not(.mode-card-kicker):not(.mode-card-action) {
  color: var(--muted);
  line-height: 1.5;
}
.mode-card-action {
  align-self: end;
  width: fit-content;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 800;
}

.icon-button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--danger-line);
  border-radius: 9px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 1.35rem;
  line-height: 1;
}

input:focus,
textarea:focus,
select:focus,
button:focus-visible,
summary:focus-visible,
a:focus-visible,
label.file-button:focus-within {
  outline: 3px solid rgba(24, 52, 135, 0.28);
  outline: 3px solid color-mix(in srgb, var(--focus) 28%, transparent);
  outline-offset: 2px;
  border-color: var(--focus);
}

/* Mobile-safe PDF export dialog */
.pdf-dialog {
  width: min(560px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(16, 41, 104, 0.3);
}

.pdf-dialog::backdrop {
  background: rgba(22, 31, 44, 0.56);
  backdrop-filter: blur(4px);
}

.pdf-dialog-card {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-top: 5px solid var(--primary);
  border-radius: 22px;
  background: linear-gradient(145deg, var(--surface), var(--bg-accent));
}

.pdf-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.pdf-dialog-header h2 {
  margin: 0.2rem 0 0;
  color: var(--primary-deep);
}

.pdf-close-button {
  flex: 0 0 auto;
  border-color: var(--line-strong);
  background: var(--surface-raised);
  color: var(--ink);
}

.pdf-dialog-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  margin: 1rem 0;
}

.pdf-dialog-actions .button {
  width: 100%;
  text-decoration: none;
}

.selector-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.selector-footer .mode-privacy {
  margin: 0;
}

/* Compact document actions *

/* Probe switcher: reaching the probe list meant scrolling to the very bottom of
   the form, so switching/adding a probe lives in the toolbar as well. *

/* Equal columns. Each button used to size itself (narrow / wide / medium),
   which read as a ragged row. *

/* Equal columns only look calm when no label wraps. Restricted to the direct
   toolbar buttons: the menu panel is a descendant of .toolbar-actions as well,
   and its longer labels must be allowed to wrap. *

/* Anchored to .toolbar (not to the toggle) so the panel stays on screen. *

/* Full width inside the two-column grid of the group. *

/* Long label; needs the full width of the group. *

/* The header only REPORTS which protocol is open. Changing it happens in the
   "Vorlage" tab - one place to read, one place to change. */
.header-form-name {
  margin: 0;
  color: var(--primary-deep);
  font-size: 1.02rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}


/* Bottom tab bar: the only navigation. Down here because on a large phone the
   thumb cannot reach the top of the screen one-handed - and the other hand is
   holding a meter. */
.tabbar-bottom {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-top: 1px solid var(--line-strong);
  border-bottom: 0;
  background: var(--surface-raised);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.tabbar-bottom .tab {
  min-height: 52px;
  border-bottom: 0;
  border-top: 3px solid transparent;
  font-size: 0.92rem;
}

.tabbar-bottom .tab.is-active {
  border-top-color: var(--primary-deep);
}

.tab-count {
  display: inline-block;
  min-width: 1.35rem;
  margin-left: 0.3rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--computed-bg);
  color: var(--primary-deep);
  font-size: 0.76rem;
}

/* Probe management, moved out of the old action menu into the Proben tab. */
.probe-manager {
  display: grid;
  gap: 0.8rem;
  margin: 0 1.6rem 1.4rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface-raised);
}

.probe-manager-title {
  margin: 0;
  color: var(--primary-deep);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.probe-manager-field {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
}

.probe-manager-field span {
  color: var(--muted);
  font-size: 0.86rem;
}

.probe-manager-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
}

/* One start screen for all five protocols. A two-step type-then-template walk
   for five leaves cost a tap and bought nothing. The colour bar names the
   medium and reappears in the template sheet, so one glance says which form is
   open even after two hours in the rain. */
.start-list,
.template-list {
  display: grid;
  gap: 0.7rem;
}

/* The start screen has no headline any more, so nothing pushes the logo to the
   right - it has to do that itself. It also gets a little smaller here, and the
   list needs room below it: the first card is focused on arrival and its focus
   ring would otherwise touch the logo plate. */
.start-panel .brand-logo {
  width: min(200px, 26vw);
  margin-left: auto;
}

.start-panel .start-list {
  margin-top: 1rem;
  padding: 0 0.2rem;
}

.start-card,
.template-option {
  display: flex;
  gap: 0.85rem;
  width: 100%;
  min-height: 44px;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface-raised);
  text-align: left;
  cursor: pointer;
}

.template-option.is-current {
  border-color: var(--primary-deep);
  background: var(--computed-bg);
}

.start-card-bar {
  flex: 0 0 5px;
  border-radius: 3px;
  background: var(--medium-colour, var(--primary));
}

.start-card-body {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.start-card-kicker {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.start-card-name {
  color: var(--primary-deep);
  font-size: 1.02rem;
  font-weight: 800;
}

.start-card-text {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
}

/* One colour per medium, shared by the start cards and the template sheet. */
[data-medium="solid"] { --medium-colour: #854f0b; }
[data-medium="ka"] { --medium-colour: #3b6d11; }
[data-medium="water"] { --medium-colour: #185fa5; }
[data-medium="air"] { --medium-colour: #5f5e5a; }