/* =========================================================
   ChartView Trade - Theme / Editor Visibility Overrides
   Keeps the global menu and editor controls visible in both
   dark and light modes.
   ========================================================= */

/* -------------------------
   Global brand
   ------------------------- */
#top-menu-brand a,
#top-menu-brand a:visited,
#top-menu-brand a:hover,
#top-menu-brand a:active {
  color: #e5e7eb !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

body.light-mode #top-menu-brand a,
body.light-mode #top-menu-brand a:visited,
body.light-mode #top-menu-brand a:hover,
body.light-mode #top-menu-brand a:active {
  color: #1f2937 !important;
}

/* -------------------------
   Global menu buttons
   ------------------------- */
#top-menu-items > button,
#top-menu-controls button,
#global-settings-btn {
  background: #1b2430 !important;
  color: #e5e7eb !important;
  border-color: #3a4656 !important;
}

#top-menu-items > button:hover,
#top-menu-controls button:hover,
#global-settings-btn:hover {
  background: #253244 !important;
  color: #ffffff !important;
  border-color: #5b8fd8 !important;
}

body.light-mode #top-menu-items > button,
body.light-mode #top-menu-controls button,
body.light-mode #global-settings-btn {
  background: #e7ebef !important;
  color: #334155 !important;
  border-color: #c5ccd4 !important;
}

body.light-mode #top-menu-items > button:hover,
body.light-mode #top-menu-controls button:hover,
body.light-mode #global-settings-btn:hover {
  background: #dce2e8 !important;
  color: #1f2937 !important;
  border-color: #aab4c0 !important;
}

/* Logged-in nickname should match the menu text tone. */
body.light-mode #auth-user-nickname {
  color: #334155 !important;
}

/* -------------------------
   Settings popup
   ------------------------- */
body.light-mode #global-settings-popup {
  background: #ffffff !important;
  color: #1f2937 !important;
  border-color: #cfd6de !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14) !important;
}

body.light-mode #global-settings-popup .cv-setting-label {
  color: #64748b !important;
}

body.light-mode #global-settings-popup button {
  color: #334155 !important;
}

body.light-mode #global-settings-popup button:hover,
body.light-mode #global-settings-popup button.active {
  background: #eef4ff !important;
  color: #1d4ed8 !important;
}

/* -------------------------
   Board editor toolbar
   ------------------------- */
.cv-editor-toolbar {
  background: #182230 !important;
  border-color: #364355 !important;
}

.cv-editor-toolbar .cv-editor-tool,
.cv-editor-toolbar .cv-editor-size-wrap,
.cv-editor-toolbar .cv-editor-color-group {
  background: #222e3d !important;
  color: #e5edf5 !important;
  border-color: #465568 !important;
}

.cv-editor-toolbar .cv-editor-tool:hover {
  background: #2b3a4d !important;
  color: #ffffff !important;
  border-color: #6ea8fe !important;
}

.cv-editor-toolbar .cv-editor-tool:focus-visible {
  outline: 2px solid #6ea8fe;
  outline-offset: 1px;
}

body.light-mode .cv-editor-toolbar {
  background: #eef2f6 !important;
  border-color: #cbd5df !important;
}

body.light-mode .cv-editor-toolbar .cv-editor-tool,
body.light-mode .cv-editor-toolbar .cv-editor-size-wrap,
body.light-mode .cv-editor-toolbar .cv-editor-color-group {
  background: #ffffff !important;
  color: #334155 !important;
  border-color: #c3ccd6 !important;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
}

body.light-mode .cv-editor-toolbar .cv-editor-tool:hover {
  background: #eef4ff !important;
  color: #1d4ed8 !important;
  border-color: #8fb3e8 !important;
}

/* Make select text visible in light mode. */
body.light-mode .cv-editor-size {
  color: #334155 !important;
}

body.light-mode .cv-editor-size option {
  background: #ffffff !important;
  color: #1f2937 !important;
}

/* Editor color palette */
.cv-editor-color-palette {
  background: #182230 !important;
  border-color: #3f4d60 !important;
}

body.light-mode .cv-editor-color-palette {
  background: #ffffff !important;
  border-color: #cbd5df !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15) !important;
}

body.light-mode .cv-editor-color-title {
  color: #64748b !important;
}

/* Contenteditable editor */
body.light-mode .cv-editor-content {
  background: #ffffff !important;
  color: #1f2937 !important;
  border-color: #cbd5df !important;
}

body.light-mode .cv-editor-content:focus {
  border-color: #3b82f6 !important;
}

body.light-mode .cv-editor-content.is-empty::before {
  color: #94a3b8 !important;
}

/* Guest fields */
body.light-mode .cv-guest-fields input,
body.light-mode .cv-form-input {
  background: #ffffff !important;
  color: #1f2937 !important;
  border-color: #cbd5df !important;
}

/* Mobile: keep toolbar compact but readable. */
@media (max-width: 700px) {
  #top-menu-brand a {
    font-size: clamp(12px, 3.2vw, 16px) !important;
  }

  .cv-editor-toolbar {
    gap: 5px !important;
    padding: 6px !important;
  }

  .cv-editor-toolbar .cv-editor-tool,
  .cv-editor-toolbar .cv-editor-size-wrap,
  .cv-editor-toolbar .cv-editor-color-group {
    min-height: 30px;
  }
}

.cv-editor-toolbar .cv-editor-color-swatch { background: var(--swatch) !important; color: transparent !important; border: 2px solid rgba(0,0,0,.22) !important; }

/* =========================================================
   Mobile global menu - prevent overlap while preserving order
   Order: Brand > Board > Login/Profile > Settings > Theme
   ========================================================= */
@media (max-width: 700px) {
  #top-menu-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 6px !important;
    overflow: visible !important;
  }

  #top-menu-brand {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #top-menu-brand a {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(11px, 3.2vw, 14px) !important;
  }

  #top-menu-spacer {
    display: none !important;
  }

  #top-menu-items {
    min-width: max-content !important;
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 3px !important;
    overflow: visible !important;
  }

  #top-menu-items > button,
  #top-menu-controls button,
  #global-settings-btn {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  #top-menu-controls {
    min-width: max-content !important;
    width: auto !important;
    flex: 0 0 auto !important;
    gap: 3px !important;
  }

  #auth-box,
  #auth-guest-view,
  #auth-user-view {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
  }

  #auth-user-nickname {
    max-width: 72px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #theme-toggle-btn,
  #global-settings-btn {
    width: 28px !important;
    min-width: 28px !important;
    padding: 4px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 420px) {
  #top-menu-bar {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 2px !important;
    padding: 0 4px !important;
  }

  #top-menu-brand a {
    font-size: 10.5px !important;
  }

  #top-menu-items > button,
  #top-menu-controls button,
  #global-settings-btn {
    min-height: 26px !important;
    padding: 3px 5px !important;
    font-size: 9px !important;
  }

  #auth-user-nickname {
    max-width: 58px !important;
  }

  #theme-toggle-btn,
  #global-settings-btn {
    width: 26px !important;
    min-width: 26px !important;
    font-size: 13px !important;
  }
}