/* === ModulHub dropzone – fil-opplasting med drag-and-drop === */
/* Bruk overalt hvor bruker skal kunne dra inn en fil eller klikke for aa velge. */
/*
   Struktur:
     <div class="dropzone" data-state="idle">
       <input type="file" hidden />
       <span class="dropzone-text">Dra inn fil eller klikk</span>
     </div>

   Tilstander via data-state-attributtet:
     idle      — venter paa fil
     hover     — fil dras over (lyseroransje markering)
     loading   — fil prosesseres (spinner)
     success   — fil prosessert OK (groen markering)
     error     — feil ved prosessering (roed markering)

   JS-hjelper: shared/js/dropzone.js (ModulHubDropzone.init).
   Events ut: 'file-loaded' { file, dataUrl }, 'file-error' { message }.
*/

.dropzone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  text-align: center;
  cursor: pointer;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}
.dropzone:hover { background: var(--surface); border-color: var(--primary); color: var(--text); }
.dropzone[data-state="hover"] {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
}
.dropzone[data-state="loading"] {
  background: var(--surface-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
  cursor: wait;
}
.dropzone[data-state="success"] {
  background: #e8f5e9;
  border-color: #2e7d32;
  border-style: solid;
  color: #1b5e20;
}
.dropzone[data-state="error"] {
  background: #fdecea;
  border-color: var(--danger);
  border-style: solid;
  color: var(--danger);
}
.dropzone-text { display: inline-block; }