/* ==========================================================================
   mGcHuman - MASTER BUTTONS / HEADER
   MASTER MODEL = AI ANALYSIS
   ========================================================================== */

* {
    box-sizing: border-box;
}


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

.page-header {

    width: 100%;

    border-bottom:
        1px solid #252b28;

    background:
        rgba(7,10,8,.96);

    position:
        sticky;

    top:
        0;

    z-index:
        100;

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 5px 25px
        rgba(0,0,0,.35);
}


.header-container {

    width:
        min(1200px,94%);

    margin:
        0 auto;

    min-height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


/* ==========================================================================
   BRAND
   Exact AI Analysis model
   ========================================================================== */

.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    flex-shrink:
        0;
}


.brand-icon {

    width:
        44px;

    height:
        44px;

    flex:
        0 0 44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border:
        1px solid #126a3b;

    border-radius:
        10px;

    background:
        #0c1b13;

    box-shadow:
        0 0 18px
        rgba(
            75,
            220,
            120,
            .08
        );
}


.brand-icon img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    border-radius:
        10px;
}


/*
|--------------------------------------------------------------------------
| MAIN BRAND TITLE
|--------------------------------------------------------------------------
*/

.brand-title {

    margin:
        0;

    color:
        #00e676;

    font-size:
        20px;

    font-weight:
        700;

    line-height:
        1.15;

    white-space:
        nowrap;
}


/*
|--------------------------------------------------------------------------
| BRAND SUBTITLE
|--------------------------------------------------------------------------
*/

.brand-subtitle {

    margin-top:
        3px;

    color:
        #7f8983;

    font-size:
        11px;

    font-weight:
        400;

    line-height:
        1.3;

    white-space:
        nowrap;
}


/* ==========================================================================
   BACKWARD COMPATIBILITY
   For pages using .brand-name / .brand-sub
   ========================================================================== */

.brand-name {

    margin:
        0;

    color:
        #00e676;

    font-size:
        20px;

    font-weight:
        700;

    line-height:
        1.15;

    white-space:
        nowrap;
}


.brand-sub {

    margin-top:
        3px;

    color:
        #7f8983;

    font-size:
        11px;

    font-weight:
        400;

    line-height:
        1.3;

    white-space:
        nowrap;
}


/* ==========================================================================
   NAVIGATION
   Exact AI Analysis model
   ========================================================================== */

.main-nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.nav-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    min-height:
        38px;

    padding:
        9px 12px;

    border:
        1px solid #292f2c;

    border-radius:
        8px;

    background:
        #111513;

    color:
        #b8c0bb;

    text-decoration:
        none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1.2;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.nav-btn:hover {

    border-color:
        #087f3e;

    color:
        #69f0ae;

    background:
        #0d1711;

    transform:
        translateY(-1px);
}


.nav-btn.green {

    border-color:
        #087f3e;

    background:
        #0d2819;

    color:
        #69f0ae;
}


.nav-btn.green:hover {

    border-color:
        #00c853;

    background:
        #12351f;

    color:
        #9affba;
}


.nav-btn.logout {

    border-color:
        #562222;

    background:
        #1b0e0e;

    color:
        #ff7777;
}


.nav-btn.logout:hover {

    border-color:
        #733030;

    background:
        #351414;

    color:
        #ff9999;
}


/* ==========================================================================
   STANDARD INTERNAL BUTTON
   ========================================================================== */

.btn,
button.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    min-height:
        38px;

    padding:
        9px 12px;

    border:
        1px solid #292f2c;

    border-radius:
        8px;

    background:
        #111513;

    color:
        #b8c0bb;

    text-decoration:
        none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1.2;

    cursor:
        pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.btn:hover,
button.btn:hover {

    border-color:
        #087f3e;

    color:
        #69f0ae;

    background:
        #0d1711;

    transform:
        translateY(-1px);
}


/* ==========================================================================
   GREEN
   ========================================================================== */

.btn-green,
.btn.primary {

    border-color:
        #087f3e;

    background:
        #0d2819;

    color:
        #69f0ae;
}


.btn-green:hover,
.btn.primary:hover {

    border-color:
        #00c853;

    background:
        #12351f;

    color:
        #9affba;
}


/* ==========================================================================
   RED / DANGER
   ========================================================================== */

.btn-red,
.btn.danger {

    border-color:
        #562222;

    background:
        #1b0e0e;

    color:
        #ff7777;
}


.btn-red:hover,
.btn.danger:hover {

    border-color:
        #733030;

    background:
        #351414;

    color:
        #ff9999;
}


/* ==========================================================================
   MOBILE
   IMPORTANT:
   Brand typography stays the same as AI Analysis.
   ========================================================================== */

@media (max-width: 900px) {

    .header-container {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            14px 0;
    }


    .main-nav {

        width:
            100%;

        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            7px;
    }


    .nav-btn {

        width:
            100%;

        min-height:
            38px;

        text-align:
            center;
    }

}


@media (max-width: 500px) {

    .header-container {

        width:
            calc(
                100% - 16px
            );
    }


    .brand {

        gap:
            12px;
    }


    .brand-icon {

        width:
            44px;

        height:
            44px;

        flex-basis:
            44px;
    }


    /*
    |--------------------------------------------------------------------------
    | DO NOT SHRINK BRAND TEXT
    |--------------------------------------------------------------------------
    */

    .brand-title,
    .brand-name {

        font-size:
            20px;
    }


    .brand-subtitle,
    .brand-sub {

        font-size:
            11px;
    }


    .main-nav {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            6px;
    }


    .nav-btn {

        min-height:
            36px;

        padding:
            8px 7px;

        font-size:
            11px;
    }

}