/* StateDocs - Oberflaeche der Ausweisstelle.
   Die Werkbank ist dunkel und ruhig, damit das Dokument auf dem Graukarton
   das einzige helle Objekt im Bild bleibt. Die Canvas selbst wird in app.js
   gezeichnet und von hier nicht beeinflusst. */

:root {
  --ink-900: #121517;
  --ink-800: #181c1f;
  --ink-700: #1f2429;
  --ink-600: #252c31;
  --line: #2b3238;
  --line-soft: #222a2f;
  --text: #e6e9e8;
  --text-2: #93a09d;
  --text-3: #6b7876;
  --foil: #7e7bf5;
  --foil-dim: #5f5cc9;
  --on-foil: #0d0f14;
  --table: #9ea4a0;
  --table-edge: #868b87;
  --ok: #5fbf93;
  --wait: #e0a050;
  --stop: #d45c62;

  --sans: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --bar-height: 57px;

  font-family: var(--sans);
  color: var(--text);
  background: var(--ink-900);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

body { margin: 0; min-height: 100vh; }

button, input, select, summary, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--foil);
  outline-offset: 2px;
  border-radius: 2px;
}

code { font-family: var(--mono); font-size: .92em; }

.hidden { display: none !important; }

/* ---- Werkbank ------------------------------------------------------------ */

.shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.work {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 236px minmax(356px, 420px) minmax(0, 1fr);
}

.registry,
.controls,
.bench {
  min-height: 0;
  overflow: auto;
}

/* ---- Kopfleiste ---------------------------------------------------------- */

.bar {
  height: var(--bar-height);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 18px 0 20px;
  background: var(--ink-800);
  border-bottom: 1px solid var(--line);
}

.mark {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
}

.mark-sigil {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--foil) 0%, #4ec3c0 100%);
  color: var(--on-foil);
  font-size: 12px;
  font-weight: 700;
  font-stretch: 78%;
  letter-spacing: .04em;
}

.mark-text b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: -.012em;
  line-height: 1.1;
}

.mark-text i {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-stretch: 78%;
  color: var(--text-3);
  margin-top: 2px;
}

.bar-end {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ---- Nutzerleiste -------------------------------------------------------- */

.userbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.userbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink-600);
  object-fit: cover;
  flex: 0 0 auto;
}

.userbar-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.userbar-text strong {
  font-size: 12.5px;
  font-weight: 600;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.userbar-text small {
  font-size: 10.5px;
  font-stretch: 78%;
  color: var(--text-3);
}

.userbar-link,
.userbar-logout {
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--ink-700);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.userbar-link { border-color: var(--foil-dim); color: #c3c1ff; }
.userbar-link:hover { background: #262a44; color: #dedeff; }
.userbar-logout:hover { background: var(--ink-600); color: var(--text); }

/* ---- Dokumentliste ------------------------------------------------------- */

.registry {
  background: var(--ink-800);
  border-right: 1px solid var(--line);
  padding: 14px 12px 18px;
  display: flex;
  flex-direction: column;
}

#document-nav {
  display: grid;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text-2);
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  position: relative;
}

.nav-item:hover { background: var(--ink-700); color: var(--text); }

.nav-item.active {
  background: var(--ink-700);
  color: var(--text);
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: var(--foil);
}

.nav-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: var(--text-3);
  background: currentColor;
  -webkit-mask: var(--i) center / 19px 19px no-repeat;
  mask: var(--i) center / 19px 19px no-repeat;
}

.nav-item:hover .nav-icon { color: var(--text-2); }
.nav-item.active .nav-icon { color: var(--foil); }

.registry-foot {
  margin: auto 0 0;
  padding: 14px 10px 0;
  border-top: 1px solid var(--line-soft);
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.55;
}

.registry-foot b {
  display: block;
  color: var(--text-2);
  font-weight: 500;
  font-size: 11.5px;
  margin-bottom: 4px;
}

/* ---- Formular ------------------------------------------------------------ */

.controls {
  background: var(--ink-900);
  border-right: 1px solid var(--line);
  padding: 22px 22px 32px;
}

.controls-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.template-code {
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--ink-700);
}

.template-code::before {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--foil);
  -webkit-mask: var(--i) center / 20px 20px no-repeat;
  mask: var(--i) center / 20px 20px no-repeat;
}

.controls-head h1 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.controls-head p {
  grid-column: 2;
  grid-row: 2;
  margin: 5px 0 0;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 44ch;
}

.ghost {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: none;
  color: var(--text-2);
  font-size: 11.5px;
  padding: 6px 10px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ghost:hover { background: var(--ink-700); color: var(--text); }

.field-group { margin-top: 22px; }

.field-group h2 {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  font-stretch: 78%;
  color: var(--text-2);
  letter-spacing: .01em;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-2);
  font-size: 11.5px;
  font-stretch: 78%;
}

.form-grid input,
.form-grid select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 10px;
  color: var(--text);
  background: var(--ink-700);
  outline: none;
  font-size: 13px;
  color-scheme: dark;
}

.form-grid input:hover { border-color: var(--ink-600); }

.form-grid input:focus {
  border-color: var(--foil);
  box-shadow: 0 0 0 3px rgba(126, 123, 245, .18);
}

.form-grid input::placeholder { color: var(--text-3); }

input[name="documentNumber"] { font-family: var(--mono); letter-spacing: .02em; }

input[type="file"] { display: none; }

.upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  color: var(--text-3);
  font-size: 11.5px;
}

.upload-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  background: var(--ink-700);
  font-size: 12px;
  cursor: pointer;
}

.upload-button:hover { background: var(--ink-600); }

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  color: var(--foil);
  font-size: 11.5px;
  padding: 4px;
}

.text-button .i { width: 13px; height: 13px; }

.text-button:hover { text-decoration: underline; }

.settings {
  margin-top: 24px;
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
}

.settings summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: var(--text-2);
  font-size: 12.5px;
}

.settings summary:hover { color: var(--text); }
.settings summary::-webkit-details-marker { display: none; }

.settings summary .i {
  color: var(--text-3);
  width: 15px;
  height: 15px;
  transition: transform .18s ease;
}

.settings[open] summary .i { transform: rotate(180deg); }

.settings-grid { margin-top: 16px; }

.logo-setting {
  grid-column: 1 / -1;
  color: var(--text-2);
  font-size: 11.5px;
  font-stretch: 78%;
}

.logo-setting > .upload-row { margin-top: 7px; }

/* ---- Graukarton mit Dokument --------------------------------------------- */

.bench {
  background: var(--table);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 34px clamp(20px, 3vw, 48px);
}

.sheet {
  position: relative;
  width: 100%;
  max-width: 980px;
  border: 1px solid #3a3f3c;
  box-shadow: 0 22px 44px rgba(12, 16, 14, .3);
}

.sheet::before,
.sheet::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(24, 28, 26, .4);
}

.sheet::before { top: -10px; left: -10px; border-right: 0; border-bottom: 0; }
.sheet::after { right: -10px; bottom: -10px; border-left: 0; border-top: 0; }

#document-canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #e2e5e8;
}

.bench-foot {
  width: 100%;
  max-width: 980px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.sheet-meta {
  margin: 0;
  color: #434846;
  font-size: 11.5px;
  font-stretch: 78%;
  line-height: 1.5;
}

.sheet-meta code {
  font-family: var(--mono);
  font-size: 11px;
}

.actions {
  display: flex;
  gap: 9px;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  border-radius: 3px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
}

.primary-button {
  border: 1px solid #3f3dad;
  background: var(--foil);
  color: #fff;
}

.primary-button:hover { background: #6d6af0; }

.secondary-button {
  border: 1px solid #6d726e;
  background: transparent;
  color: #222624;
}

.secondary-button:hover { background: rgba(255, 255, 255, .28); }

.feedback {
  flex-basis: 100%;
  min-height: 17px;
  margin: 0;
  font-size: 12px;
  color: #2e332f;
}

/* ---- Schmale Fenster ----------------------------------------------------- */

@media (max-width: 1180px) {
  .shell { height: auto; }

  .work {
    display: flex;
    flex-direction: column;
  }

  .registry,
  .controls,
  .bench {
    overflow: visible;
    border-right: 0;
  }

  .registry {
    order: 0;
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
  }

  #document-nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-item { flex: 0 0 auto; width: auto; padding: 7px 10px; font-size: 12.5px; }
  .nav-item.active::before { left: 0; right: 0; top: auto; bottom: -10px; width: auto; height: 2px; }
  .registry-foot { display: none; }

  .bench { order: 1; padding: 24px 18px; }
  .controls { order: 2; border-top: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .bar { padding: 0 12px; gap: 10px; }
  .userbar-text { display: none; }
  .mark-text i { display: none; }
  .userbar-link .label,
  .userbar-logout .label { display: none; }
  .userbar-link,
  .userbar-logout { padding: 0 9px; }
  .controls { padding: 18px 14px 26px; }
  .form-grid { grid-template-columns: 1fr; }
  .controls-head { grid-template-columns: auto 1fr; }
  .ghost { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 10px; }
  .bench-foot { justify-content: stretch; }
  .actions { width: 100%; }
  .primary-button, .secondary-button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- Symbole -------------------------------------------------------------
   Die fünf Dokumentarten tragen ein eigenes Zeichen; app.js setzt dafür nur
   data-template, gezeichnet wird hier. Aktionssymbole stehen als Inline-SVG
   mit der Klasse .i direkt im Markup. */

.i {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-template="identity"] {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2'/%3E%3Ccircle cx='8.6' cy='11' r='2.4'/%3E%3Cpath d='M5.2 16.6c.6-1.7 1.9-2.6 3.4-2.6s2.8.9 3.4 2.6'/%3E%3Cpath d='M15 10h4.2M15 13.4h4.2'/%3E%3C/svg%3E");
}

[data-template="service"] {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l7.2 3v5c0 4.3-2.9 7.6-7.2 9.2-4.3-1.6-7.2-4.9-7.2-9.2v-5z'/%3E%3Cpath d='M9.2 11.8l2 2 3.7-3.9'/%3E%3C/svg%3E");
}

[data-template="driver"] {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M3.6 10.6h5.8M14.6 10.6h5.8M12 14.6v6'/%3E%3C/svg%3E");
}

[data-template="vehicle"] {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16.4v-3.6l1.8-4.2a2 2 0 0 1 1.8-1.2h8.8a2 2 0 0 1 1.8 1.2L20 12.8v3.6'/%3E%3Cpath d='M4 12.8h16'/%3E%3Ccircle cx='8' cy='16.4' r='1.6'/%3E%3Ccircle cx='16' cy='16.4' r='1.6'/%3E%3C/svg%3E");
}

[data-template="business"] {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 9.6h15.2V19a1 1 0 0 1-1 1H5.4a1 1 0 0 1-1-1z'/%3E%3Cpath d='M3 9.6 4.7 4.8h14.6L21 9.6'/%3E%3Cpath d='M9.8 20v-4.8h4.4V20'/%3E%3C/svg%3E");
}