/*
 * DBTools Documentation Theme
 *
 * Mirrors the styling from DBTools.Themes/Themes/App.Brushes.xaml
 * Dark mode only - matches tool UI/UX design
 *
 * Brand Colors:
 * - Primary: #1946B9 (Deep Blue)
 * - Primary Light: #3D6AD4
 * - Primary Dark: #0D2E7A
 * - Secondary: #FEC425 (Golden Yellow)
 * - Secondary Light: #FFD54F
 * - Secondary Dark: #C79100
 * - Paper: #181820 (Dark background)
 * - Surface: #222228
 * - Body Text: #E6E6E6
 */

/* ============================================
   CSS Variables - DBTools Brand Colors
   (Exact values from App.Brushes.xaml)
   ============================================ */
:root {
  /* Primary Colors */
  --dbt-primary: #1946B9;
  --dbt-primary-light: #3D6AD4;
  --dbt-primary-dark: #0D2E7A;

  /* Secondary Colors */
  --dbt-secondary: #FEC425;
  --dbt-secondary-light: #FFD54F;
  --dbt-secondary-dark: #C79100;

  /* Surface Colors */
  --dbt-paper: #181820;
  --dbt-surface: #222228;
  --dbt-surface-alt: #1C1C22;
  --dbt-surface-hover: #2A2A32;
  --dbt-card-surface: #1E1E24;
  --dbt-card-surface-elevated: #282830;
  --dbt-card-border: #3A3A44;

  /* Text Colors */
  --dbt-body: #E6E6E6;
  --dbt-body-light: #BDBDBD;
  --dbt-text-muted: #999999;
  --dbt-on-secondary: #181820;

  /* Border Colors */
  --dbt-divider: #3A3A44;
  --dbt-border: #4A4A55;
  --dbt-border-light: #5A5A66;
  --dbt-border-subtle: #2A2A34;

  /* Button Colors */
  --dbt-button-primary: #1946B9;
  --dbt-button-primary-hover: #3D6AD4;
  --dbt-button-secondary: #252530;
  --dbt-button-secondary-hover: #2D2D38;
  --dbt-button-secondary-border: #3A3A44;

  /* Input Colors */
  --dbt-input-background: #252530;
  --dbt-input-border: #3A3A44;
  --dbt-input-border-hover: #FEC425;
  --dbt-input-border-focus: #1946B9;

  /* Status Colors */
  --dbt-success: #4CAF50;
  --dbt-success-light: #81C784;
  --dbt-warning: #FFA000;
  --dbt-warning-light: #FFB74D;
  --dbt-error: #CF6679;
  --dbt-error-dark: #BA1A1A;
  --dbt-info: #1946B9;
  --dbt-info-light: #64B5F6;

  /* Selection Colors (with alpha) */
  --dbt-selection: rgba(25, 70, 185, 0.27);
  --dbt-selection-strong: rgba(25, 70, 185, 0.40);
  --dbt-hover: rgba(254, 196, 37, 0.20);
  --dbt-hover-strong: rgba(254, 196, 37, 0.33);

  /* Force dark mode colors as default */
  --bs-body-bg: var(--dbt-paper);
  --bs-body-color: var(--dbt-body);
  --bs-primary: var(--dbt-primary-light);
  --bs-primary-rgb: 61, 106, 212;
  --bs-link-color: var(--dbt-primary-light);
  --bs-link-hover-color: var(--dbt-secondary);
  --bs-secondary-bg: var(--dbt-surface);
  --bs-tertiary-bg: var(--dbt-surface-alt);
  --bs-border-color: var(--dbt-border);
}

/* ============================================
   Hide Theme Toggle (Dark Mode Only)
   ============================================ */
#theme-toggle,
[data-bs-theme-toggle],
button[title*="theme" i],
button[title*="Theme"],
.theme-toggle,
.btn-theme,
.bi-sun-fill,
.bi-moon-fill,
.navbar button:has(.bi-sun-fill),
.navbar button:has(.bi-moon-fill),
.navbar .nav-item:has([data-bs-theme-value]),
/* DocFX modern inserts the theme toggle as a dropdown inside `#navbar form.icons`. */
#navbar form.icons > .dropdown {
  display: none !important;
}

/* ============================================
   Force Dark Theme
   ============================================ */
html, body {
  background-color: var(--dbt-paper) !important;
  color: var(--dbt-body) !important;
}

[data-bs-theme="light"],
[data-bs-theme="dark"],
:root {
  color-scheme: dark;
}

/* ============================================
   Hide Hero/Background Logo Watermark
   (Keep navbar logo, hide the massive watermark)
   ============================================ */

/* Hide hero/cover sections */
.hero,
.hero-image,
.cover,
.cover-img,
.home-hero,
.cover-container,
.cover-main,
.cover-heading,
.jumbotron,
.masthead,
.splash,
.banner,
[class*="hero"],
[class*="cover"]:not(.cover-none),
[class*="splash"],
[class*="banner"]:not(nav [class*="banner"]),
[class*="masthead"] {
  display: none !important;
}

/* Hide logo images OUTSIDE the navbar (the watermark) */
main img[src*="logo"],
main img[src*="icon"],
main img[src*="brand"],
article img[src*="logo"],
article img[src*="icon"],
article img[src*="brand"],
.content img[src*="logo"],
.content img[src*="icon"],
section img[src*="logo"],
section img[src*="icon"],
.body-content img[src*="logo"],
.body-content img[src*="icon"],
#main img[src*="logo"],
#main img[src*="icon"],
.main img[src*="logo"],
.main img[src*="icon"] {
  display: none !important;
}

/* Hide any LARGE images that might be watermarks (over 100px) */
main img:not(.navbar img):not(nav img),
article img,
.content img:not(.navbar img),
section img:not(.navbar img) {
  max-width: 100% !important;
}

/* Aggressively hide large logo-like images */
img[width="200"],
img[width="300"],
img[width="400"],
img[width="500"],
img[height="200"],
img[height="300"],
img[height="400"],
img[height="500"] {
  display: none !important;
}

/* Hide any background images on content area */
article,
.content,
main,
.body-content,
section,
#main,
.main,
.container-xxl,
.flex-grow-1 {
  background-image: none !important;
}

/* Hide pseudo-elements that might contain logo backgrounds */
article::before,
article::after,
main::before,
main::after,
.content::before,
.content::after,
section::before,
section::after,
.body-content::before,
.body-content::after {
  display: none !important;
  background-image: none !important;
  content: none !important;
}

/* Ensure article backgrounds use our theme */
article {
  background-color: var(--dbt-paper) !important;
}

/* ============================================
   Navigation & Header
   ============================================ */
.navbar {
  background-color: var(--dbt-surface) !important;
  border-bottom: 2px solid var(--dbt-secondary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.navbar-brand {
  font-weight: 500;
  font-size: 1rem;
  color: var(--dbt-body) !important;
  display: flex;
  align-items: center;
}

/* Navbar logo - keep visible at proper size */
.navbar-brand img,
.navbar img,
header .navbar img,
#logo,
img#logo,
img.svg {
  max-height: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  width: auto !important;
  object-fit: contain;
  margin-right: 10px;
  display: inline-block !important;
  visibility: visible !important;
}

/* Ensure all images in content areas are reasonably sized */
main img,
article img,
.content img,
section img,
.body-content img {
  max-width: 100% !important;
  height: auto !important;
}

/* Any logo anywhere must be small */
img[src*="logo"],
img[src*="icon"],
img[alt*="logo" i],
img[alt*="DBTools" i] {
  max-width: 64px !important;
  max-height: 64px !important;
}

.navbar .nav-link {
  color: var(--dbt-body-light) !important;
  transition: color 0.2s ease;
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
  color: var(--dbt-secondary) !important;
}

/* ============================================
   Sidebar / TOC
   ============================================ */
.toc {
  background-color: var(--dbt-surface-alt);
  border-right: 1px solid var(--dbt-divider);
}

.toc .nav-link {
  color: var(--dbt-body-light) !important;
  padding: 0.5rem 1rem;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.toc .nav-link.active {
  color: var(--dbt-secondary) !important;
  border-left: 3px solid var(--dbt-secondary);
  background-color: var(--dbt-hover);
}

.toc .nav-link:hover {
  color: var(--dbt-primary-light) !important;
  background-color: var(--dbt-surface-hover);
}

/* ============================================
   Content Area
   ============================================ */
.content {
  background-color: var(--dbt-paper);
}

article {
  padding: 2rem;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--dbt-body) !important;
  font-weight: 600;
}

h1 {
  border-bottom: 2px solid var(--dbt-secondary);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

h2 {
  border-bottom: 1px solid var(--dbt-divider);
  padding-bottom: 0.3rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* Links */
a {
  color: var(--dbt-primary-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--dbt-secondary);
  text-decoration: underline;
}

/* ============================================
   Code Blocks (matches tool syntax highlighting)
   ============================================ */
pre {
  background-color: var(--dbt-surface) !important;
  border: 1px solid var(--dbt-card-border);
  border-left: 4px solid var(--dbt-secondary);
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
}

pre code {
  color: var(--dbt-body) !important;
  background: transparent !important;
}

/* Inline code */
:not(pre) > code {
  background-color: var(--dbt-input-background);
  color: var(--dbt-secondary) !important;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ============================================
   Tables (matches DataGrid styling)
   ============================================ */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  background-color: var(--dbt-surface-alt);
  border-radius: 8px;
  overflow: hidden;
}

th {
  background-color: var(--dbt-card-surface) !important;
  color: var(--dbt-body) !important;
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--dbt-primary);
}

td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--dbt-divider);
  color: var(--dbt-body);
}

tr:hover td {
  background-color: var(--dbt-hover);
}

/* ============================================
   Blockquotes & Alerts
   ============================================ */
blockquote {
  background-color: var(--dbt-surface);
  border-left: 4px solid var(--dbt-secondary);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  color: var(--dbt-body-light);
}

blockquote strong {
  color: var(--dbt-secondary);
}

/* Alert boxes */
.alert, .NOTE, .TIP, .WARNING, .IMPORTANT, .CAUTION {
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.NOTE, .TIP {
  background-color: rgba(25, 70, 185, 0.15);
  border-left: 4px solid var(--dbt-primary);
}

.WARNING, .CAUTION {
  background-color: rgba(255, 160, 0, 0.15);
  border-left: 4px solid var(--dbt-warning);
}

.IMPORTANT {
  background-color: rgba(207, 102, 121, 0.15);
  border-left: 4px solid var(--dbt-error);
}

/* ============================================
   Buttons (matches tool button styling)
   ============================================ */
.btn, button {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-primary {
  background-color: var(--dbt-button-primary) !important;
  border-color: var(--dbt-button-primary) !important;
  color: white !important;
}

.btn-primary:hover {
  background-color: var(--dbt-button-primary-hover) !important;
  border-color: var(--dbt-button-primary-hover) !important;
}

.btn-secondary, .btn-outline-secondary {
  background-color: var(--dbt-button-secondary) !important;
  border-color: var(--dbt-button-secondary-border) !important;
  color: var(--dbt-body) !important;
}

.btn-secondary:hover, .btn-outline-secondary:hover {
  background-color: var(--dbt-button-secondary-hover) !important;
  border-color: var(--dbt-secondary) !important;
}

/* ============================================
   Cards (matches CardSurface styling)
   ============================================ */
.card {
  background-color: var(--dbt-card-surface) !important;
  border: 1px solid var(--dbt-card-border) !important;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.card:hover {
  border-color: var(--dbt-secondary) !important;
  box-shadow: 0 4px 16px rgba(254, 196, 37, 0.15);
}

.card-header {
  background-color: var(--dbt-surface) !important;
  border-bottom: 1px solid var(--dbt-divider) !important;
}

.card-body {
  color: var(--dbt-body);
}

/* ============================================
   Forms & Inputs (matches Input styling)
   ============================================ */
input, textarea, select, .form-control {
  background-color: var(--dbt-input-background) !important;
  border: 1px solid var(--dbt-input-border) !important;
  color: var(--dbt-body) !important;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  transition: border-color 0.2s ease;
}

input:hover, textarea:hover, select:hover, .form-control:hover {
  border-color: var(--dbt-input-border-hover) !important;
}

input:focus, textarea:focus, select:focus, .form-control:focus {
  border-color: var(--dbt-input-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(25, 70, 185, 0.25) !important;
  outline: none;
}

/* Search box */
.search-box input {
  background-color: var(--dbt-input-background) !important;
  border-color: var(--dbt-input-border) !important;
}

/* ============================================
   Search Results
   ============================================ */
.search-results-container {
  background-color: var(--dbt-surface) !important;
  border: 1px solid var(--dbt-card-border);
  border-radius: 8px;
}

.search-results-container mark {
  background-color: var(--dbt-secondary);
  color: var(--dbt-on-secondary);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

/* ============================================
   Footer
   ============================================ */
footer {
  background-color: var(--dbt-surface) !important;
  border-top: 2px solid var(--dbt-secondary);
  color: var(--dbt-body-light);
}

/* ============================================
   Mermaid Diagrams
   ============================================ */
.mermaid {
  background-color: var(--dbt-surface);
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--dbt-card-border);
}

/* ============================================
   API Documentation Specific
   ============================================ */
.memberInfo {
  background-color: var(--dbt-surface);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.paramLabel {
  color: var(--dbt-secondary);
  font-weight: 600;
}

/* ============================================
   Scrollbar (matches tool scrollbar styling)
   ============================================ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--dbt-paper);
}

::-webkit-scrollbar-thumb {
  background: var(--dbt-border);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--dbt-border-light);
}

/* ============================================
   Status Badges
   ============================================ */
.badge-complete, .badge-success {
  background-color: var(--dbt-success) !important;
  color: white !important;
}

.badge-in-progress, .badge-warning {
  background-color: var(--dbt-secondary) !important;
  color: var(--dbt-on-secondary) !important;
}

.badge-not-started, .badge-secondary {
  background-color: var(--dbt-text-muted) !important;
  color: white !important;
}

.badge-error, .badge-danger {
  background-color: var(--dbt-error) !important;
  color: white !important;
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
  .navbar,
  .toc,
  footer {
    display: none;
  }

  body {
    background: white !important;
    color: black !important;
  }

  a {
    color: var(--dbt-primary) !important;
    text-decoration: underline;
  }
}