/* Gruvbox Dark (Hard/Medium match) - Faithful Port */

:root {
    /* Core Gruvbox Dark Palette */
    --gb-bg0: #282828;      /* Main Background */
    --gb-bg1: #3c3836;      /* Cards / UI Elements */
    --gb-bg2: #504945;      /* Hover / Selection */
    --gb-fg0: #fbf1c7;      /* Bright Text */
    --gb-fg1: #ebdbb2;      /* Standard Text */
    --gb-gray: #928374;     /* Dimmed Text */
    --gb-red: #fb4934;
    --gb-green: #b8bb26;
    --gb-yellow: #fabd2f;
    --gb-blue: #83a598;
    --gb-purple: #d3869b;
    --gb-aqua: #8ec07c;
    --gb-orange: #fe8019;
}

/* Global Background & Text */
body, html, .min-h-screen {
    background-color: var(--gb-bg0) !important; 
    /* background-image: none !important; REMOVED for wallpaper */
    color: var(--gb-fg1) !important;
}

/* --- Service Cards --- */
/* Base Card Style */
.service-card, .services .service {
    background-color: var(--gb-bg1) !important;
    border: 1px solid var(--gb-bg2) !important; /* Subtle border */
    border-radius: 4px !important; /* Slightly sharper corners fit the retro vibe */
    box-shadow: none !important; /* Flat look */
    transition: all 0.2s ease-in-out;
}

/* Card Hover State */
.service-card:hover, .services .service:hover {
    background-color: var(--gb-bg2) !important;
    transform: translateY(-1px);
    border-color: var(--gb-fg1) !important; /* Highlight border on hover */
}

/* Text Colors inside Cards */
.service-name, .service .name {
    color: var(--gb-fg0) !important;
    font-weight: bold;
}

.service-description, .service .description {
    color: var(--gb-gray) !important;
}

/* --- Headers & Titles --- */
h1, h2, h3, .group-title {
    color: var(--gb-orange) !important; /* Orange headers for contrast */
    font-weight: bold !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Search Bar --- */
/* The Search Input Area */
.search-container input {
    background-color: var(--gb-bg1) !important;
    border: 1px solid var(--gb-bg2) !important;
    color: var(--gb-fg1) !important;
    border-radius: 4px !important;
}

.search-container input:focus {
    border-color: var(--gb-orange) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(254, 128, 25, 0.3) !important;
}

/* --- System Widgets (CPU/RAM) --- */
.widget, .glance {
    background-color: var(--gb-bg1) !important;
    border: 1px solid var(--gb-bg2) !important;
}

.widget-label {
    color: var(--gb-gray) !important;
}

.widget-value {
    color: var(--gb-fg0) !important;
}

/* --- Status Indicators (Ping dots) --- */
.status-dot.online {
    background-color: var(--gb-green) !important;
    box-shadow: 0 0 5px var(--gb-green) !important;
}

.status-dot.offline {
    background-color: var(--gb-red) !important;
}

/* Footer / Meta */
footer {
    color: var(--gb-gray) !important;
}