/* ============================================================
   Dashboard – Bestellzeilen (Redesign)
   Karten mit Status-Plakette, Ablauf-Zeitleiste (Bestellt→Lieferung→Montage)
   und einer klaren Hauptaktion je Zeile. Nutzt die vorhandenen Theme-Tokens,
   daher automatisch hell/dunkel.
   ============================================================ */

/* Montage-Liste (Montageplaner): Lieferstatus oben, Projektname + Kunde darunter, farbiges Termin-Feld */
.mp-row { display:grid; grid-template-columns:auto 1fr auto; gap:12px; padding:13px 14px;
  align-items:start; cursor:grab; margin:8px 10px; border:1px solid var(--outline-soft);
  border-radius:11px; background:var(--surface); box-shadow:0 1px 2px rgba(20,30,50,.05);
  transition:box-shadow .12s ease, border-color .12s ease; }
.mp-row:hover { border-color:color-mix(in srgb, var(--primary) 40%, var(--outline-soft));
  box-shadow:0 3px 12px -5px rgba(20,30,50,.22); }
.mp-row.overdue { background:color-mix(in srgb, var(--red-t) 7%, var(--surface)); border-color:color-mix(in srgb, var(--red-t) 32%, var(--outline-soft)); }
.mp-row.soon { background:color-mix(in srgb, var(--yellow-t) 8%, var(--surface)); border-color:color-mix(in srgb, var(--yellow-t) 34%, var(--outline-soft)); }
.mp-chk { width:18px; height:18px; cursor:pointer; flex:none; margin-top:2px; }
.mp-mid { min-width:0; display:flex; flex-direction:column; gap:8px; }
.mp-chip { align-self:flex-start; display:inline-flex; align-items:center; gap:5px; font-size:11px;
  font-weight:700; border-radius:999px; padding:3px 9px; white-space:nowrap; }
.mp-chip .ti { font-size:14px; }
.mp-chip.geliefert { background:color-mix(in srgb, var(--green-t) 14%, var(--surface)); color:var(--green-t); }
.mp-chip.ausstehend { background:color-mix(in srgb, var(--yellow-t) 16%, var(--surface)); color:var(--yellow-t); }
.mp-name { font-size:13px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px; min-width:0; }
.mp-name > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-sub { font-size:11.5px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-sub .pjn { color:var(--blue-t); font-weight:600; font-family:var(--mono, ui-monospace, monospace); }
.mp-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; }
.mp-date { font-size:12px; font-weight:800; padding:5px 9px; border-radius:8px; text-align:center;
  min-width:60px; font-variant-numeric:tabular-nums; line-height:1.15; }
.mp-date.blue { background:color-mix(in srgb, var(--blue-t) 13%, var(--surface)); color:var(--blue-t); }
.mp-date.amber { background:color-mix(in srgb, var(--yellow-t) 15%, var(--surface)); color:var(--yellow-t); }
.mp-date.red { background:color-mix(in srgb, var(--red-t) 13%, var(--surface)); color:var(--red-t); }
.mp-date.none { background:var(--surface-2); color:var(--text-3); font-weight:700; }
.mp-day { font-size:10px; font-weight:700; }
.mp-open { border:none; background:transparent; color:var(--blue-t); cursor:pointer; font-size:15px; padding:0; }
.mp-open:hover { color:var(--primary); }

/* Schließplancode pulsiert dezent, bis er eingetragen ist */
@keyframes pdPulse {
  0%,100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--red-t) 42%, transparent); border-color:var(--red-t); }
  50%     { box-shadow:0 0 0 6px color-mix(in srgb, var(--red-t) 0%, transparent); border-color:color-mix(in srgb, var(--red-t) 45%, var(--outline-soft)); }
}
.pd-pulse { animation:pdPulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .pd-pulse { animation:none; border-color:var(--red-t)!important; } }

/* Projektdetails kompakt: Toolbar + Dokumentenliste (umbenennbar) */
.pd-tools { display:flex; gap:10px; flex-wrap:wrap; }
.pd-action { display:inline-flex; align-items:center; gap:11px; border:1px solid var(--outline-soft);
  border-radius:12px; padding:12px 16px; background:var(--surface); color:var(--text); cursor:pointer;
  font:inherit; font-size:14px; font-weight:600; transition:border-color .12s ease, background .12s ease; }
.pd-action > .ti { font-size:24px; color:var(--primary); flex:none; }
.pd-action:hover { border-color:var(--primary); background:var(--surface-2); }
.pd-action span { display:flex; flex-direction:column; line-height:1.2; text-align:left; }
.pd-action span small { font-size:11px; font-weight:400; color:var(--text-2); margin-top:1px; }
.pd-action.drag { border-color:var(--primary); border-style:dashed; background:color-mix(in srgb, var(--primary) 10%, var(--surface)); }

/* Mehrere Notizen (immer sichtbar, Auto-Speichern, X zum Entfernen) */
.pd-notizen { display:flex; flex-direction:column; gap:8px; width:100%; }
.pd-notiz { width:100%; display:flex; align-items:flex-start; gap:6px; background:color-mix(in srgb, var(--yellow-t) 8%, var(--surface));
  border:1px solid color-mix(in srgb, var(--yellow-t) 24%, var(--outline-soft)); border-radius:10px; padding:8px 8px 8px 12px; }
.pd-notiz-t { flex:1; min-width:0; border:0; background:transparent; color:var(--text); font:inherit; font-size:13px;
  resize:vertical; min-height:38px; line-height:1.45; padding:2px 0; }
.pd-notiz-t:focus { outline:none; }
.pd-notiz-x { flex:none; border:0; background:transparent; color:var(--text-3); cursor:pointer; font-size:15px;
  padding:3px 5px; border-radius:6px; }
.pd-notiz-x:hover { background:color-mix(in srgb, var(--red-t) 14%, var(--surface)); color:var(--red-t); }
.pd-dok { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--surface-2); }
.pd-dok:last-child { border-bottom:0; }
.pd-dok-name { flex:1; min-width:0; border:1px solid transparent; background:transparent; color:var(--text);
  font:inherit; font-size:13px; padding:5px 7px; border-radius:6px; }
.pd-dok-name:hover { border-color:var(--outline-soft); background:var(--surface); }
.pd-dok-name:focus { border-color:var(--primary); background:var(--surface); outline:none; }

/* Aufklappbare Projektdetails (Bearbeiten · Notizen & Dokumente) */
.pd-det > summary { list-style:none; user-select:none; }
.pd-det > summary::-webkit-details-marker { display:none; }
.pd-det > summary:hover { color:var(--primary); }
.pd-det > summary .pd-chev { display:inline-block; transition:transform .15s ease; }
.pd-det[open] > summary .pd-chev { transform:rotate(90deg); }

/* Kompakte Aktions-Buttons (statt großer Text-Kacheln) */
.db-actbar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.db-act { display:flex; flex-direction:column; align-items:center; gap:6px; width:102px; padding:12px 8px;
  border:1px solid var(--outline-soft); border-radius:14px; background:var(--surface); cursor:pointer;
  box-shadow:0 1px 2px rgba(20,30,50,.05); transition:border-color .12s ease, transform .1s ease; }
.db-act:hover { border-color:var(--primary); transform:translateY(-1px); }
.db-act.dis { opacity:.5; cursor:not-allowed; }
.db-act.dis:hover { border-color:var(--outline-soft); transform:none; }
.db-act .ico { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:22px; }
.db-act .t { font-size:12px; font-weight:600; text-align:center; line-height:1.2; color:var(--text); }
.db-act.a-violet .ico { background:color-mix(in srgb, var(--violet-t,#6b44a8) 15%, var(--surface)); color:var(--violet-t,#6b44a8); }
.db-act.a-green .ico { background:color-mix(in srgb, var(--green-t) 15%, var(--surface)); color:var(--green-t); }
.db-act.a-grey .ico { background:var(--surface-2); color:var(--text-2); }

/* Symbol-geführte Abschnitts-Überschrift (Icon + Zähler statt langer Titel) */
.db-sec { display:flex; align-items:center; gap:11px; margin:26px 2px 10px; }
.db-sec .badge { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:20px; flex:none; position:relative; }
.db-sec .badge .cnt { position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; border-radius:999px;
  background:var(--text); color:var(--surface); font-size:11px; font-weight:800; display:grid; place-items:center; padding:0 5px; border:2px solid var(--surface); }
.db-sec .cap { display:flex; flex-direction:column; line-height:1.15; }
.db-sec .cap b { font-size:14.5px; font-weight:700; color:var(--text); }
.db-sec .cap small { font-size:11.5px; color:var(--text-2); font-weight:500; }
.db-sec .badge.b-blue { background:color-mix(in srgb, var(--blue-t) 14%, var(--surface)); color:var(--blue-t); }
.db-sec .badge.b-amber { background:color-mix(in srgb, var(--yellow-t) 16%, var(--surface)); color:var(--yellow-t); }
.db-sec .badge.b-green { background:color-mix(in srgb, var(--green-t) 14%, var(--surface)); color:var(--green-t); }
.db-sec .badge.b-red { background:color-mix(in srgb, var(--red-t) 14%, var(--surface)); color:var(--red-t); }
.db-sec .badge.b-grey { background:var(--surface-2); color:var(--text-2); }
/* farbige Zähler (allgemeines Dashboard) */
.db-sec .cnt.k-red { background:var(--red-t); } .db-sec .cnt.k-blue { background:var(--blue-t); } .db-sec .cnt.k-grey { background:var(--text-2); }

/* Kompakte Warn-Zeilen im allgemeinen Dashboard */
.bd-warn { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--outline-soft); font-size:13px; }
.bd-warn:last-child { border-bottom:0; }
.bd-warn .pjn { font-family:var(--mono, ui-monospace, monospace); font-size:11px; font-weight:600; color:var(--blue-t); }
.bd-warn .tag { margin-left:auto; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.bd-tag-red { background:color-mix(in srgb, var(--red-t) 13%, var(--surface)); color:var(--red-t); }
.bd-tag-blue { background:color-mix(in srgb, var(--blue-t) 13%, var(--surface)); color:var(--blue-t); }

.db-seclabel { margin:26px 2px 3px; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-2); display:flex; align-items:center; gap:8px; }
.db-seclabel .ti { font-size:16px; }
.db-seclabel .n { background:var(--surface-2); border:1px solid var(--outline-soft); border-radius:999px;
  padding:0 8px; font-size:11px; color:var(--text-2); font-weight:600; }

.db-orders { display:flex; flex-direction:column; gap:12px; margin-top:8px; }

.db-helper { display:flex; gap:9px; align-items:flex-start; color:var(--text-2); font-size:13px;
  line-height:1.5; margin:2px 2px 12px; }
.db-helper .ti { color:var(--primary); margin-top:2px; font-size:16px; flex:none; }
.db-helper b { color:var(--text); font-weight:600; }

.db-card { background:var(--surface); border:1px solid var(--outline-soft); border-radius:14px;
  box-shadow:0 1px 2px rgba(20,30,50,.05), 0 10px 26px -16px rgba(20,30,50,.18);
  padding:20px 20px; display:grid; gap:16px;
  transition:box-shadow .15s ease, border-color .15s ease, transform .1s ease; }
/* Klickbare Karte (Titelbereich hat onclick) -> Hover zeigt Anklickbarkeit */
.db-card:has(.db-id[onclick]):hover { border-color:color-mix(in srgb, var(--primary) 45%, var(--outline-soft));
  box-shadow:0 2px 6px rgba(20,30,50,.09), 0 16px 34px -18px rgba(20,30,50,.30); transform:translateY(-1px); }
.db-id[onclick] { cursor:pointer; }
.db-id[onclick]:hover .db-title { text-decoration:underline; text-decoration-color:var(--primary);
  text-underline-offset:2px; }
.db-card.attn { border-left:4px solid var(--red-t); }
.db-card.done { background:var(--surface-2); }

.db-head { display:flex; align-items:flex-start; gap:13px; flex-wrap:wrap; }
.db-av { width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  font-size:20px; flex:none; }
.db-av.blue  { background:color-mix(in srgb, var(--blue-t) 15%, var(--surface));  color:var(--blue-t); }
.db-av.green { background:color-mix(in srgb, var(--green-t) 15%, var(--surface)); color:var(--green-t); }
.db-av.amber { background:color-mix(in srgb, var(--yellow-t) 18%, var(--surface)); color:var(--yellow-t); }

.db-id { flex:1; min-width:180px; }
.db-titleline { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.db-title { font-size:15.5px; font-weight:700; letter-spacing:-.01em; color:var(--text); }
.db-pjn { font-family:var(--mono, ui-monospace, monospace); font-size:11.5px; font-weight:600;
  color:var(--blue-t); background:color-mix(in srgb, var(--blue-t) 12%, var(--surface));
  border-radius:6px; padding:2px 7px; }
.db-sub { color:var(--text-2); font-size:12.5px; margin-top:3px; }
.db-sub .code { font-family:var(--mono, ui-monospace, monospace); font-size:11.5px;
  background:var(--surface-2); border:1px solid var(--outline-soft); border-radius:5px; padding:1px 6px; color:var(--text); }

/* Status-Plakette */
.db-pill { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  border-radius:999px; padding:4px 10px; white-space:nowrap; line-height:1.2; }
.db-pill .ti { font-size:14px; }
.db-pill.blue  { background:color-mix(in srgb, var(--blue-t) 13%, var(--surface));  color:var(--blue-t);
  border:1px solid color-mix(in srgb, var(--blue-t) 30%, var(--surface)); }
.db-pill.green { background:color-mix(in srgb, var(--green-t) 13%, var(--surface)); color:var(--green-t);
  border:1px solid color-mix(in srgb, var(--green-t) 30%, var(--surface)); }
.db-pill.amber { background:color-mix(in srgb, var(--yellow-t) 16%, var(--surface)); color:var(--yellow-t);
  border:1px solid color-mix(in srgb, var(--yellow-t) 34%, var(--surface)); }
.db-pill.red   { background:color-mix(in srgb, var(--red-t) 12%, var(--surface));   color:var(--red-t);
  border:1px solid color-mix(in srgb, var(--red-t) 30%, var(--surface)); }

.db-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }

/* Montiert: kompakte, nicht änderbare Datumszeile (statt Zeitleiste) */
.db-track-done { display:flex; gap:20px; flex-wrap:wrap; align-items:center; padding:2px; font-size:12.5px; color:var(--text-2); }
.db-track-done b { color:var(--text); font-weight:600; }
.db-track-done .ti { font-size:14px; }

/* Ablauf-Zeitleiste – kompakt (dezenter Statusstreifen, nicht zu präsent) */
.db-track { padding:2px 2px 0; }
.db-steps { display:grid; grid-template-columns:repeat(3,1fr); }
.db-step { display:flex; flex-direction:column; align-items:center; gap:4px; position:relative;
  text-align:center; padding:0 4px; min-width:0; }
.db-step::before { content:""; position:absolute; top:10px; left:-50%; width:100%; height:2px;
  background:var(--outline-soft); z-index:0; }
.db-step:first-child::before { display:none; }
.db-step.done::before { background:var(--green-t); }
.db-step.now::before  { background:linear-gradient(90deg, var(--green-t), var(--blue-t)); }
.db-dot { width:21px; height:21px; border-radius:50%; display:grid; place-items:center; font-size:12px;
  z-index:1; background:var(--surface); border:2px solid var(--outline-soft); color:var(--text-3); }
.db-step.done .db-dot { background:var(--green-t); border-color:var(--green-t); color:#fff; }
.db-step.now  .db-dot { background:var(--surface); border-color:var(--blue-t); color:var(--blue-t);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--blue-t) 18%, var(--surface)); }
.db-slbl { font-size:11px; font-weight:600; color:var(--text-2); }
.db-step.now .db-slbl { color:var(--text); font-weight:700; }
.db-step.todo .db-slbl { color:var(--text-3); }
.db-smeta { font-size:11px; color:var(--text-2); font-variant-numeric:tabular-nums; }
.db-smeta.set { color:var(--text-2); }
.db-step input[type=date] { font:inherit; font-size:11px; background:var(--surface);
  border:1px solid var(--outline-soft); border-radius:6px; padding:2px 5px; color:var(--text);
  color-scheme:light dark; max-width:118px; }
/* Bestellnummer im Schritt "Bestellt" – gleiche Anmutung wie die Datumsfelder
   daneben, damit die drei Schritte wie eine Reihe aussehen. */
.db-step input.db-bnr { font:inherit; font-size:11px; background:var(--surface);
  border:1px solid var(--outline-soft); border-radius:6px; padding:2px 5px; color:var(--text);
  max-width:118px; margin-top:3px; }
.db-step input.db-bnr::placeholder { color:var(--text-3); }
/* Dieselbe Anmutung in der fertigen (montierten) Zeile – dort gibt es keine
   Schritte mehr, das Feld steht direkt im Text. */
.db-track-done input.db-bnr { font:inherit; font-size:11px; background:var(--surface);
  border:1px solid var(--outline-soft); border-radius:6px; padding:1px 5px; color:var(--text);
  max-width:150px; vertical-align:baseline; }
.db-track-done input.db-bnr::placeholder { color:var(--text-3); }
.db-step .db-mini { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600;
  color:var(--text-3); cursor:pointer; }
.db-step .db-mini:hover { color:var(--text); }
.db-step .db-mini input { width:13px; height:13px; margin:0; }

/* Fußzeile: Kunde + leise Nebenaktionen */
.db-foot { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.db-kv { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-2); }
.db-kv .ti { font-size:15px; }
.db-kv b { color:var(--text); font-weight:600; }
.db-kv.warn { color:var(--red-t); font-weight:600; }
.db-logchk { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-2); cursor:pointer; }
.db-logchk input { width:14px; height:14px; }
.db-quiet { display:inline-flex; align-items:center; border:1px solid var(--outline-soft);
  border-radius:9px; overflow:hidden; }
.db-foot .db-logchk { margin-left:auto; }   /* Log-Häkchen nach rechts, Buttons bleiben links */
.db-quiet button { border:0; border-left:1px solid var(--outline-soft); background:transparent;
  color:var(--text-2); font:inherit; font-size:12px; font-weight:600; padding:7px 11px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; }
.db-quiet button:first-child { border-left:0; }
.db-quiet button:hover { background:var(--surface-2); color:var(--text); }
/* Download-Icons (CSV/PDF) rechts unten in der bestellten Karte */
.db-dl { margin-left:auto; display:inline-flex; gap:6px; }
.db-dl button { border:1px solid var(--outline-soft); border-radius:8px; background:transparent;
  color:var(--text-2); cursor:pointer; padding:6px 9px; display:inline-flex; align-items:center; }
.db-dl button .ti { font-size:18px; }
.db-dl button:hover { background:var(--surface-2); color:var(--text); }

.db-section-empty { color:var(--text-2); font-size:13px; padding:14px 4px; }

@media (max-width:600px){
  .db-actions { margin-left:0; width:100%; }
  .db-actions .btn { flex:1; justify-content:center; }
  .db-slbl { font-size:11px; }
}
/* Wer die Notiz geschrieben hat und wann – klein unter dem Text */
.pd-notiz { flex-wrap: wrap; }
.pd-notiz-wer { width: 100%; font-size: 11px; color: var(--text-3); padding: 0 2px 2px; }
.pd-notiz-t[readonly] { opacity: .85; cursor: default; }

/* Lizenzverwaltung: Tabelle und Auswahlzeilen */
.tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabelle th { text-align: left; font-weight: 600; color: var(--text-2); padding: 8px 10px; border-bottom: 1px solid var(--outline-soft); }
.tabelle td { padding: 10px; border-bottom: 1px solid var(--outline-soft); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.wahl-zeile { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; font-size: 13px; cursor: pointer; }
.wahl-zeile input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--primary); }
.badge-rot { background: color-mix(in srgb, var(--red-t) 16%, var(--surface)); color: var(--red-t); }