/* Additional custom styles for Univi */
.btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

/* Animation for hover effects */
.card:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease-in-out;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* Loading animation */
.loading {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-out;
}

/* Button states */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.btn:disabled:hover {
  background-color: inherit;
}

/* Form improvements */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: rgba(2, 132, 199, 0.5);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

/* Custom select styling */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  color: #1f2937 !important;
  background-color: white;
}

/* Fix dropdown options text color */
select option {
  color: #1f2937 !important;
  background-color: white !important;
}

/* Dark theme inputs — scoped to .card only (admin/company dark pages) */
.card input[type="text"],
.card input[type="email"],
.card input[type="password"],
.card input[type="tel"],
.card input[type="number"],
.card input:not([type]),
.card textarea,
.card select {
  color: white !important;
  background-color: rgba(71, 85, 105, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Placeholder text styling for dark theme */
.card input::placeholder,
.card textarea::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Light theme inputs — .card-light public pages */
.card-light input,
.card-light textarea,
.card-light select {
  color: #1f2937 !important;
  background-color: white !important;
}

.card-light input::placeholder,
.card-light textarea::placeholder {
  color: #94a3b8 !important;
}

/* Override browser autofill grey on light forms */
.card-light input:-webkit-autofill,
.card-light input:-webkit-autofill:hover,
.card-light input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: #1f2937 !important;
  box-shadow: 0 0 0 1000px white inset !important;
  background-color: white !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .btn {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
  
  .card {
    padding: 1rem;
  }

  /* Mobile header adjustments */
  header .flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  header nav {
    display: none !important;
  }

  /* Mobile friendly countdown */
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

/* Dark theme improvements */
.bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.1);
}

.border-white\/20 {
  border-color: rgba(255, 255, 255, 0.2);
}

/* Success and error states */
.alert-success {
  background-color: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: rgb(187, 247, 208);
}

.alert-error {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: rgb(254, 202, 202);
}

.alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: rgb(253, 230, 138);
}

/* Custom badge variants */
.badge-success {
  background-color: rgba(34, 197, 94, 0.2);
  color: rgb(187, 247, 208);
}

.badge-error {
  background-color: rgba(239, 68, 68, 0.2);
  color: rgb(254, 202, 202);
}

.badge-warning {
  background-color: rgba(245, 158, 11, 0.2);
  color: rgb(253, 230, 138);
}

/* Smooth transitions */
* {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* Print styles */
@media print {
  header, footer {
    display: none;
  }
  
  .card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
  
  .bg-gradient-to-br {
    background: white;
  }
  
  .text-white, .text-slate-100 {
    color: black !important;
  }
}

/* Read-more details/summary – hide default marker */
details.lasmer > summary { list-style: none; cursor: pointer; display: block; }
details.lasmer > summary::-webkit-details-marker { display: none; }
details.lasmer > summary::marker { content: ''; display: none; }