/* Eulen Plan – Ergänzungen zu Bulma 1.0, Farben wie das Theme drei-eulen. */
:root {
  --bulma-primary-h: 212deg;
  --bulma-primary-s: 29%;
  --bulma-primary-l: 44%;
  --bulma-primary-invert-l: 100%;
  --bulma-link-invert-l: 100%;
  --bulma-link-h: 212deg;
  --bulma-link-s: 40%;
  --bulma-link-l: 42%;
  --bulma-family-primary: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
  --ep-brand: #4F6D8F;
  --ep-accent: #D69A3F;
  --ep-surface: var(--bulma-scheme-main-bis);
  --ep-line: var(--bulma-border-weak);
}
@media (prefers-color-scheme: dark) {
  :root { --bulma-link-l: 68%; --bulma-primary-l: 55%; --ep-brand: #7d9cc0; }
}

body { min-height: 100vh; display: flex; flex-direction: column; background: var(--bulma-scheme-main-bis); }
.ep-main { flex: 1; padding-top: 1.75rem; }
.ep-skip { position: absolute; left: -999px; top: 0; }
.ep-skip:focus { left: 1rem; z-index: 100; background: var(--bulma-scheme-main); padding: .5rem 1rem; }

.ep-navbar { border-bottom: 1px solid var(--ep-line); }
.ep-brand { font-weight: 700; gap: .5rem; }
.ep-navbar a.navbar-item.is-active, .ep-navbar .navbar-link.is-active, .ep-navbar a.navbar-item.is-active:hover {
  background: transparent; color: var(--bulma-link-text, var(--bulma-link)); font-weight: 600; box-shadow: inset 0 -3px 0 var(--ep-brand); }
[hidden] { display: none !important; }
.ep-navbar form.navbar-item { padding-top: .25rem; padding-bottom: .25rem; }

.ep-pagehead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.ep-pagehead .title { margin-bottom: 0 !important; }
.ep-pagehead .buttons { margin-bottom: 0; }
.ep-footer { padding: 1.5rem 1rem; }

.ep-avatar { --hue: 212; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: hsl(var(--hue) 45% 88%); color: hsl(var(--hue) 45% 28%); font-size: .75rem; font-weight: 700; flex: none; vertical-align: middle; }
.ep-avatar.is-small { width: 1.5rem; height: 1.5rem; font-size: .65rem; }
@media (prefers-color-scheme: dark) { .ep-avatar { background: hsl(var(--hue) 30% 30%); color: hsl(var(--hue) 60% 88%); } }

.ep-dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; background: var(--dot); margin-right: .4rem; flex: none; }
.ep-empty { text-align: center; padding: 2.5rem 1rem; }
.ep-empty .button { margin-top: 1rem; }
.ep-list { list-style: none; margin: 0; }
.ep-list > li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--ep-line); }
.ep-list > li:last-child { border-bottom: 0; }
.ep-break { word-break: break-all; }
.is-nowrap { white-space: nowrap; }
.is-inline { display: inline; }
.ep-secret { display: inline-block; user-select: all; white-space: pre-wrap; }
.ep-json { max-height: 28rem; overflow: auto; font-size: .8rem; }
.ep-widget { height: 100%; }
.ep-login { margin-top: 2rem; }
.ep-matrix td, .ep-matrix th { vertical-align: middle; }
.ep-matrix-group th { background: var(--bulma-scheme-main-ter); }
.ep-toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; max-width: 22rem; box-shadow: var(--bulma-shadow); }
.ep-flash { white-space: pre-line; }