@import url("https://cdn.jsdelivr.net/npm/tailwindcss@3.4.3/base.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css");

/* Custom styles for dark theme */
body {
  background-color: #000000;
  color: #ffffff;
}
.bg-gray-100 {
  background-color: #1a1a1a;
}
.text-gray-900 {
  color: #e0e0e0;
}
.bg-zinc-900 {
  background-color: #2f2f2f;
}
.text-black {
  color: #000000;
}

.text-gray-600 {
  color: #232323;
}

.text-green-500 {
  color:#dee12c
}

.border-green-500 {
  border-color: #dee12c;
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255, 255, 255);
}
input, select, option {
  color: #000000;
  background-color: #ffffff;
  opacity: 1;
}
.bg-blue-500 {
  background-color: #3498db;
}

select option:checked {
  background-color: #3498db;
  color: #ffffff;
}
.hover\:bg-blue-700:hover {
  background-color: #2980b9;
}
.bg-green-500 {
  background-color: #dee12c;
}

.hover\:bg-green-700:hover {
  background-color: #dee12c;
}
.bg-red-500 {
  background-color: #e74c3c;
}
.hover\:bg-red-700:hover {
  background-color: #c0392b;
}
/* Customizable button and tab title colors */
.button-text {
  color: #ffffff !important;
}
.tab-title {
  color: #e0e0e0;
}
/* Dashboard styles */
.dashboard-item {
  background-color: #2a2a2a;
  color: #ffffff;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.dashboard-item h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.dashboard-item p {
  font-size: 2rem;
  font-weight: bold;
}
.dashboard-blue { background-color: #3498db; }
.dashboard-green { background-color: #dee12c; }
.dashboard-yellow { background-color: #f1c40f; }
.dashboard-purple { background-color: #9b59b6; }
.dashboard-red { background-color: #e74c3c; }
.dashboard-indigo { background-color: #34495e; }
.card-hover:hover {
  border-color: #dee12c !important; /* Change the border color to green */
}
/* Table Header Style */
table thead {
  background-color: #2f2f2f; /* Dark grey background for header */
  color: #f5f5f5; /* Light grey/white text color */
  text-transform: uppercase; /* Capitalized header text */
}

table thead th {
  padding: 12px;
  border: 1px solid #444; /* Dark border around header cells */
}

/* Table Body Style */
table tbody tr {
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

table tbody tr:hover {
  background-color: #333333; /* Lighter grey on hover */
}

table tbody td {
  padding: 12px;
  border: 1px solid #444; /* Darker border around body cells */
}

/* General Table Styles */
table {
  width: 100%;
  border-collapse: collapse; /* Ensure borders collapse for modern look */
}

table th, table td {
  text-align: left;
}

/* Category Table Search Input */
#searchInput {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin-bottom: 16px;
  width: 100%;
}

/* General Transition Effects for Hover */
.transition {
  transition: all 0.3s ease;
}

.hover\:bg-gray-700:hover {
  background-color: #333333; /* Darker background on hover */
}

/* Borders */
.border {
  border: 1px solid #444;
}

/* Borders */
.border-mobilem {
  border: 1px solid #dee12c;
}

/* Borders */
.hover\:border-mobilem :hover {
  border: 1px solid #dee12c;
}

/* Ajustar el contenedor principal */
.container {
  z-index: 1 !important;
}

/* Asegurarse que el menú móvil esté por encima de todo */
#mobile-menu {
  z-index: 999999 !important; /* Valor muy alto */
}

/* Add this to your existing CSS */
input:focus, select:focus {
  outline: none !important;
  border-color: #dee12c !important;
  box-shadow: 0 0 0 2px rgba(222, 225, 44, 0.3) !important;
  --tw-ring-color: #dee12c !important;
  --tw-ring-offset-shadow: none !important;
  --tw-ring-shadow: none !important;
}

/* If you still see blue, add these stronger overrides */
input:focus-visible, select:focus-visible {
  outline: none !important;
  border-color: #dee12c !important;
  box-shadow: 0 0 0 2px rgba(222, 225, 44, 0.3) !important;
  --tw-ring-color: #dee12c !important;
}

.focus\:ring-2:focus {
  --tw-ring-color: #dee12c !important;
}

.focus\:border-blue-500:focus {
  border-color: #dee12c !important;
}