/* ============================================
   COMPONENTS.CSS - UI Component Styles
   KlassKit Hub
   ============================================ */

/* ============================================
   1. BUTTONS
   ============================================ */

/* --- Chunky Buttons --- */
.btn-chunky {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;

  border: var(--border-width-medium) solid var(--border-primary);
  box-shadow: 0 4px 0 var(--border-primary);

  cursor: pointer;
  user-select: none;

  transition: all var(--transition-fast);
  transform: translateY(0);
}

.btn-chunky:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--border-primary);
}

.btn-chunky:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--border-primary);
}

.btn-chunky:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

/* Active state for filter buttons */
.btn-chunky.active {
  background-color: var(--border-primary);
  color: var(--bg-primary);
  transform: translateY(4px);
  box-shadow: 0 0 0 transparent;
}

/* --- Stick Buttons --- */
.stick-btn {
  width: 44px;
  /* WCAG minimum touch target */
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--bg-secondary);
  color: var(--text-primary);
  border: var(--border-width-medium) solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 0 var(--border-primary);

  cursor: pointer;
  transition: all var(--transition-fast);
}

.stick-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--border-primary);
}

.stick-btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--border-primary);
}

/* ============================================
   2. CARDS & CONTAINERS
   ============================================ */

/* --- Hub Cards --- */
.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;

  background: var(--surface-card);
  border: var(--border-width-thick) solid var(--border-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);

  overflow: hidden;
  cursor: pointer;

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);

  /* Enable 3D transforms */
  transform-style: preserve-3d;
}

.hub-card:hover {
  z-index: var(--z-elevated);
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-lg);
}

.hub-card:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-sm);
}

.hub-card:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 4px;
}

.dark .hub-card:hover {
  filter: brightness(1.05);
}

/* Responsive card shadows */
@media (max-width: 768px) {
  .hub-card {
    box-shadow: var(--shadow-sm);
  }

  .hub-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-md);
  }
}

@media (max-width: 640px) {
  .hub-card {
    box-shadow: var(--shadow-sm);
  }

  .hub-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-md);
  }
}

/* ============================================
   3. FORM ELEMENTS
   ============================================ */

/* --- Input Fields --- */
.input-chunky {
  border: var(--border-width-medium) solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);

  color: var(--text-primary);
  background-color: var(--bg-secondary);

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.input-chunky:focus {
  outline: none;
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-sm);
  background-color: var(--surface-card);
  border-color: var(--color-blue);
  /* Assuming you have a blue variable */
}

.dark .input-chunky:focus {
  background-color: var(--bg-primary);
}

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

/* ============================================
   4. TAGS & PILLS
   ============================================ */

/* --- Stickers/Tags --- */
.sticker {
  display: inline-flex;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;

  border: var(--border-width-medium) solid var(--border-primary);
  box-shadow: var(--shadow-sm);

  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  cursor: default;
}

.sticker:hover {
  transform: rotate(-3deg) scale(1.05);
  box-shadow: var(--shadow-md);
  z-index: var(--z-elevated);
}

/* --- Recent Pills --- */
.recent-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;

  background: var(--surface-card);
  border: var(--border-width-medium) solid var(--border-primary);
  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
  cursor: pointer;
}

.recent-pill:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-md);
}

.recent-pill:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* ============================================
   5. MODALS & OVERLAYS
   ============================================ */

/* --- Confirmation Modal --- */
#confirm-modal {
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

#confirm-modal.hidden {
  pointer-events: none;
}

#confirm-modal .bg-white {
  animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#confirm-modal button:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
}

/* --- Max Tabs Warning --- */
.max-tabs-warning {
  position: fixed;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);

  padding: 1rem 1.5rem;
  background: var(--color-orange);
  color: white;

  border: 3px solid var(--border-primary);
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);

  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 1rem;

  z-index: 1000;
  animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dark .max-tabs-warning {
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}

/* ============================================
   8. PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU acceleration for animated elements */
.hub-card,
.btn-chunky,
.floating-stick,
.shape {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Contain paint for better performance */
.hub-card,
.living-bg {
  contain: paint;
}