/***************************  Swtich and sidebar design  *************/



.theme-switch {
    position: absolute;
    top: 5px;
    right:0;
    display: flex;
    align-items: center;
    margin: 20px 0;
  }
  
  .theme-toggle-input {
    display: none;
  }
  
  .theme-toggle-label {
    display: inline-block;
    width: 60px;
    height: 34px;
    background-color: #ccc;
    border-radius: 34px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .theme-toggle-inner {
    display: block;
    width: 26px;
    height: 26px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: transform 0.3s;
  }
  
  .theme-toggle-input:checked + .theme-toggle-label {
    background-color: #2487a7;
  }
  
  .theme-toggle-input:checked + .theme-toggle-label .theme-toggle-inner {
    transform: translateX(26px);
  }
  
  .theme-label {
    margin-left: 10px;
    font-size: 16px;
    font-weight: 500;
  }
  
  /* Optional: Add icons for light/dark mode */
  .theme-toggle-label::before,
  .theme-toggle-label::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
  }
  
  .theme-toggle-label::before {
    left: 5px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>');
  }
  
  .theme-toggle-label::after {
    right: 5px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>');
  }


  .theme-switch {
    display: flex;
    align-items: center;
    margin-top: 2rem;
}

.theme-switch label {
    margin-right: 10px;
    color: var(--bg-color);
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-color);
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--primary-color);
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--secondary-color);
}

input:checked + .slider:before {
    transform: translateX(26px);
}
/***************************** Switch *******************/