/*-------------------------------
left section
-------------------------------*/

.sidebar {
    width: 22%;
    max-width: 250px;
    min-width: 180px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background: var(--bg-pmb);
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    z-index: 999;
    text-align: center;
    transition: transform 0.3s ease;
}

   /* Sidebar cover for header and footer */
.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}


    .ls-divider {
    width: 100%;
    height: 1px;
    opacity: .3;
     place-items:center;
}

/*-------------------------------
 Sidebar header
-------------------------------*/

     .sidebar-header img {
      border-radius: 50%;
      position: relative;
     
    }

.sidebar-header {
    text-align: center;
      padding-top: 15px;
      flex-shrink: 0;
      position: relative; 
      -webkit-box-shadow: 0 3px 8px 0 rgba(15, 15, 20, .2);
      box-shadow: 0 3px 8px 0 rgba(15, 15, 20, .2);
      flex-shrink: 0;
      position: relative
    }

.sidebar-header .social-icons {
      display: flex;
      justify-content: center; /* center horizontally */
      align-items: center;
      list-style: none;
      padding: 0;
      margin: 0;
    }

.sidebar-header .social-icons span {
      color: var(--primary);
      padding-left: 5px;
    }


    /*-------------------------------
 Sidebar footer
-------------------------------*/

.sidebar-footer{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center; /* center horizontally */
    flex-shrink: 0;
    position: relative; 
    padding: 10px;
    }

.sidebar-footer .social-icons {
    display: flex;
    align-items: center; /* vertical center */
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
      }

.sidebar-footer .social-icons li {
    display: flex;
    align-items: center; /* keep icon + text aligned */
    }

.sidebar-footer .social-icons a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.sidebar-footer .social-icons ion-icon {
  font-size: 1.5rem;
  vertical-align: middle;
}

.sidebar-footer .social-icons a:hover {
  color: var(--primary);
}

.sidebar-footer-sm .social-icons a:active {
  color: var(--primary);
}



    /* Hide full sidebar for mobile & tablets 
@media (max-width: 1024px) {
  aside.sidebar {
    display: none !important;
    visibility: hidden;
    opacity: 0;
  }
}*/




/*-------------------------------
Sidebar scrollable content-middle part
-------------------------------*/

.sidebar-scroll {
      overflow-y: auto;
      padding: 5px;
      margin: 5px;
      flex-grow: 1;
      text-align: center;
    }

    
    
/*-------------------------------
Sidebar Skill checkbox
-------------------------------*/
/* Lish for skills in left side bar */

.knowledge-list {
  list-style: none;        /* remove default bullets */
  padding-left: 0;
  margin: 0;
}

.knowledge-list li {
  position: relative;
  padding-left: 0px;      /* space for the icon */
  margin-bottom: 20px;
  font-size: var(--font-small);
  color: var(--text-light);    /* adjust for your theme */
}

.knowledge-list li::before {
  content: "\2713";           /* Unicode checkmark ✓ */
  color: var(--primary);          /* green tick */
  font-weight: bold;
  flex-shrink: 0;             /* prevent shrinking */
  padding-right: 5px;
}

/*-------------------------------
Sidebar Circular Progress Bars-Languages
-------------------------------*/

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr); /* always 2 in a row */
  justify-items: center; /* center each progress circle */
   align-items: start;
}


/* Component wrapper */
.c-progress{
  --value: 0;
  width: var(--size);
  aspect-ratio: 1 / 1;
  display:grid;
  place-items:center;
  position:relative;
}

/* number + % wrapper */
.c-progress .c-progress-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 1.1rem;
}

.c-progress .c-progress-value span {
  font-size: 0.8rem;
}

.c-progress__label{
  text-align:center; 
  margin-top:.1rem; 
  font-weight:200;
  font-size: 12px;
}

.c-progress svg{
  width:100%; height:100%;
  transform: rotate(-90deg); display:block;
}
.c-progress circle{
  fill:none; 
  stroke-linecap:round;
}

.c-track{ stroke: var(--track); stroke-width: var(--stroke); }
.c-bar{
  stroke: var(--primary); stroke-width: var(--stroke);
  stroke-dasharray: 0 999;
  transition: stroke-dasharray var(--speed) ease;
}

.c-progress:hover .c-bar{
  filter: drop-shadow(0 2px 6px rgba(35,165,146,.35));
}

.sr-only{
  position:absolute !important; 
  width:1px; 
  height:1px; 
  padding:0; margin:-1px;
  overflow:hidden; 
  clip:rect(0,0,0,0); 
  white-space:nowrap; border:0;
}


/*-------------------------------
Sidebar Horizontal Progress Bars-Skills%
-------------------------------*/


.skill {
  margin-bottom: 20px;
}

.skill-header {
  display: flex;
  justify-content: space-between; /* pushes label left, % right */
  font-size: 12px;
  margin-bottom: 6px;
}

.skill-percent {
  font-size: 0.85rem;
  font-weight: bold;
}

.progress {
  position: relative;
  border-radius: 8px;
  height: 8px;
  width: 100%;
  overflow: hidden;
  background: var(--white) /* a subtle bg track */
}

.progress-bar {
  height: 8px;
  width: 0; /* animated via JS */
  border-radius: 8px;
  background: var(--primary); /* accent color */
  transition: width 1s ease;
}

/* Add % text inside the bar */
.progress-bar::after {
  color: #3b82f6;
}