/* eop-brand.css — die EOP-Marke, einheitlich ueber ALLE Masken.
 *
 * Wunsch des Gruenders (2026-07-16): "das EOP von davor fand ich besser und
 * das haettest du fuer die anderen Masken auch uebernehmen koennen" — plus
 * frueher "das musst du grundsaetzlich einheitlich erstellen".
 */

/* ══ Plattformweite UI-Grundregeln ══════════════════════════════════════
   Textmarkierung global aus (Gruender 2026-07-19: „Textmarkieren kannst du
   ebenfalls abschalten"), EXPLIZITE Ausnahmen fuer Textfelder, Textbereiche,
   contenteditable-Zonen und [data-selectable] (Opt-in fuer Stellen, wo
   Auswaehlen sinnvoll ist, z.B. Passwoerter/Codes zum Kopieren). */
body {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
input, textarea,
[contenteditable="true"], [contenteditable=""],
[data-selectable] {
  -webkit-user-select: text !important;
     -moz-user-select: text !important;
      -ms-user-select: text !important;
          user-select: text !important;
}

/*
 *
 * "EOP" in Mokoto Glitch Mark, der Schrift unserer Wortmarke (brand.md,
 * design-system.md). Selbst gehostet, kein Fremdaufruf. Die Farbe folgt der
 * Akzentfarbe der jeweiligen Seite (--accent): Gold auf den dunklen
 * Plattform-Masken, Schwarz im hellen Note Fusion. Form einheitlich, Farbe
 * dem Kontext angepasst — so gehoert sich ein Design-System.
 *
 * EINE Datei, ueberall eingebunden: aendert sich die Marke, aendert sie sich
 * an genau einer Stelle. */

@font-face {
  font-family: "Mokoto";
  src: url("/fonts/mokoto-glitch.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* Prototyp-Masken (people/boards/users/admin): das "EOP" in der h1-Marke.
 * Kein Markup-Umbau noetig — nur die Schrift veredelt den vorhandenen Span. */
h1 a.home span {
  /* KEIN "inherit" als Fallback — das ist in einer font-family-Liste ungueltig
     und verwirft die ganze Deklaration (2026-07-16 gemessen: EOP blieb in
     Montserrat). Echte Fallback-Schriften stattdessen. */
  font-family: "Mokoto", "Montserrat", system-ui, sans-serif;
  letter-spacing: .16em;
  color: var(--accent, #cbb26b);
}
h1 a.home:hover span {
  color: var(--accent-strong, #e0d19c);
}

/* Plattform-Nav (launcher, admin-home): die Marke als Pill, "EOP" in Mokoto —
 * dieselbe Optik wie Note Fusion (Bild 2), an die Nav angepasst: KEIN
 * Zurueck-Pfeil, denn hier ist man bereits "zuhause". Ersetzt das fruehere
 * Diamant-Siegel (Wunsch des Gruenders 2026-07-16). Das .cobrand daneben
 * (Mandanten-Co-Branding) bleibt unberuehrt. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.brand svg { display: none; }   /* Diamant-Siegel entfaellt */
.brand b {
  font-family: "Mokoto", "Montserrat", system-ui, sans-serif;
  font-size: 1rem;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--accent, #cbb26b);
}

/* Note Fusion: eigene Kopfzeile (Tornus-Port), gleiche Marke als Badge-Link
 * zurueck zur Plattform. */
/* Randlose EOP-Wortmarke als Heim-Link — dieselbe Marke wie auf der
 * Startseite (assets/eop-logo.svg), keine Pille (Gruender 2026-07-19).
 * Der Text „EOP" + Zurueck-Pfeil im Markup werden ausgeblendet; das SVG
 * (self-contained, kein Font-Risiko) traegt die Marke. aria-label am <a>
 * haelt den Link zugaenglich. Gilt fuer notes.html, users.html u. a. */
.eop-home {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 14px;
  padding: 0 0 0 22px;
  border: none;
  text-decoration: none;
  /* Exakt wie der Launcher-Header (.hd .logo): 26px, Breite proportional
     (SVG-Seitenverhaeltnis ~2.98:1 -> ~78px), gleicher Gold-Glow.
     Zusatz 2026-07-19 „ist nicht als Zurueckbutton erkennbar" (Gruender):
     Chevron-Pfeil links neben dem Logo als Rueckkehr-Signal. */
  width: 100px;
  height: 26px;
  background: url("eop-logo.svg") 22px center / 78px 26px no-repeat;
  filter: drop-shadow(0 0 10px rgba(203, 178, 107, .25));
  transition: filter .15s, opacity .15s, transform .18s;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}
/* Pfeil-Indikator links */
.eop-home::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background-color: currentColor;
  color: #cbb26b;
  text-indent: 0;
  /* Chevron-left via CSS-Maske — Data-URI eines SVG-Pfeils. */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'/></svg>") center / contain no-repeat;
}
.eop-home:hover {
  filter: drop-shadow(0 0 14px rgba(203, 178, 107, .5));
  transform: translateX(-2px);
}
.eop-home:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Alle Kinder ausblenden — der Text „EOP", das .ti-Icon UND der rohe
 * <svg>-Zurueck-Pfeil (users.html); das SVG traegt die Marke. */
.eop-home > * { display: none !important; }

/* ══ EOP-Lade-Overlay (plattformweit, „Archiv") ═══════════════════════════
   Der Loewe mit umlaufendem Gold-Ring. Eine Quelle fuer ALLE Seiten. Markup
   liefert entweder die Seite selbst (Note Fusion, inline fuer sofortigen Paint)
   oder window.EOPLoader in eop-global.js (per <html data-loader>). Farben aus
   dem hellen Grundthema; dunkles Thema und reduced-motion beruecksichtigt. */
#eop-loader {
  position: fixed; inset: 0; z-index: 99999; display: grid;
  /* place-CONTENT zentriert den Zeilen-BLOCK (Loewe + Schrift zusammen) in
     der Bildschirmmitte — ohne ihn verteilen sich die Grid-Zeilen ueber die
     volle Hoehe (Loewe zu weit oben, Schrift am Boden; Gruender 2026-07-22).
     Der Kachel-Flug des Launchers zielt auf GENAU dieses Loewen-Zentrum
     (lionCenterY: Mitte minus ~20px fuer Gap + Schriftzeile). */
  grid-auto-flow: row; place-content: center; place-items: center;
  gap: 24px; background: #f8fafc;
  transition: opacity .55s ease;
}
html[data-theme="dark"] #eop-loader { background: #0b1018; }
#eop-loader.is-done { opacity: 0; pointer-events: none; }
.eopl-stage { position: relative; width: 152px; height: 152px; display: grid; place-items: center; }
.eopl-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: eopl-spin 1.15s linear infinite; }
.eopl-track { fill: none; stroke: #e6e8ec; stroke-width: 3; }
html[data-theme="dark"] .eopl-track { stroke: #1c2430; }
/* Ladebalken-Farbe: EOP-Gold als Standard, per --lion-tint umfaerbbar (der
   Launcher setzt --lion-tint = Modulfarbe VOR dem Paint, damit der Uebergang
   vom Venom-Aufprall nahtlos in den Zielseiten-Loader uebergeht.
   Gruender 2026-07-19 „das musst du zusammenfuehren"). */
.eopl-arc {
  fill: none; stroke: var(--lion-tint, #cbb26b); stroke-width: 3;
  stroke-linecap: round; stroke-dasharray: 70 220;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--lion-tint, #cbb26b) 55%, transparent));
}
/* Loewe als masked div, damit die Farbe per --lion-tint sofort beim ersten
   Paint stimmt (kein gold-Flash vor der Umfaerbung). */
.eopl-lion { width: 86px; height: 86px; opacity: .9;
  animation: eopl-breath 2.4s ease-in-out infinite;
  background: var(--lion-tint, #cbb26b);
  -webkit-mask: url('lion.svg') center / contain no-repeat;
          mask: url('lion.svg') center / contain no-repeat;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--lion-tint, #cbb26b) 30%, transparent));
}
.eopl-cap { font: 600 12.5px/1.2 "Inter", system-ui, sans-serif;
  letter-spacing: .34em; text-transform: uppercase; color: #99a1b0; }
@keyframes eopl-spin { to { transform: rotate(360deg); } }
@keyframes eopl-breath { 0%, 100% { transform: scale(1); opacity: .82; } 50% { transform: scale(1.05); opacity: 1; } }
/* Reduced-Motion (motion.md): keine fortlaufende Rotation — fast voller Bogen,
   nur sanfter Opacity-Puls (Zustand ohne Weg). */
@media (prefers-reduced-motion: reduce) {
  .eopl-ring { animation: none; }
  .eopl-arc { stroke-dasharray: 250 40; animation: eopl-pulse 1.6s ease-in-out infinite; }
  .eopl-lion { animation: none; }
}
@keyframes eopl-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ══ THEME-SWITCH (Gruender 2026-07-20): Dark (Default) vs. Grey ═════════════
   Grey-Mode wird ueber html[data-theme="light"] aktiviert; Umschaltung durch
   den globalen Toggle-Button aus eop-global.js. Persistenz: localStorage
   'eop.theme'. Dark bleibt Default (kein data-theme-Attribut).
   Grundton: #f8fafc — helles bluetoniges Grau. Schrift: #0f172a (fast schwarz).
*/
html[data-theme="light"] {
  /* Premium-Hellgrau (2026-07-21). EINE Palette fuer ALLE Tools; einzelne Masken
     duerfen Feinheiten ergaenzen, aber dieselben Token-Namen nutzen. Kuehles
     Grau statt Reinweiss, Schrift auf AA getrimmt. Akzent = dunkleres Gold,
     damit Links/Text auf Hell lesbar bleiben (Gold #cbb26b waere zu hell). */
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --card: #ffffff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --ink: #0f172a;
  --text: #0f172a;
  --text-2: #27303f;
  --text-muted: #52607a;
  --text-faint: #77839a;
  --muted: #52607a;
  --accent: #111827;      /* Schwarz statt Gold im Grey-Mode (Gruender 2026-07-21) */
  --accent-strong: #000000;
  --lion-tint: #aeb6c4;
}
html[data-theme="light"], html[data-theme="light"] body { background: var(--bg) !important; color: var(--text); }

/* ════════════════════════════════════════════════════════════════════════
   GREY-MODE — KOMPONENTEN-OVERRIDES, ZENTRAL & PRO TOOL
   ────────────────────────────────────────────────────────────────────────
   EINE Stelle fuer den Grey-Mode aller Masken (Gruender 2026-07-21: „globale
   Einstellung, damit du nach und nach alle dort hinzufuegst"). Die Token oben
   greifen bereits ueberall; hier die harten Flaechen-Overrides je Tool. Beim
   Grey-Mode-Rollout einer weiteren Maske: unten eine neue „── <Tool> ──"-
   Sektion ergaenzen, NICHT in die einzelne HTML-Datei schreiben.
   Prinzip: flaches #F8FAFC, Schwarz statt Gold (--accent), nahtlose Leiste,
   weisse Karten, AA-Kontraste. Greift NUR im Grey-Mode; Dark bleibt unberuehrt.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Atrium (atrium.html) ─────────────────────────────────────────────── */
/* Deko raus (auf Hell fehl am Platz) — inkl. atmo-vignette, sonst bleibt ein
   goldener Radial-Verlauf ueber dem flachen #F8FAFC stehen. */
html[data-theme="light"] body::before,
html[data-theme="light"] .atmo-vignette,
html[data-theme="light"] .stars, html[data-theme="light"] .stars-far,
html[data-theme="light"] .stars-near, html[data-theme="light"] .space,
html[data-theme="light"] .cosmos, html[data-theme="light"] .void,
html[data-theme="light"] .glow, html[data-theme="light"] .lion-glow { display: none !important; }

/* Kopfzeile (die „Leiste oben") — nahtlos: exakt #F8FAFC, keine Linie/Blur. */
html[data-theme="light"] .hd {
  background: #f8fafc !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] .hd .logo { filter: brightness(0) !important; }  /* EOP-Marke Schwarz statt Gold */
html[data-theme="light"] .hd .search {
  background: #ffffff !important; color: var(--text-muted) !important; border-color: var(--border) !important;
}
html[data-theme="light"] .hd .search:hover { border-color: var(--border-strong) !important; color: var(--text) !important; }
html[data-theme="light"] .hd .av {
  background: #ffffff !important;
  color: var(--text) !important; border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.06) !important;
}
html[data-theme="light"] input::placeholder { color: #9aa3b0 !important; }

/* Begruessung */
html[data-theme="light"] .hero .kicker,
html[data-theme="light"] .hero .company { color: var(--text-faint) !important; }
html[data-theme="light"] .hero .dateline { color: var(--text-muted) !important; }
html[data-theme="light"] .hero .company strong { color: var(--text-2) !important; }
html[data-theme="light"] .hero h1 {
  background: none !important; -webkit-text-fill-color: #0f172a !important; color: #0f172a !important;
}
html[data-theme="light"] .hero .avatar-xl .inner {
  background: #ffffff !important; color: var(--text) !important;
}
html[data-theme="light"] .hero .avatar-xl::before {
  background: conic-gradient(from 0deg, transparent 0deg 290deg, rgba(15, 23, 42, 0.5) 335deg, transparent 360deg) !important;
}
html[data-theme="light"] .hero .status {
  background: rgba(22, 163, 74, 0.10) !important; border-color: rgba(22, 163, 74, 0.28) !important;
}
html[data-theme="light"] .hero .status span:last-child { color: #15803d !important; }

/* Abschnittskopf / Pills */
html[data-theme="light"] .sect-head .m { color: var(--text-muted) !important; }
html[data-theme="light"] .pill-btn { color: var(--text-muted) !important; border-color: var(--border) !important; }
html[data-theme="light"] .pill-btn:hover { color: var(--accent-strong) !important; border-color: var(--accent) !important; }
html[data-theme="light"] .pill-btn.done { color: #ffffff !important; }

/* Kacheln & Ordner — folgen dem hellen Hintergrund */
html[data-theme="light"] .tile-btn {
  background: #ffffff !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 22px -18px rgba(15, 23, 42, 0.35) !important;
}
html[data-theme="light"] .tile .name { color: var(--text-2) !important; }
html[data-theme="light"] .tile .team-tag {
  background: rgba(255, 255, 255, 0.9) !important; border-color: var(--border) !important; color: var(--text-faint) !important;
}
html[data-theme="light"] .tile .badge-x, html[data-theme="light"] .tile .badge-e {
  background: #ffffff !important; border-color: var(--border-strong) !important; color: var(--text-muted) !important;
}
html[data-theme="light"] .folder-panelmini {
  background: rgba(15, 23, 42, 0.04) !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.07) !important;
}
html[data-theme="light"] .folder-panelmini .offdot { background: rgba(15, 23, 42, 0.18) !important; }

/* Menues / Kontextmenue / Dialoge */
html[data-theme="light"] .menu,
html[data-theme="light"] .tile-ctx,
html[data-theme="light"] .card {
  background: linear-gradient(180deg, #ffffff, #f6f8fb) !important;
  border-color: var(--border) !important; color: var(--text) !important;
  box-shadow: 0 24px 60px -26px rgba(15, 23, 42, 0.28) !important;
}
html[data-theme="light"] .menu .mh { border-bottom-color: var(--border) !important; }
html[data-theme="light"] .menu .mh b { color: var(--text) !important; }
html[data-theme="light"] .menu .mh small,
html[data-theme="light"] .menu .mh span,
html[data-theme="light"] .menu .mi small,
html[data-theme="light"] .menu .mlabel { color: var(--text-faint) !important; }
html[data-theme="light"] .menu .mi,
html[data-theme="light"] .tile-ctx .tci { color: var(--text-2) !important; }
html[data-theme="light"] .menu .mi:hover,
html[data-theme="light"] .tile-ctx .tci:hover,
html[data-theme="light"] .tile-ctx .tci:focus-visible { background: var(--surface-2) !important; }
html[data-theme="light"] .menu .msep { background: var(--border) !important; }
html[data-theme="light"] .card .close-x {
  background: #ffffff !important; border-color: var(--border) !important; color: var(--text-muted) !important;
}
html[data-theme="light"] .card .close-x:hover { color: var(--text) !important; border-color: var(--border-strong) !important; }

/* Ordner-Panel */
html[data-theme="light"] .pmini-btn {
  background: #ffffff !important; border-color: var(--border) !important;
}
html[data-theme="light"] .pmini .nm { color: var(--text-2) !important; }
html[data-theme="light"] .pmini .rm {
  background: #ffffff !important; border-color: var(--border-strong) !important; color: var(--text-muted) !important;
}
html[data-theme="light"] .panel-title {
  background: none !important; -webkit-text-fill-color: #0f172a !important; color: #0f172a !important;
}
html[data-theme="light"] .panel-meta { color: var(--text-faint) !important; }
html[data-theme="light"] .panel-rename { background: #ffffff !important; color: var(--text) !important; }

/* Hinweis-Banner + Drag-Geist (neutral statt Gold) */
html[data-theme="light"] .hint {
  background: rgba(15, 23, 42, 0.05) !important; border-color: var(--border) !important;
}
html[data-theme="light"] .hint span { color: var(--text-2) !important; }
html[data-theme="light"] .ghost .body { background: #ffffff !important; }

/* Sheet / „Hinzufuegen"-Dialog (Segment-Tabs, Felder, Chips, Buttons) */
html[data-theme="light"] .seg { background: var(--surface-2) !important; }
html[data-theme="light"] .seg button { color: var(--text-muted) !important; }
html[data-theme="light"] .seg button.on { background: var(--accent) !important; color: #ffffff !important; }
html[data-theme="light"] .inp, html[data-theme="light"] .sheet-card input, html[data-theme="light"] .sheet-card textarea {
  background: #ffffff !important; color: var(--text) !important; border-color: var(--border) !important;
}
html[data-theme="light"] .chip {
  background: #ffffff !important; border-color: var(--border) !important; color: var(--text) !important;
}
html[data-theme="light"] .chip:hover { background: var(--surface-2) !important; border-color: var(--accent) !important; }
html[data-theme="light"] .chip .nm { color: var(--text) !important; }
html[data-theme="light"] .chip .check { color: #ffffff !important; }
html[data-theme="light"] .lbl, html[data-theme="light"] .sheet-note { color: var(--text-faint) !important; }
html[data-theme="light"] .btn-abbr {
  background: #ffffff !important; border-color: var(--border) !important; color: var(--text) !important;
}
html[data-theme="light"] .btn-save { color: #ffffff !important; }  /* schwarzer (--accent) Button -> weisser Text */
/* ── (weitere Tools folgen: people.html, users.html, boards.html, notes.html, admin.html) ── */

/* Toggle-Button (fixed unten rechts, unauffaellig). eop-global.js baut den
   Button in jede Seite ein; hier nur das Aussehen — Icons per data-mode. */
#eop-theme-toggle {
  position: fixed; z-index: 9999;
  right: 20px; bottom: 20px;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(203, 178, 107, 0.45);
  background: rgba(17, 21, 29, 0.9);
  color: #e8ecf3;
  cursor: pointer;
  display: grid; place-items: center;
  padding: 0;
  transition: transform 0.15s, background 0.2s, border-color 0.2s, color 0.2s;
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.7);
}
#eop-theme-toggle:hover { transform: translateY(-1px); border-color: rgba(203, 178, 107, 0.75); }
#eop-theme-toggle .ic-sun { display: none; }
#eop-theme-toggle .ic-moon { display: block; }
html[data-theme="light"] #eop-theme-toggle {
  background: #ffffff;
  color: #0f172a;
  border-color: #cbb26b;
  box-shadow: 0 8px 22px -14px rgba(15, 23, 42, 0.35);
}
html[data-theme="light"] #eop-theme-toggle .ic-sun { display: block; }
html[data-theme="light"] #eop-theme-toggle .ic-moon { display: none; }