/*
 * CyberManager dark theme: topbar, navigation popovers and messenger.
 *
 * This file is intentionally loaded after the legacy topbar CSS. Keep all
 * dark-theme-only corrections here instead of adding more !important rules
 * to static/css/components/topbar.css.
 */

html[data-theme="dark"] {
  --topbar-bg-dark: rgba(41, 41, 41, .96);
  --topbar-surface-dark: #303030;
  --topbar-surface-hover-dark: #373737;
  --topbar-surface-active-dark: #3b3b3b;
  --topbar-popover-dark: #323232;
  --topbar-text-dark: #ededed;
  --topbar-muted-dark: #ababab;
  --topbar-shadow-dark: 0 22px 58px rgba(0, 0, 0, .30);

  --message-shell-dark: #2f2f2f;
  --message-sidebar-dark: #323232;
  --message-content-dark: #2f2f2f;
  --message-card-dark: #393939;
  --message-card-hover-dark: #404040;
  --message-card-active-dark: #3c4848;
  --message-own-dark: #354545;
  --message-field-dark: #383838;
}

/* Top bar and primary navigation. */
html[data-theme="dark"] .topbar {
  background: var(--topbar-bg-dark) !important;
  border-bottom-color: rgba(255, 255, 255, .055) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18) !important;
}

html[data-theme="dark"] .topbar .nav-btn.topbar-primary-link {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--topbar-muted-dark) !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="dark"] .topbar .nav-btn.topbar-primary-link:hover,
html[data-theme="dark"] .topbar .nav-btn.topbar-primary-link:focus-visible {
  background: var(--topbar-surface-hover-dark) !important;
  border-color: transparent !important;
  color: var(--topbar-text-dark) !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="dark"] .topbar .nav-btn.topbar-primary-link.active,
html[data-theme="dark"] .topbar-dropdown:has(.topbar-submenu-link.active) > .topbar-primary-link,
html[data-theme="dark"] .topbar-more-dropdown.has-active > .topbar-primary-link {
  background: var(--topbar-surface-active-dark) !important;
  border-color: transparent !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 -2px 0 rgba(var(--brand-rgb), .72) !important;
}

html[data-theme="dark"] .topbar .nav-btn.topbar-primary-link.active:hover,
html[data-theme="dark"] .topbar-dropdown:has(.topbar-submenu-link.active) > .topbar-primary-link:hover,
html[data-theme="dark"] .topbar-more-dropdown.has-active > .topbar-primary-link:hover {
  background: #404040 !important;
}

/* Navigation dropdowns: separation by surface and shadow, not outlines. */
html[data-theme="dark"] :where(
  .topbar-rich-submenu,
  .topbar-account-submenu,
  .topbar-workspace-popover,
  .notifPopover,
  .topbarSystemNotificationPopover,
  .workActionPopover
) {
  background: var(--topbar-popover-dark) !important;
  border: 0 !important;
  box-shadow: var(--topbar-shadow-dark) !important;
}

html[data-theme="dark"] :where(
  .topbar-submenu,
  .topbar-account-submenu,
  .topbar-workspace-popover
)::before {
  display: none !important;
  border: 0 !important;
}

html[data-theme="dark"] .topbar-rich-submenu .topbar-submenu-link,
html[data-theme="dark"] .topbar-account-submenu .topbar-submenu-link,
html[data-theme="dark"] .topbar-workspace-row {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .topbar-rich-submenu .topbar-submenu-link:hover,
html[data-theme="dark"] .topbar-rich-submenu .topbar-submenu-link:focus-visible,
html[data-theme="dark"] .topbar-account-submenu .topbar-submenu-link:hover,
html[data-theme="dark"] .topbar-account-submenu .topbar-submenu-link:focus-visible,
html[data-theme="dark"] .topbar-workspace-row:hover,
html[data-theme="dark"] .topbar-workspace-row:focus-visible {
  background: var(--topbar-surface-hover-dark) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .topbar-submenu-glyph,
html[data-theme="dark"] .topbar-nav-glyph {
  background: #3a4444 !important;
  color: #9adcdc !important;
  box-shadow: none !important;
}

/* Account popover and tariff card. */
html[data-theme="dark"] .topbar-account-profile-card {
  background: var(--topbar-surface-dark) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .topbar-account-profile-bg {
  opacity: 1 !important;
  filter: none !important;
  background-color: #303030 !important;
  background-blend-mode: luminosity !important;
}

html[data-theme="dark"] .topbar-account-profile-bg::after,
html[data-theme="dark"] .topbar-account-profile-bg.has-bg::after {
  background: linear-gradient(180deg, rgba(42, 42, 42, .72), rgba(48, 48, 48, .96)) !important;
  backdrop-filter: blur(1px) saturate(.55) !important;
}

html[data-theme="dark"] .topbar-account-profile-main,
html[data-theme="dark"] .topbar-account-profile-text,
html[data-theme="dark"] .topbar-account-profile-text b {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .topbar-account-profile-text span,
html[data-theme="dark"] .topbar-active-tariff-kicker,
html[data-theme="dark"] .topbar-active-tariff-card .topbar-tariff-expires {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] .topbar-active-tariff-card {
  background: #383838 !important;
  border: 0 !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .topbar-active-tariff-card:hover,
html[data-theme="dark"] .topbar-active-tariff-card:focus-visible {
  background: #404040 !important;
}

html[data-theme="dark"] .topbar-active-tariff-card .topbar-tariff-name {
  color: var(--text-primary) !important;
}

/* Messenger shell. Borders are removed; hierarchy is created by surfaces. */
html[data-theme="dark"] :where(#msgPanel, .msgPanel) {
  --msg-line: transparent;
  --msg-bg: var(--message-shell-dark);
  --msg-slate: var(--text-primary);
  --msg-muted: var(--text-muted);
  background: var(--message-shell-dark) !important;
  border: 0 !important;
  box-shadow: 0 28px 78px rgba(0, 0, 0, .42) !important;
}

html[data-theme="dark"] :where(
  .msgHead,
  .msgTabs,
  .msgPaneHost,
  .msgBody,
  .msgRight,
  .marketRight,
  .msgDialogHead,
  .msgDialog,
  .msgSend,
  .msgAttachPreview
) {
  background: var(--message-content-dark) !important;
  border-color: transparent !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .msgHead {
  background: #333333 !important;
}

html[data-theme="dark"] .msgTabs {
  background: #303030 !important;
  border-bottom: 0 !important;
}

html[data-theme="dark"] .msgLeft,
html[data-theme="dark"] .marketLeft {
  background: var(--message-sidebar-dark) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :where(
  .msgHeadText b,
  .msgHead .auto-topbar-2,
  .msgDialogHeadInner b,
  .threadName,
  .marketMsgText,
  .marketPremiumTitle,
  .attName
) {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] :where(
  .msgHeadSub,
  .msgDialogHead .muted,
  .msgTypingLine,
  .threadLast,
  .msgSenderLine,
  .bubbleMeta,
  .marketDialogHeadMeta,
  .marketPremiumText
) {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] :where(.msgSearch, .msgInput, .marketSelect, .msgNewChatSearchInput) {
  background: var(--message-field-dark) !important;
  border: 0 !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :where(.msgSearch, .msgInput, .marketSelect, .msgNewChatSearchInput)::placeholder {
  color: var(--text-faint) !important;
}

html[data-theme="dark"] :where(.msgSearch, .msgInput, .marketSelect, .msgNewChatSearchInput):focus {
  background: #3d3d3d !important;
  border: 0 !important;
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .17) !important;
}

html[data-theme="dark"] .msgMiniBtn,
html[data-theme="dark"] #msgNewChatBtn,
html[data-theme="dark"] .marketReadAllBtn,
html[data-theme="dark"] .marketUnwatchBtn {
  background: #393939 !important;
  border: 0 !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .msgMiniBtn:hover,
html[data-theme="dark"] #msgNewChatBtn:hover,
html[data-theme="dark"] .marketReadAllBtn:hover,
html[data-theme="dark"] .marketUnwatchBtn:hover {
  background: #424242 !important;
  color: var(--text-primary) !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="dark"] .msgTabBtn {
  background: #383838 !important;
  border: 0 !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .msgTabBtn:hover {
  background: #404040 !important;
  color: var(--text-primary) !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="dark"] .msgTabBtn.isActive {
  background: #465252 !important;
  color: #eafafa !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .thread {
  background: var(--message-card-dark) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .thread:hover {
  background: var(--message-card-hover-dark) !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="dark"] .thread.active {
  background: var(--message-card-active-dark) !important;
  border: 0 !important;
  box-shadow: inset 3px 0 0 rgba(var(--brand-rgb), .72) !important;
}

html[data-theme="dark"] .thread.pinned::before {
  box-shadow: none !important;
}

html[data-theme="dark"] .threadAvatar,
html[data-theme="dark"] .msgDialogAvatar {
  background: #424242 !important;
  border: 0 !important;
}

html[data-theme="dark"] .threadBadge,
html[data-theme="dark"] .msgTabBadge {
  border-color: transparent !important;
}

html[data-theme="dark"] .threadPin,
html[data-theme="dark"] .threadDel {
  color: var(--text-faint) !important;
}

html[data-theme="dark"] .threadPin:hover,
html[data-theme="dark"] .threadDel:hover {
  background: #464646 !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .bubble {
  background: var(--message-card-dark) !important;
  border: 0 !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .bubble.me {
  background: var(--message-own-dark) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .sysLine,
html[data-theme="dark"] .marketPremiumState,
html[data-theme="dark"] .marketUnreadOnly,
html[data-theme="dark"] .attChip {
  background: #383838 !important;
  border: 0 !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .msgSendBtn {
  background: #444444 !important;
  border: 0 !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .msgSendBtn:hover {
  background: #4c4c4c !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="dark"] .msgNewChatPicker,
html[data-theme="dark"] .msgGroupSettings {
  background: rgba(10, 10, 10, .74) !important;
}

html[data-theme="dark"] .msgNewChatCard,
html[data-theme="dark"] .msgGroupSettingsCard {
  background: var(--message-shell-dark) !important;
  border: 0 !important;
  color: var(--text-primary) !important;
  box-shadow: 0 28px 78px rgba(0, 0, 0, .42) !important;
}

html[data-theme="dark"] .msgThreads::-webkit-scrollbar-thumb,
html[data-theme="dark"] .msgDialog::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb) !important;
}

@media (max-width: 720px) {
  html[data-theme="dark"] .topbar {
    background: var(--topbar-bg-dark) !important;
    border-bottom-color: rgba(255, 255, 255, .055) !important;
  }
}

/* Small controls injected into the messenger by storage_picker.js. */
html[data-theme="dark"] .msgSend .storagePickerInlineBtn,
html[data-theme="dark"] .marketSend .storagePickerInlineBtn {
  background: #393939 !important;
  border: 0 !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .msgSend .storagePickerInlineBtn:hover,
html[data-theme="dark"] .marketSend .storagePickerInlineBtn:hover {
  background: #424242 !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .topbar-account-actions,
html[data-theme="dark"] .topbar-workspace-popover-head,
html[data-theme="dark"] .topbar-workspace-current {
  border-color: transparent !important;
}

html[data-theme="dark"] .topbar-rich-submenu .topbar-submenu-link.active,
html[data-theme="dark"] .topbar-account-submenu .topbar-submenu-link.active,
html[data-theme="dark"] .topbar-workspace-row.is-current {
  background: #3c4646 !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}