/* Gedeelde onderdelen die in beide apps hetzelfde moeten zijn. Bron: shared/css/ui.css;
   de kopie in de app-map wordt bij het uitrollen neergezet. */

/* ---------- Tijdkiezer met wijzerplaat (telefoon) ---------- */
.p-sheet--time { width: min(360px, calc(100vw - 24px)); }

.time-readout {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
}
.time-part {
  border: 0;
  border-radius: 10px;
  padding: 6px 10px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.time-part.active { background: var(--accent-soft); color: var(--accent-text); }
.time-colon { font-size: 26px; font-weight: 700; color: var(--text-muted); }
.time-now { margin-left: auto; }

.time-dial { position: relative; }
.clock {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  aspect-ratio: 1;
}
.clock svg { width: 100%; height: 100%; display: block; }
.clock-face { fill: var(--surface-2); }
.clock-hand { stroke: var(--accent); stroke-width: 1.5; }
.clock-center { fill: var(--accent); }
.clock-dot { fill: var(--accent); }

/* De getallen liggen als knoppen op de ring; de SVG eronder tekent wijzer en stip. */
.clock-mark {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.clock-mark--inner { min-width: 32px; min-height: 32px; font-size: 13px; color: var(--text-muted); }
.clock-mark.selected { color: #fff; }
.clock-mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.time-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.time-actions .p-btn { flex: 1; }

/* Een tijdveld dat de wijzerplaat opent, gedraagt zich als een knop. */
.time-input--picker { cursor: pointer; }

/* ---------- Samenvatting op de laatste stap van een registratie ---------- */
.wizard-recap {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm, 9px);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 600;
}
.wizard-recap:empty { display: none; }