/* ==========================================================================
   FitCheck Component Library
   Reusable UI patterns built on tokens.css.
   Naming: fc-{component}--{modifier}
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.fc-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.fc-card--clickable {
  cursor: pointer;
}

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

.fc-card--clickable:active {
  transform: translateY(0);
}

.fc-card--danger {
  border-left: 4px solid var(--color-error);
  background: #FDF7F7;
}

.fc-card--danger h4,
.fc-card--danger h5 {
  color: var(--color-error) !important;
}

/* --------------------------------------------------------------------------
   Page Section
   -------------------------------------------------------------------------- */
.fc-section {
  padding: var(--space-12) 0;
}

@media (max-width: 768px) {
  .fc-section {
    padding: var(--space-6) 0;
  }
}

/* --------------------------------------------------------------------------
   Page Header
   -------------------------------------------------------------------------- */
.fc-page-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.fc-page-header h2,
.fc-page-header h3 {
  font-family: var(--font-heading) !important;
  font-weight: var(--font-weight-normal) !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-2);
}

.fc-page-header p {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
}

/* --------------------------------------------------------------------------
   Section Header (inline, for subsections within a page)
   -------------------------------------------------------------------------- */
.fc-section-header {
  font-family: var(--font-heading) !important;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium) !important;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Empty State
   -------------------------------------------------------------------------- */
.fc-empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-bg-tertiary);
}

.fc-empty-state-icon {
  font-size: 3rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.fc-empty-state h4 {
  font-family: var(--font-heading) !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-2);
}

.fc-empty-state p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

/* --------------------------------------------------------------------------
   Detail Row (key-value pairs)
   -------------------------------------------------------------------------- */
.fc-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.fc-detail-row:last-child {
  border-bottom: none;
}

.fc-detail-label {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.fc-detail-value {
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

/* --------------------------------------------------------------------------
   Form Group
   -------------------------------------------------------------------------- */
.fc-form-group {
  margin-bottom: var(--space-5);
}

.fc-form-group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.fc-form-group .form-control,
.fc-form-group .form-select {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--color-border) !important;
  background-color: var(--color-bg-secondary) !important;
  padding: 0.8rem 1rem !important;
  font-family: var(--font-body) !important;
  color: var(--color-text-primary) !important;
}

.fc-form-group .form-control:focus,
.fc-form-group .form-select:focus {
  border-color: var(--color-brand-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(184, 169, 154, 0.15) !important;
}

.fc-form-group .form-text {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.fc-btn-primary {
  background-color: var(--color-brand-dark) !important;
  color: var(--color-bg-secondary) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 0.6em 1.8em !important;
  font-family: var(--font-body) !important;
  font-weight: var(--font-weight-medium) !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-base) !important;
  cursor: pointer;
}

.fc-btn-primary:hover {
  background-color: #1A1A1A !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.fc-btn-secondary {
  background: var(--color-bg-secondary) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 0.6em 1.8em !important;
  font-family: var(--font-body) !important;
  font-weight: var(--font-weight-medium) !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-base) !important;
  cursor: pointer;
}

.fc-btn-secondary:hover {
  border-color: var(--color-brand-dark) !important;
  background: var(--color-bg-primary) !important;
  transform: translateY(-2px);
}

.fc-btn-danger {
  background-color: var(--color-error) !important;
  color: var(--color-bg-secondary) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 0.6em 1.8em !important;
  font-family: var(--font-body) !important;
  font-weight: var(--font-weight-medium) !important;
  transition: all var(--transition-base) !important;
  cursor: pointer;
}

.fc-btn-danger:hover {
  background-color: #C08E8E !important;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------------- */
.fc-badge {
  display: inline-block;
  background: var(--color-brand-accent);
  color: var(--color-text-primary);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

.fc-badge--success {
  background: var(--color-success);
  color: white;
}

.fc-badge--score {
  background: rgba(184, 169, 154, 0.15);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

/* --------------------------------------------------------------------------
   Avatar (initials-based)
   -------------------------------------------------------------------------- */
.fc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-brand-accent);
  color: var(--color-text-primary);
  font-family: var(--font-heading) !important;
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-normal);
}

.fc-avatar--sm {
  width: 40px;
  height: 40px;
  font-size: var(--text-base);
}

.fc-avatar--lg {
  width: 96px;
  height: 96px;
  font-size: var(--text-4xl);
}

/* --------------------------------------------------------------------------
   Gallery Grid
   -------------------------------------------------------------------------- */
.fc-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}

.fc-gallery-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
}

.fc-gallery-item {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
}

.fc-gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.fc-gallery-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.fc-gallery-item-info {
  padding: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fc-gallery-item-info span {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  text-transform: capitalize;
}

/* --------------------------------------------------------------------------
   Filter Bar
   -------------------------------------------------------------------------- */
.fc-filter-bar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.fc-filter-btn {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.4em 1.2em;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.fc-filter-btn:hover {
  border-color: var(--color-brand-dark);
  background: var(--color-bg-primary);
}

.fc-filter-btn.active {
  background: var(--color-brand-dark);
  color: var(--color-bg-secondary);
  border-color: var(--color-brand-dark);
}

/* --------------------------------------------------------------------------
   Suggestion Card (outfit suggestions)
   -------------------------------------------------------------------------- */
.fc-suggestion-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  transition: box-shadow var(--transition-base);
}

.fc-suggestion-card:hover {
  box-shadow: var(--shadow-sm);
}

.fc-suggestion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.fc-suggestion-header h5 {
  color: var(--color-text-primary) !important;
  font-family: var(--font-heading) !important;
  margin: 0;
  font-size: var(--text-base);
}

.fc-suggestion-desc {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

.fc-suggestion-items {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.fc-suggestion-item {
  text-align: center;
}

.fc-suggestion-item img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.fc-suggestion-item small {
  display: block;
  color: var(--color-text-secondary);
  text-transform: capitalize;
  margin-top: var(--space-1);
}

.fc-suggestion-gap {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(229, 220, 211, 0.3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   CAPTCHA
   -------------------------------------------------------------------------- */
.fc-captcha {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.fc-captcha-display {
  font-family: 'Courier New', monospace;
  background: var(--color-bg-secondary);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xl);
  letter-spacing: 4px;
  user-select: none;
}

/* --------------------------------------------------------------------------
   Color Swatch (closet item color indicators)
   -------------------------------------------------------------------------- */
.fc-color-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   Category Header (closet groups)
   -------------------------------------------------------------------------- */
.fc-category-header {
  color: var(--color-text-primary);
  font-family: var(--font-heading) !important;
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   Delete Button (overlay on gallery items)
   -------------------------------------------------------------------------- */
.fc-delete-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: var(--color-error);
  cursor: pointer;
  border-radius: var(--radius-full);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  z-index: 2;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.fc-gallery-item:hover .fc-delete-btn {
  opacity: 1;
}

.fc-delete-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}