/* Premium Gradient Button Styles - Inspired by Uiverse.io */

/* ========================================
   CSS Custom Properties
   ======================================== */
:root {
  --btn-border-color: linear-gradient(-45deg, #ffae00, #7e03aa, #00fffb);
  --btn-border-width: 0.125em;
  --btn-curve-size: 0.5em;
  --btn-bg-dark: #080312;
  --btn-bg-primary: linear-gradient(135deg, #3b82f6, #8b5cf6);
  --btn-color: #ffffff;
}

/* ========================================
   Premium Gradient Button Base (Always Filled)
   ======================================== */
.btn-premium {
  --curve-size: 0.5em;
  color: var(--btn-color);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5em 1.5em;
  font-size: 0.875rem;
  font-weight: 500;
  border: 0;
  text-transform: none;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  clip-path: polygon(0% var(--curve-size),
      var(--curve-size) 0,
      100% 0,
      100% calc(100% - var(--curve-size)),
      calc(100% - var(--curve-size)) 100%,
      0 100%);
  background: var(--btn-bg-primary);
  transition: all 0.25s ease;
  min-height: 40px;
  white-space: nowrap;
}

.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
  filter: brightness(1.1);
}

.btn-premium:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.btn-premium:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ========================================
   Premium Outline Button (For Manage Buttons)
   ======================================== */
.btn-premium-outline {
  --curve-size: 0.5em;
  --border-width: 2px;
  color: hsl(var(--foreground));
  cursor: pointer;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5em 1.5em;
  font-size: 0.875rem;
  font-weight: 500;
  border: 0;
  background: transparent;
  clip-path: polygon(0% var(--curve-size),
      var(--curve-size) 0,
      100% 0,
      100% calc(100% - var(--curve-size)),
      calc(100% - var(--curve-size)) 100%,
      0 100%);
  transition: all 0.25s ease;
  min-height: 40px;
  white-space: nowrap;
}

.btn-premium-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--btn-border-color);
  background-size: 300% 300%;
  animation: gradient-move 5s ease infinite;
  z-index: -2;
  clip-path: polygon(0% var(--curve-size),
      var(--curve-size) 0,
      100% 0,
      100% calc(100% - var(--curve-size)),
      calc(100% - var(--curve-size)) 100%,
      0 100%);
}

.btn-premium-outline::after {
  content: "";
  position: absolute;
  inset: var(--border-width);
  background: hsl(var(--background));
  z-index: -1;
  clip-path: polygon(0% calc(var(--curve-size) - var(--border-width) * 0.3),
      calc(var(--curve-size) - var(--border-width) * 0.3) 0,
      100% 0,
      100% calc(100% - var(--curve-size) + var(--border-width) * 0.3),
      calc(100% - var(--curve-size) + var(--border-width) * 0.3) 100%,
      0 100%);
}

.btn-premium-outline:hover {
  color: hsl(var(--primary));
  transform: translateY(-2px);
}

@keyframes gradient-move {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* ========================================
   Sidebar Navigation Links (Desktop)
   ======================================== */
@media (min-width: 1024px) {
  .nav-link-premium {
    --curve-size: 0.4em;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    position: relative;
    isolation: isolate;
    border: 0;
    background: transparent;
    text-decoration: none;
    transition: all 0.25s ease;
    clip-path: polygon(0% var(--curve-size),
        var(--curve-size) 0,
        100% 0,
        100% calc(100% - var(--curve-size)),
        calc(100% - var(--curve-size)) 100%,
        0 100%);
    margin-bottom: 0.5rem;
  }

  .nav-link-premium:hover {
    background: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
    transform: translateX(4px);
  }

  /* Active state - always filled */
  .nav-link-premium.nav-active,
  .nav-link-premium[data-active="true"] {
    background: var(--btn-bg-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  }

  .nav-link-premium.nav-active:hover {
    transform: translateX(0) translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    filter: brightness(1.1);
  }

  .nav-link-premium.nav-active svg,
  .nav-link-premium[data-active="true"] svg {
    color: white;
  }
}

/* ========================================
   Action Buttons (Add Product, Save, etc.)
   ======================================== */
.btn-action-primary {
  --curve-size: 0.5em;
  color: white;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 0;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  clip-path: polygon(0% var(--curve-size),
      var(--curve-size) 0,
      100% 0,
      100% calc(100% - var(--curve-size)),
      calc(100% - var(--curve-size)) 100%,
      0 100%);
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  transition: all 0.25s ease;
  min-height: 40px;
  white-space: nowrap;
}

.btn-action-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
  filter: brightness(1.1);
}

.btn-action-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Save button variant with green gradient */
.btn-action-save {
  --curve-size: 0.5em;
  color: white;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 0;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
  clip-path: polygon(0% var(--curve-size),
      var(--curve-size) 0,
      100% 0,
      100% calc(100% - var(--curve-size)),
      calc(100% - var(--curve-size)) 100%,
      0 100%);
  background: linear-gradient(135deg, #22c55e, #16a34a);
  transition: all 0.25s ease;
  min-height: 40px;
  white-space: nowrap;
}

.btn-action-save:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
  filter: brightness(1.1);
}

.btn-action-save:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* ========================================
   Logout Button Special Style
   ======================================== */
.btn-logout-premium {
  --curve-size: 0.4em;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  position: relative;
  border: 0;
  background: transparent;
  transition: all 0.25s ease;
  clip-path: polygon(0% var(--curve-size),
      var(--curve-size) 0,
      100% 0,
      100% calc(100% - var(--curve-size)),
      calc(100% - var(--curve-size)) 100%,
      0 100%);
}

.btn-logout-premium:hover {
  background: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
  transform: translateX(4px);
}