/* =====================================================================
   Clapshot – Schwarz-Weiß-Theme für view.patrikthomas.de
   Neue Regeln immer GANZ UNTEN nach der letzten } anfügen.
   ===================================================================== */

/* ===== Grundlage: weiß, schwarz, ruhig ===== */
html, body, #app, #app > main > div {
  background:#fff !important; color:#000 !important;
}
body { font-family:"Helvetica Neue", Helvetica, Arial, sans-serif !important; }
* { box-shadow:none !important; border-radius:0 !important; }
*:not(canvas) { outline-color:#000 !important; }
:root { accent-color:#000; }

/* ===== Kopfzeile ===== */
[style*="Yanone"] {
  font-family:inherit !important; font-size:1.1rem !important;
  letter-spacing:.12em; font-weight:500; color:#000 !important;
}
/* nur die Kopfzeile – NICHT das Rechtsklick-Menü (das ist auch ein <nav>) */
#app > main > div nav { border-bottom:1px solid #000 !important; }
#app > main > div nav img { filter:none !important; }
/* Falls das Logo weiß ist und verschwindet, stattdessen: */
/* nav img:not(.round) { filter:invert(1) !important; } */

/* ===== Flächen: Grau-/Fixfarben → weiß ===== */
[class*="bg-gray-"],[class*="bg-slate-"],[class*="bg-zinc-"],
[class*="bg-neutral-"],[class*="bg-stone-"],[class*="bg-[#"] {
  background-color:#fff !important;
}

/* ===== Akzentflächen → schwarz mit weißer Schrift ===== */
[class*="bg-cyan-"],[class*="bg-teal-"],[class*="bg-emerald-"],[class*="bg-green-"],
[class*="bg-sky-"],[class*="bg-blue-"],[class*="bg-indigo-"],[class*="bg-amber-"] {
  background-color:#000 !important; color:#fff !important;
}
button[style*="background-color"] { background:#000 !important; color:#fff !important; }

/* ===== Text: alle Farbtöne → schwarz ===== */
[class*="text-gray-"],[class*="text-slate-"],[class*="text-zinc-"],
[class*="text-neutral-"],[class*="text-stone-"],[class*="text-amber-"],
[class*="text-yellow-"],[class*="text-orange-"],[class*="text-lime-"],
[class*="text-blue-"],[class*="text-green-"],[class*="text-cyan-"],
[class*="text-teal-"],[class*="text-emerald-"],[class*="text-sky-"],
[class*="text-indigo-"],[class*="text-[#"] {
  color:#000 !important;
}

/* ===== Linien ===== */
[class*="border-gray-"],[class*="border-slate-"],
[class*="border-zinc-"],[class*="border-neutral-"] { border-color:#000 !important; }

/* ===== Hover in hellen Bereichen ===== */
[class*="hover:text-"]:hover { color:#000 !important; }
[class*="hover:bg-"]:hover { background-color:#000 !important; color:#fff !important; }
[class*="hover:bg-"]:hover * { color:#fff !important; }

/* ===== Eingabefelder (überall: schwarze Schrift auf weiß) ===== */
input, textarea, select, [contenteditable="true"] {
  background:#fff !important; color:#000 !important;
  border:1px solid #000 !important; caret-color:#000 !important;
}
input::placeholder, textarea::placeholder { color:#777 !important; }

/* ===== Upload-Feld ===== */
.custom-dropzone { background:#f0f0f0 !important; color:#000 !important; border:0 !important; }
.custom-dropzone * { color:#000 !important; }
.custom-dropzone:hover { background:#e2e2e2 !important; }
.border-dashed { border-width:1px !important; border-color:#000 !important; }

/* ===== Kacheln (Videos, Ordner) ===== */
[style*="--basecolor"] { --basecolor:#fff !important; }
.video-list-video {
  background:#fff !important; color:#000 !important;
  border:1px solid #000 !important;
}
.video-list-video * { color:#000 !important; }
.corner-badge { background:#000 !important; color:#fff !important; }
.video-list-video .bg-black { background:#e5e5e5 !important; }
.video-list-video [class*="bg-amber-"] { background:#000 !important; }

/* ===== Kommentarleiste rechts: weiß, Karten mit Rahmen ===== */
#comment_list { background:#fff !important; border-left:1px solid #000 !important; }
#comment_list [id^="comment_card_"],
#comment_list [class*="bg-black"] {
  background:#fff !important; border:1px solid #000 !important;
}
/* Hover: hellgrau statt schwarz */
#comment_list [id^="comment_card_"]:hover,
#comment_list [class*="hover:bg-"]:hover {
  background:#f0f0f0 !important; color:#000 !important;
}
#comment_list [class*="hover:bg-"]:hover * { color:#000 !important; }
#comment_list [class*="hover:text-"]:hover { color:#555 !important; }
/* Antwort-/Bearbeitungsfelder in den Karten */
#comment_list input, #comment_list textarea, #comment_list [contenteditable="true"] {
  background:#fff !important; color:#000 !important;
  border:1px solid #000 !important; caret-color:#000 !important;
}

/* ===== Player: schwarzer Bereich um das Video ===== */
video { background:#000 !important; }
[role="main"], [role="main"] * { color:#bbb !important; }
[role="main"] [class*="bg-gray-"] { background-color:transparent !important; }
[role="main"] [class*="hover:"]:hover {
  color:#fff !important; background-color:transparent !important;
}

/* ===== Player-Steuerleiste: weiß mit schwarzen Symbolen ===== */
[role="main"] > .flex-none { background:#fff !important; border-top:1px solid #000 !important; }
[role="main"] > .flex-none,
[role="main"] > .flex-none * { color:#000 !important; }
[role="main"] > .flex-none [class*="hover:"]:hover {
  color:#777 !important; background-color:transparent !important;
}
[role="main"] > .flex-none input {
  background:#fff !important; color:#000 !important; border:1px solid #000 !important;
}
[role="main"] > .flex-none input[type="range"] { border:0 !important; accent-color:#000; }

/* Zeitleiste: schwarzer Fortschritt auf hellgrau */
[role="main"] > .flex-none progress { accent-color:#000; }
[role="main"] > .flex-none progress::-webkit-progress-bar   { background:#ddd !important; }
[role="main"] > .flex-none progress::-webkit-progress-value { background:#000 !important; }
[role="main"] > .flex-none progress::-moz-progress-bar      { background:#000 !important; }

/* ===== Restfarben: Graustufen nur für Kopf, Übersicht und Meldungen ===== */
/* (nicht Kommentare/Steuerleiste → Zeichenfarben und Kommentar-Pins bleiben farbig) */
#app > main > div nav, .organizer_page, [role="log"] {
  filter:grayscale(1) !important;
}

/* ===== Rechtsklick-Menü: weiß, schwarzer Rahmen, immer obenauf ===== */
#popup-container nav { z-index:1000 !important; filter:none !important; }
.popupmenu {
  background:#fff !important; color:#000 !important;
  border:1px solid #000 !important;
}
.popupmenu ul, .popupmenu li { background:#fff !important; }
.popupmenu button {
  background:transparent !important; color:#000 !important; cursor:pointer;
}
.popupmenu i { color:#000 !important; }
.popupmenu li:hover, .popupmenu button:hover { background:#000 !important; color:#fff !important; }
.popupmenu li:hover i, .popupmenu button:hover i { color:#fff !important; }

/* ===== Dialogfenster (z. B. Collaborative Session): weiß, schwarze Schrift ===== */
.fixed.top-0.left-0.w-full.h-full {
  background:rgba(255,255,255,.7) !important; z-index:2000 !important;
}
.fixed.top-0.left-0.w-full.h-full > div {
  background:#fff !important; color:#000 !important;
  border:1px solid #000 !important;
}
.fixed.top-0.left-0.w-full.h-full > div * { color:#000 !important; }
.fixed.top-0.left-0.w-full.h-full button {
  background:#000 !important; color:#fff !important;
  border:1px solid #000 !important; padding:.4em 1.2em !important; cursor:pointer;
}
.fixed.top-0.left-0.w-full.h-full button:hover { background:#fff !important; color:#000 !important; }