/* ============================================================
   GLOBAL STYLES
   ============================================================
   
   Global utilities and Dash overrides.
   All component styling is Bootstrap-native.
   ============================================================ */

/* Global font family - Bootstrap standard variables */
body {
  font-family: var(--bs-font-sans-serif) !important;
  font-size: 1rem;
  line-height: 1.5;
}

/* Space Grotesk for headings and branding using Bootstrap variables */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--bs-headings-font-family) !important;
}

.navbar-brand {
  font-family: var(--bs-headings-font-family) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Hide Dash loading spinner */
._dash-loading {
  visibility: hidden;
}

/* Ensure Bootstrap takes precedence */
* {
  box-sizing: border-box;
}

/* ============================================================
   NAVBAR THEME-AWARE TEXT COLORS
   ============================================================ */

/* Light theme - dark text */
.navbar-theme-text {
  color: var(--bs-body-color) !important;
}

.navbar-theme-text .navbar-brand,
.navbar-theme-text .navbar-nav .nav-link,
.navbar-theme-text .navbar-text {
  color: var(--bs-body-color) !important;
}

.navbar-theme-text .navbar-brand:hover,
.navbar-theme-text .navbar-nav .nav-link:hover {
  color: var(--bs-primary) !important;
}

/* Dark theme - light text */
[data-bs-theme="dark"] .navbar-theme-text {
  color: var(--bs-white) !important;
}

[data-bs-theme="dark"] .navbar-theme-text .navbar-brand,
[data-bs-theme="dark"] .navbar-theme-text .navbar-nav .nav-link,
[data-bs-theme="dark"] .navbar-theme-text .navbar-text {
  color: var(--bs-white) !important;
}

[data-bs-theme="dark"] .navbar-theme-text .navbar-brand:hover,
[data-bs-theme="dark"] .navbar-theme-text .navbar-nav .nav-link:hover {
  color: var(--bs-gray-200) !important;
}

/* ============================================================
   MOBILE RESPONSIVE OVERRIDES
   ============================================================ */

/* Mobile & portrait tablet: stack content vertically */
@media (max-width: 1199.98px) {
  /* Graph height adapts on mobile */
  #kg-graph {
    height: 60vh !important;
    min-height: 350px !important;
  }

  /* Chat panel uses more width on small screens */
  .kg-chat-panel {
    width: calc(100vw - 32px) !important;
    right: 16px !important;
    bottom: 80px !important;
  }

  /* Footer: stack items vertically */
  footer .d-flex.justify-content-center {
    flex-direction: column !important;
    gap: 0.5rem;
  }

  footer .d-inline-flex {
    justify-content: center;
  }

  /* Landing hero: reduce heading size */
  .display-3 {
    font-size: 2rem !important;
  }

  .display-4 {
    font-size: 1.75rem !important;
  }

  /* Landing hero: reduce lead text on small screens */
  .lead {
    font-size: 1rem !important;
  }
}

/* Desktop: hero fills viewport height, larger SVG */
@media (min-width: 992px) {
  #hero {
    min-height: calc(100vh - 200px);
  }

  .landing-hero-svg {
    max-width: 400px !important;
  }
}

/* Knowledge Graph sidebars: scroll within graph height on xl+ screens */
@media (min-width: 1200px) {
  .kg-sidebar-col {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }

  /* Right panel proportional max-heights */
  .kg-panel-details {
    overflow-y: auto;
  }

  .kg-panel-connections {
    max-height: calc((100vh - 140px) * 0.3 - 40px);
    overflow-y: auto;
  }

  .kg-panel-provenance {
    max-height: calc((100vh - 140px) * 0.3 - 40px);
    overflow-y: auto;
  }
}

details[open] > summary .fa-chevron-right {
  transform: rotate(90deg);
}


/* dcc.Dropdown (react-select) — follow the Bootstrap theme (light/dark).
   Bootstrap components pick the theme up natively; react-select ships its
   own white styling, so map it onto the --bs-* variables. */
.Select-control,
.Select-menu-outer,
.Select-input > input {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

.Select-value-label,
.Select.has-value.Select--single > .Select-control .Select-value .Select-value-label {
  color: var(--bs-body-color) !important;
}

.Select-placeholder,
.Select-arrow-zone,
.Select-clear-zone {
  color: var(--bs-secondary-color) !important;
}

.Select-arrow {
  border-color: var(--bs-secondary-color) transparent transparent !important;
}

.Select-menu-outer .VirtualizedSelectOption {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.Select-menu-outer .VirtualizedSelectFocusedOption {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

/* Multi-select value chips */
.Select--multi .Select-value {
  background-color: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

.Select--multi .Select-value-icon {
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

.Select.is-disabled > .Select-control {
  background-color: var(--bs-secondary-bg) !important;
}

/* Floating app dock — bottom center, same floating treatment as the
   Graph Assistant bubble (fixed, shadow, rounded). */
.app-dock {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
}

.app-dock-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 28px;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
}

.app-dock-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

/* Link-variant dock buttons only: body-colored icon with a subtle hover
   tint. The "all apps" button is a plain btn-danger and keeps Bootstrap's
   own colors. */
.app-dock-btn.btn-link {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--bs-tertiary-bg);
  --bs-btn-active-bg: var(--bs-tertiary-bg);
  text-decoration: none;
}