/* Utilitetet bazë */
@layer base {
  .bg-white {
    background-color: #ffffff;
  }
  .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }
  .rounded-lg {
    border-radius: 0.5rem;
  }
}

/* Stilet e komponentëve */
.search-box-container {
    margin-top: 5rem;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    max-height: 200px;
    overflow-y: auto;
    border-radius: 0.375rem;
    border: 2px solid #ddd;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.show {
    display: block;
}

.input-field { 
    width: 100%;
    padding: 0.5rem;
    border: 2px solid #ddd;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}

.input-field:focus { 
    border-color: #4F46E5;
    box-shadow: 0 0 0 2px #4F46E5;
}

/* Media Queries */
@media (max-width: 768px) {
    .tabs-container { 
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .tab-btn { 
        flex-basis: calc(50% - 0.5rem);
        margin-bottom: 1rem;
    }
}

/* Scrollbar Styles */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* Tab Styles */
#tabs-container button:not(.active):hover,
#tabs-container button:not(.active):focus {
    background-color: #2cd38c;
    color: white;
}

#tabs-container button.active {
    background-color: #2cd38c;
    color: white;
}

#tabs-container button {
    transition: background-color 0.3s, color 0.3s;
}

/* Utility Classes */
.text-gray-600 { color: #4B5563; }
.hover\:text-white:hover { color: #ffffff; }
.bg-\[\#2cd38c\] { background-color: #2cd38c; }
.hover\:bg-\[\#29b47b\]:hover { background-color: #29b47b; }
.text-white { color: #ffffff; }
.font-bold { font-weight: 700; }
.rounded-full { border-radius: 9999px; }
.w-full { width: 100%; }
.mt-5 { margin-top: 1.25rem; }