@import 'https://puc.evaluationkit.com/CanvasScripts/puc.css?v=5';

.ic-app-header__logomark
{
	background-size: 50px 50px;
}

#left-side
{
	background-color: #EDECE7
}

.menu-item__badge
{
	font-weight: bold;
}



/*  The following CSS is used for my dynamic table for the home page in the Template*/
/* Scope to Canvas page content so the UI isn't affected */
.user_content {
  --gap: 24px;     /* space between tiles */
  --cols: 4;       /* columns on large screens */
  --rows: 3;       /* total rows */
  --vpad: 140px;   /* allowance for header/footer so full grid fits */
  /* Tile width constrained by BOTH page width and viewport height */
  --tile-w: min(
    calc((95vw - (var(--cols) - 1) * var(--gap)) / var(--cols)),
    calc((100vh - var(--vpad) - (var(--rows) - 1) * var(--gap)) / var(--rows) / 1.5)
  );
}

/* 95% width, centered */
.user_content table.img-grid {
  display: block;              /* predictable grid sizing */
  width: 95%;
  margin-inline: auto;
  border-collapse: separate;
  border-spacing: 0;           /* grid handles gaps */
  table-layout: fixed;
}
.user_content table.img-grid td { padding: 0; }

/* Grid layout: 4×3 on large screens; variables control sizing */
.user_content table.img-grid tbody {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--tile-w));
  gap: var(--gap);
  justify-content: center;     /* center tracks */
}
.user_content table.img-grid tr { display: contents; }

/* Tiles are 2:3 rectangles (280×420 look) */
.user_content .cell {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: #eaecef;
}
.user_content .cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}

/* Polishing + accessibility */
@media (hover: hover) and (pointer: fine) {
  .user_content .cell:hover img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .user_content .cell img { transition: none; }
}

/* Column count breakpoints (keep things snug as screens narrow) */
@media (max-width: 1100px) { .user_content { --cols: 3; } }
@media (max-width: 820px)  { .user_content { --cols: 2; } }
@media (max-width: 500px)  { .user_content { --cols: 1; } }