/* Extracted from app/view/user/technology.html
   (previously an inline <style> block + inline style="" attributes + inline
   onfocus/onblur style tweaks). External so the CSP can drop
   style-src 'unsafe-inline'. */

.section-title {
  font-weight: 700;
  margin-bottom: 20px;
  color: #060284;
}

.stats-row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 40px; /* leave space for arrows */
}

.stats-row::-webkit-scrollbar {
  display: none;
}

.stat-card {
  flex: 0 0 auto;
  min-width: 180px;
  border-radius: 14px;
  background: white;
  border: 1px solid gray;
  padding: 12px;
  text-align: center;
}

.stat-title {
  font-size: 0.90rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.stat-m-title {
  font-size: 1rem;
}

.stat-count {
  font-size: 1.4rem;
  font-weight: 700;
  color: #046bd2;
}

.highlight {
  background: linear-gradient(135deg, #046bd2, #060284);
  color: white;
}

.highlight .stat-count {
  color: white;
  font-size: 1.8rem;
}

.highlight .stat-title {
  color: #f1f1f1;
  font-size: 10px;
}

/* Scroll Buttons */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  padding: 6px 15px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 20px;
  z-index: 5;
}

.scroll-btn:hover {
  background: #046bd2;
}

.scroll-btn.left {
  left: 0;
}

.scroll-btn.right {
  right: 0;
}

/* was: style="max-width: 300px; width: 100%;" */
.tech-search-box {
  max-width: 300px;
  width: 100%;
}

/* was: style="outline:none; box-shadow:none;" plus inline onfocus/onblur handlers */
.tech-search-input {
  outline: none;
  box-shadow: none;
}

.tech-search-input:focus {
  border-color: #d3d3d3;
  box-shadow: 0 0 0 0.2rem rgba(211, 211, 211, 0.25);
}

/* was: style="border-left: 3px solid #0249bc;" */
.tech-filter-panel {
  border-left: 3px solid #0249bc;
}

/* was: style="font-weight: 600;" */
.filter-by-label {
  font-weight: 600;
}

/* was: style="display: none;" on the loading spinner */
.js-hidden {
  display: none;
}