/* ============================================================
   u flow – Ansichten (S2a)
   Registerkarten oben im Board (Main · Privat · Kunde XY …).
   Aktive Ansicht = gefüllte Akzent-Pille. + legt an, × löscht die aktive.
   Landkarten lassen sich über den ⇄-Knopf im Bandkopf in eine Ansicht schieben.
   ============================================================ */

/* ---------- Board-Kopfleiste (S2b): links Ansichten, rechts Avatar ---------- */
.board-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px; /* Abstand zu den Bändern; Kopfzeile selbst sitzt auf Logo-Höhe */
}
/* rechter Einzug = wie .baender/.ansichten-leiste (46px) → Avatar bündig mit den Board-Inhalten */
.board-kopf-rechts { flex: 0 0 auto; padding: 0 46px 0 4px; display: flex; align-items: center; gap: 8px; }

/* ---------- Verständliche Schnellzugänge ---------- */
.quick-action {
  min-width: 36px; height: 36px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--karte-rand); border-radius: 999px;
  background: var(--karte-bg-fest); color: var(--text-leise);
  font: 650 12px/1 var(--font); cursor: pointer;
  box-shadow: var(--schatten-ruhe);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.quick-action:hover { color: var(--akzent); border-color: var(--akzent); background: rgba(64, 52, 38, 0.06); }
.quick-action:active { transform: scale(0.96); }
.quick-action-icon { font-size: 16px; line-height: 1; }
.quick-action-icon.finance { font-size: 14px; font-weight: 750; }
.quick-action-label { white-space: nowrap; }
body.mobil .quick-action { display: none; } /* mobil bleiben Kategorien und Finanzen im bestehenden Menü erreichbar */

/* ---------- Gemeinsame Suche und Projektfilter ---------- */
.suche { position: relative; display: flex; align-items: center; gap: 6px; }
.suche-toggle {
  position: relative;
  width: 36px; height: 36px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--karte-rand); border-radius: 50%;
  background: var(--karte-bg-fest); color: var(--text-leise);
  font-size: 17px; line-height: 1; cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.suche-toggle:hover { color: var(--akzent); border-color: var(--akzent); background: rgba(43, 42, 40, 0.08); }
.suche-toggle:active { transform: scale(0.94); }
.suche.auf .suche-toggle { color: var(--akzent); border-color: var(--akzent); }
.suche-toggle.gefiltert { color: var(--akzent); border-color: color-mix(in srgb, var(--akzent) 45%, transparent); }
.suche-filter-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 17px; height: 17px; box-sizing: border-box;
  display: inline-grid; place-items: center; padding: 0 4px;
  border: 1.5px solid var(--flaeche-1); border-radius: 999px;
  background: var(--akzent); color: #fff; font-size: 9px; font-weight: 700;
}
.suche-filter-count[hidden] { display: none; }
.suche-feld {
  width: 0; height: 36px; min-width: 0; overflow: hidden;
  display: flex; align-items: center;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--karte-bg-fest);
  opacity: 0; pointer-events: none;
  transition: width 0.2s ease, opacity 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.suche.auf .suche-feld {
  width: 330px; opacity: 1; pointer-events: auto;
  border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(43, 42, 40, 0.12);
}
.suche-input {
  flex: 1 1 auto; width: auto; min-width: 0; height: 34px; padding: 0 7px 0 13px;
  border: 0; outline: 0; border-radius: 999px 0 0 999px;
  background: transparent; color: var(--text-stark);
  font-family: inherit; font-size: 13.5px; outline: none;
}
.suche-input::placeholder { color: var(--text-leise); }
.suche-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.suche-reset {
  width: 26px; height: 26px; flex: 0 0 26px; padding: 0 0 2px;
  border: 0; border-radius: 50%; background: rgba(40, 39, 37, 0.07);
  color: var(--text-leise); font: 400 19px/1 var(--font); cursor: pointer;
}
.suche-reset:hover { color: var(--text-stark); background: rgba(40, 39, 37, 0.12); }
.suche-reset[hidden] { display: none; }
.suche .workflow-filter-btn {
  width: auto; min-width: 70px; height: 28px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  margin: 0 4px 0 6px; padding: 0 9px;
  border: 0; border-left: 1px solid var(--karte-rand); border-radius: 0 999px 999px 0;
  background: transparent; box-shadow: none;
  font-size: 11px; font-weight: 700;
}
.suche .workflow-filter-btn:hover,
.suche .workflow-filter-btn.aktiv { background: rgba(40, 39, 37, 0.06); border-color: var(--karte-rand); }
.suche .workflow-filter-count {
  position: static; min-width: 16px; height: 16px; padding: 0 3px;
  border: 0; font-size: 8.5px;
}

.suche-pop[hidden] { display: none; }
.suche-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 12000;
  width: min(420px, 78vw);
  background: var(--karte-bg-fest); border: 1px solid var(--karte-rand);
  border-radius: 14px; box-shadow: var(--schatten-drag);
  padding: 6px; max-height: 66vh; overflow-y: auto;
}
.suche-gruppe { font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-leise); padding: 8px 10px 4px; }
.suche-item {
  display: flex; align-items: baseline; gap: 9px; width: 100%;
  padding: 8px 10px; border-radius: 9px; cursor: pointer; text-align: left;
  border: none; background: none; font-family: inherit;
}
.suche-item:hover, .suche-item.aktiv { background: rgba(40, 39, 37, 0.10); }
.suche-item-kuerzel { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--akzent); }
.suche-item-titel { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text-stark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suche-item-ctx { flex: 0 0 auto; font-size: 11.5px; color: var(--text-leise); white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.suche-mehr { font-size: 11.5px; color: var(--text-leise); padding: 4px 10px 6px; }
.suche-leer { font-size: 13px; color: var(--text-mittel); padding: 12px 10px; }
.suche-fuss { font-size: 11px; color: var(--text-leise); padding: 8px 10px 4px; border-top: 1px solid var(--karte-rand); margin-top: 4px; }

@media (max-width: 1180px) {
  .quick-action { width: 36px; padding: 0; border-radius: 50%; }
  .quick-action-label { display: none; }
}

body.mobil .suche.auf .suche-feld {
  position: fixed;
  top: calc(58px + env(safe-area-inset-top));
  left: 12px; right: 12px; z-index: 11990;
  width: auto;
}
body.mobil .suche.auf .suche-pop {
  position: fixed;
  top: calc(100px + env(safe-area-inset-top));
  left: 12px; right: 12px;
  width: auto; max-height: calc(100dvh - 180px - env(safe-area-inset-top));
}

/* ---------- Leiste ---------- */
.ansichten-leiste {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 46px;  /* linker Einzug wie .baender; vertikal zentriert auf Logo-Höhe */
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- Avatar (Benutzerbild + Statuspunkt) ---------- */
.avatar-btn {
  position: relative; width: 40px; height: 40px;
  border: none; background: none; padding: 0; cursor: pointer;
  border-radius: 50%; flex: 0 0 auto;
}
.avatar-bild {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--akzent-basis); color: #fff; /* Konto-Identität: nicht von der Ansichts-Farbe getönt */
  font-family: inherit; font-weight: 700; font-size: 15px; letter-spacing: 0.3px;
  background-size: cover; background-position: center;
  box-shadow: var(--schatten-ruhe);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.avatar-btn:hover .avatar-bild { transform: scale(1.06); box-shadow: var(--schatten-hover); }
.avatar-btn:active .avatar-bild { transform: scale(0.97); }
.avatar-bild.anonym { background: var(--karte-bg-fest); color: var(--text-leise); border: 1px solid var(--karte-rand); box-shadow: none; }
.avatar-status {
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--flaeche-1); background: #c9c0b2;
}
.avatar-status.ok { background: #4d7a48; }
.avatar-status.warn { background: var(--lamp-rot); }
.avatar-status.offline { background: var(--lamp-gelb); }
.avatar-status.aus { background: #c9c0b2; }

/* ---------- Avatar-Menü (Dropdown, rechts) ---------- */
.avatar-menu {
  position: fixed; top: 60px; right: 20px; z-index: 9600;
  background: var(--karte-bg-fest); border: 1px solid var(--karte-rand);
  border-radius: 14px; box-shadow: var(--schatten-drag);
  padding: 6px; display: flex; flex-direction: column; min-width: 244px;
}
.avatar-menu[hidden] { display: none; }
.u-menu-trenner { height: 1px; background: var(--karte-rand); margin: 5px 8px; }
.u-menu-item[disabled] { color: var(--text-leise); opacity: 0.6; cursor: default; }
.u-menu-item[disabled]:hover { background: none; }
.avatar-konto { border-bottom: 1px solid var(--karte-rand); margin-bottom: 4px; padding-bottom: 4px; }
.avatar-konto:empty { display: none; }

/* ---------- Registerkarte ---------- */
.ansicht-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  background: none;
  color: var(--text-mittel);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.ansicht-tab:hover { background: rgba(40, 39, 37, 0.07); color: var(--text-stark); }
.ansicht-tab:active { transform: scale(0.97); }
.ansicht-tab.aktiv {
  background: var(--akzent);
  color: #fff;
  box-shadow: 0 3px 10px rgba(43, 42, 40, 0.32);
}
/* Beim Umsortieren: Reiter wandert live in der Reihe, hebt sich dezent ab (kein Transform → kein Ruckeln) */
.ansicht-tab.ansicht-dragging {
  z-index: 30;
  cursor: grabbing;
  opacity: 0.92;
  box-shadow: var(--schatten-drag);
  transform: none; /* überschreibt :active scale → stabile Trefferfläche beim Ziehen */
  transition: none;
}
/* Farb-Punkt am Reiter (öffnet den Farbwähler; zeigt die Ansichts-Farbe) */
.ansicht-farbdot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; cursor: pointer;
  background: transparent; border: 1.5px solid var(--karte-rand); margin-right: 1px;
  transition: transform 0.12s ease;
}
.ansicht-farbdot:hover { transform: scale(1.25); }
.ansicht-farbdot.gesetzt { border-color: transparent; }
.ansicht-tab.aktiv .ansicht-farbdot { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.6); border-color: transparent; }

/* Farbwähler-Popover (Swatch-Raster) */
.farb-pop {
  position: fixed; z-index: 12500;
  display: grid; grid-template-columns: repeat(6, 26px); gap: 9px;
  padding: 12px; background: var(--karte-bg-fest);
  border: 1px solid var(--karte-rand); border-radius: 14px; box-shadow: var(--schatten-drag);
}
.farb-swatch {
  width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  outline: 1px solid var(--karte-rand); outline-offset: -1px; transition: transform 0.1s ease;
}
.farb-swatch:hover { transform: scale(1.12); }
.farb-swatch.aktiv { box-shadow: 0 0 0 2px var(--karte-bg-fest), 0 0 0 4px var(--text-stark); }
.farb-swatch.farb-keine { position: relative; background: var(--karte-bg-fest); }
.farb-swatch.farb-keine::after { content: "×"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-leise); font-size: 14px; }

.ansicht-name { outline: none; }
.ansicht-name.editing {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-stark);
  border-radius: 6px;
  padding: 0 4px;
  box-shadow: 0 0 0 2px var(--akzent);
}

/* Zähler-Badge (Anzahl Landkarten in der Ansicht) */
.ansicht-zahl {
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-leise);
  background: rgba(40, 39, 37, 0.12);
}
.ansicht-tab.aktiv .ansicht-zahl { color: #fff; background: rgba(255, 255, 255, 0.24); }

/* ---------- ↗ Aktive Ansicht teilen (Knopf zwischen + und ×, einheitlich rund) ---------- */
.ansicht-teilen-btn {
  position: relative;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--karte-rand);
  background: none;
  color: var(--text-leise);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  margin-left: 2px;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.ansicht-teilen-btn:hover { color: var(--akzent); border-color: var(--akzent); background: rgba(43, 42, 40, 0.08); }
.ansicht-teilen-btn:active { transform: scale(0.92); }
.ansicht-teilen-btn.ist-geteilt { color: #fff; background: var(--akzent); border-style: solid; border-color: var(--akzent); }
.ansicht-teilen-zahl {
  position: absolute; top: -4px; right: -4px;
  min-width: 15px; height: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 3px; border-radius: 999px;
  font-size: 9px; font-weight: 700;
  background: var(--akzent); color: #fff; border: 1.5px solid var(--flaeche-1);
}
.ansicht-teilen-btn.ist-geteilt .ansicht-teilen-zahl { background: #fff; color: var(--akzent); border-color: var(--akzent); }

/* ---------- + neue / × löschen ---------- */
.ansicht-add, .ansicht-del {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--karte-rand);
  background: none;
  color: var(--text-leise);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.ansicht-add:hover { color: var(--akzent); border-color: var(--akzent); background: rgba(43, 42, 40, 0.08); }
.ansicht-add:active { transform: scale(0.92); }
.ansicht-del { border-style: solid; margin-left: 2px; font-size: 15px; }
.ansicht-del:hover { color: #fff; background: var(--lamp-rot); border-color: var(--lamp-rot); }

/* ---------- Bandkopf: „In Ansicht verschieben“-Knopf ---------- */
.band-ansicht-btn {
  border: none;
  background: none;
  color: var(--text-leise);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 8px;
  opacity: 0.5;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.band:hover .band-ansicht-btn { opacity: 0.8; }
.band-ansicht-btn:hover { color: var(--text-stark); opacity: 1; background: rgba(40, 39, 37, 0.06); }
/* Dunkle Landkarten: Icon hell (analog band-toggle/band-add) */
.band.dunkel .band-ansicht-btn { color: rgba(255, 255, 255, 0.6); }
.band.dunkel .band-ansicht-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.10); }

/* Popover mit der Ansichten-Liste */
.band-ansichten[hidden] { display: none; } /* sonst überschreibt display:flex das hidden-Attribut */
.band-ansichten {
  position: absolute;
  top: calc(100% - 2px);
  right: 12px;
  z-index: 1000;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--karte-bg-fest);
  border: 1px solid var(--karte-rand);
  border-radius: 14px;
  box-shadow: var(--schatten-drag);
}
.band-ansichten-titel {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-leise);
  padding: 2px 8px 5px;
}
.band-ansicht-pick, .band-ansicht-neu {
  text-align: left;
  border: none;
  background: none;
  color: var(--text-mittel);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 9px;
  transition: color 0.12s ease, background 0.12s ease;
}
.band-ansicht-pick:hover, .band-ansicht-neu:hover { background: rgba(40, 39, 37, 0.08); color: var(--text-stark); }
.band-ansicht-pick.aktiv { color: var(--akzent); font-weight: 700; cursor: default; }
.band-ansicht-pick.aktiv::after { content: " ✓"; }
.band-ansicht-neu {
  margin-top: 4px;
  border-top: 1px solid var(--karte-rand);
  border-radius: 0 0 9px 9px;
  color: var(--akzent);
  font-weight: 600;
}