/* ============================================================
   MATERIAL-DASHBOARD - Ergänzungen zu trainingshaus-dashboard/style.css
   Hinweisleiste „neue Bestellungen“, Bestell-Karten, Ablauf
   Farben: Sonderfarbe „Bestellung · Neu“ (--el-bestellung-neu)
   ============================================================ */

/* Hinweisleiste */
.mad-hinweis { display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin-bottom: 20px; border-radius: 12px;
  text-decoration: none; color: var(--el-bestellung-neu-dunkel, var(--ink));
  background: var(--el-bestellung-neu-hell, var(--surface)); border: 1px solid var(--el-bestellung-neu-mittel, var(--line)); }
.mad-hinweis strong { display: block; font-size: 18px; }
.mad-hinweis small { display: block; font-size: 13px; opacity: .85; }
.mad-hinweis > span:nth-child(2) { flex: 1; min-width: 0; }
.mad-glocke { position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--el-bestellung-neu, var(--accent-dark)); color: #fff; }
.mad-glocke i { font-size: 28px; }
.mad-glocke b { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--paper); }
.mad-hinweis-knopf { display: inline-flex; align-items: center; gap: 4px; padding: 9px 14px; border-radius: 8px; font-weight: 700; font-size: 14px;
  background: var(--el-bestellung-neu, var(--accent-dark)); color: #fff; white-space: nowrap; }
.mad-hinweis:hover .mad-hinweis-knopf { filter: brightness(.92); }
.mad-hinweis.is-ruhig { color: var(--ink-soft); background: var(--paper); border-color: var(--line); }
.mad-hinweis.is-ruhig i { color: var(--el-meldung-erfolg, var(--pal-gruen)); font-size: 28px; }
.mad-hinweis.is-ruhig strong { display: inline; font-size: 16px; color: var(--ink); }
@keyframes mad-klingeln { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-4deg); } }

/* Neue Bestellungen: kompakte Zeilen */
.mad-liste { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); }
.mad-zeile { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 16px; cursor: pointer; }
.mad-zeile + .mad-zeile { border-top: 1px solid var(--line); }
.mad-zeile:hover { background: var(--surface); }
.mad-zeile.is-frisch { background: var(--el-bestellung-neu-hell, var(--surface)); }
.mad-wer { min-width: 0; }
.mad-wer strong { font-size: 14px; color: var(--ink); }
.mad-wer small { display: block; font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mad-neu { font-size: 9px; font-weight: 800; letter-spacing: .5px; padding: 1px 6px; border-radius: 999px; margin-right: 4px;
  background: var(--danger); color: #fff; vertical-align: 2px; }
.mad-pos { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.mad-pos-chip { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mad-pos-chip.is-fehlt { border-color: var(--danger); color: var(--danger); background: var(--danger-tint); }
.mad-ohne { font-size: 12px; font-style: italic; color: var(--danger); }
.mad-knoepfe { display: flex; gap: 4px; }
.mad-status { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); }
.mad-status i { font-size: 18px; }
.mad-packen { color: var(--el-bestellung-verpacken, var(--accent-dark)); border-color: var(--el-bestellung-verpacken-mittel, var(--line)); }
.mad-packen:hover { background: var(--el-bestellung-verpacken-hell, var(--surface)); }
.mad-warten:hover { color: var(--el-bestellung-warten, var(--ink)); border-color: var(--el-bestellung-warten-mittel, var(--line)); }
.mad-status:disabled { opacity: .5; cursor: wait; }
.mad-mehr { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--accent-dark); text-decoration: none; }
.mad-mehr:hover { text-decoration: underline; }

/* Ablauf Neu → Warten → Verpacken → Verschickt */
.mad-ablauf { display: flex; align-items: center; gap: 6px; }
.mad-ablauf .workflow-card { flex: 1; min-width: 0; min-height: 0; padding: 10px 12px; text-decoration: none; }
.mad-ablauf .workflow-card-count { font-size: 24px; }
.mad-pfeil { color: var(--ink-faint); font-size: 20px; flex: none; }

@media (max-width: 640px) {
  .mad-hinweis { flex-wrap: wrap; }
  .mad-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .mad-pos { grid-column: 1 / -1; grid-row: 2; }
  .mad-ablauf { flex-wrap: wrap; }
  .mad-pfeil { display: none; }
}

/* Nachbestellen */
.mad-nb-knopf { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 6px 12px; font-size: 13px; font-weight: 700;
  border-radius: 8px; background: var(--accent-dark); color: #fff; border: 0; cursor: pointer; }
.mad-nb-knopf i { font-size: 16px; }
.mad-nb-knopf:hover { filter: brightness(.92); }
.mad-dialog { border: 0; border-radius: 12px; padding: 0; width: min(560px, calc(100vw - 32px)); background: var(--paper); color: var(--ink);
  box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.mad-dialog::backdrop { background: color-mix(in srgb, var(--nacht-950) 45%, transparent); }
.mad-dialog-inhalt { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; margin: 0; }
.mad-dialog h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; }
.mad-dialog h3 i { color: var(--accent-dark); }
.mad-dialog p { margin: 0; }
.mad-dialog-fehlt { padding: 10px 12px; border-radius: 8px; background: var(--danger-tint); color: var(--danger); font-size: 13px; }
.mad-dialog-fehlt a { color: inherit; font-weight: 700; }
.mad-nb-liste { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; max-height: 320px; overflow: auto; }
.mad-nb-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) 80px auto; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; }
.mad-nb-zeile + .mad-nb-zeile { border-top: 1px solid var(--line); }
.mad-nb-name strong { display: block; font-size: 14px; }
.mad-nb-name small { font-size: 12px; color: var(--ink-soft); }
.mad-nb-zeile input[type="number"] { width: 80px; padding: 6px 8px; text-align: right; }
.mad-nb-notiz { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-soft); }
.mad-nb-notiz textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
.mad-nb-status { font-size: 13px; color: var(--danger); min-height: 1em; }
.mad-dialog-knoepfe { display: flex; justify-content: flex-end; gap: 8px; }
.mad-dialog-knoepfe .btn { display: inline-flex; align-items: center; gap: 4px; }
.mad-dialog-knoepfe .btn i { font-size: 16px; }
.mad-lieferant { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.mad-lieferant > i { color: var(--accent-dark); }
.mad-lieferant div { flex: 1; min-width: 0; }
.mad-lieferant strong { display: block; font-size: 14px; }
.mad-lieferant small { font-size: 12px; color: var(--ink-soft); }
/* Mail-Vorschau vor dem Senden */
.mad-vorschau { display: flex; flex-direction: column; gap: 10px; }
.mad-mail-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.mad-mail-kopf dt { color: var(--ink-soft); }
.mad-mail-kopf dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.mad-mail-text { margin: 0; padding: 14px 16px; max-height: 340px; overflow: auto; white-space: pre-wrap; font-family: inherit; font-size: 14px;
  line-height: 1.5; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.mad-nb-liste[hidden], .mad-nb-notiz[hidden], .mad-vorschau[hidden], .mad-dialog-knoepfe [hidden] { display: none; }

/* Nachbestellen: Abschnitte im Rahmen mit Überschrift (wie in der App) */
.mad-box { margin: 0; padding: 10px 14px 14px; min-width: 0; }
.mad-box .mad-lieferant { border: 0; padding: 4px 0 0; background: none; }
.mad-box .mad-nb-liste { margin-top: 4px; }
.mad-box .mad-nb-notiz textarea { width: 100%; box-sizing: border-box; }
.mad-box[hidden] { display: none; }