/* ============================================================
   Tailwind Component Helpers — replacements for DaisyUI
   ============================================================ */

/* Tabs */
.tabs {
    @apply flex flex-wrap border-b border-gray-300;
}

.tab {
    @apply px-4 py-3 font-medium text-gray-600 cursor-pointer transition border-b-2 border-transparent hover:text-ev-primary relative -mb-px;
}

.tab-active {
    @apply border-b-2 border-ev-primary text-ev-primary !important;
}

/* Form Controls */
.form-control {
    @apply mb-4;
}

.label {
    @apply block mb-2;
}

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

.input,
.input.input-bordered {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-ev-primary focus:ring-2 focus:ring-ev-primary/20 transition;
}

.textarea,
.textarea.textarea-bordered {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-ev-primary focus:ring-2 focus:ring-ev-primary/20 transition;
}

.select,
.select.select-bordered {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-ev-primary focus:ring-2 focus:ring-ev-primary/20 transition;
}

/* Badges */
.badge {
    @apply inline-block px-3 py-1 rounded-full text-sm font-semibold;
}

.badge-primary {
    @apply bg-ev-primary text-white;
}

.badge-secondary {
    @apply bg-ev-secondary text-white;
}

.badge-success {
    @apply bg-ev-success text-white;
}

.badge-error,
.badge-danger {
    @apply bg-ev-error text-white;
}

.badge-warning {
    @apply bg-ev-warning text-gray-800;
}

.badge-ghost {
    @apply bg-gray-200 text-gray-800;
}

/* Buttons */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 font-semibold rounded-lg transition cursor-pointer;
}

.btn-primary {
    @apply bg-ev-primary text-white hover:shadow-lg;
}

.btn-ghost {
    @apply bg-transparent text-gray-700 hover:bg-gray-100;
}

.btn-outline {
    @apply border-2 border-gray-300 text-gray-700 hover:border-ev-primary hover:text-ev-primary;
}

.btn-sm {
    @apply px-3 py-1 text-sm;
}

.btn-lg {
    @apply px-6 py-3 text-lg;
}

.btn:disabled {
    @apply opacity-50 cursor-not-allowed;
}

.btn-circle {
    @apply rounded-full w-10 h-10 p-0;
}

.btn-circle.btn-xs {
    @apply w-6 h-6;
}

.btn-circle.btn-sm {
    @apply w-8 h-8;
}

/* Collapse / Accordion */
.collapse {
    @apply border border-gray-200 rounded-lg overflow-hidden;
}

.collapse-arrow input {
    @apply hidden;
}

.collapse-title {
    @apply px-4 py-3 cursor-pointer font-medium hover:bg-gray-50 transition;
}

.collapse-content {
    @apply px-4 py-3 border-t border-gray-200;
}

/* Timeline */
.timeline {
    @apply space-y-0;
}

.timeline-vertical {
    @apply relative pl-0;
}

.timeline-vertical > li {
    @apply flex mb-8 pb-0;
}

.timeline-compact > li {
    @apply mb-4 pb-0;
}

.timeline-start {
    @apply text-right pr-4;
}

.timeline-middle {
    @apply flex justify-center;
}

.timeline-end {
    @apply pl-4;
}

.timeline-vertical > li > hr {
    @apply h-12 my-0 border-l-2;
}

/* Card / Modal */
.card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200;
}

.card-body {
    @apply p-6;
}

.modal {
    @apply hidden;
}

.modal-open {
    @apply fixed inset-0 flex items-center justify-center bg-black/50 z-50;
}

.modal-box {
    @apply bg-white rounded-xl shadow-xl max-w-2xl;
}

/* Alert */
.alert {
    @apply px-4 py-3 rounded-lg flex items-center gap-2;
}

.alert-error {
    @apply bg-red-50 border border-red-200 text-red-700;
}

.alert-warning {
    @apply bg-yellow-50 border border-yellow-200 text-yellow-700;
}

.alert-success {
    @apply bg-green-50 border border-green-200 text-green-700;
}

/* Dropdown */
.dropdown {
    @apply relative inline-block;
}

.dropdown-content {
    @apply absolute hidden;
}

/* Loading spinner */
.loading {
    @apply animate-spin;
}

.loading-spinner {
    @apply border-4 border-transparent border-t-current rounded-full;
}

.loading-lg {
    @apply h-12 w-12;
}

.loading-sm {
    @apply h-4 w-4;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tabs {
        @apply gap-1;
    }

    .tab {
        @apply px-3 py-2 text-sm;
    }
}