/* ==========================================================
   BORDERPASS
   layout.css
   Version : 1.1.0
========================================================== */


/* ==========================================================
   CONTAINER
========================================================== */

.container{
    width:min(100%,1400px);
    margin-inline:auto;
    padding-inline:1rem;
}


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

.site-header{
    position:sticky;
    top:0;
    z-index:1000;

    background:
        rgba(
            255,
            255,
            255,
            .97
        );

    border-bottom:
        1px solid
        var(--border);

    box-shadow:
        0 3px 16px
        rgba(
            15,
            23,
            42,
            .05
        );

    backdrop-filter:
        blur(10px);
}


.site-header-inner{
    min-height:72px;

    display:grid;

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

    align-items:center;

    gap:.75rem;
}


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

.logo{
    display:flex;

    align-items:center;

    gap:.5rem;

    font-size:1.3rem;

    font-weight:800;

    color:
        var(--primary);

    white-space:nowrap;
}


/* ==========================================================
   PERSIAN DATE & IRAN TIME
========================================================== */

.site-datetime{
    justify-self:center;

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:.05rem;

    min-width:235px;

    min-height:56px;

    padding:
        .38rem
        1rem
        .42rem;

    overflow:hidden;

    border:
        1px solid
        rgba(
            37,
            99,
            235,
            .16
        );

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7faff 48%,
            #eef5ff 100%
        );

    box-shadow:
        0 5px 16px
        rgba(
            15,
            23,
            42,
            .07
        ),

        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .9
        );

    text-align:center;

    white-space:nowrap;
}


.site-datetime::before{
    content:"";

    position:absolute;

    inset-inline-start:0;

    top:9px;

    bottom:9px;

    width:3px;

    border-radius:
        0 4px 4px 0;

    background:
        linear-gradient(
            180deg,
            #2563eb,
            #60a5fa
        );
}


.site-date-row{
    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;
}


.site-date{
    color:#334155;

    font-size:.84rem;

    font-weight:700;

    line-height:1.5;
}


.site-time{
    direction:ltr;

    display:block;

    color:
        var(--primary);

    font-size:1.08rem;

    font-weight:800;

    line-height:1.25;

    letter-spacing:.035em;

    font-variant-numeric:
        tabular-nums;
}


/* ==========================================================
   HAMBURGER
========================================================== */

.menu-toggle{
    width:44px;

    height:44px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

    cursor:pointer;

    border-radius:12px;

    transition:
        var(--transition);

    background:#f8fafc;

    border:
        1px solid
        var(--border);
}


.menu-toggle:hover{
    background:#eef4ff;
}


.menu-toggle span{
    width:23px;

    height:3px;

    background:
        var(--black);

    border-radius:20px;

    transition:.3s;
}


/* ==========================================================
   MOBILE / TABLET OFF-CANVAS NAVIGATION
========================================================== */

.main-nav{
    position:fixed;

    top:0;

    right:-390px;

    width:
        min(
            88vw,
            360px
        );

    height:100dvh;

    background:#ffffff;

    transition:
        right
        .28s ease;

    box-shadow:
        -14px 0 42px
        rgba(
            15,
            23,
            42,
            .2
        );

    overflow-y:auto;

    overscroll-behavior:
        contain;

    z-index:1100;

    padding-bottom:1.5rem;
}


.main-nav.active{
    right:0;
}


.mobile-nav-header{
    position:sticky;

    top:0;

    z-index:4;

    min-height:76px;

    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:1rem;

    padding:
        1rem
        1.1rem;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #1d4ed8,
            #2563eb 55%,
            #3b82f6
        );

    box-shadow:
        0 6px 18px
        rgba(
            37,
            99,
            235,
            .18
        );
}


.mobile-nav-header strong,
.mobile-nav-header small{
    display:block;
}


.mobile-nav-header strong{
    font-size:1.02rem;
}


.mobile-nav-header small{
    margin-top:.1rem;

    color:
        rgba(
            255,
            255,
            255,
            .8
        );
}


.mobile-nav-close{
    flex:
        0 0 42px;

    width:42px;

    height:42px;

    display:
        inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    color:#ffffff;

    background:
        rgba(
            255,
            255,
            255,
            .14
        );

    font-size:1.8rem;

    line-height:1;
}


.main-nav>ul{
    display:flex;

    flex-direction:column;

    padding:.55rem;
}


.main-nav>ul>li{
    position:relative;

    border-bottom:
        1px solid
        #eef2f7;
}


.main-nav a{
    display:flex;

    align-items:center;

    min-height:56px;

    padding:
        .75rem
        1rem;

    border-radius:11px;

    transition:
        var(--transition);

    color:#1f2937;

    font-weight:600;

    line-height:1.7;
}


.main-nav a:hover{
    background:#eef4ff;

    color:
        var(--primary);
}


/* زیرمنو در موبایل */

.main-nav .user-dropdown{
    position:static;

    width:100%;

    min-width:0;

    margin:
        0
        0
        .5rem;

    padding:.35rem;

    border:0;

    border-radius:12px;

    box-shadow:none;

    background:#f8fafc;
}


.main-nav .user-dropdown li a,
.main-nav .user-dropdown li span{
    min-height:50px;

    padding:
        .72rem
        .9rem;

    white-space:normal;

    line-height:1.75;
}


.main-nav .user-dropdown li span{
    display:flex;

    align-items:center;

    color:#475569;
}


/* خوانایی ثابت آیتم‌های زیرمنو روی تمام تم‌های صفحه */
.main-nav .user-dropdown > li > a{
    color:#0b2741 !important;
    background:transparent;
}

.main-nav .user-dropdown > li > a:hover,
.main-nav .user-dropdown > li > a:focus-visible{
    color:#075f6f !important;
    background:#e7f5f6 !important;
}

.main-nav .user-dropdown > li > span{
    color:#425b6d !important;
}

.main-nav .user-dropdown > li + li{
    border-top:1px solid #e8eef2;
}


/* ==========================================================
   OVERLAY
========================================================== */

.overlay{
    position:fixed;

    inset:0;

    background:
        rgba(
            15,
            23,
            42,
            .48
        );

    opacity:0;

    visibility:hidden;

    transition:.28s;

    z-index:1050;

    backdrop-filter:
        blur(2px);
}


.overlay.active{
    opacity:1;

    visibility:visible;
}


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

.main-content{
    min-height:
        calc(
            100vh
            - 136px
        );

    padding-block:2rem;
}


/* ==========================================================
   HOME
========================================================== */

.home-hero{
    padding-bottom:
        1.25rem;
}


.home-quick-access{
    width:
        min(
            100%,
            1100px
        );

    margin:
        1rem
        auto
        0;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(
                    100%,
                    235px
                ),
                1fr
            )
        );
}


.home-action-card{
    min-height:210px;

    color:
        var(--text);

    border:
        1px solid
        transparent;

    transition:
        transform
        var(--transition),

        box-shadow
        var(--transition),

        border-color
        var(--transition);

    -webkit-tap-highlight-color:
        transparent;
}


.home-action-card:hover{
    transform:
        translateY(-4px);

    border-color:
        rgba(
            37,
            99,
            235,
            .18
        );

    box-shadow:
        0 14px 32px
        rgba(
            15,
            23,
            42,
            .12
        );
}


.home-action-card:active{
    transform:
        translateY(-1px);
}


.home-stage-message{
    max-width:760px;

    margin:
        1.3rem
        auto
        0;

    text-align:center;

    line-height:1.9;
}


.home-admin-stats{
    max-width:420px;
}


.online-users-card{
    border:
        1px solid
        rgba(
            22,
            163,
            74,
            .14
        );

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f0fdf4
        );
}


.online-users-count{
    margin:
        .15rem
        0
        .4rem;

    color:#15803d;

    font-size:2.4rem;

    font-weight:900;

    line-height:1.1;

    font-variant-numeric:
        tabular-nums;
}


.session-warning-countdown{
    margin-top:1rem;

    text-align:center;
}


.session-warning-countdown strong{
    direction:ltr;

    display:inline-block;

    min-width:74px;

    color:
        var(--danger);

    font-size:1.35rem;

    font-variant-numeric:
        tabular-nums;
}


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

.site-footer{
    background:
        var(--white);

    border-top:
        1px solid
        var(--border);
}


.site-footer .container{
    min-height:64px;

    display:flex;

    align-items:center;

    justify-content:center;
}


.site-footer p{
    color:
        var(--text-light);

    font-size:.9rem;
}


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

@media(max-width:575px){

    .site-header-inner{
        min-height:68px;

        gap:.35rem;

        padding-inline:.55rem;
    }


    .logo{
        font-size:.92rem;
    }


    .site-datetime{
        min-width:0;

        width:100%;

        max-width:190px;

        min-height:50px;

        padding:
            .28rem
            .35rem
            .32rem;

        border-radius:11px;
    }


    .site-date{
        font-size:.64rem;
    }


    .site-time{
        font-size:.88rem;
    }


    .menu-toggle{
        width:40px;

        height:40px;
    }


    .main-content{
        padding-block:
            1.2rem;
    }


    .home-hero{
        padding:
            1.3rem
            0
            .8rem;
    }


    .home-hero .hero-title{
        font-size:
            clamp(
                1.5rem,
                8vw,
                1.95rem
            );

        line-height:1.55;

        margin-bottom:.55rem;
    }


    .home-hero .hero-subtitle{
        margin-bottom:.4rem;

        font-size:.93rem;

        line-height:1.9;
    }


    .home-quick-access{
        gap:1rem;

        margin-top:.8rem;
    }


    .home-action-card{
        min-height:0;

        padding:
            1.15rem
            1rem;
    }


    .home-action-card
    .feature-icon{

        font-size:2.45rem;

        margin-bottom:.65rem;
    }


    .home-action-card
    .feature-title{

        font-size:1.12rem;

        margin-bottom:.4rem;
    }


    .home-action-card
    .feature-text{

        font-size:.9rem;

        line-height:1.8;
    }
}


@media(max-width:359px){

    .site-header-inner{
        padding-inline:.4rem;

        gap:.25rem;
    }


    .logo{
        font-size:.8rem;
    }


    .site-datetime{
        max-width:170px;

        padding-inline:.2rem;
    }


    .site-date{
        font-size:.58rem;
    }


    .site-time{
        font-size:.8rem;
    }
}


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

@media(min-width:992px){

    .site-header-inner{
        grid-template-columns:
            auto
            minmax(
                260px,
                1fr
            )
            auto;
    }


    .menu-toggle{
        display:none;
    }


    .mobile-nav-header{
        display:none;
    }


    .main-nav{
        position:static;

        width:auto;

        max-width:none;

        height:auto;

        background:#ffffff;

        box-shadow:none;

        padding:0;

        overflow:visible;

        border-bottom:
            1px solid
            var(--border);
    }


    .main-nav>ul{
        width:
            min(
                100%,
                1400px
            );

        margin-inline:auto;

        padding:
            .35rem
            1rem;

        display:flex;

        flex-direction:row;

        align-items:center;

        gap:.25rem;
    }


    .main-nav>ul>li{
        position:relative;

        border:none;
    }


    .main-nav a{
        min-height:44px;

        padding:
            .55rem
            .85rem;

        border-radius:10px;

        white-space:nowrap;

        font-size:.92rem;
    }


    .main-nav
    .user-dropdown{

        display:none;

        position:absolute;

        top:100%;

        right:0;

        width:auto;

        min-width:240px;

        margin-top:7px;

        padding:
            8px
            0;

        background:#ffffff;

        border:
            1px solid
            #dddddd;

        border-radius:12px;

        box-shadow:
            0 12px 30px
            rgba(
                15,
                23,
                42,
                .14
            );

        z-index:1200;
    }


    .main-nav
    .user-dropdown.show{

        display:block;
    }


    .main-nav
    .user-dropdown li a,

    .main-nav
    .user-dropdown li span{

        min-height:0;

        padding:
            10px
            16px;

        white-space:nowrap;
    }
}


/* MARZIN: definitive submenu contrast */
.main-nav .user-dropdown,
.main-nav .user-dropdown.show {
    background: #0b2741 !important;
    border-color: rgba(217, 183, 87, .55) !important;
    box-shadow: 0 14px 34px rgba(2, 15, 28, .34) !important;
}

.main-nav .user-dropdown > li > a,
.main-nav .user-dropdown > li > span {
    color: #f4f8fb !important;
    background: transparent !important;
}

.main-nav .user-dropdown > li > a:hover,
.main-nav .user-dropdown > li > a:focus-visible {
    color: #0b2741 !important;
    background: #f2d27a !important;
}

.main-nav .user-dropdown > li + li {
    border-top-color: rgba(255, 255, 255, .10) !important;
}

/* ==========================================================
   MARZIN - SYSTEM ADMIN GROUPED MENU
   Scoped to the system-admin dropdown; other role/user menus
   keep their existing behavior and appearance.
========================================================== */

.main-nav .admin-system-dropdown {
    padding: .45rem !important;
}

.main-nav .admin-system-dropdown > .admin-menu-section {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 11px;
    background: rgba(255, 255, 255, .035);
}

.main-nav .admin-system-dropdown > .admin-menu-section + .admin-menu-section {
    margin-top: .38rem;
    border-top: 1px solid rgba(255, 255, 255, .11) !important;
}

.main-nav .admin-menu-section-toggle {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .75rem;
    border: 0;
    border-radius: 9px;
    color: #f4f8fb;
    background: transparent;
    font: inherit;
    font-size: .86rem;
    font-weight: 850;
    line-height: 1.65;
    text-align: right;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.main-nav .admin-menu-section-toggle:hover,
.main-nav .admin-menu-section-toggle:focus-visible,
.main-nav .admin-menu-section.is-open > .admin-menu-section-toggle {
    color: #0b2741;
    background: #f2d27a;
    outline: none;
}

.main-nav .admin-menu-section-label {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.main-nav .admin-menu-section-icon {
    width: 1.45rem;
    flex: 0 0 1.45rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1;
}

.main-nav .admin-menu-section-chevron {
    flex: 0 0 auto;
    font-size: 1.15rem;
    line-height: 1;
    transition: transform .18s ease;
}

.main-nav .admin-menu-section.is-open .admin-menu-section-chevron {
    transform: rotate(180deg);
}

.main-nav .admin-menu-section-list {
    display: none;
    margin: 0;
    padding: .28rem .3rem .38rem;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(2, 18, 32, .2);
}

.main-nav .admin-menu-section.is-open > .admin-menu-section-list {
    display: block;
}

.main-nav .admin-menu-section-list > li {
    border: 0 !important;
}

.main-nav .admin-menu-section-list > li + li {
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
}

.main-nav .admin-menu-section-list > li > a,
.main-nav .admin-menu-section-list > li > span {
    min-height: 0;
    display: flex;
    align-items: center;
    padding: .58rem .7rem !important;
    border-radius: 8px;
    color: #f4f8fb !important;
    background: transparent !important;
    font-size: .8rem;
    font-weight: 650;
    line-height: 1.7;
    white-space: normal !important;
}

.main-nav .admin-menu-section-list > li > a:hover,
.main-nav .admin-menu-section-list > li > a:focus-visible {
    color: #0b2741 !important;
    background: #f2d27a !important;
}

.main-nav .admin-menu-section-list .admin-menu-disabled {
    justify-content: space-between;
    gap: .5rem;
    color: rgba(244, 248, 251, .6) !important;
    cursor: default;
}

.main-nav .admin-menu-disabled small {
    padding: .1rem .38rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    white-space: nowrap;
}

.main-nav .admin-menu-subheading > span {
    color: #f2d27a !important;
    font-size: .7rem !important;
    font-weight: 850 !important;
}

@media (max-width: 991px) {
    .main-nav .admin-system-dropdown {
        width: 100%;
        max-height: none;
        overflow: visible;
        margin-bottom: .55rem;
    }

    .main-nav .admin-menu-section-toggle {
        min-height: 50px;
        padding-inline: .8rem;
    }
}

@media (min-width: 992px) {
    .main-nav .admin-system-menu {
        position: relative;
    }

    .main-nav .admin-system-dropdown {
        width: min(410px, 86vw);
        min-width: 360px;
        max-height: min(72vh, 650px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}