/* ================================
   GLOBAL � background & font
================================ */

:root {
  --bg-main: rgba(8, 18, 24, 0.78);
  --bg-card: rgba(18, 32, 40, 0.55);
  --bg-card-hover: rgba(24, 48, 58, 0.65);

  --border-main: rgba(80, 200, 200, 0.35);
  --border-soft: rgba(80, 200, 200, 0.18);

  --accent: #4fffe7;
  --accent-soft: rgba(79, 255, 231, 0.35);

  /* NEON TEXT */
  --text-main: #7ffcff;
  --text-dim: #6bbec2;
  --text-metric: #2dffd9;
  --text-strong: #00f7ff;

  --radius: 14px;
  --radius-sm: 10px;
  --blur: 14px;
}

/* ================================
   GLOBAL TEXT OVERRIDE (kill white)
================================ */

html,
body,
* {
  color: var(--text-main) !important;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* Full background blur */
body {
  background:
    linear-gradient(
      rgba(6, 16, 22, 0.85),
      rgba(6, 16, 22, 0.85)
    );
}

/* ================================
   HEADER / SEARCH BAR
================================ */

.header,
.header *,
.search-container input {
  background: var(--bg-main);
  backdrop-filter: blur(var(--blur));
  border: 1px solid var(--border-soft);
  color: var(--text-main) !important;
}

.search-container input {
  border-radius: var(--radius);
}

.search-container input::placeholder {
  color: var(--text-dim);
}

/* ================================
   SECTION TITLES
================================ */

.section-title {
  color: var(--text-strong) !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-shadow:
    0 0 2px rgba(0, 247, 255, 0.35);
}

/* ================================
   CARDS (services, widgets)
================================ */

.service-card,
.widget,
.link-card {
  background: var(--bg-card);
  backdrop-filter: blur(var(--blur));
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  box-shadow:
    0 0 0 1px rgba(79, 255, 231, 0.05),
    0 10px 30px rgba(0, 0, 0, 0.35);
  transition: all 0.25s ease;
}

/* Hover glow */
.service-card:hover,
.widget:hover,
.link-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-soft);
  box-shadow:
    0 0 0 1px rgba(79, 255, 231, 0.35),
    0 0 24px rgba(79, 255, 231, 0.35),
    0 14px 40px rgba(0, 0, 0, 0.55);
  transform: translateY(-2px);
}

/* ================================
   SERVICE CARD CONTENT
================================ */

.service-name,
.widget-title,
.service-card a {
  color: var(--text-main) !important;
  font-weight: 500;
  text-shadow: none;
}

.service-description,
.widget-subtitle,
small {
  color: var(--text-dim) !important;
  font-size: 0.85rem;
}

/* Status dot */
.status-indicator {
  background-color: var(--accent);
  box-shadow:
    0 0 10px rgba(79, 255, 231, 0.9),
    0 0 18px rgba(79, 255, 231, 0.5);
}

/* ================================
   METRICS / BADGES / NUMBERS
================================ */

.metric,
.metric *,
.badge,
.badge * {
  color: var(--text-metric) !important;
  font-weight: 600;
  text-shadow:
    0 0 8px rgba(45, 255, 217, 0.6);
}


/* ================================
   QUICK LINKS / EXTERNAL LINKS
================================ */

.link-card {
  padding: 12px 14px;
}

.link-card a {
  color: var(--text-strong) !important;
}

.link-card small {
  color: var(--text-dim) !important;
}

/* ================================
   FOOTER / SCROLLBAR
================================ */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--accent),
    rgba(79, 255, 231, 0.3)
  );
  border-radius: 6px;
}

/* ================================
   MOBILE TWEAKS
================================ */

@media (max-width: 768px) {
  .service-card,
  .widget,
  .link-card {
    border-radius: 12px;
  }
}


/* ================================
   PROGRESS BARS � no grey
================================ */

/* background (track) */
.progress,
progress,
[role="progressbar"] {
  background: rgba(10, 30, 36, 0.6) !important;
  border-radius: 6px;
  overflow: hidden;
}

/* fill */
.progress-bar,
progress::-webkit-progress-value,
[role="progressbar"] > div {
  background: linear-gradient(
    90deg,
    #2dffd9,
    #00f7ff
  ) !important;
  box-shadow:
    0 0 10px rgba(45, 255, 217, 0.6);
}

/* Firefox */
progress::-moz-progress-bar {
  background: linear-gradient(
    90deg,
    #2dffd9,
    #00f7ff
  ) !important;
}

/* subtle hover boost */
.service-card:hover .progress-bar,
.service-card:hover progress::-webkit-progress-value {
  box-shadow:
    0 0 14px rgba(45, 255, 217, 0.85);
}