/* GridKit Core CSS v0.16.0 */

/* Global link reset */
a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  text-decoration: none;
}

/* === M3 COLOR ROLES === */
.gk-root,
[data-gk-theme] {
  /* Key Colors */
  --gk-primary: #6366f1;
  --gk-on-primary: #ffffff;
  --gk-primary-container: #e0e0ff;
  --gk-on-primary-container: #1a1a6b;

  --gk-secondary: #57606a;
  --gk-on-secondary: #ffffff;
  --gk-secondary-container: #eaeef2;
  --gk-on-secondary-container: #24292f;

  --gk-tertiary: #10b981;
  --gk-on-tertiary: #ffffff;
  --gk-tertiary-container: #d1fae5;
  --gk-on-tertiary-container: #064e3b;

  --gk-error: #f43f5e;
  --gk-on-error: #ffffff;
  --gk-error-container: #ffe4e6;
  --gk-on-error-container: #881337;

  /* Surface Roles */
  --gk-surface-dim: #e8edf2;
  --gk-surface: #ffffff;
  --gk-surface-bright: #ffffff;
  --gk-surface-container-lowest: #ffffff;
  --gk-surface-container-low: #f6f8fa;
  --gk-surface-container: #f1f5f9;
  --gk-surface-container-high: #eaeef2;
  --gk-surface-container-highest: #d8dee4;
  --gk-on-surface: #0f172a;
  --gk-on-surface-variant: #475569;
  --gk-outline: #94a3b8;
  --gk-outline-variant: #e2e8f0;

  /* Backward-compat aliases */
  --gk-bg: var(--gk-surface);
  --gk-bg-muted: var(--gk-surface-container);
  --gk-bg-subtle: var(--gk-surface-container-low);
  --gk-bg-hover: var(--gk-surface-container-high);
  --gk-text: var(--gk-on-surface);
  --gk-text-muted: var(--gk-on-surface-variant);
  --gk-text-subtle: var(--gk-outline);
  --gk-border: var(--gk-outline-variant);
  --gk-success: var(--gk-tertiary);
  --gk-warning: #f59e0b;
  --gk-danger: var(--gk-error);
  --gk-info: #0ea5e9;

  /* Legacy hover aliases */
  --gk-primary-hover: #4f46e5;
  --gk-success-hover: #059669;
  --gk-warning-hover: #d97706;
  --gk-danger-hover: #e11d48;

  /* Legacy scale aliases (backward compat) */
  --gk-primary-50: #eef2ff;
  --gk-primary-100: #e0e7ff;
  --gk-primary-200: #c7d2fe;
  --gk-primary-300: #a5b4fc;
  --gk-primary-400: #818cf8;
  --gk-primary-500: #6366f1;
  --gk-primary-600: #4f46e5;
  --gk-primary-700: #4338ca;
  --gk-success-50: #ecfdf5;
  --gk-success-100: #d1fae5;
  --gk-success-200: #a7f3d0;
  --gk-success-400: #34d399;
  --gk-success-500: #10b981;
  --gk-success-600: #059669;
  --gk-success-700: #047857;
  --gk-warning-50: #fffbeb;
  --gk-warning-100: #fef3c7;
  --gk-warning-200: #fde68a;
  --gk-warning-400: #fbbf24;
  --gk-warning-500: #f59e0b;
  --gk-warning-600: #d97706;
  --gk-warning-700: #b45309;
  --gk-danger-50: #fff1f2;
  --gk-danger-100: #ffe4e6;
  --gk-danger-200: #fecdd3;
  --gk-danger-400: #fb7185;
  --gk-danger-500: #f43f5e;
  --gk-danger-600: #e11d48;
  --gk-danger-700: #be123c;
  --gk-neutral-50: #f8fafc;
  --gk-neutral-100: #f1f5f9;
  --gk-neutral-200: #e2e8f0;
  --gk-neutral-300: #cbd5e1;
  --gk-neutral-400: #94a3b8;
  --gk-neutral-500: #64748b;
  --gk-neutral-600: #475569;
  --gk-neutral-700: #334155;
  --gk-neutral-800: #1e293b;
  --gk-neutral-900: #0f172a;

  /* Sidebar Colors */
  /* Sidebar – Light Mode (dunkel = Dark Mode Block unten) */
  --gk-sidebar-bg: #f1f5f9;
  --gk-sidebar-text: #374151;
  --gk-sidebar-text-muted: #9ca3af;
  --gk-sidebar-text-hover: #111827;
  --gk-sidebar-item-hover: rgba(0, 0, 0, 0.05);
  --gk-sidebar-item-active: rgba(0, 0, 0, 0.07);
  --gk-sidebar-border: rgba(0, 0, 0, 0.07);
  --gk-sidebar-brand-bg: transparent;
  --gk-sidebar-accent: var(--gk-primary);
  --gk-sidebar-icon-muted: #94a3b8;

  /* Elevation (M3 uses tonal elevation) */
  --gk-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --gk-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
  --gk-radius: 12px;
  --gk-radius-sm: 8px;
  --gk-radius-lg: 16px;

  --gk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gk-font-size: 14px;
  --gk-font-size-sm: 12px;
  --gk-spacing: 16px;
  --gk-content-max-width: 1600px;
  font-family: var(--gk-font);
  font-size: var(--gk-font-size);
  color: var(--gk-text);
  box-sizing: border-box;
}
.gk-root *,
.gk-root *::before,
.gk-root *::after {
  box-sizing: border-box;
}
.gk-root {
  background-color: var(--gk-surface-container);
  color: var(--gk-on-surface);
  min-height: 100vh;
}

/* === TABLE === */
.gk-table-wrap {
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 12px;
  overflow: clip;
}
.gk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: var(--gk-spacing);
  gap: 8px;
  border-bottom: 1px solid var(--gk-border);
}
.gk-toolbar-spacer {
  flex: 1;
}
/* Toolbar-Buttons immer pill — konsistent mit der Suchleiste */
.gk-toolbar .gk-btn-filled,
.gk-toolbar .gk-btn-outlined,
.gk-toolbar .gk-btn-tonal {
  border-radius: 9999px;
}
.gk-toolbar .gk-search {
  margin-right: 4px;
}
.gk-search {
  padding: 8px 12px 8px 36px;
  border: 1.5px solid var(--gk-border);
  border-radius: 9999px;
  font-size: var(--gk-font-size);
  outline: none;
  min-width: 200px;
  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'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.gk-search:focus {
  border-color: var(--gk-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Filters */
.gk-filter {
  padding: 7px 32px 7px 12px;
  border: 1px solid var(--gk-border);
  border-radius: var(--gk-radius-sm);
  font-size: var(--gk-font-size);
  font-family: var(--gk-font);
  background: var(--gk-bg);
  color: var(--gk-text);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.gk-filter:hover {
  border-color: var(--gk-text-muted);
}
.gk-filter:focus {
  border-color: var(--gk-primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.gk-filter option {
  padding: 4px 8px;
}

.gk-table {
  width: 100%;
  border-collapse: collapse;
}
.gk-table th,
.gk-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #d8dee4;
}
.gk-table thead th {
  background: #f6f8fa;
  font-weight: 600;
  font-size: 11px;
  color: #57606a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
  white-space: nowrap;
}
.gk-table tbody tr:hover {
  background: #f6f8fa;
}
.gk-table tbody tr:nth-child(even) {
  background: #f6f8fa;
}
.gk-table tbody tr:nth-child(even):hover {
  background: #eaeef2;
}
.gk-table tbody tr:last-child td {
  border-bottom: none;
}

/* Nowrap */
.gk-table td.gk-nowrap,
.gk-table th.gk-nowrap {
  white-space: nowrap;
}
.gk-table.gk-table-nowrap td {
  white-space: nowrap;
}

.gk-sortable {
  cursor: pointer;
}
.gk-sortable::after {
  content: "⇅";
  margin-left: 4px;
  opacity: 0.3;
  font-size: 11px;
}
.gk-sorted-asc::after {
  content: "↑";
  opacity: 0.7;
}
.gk-sorted-desc::after {
  content: "↓";
  opacity: 0.7;
}

.gk-empty,
.gk-table td.gk-empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--gk-text-muted);
  font-size: 14px;
}
.gk-actions {
  white-space: nowrap;
}
.gk-actions-left {
  text-align: left;
}
.gk-actions-right {
  text-align: right;
}
.gk-actions-col {
  width: 1%;
}

/* ── Multi-Select ─────────────────────────────────────────────────────── */
.gk-cb-col {
  width: 36px;
  padding: 0 10px !important;
}
.gk-cb-col input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--gk-primary);
  vertical-align: middle;
}
.gk-table tr.gk-row-selected {
  background: color-mix(in srgb, var(--gk-primary) 6%, transparent);
}
.gk-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gk-primary);
  color: #fff;
  border-radius: 10px;
  padding: 10px 16px;
  margin: 6px 0 2px;
  font-size: 13px;
  font-weight: 500;
}
.gk-bulk-bar .gk-toolbar-spacer {
  flex: 1;
}
.gk-bulk-bar .material-icons {
  font-size: 18px;
}
.gk-bulk-bar [data-gk-bulk-delete] {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 0 14px;
  height: 32px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.gk-bulk-bar [data-gk-bulk-delete]:hover {
  background: #dc2626;
}
.gk-bulk-bar [data-gk-bulk-delete] .material-icons {
  font-size: 15px;
}
.gk-bulk-bar [data-gk-bulk-cancel] {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 7px;
  padding: 0 14px;
  height: 32px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.gk-bulk-bar [data-gk-bulk-cancel]:hover {
  background: rgba(255, 255, 255, 0.25);
}
/* Button Group — Basis: kein Rahmen, kein Hintergrund */
.gk-btn-group {
  display: inline-flex;
  border-radius: 10px;
  overflow: hidden;
}
.gk-btn-group .gk-btn {
  border-radius: 0;
  margin: 0;
  border-right-width: 0;
  border-color: transparent;
}
.gk-btn-group .gk-btn:first-child {
  border-radius: 10px 0 0 10px;
}
.gk-btn-group .gk-btn:last-child {
  border-radius: 0 10px 10px 0;
  border-right-width: 0;
}
.gk-btn-group .gk-btn:only-child {
  border-radius: 10px;
}
/* Bordered Variante — explizit opt-in */
.gk-btn-group-bordered {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--gk-outline-variant, #e5e7eb);
}
.gk-btn-group-bordered .gk-btn:not(:last-child) {
  border-right: 1px solid var(--gk-outline-variant, #e5e7eb);
}
.gk-btn-icon-text {
  gap: 5px;
}
.gk-btn-icon-text svg {
  flex-shrink: 0;
}

/* === BUTTONS === */
/* Base */
.gk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  font-family: inherit;
}
.gk-btn:focus-visible {
  outline: 2px solid var(--gk-primary, #6366f1);
  outline-offset: 2px;
}

/* Sizes */
.gk-btn-sm {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 6px;
  gap: 4px;
}
.gk-btn-lg {
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 10px;
  gap: 8px;
}
.gk-btn-icon-only {
  padding: 8px;
}
.gk-btn-icon-only.gk-btn-sm {
  padding: 4px;
}
.gk-btn-icon-only.gk-btn-lg {
  padding: 12px;
}
.gk-btn-full {
  width: 100%;
}

/* --- Variant: Filled --- */
.gk-btn-filled.gk-btn-primary {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}
.gk-btn-filled.gk-btn-primary:hover {
  background: #4f46e5;
  border-color: #4f46e5;
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);
}
.gk-btn-filled.gk-btn-success {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}
.gk-btn-filled.gk-btn-success:hover {
  background: #059669;
  border-color: #059669;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}
.gk-btn-filled.gk-btn-warning {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
}
.gk-btn-filled.gk-btn-warning:hover {
  background: #d97706;
  border-color: #d97706;
}
.gk-btn-filled.gk-btn-danger {
  background: #f43f5e;
  color: #fff;
  border-color: #f43f5e;
}
.gk-btn-filled.gk-btn-danger:hover {
  background: #e11d48;
  border-color: #e11d48;
  box-shadow: 0 1px 3px rgba(244, 63, 94, 0.3);
}
.gk-btn-filled.gk-btn-neutral {
  background: #475569;
  color: #fff;
  border-color: #475569;
}
.gk-btn-filled.gk-btn-neutral:hover {
  background: #334155;
  border-color: #334155;
}

/* --- Variant: Outlined --- */
.gk-btn-outlined {
  background: transparent;
}
.gk-btn-outlined.gk-btn-primary {
  color: #6366f1;
  border-color: #6366f1;
}
.gk-btn-outlined.gk-btn-primary:hover {
  background: rgba(99, 102, 241, 0.08);
}
.gk-btn-outlined.gk-btn-success {
  color: #10b981;
  border-color: #10b981;
}
.gk-btn-outlined.gk-btn-success:hover {
  background: rgba(16, 185, 129, 0.08);
}
.gk-btn-outlined.gk-btn-warning {
  color: #d97706;
  border-color: #d97706;
}
.gk-btn-outlined.gk-btn-warning:hover {
  background: rgba(245, 158, 11, 0.08);
}
.gk-btn-outlined.gk-btn-danger {
  color: #f43f5e;
  border-color: #f43f5e;
}
.gk-btn-outlined.gk-btn-danger:hover {
  background: rgba(244, 63, 94, 0.08);
}
.gk-btn-outlined.gk-btn-neutral {
  color: #374151;
  border-color: #d1d5db;
}
.gk-btn-outlined.gk-btn-neutral:hover {
  background: #f3f4f6;
}

/* --- Variant: Text (no border) --- */
.gk-btn-text {
  background: transparent;
  border-color: transparent;
}
.gk-btn-text.gk-btn-primary {
  color: #6366f1;
}
.gk-btn-text.gk-btn-primary:hover {
  background: rgba(99, 102, 241, 0.08);
}
.gk-btn-text.gk-btn-success {
  color: #10b981;
}
.gk-btn-text.gk-btn-success:hover {
  background: rgba(16, 185, 129, 0.08);
}
.gk-btn-text.gk-btn-warning {
  color: #d97706;
}
.gk-btn-text.gk-btn-warning:hover {
  background: rgba(245, 158, 11, 0.08);
}
.gk-btn-text.gk-btn-danger {
  color: #f43f5e;
}
.gk-btn-text.gk-btn-danger:hover {
  background: rgba(244, 63, 94, 0.08);
}
.gk-btn-text.gk-btn-neutral {
  color: #6b7280;
}
.gk-btn-text.gk-btn-neutral:hover {
  background: #f3f4f6;
  color: #374151;
}

/* --- Variant: Tonal (soft fill) --- */
.gk-btn-tonal.gk-btn-primary {
  background: #eef2ff;
  color: #4338ca;
  border-color: transparent;
}
.gk-btn-tonal.gk-btn-primary:hover {
  background: #e0e7ff;
}
.gk-btn-tonal.gk-btn-success {
  background: #ecfdf5;
  color: #047857;
  border-color: transparent;
}
.gk-btn-tonal.gk-btn-success:hover {
  background: #d1fae5;
}
.gk-btn-tonal.gk-btn-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  border-color: transparent;
}
.gk-btn-tonal.gk-btn-warning:hover {
  background: rgba(245, 158, 11, 0.18);
}
.gk-btn-tonal.gk-btn-danger {
  background: #fff1f2;
  color: #be123c;
  border-color: transparent;
}
.gk-btn-tonal.gk-btn-danger:hover {
  background: #ffe4e6;
}
.gk-btn-tonal.gk-btn-neutral {
  background: #f1f5f9;
  color: #334155;
  border-color: transparent;
}
.gk-btn-tonal.gk-btn-neutral:hover {
  background: #e2e8f0;
}

/* --- States --- */
.gk-btn.disabled,
.gk-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.gk-btn-loading {
  pointer-events: none;
}
.gk-btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gk-spin 0.6s linear infinite;
}
@keyframes gk-spin {
  to {
    transform: rotate(360deg);
  }
}
.gk-btn-badge {
  font-size: 10px;
  font-weight: 700;
  background: #f43f5e;
  color: #fff;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  margin-left: 2px;
}

/* Default variant: no variant class = filled */
.gk-btn.gk-btn-primary:not(.gk-btn-outlined):not(.gk-btn-text):not(
    .gk-btn-tonal
  ) {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}
.gk-btn.gk-btn-primary:not(.gk-btn-outlined):not(.gk-btn-text):not(
    .gk-btn-tonal
  ):hover {
  background: #4f46e5;
  border-color: #4f46e5;
}
.gk-btn.gk-btn-success:not(.gk-btn-outlined):not(.gk-btn-text):not(
    .gk-btn-tonal
  ) {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}
.gk-btn.gk-btn-success:not(.gk-btn-outlined):not(.gk-btn-text):not(
    .gk-btn-tonal
  ):hover {
  background: #059669;
  border-color: #059669;
}
.gk-btn.gk-btn-warning:not(.gk-btn-outlined):not(.gk-btn-text):not(
    .gk-btn-tonal
  ) {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
}
.gk-btn.gk-btn-warning:not(.gk-btn-outlined):not(.gk-btn-text):not(
    .gk-btn-tonal
  ):hover {
  background: #d97706;
  border-color: #d97706;
}
.gk-btn.gk-btn-danger:not(.gk-btn-outlined):not(.gk-btn-text):not(
    .gk-btn-tonal
  ) {
  background: #f43f5e;
  color: #fff;
  border-color: #f43f5e;
}
.gk-btn.gk-btn-danger:not(.gk-btn-outlined):not(.gk-btn-text):not(
    .gk-btn-tonal
  ):hover {
  background: #e11d48;
  border-color: #e11d48;
}
.gk-btn.gk-btn-neutral:not(.gk-btn-outlined):not(.gk-btn-text):not(
    .gk-btn-tonal
  ) {
  background: #475569;
  color: #fff;
  border-color: #475569;
}
.gk-btn.gk-btn-neutral:not(.gk-btn-outlined):not(.gk-btn-text):not(
    .gk-btn-tonal
  ):hover {
  background: #334155;
  border-color: #334155;
}

/* --- Shapes --- */
.gk-btn-pill {
  border-radius: 9999px;
}
.gk-btn-pill.gk-btn-sm {
  border-radius: 9999px;
}
.gk-btn-pill.gk-btn-lg {
  border-radius: 9999px;
}
.gk-btn-circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
}
.gk-btn-circle.gk-btn-lg {
  width: 56px;
  height: 56px;
}
.gk-btn-circle.gk-btn-sm {
  width: 32px;
  height: 32px;
}
.gk-btn-square {
  border-radius: 4px;
}
.gk-btn-square.gk-btn-sm {
  border-radius: 3px;
}
.gk-btn-square.gk-btn-lg {
  border-radius: 6px;
}

/* --- FAB (Floating Action Button) --- */
.gk-fab {
  border-radius: 16px;
  width: 56px;
  height: 56px;
  padding: 0;
  box-shadow:
    0 3px 5px -1px rgba(0, 0, 0, 0.1),
    0 6px 10px rgba(0, 0, 0, 0.07);
}
.gk-fab:hover {
  box-shadow:
    0 5px 8px -2px rgba(0, 0, 0, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.1);
}
.gk-fab-sm {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.gk-fab-lg {
  width: 96px;
  height: 96px;
  border-radius: 28px;
}
.gk-fab-lg .material-icons {
  font-size: 36px !important;
}
.gk-fab-extended {
  width: auto;
  height: auto;
  padding: 16px 24px;
  border-radius: 9999px;
  gap: 8px;
}
.gk-fab-extended.gk-fab-sm {
  padding: 10px 18px;
}
.gk-fab-extended.gk-fab-lg {
  padding: 20px 32px;
  font-size: 18px;
}

/* Icon-only in tables (small) */
.gk-btn-icon {
  padding: 5px 7px;
}
.gk-btn-icon svg {
  display: block;
}

/* === PAGINATION === */
.gk-table-footer td {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--gk-on-surface-variant);
  border-top: 1px solid var(--gk-border);
  background: var(--gk-surface-variant, rgba(0,0,0,.02));
}
td.gk-table-meta {
  font-size: 11px;
  opacity: 0.5;
  text-align: right;
  font-weight: 400;
}
.gk-pagination {
  display: flex;
  gap: 4px;
  padding: var(--gk-spacing);
  justify-content: center;
  border-top: 1px solid var(--gk-border);
}
.gk-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 4px;
  border: 1px solid var(--gk-border);
  border-radius: 9999px;
  background: var(--gk-bg);
  cursor: pointer;
  font-size: var(--gk-font-size-sm);
  text-decoration: none;
  color: var(--gk-on-surface);
  transition: all 0.15s;
}
.gk-page-btn:hover {
  background: var(--gk-bg-hover);
}
.gk-page-btn.gk-active {
  background: var(--gk-primary-50, #eef2ff);
  color: var(--gk-primary-700, #4338ca);
  border-color: transparent;
  font-weight: 600;
}

/* === LABELS === */
.gk-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: var(--gk-font-size-sm);
  font-weight: 500;
}
.gk-label-green {
  background: #dcfce7;
  color: #166534;
}
.gk-label-orange {
  background: #fef3c7;
  color: #92400e;
}
.gk-label-red {
  background: #fee2e2;
  color: #991b1b;
}
.gk-label-gray {
  background: #f3f4f6;
  color: #6b7280;
}
.gk-label-blue {
  background: #dbeafe;
  color: #1e40af;
}
/* Dark Mode Labels */
[data-gk-mode="dark"] .gk-label-green,
.gk-dark .gk-label-green {
  font-weight: 600;
  background: #166534;
  color: #bbf7d0;
}
[data-gk-mode="dark"] .gk-label-orange,
.gk-dark .gk-label-orange {
  font-weight: 600;
  background: #92400e;
  color: #fde68a;
}
[data-gk-mode="dark"] .gk-label-red,
.gk-dark .gk-label-red {
  font-weight: 600;
  background: #991b1b;
  color: #fecaca;
}
[data-gk-mode="dark"] .gk-label-gray,
.gk-dark .gk-label-gray {
  font-weight: 600;
  background: #374151;
  color: #d1d5db;
}
[data-gk-mode="dark"] .gk-label-blue,
.gk-dark .gk-label-blue {
  font-weight: 600;
  background: #1e40af;
  color: #bfdbfe;
}

.gk-bool-yes {
  color: var(--gk-success);
  font-weight: bold;
}
.gk-bool-no {
  color: var(--gk-text-muted);
}

/* === FORM === */
.gk-form {
  width: 100%;
  max-width: 960px;
}
.gk-form-wide {
  max-width: none;
}

/* Grid-based row layout (16-column grid) */
.gk-form-row {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 20px;
}
.gk-form-row > .gk-field {
  margin-bottom: 0;
}
.gk-form-col-1 {
  grid-column: span 1;
}
.gk-form-col-2 {
  grid-column: span 2;
}
.gk-form-col-3 {
  grid-column: span 3;
}
.gk-form-col-4 {
  grid-column: span 4;
}
.gk-form-col-5 {
  grid-column: span 5;
}
.gk-form-col-6 {
  grid-column: span 6;
}
.gk-form-col-7 {
  grid-column: span 7;
}
.gk-form-col-8 {
  grid-column: span 8;
}
.gk-form-col-9 {
  grid-column: span 9;
}
.gk-form-col-10 {
  grid-column: span 10;
}
.gk-form-col-11 {
  grid-column: span 11;
}
.gk-form-col-12 {
  grid-column: span 12;
}
.gk-form-col-13 {
  grid-column: span 13;
}
.gk-form-col-14 {
  grid-column: span 14;
}
.gk-form-col-15 {
  grid-column: span 15;
}
.gk-form-col-16 {
  grid-column: span 16;
}
.gk-form-col-auto {
  grid-column: auto;
}

/* Legacy flex row (backwards compat) */
.gk-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.gk-field {
  margin-bottom: 20px;
}
.gk-w-1 {
  width: 6.25%;
}
.gk-w-2 {
  width: 12.5%;
}
.gk-w-3 {
  width: 18.75%;
}
.gk-w-4 {
  width: 25%;
}
.gk-w-5 {
  width: 31.25%;
}
.gk-w-6 {
  width: 37.5%;
}
.gk-w-7 {
  width: 43.75%;
}
.gk-w-8 {
  width: 50%;
}
.gk-w-9 {
  width: 56.25%;
}
.gk-w-10 {
  width: 62.5%;
}
.gk-w-11 {
  width: 68.75%;
}
.gk-w-12 {
  width: 75%;
}
.gk-w-13 {
  width: 81.25%;
}
.gk-w-14 {
  width: 87.5%;
}
.gk-w-15 {
  width: 93.75%;
}
.gk-w-16 {
  width: 100%;
}
.gk-row > .gk-field {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.gk-row > .gk-w-1 {
  flex: 0 0 calc(6.25% - 14px);
  min-width: 0;
}
.gk-row > .gk-w-2 {
  flex: 0 0 calc(12.5% - 13px);
  min-width: 0;
}
.gk-row > .gk-w-3 {
  flex: 0 0 calc(18.75% - 13px);
  min-width: 0;
}
.gk-row > .gk-w-4 {
  flex: 0 0 calc(25% - 12px);
  min-width: 0;
}
.gk-row > .gk-w-5 {
  flex: 0 0 calc(31.25% - 11px);
  min-width: 0;
}
.gk-row > .gk-w-6 {
  flex: 0 0 calc(37.5% - 10px);
  min-width: 0;
}
.gk-row > .gk-w-7 {
  flex: 0 0 calc(43.75% - 9px);
  min-width: 0;
}
.gk-row > .gk-w-8 {
  flex: 0 0 calc(50% - 8px);
  min-width: 0;
}
.gk-row > .gk-w-9 {
  flex: 0 0 calc(56.25% - 7px);
  min-width: 0;
}
.gk-row > .gk-w-10 {
  flex: 0 0 calc(62.5% - 6px);
  min-width: 0;
}
.gk-row > .gk-w-11 {
  flex: 0 0 calc(68.75% - 5px);
  min-width: 0;
}
.gk-row > .gk-w-12 {
  flex: 0 0 calc(75% - 4px);
  min-width: 0;
}
.gk-row > .gk-w-13 {
  flex: 0 0 calc(81.25% - 3px);
  min-width: 0;
}
.gk-row > .gk-w-14 {
  flex: 0 0 calc(87.5% - 2px);
  min-width: 0;
}
.gk-row > .gk-w-15 {
  flex: 0 0 calc(93.75% - 1px);
  min-width: 0;
}
.gk-row > .gk-w-16 {
  flex: 0 0 100%;
  min-width: 0;
}

/* Inline field (label + input side by side) */
.gk-field-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.gk-field-inline > .gk-label-text {
  margin-bottom: 0;
  flex-shrink: 0;
}
.gk-field-inline > .gk-input-wrap {
  flex: 1;
}

.gk-label-text {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gk-on-surface-variant, #475569);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.gk-label-text .material-icons,
.gk-label-text .material-symbols-outlined,
.gk-label-text .material-symbols-rounded {
  text-transform: none;
  font-size: 1em;
  vertical-align: middle;
}
.gk-required {
  color: var(--gk-danger);
}
.gk-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #dde1e6;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--gk-font);
  background: #fff;
  color: var(--gk-text);
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  box-sizing: border-box;
  height: 44px;
}
.gk-input::placeholder {
  color: #6e7781;
}
.gk-input:hover {
  border-color: var(--gk-outline, #94a3b8);
}
.gk-input:focus {
  border-color: var(--gk-primary);
  border-width: 1.5px;
  padding: 9.75px 13.75px;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}
textarea.gk-input {
  resize: vertical;
  height: auto;
  min-height: 80px;
}
/* Number: Browser-Spinner entfernen für einheitliches Layout */
input[type="number"].gk-input {
  -moz-appearance: textfield;
}
input[type="number"].gk-input::-webkit-outer-spin-button,
input[type="number"].gk-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.gk-input-clearable {
  position: relative;
  display: flex;
  align-items: center;
}
.gk-input-clearable .gk-input {
  padding-right: 40px;
}
.gk-input-clear {
  position: absolute;
  right: 8px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--gk-text-muted);
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.15s,
    background 0.15s;
}
.gk-input-clear:hover {
  color: var(--gk-danger);
  background: var(--gk-bg-muted);
}
.gk-input-clear .material-icons {
  font-size: 18px;
}
/* === COLOR PICKER === */
.gk-color-wrap {
  display: flex;
  align-items: center;
  height: 44px;
  border: 1.5px solid var(--gk-outline-variant, #cbd5e1);
  border-radius: 8px;
  overflow: hidden;
  background: var(--gk-surface-container-lowest, #fff);
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.gk-color-wrap:hover {
  border-color: var(--gk-outline, #94a3b8);
}
.gk-color-wrap:focus-within {
  border-color: var(--gk-primary);
  border-width: 2px;
}
.gk-color-swatch {
  width: 52px;
  height: 100%;
  border: none;
  border-right: 1.5px solid var(--gk-outline-variant, #cbd5e1);
  cursor: pointer;
  padding: 6px;
  background: none;
  flex-shrink: 0;
  box-sizing: border-box;
}
.gk-color-swatch input[type="color"] {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}
.gk-color-swatch input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 5px;
}
.gk-color-swatch input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 5px;
}
.gk-color-swatch input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 5px;
}
.gk-color-hex {
  border: none;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  color: var(--gk-text);
  background: none;
  width: 100%;
  padding: 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
select.gk-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* Toggle – M3 Style */
.gk-toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  cursor: pointer;
}
.gk-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.gk-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--gk-neutral-300, #cbd5e1);
  border-radius: 14px;
  transition:
    background 0.2s,
    box-shadow 0.2s;
}
.gk-toggle-slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 4px;
  top: 4px;
  background: #fff;
  border-radius: 50%;
  transition:
    transform 0.2s,
    width 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.gk-toggle input:checked + .gk-toggle-slider {
  background: var(--gk-primary);
}
.gk-toggle input:checked + .gk-toggle-slider::before {
  transform: translateX(20px);
}

.gk-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--gk-outline-variant);
  margin-top: 16px;
}
.gk-field-hint {
  font-size: 12px;
  color: var(--gk-text-secondary, #64748b);
  margin-top: 4px;
}

/* ── Form Density: Compact ─────────────────────────────── */
.gk-form-compact .gk-field {
  margin-bottom: 10px;
}
.gk-form-compact .gk-form-row {
  gap: 10px;
  margin-bottom: 10px;
}
.gk-form-compact .gk-label-text {
  margin-bottom: 3px;
  font-size: 11px;
}
.gk-form-compact .gk-input {
  padding: 6px 10px;
  height: 34px;
  font-size: 13px;
  border-radius: 6px;
}
.gk-form-compact .gk-input:focus {
  padding: 5.75px 9.75px;
}
.gk-form-compact select.gk-input {
  padding-right: 32px;
  background-position: right 10px center;
}
.gk-form-compact textarea.gk-input {
  height: auto;
  min-height: 56px;
}
.gk-form-compact .gk-section-title {
  font-size: 13px;
  margin-bottom: 8px;
}
.gk-form-compact .gk-field-hint {
  font-size: 11px;
  margin-top: 2px;
}
.gk-form-compact .gk-toggle {
  width: 38px;
  height: 22px;
}
.gk-form-compact .gk-toggle-slider {
  border-radius: 11px;
}
.gk-form-compact .gk-toggle-slider::before {
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
}
.gk-form-compact .gk-toggle input:checked + .gk-toggle-slider::before {
  transform: translateX(16px);
}
.gk-form-compact .gk-checkbox-custom {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}
.gk-form-compact .gk-checkbox-custom::after {
  width: 4px;
  height: 8px;
  border-width: 0 1.5px 1.5px 0;
}
.gk-form-compact .gk-checkbox-wrap {
  gap: 6px;
  font-size: 13px;
}
.gk-form-compact .gk-field-inline {
  gap: 8px;
}
.gk-form-compact .gk-select-display {
  padding: 6px 10px;
  height: 34px;
  font-size: 13px;
  border-radius: 6px;
}
.gk-form-compact .gk-select-display.open {
  padding: 5.75px 9.75px;
}
.gk-form-compact .gk-select-arrow {
  font-size: 16px;
}
.gk-form-compact .gk-select-option {
  padding: 6px 10px;
  font-size: 13px;
}
.gk-form-compact .gk-ajax-select .gk-select-display {
  height: 34px;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 6px;
  border-width: 1px;
}
.gk-form-compact .gk-ajax-search-input {
  font-size: 13px;
}
.gk-form-compact .gk-select-search-input {
  padding: 6px 10px;
}
.gk-form-compact .gk-select-search-input input {
  font-size: 13px;
}
.gk-field-error {
  color: var(--gk-danger);
  font-size: 12px;
  min-height: 0;
  margin-top: 4px;
}
.gk-field-error:not(:empty) {
  min-height: 18px;
}
.gk-input.gk-has-error {
  border-color: var(--gk-danger);
}
.gk-input.gk-has-error:focus {
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.1);
}
.gk-field.gk-field-has-error .gk-label-text {
  color: var(--gk-danger);
}

/* === CHECKBOX (M3 Style) === */
.gk-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--gk-font-size);
  user-select: none;
}
.gk-checkbox-wrap input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.gk-checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gk-neutral-400);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
  position: relative;
}
.gk-checkbox-custom::after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease;
  margin-top: -2px;
}
.gk-checkbox-wrap input:checked + .gk-checkbox-custom {
  background: var(--gk-primary);
  border-color: var(--gk-primary);
}
.gk-checkbox-wrap input:checked + .gk-checkbox-custom::after {
  transform: rotate(45deg) scale(1);
}
.gk-checkbox-wrap:hover .gk-checkbox-custom {
  border-color: var(--gk-primary);
}
.gk-checkbox-text {
  line-height: 1.4;
}

/* === RADIO (M3 Style) === */
.gk-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gk-radio-group-inline {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
}
.gk-radio-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--gk-font-size);
  user-select: none;
}
.gk-radio-wrap input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.gk-radio-custom {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gk-neutral-400);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.gk-radio-custom::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gk-primary);
  transform: scale(0);
  transition: transform 0.15s ease;
}
.gk-radio-wrap input:checked + .gk-radio-custom {
  border-color: var(--gk-primary);
}
.gk-radio-wrap input:checked + .gk-radio-custom::after {
  transform: scale(1);
}
.gk-radio-wrap:hover .gk-radio-custom {
  border-color: var(--gk-primary);
}

/* === RANGE / SLIDER (M3 Style) === */
.gk-range-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gk-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--gk-neutral-200);
  outline: none;
  cursor: pointer;
}
.gk-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gk-primary);
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.gk-range::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.15);
}
.gk-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gk-primary);
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.gk-range::-moz-range-progress {
  background: var(--gk-primary);
  height: 4px;
  border-radius: 2px;
}
.gk-range-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--gk-text);
  min-width: 32px;
  text-align: center;
}

/* === FILE UPLOAD (Drag & Drop Zone) === */
.gk-upload-zone {
  position: relative;
  border: 2px dashed #d0d7de;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.gk-upload-zone:hover {
  border-color: var(--gk-primary);
  background: var(--gk-primary-50);
}
.gk-upload-zone.gk-dragover {
  border-color: var(--gk-primary);
  background: var(--gk-primary-50);
}
.gk-upload-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.gk-upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.gk-upload-icon {
  font-size: 32px;
  color: var(--gk-neutral-400);
}
.gk-upload-zone:hover .gk-upload-icon,
.gk-upload-zone.gk-dragover .gk-upload-icon {
  color: var(--gk-primary);
}
.gk-upload-text {
  font-size: 14px;
  color: var(--gk-text-muted);
}
.gk-upload-hint {
  font-size: 12px;
  color: var(--gk-neutral-400);
}
.gk-upload-idle {
  display: flex;
}
.gk-upload-progress {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.gk-upload-progress-label {
  font-size: 14px;
  color: var(--gk-text-muted);
}

/* === UPLOAD QUEUE === */
.gk-upload-queue {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.gk-uq-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--gk-border);
  background: var(--gk-bg);
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.gk-uq-removing {
  opacity: 0;
  transform: translateX(8px);
}
.gk-uq-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gk-bg-muted);
}
.gk-uq-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gk-uq-icon {
  font-size: 20px;
  color: var(--gk-text-muted);
}
.gk-uq-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gk-uq-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gk-uq-size {
  font-size: 11px;
  color: var(--gk-text-muted);
}
.gk-uq-status {
  font-size: 11px;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 20px;
}
.gk-uq-remove {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--gk-text-muted);
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.gk-uq-remove:hover {
  background: var(--gk-bg-muted);
  color: var(--gk-danger);
}
/* States */
.gk-uq-pending .gk-uq-status {
  background: var(--gk-neutral-100, #f1f5f9);
  color: var(--gk-text-muted);
}
.gk-uq-uploading {
  border-color: var(--gk-primary);
}
.gk-uq-uploading .gk-uq-status {
  background: var(--gk-primary-50, #eef2ff);
  color: var(--gk-primary);
}
.gk-uq-done {
  border-color: #16a34a;
}
.gk-uq-done .gk-uq-status {
  background: #dcfce7;
  color: #166534;
}
.gk-uq-error {
  border-color: var(--gk-danger);
}
.gk-uq-error .gk-uq-status {
  background: #fee2e2;
  color: #991b1b;
}

/* === RICHTEXT EDITOR === */
.gk-richtext {
  border: 1.5px solid var(--gk-border);
  border-radius: 8px;
  overflow: hidden;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.gk-richtext:focus-within {
  border-color: var(--gk-primary);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.gk-richtext-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  background: var(--gk-neutral-50);
  border-bottom: 1px solid var(--gk-border);
}
.gk-richtext-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  color: var(--gk-text-muted);
  transition: all 0.15s;
}
.gk-richtext-btn:hover {
  background: var(--gk-neutral-200);
  color: var(--gk-text);
}
.gk-richtext-btn.active {
  background: var(--gk-primary-100);
  color: var(--gk-primary-700);
}
.gk-richtext-btn .material-icons {
  font-size: 18px;
}
.gk-richtext-content {
  min-height: 120px;
  padding: 12px 16px;
  font-size: 14px;
  font-family: var(--gk-font);
  color: var(--gk-text);
  outline: none;
  line-height: 1.6;
}
.gk-richtext-content:empty::before {
  content: attr(data-placeholder);
  color: var(--gk-neutral-400);
}

/* Legacy checkbox/radio labels */
.gk-checkbox-label,
.gk-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: var(--gk-font-size);
}

/* === MODAL === */
.gk-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}
.gk-modal {
  background: #fff;
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  width: 90%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gk-modal-small {
  max-width: 420px;
}
.gk-modal-medium {
  max-width: 640px;
}
.gk-modal-large {
  max-width: 860px;
}
.gk-modal-large {
  max-width: 900px;
}
.gk-modal-full {
  max-width: none;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  display: flex;
  flex-direction: column;
}
.gk-modal-full .gk-modal-body {
  flex: 1;
  overflow-y: auto;
}
.gk-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--gk-border, #e2e8f0);
  background: #fff;
}
.gk-modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--gk-text, #0f172a);
}
.gk-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--gk-text-muted, #94a3b8);
  padding: 4px 8px;
  line-height: 1;
  border-radius: 6px;
  transition: all 0.15s;
}
.gk-modal-close:hover {
  color: var(--gk-text, #0f172a);
  background: var(--gk-bg-muted, #f1f5f9);
}
.gk-modal-body {
  padding: 24px;
  overflow-y: auto;
  background: #fff;
}
.gk-modal-body .gk-form {
  margin: 0;
}

/* Loading spinner */
.gk-loading::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  margin: 20px auto;
  border: 3px solid var(--gk-border);
  border-top-color: var(--gk-primary);
  border-radius: 50%;
  animation: gk-spin 0.6s linear infinite;
}
@keyframes gk-spin {
  to {
    transform: rotate(360deg);
  }
}

/* === FILTER CHIPS === */
.gk-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.gk-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: var(--gk-font-size-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid var(--gk-border);
  background: var(--gk-bg);
  color: var(--gk-text);
  line-height: 1.4;
}
.gk-chip:hover {
  background: var(--gk-bg-hover);
  border-color: var(--gk-text-muted);
}
.gk-chip-active {
  background: var(--gk-primary);
  color: #fff;
  border-color: var(--gk-primary);
}
.gk-chip-active:hover {
  background: var(--gk-primary-hover);
}
.gk-chip-danger.gk-chip-active {
  background: var(--gk-danger);
  border-color: var(--gk-danger);
}
.gk-chip-success.gk-chip-active {
  background: var(--gk-success);
  border-color: var(--gk-success);
}
.gk-chip-warning.gk-chip-active {
  background: var(--gk-warning);
  border-color: var(--gk-warning);
  color: #1f2937;
}
.gk-chip-sm {
  padding: 4px 10px;
  font-size: 12px;
}
.gk-chip-icon {
  font-size: 16px;
  line-height: 1;
}
.gk-chip-count {
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 6px;
  border-radius: 9999px;
  font-size: 11px;
  margin-left: 2px;
}
.gk-chip-active .gk-chip-count {
  background: rgba(255, 255, 255, 0.2);
}

/* === STAT CARDS === */
.gk-stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gk-spacing);
  margin-bottom: 16px;
}
.gk-stat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--gk-bg);
  border-radius: var(--gk-radius);
  box-shadow: var(--gk-shadow);
  border: 1px solid var(--gk-border);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s;
}
a.gk-stat-card:hover {
  box-shadow: var(--gk-shadow-lg);
}
.gk-stat-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gk-stat-label {
  font-size: var(--gk-font-size-sm);
  color: var(--gk-text-muted);
  font-weight: 500;
}
.gk-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gk-text);
  line-height: 1.2;
}
.gk-stat-highlight {
  color: var(--gk-danger);
}
.gk-stat-icon {
  font-size: 28px;
  color: var(--gk-primary);
  opacity: 0.7;
}
.gk-stat-danger .gk-stat-icon {
  color: var(--gk-danger);
}
.gk-stat-danger .gk-stat-value {
  color: var(--gk-danger);
}
.gk-stat-success .gk-stat-icon {
  color: var(--gk-success);
}
.gk-stat-success .gk-stat-value {
  color: var(--gk-success);
}
.gk-stat-warning .gk-stat-icon {
  color: var(--gk-warning);
}
.gk-stat-warning .gk-stat-value {
  color: var(--gk-warning);
}
.gk-stat-blue .gk-stat-icon {
  color: var(--gk-primary);
}
.gk-stat-primary .gk-stat-icon {
  color: var(--gk-primary);
}
.gk-stat-info .gk-stat-icon {
  color: var(--gk-info);
}

/* === YEAR FILTER === */
.gk-year-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-bottom: 12px;
}

/* === SIDEBAR === */
/* Sidebar Hintergrund direkt gesetzt (hohe Spezifität, zuverlässiger als var()-Kette) */
[data-gk-theme] .gk-sidebar {
  background: #f4f5f7;
  color: #374151;
  border-right: 1px solid #e2e8f0;
}
[data-gk-mode="dark"] .gk-sidebar {
  color: rgba(255, 255, 255, 0.78);
}

[data-gk-mode="dark"] .gk-sidebar {
  background: #010409;
  border-right-color: rgba(255, 255, 255, 0.06);
}
[data-gk-theme="indigo"][data-gk-mode="dark"] .gk-sidebar {
  background: #010409;
}
[data-gk-theme="ocean"][data-gk-mode="dark"] .gk-sidebar {
  background: #010409;
}
[data-gk-theme="forest"][data-gk-mode="dark"] .gk-sidebar {
  background: #010409;
}
[data-gk-theme="rose"][data-gk-mode="dark"] .gk-sidebar {
  background: #010409;
}
[data-gk-theme="amber"][data-gk-mode="dark"] .gk-sidebar {
  background: #010409;
}
[data-gk-theme="slate"][data-gk-mode="dark"] .gk-sidebar {
  background: #010409;
}

.gk-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background: var(--gk-sidebar-bg);
  color: var(--gk-sidebar-text);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition:
    width 0.25s ease,
    transform 0.25s ease;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--gk-sidebar-border);
}
.gk-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--gk-sidebar-border);
  background: var(--gk-sidebar-brand-bg);
}
.gk-sidebar-brand-icon {
  font-size: 28px;
  color: var(--gk-sidebar-accent, #818cf8);
}
.gk-sidebar-brand-text {
  flex: 1;
  min-width: 0;
}
.gk-sidebar-brand-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  white-space: nowrap;
}
.gk-sidebar-brand-version {
  font-size: 11px;
  color: var(--gk-sidebar-text-muted);
}
.gk-sidebar-close-mobile {
  display: none;
  background: none;
  border: none;
  color: var(--gk-sidebar-text-muted);
  cursor: pointer;
  padding: 4px;
}
.gk-sidebar-close-mobile:hover {
  color: var(--gk-sidebar-text-hover);
}
.gk-sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gk-sidebar-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gk-sidebar-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 16px 12px 6px;
}
.gk-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--gk-sidebar-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  border-left: 3px solid transparent;
}
.gk-sidebar-item:hover {
  background: var(--gk-sidebar-item-hover);
  color: var(--gk-sidebar-text-hover);
}
.gk-sidebar-item:hover .gk-sidebar-icon {
  color: var(--gk-sidebar-text-hover);
}
.gk-sidebar-item.active {
  background: var(--gk-sidebar-item-active);
  color: var(--gk-sidebar-text-hover);
  border-left-color: var(--gk-sidebar-accent);
  padding-left: 9px;
}
.gk-sidebar-item.active .gk-sidebar-icon {
  color: var(--gk-sidebar-accent);
}
.gk-sidebar-icon {
  font-size: 20px;
  color: var(--gk-sidebar-icon-muted);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.15s;
}
.gk-sidebar-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s ease;
}
.gk-sidebar.collapsed .gk-sidebar-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
/* Sidebar groups with subitems */
.gk-sidebar-group-toggle {
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: none;
  font: inherit;
  background: none;
}
.gk-sidebar-chevron {
  font-size: 18px !important;
  margin-left: auto;
  opacity: 0.5;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.gk-sidebar-group-toggle.collapsed .gk-sidebar-chevron {
  transform: rotate(-90deg);
}
.gk-sidebar-subitems {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  max-height: 500px;
  transition:
    max-height 0.25s ease,
    opacity 0.2s ease;
  opacity: 1;
}
.gk-sidebar-subitems.collapsed {
  max-height: 0;
  opacity: 0;
}
.gk-sidebar-subitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 46px;
  border-radius: 6px;
  color: var(--gk-sidebar-text);
  text-decoration: none;
  font-size: 13px;
  transition: all 0.15s;
  opacity: 0.85;
}
.gk-sidebar-subitem:hover {
  background: var(--gk-sidebar-item-hover);
  color: var(--gk-sidebar-text);
}
.gk-sidebar-subitem.active {
  color: var(--gk-sidebar-text-hover);
  background: var(--gk-sidebar-item-active);
}
.gk-sidebar-subitem .gk-sidebar-icon {
  font-size: 17px;
  width: 20px;
  color: var(--gk-sidebar-icon-muted);
}
.gk-sidebar-subitem:hover .gk-sidebar-icon {
  color: var(--gk-sidebar-text-hover);
}
.gk-sidebar-subitem.active .gk-sidebar-icon {
  color: var(--gk-sidebar-accent);
}
.gk-sidebar-divider {
  height: 1px;
  background: var(--gk-sidebar-border);
  margin: 10px 14px;
}
.gk-sidebar.collapsed .gk-sidebar-subitems {
  max-height: 0;
  opacity: 0;
}
.gk-sidebar.collapsed .gk-sidebar-chevron {
  display: none;
}
.gk-sidebar.collapsed .gk-sidebar-badge {
  display: none;
}

.gk-sidebar-badge {
  font-size: 11px;
  font-weight: 600;
  background: var(--gk-primary, #6366f1);
  color: #fff;
  padding: 1px 7px;
  border-radius: 9999px;
  min-width: 20px;
  text-align: center;
}
.gk-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
}
.gk-sidebar-toggle {
  display: none;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  color: var(--gk-text-muted, #64748b);
  transition: all 0.15s;
}
.gk-sidebar-toggle:hover {
  background: var(--gk-surface-container, #f1f5f9);
  color: var(--gk-text);
}

/* Sidebar: collapsed state (icons only) */
.gk-sidebar.collapsed {
  width: 60px;
}
.gk-sidebar.collapsed .gk-sidebar-brand-text,
.gk-sidebar.collapsed .gk-sidebar-badge,
.gk-sidebar.collapsed .gk-sidebar-group-label,
.gk-sidebar.collapsed .gk-sidebar-collapse-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    width 0.15s ease;
}
.gk-sidebar-brand-text,
.gk-sidebar-badge,
.gk-sidebar-group-label,
.gk-sidebar-collapse-label {
  transition: opacity 0.2s ease;
}
.gk-sidebar.collapsed .gk-sidebar-brand {
  padding: 10px 0;
  justify-content: center;
  gap: 0;
}
.gk-sidebar.collapsed .gk-sidebar-brand-icon {
  display: none;
}
.gk-sidebar.collapsed .gk-sidebar-brand-text {
  display: none;
}
.gk-sidebar.collapsed .gk-sidebar-close-mobile {
  display: none;
}
.gk-sidebar.collapsed .gk-sidebar-collapse-btn {
  margin: 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
}
.gk-sidebar.collapsed .gk-sidebar-collapse-btn {
  margin: 0 auto;
}
.gk-sidebar.collapsed .gk-sidebar-item {
  justify-content: center !important;
  padding: 10px 0 !important;
  gap: 0 !important;
  text-align: center;
}
.gk-sidebar.collapsed .gk-sidebar-group-toggle {
  justify-content: center !important;
  padding: 10px 0 !important;
  gap: 0 !important;
}
.gk-sidebar.collapsed .gk-sidebar-icon {
  width: auto !important;
  font-size: 22px;
  margin: 0 !important;
  flex-shrink: 0;
}
.gk-sidebar.collapsed .gk-sidebar-label {
  display: none !important;
}
.gk-sidebar.collapsed .gk-sidebar-nav {
  padding: 8px 4px;
  gap: 2px;
}
.gk-sidebar.collapsed .gk-sidebar-close-mobile {
  display: none;
}
.gk-sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--gk-sidebar-text-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: all 0.15s;
}
.gk-sidebar-collapse-btn:hover {
  background: var(--gk-sidebar-item-hover);
  color: var(--gk-sidebar-text-hover);
}
.gk-sidebar.collapsed
  .gk-sidebar-collapse-btn:not(.gk-sidebar-collapse-bottom) {
  padding: 10px;
  border-radius: 10px;
  margin: 0 auto;
  display: flex;
  background: var(--gk-sidebar-item-hover, rgba(255, 255, 255, 0.08));
}
.gk-sidebar-collapse-bottom {
  gap: 8px;
  padding: 12px 14px;
  margin: 4px 10px 12px;
  border-top: 1px solid var(--gk-sidebar-border);
  border-radius: 6px;
  width: calc(100% - 20px);
  font-size: 13px;
  justify-content: flex-start;
}
.gk-sidebar-collapse-bottom .material-icons {
  font-size: 20px;
  transition: transform 0.25s;
}
.gk-sidebar.collapsed .gk-sidebar-collapse-bottom {
  justify-content: center;
  margin: 4px 6px 12px;
  width: calc(100% - 12px);
}
.gk-sidebar.collapsed .gk-sidebar-collapse-bottom .material-icons {
  transform: rotate(180deg);
}

.gk-sidebar.collapsed .gk-sidebar-item {
  position: relative;
}
.gk-sidebar.collapsed .gk-sidebar-item::after {
  content: attr(data-label);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: var(--gk-sidebar-bg);
  color: var(--gk-sidebar-text-hover);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  margin-left: 8px;
  z-index: 1001;
}
.gk-sidebar.collapsed .gk-sidebar-item:hover::after {
  opacity: 1;
}

/* Sidebar: content offset */
.gk-with-sidebar {
  margin-left: 260px;
  transition: margin-left 0.25s ease;
}

/* === LAYOUT MAX-WIDTH (--gk-content-max-width) ===
   Sidebar bleibt links. Content-Bereich wird auf (max-width - sidebar) begrenzt. */
.gk-with-sidebar {
  max-width: calc(var(--gk-content-max-width, 1600px) - 260px);
}
.gk-sidebar.collapsed ~ .gk-with-sidebar {
  max-width: calc(var(--gk-content-max-width, 1600px) - 60px);
}
.gk-sidebar.collapsed ~ .gk-with-sidebar {
  margin-left: 60px;
}

@media (max-width: 768px) {
  .gk-sidebar {
    transform: translateX(-100%);
  }
  .gk-sidebar.open {
    transform: translateX(0);
  }
  .gk-sidebar-close-mobile {
    display: block;
  }
  .gk-sidebar-collapse-btn {
    display: none;
  }
  .gk-sidebar-overlay.open {
    display: block;
  }
  .gk-sidebar-toggle {
    display: inline-flex;
  }
  .gk-with-sidebar {
    margin-left: 0;
  }
}

/* === TOOLTIP === */
.gk-tooltip {
  position: relative;
}
.gk-btn[title] {
  position: relative;
}
.gk-btn[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  animation: gk-tooltip-in 0.15s ease;
}
.gk-btn[title]:hover::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1e293b;
  pointer-events: none;
  z-index: 9999;
  animation: gk-tooltip-in 0.15s ease;
}
@keyframes gk-tooltip-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* === CARD === */
.gk-card {
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.gk-card-title {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gk-primary, #6366f1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gk-card-flat {
  box-shadow: none;
  border: 1px solid var(--gk-outline-variant, #e2e8f0);
}
.gk-card-elevated {
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.04);
  border: none;
}

/* Form field spacing */
.gk-field {
  margin-bottom: 16px;
}
.gk-field:last-child {
  margin-bottom: 0;
}

/* === TOAST === */
/* Toast / Snackbar (M3) */
.gk-toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  z-index: 10000;
  pointer-events: none;
}
.gk-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 14px 16px;
  border-radius: 12px;
  min-width: 300px;
  max-width: 560px;
  pointer-events: auto;
  animation: gk-toast-in 0.3s cubic-bezier(0.2, 0, 0, 1);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  box-shadow:
    0 3px 5px -1px rgba(0, 0, 0, 0.1),
    0 6px 10px rgba(0, 0, 0, 0.07),
    0 1px 18px rgba(0, 0, 0, 0.06);
}
.gk-toast-info {
  background: #1e293b;
  color: #f1f5f9;
}
.gk-toast-success {
  background: #065f46;
  color: #d1fae5;
}
.gk-toast-error {
  background: #881337;
  color: #ffe4e6;
}
.gk-toast-warning {
  background: #78350f;
  color: #fef3c7;
}
.gk-toast-icon {
  font-size: 22px;
  flex-shrink: 0;
  opacity: 0.9;
}
.gk-toast-close {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
  margin-left: auto;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.15s,
    background 0.15s;
  flex-shrink: 0;
}
.gk-toast-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}
@keyframes gk-toast-in {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.gk-toast-out {
  animation: gk-toast-out 0.2s ease forwards;
}
@keyframes gk-toast-out {
  to {
    transform: translateY(16px);
    opacity: 0;
  }
}

/* === CONFIRM DIALOG === */
.gk-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: gk-fade-in 0.15s ease;
}
.gk-confirm-box {
  background: var(--gk-bg, #fff);
  border-radius: var(--gk-radius);
  box-shadow: var(--gk-shadow-lg);
  width: 90%;
  max-width: 420px;
  overflow: hidden;
  animation: gk-scale-in 0.2s ease;
}
.gk-confirm-header {
  padding: 16px 20px 0;
}
.gk-confirm-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.gk-confirm-body {
  padding: 12px 20px 20px;
}
.gk-confirm-body p {
  margin: 0;
  font-size: 14px;
  color: var(--gk-text-muted, #6b7280);
  line-height: 1.5;
}
.gk-confirm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--gk-border, #e5e7eb);
  background: var(--gk-bg-subtle, #f9fafb);
}
@keyframes gk-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes gk-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* === RESPONSIVE === */
/* (Consolidated into mobile blocks at end of file) */

/* === HEADER === */
.gk-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  height: auto;
  min-height: 56px;
  padding: 8px 24px;
  background: #fff;
  border-bottom: 1px solid var(--gk-border, #e2e8f0);
  gap: 16px;
  z-index: 200;
  width: 100%;
  box-sizing: border-box;
}
.gk-header > * {
  flex-shrink: 0;
}

/* Fixed Header (full-width, oben fixiert) */
.gk-header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* Sticky Header (scrollt mit, klebt oben) */
.gk-header-sticky {
  position: sticky;
  top: 0;
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.85);
}

/* Backward-compat utility */
.gk-body-with-header {
  padding-top: 56px;
}

/* === LAYOUT: header-first (Default) === */
[data-gk-layout="header-first"] .gk-header-fixed,
.gk-layout-header-first .gk-header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
}
[data-gk-layout="header-first"] .gk-sidebar,
.gk-layout-header-first .gk-sidebar {
  top: 56px;
  height: calc(100vh - 56px);
}
[data-gk-layout="header-first"] .gk-with-sidebar,
.gk-layout-header-first .gk-with-sidebar {
  padding-top: 56px;
}

/* === LAYOUT: sidebar-first === */
[data-gk-layout="sidebar-first"] .gk-header-fixed,
.gk-layout-sidebar-first .gk-header-fixed {
  position: fixed;
  top: 0;
  left: 260px;
  right: 0;
  z-index: 200;
  transition: left 0.25s ease;
}
[data-gk-layout="sidebar-first"] .gk-sidebar,
.gk-layout-sidebar-first .gk-sidebar {
  top: 0;
  height: 100vh;
  z-index: 300; /* Sidebar ueber Header */
}
[data-gk-layout="sidebar-first"]
  .gk-sidebar.collapsed
  ~ .gk-with-sidebar
  .gk-header-fixed,
.gk-layout-sidebar-first
  .gk-sidebar.collapsed
  ~ .gk-with-sidebar
  .gk-header-fixed,
[data-gk-layout="sidebar-first"] .gk-sidebar.collapsed + .gk-header-fixed,
.gk-layout-sidebar-first .gk-sidebar.collapsed + .gk-header-fixed {
  left: 60px;
}
[data-gk-layout="sidebar-first"] .gk-with-sidebar,
.gk-layout-sidebar-first .gk-with-sidebar {
  padding-top: 56px;
}

/* Mobile: Immer header-first */
@media (max-width: 768px) {
  [data-gk-layout="sidebar-first"] .gk-header-fixed {
    left: 0 !important;
  }
  [data-gk-layout="sidebar-first"] .gk-sidebar {
    top: 0;
    height: 100vh;
  }
}

.gk-header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.gk-header-center {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  max-width: 400px;
}
.gk-header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.gk-header-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.gk-header-title h1 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Breadcrumb */
/* === BREADCRUMB === */
.gk-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gk-on-surface-variant);
  padding: 8px 0;
  margin-bottom: 16px;
}
.gk-header-title .gk-breadcrumb {
  padding: 2px 0 0;
  margin: 0;
  font-size: 12px;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gk-breadcrumb a {
  color: var(--gk-on-surface-variant);
  text-decoration: none;
  transition: color 0.15s;
}
.gk-breadcrumb a:hover {
  color: var(--gk-primary);
}
.gk-breadcrumb-sep {
  font-size: 11px;
  color: var(--gk-outline);
  display: flex;
  align-items: center;
}
.gk-breadcrumb-sep .material-icons {
  font-size: 16px;
}
.gk-breadcrumb-current {
  color: var(--gk-on-surface);
  font-weight: 500;
}
.gk-breadcrumb .material-icons {
  font-size: 16px;
  vertical-align: middle;
}

/* Header Search (pill) */
.gk-header-search {
  display: flex;
  align-items: center;
  background: var(--gk-bg-muted, #f1f5f9);
  border-radius: 9999px;
  padding: 8px 16px;
  gap: 8px;
  width: 100%;
}
.gk-header-search input {
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  width: 100%;
  font-family: inherit;
}
.gk-header-search .material-icons {
  color: var(--gk-text-muted, #94a3b8);
  font-size: 20px;
}

/* Header actions */
.gk-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Menu toggle (mobile) */
.gk-header-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  color: var(--gk-text);
}
.gk-header-menu-toggle:hover {
  background: var(--gk-bg-muted, #f1f5f9);
}

/* Avatar */
.gk-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.gk-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gk-primary, #6366f1);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* User dropdown */
.gk-header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  position: relative;
  white-space: nowrap;
}
.gk-header-user:hover {
  background: var(--gk-bg-muted, #f1f5f9);
}
.gk-header-user-name {
  font-size: 14px;
  font-weight: 500;
}
.gk-header-user .gk-dropdown-menu {
  display: none !important;
}
.gk-header-user.open .gk-dropdown-menu {
  display: block !important;
}

/* Dropdown menu */
.gk-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  min-width: 200px;
  padding: 8px 0;
  z-index: 200;
}
[data-gk-dropdown].open .gk-dropdown-menu {
  display: block;
}
.gk-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--gk-text);
  text-decoration: none;
  transition: background 0.1s;
}
.gk-dropdown-item:hover {
  background: var(--gk-bg-muted, #f1f5f9);
}
.gk-dropdown-item .material-icons {
  font-size: 20px;
  color: var(--gk-text-muted);
}
.gk-dropdown-divider {
  height: 1px;
  background: var(--gk-border, #e2e8f0);
  margin: 4px 0;
}

/* === TABLE SIZES === */
.gk-table-sm th {
  padding: 6px 10px;
  font-size: 11px;
}
.gk-table-sm td {
  padding: 6px 10px;
  font-size: 13px;
}
.gk-table-md th {
  padding: 10px 16px;
  font-size: 12px;
}
.gk-table-md td {
  padding: 12px 16px;
  font-size: 14px;
}
.gk-table-lg th {
  padding: 14px 20px;
  font-size: 13px;
}
.gk-table-lg td {
  padding: 16px 20px;
  font-size: 15px;
}

/* === TABLE VARIANTS === */
.gk-table-bordered th,
.gk-table-bordered td {
  border: 1px solid var(--gk-border, #e2e8f0);
}
.gk-table-striped tbody tr:nth-child(even) {
  background: var(--gk-bg-muted, #f8fafc);
}
.gk-table-minimal th {
  border: none;
  background: transparent;
  color: var(--gk-text-muted, #94a3b8);
}
.gk-table-minimal td {
  border-bottom: 1px solid var(--gk-border, #f1f5f9);
}
.gk-table-minimal {
  box-shadow: none;
}
.gk-table-flat {
  box-shadow: none;
  border-radius: 0;
  border: none;
}
.gk-table-flat th {
  background: transparent;
  border-bottom: 2px solid var(--gk-border, #e2e8f0);
}
.gk-table-flat td {
  border-bottom: 1px solid var(--gk-border, #f1f5f9);
}

/* Celled: Vollstaendiges Gitternetz */
.gk-table-celled,
.gk-table-celled th,
.gk-table-celled td {
  border: 1px solid var(--gk-outline-variant, #d0d7de);
}
.gk-table-celled {
  border-collapse: collapse;
}

/* Padded: Extra Padding fuer bessere Lesbarkeit */
.gk-table-padded th {
  padding: 14px 20px;
}
.gk-table-padded td {
  padding: 16px 20px;
  font-size: 15px;
}

/* Very Compact: Noch dichter als sm */
.gk-table-xs th {
  padding: 4px 8px;
  font-size: 10px;
}
.gk-table-xs td {
  padding: 4px 8px;
  font-size: 12px;
}

/* Compact */
.gk-table-compact th,
.gk-table-compact td {
  padding: 6px 12px;
  font-size: 13px;
}
.gk-table-very-compact th,
.gk-table-very-compact td {
  padding: 4px 8px;
  font-size: 12px;
}

/* Single Line: Kein Textumbruch */
.gk-table-single-line td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Fixed: Gleiche Spaltenbreiten */
.gk-table-fixed {
  table-layout: fixed;
}

/* Selectable: Zeilen wirken klickbar */
.gk-table-selectable tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}
.gk-table-selectable tbody tr:hover {
  background: var(--gk-primary-50, #eef2ff);
}

/* Definition: Erste Spalte als Label */
.gk-table-definition td:first-child {
  font-weight: 600;
  color: var(--gk-on-surface-variant);
  background: var(--gk-surface-container, #f6f8fa);
  white-space: nowrap;
}
.gk-table-definition thead th:first-child {
  background: transparent;
}

/* Inverted: Dunkle Tabelle im Light Mode */
.gk-table-inverted {
  background: #1e293b;
  color: #e2e8f0;
}
.gk-table-inverted th {
  background: #0f172a;
  color: #94a3b8;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.gk-table-inverted td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.gk-table-inverted tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}
.gk-table-inverted tbody tr:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* === TABLE MOBILE: Card === */
@media (max-width: 768px) {
  .gk-table-mobile-card table {
    display: block;
  }
  .gk-table-mobile-card thead {
    display: none;
  }
  .gk-table-mobile-card tbody {
    display: block;
  }
  .gk-table-mobile-card tr {
    display: block;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 16px;
    margin-bottom: 12px;
  }
  .gk-table-mobile-card td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: none;
    border-bottom: 1px solid var(--gk-border, #f1f5f9);
  }
  .gk-table-mobile-card td:last-child {
    border-bottom: none;
  }
  .gk-table-mobile-card td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 12px;
    color: var(--gk-text-muted, #94a3b8);
    text-transform: uppercase;
    flex: 0 0 40%;
  }
  .gk-table-mobile-card td.gk-actions {
    justify-content: flex-end;
    padding-top: 12px;
    border-bottom: none;
  }
  .gk-table-mobile-card td.gk-actions::before {
    display: none;
  }
}

/* === TABLE MOBILE: Scroll === */
@media (max-width: 768px) {
  .gk-table-mobile-scroll .gk-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .gk-table-mobile-scroll table {
    min-width: 600px;
  }
}

/* === TABLE MOBILE: Hide Cols === */
@media (max-width: 768px) {
  .gk-hide-mobile {
    display: none !important;
  }
}

/* === SEGMENT === */
.gk-segment {
  background: var(--gk-surface, #fff);
  border: 1px solid var(--gk-outline-variant, #d0d7de);
  border-radius: var(--gk-radius, 12px);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.gk-segment-raised {
  box-shadow: var(--gk-shadow-lg);
  border: none;
}
.gk-segment-basic {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 20px 0;
}
.gk-segment-compact {
  padding: 12px 16px;
}
.gk-segment-padded {
  padding: 28px 32px;
}
.gk-segment + .gk-segment {
  margin-top: 0;
  border-top: none;
  border-radius: 0;
}
.gk-segment:first-child {
  border-radius: var(--gk-radius) var(--gk-radius) 0 0;
}
.gk-segment:last-child {
  border-radius: 0 0 var(--gk-radius) var(--gk-radius);
}
.gk-segment:only-child {
  border-radius: var(--gk-radius);
}
.gk-segments {
  display: flex;
  flex-direction: column;
}
.gk-segments .gk-segment {
  margin-bottom: 0;
}
.gk-segment-header {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--gk-on-surface);
}
.gk-segment-muted {
  background: var(--gk-surface-container);
}

/* === MESSAGE === */
.gk-message {
  padding: 14px 20px;
  border-radius: var(--gk-radius-sm, 8px);
  border: 1px solid var(--gk-outline-variant);
  background: var(--gk-surface-container);
  color: var(--gk-on-surface);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.gk-message .material-icons {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.gk-message-content {
  flex: 1;
}
.gk-message-header {
  font-weight: 600;
  margin-bottom: 4px;
}
.gk-message-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: inherit;
  opacity: 0.5;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.gk-message-dismiss:hover {
  opacity: 1;
}
.gk-message-info {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.25);
  color: #0284c7;
}
.gk-message-success {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color: #059669;
}
.gk-message-warning {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
  color: #b45309;
}
.gk-message-error {
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.25);
  color: #be123c;
}
.gk-message-info .material-icons {
  color: #0ea5e9;
}
.gk-message-success .material-icons {
  color: #10b981;
}
.gk-message-warning .material-icons {
  color: #f59e0b;
}
.gk-message-error .material-icons {
  color: #f43f5e;
}
.gk-message-compact {
  padding: 10px 16px;
  font-size: 13px;
}
.gk-message-list {
  margin: 8px 0 0;
  padding-left: 18px;
}
.gk-message-list li {
  margin-bottom: 4px;
}

/* === CARDS GRID === */
.gk-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 16px;
}
.gk-cards-2 {
  grid-template-columns: repeat(2, 1fr);
}
.gk-cards-3 {
  grid-template-columns: repeat(3, 1fr);
}
.gk-cards-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gk-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gk-outline-variant);
  font-weight: 600;
  font-size: 15px;
}
.gk-card-body {
  padding: 20px;
}
.gk-card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--gk-outline-variant);
  font-size: 13px;
  color: var(--gk-on-surface-variant);
}
.gk-card-image {
  border-radius: var(--gk-radius) var(--gk-radius) 0 0;
  width: 100%;
  display: block;
}
.gk-card-meta {
  font-size: 12px;
  color: var(--gk-on-surface-variant);
  margin-bottom: 8px;
}
.gk-card-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gk-on-surface);
}
.gk-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow 0.15s,
    transform 0.15s;
}
.gk-card-link:hover {
  box-shadow: var(--gk-shadow-lg);
  transform: translateY(-2px);
}

/* === ACCORDION === */
.gk-accordion {
  border: 1px solid var(--gk-outline-variant);
  border-radius: var(--gk-radius);
  overflow: hidden;
}
.gk-accordion-item {
  border-bottom: 1px solid var(--gk-outline-variant);
}
.gk-accordion-item:last-child {
  border-bottom: none;
}
.gk-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  border: none;
  background: var(--gk-surface);
  font-size: 14px;
  font-weight: 500;
  color: var(--gk-on-surface);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s;
}
.gk-accordion-trigger:hover {
  background: var(--gk-surface-container);
}
.gk-accordion-trigger .material-icons {
  font-size: 20px;
  color: var(--gk-on-surface-variant);
  transition: transform 0.2s ease;
}
.gk-accordion-item.open .gk-accordion-trigger .material-icons {
  transform: rotate(180deg);
}
.gk-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.gk-accordion-item.open .gk-accordion-content {
  max-height: 500px;
}
.gk-accordion-body {
  padding: 0 20px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gk-on-surface-variant);
}
.gk-accordion-flush {
  border: none;
  border-radius: 0;
}
.gk-accordion-flush .gk-accordion-item {
  border-bottom: 1px solid var(--gk-outline-variant);
}
.gk-accordion-flush .gk-accordion-trigger {
  padding-left: 0;
  padding-right: 0;
}
.gk-accordion-flush .gk-accordion-body {
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================
   RESPONSIVE — Consolidated Mobile Breakpoints
   ============================================================ */

/* === TABLET / MOBILE (max-width: 768px) === */
@media (max-width: 768px) {
  /* Form rows */
  .gk-form-row {
    grid-template-columns: 1fr;
  }
  .gk-form-row > .gk-field {
    grid-column: span 1 !important;
    width: 100% !important;
  }

  /* Legacy flex rows */
  .gk-row {
    flex-direction: column;
  }
  .gk-row > .gk-field {
    flex: 1 1 100% !important;
  }

  /* Table: Default Mobile (horizontal scroll) */
  .gk-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .gk-table-wrap .gk-table {
    min-width: 540px;
  }

  /* Table: Touch-friendly padding */
  .gk-table th,
  .gk-table td {
    padding: 10px 12px;
  }
  .gk-table-sm th,
  .gk-table-sm td {
    padding: 8px 10px;
  }
  .gk-pagination {
    flex-wrap: wrap;
  }
  .gk-page-btn {
    min-width: 36px;
    height: 36px;
  }

  /* Toolbar */
  .gk-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .gk-search {
    width: 100%;
    min-width: 0;
  }
  .gk-filter {
    width: 100%;
  }

  /* Header */
  .gk-header {
    padding: 0 12px;
    height: 56px;
  }
  .gk-header-title {
    font-size: 15px;
  }
  .gk-header-actions {
    gap: 4px;
  }
  .gk-header-search {
    display: none;
  }
  .gk-header-menu-toggle {
    display: flex;
  }
  .gk-header-center {
    display: none;
  }
  .gk-header-user-name {
    display: none;
  }

  /* Cards Grid */
  .gk-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .gk-cards-2,
  .gk-cards-3,
  .gk-cards-4 {
    grid-template-columns: 1fr;
  }

  /* Stat Cards */
  .gk-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .gk-stat-card {
    padding: 12px 14px;
  }
  .gk-stat-value {
    font-size: 22px;
  }

  /* Modal */
  .gk-modal {
    width: 95% !important;
    max-width: none !important;
    max-height: 90vh;
    margin: 5vh auto;
  }
  .gk-modal-large {
    width: 95% !important;
  }

  /* Segment & Message */
  .gk-segment {
    padding: 14px 16px;
  }
  .gk-segment-padded {
    padding: 18px 20px;
  }
  .gk-message {
    padding: 12px 14px;
    gap: 10px;
    font-size: 13px;
  }

  /* Accordion */
  .gk-accordion-trigger {
    padding: 12px 16px;
  }
  .gk-accordion-body {
    padding: 0 16px 14px;
  }

  /* Breadcrumb */
  .gk-breadcrumb {
    font-size: 12px;
    gap: 4px;
    flex-wrap: wrap;
  }

  /* Form Actions */
  .gk-form-actions {
    flex-direction: column;
  }
  .gk-form-actions .gk-btn {
    width: 100%;
  }
  .gk-field-inline {
    flex-direction: column;
    align-items: stretch;
  }
  .gk-field-inline > .gk-label-text {
    margin-bottom: 6px;
  }

  /* Toast */
  .gk-toast-container {
    left: 12px;
    right: 12px;
    transform: none;
    bottom: 12px;
  }
  .gk-toast {
    min-width: auto;
    max-width: none;
    width: 100%;
  }
}

/* === TABLET (769px - 1024px) === */
@media (min-width: 769px) and (max-width: 1024px) {
  .gk-cards-3,
  .gk-cards-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* === PHONE ONLY (max-width: 480px) === */
@media (max-width: 480px) {
  /* Stat Cards: single column */
  .gk-stat-grid {
    grid-template-columns: 1fr;
  }

  /* Button Groups: vertical stack */
  .gk-btn-group {
    flex-direction: column;
    border-radius: var(--gk-radius-sm);
  }
  .gk-btn-group .gk-btn {
    border-radius: 0;
    border-right-width: 1.5px;
    border-bottom-width: 0;
  }
  .gk-btn-group .gk-btn:first-child {
    border-radius: var(--gk-radius-sm) var(--gk-radius-sm) 0 0;
  }
  .gk-btn-group .gk-btn:last-child {
    border-radius: 0 0 var(--gk-radius-sm) var(--gk-radius-sm);
    border-bottom-width: 1.5px;
  }
}

/* === AVATAR === */
.gk-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--gk-primary-100, #e0e7ff);
  color: var(--gk-primary-700, #4338ca);
  font-weight: 600;
  text-transform: uppercase;
  position: relative;
}
.gk-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gk-avatar-xs {
  width: 24px;
  height: 24px;
  font-size: 10px;
}
.gk-avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 12px;
}
.gk-avatar-md {
  width: 40px;
  height: 40px;
  font-size: 14px;
}
.gk-avatar-lg {
  width: 56px;
  height: 56px;
  font-size: 18px;
}
.gk-avatar-xl {
  width: 80px;
  height: 80px;
  font-size: 24px;
}
.gk-avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--gk-surface, #fff);
}
.gk-avatar-status.online {
  background: #10b981;
}
.gk-avatar-status.offline {
  background: #94a3b8;
}
.gk-avatar-status.busy {
  background: #f43f5e;
}
.gk-avatar-status.away {
  background: #f59e0b;
}
.gk-avatar-lg .gk-avatar-status {
  width: 14px;
  height: 14px;
}
.gk-avatar-xl .gk-avatar-status {
  width: 16px;
  height: 16px;
  border-width: 3px;
}
.gk-avatar-group {
  display: flex;
}
.gk-avatar-group .gk-avatar {
  margin-left: -8px;
  border: 2px solid var(--gk-surface, #fff);
}
.gk-avatar-group .gk-avatar:first-child {
  margin-left: 0;
}
.gk-avatar-square {
  border-radius: var(--gk-radius-sm, 8px);
}

/* === GALLERY === */
.gk-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.gk-gallery-sm {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
}
.gk-gallery-lg {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.gk-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--gk-radius-sm, 8px);
  aspect-ratio: 1;
  cursor: pointer;
  background: var(--gk-surface-container);
}
.gk-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.2s ease,
    opacity 0.3s;
}
.gk-gallery-item:hover img {
  transform: scale(1.05);
}
.gk-gallery-item[data-lazy] img {
  opacity: 0;
}
.gk-gallery-item[data-lazy].loaded img {
  opacity: 1;
}
.gk-gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.6));
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  color: #fff;
  font-size: 12px;
}
.gk-gallery-item:hover .gk-gallery-overlay {
  opacity: 1;
}
.gk-gallery-caption {
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* Masonry variant */
.gk-gallery-masonry {
  columns: 4;
  column-gap: 8px;
  display: block;
}
.gk-gallery-masonry .gk-gallery-item {
  aspect-ratio: auto;
  break-inside: avoid;
  margin-bottom: 8px;
  display: block;
}
@media (max-width: 768px) {
  .gk-gallery {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  .gk-gallery-masonry {
    columns: 2;
  }
}

/* === LIGHTBOX === */
.gk-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10002;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  animation: gk-fade-in 0.2s ease;
}
.gk-lightbox.open {
  display: flex;
}
.gk-lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: gk-scale-in 0.2s ease;
  user-select: none;
}
.gk-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.gk-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
}
.gk-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.gk-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.25);
}
.gk-lightbox-prev {
  left: 16px;
}
.gk-lightbox-next {
  right: 16px;
}
.gk-lightbox-caption {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 16px;
  border-radius: 20px;
  white-space: nowrap;
}
.gk-lightbox-counter {
  position: absolute;
  top: 18px;
  left: 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

/* === DARK MODE === */
[data-gk-mode="dark"],
.gk-dark {
  --gk-primary: #a5b4fc;
  --gk-on-primary: #2e2e8a;
  --gk-primary-container: #4345b0;
  --gk-on-primary-container: #e0e0ff;

  --gk-secondary: #ccc2dc;
  --gk-on-secondary: #332d41;
  --gk-secondary-container: #4a4458;
  --gk-on-secondary-container: #e8def8;

  --gk-tertiary: #6ee7b7;
  --gk-on-tertiary: #064e3b;
  --gk-tertiary-container: #065f46;
  --gk-on-tertiary-container: #d1fae5;

  --gk-error: #fda4af;
  --gk-on-error: #6b1028;
  --gk-error-container: #881337;
  --gk-on-error-container: #ffe4e6;

  --gk-surface-dim: #0d1117;
  --gk-surface: #0d1117;
  --gk-surface-bright: #3a4250;
  --gk-surface-container-lowest: #010409;
  --gk-surface-container-low: #0d1117;
  --gk-surface-container: #161b22;
  --gk-surface-container-high: #21262d;
  --gk-surface-container-highest: #2d333b;
  --gk-on-surface: #e6edf3;
  --gk-on-surface-variant: #8b949e;
  --gk-outline: #484f58;
  --gk-outline-variant: rgba(255, 255, 255, 0.08);

  --gk-warning: #fbbf24;
  --gk-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --gk-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);

  /* Alias-Variablen explizit überschreiben (Fallback-Kette sicherstellen) */
  --gk-bg: #0d1117;
  --gk-bg-muted: #161b22;
  --gk-bg-subtle: #0d1117;
  --gk-bg-hover: #21262d;
  --gk-text: #e6edf3;
  --gk-text-muted: #8b949e;
  --gk-text-subtle: #484f58;
  --gk-border: rgba(255, 255, 255, 0.08);

  /* Legacy dark overrides */
  --gk-primary-hover: #818cf8;
  --gk-success-hover: #34d399;
  --gk-warning-hover: #fbbf24;
  --gk-danger-hover: #fda4af;
  --gk-neutral-50: #2d333b;
  --gk-neutral-100: #21262d;
  --gk-neutral-200: #161b22;
  --gk-neutral-800: #e6edf3;
  --gk-neutral-900: #f8fafc;

  /* Sidebar dark mode */
  --gk-sidebar-bg: #010409;
  --gk-sidebar-text: rgba(255, 255, 255, 0.7);
  --gk-sidebar-text-muted: rgba(255, 255, 255, 0.38);
  --gk-sidebar-text-hover: #ffffff;
  --gk-sidebar-item-hover: rgba(255, 255, 255, 0.09);
  --gk-sidebar-item-active: rgba(255, 255, 255, 0.1);
  --gk-sidebar-border: rgba(255, 255, 255, 0.06);
  --gk-sidebar-accent: #a5b4fc;
  --gk-sidebar-icon-muted: rgba(255, 255, 255, 0.45);

  color-scheme: dark;
}

/* Dark mode: Component adjustments */
[data-gk-mode="dark"] .gk-header,
.gk-dark .gk-header {
  background: var(--gk-surface);
  border-color: var(--gk-outline-variant);
}
[data-gk-mode="dark"] .gk-header-sticky,
.gk-dark .gk-header-sticky {
  background: rgba(13, 17, 23, 0.92);
}
[data-gk-mode="dark"] .gk-modal,
.gk-dark .gk-modal {
  background: #161b22;
}
/* (Dark table overrides consolidated below in Comprehensive Overrides section) */
[data-gk-mode="dark"] .gk-toolbar,
.gk-dark .gk-toolbar {
  border-bottom-color: var(--gk-outline-variant);
}
[data-gk-mode="dark"] .gk-search,
.gk-dark .gk-search {
  background-color: #0d1117;
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--gk-on-surface);
}
[data-gk-mode="dark"] .gk-filter,
.gk-dark .gk-filter {
  background-color: #0d1117;
  border-color: rgba(255, 255, 255, 0.12);
  color: #8b949e;
}
[data-gk-mode="dark"] input,
[data-gk-mode="dark"] select,
[data-gk-mode="dark"] textarea,
.gk-dark input,
.gk-dark select,
.gk-dark textarea {
  background: #0d1117;
  color: #e6edf3;
  border-color: rgba(255, 255, 255, 0.15);
}
[data-gk-mode="dark"] .gk-confirm-box,
.gk-dark .gk-confirm-box {
  background: #161b22;
}
[data-gk-mode="dark"] .gk-toast,
.gk-dark .gk-toast {
  background: #2d333b;
  color: var(--gk-on-surface);
}

/* Dark mode: Komponenten die explizit umgestellt werden müssen */
[data-gk-mode="dark"] .gk-stat-card,
.gk-dark .gk-stat-card {
  background: #161b22;
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--gk-on-surface);
}
[data-gk-mode="dark"] .gk-stat-label,
.gk-dark .gk-stat-label {
  color: var(--gk-on-surface-variant);
}
[data-gk-mode="dark"] .gk-stat-value,
.gk-dark .gk-stat-value {
  color: #f0f6fc;
}

[data-gk-mode="dark"] .gk-chip,
.gk-dark .gk-chip {
  background: #161b22;
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--gk-on-surface);
}
[data-gk-mode="dark"] .gk-chip:hover,
.gk-dark .gk-chip:hover {
  background: #21262d;
}
[data-gk-mode="dark"] .gk-chip.gk-chip-active,
.gk-dark .gk-chip.gk-chip-active {
  background: var(--gk-primary-container);
  color: var(--gk-on-primary-container);
  border-color: var(--gk-primary-container);
}

[data-gk-mode="dark"] .gk-card,
.gk-dark .gk-card {
  background: #161b22;
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--gk-on-surface);
}

/* Segment dark mode */
[data-gk-mode="dark"] .gk-segment,
.gk-dark .gk-segment {
  background: #161b22;
  border-color: rgba(255, 255, 255, 0.1);
}
[data-gk-mode="dark"] .gk-segment-muted,
.gk-dark .gk-segment-muted {
  background: #0d1117;
}

/* Message dark mode */
[data-gk-mode="dark"] .gk-message,
.gk-dark .gk-message {
  background: #161b22;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e6edf3;
}
[data-gk-mode="dark"] .gk-message-info,
.gk-dark .gk-message-info {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.2);
  color: #38bdf8;
}
[data-gk-mode="dark"] .gk-message-success,
.gk-dark .gk-message-success {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}
[data-gk-mode="dark"] .gk-message-warning,
.gk-dark .gk-message-warning {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}
[data-gk-mode="dark"] .gk-message-error,
.gk-dark .gk-message-error {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.2);
  color: #fda4af;
}

/* Cards grid dark mode */
[data-gk-mode="dark"] .gk-card-header,
.gk-dark .gk-card-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-gk-mode="dark"] .gk-card-footer,
.gk-dark .gk-card-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
  color: #8b949e;
}

[data-gk-mode="dark"] .gk-page-btn,
.gk-dark .gk-page-btn {
  background: #161b22;
  border-color: #484f58;
  color: var(--gk-on-surface);
}
[data-gk-mode="dark"] .gk-page-btn:hover,
.gk-dark .gk-page-btn:hover {
  background: #21262d;
}
[data-gk-mode="dark"] .gk-page-btn.active,
.gk-dark .gk-page-btn.active {
  background: var(--gk-primary);
  color: var(--gk-on-primary);
  border-color: var(--gk-primary);
}

/* Dark Mode: Tonal Buttons – helle Backgrounds durch dunkle Varianten ersetzen */
[data-gk-mode="dark"] .gk-btn-tonal.gk-btn-primary,
.gk-dark .gk-btn-tonal.gk-btn-primary {
  background: rgba(99, 102, 241, 0.22);
  color: #c7d2fe;
}
[data-gk-mode="dark"] .gk-btn-tonal.gk-btn-primary:hover,
.gk-dark .gk-btn-tonal.gk-btn-primary:hover {
  background: rgba(99, 102, 241, 0.32);
}
[data-gk-mode="dark"] .gk-btn-tonal.gk-btn-success,
.gk-dark .gk-btn-tonal.gk-btn-success {
  background: rgba(16, 185, 129, 0.18);
  color: #a7f3d0;
}
[data-gk-mode="dark"] .gk-btn-tonal.gk-btn-success:hover,
.gk-dark .gk-btn-tonal.gk-btn-success:hover {
  background: rgba(16, 185, 129, 0.28);
}
[data-gk-mode="dark"] .gk-btn-tonal.gk-btn-warning,
.gk-dark .gk-btn-tonal.gk-btn-warning {
  background: rgba(245, 158, 11, 0.18);
  color: #fde68a;
}
[data-gk-mode="dark"] .gk-btn-tonal.gk-btn-warning:hover,
.gk-dark .gk-btn-tonal.gk-btn-warning:hover {
  background: rgba(245, 158, 11, 0.28);
}
[data-gk-mode="dark"] .gk-btn-tonal.gk-btn-danger,
.gk-dark .gk-btn-tonal.gk-btn-danger {
  background: rgba(239, 68, 68, 0.18);
  color: #fecaca;
}
[data-gk-mode="dark"] .gk-btn-tonal.gk-btn-danger:hover,
.gk-dark .gk-btn-tonal.gk-btn-danger:hover {
  background: rgba(239, 68, 68, 0.28);
}
[data-gk-mode="dark"] .gk-btn-tonal.gk-btn-neutral,
.gk-dark .gk-btn-tonal.gk-btn-neutral {
  background: rgba(255, 255, 255, 0.09);
  color: #e6edf3;
}
[data-gk-mode="dark"] .gk-btn-tonal.gk-btn-neutral:hover,
.gk-dark .gk-btn-tonal.gk-btn-neutral:hover {
  background: rgba(255, 255, 255, 0.15);
}

[data-gk-mode="dark"] .gk-header-search,
.gk-dark .gk-header-search {
  background: #21262d;
  color: var(--gk-on-surface);
}
[data-gk-mode="dark"] .gk-header-search input,
.gk-dark .gk-header-search input {
  background: transparent;
  border: none;
  color: var(--gk-on-surface);
}
[data-gk-mode="dark"] .gk-header-user,
.gk-dark .gk-header-user {
  color: var(--gk-on-surface);
}
[data-gk-mode="dark"] .gk-header-user:hover,
.gk-dark .gk-header-user:hover {
  background: #21262d;
}
[data-gk-mode="dark"] .gk-dropdown-menu,
.gk-dark .gk-dropdown-menu {
  background: #2d333b;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-gk-mode="dark"] .gk-dropdown-item:hover,
.gk-dark .gk-dropdown-item:hover {
  background: #21262d;
}

[data-gk-mode="dark"] .gk-confirm-footer,
.gk-dark .gk-confirm-footer {
  background: #21262d;
  border-color: rgba(255, 255, 255, 0.08);
}

/* Dark Mode: Upload Zone */
[data-gk-mode="dark"] .gk-upload-zone,
.gk-dark .gk-upload-zone {
  border-color: rgba(255, 255, 255, 0.15);
  background: #0d1117;
}
[data-gk-mode="dark"] .gk-upload-zone:hover,
[data-gk-mode="dark"] .gk-upload-zone.gk-dragover,
.gk-dark .gk-upload-zone:hover,
.gk-dark .gk-upload-zone.gk-dragover {
  border-color: var(--gk-primary);
  background: rgba(99, 102, 241, 0.08);
}
[data-gk-mode="dark"] .gk-upload-icon,
.gk-dark .gk-upload-icon {
  color: #8b949e;
}
[data-gk-mode="dark"] .gk-upload-zone:hover .gk-upload-icon,
.gk-dark .gk-upload-zone:hover .gk-upload-icon {
  color: var(--gk-primary);
}
[data-gk-mode="dark"] .gk-upload-hint,
.gk-dark .gk-upload-hint {
  color: #8b949e;
}

/* Dark Mode: Upload Queue */
[data-gk-mode="dark"] .gk-uq-item,
.gk-dark .gk-uq-item {
  background: #161b22;
  border-color: rgba(255, 255, 255, 0.08);
}
[data-gk-mode="dark"] .gk-uq-uploading .gk-uq-status,
.gk-dark .gk-uq-uploading .gk-uq-status {
  background: rgba(99, 102, 241, 0.15);
  color: var(--gk-primary);
}

/* Dark Mode: Toggle */
[data-gk-mode="dark"] .gk-toggle-slider,
.gk-dark .gk-toggle-slider {
  background: rgba(255, 255, 255, 0.15);
}

/* Dark Mode: Form field hints */
[data-gk-mode="dark"] .gk-field-hint,
.gk-dark .gk-field-hint {
  color: #8b949e;
}

/* Dark Mode: Page buttons (pagination) */
[data-gk-mode="dark"] .gk-page-btn.gk-active,
.gk-dark .gk-page-btn.gk-active {
  background: var(--gk-primary);
  color: #fff;
}

/* Dark Mode: Select dropdowns */
[data-gk-mode="dark"] .gk-select-dropdown,
.gk-dark .gk-select-dropdown {
  background: #2d333b;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
[data-gk-mode="dark"] .gk-select-option:hover,
.gk-dark .gk-select-option:hover {
  background: #21262d;
}
[data-gk-mode="dark"] .gk-select-display,
.gk-dark .gk-select-display {
  background: #0d1117;
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--gk-on-surface);
}
[data-gk-mode="dark"] .gk-select-search-input,
.gk-dark .gk-select-search-input {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Dark Mode: Breadcrumbs */
[data-gk-mode="dark"] .gk-breadcrumb a,
.gk-dark .gk-breadcrumb a {
  color: #8b949e;
}
[data-gk-mode="dark"] .gk-breadcrumb a:hover,
.gk-dark .gk-breadcrumb a:hover {
  color: var(--gk-primary);
}
[data-gk-mode="dark"] .gk-breadcrumb-current,
.gk-dark .gk-breadcrumb-current {
  color: #e6edf3;
}

/* Dark Mode: Accordion */
[data-gk-mode="dark"] .gk-accordion,
.gk-dark .gk-accordion {
  border-color: rgba(255, 255, 255, 0.1);
}
[data-gk-mode="dark"] .gk-accordion-trigger,
.gk-dark .gk-accordion-trigger {
  background: #161b22;
  color: #e6edf3;
}
[data-gk-mode="dark"] .gk-accordion-trigger:hover,
.gk-dark .gk-accordion-trigger:hover {
  background: #21262d;
}
[data-gk-mode="dark"] .gk-accordion-item,
.gk-dark .gk-accordion-item {
  border-color: rgba(255, 255, 255, 0.08);
}
[data-gk-mode="dark"] .gk-accordion-body,
.gk-dark .gk-accordion-body {
  color: #8b949e;
}

/* Dark Mode: Form labels */
[data-gk-mode="dark"] .gk-label-text,
.gk-dark .gk-label-text {
  color: #8b949e;
}

/* Dark Mode: Richtext/CKEditor */
[data-gk-mode="dark"] .gk-richtext-wrap,
.gk-dark .gk-richtext-wrap {
  border-color: rgba(255, 255, 255, 0.15);
  background: #0d1117;
}

/* === THEME SWITCHER WIDGET === */
.gk-theme-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
.gk-theme-colors {
  display: flex;
  gap: 8px;
}
.gk-theme-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 0 0 transparent;
}
.gk-theme-dot:hover {
  transform: scale(1.15);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.gk-theme-dot.gk-theme-active {
  border-color: rgba(255, 255, 255, 0.7);
  transform: scale(1.15);
  box-shadow: 0 0 0 2.5px var(--gk-primary);
}
[data-gk-mode="light"] .gk-theme-dot {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: none;
}
[data-gk-mode="light"] .gk-theme-dot:hover {
  border-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}
[data-gk-mode="light"] .gk-theme-dot.gk-theme-active {
  border-color: var(--gk-primary);
  box-shadow: 0 0 0 2.5px var(--gk-primary);
}
.gk-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--gk-outline-variant);
  background: var(--gk-surface-container);
  cursor: pointer;
  color: var(--gk-on-surface);
  transition: all 0.15s;
  flex-shrink: 0;
}
.gk-mode-toggle:hover {
  background: var(--gk-surface-container-high);
  border-color: var(--gk-outline);
}
.gk-mode-toggle .material-icons {
  font-size: 14px;
}
/* Dropdown HTML-Items (z.B. Theme-Switcher im Avatar-Menü) */
.gk-dropdown-html {
  cursor: default;
  padding: 6px 16px;
}
.gk-dropdown-html:hover {
  background: transparent;
}
[data-gk-mode="light"] .gk-mode-dark {
  display: none;
}
[data-gk-mode="dark"] .gk-mode-light {
  display: none;
}
.gk-mode-dark {
  display: none;
}

/* === SEARCHABLE SELECT === */
.gk-select-search,
[data-gk-select-search] {
  position: relative;
}
.gk-select-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid #dde1e6;
  border-radius: 8px;
  background: var(--gk-surface-container-lowest, #fff);
  cursor: pointer;
  font-size: 14px;
  color: var(--gk-text);
  transition: border-color 0.15s;
  box-sizing: border-box;
  height: 44px;
}
.gk-select-display:hover {
  border-color: var(--gk-outline, #94a3b8);
}
.gk-select-display.open {
  border-color: var(--gk-primary);
  border-width: 2px;
  padding: 9.5px 13.5px;
}
.gk-select-arrow {
  font-size: 20px;
  color: var(--gk-outline);
  transition: transform 0.2s;
}
.gk-select-display.open .gk-select-arrow {
  transform: rotate(180deg);
}
.gk-select-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--gk-surface, #fff);
  border: 1px solid var(--gk-outline-variant);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  z-index: 500;
  max-height: 300px;
  overflow: hidden;
}
.gk-select-display.open + .gk-select-dropdown {
  display: block;
}
.gk-select-search-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--gk-outline-variant);
}
.gk-select-search-input input {
  border: none;
  outline: none;
  font-size: 14px;
  width: 100%;
  background: none;
  font-family: inherit;
  color: var(--gk-text);
}
.gk-select-search-input .material-icons {
  color: var(--gk-outline);
  font-size: 20px;
}
.gk-select-options {
  overflow-y: auto;
  max-height: 240px;
  padding: 4px 0;
}
.gk-select-option {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.1s;
}
.gk-select-option:hover {
  background: var(--gk-surface-container, #f1f5f9);
}
.gk-select-option.selected {
  background: rgba(99, 102, 241, 0.08);
  color: var(--gk-primary);
  font-weight: 500;
}
.gk-select-option.hidden {
  display: none;
}
.gk-select-empty {
  padding: 16px;
  text-align: center;
  color: var(--gk-outline);
  font-size: 13px;
}
.gk-select-disabled .gk-select-display {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--gk-bg-muted);
}

/* === MULTI-SELECT === */
.gk-multiselect {
  position: relative;
}
.gk-multiselect-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1.5px solid var(--gk-outline-variant, #cbd5e1);
  border-radius: 8px;
  background: var(--gk-surface-container-lowest, #fff);
  cursor: text;
  min-height: 44px;
  flex-wrap: wrap;
}
.gk-multiselect-display:hover {
  border-color: var(--gk-outline, #94a3b8);
}
.gk-multiselect-display.open {
  border-color: var(--gk-primary);
  border-width: 2px;
  padding: 5.5px 13.5px;
}
.gk-multiselect-display.open + .gk-select-dropdown {
  display: block;
}
.gk-multiselect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  align-items: center;
}
.gk-multiselect-input {
  border: none;
  outline: none;
  font-size: 14px;
  min-width: 80px;
  flex: 1;
  background: none;
  padding: 4px 0;
  font-family: inherit;
}
.gk-chip-selected {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  background: var(--gk-primary-container, #e0e0ff);
  color: var(--gk-on-primary-container, #1a1a6b);
}
.gk-chip-remove {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--gk-on-primary-container, #1a1a6b);
  opacity: 0.6;
  padding: 0 2px;
}
.gk-chip-remove:hover {
  opacity: 1;
}

/* === AJAX SELECT === */
.gk-ajax-select {
  position: relative;
}
.gk-ajax-select .gk-select-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #dde1e6;
  border-radius: 8px;
  background: var(--gk-surface-container-lowest, #fff);
  height: 44px;
  box-sizing: border-box;
}
.gk-ajax-select .gk-select-display:hover {
  border-color: var(--gk-outline);
}
.gk-ajax-search-input {
  border: none;
  outline: none;
  font-size: 14px;
  width: 100%;
  background: none;
  font-family: inherit;
  color: var(--gk-text);
}
.gk-ajax-clear {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--gk-outline);
  padding: 0 4px;
}
.gk-ajax-clear:hover {
  color: var(--gk-danger);
}
.gk-select-icon {
  color: var(--gk-outline);
  font-size: 20px;
}
.gk-select-loading {
  padding: 16px;
  text-align: center;
  color: var(--gk-outline);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.gk-select-option-sub {
  font-size: 12px;
  color: var(--gk-outline);
  margin-top: 2px;
}

/* === PAGE HEADER === */
.gk-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.gk-page-header h1,
.gk-page-header h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--gk-on-surface);
}
.gk-page-header h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--gk-on-surface);
}

/* === SECTION TITLE === */
/* === TABS === */
.gk-tabs {
  width: 100%;
}
.gk-tab-nav {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--gk-border);
  margin-bottom: 20px;
}
.gk-tab-btn {
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gk-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gk-tab-btn:hover {
  color: var(--gk-text);
  background: var(--gk-bg-hover);
}
.gk-tab-btn.gk-active {
  color: var(--gk-primary);
  border-bottom-color: var(--gk-primary);
}
.gk-tab-panel {
  display: none;
}
.gk-tab-panel.gk-active {
  display: block;
}

.gk-section-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--gk-on-surface);
}

/* === SPACER === */
.gk-spacer {
  height: 16px;
}
.gk-spacer-sm {
  height: 8px;
}
.gk-spacer-md {
  height: 20px;
}
.gk-spacer-lg {
  height: 24px;
}
.gk-spacer-xl {
  height: 32px;
}

/* === TEXT UTILITIES === */
.gk-text-muted {
  color: var(--gk-on-surface-variant);
}

/* === GRID === */
.gk-grid {
  display: grid;
  gap: 16px;
}
.gk-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.gk-grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* === FORM PAGE LAYOUT === */
.gk-form-page {
  max-width: 800px;
}

/* === CKEDITOR5 in GridKit === */
.gk-richtext-wrap {
  border: 1px solid var(--gk-border);
  border-radius: var(--gk-radius-sm);
  overflow: hidden;
  transition: border-color 0.15s;
}
.gk-richtext-wrap:focus-within {
  border-color: var(--gk-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.gk-richtext-wrap .ck-editor__editable {
  min-height: 320px;
  font-family: var(--gk-font);
  font-size: 14px;
  border: none !important;
  box-shadow: none !important;
}
.gk-richtext-wrap .ck.ck-toolbar {
  border: none;
  border-bottom: 1px solid var(--gk-border) !important;
  background: var(--gk-bg-muted) !important;
}

/* ============================================================
   DARK MODE — Comprehensive Overrides
   Fixes für alle hardcodierten Light-Mode Farben
   ============================================================ */

/* --- Buttons: outlined neutral (weißer Rahmen → dezent) --- */
[data-gk-mode="dark"] .gk-btn-outlined.gk-btn-neutral,
.gk-dark .gk-btn-outlined.gk-btn-neutral {
  color: var(--gk-on-surface-variant);
  border-color: var(--gk-outline);
}
[data-gk-mode="dark"] .gk-btn-outlined.gk-btn-neutral:hover,
.gk-dark .gk-btn-outlined.gk-btn-neutral:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--gk-on-surface);
  border-color: var(--gk-on-surface-variant);
}

/* --- Buttons: outlined primary/colors → theme-aware --- */
[data-gk-mode="dark"] .gk-btn-outlined.gk-btn-primary,
.gk-dark .gk-btn-outlined.gk-btn-primary {
  color: var(--gk-primary);
  border-color: var(--gk-primary);
}
[data-gk-mode="dark"] .gk-btn-outlined.gk-btn-primary:hover,
.gk-dark .gk-btn-outlined.gk-btn-primary:hover {
  background: rgba(var(--gk-primary-rgb, 99, 102, 241), 0.12);
}

/* --- Buttons: filled primary → theme-aware --- */
[data-gk-mode="dark"] .gk-btn-filled.gk-btn-primary,
.gk-dark .gk-btn-filled.gk-btn-primary {
  background: var(--gk-primary);
  border-color: var(--gk-primary);
  color: var(--gk-on-primary);
}
[data-gk-mode="dark"] .gk-btn-filled.gk-btn-primary:hover,
.gk-dark .gk-btn-filled.gk-btn-primary:hover {
  filter: brightness(1.1);
}

/* --- Buttons: text neutral --- */
[data-gk-mode="dark"] .gk-btn-text.gk-btn-neutral,
.gk-dark .gk-btn-text.gk-btn-neutral {
  color: var(--gk-on-surface-variant);
}
[data-gk-mode="dark"] .gk-btn-text.gk-btn-neutral:hover,
.gk-dark .gk-btn-text.gk-btn-neutral:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--gk-on-surface);
}

/* --- Tabellen: 4-Level Dark Mode (Page → Panel → Interactive → Elevated) --- */
[data-gk-mode="dark"] .gk-table thead th,
.gk-dark .gk-table thead th {
  background: #161b22;
  color: #8b949e;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-gk-mode="dark"] .gk-table th,
[data-gk-mode="dark"] .gk-table td,
.gk-dark .gk-table th,
.gk-dark .gk-table td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
  color: var(--gk-on-surface);
}
[data-gk-mode="dark"] .gk-table tbody tr:hover,
.gk-dark .gk-table tbody tr:hover {
  background: #262d38;
}
[data-gk-mode="dark"] .gk-table tbody tr:nth-child(even),
.gk-dark .gk-table tbody tr:nth-child(even) {
  background: #1c2128;
}
[data-gk-mode="dark"] .gk-table tbody tr:nth-child(even):hover,
.gk-dark .gk-table tbody tr:nth-child(even):hover {
  background: #262d38;
}
[data-gk-mode="dark"] .gk-table-wrap,
.gk-dark .gk-table-wrap {
  background: #161b22;
  border-color: rgba(255, 255, 255, 0.1);
}

/* Dark: Celled */
[data-gk-mode="dark"] .gk-table-celled th,
[data-gk-mode="dark"] .gk-table-celled td,
.gk-dark .gk-table-celled th,
.gk-dark .gk-table-celled td {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Dark: Bordered */
[data-gk-mode="dark"] .gk-table-bordered th,
[data-gk-mode="dark"] .gk-table-bordered td,
.gk-dark .gk-table-bordered th,
.gk-dark .gk-table-bordered td {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Dark: Minimal */
[data-gk-mode="dark"] .gk-table-minimal th,
.gk-dark .gk-table-minimal th {
  color: #8b949e;
}
[data-gk-mode="dark"] .gk-table-minimal td,
.gk-dark .gk-table-minimal td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Dark: Flat */
[data-gk-mode="dark"] .gk-table-flat th,
.gk-dark .gk-table-flat th {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
[data-gk-mode="dark"] .gk-table-flat td,
.gk-dark .gk-table-flat td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Dark: Selectable */
[data-gk-mode="dark"] .gk-table-selectable tbody tr:hover,
.gk-dark .gk-table-selectable tbody tr:hover {
  background: rgba(99, 102, 241, 0.12);
}

/* Dark: Definition */
[data-gk-mode="dark"] .gk-table-definition td:first-child,
.gk-dark .gk-table-definition td:first-child {
  background: #0d1117;
  color: #8b949e;
}

/* Dark: Striped (explizit) */
[data-gk-mode="dark"] .gk-table-striped tbody tr:nth-child(even),
.gk-dark .gk-table-striped tbody tr:nth-child(even) {
  background: #1c2128;
}

/* Dark Mode: Table Mobile Card */
[data-gk-mode="dark"] .gk-table-mobile-card tr,
.gk-dark .gk-table-mobile-card tr {
  background: #161b22;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-gk-mode="dark"] .gk-table-mobile-card td,
.gk-dark .gk-table-mobile-card td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* --- Inputs & Forms --- */
[data-gk-mode="dark"] .gk-input,
.gk-dark .gk-input {
  background: #0d1117;
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--gk-on-surface);
}
[data-gk-mode="dark"] .gk-input::placeholder,
.gk-dark .gk-input::placeholder {
  color: #484f58;
}
[data-gk-mode="dark"] .gk-input:focus,
.gk-dark .gk-input:focus {
  border-color: var(--gk-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* --- Modal Header/Body --- */
[data-gk-mode="dark"] .gk-modal-header,
.gk-dark .gk-modal-header {
  background: #161b22;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-gk-mode="dark"] .gk-modal-body,
.gk-dark .gk-modal-body {
  background: #161b22;
}
[data-gk-mode="dark"] .gk-modal-close:hover,
.gk-dark .gk-modal-close:hover {
  background: #21262d;
  color: var(--gk-on-surface);
}

[data-gk-mode="dark"] .gk-avatar,
.gk-dark .gk-avatar {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}
[data-gk-mode="dark"] .gk-avatar-status,
.gk-dark .gk-avatar-status {
  border-color: #161b22;
}
[data-gk-mode="dark"] .gk-avatar-group .gk-avatar,
.gk-dark .gk-avatar-group .gk-avatar {
  border-color: #161b22;
}

/* ===================================================================
   TOOLTIP
   Usage: <span data-gk-tooltip="Tooltip text">Hover me</span>
   Position: data-gk-tooltip-pos="top|bottom|left|right" (default: top)
   Rich: <span data-gk-tooltip-rich="#tipId">Hover</span>
         <div id="tipId" class="gk-tooltip-content">HTML here</div>
   =================================================================== */

/* Base tooltip (CSS-only via ::after pseudo) */
[data-gk-tooltip] {
  position: relative;
  cursor: default;
}
[data-gk-tooltip]::after {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  content: attr(data-gk-tooltip);
  position: absolute;
  z-index: 9999;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--gk-on-inverse-surface, #fff);
  background: var(--gk-inverse-surface, #1e293b);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.2s ease 0.3s,
    transform 0.2s ease 0.3s;
}
[data-gk-tooltip]:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Positions */
[data-gk-tooltip]::after,
[data-gk-tooltip-pos="top"]::after {
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}
[data-gk-tooltip]:hover::after,
[data-gk-tooltip-pos="top"]:hover::after {
  transform: translateX(-50%) translateY(0);
}

[data-gk-tooltip-pos="bottom"]::after {
  top: calc(100% + 6px);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
}
[data-gk-tooltip-pos="bottom"]:hover::after {
  transform: translateX(-50%) translateY(0);
}

[data-gk-tooltip-pos="left"]::after {
  right: calc(100% + 6px);
  left: auto;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) translateX(4px);
}
[data-gk-tooltip-pos="left"]:hover::after {
  transform: translateY(-50%) translateX(0);
}

[data-gk-tooltip-pos="right"]::after {
  left: calc(100% + 6px);
  right: auto;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
}
[data-gk-tooltip-pos="right"]:hover::after {
  transform: translateY(-50%) translateX(0);
}

/* Multiline tooltip */
[data-gk-tooltip-wrap]::after {
  white-space: normal;
  max-width: 280px;
  text-align: left;
}

/* Rich Tooltip (HTML content from hidden element) */
.gk-tooltip-content {
  display: none;
  position: absolute;
  z-index: 600;
  padding: 12px 16px;
  min-width: 200px;
  max-width: 360px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gk-on-surface, #334155);
  background: var(--gk-surface-container-highest, #fff);
  border: 1px solid var(--gk-outline-variant, rgba(0, 0, 0, 0.1));
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  pointer-events: auto;
}
.gk-tooltip-content.visible {
  display: block;
  animation: gk-tooltip-in 0.2s ease;
}
.gk-tooltip-content a {
  color: var(--gk-primary);
  text-decoration: underline;
}
.gk-tooltip-content a:hover {
  text-decoration: none;
}

@keyframes gk-tooltip-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── AJAX Navigation Progress ── */
/* AJAX Navigation: kein visueller Progress-Indikator — Navigation ist schnell genug */