/* ===== 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;
}

.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-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;
}

/* Tom Select Custom Styles - Overrides to match site design */
.ts-wrapper .ts-control {
  @apply rounded-lg border-gray-300 shadow-sm px-4 py-3 text-sm !important;
  border-radius: 0.5rem !important;
  min-height: 2.75rem !important;
}

.ts-wrapper.focus .ts-control {
  @apply border-blue-500 ring-1 ring-blue-500 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.ts-wrapper.multi .ts-control > div {
  @apply bg-blue-100 text-blue-700 border border-blue-200 rounded px-2 py-1 text-sm font-medium !important;
  margin: 2px 4px 2px 0 !important;
}

.ts-wrapper.multi .ts-control > div.active {
  @apply bg-blue-200 text-blue-800 border-blue-300 !important;
}

.ts-wrapper .ts-dropdown {
  @apply rounded-lg border-gray-300 shadow-lg !important;
  border-radius: 0.5rem !important;
  margin-top: 0.25rem !important;
}

.ts-wrapper .ts-dropdown .option {
  @apply px-4 py-2 text-sm text-gray-700 !important;
}

.ts-wrapper .ts-dropdown .option.active {
  @apply bg-blue-50 text-blue-700 !important;
}

.ts-wrapper .ts-dropdown .option:hover {
  @apply bg-gray-50 !important;
}

.ts-wrapper.plugin-remove_button .item .remove {
  @apply text-blue-500 hover:text-blue-700 hover:bg-blue-50 !important;
  padding: 0 4px !important;
  margin-left: 4px !important;
  border-left: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
  @apply bg-blue-50 !important;
}

.ts-wrapper .ts-control > input {
  @apply text-gray-800 placeholder-gray-400 !important;
}

.ts-wrapper .ts-control > input::placeholder {
  @apply text-gray-400 !important;
}

.ts-dropdown-content {
  max-height: 250px !important;
}