/* Custom Styles for RMS */

/* Table Styles */
.item-table {
    border-collapse: collapse;
}

.item-table th, .item-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #4A5568; /* gray-700 */
}

.item-table th {
    background-color: #2D3748; /* gray-800 */
    color: #A0AEC0; /* gray-400 */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.item-table tbody tr {
    background-color: #1A202C; /* gray-900 */
    transition: background-color 0.2s ease-in-out;
}

.item-table tbody tr:hover {
    background-color: #2D3748; /* gray-800 */
}

/* View Switcher Active State */
.view-btn.active {
    background-color: #805AD5; /* purple-600 */
    color: white;
}

.item-table tbody tr.inactive-row {
    opacity: 0.5;
    background-color: #2D3748; /* A slightly different background */
}

.item-table tbody tr.inactive-row:hover {
    opacity: 0.8;
}

/* Defines the pulsing animation */
@keyframes pulse-warning {
    0% {
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); /* red-500 with opacity */
    }
    70% {
      box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
  }
  
  /* Style for the card view when an item is expiring soon */
  .expiring-soon-card {
    border: 1px solid #ef4444; /* red-500 */
    animation: pulse-warning 2s infinite;
  }
  
  /* Style for the table view when an item is expiring soon */
  .expiring-soon-row {
    background-color: rgba(153, 27, 27, 0.2);
    border-left: 4px solid #ef4444;
  }
  
/* Status color classes for days left display */
.status-green {
  color: #10b981; /* green-500 */
}

.status-yellow {
  color: #eab308; /* yellow-500 */
}

.status-red {
  color: #ef4444; /* red-500 */
}

/* Mobile optimizations for table */
@media (max-width: 768px) {
  .item-table {
    font-size: 0.875rem;
  }
  
  .item-table th, .item-table td {
    padding: 8px 10px;
  }
  
  .item-table th {
    font-size: 0.7rem;
  }
}