/* ==========================================================================
   file-uploader.css — Datei-Uploader-Primitiv (Modul _shared/file-uploader.js).

   SSOT-Spiegel zum JS-Modul. Vorher lag dieses CSS in checklist.css, obwohl der
   Uploader ein eigenes Modul ist und AUSSERHALB der Checkliste konsumiert wird
   (activity-log Notiz-Anhaenge, kanban) — ein Refactor/Delete an checklist.css
   haette ihn dort lautlos gebrochen. Selektoren sind self-scoped (.app-file-uploader*).
   Ladeposition: direkt nach checklist.css (gleiche _shared-Tier, kein Kaskaden-Shift).
   ========================================================================== */

/* File-Uploader */
.app-scope .app-file-uploader.variant-compact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  flex-wrap: wrap;
}
.app-scope .app-file-uploader-clip {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  background: var(--lod-gray-50);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.app-scope .app-file-uploader-clip:hover { background: var(--lod-gray-100); border-color: var(--lod-gray-200); }
.app-scope .app-file-uploader-clip img { opacity: 0.65; }
.app-scope .app-file-uploader-staged {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  width: 100%;
}
.app-scope .app-file-uploader-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: 3px var(--space-2);
  background: var(--lod-gray-100);
  border-radius: var(--radius-xl);
  font-size: 11.5px;
  color: var(--lod-gray-700);
  max-width: 200px;
}
.app-scope .app-file-uploader-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-scope .app-file-uploader-chip-size { color: var(--lod-gray-500); font-size: 10.5px; }
.app-scope .app-file-uploader-chip-remove {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 14px;
  height: 14px;
}
.app-scope .app-file-uploader-chip-remove img { opacity: 0.5; }

/* File-Uploader Zone-Variant */
.app-scope .app-file-uploader.variant-zone { display: block; }
.app-scope .app-file-uploader-zone {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3-5) var(--space-4);
  background: var(--lod-gray-50);
  border: 1.5px dashed var(--lod-gray-300);
  border-radius: var(--radius-pill-sm);
  cursor: pointer;
  transition: border-color var(--duration-quick), background-color var(--duration-quick);
}
.app-scope .app-file-uploader-zone.is-dragover { border-color: var(--lod-darkblue); background: var(--lod-darkblue-100); }
.app-scope .app-file-uploader-browse {
  background: transparent;
  border: none;
  color: var(--lod-darkblue);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}