/* ==========================================================
   Homepage custom theme  -  /home/sanket/homepage/config/custom.css
   Loaded natively by gethomepage (no nginx injection needed).
   Edit + restart:  docker restart homepage
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --hp-bg:      #0d1017;
  --hp-surface: #151a23;
  --hp-raised:  #1c222d;
  --hp-line:    #262d3a;
  --hp-accent:  139 92 246;   /* violet - matches the Vikunja theme */
  --hp-muted:   #8b93a7;
}

html, body { font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif !important; }

/* deep, non-flat background */
body, #__next {
  background: radial-gradient(1200px 600px at 20% -10%, #1a2030 0%, var(--hp-bg) 55%) !important;
  background-attachment: fixed !important;
}

/* ---------- service tiles: real cards with elevation ---------- */
.service-card, li.service > div, div[class*="service-card"] {
  background: var(--hp-surface) !important;
  border: 1px solid var(--hp-line) !important;
  border-radius: 12px !important;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease !important;
}
.service-card:hover, li.service > div:hover, div[class*="service-card"]:hover {
  transform: translateY(-2px) !important;
  border-color: rgb(var(--hp-accent) / .55) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.45) !important;
}

/* ---------- group headings ---------- */
h2, .services-group > h2 {
  color: var(--hp-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  opacity: .85;
}

/* ---------- widgets / info bar ---------- */
.information-widget-resource, div[class*="information-widget"] {
  background: var(--hp-surface) !important;
  border: 1px solid var(--hp-line) !important;
  border-radius: 12px !important;
}

/* ---------- search ---------- */
input[type="search"], input[class*="search"] {
  background: var(--hp-raised) !important;
  border: 1px solid var(--hp-line) !important;
  border-radius: 10px !important;
  color: #e8ebf2 !important;
}
input[type="search"]:focus {
  border-color: rgb(var(--hp-accent)) !important;
  box-shadow: 0 0 0 3px rgb(var(--hp-accent) / .25) !important;
  outline: none !important;
}

/* ---------- status dots: make up/down obvious ---------- */
.status-dot, span[class*="status"] { border-radius: 999px !important; }

/* ---------- bookmarks ---------- */
.bookmark-text, li.bookmark a > div {
  background: var(--hp-surface) !important;
  border: 1px solid var(--hp-line) !important;
  border-radius: 10px !important;
}

/* ---------- typography polish ---------- */
.service-title, div[class*="service-title"] { font-weight: 600 !important; letter-spacing: -.01em; }
.service-description, div[class*="service-description"] { color: var(--hp-muted) !important; }

/* modern scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #2c3444; border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #3a4459; background-clip: content-box; }

::selection { background: rgb(var(--hp-accent) / .35); }