/* === Nattviken OS — 80-tals retro-look för Homepage === */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap');

:root,
html.dark {
  --bg-color: 10, 2, 32;          /* #0a0220 */
  --bg-color-secondary: 23, 6, 57; /* #170639 */
  --primary: 57, 255, 20;          /* neon-grön */
  --primary-color: 57, 255, 20;
  --color-300: 224, 216, 255;      /* ljus text */
  --color-400: 200, 190, 240;
  --color-500: 138, 127, 199;      /* dim */
  --color-600: 138, 127, 199;
  --color-700: 42, 17, 102;        /* grid */
  --color-800: 31, 10, 74;         /* panel */
  --color-900: 23, 6, 57;
}

html, body {
  font-family: 'VT323', 'Courier New', monospace !important;
  background-color: #0a0220 !important;
  background-image:
    linear-gradient(rgba(57,255,20,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,20,0.05) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  color: #39ff14 !important;
  text-shadow: 0 0 4px rgba(57,255,20,0.4);
}

/* scanlines */
body::before {
  content: ""; position: fixed; inset: 0;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 3px, rgba(0,0,0,0) 4px);
  pointer-events: none; z-index: 9999;
}

/* Titel */
#information-widgets, h1, h2, h3 {
  font-family: 'Press Start 2P', monospace !important;
  color: #ff00ff !important;
  text-shadow: 2px 2px 0 #00ffff !important;
  letter-spacing: 2px;
}

/* Service-kort */
.service-card, .bookmark-card, [class*="service"] {
  border: 1px dashed #00ffff !important;
  background: rgba(0,255,255,0.04) !important;
  border-radius: 0 !important;
}
.service-card:hover, .bookmark-card:hover {
  border-color: #ffe600 !important;
  background: rgba(255,230,0,0.07) !important;
  transform: translate(-1px,-1px);
  box-shadow: 2px 2px 0 #ffe600;
}

/* Service-namn och beskrivning */
.service-name, .bookmark-name {
  color: #00ffff !important;
  font-family: 'VT323', monospace !important;
  font-size: 1.3em !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.service-description, .bookmark-description {
  color: #8a7fc7 !important;
  font-family: 'VT323', monospace !important;
}

/* Status-pillar (siteMonitor) */
.status-up, [class*="status-success"] {
  color: #39ff14 !important;
  background: rgba(57,255,20,0.1) !important;
  border: 1px solid #39ff14 !important;
  border-radius: 0 !important;
  text-transform: uppercase;
}
.status-down, [class*="status-error"] {
  color: #ff3860 !important;
  background: rgba(255,56,96,0.1) !important;
  border: 1px solid #ff3860 !important;
  border-radius: 0 !important;
  text-transform: uppercase;
}

/* Resources widget (CPU/RAM/disk) */
[class*="resources"], [class*="widget"] {
  color: #ffe600 !important;
  font-family: 'VT323', monospace !important;
}
[class*="resources"] [class*="value"] {
  color: #ffe600 !important;
  text-shadow: 0 0 6px rgba(255,230,0,0.6);
}

/* Search */
input[type="search"], input[type="text"] {
  background: #0a0220 !important;
  border: 2px solid #00ffff !important;
  color: #39ff14 !important;
  font-family: 'VT323', monospace !important;
  border-radius: 0 !important;
}

/* Sektionstitlar */
.services-group h2, .bookmarks-group h2 {
  color: #00ffff !important;
  border-bottom: 2px solid #ff00ff !important;
  padding-bottom: 4px;
  font-family: 'VT323', monospace !important;
  font-size: 1.6em !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 6px rgba(0,255,255,0.6) !important;
}
.services-group h2::before, .bookmarks-group h2::before {
  content: ">> ";
  color: #ff00ff;
}