/* --- Base/Table --- */
.fc-grid { font-family: system-ui, sans-serif; }
.fc-grid .fc-toolbar {
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:.5rem;
}
.fc-grid .fc-toolbar input, .fc-grid .fc-toolbar select, .fc-grid .fc-toolbar button {
  padding:.4rem .6rem; border:1px solid #d1d5db; border-radius:.375rem; background:#fff; cursor:pointer;
}
.fc-grid .fc-toolbar button:disabled { opacity:.6; cursor:not-allowed; }

.fc-grid table { width:100%; border-collapse:separate; border-spacing:0; border:1px solid #d1d5db; border-radius:.5rem; overflow:hidden; }
.fc-grid thead th { position:sticky; top:0; background:#f8fafc; z-index:1; }
.fc-grid th, .fc-grid td { padding:.5rem .6rem; border-bottom:1px solid #e5e7eb; vertical-align:top; }
.fc-grid tr:nth-child(even) td { background:#fcfcfd; }
.fc-grid th { user-select:none; cursor:pointer; position:relative; font-weight:600; }
.fc-grid th .sort { position:absolute; right:.4rem; opacity:.6; }
.fc-grid th .subtle { display:block; font-weight:400; color:#6b7280; font-size:.8rem; margin-top:.25rem; }

.fc-grid thead .filters th { background:#fff; border-bottom:1px solid #e5e7eb; }
.fc-grid thead .filters input {
  width:100%; box-sizing:border-box; padding:.35rem .45rem; border:1px solid #d1d5db; border-radius:.375rem; background:#fff;
}

.fc-thumb { width:64px; height:36px; object-fit:cover; border-radius:.25rem; border:1px solid #e5e7eb; }
.fc-muted { color:#6b7280; font-size:.85rem; }
.fc-nowrap { white-space:nowrap; }

.fc-pager { display:flex; gap:.5rem; align-items:center; justify-content:flex-end; padding:.6rem 0; }
.fc-pager button { padding:.35rem .6rem; border:1px solid #d1d5db; border-radius:.375rem; background:#fff; cursor:pointer; }
.fc-pager button:disabled { opacity:.5; cursor:not-allowed; }

/* --- Chips/Badges (inline) --- */
.fc-chip, .fc-badge {
  display:inline-block; padding:.1rem .45rem; border-radius:999px; border:1px solid #d1d5db; font-size:.78rem; background:#fff;
}
.fc-badge.online { border-color:#86efac; background:#f0fdf4; }
.fc-badge.offline { border-color:#fecaca; background:#fef2f2; }

/* --- Alerts --- */
.fc-alert { padding:.5rem .75rem; border:1px solid #e5e7eb; border-radius:.5rem; margin:.5rem 0; background:#f8fafc; }
.fc-alert.warn { background:#fff7ed; border-color:#fed7aa; }
.fc-alert strong { margin-right:.4rem; }

/* --- Dropdown in Kopf (Trigger) --- */
.fc-dd { position:relative; display:inline-block; }
.fc-dd-btn {
  display:flex; align-items:center; gap:.35rem;
  padding:.3rem .5rem; border:1px solid #d1d5db; border-radius:.375rem; background:#fff; cursor:pointer;
  font-weight:500;
}
.fc-dd-btn .count { font-size:.78rem; color:#6b7280; }

/* Fallback-Panel (wenn nicht portaled) */
.fc-dd-panel {
  position:absolute; left:0; top:100%; margin-top:.35rem; min-width:280px; max-width:360px;
  background:#fff; border:1px solid #d1d5db; border-radius:.5rem; box-shadow:0 10px 20px rgba(0,0,0,.06);
  padding:.5rem; z-index:100; display:none;
}
.fc-dd.open .fc-dd-panel { display:block; }

/* Panel-Inhalt */
.fc-dd .dd-head { display:flex; align-items:center; gap:.4rem; margin-bottom:.4rem; }
.fc-dd .dd-head input[type="search"] {
  flex:1; padding:.35rem .45rem; border:1px solid #d1d5db; border-radius:.375rem; background:#fff;
}
.fc-dd .dd-actions { display:flex; gap:.5rem; justify-content:flex-end; margin-top:.5rem; }
.fc-dd .dd-actions button {
  padding:.3rem .5rem; border:1px solid #d1d5db; border-radius:.375rem; background:#fff; cursor:pointer;
}
.fc-dd .dd-list {
  max-height:240px; overflow:auto; border:1px solid #e5e7eb; border-radius:.375rem; padding:.25rem;
}
.fc-dd .dd-item {
  display:flex; align-items:center; gap:.45rem; padding:.28rem .25rem; border-radius:.375rem; cursor:pointer;
}
.fc-dd .dd-item:hover { background:#f8fafc; }
.fc-dd .dd-item input { pointer-events:none; }
.fc-dd .dd-empty { color:#6b7280; padding:.5rem; font-size:.9rem; }

/* Auswahlvorschau im Header */
.fc-dd-selection {
  display:inline-flex; flex-wrap:wrap; gap:.25rem; margin-left:.35rem; vertical-align:middle;
}
.fc-dd-selection .fc-badge { background:#f8fafc; }

/* --- Portal-Panels im <body> --- */
.fc-dd-portal {
  position:absolute; min-width:280px; max-width:360px;
  background:#fff; border:1px solid #d1d5db; border-radius:.5rem; box-shadow:0 14px 28px rgba(0,0,0,.12);
  padding:.5rem;
  z-index:2147483000; /* maximal "on top" */
}

/* Kleine Helfer */
.fc-spacer { flex: 1 1 auto; }