/* ============================================================
   File Browser · Theme "Cyber-Voodoo"
   Passend zum Service-Portal "Who do Voodoo".
   Ablage:  <branding-ordner>/custom.css
   Aktivieren: Settings -> Global Settings -> "Branding directory path"
               auf den Ordner setzen  (oder per CLI:
               filebrowser config set --branding.files "/abs/pfad")
               danach File Browser neu starten + Browser hart neu laden.
   Diese Datei bringt ihre eigenen Struktur-Regeln mit und funktioniert
   unabhaengig davon, ob das eingebaute Dark-Theme gewaehlt ist.
   ============================================================ */

/* ---- Optional: exakt die Portal-Schriften (externer Aufruf an
   Google Fonts). DSGVO-halber standardmaessig deaktiviert. Zum
   Aktivieren die naechste Zeile entkommentieren ODER die Fonts
   selbst hosten und hier per @font-face einbinden. ---- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Rajdhani:wght@500;600;700&display=swap');

:root {
  /* Cyber-Voodoo Palette (identisch zum Portal) */
  --vd-void:        #0a0711;
  --vd-panel:       #160f24;
  --vd-panel2:      #1b1430;
  --vd-border:      #2c1f44;
  --vd-violet:      #b56bff;   /* Loa-Violett, Primaerakzent */
  --vd-spirit:      #46e0b0;   /* Geistergruen */
  --vd-gold:        #f2c14e;   /* Ritualgold */
  --vd-blood:       #ff4d6d;   /* Signal / destruktiv */
  --vd-text:        #e9e0f7;
  --vd-muted:       #9081a6;

  /* File-Browser-Variablen ueberschreiben */
  --background:      var(--vd-void);
  --surfacePrimary:  var(--vd-panel);
  --surfaceSecondary:var(--vd-panel2);
  --divider:         var(--vd-border);
  --icon:            #c9b8e6;
  --textPrimary:     var(--vd-text);
  --textSecondary:   var(--vd-muted);

  /* eigener Akzent (FB hat dafuer keine Variable) */
  --vd-accent:       var(--vd-violet);
}

/* ---------- Grundflaechen ---------- */
html, body {
  background: var(--vd-void);
  color: var(--vd-text);
  /* Schrift: ohne externe Fonts ein technischer System-Stack.
     Mit aktiviertem @import oben ersetzt Rajdhani die erste Position. */
  font-family: 'Rajdhani', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Ritual-Glut im Hintergrund (wie im Portal) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 620px at 12% -12%, rgba(181,107,255,.16), transparent 60%),
    radial-gradient(1000px 520px at 100% 0%,  rgba(70,224,176,.09),  transparent 55%),
    radial-gradient(900px 500px at 50% 120%,  rgba(242,193,78,.06),  transparent 60%);
}
/* dezente Scanline */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(rgba(181,107,255,.045) 50%, transparent 50%);
  background-size: 100% 4px; opacity: .5;
}
#app { position: relative; z-index: 1; }

#loading { background: var(--vd-void); }
#loading .spinner div { background: var(--vd-accent); }

/* ---------- Kopfzeile / Navigation ---------- */
header {
  background: rgba(22,15,36,.85) !important;
  border-bottom: 1px solid var(--vd-border);
  backdrop-filter: blur(6px);
}
#logo, .logo img { filter: drop-shadow(0 0 10px rgba(181,107,255,.5)); }

nav {
  background: var(--vd-panel) !important;
  border-right: 1px solid var(--vd-border);
}
nav > div { border-color: var(--vd-border); }
nav .action:hover { background: var(--vd-panel2) !important; }
nav .action.active,
.dashboard #nav li.active {
  color: var(--vd-violet) !important;
  box-shadow: inset 3px 0 0 var(--vd-violet);
}

/* ---------- Aktionen / Icons ---------- */
.action { color: var(--vd-text) !important; border-radius: 4px; }
.action:hover { background: var(--vd-panel2) !important; }
.action i { color: var(--vd-icon, #c9b8e6) !important; }
.action .counter {
  background: var(--vd-violet);
  color: #0a0711;
  border-color: var(--vd-panel);
}

/* ---------- Suche ---------- */
#search #input { background: var(--vd-panel2); }
#search.active #input,
#search.active .boxes { background: var(--vd-panel); }
#search.active input { color: var(--vd-text); }
#search.active #result {
  background: var(--vd-void);
  color: var(--vd-text);
  border: 1px solid var(--vd-border);
}
#search .boxes h3 { color: var(--vd-text); }

/* ---------- Breadcrumbs ---------- */
#breadcrumbs {
  border-color: var(--vd-border);
  color: var(--vd-text) !important;
}
#breadcrumbs span { color: var(--vd-text) !important; }
#breadcrumbs a:hover span { color: var(--vd-violet) !important; }

/* ---------- Datei-/Ordnerliste ---------- */
#listing .item {
  background: var(--vd-panel);
  color: var(--vd-text);
  border: 1px solid var(--vd-border) !important;
  border-radius: 6px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
#listing .item:hover {
  border-color: var(--vd-violet) !important;
  box-shadow: 0 0 0 1px rgba(181,107,255,.35), 0 10px 30px -18px #000;
}
#listing .item i { color: var(--vd-icon, #c9b8e6); }
#listing .item .modified,
#listing .item .size { color: var(--vd-muted); }
#listing .item[aria-selected="true"] {
  background: rgba(181,107,255,.14);
  border-color: var(--vd-violet) !important;
  box-shadow: 0 0 0 1px var(--vd-violet);
}
#listing h2,
#listing.list .header span { color: var(--vd-text) !important; }
#listing.list .header i { color: var(--vd-icon, #c9b8e6); }
#listing.list .item.header,
#listing .item.header { background: var(--vd-void); }

/* ---------- Karten / Dialoge / Prompts ---------- */
.card, .dashboard {
  background: var(--vd-panel) !important;
  color: var(--vd-text);
  border: 1px solid var(--vd-border);
  border-radius: 6px;
  box-shadow: 0 30px 90px -30px #000, 0 0 0 1px rgba(181,107,255,.10);
}
.card h3, .card p, .dashboard #nav, .dashboard p label { color: var(--vd-text); }
.collapsible { border-color: var(--vd-border); }
.collapsible > label * { color: var(--vd-text); }
.dashboard #nav li { border-color: var(--vd-border); }

/* ---------- Eingabefelder ---------- */
.input, input, textarea, select {
  background: var(--vd-panel2) !important;
  color: var(--vd-text) !important;
  border: 1px solid var(--vd-border) !important;
  border-radius: 4px;
}
.input:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--vd-violet) !important;
  box-shadow: 0 0 0 1px var(--vd-violet), 0 0 16px -6px var(--vd-violet);
  outline: none;
}
::placeholder { color: var(--vd-muted); }

/* ---------- Buttons / Links / Akzent ---------- */
a { color: var(--vd-violet); }
a:hover { color: var(--vd-spirit); }

/* Text-Buttons (OK, Speichern, ...) */
.button--flat { color: var(--vd-violet) !important; }
.button--flat:hover { background: rgba(181,107,255,.12) !important; }
.button--flat.button--red { color: var(--vd-blood) !important; }
.button--flat.button--red:hover { background: rgba(255,77,109,.12) !important; }

/* Voll-Buttons (Login, primaere Aktionen) */
.button:not(.button--flat) {
  background: linear-gradient(180deg, var(--vd-violet), #8b46e0) !important;
  color: #0a0711 !important;
  border: none;
  box-shadow: 0 0 0 1px rgba(181,107,255,.35), 0 10px 26px -14px var(--vd-violet);
}
.button:not(.button--flat):hover { filter: brightness(1.08); }

/* Ladebalken oben */
#progress { background: var(--vd-violet) !important; }

/* ---------- Login ---------- */
#login {
  background:
    radial-gradient(1000px 560px at 30% -10%, rgba(181,107,255,.18), transparent 60%),
    radial-gradient(900px 520px at 90% 10%, rgba(70,224,176,.10), transparent 60%),
    var(--vd-void);
}
#login .card,
#login form {
  background: rgba(22,15,36,.9) !important;
  border: 1px solid var(--vd-border);
  box-shadow: 0 40px 120px -30px #000, 0 0 0 1px rgba(181,107,255,.18);
}
#login h1 {
  color: var(--vd-text);
  /* mit aktivierten Webfonts: Cinzel fuer den Ritual-Look */
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: .03em;
}
#login .wrong { background: var(--vd-blood); color: #0a0711; }

/* ---------- Editor / Shell ---------- */
.shell {
  background: var(--vd-panel) !important;
  color: var(--vd-text);
  border-top: 1px solid var(--vd-border);
}
.shell__result { color: var(--vd-spirit); }

/* ---------- Mobile Overlays ---------- */
#file-selection { background: var(--vd-panel2) !important; }
#file-selection span { color: var(--vd-text) !important; }
#dropdown { background: var(--vd-panel2) !important; border: 1px solid var(--vd-border); }

/* ---------- Scrollbars ---------- */
* { scrollbar-color: var(--vd-violet) var(--vd-panel); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--vd-panel); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--vd-violet), #8b46e0);
  border-radius: 6px; border: 2px solid var(--vd-panel);
}

/* ---------- Ueberschriften im Ritual-Look (mit Webfonts) ---------- */
h1, h2, h3, .card h3 {
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: .01em;
}