/* =========================================================
   SITE MASTER
   ========================================================= */

:root {
    --nav-height: 76px;
    --nav-blue: #176bdc;
    --nav-dark: #12365f;
    --nav-text: #435b77;
    --nav-muted: #8291a4;
    --nav-border: #e5ecf4;
    --page-bg: #f5f8fc;
}


/* =========================================================
   GLOBAL
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}


body {
    background: var(--page-bg);
    font-family: "Segoe UI", Arial, sans-serif;
    color: #17355e;
}


* {
    box-sizing: border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

.sofira-header {
    position: relative;
    z-index: 1000;
    width: 100%;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--nav-border);
    box-shadow: 0 3px 18px rgba(24, 55, 90, 0.055);
}


/* =========================================================
   NAVBAR
   ========================================================= */

.sofira-navbar {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1700px;
    height: var(--nav-height);
    margin: 0 auto;
    padding: 0 45px;
    gap: 35px;
}


/* =========================================================
   LOGO
   ========================================================= */

.navbar-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 11px;
    color: #13355e;
    text-decoration: none;
}


    .navbar-logo:hover {
        color: #13355e;
        text-decoration: none;
    }


    .navbar-logo img {
        display: block;
        width: auto;
        height: 48px;
        object-fit: contain;
    }


.navbar-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


    .navbar-brand-text strong {
        display: block;
        font-size: 19px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: 0.4px;
        color: #173e70;
    }


    .navbar-brand-text span {
        display: block;
        margin-top: 5px;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 2px;
        color: #8090a5;
    }


/* =========================================================
   MAIN NAV
   ========================================================= */

.main-navigation {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    flex: 1;
    min-width: 0;
    gap: 4px;
}


.main-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 100%;
    padding: 0 14px;
    color: #50657f;
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.15s ease, background 0.15s ease;
}


    .main-nav-link:hover {
        color: #176bdc;
        text-decoration: none;
        background: rgba(23, 107, 220, 0.045);
    }


    .main-nav-link::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 0;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: #176bdc;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.18s ease;
    }


    .main-nav-link:hover::after {
        transform: scaleX(1);
    }


/* =========================================================
   NAV ICON
   ========================================================= */

.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    color: #768ba3;
    font-size: 17px;
    font-weight: 600;
}


.main-nav-link:hover .nav-icon {
    color: #176bdc;
}


/* =========================================================
   USER
   ========================================================= */

.navbar-user {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
    padding-left: 20px;
    border-left: 1px solid #e4ebf3;
}


/* avatar */

.navbar-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    background: linear-gradient( 135deg, #337fe9, #1057ad );
    font-size: 18px;
    box-shadow: 0 5px 14px rgba(21, 96, 190, 0.18);
}


/* name */

.navbar-user-info {
    min-width: 100px;
    max-width: 180px;
}


    .navbar-user-info strong {
        display: block;
        overflow: hidden;
        color: #18375f;
        font-size: 13px;
        line-height: 1.3;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .navbar-user-info span {
        display: block;
        margin-top: 2px;
        color: #8592a4;
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* =========================================================
   LOGOUT
   ========================================================= */

.sofira-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 15px;
    margin-left: 4px;
    border: 1px solid #dfe7f0;
    border-radius: 9px;
    background: #ffffff;
    color: #65768b !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}

    .sofira-logout:hover {
        color: #d34848 !important;
        background: #fff7f7;
        border-color: #efcccc;
        text-decoration: none !important;
        transform: translateY(-1px);
    }


/* =========================================================
   CONTENT
   ========================================================= */

.body-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}


/* =========================================================
   FOOTER
   ========================================================= */

.sofira-footer {
    margin-top: 40px;
    background: linear-gradient( 180deg, #e9f0f8 0%, #dfe9f4 100% );
    border-top: 1px solid #ccd9e7;
    color: #2a4263;
}


.sofira-footer-main {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 60px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 42px 50px 34px;
}


/* COMPANY */

.footer-company {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}


.footer-company-logo {
    display: block;
    height: 62px;
    width: auto;
    object-fit: contain;
}


.footer-certificates {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
}


    .footer-certificates img {
        display: block;
        height: 42px;
        width: auto;
        object-fit: contain;
    }


/* SECTIONS */

.footer-section h3 {
    margin: 0 0 18px;
    font-size: 17px;
    font-weight: 700;
    color: #173a68;
}


.footer-row {
    display: flex;
    gap: 8px;
    margin-bottom: 9px;
    font-size: 13px;
    line-height: 1.45;
}


.footer-label {
    color: #71839a;
}


.footer-row a {
    color: #176bdc;
    text-decoration: none;
    font-weight: 600;
}


    .footer-row a:hover {
        text-decoration: underline;
    }


/* TEAMVIEWER */

.teamviewer-link {
    display: inline-block;
}


    .teamviewer-link img {
        height: 52px;
        width: auto;
        object-fit: contain;
    }


.footer-support-text {
    margin: 12px 0 0;
    font-size: 12px;
    color: #7c8ca1;
}


/* BOTTOM */

.sofira-footer-bottom {
    padding: 15px 25px;
    text-align: center;
    border-top: 1px solid #cbd8e6;
    background: rgba(255, 255, 255, 0.22);
    font-size: 12px;
    color: #667b94;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .sofira-footer-main {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 35px 25px;
    }
}

/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.navbar-mobile-button {
    display: none;
    width: 42px;
    height: 42px;
    padding: 9px;
    border: 0;
    border-radius: 9px;
    background: #f3f7fc;
    cursor: pointer;
}


    .navbar-mobile-button span {
        display: block;
        width: 100%;
        height: 2px;
        margin: 5px 0;
        background: #31567f;
        border-radius: 2px;
    }


/* =========================================================
   MEDIUM DESKTOP
   ========================================================= */

@media (max-width: 1400px) {

    .sofira-navbar {
        padding: 0 30px;
        gap: 22px;
    }


    .main-nav-link {
        padding: 0 10px;
        font-size: 13px;
    }


    .nav-icon {
        display: none;
    }


    .navbar-user-info {
        max-width: 135px;
    }
}


/* =========================================================
   SMALL LAPTOP
   ========================================================= */

@media (max-width: 1100px) {

    .navbar-brand-text span {
        display: none;
    }


    .navbar-user-info {
        display: none;
    }


    .navbar-user {
        padding-left: 12px;
    }


    .logout-text {
        display: none;
    }


    .navbar-logout {
        width: 40px;
        padding: 0;
    }
}


/* =========================================================
   TABLET / MOBILE NAV
   ========================================================= */

@media (max-width: 900px) {

    .sofira-navbar {
        position: relative;
        height: 68px;
        padding: 0 18px;
    }


    .navbar-logo {
        margin-right: auto;
    }


        .navbar-logo img {
            height: 42px;
        }


    .navbar-mobile-button {
        display: block;
        order: 2;
    }


    .navbar-user {
        order: 3;
        padding-left: 0;
        border-left: 0;
    }


    .navbar-user-avatar {
        display: none;
    }


    .main-navigation {
        position: absolute;
        display: none;
        top: 68px;
        left: 0;
        right: 0;
        height: auto;
        padding: 10px 14px 15px;
        flex-direction: column;
        background: #ffffff;
        border-top: 1px solid #eef2f7;
        border-bottom: 1px solid #e1e9f2;
        box-shadow: 0 12px 28px rgba(24, 55, 90, 0.10);
    }


        .main-navigation.mobile-open {
            display: flex;
        }


    .main-nav-link {
        height: 46px;
        padding: 0 14px;
        border-radius: 8px;
        font-size: 14px;
    }


        .main-nav-link::after {
            display: none;
        }


    .nav-icon {
        display: inline-flex;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .sofira-navbar {
        padding: 0 12px;
    }


    .navbar-logo {
        gap: 7px;
    }


        .navbar-logo img {
            height: 38px;
        }


    .navbar-brand-text strong {
        font-size: 16px;
    }


    .navbar-logout {
        border: 0;
        background: transparent;
    }


        .navbar-logout:hover {
            background: #fff4f4;
        }
}