:root {
    --blue: #06449a;
    --dark: #00377e;
    --red: #ed1c24;
    --line: #dce5ef
}

body {
    background: linear-gradient(145deg,#fff,#f3f8fc 72%,#e7f0f8);
    color: #203247;
    font-family: Arial,Helvetica,sans-serif
}

a {
    text-decoration: none
}

.app-shell {
    min-height: 100vh;
    padding-bottom: 76px
}

.brand-logo {
    height: 46px;
    max-width: 180px;
    object-fit: contain
}

.app-header {
    background: linear-gradient(90deg,var(--dark),var(--blue));
    position: sticky;
    top: 0;
    z-index: 1030
}

    .app-header .text-muted {
        color: #fff !important
    }

.page-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #092e68
}

.section-title {
    font-weight: 800;
    color: #092e68
}

.card {
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: 0 2px 8px #0c345e0f
}

.btn {
    border-radius: 5px
}

.btn-cast {
    background: linear-gradient(90deg,var(--dark),var(--blue));
    color: #fff;
    font-weight: 700
}

.btn-outline-cast {
    border: 1px solid var(--blue);
    color: var(--blue);
    background: #fff;
    font-weight: 700
}

.text-cast-blue {
    color: var(--blue) !important
}

.text-cast-red {
    color: var(--red) !important
}

.status-badge {
    display: inline-block;
    padding: .3rem .55rem;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 800
}

.status-ok {
    background: #e8f7ed;
    color: #27824b
}

.status-info {
    background: #e7f1ff;
    color: #1261b7
}

.status-warn {
    background: var(--red);
    color: #fff
}

.info-label {
    font-size: .72rem;
    color: #788699
}

.info-value {
    font-weight: 700
}

.quick-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    color: #fff
}

.form-control, .form-select {
    min-height: 46px;
    border-radius: 5px
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: linear-gradient(90deg,var(--dark),var(--blue))
}

    .bottom-nav .nav-link {
        color: #fff;
        text-align: center;
        font-size: .67rem;
        padding: .5rem .05rem
    }

        .bottom-nav .nav-link i {
            display: block;
            font-size: 1.05rem
        }

        .bottom-nav .nav-link.active {
            color: var(--red);
            font-weight: 800
        }

.desktop-sidebar {
    display: none
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg,#fff,#f7fbff 67%,#e8f1f9)
}

    .login-page:before {
        content: '';
        position: absolute;
        left: -10%;
        right: -10%;
        height: 115px;
        bottom: -35px;
        background: var(--blue);
        transform: skewY(-8deg)
    }

    .login-page:after {
        content: '';
        position: absolute;
        left: -7%;
        bottom: -10px;
        width: 43%;
        height: 90px;
        background: var(--red);
        transform: skewY(-8deg)
    }

    .login-page .container {
        position: relative;
        z-index: 1
    }

.login-card {
    max-width: 460px;
    margin: auto;
    border: 0;
    background: transparent;
    box-shadow: none
}

.news-placeholder, .news-hero {
    background: linear-gradient(135deg,#e7eef5,#f9fbfd);
    min-height: 180px
}

.timeline-item {
    padding: 0 0 1rem 1.4rem;
    border-left: 2px solid #e3eaf1
}

.desktop-main {
    min-height: 100vh
}

@media(min-width:992px) {
    .app-shell {
        padding-bottom: 0
    }

    .bottom-nav {
        display: none
    }

    .desktop-sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 220px;
        padding: 1.25rem;
        background: linear-gradient(180deg,var(--dark),var(--blue));
        z-index: 1040
    }

        .desktop-sidebar .nav-link {
            color: #fff;
            padding: .72rem .8rem;
            margin: .15rem 0
        }

            .desktop-sidebar .nav-link.active, .desktop-sidebar .nav-link:hover {
                background: #ffffff20;
                border-left: 3px solid var(--red)
            }

    .desktop-main {
        margin-left: 220px
    }
}

@media (max-width: 767.98px) {

    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    body {
        height: 100dvh;
        min-height: 100dvh;
    }

    .login-page,
    .login-wrapper,
    .auth-wrapper {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }
}