/* ============================================================
   LifeFolder — Kategorien verwalten (Settings) + Manage-Tab
   ============================================================ */

/* „Manage"-Link rechts in der Documents-Tab-Leiste */
.doc-tab--manage { margin-left: auto; color: var(--color-muted); gap: 6px; }
.doc-tab--manage:hover { color: var(--color-selected); }

/* Liste */
.cat-list { list-style: none; margin: 4px 0 0; padding: 0; }

.cat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 6px; border-top: 1px solid var(--color-line-soft);
  background: var(--color-surface);
}
.cat-row:first-child { border-top: none; }
.cat-row.is-dragging { opacity: .5; }
.cat-row--hidden { opacity: .55; }

.cat-row__grip { display: inline-flex; color: var(--color-muted-2); cursor: grab; flex: none; }
.cat-row__grip:active { cursor: grabbing; }

.cat-row__form { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; margin: 0; }
.cat-row__name { flex: 1; min-width: 0; height: 38px; }
.cat-row__color { flex: none; width: 38px; height: 38px; padding: 2px; border: 1px solid var(--color-line); border-radius: 9px; background: var(--color-surface); cursor: pointer; }

/* Icon-Auswahl als Popover-Grid (statt Text-Dropdown) — Auswahl = Ink (Green-Rule) */
.icon-pick { position: relative; flex: none; }
.icon-pick__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--color-line);
  background: var(--color-surface); cursor: pointer;
}
.icon-pick__btn:hover { border-color: var(--color-selected); }
.icon-pick__menu {
  position: absolute; top: 44px; left: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(6, 38px); gap: 6px; padding: 10px;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: 12px; box-shadow: var(--shadow-3);
}
/* display:grid würde das hidden-Attribut überstimmen — explizit ausblenden */
.icon-pick__menu[hidden] { display: none; }
/* In der cat-add-Zeile sitzt der Picker rechts → Popover rechtsbündig verankern,
   sonst läuft es aus Karte und Viewport (horizontaler Scroll ab ~1024px). */
.cat-add .icon-pick__menu { left: auto; right: 0; }
.icon-pick__opt {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px; border: 1px solid transparent;
  color: var(--color-muted); cursor: pointer;
}
.icon-pick__opt:hover { background: var(--color-line-soft); color: var(--color-ink); }
.icon-pick__radio { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.icon-pick__opt:has(.icon-pick__radio:checked) {
  border-color: var(--color-selected); color: var(--color-selected);
  background: var(--color-selected-soft);
}
.icon-pick__opt:has(.icon-pick__radio:focus-visible) { outline: 2px solid var(--color-selected); outline-offset: 1px; }
.cat-row__save { flex: none; }

.cat-row__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.cat-row__btnform { margin: 0; }
.cat-row__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--color-line);
  background: var(--color-surface); color: var(--color-muted); cursor: pointer; transition: color .15s, border-color .15s;
}
.cat-row__btn:hover { color: var(--color-selected); border-color: var(--color-selected); }
.cat-row__btn--danger:hover { color: var(--status-urgent-fg); border-color: var(--status-urgent-fg); }
.cat-row__badge {
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--color-muted-2); background: var(--status-valid-bg); border-radius: 6px; padding: 4px 8px;
}

/* Neue Kategorie hinzufügen */
.cat-add {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 12px 10px; border: 1px dashed var(--color-line); border-radius: 12px;
}
.cat-add__plus { display: inline-flex; color: var(--color-muted-2); flex: none; }
.cat-add__name { flex: 1; min-width: 0; height: 38px; }

@media (max-width: 640px) {
  .cat-row { flex-wrap: wrap; }
  .cat-row__form { flex-wrap: wrap; }
  .cat-row__name { flex: 1 1 100%; }
  .cat-add { flex-wrap: wrap; }
  .cat-add__name { flex: 1 1 100%; }
  /* Popover-Grid darf am schmalen Rand nicht rechts rauslaufen */
  .icon-pick__menu { grid-template-columns: repeat(5, 38px); }
}