/* ============================================================
   Lennarts Diktat-Trainer — Basis-CSS
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-primary:    #2e7d32;
  --color-primary-dk: #1b5e20;
  --color-bg:         #f5f5f5;
  --color-surface:    #ffffff;
  --color-text:       #212121;
  --color-muted:      #757575;
  --color-error:      #c62828;
  --color-error-bg:   #ffebee;
  --color-border:     #e0e0e0;
  --radius:           8px;
  --shadow:           0 2px 8px rgba(0,0,0,.12);
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  line-height: 1.5;
}

/* ── Login ── */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 50%, #388e3c 100%);
}

.login-container {
  width: 100%;
  max-width: 400px;
  padding: 1rem;
}

.login-box {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
}

.login-logo {
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-logo-icon {
  font-size: 3rem;
  display: block;
}

.login-logo h1 {
  font-size: 1.25rem;
  color: var(--color-primary-dk);
  margin-top: .5rem;
}

/* ── Formulare ── */

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: .35rem;
  color: var(--color-text);
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .65rem .85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--color-surface);
  transition: border-color .15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(46,125,50,.15);
}

/* ── Buttons ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .6rem 1.25rem;
  border: none;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .1s;
}

.btn:active {
  transform: scale(.97);
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-primary-dk);
}

.btn-block {
  width: 100%;
  margin-top: .5rem;
}

.btn-sm {
  padding: .35rem .75rem;
  font-size: .8rem;
}

/* ── Alerts ── */

.alert {
  padding: .75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: .9rem;
}

.alert-error {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid #ef9a9a;
}

.alert-success {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

/* ── Navbar ── */

.navbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.5rem;
  background: var(--color-primary-dk);
  color: #fff;
  box-shadow: var(--shadow);
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.1rem;
  flex: 1;
  color: #fff;
}

.navbar-user {
  font-size: .9rem;
  opacity: .9;
  color: rgba(255,255,255,.85);
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.navbar-links a,
.navbar a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: .9rem;
}

.navbar-links a:hover,
.navbar a:hover {
  color: #fff;
  text-decoration: underline;
}

.navbar .btn-sm {
  background: rgba(255,255,255,.15);
  color: #fff;
}

.navbar .btn-sm:hover {
  background: rgba(255,255,255,.3);
}

/* ── Container ── */

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* ── Setup-Seite ── */

.setup-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%);
}

.setup-box {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  width: 100%;
  max-width: 480px;
}

.setup-box h1 {
  font-size: 1.3rem;
  color: #1565c0;
  margin-bottom: .25rem;
}

.setup-box .subtitle {
  color: var(--color-muted);
  font-size: .9rem;
  margin-bottom: 1.5rem;
}

/* ── Theme-Anpassungen ── */

.theme-minecraft {
  --color-primary:    #5d8a38;
  --color-primary-dk: #3b5e1e;
}

.theme-space {
  --color-primary:    #2979ff;
  --color-primary-dk: #1565c0;
  --color-bg:         #f0f4ff;
  --color-surface:    #e8f1ff;
}

.theme-ocean {
  --color-primary:    #00897b;
  --color-primary-dk: #00695c;
  --color-bg:         #e0f5f1;
  --color-surface:    #f0fdfb;
}

/* ── Responsive ── */

@media (max-width: 480px) {
  .login-box,
  .setup-box {
    padding: 1.5rem 1rem;
  }
}

/* ============================================================
   Setup-Wizard
   ============================================================ */

.wizard-page {
  background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 60%, #4caf50 100%);
  min-height: 100vh;
  padding: 1.5rem 1rem 3rem;
}

.wizard-container {
  max-width: 780px;
  margin: 0 auto;
}

.wizard-box {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.2);
  overflow: hidden;
}

/* ── Wizard Header ── */

.wizard-header {
  background: var(--color-primary-dk);
  color: #fff;
  padding: 1.25rem 1.75rem;
}

.wizard-logo {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .2rem;
}

.wizard-subtitle {
  font-size: .875rem;
  opacity: .85;
}

/* ── Schritt-Indikator ── */

.wizard-stepper {
  display: flex;
  align-items: center;
  padding: 1rem 1.75rem;
  background: #f9fbe7;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  gap: 0;
}

.step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  flex-shrink: 0;
}

.dot-inner {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #ccc;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.step-dot.done  .dot-inner { background: var(--color-primary); }
.step-dot.active .dot-inner {
  background: var(--color-primary-dk);
  box-shadow: 0 0 0 3px rgba(46,125,50,.3);
}

.dot-label {
  font-size: .65rem;
  color: var(--color-muted);
  white-space: nowrap;
  text-align: center;
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.step-dot.active .dot-label { color: var(--color-primary-dk); font-weight: 600; }
.step-dot.done   .dot-label { color: var(--color-primary); }

.step-line {
  flex: 1;
  height: 2px;
  background: #ccc;
  margin: 0 .25rem;
  margin-bottom: 1.1rem; /* align with dot center */
  transition: background .2s;
}

.step-line.done { background: var(--color-primary); }

/* ── Wizard Form Body ── */

.wizard-box > .alert,
.wizard-box > .category-intro,
.wizard-box > .summary-box,
.wizard-box > .step5-question,
.wizard-box > .step5-actions,
.wizard-form,
.block-card,
.info-box,
.api-section {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.wizard-form {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Re-apply alerts inside wizard */
.wizard-box .alert {
  margin: 1rem 1.75rem;
}

.wizard-box .alert ul {
  margin: .4rem 0 0 1.2rem;
}

/* ── Form Rows ── */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-row.three-col {
  grid-template-columns: 1fr 1fr 1fr;
}

.required { color: var(--color-error); }

.label-hint {
  font-weight: 400;
  color: var(--color-muted);
  font-size: .8rem;
}

.field-hint {
  font-size: .78rem;
  color: var(--color-muted);
  margin-top: .2rem;
  display: block;
}

/* ── Theme Picker ── */

.theme-picker {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .4rem;
}

.theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .75rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  min-width: 90px;
}

.theme-card input[type=radio] { display: none; }

.theme-card:hover { border-color: var(--color-primary); }

.theme-card.selected {
  border-color: var(--color-primary);
  background: #e8f5e9;
}

.theme-icon { font-size: 1.75rem; }
.theme-name { font-size: .85rem; font-weight: 600; color: var(--color-text); }

/* ── Wizard Navigation ── */

.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.75rem 1.5rem;
  border-top: 1px solid var(--color-border);
  margin-top: 1.5rem;
}

.wizard-form .wizard-nav {
  margin-left: -1.75rem;
  margin-right: -1.75rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.btn-wizard-next { min-width: 130px; }
.btn-arrow { font-style: normal; }

.btn-secondary {
  background: #e0e0e0;
  color: var(--color-text);
}
.btn-secondary:hover { background: #bdbdbd; }

.btn-ghost {
  background: transparent;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}
.btn-ghost:hover { background: #f5f5f5; }

/* ── API Section ── */

.api-section {
  padding-top: 1.25rem;
  padding-bottom: .5rem;
}

.api-section-title {
  font-size: 1rem;
  margin-bottom: .75rem;
  color: var(--color-primary-dk);
}

.api-info {
  font-size: .82rem;
  color: var(--color-muted);
  background: #f5f5f5;
  border-radius: var(--radius);
  padding: .6rem .85rem;
  margin-top: .4rem;
}

.section-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1rem 0;
}

.hidden { display: none !important; }

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  cursor: pointer;
  font-size: .9rem;
}

.checkbox-label input { margin-top: .15rem; flex-shrink: 0; }

.alert-warn {
  background: #fff8e1;
  color: #e65100;
  border: 1px solid #ffcc80;
}

.input-narrow { width: 100px; }
.unit-label   { font-size: .9rem; color: var(--color-text); }
.muted        { color: var(--color-muted); }

/* ── Block-Karten (Schritt 3) ── */

.category-intro {
  padding: 1.25rem 1.75rem .5rem;
  color: var(--color-muted);
  font-size: .9rem;
}

.block-card {
  margin: .75rem 1.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.block-card-header {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .85rem 1rem;
}

.block-icon { font-size: 1.5rem; flex-shrink: 0; }

.block-card-header h3 {
  font-size: .95rem;
  margin-bottom: .2rem;
}

.block-desc { font-size: .82rem; color: var(--color-muted); }

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--color-border);
  border-top: 1px solid var(--color-border);
}

.category-item {
  background: var(--color-surface);
  padding: .6rem .85rem;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  grid-template-rows: auto auto;
  gap: 0 .4rem;
}

.cat-code {
  grid-row: 1 / 3;
  align-self: center;
  font-weight: 700;
  font-size: .9rem;
  color: var(--color-primary-dk);
  font-family: monospace;
}

.cat-label  { font-size: .85rem; font-weight: 600; }
.cat-desc   { font-size: .75rem; color: var(--color-muted); grid-column: 2; }

/* Block-Farben */
.block-a .block-card-header { background: #e8f5e9; }
.block-b .block-card-header { background: #e3f2fd; }
.block-c .block-card-header { background: #fff3e0; }
.block-d .block-card-header { background: #fce4ec; }

.info-box {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .85rem;
  margin: .75rem 1.75rem 1rem;
}

/* ── Intervall-Presets (Schritt 4) ── */

.interval-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .75rem;
  margin-top: .4rem;
}

.interval-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .85rem .75rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s;
  text-align: center;
}

.interval-card input[type=radio] { display: none; }

.interval-card:hover { border-color: var(--color-primary); }
.interval-card.selected {
  border-color: var(--color-primary);
  background: #e8f5e9;
}

.interval-days  { font-size: 1.5rem; font-weight: 700; color: var(--color-primary-dk); }
.interval-unit  { font-size: .75rem; color: var(--color-muted); margin-top: -.3rem; }
.interval-label { font-size: .85rem; font-weight: 600; }
.interval-desc  { font-size: .75rem; color: var(--color-muted); }

.badge-recommended {
  position: absolute;
  top: -8px;
  right: 6px;
  background: var(--color-primary);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 4px;
}

.custom-interval-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .4rem;
}

/* ── Zusammenfassung (Schritt 5) ── */

.summary-box {
  margin: 1.25rem 1.75rem .75rem;
  background: #f9fbe7;
  border: 1px solid #c5e1a5;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.summary-box h3 {
  font-size: 1rem;
  margin-bottom: .75rem;
  color: var(--color-primary-dk);
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.summary-table th,
.summary-table td {
  padding: .35rem .5rem;
  vertical-align: top;
  border-bottom: 1px solid #dcedc8;
}

.summary-table th {
  width: 130px;
  font-weight: 600;
  color: var(--color-muted);
  text-align: left;
  white-space: nowrap;
}

.summary-table tr:last-child th,
.summary-table tr:last-child td {
  border-bottom: none;
}

.step5-question {
  padding: .75rem 1.75rem .5rem;
}

.step5-question h3 {
  font-size: 1rem;
  margin-bottom: .4rem;
}

.step5-question p {
  font-size: .875rem;
  color: var(--color-muted);
}

.step5-actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: .75rem 1.75rem 1rem;
}

.step5-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.25rem;
  text-align: left;
  width: 100%;
}

.step5-btn-icon { font-size: 1.75rem; flex-shrink: 0; }

.step5-btn-text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.step5-btn-text strong { font-size: .95rem; }
.step5-btn-text small  { font-size: .78rem; opacity: .8; font-weight: 400; }

/* ── Responsive Wizard ── */

@media (max-width: 600px) {
  .wizard-page { padding: .5rem .5rem 2rem; }

  .form-row,
  .form-row.three-col { grid-template-columns: 1fr; }

  .wizard-stepper { gap: 0; }
  .dot-label      { display: none; }

  .interval-presets { grid-template-columns: 1fr 1fr; }

  .summary-table th { width: 90px; }
}