/* Custom CSS for Homepage */

/* --- VERTICAL CARD LAYOUT --- */
/* force vertical layout for the top section (icon + title) */
.service-card .service-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: auto !important;
    padding-top: 1rem !important;
    padding-bottom: 0.5rem !important;
}

/* ICON Styling */
.service-card .service-icon {
    width: 64px !important;
    height: 64px !important;
    margin-bottom: 0.5rem !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
    position: static !important;
    /* Allow pseudo-element to reference card container */
}

/* Stretched Link - Make entire card clickable */
.service-card {
    position: relative !important;
}

/* Create a transparent overlay linked to the icon's anchor */
.service-card .service-icon::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

/* The actual image */
.service-card .service-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    max-width: 64px !important;
    max-height: 64px !important;
}

/* TEXT Styling */
.service-card .service-title-text {
    flex: 1 1 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
    z-index: 10 !important;
    /* Ensure text is above overlay if needed, or let overlay cover it */
}

/* Service Name */
.service-card .service-name {
    text-align: center !important;
    padding: 0 !important;
    width: 100% !important;
    justify-content: center !important;
}

/* Service Description */
.service-card .service-description {
    text-align: center !important;
    margin-top: 0.1rem !important;
}

/* TAGS/PING Styling */
.service-card .service-tags {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    z-index: 20 !important;
    /* Keep interactive elements ABOVE the click overlay */
}


/* --- HEADER STYLING --- */

/* 1. Center and Enlarge Date/Time */
.information-widget-datetime {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

#information-widgets {
    position: relative !important;
    justify-content: center !important;
}

.information-widget-datetime .text-theme-800,
.information-widget-datetime .dark\:text-theme-200,
.information-widget-datetime span {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* 2. Hide Loop/Branding */
.brand-logo,
.layout-header-logo {
    display: none !important;
}


/* --- STATUS PILLS (Retained) --- */
#openwebui .widget .value,
#docmost .widget .value,
#nextcloud .widget .value,
#paperless .widget .value,
#element .widget .value,
#webmail .widget .value,
#n8n .widget .value,
#cronicle .widget .value,
#homeassistant .widget .value,
#zigbee2mqtt .widget .value,
#frigate .widget .value,
#grafana .widget .value,
#portainer .widget .value,
/* Fallback selectors */
#openwebui .widget,
#docmost .widget,
#nextcloud .widget,
#paperless .widget,
#element .widget,
#webmail .widget,
#n8n .widget,
#cronicle .widget,
#homeassistant .widget,
#zigbee2mqtt .widget,
#frigate .widget,
#grafana .widget,
#portainer .widget {
    background-color: currentColor;
    color: white !important;
    border-radius: 9999px;
    padding: 2px 8px;
    font-weight: 700;
    font-size: 0.65rem;
    line-height: 1;
    display: inline-block;
    min-width: unset;
    text-align: center;
    opacity: 0.9;
    text-shadow: none;
    margin-top: 2px;
}