/* SmartVolt – site-wide custom overrides.
 *
 * Loaded last (after the inline <style> in base.html) so rules here win on
 * specificity ties. Keep this file for small global tweaks; page-specific
 * styling still lives in each template's own <style> block.
 *
 * Previously this file was referenced but missing, producing a 404 on every
 * page load.
 */

/* Respect users who prefer reduced motion: disable the animate.css entrances. */
@media (prefers-reduced-motion: reduce) {
  .animate__animated {
    animation: none !important;
  }
}

/* ── Internal portal navigation ─────────────────────────────────────────────
 * A persistent secondary nav shown only to staff on /noi-bo/ pages, so every
 * internal section is one click away instead of routing back to the dashboard.
 */
.sv-inav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #0b1f3a;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 6px 18px rgba(11, 31, 58, .18);
}
.sv-inav-scroll {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 3px;
  padding: 6px 16px;
  align-items: center;
  justify-content: space-between;
  overflow: hidden; /* Prevent scrollbar completely */
}
.sv-inav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .75);
  font-weight: 700;
  font-size: .78rem; /* compact font size to prevent overflow */
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.sv-inav-link i { font-size: .76rem; opacity: .9; }
.sv-inav-link:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.sv-inav-link.is-active {
  background: linear-gradient(135deg, #0d6efd, #00c6ff);
  color: #fff;
  box-shadow: 0 6px 16px rgba(13, 110, 253, .35);
}
.sv-inav-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin-left: 2px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
}
.sv-inav-search i { color: rgba(255, 255, 255, .65); font-size: .74rem; }
.sv-inav-search input {
  background: transparent;
  border: 0;
  outline: none;
  color: #fff;
  font-size: .76rem;
  font-weight: 600;
  width: 120px; /* compact search bar to make space */
}
.sv-inav-search input::placeholder { color: rgba(255, 255, 255, .5); }
.sv-inav-search:focus-within { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }

/* Hide text labels on screen widths under 1140px to ensure it never overflows or clips */
@media (max-width: 1140px) {
  .sv-inav-text {
    display: none;
  }
  .sv-inav-link {
    padding: 8px 12px;
  }
  .sv-inav-link i {
    font-size: 0.95rem;
    margin: 0;
  }
  .sv-inav-search input {
    width: 110px;
  }
}
@media (max-width: 575.98px) {
  .sv-inav-search input {
    width: 80px;
  }
  .sv-inav-scroll {
    gap: 2px;
    padding: 6px 8px;
  }
}