/* ================================================================
 * app.css – UI-Chrome (Toolbar, Editor, Drop-Zone)
 * Auf dem Bildschirm sichtbar; im Druck komplett ausgeblendet.
 * ============================================================== */

:root {
  --font-ui:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-code: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* Light-Theme (Default) */
  --color-bg:           #e8e8ec;
  --color-toolbar:      #1f2329;
  --color-toolbar-fg:   #ffffff;
  --color-input-bg:     #2c313a;
  --color-input-fg:     #ffffff;
  --color-input-br:     #3a4049;
  --color-primary:      #3a82f6;
  --color-primary-h:    #2563eb;
  --color-secondary:    #4b525d;
  --color-secondary-h:  #5a6270;
  --color-editor-bg:    #ffffff;
  --color-editor-fg:    #1f2329;
  --color-editor-br:    #c8ccd4;
  --color-dropzone-bg:  #fafbfc;
  --color-dropzone-br:  #b8bec8;
  --color-dropzone-fg:  #6b7280;
  --color-drop-active-bg: #eef4ff;
}

/* Dark-Theme: aktiviert über body.dark.
   Betrifft NUR die App-UI – die A4-Vorschau (.page) bleibt weiß,
   damit sie wie das gedruckte Blatt aussieht. */
body.dark {
  --color-bg:           #14171c;
  --color-toolbar:      #0d1014;
  --color-toolbar-fg:   #e6e8eb;
  --color-input-bg:     #1c2027;
  --color-input-fg:     #e6e8eb;
  --color-input-br:     #2a2f38;
  --color-primary:      #4a90ff;
  --color-primary-h:    #6aa6ff;
  --color-secondary:    #2a2f38;
  --color-secondary-h:  #353b46;
  --color-editor-bg:    #1c2027;
  --color-editor-fg:    #e6e8eb;
  --color-editor-br:    #2a2f38;
  --color-dropzone-bg:  #1c2027;
  --color-dropzone-br:  #2a2f38;
  --color-dropzone-fg:  #9aa3b2;
  --color-drop-active-bg: #1f2a3d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  font-family: var(--font-ui);
}

/* ---------- Toolbar ---------- */
.toolbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--color-toolbar);
  color: var(--color-toolbar-fg);
  padding: 12px 20px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.toolbar h1 {
  font-size: 16px;
  margin: 0 16px 0 0;
  font-weight: 600;
}

.toolbar input[type=text],
.toolbar input[type=number],
.toolbar select {
  background: var(--color-input-bg);
  color: var(--color-input-fg);
  border: 1px solid var(--color-input-br);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
}
.toolbar input[type=text]   { width: 160px; }
.toolbar input[type=number] { width: 60px;  }

.toolbar label {
  font-size: 13px;
  display: flex; align-items: center; gap: 6px;
}

.toolbar button {
  background: var(--color-primary);
  color: #fff;
  border: 0;
  padding: 7px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.toolbar button:hover           { background: var(--color-primary-h); }
.toolbar button.secondary       { background: var(--color-secondary); }
.toolbar button.secondary:hover { background: var(--color-secondary-h); }

.toolbar .spacer { flex: 1; }

/* ---------- Editor ---------- */
.editor {
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.editor textarea {
  width: 100%;
  min-height: 200px;
  padding: 12px;
  border: 1px solid var(--color-editor-br);
  border-radius: 6px;
  background: var(--color-editor-bg);
  color: var(--color-editor-fg);
  font-family: var(--font-code);
  font-size: 13px;
  resize: vertical;
}

/* ---------- Dropzone (zwischen Toolbar und Layout) ---------- */
.dropbar {
  max-width: 1400px;
  margin: 16px auto 0;
  padding: 0 16px;
}

.dropzone {
  border: 2px dashed var(--color-dropzone-br);
  border-radius: 8px;
  padding: 18px 16px;
  text-align: center;
  background: var(--color-dropzone-bg);
  font-size: 13px;
  color: var(--color-dropzone-fg);
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.dropzone strong { color: var(--color-editor-fg); font-weight: 600; }
.dropzone .hint  { opacity: .8; }
.dropzone.drag {
  border-color: var(--color-primary);
  background: var(--color-drop-active-bg);
  color: var(--color-primary-h);
}
.dropzone.drag strong { color: var(--color-primary-h); }

.drop-buttons { display: flex; gap: 8px; }
.drop-buttons button {
  background: var(--color-secondary);
  color: var(--color-toolbar-fg);
  border: 0;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.drop-buttons button:hover { background: var(--color-secondary-h); }

/* ---------- Layout ---------- */
.layout {
  max-width: 1400px;
  margin: 16px auto;
  padding: 0 16px;
}
.layout-main { min-width: 0; }

/* ---------- Print: Chrome verstecken ---------- */
@media print {
  .toolbar,
  .dropbar,
  .editor,
  .sidebar { display: none !important; }
  html, body { background: #fff; }
  .layout { margin: 0; max-width: none; padding: 0; display: block; }
  .layout-main { display: block; }
}