/* Base styles */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Navigation styles */
.nav-container {
    position: relative;
    z-index: 50;
}

.nav-dropdown {
    z-index: 51;
    transition: opacity 0.15s ease-in-out;
    opacity: 0;
    pointer-events: none;
}

.nav-container:hover .nav-dropdown {
    display: block;
    margin-top: 0;
    top: 100%;
    opacity: 1;
    pointer-events: auto;
}

/* Invisible extension for better hover handling */
.nav-container::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 8px;
    background: transparent;
}

/* Flash messages */
.flash-message {
    @apply transition-opacity duration-300 ease-in-out;
}

/* Mobile menu styles */
.mobile-dropdown {
    transition: max-height 0.3s ease-in-out;
    overflow: hidden;
}

.mobile-dropdown button {
    @apply w-full text-left;
}

.mobile-dropdown i.fa-chevron-down {
    @apply transition-transform duration-200;
}

.mobile-dropdown.active i.fa-chevron-down {
    @apply transform rotate-180;
}

/* Form styles */
.form-input {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm;
}

.form-label {
    @apply block text-sm font-medium text-gray-700;
}

.form-error {
    @apply mt-2 text-sm text-red-600;
}

/* Button styles */
.btn {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500;
}

.btn-secondary {
    @apply bg-white text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-indigo-500;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

/* Table styles */
.table-container {
    @apply shadow overflow-hidden border-b border-gray-200 sm:rounded-lg;
}

.table {
    @apply min-w-full divide-y divide-gray-200;
}

.table-header {
    @apply bg-gray-50;
}

.table-cell {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-500;
}

.contact-table tr {
    @apply hover:bg-gray-50 cursor-pointer transition-colors duration-150;
}

/* Card styles */
.card {
    @apply bg-white overflow-hidden shadow rounded-lg;
}

.card-header {
    @apply px-4 py-5 sm:px-6;
}

.card-body {
    @apply px-4 py-5 sm:p-6;
}

.card-footer {
    @apply px-4 py-4 sm:px-6 bg-gray-50;
}

/* Navigation link styles */
.nav-link {
    @apply inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300;
}

.nav-link-active {
    @apply border-b-2 border-indigo-500 text-gray-900;
}

.nav-link-inactive {
    @apply border-b-2 border-transparent;
}