/* ======================================================================
   TRUENOTES - ENTERPRISE STYLES
   ====================================================================== */

/* Layout & Typography */
.page-title { color: white; text-align: center; font-size: 1.9rem; margin: 20px 0 10px 0; text-shadow: 1px 2px 4px rgba(0,0,0,0.3); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.hidden { display: none !important; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }

/* Links & Mentions */
.content-link { color: var(--primary-gold); font-weight: bold; text-decoration: none; }
.mention-link { color: var(--primary-blue); font-weight: bold; text-decoration: none; background: rgba(0,51,78,0.1); padding: 0 4px; border-radius: 4px; }
.mention-private { color: #999; font-weight: bold; background: rgba(0,0,0,0.05); padding: 0 4px; border-radius: 4px; }

/* Modals */
.modal-back-btn { position: absolute; top: 15px; left: 20px; font-size: 1.5rem; background: none; border: none; color: var(--primary-blue); cursor: pointer; }
.modal-title-style { color: var(--primary-blue); border-bottom: 2px solid var(--primary-gold); }
.edit-post-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center; }
.edit-post-box { width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; margin: 0; }
.edit-close-btn { background: none; border: none; cursor: pointer; font-size: 1.2rem; }
.edit-tools-container { background: rgba(0,51,78,0.05); padding: 15px; border-radius: 8px; }

/* Composer */
.composer-trigger-btn { width: 100%; font-size: 1.1rem; background: white; color: var(--primary-blue); border: 2px dashed var(--primary-gold); }
.composer-cancel-btn { background: none; border: none; cursor: pointer; color: #c0392b; font-weight: bold; }
.char-counter { font-size: 0.8rem; color: #666; }
.char-counter.warning { color: #c0392b; font-weight: bold; }
.composer-submit-btn { margin-left: auto; padding: 8px 25px; font-size: 1rem; border-radius: 20px; }
.preview-container { position: relative; width: fit-content; }
.preview-img { max-width: 100%; max-height: 250px; border-radius: 8px; border: 2px solid var(--primary-gold); }
.preview-remove-btn { position: absolute; top: -10px; right: -10px; background: #c0392b; color: white; border: none; border-radius: 50%; width: 25px; height: 25px; cursor: pointer; font-weight: bold; }

/* Feed & Posts */
.feed-filter-wrapper { text-align: center; margin: 10px 0 15px 0; }
.feed-filter-select { width: auto; display: inline-block; padding: 8px 15px; border-radius: 20px; font-weight: bold; color: var(--primary-blue); background-color: white; border: 2px solid var(--primary-gold); cursor: pointer; }
.role-badge { font-size: 0.75rem; color: white; padding: 2px 6px; border-radius: 4px; }
.role-author { background: var(--primary-gold); }
.role-blogger { background: var(--primary-blue); }
.role-dual { background: linear-gradient(45deg, var(--primary-blue), var(--primary-gold)); }
.post-author-link { color: inherit; text-decoration: none; font-weight: bold; }
.post-avatar-placeholder { background: #eee; display: flex; justify-content: center; align-items: center; font-size: 0.8rem; }
.post-actions-row { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid #eee; margin-top: 15px; }

/* Embeds & Links */
.embed-wrapper { margin-bottom: 10px; }
.embed-inner { display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }
.embed-yt-shorts { width: 100%; max-width: 325px; }
.embed-yt-iframe { border-radius: 8px; }
.embed-ig-container { width: 100%; max-width: 400px; background: white; border-radius: 4px; border: 1px solid #dbdbdb; }
.embed-ig-iframe { border: none; overflow: hidden; border-radius: 4px; }
.embed-fallback-text { text-align: center; padding: 20px; }
.embed-fallback-link { color: var(--primary-gold); }
.embed-unsupported { padding: 30px; text-align: center; background: rgba(0,51,78,0.05); border-radius: 8px; border: 1px dashed var(--primary-gold); }
.embed-unsupported p { margin-top: 0; color: #333; }
.embed-unsupported a { display: inline-block; margin-top: 10px; padding: 10px 20px; background: var(--primary-gold); color: var(--primary-blue); font-weight: bold; text-decoration: none; border-radius: 5px; }
.external-link-btn { font-size: 0.9rem; margin-bottom: 10px; border-radius: 20px; }

/* Reactions */
.reaction-wrapper { position: relative; display: inline-flex; align-items: center; }
.reaction-btn { background: none; border: none; cursor: pointer; font-weight: bold; color: var(--primary-blue); display: flex; align-items: center; gap: 5px; }
.reaction-btn .book-icon { font-size: 1.3rem; }
.reaction-bar { position: absolute; bottom: calc(100% + 5px); left: 0%; transform: translateY(10px); background: white; padding: 5px 10px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); display: flex; gap: 10px; z-index: 100; opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; }
.reaction-wrapper:hover .reaction-bar, .reaction-wrapper:active .reaction-bar, .reaction-wrapper:focus-within .reaction-bar { opacity: 1; visibility: visible; transform: translateY(0); }
.reaction-icon { font-size: 1.5rem; cursor: pointer; transition: transform 0.2s; }
.reaction-icon:hover { transform: scale(1.3); }

/* Actions */
.action-icon-btn { background: none; border: none; cursor: pointer; font-weight: bold; color: var(--primary-blue); display: flex; align-items: center; gap: 5px; }
.action-icon-btn span.icon { font-size: 1.3rem; }

/* Comments */
.comments-section { margin-top: 15px; }
.comment-empty { font-size: 0.85rem; color: #888; font-style: italic; }
.comment-root { margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.comment-reply { margin-left: 25px; border-left: 2px solid var(--primary-gold); padding-left: 10px; margin-top: 10px; }
.comment-author-root { font-size: 1rem; }
.comment-author-reply { font-size: 0.9rem; }
.comment-content-root { font-size: 0.95rem; margin-top: 5px; }
.comment-content-reply { font-size: 0.9rem; margin-top: 5px; }
.comment-btn-naked { background: none; border: none; cursor: pointer; }
.comment-btn-reply { font-size: 0.9rem; }
.comment-like-count { font-size: 0.8rem; color: #666; }
.reply-indicator { font-size: 0.8rem; color: var(--primary-blue); background: rgba(0,51,78,0.05); padding: 6px 10px; border-radius: 6px; margin-bottom: 5px; }
.reply-cancel { cursor: pointer; color: #c0392b; font-weight: bold; float: right; }
.comment-submit-btn { padding: 8px 16px; font-size: 0.95rem; border-radius: 20px; flex-shrink: 0; }

/* Global Mentions Dropdown */
#globalMentionDropdown { position: absolute; z-index: 9999; background: white; width: 250px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.mention-option { padding: 10px; cursor: pointer; border-bottom: 1px solid #eee; }
.mention-option small { color: var(--primary-gold); }

/* Responsive Overrides */
@media (max-width: 900px) {
    .toggle-bar { display: none !important; }
    .community-layout .scroll-content-section { padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important; }
    .menu-toggle-btn { display: none !important; }
    .community-layout .header-card { flex-direction: column !important; justify-content: center !important; padding-top: 15px !important; height: auto !important; }
    .community-layout .nav-buttons { display: flex !important; justify-content: center; align-items: center; width: 100%; position: relative; z-index: 100; margin-top: 15px !important; }
}

/* Stellt sicher, dass die Bilder genau so groß sind wie vorher die Emojis */
.nav-icon {
    width: 24px;
    height: 24px;
    object-fit: contain; /* Verhindert, dass die Bilder verzerrt werden */
    vertical-align: middle; /* Richtet das Bild schön mittig im Button aus */
}

/* LIGHT MODE (Standard): Hamburger-Menü ist dunkel (passend zu den schwarzen PNGs) */
.mobile-bottom-bar .js-toggle-sidebar span {
    color: #111; /* Deine normale Textfarbe im hellen Modus */
    transition: color 0.3s ease;
}

.nav-icon {
    /* Weicher Übergang beim Wechseln des Modus */
    transition: filter 0.3s ease; 
}

/* ========================================= */
/* DARK MODE ANPASSUNGEN                     */
/* ========================================= */

/* 1. Hamburger-Menü wird gold/gelb */
body.dark-mode .mobile-bottom-bar .js-toggle-sidebar span {
    color: var(--primary-gold, #D4AF37); /* Nutzt dein TruePublishing-Gold */
}

/* 2. Die schwarzen PNG-Icons werden per Filter exakt in dieses Gold umgefärbt */
body.dark-mode .nav-icon {
    /* Diese magische Filter-Kombination wandelt reines Schwarz in ~ #D4AF37 (Gold) um */
    filter: invert(73%) sepia(34%) saturate(834%) hue-rotate(359deg) brightness(91%) contrast(89%);
}

/* Styling für echte Profilbilder in der Navigation */
.nav-profile-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;           /* Macht das Bild perfekt rund */
    object-fit: cover;            /* Verhindert, dass das Gesicht verzerrt wird */
    border: 1px solid var(--primary-gold, #D4AF37); /* Ein schicker goldener Rand */
    transition: transform 0.2s;
}

/* WICHTIG: Kein Filter für das Profilbild im Dark Mode! */
body.dark-mode .nav-profile-img {
    filter: none; 
}

/* dancing-script-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/dancing-script-v29-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dancing-script-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/fonts/dancing-script-v29-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dancing-script-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/dancing-script-v29-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dancing-script-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/dancing-script-v29-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}