/* =====================================================================
   DarkPark Backstage — Centraal UI Componentensysteem
   =====================================================================
   
   ⚠️  BELANGRIJKE REGEL:
   Dit is de ENIGE bron voor herbruikbare UI-componenten.
   Bouw NOOIT zelf een nieuw component als het hier al bestaat.
   Importeer ALTIJD vanuit de centrale bestanden.

   Bij nieuwe features of pagina's:
   → Gebruik ALTIJD deze componenten.
   → Maak GEEN page-specifieke varianten.
   → Wijzigingen hier werken automatisch door in het hele systeem.

   ─────────────────────────────────────────────────────────────────────
   COMPLEET OVERZICHT — ALLE 17 CENTRALE COMPONENTEN
   ─────────────────────────────────────────────────────────────────────

   CSS (dit bestand) + JS helpers (src/shared/ui.js):
   ──────────────────────────────────────────────────
    1. Checkbox Pill         .dp-check-pill           UI.checkPill()
    2. Checkbox Pill Full    .dp-check-pill-full      UI.checkPillFull()
    3. Checkbox Group        .dp-check-group          UI.checkGroup()
    4. Modal                 .dp-modal                UI.modal() / UI.createModal() / UI.bindModalClose()
    5. Form Input            .dp-input                UI.input()
    6. Form Select           .dp-select               UI.select()
    7. Form Textarea         .dp-textarea             UI.textarea()
    8. Form Label            .dp-label                UI.label()
    9. Section Title         .dp-section-title        UI.sectionTitle()
   10. Tags Input            .dp-tags-input / .dp-tag UI.tagsInput() / UI.bindTagsInput()
   11. Badge                 .dp-badge                UI.badge() / UI.teamBadges()
   12. Action Button         .dp-action-btn           UI.actionBtn() / UI.actionGroup()
   13. Toggle Switch         .dp-toggle               UI.toggle()
   14. Status Badge          .dp-status               UI.status()
   15. Empty State           .dp-empty                UI.empty()

   Aparte modules (eigen CSS + JS):
   ──────────────────────────────────────────────────
   16. Media Picker          src/components/MediaPicker.js
       → Afbeelding/document upload met drag & drop, preview, mediabibliotheek
       → import { createMediaPicker, injectMediaPickerCSS } from '../components/MediaPicker.js';

   17. Drag Sort             src/shared/dragSort.js
       → Versleepbare lijsten met grip-handle en drop-indicator
       → import { initDragSort, injectDragSortCSS, renderDragHandle } from '../shared/dragSort.js';

   ─────────────────────────────────────────────────────────────────────
   Team checks helper:      UI.teamChecks()  (combineert checkPill + checkGroup)
   =====================================================================*/


/* ============================================
   1. CHECKBOX PILL
   Compact pill met custom checkbox.
   Gebruik: team-selectie, permissies, filters.
   ============================================ */

.dp-check-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: border-color var(--transition-fast, 150ms ease),
              background var(--transition-fast, 150ms ease);
  user-select: none;
}

.dp-check-pill:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.45);
}

.dp-check-pill input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  max-width: 16px;
  min-height: 16px;
  max-height: 16px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all var(--transition-fast, 150ms ease);
}

.dp-check-pill input[type="checkbox"]:checked {
  background: var(--color-primary, #FF0080);
  border-color: var(--color-primary, #FF0080);
}

.dp-check-pill input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6'/%3E%3C/svg%3E") center/82% no-repeat;
}

.dp-check-pill-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}


/* ============================================
   2. CHECKBOX PILL FULL-WIDTH
   Breedtevullende pill, voor standalone opties
   zoals "Downloaden toestaan".
   ============================================ */

.dp-check-pill-full {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: border-color var(--transition-fast, 150ms ease),
              background var(--transition-fast, 150ms ease);
  user-select: none;
  width: 100%;
}

.dp-check-pill-full:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.45);
}

.dp-check-pill-full input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  max-width: 18px;
  min-height: 18px;
  max-height: 18px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all var(--transition-fast, 150ms ease);
}

.dp-check-pill-full input[type="checkbox"]:checked {
  background: var(--color-primary, #FF0080);
  border-color: var(--color-primary, #FF0080);
}

.dp-check-pill-full input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6'/%3E%3C/svg%3E") center/82% no-repeat;
}


/* ============================================
   3. CHECKBOX GROUP
   Container voor meerdere check-pills.
   ============================================ */

.dp-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
}


/* ============================================
   4. MODAL
   Systeemstandaard modal met donkere achtergrond
   en roze accent border.
   ============================================ */

.dp-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

.dp-modal-content {
  position: relative;
  background: #0a0a15;
  border: 2px solid var(--color-primary, #FF0080);
  border-radius: var(--radius-lg, 12px);
  width: 90%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--spacing-xl, 2rem);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6),
              0 0 40px rgba(255, 0, 128, 0.08);
}

.dp-modal-content.dp-modal-wide {
  max-width: 640px;
}

.dp-modal-content.dp-modal-large {
  max-width: 800px;
}

.dp-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg, 1.5rem);
  padding-bottom: var(--spacing-md, 1rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dp-modal-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-family: var(--font-heading, 'Oswald', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
}

.dp-modal-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color var(--transition-fast, 150ms ease);
}

.dp-modal-close:hover {
  color: var(--color-primary, #FF0080);
}


/* ============================================
   5-7. FORM INPUTS
   Gedeelde input, select, textarea styling.
   ============================================ */

.dp-input,
.dp-select,
.dp-textarea {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md, 8px);
  color: var(--color-text, #fff);
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color var(--transition-fast, 150ms ease),
              background var(--transition-fast, 150ms ease);
}

.dp-input:focus,
.dp-select:focus,
.dp-textarea:focus {
  outline: none;
  border-color: var(--color-primary, #FF0080);
  background: rgba(255, 255, 255, 0.08);
}

.dp-input::placeholder,
.dp-textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.dp-select {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.dp-select option {
  background: #0a0a15;
  color: #fff;
}

.dp-textarea {
  resize: vertical;
  min-height: 80px;
}


/* ============================================
   8. FORM LABEL
   Standaard label boven een formulierveld.
   ============================================ */

.dp-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.dp-label .dp-label-hint {
  font-weight: 400;
  opacity: 0.7;
  text-transform: none;
}


/* ============================================
   9. SECTION TITLE
   Roze uppercase subsectie-kop in modals/panels.
   ============================================ */

.dp-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary, #FF0080);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}


/* ============================================
   10. TAGS INPUT
   Inline tag-invoer met verwijderbare pills.
   ============================================ */

.dp-tags-input {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md, 8px);
  min-height: 42px;
  cursor: text;
  transition: border-color var(--transition-fast, 150ms ease);
}

.dp-tags-input:focus-within {
  border-color: var(--color-primary, #FF0080);
}

.dp-tags-input input {
  flex: 1;
  min-width: 80px;
  background: none;
  border: none;
  outline: none;
  color: var(--color-text, #fff);
  font-size: 0.85rem;
  padding: 4px 0;
}

.dp-tags-input input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.dp-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: rgba(255, 0, 128, 0.12);
  border: 1px solid rgba(255, 0, 128, 0.25);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.dp-tag .dp-tag-remove {
  cursor: pointer;
  opacity: 0.6;
  font-size: 0.85rem;
  line-height: 1;
  transition: opacity var(--transition-fast, 150ms ease);
}

.dp-tag .dp-tag-remove:hover {
  opacity: 1;
  color: var(--color-primary, #FF0080);
}


/* ============================================
   11. BADGE
   Kleine status/info badge.
   ============================================ */

.dp-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.dp-badge-pink {
  background: rgba(255, 0, 128, 0.12);
  color: rgba(255, 0, 128, 0.85);
}

.dp-badge-green {
  background: rgba(34, 197, 94, 0.12);
  color: rgba(34, 197, 94, 0.85);
}

.dp-badge-orange {
  background: rgba(251, 191, 36, 0.12);
  color: rgba(251, 191, 36, 0.85);
}

.dp-badge-red {
  background: rgba(239, 68, 68, 0.12);
  color: rgba(239, 68, 68, 0.85);
}

.dp-badge-muted {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}


/* ============================================
   12. ACTION BUTTON
   Vierkante knop met emoji-icoon op donkere
   achtergrond. Voor bewerken, verwijderen,
   activeren/deactiveren, bekijken, etc.
   ============================================ */

.dp-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: border-color var(--transition-fast, 150ms ease),
              background var(--transition-fast, 150ms ease);
  user-select: none;
  flex-shrink: 0;
}

.dp-action-btn:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.5);
}

.dp-action-btn--active,
.dp-action-btn.active {
  border-color: var(--color-primary, #FF0080);
}

.dp-action-btn--with-count {
  width: auto;
  gap: 4px;
  padding: 0 10px;
}

.dp-action-btn-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.dp-action-btn--danger:hover {
  border-color: rgba(239, 68, 68, 0.6);
}

.dp-action-btn-group {
  display: flex;
  gap: 6px;
  align-items: center;
}


/* ============================================
   13. TOGGLE SWITCH
   Aan/uit schuifknop. Roze wanneer aan,
   donkergrijs wanneer uit.
   ============================================ */

.dp-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.dp-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.dp-toggle-track {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.dp-toggle-track::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transition: transform 0.25s ease, background 0.25s ease;
}

.dp-toggle input:checked + .dp-toggle-track {
  background: var(--color-primary, #FF0080);
  border-color: var(--color-primary, #FF0080);
}

.dp-toggle input:checked + .dp-toggle-track::before {
  transform: translateX(20px);
  background: #fff;
}

.dp-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.dp-toggle-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
}

.dp-toggle input:disabled + .dp-toggle-track {
  opacity: 0.4;
  cursor: not-allowed;
}

.dp-toggle-row:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}


/* ============================================
   14. STATUS BADGE
   Actief/Inactief indicator met gekleurde stip.
   ============================================ */

.dp-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.dp-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dp-status-active {
  background: rgba(34, 197, 94, 0.10);
  color: rgba(34, 197, 94, 0.9);
}

.dp-status-active::before {
  background: #22c55e;
}

.dp-status-inactive {
  background: rgba(239, 68, 68, 0.10);
  color: rgba(239, 68, 68, 0.9);
}

.dp-status-inactive::before {
  background: #ef4444;
}

.dp-status-pending {
  background: rgba(251, 191, 36, 0.10);
  color: rgba(251, 191, 36, 0.9);
}

.dp-status-pending::before {
  background: #fbbf24;
}


/* ============================================
   15. EMPTY STATE
   Placeholder voor lege lijsten/secties.
   ============================================ */

.dp-empty {
  text-align: center;
  padding: 32px 16px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.9rem;
}

.dp-empty-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  opacity: 0.5;
}

.dp-empty-text {
  color: rgba(255, 255, 255, 0.35);
}

.dp-empty-inline {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.85rem;
  font-style: italic;
  padding: 8px 0;
}


/* ============================================
   16. CATEGORY LABEL (PROMINENT)
   Grote, scherpe categorie-/status-/locatie-label
   voor gebruik op cards, posts, lijsten.
   Identieke stijl als de post-category in
   backstage/src/styles/dashboard.css (rule 891–930),
   maar als generiek herbruikbaar component.

   Naam dp-category gekozen om collision met de
   bestaande dp-label form-label class te voorkomen.

   Varianten:
     dp-category-pink   — accent / canon (DarkPark accent)
     dp-category-cyan   — update / lopend
     dp-category-green  — nieuws / openbaar
     dp-category-yellow — vraag / draft
     dp-category-purple — tip / extensie
     dp-category-red    — belangrijk / geheim / retconned
     dp-category-grey   — algemeen / neutraal (default)
   ============================================ */

.dp-category {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 0;
  white-space: nowrap;
  line-height: 1.2;
}

.dp-category-pink   { background: rgba(255,   0, 128, 0.20); color: #ff6bc8; }
.dp-category-cyan   { background: rgba(  0, 200, 255, 0.20); color: #00d4ff; }
.dp-category-green  { background: rgba(  0, 255, 128, 0.20); color: #00ff80; }
.dp-category-yellow { background: rgba(255, 200,   0, 0.20); color: #ffc800; }
.dp-category-purple { background: rgba(128,   0, 255, 0.20); color: #b366ff; }
.dp-category-red    { background: rgba(255,   0,   0, 0.20); color: #ff6b6b; }
.dp-category-grey   { background: rgba( 88,  94, 122, 0.30); color: var(--color-secondary, #8d92a8); }

/* Compacte variant — voor inline gebruik in lijsten of meta-panes
   waar de standaardgrootte te dominant zou worden. */
.dp-category-sm {
  font-size: 10px;
  padding: 2px 7px;
  letter-spacing: 0.06em;
}

/* Subtiele tekst-only variant — alleen tekst in een gedempte kleur,
   zonder achtergrond. Voor zachte aanduiding in lijsten. */
.dp-category-quiet {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 10px;
  padding: 2px 0;
  letter-spacing: 0.1em;
}