/* ============================================================
   Electrónica Monarka - Brand Color Override
   Primary: Teal (#06B0A4) | Accent: Green (#8BC63E)
   ============================================================ */

:root {
  /* Core Brand Colors */
  --brand-primary: #06B0A4;
  --brand-primary-dark: #049B90;
  --brand-primary-light: #08C9BB;
  --brand-secondary: #8BC63E;
  --brand-secondary-dark: #7AB035;
  --brand-dark: #04403C;

  /* Override CSS variables to match brand */
  --primary: 177 95% 39%;
  --secondary: 86 56% 51%;
  --ring: 177 95% 39%;
}

/* ============================================================
   GRADIENT PRIMARY BUTTONS - Brand Color Effect
   ============================================================ */
.gradient-primary,
button.gradient-primary,
[class*="gradient-primary"] {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px rgba(6, 176, 164, 0.35) !important;
  transition: all 0.25s ease !important;
  position: relative;
  overflow: hidden;
}

.gradient-primary:hover,
button.gradient-primary:hover {
  background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-secondary-dark) 100%) !important;
  box-shadow: 0 6px 20px rgba(6, 176, 164, 0.5) !important;
  transform: translateY(-1px) !important;
}

.gradient-primary:active,
button.gradient-primary:active {
  transform: translateY(0px) !important;
  box-shadow: 0 2px 8px rgba(6, 176, 164, 0.3) !important;
}

.gradient-primary:disabled,
button.gradient-primary:disabled {
  opacity: 0.6 !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Shimmer effect on hover */
.gradient-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.4s ease;
}

.gradient-primary:hover::after {
  left: 150%;
}

/* ============================================================
   PRIMARY COLORED BUTTONS (bg-primary, etc.)
   ============================================================ */
[class*="bg-primary"]:not([class*="bg-primary/"]):not([class*="bg-primary-"]) {
  background-color: var(--brand-primary) !important;
}

/* Emerald buttons used in products page - keep as brand teal */
.bg-emerald-600,
button.bg-emerald-600 {
  background-color: var(--brand-primary) !important;
  box-shadow: 0 4px 12px rgba(6, 176, 164, 0.3) !important;
  transition: all 0.2s ease !important;
}

.bg-emerald-600:hover,
button.bg-emerald-600:hover,
.hover\:bg-emerald-700:hover {
  background-color: var(--brand-primary-dark) !important;
  box-shadow: 0 6px 16px rgba(6, 176, 164, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* ============================================================
   ADMIN SIDEBAR & HEADER - Brand Color Accents
   ============================================================ */

/* Active sidebar item */
[class*="bg-primary"][class*="text-primary-foreground"],
a[class*="bg-primary"] {
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-light)) !important;
  color: white !important;
  box-shadow: 2px 0 8px rgba(6, 176, 164, 0.2) !important;
}

/* ============================================================
   STATUS BADGES for Online Orders
   ============================================================ */
.status-pending    { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.status-confirmed  { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; }
.status-packing    { background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD; }
.status-ready      { background: #EDE9FE; color: #5B21B6; border: 1px solid #C4B5FD; }
.status-dispatched { background: #FEF3C7; color: #78350F; border: 1px solid #FDE68A; }
.status-delivered  { background: #D1FAE5; color: #064E3B; border: 1px solid #34D399; }
.status-completed  { background: #ECFDF5; color: #065F46; border: 1px solid #6EE7B7; font-weight: 700; }
.status-cancelled  { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }

/* ============================================================
   FOCUS RINGS - Brand Color
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--brand-primary) !important;
  outline-offset: 2px !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(6, 176, 164, 0.15) !important;
}

/* ============================================================
   SCROLLBAR - Brand Color
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: var(--brand-primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-primary-dark); }

/* ============================================================
   CARD HOVER - Subtle brand accent
   ============================================================ */
.card:hover,
[class*="rounded-lg"][class*="border"]:hover {
  border-color: rgba(6, 176, 164, 0.25) !important;
}

/* ============================================================
   CHECKBOX & SWITCH - Brand Color
   ============================================================ */
[data-state="checked"] {
  background-color: var(--brand-primary) !important;
}