/* Status Icon System for ERM Rent a Car
 * This CSS implements a layered icon system where:
 * - Inner color represents operational phase
 * - Border/frame represents payment status
 */

.status-icon {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
}

/* Inner colors - Operational status */
.status-inner-waiting {
  background-color: #f5f5f5; /* Light gray - waiting */
}

.status-inner-active {
  background-color: #4299e1; /* Blue - active rental */
}

.status-inner-completed {
  background-color: #48bb78; /* Green - completed */
}

.status-inner-cancelled {
  background-color: #f56565; /* Red - cancelled */
}

.status-inner-noshow {
  background-color: #ed8936; /* Orange - no show */
}

.status-inner-pending {
  background-color: #ecc94b; /* Yellow - pending approval */
}

/* Border/Frame - Payment status */
.status-border-none {
  border: 2px solid #f56565; /* Red - no payment */
}

.status-border-partial {
  border: 2px solid #ed8936; /* Orange - partial payment */
}

.status-border-full {
  border: 2px solid #48bb78; /* Green - full payment */
}

.status-border-refunded {
  border: 2px solid #805ad5; /* Purple - refunded */
}

/* Size variations */
.status-icon-sm {
  width: 16px;
  height: 16px;
}

.status-icon-lg {
  width: 32px;
  height: 32px;
}

/* Tooltip for better UX */
.status-icon-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 10;
}

.status-icon:hover .status-icon-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Combined classes for quick use */
.status-waiting-none {
  background-color: #f5f5f5;
  border: 2px solid #f56565;
}

.status-active-full {
  background-color: #4299e1;
  border: 2px solid #48bb78;
}

.status-waiting-partial {
  background-color: #f5f5f5;
  border: 2px solid #ed8936;
}

.status-completed-full {
  background-color: #48bb78;
  border: 2px solid #48bb78;
}

/* Animation for urgent statuses */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.status-urgent {
  animation: pulse 2s infinite;
}