/**
 * Global CSS Variables for Reusables Status Colors
 * 
 * Usage in PHP:
 *   - Import config: $colors = config(\Config\ReusablesColors::class)->status;
 *   - Use in views: style="background: <?= esc($colors['available']) ?>"
 * 
 * Usage in CSS/Tailwind:
 *   - Use CSS variables: background-color: var(--reusables-available);
 *   - Tailwind classes: bg-reusables-available (if configured in tailwind.config.js)
 * 
 * To change colors: update app/Config/ReusablesColors.php
 */

:root {
  /* Reusables Status Colors */
  --reusables-available: #00FF08;    /* Bright Green - items in stock */
  --reusables-distributed: #FFD900;   /* Yellow - items on terrain */
  --reusables-in-used: #FFC0CB;       /* Light Pink - items in active use */
  --reusables-dirty: #fc5353;         /* Red - items needing cleaning */
  --reusables-cleaning: #5457f9;      /* Blue - items being cleaned */
}

/* Status Color Utility Classes */
.status-color-available {
  background-color: var(--reusables-available);
  color: #000;
}

.status-color-distributed {
  background-color: var(--reusables-distributed);
  color: #000;
}

.status-color-in-used {
  background-color: var(--reusables-in-used);
  color: #000;
}

.status-color-dirty {
  background-color: var(--reusables-dirty);
  color: #fff;
}

.status-color-cleaning {
  background-color: var(--reusables-cleaning);
  color: #fff;
}

/* Status Color Indicator Dots */
.status-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.status-indicator-available {
  background-color: var(--reusables-available);
}

.status-indicator-distributed {
  background-color: var(--reusables-distributed);
}

.status-indicator-in-used {
  background-color: var(--reusables-in-used);
}

.status-indicator-dirty {
  background-color: var(--reusables-dirty);
}

.status-indicator-cleaning {
  background-color: var(--reusables-cleaning);
}