/* ==========================================
   Modern Style – Сърцето на Дупница
   Чист, модерен изглед – Telegram/Discord-подобен
   ========================================== */

/* Base – модерен фон, sans-serif, без grid */
html[data-style="modern"] body.redesign {
  background: var(--bg-darkest);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  position: relative;
  overflow-x: hidden;
}

/* Без grid и scanlines при modern */
html[data-style="modern"] body.redesign::before,
html[data-style="modern"] body.redesign::after {
  display: none !important;
}

/* Модерни карти – без WoW декорации */
html[data-style="modern"] .wow-card {
  background: var(--bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html[data-style="modern"] .wow-card::before,
html[data-style="modern"] .wow-card::after {
  display: none !important;
}

/* Header – същата прозрачност като чат контейнера */
html[data-style="modern"] body.redesign .header.site-header,
html[data-style="modern"] .site-header {
  background: color-mix(in srgb, var(--bg-dark) 60%, transparent) !important;
  opacity: 0.7 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

html[data-style="modern"] body.redesign .header:not(.site-header) {
  background: color-mix(in srgb, var(--bg-dark) 60%, transparent) !important;
  opacity: 0.7 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-style="modern"] .nav .nav-link,
html[data-style="modern"] .site-header .nav .nav-link {
  color: #ffffff !important;
}

html[data-style="modern"] .nav .nav-link:hover,
html[data-style="modern"] .site-header .nav .nav-link:hover {
  color: var(--accent) !important;
}

/* Лого и подзаглавие – същият цвят като футера (--accent) */
html[data-style="modern"] body.redesign .header .logo h1,
html[data-style="modern"] body.redesign .header .logo .site-title,
html[data-style="modern"] body.redesign .header .logo .subtitle {
  color: var(--accent) !important;
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
}
html[data-style="modern"] body.redesign .header .logo .logo-heart {
  color: #dc3545 !important;
  -webkit-text-fill-color: #dc3545 !important;
}

html[data-style="modern"] body.redesign .main-content {
  background: transparent;
  position: relative;
  z-index: 2;
}

html[data-style="modern"] body.redesign .chat-section {
  background: transparent;
}

html[data-style="modern"] body.redesign .page-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Карти на страници */
html[data-style="modern"] body.redesign .card,
html[data-style="modern"] body.redesign .digest-card {
  background: color-mix(in srgb, var(--bg-dark) 65%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Бутони – цветове от темите */
html[data-style="modern"] body.redesign .btn,
html[data-style="modern"] body.redesign .main-content .btn {
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
}

html[data-style="modern"] body.redesign .btn-primary,
html[data-style="modern"] body.redesign .main-content .btn-primary,
html[data-style="modern"] body.redesign .card .btn-primary,
html[data-style="modern"] body.redesign .login-section .login-dropdown button#loginBtn,
html[data-style="modern"] body.redesign .login-section .login-dropdown .btn-primary {
  background: var(--accent) !important;
  color: var(--bg-darkest) !important;
  border-color: var(--accent) !important;
  border-radius: 8px;
  box-shadow: none;
}

html[data-style="modern"] body.redesign .btn-primary:hover:not(:disabled),
html[data-style="modern"] body.redesign .main-content .btn-primary:hover:not(:disabled),
html[data-style="modern"] body.redesign .card .btn-primary:hover:not(:disabled) {
  filter: brightness(1.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html[data-style="modern"] body.redesign .btn-secondary,
html[data-style="modern"] body.redesign .main-content .btn-secondary,
html[data-style="modern"] body.redesign .card .btn-secondary {
  background: var(--bg-secondary) !important;
  color: var(--text) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html[data-style="modern"] body.redesign .btn-secondary:hover:not(:disabled),
html[data-style="modern"] body.redesign .main-content .btn-secondary:hover:not(:disabled) {
  background: var(--bg-medium) !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
}

html[data-style="modern"] body.redesign .btn-success,
html[data-style="modern"] body.redesign .main-content .btn-success,
html[data-style="modern"] body.redesign .card .btn-success {
  background: var(--accent) !important;
  color: var(--bg-darkest) !important;
  border-color: var(--accent) !important;
}

html[data-style="modern"] body.redesign .btn-success:hover:not(:disabled) {
  filter: brightness(1.12);
}

/* User menu – вграден в хедъра, без бял бокс; бутон Изход с accent на темата */
html[data-style="modern"] body.redesign .header .user-menu,
html[data-style="modern"] body.redesign .login-section .user-menu {
  background: transparent !important;
  border: none !important;
}
html[data-style="modern"] body.redesign .header .user-name {
  color: var(--text, #fff) !important;
}
html[data-style="modern"] body.redesign .header .btn-logout,
html[data-style="modern"] body.redesign .login-section .btn-logout {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--bg-darkest, #fff) !important;
}
html[data-style="modern"] body.redesign .header .btn-logout:hover,
html[data-style="modern"] body.redesign .login-section .btn-logout:hover {
  filter: brightness(1.12);
}

/* ========== Modern Chat – message bubbles ========== */
html[data-style="modern"] .chat-container,
html[data-style="modern"] body.redesign .chat-container.wow-card {
  font-family: 'Inter', sans-serif;
  background: color-mix(in srgb, var(--bg-dark) 60%, transparent) !important;
  opacity: 0.7 !important;
}

html[data-style="modern"] body.redesign .chat-stats {
  opacity: 0.7 !important;
}

/* Chat header и табове – същата прозрачност като чат контейнера */
html[data-style="modern"] body.redesign .chat-section .chat-header,
html[data-style="modern"] body.redesign .chat-tabs {
  background: color-mix(in srgb, var(--bg-dark) 60%, transparent) !important;
  opacity: 0.7 !important;
}

/* Sidebar – същата прозрачност като чат контейнера */
html[data-style="modern"] body.redesign .sidebar {
  background: transparent !important;
}

html[data-style="modern"] body.redesign .sidebar .sidebar-section {
  background: color-mix(in srgb, var(--bg-dark) 60%, transparent) !important;
  opacity: 0.7 !important;
}

/* Онлайн потребители – заглавие и имена в един цвят според темата */
html[data-style="modern"] body.redesign .sidebar-section h3,
html[data-style="modern"] body.redesign .sidebar-section .online-user .user-name {
  color: var(--text);
}

html[data-style="modern"] body.redesign .chat-messages {
  background: transparent !important;
}

html[data-style="modern"] .chat-messages .message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 12px;
}

/* Моите и чуждите съобщения – и двете от ляво */

html[data-style="modern"] .chat-messages .message.user .message-info {
  order: 1;
  margin-bottom: 4px;
  font-size: 11px;
  opacity: 0.8;
}

html[data-style="modern"] .chat-messages .message.user.own-message .message-info {
  margin-left: 0;
  margin-right: 0;
}

html[data-style="modern"] .chat-messages .message.user .message-content {
  order: 2;
  border-radius: 16px;
  padding: 10px 14px;
  max-width: 75%;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

/* Базов стил – козметиките (msg-effect-*) могат да го презаписват */
html[data-style="modern"] .chat-messages .message.user .message-content:not([class*="msg-effect"]) {
  background: var(--bg-medium);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-style="modern"] .chat-messages .message.user.own-message .message-content:not([class*="msg-effect"]) {
  background: var(--accent);
  color: var(--bg-darkest);
  border-color: transparent;
}

html[data-style="modern"] .chat-messages .message.user .message-username {
  font-size: 12px;
  font-weight: 600;
}

html[data-style="modern"] .chat-messages .message.bot .message-content {
  background: var(--bg-medium);
  border-radius: 16px;
  padding: 10px 14px;
  max-width: 85%;
  font-family: 'Inter', sans-serif;
}

html[data-style="modern"] .chat-messages .message.system .message-content,
html[data-style="modern"] .chat-messages .message.action .message-content {
  border-radius: 12px;
  padding: 6px 12px;
  font-family: 'Inter', sans-serif;
}

html[data-style="modern"] .chat-input-container input {
  font-family: 'Inter', sans-serif;
  border-radius: 20px;
}

/* ========== Modern Private Chat ========== */
html[data-style="modern"] .private-chat-messages {
  font-family: 'Inter', sans-serif;
  color: var(--text);
}

html[data-style="modern"] .private-msg-bubble {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 12px;
}

html[data-style="modern"] .private-msg-bubble.sent {
  align-self: flex-end;
  align-items: flex-end;
  border: none;
}

html[data-style="modern"] .private-msg-bubble.sent:not([class*="msg-effect"]) {
  background: var(--accent);
  color: var(--bg-darkest);
}

html[data-style="modern"] .private-msg-bubble.received {
  align-self: flex-start;
  color: var(--text);
}

html[data-style="modern"] .private-msg-bubble.received:not([class*="msg-effect"]) {
  background: var(--bg-medium);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-style="modern"] .private-msg-bubble .pm-msg-header {
  order: 1;
  margin-bottom: 4px;
}

html[data-style="modern"] .private-msg-bubble .pm-msg-body {
  order: 2;
}

html[data-style="modern"] .private-msg-bubble .pm-msg-username {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

html[data-style="modern"] .private-msg-bubble.sent .pm-msg-username {
  color: var(--bg-darkest);
}

html[data-style="modern"] .private-msg-bubble .msg-time {
  font-size: 11px;
  opacity: 0.8;
  margin-top: 4px;
}

html[data-style="modern"] .private-chat-input-wrap #privateMessageInput {
  font-family: 'Inter', sans-serif;
  border-radius: 20px;
  background: var(--bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
}

html[data-style="modern"] .private-chat-input-wrap #privateMessageInput:focus {
  border-color: var(--accent);
}

/* Бутони в чата – цветове от темите */
html[data-style="modern"] .chat-input-container .btn.btn-primary,
html[data-style="modern"] #sendMessageBtn,
html[data-style="modern"] .private-chat-input-wrap .btn.btn-primary,
html[data-style="modern"] #privateSendBtn {
  background: var(--accent) !important;
  color: var(--bg-darkest) !important;
  border-color: var(--accent) !important;
}

html[data-style="modern"] .chat-input-container .btn.btn-primary:hover,
html[data-style="modern"] #sendMessageBtn:hover,
html[data-style="modern"] .private-chat-input-wrap .btn.btn-primary:hover,
html[data-style="modern"] #privateSendBtn:hover {
  filter: brightness(1.12);
}

html[data-style="modern"] .load-more-btn {
  background: var(--accent) !important;
  color: var(--bg-darkest) !important;
}

html[data-style="modern"] .load-more-btn:hover:not(:disabled) {
  filter: brightness(1.12);
}

html[data-style="modern"] .action-btn:hover {
  background: var(--accent) !important;
  color: var(--bg-darkest) !important;
}

html[data-style="modern"] .edit-message-input,
html[data-style="modern"] .edit-message-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12) !important;
}

html[data-style="modern"] .save-edit-btn {
  background: var(--accent) !important;
  color: var(--bg-darkest) !important;
}

html[data-style="modern"] .save-edit-btn:hover {
  filter: brightness(1.12);
}

/* Style selector бутони */
html[data-style="modern"] .btn-style {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}

html[data-style="modern"] .btn-style:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
}

html[data-style="modern"] .btn-style.active {
  background: var(--accent);
  color: var(--bg-darkest);
  border-color: var(--accent);
}

/* Header style switcher – компактен в навигацията */
html[data-style="modern"] .header-style-switcher {
  display: flex;
  gap: 4px;
  align-items: center;
}
html[data-style="modern"] .btn-style-header {
  padding: 4px 8px;
  font-size: 14px;
  min-width: 36px;
}

/* Header theme switcher – смена на теми при SPA страници */
html[data-style="modern"] .header-theme-switcher {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-wrap: wrap;
}
html[data-style="modern"] .btn-theme-header {
  padding: 2px 6px;
  font-size: 12px;
  min-width: 28px;
}
html[data-style="modern"] .btn-theme-header.active,
html[data-style="modern"] .btn-cyber[data-theme].active {
  background: var(--accent) !important;
  color: var(--bg-darkest) !important;
  border-color: var(--accent) !important;
}