* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: Georgia, "Times New Roman", serif;
}

body {
    background:
        radial-gradient(
            circle at top,
            #33281c,
            #17120e 65%
        );
    color: #e9dfc8;
}

button,
input {
    font: inherit;
}

.hidden {
    display: none !important;
}


/* LOGIN */

.login-wrapper {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;
}

.login-card {
    width: 100%;
    max-width: 430px;

    padding: 42px;

    border: 1px solid #715c3c;

    background:
        linear-gradient(
            145deg,
            rgba(49, 38, 26, .98),
            rgba(27, 21, 16, .98)
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .55);

    border-radius: 8px;
}

.brand {
    text-align: center;
    margin-bottom: 35px;
}

.brand-small {
    color: #c0a36e;
    letter-spacing: 4px;
    font-size: 12px;
}

.brand h1 {
    margin: 8px 0;
    font-size: 34px;
}

.brand p {
    color: #9f947f;
    margin: 0;
}

label {
    display: block;
    margin: 17px 0 7px;
    color: #c9b992;
}

input {
    width: 100%;

    padding: 13px 14px;

    background: #15110d;

    border:
        1px solid #574831;

    border-radius: 4px;

    color: #fff;

    outline: none;
}

input:focus {
    border-color: #aa8b56;
}

.login-card button {
    width: 100%;

    margin-top: 25px;

    padding: 14px;

    border: 0;

    border-radius: 4px;

    background: #886b3d;
    color: white;

    cursor: pointer;
}

.error {
    color: #db8a78;
    margin-top: 15px;
    min-height: 20px;
}


/* DASHBOARD */

.dashboard {
    min-height: 100vh;
    display: flex;
}

.sidebar {
    width: 240px;

    min-height: 100vh;

    padding: 28px 18px;

    background: #13100c;

    border-right:
        1px solid #443624;

    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    padding:
        0 12px 25px;

    border-bottom:
        1px solid #3d3021;

    margin-bottom: 25px;
}

.sidebar-brand strong {
    display: block;

    letter-spacing: 4px;

    font-size: 22px;

    color: #d5ba82;
}

.sidebar-brand span {
    font-size: 10px;
    letter-spacing: 2px;
    color: #82745e;
}

nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-item,
.logout {
    text-align: left;

    padding: 12px 14px;

    border: 0;
    border-radius: 4px;

    background: transparent;

    color: #afa48e;

    cursor: pointer;
}

.nav-item:hover,
.nav-item.active {
    background: #2d251a;
    color: #e6d2a8;
}

.logout {
    margin-top: auto;
    color: #c47d72;
}

.content {
    flex: 1;

    padding: 35px;

    max-width: 1600px;
}

header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;
}

header h1 {
    margin: 0 0 5px;
}

header p {
    color: #958a76;
    margin: 0;
}

#userInfo {
    color: #cbb98f;
}


/* STATS */

.stats-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(180px, 1fr));

    gap: 18px;

    margin-bottom: 35px;
}

.card {
    padding: 22px;

    background:
        linear-gradient(
            145deg,
            #292116,
            #201a13
        );

    border:
        1px solid #483923;

    border-radius: 6px;

    min-height: 130px;
}

.card-label {
    display: block;

    color: #92856e;

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.card strong {
    display: block;

    margin: 12px 0 7px;

    font-size: 28px;

    color: #e3c890;
}

.card > span:last-child {
    font-size: 12px;
    color: #918775;
}


/* SERVICES */

.services h2 {
    margin-bottom: 18px;
}

.service-card {
    padding: 22px;

    border:
        1px solid #453723;

    background: #211b14;

    margin-bottom: 14px;

    border-radius: 6px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}

.service-card h3 {
    margin:
        0 0 10px;
}

.status {
    display: inline-block;

    font-size: 12px;

    padding: 5px 9px;

    border-radius: 15px;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.status.active {
    color: #9ad49b;

    background:
        rgba(62, 128, 64, .18);

    border:
        1px solid #426f43;
}

.status.inactive,
.status.failed {
    color: #dc8c81;

    background:
        rgba(150, 61, 52, .16);

    border:
        1px solid #774139;
}

.status.unknown {
    color: #c0b7a6;
    border: 1px solid #615744;
}

.service-actions {
    display: flex;
    gap: 8px;
}

.service-actions button {
    padding: 9px 13px;

    border-radius: 4px;

    border:
        1px solid #5d4a2f;

    color: #d6c7a9;

    background: #302619;

    cursor: pointer;
}

.service-actions button:hover {
    background: #45351f;
}

.service-actions .start {
    border-color: #486848;
}

.service-actions .danger {
    border-color: #774139;
    color: #d9978e;
}

.service-actions button:disabled {
    opacity: .45;
    cursor: wait;
}

#message {
    position: fixed;

    right: 25px;
    bottom: 25px;

    padding: 12px 18px;

    border-radius: 5px;

    background: #292116;

    border: 1px solid #5e4c31;

    display: none;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .35);
}


/* RESPONSIVE */

@media (max-width: 1050px) {
    .stats-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }
}

@media (max-width: 760px) {

    .sidebar {
        width: 175px;
    }

    .content {
        padding: 20px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .service-actions {
        flex-wrap: wrap;
    }
}

a.nav-item {
    display: block;
    text-decoration: none;
}