/* ==========================================
   SERVICE GROUP CONTAINERS
   These are the main section boxes (Media, Productivity, System, etc.)
   ========================================== */
.services-group {
  /* Background: Semi-transparent dark blue
     rgba(15, 23, 42, 0.7) = dark slate blue at 70% opacity
     Change 0.7 to make more/less transparent (0=invisible, 1=solid) */
  background: rgba(64, 72, 139, 0) !important;
  
  /* Glassmorphism effect: blurs what's behind + intensifies colors
     blur(12px) = how much blur (higher = more frosted glass look)
     saturate(150%) = color intensity (100% = normal, higher = more vibrant) */
  backdrop-filter: blur(12px) saturate(0%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(0) !important; /* Safari support */
  
  /* Border: thickness + color
     0px = no border (change to 1px, 2px for visible border)
     rgba(148, 163, 184, 0.1) = light gray at 10% opacity */
  border: 0x solid rgba(148, 163, 184, 0.1) !important;
  
  /* Corner rounding
     0px = sharp corners (try 8px, 12px, 16px for rounded) */
  border-radius: 8px !important;
  
  /* Shadow: gives depth
     0 8px 32px = horizontal, vertical offset, blur distance
     rgba(0, 0, 0, 0.4) = black at 40% opacity
     Increase blur for softer shadow, increase opacity for darker */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0) !important;
  
  /* Animation smoothness when hovering
     0.3s = duration of animation
     cubic-bezier = easing function (creates smooth acceleration/deceleration) */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* What happens when you hover over a section */
.services-group:hover {
  /* Border becomes more visible on hover */
  border-color: rgba(148, 163, 184, 0.0) !important;
  
  /* Lifts up 2px on hover
     translateY(-2px) = moves up (negative = up, positive = down)
     Try -4px or -6px for more lift */
  transform: translateY(-2px) !important;
  
  /* Shadow gets bigger/darker on hover = floating effect */
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0) !important;
}

/* ==========================================
   INDIVIDUAL SERVICE CARDS
   Each service box (Plex, Sonarr, etc.)
   ========================================== */
.service {
  /* Background: darker than section, semi-transparent
     rgba(30, 41, 59, 0.5) = slate blue at 50% opacity
     Adjust 0.5 for transparency */
  background: rgba(30, 41, 59, 0.5) !important;
  
  /* Blur effect on cards (less blur than sections) */
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  
  /* Subtle border around each card
     1px = thin border (try 2px for thicker) */
  border: 1px solid rgba(148, 163, 184, 0.1) !important;
  
  /* Rounded corners on cards
     12px = moderate rounding (try 8px, 16px, 20px) */
  border-radius: 10px !important;
  
  /* Smooth animation on hover */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  
  /* Prevents content from spilling outside rounded corners */
  overflow: hidden !important;
}

/* What happens when hovering over a service card */
.service:hover {
  /* Background gets slightly lighter/more opaque on hover */
  background: rgba(51, 65, 85, 0.6) !important;
  
  /* Border becomes more visible */
  border-color: rgba(148, 163, 184, 0.3) !important;
  
  /* Card lifts up AND scales slightly larger
     translateY(-4px) = lifts 4px up
     scale(1.02) = grows 2% bigger
     Try scale(1.05) for more dramatic effect */
  transform: translateY(-4px) scale(1.02) !important;
  
  /* Bigger shadow on hover = stronger floating effect */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================
   WIDGET CONTAINERS
   Top bar widgets (CPU, RAM, Weather, etc.)
   ========================================== */
.widget {
  /* Background for widgets (similar to sections) */
  background: rgba(15, 23, 42, 0.8) !important;
  
  /* Blur effect */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  
  /* Subtle border */
  border: 1px solid rgba(148, 163, 184, 0.1) !important;
  
  /* Rounded corners */
  border-radius: 10x !important;
  
  /* Shadow for depth */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================
   BOOKMARKS
   Bottom section links (Entertainment, Finances, etc.)
   ========================================== */
.bookmark {
  /* Background (similar to cards) */
  background: rgba(30, 41, 59, 0.5) !important;
  
  /* Blur effect */
  backdrop-filter: blur(8px) !important;
  
  /* Border */
  border: 1px solid rgba(148, 163, 184, 0.1) !important;
  
  /* Rounded corners (less than cards) */
  border-radius: 8px !important;
  
  /* Quick animation (0.2s = faster than cards) */
  transition: all 0.2s ease !important;
}

/* Bookmark hover effect */
.bookmark:hover {
  /* Slightly lighter on hover */
  background: rgba(51, 65, 85, 0.6) !important;
  
  /* More visible border */
  border-color: rgba(148, 163, 184, 0.3) !important;
  
  /* Small lift effect */
  transform: translateY(-2px) !important;
}

/* ==========================================
   STATUS INDICATORS
   Green/red dots showing container health
   ========================================== */

/* Green dot (healthy containers) */
.status-dot-healthy {
  /* Gradient from light to dark green
     #10b981 = emerald green
     #059669 = darker emerald */
  background: linear-gradient(135deg, #10b981, #059669) !important;
  
  /* Glow effect around green dot
     Makes it look like it's "lit up" */
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5) !important;
}

/* Red dot (unhealthy containers) */
.status-dot-unhealthy {
  /* Gradient from light to dark red
     #ef4444 = red
     #dc2626 = darker red */
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  
  /* Red glow effect */
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5) !important;
}

/* ==========================================
   CUSTOM SCROLLBAR
   Styles the scrollbar to match your theme
   ========================================== */

/* Scrollbar size */
::-webkit-scrollbar {
  width: 8px;   /* Vertical scrollbar width */
  height: 8px;  /* Horizontal scrollbar height */
}

/* Scrollbar track (the background) */
::-webkit-scrollbar-track {
  /* Dark semi-transparent background */
  background: rgba(15, 23, 42, 0.3) !important;
  
  /* Rounded track */
  border-radius: 4px;
}

/* Scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
  /* Gray semi-transparent thumb */
  background: rgba(100, 116, 139, 0.5) !important;
  
  /* Rounded thumb */
  border-radius: 4px;
}

/* Scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
  /* Gets more opaque when you hover over it */
  background: rgba(148, 163, 184, 0.7) !important;
}

/* ==========================================
   TEXT SIZE CUSTOMIZATION
   ========================================== */

/* SERVICE CARD TEXT */
.service h5 {
  /* Service name (Plex, Sonarr, etc.) 
     Default is usually 1rem (16px)
     Try 0.9rem (smaller) or 1.1rem (larger) */
  font-size: 1rem !important;
  font-weight: 600 !important; /* Boldness: 400=normal, 600=semi-bold, 700=bold */
}

.service p {
  /* Service description text ("Media Server", "TV Shows", etc.)
     Default is usually 0.875rem (14px) */
  font-size: 0.6rem !important;
  opacity: 0.8 !important; /* Adjust 0-1 for brightness */
}

/* Widget stat numbers (the actual values) */
.service-stats,
.service .stat-value {
  /* The numbers in widgets (16, 23, 0, etc.)
     Default varies, usually 1.5rem - 2rem */
  font-size: .5rem !important;
  font-weight: 700 !important;
}

/* Widget stat labels (WANTED, MISSING, etc.) */
.service .stat-label {
  /* The labels under numbers
     Default is usually 0.75rem (12px) */
  font-size: 0.6rem !important;
  text-transform: capitalize !important; /* ALL CAPS */
  letter-spacing: 0.3px !important; /* Spacing between letters */
  opacity: 0.7 !important;
}

/* ==========================================
   TOP WIDGETS (CPU, RAM, Weather, etc.)
   ========================================== */

/* Widget titles */
.widget h3,
.widget-title {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}

/* Widget values */
.widget-value,
.widget .value {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
}

/* Widget labels */
.widget-label,
.widget .label {
  font-size: 0.75rem !important;
  opacity: 0.7 !important;
}

/* ==========================================
   SECTION HEADERS (Media, Productivity, etc.)
   ========================================== */

.services-group h2,
.group-title {
  /* Section header text
     Default is usually 1.5rem (24px) */
  font-size: 1.25rem !important;
  text-transform: uppercase !important ; /* ALL CAPS */
  font-weight: 700 !important;
  margin-top: .3em !important;
  margin-bottom: .3em !important;
}

/* ==========================================
   BOOKMARKS
   ========================================== */

.bookmark .name {
  /* Bookmark text size */
  font-size: 0.875rem !important;
}

.bookmark .abbr {
  /* Abbreviated text (GH, CF, etc.) */
  font-size: 1rem !important;
  font-weight: 600 !important;
}

h2 {
  font-size: 1rem !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin-top: 0.3em !important;
  margin-bottom: 0.2em !important;
}

/* ==========================================
   QUICK TWEAKING GUIDE
   ========================================== 
   
   Want MORE transparency? 
   - Lower the last number in rgba() values (0.7 → 0.5)
   
   Want LESS blur?
   - Reduce blur() values (blur(12px) → blur(6px))
   
   Want SHARPER corners?
   - Reduce border-radius (12px → 6px or 0px)
   
   Want BIGGER lift on hover?
   - Increase translateY values (-4px → -8px)
   
   Want STRONGER shadows?
   - Increase shadow opacity (0.4 → 0.6)
   - Increase blur distance (32px → 48px)
   
   Want different COLORS?
   - Change rgba() values:
     - First 3 numbers = RGB color (0-255)
     - Last number = opacity (0-1)
   - Use a color picker to get RGB values
   
   TEXT SIZE QUICK REFERENCE:
   - 0.625rem = 10px (very small)
   - 0.75rem  = 12px (small)
   - 0.875rem = 14px (slightly small)
   - 1rem     = 16px (normal/base)
   - 1.125rem = 18px (slightly large)
   - 1.25rem  = 20px (large)
   - 1.5rem   = 24px (larger)
   - 2rem     = 32px (very large)
   
   ========================================== */