.login-bg {
    background-image: url('/img/Whisk_eda4fc9df8.jpg');
    background-size: cover;
    background-position: center;
}
.btn-gradient-blue,
.btn-gradient-purple,
.btn-gradient-yellow,
.btn-gradient-green,
.btn-gradient-red,
.btn-gradient-slate {
  display: inline-block;
  padding: 0.6rem 1rem; /* px-5 py-2.5 */
  font-weight: 600; /* font-bold */
  color: #fff; /* text-white */
  border-radius: 0.5rem; /* rounded-lg */
  font-size: 0.8rem; /* text-sm */
  line-height: 1.2rem; /* tracking-tight-rem / text-sm */
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.2s ease-in;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* shadow-md */
  margin-left: 0.5rem;
}

.btn-gradient-blue {
  background-image: linear-gradient(to top left, #2563eb, #60a5fa); /* from-blue-600 to-blue-400 */
}

.btn-gradient-green {
  background-image: linear-gradient(to top left, #16a34a, #4ade80); /* from-green-600 to-green-400 */
}

.btn-gradient-slate {
  background-image: linear-gradient(to top left, #374151, #6b7280); /* from-slate-700 to-gray-500 */
}

.btn-gradient-red {
  background-image: linear-gradient(to top left, #ff0f0f, #ff9696); /* from-slate-700 to-gray-500 */
}
.btn-gradient-purple {
  background-image: linear-gradient(to top left, #7c3aed, #c4b5fd); /* purple-600 → purple-300 */
  color: white;
}
.btn-gradient-yellow {
  background-image: linear-gradient(to top left, #d97706, #facc15); /* orange-600 → yellow-400 */
  color: white;
}
.btn-gradient-purple:hover,
.btn-gradient-blue:hover,
.btn-gradient-green:hover,
.btn-gradient-slate:hover,
.btn-gradient-yellow:hover,
.btn-gradient-red:hover {
  transform: translateY(-2px); /* hover:-translate-y-px */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* hover:shadow-xs */
}

.btn-gradient-purple:active,
.btn-gradient-blue:active,
.btn-gradient-green:active,
.btn-gradient-slate:active,
.btn-gradient-yellow:active,
.btn-gradient-red:active {
  opacity: 0.85;
}

.btn-gray{
  background-color: #919191; /* Tailwind red-500 */
}

/* Azure button */
.azure-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 24px;
  margin-top: 20px;

  background-color: #0078d4; /* Azure blue */
  color: white;
  font-weight: 600;
  font-size: 15px;

  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.azure-btn:hover {
  transform: translateY(-1px); /* same as hover:-translate-y-px */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); /* same as hover:shadow-xs */
}

.azure-btn:active {
  opacity: 0.85; /* same as active:opacity-85 */
  transform: scale(0.98);
}

.azure-icon {
  width: 20px;
  height: 20px;
}

.severity-red { 
  background: linear-gradient(to right, #dc2626, #fda4af); /* red → rose */ 
  color: white; padding: 4px 20px;
  border-radius: 6px; 
  text-align: center; } 

.severity-yellow { 
  background: linear-gradient(to right, #fce380, #f8c84f); /* yellow → amber */ 
  color: white; padding: 4px 9px; 
  border-radius: 6px; 
  text-align: center; } 

.severity-green { 
  background: linear-gradient(to right, #10b981, #2dd4bf); /* emerald → teal */ 
  color: white; padding: 4px 20px; 
  border-radius: 6px; 
  text-align: center; }

.severity-orange {
  background: linear-gradient(to right, #f97316, #f7a561); /* orange → amber */
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  text-align: center;
}

.na-color {
  background-image: linear-gradient(to top left, #575c65, #9c9fa7); 
  color: white;
  padding: 4px 0; 
  width: 180px;
  border-radius: 6px;
  text-align: center;
  display: inline-block; 
}

.completion-color {
  background: linear-gradient(to right, #10b981, #2dd4bf);
  color: white;
  padding: 4px 0; /* remove horizontal padding */
  width: 180px;
  border-radius: 6px;
  text-align: center;
  display: inline-block; /* ensures width applies properly */
}

.ticket-details {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.ticket-column {
  flex: 1;
  min-width: 0;
}

.ticket-column p,
.ticket-column div {
  margin-bottom: 12px;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 768px) {
  .ticket-details {
    flex-direction: column;
    gap: 12px;
  }
}

.table-row-clickable {
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.table-row-clickable:hover {
  background-color: #cedbf3; /* light gray */
}

.btn-gradient-blue2,
.btn-gradient-purple2,
.btn-gradient-green2,
.btn-gradient-slate2 {
  display: inline-block;
  padding: 0.375rem 0.75rem; /* smaller: px-3 py-1.5 */
  font-weight: 700; /* font-bold */
  color: #fff; /* text-white */
  border-radius: 0.375rem; /* smaller rounded */
  font-size: 0.75rem; /* smaller text: text-xs */
  line-height: 1rem;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.2s ease-in;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15); /* slightly smaller shadow */
  margin-left: 0.5rem;
}

.btn-gradient-blue2 {
  background-image: linear-gradient(to top left, #2563eb, #60a5fa);
}

.btn-gradient-green2 {
  background-image: linear-gradient(to top left, #16a34a, #4ade80);
}

.btn-gradient-slate2 {
  background-image: linear-gradient(to top left, #374151, #6b7280);
}

.btn-gradient-purple2 {
  background-image: linear-gradient(to top left, #7c3aed, #c4b5fd);
  color: white;
}

.btn-gradient-purple2:hover,
.btn-gradient-blue2:hover,
.btn-gradient-green2:hover,
.btn-gradient-slate2:hover {
  transform: translateY(-1px); /* smaller hover movement */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-gradient-purple2:active,
.btn-gradient-blue2:active,
.btn-gradient-green2:active,
.btn-gradient-slate2:active {
  opacity: 0.85;
}


.custom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem; /* small text */
}

.custom-table th,
.custom-table td {
  border: 0px solid #d1d5db; /* gray-300 */
  padding: 0.5rem; /* p-2 */
  text-align: center;
}

.custom-table thead th {
  background-color:#1b5fb3; /* blue-600 */
  color: white;
  font-weight: bold;
}

.custom-table tbody tr:nth-child(even) {
  background-color: #f9fafb; /* gray-50 for striped effect */
}

.consistent-multiselect .multiselect__single,
.consistent-multiselect .multiselect__placeholder {
  display: flex;
  align-items: center;
  height: 1.2rem;     
  padding: 0 0.75rem;  
  font-size: 0.875rem;
  font-family: inherit;
}

/*Loading Effects*/
.loading-mask {
  position: fixed;
  z-index: 9999; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  display: table; 
  transition: opacity 0.3s ease;
}
.loading-container {
  display: table-cell;
  vertical-align: middle; 
  text-align: center; 
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

input[type="file"] {
  font-size: 0.95rem;
  padding: 0.25rem 0.5rem;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.badge {
  min-width: 18px;
  height: 18px;
  background-color: #f44336; 
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  border-radius: 9999px; 
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.my-ticket-row {
  background-color: #ebebeb; 
  border-left: 4px solid #5B7AD9; 
}

.profile-trigger {
  background: transparent;
  border: none;
  cursor: pointer;
}

.profile-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  width: 13rem;
  overflow: hidden;
  border-radius: 1rem;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
  z-index: 9999;
}

.profile-dropdown p {
  margin: 0;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.2);
  border-top-color: white;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.swal2-container {
  z-index: 999999 !important;
}