/* ==========================================================================
   Homepage Command Center - Adaptive Theme Styling & High-Contrast Typography
   Author: Vijay Kumar Singh
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --glow-cyan: #06b6d4;
  --glow-cyan-border: rgba(6, 182, 212, 0.50);

  /* Dark Theme Default */
  --bg-overlay: linear-gradient(rgba(10, 15, 26, 0.74), rgba(10, 15, 26, 0.74));
  --text-title: #ffffff;
  --text-desc: #f1f5f9;
  --text-muted: #cbd5e1;
  --card-glass-bg: rgba(15, 23, 42, 0.88);
  --card-glass-hover: rgba(30, 41, 59, 0.96);
  --card-glass-border: rgba(255, 255, 255, 0.12);
  --shadow-subtle: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-elevation: 0 12px 30px -4px rgba(0, 0, 0, 0.65), 0 0 18px rgba(6, 182, 212, 0.28);
  --text-shadow-head: 0 2px 8px rgba(0, 0, 0, 0.85);
  --transition-card: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light Theme Variables */
html.light,
html:not(.dark) {
  --bg-overlay: linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65));
  --text-title: #090d16;
  --text-desc: #1e293b;
  --text-muted: #334155;
  --card-glass-bg: rgba(255, 255, 255, 0.92);
  --card-glass-hover: rgba(255, 255, 255, 0.98);
  --card-glass-border: rgba(0, 0, 0, 0.12);
  --shadow-subtle: 0 4px 14px rgba(0, 0, 0, 0.10);
  --shadow-elevation: 0 12px 28px -4px rgba(0, 0, 0, 0.16), 0 0 16px rgba(6, 182, 212, 0.25);
  --text-shadow-head: none;
}

body,
#background {
  font-family: var(--font-sans) !important;
  background: var(--bg-overlay), url('https://raw.githubusercontent.com/vsingh55/homelab-ops/main/images/homepage-background.jpg') center center / cover fixed no-repeat !important;
  -webkit-font-smoothing: antialiased;
}

/* Header VKS Logo */
[class*="LogoWidget"],
[class*="logo_widget"],
[class*="logo"] img {
  max-height: 48px !important;
  width: auto !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)) !important;
  margin-right: 8px !important;
}

/* Bold Greetings (Name & Subtitle) */
[class*="greeting"] {
  font-weight: 800 !important;
}

[class*="greeting"] * {
  color: var(--text-title) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-shadow: var(--text-shadow-head) !important;
}

[class*="greeting"]:nth-of-type(2) * {
  color: var(--text-desc) !important;
  font-weight: 700 !important;
}

/* Category & Section Titles - Bold & High Contrast */
[class*="group_title"],
[class*="group-title"],
h2, h3, h4,
div[class*="text-lg"],
div[class*="text-xl"] {
  letter-spacing: -0.015em;
  font-weight: 800 !important;
  color: var(--text-title) !important;
  text-shadow: var(--text-shadow-head) !important;
}

/* Card Background Blur & Translucent Glassmorphism for Services AND Bookmarks */
.service-card,
[class*="ServiceCard"],
[class*="card_card"],
[class*="widget_container"],
[class*="BookmarkGroup"],
[class*="BookmarkItem"],
[class*="bookmark_item"],
[class*="Bookmark"] a,
[class*="bookmark"] a,
div[class*="bookmark"] > a,
a.backdrop-blur-md,
a[class*="backdrop-blur"],
div.mt-3 > a,
div[class*="mt-3"] > a,
div[class*="space-y"] > a,
div[class*="mb-4"] a,
html.dark a.backdrop-blur-md,
html:not(.dark) a.backdrop-blur-md,
.dark a[class*="backdrop-blur"] {
  background-color: var(--card-glass-bg) !important;
  background: var(--card-glass-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--card-glass-border) !important;
  border-radius: 12px !important;
  transition: var(--transition-card) !important;
  box-shadow: var(--shadow-subtle) !important;
}

/* Service Card Titles and Descriptions - Bold & High Contrast */
[class*="ServiceCard"] [class*="title"],
[class*="card_card"] [class*="title"],
[class*="service_title"] {
  font-weight: 700 !important;
  color: var(--text-title) !important;
}

[class*="ServiceCard"] [class*="description"],
[class*="card_card"] [class*="description"],
[class*="service_description"] {
  font-weight: 600 !important;
  color: var(--text-desc) !important;
  opacity: 0.98 !important;
}

/* Bookmark Links, Text & URLs - Bold & High Contrast */
html.dark a.backdrop-blur-md div,
html.dark a.backdrop-blur-md span,
html:not(.dark) a.backdrop-blur-md div,
html:not(.dark) a.backdrop-blur-md span,
a.backdrop-blur-md div,
a.backdrop-blur-md span,
a.backdrop-blur-md p,
a[class*="backdrop-blur"] div,
a[class*="backdrop-blur"] span,
[class*="BookmarkGroup"] [class*="title"],
[class*="Bookmark"] a,
[class*="bookmark"] a,
[class*="Bookmark"] span,
[class*="bookmark"] span,
[class*="Bookmark"] p,
[class*="bookmark"] p {
  font-weight: 700 !important;
  color: var(--text-title) !important;
}

[class*="BookmarkGroup"] [class*="description"],
[class*="Bookmark"] small,
[class*="bookmark"] small {
  font-weight: 600 !important;
  color: var(--text-desc) !important;
}

html.dark a.backdrop-blur-md .text-xs,
html:not(.dark) a.backdrop-blur-md .text-xs,
a.backdrop-blur-md .text-xs,
a.backdrop-blur-md [class*="text-xs"],
a[class*="backdrop-blur"] [class*="text-xs"],
[class*="Bookmark"] [class*="url"],
[class*="Bookmark"] [class*="href"],
[class*="bookmark"] [class*="url"] {
  color: var(--glow-cyan) !important;
  font-weight: 600 !important;
}

/* Card Hover Elevation and Cyan Ambient Glow */
.service-card:hover,
[class*="ServiceCard"]:hover,
[class*="card_card"]:hover,
[class*="Bookmark"] a:hover,
[class*="bookmark"] a:hover,
a.backdrop-blur-md:hover,
a[class*="backdrop-blur"]:hover,
div.mt-3 > a:hover,
div[class*="space-y"] > a:hover,
html.dark a.backdrop-blur-md:hover,
html:not(.dark) a.backdrop-blur-md:hover {
  transform: translateY(-2px) !important;
  background-color: var(--card-glass-hover) !important;
  background: var(--card-glass-hover) !important;
  border-color: var(--glow-cyan-border) !important;
  box-shadow: var(--shadow-elevation) !important;
}

/* Status Ping Indicator Glow */
[class*="ping_dot"] {
  box-shadow: 0 0 10px currentColor !important;
}

/* Quick Launch & Search Input */
[class*="SearchWidget"],
[class*="quicklaunch"] input,
input[type="search"] {
  background: var(--card-glass-bg) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid var(--card-glass-border) !important;
  border-radius: 10px !important;
  color: var(--text-title) !important;
  font-weight: 600 !important;
}

[class*="quicklaunch"] input:focus,
input[type="search"]:focus {
  border-color: var(--glow-cyan) !important;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.35) !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: rgba(11, 15, 25, 0.3);
}

::-webkit-scrollbar-thumb {
  background: rgba(71, 85, 105, 0.6);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--glow-cyan);
}