@import url('/webjars/font-awesome/7.0.0/css/all.min.css');

:root {
    --background: hsl(210, 50%, 97%);
    --background-element: hsl(0, 0%, 100%);
    --text: hsl(0, 0%, 20%);
    --highlight: hsl(204, 85%, 53%);
    --link: hsl(204, 79%, 41%);
    --shadow: hsla(0, 0%, 0%, 10%);
    --border: hsl(0, 0%, 88%);
    --transition: 0.3s ease;
}

body.dark-theme {
    --background: hsl(0, 0%, 15%);
    --background-element: hsl(0, 0%, 20%);
    --text: hsl(210, 50%, 98%);
    --link: hsl(204, 85%, 70%);
    --highlight: hsl(204, 85%, 60%);
}

* { box-sizing: border-box; }

body {
    background-color: var(--background);
    color: var(--text);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h1 { text-align: center; margin-bottom: 0.5em; font-size: 2.5rem; color: var(--highlight); }
h2 { margin: 0 0 0.5em; font-size: 1.5rem; }
h3 { margin: 0; font-size: 1.2rem; }

.card {
    background-color: var(--background-element);
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--shadow);
    padding: 15px;
    margin: 20px 0;
    width: 100%;
    max-width: 800px;
    transition: var(--transition);
}
.card:hover { box-shadow: 0 6px 12px hsla(0, 0%, 0%, 15%); }

.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    appearance: none;
    padding: 10px 40px 10px 15px;
    font-size: 0.95rem;
    font-weight: 500;
    background-color: var(--background);
    color: var(--text);
    border: 2px solid var(--highlight);
    border-radius: 8px;
    cursor: pointer;
    min-width: 160px;
    box-shadow: 0 2px 8px var(--shadow);
    transition: all 0.2s ease;
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
.theme-toggle:hover {
    background-color: var(--highlight);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
.theme-toggle option {
    padding: 10px;
    background-color: var(--background);
    color: var(--text);
}

#build-info { text-align: center; }
#build-info span { font-weight: bold; color: var(--highlight); }

/* Project styles */
.Project { display: flex; flex-direction: column; }
.Project .Header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}
.Project h2 { flex-grow: 1; margin: 0; }
.Project .github { text-decoration: none; color: var(--link); }
.Project .toggle-services {
    text-decoration: none;
    cursor: pointer;
    color: var(--link);
    font-size: 1.2rem;
    transition: color var(--transition);
}
.Project .toggle-services:hover { color: var(--highlight); }
.Project.collapsed .Services { display: none; }
.Project.collapsed .toggle-services::before { content: "\f078"; }
.Project:not(.collapsed) .toggle-services::before { content: "\f077"; }

/* Services styles */
.Services {
    list-style: none;
    padding: 0;
    margin: 0.5em 0 0 0;
    width: 100%;
}
.Service {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 12px;
    border-radius: 8px;
    background-color: var(--shadow);
    margin-top: 0.5em;
    border: 1px solid hsla(0, 0%, 0%, 10%);
    transition: background-color var(--transition);
}
.Service:hover { background-color: hsla(204, 85%, 53%, 10%); }
.Service h3 { flex-grow: 1; }
.Service time { white-space: nowrap; }

/* Images and Status */
.Project img, .Service img, .Status {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.Status {
    display: inline-block;
    background-size: cover;
}
.Status.UP { background-image: url("images/status/UP.svg"); }
.Status.DOWN { background-image: url("images/status/DOWN.svg"); }
.Status.UNKNOWN { background-image: url("images/status/UNKNOWN.svg"); }
.Status.UNRESPONSIVE { background-image: url("images/status/UNRESPONSIVE.svg"); }

/* Table styles */
table {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    border-collapse: collapse;
    background-color: var(--background-element);
    box-shadow: 0 2px 4px var(--shadow);
    border-radius: 8px;
    overflow: hidden;
}
th, td {
    padding: 12px;
    text-align: left;
    border: 1px solid var(--border);
}
th {
    background-color: var(--highlight);
    color: white;
    font-weight: bold;
}
tr:nth-child(even) { background-color: hsla(0, 0%, 0%, 3%); }

/* Legend styles */
.Legend ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.Legend li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.Legend .Status { margin-right: 10px; }

/* Footer */
footer {
    width: 100%;
    text-align: center;
    margin-top: 2em;
    padding: 1em 0;
    background-color: hsl(0, 0%, 88%);
}
body.dark-theme footer { background-color: hsl(0, 0%, 27%); }
footer a {
    color: var(--link);
    text-decoration: none;
}
footer a:hover { text-decoration: underline; }
.mainStylesheetLoaded { display: none; }

/* Media Queries */
@media (max-width: 768px) {
    h1 { font-size: 1.5rem; }
    .card { padding: 10px; }
    th, td { font-size: 0.9rem; }

    .theme-toggle {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        min-width: unset;
        padding: 0;
        border-radius: 50%;
        color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'%3E%3C/circle%3E%3Cline x1='12' y1='1' x2='12' y2='3'%3E%3C/line%3E%3Cline x1='12' y1='21' x2='12' y2='23'%3E%3C/line%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'%3E%3C/line%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'%3E%3C/line%3E%3Cline x1='1' y1='12' x2='3' y2='12'%3E%3C/line%3E%3Cline x1='21' y1='12' x2='23' y2='12'%3E%3C/line%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'%3E%3C/line%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'%3E%3C/line%3E%3C/svg%3E");
        background-size: 20px;
        background-position: center;
    }

    body.dark-theme .theme-toggle {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'%3E%3C/path%3E%3C/svg%3E");
    }
}

@media (max-width: 480px) {
    .Project .Header {
        padding: 8px;
        gap: 8px;
        justify-content: space-between;
    }
    .Project .Header img {
        width: 36px;
        height: 36px;
        margin-right: 5px;
    }
    .Project .Header h2 {
        font-size: 1.2rem;
        margin: 0;
        flex: 1;
        min-width: 0;
        text-align: left;
    }
    .Project .Header img, .Project .Header h2 {
        display: inline-block;
        vertical-align: middle;
    }
    .Project .github, .Project .toggle-services { margin: 0 4px; }
    .Project .github { font-size: 0.9rem; padding: 4px 8px; }
    .Project .toggle-services { font-size: 1rem; padding: 4px; }
    .Project.card { padding: 10px 8px; }
    .Services { margin-top: 10px; }
}

@media (max-width: 360px) {
    .Project .Header h2 { font-size: 1.1rem; }
    .Project .github { font-size: 0.85rem; }
}