/* MacHomeHub — Dashboard Styles */

/* === Layout === */
body > nav {
    padding-block: 0.5rem;
}

body > footer {
    padding-block: 0.5rem;
    text-align: center;
    opacity: 0.6;
}

h1 {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

/* === System Info Bar === */
#system-info {
    margin-bottom: 1rem;
}

.system-bar {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.8rem 1rem;
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-muted-border-color);
}

.system-bar .metric {
    flex: 1;
    min-width: 120px;
    text-align: center;
}

.system-bar .metric label {
    display: block;
    font-size: 0.75rem;
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

.system-bar .metric .value {
    font-size: 1.1rem;
    font-weight: 600;
}

.system-bar .metric progress {
    width: 100%;
    height: 6px;
    margin: 0.3rem 0 0.15rem;
}

.system-bar .hostname {
    flex-basis: 100%;
    text-align: center;
    font-size: 0.7rem;
    opacity: 0.5;
    margin-top: -0.3rem;
}

/* === Service Grid === */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.8rem;
}

/* === Service Card === */
.service-card {
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-muted-border-color);
    padding: 0.8rem 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.service-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.service-card.healthy {
    border-left: 4px solid #22c55e;
}

.service-card.unhealthy {
    border-left: 4px solid #ef4444;
}

.service-card.unknown {
    border-left: 4px solid #eab308;
}

.service-card .card-header {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-bottom: 0.3rem;
}

.service-card .card-header .icon {
    font-size: 1.2em;
}

.service-card .card-header strong {
    flex: 1;
    font-size: 0.95rem;
}

.service-card .card-desc {
    font-size: 0.8rem;
    opacity: 0.7;
    margin: 0 0 0.5rem;
}

/* === Sub-service list (inside group card) === */
.card-services {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.6rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--pico-muted-border-color);
}

.sub-service {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
}

.sub-service small {
    margin-left: auto;
    opacity: 0.6;
    font-size: 0.7rem;
}

.sub-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sub-service.healthy .sub-dot { background: #22c55e; }
.sub-service.unhealthy .sub-dot { background: #ef4444; }
.sub-service.unknown .sub-dot { background: #eab308; }

.service-card .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.service-card .card-footer a[role="button"] {
    padding: 0.25rem 0.8rem;
    font-size: 0.8rem;
    margin: 0;
}

.service-card .card-footer small {
    font-size: 0.7rem;
    opacity: 0.6;
}

/* === Badge === */
.badge {
    display: inline-block;
    padding: 0.1em 0.45em;
    border-radius: 0.25em;
    font-size: 0.7em;
    font-weight: 600;
    white-space: nowrap;
}

.badge.healthy {
    background: #dcfce7;
    color: #15803d;
}

.badge.unhealthy {
    background: #fee2e2;
    color: #b91c1c;
}

.badge.unknown {
    background: #fef9c3;
    color: #a16207;
}

/* Dark mode badge adjustments */
[data-theme="dark"] .badge.healthy,
@media (prefers-color-scheme: dark) {
    .badge.healthy { background: #14532d; color: #86efac; }
    .badge.unhealthy { background: #7f1d1d; color: #fca5a5; }
    .badge.unknown { background: #713f12; color: #fde047; }
}

/* === Progress warning color === */
progress.warning::-webkit-progress-value {
    background-color: #ef4444;
}

progress.warning::-moz-progress-bar {
    background-color: #ef4444;
}