/* Nashir Academy LMS v3.2: charts + independent scrolling */

/* Admin independent scrolling */
.na-v31-admin{
  height:calc(100vh - 110px);
  overflow:hidden;
  align-items:start;
}
.na-v31-sidebar{
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.na-v31-main{
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-inline-end:6px;
  scrollbar-width:thin;
}
.na-v31-sidebar::-webkit-scrollbar,
.na-v31-main::-webkit-scrollbar,
.na-v3-admin-sidebar::-webkit-scrollbar,
.na-v3-admin-main::-webkit-scrollbar{
  width:8px;
}
.na-v31-sidebar::-webkit-scrollbar-thumb,
.na-v31-main::-webkit-scrollbar-thumb,
.na-v3-admin-sidebar::-webkit-scrollbar-thumb,
.na-v3-admin-main::-webkit-scrollbar-thumb{
  background:#c9d8eb;
  border-radius:999px;
}

/* Older v3 admin independent scrolling */
.na-v3-admin{
  height:calc(100vh - 110px);
  overflow:hidden;
  align-items:start;
}
.na-v3-admin-sidebar{
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.na-v3-admin-main{
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-inline-end:6px;
}

/* Learner / course content independent scrolling polish */
.na-v3-course-layout{
  align-items:start;
}
.na-v3-course-layout > main{
  max-height:none;
}
.na-v3-panel.sticky{
  max-height:calc(100vh - 125px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.na-v3-course .na-v3-course-container,
.na-v3-dashboard{
  scroll-behavior:smooth;
}

/* v3.2 visual analytics */
.na-v32-analytics{
  display:grid;
  grid-template-columns:1.4fr .8fr .8fr;
  gap:18px;
  margin:0 0 22px;
}
.na-v32-chart-card{
  background:#fff;
  border:1px solid #e4eef8;
  border-radius:26px;
  box-shadow:0 18px 50px rgba(15,38,90,.07);
  padding:22px;
  min-height:260px;
}
.na-v32-chart-card.wide{
  min-width:0;
}
.na-v32-chart-head h2{
  margin:0 0 8px;
  color:#07124a;
  font-size:22px;
}
.na-v32-chart-head p{
  margin:0 0 18px;
  color:#64748b;
  line-height:1.7;
}
.na-v32-bars{
  display:flex;
  flex-direction:column;
  gap:13px;
}
.na-v32-bar-row{
  display:grid;
  grid-template-columns:110px 1fr 52px;
  gap:12px;
  align-items:center;
}
.na-v32-bar-row .label{
  color:#334155;
  font-weight:800;
  font-size:13px;
}
.na-v32-bar-row .track{
  height:14px;
  background:#eef5ff;
  border-radius:999px;
  overflow:hidden;
  border:1px solid #e2edf7;
}
.na-v32-bar-row .track i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(135deg,#2600ce,#00d5fc);
}
.na-v32-bar-row strong{
  color:#07124a;
  font-size:16px;
  text-align:left;
}
.na-v32-donut,
.na-v32-gauge{
  width:152px;
  height:152px;
  margin:8px auto 18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.na-v32-donut{
  background:
    conic-gradient(
      #16a34a 0 calc(var(--approved)*1%),
      #0ea5e9 calc(var(--approved)*1%) calc((var(--approved) + var(--review))*1%),
      #f59e0b calc((var(--approved) + var(--review))*1%) calc((var(--approved) + var(--review) + var(--revision))*1%),
      #2600ce calc((var(--approved) + var(--review) + var(--revision))*1%) 100%
    );
}
.na-v32-gauge{
  background:
    conic-gradient(#2600ce 0 calc(var(--value)*1%), #e8f2fb calc(var(--value)*1%) 100%);
}
.na-v32-donut::after,
.na-v32-gauge::after{
  content:"";
  position:absolute;
  inset:18px;
  background:#fff;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px #e4eef8;
}
.na-v32-donut div,
.na-v32-gauge div{
  position:relative;
  z-index:2;
  text-align:center;
}
.na-v32-donut strong,
.na-v32-gauge strong{
  display:block;
  color:#07124a;
  font-size:28px;
  line-height:1;
}
.na-v32-donut span,
.na-v32-gauge span{
  display:block;
  color:#64748b;
  margin-top:6px;
  font-size:12px;
}
.na-v32-legend{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.na-v32-legend span{
  color:#334155;
  font-size:12px;
  background:#f8fbff;
  border:1px solid #e2edf7;
  border-radius:12px;
  padding:8px;
}
.na-v32-legend i{
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:50%;
  margin-inline-end:5px;
  background:#2600ce;
}
.na-v32-legend span:nth-child(1) i{background:#16a34a}
.na-v32-legend span:nth-child(2) i{background:#0ea5e9}
.na-v32-legend span:nth-child(3) i{background:#f59e0b}
.na-v32-legend span:nth-child(4) i{background:#2600ce}
.na-v32-note{
  color:#64748b;
  background:#f8fbff;
  border:1px solid #e2edf7;
  border-radius:14px;
  padding:12px;
  line-height:1.7;
  text-align:center;
}
.na-v32-stat-cards article{
  position:relative;
  overflow:hidden;
}
.na-v32-stat-cards article::after{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(38,0,206,.10),rgba(0,213,252,.14));
  left:-35px;
  top:-35px;
}

@media(max-width:1100px){
  .na-v32-analytics{
    grid-template-columns:1fr;
  }
  .na-v31-admin,
  .na-v3-admin{
    height:auto;
    overflow:visible;
  }
  .na-v31-sidebar,
  .na-v31-main,
  .na-v3-admin-sidebar,
  .na-v3-admin-main{
    max-height:none;
    overflow:visible;
  }
}
@media(max-width:700px){
  .na-v32-bar-row{
    grid-template-columns:85px 1fr 42px;
  }
  .na-v32-legend{
    grid-template-columns:1fr;
  }
}