/* Link Portal — Custom Styles */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0f172a;
  --surface:   #1e293b;
  --surface2:  #334155;
  --border:    #475569;
  --accent:    #6366f1;
  --accent-h:  #818cf8;
  --text:      #f1f5f9;
  --muted:     #94a3b8;
  --success:   #22c55e;
  --error:     #ef4444;
  --warning:   #f59e0b;
  --public-bg: rgba(34,197,94,0.12);
  --pub-text:  #4ade80;
  --rest-bg:   rgba(245,158,11,0.12);
  --rest-text: #fbbf24;
  --radius:    10px;
}

/* Light theme */
:root[data-theme="light"] {
  --bg:        #f8fafc;
  --surface:   #ffffff;
  --surface2:  #f1f5f9;
  --border:    #e2e8f0;
  --accent:    #4f46e5;
  --accent-h:  #4338ca;
  --text:      #0f172a;
  --muted:     #475569;
  --success:   #16a34a;
  --error:     #dc2626;
  --warning:   #d97706;
  --public-bg: rgba(22,163,74,0.10);
  --pub-text:  #15803d;
  --rest-bg:   rgba(217,119,6,0.10);
  --rest-text: #b45309;
}

html, body { overflow-x: hidden; }
body { background: var(--bg); color: var(--text); font-family: system-ui,-apple-system,sans-serif; min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-h); }
code { font-family: monospace; font-size: 0.85em; background: var(--surface2); padding: 0.1em 0.4em; border-radius: 4px; }

/* ── Layout ────────────────────────────────────────────────────────────── */
.navbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.1rem; color: var(--text); }
.navbar-brand svg { flex-shrink: 0; }
.navbar-actions { display: flex; align-items: center; gap: 0.75rem; }
.nav-user { font-size: 0.875rem; color: var(--muted); }
.nav-link-active { border-color: var(--accent) !important; color: var(--accent-h) !important; }

/* Admin-Navigation */
.navbar-admin {
  height: auto;
  min-height: 56px;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 1rem;
}
.navbar-admin .navbar-brand { flex-shrink: 0; }
.admin-nav-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
}
.admin-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}
.admin-nav-link:hover { color: var(--text); background: var(--surface2); }
.admin-nav-link.is-active {
  color: var(--accent-h);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.admin-nav-dropdown { position: relative; }
.admin-nav-link-summary {
  list-style: none;
  cursor: pointer;
}
.admin-nav-link-summary::-webkit-details-marker { display: none; }
.admin-nav-link-summary::after {
  content: ' ▾';
  font-size: 0.7em;
  opacity: 0.75;
}
.admin-nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  min-width: 12rem;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.admin-nav-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.65rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 0.8125rem;
  text-decoration: none;
  cursor: pointer;
}
.admin-nav-dropdown-item:hover,
.admin-nav-dropdown-item.is-active {
  background: var(--surface2);
  color: var(--accent-h);
}
.nav-more-menu { position: relative; }
.nav-more-trigger { list-style: none; cursor: pointer; }
.nav-more-trigger::-webkit-details-marker { display: none; }
.nav-more-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 200;
  min-width: 11rem;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.nav-more-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.65rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 0.8125rem;
  text-decoration: none;
  cursor: pointer;
}
.nav-more-item:hover { background: var(--surface2); color: var(--accent-h); }

.app-notif-btn { position: relative; justify-content: center; min-width: 2.25rem; padding-left: 0.45rem; padding-right: 0.45rem; }
.app-notif-glyph { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.app-notif-glyph svg { display: block; opacity: 0.92; }
.app-notif-badge {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.28rem;
  font-size: 0.65rem;
  line-height: 1rem;
  text-align: center;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-weight: 600;
}
.app-notif-badge.hidden { display: none !important; }
.app-notif-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: min(360px, calc(100vw - 2rem));
  max-height: min(70vh, 420px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  z-index: 200;
}
.app-notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.app-notif-panel-head > .fw-600 {
  flex: 1 1 auto;
  min-width: 0;
}
.app-notif-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem 0.65rem;
  flex-shrink: 0;
}
.app-notif-panel-actions .app-notif-mark-all,
.app-notif-panel-actions .app-notif-delete-all {
  flex-shrink: 0;
  white-space: nowrap;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.app-notif-delete-all {
  color: var(--error);
}
.app-notif-delete-all:hover {
  color: color-mix(in srgb, var(--error) 88%, var(--text) 12%);
}
.app-notif-item {
  display: block;
  padding: 0.55rem 0.75rem;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.app-notif-item:hover { background: var(--surface2); }
.app-notif-item--unread {
  border-left: 3px solid var(--accent);
  padding-left: calc(0.75rem - 3px);
}
.app-notif-body {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.app-notif-empty { padding: 0.65rem 0.75rem; }

/* Mobil: Dropdown als Bottom-Sheet — passt garantiert zur Viewportbreite */
@media (max-width: 560px) {
  .app-notif-wrap {
    z-index: 1;
  }
  .app-notif-panel:not(.hidden) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: none;
    max-height: 85vh;
    max-height: min(85vh, calc(100dvh - 3rem));
    margin: 0;
    border-radius: 14px 14px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45);
    z-index: 5000;
    padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }
  .app-notif-panel-head {
    padding: 0.65rem 0.85rem;
    flex-wrap: nowrap;
  }
  .app-notif-item {
    padding: 0.7rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.4;
    min-height: 2.75rem;
    box-sizing: border-box;
  }
  .app-notif-body {
    font-size: 0.8rem;
  }
}

.container { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; }

/* Admin: volle Displaybreite (Benutzer & Gruppen, Betreuer-Kontakte, Wunschliste) */
.container.admin-full-bleed {
  max-width: none !important;
  width: 100%;
  box-sizing: border-box;
  padding-left: clamp(0.75rem, 2vw, 2rem);
  padding-right: clamp(0.75rem, 2vw, 2rem);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1rem; border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 500; cursor: pointer;
  border: 1px solid transparent; transition: all 0.15s; text-decoration: none;
  white-space: nowrap;
}
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
.btn-lg { padding: 0.7rem 1.4rem; font-size: 1rem; }
.btn-full { width: 100%; justify-content: center; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-h); border-color: var(--accent-h); color: #fff; }
.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover { background: var(--surface2); color: var(--text); }
.btn-link {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
  text-decoration: underline;
  padding: 0;
  font: inherit;
}
.btn-danger { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); color: var(--error); }
.btn-danger:hover { background: rgba(239,68,68,0.25); }
.btn-success { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.3); color: var(--success); }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--muted); margin-bottom: 0.35rem; }
.hint { font-size: 0.78rem; color: var(--muted); margin-top: 0.3rem; }

/* ── Inputs (clean, consistent height) ───────────────────────────────────── */
:root { --control-h: 42px; }

input[type=text], input[type=url], input[type=password], input[type=number],
input[type=search], input[type=datetime-local],
select, textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent 35%);
  color: var(--text);
  border-radius: 12px;
  padding: 0.6rem 0.95rem;
  font-size: 0.95rem;
  outline: none;
  box-shadow: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  font-family: inherit;
}
input[type=text], input[type=url], input[type=password], input[type=number],
input[type=search], input[type=datetime-local],
select {
  height: var(--control-h);
}
textarea { min-height: 96px; padding-top: 0.7rem; padding-bottom: 0.7rem; }

input:hover, select:hover, textarea:hover {
  border-color: color-mix(in srgb, var(--border) 70%, transparent 30%);
  background: color-mix(in srgb, var(--bg) 88%, var(--surface) 12%);
}
input:focus, select:focus, textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border) 30%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent 78%);
  background: color-mix(in srgb, var(--bg) 84%, var(--surface) 16%);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent 30%); }

/* datetime-local styling */
input[type=datetime-local] { letter-spacing: 0.01em; }

/* search inputs */
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media(max-width:520px){ .row2 { grid-template-columns: 1fr; } }

/* ── Mobile header cleanup ──────────────────────────────────────────────── */
@media (max-width: 560px) {
  .navbar { padding: .35rem 0.9rem; height: auto; min-height: 56px; flex-wrap: wrap; gap: .5rem; }
  .navbar-admin .admin-nav-primary { order: 3; width: 100%; }
  .navbar-actions { gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
  .nav-user { display: none; }
  .navbar-brand { gap: 0.5rem; font-size: 1rem; }
  .navbar-brand .brand-text { display: none; }
}

/* Mobile: keep weather + dashboard note titles consistent with link titles */
@media (max-width: 560px) {
  .weather-title{ font-size: 0.92rem; }
  .dash-note-title{ font-size: 0.92rem; }
}

@media (max-width: 560px) { .navbar-brand { max-width: none; } }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.card-sm { padding: 1rem; }

/* Link cards grid */
.links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 721px) {
  .links-grid .link-card--tile-span-2 {
    grid-column: span 2;
  }
}
@media (max-width: 720px) {
  .links-grid .link-card--tile-span-2 {
    grid-column: span 1;
  }
}

.link-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s, background 0.2s, opacity 0.2s;
}
.link-card:hover { border-color: var(--accent); transform: translateY(-2px); }

/* „Dezent“: klar zurückgenommen — heller dunkler Hintergrund, gestrichelter Rand, kein Hover-Lift */
.link-card--variant-neutral {
  background: color-mix(in srgb, var(--bg) 40%, var(--surface) 60%);
  border: 1px dashed color-mix(in srgb, var(--muted) 45%, var(--border) 55%);
  opacity: 0.9;
}
.link-card--variant-neutral .link-card-title {
  font-weight: 500;
  color: color-mix(in srgb, var(--text) 78%, var(--muted) 22%);
}
.link-card--variant-neutral:hover {
  border-color: var(--muted);
  border-style: dashed;
  transform: none;
  opacity: 1;
}

/* „Hervorgehoben“: kräftiger Akzent, Ring, mehr Tiefe — unabhängig vom Theme erkennbar */
.link-card--variant-emphasized {
  background: color-mix(in srgb, var(--surface) 75%, var(--accent) 25%);
  border: 2px solid color-mix(in srgb, var(--accent) 72%, var(--border) 28%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent 65%),
    0 10px 28px rgba(0, 0, 0, 0.28);
}
.link-card--variant-emphasized .link-card-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.link-card--variant-emphasized:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent 55%),
    0 14px 36px rgba(0, 0, 0, 0.35);
}

/* Hell: kein „überlagertes“ Blau — Karte bleibt hell, Akzent nur Rand + sauberer Schatten */
:root[data-theme="light"] .link-card--variant-emphasized {
  background: var(--surface);
  border-width: 2px;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border) 45%);
  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.07),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent 82%);
}
:root[data-theme="light"] .link-card--variant-emphasized:hover {
  border-color: var(--accent);
  box-shadow:
    0 8px 22px rgba(15, 23, 42, 0.1),
    0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent 76%);
}

/* Wishlist: Standard = Akzent-Rand; Varianten überschreiben gezielt (höhere Spezifität) */
.link-card.link-card--wishlist:not(.link-card--variant-neutral):not(.link-card--variant-emphasized) {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border) 52%);
  border-style: solid;
}
.link-card.link-card--wishlist:not(.link-card--variant-neutral):not(.link-card--variant-emphasized):hover {
  border-color: var(--accent);
}

.link-card.link-card--wishlist.link-card--variant-neutral {
  border-color: color-mix(in srgb, var(--muted) 50%, var(--border) 50%);
}
.link-card.link-card--wishlist.link-card--variant-neutral:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--muted) 65%);
}

.link-card.link-card--wishlist.link-card--variant-emphasized {
  background: color-mix(in srgb, var(--surface) 68%, var(--accent) 32%);
  border-color: color-mix(in srgb, var(--accent) 80%, var(--border) 20%);
}
:root[data-theme="light"] .link-card.link-card--wishlist.link-card--variant-emphasized {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border) 30%);
  box-shadow:
    0 4px 14px rgba(79, 70, 229, 0.08),
    0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent 80%);
}
:root[data-theme="light"] .link-card.link-card--wishlist.link-card--variant-emphasized:hover {
  border-color: var(--accent);
  box-shadow:
    0 8px 22px rgba(79, 70, 229, 0.12),
    0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent 72%);
}

/* Unterseiten-Kachel (Dashboard): leichter Bezug ohne Varianten-Klassen */
.link-card.link-card--subpage:not(.link-card--variant-neutral):not(.link-card--variant-emphasized) {
  border-left: 3px solid color-mix(in srgb, var(--muted) 45%, var(--border) 55%);
}

.link-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.link-card-title { font-weight: 600; font-size: 1rem; color: var(--text); }
.link-card-url { font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-card-desc { font-size: 0.875rem; color: var(--muted); flex: 1; }
.link-card-footer { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; }
.link-card-open { margin-left: auto; }

/* Mobile: 2-up compact cards */
@media (max-width: 560px) {
  .links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin-top: 1rem; }
  .link-card { padding: 0.85rem; gap: 0.45rem; }
  .link-card-title { font-size: 0.92rem; line-height: 1.15; }
  .link-card-url { font-size: 0.72rem; }
  .link-card-desc { font-size: 0.78rem; }
  .badge { font-size: 0.68rem; padding: 0.12rem 0.45rem; }
  /* Compact visibility badge: color pill only (no text) */
  .link-card-header .badge-public,
  .link-card-header .badge-restricted {
    padding: 0;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    font-size: 0;
    line-height: 0;
    display: inline-block;
  }
  .link-card-footer { gap: 0.35rem; }
  .link-card-open { margin-left: 0; width: 100%; justify-content: center; }
}

@media (max-width: 360px) {
  .links-grid { grid-template-columns: 1fr; }
}

/* Ferienlager „Meine Einsätze“: Kachel-Raster Desktop, eine Spalte mobil (#camp-dash-einsatz) */
.camp-dash-panel-title {
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
.camp-dash-panel-hint {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
}
.camp-dash-panel--waitlist {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.camp-dash-season-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.camp-dash-assign-blocks,
.camp-dash-waitlist-blocks,
.camp-dash-open-seasons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.camp-dash-open-seasons {
  gap: 0.65rem;
  margin-top: 0.4rem;
}
.camp-dash-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
  align-items: stretch;
}
.camp-dash-row {
  padding: 0.85rem 1rem;
  gap: 0.4rem;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.camp-dash-row .link-card-title {
  font-size: 1rem;
  line-height: 1.25;
}
.camp-dash-row-meta {
  font-size: 0.85rem;
  line-height: 1.4;
  margin-top: 0.2rem;
  color: var(--muted);
}
.camp-dash-row-meta.camp-dash-row-rl {
  margin-top: 0.15rem;
  font-size: 0.82rem;
}
.camp-dash-row-header {
  align-items: center;
  gap: 0.65rem;
}
.camp-dash-row-main {
  flex: 1;
  min-width: 0;
}
.camp-dash-row .badge {
  flex-shrink: 0;
  max-width: 11rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.camp-dash-role-badge .camp-dash-role-short {
  display: none;
}
.camp-dash-row-footer {
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  width: 100%;
}
.camp-dash-row-footer .camp-dash-apply-btn {
  width: auto;
  min-width: 9rem;
}
.camp-dash-row--open {
  border-left: 3px solid color-mix(in srgb, var(--accent) 45%, transparent 55%);
}
a.link-card.camp-dash-row--link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}
a.link-card.camp-dash-row--link:hover {
  color: inherit;
}
a.link-card.camp-dash-row--link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.camp-dash-leave-inline {
  margin: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  align-self: flex-start;
}
.camp-dash-row-footer .camp-dash-leave-inline {
  text-align: left;
}
@media (max-width: 720px) {
  .camp-dash-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }
}
@media (max-width: 560px) {
  .camp-dash-list {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .camp-dash-role-badge .camp-dash-role-long {
    display: none;
  }
  .camp-dash-role-badge .camp-dash-role-short {
    display: inline;
  }
  .camp-dash-role-badge {
    max-width: 2.25rem;
    min-width: 1.75rem;
    justify-content: center;
    padding: 0.12rem 0.3rem;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
  }
  .camp-dash-row {
    padding: 0.75rem 0.85rem;
  }
  .camp-dash-row .link-card-title {
    font-size: 0.92rem;
  }
  .camp-dash-row-meta {
    font-size: 0.78rem;
  }
  .camp-dash-row-footer .btn {
    font-size: 0.78rem;
    padding: 0.38rem 0.5rem;
  }
  .camp-dash-panel--waitlist {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
  }
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.15rem 0.5rem; border-radius: 99px; font-size: 0.72rem; font-weight: 600;
}
.badge-public { background: var(--public-bg); color: var(--pub-text); }
.badge-restricted { background: var(--rest-bg); color: var(--rest-text); }
.badge-tag { background: var(--surface2); color: var(--muted); font-size: 0.7rem; border-radius: 4px; }
.badge-success { background: color-mix(in srgb, var(--success) 16%, transparent 84%); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent 65%); }
.badge-error { background: color-mix(in srgb, var(--error) 16%, transparent 84%); color: var(--error); border: 1px solid color-mix(in srgb, var(--error) 35%, transparent 65%); }
@media (max-width: 900px) {
  .link-card--wishlist .badge-wl-status {
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    padding: 0;
    width: 0.55rem;
    height: 0.55rem;
    min-width: 0.55rem;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .link-card--wishlist .badge-wl-status.badge-success {
    color: transparent;
    background: var(--success);
    border: none;
  }
  .link-card--wishlist .badge-wl-status.badge-error {
    color: transparent;
    background: var(--error);
    border: none;
  }
}

/* ── Collapsible sections ──────────────────────────────────────────────── */
.lp-details{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
}
.lp-details > summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: .7rem .9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.lp-details > summary::-webkit-details-marker{ display:none; }
.lp-details > summary::after{
  content: "▾";
  opacity: .75;
  transform: rotate(-90deg);
  transition: transform .15s ease;
}
.lp-details[open] > summary::after{ transform: rotate(0deg); }
.lp-details-body{
  padding: .85rem .9rem .95rem;
  border-top: 1px solid var(--border);
}

/* ── Search bar ─────────────────────────────────────────────────────────── */
.search-bar { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.search-bar input { flex: 1; min-width: 180px; }
.search-bar select { width: auto; }

/* Admin search polish */
.search-input { position: relative; flex: 1; min-width: 220px; }
.search-input input { padding-right: 2.2rem; }
.search-clear {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
}

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header { margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.4rem; font-weight: 700; }
.page-header p { color: var(--muted); font-size: 0.9rem; margin-top: 0.25rem; }

/* ── Table ──────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin-top: 1rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th { text-align: left; padding: 0.6rem 0.9rem; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,0.03); }
.td-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.drag-handle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:8px;
  color: var(--muted);
  cursor: grab;
  user-select:none;
}
tr[draggable="true"]{ cursor: grab; }
tr.dragging{ opacity:.55; }

/* ── Wishlist report dashboard ───────────────────────────────────────────── */
.wr-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.wr-view-tab.is-active {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--text);
}
.wr-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  align-items: start;
}
.wr-dash-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}
.wr-dash-widget--span-2 {
  grid-column: span 2;
}
.wr-dash-widget--span-3 {
  grid-column: span 3;
}
.wr-dash-widget--span-4 {
  grid-column: span 4;
}
.wr-dash-widget-head {
  padding: 0.75rem 0.85rem 0.65rem;
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.wr-dash-widget--collapsed .wr-dash-widget-head {
  border-bottom-color: transparent;
}
.wr-dash-collapse-trigger {
  border: none;
  background: transparent;
  padding: 0.35rem;
  margin: -0.15rem 0;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border-radius: 6px;
  line-height: 0;
}
.wr-dash-collapse-trigger:hover {
  background: var(--surface2);
  color: var(--text);
}
.wr-dash-collapse-chevron {
  display: block;
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  margin-top: -0.12rem;
}
.wr-dash-widget--collapsed .wr-dash-collapse-chevron {
  transform: rotate(-45deg);
  margin-top: 0;
  margin-left: 0.06rem;
}
.wr-dash-widget-head-main[data-wr-widget-collapse-head] {
  cursor: pointer;
}
.wr-dash-widget--collapsed .wr-dash-widget-body {
  display: none;
}
.wr-dash-widget-head-top {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.wr-dash-widget-toolbar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.wr-dash-widget-order {
  display: flex;
  gap: 0.2rem;
}
.wr-dash-order-btn {
  min-width: 1.85rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  font-size: 0.85rem;
  line-height: 1.1;
}
.wr-dash-widget-head-main {
  flex: 1;
  min-width: 0;
}
.wr-dash-widget-title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wr-dash-widget-meta {
  color: var(--muted);
  font-size: 0.76rem;
  margin-top: 0.2rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wr-dash-menu {
  position: relative;
  flex-shrink: 0;
}
.wr-dash-menu > summary {
  list-style: none;
  cursor: pointer;
}
.wr-dash-menu > summary::-webkit-details-marker {
  display: none;
}
.wr-dash-menu-trigger {
  min-width: 2rem;
  padding-left: 0.55rem;
  padding-right: 0.55rem;
  font-size: 1rem;
  line-height: 1;
}
.wr-dash-menu-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 20;
  min-width: 11.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.wr-dash-menu-panel .btn {
  justify-content: flex-start;
  width: 100%;
  border: none;
  background: transparent;
}
.wr-dash-menu-panel .btn:hover {
  background: var(--surface2);
}
.wr-dash-menu-panel .btn-danger-text {
  color: var(--error);
}
.wr-dash-widget-body {
  padding: 0.65rem 0.85rem 0.85rem;
  flex: 1;
  overflow: visible;
}
.wr-dash-counter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.6rem;
}
.wr-dash-counter-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
}
.wr-dash-counter-item--drill {
  cursor: pointer;
}
.wr-dash-counter-item--drill:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.wr-dash-counter-val {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
}
.wr-dash-counter-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.15rem;
  word-break: break-word;
}
.wr-dash-group {
  margin-bottom: 0.85rem;
}
.wr-dash-group:last-child {
  margin-bottom: 0;
}
.wr-dash-group-title {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.wr-dash-group-title--drill {
  cursor: pointer;
}
.wr-dash-group-title--drill:hover {
  color: var(--accent-h);
}
.wr-dash-group-count {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.78rem;
}
.wr-dash-user-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
}
.wr-dash-user-list li {
  margin: 0.15rem 0;
}
.wr-dash-todo-list {
  list-style: none;
  padding-left: 0;
}
.wr-dash-todo-item {
  margin: 0.25rem 0;
}
.wr-dash-todo-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  line-height: 1.35;
}
.wr-dash-switch {
  position: relative;
  display: inline-block;
  width: 2.05rem;
  height: 1.15rem;
  flex-shrink: 0;
}
.wr-dash-switch input.wr-dash-todo-check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.wr-dash-switch-slider {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--muted) 28%, var(--border));
  border-radius: 999px;
  transition: background 0.18s ease;
}
.wr-dash-switch-slider::before {
  content: '';
  position: absolute;
  width: 0.85rem;
  height: 0.85rem;
  left: 0.14rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease, background 0.18s ease;
}
.wr-dash-switch input.wr-dash-todo-check:checked + .wr-dash-switch-slider {
  background: var(--accent);
}
.wr-dash-switch input.wr-dash-todo-check:checked + .wr-dash-switch-slider::before {
  transform: translate(0.9rem, -50%);
  background: #fff;
}
.wr-dash-switch input.wr-dash-todo-check:focus-visible + .wr-dash-switch-slider {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}
.wr-dash-todo-text.is-done {
  color: var(--muted);
  text-decoration: line-through;
}
.wr-dash-compact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.wr-dash-compact-table th,
.wr-dash-compact-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.wr-dash-compact-table th {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.78rem;
}
.wr-dash-entries {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.wr-dash-entries--cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.wr-dash-view + .wr-dash-view {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border);
}
.wr-dash-view-title {
  font-weight: 600;
  font-size: 0.84rem;
  margin-bottom: 0.45rem;
  color: var(--muted);
  line-height: 1.3;
}
.wr-widget-fields-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.wr-widget-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 160px);
  gap: 0.5rem;
  align-items: center;
}
.wr-widget-field-row .wl-chip {
  margin: 0;
}
.wr-widget-field-label {
  width: 100%;
  font-size: 0.82rem;
  padding: 0.35rem 0.5rem;
}
.wr-widget-view-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--surface2);
}
.wr-widget-view-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.wr-widget-view-order {
  display: flex;
  gap: 0.2rem;
  flex-shrink: 0;
}
.wr-widget-view-card-head input[type="text"] {
  flex: 1;
  min-width: 0;
}
.wr-widget-view-filter {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border);
}
.wr-widget-view-filter .row2 {
  margin-top: 0.35rem;
}
.wr-dash-entry {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
}
.wr-dash-entry-name {
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 0.35rem;
  line-height: 1.25;
}
.wr-dash-entry-fields {
  margin: 0;
  display: grid;
  gap: 0.35rem;
}
.wr-dash-entry-field {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  font-size: 0.82rem;
}
.wr-dash-entry-field dt {
  margin: 0;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.35;
  word-break: break-word;
}
.wr-dash-entry-field dd {
  margin: 0;
  line-height: 1.35;
  word-break: break-word;
}
.wr-dash-more {
  margin-top: 0.65rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
  text-align: center;
}
.wr-dash-member-filter {
  margin-bottom: 0.65rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px dashed var(--border);
}
.wr-dash-member-filter-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.wr-dash-member-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.wr-dash-member-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.76rem;
  line-height: 1.3;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wr-dash-member-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.wr-dash-member-chip.is-active {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  font-weight: 600;
}
@media (max-width: 1100px) {
  .wr-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wr-dash-widget--span-3,
  .wr-dash-widget--span-4 {
    grid-column: 1 / -1;
  }
}
@media (max-width: 720px) {
  .wr-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .wr-dash-widget--span-2,
  .wr-dash-widget--span-3,
  .wr-dash-widget--span-4 {
    grid-column: auto;
  }
  .wr-dash-entries--cols-2 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 420px) {
  .wr-dash-entry-field {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}
.wr-dash-empty-hint {
  color: var(--muted);
  font-size: 0.85rem;
}
.wr-dash-toolbar {
  align-items: center;
}
.wr-dash-refresh-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.wr-dash-refresh-label select {
  max-width: 88px;
}
.wr-dash-print-meta {
  display: none;
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

@media print {
  body.wr-print-dashboard .navbar,
  body.wr-print-dashboard .wr-view-tabs,
  body.wr-print-dashboard .wr-dash-toolbar,
  body.wr-print-dashboard #wrTablePanel,
  body.wr-print-dashboard .wr-dash-menu,
  body.wr-print-dashboard .wr-dash-widget-order,
  body.wr-print-dashboard .wr-dash-collapse-trigger,
  body.wr-print-dashboard .wr-dash-member-filter,
  body.wr-print-dashboard #wrEditUserModal,
  body.wr-print-dashboard #wrWidgetModal,
  body.wr-print-dashboard .page-header p {
    display: none !important;
  }
  body.wr-print-dashboard .wr-dash-print-meta {
    display: block !important;
    color: #000;
  }
  body.wr-print-dashboard .page-header h1 {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
  }
  body.wr-print-dashboard .wr-dashboard-grid {
    display: block;
  }
  body.wr-print-dashboard .wr-dash-widget {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    box-shadow: none;
  }
  body.wr-print-dashboard .wr-dash-widget-body {
    max-height: none;
    overflow: visible;
    display: block !important;
  }
  body.wr-print-dashboard .wr-dash-widget--span-2,
  body.wr-print-dashboard .wr-dash-widget--span-3,
  body.wr-print-dashboard .wr-dash-widget--span-4 {
    width: 100%;
  }
}

/* ── Stats cards ────────────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.stat-card .stat-val { font-size: 1.8rem; font-weight: 700; }
.stat-card .stat-label { font-size: 0.8rem; color: var(--muted); margin-top: 0.1rem; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert { padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.875rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.alert-success { background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.3); color: var(--success); }
.alert-error   { background: rgba(239,68,68,0.15);  border: 1px solid rgba(239,68,68,0.3);  color: var(--error); }
.alert-info    { background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3); color: var(--accent-h); }

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty svg { margin-bottom: 1rem; opacity: 0.4; }
.empty h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text); }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 1rem;
}
.modal-overlay.hidden { display: none; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.modal-header h2 { font-size: 1.1rem; font-weight: 600; }
.modal-body { padding: 1.5rem; }
.modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); }
.btn-icon { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0.25rem; border-radius: 4px; }
.btn-icon:hover { color: var(--text); background: var(--surface2); }

/* Wishlist admin modal: fix scroll + compact layout */
#wishlistAdminModal .modal{
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden; /* scroll happens in modal-body */
}
#wishlistAdminModal .modal-body{
  overflow: auto;
  padding: 1rem;
}
#wishlistAdminModal .modal-header{ padding: .9rem 1rem; }
#wishlistAdminModal .modal-footer{ padding: .75rem 1rem; }
#wishlistAdminModal .row2{ gap: .6rem; }
#wishlistAdminModal .form-group{ margin-bottom: .65rem; }
#wishlistAdminModal .hint{ margin-top: .25rem; }
#wishlistAdminModal .lp-details > summary{ padding: .6rem .8rem; }
#wishlistAdminModal .lp-details-body{ padding: .75rem .8rem .85rem; }
#wishlistAdminModal .wl-builder-item > summary{ padding: .55rem .65rem; }
#wishlistAdminModal .wl-builder-body{ padding: .65rem; }
#wishlistAdminModal textarea{ line-height: 1.25; }

/* ── Tag input ──────────────────────────────────────────────────────────── */
.tags-wrap { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.tag-item { background: var(--surface2); color: var(--text); border-radius: 4px; padding: 0.15rem 0.5rem; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.tag-remove { cursor: pointer; color: var(--muted); font-size: 0.9rem; line-height: 1; }
.tag-remove:hover { color: var(--error); }

/* ── Users modal ────────────────────────────────────────────────────────── */
.user-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.user-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); cursor: pointer; }
.user-item:last-child { border-bottom: none; }
.user-item:hover { background: var(--surface2); }
.user-item input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
.user-info .user-name { font-size: 0.875rem; font-weight: 500; }
.user-info .user-email { font-size: 0.75rem; color: var(--muted); }

/* Button reset when user-item is a button */
.user-list button.user-item{
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--text);
}
.user-list button.user-item:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent 78%);
}

/* Share picker */
#shareUserList{ max-height: 45vh; }
@media (max-width: 560px){
  #shareUserList{ max-height: 52vh; }
}

/* Wishlist tile */
.tile{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  cursor:pointer;
}
.tile-title{ font-weight:600; font-size: 1rem; }
.tile-sub{ color: var(--muted); font-size:.875rem; margin-top:.1rem; }
.tile-icon{
  width: 36px; height: 36px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 80%, var(--bg) 20%);
  flex-shrink:0;
}
.tile:hover{ border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }

/* Wishlist form */
.wl-field{ margin-bottom: 1rem; }
.wl-field .wl-label{ display:block; font-size:.875rem; font-weight:500; color: var(--muted); margin-bottom:.35rem; }
.wl-options{ display:flex; flex-wrap:wrap; gap:.35rem; }
.wl-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding:.35rem .55rem;
  border-radius: 999px;
  cursor:pointer;
  user-select:none;
}
.wl-chip input{ margin:0; }
.wl-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.2rem .5rem;
  border-radius: 999px;
  border:1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: .82rem;
  line-height: 1.25;
  white-space: nowrap;
}
.wl-pill + .wl-pill{ margin-left:.25rem; }
.wl-pill-swatch{ width: 10px; height: 10px; border-radius: 999px; border:1px solid color-mix(in srgb, var(--border) 60%, transparent 40%); }

/* Wishlist schema builder */
.wl-builder-item{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
  overflow: hidden;
}
.wl-builder-item + .wl-builder-item{ margin-top: .6rem; }
.wl-builder-item[draggable="true"]{ cursor: grab; }
.wl-builder-item.dragging{ opacity:.6; }
.wl-builder-item > summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: .7rem .75rem;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:.75rem;
}
.wl-builder-item > summary::-webkit-details-marker{ display:none; }
.wl-builder-item > summary::after{
  content:"▾";
  opacity:.75;
  transform: rotate(-90deg);
  transition: transform .15s ease;
}
.wl-builder-item[open] > summary::after{ transform: rotate(0deg); }
.wl-builder-sum{ display:flex; flex-direction:column; gap:.15rem; }
.wl-builder-sum-title{ font-weight: 700; }
.wl-builder-sum-meta{ font-size: .8rem; color: var(--muted); font-weight: 500; }
.wl-builder-body{
  padding: .75rem;
  border-top: 1px solid var(--border);
}
.wl-builder-row{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:flex-end; }
.wl-builder-row .form-group{ margin-bottom:0; flex:1; min-width: 160px; }
.wl-builder-actions{ display:flex; gap:.35rem; }

/* ── Accordion (Admin directory) ─────────────────────────────────────────── */
.accordion { display:flex; flex-direction:column; gap:.35rem; }
.acc-head{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  padding:.75rem .9rem;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
  border-radius: 12px;
  cursor:pointer;
  color: var(--text);
}
.acc-body{
  border:1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 88%, var(--surface) 12%);
  padding:.75rem .9rem;
  display:none;
}
.acc-head.acc-open + .acc-body{ display:block; }
/* ── Dashboard disclosures (Wetter, Hinweise) ───────────────────────────────── */
.dash-disclosure {
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 96%, var(--bg) 4%);
  overflow: hidden;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent 96%);
}
.dash-disclosure > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  color: var(--text);
  transition: background 0.18s ease;
}
.dash-disclosure > summary::-webkit-details-marker {
  display: none;
}
.dash-disclosure > summary::after {
  content: "";
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
  background-color: color-mix(in srgb, var(--surface) 82%, var(--bg) 18%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1rem;
  transition: transform 0.22s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.dash-disclosure[open] > summary {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface) 94%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent 25%);
}
.dash-disclosure[open] > summary::after {
  transform: rotate(180deg);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border) 65%);
  background-color: color-mix(in srgb, var(--accent) 12%, var(--surface) 88%);
}
.dash-disclosure > summary:hover {
  background: color-mix(in srgb, var(--bg) 35%, var(--surface) 65%);
}
.dash-disclosure__body {
  padding: 0.85rem 1rem 1rem;
}
.dash-disclosure-group {
  padding: 0;
  overflow: hidden;
}
.dash-disclosure-group .dash-disclosure {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.dash-disclosure-group .dash-disclosure + .dash-disclosure {
  border-top: 1px solid var(--border);
}
.dash-disclosure-group .dash-disclosure:first-child {
  border-radius: 14px 14px 0 0;
}
.dash-disclosure-group .dash-disclosure:last-child {
  border-radius: 0 0 14px 14px;
}
.dash-disclosure-group .dash-disclosure:only-child {
  border-radius: 14px;
}

/* ── Weather widget ────────────────────────────────────────────────────────── */
.weather.dash-disclosure > summary {
  padding: 0.9rem 1rem;
}
.weather-summary-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.weather-title {
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.weather-sub {
  display: block;
  font-size: 0.78rem;
}
.weather-now {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}
.weather-now .fw-600 {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.weather-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
}
.weather-day {
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent 20%);
  border-radius: 12px;
  padding: 0.65rem 0.55rem;
  background: color-mix(in srgb, var(--bg) 55%, var(--surface) 45%);
}
.weather-date {
  font-size: 0.76rem;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.weather-icon {
  font-size: 1.15rem;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.weather-temps {
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
}
.weather-temps .tmax {
  font-weight: 700;
  font-size: 0.92rem;
}
.weather-temps .tmin {
  color: var(--muted);
  font-size: 0.82rem;
}
.weather-pop {
  margin-top: 0.2rem;
  font-size: 0.72rem;
}
@media (max-width: 900px) {
  .weather-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .weather-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .weather.dash-disclosure:not([open]) .weather-sub {
    display: none;
  }
}

/* ── Dashboard notes widget ──────────────────────────────────────────────── */
.dash-note > summary {
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.25;
}
/* Dashboard: Notizen-Kachel (ohne Icon, am Ende des Rasters) */
a.link-card--notes-entry {
  text-decoration: none;
  color: inherit;
  order: 9999;
}
a.link-card--notes-entry .link-card-url {
  display: none;
}
a.link-card--notes-entry:hover {
  color: inherit;
}
#dashboardNoteHints:empty {
  display: none;
}
#dashboardNoteHints:not(:empty) {
  margin-bottom: 0.35rem;
}
.group-note-share-row {
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  margin: 0;
}
.group-note-share-row:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.dash-logout-wrap {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.dash-logout-btn {
  width: 100%;
  justify-content: center;
}
.navbar-actions--user {
  gap: 0.4rem;
  flex-wrap: nowrap;
}
@media (max-width: 560px) {
  .navbar-actions--user .js-theme-toggle {
    font-size: 0;
    padding: 0.35rem 0.5rem;
    min-width: 2.25rem;
  }
  .navbar-actions--user .js-theme-toggle::after {
    content: "◐";
    font-size: 0.95rem;
    line-height: 1;
  }
  .navbar-actions--user .btn-sm:not(.app-notif-btn):not(.js-theme-toggle) {
    font-size: 0.72rem;
    padding: 0.28rem 0.45rem;
  }
}
@media (min-width: 721px) {
  .dash-logout-btn { width: auto; }
}

.dash-note-link-wrap {
  margin-top: 0.55rem;
  padding: 0.45rem 1rem 1rem;
  border-top: 1px solid var(--border);
}
.dash-note-body {
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
  background: color-mix(in srgb, var(--bg) 50%, var(--surface) 50%);
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* ── Login ──────────────────────────────────────────────────────────────── */
.login-bg { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); }
.login-wrap { width: 100%; max-width: 380px; padding: 1rem; }
.login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 2.5rem 2rem; text-align: center; }
.login-logo { display: flex; justify-content: center; margin-bottom: 1.25rem; }
.login-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.login-sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 2rem; }
.login-hint { font-size: 0.75rem; color: var(--muted); margin-top: 1.25rem; }
.login-sub--error { color: var(--error); }
.login-sub--warning { color: var(--warning); }
.login-sub--info { color: var(--muted); }
.login-detail { text-align: left; margin: 0 0 1.5rem; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.login-detail p { margin: 0; }
.login-detail .login-message { text-align: center; }
.login-detail + .btn { margin-top: 0; }
.login-card .btn + .btn { margin-top: 0.65rem; }
.login-debug {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-family: monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  text-align: left;
  color: var(--text);
}

/* ── Setup wizard ────────────────────────────────────────────────────────── */
.setup-wrap { max-width: 660px; margin: 2rem auto; padding: 0 1rem; }
.step-nav { display: flex; gap: 0.25rem; margin-bottom: 2rem; }
.step-pip { flex: 1; height: 4px; background: var(--surface2); border-radius: 2px; transition: background 0.3s; }
.step-pip.active { background: var(--accent); }
.step-pip.done   { background: var(--success); }
.setup-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; }
.setup-card h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.25rem; }
.setup-card p.desc { color: var(--muted); font-size: 0.875rem; margin-bottom: 1.5rem; }
.output-block { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; font-family: monospace; font-size: 0.78rem; white-space: pre; overflow-x: auto; color: var(--success); margin-top: 1rem; }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.flex { display: flex; } .items-center { align-items: center; } .gap-2 { gap: 0.5rem; }
.ml-auto { margin-left: auto; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; }
.hidden { display: none !important; }
.text-muted { color: var(--muted); }
.text-sm { font-size: 0.875rem; }
.fw-600 { font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }

/* Wishlist emoji button next to options textarea */
.wl-options-row{ display:flex; gap:.5rem; align-items:flex-start; }
.wl-options-row textarea{ flex:1; min-width:0; }
.wl-emoji-btn{ width: 44px; justify-content: center; padding-left: 0; padding-right: 0; }

/* Emoji-/Symbol-Picker (Ordner, Wunschliste, Notizen) */
.emoji-popover {
  position: fixed;
  z-index: 99999;
  width: min(360px, calc(100vw - 16px));
  max-height: min(420px, calc(100vh - 16px));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent) 15%);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.emoji-popover-head {
  padding: 0.55rem 0.65rem 0.35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
}
.emoji-popover-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.emoji-popover-search {
  padding: 0.4rem 0.55rem 0.35rem;
}
.emoji-popover-search input {
  width: 100%;
  font-size: 0.82rem;
  padding: 0.42rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.emoji-popover-search input:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent 65%);
  outline-offset: 1px;
}
.emoji-popover-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0 0.55rem 0.45rem;
}
.emoji-popover-tab {
  flex: 0 0 auto;
  padding: 0.22rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.emoji-popover-tab:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.emoji-popover-tab.is-active {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}
.emoji-popover-grid-wrap {
  overflow-y: auto;
  padding: 0.5rem 0.55rem 0.55rem;
  min-height: 140px;
  max-height: min(280px, 44vh);
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent 35%);
}
.emoji-popover-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.35rem;
}
.emoji-popover-grid .emoji-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.55rem;
  font-size: 1.35rem;
  line-height: 1;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent 20%);
  background: color-mix(in srgb, var(--surface2) 45%, var(--surface) 55%);
  border-radius: 10px;
  padding: 0.2rem;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.emoji-popover-grid .emoji-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface) 92%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.emoji-popover-grid .emoji-btn:active {
  transform: translateY(0);
}
.emoji-popover-empty {
  padding: 1.5rem 0.5rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
}
.emoji-popover-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
  padding: 0.4rem 0.55rem 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
  background: color-mix(in srgb, var(--surface2) 35%, var(--surface) 65%);
}
@media (max-width: 400px) {
  .emoji-popover-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.3rem;
  }
  .emoji-popover-grid .emoji-btn {
    min-height: 2.35rem;
    font-size: 1.2rem;
  }
}

/* Ordner-Icon: Vorschau + Auswahl */
.folder-icon-picker {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.folder-icon-picker-preview {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  line-height: 1;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 50%, var(--surface));
}
.folder-icon-picker-preview.is-empty {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}
.folder-icon-picker-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
}
.folder-icon-picker-input {
  flex: 1;
  min-width: 6rem;
  max-width: 8.5rem;
  font-size: 0.82rem;
  padding: 0.3rem 0.45rem;
}
.wl-opt-tools{ display:flex; flex-direction:column; gap:.45rem; align-items:stretch; }
.wl-color-pick{ display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center; max-width: 52px; }
.wl-color-btn{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent 35%);
  background: var(--surface2);
  cursor: pointer;
}
/* Fallback via title-based colors */
.wl-color-btn[title="Grün"]{ background:#22c55e; }
.wl-color-btn[title="Blau"]{ background:#3b82f6; }
.wl-color-btn[title="Gelb"]{ background:#f59e0b; }
.wl-color-btn[title="Rot"]{ background:#ef4444; }
.wl-color-btn[title="Lila"]{ background:#a855f7; }
.wl-color-btn[title="Grau"]{ background:#64748b; }
.wl-color-none{
  background: transparent !important;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Wishlist: help + info blocks */
.wl-help{ color: var(--muted); font-size: .82rem; margin: .2rem 0 .45rem; }
.wl-info{
  border: 1px dashed color-mix(in srgb, var(--border) 70%, transparent 30%);
  border-radius: 12px;
  padding: .75rem .9rem;
  background: color-mix(in srgb, var(--surface2) 35%, transparent 65%);
  margin: .6rem 0;
}
.wl-info-title{ font-weight: 600; margin-bottom: .15rem; }

/* ── Notes ──────────────────────────────────────────────────────────────── */
.notes-layout{ display:grid; grid-template-columns: 1.1fr 1fr 1.4fr; gap:1rem; margin-top:1rem; }
.notes-pane{ padding: 1rem; }
.notes-pane-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.75rem; }
.notes-mobilebar{ display:none; gap:.5rem; align-items:center; flex-wrap:wrap; margin: .75rem 0 0; }
.notes-mobilebar .btn{ padding: .45rem .75rem; }

.notes-tabs{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

.notes-shared-cards{ display:none; }
.notes-shared-card{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .85rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
}
.notes-shared-card + .notes-shared-card{ margin-top: .65rem; }
.notes-shared-meta{ display:flex; gap:.5rem; flex-wrap:wrap; color: var(--muted); font-size: .85rem; margin-top:.2rem; }
.notes-shared-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem; }
.notes-shared-actions .btn{ flex:1; justify-content:center; }

@media (max-width: 560px){
  #notesSharedPane .table-wrap{ display:none; }
  .notes-shared-cards{ display:block; }
}

.note-mark-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.note-mark-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  min-height: 2.1rem;
  padding: 0.2rem 0.45rem;
  font-size: 1.35rem;
  line-height: 1;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent 35%);
  background: color-mix(in srgb, var(--bg) 88%, var(--surface) 12%);
}
.note-mark-preview--empty {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.dash-note-summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.dash-note-mark {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1;
}
.dash-note-mark-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-list-mark {
  margin-right: 0.2rem;
}

/* Prevent horizontal scrolling in notes */
#notesPage{ overflow-x:hidden; }
.notes-layout, .notes-pane, .user-list, .user-item{ min-width:0; }
.user-info, .user-name, .user-email{ min-width:0; }
.user-name, .user-email{ overflow:hidden; text-overflow:ellipsis; }
textarea#noteBody{ max-width:100%; }
textarea#noteBody{
  overflow-x: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Notes save state pill (prevents layout jump) */
.notes-savepill{
  display:inline-block;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface2);
}
.notes-savepill[data-state="dirty"]{ border-color: color-mix(in srgb, var(--danger) 60%, var(--border)); background: color-mix(in srgb, var(--danger) 70%, var(--surface)); }
.notes-savepill[data-state="saving"]{ border-color: color-mix(in srgb, var(--warning) 60%, var(--border)); background: color-mix(in srgb, var(--warning) 70%, var(--surface)); }
.notes-savepill[data-state="saved"]{ border-color: color-mix(in srgb, var(--success) 60%, var(--border)); background: color-mix(in srgb, var(--success) 70%, var(--surface)); }

@media (max-width: 900px){
  .notes-layout{ grid-template-columns: 1fr; }
  #notesNav{ order: 1; }
  #notesListPane{ order: 2; }
  #notesEditorPane{ order: 3; }
}

/* Mobile single-pane navigation */
@media (max-width: 560px){
  .notes-mobilebar{ display:flex; position: sticky; top: 56px; z-index: 90; background: var(--bg); padding: .5rem 0; }
  #notesPage[data-notes-view="nav"] #notesListPane,
  #notesPage[data-notes-view="nav"] #notesEditorPane{ display:none; }
  #notesPage[data-notes-view="list"] #notesNav,
  #notesPage[data-notes-view="list"] #notesEditorPane{ display:none; }
  #notesPage[data-notes-view="edit"] #notesNav,
  #notesPage[data-notes-view="edit"] #notesListPane{ display:none; }
  .notes-pane{ padding: .9rem; }
}

/* ── Admin: Links subnav & table clarity ─────────────────────────────────── */
.admin-links-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 0 1rem;
}
.admin-links-subnav-link,
.admin-links-subnav-btn {
  display: inline-flex;
  align-items: center;
  padding: .35rem .8rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.admin-links-subnav-link.is-active,
.admin-links-subnav-btn.is-active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--text);
}
.admin-links-subnav-btn-primary {
  border-color: var(--accent, #4f46e5);
  background: var(--accent, #4f46e5);
  color: #fff;
}
.admin-links-subnav-btn-primary:hover {
  filter: brightness(1.06);
}
.admin-inline-btn {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.admin-help {
  margin-bottom: 1rem;
  padding: .75rem .9rem;
}
.admin-help-list {
  margin: .4rem 0 0;
  padding-left: 1.15rem;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.45;
}
.admin-link-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .65rem;
}
.admin-link-filters .btn.is-active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.admin-placement-col { max-width: 22rem; }
.admin-placement-lines { display: flex; flex-direction: column; gap: .3rem; }
.admin-placement-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
}
.admin-placement-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  min-width: 2.6rem;
}
.admin-placement-url {
  font-size: .72rem;
  color: var(--muted);
  text-decoration: none;
  max-width: 100%;
}
.admin-placement-url:hover { color: var(--accent); text-decoration: underline; }

/* ── Admin: Dashboard-Ordner page ────────────────────────────────────────── */
.folders-shell {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
@media (max-width: 900px) {
  .folders-shell { grid-template-columns: 1fr; }
}
.folders-sidebar { padding: .85rem; }
.folders-sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .6rem;
}
.folder-card-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-height: min(70vh, 640px);
  overflow: auto;
}
.folder-card {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  width: 100%;
  text-align: left;
  padding: .55rem .65rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.folder-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.folder-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.folder-card.is-dragging { opacity: .55; }
.folder-card-drag { cursor: grab; color: var(--muted); font-size: .85rem; line-height: 1.2; }
.folder-card-icon { font-size: 1.25rem; line-height: 1; }
.folder-card-body { min-width: 0; flex: 1; }
.folder-card-title { display: block; font-weight: 600; font-size: .9rem; }
.folder-card-meta { display: block; font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.folders-sidebar-hint { margin: .55rem 0 0; }
.folders-main { padding: 1rem; min-height: 420px; }
.folders-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--muted);
}
.folders-empty-icon { font-size: 2.5rem; margin-bottom: .5rem; }
.folders-empty-inline { padding: 1rem; color: var(--muted); font-size: .85rem; }
.folder-editor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .85rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--border);
}
.folder-editor-title-wrap { display: flex; gap: .65rem; align-items: flex-start; }
.folder-editor-icon { font-size: 1.75rem; line-height: 1; }
.folder-editor-head h2 { margin: 0 0 .15rem; font-size: 1.15rem; }
.folder-editor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .85rem;
}
.folder-editor-tab {
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
}
.folder-editor-tab.is-active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.folder-editor-pane-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}
.folders-search {
  width: 100%;
  margin-bottom: .5rem;
  padding: .45rem .6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.folder-links-list { max-height: min(50vh, 420px); overflow: auto; }
.folder-bulk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 768px) {
  .folder-bulk-grid { grid-template-columns: 1fr; }
}
.folder-bulk-col { min-width: 0; }
.folder-bulk-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .45rem;
}
.folder-bulk-filters,
.folder-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .45rem 0;
}
.folder-bulk-filters .btn.is-active {
  border-color: var(--primary, #4f46e5);
  background: color-mix(in srgb, var(--primary, #4f46e5) 12%, transparent);
}
.folder-bulk-list { max-height: min(52vh, 440px); overflow: auto; }
.folder-bulk-link-folders {
  font-size: .75rem;
  color: var(--muted, #64748b);
  margin-top: .15rem;
}

/* Admin: dashboard preview (Benutzer & Gruppen) */
.dash-admin-preview {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .85rem;
  background: color-mix(in srgb, var(--bg) 92%, var(--border));
  max-height: min(62vh, 520px);
  overflow: auto;
}
.dash-admin-preview-grid {
  gap: .65rem;
}
.dash-admin-preview-grid .link-card {
  pointer-events: none;
  user-select: none;
}
.dash-admin-preview-folder-title {
  font-size: .95rem;
  margin: 0 0 .4rem;
}
.dash-admin-preview-camp-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .82rem;
  color: var(--muted);
}
.dash-admin-preview-camp-list li + li {
  margin-top: .2rem;
}

/* ── Admin: Login audit ───────────────────────────────────────────────────── */
.audit-login-toolbar {
  margin-top: 0.25rem;
}
.audit-login-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.75rem 1rem;
  align-items: end;
}
.audit-login-filter {
  margin: 0;
}
.audit-login-filter--grow {
  grid-column: span 2;
}
.audit-login-filter label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--muted);
}
.audit-login-filter select,
.audit-login-filter input {
  width: 100%;
}
.audit-login-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.audit-login-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.audit-login-table th {
  white-space: nowrap;
}
.audit-cell-nowrap {
  white-space: nowrap;
}
.audit-cell-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
}
.audit-cell-detail {
  max-width: 22rem;
  word-break: break-word;
}
.audit-outcome {
  display: inline-block;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 90%, var(--bg) 10%);
}
.audit-outcome--ok {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
}
.audit-outcome--fail {
  border-color: color-mix(in srgb, var(--error) 40%, var(--border));
  background: color-mix(in srgb, var(--error) 10%, var(--surface));
}
.audit-outcome--logout {
  border-color: color-mix(in srgb, var(--muted) 35%, var(--border));
}
@media (max-width: 720px) {
  .audit-login-filter--grow {
    grid-column: span 1;
  }
}

/* ── Abgaben (submission boxes) ─────────────────────────────────────────── */
.link-card--submission .link-card-url {
  white-space: normal;
  line-height: 1.35;
}
.submission-my-list {
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
  background: color-mix(in srgb, var(--bg) 40%, var(--surface) 60%);
}
.submission-my-item {
  padding: 0.45rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.submission-my-item:last-child {
  border-bottom: none;
}
.submission-my-item.is-editing {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-radius: 8px;
  margin: 0 -0.35rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}
.submission-my-item .submission-edit-btn {
  flex-shrink: 0;
}
.sub-admin-box-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.sub-box-fields-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.sub-box-field-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
}
.sub-field-label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}
.sub-field select {
  width: 100%;
}
.sub-field-options {
  margin-top: 0.35rem;
}
.sub-entry-content {
  max-width: 28rem;
  line-height: 1.45;
  font-size: 0.84rem;
}
.sub-entry-content > div + div {
  margin-top: 0.2rem;
}