/* ============================================
   COMPONENTS INDEX
   ============================================

   Main entry point for all component styles.
   Import this file to get all UI components.

   ============================================ */

/* Core Components */
@import '_buttons.css';
@import '_badges.css';
@import '_cards.css';
@import '_forms.css';
@import '_tables.css';
@import '_modals.css';
@import '_alerts.css';
@import '_navigation.css';
@import '_page-header.css';
@import '_settings-layout.css';
@import '_settings-theme.css';

/* Extended Components */
@import '_task-card.css';
@import '_action-item-card.css';
@import '_filter-bar.css';
@import '_stat-cards.css';
@import '_skeleton.css';
@import '_empty-state.css';
@import 'touch-targets.css';
@import 'utilities.css';
@import 'workflow-manager.css';
@import 'email-compose.css';
@import '_onboarding.css';
@import '_landing.css';

/* ============================================
   ADDITIONAL UI COMPONENTS
   ============================================ */

@layer components {

  /* Avatar */
  .avatar,
  .ui-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-full);
    background: var(--ds-color-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-color-text-secondary);
    flex-shrink: 0;
    overflow: hidden;
  }

  .avatar img,
  .ui-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .avatar-sm, .ui-avatar-sm { width: 32px; height: 32px; font-size: var(--ds-font-size-xs); }
  .avatar-lg, .ui-avatar-lg { width: 48px; height: 48px; font-size: var(--ds-font-size-base); }
  .avatar-xl, .ui-avatar-xl { width: 64px; height: 64px; font-size: var(--ds-font-size-lg); }

  .avatar-gradient,
  .ui-avatar-gradient {
    background: var(--ds-gradient-accent);
    color: var(--ds-color-text-inverse);
  }

  /* Divider */
  .ui-divider,
  .divider {
    height: 1px;
    background: var(--ds-border-color-light);
    margin: var(--ds-space-4) 0;
  }

  .ui-divider-vertical,
  .divider-vertical {
    width: 1px;
    height: 100%;
    background: var(--ds-border-color-light);
    margin: 0 var(--ds-space-4);
  }

  /* Progress Bar */
  .ui-progress,
  .progress {
    height: 6px;
    background: var(--ds-color-bg-tertiary);
    border-radius: var(--ds-radius-full);
    overflow: hidden;
  }

  .ui-progress-bar,
  .progress-bar {
    height: 100%;
    background: var(--ds-color-text-primary);
    border-radius: var(--ds-radius-full);
    transition: width var(--ds-transition-slow);
  }

  .progress-bar.success, .ui-progress-bar.success { background: var(--ds-color-success); }
  .progress-bar.warning, .ui-progress-bar.warning { background: var(--ds-color-warning); }
  .progress-bar.error, .ui-progress-bar.error { background: var(--ds-color-error); }
  .progress-bar.info, .ui-progress-bar.info { background: var(--ds-color-info); }

  /* Empty State */
  .ui-empty,
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--ds-space-12) var(--ds-space-8);
  }

  .ui-empty-icon,
  .empty-state-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--ds-space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-color-bg-tertiary);
    border-radius: 50%;
    color: var(--ds-color-text-tertiary);
    font-size: 1.5rem;
  }

  .ui-empty-title,
  .empty-state-title {
    font-size: var(--ds-font-size-lg);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-color-text-primary);
    margin: 0 0 var(--ds-space-2) 0;
  }

  .ui-empty-description,
  .empty-state-text {
    font-size: var(--ds-font-size-sm);
    color: var(--ds-color-text-tertiary);
    margin: 0 0 var(--ds-space-6) 0;
    max-width: 400px;
  }

  /* Icon Container */
  .icon-container {
    width: 44px;
    height: 44px;
    border-radius: var(--ds-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ds-font-size-lg);
  }

  .icon-container.accent {
    background: var(--ds-gradient-accent);
    color: var(--ds-color-text-inverse);
    box-shadow: var(--ds-shadow-accent);
  }

  .icon-container.success { background: var(--ds-color-success-bg); color: var(--ds-color-success); }
  .icon-container.warning { background: var(--ds-color-warning-bg); color: var(--ds-color-warning); }
  .icon-container.error { background: var(--ds-color-error-bg); color: var(--ds-color-error); }
  .icon-container.info { background: var(--ds-color-info-bg); color: var(--ds-color-info); }

  /* Skeleton Loading */
  .ui-skeleton,
  .skeleton {
    background: var(--ds-gradient-skeleton);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--ds-radius-md);
  }

  .ui-skeleton-text, .skeleton-text { height: 14px; }
  .ui-skeleton-title, .skeleton-title { height: 24px; width: 200px; }
  .ui-skeleton-avatar, .skeleton-avatar { width: 40px; height: 40px; border-radius: var(--ds-radius-full); }
  .ui-skeleton-button, .skeleton-button { width: 100px; height: 36px; }

  /* List Items */
  .ui-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .ui-list-item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-4);
    padding: var(--ds-space-4);
    border-bottom: 1px solid var(--ds-border-color-light);
    transition: background var(--ds-transition-fast);
  }

  .ui-list-item:last-child {
    border-bottom: none;
  }

  .ui-list-item:hover {
    background: var(--ds-color-surface-hover);
  }

  .ui-list-item-interactive {
    cursor: pointer;
  }

  .ui-list-item-content {
    flex: 1;
    min-width: 0;
  }

  .ui-list-item-title {
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-color-text-primary);
    margin: 0 0 var(--ds-space-1) 0;
  }

  .ui-list-item-subtitle {
    font-size: var(--ds-font-size-xs);
    color: var(--ds-color-text-secondary);
    margin: 0;
  }

  .ui-list-item-meta {
    font-size: var(--ds-font-size-xs);
    color: var(--ds-color-text-tertiary);
    white-space: nowrap;
  }

  /* Toolbar */
  .toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
    padding: var(--ds-space-4);
    background: var(--ds-color-surface);
    border: 1px solid var(--ds-border-color);
    border-radius: var(--ds-radius-lg);
    margin-bottom: var(--ds-space-6);
  }

  @media (min-width: 768px) {
    .toolbar {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .toolbar-left,
  .toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
  }

  /* Results Header */
  .results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ds-space-4);
    padding: 0 var(--ds-space-1);
  }

  .results-count {
    color: var(--ds-color-text-secondary);
    font-size: var(--ds-font-size-sm);
  }

  .results-count strong {
    color: var(--ds-color-text-primary);
    font-weight: var(--ds-font-weight-semibold);
  }

}