/* =========================================================
   Abiball Portal – Modern Theme + Dark Mode
   Einheitlich: Farben, Karten, Formulare, Buttons
   Seating UI: Dropzones, Drag-Handle, Suche
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f1f3f8;
  --text: #101828;
  --muted: #667085;
  --border: rgba(16,24,40,.12);

  --primary: #2f6fed;
  --primary-600: #255fda;
  --primary-100: rgba(47,111,237,.12);

  --shadow: 0 10px 30px rgba(16,24,40,.08);
  --shadow-sm: 0 6px 18px rgba(16,24,40,.08);

  --radius: 14px;
  --radius-sm: 10px;

  --focus: 0 0 0 .18rem rgba(47,111,237,.22);
}

/* Dark mode variables */
html.dark, .dark body{
  --bg: #0f1115;
  --surface: #141823;
  --surface-2: #101421;
  --text: #e6e8ee;
  --muted: #a1a7b3;
  --border: rgba(230,232,238,.14);

  --primary: #4c7dff;
  --primary-600: #3a6ae6;
  --primary-100: rgba(76,125,255,.16);

  --shadow: 0 12px 34px rgba(0,0,0,.35);
  --shadow-sm: 0 8px 22px rgba(0,0,0,.28);
  --focus: 0 0 0 .18rem rgba(76,125,255,.25);
}

/* ---------- Base ---------- */
html, body{
  background: var(--bg);
  color: var(--text);
}

body, .card, .navbar, .table, .btn, .form-control, .alert, .dropdown-menu, .list-group-item{
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

a{ color: var(--primary); text-decoration: none; }
a:hover{ color: var(--primary-600); text-decoration: underline; }

.text-muted{ color: var(--muted) !important; }

/* ---------- Navbar ---------- */
.navbar{
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 18px rgba(16,24,40,.04);
}
html.dark .navbar, .dark .navbar{
  box-shadow: 0 2px 18px rgba(0,0,0,.25);
}

/* ---------- Cards ---------- */
.card{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
}
.card .card-header{
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.shadow-sm{ box-shadow: var(--shadow-sm) !important; }

/* ---------- Tables ---------- */
.table{ color: var(--text); }
.table thead th{
  background: var(--surface-2);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.table td, .table th{ border-color: var(--border); }

.table-hover tbody tr:hover{ background: rgba(47,111,237,.04); }
html.dark .table-hover tbody tr:hover,
.dark .table-hover tbody tr:hover{ background: rgba(76,125,255,.08); }

/* ---------- Forms ---------- */
.form-control{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .55rem .75rem;
}
.form-control::placeholder{ color: var(--muted); }
.form-control:focus{
  background: var(--surface);
  color: var(--text);
  border-color: var(--primary);
  box-shadow: var(--focus);
}

/* checkbox / toggle */
.form-check-input{
  border-color: var(--border);
  background-color: var(--surface);
}
.form-check-input:focus{
  box-shadow: var(--focus);
  border-color: var(--primary);
}
.form-check-input:checked{
  background-color: var(--primary);
  border-color: var(--primary);
}

/* ---------- Buttons ---------- */
.btn{
  border-radius: 12px;
  padding: .5rem .9rem;
}
.btn-primary{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-primary:hover{
  background: var(--primary-600);
  border-color: var(--primary-600);
}
.btn-outline-secondary{
  color: var(--text);
  border-color: var(--border);
  background: transparent;
}
.btn-outline-secondary:hover{
  background: var(--surface-2);
  border-color: var(--border);
}
.btn-outline-danger{ border-radius: 12px; }

/* ---------- Badges ---------- */
.badge.text-bg-secondary{
  background: rgba(16,24,40,.10) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
}
html.dark .badge.text-bg-secondary,
.dark .badge.text-bg-secondary{
  background: rgba(230,232,238,.10) !important;
}

/* ---------- Alerts ---------- */
.alert{
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
}

/* ---------- Footer (optional) ---------- */
footer{
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* =========================================================
   Seating UI
   ========================================================= */

.seating-column-title{
  font-weight: 700;
  letter-spacing: .2px;
}

/* Person list item */
.person-item{
  user-select: none;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  cursor: grab;
}
.person-item:active{ cursor: grabbing; }

/* Drag handle: 6 dots (3 rows x 2) – stabil, immer rund */
.drag-handle{
  width: 20px;
  height: 26px;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);

  gap: 4px;
  padding: 2px;

  box-sizing: border-box;
  flex-shrink: 0;

  margin-right: .65rem;
  opacity: .6;
  cursor: grab;
}
.drag-handle span{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  background: rgba(16,24,40,.55);
}
html.dark .drag-handle span,
.dark .drag-handle span{
  background: rgba(230,232,238,.55);
}

/* Dropzone label */
.drop-label{
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .25px;
  color: var(--muted);
  margin-bottom: .35rem;
}

/* Dropzone */
.dropzone{
  min-height: 96px; /* wichtig: leer droppbar */
  padding: .75rem;
  border: 2px dashed rgba(16,24,40,.22);
  border-radius: var(--radius);
  background: var(--surface-2);
}
html.dark .dropzone, .dark .dropzone{
  border-color: rgba(230,232,238,.20);
  background: rgba(255,255,255,0.03);
}
.dropzone.is-over{
  border-color: var(--primary);
  background: var(--primary-100);
}

/* Search tools */
.group-tools{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .75rem;
  align-items: center;
}
.group-tools .form-control{ max-width: 420px; }

/* Dropdown list (search suggestions) */
.group-tools .list-group{
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.group-tools .list-group-item{ border-color: var(--border); }
.group-tools .list-group-item-action:hover{ background: var(--surface-2); }

/* Small improvements */
.list-group-item{ border-color: var(--border); }

/* ===== Bootstrap List-Group Dark-Mode Fix ===== */

/* Grundsätzlich: list-group Container neutralisieren */
.list-group{
  border-radius: 12px;
}

/* list-group-item korrekt themen */
.list-group-item{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* flush entfernt Border-Radius – wir wollen trotzdem saubere Kanten */
.list-group-flush{
  border-radius: 12px;
  overflow: hidden;
}

/* Hover (optional, aber konsistent) */
.list-group-item-action:hover{
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* aktiver Zustand (falls du später klickbare Items nutzt) */
.list-group-item-action:active{
  background: var(--primary-100) !important;
  color: var(--text) !important;
}

/* Dropdown in der Suche ebenfalls korrekt */
.dropdown-menu{
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.dropdown-item{
  color: var(--text) !important;
}
.dropdown-item:hover{
  background: var(--surface-2) !important;
}

/* ===== Typografie/Farben im Dark Mode korrekt erzwingen ===== */

/* Headings und Bootstrap-Heading-Klassen */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--text) !important;
}

/* Standard-Text */
body, p, div, span, small, label {
  color: var(--text);
}

/* Muted soll im Dark Mode heller sein (dein Token) */
.text-muted {
  color: var(--muted) !important;
}

/* Bootstrap "fw-semibold" / "fw-bold" soll nicht durch fremde Farben gedimmt werden */
.fw-semibold, .fw-bold, strong {
  color: var(--text) !important;
}

/* HR im Dark Mode */
hr {
  border-color: var(--border) !important;
  opacity: 1;
}

/* Betrag-Farben (Bootstrap Klassen überschreiben) */
.text-danger { color: #ff4d5a !important; }
.text-success { color: #2bd47d !important; }

/* Badges lesbar im Dark Mode */
html.dark .badge.text-bg-secondary,
.dark .badge.text-bg-secondary {
  color: var(--text) !important;
  border-color: var(--border) !important;
}