/* ============================================================
   AS Apps Developer Portal — Reusable Components
   ============================================================
   Buttons, cards, badges, inputs, glassmorphism panels.
   All components use CSS variables — zero theme duplication.
   ============================================================ */

/* ================================================================
   BUTTONS
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-button);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-lg);
  border: 1.5px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.97);
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* ── Ripple Effect ── */
.btn .btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: ripple 600ms linear forwards;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ── Primary Button ── */
.btn--primary {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-glow);
}

/* ── Secondary Button ── */
.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn--secondary:hover {
  background: var(--color-surface);
  border-color: var(--color-border-hover);
}

/* ── Ghost Button ── */
.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

.btn--ghost:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary-light);
}

/* ── Outline Button ── */
.btn--outline {
  background: transparent;
  color: var(--color-primary-light);
  border-color: var(--color-primary);
}

.btn--outline:hover {
  background: var(--color-primary);
  color: #FFFFFF;
  box-shadow: var(--shadow-glow);
}

/* ── Button Sizes ── */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  border-radius: var(--radius-md);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
  border-radius: var(--radius-xl);
}

/* ── Button with Icon ── */
.btn svg,
.btn .btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn--lg svg,
.btn--lg .btn-icon {
  width: 20px;
  height: 20px;
}

/* ── Button Group ── */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

@media (max-width: 480px) {
  .btn-group {
    flex-direction: column;
    width: 100%;
  }
  .btn-group .btn {
    width: 100%;
  }
}

/* ================================================================
   CARDS
   ================================================================ */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-lg);
}

/* ── Glass Card ── */
.card--glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-color: var(--glass-border);
}

/* ── Gradient Border Card ── */
.card--gradient {
  position: relative;
  background: var(--color-surface);
  border: none;
  overflow: hidden;
}

.card--gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  padding: 1px;
  background: var(--gradient-border);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Elevated Card ── */
.card--elevated {
  background: var(--color-elevated);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.card--elevated:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

/* ── Interactive Card ── */
.card--interactive {
  cursor: pointer;
}

.card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* ── Card Inner Elements ── */
.card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  color: #FFFFFF;
  font-size: var(--text-xl);
  flex-shrink: 0;
}

.card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.card__description {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* ================================================================
   BADGES
   ================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-button);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge--primary {
  background: var(--color-primary-subtle);
  color: var(--color-primary-light);
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.badge--secondary {
  background: var(--color-secondary-subtle);
  color: var(--color-secondary-light);
  border: 1px solid rgba(6, 182, 212, 0.2);
}

.badge--accent {
  background: var(--color-accent-subtle);
  color: var(--color-accent-light);
  border: 1px solid rgba(20, 184, 166, 0.2);
}

.badge--dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ================================================================
   STAT COUNTER
   ================================================================ */

.stat {
  text-align: center;
  padding: var(--space-4);
}

.stat__value {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-none);
  margin-bottom: var(--space-2);
}

.stat__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .stat__value {
    font-size: var(--text-3xl);
  }
}

/* ================================================================
   INPUT / FORM FIELDS
   ================================================================ */

.input-group {
  display: flex;
  position: relative;
}

.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.input::placeholder {
  color: var(--color-text-tertiary);
}

.input:hover {
  border-color: var(--color-border-hover);
}

.input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
  outline: none;
}

/* ── Input with Button ── */
.input-group .input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.input-group .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  flex-shrink: 0;
}

/* ================================================================
   GLASS PANEL
   ================================================================ */

.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
}

/* ================================================================
   TAG / CHIP
   ================================================================ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  transition: all var(--transition-base);
}

.tag:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-light);
  background: var(--color-primary-subtle);
}

/* ================================================================
   SEPARATOR
   ================================================================ */

.separator {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ================================================================
   ICON WRAPPER
   ================================================================ */

.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-subtle);
  color: var(--color-primary-light);
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.icon-box:hover {
  background: var(--color-primary);
  color: #FFFFFF;
  box-shadow: var(--shadow-glow);
}

.icon-box--lg {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xl);
  font-size: var(--text-xl);
}

.icon-box svg {
  width: 20px;
  height: 20px;
}

.icon-box--lg svg {
  width: 24px;
  height: 24px;
}