/* ===========================================
   Divemaster-Tool
   Baut auf /itc/itc.css auf (gleiches System: Kopf, Phasen, Notiz + Antwort, Buttons).
   Hier nur, was es im ITC-Tool nicht gibt: Modul-Karten, Status, Fortschritt, Erlebnisse.
   =========================================== */

.dm-body {
  --dm-required: #f08c2e; --dm-required-soft: #fff1e3; --dm-required-ink: #8a4a0c;
  --dm-extra: #e0b500;    --dm-extra-soft: #fffbe8;    --dm-extra-ink: #6b5400;
  --dm-passed: var(--itc-ok); --dm-passed-soft: #e6f5ec;
}

/* ---------- Legende ---------- */
.dm-tag--required { background: var(--dm-required-soft); color: var(--dm-required-ink); }
.dm-tag--extra    { background: var(--dm-extra-soft);    color: var(--dm-extra-ink); }
.dm-tag--passed   { background: var(--dm-passed-soft);   color: var(--itc-ok); }
.dm-tag--required::before { background: var(--dm-required); }
.dm-tag--extra::before    { background: var(--dm-extra); }
.dm-tag--passed::before   { background: var(--dm-passed); }

/* ---------- Fortschritt im Kopf ---------- */
.dm-progress { display: grid; gap: 6px; }
.dm-progress p { font-weight: 700; color: #fff; font-size: 0.9rem; }
.dm-progress .itc-meter { max-width: none; background: rgba(255, 255, 255, 0.2); }
.dm-progress.is-complete p { color: #b8f0cf; }

/* ---------- Karten (Modul / Thema / Erlebnis) ---------- */
.dm-cards { display: grid; gap: 8px; }
.dm-card {
  border: 1px solid var(--itc-line); border-left: 4px solid var(--itc-primary-line);
  border-radius: var(--itc-radius-sm); background: #fff;
  scroll-margin-top: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dm-card.is-required { border-left-color: var(--dm-required); }
#extras .dm-card { border-left-color: var(--dm-extra); }
#tauchbasis .dm-card { border-left-color: #2fa36b; }
.dm-card--special { border-left-color: #2f7fd1; }
.dm-card:hover { box-shadow: var(--itc-shadow); }
.dm-card[open] { box-shadow: var(--itc-shadow); }

.dm-card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 14px; cursor: pointer; list-style: none;
  border-radius: var(--itc-radius-sm);
}
.dm-card-head::-webkit-details-marker { display: none; }
.dm-card-head:focus-visible { outline: none; box-shadow: var(--itc-focus); }
.dm-card-head .itc-chevron { width: 30px; height: 30px; }
/* itc.css dreht alle Pfeile in einer offenen Phase – Karten drehen nur, wenn sie selbst offen sind */
.itc-phase .dm-card-head .itc-chevron { transform: none; }
.itc-phase .dm-card[open] > .dm-card-head .itc-chevron { transform: rotate(180deg); }
.dm-card[open] > .dm-card-head { border-bottom: 1px dashed var(--itc-line); border-radius: var(--itc-radius-sm) var(--itc-radius-sm) 0 0; }

.dm-state {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--itc-bg); color: var(--itc-muted); border: 2px dashed #cfcbe0;
}
.dm-state .itc-icon { width: 16px; height: 16px; }
.dm-card.is-started .dm-state { background: var(--itc-primary-soft); color: var(--itc-primary); border: 2px solid var(--itc-primary-line); }
.dm-card.is-passed .dm-state { background: var(--dm-passed); color: #fff; border: 2px solid var(--dm-passed); }
.dm-card.is-passed .dm-state .itc-icon { stroke-width: 3; }
.dm-card--special .dm-state { background: #e8f1fb; color: #2f7fd1; border: 2px solid #cfe0f5; }

.dm-card-title { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dm-card-title strong { color: var(--itc-ink); font-size: 1rem; line-height: 1.3; }
.dm-card-head:hover .dm-card-title strong { color: var(--itc-primary); }
.dm-card-desc { color: var(--itc-muted); font-size: 0.87rem; line-height: 1.4; }

.dm-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex: none; max-width: 45%; }
.dm-chips:empty { display: none; }
.dm-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 800; white-space: nowrap;
  background: var(--itc-bg); color: var(--itc-muted);
}
.dm-chip .itc-icon { width: 12px; height: 12px; }
.dm-chip--started { background: var(--itc-primary-soft); color: var(--itc-primary); }
.dm-chip--passed  { background: var(--dm-passed-soft); color: var(--itc-ok); }
.dm-chip--reply   { background: #fff4d6; color: #7a5600; }

.dm-card-body { padding: 12px; background: var(--itc-bg); border-radius: 0 0 var(--itc-radius-sm) var(--itc-radius-sm); }
.dm-card-body .itc-note { border-color: transparent; }

/* ---------- Besondere Erlebnisse ---------- */
.dm-new { border-left-color: #2f7fd1; background: linear-gradient(90deg, #e8f1fb, #fff 140px); }
.dm-new h3 { display: flex; align-items: center; gap: 8px; }
.dm-special-form { gap: 10px; }
.dm-special-row { display: grid; gap: 10px; }
.dm-special-date .itc-input { max-width: 190px; }
.dm-delete { display: flex; justify-content: flex-end; }
.itc-btn.dm-btn-danger { color: var(--itc-error) !important; border-color: #f0c9cf; }
.itc-btn.dm-btn-danger:hover { background: #fdecef; border-color: var(--itc-error); }
.dm-none { margin: 0; padding: 4px 2px; }

.dm-error { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--itc-radius-sm); background: #fdecef; color: var(--itc-error); font-weight: 600; }

@media (min-width: 560px) {
  .dm-special-row { grid-template-columns: 190px minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .dm-card-head { flex-wrap: wrap; padding: 12px 10px; gap: 10px; }
  .dm-card-title { flex-basis: calc(100% - 90px); }
  .dm-chips { order: 3; max-width: none; justify-content: flex-start; flex-basis: 100%; padding-left: 42px; }
  .dm-card-body { padding: 10px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-card { transition: none; }
}

/* ---------- Vorbereitung und „Passt dazu“ (links.php, Okt. 2026) ---------- */
.dm-links { margin: 0 0 10px; }
.dm-links-title { margin: 0 0 6px !important; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--itc-muted); }
.dm-links ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dm-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--itc-primary-line); color: var(--itc-primary) !important;
  font-size: 0.86rem; font-weight: 700; text-decoration: none;
}
.dm-link:hover { background: var(--itc-primary-soft); border-color: var(--itc-primary); }
.dm-link em { font-style: normal; font-size: 0.7rem; padding: 1px 6px; border-radius: 999px; background: var(--itc-primary); color: #fff; }
.dm-preview { padding: 12px 14px; border-radius: var(--itc-radius-sm); border: 1px dashed var(--itc-line); background: #fff; }
.dm-preview p { margin: 0 0 6px; }
.dm-preview .dm-links { margin: 6px 0 0; }
.dm-preview .dm-link { border-color: var(--itc-line); color: var(--itc-muted) !important; font-weight: 600; }
.dm-courses { margin-top: 14px; }

/* Bewertung des eigenen Briefings (SSI-Bogen) am Modul „Tauchgangsbriefing üben“ */
.dm-eval { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--itc-radius-sm); background: var(--itc-primary-soft); border-left: 4px solid var(--itc-primary); }
.dm-eval.is-passed { background: #eaf8ee; border-left-color: var(--itc-ok); }
.dm-eval.is-failed { background: #fff5e6; border-left-color: #b06a00; }
.dm-eval p { margin: 0 0 6px; }