/* ==========================================================================
   AUTO PROD BOT — Utilities
   Classes utilitárias para eliminar estilos inline
   ========================================================================== */

/* ==========================================================================
   1. DISPLAY
   ========================================================================== */
.hidden       { display: none !important; }
.visible      { display: block !important; }
.d-inline     { display: inline !important; }

/* ==========================================================================
   2. IMAGE SIZING
   ========================================================================== */
.img-thumb {
  max-width: 150px;
  max-height: 150px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
}

.img-thumb-sm {
  max-width: 80px;
  max-height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.img-qr {
  width: 280px;
  height: 280px;
  max-width: 100%;
  image-rendering: pixelated;
}

.img-product {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   3. TEXT SIZING (replacing inline font-size)
   ========================================================================== */
.text-xs     { font-size: var(--text-xs) !important; }
.text-sm     { font-size: var(--text-sm) !important; }
.text-base   { font-size: var(--text-base) !important; }
.text-md     { font-size: var(--text-md) !important; }
.text-lg     { font-size: var(--text-lg) !important; }
.text-xl     { font-size: var(--text-xl) !important; }
.text-2xl    { font-size: var(--text-2xl) !important; }
.text-3xl    { font-size: var(--text-3xl) !important; }

/* ==========================================================================
   4. FONT WEIGHT
   ========================================================================== */
.font-normal   { font-weight: var(--font-normal) !important; }
.font-medium   { font-weight: var(--font-medium) !important; }
.font-semibold { font-weight: var(--font-semibold) !important; }
.font-bold     { font-weight: var(--font-bold) !important; }

/* ==========================================================================
   5. FONT FAMILY
   ========================================================================== */
.font-mono { font-family: var(--font-mono) !important; }
.font-sans { font-family: var(--font-sans) !important; }

/* ==========================================================================
   6. TEXT COLOR
   ========================================================================== */
.text-primary   { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-muted     { color: var(--color-text-muted) !important; }
.text-success   { color: var(--color-success) !important; }
.text-warning   { color: var(--color-warning) !important; }
.text-danger    { color: var(--color-danger) !important; }
.text-info      { color: var(--color-info) !important; }
.text-whatsapp  { color: var(--color-whatsapp) !important; }

/* ==========================================================================
   7. BACKGROUND COLOR
   ========================================================================== */
.bg-primary   { background-color: var(--color-primary) !important; }
.bg-success   { background-color: var(--color-success) !important; }
.bg-warning   { background-color: var(--color-warning) !important; }
.bg-danger    { background-color: var(--color-danger) !important; }
.bg-info      { background-color: var(--color-info) !important; }

/* ==========================================================================
   8. WORD BREAK
   ========================================================================== */
.break-all  { word-break: break-all; }
.break-word { overflow-wrap: break-word; }
.truncate   {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   9. CURSOR
   ========================================================================== */
.cursor-pointer { cursor: pointer; }

/* ==========================================================================
   10. WIDTH CONSTRAINTS
   ========================================================================== */
.max-w-140 { max-width: 140px; }
.max-w-150 { max-width: 150px; }
.max-w-250 { max-width: 250px; }
.max-w-420 { max-width: 420px; }
.max-w-500 { max-width: 500px; }

/* ==========================================================================
   11. PROGRESS BAR HEIGHT
   ========================================================================== */
.progress-thin    { height: 4px; }
.progress-default { height: 6px; }
.progress-thick   { height: 25px; line-height: 25px; font-size: var(--text-sm); }

/* ==========================================================================
   12. TIMER / COUNTER DISPLAY
   ========================================================================== */
.display-timer {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

/* ==========================================================================
   13. SWITCH TOGGLE SIZE
   ========================================================================== */
.switch-sm {
  width: 3em;
  height: 1.5em;
}

/* ==========================================================================
   14. CODE BLOCK
   ========================================================================== */
.code-inline {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--color-bg-hover);
  padding: 2px var(--space-1);
  border-radius: 3px;
}

/* ==========================================================================
   15. GRADIENT TEXT (dark theme)
   ========================================================================== */
.text-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-whatsapp {
  background: linear-gradient(135deg, var(--color-whatsapp), #128C7E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}