/* Go Brewing SaaS - Theme Styles */
/* Custom theme colors and component styling */

/* Primary Button - Red Theme */
.btn-primary {
  @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white;
  background-color: #EF4444;
  transition: background-color 0.15s ease-in-out;
}

.btn-primary:hover {
  background-color: #DC2626;
}

.btn-primary:focus {
  @apply outline-none ring-2 ring-offset-2;
  --tw-ring-color: #EF4444;
}

/* Secondary Button - Gray Theme */
.btn-secondary {
  @apply inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white;
  transition: background-color 0.15s ease-in-out;
}

.btn-secondary:hover {
  @apply bg-gray-50;
}

.btn-secondary:focus {
  @apply outline-none ring-2 ring-offset-2;
  --tw-ring-color: #EF4444;
}

/* Danger Button - Red Outline */
.btn-danger {
  @apply inline-flex items-center px-4 py-2 border-2 text-sm font-medium rounded-md text-red-700 bg-white;
  border-color: #EF4444;
  transition: all 0.15s ease-in-out;
}

.btn-danger:hover {
  @apply text-white;
  background-color: #EF4444;
}

.btn-danger:focus {
  @apply outline-none ring-2 ring-offset-2;
  --tw-ring-color: #EF4444;
}

/* Link Button - Text Only */
.btn-link {
  @apply inline-flex items-center px-2 py-1 text-sm font-medium rounded-md transition-colors;
  color: #EF4444;
}

.btn-link:hover {
  background-color: rgba(239, 68, 68, 0.1);
}

/* Badge - Primary Red */
.badge-primary {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  background-color: #EF4444;
  color: white;
}

/* Badge - Red Outline */
.badge-outline {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border-2;
  border-color: #EF4444;
  color: #EF4444;
  background-color: white;
}

/* Active Navigation Item */
.nav-item-active {
  background-color: #FEF2F2;
  color: #B91C1C;
}

.nav-item-active svg {
  color: #EF4444;
}

/* Form Input Focus States - Override defaults */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  --tw-ring-color: #EF4444;
  border-color: #EF4444;
}

/* Custom checkbox/radio with red accent */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: #EF4444;
  border-color: #EF4444;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  --tw-ring-color: #EF4444;
}

/* Tab Navigation */
.tab-active {
  @apply border-transparent text-gray-900 font-semibold;
  border-bottom-color: #EF4444;
  border-bottom-width: 2px;
}

.tab-inactive {
  @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300;
  border-bottom-width: 2px;
}

/* Alert/Notification Banner */
.alert-info {
  @apply bg-blue-50 border-l-4 border-blue-400 p-4;
}

.alert-success {
  @apply bg-green-50 border-l-4 border-green-400 p-4;
}

.alert-warning {
  @apply bg-yellow-50 border-l-4 border-yellow-400 p-4;
}

.alert-error {
  @apply bg-red-50 border-l-4;
  border-left-color: #EF4444;
}

/* Card with hover effect */
.card-hover {
  @apply bg-white rounded-lg shadow transition-all duration-200;
}

.card-hover:hover {
  @apply shadow-lg ring-2;
  --tw-ring-color: #EF4444;
  --tw-ring-opacity: 0.2;
}

/* Loading spinner - Red */
.spinner-red {
  border-color: #EF4444;
  border-right-color: transparent;
}

/* Divider with red accent */
.divider-red {
  @apply relative;
}

.divider-red::before {
  content: '';
  @apply absolute left-0 top-1/2 w-12 border-t-2;
  border-color: #EF4444;
  transform: translateY(-50%);
}