/* Styles for the vertical sidebar - mapping read.cv styles */

/* --- Desktop Styles (md breakpoint and up) --- */
@media (min-width: 768px) {
  .cvfront .cvfront-sidebar {
    /* Corresponds to #Sidebar_compressedSidebar__bpgcD */
    width: var(--compressed-sidebar-width, 60px);
    background-color: var(--backgroundColor);
    box-shadow: 1px 0 0 0 var(--transparentBorder);
    height: 100vh;
    /* display: flex; -> Handled by d-md-flex */
    /* flex-direction: column; -> Handled by flex-column */
    position: sticky;
    top: 0;
    flex-shrink: 0;
    align-items: center;
    z-index: 200;
    padding: 24px 0;
  }

  .cvfront .sidebar-nav-buttons {
    /* Corresponds to .Sidebar_compressedSidebarNavButtons__ggJwb */
    margin: auto 0; /* Center vertically */
    /* Other styles remain */
  }

  .cvfront .sidebar-profile-menu {
     margin-top: auto; /* Push to bottom */
     /* Other styles remain */
  }
}


/* --- Mobile Styles (below md breakpoint) --- */
/* REMOVED - Mobile styles are now in mobile_menu.css */
/*
@media (max-width: 767.98px) {
  .cvfront .cvfront-sidebar.collapse {
    // ... removed styles ...
  }
   // ... removed styles ...
}
*/


/* Common styles (apply to both desktop and mobile unless overridden) */
.cvfront .cvfront-sidebar {
  transition: none; /* Disable default Bootstrap collapse transition if needed */
}

.cvfront .sidebar-nav-buttons {
  /* Corresponds to .Sidebar_compressedSidebarNavButtons__ggJwb */
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  /* margin: auto 0; -> Desktop only */
  /* padding: 0; -> Handled by list-reset */
  /* list-style-type: none; -> Handled by list-reset */
}

.cvfront .sidebar-nav-buttons li {
  /* width: 28px; -> Desktop only */
  /* height: 28px; -> Desktop only */
  position: relative;
  /* margin: 0; -> Handled by list-reset */
  /* padding: 0; -> Handled by list-reset */
  /* list-style: none; -> Handled by list-reset */
}

.cvfront .sidebar-nav-buttons li a {
  display: flex; /* Use flex for centering icon */
  /* justify-content: center; -> Desktop only */
  align-items: center;
  /* width: 100%; -> Desktop only */
  /* height: 100%; -> Desktop only */
}

.cvfront .sidebar-nav-buttons li a svg,
.cvfront .sidebar-nav-buttons li a i { /* Target Font Awesome icons too */
  display: block;
  width: 24px; /* Adjust icon size as needed */
  height: 24px;
  fill: var(--grey3); /* Default icon color */
  color: var(--grey3); /* Color for Font Awesome */
  flex-shrink: 0; /* Prevent icon shrinking */
}

.cvfront .sidebar-nav-buttons li a:active {
  opacity: 0.7;
}

/* Style for the profile menu area at the bottom */
.cvfront .sidebar-profile-menu {
  /* Corresponds to .Sidebar_profileMenu__lXxwE */
  /* width: 32px; -> Desktop only */
  height: auto;
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  /* margin-top: auto; -> Desktop only */
}

.cvfront .sidebar-profile-menu a,
.cvfront .sidebar-profile-menu button {
  /* width: 32px; -> Desktop only */
  /* height: 32px; -> Desktop only */
}

.cvfront .sidebar-posts-link a svg {
  /* Specific adjustments if needed */
}

.cvfront .sidebar-profile-photo {
  /* Corresponds to .ProfilePhoto_profilePhoto__WTkVX[data-size=x-small] */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--backgroundColor);
  position: relative;
  /* Add default icon/image styles */
}

.cvfront .sidebar-profile-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50%;
}

/* TODO: Add styles for tooltips (.Tooltip_tooltipWrap__h6lT8) */
/* TODO: Add styles for popovers (.Popover_popoverWrap__WBCCw) */
/* TODO: Add styles for floating action buttons (#Sidebar_floatingButtons__zSFHY) */
/* TODO: Print styles for sidebar */
@media print {
  .cvfront #cvfront-sidebar {
    display: none;
  }
}