/* ============================================================
   Home Dashboard — тъмен дизайн с топли тонове (без синьо)
   Класовете са проверени срещу изходния код на Homepage
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap");

/* ---------- База ---------- */

body {
  background-color: #0b0a09;
  background-image:
    radial-gradient(ellipse 80% 60% at 15% -10%, rgba(217, 119, 6, 0.10), transparent),
    radial-gradient(ellipse 60% 50% at 95% 5%, rgba(190, 24, 93, 0.07), transparent),
    radial-gradient(ellipse 70% 60% at 50% 110%, rgba(120, 113, 108, 0.08), transparent),
    linear-gradient(160deg, #0e0c0a 0%, #131110 50%, #0a0908 100%);
  background-attachment: fixed;
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Меки топли петна зад съдържанието ---------- */

body::before,
body::after {
  content: "";
  position: fixed;
  width: 50vw;
  height: 50vw;
  border-radius: 50%;
  filter: blur(130px);
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
  animation: fb-drift 40s ease-in-out infinite alternate;
}

body::before {
  background: #d97706;
  top: -24%;
  left: -10%;
}

body::after {
  background: #9f1239;
  bottom: -30%;
  right: -12%;
  animation-delay: -20s;
}

@keyframes fb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(5vw, 4vh) scale(1.12); }
}

/* ---------- Поздрав (вмъкнат от custom.js) ---------- */

#fb-greeting {
  padding: 2.75rem 1.25rem 0.5rem;
  text-align: center;
  animation: fb-fade-in 0.8s ease-out;
}

@keyframes fb-fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fb-greeting-title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #fde68a 0%, #fffdf5 45%, #fdba74 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fb-greeting-sub {
  margin: 0.45rem 0 0;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(250, 250, 249, 0.65);
}

/* ---------- Ред с widget-ите (горната лента) ---------- */

html.dark #information-widgets {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(24px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

/* ---------- Ресурсни widget-и (CPU / RAM / диск) ---------- */

.information-widget-resource {
  color: #e7e5e4;
}

.information-widget-resource .resource-usage {
  height: 6px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border-radius: 9999px !important;
}

.information-widget-resource .resource-usage > div {
  height: 6px !important;
  border-radius: 9999px !important;
  background: linear-gradient(90deg, #fbbf24, #fb923c) !important;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

/* ---------- Търсачка ---------- */

.information-widget-search input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 9999px !important;
  padding-left: 1rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.information-widget-search input:focus {
  border-color: rgba(251, 191, 36, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18) !important;
  outline: none !important;
}

.information-widget-search button {
  background: linear-gradient(135deg, #d97706, #ea580c) !important;
  border-radius: 9999px !important;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.information-widget-search button:hover {
  filter: brightness(1.15);
  transform: scale(1.05);
}

/* ---------- Групи (карти) ---------- */

html.dark .service-group-name {
  background: linear-gradient(90deg, #fef3c7 0%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.service-group-icon {
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.35));
  transition: transform 0.25s ease;
}

.services-group:hover .service-group-icon {
  transform: scale(1.12) rotate(-6deg);
}

/* ---------- Услуги (картички) ---------- */

html.dark .service-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(24px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease !important;
}

html.dark .service-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(251, 191, 36, 0.12) !important;
}

.service-icon {
  transition: transform 0.25s ease;
}

.service-card:hover .service-icon {
  transform: scale(1.12) rotate(3deg);
}

.service-card:hover .service-name {
  color: #fde68a !important;
}

.service-name {
  font-weight: 600;
}

.service-description {
  letter-spacing: 0.02em;
}

/* ---------- Статус бутони (running/stopped) ---------- */

.service-tag {
  transition: transform 0.2s ease;
}

.service-tag:hover {
  transform: scale(1.12);
}

/* ---------- Бутони в долния десен ъгъл ---------- */

#style button,
#style a {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 9999px !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

#style button:hover,
#style a:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(251, 191, 36, 0.40) !important;
  transform: translateY(-1px);
}

/* ---------- Скриване на бутона за рефреш (вдясно долу) ---------- */

#revalidate {
  display: none !important;
}

/* ---------- Скролбар ---------- */

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
  background-clip: padding-box;
}

/* ---------- Селекция на текст ---------- */

::selection {
  background: rgba(251, 191, 36, 0.35);
  color: #ffffff;
}