/* =============================================================
 *  Adminbereich — Dashboard (admin/dashboard.php)
 * ============================================================= */

/* --- Begrüßung --- */
.dash-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.dash-eyebrow {
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:6px;
}
.dash-title {
  font-size:26px;
  line-height:1.15;
  margin-bottom:4px;
}
.dash-sub { font-size:12.5px; color:var(--text-2); }

/* --- Kennzahlen --- */
.dash-metrics {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:13px;
  margin-bottom:24px;
}
.dash-metric {
  display:flex;
  align-items:center;
  gap:13px;
  background:var(--paper);
  border:.5px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:16px 18px;
}
.dash-metric-ico {
  width:42px;height:42px;
  border-radius:11px;
  background:var(--surface);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
.dash-metric-label {
  font-size:11px;
  color:var(--text-3);
  margin-bottom:3px;
}
.dash-metric-value {
  font-family:var(--font-serif);
  font-size:24px;
  font-weight:600;
  color:var(--ink);
  line-height:1;
}

/* --- Zweispalten-Raster --- */
.dash-grid {
  display:grid;
  grid-template-columns:1fr 320px;
  gap:20px;
  align-items:start;
}

/* --- Abschnittskopf --- */
.dash-section-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:14px;
}
.dash-h2 { font-size:18px; }
.dash-link {
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:11.5px;
  font-weight:500;
  color:var(--accent);
  text-decoration:none;
}
.dash-link svg { font-size:13px; }

/* --- Projekt-Karten --- */
.dash-project {
  display:flex;
  align-items:center;
  gap:15px;
  background:var(--paper);
  border:.5px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:14px;
  margin-bottom:12px;
  text-decoration:none;
  transition:transform .12s, box-shadow .12s;
}
.dash-project:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(42,36,32,.10);
}
.dash-project-cover {
  width:96px;height:66px;
  border-radius:10px;
  overflow:hidden;
  flex-shrink:0;
  background:var(--surface);
}
.dash-project-cover img {
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.dash-project-cover-empty {
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-3);
  font-size:18px;
}
.dash-project-body { flex:1; min-width:0; }
.dash-project-top {
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:4px;
}
.dash-project-client {
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-3);
}
.dash-project-name {
  display:block;
  font-family:var(--font-serif);
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:7px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-project-meta {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.dash-project-meta span {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  color:var(--text-2);
}
.dash-project-meta svg { font-size:12px; color:var(--text-3); }
.dash-project-arrow {
  color:var(--text-3);
  font-size:15px;
  flex-shrink:0;
}

/* --- Kontext-Schiene --- */
.dash-side {
  display:flex;
  flex-direction:column;
  gap:16px;
}
.dash-card {
  background:var(--paper);
  border:.5px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.dash-card-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding:13px 16px;
  border-bottom:.5px solid var(--line);
}
.dash-card-head > span:first-child {
  font-family:var(--font-serif);
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}
.dash-side-empty {
  font-size:12px;
  color:var(--text-3);
  padding:16px;
}

/* Posteingang-Zeilen */
.dash-inbox-row {
  display:flex;
  gap:10px;
  padding:11px 16px;
  border-bottom:.5px solid var(--line);
  text-decoration:none;
}
.dash-inbox-row:last-child { border-bottom:none; }
.dash-inbox-row:hover { background:var(--surface-2); }
.dash-inbox-dot {
  width:7px;height:7px;
  border-radius:50%;
  background:var(--accent);
  margin-top:5px;
  flex-shrink:0;
}
.dash-inbox-body { flex:1; min-width:0; }
.dash-inbox-client {
  display:block;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:1px;
}
.dash-inbox-text {
  display:block;
  font-size:12px;
  color:var(--text);
  line-height:1.4;
}
.dash-inbox-time {
  display:block;
  font-size:10.5px;
  color:var(--text-3);
  margin-top:2px;
}

/* --- leerer Zustand --- */
.dash-empty {
  background:var(--surface-2);
  border:1px dashed var(--line-2);
  border-radius:var(--r-lg);
  padding:34px 24px;
  text-align:center;
  color:var(--text-3);
}
.dash-empty svg { font-size:24px; margin-bottom:8px; }
.dash-empty p { font-size:13px; }

/* --- Mobil --- */
@media (max-width:860px) {
  .dash-metrics { grid-template-columns:1fr 1fr; }
  .dash-grid { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  /* Projektzeile mobil: Cover oben ausrichten, obere Zeile darf umbrechen,
     damit die Status-Pille NICHT abgeschnitten wird oder mehrzeilig bricht.
     Pfeil rechts entfällt (die ganze Zeile ist ohnehin ein Link). */
  .dash-project { align-items:flex-start; gap:12px; }
  .dash-project-cover { width:64px; height:48px; }
  .dash-project-top { flex-wrap:wrap; gap:5px 8px; }
  .dash-project-client { white-space:normal; line-height:1.3; }
  .dash-project-meta { gap:5px 12px; }
  .dash-project-arrow { display:none; }
}

/* =============================================================
 *  Schutzart beim Link-Versand (Zugangscode / PIN / offen)
 * ============================================================= */
.sch-choice {
  display:flex;
  align-items:flex-start;
  gap:7px;
  padding:6px 8px;
  border-radius:7px;
  cursor:pointer;
  transition:background .12s;
}
.sch-choice:hover { background:var(--surface-2); }
.sch-choice input { margin-top:2px; flex-shrink:0; }
.sch-choice strong {
  display:block;
  font-size:11.5px;
  font-weight:600;
  color:var(--text-1);
}
.sch-choice em {
  display:block;
  font-size:10px;
  font-style:normal;
  line-height:1.45;
  color:var(--text-3);
}
/* Der ungeschützte Weg soll sich sichtbar unterscheiden. */
.sch-choice--warn:has(input:checked) {
  background:rgba(180, 69, 58, .07);
}
.sch-choice--warn:has(input:checked) strong { color:#B4453A; }

/* =============================================================
 *  Änderungen (Changelog): Einträge zum Aufklappen
 *  Reines <details>/<summary>, kein JavaScript (CSP).
 * ============================================================= */
.chg-list {
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:760px;
}
/* overflow:hidden, damit der Hover-Hintergrund der Kopfzeile an
   den runden Kartenecken sauber abgeschnitten wird. */
.chg-entry { padding:0; overflow:hidden; }
.chg-summary {
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  padding:13px 16px;
  cursor:pointer;
  list-style:none;              /* Standard-Dreieck weg (Firefox) */
  transition:background .12s;
}
.chg-summary::-webkit-details-marker { display:none; }
.chg-summary:hover { background:var(--surface-2); }
.chg-date {
  font-size:11px;
  font-weight:600;
  color:var(--text-3);
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.chg-title {
  font-size:13.5px;
  font-weight:700;
  color:var(--ink);
  flex:1;
  min-width:0;
}
.chg-new {
  font-size:9px;
  font-weight:700;
  letter-spacing:.05em;
  color:#fff;
  background:var(--accent);
  border-radius:20px;
  padding:1px 7px;
  flex-shrink:0;
}
.chg-count {
  font-size:10.5px;
  color:var(--text-3);
  white-space:nowrap;
  flex-shrink:0;
}
.chg-chevron {
  display:inline-flex;
  color:var(--text-3);
  flex-shrink:0;
  transition:transform .15s ease;
}
.chg-chevron .i { width:14px; height:14px; }
.chg-entry[open] .chg-chevron { transform:rotate(90deg); }
.chg-entry[open] .chg-summary { border-bottom:.5px solid var(--line); }
.chg-body { padding:12px 16px 15px; }
.chg-points {
  margin:0 0 0 16px;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.chg-points li {
  font-size:12px;
  color:var(--text-2);
  line-height:1.55;
}
.chg-wish {
  font-size:10.5px;
  color:#3F7A52;
  margin-top:10px;
}
.chg-wish a { color:inherit; }

/* =============================================================
 *  Nachfassen-Karte im Dashboard (versendet, nicht geöffnet)
 * ============================================================= */
.remind-card {
  border:.5px solid rgba(200, 138, 30, .35);
  background:rgba(200, 138, 30, .05);
  border-radius:12px;
  padding:15px 17px;
  margin-bottom:22px;
}
.remind-head {
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin-bottom:11px;
}
.remind-ico {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(200, 138, 30, .14);
  color:#C88A1E;
  flex-shrink:0;
}
.remind-title {
  font-size:13px;
  font-weight:600;
  color:var(--text-1);
}
.remind-sub {
  font-size:11.5px;
  color:var(--text-2);
  margin-top:1px;
}
.remind-list { display:flex; flex-direction:column; gap:1px; }
.remind-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:8px;
  text-decoration:none;
  color:inherit;
  transition:background .12s;
}
.remind-item:hover { background:rgba(200, 138, 30, .09); }
.remind-item-main { flex:1; min-width:0; }
.remind-item-main strong {
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--text-1);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.remind-item-main em {
  display:block;
  font-size:10.5px;
  font-style:normal;
  color:var(--text-3);
}
.remind-item-days {
  font-size:10.5px;
  font-weight:600;
  color:#C88A1E;
  white-space:nowrap;
  flex-shrink:0;
}
.remind-item .i { width:14px; height:14px; color:var(--text-3); flex-shrink:0; }
.remind-more {
  font-size:10.5px;
  color:var(--text-3);
  padding:5px 10px 0;
}
/* Hinweisleiste im Projekt selbst */
.remind-bar {
  display:flex;
  align-items:center;
  gap:11px;
  flex-wrap:wrap;
  border:.5px solid rgba(200, 138, 30, .35);
  background:rgba(200, 138, 30, .05);
  border-radius:10px;
  padding:11px 14px;
  margin-bottom:16px;
}
.remind-bar-text { flex:1; min-width:200px; font-size:11.5px; color:var(--text-2); }
.remind-bar-text strong { color:var(--text-1); font-weight:600; }

/* =============================================================
 *  Sofortsuche über Listen (Projekte, Kunden)
 *  Filtert clientseitig ab dem ersten Zeichen (app.js).
 * ============================================================= */
.list-search {
  position:relative;
  margin-bottom:14px;
  max-width:420px;
}
.list-search .i {
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  width:15px;
  height:15px;
  color:var(--text-3);
  pointer-events:none;
}
.list-search input {
  width:100%;
  border:.5px solid var(--line-2);
  background:var(--paper);
  border-radius:22px;
  padding:10px 16px 10px 36px;
  font-size:12.5px;
  font-family:inherit;
  color:var(--text-1);
  transition:border-color .12s;
}
.list-search input::placeholder { color:var(--text-3); }
.list-search input:focus {
  outline:none;
  border-color:var(--accent);
}
/* Das native Kreuz von type="search" passt nicht zum Rest —
   Escape leert das Feld (app.js). */
.list-search input::-webkit-search-cancel-button { display:none; }

/* =============================================================
 *  Projektart beim Anlegen (admin/project_form.php)
 * ============================================================= */
.pt-choice {
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:.5px solid var(--line-2);
  border-radius:10px;
  padding:11px 13px;
  cursor:pointer;
  transition:border-color .12s, background .12s;
}
.pt-choice:hover { border-color:var(--accent); }
.pt-choice input { margin-top:2px; flex-shrink:0; }
.pt-choice strong {
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-1);
}
.pt-choice em {
  display:block;
  margin-top:2px;
  font-size:10.5px;
  font-style:normal;
  line-height:1.5;
  color:var(--text-3);
}
/* :has() wird von allen aktuellen Browsern unterstützt; fehlt es,
   bleibt die Auswahl trotzdem am Radio-Knopf erkennbar. */
.pt-choice:has(input:checked) {
  border-color:var(--accent);
  background:rgba(178, 58, 46, .04);
}

/* =============================================================
 *  Adminbereich — Projektliste (admin/projects.php)
 * ============================================================= */
.proj-filter {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.proj-filter-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:.5px solid var(--line-2);
  background:var(--paper);
  border-radius:20px;
  padding:7px 14px;
  font-size:11.5px;
  font-family:inherit;
  color:var(--text-2);
  cursor:pointer;
  transition:border-color .12s, color .12s;
}
.proj-filter-btn:hover { border-color:var(--accent); }
.proj-filter-btn.is-active {
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.proj-filter-btn span {
  font-size:10px;
  font-weight:600;
  opacity:.7;
}
.proj-list { display:flex; flex-direction:column; }

/* =============================================================
 *  Adminbereich — Kunden, Posteingang, NAS, Einstellungen
 * ============================================================= */

/* --- Kundenkarten --- */
.client-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:14px;
}
.client-card {
  background:var(--paper);
  border:.5px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:16px;
  text-decoration:none;
  display:block;
  transition:transform .12s, box-shadow .12s;
}
.client-card:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(42,36,32,.10);
}
.client-card-head {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:13px;
}
.client-avatar {
  width:44px;height:44px;
  border-radius:11px;
  background:var(--accent);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);
  font-size:15px;
  font-weight:600;
  flex-shrink:0;
}
.client-name {
  font-family:var(--font-serif);
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.client-contact {
  font-size:11px;
  color:var(--text-3);
  margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.client-card-foot {
  display:flex;
  flex-direction:column;
  gap:7px;
  border-top:.5px solid var(--line);
  padding-top:11px;
}
.client-meta {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  color:var(--text-2);
}
.client-meta svg { color:var(--text-3); font-size:13px; flex-shrink:0; }
.client-meta code {
  font-size:10.5px;
  background:var(--surface);
  padding:1px 5px;
  border-radius:5px;
}

/* --- Posteingang --- */
.inbox-row {
  display:flex;
  gap:12px;
  align-items:center;
  padding:13px 16px;
  border-bottom:.5px solid var(--line);
  text-decoration:none;
}
.inbox-row:last-child { border-bottom:none; }
.inbox-row:hover { background:var(--surface-2); }
.inbox-avatar {
  width:34px;height:34px;
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
  font-weight:600;
  flex-shrink:0;
}
.inbox-body { flex:1; min-width:0; }
.inbox-line {
  display:block;
  font-size:12px;
  color:var(--text-2);
  line-height:1.45;
}
.inbox-line strong { color:var(--ink); font-weight:600; }
.inbox-sub {
  display:block;
  font-size:10.5px;
  color:var(--text-3);
  margin-top:2px;
}
.inbox-arrow { color:var(--text-3); font-size:14px; flex-shrink:0; }

/* --- NAS-Sync --- */
.nas-status {
  display:flex;
  align-items:center;
  gap:13px;
  flex-wrap:wrap;
  background:var(--paper);
  border:.5px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:16px 18px;
  margin-bottom:16px;
}
.nas-status-ico {
  width:42px;height:42px;
  border-radius:11px;
  background:var(--surface);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;
  flex-shrink:0;
}
.nas-status-text {
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  margin-top:2px;
}
.nas-row {
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 16px;
  border-bottom:.5px solid var(--line);
}
.nas-row:last-child { border-bottom:none; }
.nas-row-ico {
  width:32px;height:32px;
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
  flex-shrink:0;
}
.nas-row-name { font-size:12px; font-weight:500; color:var(--ink); }
.nas-row-sub { font-size:10.5px; color:var(--text-3); margin-top:1px; }
.nas-badge {
  font-size:10px;
  font-weight:600;
  padding:3px 9px;
  border-radius:8px;
  flex-shrink:0;
}
.nas-ok   { background:#E8F0E6; color:#3E7038; }
.nas-fail { background:#F6E4E2; color:var(--accent-dark); }
.nas-wait { background:var(--surface); color:var(--text-3); }
.nas-note {
  font-size:10.5px;
  color:var(--text-3);
  margin-top:12px;
  text-align:center;
}

/* --- Einstellungen / Vorlagen --- */
.tpl-row {
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  border-bottom:.5px solid var(--line);
  text-decoration:none;
}
.tpl-row:last-child { border-bottom:none; }
.tpl-row:hover { background:var(--surface-2); }
.tpl-ico {
  width:34px;height:34px;
  border-radius:9px;
  background:var(--surface);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
  flex-shrink:0;
}
.tpl-body { flex:1; min-width:0; }
.tpl-name {
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
}
.tpl-badge {
  font-size:9px;
  font-weight:600;
  color:var(--accent);
  background:var(--surface);
  padding:1px 6px;
  border-radius:7px;
  margin-left:5px;
  vertical-align:middle;
}
.tpl-subject {
  display:block;
  font-size:11px;
  color:var(--text-3);
  margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tpl-arrow { color:var(--text-3); font-size:14px; flex-shrink:0; }
.tpl-note {
  font-size:11px;
  color:var(--text-3);
  margin-top:12px;
}
.tpl-note code {
  background:var(--surface);
  padding:1px 5px;
  border-radius:5px;
  font-size:10.5px;
}

/* Anmerkung im Admin: Zuordnung zum kommentierten Entwurf */
.cmt-target {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  font-weight:600;
  color:var(--accent);
  background:var(--surface);
  padding:2px 8px;
  border-radius:8px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cmt-target svg { font-size:11px; flex-shrink:0; }

/* Admin: Token-Zugriffsübersicht (project_detail) */
.tok-access {
  background:var(--surface-2);
  border:.5px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:9px;
}
.tok-access-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}
.tok-access-head > span:first-child {
  font-size:11px;
  font-weight:600;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.tok-access-head svg { font-size:12px; color:var(--accent); }
.tok-access-count {
  font-size:11px;
  font-weight:600;
  color:var(--accent);
  background:var(--paper);
  padding:1px 8px;
  border-radius:8px;
}
.tok-access-empty {
  font-size:10.5px;
  color:var(--text-3);
}
.tok-access-line {
  font-size:10.5px;
  color:var(--text-2);
  margin-top:2px;
}
.tok-access-line strong { color:var(--ink); font-weight:600; }
.tok-access-details { margin-top:7px; }
.tok-access-details summary {
  font-size:10.5px;
  color:var(--accent);
  cursor:pointer;
}
.tok-access-row {
  display:flex;
  justify-content:space-between;
  font-size:10.5px;
  color:var(--text-2);
  padding:3px 0;
  border-bottom:.5px solid var(--line);
}
.tok-access-row:last-child { border-bottom:none; }
.tok-access-time { color:var(--text-3); }

/* Admin: Projektangaben + Zugangslink nebeneinander (project_detail) */
.info-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:18px;
  align-items:start;
}
@media (max-width:820px) {
  .info-grid { grid-template-columns:1fr; }
}

/* Admin: Drag-and-drop-Griff für Dateien (project_detail) */
.drag-handle {
  color:var(--text-3);
  cursor:grab;
  font-size:14px;
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.drag-handle:active { cursor:grabbing; }
[data-sort-id].is-dragging {
  opacity:.5;
  background:var(--surface);
  border-radius:6px;
}


/* --- Projektliste: archivierte Einträge --- */
/* Ausgegraute Karte für archivierte Projekte (Filter 'Alle'/Status). */
.dash-project.is-archived { opacity:.55; }
.dash-project.is-archived:hover { opacity:.82; }
/* Archiv-Eintrag: Karte + Wiederherstellen-Button nebeneinander */
.proj-arch-item {
  display:flex;
  align-items:center;
  gap:10px;
}
.proj-arch-item .dash-project { flex:1; min-width:0; }
.proj-restore { flex-shrink:0; }