/* ==========================================================
   CODEQUATERMEDIA - ZUSÄTZLICHE MENÜSEITEN
   Ergänzt deine bestehende style.css.
   Kein JavaScript notwendig.
   IDs und data-* Attribute sind als spätere JS-Hooks gedacht.
   ========================================================== */

:root {
  --cq-purple: rgb(111, 53, 220);
  --cq-purple-light: #f4edff;
  --cq-peach: rgb(255, 245, 232);
  --cq-border: #e4e4e4;
  --cq-text-soft: #666666;
  --cq-card-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

body {
  background-color: #ffffff;
}

nav a.headerActive {
  background-color: var(--cq-purple-light);
  color: var(--cq-purple);
}

/* Aktiver Menüpunkt */
#heroLeftNav a.activeMenu {
  background-color: rgb(219, 217, 221);
  color: blueviolet;
  font-weight: 600;
}

#heroLeftNav a:hover {
  background-color: #f7f3fb;
}

/* Gemeinsamer Seitenbereich */
.menuPageMiddle {
  margin-left: 20px;
  margin-right: 20px;
  min-width: 55%;
  flex: 1;
}

.pageCard,
.sideCard {
  border: 1px solid var(--cq-border);
  border-radius: 14px;
  background-color: white;
  box-shadow: var(--cq-card-shadow);
  box-sizing: border-box;
}

.pageCard {
  padding: 20px;
  margin-bottom: 20px;
}

.pageHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.pageHeader h1,
.pageHeader h2 {
  margin: 0;
}

.pageHeader p {
  margin-top: 5px;
  color: var(--cq-text-soft);
}

.pageTitleText {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pageSearch,
.settingInput,
.messageInput {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #d7d7d7;
  border-radius: 9px;
  box-sizing: border-box;
  font-family: inherit;
}

.pageSearch:focus,
.settingInput:focus,
.messageInput:focus,
.settingTextarea:focus {
  outline: 2px solid #decdfc;
  border-color: var(--cq-purple);
}

.actionButton,
.secondaryButton,
.dangerButton,
.iconButton {
  border-radius: 8px;
  padding: 10px 14px;
  font-family: inherit;
  cursor: pointer;
}

.actionButton {
  border: none;
  color: white;
  background: linear-gradient(135deg, rgb(135, 75, 230), rgb(111, 53, 220));
  box-shadow: 0 4px 10px rgba(111, 53, 220, 0.25);
}

.secondaryButton,
.iconButton {
  border: 1px solid #d6d6d6;
  background-color: white;
  color: #222222;
}

.dangerButton {
  border: 1px solid #c75353;
  background-color: white;
  color: #a52d2d;
}

.actionButton:hover {
  transform: translateY(-1px);
}

.secondaryButton:hover,
.iconButton:hover {
  background-color: #f6f6f6;
}

.placeholderText {
  color: #777777;
  font-size: 14px;
}

.rightInfoColumn {
  min-width: 15%;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sideCard {
  padding: 15px;
}

.sideCard h3,
.sideCard h4 {
  margin-bottom: 10px;
}

.smallCounter {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eeeeee;
  gap: 10px;
}

.smallCounter:last-child {
  border-bottom: none;
}

/* ---------------- NACHRICHTEN ---------------- */
.messageLayout {
  display: grid;
  grid-template-columns: minmax(190px, 34%) 1fr;
  min-height: 560px;
  overflow: hidden;
  padding: 0;
}

.conversationColumn {
  border-right: 1px solid var(--cq-border);
  padding: 15px;
}

.conversationList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 15px;
}

.conversationItem {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  cursor: pointer;
}

.conversationItem.activeConversation {
  background-color: var(--cq-purple-light);
  border-color: #d6c3f8;
}

.conversationItem img,
.friendAvatar,
.notificationAvatar,
.groupAvatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.conversationPreview {
  min-width: 0;
}

.conversationPreview strong,
.conversationPreview span {
  display: block;
}

.conversationPreview span {
  color: #777777;
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chatColumn {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chatHeader {
  padding: 15px;
  border-bottom: 1px solid var(--cq-border);
}

.chatMessages {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: #fcfcfc;
}

.messageBubble {
  max-width: 72%;
  padding: 10px 12px;
  border-radius: 12px;
  line-height: 1.4;
}

.messageBubble.received {
  align-self: flex-start;
  background-color: #eeeeee;
}

.messageBubble.sent {
  align-self: flex-end;
  background-color: var(--cq-purple-light);
}

.messageComposer {
  display: flex;
  gap: 10px;
  padding: 15px;
  border-top: 1px solid var(--cq-border);
}

/* ---------------- BENACHRICHTIGUNGEN ---------------- */
.filterRow,
.tabRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.filterButton {
  border: 1px solid #dddddd;
  background: white;
  border-radius: 20px;
  padding: 8px 13px;
  cursor: pointer;
}

.filterButton.activeFilter {
  background-color: var(--cq-purple-light);
  border-color: #d6c3f8;
  color: var(--cq-purple);
}

.notificationList,
.friendList,
.groupList,
.savedList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notificationItem,
.friendItem,
.groupItem,
.savedItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #eeeeee;
  border-radius: 10px;
}

.notificationItem.unread {
  background-color: #fbf8ff;
  border-left: 4px solid var(--cq-purple);
}

.itemMain {
  flex: 1;
  min-width: 0;
}

.itemMain h3,
.itemMain h4,
.itemMain p {
  margin-bottom: 4px;
}

.itemMeta {
  color: #777777;
  font-size: 13px;
}

/* ---------------- FREUNDE ---------------- */
.friendActions,
.groupActions,
.savedActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.statsRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.statBox {
  border: 1px solid #eeeeee;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
}

.statBox strong {
  display: block;
  font-size: 24px;
  color: var(--cq-purple);
}

/* ---------------- GRUPPEN ---------------- */
.groupGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.groupCard {
  border: 1px solid #eeeeee;
  border-radius: 12px;
  overflow: hidden;
}

.groupCover {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

.groupCardContent {
  padding: 14px;
}

.groupCardContent h3,
.groupCardContent p {
  margin-bottom: 8px;
}

/* ---------------- GESPEICHERTE BEITRÄGE ---------------- */
.savedItem {
  align-items: flex-start;
}

.savedThumb {
  width: 120px;
  height: 85px;
  border-radius: 8px;
  object-fit: cover;
}

.savedCategory {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  background-color: var(--cq-purple-light);
  color: var(--cq-purple);
  font-size: 12px;
  margin-bottom: 6px;
}

/* ---------------- EINSTELLUNGEN ---------------- */
.settingsGrid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
}

.settingsMenu {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.settingsMenu a {
  padding: 10px;
  border-radius: 8px;
  text-decoration: none;
  color: black;
  border: 1px solid transparent;
}

.settingsMenu a.activeSettings {
  background-color: var(--cq-purple-light);
  color: var(--cq-purple);
  border-color: #d6c3f8;
}

.settingsSection {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 22px;
  margin-bottom: 22px;
}

.settingsSection:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.formRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.formGroup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 15px;
}

.settingTextarea {
  min-height: 100px;
  padding: 11px 12px;
  resize: vertical;
  border: 1px solid #d7d7d7;
  border-radius: 9px;
  box-sizing: border-box;
  font-family: inherit;
}

.toggleRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 12px 0;
  border-bottom: 1px solid #eeeeee;
}

.toggleRow:last-child {
  border-bottom: none;
}

.toggleRow input {
  width: 20px;
  height: 20px;
}

.settingsButtons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ---------------- RESPONSIVE ---------------- */
@media screen and (max-width: 1100px) {
  body {
    max-width: 100%;
  }

  .hero {
    padding: 0 15px;
  }

  .rightInfoColumn {
    display: none;
  }

  .menuPageMiddle {
    min-width: 0;
  }
}

@media screen and (max-width: 800px) {
  header {
    padding: 25px;
  }

  #headerSection img {
    height: 120px;
  }

  nav a {
    padding: 12px;
    font-size: 16px;
  }

  .hero {
    flex-direction: column;
    gap: 20px;
  }

  .heroLeft {
    width: 100%;
  }

  #heroLeftNav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .menuPageMiddle {
    margin: 0;
    width: 100%;
  }

  .messageLayout,
  .settingsGrid {
    grid-template-columns: 1fr;
  }

  .conversationColumn {
    border-right: none;
    border-bottom: 1px solid var(--cq-border);
  }

  .groupGrid,
  .statsRow,
  .formRow {
    grid-template-columns: 1fr;
  }

  .savedItem {
    flex-direction: column;
  }

  .savedThumb {
    width: 100%;
    height: 180px;
  }
}