* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  font-family: sans-serif;
}

header {
  width: 100%;
  padding: 1rem;
  background-color: #f0f0f0;
}

#searchBar {
  position: absolute;
  width: 47%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: 2;
}

main {
  display: flex;
  height: calc(100vh - 70px);
  overflow: hidden;
}

#mainContent {
  flex: 1 1 auto;
  padding: 1rem;
  min-width: 0; /* important to allow shrinking */
}

#sidebar {
  max-height: 100vh;      /* Restrict sidebar height to viewport height */
  overflow-y: auto;       /* Enable vertical scroll if content is taller */
  position: fixed;        /* Optional: keep sidebar fixed on screen */
  top: 0px;
  right: 0;               /* Or left: 0, depending on layout */
  width: 50%;           /* Set sidebar width */
  background: white;      /* So it visually covers canvas */
  box-shadow: -2px 0 5px rgba(0,0,0,0.1); /* Optional visual separation */
  z-index: 10;            /* Make sure sidebar is above canvas */
}
table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #e0e0e0;
}

th, td {
  padding: 0.5rem;
  /* border-bottom: 1px solid #ddd; */
  text-align: left;
}

tr:hover {
  background-color: #f5f5f5;
}

#location-cell {
  /* background-color: #4d4d4d; */
  color: white;
  font-weight: bolder;
  border-bottom: 0px;
}

#shelfId-cell {
  color: white;
  font-weight: bolder;
  cursor: pointer;
  border-top: 1px solid #ffffff;
  animation-duration: 100ms;
}

#shelfId-cell:hover {
  color: white;
  filter: brightness(110%);
  animation-duration: 100ms;
}

#name-cell {
  font-weight: bold;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #111;
}

/* Icons */
.image-cell {
            background-image:
url('https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
  }

#article-number-cell {
  cursor: pointer;
}

#article-number-cell:hover {
  font-weight: bold;
}

#article-number-cell:active {
  cursor: copy;
}

#name-cell {
  cursor: pointer;
}