/* ==========================================================
   JJ's Homelab Theme
   Clean Dark Theme
   ========================================================== */

/* ---------- Page Background ---------- */

html,
body {
    background: #0f1117 !important;
    color: #f0f6fc !important;
}

body > div,
#__next,
main,
#page_container,
#content {
    background: #0f1117 !important;
}

/* ---------- Section Spacing ---------- */

#services {
    gap: 18px !important;
}

h1,
h2,
h3 {
    color: #f8fafc !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    margin-bottom: 14px !important;
}

/* ---------- Service Cards ---------- */

.service-card {
    background: #1c2128 !important;
    border: 1px solid #30363d !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    transition: all .20s ease;
}

/* Hover Effect */

.service-card:hover {
    background: #242b33 !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 14px rgba(59,130,246,.18) !important;
    transform: translateY(-2px);
}

/* ---------- Stat Boxes ---------- */

.service-container > div {
    background: #11161d !important;
    border: 1px solid #30363d !important;
    border-radius: 10px !important;
    transition: all .2s ease;
}

.service-container > div:hover {
    border-color: #3b82f6 !important;
}

/* ---------- Search ---------- */

input {
    background: #1c2128 !important;
    border: 1px solid #30363d !important;
    color: #f0f6fc !important;
    border-radius: 10px !important;
}

input::placeholder {
    color: #8b949e !important;
}

/* Search Button */

button {
    border-radius: 10px !important;
}

/* ---------- Top Widgets ---------- */

.widget,
.widget-card {
    background: #1c2128 !important;
    border: 1px solid #30363d !important;
    border-radius: 14px !important;
}

/* ---------- Links ---------- */

a {
    color: #f0f6fc !important;
}

a:hover {
    color: #58a6ff !important;
}

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #0f1117;
}

::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: #484f58;
}

/* ---------- Footer ---------- */

#footer {
    opacity: .55;
    font-size: .8rem;
}

/* ---------- Nice Selection Color ---------- */

::selection {
    background: #2563eb;
    color: white;
}