CreatorCenter_OOIN/src/styles/DatabaseList.scss

@import './custom-theme.scss';

.creator-database-table {
  .table {
    border-collapse: separate;
    border-spacing: 0;
    
    th {
      background-color: #f8f9fa;
      border-top: none;
      border-bottom: 1px solid #dee2e6;
      padding: 1rem 0.75rem;
      font-weight: 600;
      font-size: 0.875rem;
      color: #495057;
      cursor: pointer;
      position: relative;
      vertical-align: middle;
      
      &:first-child {
        border-top-left-radius: 0.5rem;
      }
      
      &:last-child {
        border-top-right-radius: 0.5rem;
      }
      
      &:hover {
        background-color: #f1f3f5;
      }
    }
    
    td {
      padding: 0.75rem;
      vertical-align: middle;
      border-bottom: 1px solid #f1f3f4;
      font-size: 0.875rem;
    }
    
    tbody tr {
      &:hover {
        background-color: rgba(0, 0, 0, 0.02);
      }
      
      &.selected {
        background-color: rgba(99, 102, 241, 0.05);
        
        &:hover {
          background-color: rgba(99, 102, 241, 0.1);
        }
      }
      
      &:last-child td {
        border-bottom: none;
      }
    }
  }
  
  .creator-cell {
    .creator-avatar {
      position: relative;
      width: 36px;
      height: 36px;
      margin-right: 12px;
      
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #e2e8f0;
      }
      
      .verified-badge {
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: #10b981;
        color: white;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        font-size: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    .creator-name {
      font-weight: 500;
    }
  }
  
  .category-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    background-color: #f8f9fa;
    font-size: 0.75rem;
    color: #495057;
    white-space: nowrap;
    
    &.phones {
      background-color: rgba(99, 102, 241, 0.1);
      color: #6366f1;
    }
    
    &.women {
      background-color: rgba(244, 114, 182, 0.1);
      color: #f472b6;
    }
    
    &.sports {
      background-color: rgba(52, 211, 153, 0.1);
      color: #34d399;
    }
    
    &.food {
      background-color: rgba(251, 146, 60, 0.1);
      color: #fb923c;
    }
    
    &.health {
      background-color: rgba(56, 189, 248, 0.1);
      color: #38bdf8;
    }
    
    &.kitchen {
      background-color: rgba(168, 85, 247, 0.1);
      color: #a855f7;
    }
  }
  
  .level-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    white-space: nowrap;
    
    &.ecommerce-level {
      background-color: rgba(99, 102, 241, 0.1);
      color: #6366f1;
    }
    
    &.exposure-level {
      background-color: rgba(14, 165, 233, 0.1);
      color: #0ea5e9;
      
      &[data-level^="KOC"] {
        background-color: rgba(52, 211, 153, 0.1);
        color: #34d399;
      }
      
      &[data-level^="KOL"] {
        background-color: rgba(251, 113, 133, 0.1);
        color: #fb7185;
      }
    }
  }
  
  .colored-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    
    &.blue {
      background-color: #6366f1;
    }
  }
  
  .social-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &.tiktok-icon {
      font-size: 14px;
      color: #000000;
    }
  }
}