/* --- Import Source Code Pro --- */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap');

/* --- Global Font & White Subtext --- */
body, .text-xs, .text-sm, .text-base, .font-bold {
    font-family: 'Source Code Pro', monospace !important;
}

/* --- Turquoise & Bold App Names --- */
/* Targets the first child div of the text container in a service card */
.flex-col.justify-center > div:first-child {
    color: #43ffaf !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important; /* This is the text-sm size */
}

/* --- App Names: Turquoise & Bold --- */
.service-name {
    color: #43ffaf !important;
    font-weight: 400 !important;
    font-size: 1.0rem !important;
}

/* Category Headers (the group titles) */
h2, h3, .text-gray-400 {
    color: #43ffaf !important;
    font-weight: 400 !important;
    text-transform: lowercase; /* Matches your 'superuser' aesthetic */
}

/* Keep descriptions white and normal weight */
.flex-col.justify-center > div:last-child, .text-xs {
    color: #e1e1e1 !important;
    font-weight: 400 !important;
}

/* --- Card Hover Glow (Jellyfin Style) --- */
/* Targets the service cards and adds the turquoise glow and border on hover */
.group.relative.flex.flex-col:hover {
    box-shadow: 0 0 15px rgba(67, 255, 175, 0.3) !important;
    outline: 1px solid #43ffaf !important;
    transition: all 0.2s ease-in-out;
}

/* Sharp Corners for all UI elements */
.rounded-xl, .rounded-lg, .rounded-md, .rounded-sm, img {
    border-radius: 0px !important;
}

/* Optional: Make the icons slightly more "terminal" by desaturating them until hover */
.group img {
    filter: grayscale(20%) brightness(90%);
    transition: all 0.3s ease;
}

.group:hover img {
    filter: grayscale(0%) brightness(110%);
}