/* =========================================================
   KoalaTalk – Einstellungen (Drop-in CSS)
   Ziel: sauber, modern, mobilfreundlich
   ========================================================= */

/* Wrapper/Grundlayout */
.div_area_Titel_show,
.div_area_Beschreibung_show,
.float2,
.float3,
.appshinzufuegen,
.AppsHinzEntf {
  box-sizing: border-box;
}

.div_area_Titel_show,
.div_area_Beschreibung_show,
.float3,
.appshinzufuegen {
  width: 100%;
  padding: 14px 14px;
  margin: 10px 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(20, 20, 20, 0.08);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
}

/* Tabellen in den Blöcken neutralisieren */
.div_area_Titel_show table,
.div_area_Beschreibung_show table,
.float3 table {
  width: 100%;
  border-collapse: collapse;
}
.div_area_Titel_show td,
.div_area_Beschreibung_show td,
.float3 td {
  padding: 0;
}

/* Textareas */
.Titel_einstellungen_textbox,
.Beschreibung_einstellungen_textbox,
.einstellungen_textbox,
.txt_chat_melden {
  width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
  border: 1px solid rgba(30, 30, 30, 0.14);
  background: rgba(255, 255, 255, 0.96);
  padding: 12px 12px;
  font-size: 15px;
  line-height: 1.35;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Hover/Focus */
.Titel_einstellungen_textbox:focus,
.Beschreibung_einstellungen_textbox:focus,
.einstellungen_textbox:focus,
.txt_chat_melden:focus {
  border-color: rgba(40, 140, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(40, 140, 255, 0.15);
}

/* Disabled */
textarea[disabled].einstellungen_textbox,
.einstellungen_textbox[disabled] {
  opacity: 0.75;
  background: rgba(245, 245, 245, 0.9);
  border-style: dashed;
  cursor: not-allowed;
}

/* Buttons/Input Submit für Titel/Beschreibung ändern */
.btn_senden_Titel_aendern,
.btn_senden_Beschreibung_aendern,
.btn_senden_Chat_melden {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(30, 30, 30, 0.12);
  background: rgba(40, 140, 255, 0.10);
  color: rgba(20, 40, 80, 0.95);
  font-weight: 600;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.btn_senden_Titel_aendern:hover,
.btn_senden_Beschreibung_aendern:hover,
.btn_senden_Chat_melden:hover {
  background: rgba(40, 140, 255, 0.18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.btn_senden_Titel_aendern:active,
.btn_senden_Beschreibung_aendern:active,
.btn_senden_Chat_melden:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* Chat melden Button (oben) */
.btn_my_action_Chat__melden {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(240, 80, 80, 0.22);
  background: rgba(240, 80, 80, 0.10);
  color: rgba(120, 20, 20, 0.95);
  font-weight: 700;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn_my_action_Chat__melden:hover {
  background: rgba(240, 80, 80, 0.16);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* Gruppe verlassen */
.cs-user__exclude {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(30, 30, 30, 0.12);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(20, 20, 20, 0.9);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.cs-user__exclude:hover {
  background: rgba(0, 0, 0, 0.07);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* Gruppenbild Rahmen */
.div_class_quad_rahmen {
  width: 100%;
  padding: 14px;
  margin: 10px 0;
  border-radius: 16px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
}

.div_class_quad_ausseres {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* Bildvorschau (img wird im Inline-CSS schon gesetzt, hier “schön”) */
.image-upload label {
  cursor: pointer;
  display: inline-flex;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.10);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10);
  transition: transform .16s ease, box-shadow .16s ease;
}
.image-upload label:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
}
.image-upload img {
  display: block;
}

/* Gruppenbild speichern Button (div) */
.class_btn_Talkroom_aendern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(30, 30, 30, 0.12);
  background: rgba(30, 200, 160, 0.12);
  color: rgba(0, 70, 55, 0.95);
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.class_btn_Talkroom_aendern:hover {
  background: rgba(30, 200, 160, 0.20);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* Apps Bereich */
.AppsHinzEntf ul,
.appshinzufuegen ul {
  list-style: none;
  margin: 10px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.AppsHinzEntf li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Checkbox-Icons hübsch */
.AppsHinzEntf input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.AppsHinzEntf label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(30, 30, 30, 0.10);
  background: rgba(0, 0, 0, 0.03);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.AppsHinzEntf label:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.05);
}
.AppsHinzEntf label img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 10px;
}

/* Checked state “Glow” */
.StatusIdeasApp_checked:checked + label,
.StatusKalenderApp_chekbox:checked + label,
.StatusKoalaShareApp_checked:checked + label,
.StatusKVideochatApp_checked:checked + label {
  border-color: rgba(40, 140, 255, 0.45);
  background: rgba(40, 140, 255, 0.10);
  box-shadow: 0 0 0 4px rgba(40, 140, 255, 0.14), 0 12px 26px rgba(0,0,0,0.10);
}

/* Benachrichtigungen Liste */
.appshinzufuegen > label {
  display: inline-block;
  font-weight: 800;
  margin: 8px 0 6px 0;
  color: rgba(20, 20, 20, 0.85);
}

.BenachrEinladungen_chekbox,
.BenachrTagesreport_checked {
  margin-right: 8px;
  transform: scale(1.05);
}

/* Teilnehmerliste (float2) */
.float2 {
  width: 100%;
  margin: 10px 0;
}
.btn-gruppen-inhalt-anzeigen3 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(30, 30, 30, 0.08);
  background: rgba(255, 255, 255, 0.70);
  box-shadow: 0 8px 18px rgba(0,0,0,0.05);
  margin: 8px 0;
}
.btn-gruppen-inhalt-anzeigen3 a {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-gruppen-inhalt-anzeigen3 b {
  font-weight: 900;
}
.btn-gruppen-inhalt-anzeigen3:hover {
  background: rgba(255, 255, 255, 0.90);
}

/* User Optionen (entfernen/melden/admin) */
.user_entfernen,
.user_melden,
.user_admin_ernennen {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(30, 30, 30, 0.12);
  background: rgba(0, 0, 0, 0.03);
  margin-right: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.user_entfernen:hover {
  background: rgba(240, 80, 80, 0.12);
  border-color: rgba(240, 80, 80, 0.22);
}
.user_admin_ernennen:hover {
  background: rgba(30, 200, 160, 0.12);
  border-color: rgba(30, 200, 160, 0.22);
}
.user_melden:hover {
  background: rgba(255, 180, 0, 0.12);
  border-color: rgba(255, 180, 0, 0.22);
}
.user_entfernen:active,
.user_melden:active,
.user_admin_ernennen:active {
  transform: translateY(0);
}

/* Trennlinie schöner */
hr {
  border: none;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 14px 0;
}

/* Mobile */
@media (max-width: 520px) {
  .div_area_Titel_show,
  .div_area_Beschreibung_show,
  .float3,
  .appshinzufuegen,
  .div_class_quad_rahmen {
    padding: 12px;
    border-radius: 14px;
  }

  .AppsHinzEntf label {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .AppsHinzEntf label img {
    width: 32px;
    height: 32px;
  }
}