/**
 * MegaforBB default theme – tema stilleri
 * Tüm inline CSS buraya taşındı; tema paket olarak satıldığında assets tema klasöründe kalır.
 */

/* Toast UI Editor: textarea yerine editör kutusu kullanılır */
.mb-4:has(textarea[data-editor]),
div:has(> textarea[data-editor]) {
  min-height: 280px;
}

/* Masaüstü: min 350px, sürüklenebilir yükseklik; mobilde daha kompakt */
.mfbb-editor-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  height: 350px;
}

@media (min-width: 769px) {
  .mfbb-editor-wrap {
    min-height: 350px;
    height: 350px;
  }
}

/* Editör container wrap içinde kalan alanı doldurur */
.mfbb-editor-wrap > [id^="mfbb-tui-"] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mfbb-editor-wrap > [id^="mfbb-tui-"] .toastui-editor-defaultUI {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mfbb-editor-wrap > [id^="mfbb-tui-"] .toastui-editor-md-container,
.mfbb-editor-wrap > [id^="mfbb-tui-"] .toastui-editor-ww-container {
  flex: 1;
  min-height: 0;
}

.mfbb-editor-wrap .toastui-editor-defaultUI {
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
}

/* Aşağı çekerek yükseklik artırma handle'ı (masaüstü) */
.mfbb-editor-resize-handle {
  flex-shrink: 0;
  height: 10px;
  cursor: ns-resize;
  background: linear-gradient(to bottom, transparent 0%, #e5e7eb 50%, transparent 100%);
  border-radius: 0 0 0.375rem 0.375rem;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

.mfbb-editor-resize-handle:hover {
  background: linear-gradient(to bottom, transparent 0%, #d1d5db 50%, transparent 100%);
}

.mfbb-editor-resize-handle:active {
  background: #9ca3af;
}

/* Mobil: daha az yükseklik, dokunmatik uyum */
@media (max-width: 768px) {
  .mb-4:has(textarea[data-editor]),
  div:has(> textarea[data-editor]) {
    min-height: 220px;
  }

  .mfbb-editor-wrap {
    min-height: 220px;
    height: 260px;
    max-height: min(70vh, 400px);
  }

  .mfbb-editor-wrap .toastui-editor-defaultUI {
    border-radius: 0.375rem;
  }

  .mfbb-editor-wrap .toastui-editor-toolbar-icons {
    padding: 6px;
  }

  .mfbb-editor-wrap .toastui-editor-toolbar-icons .toastui-editor-toolbar-icon {
    width: 28px;
    height: 28px;
  }

  .mfbb-editor-resize-handle {
    height: 16px;
    min-height: 16px;
  }
}

/* ========================================================
   RICH TEXT (PROSE) & EDITOR FORMATTING
   (Frontend: Toast UI Editor | Admin: Summernote)
   ======================================================== */
.prose h1 {
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.111;
  font-weight: 800;
  color: #111827;
}

.prose h2 {
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.333;
  font-weight: 700;
  color: #111827;
}

.prose h3 {
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
  font-weight: 600;
  color: #111827;
}

.prose h4 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
  font-weight: 600;
  color: #111827;
}

.prose h5 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
  font-weight: 600;
  color: #111827;
}

.prose h6 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
  font-weight: 600;
  color: #111827;
}

.prose p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose ul {
  padding-left: 1.625em;
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose ol {
  padding-left: 1.625em;
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose pre {
  background-color: #1e293b;
  color: #f8fafc;
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.714;
  margin-top: 1.714em;
  margin-bottom: 1.714em;
  border-radius: 0.375rem;
  padding: 0.857em 1.142em;
}

.prose code {
  color: #111827;
  font-weight: 600;
  font-size: 0.875em;
}

.prose pre code {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose hr {
  border-color: #e5e7eb;
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.prose table {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.714;
}

.prose thead {
  color: #111827;
  font-weight: 600;
  border-bottom-width: 1px;
  border-bottom-color: #d1d5db;
}

.prose thead th {
  vertical-align: bottom;
  padding: 0.571em;
}

.prose tbody tr {
  border-bottom-width: 1px;
  border-bottom-color: #e5e7eb;
}

.prose tbody td {
  vertical-align: baseline;
  padding: 0.571em;
}

/* Handle Text Alignments Properly inside Prose (Overrides Tailwind Defaults) */
.prose [align="center"],
.post-content [align="center"],
.prose [style*="text-align: center"],
.post-content [style*="text-align: center"] {
  text-align: center !important;
}

.prose [align="right"],
.post-content [align="right"],
.prose [style*="text-align: right"],
.post-content [style*="text-align: right"] {
  text-align: right !important;
}

.prose [align="left"],
.post-content [align="left"],
.prose [style*="text-align: left"],
.post-content [style*="text-align: left"] {
  text-align: left !important;
}

.prose [align="justify"],
.post-content [align="justify"],
.prose [style*="text-align: justify"],
.post-content [style*="text-align: justify"] {
  text-align: justify !important;
}

/* Alıntı (blockquote) mesajlarda diğerinden ayrılsın */
.prose blockquote,
.post-content blockquote,
blockquote[data-author] {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid #3b82f6;
  background: #eff6ff;
  border-radius: 0 0.375rem 0.375rem 0;
  color: #1e3a8a;
  font-style: normal;
}

.prose blockquote strong:first-child,
blockquote[data-author] strong:first-child {
  color: #1d4ed8;
}

/* Spoiler (details/summary) – tıklanınca açılır içerik */
.prose details.mfbb-spoiler,
.post-content details.mfbb-spoiler,
.post-body details.mfbb-spoiler {
  margin: 0.5rem 0;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  overflow: hidden;
  background: #f1f5f9;
}
.prose details.mfbb-spoiler summary,
.post-content details.mfbb-spoiler summary,
.post-body details.mfbb-spoiler summary {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-weight: 600;
  color: #475569;
  user-select: none;
  list-style: none;
}
.prose details.mfbb-spoiler summary::-webkit-details-marker,
.post-content details.mfbb-spoiler summary::-webkit-details-marker {
  display: none;
}
.prose details.mfbb-spoiler summary::before,
.post-content details.mfbb-spoiler summary::before,
.post-body details.mfbb-spoiler summary::before {
  content: "▶ ";
  display: inline-block;
  margin-right: 0.25rem;
  transition: transform 0.2s;
}
.prose details.mfbb-spoiler[open] summary::before,
.post-content details.mfbb-spoiler[open] summary::before,
.post-body details.mfbb-spoiler[open] summary::before {
  transform: rotate(90deg);
}
.prose details.mfbb-spoiler > *:not(summary),
.post-content details.mfbb-spoiler > *:not(summary),
.post-body details.mfbb-spoiler > *:not(summary) {
  padding: 0.75rem 1rem;
  margin: 0;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

/* Editör renk paleti popup */
.mfbb-editor-color-picker button[data-color]:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px #3b82f6;
}
.mfbb-editor-color-picker input[type="color"] {
  display: block;
  width: 100%;
}

/* Prose: vurgu ve hizalı bloklar */
.prose mark,
.post-content mark,
.post-body mark {
  background: #fef08a;
  padding: 0.1em 0.2em;
  border-radius: 0.2em;
}

/* Task list (Toast UI görev listesi) – mesaj içinde checkbox görünümü */
.prose .task-list-item,
.post-content .task-list-item,
.post-body .task-list-item {
  list-style: none;
  padding-left: 26px;
  position: relative;
  margin-bottom: 0.25em;
}
.prose .task-list-item::before,
.post-content .task-list-item::before,
.post-body .task-list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border: 2px solid #94a3b8;
  border-radius: 3px;
  background: #fff;
  box-sizing: border-box;
}
.prose .task-list-item.checked::before,
.prose .task-list-item[data-task-checked]::before,
.post-content .task-list-item.checked::before,
.post-content .task-list-item[data-task-checked]::before,
.post-body .task-list-item.checked::before,
.post-body .task-list-item[data-task-checked]::before {
  background: #3b82f6;
  border-color: #3b82f6;
  content: '✓';
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 14px;
  text-align: center;
}
.prose ul:has(.task-list-item),
.post-content ul:has(.task-list-item),
.post-body ul:has(.task-list-item) {
  list-style: none;
  padding-left: 0;
}

/* Etiket (@mention) ve mesaj referansı (#4) renkli */
a.mention {
  color: #1d4ed8;
  background: #dbeafe;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-weight: 500;
  text-decoration: none;
}

a.mention:hover {
  background: #bfdbfe;
  text-decoration: underline;
}

a.post-ref {
  color: #15803d;
  background: #dcfce7;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-weight: 500;
  text-decoration: none;
}

a.post-ref:hover {
  background: #bbf7d0;
  text-decoration: underline;
}

/* Admin index sayfası (themes/default/admin/index.php) */
body.admin-page {
  font-family: sans-serif;
  background: #f0f0f0;
  margin: 0;
  padding: 20px;
}

.admin-container {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.admin-menu a {
  margin-right: 15px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.admin-menu a:hover {
  color: #007bff;
}

.admin-container .alert {
  background: #d4edda;
  color: #155724;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

/* Toast: container pointer-events none, içindeki linkler tıklanabilir */
#toast-container {
  pointer-events: none;
}

#toast-container>* {
  pointer-events: auto;
}

/* XenForo tarzı yumuşak toast (oval, gölge, geçiş) */
.mfbb-toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 22rem;
  pointer-events: none;
}

.mfbb-toast-container>* {
  pointer-events: auto;
}

.mfbb-toast {
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateX(1.5rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.mfbb-toast--visible {
  opacity: 1;
  transform: translateX(0);
}

.mfbb-toast--success {
  background: #10b981;
  color: #fff;
}

.mfbb-toast--error {
  background: #ef4444;
  color: #fff;
}

.mfbb-toast--info {
  background: #3b82f6;
  color: #fff;
}

/* Alpine x-cloak: dropdown/menu ilk yüklemede görünmesin */
[x-cloak] {
  display: none !important;
}

/* Tema ana rengi – base.html.twig'deki --primary-color (varsayılan #206bc4) */
.text-primary { color: var(--primary-color, #206bc4); }
.hover\:text-primary:hover { color: var(--primary-color, #206bc4); }
.group:hover .group-hover\:text-primary { color: var(--primary-color, #206bc4); }

/* Portal tab butonları – data-[active=true] Tailwind CDN parse hatası verdiği için theme.css'te */
.portal-tab-btn {
  border-bottom: 2px solid transparent;
}

.portal-tab-btn:hover {
  color: #1a252f;
  border-color: #d1d5db;
}

.portal-tab-btn[data-active="true"] {
  border-color: var(--primary-color, #206bc4);
  color: var(--primary-color, #206bc4);
}

/* Duyuru badge stilleri (header + forum bölümü) */
.announcement-badge-info {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.announcement-badge-success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.announcement-badge-warning {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.announcement-badge-danger {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.announcement-badge-primary {
  background: #1e293b;
  color: #f8fafc;
  border: 1px solid #334155;
}

.announcement-badge-secondary {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

/* ========================================================
   MOBILE RESPONSIVE OVERRIDES
   ======================================================== */

@media (max-width: 767px) {

  /* Genel overflow engelle */
  html,
  body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Header logo ve kullanıcı alanı */
  #header-bar .flex.items-center.justify-between {
    gap: 0.5rem;
  }

  #header-bar img[alt=""][class*="h-6"] {
    width: 22px;
    height: 22px;
  }

  /* Breadcrumb kaydırılabilir */
  nav[aria-label="Breadcrumb"] ol {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  nav[aria-label="Breadcrumb"] ol::-webkit-scrollbar {
    display: none;
  }

  /* Konu başlığı alanı */
  .bg-\\[\\#1a252f\\].text-white.px-4.py-3.rounded-t-lg.font-semibold {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem;
  }

  .bg-\\[\\#1a252f\\].text-white.px-4.py-3.rounded-t-lg.font-semibold>span:first-child {
    font-size: 0.875rem;
    line-height: 1.3;
    word-break: break-word;
  }

  .bg-\\[\\#1a252f\\].text-white.px-4.py-3.rounded-t-lg.font-semibold .flex.items-center.gap-2 {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Post action bar (cevapla, raporla, düzenle vb.) */
  article .flex.items-center.gap-3.text-xs {
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
  }

  /* Post gövdesi */
  .prose,
  .post-content {
    font-size: 0.9375rem;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .prose img,
  .post-content img {
    max-width: 100%;
    height: auto;
  }

  .prose blockquote,
  .post-content blockquote,
  blockquote[data-author] {
    margin: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }

  /* Sayfalama kompakt */
  .flex.items-center.gap-1 a[class*="px-2.5"] {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
  }

  /* Son olaylar kartı */
  .son-olaylar-card {
    min-height: 280px !important;
    max-height: none !important;
  }

  .son-olaylar-card .portal-tab-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  /* Admin panel: Summernote editör mobil uyumu */
  .note-editor {
    min-height: 200px;
  }

  .note-editor .note-editable {
    min-height: 200px;
  }

  .note-editor .note-toolbar {
    padding: 0.125rem 0.25rem;
  }

  .note-editor .note-toolbar .note-btn-group {
    margin-right: 0.125rem;
  }

  .note-editor .note-toolbar .btn {
    padding: 0.25rem 0.375rem;
    font-size: 0.75rem;
  }

  /* Forum açıklama kutusu mobilde */
  .forum-announcements-box {
    padding: 1rem;
  }

  /* Duyuru banner'ları mobilde */
  .announcement-item,
  .announcement-forum-item {
    flex-direction: row;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  /* Footer grid */
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

  /* Toast bildirimleri mobilde */
  #toast-container {
    left: 0.5rem;
    right: 0.5rem;
    top: 0.5rem;
  }

  #toast-container>a {
    max-width: 100%;
  }

  /* Lightbox mobilde */
  #mfbb-lightbox img {
    max-width: 95vw;
    max-height: 80vh;
  }

  /* Profile sayfası responsive */
  .h-48 {
    height: 8rem;
  }

  /* Login sayfası mobilde tek sütun */
  .grid.grid-cols-1.md\\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* Arama filtre grid'i mobilde */
  .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* Üye listesi grid mobilde */
  .grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  /* Portal kartları mobilde */
  .portal-card-item {
    padding: 0.5rem !important;
  }

  /* Toplu mesaj işlemleri barı */
  #posts-bulk-bar {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
  }

  #posts-bulk-bar .flex.items-center.gap-2 {
    width: 100%;
    flex-wrap: wrap;
  }

  #posts-bulk-bar button {
    flex: 1;
    text-align: center;
  }

  /* Modal'lar mobilde */
  .fixed.left-1\\/2.top-1\\/2.-translate-x-1\\/2.-translate-y-1\\/2 {
    width: calc(100% - 2rem) !important;
    max-width: none !important;
  }

  /* Reklam alanları mobilde */
  .ads-slot {
    overflow: hidden;
  }

  .ads-slot .ad-item {
    max-width: 100%;
    overflow: hidden;
  }

  /* Conversation / mesaj sayfası */
  .flex.items-center.gap-4.p-4 img[class*="h-12"] {
    width: 40px;
    height: 40px;
  }
}

/* Tablet (768px - 1023px) özel ayarlar */
@media (min-width: 768px) and (max-width: 1023px) {
  .son-olaylar-card {
    max-height: 480px !important;
  }
}

/* Küçük ekranlar için daha agresif optimizasyonlar */
@media (max-width: 374px) {
  #header-bar {
    padding: 0.5rem 0;
  }

  .portal-tab-btn {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.6875rem !important;
  }

  .prose,
  .post-content {
    font-size: 0.875rem;
  }
}

/* Safe area support (notch'lu telefonlar) */
@supports (padding: env(safe-area-inset-bottom)) {
  #posts-bulk-bar {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }
}

/* Tab scrollbar gizle */
.son-olaylar-card nav[role="tablist"] {
  scrollbar-width: none;
}

.son-olaylar-card nav[role="tablist"]::-webkit-scrollbar {
  display: none;
}

/* Genel buton ve form taşma korumaları */
@media (max-width: 767px) {

  .flex.justify-end.gap-3,
  .flex.gap-3.pt-2 {
    flex-wrap: wrap;
  }

  .flex.justify-end.gap-3 button,
  .flex.justify-end.gap-3 a,
  .flex.gap-3.pt-2 button,
  .flex.gap-3.pt-2 a {
    flex-shrink: 0;
  }

  /* Form padding düzeltmeleri */
  .p-6 {
    padding: 1rem;
  }

  .px-6 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Mod rapor tablosu taşma */
  .divide-y.divide-gray-100>div {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Genel metin taşma koruması */
  h1,
  h2,
  h3,
  .font-semibold,
  .font-bold {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* User dropdown position mobilde */
  .absolute.right-0.mt-2.w-56 {
    position: fixed;
    right: 0.5rem;
    left: auto;
    top: auto;
    z-index: 9999;
  }
}