/* Grid bleibt für Dateien */
.wcdbx-grid{display:grid;gap:16px}
@media(min-width:480px){.wcdbx-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.wcdbx-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.wcdbx-grid{grid-template-columns:repeat(4,1fr)}}

.wcdbx-card{display:flex;flex-direction:column;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.wcdbx-thumb{width:100%;aspect-ratio:16/9;background:linear-gradient(180deg,#f3f4f6,#e5e7eb);display:flex;align-items:center;justify-content:center}
.wcdbx-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wcdbx-meta{padding:12px;display:flex;gap:8px;align-items:center;justify-content:space-between}
.wcdbx-title{font-weight:600;font-size:15px;margin:0 0 2px 0;line-height:1.3}
.wcdbx-sub{color:#6b7280;font-size:12px}
.wcdbx-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08);transform:translateY(-1px)}
.wcdbx-actions{padding:12px;border-top:1px solid #f1f5f9;display:flex;gap:8px;flex-wrap:wrap}
.wcdbx-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px;text-decoration:none;color:#111827;background:#fff;cursor:pointer}
.wcdbx-btn:hover{background:#f9fafb}

.wcdbx-filter{display:none;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.wcdbx-filter .wcdbx-btn[aria-pressed="true"]{background:#111827;color:#fff;border-color:#111827}

/* Skeleton */
@keyframes wcdbx-shimmer {0%{background-position:-150% 0}100%{background-position:150% 0}}
.wcdbx-skel .wcdbx-thumb,.wcdbx-skel .wcdbx-meta{background:#f3f4f6}
.wcdbx-skel .wcdbx-thumb::after,.wcdbx-skel .wcdbx-meta::after{content:"";display:block;width:100%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 100%);background-size:200% 100%;animation:wcdbx-shimmer 1.1s linear infinite}
.wcdbx-skel .wcdbx-title,.wcdbx-skel .wcdbx-sub{visibility:hidden}

.wcdbx-pagination{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.wcdbx-pagination .wcdbx-btn[aria-current="page"]{opacity:.5;pointer-events:none}

.wcdbx-badge{display:inline-block;font-size:11px;line-height:1;padding:4px 6px;border-radius:999px;border:1px solid #e5e7eb;margin-left:auto}
.wcdbx-badge--pdf{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.wcdbx-badge--video{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a}
.wcdbx-badge--image{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}
.wcdbx-badge--audio{background:#f5f3ff;border-color:#ddd6fe;color:#5b21b6}
.wcdbx-badge--doc{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.wcdbx-badge--archive{background:#f1f5f9;border-color:#e2e8f0;color:#334155}
.wcdbx-badge--file{background:#f9fafb;border-color:#e5e7eb;color:#374151}

.wcdbx-badge--restricted{
  background:#fff1f2;
  border-color:#fecdd3;
  color:#9f1239;
}

.wcdbx-head { display:flex; align-items:center; margin:0 0 .5rem; }
.wcdbx-back { text-decoration:none;background-color:#95c11f;color:#fff !important; border-color:#95c11f; }
.wcdbx-back:hover { opacity:.92; }

/* ✅ Kategorien nur Buttons */
.wcdbx-cats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 12px;
}
.wcdbx-catbtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  text-decoration:none;
  color:#111827;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.wcdbx-catbtn:hover{ background:#f9fafb; }
.wcdbx-catbtn__label{ font-weight:600; font-size:14px; }

/* Empty state */
.wcdbx-empty{
  grid-column: 1 / -1;
  padding:16px;
  border:1px dashed #e5e7eb;
  border-radius:16px;
  background:#fff;
  color:#6b7280;
}

/* ✅ Preview Modal */
.wcdbx-modal{position:fixed;inset:0;display:none;z-index:99999}
.wcdbx-modal.is-open{display:block}
.wcdbx-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.wcdbx-modal__panel{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(980px,92vw);
  height:min(70vh,720px);
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
}
.wcdbx-modal__head{
  padding:12px 12px;
  border-bottom:1px solid #f1f5f9;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.wcdbx-modal__title{
  font-weight:700;
  font-size:14px;
  color:#111827;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wcdbx-modal__body{
  padding:0;
  flex:1;
  background:#0b1220;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wcdbx-preview{max-width:100%;max-height:100%}
.wcdbx-preview--img{object-fit:contain;background:#0b1220}
.wcdbx-preview--frame{width:100%;height:100%;border:0;background:#fff}

/* Scroll lock */
html.wcdbx-modal-open{overflow:hidden}

.wcdbx-catbtn.is-active{
  background:#95c11f;
  border-color:#95c11f;
  color:#fff;
}
.wcdbx-catbtn.is-active .wcdbx-catbtn__label{ color:#fff; }

/* Meta-Bereich unter Thumbnail */
.wcdbx-meta {
  padding: 10px 12px;
}

/* Titel/Badge/Sub als vertikaler Stack */
.wcdbx-meta__top {
  display: flex;
  flex-direction: column;
  align-items: center;    /* zentriert */
  text-align: center;
  gap: 6px;
}

/* Badge-Wrapper (unter dem Titel) */
.wcdbx-badgewrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Badge kleiner machen */
.wcdbx-badge {
  font-size: 11px;
  line-height: 1.1;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.wcdbx-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 14px;
}

.wcdbx-catbtn {
  display: block;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  min-width: 160px;
}

.wcdbx-catbtn__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wcdbx-catbtn__label {
  font-weight: 600;
  line-height: 1.15;
}

.wcdbx-catbtn__icon {
  font-size: 18px;
  opacity: .65;
  transform: translateY(1px);
}

.wcdbx-catbtn:hover .wcdbx-catbtn__icon {
  opacity: 1;
}

.wcdbx-catbtn__badge {
  display: inline-flex;
  margin-top: 6px;
  width: fit-content;
}

/* optional: active state */
.wcdbx-catbtn.is-active {
  outline: 2px solid rgba(0,0,0,.12);
}

.wcdbx-adminbar{
  display:flex;
  gap:10px;
  align-items:center;
  margin:0 0 12px;
}
.wcdbx-thumb-status{
  font-size:12px;
  color:#6b7280;
}