/**
 * Ferni Design System - UI Components
 * 
 * Reusable component patterns that match the app's visual language.
 * Import alongside tokens.css for full design system support.
 * 
 * Components:
 * - .icon-btn          - Circular icon button (theme toggle style)
 * - .badge             - Pill-shaped status/count badge (streak style)
 * - .add-btn           - Dashed add/plus button for adding items
 * - .team-slot         - Empty team roster slot
 * 
 * @version 1.0.0
 */

/* ============================================================================
   ICON BUTTON
   Circular button for icon actions (theme toggle, settings, etc.)
   ============================================================================ */

.icon-btn {
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  
  /* Appearance */
  background: var(--color-bg-elevated, #70605a);
  border: 1px solid var(--color-border-subtle, rgba(215, 185, 145, 0.12));
  border-radius: var(--radius-full, 9999px);
  color: var(--color-text-secondary, #e0d5c8);
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,.1));
  
  /* Interaction */
  cursor: pointer;
  transition:
    transform var(--transition-fast, 150ms ease),
    background var(--transition-base, 200ms ease),
    border-color var(--transition-base, 200ms ease),
    box-shadow var(--transition-base, 200ms ease);
  
  /* Ensure icon sizing */
  & > svg,
  & > .icon {
    width: 20px;
    height: 20px;
  }
}

.icon-btn:hover {
  background: var(--color-bg-glass, rgba(230, 195, 160, 0.08));
  border-color: var(--color-border-medium, rgba(215, 185, 145, 0.20));
  transform: scale(1.05);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1));
}

.icon-btn:active {
  transform: scale(0.95);
}

.icon-btn:focus-visible {
  outline: 2px solid var(--color-accent-primary, #d4a84a);
  outline-offset: 2px;
}

/* Size variants */
.icon-btn--sm {
  width: 36px;
  height: 36px;
  
  & > svg,
  & > .icon {
    width: 16px;
    height: 16px;
  }
}

.icon-btn--lg {
  width: 52px;
  height: 52px;
  
  & > svg,
  & > .icon {
    width: 24px;
    height: 24px;
  }
}

/* Zen theme overrides */
[data-theme="zen"] .icon-btn {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="zen"] .icon-btn:hover {
  background: rgba(255, 255, 255, 1);
}


/* ============================================================================
   BADGE
   Pill-shaped badge for counts, status, and labels (streak badge style)
   ============================================================================ */

.badge {
  /* Layout */
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2xs, 4px);
  padding: 6px 14px;
  
  /* Appearance */
  background: var(--color-bg-elevated, #70605a);
  border: 1px solid var(--color-border-subtle, rgba(215, 185, 145, 0.12));
  border-radius: var(--radius-full, 9999px);
  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0,0,0,.05));
  
  /* Typography */
  font-family: var(--font-body, system-ui);
  font-size: var(--text-xs, 12px);
  color: var(--color-text-secondary, #e0d5c8);
}

.badge__value {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #faf6f0);
  font-size: var(--text-sm, 14px);
}

.badge__label {
  font-weight: var(--font-weight-regular, 400);
  letter-spacing: var(--tracking-wide, 0.025em);
}

/* Badge with icon */
.badge--icon {
  padding-left: 10px;
  
  & > svg,
  & > .icon {
    width: 14px;
    height: 14px;
    margin-right: 2px;
  }
}

/* Semantic variants */
.badge--success {
  background: var(--color-semantic-success-glow, rgba(107, 196, 143, 0.22));
  border-color: var(--color-semantic-success, #6bc48f);
  color: var(--color-semantic-success, #6bc48f);
}

.badge--warning {
  background: var(--color-semantic-warning-glow, rgba(224, 184, 96, 0.22));
  border-color: var(--color-semantic-warning, #e0b860);
  color: var(--color-semantic-warning, #e0b860);
}

.badge--error {
  background: var(--color-semantic-error-glow, rgba(224, 117, 117, 0.22));
  border-color: var(--color-semantic-error, #e07575);
  color: var(--color-semantic-error, #e07575);
}

/* Persona-colored badge */
.badge--persona {
  background: var(--persona-tint, var(--color-accent-subtle));
  border-color: var(--persona-primary, var(--color-accent-primary));
  color: var(--persona-primary, var(--color-accent-primary));
}

/* Animation entrance */
.badge--animate {
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  animation: badge-entrance 0.4s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}

@keyframes badge-entrance {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* ============================================================================
   ADD BUTTON
   Dashed circular button for adding new items (agents, etc.)
   ============================================================================ */

.add-btn {
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  
  /* Appearance - dashed border style */
  background: var(--color-bg-glass, rgba(230, 195, 160, 0.08));
  border: 2px dashed var(--color-border-medium, rgba(215, 185, 145, 0.20));
  border-radius: var(--radius-full, 9999px);
  color: var(--color-text-muted, #d0c4b4);
  
  /* Interaction */
  cursor: pointer;
  transition: all var(--transition-base, 200ms ease);
  
  /* Icon */
  & > svg,
  & > .icon {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    transition: transform var(--transition-fast, 150ms ease);
  }
}

.add-btn:hover {
  background: var(--persona-tint, var(--color-accent-subtle, rgba(212, 168, 74, 0.08)));
  border-color: var(--persona-primary, var(--color-accent-primary, #d4a84a));
  border-style: solid;
  color: var(--persona-primary, var(--color-accent-primary, #d4a84a));
  transform: scale(1.08);
  box-shadow: 0 0 20px var(--persona-glow, var(--color-accent-glow, rgba(212, 168, 74, 0.22)));
  
  & > svg,
  & > .icon {
    transform: rotate(90deg);
  }
}

.add-btn:active {
  transform: scale(0.95);
}

.add-btn:focus-visible {
  outline: 2px solid var(--persona-primary, var(--color-accent-primary, #d4a84a));
  outline-offset: 3px;
}

/* Size variants */
.add-btn--sm {
  width: 32px;
  height: 32px;
  
  & > svg,
  & > .icon {
    width: 16px;
    height: 16px;
  }
}

.add-btn--lg {
  width: 56px;
  height: 56px;
  
  & > svg,
  & > .icon {
    width: 24px;
    height: 24px;
  }
}

/* Prominent variant - solid background, call-to-action style */
.add-btn--prominent {
  background: var(--gradient-orb, linear-gradient(180deg, var(--persona-primary) 0%, var(--persona-secondary) 100%));
  border: none;
  color: white;
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,.1));
}

.add-btn--prominent:hover {
  background: var(--gradient-orb, linear-gradient(180deg, var(--persona-primary) 0%, var(--persona-secondary) 100%));
  transform: scale(1.1);
  box-shadow: 
    var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1)),
    0 0 30px var(--persona-glow, var(--color-accent-glow));
}

/* Zen theme overrides */
[data-theme="zen"] .add-btn {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="zen"] .add-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--persona-primary, var(--color-accent-primary));
}


/* ============================================================================
   TEAM SLOT
   Empty placeholder slot in team roster for adding members
   ============================================================================ */

.team-slot {
  /* Layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: var(--space-xs, 8px);
  
  /* Appearance */
  background: transparent;
  border: none;
  opacity: 0.6;
  
  /* Interaction */
  cursor: pointer;
  transition: all var(--transition-base, 200ms ease);
}

.team-slot__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full, 9999px);
  border: 2px dashed var(--color-border-medium, rgba(215, 185, 145, 0.20));
  background: var(--color-bg-glass, rgba(230, 195, 160, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base, 200ms ease);
  
  & > svg,
  & > .icon {
    width: 14px;
    height: 14px;
    color: var(--color-text-muted, #d0c4b4);
    transition: transform var(--transition-fast, 150ms ease);
  }
}

.team-slot__label {
  font-size: var(--text-2xs, 10px);
  color: var(--color-text-muted, #d0c4b4);
  letter-spacing: var(--tracking-wide, 0.025em);
  text-transform: uppercase;
}

.team-slot:hover {
  opacity: 1;
}

.team-slot:hover .team-slot__avatar {
  border-color: var(--persona-primary, var(--color-accent-primary, #d4a84a));
  border-style: solid;
  background: var(--persona-tint, var(--color-accent-subtle, rgba(212, 168, 74, 0.08)));
  transform: scale(1.1);
  box-shadow: 0 0 15px var(--persona-glow, var(--color-accent-glow, rgba(212, 168, 74, 0.22)));
  
  & > svg,
  & > .icon {
    color: var(--persona-primary, var(--color-accent-primary, #d4a84a));
    transform: rotate(90deg);
  }
}

.team-slot:active .team-slot__avatar {
  transform: scale(0.95);
}

.team-slot:focus-visible {
  outline: none;
  
  & .team-slot__avatar {
    outline: 2px solid var(--persona-primary, var(--color-accent-primary, #d4a84a));
    outline-offset: 2px;
  }
}

/* Zen theme */
[data-theme="zen"] .team-slot__avatar {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="zen"] .team-slot:hover .team-slot__avatar {
  background: rgba(255, 255, 255, 0.9);
}


/* ============================================================================
   UTILITY: PLUS ICON SVG
   Inline SVG for consistent plus icons across components
   ============================================================================ */

.icon-plus {
  --icon-size: 20px;
  --icon-stroke: 2;
  
  width: var(--icon-size);
  height: var(--icon-size);
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  fill: none;
}

/* SVG path for plus icon: <path d="M12 5v14M5 12h14"/> */


/* ============================================================================
   PRINT / REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .icon-btn,
  .add-btn,
  .team-slot,
  .team-slot__avatar,
  .badge--animate {
    transition: none;
    animation: none;
  }
  
  .badge--animate {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .icon-btn,
  .add-btn,
  .team-slot {
    display: none;
  }
}