/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* App-wide brand palette, expressed as overrides of Bootstrap's own CSS
   custom properties (loaded before this file, see application.html.erb) so
   every Bootstrap component (buttons, links, navbar, etc.) picks them up
   automatically without per-page overrides. */
:root {
  --bs-primary: #2c3e50;
  --bs-primary-rgb: 44, 62, 80;
  --bs-link-color: #3498db;
  --bs-link-color-rgb: 52, 152, 219;
  --bs-link-hover-color: #2980b9;
  --bs-link-hover-color-rgb: 41, 128, 185;
}

/* Navbar "?" bot-info popover (layouts/_navbar) -- pure CSS :hover/:focus-
   within, no JS, so it works the same on every page without a Stimulus
   controller. tabindex="0" on .bot-help plus :focus-within (rather than
   :focus on the icon itself, which isn't focusable) makes it reachable by
   keyboard too. */
.bot-help {
  position: relative;
  display: inline-flex;
}

.bot-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: help;
}

.bot-help-popover {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  width: 280px;
  background: #fff;
  color: #212529;
  border-radius: 8px;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
  padding: 0.9rem 1rem;
  z-index: 1050;
  text-align: left;
}

.bot-help-title {
  margin: 0 0 0.35rem;
  font-weight: 700;
}

.bot-help:hover .bot-help-popover,
.bot-help:focus-within .bot-help-popover {
  display: block;
}