/* ==========================================
   TRAINING MODULE LAYOUT
========================================== */

.training-shell{

    display:flex;

    gap:0;

    min-height:calc(100vh - 70px);

    background:#f8fafc;
}

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

.training-sidebar{

    width:280px;

    background:#ffffff;

    border-right:1px solid #e6eef4;

    position:sticky;

    top:70px;

    height:calc(100vh - 70px);

    overflow-y:auto;

    flex-shrink:0;

    padding:18px 14px;

    scrollbar-width:thin;
}

.training-sidebar-inner{

    display:flex;

    flex-direction:column;

    gap:8px;
}

/* ==========================================
   SIDEBAR LINKS
========================================== */

.training-link{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 14px;

    border-radius:14px;

    text-decoration:none;

    color:#0b2b40;

    font-size:14px;

    font-weight:500;

    transition:all .25s ease;

    cursor:pointer;
}

.training-link i{

    width:18px;

    text-align:center;

    font-size:15px;

    flex-shrink:0;
}

/* hover */

.training-link:hover{

    background:#f3f8ff;

    transform:translateX(3px);
}

/* active */

.training-link.active{

    background:#136bb2;

    color:#ffffff;

    box-shadow:0 8px 20px rgba(19,107,178,.18);
}

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

.training-main{

    flex:1;

    min-width:0;

    padding:1.2rem;
}

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

.training-content-wrapper{

    background:#ffffff;

    border-radius:16px;

    padding:24px;

    min-height:auto;

    box-shadow:0 8px 25px rgba(0,0,0,.04);
}

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

.training-header{

    margin-bottom:20px;
}

.training-header h2{

    margin:0;

    font-size:24px;

    color:#0b2b40;
}

.training-header p{

    margin-top:6px;

    color:#64748b;

    font-size:14px;
}

/* ==========================================
   MOBILE MENU TOGGLE
========================================== */

.training-menu-toggle{

    display:none;
}
#back-btn{
    display: none;
}


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

@media(max-width:768px){

    .training-shell{

        flex-direction:column;
    }

    /* ==========================================
       MOBILE TOP SLIDER MENU
    ========================================== */

    .training-sidebar{

        width:100%;

        height:auto;

        position:sticky;

        top:64px;

        z-index:95;

        display:flex;

        flex-direction:row;

        align-items:center;

        overflow-x:auto;

        overflow-y:hidden;

        white-space:nowrap;

        padding:10px 12px;

        gap:10px;

        border-right:none;

        border-bottom:1px solid #e6eef4;

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

        backdrop-filter:blur(12px);

        scrollbar-width:none;

        scroll-behavior:smooth;

        scroll-snap-type:x proximity;

        -webkit-overflow-scrolling:touch;
    }

    .training-sidebar::-webkit-scrollbar{

        display:none;
    }

    .training-sidebar-inner{

        display:flex;

        flex-direction:row;

        gap:10px;
    }

    /* ==========================================
       MOBILE MENU ITEMS
    ========================================== */

    .training-link{

        flex:0 0 auto;

        justify-content:center;

        align-items:center;

        min-width:56px;

        height:56px;

        padding:0 14px;

        border-radius:16px;

        background:#f5f8fc;

        scroll-snap-align:start;
    }

    /* icon */

    .training-link i{

        width:auto;

        font-size:18px;
    }

    /* hide text in mobile */

    /* .training-link span{

        display:none;
    } */

    /* hover */

    .training-link:hover{

        background:#eef5ff;

        transform:scale(1.05);
    }

    /* active */

    .training-link.active{

        background:#136bb2;

        color:#ffffff;
    }

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

    .training-main{

        width:100%;

        padding:1rem;
    }

    .training-content-wrapper{

        padding:18px;

        border-radius:14px;
    }
}

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

@media(max-width:480px){

    .training-sidebar{

        top:60px;

        padding:8px 10px;
    }

    .training-link{

        min-width:52px;

        height:52px;

        border-radius:14px;
    }

    .training-link i{

        font-size:16px;
    }

    .training-main{

        padding:.8rem;
    }

    .training-content-wrapper{

        padding:14px;
    }
}
/* ==========================================
   COMPACT MODERN TRAINING CARD
========================================== */

.training-card {

    background: #ffffff;

    border: 1px solid #e8eef5;

    border-radius: 16px;

    padding: 16px;

    cursor: pointer;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;

    box-shadow:
        0 3px 10px rgba(0,0,0,0.04);

    position: relative;

    overflow: hidden;
}

/* top accent */

.training-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    height: 3px;

    background: linear-gradient(
        90deg,
        #136bb2,
        #57c4ef
    );

    opacity: 0;

    transition: 0.22s ease;
}

/* hover */

.training-card:hover {

    transform: translateY(-3px);

    border-color: #d6e7f7;

    box-shadow:
        0 10px 20px rgba(19,107,178,0.08);
}

.training-card:hover::before {

    opacity: 1;
}

/* icon */

.training-card .card-icon {

    width: 48px;

    height: 48px;

    border-radius: 14px;

    background: #eef6ff;

    color: #136bb2;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    margin-bottom: 12px;

    transition: 0.22s ease;
}

.training-card:hover .card-icon {

    background: #136bb2;

    color: #ffffff;
}

/* title */

.training-card h3 {

    margin: 0 0 6px;

    font-size: 15px;

    font-weight: 700;

    color: #0b2b40;

    line-height: 1.4;
}

/* text */

.training-card p {

    margin: 0;

    color: #607284;

    font-size: 12px;

    line-height: 1.6;
}

/* click feel */

.training-card:active {

    transform: scale(0.98);
}

/* ==========================================
   BACK BUTTON
========================================== */
#back-btn{

    display:none;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border:none;

    border-radius:12px;

    background:linear-gradient(135deg,#136bb2,#1b82d1);

    color:#ffffff;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;

    box-shadow:
        0 6px 18px rgba(19,107,178,.18);

    margin:1rem 0;
}

/* icon support */

#back-btn i{

    font-size:13px;
}

/* hover */

#back-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 22px rgba(19,107,178,.24);

    background:linear-gradient(135deg,#0f5f9f,#136bb2);
}

/* click */

#back-btn:active{

    transform:scale(.97);
}

/* focus */

#back-btn:focus{

    outline:none;

    box-shadow:
        0 0 0 4px rgba(19,107,178,.18);
}

/* mobile */

@media(max-width:768px){

    #back-btn{

        width:100%;

        justify-content:center;

        padding:12px 16px;

        border-radius:14px;
    }
}