/* dokumentenwerkstatt.css
 *
 * Hand geschriebenes CSS statt eines Tailwind-Builds (21.07.2026): Dashboard/Jahresplaner
 * nutzen einen vorkompilierten, statischen Tailwind-Build ohne JIT im Browser -- neue
 * Klassen, die nicht schon eingebacken sind, wirken dort nicht (siehe dashboard.compiled.js).
 * Fuer ein neues Tool ohne eigenen Build-Schritt sind CSS-Variablen + wenige Klassen nach
 * derselben Farbpalette robuster als ein zweiter, separat zu pflegender Tailwind-Build.
 * Werte 1:1 aus der Dashboard-Palette uebernommen (dashboard.compiled.js) --
 * Design-Vereinheitlichung ist Standing-Regel, keine Tool-eigene Farbwahl.
 */

:root {
  --dw-bg: #0d1320;
  --dw-card: #1a2436;
  --dw-card-dim: #161f2e;
  --dw-line: #2a3548;
  --dw-line-light: #344155;
  --dw-accent: #0e6a96;
  --dw-accent-light: #3ee0ff;
  --dw-text: #f8fafc;
  --dw-mut: #a8b6c8;
  --dw-dim: #8b97a8;
  --sk: 1; /* UI-Skalierungsfaktor, siehe app.js sk() */
}

* { box-sizing: border-box; }

body.dw-bg {
  margin: 0;
  background: var(--dw-bg);
  color: var(--dw-text);
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
}

.dw-font-display { font-family: 'Poppins', 'Inter', system-ui, sans-serif; }

.dw-card {
  background: var(--dw-card);
  border: 1px solid var(--dw-line);
  border-radius: calc(14px * var(--sk));
  padding: calc(20px * var(--sk));
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.25);
}

.dw-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(62, 224, 255, 0.12);
  color: var(--dw-accent-light);
  font-size: calc(12px * var(--sk));
  font-weight: 600;
}

.dw-mut { color: var(--dw-mut); }
.dw-dim { color: var(--dw-dim); }

.dw-btn {
  background: var(--dw-accent);
  color: var(--dw-text);
  border: none;
  border-radius: calc(8px * var(--sk));
  padding: calc(8px * var(--sk)) calc(14px * var(--sk));
  font-size: calc(14px * var(--sk));
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.dw-btn:hover { background: var(--dw-accent-light); color: var(--dw-bg); }
.dw-btn:active { transform: scale(0.98); }

select.dw-select {
  background: var(--dw-card-dim);
  color: var(--dw-text);
  border: 1px solid var(--dw-line-light);
  border-radius: calc(8px * var(--sk));
  padding: calc(6px * var(--sk)) calc(10px * var(--sk));
  font-size: calc(13px * var(--sk));
}

input[type="range"].dw-range { accent-color: var(--dw-accent-light); }

input.dw-input {
  background: var(--dw-card-dim);
  color: var(--dw-text);
  border: 1px solid var(--dw-line-light);
  border-radius: calc(8px * var(--sk));
  padding: calc(6px * var(--sk)) calc(10px * var(--sk));
  font-size: calc(13px * var(--sk));
  width: 100%;
}
input.dw-input:focus { outline: 1px solid var(--dw-accent-light); }

.dw-table { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--sk)); }
.dw-table th, .dw-table td {
  text-align: left;
  padding: calc(8px * var(--sk)) calc(10px * var(--sk));
  border-bottom: 1px solid var(--dw-line);
}
.dw-table th { color: var(--dw-mut); font-weight: 500; font-size: calc(12px * var(--sk)); }

.dw-fehler {
  /* #f87171 1:1 aus der Dashboard-Palette (dashboard.compiled.js) -- gleiche
     Fehlerfarbe wie im Dashboard/Jahresplaner, keine Tool-eigene Farbwahl. */
  color: #f87171;
  font-size: calc(12px * var(--sk));
  margin: 0 0 10px;
}

#debug-error {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #4a1010;
  color: #ffdcdc;
  font-family: monospace;
  font-size: 12px;
  padding: 8px 12px;
  display: none;
  white-space: pre-wrap;
  max-height: 40vh;
  overflow: auto;
}