@layer components {
  /*
   * Study events
   */
  
  .study-events {
    padding: 2rem 0;
  
    h1 {
      margin-bottom: 2rem;
      color: var(--color-text-primary);
    }
  
    .filters {
      background: var(--color-background-secondary);
      padding: 1.5rem;
      border-radius: 8px;
      margin-bottom: 2rem;
  
      form {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        align-items: end;
      }
  
      .filter-group {
        display: flex;
        flex-direction: column;
  
        label {
          font-weight: 600;
          margin-bottom: 0.5rem;
          color: var(--color-text-primary);
          font-size: 0.9rem;
        }
  
        .form-select,
        .form-input {
          padding: 0.5rem;
          border: 1px solid var(--color-border);
          border-radius: 4px;
          background: var(--color-background-primary);
          color: var(--color-text-primary);
          font-size: 0.95rem;
  
          &:focus {
            outline: none;
            border-color: var(--color-primary);
          }
        }
      }
  
      .filter-actions {
        display: flex;
        gap: 0.5rem;
        align-items: flex-end;
  
        .btn {
          padding: 0.5rem 1.5rem;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          font-weight: 600;
          transition: all 0.2s;
  
          &.btn-primary {
            background: var(--color-primary);
            color: white;
  
            &:hover {
              background: var(--color-primary-dark);
            }
          }
  
          &.btn-secondary {
            background: var(--color-background-tertiary);
            color: var(--color-text-secondary);
  
            &:hover {
              background: var(--color-border);
            }
          }
        }
      }
    }
  
    .study-events-table {
      background: var(--color-background-primary);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgb(var(--rgb-black) / 0.1);
  
      table {
        width: 100%;
        border-collapse: collapse;
  
        thead {
          background: var(--color-background-secondary);
          border-bottom: 2px solid var(--color-border);
  
          th {
            padding: 1rem;
            text-align: left;
            font-weight: 600;
            color: var(--color-text-primary);
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
          }
        }
  
        tbody {
          tr {
            border-bottom: 1px solid var(--color-border);
  
            &:last-child {
              border-bottom: none;
            }
  
            &:hover {
              background: var(--color-background-secondary);
            }
  
            td {
              padding: 1rem;
              color: var(--color-text-secondary);
              font-size: 0.95rem;
  
              &:first-child {
                font-weight: 500;
                color: var(--color-text-primary);
              }
            }
          }
  
          .no-results {
            text-align: center;
            padding: 3rem;
            color: var(--color-text-tertiary);
            font-style: italic;
          }
        }
      }
    }
  
    @media (max-width: 991.98px) {
      .filters form {
        grid-template-columns: 1fr;
      }
  
      .study-events-table {
        overflow-x: auto;
  
        table {
          min-width: 600px;
        }
      }
    }
  }
}