/* Shared visual overrides for tool pages (editor, generator, auth, dashboard, articles) */

body {
  font-family: var(--font-sans, 'Figtree', system-ui, sans-serif) !important;
}

/* When new chrome is present, hide leftover legacy drawers */
body:has(.site-header) .sidebar:not(.editor-sidebar),
body:has(.site-header) .overlay:not(.nav-overlay) {
  display: none !important;
}

body:has(.site-header) .article-container {
  margin-top: 72px !important;
}

/* Soften decorative grain/images, but keep solid/gradient fills for contrast */
.research-editor-section,
.welcome-section,
.auth-container,
body.auth-legacy {
  background-image: none !important;
}

.hero-section {
  color: #ffffff !important;
  background-color: #0c1220 !important;
  background-image:
    linear-gradient(115deg, rgba(12, 18, 32, 0.88) 0%, rgba(12, 18, 32, 0.66) 46%, rgba(15, 110, 110, 0.42) 100%),
    var(--hero-image, none) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.hero-section h1,
.hero-section .hero-title,
.hero-section p,
.hero-section .hero-subtitle,
.hero-section .feature-tag {
  color: #ffffff !important;
}

.hero-section .feature-tag {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.editor-header {
  background: #0c1220 !important;
  color: #ffffff !important;
}

/* Soften legacy header when new chrome is not fully migrated */
header:not(.site-header) {
  background: #ffffff !important;
  color: #0c1220 !important;
  border-bottom: 1px solid #dde3ec;
  height: 72px !important;
  box-shadow: none !important;
}

header:not(.site-header) .menu-icon {
  color: #0c1220;
  left: auto !important;
  right: 1.25rem;
}

.sidebar:not(.editor-sidebar) {
  background: #0c1220 !important;
  padding-top: 72px !important;
}

.sidebar:not(.editor-sidebar) a:hover {
  background: #0f6e6e !important;
  color: #fff !important;
}

footer:not(.site-footer) {
  background: #0c1220 !important;
}

.subscribe-box button:hover {
  background: #0f6e6e !important;
  color: #fff !important;
}

.article-category {
  background: #0f6e6e !important;
  border-radius: 4px !important;
}

.back-button {
  background: #0f6e6e !important;
  border-radius: 6px !important;
}

.abstract {
  border-left-color: #0f6e6e !important;
}

.results-section {
  background: #e6f3f3 !important;
  border-color: #0f6e6e !important;
}

/* Auth page when not fully rewritten */
body[data-page="auth"] {
  background: #f5f7fa !important;
}

/* Generator / editor buttons */
button,
.btn-primary,
.generate-button,
.submit-btn {
  border-radius: 6px !important;
}

.structure-btn.research-generator-btn {
  background: #0f6e6e !important;
  color: #ffffff !important;
}

/* Ensure generator CTA stays readable (tools.css used to clear its gradient) */
.generate-btn,
button.generate-btn,
#generateBtn {
  background: linear-gradient(135deg, #0f6e6e 0%, #0c1220 100%) !important;
  background-image: linear-gradient(135deg, #0f6e6e 0%, #0c1220 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 4px 14px rgba(12, 18, 32, 0.25) !important;
}

.generate-btn:hover,
button.generate-btn:hover,
#generateBtn:hover {
  background: linear-gradient(135deg, #0a5555 0%, #0c1220 100%) !important;
  background-image: linear-gradient(135deg, #0a5555 0%, #0c1220 100%) !important;
  color: #ffffff !important;
}

.generate-btn:disabled,
#generateBtn:disabled {
  opacity: 0.7 !important;
  color: #ffffff !important;
}

/* Form labels / helper text on tool pages */
.form-section .input-group label,
.structure-panel h3,
.editor-sidebar h3,
.section-title,
.form-title,
.results-title {
  color: #0c1220 !important;
}

.input-group input,
.input-group select,
.input-group textarea {
  color: #181824 !important;
  background: #ffffff !important;
}

.input-group input::placeholder,
.input-group textarea::placeholder {
  color: #5f6b7a !important;
  opacity: 1 !important;
}

/* Keep editor title bar readable on dark header */
.editor-header .title-input {
  color: #ffffff !important;
  background: transparent !important;
}

.editor-header .title-input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

.structure-btn {
  color: #0c1220 !important;
  background: #ffffff !important;
  border-color: #dde3ec !important;
}

.ai-btn {
  color: #0c1220 !important;
  background: #ffffff !important;
}

.ai-btn:hover {
  color: #ffffff !important;
  background: #0f6e6e !important;
}