/* ==========================================================================
   Whimsy Design System – Utility Helpers

   Small, single-purpose classes for common patterns found across pages.
   These replace repeated inline styles and page-local <style> blocks.

   Uses tokens from tokens.css.
   ========================================================================== */

/* ----- Material Icon Sizes ----------------------------------------------- */

.w-icon-xs  { font-size: .75rem; }
.w-icon-sm  { font-size: .85rem; }
.w-icon-md  { font-size: .95rem; }
.w-icon-lg  { font-size: 1.1rem; }
.w-icon-xl  { font-size: 2rem; }

/* ----- Max-Width Helpers ------------------------------------------------- */

.w-max-w-xs  { max-width: 80px; }
.w-max-w-sm  { max-width: 360px; }
.w-max-w-md  { max-width: 420px; }

/* ----- Text Truncation --------------------------------------------------- */

/*
  .w-truncate-block
  Inline styles replaced: display:block; max-width:...; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
  Combine with a max-width utility or inline max-width for context-specific widths.
*/
.w-truncate-block {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----- Avatar Thumbnail (Radzen grid cells) ------------------------------ */

/*
  .w-avatar-thumb
  Consistent small avatar thumbnail for grid/table cells.
  Replaces repeated inline: width:60px; height:60px; object-fit:cover; border-radius:4px;
*/
.w-avatar-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

/* ----- Cover Badge ------------------------------------------------------- */

/*
  .w-cover-badge
  Small blue badge indicating cover image status.
*/
.w-cover-badge {
  background: rgba(13, 110, 253, .7);
  font-size: .65rem;
}

/* ----- Admin Card Ad Image ----------------------------------------------- */

/*
  .w-ad-card-image
  Image area inside admin cards for ads with contain-fit.
*/
.w-ad-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: rgba(0, 0, 0, .3);
  display: block;
  padding: .5rem;
}

.w-ad-card-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(0, 0, 0, .3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.w-ad-card-body {
  padding: .5rem .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.w-ad-card-edit-body {
  padding: .5rem .75rem;
  flex-direction: column;
  align-items: start;
  display: flex;
}

.w-ad-card-name {
  flex: 1;
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----- Subtle Text Variants ---------------------------------------------- */

.w-text-subtle {
  color: rgba(255, 255, 255, .35);
}

.w-text-hint {
  color: rgba(255, 255, 255, .4);
}

/* ----- Progress Bar (thin) ----------------------------------------------- */

.w-progress-thin {
  height: 6px;
}

/* ----- Admin List Thumb Contain ------------------------------------------ */

.w-admin-list-thumb-contain {
  object-fit: contain;
}

/* ----- Vote Button (Manager Todos) --------------------------------------- */

.w-vote-btn {
  font-size: 1.1rem;
  line-height: 1;
}

.w-vote-count {
  min-width: 16px;
}

/* ----- Image Dimensions Text --------------------------------------------- */

.w-img-dimensions {
  font-size: .7rem;
  color: rgba(255, 255, 255, .35);
}