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

:root{
    --topbar-h: 70px;
    --sidebar-w: 260px;
}

body{
    margin:0;
    padding:0;
    background:#f8fafc;
    font-family:'Segoe UI', Arial, sans-serif;
    color:#222;
    overflow-x:hidden;
}

a{
    text-decoration:none;
}

/* ===============================
   TOPBAR
=============================== */

.topbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1100;
    background:#fff;
    padding:10px 12px;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
    overflow-x:auto;
}

.topbar-links{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
}

/* ===============================
   LAYOUT
=============================== */

.layout{
    display:flex;
    margin-top:var(--topbar-h);
    min-height:calc(100vh - var(--topbar-h));
}

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

.sidebar{
    width:var(--sidebar-w);
    min-width:var(--sidebar-w);
    flex:0 0 var(--sidebar-w);
    background:#1e293b;
    color:#fff;
    padding:10px 0;
    overflow-y:auto;
    height:calc(100vh - var(--topbar-h));
    position:sticky;
    top:var(--topbar-h);
    transition:left 0.3s ease, transform 0.3s ease;
    z-index:1050;
}

.sidebar h5{
    padding:10px 15px;
    margin:0;
}

.sidebar a{
    display:block;
    color:#fff;
    text-decoration:none;
    padding:10px 15px;
    border-radius:6px;
    margin:2px 8px;
    transition:0.2s;
}

.sidebar a:hover{
    background:#334155;
}

.sidebar a.active{
    background:#0ea5e9;
}

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

.content{
    flex:1;
    width:auto;
    margin-left:0;
    padding:20px;
    min-width:0;
}

.content-box{
    background:#fff;
    padding:25px;
    border-radius:12px;
    box-shadow:0 6px 20px rgba(0,0,0,0.05);
}

.content-box h1{
    font-size:30px;
    margin-bottom:10px;
}

.content-box h2{
    margin-top:25px;
}

.content-box h3{
    margin-top:20px;
}

.content-box h4{
    margin-top:16px;
}

.content-box p,
.content-box li{
    line-height:1.7;
}

/* ===============================
   LEARNING NAV
=============================== */

.learning-bar{
    margin:20px 0;
    text-align:center;
}

.learn-btn{
    display:inline-block;
    padding:10px 20px;
    margin:5px;
    background:#233f78;
    color:white;
    border-radius:25px;
    text-decoration:none;
    font-weight:600;
    transition:0.3s;
}

.learn-btn:hover{
    background:#0ea5e9;
    color:white;
}

.learn-active{
    background:#28a745;
}

/* ===============================
   PROGRESS
=============================== */

.lesson-progress{
    margin:20px 0;
    background:white;
    padding:15px;
    border-radius:10px;
    box-shadow:0 4px 10px rgba(0,0,0,0.05);
}

.progress-title{
    font-weight:700;
    margin-bottom:8px;
}

.progress{
    height:10px;
    border-radius:10px;
}

/* ===============================
   QUIZ
=============================== */

.quiz-box{
    background:white;
    padding:15px;
    border-radius:10px;
    margin-bottom:10px;
}

/* ===============================
   NAV BUTTONS
=============================== */

.nav-btns{
    margin-top:30px;
    display:flex;
    justify-content:space-between;
    gap:10px;
}

/* ===============================
   RIGHT PANEL
=============================== */

.tutorial-right{
    width:220px;
    min-width:220px;
    background:#fff;
    padding:15px;
    border-left:1px solid #ddd;
    border-radius:6px;
}

.tutorial-right a{
    display:block;
    margin:8px 0;
    color:#04AA6D;
}

/* ===============================
   GENERAL BOXES
=============================== */

.tutorial-container{
    max-width:1400px;
    margin:auto;
    padding:10px;
}

.breadcrumb{
    font-size:14px;
    margin:10px 0;
}

.breadcrumb a{
    color:#04AA6D;
}

.tutorial-layout{
    display:flex;
    align-items:flex-start;
    gap:20px;
}

.tutorial-content{
    flex:1;
    background:#fff;
    padding:25px;
    border-radius:6px;
    min-width:0;
}

.tutorial-content h1{
    font-size:30px;
    margin-bottom:10px;
}

.tutorial-content h2{
    margin-top:25px;
}

.tutorial-content p{
    line-height:1.7;
}

.info-box{
    background:#d9eee1;
    padding:15px;
    border-left:5px solid #04AA6D;
    margin:20px 0;
}

.example-box{
    background:#fff4a3;
    padding:15px;
    margin:20px 0;
}

.note-box{
    background:#ffc0c7;
    padding:15px;
    margin:20px 0;
}

.summary-box{
    background:#e0f2fe;
    padding:15px;
    margin:20px 0;
}

.flow-box{
    background:#e0f2fe;
    padding:12px;
    border-left:5px solid #0ea5e9;
    margin:15px 0;
}

/* ===============================
   CODE BOX
=============================== */

.code-box{
    background:#282a35;
    color:#fff;
    padding:15px;
    border-radius:5px;
    font-family:monospace;
    margin:20px 0;
}

/* ===============================
   CTA BOX
=============================== */

.cta-box{
    background:#282a35;
    color:white;
    padding:20px;
    margin-top:30px;
    text-align:center;
    border-radius:6px;
}

.cta-box a{
    display:inline-block;
    margin-top:10px;
    background:#04AA6D;
    padding:10px 20px;
    color:white;
}

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

.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.4);
    display:none;
    z-index:1040;
}

.overlay.active{
    display:block;
}

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

@media (max-width: 768px){

    .topbar{
        flex-wrap:wrap;
        overflow:visible;
    }

    .layout{
        display:block;
        margin-top:120px;
    }

    .sidebar{
        position:fixed;
        top:120px;
        left:-260px;
        width:var(--sidebar-w);
        height:calc(100vh - 120px);
        z-index:1050;
        background:#1e293b;
    }

    .sidebar.active{
        left:0;
    }

    .content{
        width:100%;
        margin-left:0;
        padding:15px;
    }

    .content-box{
        padding:16px;
    }

    .tutorial-layout{
        flex-direction:column;
    }

    .tutorial-right{
        width:100%;
        min-width:100%;
    }

    .nav-btns,
    .tutorial-nav{
        flex-direction:column;
    }

    .nav-btns a,
    .tutorial-nav a{
        width:100%;
        text-align:center;
    }

    .overlay.active{
        display:block;
    }
}

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

@media (min-width: 769px){
    .topbar{
        flex-wrap:nowrap;
    }

    .sidebar{
        top:var(--topbar-h);
        height:calc(100vh - var(--topbar-h));
    }
}