@tailwind base;
@tailwind components;
@tailwind utilities;

/* ===== GENETIX DESIGN SYSTEM COMPONENTS ===== */

/* Glass-morphism Cards - Priority 1 */
.glass-card {
  @apply bg-gradient-to-br from-white via-brand-light-blue/5 to-brand-dark-blue/5 rounded-xl shadow-lg border border-brand-light-blue/20 p-6 backdrop-blur-sm overflow-hidden;
}

.glass-card-compact {
  @apply bg-gradient-to-br from-white via-brand-light-blue/5 to-brand-dark-blue/5 rounded-lg shadow-sm border border-brand-light-blue/20 p-4 backdrop-blur-sm;
}

.glass-card-tight {
  @apply bg-gradient-to-br from-white via-brand-light-blue/5 to-brand-dark-blue/5 rounded-lg shadow-sm border border-brand-light-blue/20 p-3 backdrop-blur-sm;
}

/* Button System - Priority 1 */
.btn {
  @apply inline-flex items-center font-medium transition-colors rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer;
}

.btn-primary {
  @apply btn bg-brand-light-blue text-white hover:bg-brand-dark-blue focus:ring-brand-light-blue;

}

.btn-secondary {
  @apply btn bg-brand-pink text-white border border-transparent hover:border-brand-pink hover:bg-white hover:text-brand-pink focus:border-brand-pink;
}

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

.btn-warning {
  @apply btn bg-amber-500 text-white hover:bg-amber-600 focus:ring-amber-500;
}

.btn-outline {
  @apply btn bg-white text-brand-dark-blue border-2 border-brand-light-blue hover:bg-brand-light-blue hover:text-white focus:ring-brand-light-blue;
}

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

.btn-md {
  @apply px-4 py-2 text-sm;
}

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

/* Tab Navigation - Priority 2 */
.tab-item {
  @apply py-3 px-4 text-sm font-medium border-b-2 rounded-t-lg mx-px transition-all duration-200 flex items-center;
}

.tab-item-active {
  @apply tab-item border-brand-light-blue text-brand-dark-blue bg-white/40;
}

.tab-item-inactive {
  @apply tab-item border-transparent text-brand-dark-blue/70 hover:text-brand-dark-blue hover:bg-white/20;
}

/* Data Display - Priority 2 */
.data-label {
  @apply block text-xs font-bold text-brand-dark-blue/70 uppercase tracking-wide mb-1;
}

.data-value {
  @apply text-sm font-medium text-brand-dark-blue;
}

/* Form Elements - Priority 2 */
.form-input {
  @apply block w-full rounded-lg shadow-sm px-4 py-3 text-sm placeholder-gray-400 text-gray-800 transition-colors;
}

.form-input-normal {
  @apply form-input border-gray-300 focus:border-blue-500 focus:ring-blue-500;
}

.form-input-error {
  @apply form-input border-red-300 focus:border-red-500 focus:ring-red-500;
}

.form-label {
  @apply block text-sm font-semibold text-gray-800 mb-2;
}

.form-label-required::after {
  content: ' *';
  @apply text-red-500;
}

/* Alert System - Priority 3 */
.alert {
  @apply rounded-lg border p-4 flex items-start space-x-3;
}

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

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

.alert-info {
  @apply alert bg-blue-50 border-blue-200;
}

.alert-warning {
  @apply alert bg-amber-50 border-amber-200;
}

/* Empty States - Priority 3 */
.empty-state {
  @apply p-8 bg-white/60 border border-brand-light-blue/20 rounded-lg text-center;
}

/* Navigation - Priority 2 */
.nav-link {
  @apply text-white/90 hover:bg-white/20 hover:text-white px-4 py-2.5 rounded-lg text-base font-medium transition-all duration-200 border border-transparent hover:border-white/30 flex items-center space-x-2;
}

/* Typography Helpers */
.heading-xl {
  @apply text-4xl font-bold text-brand-dark-blue;
}

.heading-lg {
  @apply text-2xl font-bold text-brand-dark-blue;
}

.heading-md {
  @apply text-xl font-bold text-brand-dark-blue;
}

.heading-sm {
  @apply text-lg font-semibold text-brand-dark-blue;
}

.text-muted {
  @apply text-brand-dark-blue/70;
}

.text-subtle {
  @apply text-brand-dark-blue/50;
}

/* Status Indicators */
.status-success {
  @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 border border-green-200;
}

.status-error {
  @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 border border-red-200;
}

.status-warning {
  @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-800 border border-amber-200;
}

.status-info {
  @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200;
}

.status-abandoned {
  @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800 border border-orange-200;
}

/* Loading States */
.loading-skeleton {
  @apply animate-pulse bg-gray-200 rounded;
}

/* Utility Classes */
.icon-brand {
  @apply text-brand-light-blue;
}

.icon-muted {
  @apply text-brand-dark-blue/60;
}

.glass-bg {
  @apply bg-gradient-to-br from-white via-brand-light-blue/5 to-brand-dark-blue/5 backdrop-blur-sm;
}

@layer utilities {
    .collapse {
        overflow: hidden;
        transition: max-height 0.3s ease;
        max-height: 0;
    }
    .collapse-open {
        /* Increase the max\-height value to fully display the content */
        max-height: 2000px;
    }
}

.pagy {
    @apply flex space-x-1 font-semibold text-sm text-gray-500;
    a:not(.gap) {
        @apply block rounded-lg px-3 py-1 bg-gray-200;
        &:hover {
            @apply bg-gray-300;
        }
        &:not([href]) { /* disabled links */
            @apply text-gray-300 bg-gray-100 cursor-default;
        }
        &.current {
            @apply text-white bg-gray-400;
        }
    }
    label {
        @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
        input {
            @apply bg-gray-100 border-none rounded-md;
        }
    }
}