/* Labels (Wort + Farbe) und Favoriten-Stern – Bibliothekslisten, Editoren, Plan-Auswahl.
   Palette fest (LabelColor in core/models.py): jede Füllung hat >= 4,5:1 Schriftkontrast
   (weiß, bei Gelb dunkel) – nachgerechnet, nicht geschätzt. */
.lbl{display:inline-flex;align-items:center;gap:4px;padding:2px 10px 2px 8px;border-radius:999px;
  font-size:.75rem;font-weight:600;line-height:1.5;white-space:nowrap;color:#fff;background:var(--lbl);
  vertical-align:middle;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.lbl .bi{font-size:.9em;margin:0!important;flex:0 0 auto}
/* Palette: EINE Stelle. Jede Farbklasse setzt nur --lbl; Pille, Filter-Chip, Farbwahl
   und Punkte in der Plan-Auswahl lesen sie. Gelb trägt dunkle Schrift. */
.lc-rot{--lbl:#D13438}.lc-orange{--lbl:#C2530A}.lc-gelb{--lbl:#F5B82E}.lc-gruen{--lbl:#1E7F4F}
.lc-tuerkis{--lbl:#0E7C70}.lc-blau{--lbl:#1464C8}.lc-lila{--lbl:#6B4FC8}.lc-rosa{--lbl:#B8307E}
.lc-braun{--lbl:#8A5A3B}.lc-grau{--lbl:#636772}
.lbl.lc-gelb{color:#3A2A00}
.lbl-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;align-items:center}

/* Favoriten-Stern (Knopf in der Listenzeile) */
.fav-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 auto;
  padding:0;margin:0;border:none;border-radius:999px;background:transparent;cursor:pointer;
  color:var(--muted);font-size:1.05rem;transition:color .15s ease,background .15s ease}
.fav-btn:hover{background:var(--primary-soft);color:#E0A21B}
.fav-btn .bi{margin:0!important}
.fav-btn.on{color:#E0A21B}
.fav-btn:focus-visible{outline:2px solid var(--primary);outline-offset:1px}

/* Filter in der Werkzeugleiste: Favoriten-Chip + EIN Label-Dropdown (skaliert mit beliebig
   vielen Labels – die Chip-Reihe je Label wuchs endlos nach rechts, Nutzer 27.09.2026).
   .lib-filter ist nur Datenträger (URLs); display:contents macht die Knöpfe zu direkten
   Flex-Kindern der Werkzeugleiste, damit sie dort normal mit umbrechen. */
.lib-filter{display:contents}
.lf-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 10px;border-radius:12px;
  font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;line-height:1.35;white-space:nowrap;
  background:var(--surface);color:var(--text);border:1px solid var(--line);max-width:100%}
.lf-chip .bi{margin:0!important;font-size:.95em}
.lf-chip:hover{border-color:var(--primary)}
.lf-chip[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-deep)}
[data-theme="dark"] .lf-chip[aria-pressed="true"]{color:#fff}
.lf-chip.lf-fav .bi{color:#E0A21B}
.lf-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--lbl,var(--muted));flex:0 0 auto}
.lf-drop .lf-txt{overflow:hidden;text-overflow:ellipsis;max-width:180px}
.lf-drop .lf-caret{font-size:.75em;opacity:.7}
/* Aufgeklapptes Filter-Fenster (nutzt die .lbl-pop-Hülle) */
.lf-pop .lp-search{padding:2px 2px 6px}
.lf-pop .lp-search input{width:100%;padding:6px 10px;font-size:.85rem;border-radius:10px;margin:0;box-sizing:border-box}
/* type=search steht nicht in der globalen Dark-Regel fuer Eingabefelder (base.html) */
[data-theme="dark"] .lf-pop .lp-search input{background:rgba(255,255,255,.07);color:var(--text);color-scheme:dark}
.lf-pop .lp-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-pop .lp-count{margin-left:auto;padding-left:10px;color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.lf-pop .lp-sep{border-top:1px solid var(--line);margin:6px 2px}
.lf-pop .lp-hint{font-size:.74rem;color:var(--muted);padding:6px 6px 2px}
.lf-pop .lp-foot{border-top:1px solid var(--line);margin-top:6px;padding:8px 6px 2px}
.lf-pop .lp-reset{background:none;border:none;padding:0;font:inherit;font-size:.78rem;color:var(--primary);cursor:pointer}
.lf-pop .lp-reset:hover{text-decoration:underline}

/* Label-Knopf in der Zeile + Popover zum Zuweisen */
.lbl-edit{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:.72rem;font-weight:600;line-height:1.5;color:var(--muted);background:transparent;
  border:1.5px dashed var(--line)}
.lbl-edit:hover{color:var(--primary);border-color:var(--primary)}
.lbl-edit .bi{margin:0!important}
.lbl-pop{position:fixed;z-index:var(--z-float,90);min-width:272px;max-width:300px;max-height:min(360px,70vh);
  overflow:auto;background:#fff;border:1px solid var(--glass-line);border-radius:14px;
  box-shadow:0 18px 44px rgba(38,33,92,.28);padding:8px}
[data-theme="dark"] .lbl-pop{background:#282348}
.lbl-pop[hidden]{display:none}
.lbl-pop .lp-head{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);padding:4px 6px 6px}
.lbl-pop .lp-item{display:flex;align-items:center;gap:8px;width:100%;padding:6px;border:none;background:none;
  border-radius:9px;cursor:pointer;font:inherit;color:var(--text);text-align:left}
.lbl-pop .lp-item:hover{background:var(--primary-soft)}
.lbl-pop .lp-check{width:16px;flex:0 0 auto;color:var(--primary);visibility:hidden}
.lbl-pop .lp-item[aria-checked="true"] .lp-check{visibility:visible}
.lbl-pop .lp-empty{font-size:.82rem;color:var(--muted);padding:4px 6px 8px}
.lbl-pop .lp-new{border-top:1px solid var(--line);margin-top:6px;padding:8px 4px 2px;display:flex;flex-direction:column;gap:7px}
.lbl-pop .lp-new input{padding:6px 10px;font-size:.85rem;border-radius:10px;margin:0}
.lbl-pop .lp-foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.lbl-pop .lp-foot a{font-size:.78rem}
/* 10 Farben in EINER Reihe: 10×20 + 9×5 = 245 px passen in die 272er Box */
.lbl-pop .lbl-colors{gap:5px;flex-wrap:nowrap}
.lbl-pop .lbl-colors .sw{width:20px;height:20px}

/* Farbwahl (Label anlegen/bearbeiten) */
.lbl-colors{display:flex;flex-wrap:wrap;gap:6px}
.lbl-colors label{margin:0;cursor:pointer;display:inline-flex}
.lbl-colors input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.lbl-colors .sw{width:22px;height:22px;border-radius:50%;background:var(--lbl);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
  outline:2px solid transparent;outline-offset:2px;transition:outline-color .12s ease}
.lbl-colors input:checked + .sw{outline-color:var(--primary)}
.lbl-colors input:focus-visible + .sw{outline-color:var(--primary-deep)}

/* Label-Auswahl im Formular (Gericht/Workout bearbeiten, _label_pick.html). Mit JS (.js):
   nur die gewählten Labels als Pillen mit ×, dazu „+ Label“ mit Auswahlfenster (.lp-pick).
   Ohne JS: alle Labels als Pillen zum An-/Abwählen (nicht gewählte blass). */
.lbl-pick{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;align-items:center}
.lbl-pick label{margin:0;cursor:pointer;display:inline-flex}
.lbl-pick label[hidden],.lbl-pick .lbl-add[hidden]{display:none}
.lbl-pick input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.lbl-pick .lbl{opacity:.38;transition:opacity .12s ease}
.lbl-pick input:checked + .lbl{opacity:1;box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--lbl)}
.lbl-pick input:focus-visible + .lbl{outline:2px solid var(--primary);outline-offset:2px}
.lbl-pick .lp-x{display:none}
.lbl-pick.js input:checked + .lbl{box-shadow:none}
.lbl-pick.js .lp-x{display:inline-block;font-size:.8em;opacity:.75;margin-left:2px!important}
.lbl-pick.js label:hover .lp-x{opacity:1}
/* „+ Label“ so hoch wie eine Label-Pille, damit die Reihe nicht springt */
.lbl-pick .lbl-add{font-size:.75rem;padding:1px 9px}
.lp-pick .lp-search{padding:2px 2px 6px}
.lp-pick .lp-search input{width:100%;padding:6px 10px;font-size:.85rem;border-radius:10px;margin:0;box-sizing:border-box}
[data-theme="dark"] .lp-pick .lp-search input{background:rgba(255,255,255,.07);color:var(--text);color-scheme:dark}
.lp-pick .lp-item .lbl{max-width:calc(100% - 30px)}

/* Plan-Auswahl (search_select): Stern + Label-Punkte hinter dem Namen */
.ss-opt .ss-fav{color:#E0A21B;margin-right:6px;font-size:.9em}
.ss-opt .ss-dots{display:inline-flex;gap:3px;margin-left:7px;vertical-align:middle}
.ss-opt .ss-dots i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lbl)}

/* Zeilenkopf der Bibliothekslisten: Stern · Name · Label-Knopf (_lib_row_head.html) */
.lib-list .row[data-item] .name{display:flex;align-items:center;gap:2px;min-width:0}
.lib-list .row[data-item] .name .nm{min-width:0;overflow-wrap:anywhere}
.lib-list .row[data-item] .fav-btn{margin-left:-7px}
/* Handy-Stern in fester Spalte links neben ⋯ (Zeile in dishes_list/workouts_list); am Desktop aus */
.row-star{display:none}
.fav-btn:not(.on){opacity:.5}
.fav-btn:hover,.fav-btn:focus-visible{opacity:1}
.lib-list .row .lbl-edit{border:none;padding:3px 7px;margin-left:4px;font-size:.85rem}
.lib-list .row .lbl-edit:hover{background:var(--primary-soft)}
/* Mit Maus: Label-Knopf erst beim Überfahren der Zeile (sonst 140 Etiketten-Icons);
   per Tastatur und auf Touch-Geräten immer sichtbar. */
@media (hover:hover){
  .lib-list .row .lbl-edit{opacity:0}
  .lib-list .row:hover .lbl-edit,.lib-list .row .lbl-edit:focus-visible{opacity:1}
}
.lbl-row[hidden]{display:none}

/* ⋯-Menue der Bibliothekszeilen (Handy, static/core/lib_menu.js) */
.lib-menu{min-width:210px;max-width:260px}
.lib-menu .lp-item{padding:10px 8px;gap:10px}
.lib-menu .lp-item .bi{width:18px;margin:0!important;color:var(--muted);flex:0 0 auto}
.lib-menu .lp-item.lp-danger,.lib-menu .lp-item.lp-danger .bi{color:var(--danger)}
.lib-menu .lp-item.lp-danger:hover{background:#FCEBEB}
[data-theme="dark"] .lib-menu .lp-item.lp-danger:hover{background:rgba(198,40,40,.2)}